yicangzongtai_app_240321/pages/nearbyShop/goodsDetail.vue

<template>
  <view class="container-goods">
    <navbar :config="config" backColor="#666"></navbar>
    <view class="header">
      <shop-goods :goodsDetail="goodsDetail"></shop-goods>
    </view>
    <view class="mian">
      <view class="label">
        <text class="title">详情</text>
      </view>
      <view class="text">
        {{goodsDetail.details || '暂无详情'}}
      </view>
      <template v-for="item in goodsDetail.details_images">
        <image class="goods-banner" :src="item" mode="widthFix"></image>
      </template>
    </view>
    <view class="footer">
      <view class="btn" @click="callPhone">
        <view class="iconfont3">&#xe679;</view>
        打电话
      </view>
      <view class="btn location" @click="jump">
        <view class="iconfont3">&#xe613;</view>
        导航去
      </view>
    </view>
  </view>
</template>

<script>
  import shopGoods from "@/components/shop-goods.vue";
  export default {
    components: {
      shopGoods
    },
    data() {
      return {
        config: {
          back: true,
          title: '商品详情',
          color: '#1a1a1a',
          backgroundColor: [1, "#fff"],
          statusBarFontColor: '#fff',
          leftSlot: true
        },
        goodsId: '',
        shopId: '',
        shopInfo: {},
        goodsDetail: {}
      }
    },
    onLoad(options) {
      if (options && options.goodsId && options.shopId) {
        this.goodsId = options.goodsId
        this.shopId = options.shopId
        this.getShopInfo(options.shopId)
        this.getGoodsInfo(options.goodsId)
      }
    },
    methods: {
      getGoodsInfo(goodsId) {
        this.$http.get(`/offline/goods/info/${goodsId}`).then(res => {
          if (res.code == 200 && res.data) {
            this.goodsDetail = res.data
          }
        })
      },
      // 获取店铺信息
      getShopInfo(shopId) {
        this.$http.get("/yxt/shop/info/" + shopId).then((res) => {
          // uni.stopPullDownRefresh();
          // this.loading = false;
          if (res.data && res.code == 200) {
            this.shopInfo = res.data;
          }
        });
      },
      callPhone() {
        if (!this.shopInfo.mobile) {
          return this.$mUtil.toast('暂无客服热线')
        }
        this.$mUtil.callup(this.shopInfo.mobile)
      },
      jump() {
        if (!this.shopInfo.tx_latitude || !this.shopInfo.tx_longitude) {
          return this.$mUtil.toast('暂无地址')
        }
        this.$mUtil.jumpLocation(this.shopInfo.tx_latitude, this.shopInfo.tx_longitude)
      },
    }
  }
</script>

<style lang="scss" scoped>
  .container-goods {
    .header {
      width: 720rpx;
      height: 216rpx;
      margin: 14rpx auto 3rpx;
      background: url('@/static/shop/goods-bg.png') no-repeat;
      background-size: 100% 100%;

      /deep/ .goods {
        border: none;
        padding: 39rpx 30rpx 0 45rpx;
      }
    }

    .mian {
      padding: 0 37rpx 200rpx 30rpx;

      .label {
        text-align: center;
        font-size: 32rpx;
        font-family: PingFang SC, PingFang SC-Bold;
        font-weight: 700;
        color: #333333;
        margin-bottom: 25rpx;

        .title {
          position: relative;
          padding: 2rpx 0 10rpx;

          &::after {
            display: block;
            content: '';
            position: absolute;
            left: 0;
            bottom: 0;
            width: 100%;
            height: 4rpx;
            background: #FA6138;
            border-radius: 2rpx;
          }
        }
      }

      .text {
        text-align: justify;
        margin-bottom: 25rpx;
      }

      .goods-banner {
        width: 100%;
        vertical-align: middle;
      }
    }

    .footer {
      position: fixed;
      bottom: 0;
      display: flex;
      width: 100%;
      padding: 30rpx 60rpx;
      justify-content: space-around;
      background-color: #fff;

      .btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 298rpx;
        height: 85rpx;
        background: #ff6600;
        border-radius: 43rpx;
        font-size: 28rpx;
        font-family: PingFang SC, PingFang SC-Regular;
        font-weight: 400;
        color: #ffffff;

        view {
          margin-right: 8rpx;
          font-size: 36rpx;
        }
      }

      .location {
        background: #FA6138;
      }
    }
  }
</style>