chelvc-custom/src/pagesHome/productDetail/index.vue

<template>
  <view class="product-detail">
    <page-navbar bgColor="#fff" title="服务详情"></page-navbar>
    <view class="product-detail-main">
      <view class="u-m-b-24">
        <u-swiper
          :list="swiperList"
          height="440rpx"
          indicatorActiveColor="#215ebe"
          indicator
          indicatorMode="dot"
          bgColor="#215ebe"
        ></u-swiper>
      </view>

      <view class="u-m-b-32 prefer-status fl-flex-item">
        <base-img
          src="/static/pagesHome/preferential-status.png"
          height="80rpx"
          width="230rpx"
        ></base-img>
        <view class="prefer-recommend">优惠推荐</view>
        <view class="fl-flex">
          <view class="u-m-r-16 f-s-24 text-333">距离结束还剩</view>
          <view class="fl-flex">
            <base-text
              text="12"
              background="#f43f5e"
              width="40rpx"
              height="40rpx"
              color="#fff"
            />
            <text class="recommend-dot">:</text>
            <base-text
              text="12"
              background="#f43f5e"
              width="40rpx"
              height="40rpx"
              color="#fff"
            />
            <text class="recommend-dot">:</text>
            <base-text
              text="12"
              background="#f43f5e"
              width="40rpx"
              height="40rpx"
              color="#fff"
            />
          </view>
        </view>
      </view>

      <view class="fl-flex-item u-m-b-24">
        <view class="fl-flex">
          <view class="f-s-48 text-primary u-m-r-16">￥{{ goods.specialPrice }}</view>
          <view class="f-s-24 text-999 text-through u-m-t-20">
            门市价:￥{{ goods.originalPrice }}
          </view>
        </view>
        <view class="f-s-24 text-999">销量1100</view>
      </view>

      <view class="fl-flex fl-justify-between u-m-b-24">
        <view class="f-s-32 text-primary text-bold"> {{ goods.name }}</view>
        <u-icon name="share-square" color="#333" size="26"></u-icon>
      </view>

      <view class="f-s-24 u-p-b-24" style="color: #616570; line-height: 40rpx">
        <view> 预约：可预约/也可直接到门店使用</view>
        <view> 须知：周一至周日全天可用·购买后30天内有效</view>
        <view> 保障：随时退，过期退</view>
      </view>
    </view>

    <base-tabs
      :list="detailList"
      paddingLeft="30rpx"
      paddingRight="30rpx"
      lineWidth="40"
    ></base-tabs>

    <view class="server-detail">
      <view class="fl-text-title u-m-b-24">网友评价</view>
      <view class="detail">{{ goods.description }}</view>
    </view>

    <view class="u-m-b-24">
      <purchase-notes></purchase-notes>
    </view>

    <div class="service-evaluation">
      <view class="fl-flex-item">
        <view class="fl-text-title">服务详情</view>
        <view class="fl-flex" @click="$Router.push('/pagesHome/evaluateList/index')">
          <text class="f-s-24 text-999">查看更多</text>
          <u-icon name="arrow-right" color="#999" size="15"></u-icon>
        </view>
      </view>
      <view class="u-m-t-24">
        <dynamic-list :list="list"></dynamic-list>
        <view class="dynamic-more" @click="$Router.push('/pagesHome/evaluateList/index')">
          <view>120评论 查看更多</view>
          <u-icon name="arrow-right" color="#999" size="12"></u-icon>
        </view>
      </view>
    </div>

    <view class="service-footer">
      <ServiceFooter @collect="collect" @cart="handlerAddCart"></ServiceFooter>
    </view>
  </view>
</template>

<script>
import ServiceFooter from './serviceFooter.vue';
import {
  getGoodsDetailApi,
  addShoppingCart,
  addGoodsFavorite,
  cancelFavorite,
  accountToOrderGetComment,
} from '@/api/client/business.js';

