yanzong_qianduan/pages/shop/detail.vue

<template>
  <view v-if="!isLoading" class="container">
    <view class="header">
      <view class="shop-logo">
        <image class="image" :src="detail.logo_url"></image>
      </view>
      <view class="shop-name">
        <text>{{ detail.shop_name }}</text>
      </view>
      <view v-if="detail.summary" class="shop-summary dis-flex">
        <text>门店简介：{{ detail.summary }}</text>
      </view>
    </view>
    <view class="content">
      <view class="content-item dis-flex flex-y-center">
        <view class="content-item__icon dis-flex">
          <text class="iconfont icon-shijian"></text>
        </view>
        <view class="content-item__text flex-box dis-flex">
          <text class="f-26">{{ detail.shop_hours }}</text>
        </view>
      </view>
      <view class="content-item dis-flex flex-y-center" @click="onOpenLocation()">
        <view class="content-item__icon dis-flex">
          <text class="iconfont icon-dingwei"></text>
        </view>
        <view class="content-item__text flex-box dis-flex">
          <text class="f-26">{{ detail.region.province }}{{ detail.region.city }}{{ detail.region.region }}{{ detail.address }}</text>
        </view>
        <view class="content-item__arrow dis-flex">
          <text class="iconfont icon-arrow-right"></text>
        </view>
      </view>
      <view class="content-item dis-flex flex-y-center" @click="onMakePhoneCall()">
        <view class="content-item__icon dis-flex">
          <text class="iconfont icon-dianhua"></text>
        </view>
        <view class="content-item__text flex-box dis-flex">
          <text class="f-26">{{ detail.phone }}</text>
        </view>
        <view class="content-item__arrow dis-flex">
          <text class="iconfont icon-arrow-right"></text>
        </view>
      </view>
    </view>
  </view>

</template>

<script>
  import WxofficialMixin from '@/core/mixins/wxofficial'
  import * as ShopApi from '@/api/shop'

  export default {
    mixins: [WxofficialMixin],
    data() {
      return {
        // 正在加载中
        isLoading: true,
        // 当前门店ID
        shopId: undefined,
        // 门店详情
        detail: null
      }
    },

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad(options) {
      // 记录当前门店ID
      this.shopId = options.shopId
      // 获取门店详情
      this.getShopDetail()
    },

    methods: {

      // 获取门店详情
      getShopDetail() {
        const app = this
        app.isLoading = true
        ShopApi.detail(app.shopId)
          .then(result => {
            app.detail = result.data.detail
            // 设置微信公众号链接分享卡片内容
            app.setWxofficialShareData()
          })
          .finally(() => app.isLoading = false)
      },

      // 拨打电话
      onMakePhoneCall() {
        const app = this
        uni.makePhoneCall({
          phoneNumber: app.detail.phone
        })
      },

      // 查看位置
      onOpenLocation() {
        const app = this
        const { detail } = app
        uni.openLocation({
          name: detail.shop_name,
          address: detail.region.province + detail.region.city + detail.region.region + detail.address,
          longitude: Number(detail.longitude),
          latitude: Number(detail.latitude),
          scale: 15
        })
      },

      // 设置微信公众号链接分享卡片内容
      setWxofficialShareData() {
        const app = this
        app.updateShareCardData({ title: app.detail.shop_name })
      },

    },

    /**
     * 分享当前页面
     */
    onShareAppMessage() {
      const app = this
      // 构建页面参数
      const params = app.$getShareUrlParams({ shopId: app.shopId })
      return {
        title: app.detail.shop_name,
        path: "/pages/shop/detail?" + params
      }
    },

    /**
     * 分享到朋友圈
     * 本接口为 Beta 版本，暂只在 Android 平台支持，详见分享到朋友圈 (Beta)
     * https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/share-timeline.html
     */
    onShareTimeline() {
      const app = this
      // 构建页面参数
      const params = app.$getShareUrlParams({ shopId: app.shopId })
      return {
        title: app.detail.shop_name,
        path: "/pages/shop/detail?" + params
      }
    },

  }
</script>

<style lang="scss">
  page {
    background: #fff;
  }
</style>
<style lang="scss" scoped>
  .container {
    background: #fff;
    padding: 0 30rpx;
  }

  .header {
    padding: 30rpx 0;
    border-bottom: 1rpx solid #f1f1f1;

    .shop-logo,
    .shop-name {
      text-align: center;
    }

    .shop-logo {
      .image {
        width: 130rpx;
        height: 130rpx;
        border-radius: 50%;
        box-shadow: 0 0 30rpx rgba(0, 0, 0, 0.1);
      }
    }

    .shop-name {
      margin-top: 16rpx;
      font-size: 32rpx;
    }

    .shop-summary {
      padding: 20rpx;
      margin-top: 30rpx;
      font-size: 26rpx;
      line-height: 1.6;
      background: #f9f9f9;
      border-radius: 6rpx;
    }

  }

  .content {
    margin-top: 30rpx;

    .content-item {
      padding: 12rpx 0;

      .content-item__text {
        padding: 0 20rpx;
      }
    }

  }
</style>