chelvc-custom/src/pages/client/clientPackage/serviceDetail/index.vue

<template>
  <view class="service">
    <view class="service-content">
      <!-- 顶部 -->
      <!-- <view class="flex" style="margin-top: 10rpx">
        <view class="flex">
          <u-icon name="share-square" size="24" />
          <text style="font-size: 24rpx; color: #666">七仔美容</text>
        </view>
        <u-icon name="share-square" size="24" @click="handlerShare" />
      </view> -->

      <!-- 标题和轮播图 -->
      <view>
        <view class="service-title">{{ goods.name }}</view>
        <u-swiper :list="banners" previousMargin="30" nextMargin="30" circular bgColor="#ffffff" height="190" />
      </view>

      <!-- 价格 -->
      <view class="flex price-content">
        <view>
          <view>
            <text class="price">￥</text>
            <text class="price-text">{{ goods.originalPrice }}</text>
          </view>
          <text class="price">券后￥{{ goods.specialPrice }}</text>
        </view>
        <view class="text_title">半售200+</view>
      </view>

      <!-- 评价 -->
      <view>
        <view class="flex evaluate">
          <view class="flex">
            <text style="margin-right: 30rpx">评价</text>
            <u-rate :value="5" readonly activeColor="#f3b935" />
            <text style="font-size: 24rpx; color: #f4b931">100%</text>
          </view>
          <view class="flex">
            <text class="text_title" style="margin-right: 20rpx">共40个消费评价</text>
            <u-icon name="arrow-right" size="16" color="#999" />
          </view>
        </view>
        <!-- <view class="evaluate-context">
          <view class="flex evaluate">
            <view class="flex">
              <text style="margin-right: 30rpx">优惠</text>
              <view class="text_title"> 您有2张8元无门槛券待额 </view>
            </view>
            <view class="flex" @click="openPopup">
              <text class="text_title" style="margin-right: 20rpx">去领取</text>
              <u-icon name="arrow-right" size="16" color="#999" />
            </view>
          </view>
        </view> -->
      </view>
    </view>

    <!-- 弹窗 -->
    <!-- <u-popup :show="show" mode="bottom" :safeAreaInsetBottom="true">
      <view>
        <GainCoupon @close="closeCoupon" :coupons="coupons"></GainCoupon>
      </view>
    </u-popup> -->

    <!-- 占位 -->
    <view class="placeholder"></view>

    <!-- 服务详情 -->
    <view class="detail">
      <view>
        <u-tabs :list="detailList" lineWidth="50" lineColor="#fdbf05" :activeStyle="{
            color: '#303133',
            fontWeight: 'bold',
            transform: 'scale(1.05)',
          }" :inactiveStyle="{
            color: '#606266',
            transform: 'scale(1)',
          }" itemStyle="padding-left: 15px; padding-right: 15px; height: 40px;" />
      </view>

      <view>
        {{ goods.description }}
      </view>
    </view>

    <!-- 评价内容 -->
    <view class="Evaluate-content">
      <EvaluateContent :comments="comments"></EvaluateContent>
    </view>

    <!-- 底部 -->
    <view class="service-footer">
      <view class="user-operate" v-for="(item, index) in userOperate" :key="index" @tap="collect(item, index)">
        <u-icon class="user-operate-icon" :name="item.icon" size="24" />
        <text class="user-operate-text">{{ item.name }}</text>
      </view>
      <view class="user-operate" @tap="handlerFavorite">
        <u-icon class="user-operate-icon" :name="goods.favorites ? favorite_list.fill : favorite_list.icon" size="24" />
        <text class="user-operate-text">{{ favorite_list.name }}</text>
      </view>
      <view class="buyNow">
        <view class="cart" @click="handlerAddCart">加入购物车</view>
        <!-- <view class="buy" @click="handlerImmediateBy">立即购买</view> -->
      </view>
    </view>
  </view>
</template>

<script>
  import {
    getGoodsDetailApi,
    addFavorite,
    addShoppingCart,
    addGoodsFavorite,
    cancelFavorite,
    // getGoodsConcentList,
    accountToOrderGetComment
  } from '@/api/client/business.js';
  import { accountTotIdGetConponList } from "@/api/client/mine.js"
  import GainCoupon from './GainCoupon.vue';
  import EvaluateContent from './EvaluateContent.vue';
  export default {
    components: {
      GainCoupon,
      EvaluateContent
    },
    data() {
      return {
        userOperate: [{
            name: '店铺',
            icon: 'file-text',
          },
          {
            name: '立即咨询',
            icon: 'chat',
          },
        ],
        favorite_list: {
          name: '收藏',
          icon: 'heart',
          fill: 'heart-fill',
        },
        goods: [], //商品详情
        banners: [
          'https://cdn.uviewui.com/uview/swiper/swiper3.png',
          'https://cdn.uviewui.com/uview/swiper/swiper2.png',
          'https://cdn.uviewui.com/uview/swiper/swiper1.png'
        ],
        coupons: [], //优惠券
        comments: [], // 评论
        id: '', //商品id
        shoopId: null, //店铺id
        show: false,
        detailList: [{
            id: '1',
            name: '服务详情',
          },
          {
            id: '2',
            name: '购买须知',
          },
          {
            id: '3',
            name: '网友评价',
          },
        ],
      };
    },
    onLoad(option) {
      // 获取商品详情接口
      this.shoopId = option.shopId
      this.id = option.id;
      this.handlerInitList(option.id);
    },
    methods: {
      openPopup() {
        this.show = true;
      },
      // closeCoupon(data) {
      //   this.show = data;
      //   this.handlerGetGoodsConcentList()
      // },
      handlerInitList(id) {
        getGoodsDetailApi(id).then(res => {
          console.log("@@@@res",res)
          this.goods = res.data.goods;
          this.comments = res.data.comments;
          this.handlerGetGoodsConcentList()
        });
      },
      handlerGetGoodsConcentList() {
        // 获取商品评价列表
        let params = {
          // merchantId:this.shoopId,
          goodsId:this.goods.id
        }
        accountToOrderGetComment(params).then(res => {
          console.log("@@@@res",res)
        })

        // 根据id获取优惠券列表
        // accountTotIdGetConponList(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(item, index) {
        switch (index) {
          case 0:
            uni.redirectTo({
              url: `/pages/client/clientPackage/storeDetail?id=${this.shoopId}`,
            });
            break;
          case 1:
            uni.showToast({
              title: '暂无',
              icon: 'none',
            });
            break;
        }
      },
      // 点击收藏1
      handlerFavorite() {
        if (this.goods.favorites) {
          cancelFavorite(this.id).then(res => {
            if (res.code == 200) {
              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 == 200) {
              this.handlerInitList(this.id);
              uni.showToast({
                title: '收藏成功',
                icon: 'none',
              });
            } else {
              uni.showToast({
                title: res.msg,
                icon: 'none',
              });
              return;
            }
          });
        }
      },

      // 点击购买按钮
      // handlerImmediateBy() {
      //   this.$store.commit('order/GET_ORDER_LIST', this.goods);
      //   uni.navigateTo({
      //     url: `/pages/client/clientPackage/uptickOrder?id=${this.id}`,
      //   });
      // },

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

<style lang="scss" scoped>
  @import './index.scss';
</style>