Huanyuyuehui/pages/shop_details/index.vue

<template>
  <view class="shop_details" :style="viewColor">
    <view class="head">
      <swipers v-if="shopInfo.detail&&shopInfo.detail.images" :imgUrls="shopInfo.detail.images"></swipers>
      <view class="back" @tap="toRouter"
        ><i class="iconfont icon-xiangzuo"></i
      ></view>
    </view>
    <view class="main">
      <view class="title">
        <view class="title_left">
          <image :src="shopInfo.mer_avatar" mode=""></image>
        </view>
        <view class="title_right">
          <view class="txt">{{ shopInfo.mer_name }}</view>
          <view class="grade">
            <text class="iconfont icon-shitixing"></text>
            <text>评分{{ shopInfo.service_score }}分</text>
          </view>
          <view class="desc" v-if="shopInfo.detail&&shopInfo.detail.promise"
            >商家承诺：{{
              shopInfo.detail.promise ? shopInfo.detail.promise : "啥也没有留下"
            }}</view
          >
          <view class="site" @tap="openMap">
            <view>
              <text class="iconfont icon-dingwei"></text>
              <text>{{ shopInfo.mer_address }}</text>
            </view>
            <view class="iconfont icon-jiantou"></view>
          </view>
        </view>
      </view>
      <view class="business">
        <view class="business_one">营业中</view>
        <view class="business_one" v-if="shopInfo.config">
          <text v-for="(item, index) in shopInfo.config.mer_take_day">{{
            " " + week[item]
          }}</text>
        </view>
        <view class="business_one" v-if="shopInfo.config">
          <text>{{ shopInfo.config.mer_take_time.join("-") }}</text>
        </view>
        <!-- <view class="iconfont icon-dianhua"></view> -->
        <view class="business_one">
          <view> 商家电话：15834567081 </view>
          <text class="copy" @tap="setCopy(15834567081)">复制</text>
        </view>
        <view class="business_list">可提供：</view>
        <view class="business_list" v-if="shopInfo.detail">
          <text v-for="(item, index) in shopInfo.detail.services">{{
            item
          }}</text>
        </view>
      </view>
      <view class="tabs">
        <view class="tabs_nav">
          <view
            class="tabs_item"
            v-for="(item, index) in tabList"
            :class="actIndex == index ? 'active' : ''"
            @tap="handleTab(index)"
            >{{ item.name }}</view
          >
        </view>
        <view class="conter">
          <!-- #ifndef APP-PLUS -->
          <!-- <jyf-parser v-if="description.type == 0" :domain='domain' :html="description.content.replace(/<br\/>/ig, '')" ref="article" :tag-style="tagStyle"></jyf-parser> -->
          <!-- #endif -->
          <!-- #ifdef APP-PLUS -->
          <!-- <view v-if="description.type == 0" class="description" v-html="description.content.replace(/<br\/>/ig, '')"></view> -->
          <!-- #endif -->
          <view class="product_content" v-html="shopInfo.detail.detail"></view>
          <!-- <view class="product_content">
						欢迎来到我们的火锅店！我们是一个有着悠久历史和传统美食文化的品牌，我们的火锅是采用新鲜的食材和秘制的调料烹饪而成，每一口都充满了浓郁的鲜香和醇厚的口感。
					</view>
					<view class="product_content">
						我们的品牌特色在于选用上等食材，如草原鲜嫩肥羊、天然海鲜等，以及秘制香料和特色锅底。店内环境优雅舒适，服务周到细致，为您打造一处独具特色的火锅天地。
					</view> -->
        </view>
      </view>
    </view>
    <view class="btn" @tap="handlePay">去付款</view>
  </view>
</template>

