ch-tgr-h5/src/views/User/ShopInfo.vue

<template>
  <BasePage>
    <div class="shopinfo">
      <img src="/img/shopinfo-top.jpg" style="width: 100%;" alt="店铺图片" class="shop-image">

      <div class="shop_details">
        <div class="shopi_box">
          <img :src="$file(shopInfo.shopimg) || '/img/avatar.png'" alt="" @click="previewImage(shopInfo.shopimg)">
          <div class="info_box">
            <div class="name_box">
              <b>{{ shopInfo.shopname }}</b>
              <span class="type">{{ shopInfo.shopcatename }}</span>
            </div>
            <div class="tags">
              <div class="disc_box"><img src="/img/icon_disc.png" alt="">{{ shopInfo.feeratio }}%</div>
              <div class="canpay_box"><img src="/img/icon_canpay.png" alt="">可到店消费</div>
            </div>
          </div>
        </div>

        <div class="tomap">
          <div class="address">
            <img class="addr_icon" src="/img/addr_r.png" alt="">
            <div class="ri">
              <span>{{ shopInfo.shopprovince }}{{ shopInfo.shopcity }}{{ shopInfo.shopcounty }}{{ shopInfo.shopstreet ||
                '' }}{{ shopInfo.shopaddress }}</span>
              <div class="distance" v-if="shopInfo.distance">距离{{ (shopInfo.distance / 1000)?.toFixed(2) }}km</div>
            </div>
          </div>

          <div class="map_icon" @click="openMap">
            <img src="/img/map.png" alt="">
          </div>
        </div>

        <div class="onlinetime">
          <div class="left_box">
            <img class="clock_icon" src="/img/clock.png" alt="">
            <span>{{ shopInfo.businesstime || '暂未设置' }}</span>
          </div>

          <div class="map_icon" @click="callPhone">
            <img src="/img/icon_phone.png" alt="">
          </div>
        </div>
      </div>

      <hr style="margin: 0; border: none; height: 1.6vw; background-color: #f5f5f5;">

      <div class="intro">
        <b class="title">
          商家介绍
        </b>
        <div class="htmlcontent" v-html="shopInfo.shopdescriptionhtml || '暂无商家介绍'"></div>
      </div>

      <van-action-bar placeholder>
        <van-action-bar-icon icon="shop-o" text="附近的店" @click="$router.back()" />
        <van-action-bar-button color="#ca2904" type="danger" text="到店买单" @click="openMap" />
      </van-action-bar>

    </div>
  </BasePage>
</template>

<script>
export default {
  name: 'ShopInfo',
  data() {
    return {
      // 店铺信息数据
      shopInfo: {
      }
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      this.$get('/v1/client/DShopsClient/list', { userid: this.$route.query.id }).then(res => {
        this.shopInfo = res.data.items[0] || {}
      });
    },
    callPhone() {
      if (this.shopInfo.shopphone) {
        window.location.href = `tel:${this.shopInfo.shopphone}`
      }
    },
    previewImage(url) {
      const imageUrl = this.$file(url);
      if (imageUrl) {
        this.$showImagePreview({ images: [imageUrl], startPosition: 0 });
      }
    },
    openMap() {
      if (this.shopInfo.shoplatitude && this.shopInfo.shoplongitude) {
        const lat = this.shopInfo.shoplatitude;
        const lon = this.shopInfo.shoplongitude;
        const fullAddress = (
          (this.shopInfo.shopprovince || '') +
          (this.shopInfo.shopcity || '') +
          (this.shopInfo.shopcounty || '') +
          (this.shopInfo.shopstreet || '') +
          (this.shopInfo.shopaddress || '')
        );
        if (wx && this.$isWechat()) {
          this.$post('/v1/client/HWxinfoClient/share', JSON.stringify(location.href)).then(res => {
            const data = res.data || {};
            const jsApiList = data.jsApiList || ['onMenuShareTimeline', 'onMenuShareAppMessage', 'updateAppMessageShareData', 'updateTimelineShareData', 'openLocation', 'getLocation'];
            const openTagList = data.openTagList || ['wx-open-launch-weapp'];
            jsApiList.push('wx-open-launch-weapp');
            wx.config({
              debug: false,
              appId: data.appid,
              timestamp: Number(data.timestamp) || 0,
              nonceStr: data.noncestr,
              signature: data.signature,
              jsApiList: jsApiList,
              openTagList: openTagList
            });
            wx.ready(() => {
              wx.getLocation({
                type: 'gcj02',
                success: (e) => {
                  this.searchparams.latitude = e.latitude;
                  this.searchparams.longitude = e.longitude;
                }
              });
              wx.openLocation({
                latitude: Number(lat),
                longitude: Number(lon),
                name: this.shopInfo.shopname || '',
                address: fullAddress,
                scale: 15,
                infoUrl: '',
                success: () => {
                  console.log('wx.openLocation success');
                },
                fail: (err) => {
                  console.error('wx.openLocation fail', err);
                  // window.open(`https://uri.amap.com/navigation?to=${lon},${lat},${fullAddress}&mode=car&src=shop`, '_blank');
                }
              });
            });
            wx.error((err) => {
              console.error('wx.error', err);
            });
            // wx.error((err) => {
            //   console.error('wx.openLocation error', err);
            //   window.open(`https://uri.amap.com/navigation?to=${lon},${lat},${fullAddress}&mode=car&src=shop`, '_blank');
            // });
          });
        } else {
          window.open(`https://uri.amap.com/navigation?to=${lon},${lat},${fullAddress}&mode=car&src=shop`, '_blank');
        }
      }
    },
  }
}
</script>