export default {
  components: {
    ServiceFooter,
  },
  name: 'productDetail',
  data() {
    return {
      goods: [], //商品详情
      banners: [],
      coupons: [], //优惠券
      comments: [], // 评论
      id: '', //商品id
      shoopId: null, //店铺id
      show: false,
      swiperList: [
        'https://cdn.uviewui.com/uview/swiper/swiper1.png',
        'https://cdn.uviewui.com/uview/swiper/swiper2.png',
        'https://cdn.uviewui.com/uview/swiper/swiper3.png',
      ],
      detailList: [
        {
          id: '1',
          name: '服务详情',
        },
        {
          id: '2',
          name: '购买须知',
        },
        {
          id: '3',
          name: '网友评价',
        },
      ],
      list: [{}, {}, {}],
    };
  },
  onLoad(option) {
    // 获取商品详情接口
    this.shoopId = option.shopId;
    this.id = option.id;
    this.handlerInitList(this.id);
  },
  methods: {
    // closeCoupon(data) {
    //   this.show = data;
    //   this.handlerGetGoodsConcentList()
    // },
    handlerInitList(id) {
      getGoodsDetailApi(id).then(res => {
        this.goods = res.data.goods;
        this.comments = res.data.comments;
        res.data.goods.banners.map(rs => {
          this.banners.push(rs.url);
        });
        this.handlerGetGoodsConcentList();
      });
    },
    handlerGetGoodsConcentList() {
      // 获取商品评价列表
      let params = {
        // merchantId:this.shoopId,
        goodsId: this.goods.id,
      };
      accountToOrderGetComment(params).then(res => {
        console.log('@@@@res', res);
      });

      // 根据id获取优惠券列表
      // accountTotIdGetCouponList(this.shoopId,{ paging:'1,10' }).then(res=>{
      //   this.coupons = res.data.records
      // })
    },

    // 点击分享
    handlerShare() {
      uni.share({
        provider: 'weixin',
        scene: 'WXSceneSession',
        type: 1,
        summary: '我正在使用HBuilderX开发uni-app，赶紧跟我一起来体验！',
        success: function (res) {},
        fail: function (err) {},
      });
    },

    // 选择底部tab店铺收藏咨询
    collect(index) {
      switch (index) {
        case 0:
          uni.navigateBack(-1);
          break;
        case 1:
          uni.showToast({
            title: '暂无',
            icon: 'none',
          });
          break;
      }
    },
    // 点击收藏1
    handlerFavorite() {
      if (this.goods.favorites) {
        cancelFavorite(this.id).then(res => {
          if (res.code === 'OK') {
            this.handlerInitList(this.id);
            uni.showToast({
              title: '取消收藏',
              icon: 'none',
            });
          } else {
            uni.showToast({
              title: res.msg,
              icon: 'none',
            });
            return;
          }
        });
      } else {
        addGoodsFavorite(this.id).then(res => {
          if (res.code === 'OK') {
            this.handlerInitList(this.id);
            uni.showToast({
              title: '收藏成功',
              icon: 'none',
            });
          } else {
            uni.showToast({
              title: res.msg,
              icon: 'none',
            });
            return;
          }
        });
      }
    },

    // 加入购物车
    handlerAddCart() {
      let params = {
        merchantId: this.shoopId,
        goodsId: this.goods.id,
        quantity: 1,
        price: this.goods.specialPrice,
        goodsName: this.goods.name,
        goodsPic: this.goods.logo,
        originalPrice: this.goods.originalPrice,
      };
      addShoppingCart(params).then(res => {
        if (res.code === 'OK') {
          uni.showToast({
            title: '购物车添加成功',
            icon: 'none',
          });
        } else {
          uni.showToast({
            title: res.message,
            icon: 'none',
          });
          return;
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.product-detail {
  .product-detail-main {
    padding: 16rpx 32rpx 0;
    background-color: #fff;
    position: relative;
    .prefer-recommend {
      position: absolute;
      left: 7%;
      font-size: 36rpx;
      color: #fff;
    }
    .prefer-status {
      height: 80rpx;
      background-color: #fdebee;
      padding-right: 20rpx;
    }
    .recommend-dot {
      margin: 0 4rpx;
      color: #f43f5e;
    }
  }
  .server-detail {
    padding: 32rpx;
    margin: 24rpx 0;
    background-color: #fff;
    .detail {
      font-size: 28rpx;
      line-height: 44rpx;
      color: #616570;
    }
  }
  .service-evaluation {
    padding: 32rpx;
    background-color: #fff;
    margin-bottom: 24rpx;
  }

  .service-footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    background-color: #fff;
  }

  .dynamic-more {
    display: flex;
    font-size: 24rpx;
    color: #999;
    justify-content: center;
    padding-bottom: 160rpx;
  }
}
</style>