<script>
import swipers from "@/components/swipers";
import parser from "@/components/jyf-parser/jyf-parser";
import { mapGetters } from "vuex";
import { shopDetail } from "@/api/shop.js";
export default {
  components: { swipers, "jyf-parser": parser },
  data() {
    return {
      shopInfo: {
        swiper_image: [{ img: "/static/images/shop_bg.png" }],
      },
      week: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
      tabList: [{ name: "商家信息" }],
      actIndex: 0,
      id: 0,
      shopInfo: {},
    };
  },
  computed: {
    ...mapGetters(["viewColor"]),
  },
  onLoad(option) {
    this.id = option.id;
    this.init();
  },
  methods: {
    init() {
      shopDetail({ id: this.id }).then((res) => {
        if (res) {
          this.shopInfo = res.data;
          console.log("res: ", res);
        }
      });
    },
    handleTab(i) {
      this.actIndex = i;
    },
    setCopy(content) {
      // 该方法不支持h5
      //#ifndef APP-PLUS
      uni.setClipboardData({
        data: String(content), // 必须字符串
        success: function () {
          console.log("success");
        },
      });
      //#endif

      // h5端赋值方法，使用创建节点
      // #ifdef H5
      if (!document.queryCommandSupported("copy")) {
        // 兼容某些浏览器的判断
        console.log("该浏览器不支持");
      }
      let textarea = document.createElement("textarea");
      textarea.value = content;
      textarea.readOnly = "readOnly";
      document.body.appendChild(textarea);
      textarea.select(); // 选择对象
      textarea.setSelectionRange(0, content.length); // 核心
      let result = document.execCommand("copy"); // 执行浏览器复制命令
      if (result) {
        uni.showToast({
          title: "复制成功",
          duration: 2000,
          icon: "none",
        });
      }
      textarea.remove();
      // #endif
    },
    handlePay() {
      // 从相机和相册扫码
      // #ifdef APP-PLUS
      uni.scanCode({
        scanType: ["qrCode"],
        success: function (res) {
          console.log("二维码信息：" + res);
        },
      });
      // #endif
    },
    toRouter() {
      uni.navigateBack();
    },
    openMap() {
      uni.openLocation({
        latitude: Number(this.shopInfo.lat),
        longitude: Number(this.shopInfo.long),
        name: this.shopInfo.mer_name,
        address: this.shopInfo.mer_info,
        // scale:8,
        success: function () {
          console.log("success");
        },
        fail: function (error) {
          console.log("error", error);
        },
      });
    },
  },
};
</script>

<style scoped lang="scss">
.over {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.shop_details {
  font-family: PingFang SC;
  .head {
    position: relative;
    .back {
      position: absolute;
      top: 88rpx;
      left: 40rpx;
      color: #fff;
      .iconfont {
        font-size: 40rpx;
      }
    }
  }
  .main {
    position: relative;
    height: calc(100vh - 400rpx);
    background: #fff;
    margin-top: -40rpx;
    border-radius: 32rpx 32rpx 0 0;
    padding: 28rpx;
    .title {
      display: flex;
      flex-direction: row;

      .title_left {
        image {
          width: 160rpx;
          height: 160rpx;
          border-radius: 12rpx;
        }
      }
      .title_right {
        margin-left: 10rpx;
        width: 100%;
        .txt {
          font-size: 32rpx;
          color: #333333;
        }
        .grade,
        .desc,
        .site {
          font-size: 24rpx;
          margin-top: 8rpx;
        }
        .grade {
          color: #fe8c16;
          & > :first-child {
            margin-right: 8rpx;
          }
        }
        .desc {
          color: #4e4e4e;
        }
        .site {
          color: #999999;
          display: flex;
          justify-content: space-between;
          align-items: center;
          font-size: 24rpx;
          .iconfont {
            font-size: 24rpx;
          }
          & > :first-child {
            max-width: 320rpx;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            & > :first-child {
              margin-right: 8rpx;
            }
          }
        }
      }
    }
    .business {
      margin-top: 40rpx;
      background-color: color-mix(in oklch, var(--view-theme), transparent 90%);
      // opacity: 0.8;
      border-radius: 16rpx;
      padding: 24rpx;
      &_one {
        font-size: 28rpx;
        &:nth-child(1) {
          color: #333333;
        }
        &:nth-child(2) {
          margin-top: 12rpx;
          color: #999;
        }
        &:nth-child(4) {
          margin-top: 12rpx;
          color: #333;
          display: flex;
          justify-content: space-between;
          .copy {
            color: var(--view-theme);
          }
        }
      }
      &_list {
        margin-top: 12rpx;
        text {
          font-size: 24rpx;
          // color: var(--view-theme);
          // border: #1372F5 1px solid;
          color: var(--view-theme);
          border: var(--view-theme) 1px solid;
          border-radius: 8rpx;
          padding: 0 16rpx;
          &:not(:first-child) {
            margin-left: 20rpx;
          }
        }
      }
    }
    .tabs {
      margin-top: 40rpx;
      &_nav {
        display: flex;
        flex-direction: row;
      }
      &_item {
        font-size: 32rpx;
        color: #999;
        & + .tabs_item {
          margin-left: 68rpx;
        }
      }
      .active {
        color: #333;
      }
    }
    .conter {
      margin-top: 28rpx;
      .product_content {
        color: #666;
      }
    }
  }
  .btn {
    position: fixed;
    bottom: 30rpx;
    width: 80%;
    height: 92rpx;
    background-image: linear-gradient(
      90deg,
      var(--view-bntColor21) 0%,
      var(--view-bntColor22) 100%
    );
    border-radius: 60rpx;
    text-align: center;
    line-height: 92rpx;
    color: #fff;
    left: 50%;
    transform: translateX(-50%);
  }
}
</style>