yicangzongtai_app_240321/pages/product/goods/puzzleGoods.vue

<template>
  <view class="container">
    <navbar :config="config" backColor="#666"></navbar>
    <view id="page-top">
      <view class="product">
        <view class="u-bg-fff pb40">
          <view class="pic">
            <!-- <image src="../../../static/delImg/product2.png" mode="aspectFill"></image> -->
            <swiper class="swiper" indicator-dots="true" autoplay="true" interval="5000" duration="1500"
              circular="true">
              <swiper-item v-if="dataForm.video_url">
                <!-- <video :src="dataForm.video_url"></video> -->
                <j-video class="jvideo" :url="dataForm.video_url" width="750rpx" height="620rpx"></j-video>
              </swiper-item>
              <swiper-item v-for="(item, index) in imglist" :key="index">
                <image :src="item" mode="aspectFill"></image>
              </swiper-item>
            </swiper>

            <view class="p-price">
              <view class="pd24 u-flex-center" style="align-items: baseline;">
                <view class="u-FFF u-font36"><rich-text
                    :nodes="$mUtil.priceBigSmallTwo(dataForm.min_price)"></rich-text></view>
                <text class="discount u-font24 u-ml20 u-del">￥{{ dataForm.max_sale_price }}</text>
                <!-- <text class="discount u-font24 u-ml15">{{ dataForm.discount }}折</text> -->
                <!-- #DCCDA4 -->
                <view v-if="dataForm.group_people_num > 0">
                  <text
                    style="font-size: 22rpx;font-weight: 500; color: #FA6138;padding: 3rpx 14rpx;margin-left: 18rpx;background-color: #DCCDA4;border-radius: 20rpx;">
                    {{ dataForm.group_people_num }}人拼
                  </text>
                </view>
              </view>
              <view class="p-ab u-flex-center">
                <view class="triangle-bottomright"></view>
                <view class="seckill u-text-center u-font28">
                  <!-- active_state 0：未开始 * 1：进行中 * 2：已结束 -->
                  <view class="u-bold" style="padding: 20rpx;" v-if="dataForm.active_state == 2">已结束</view>
                  <view class="u-bold" v-if="dataForm.active_state == 1">距结束</view>

                  <view class="u-bold" v-if="dataForm.active_state == 0">离开抢</view>
                  <view v-show="dataForm.active_state != 2 && !selectGroup">
                    <uni-countdown :backgroundColor="'none'" @timeup="overDown2" :color="'#3775F6'"
                      :splitorColor="'#3775F6'" :show-day="time1[0] > 0" :day="time1[0]" :hour="time1[1]"
                      :minute="time1[2]" :second="time1[3]"></uni-countdown>
                  </view>
                  <view v-show="dataForm.active_state != 2 && selectGroup">
                    <uni-countdown :backgroundColor="'none'" :color="'#3775F6'" :splitorColor="'#3775F6'"
                      :show-day="time2[0] > 0" :day="time2[0]" :hour="time2[1]" :minute="time2[2]"
                      :second="time2[3]"></uni-countdown>
                  </view>
                </view>
              </view>
            </view>

            <view class="mt10 u-plr30">
              <view>
                <view class="tipsStatus" v-if="shop.platform_shop">自营</view>
                <text class="u-font34 u-bold u-1A1A1A">{{ dataForm.title }}</text>
              </view>
              <view class="u-font24 u-mt15 u-999">
                <text>
                  已售
                  <text class="u-FF0000">{{ dataForm.result_sale_num }}</text>
                  件，仅剩
                  <text class="u-FF0000">{{ dataForm.residue_stock_total }}</text>
                  件
                </text>
              </view>
              <!--优惠-->
              <!-- <view
			          class="bg-FFF6EE pd20 u-mt20 u-flex-center br-rd10"
			          v-if="shopDiscounts.is_use == true"
			        >
			          <view class="u-FF0000 br-FF0000 u-font24">首单优惠</view>
			          <view class="u-ml15 u-font24 u-CA7E57"
			            >满{{ shopDiscounts.full }}元减{{
			              shopDiscounts.reduction
			            }}元</view
			          >
			        </view> -->
            </view>
          </view>
        </view>
        <!--拼团-->
        <view class="u-bg-fff u-mt10" v-if="teamlist && teamlist.length > 0 && !selectGroup">
          <view class="u-border-one">
            <view class="u-plr30 pt-pb30 border u-flex-center-sb">
              <view class="u-font28 u-1A1A1A">{{ teamlist.length }}人的拼单，可直接参与</view>
              <view class="u-999 u-font24" @click="goGb">
                更多拼团
                <text class="iconfont u-ml15">&#xe6c7;</text>
              </view>
            </view>
          </view>
          <view class="stb-list">
            <view class="stb-item u-plr30" style="display: flex; justify-content: space-between;"
              v-for="(item, index) in teamlist" :key="item.id">
              <view class=" pt20-pb14" style="width: 100%;" v-if="index < 4">
                <view class="u-flex-center">
                  <image v-if="item.leader_user_info.head_photo" class="u-avatar65"
                    :src="item.leader_user_info.head_photo"></image>
                  <image v-else class="u-avatar65" src="/static/default-avatar.png" mode=""></image>
                  <view class="u-flex u-ml25" style="display: flex;justify-content: space-around; width: 100%;">
                    <view style="display: flex; flex-direction: column; flex: 1;">
                      <view class="u-font24 u-1A1A1A u-text-width">{{ item.leader_user_info.nickname }}</view>
                      <view class="u-font24 u-flex-start" style="display: flex; align-items: center">
                        <text class="u-707070">剩余</text>
                        <view class="u-FF0000">
                          <uni-countdown :backgroundColor="'none'" :color="'#FF0000'" :splitorColor="'#FF0000'"
                            :show-day="item.time[0] > 0" :day="item.time[0]" :hour="item.time[1]" :minute="item.time[2]"
                            :second="item.time[3]" @timeup="overDown2"></uni-countdown>
                        </view>
                      </view>
                    </view>
                    <view style="display: flex; align-items: flex-start;">
                      <view class="u-font24 u-1A1A1A" style="margin-right: 30rpx;">
                        还差
                        <text class="u-FF0000">{{ item.group_person_number - item.member_user_infos.length }}</text>
                        人拼成
                      </view>

                      <view class="u-FFF  stb-btn u-font24" style="flex: 1;margin-top: 12rpx;"
                        @click="gogroup(item)">去拼单</view>
                    </view>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
        <view class="u-bg-fff u-mt10">
          <view class="u-plr30 u-flex-center-sb pt-pb35">
            <view class="u-flex-center">
              <view @click="goShop">
                <image class="u-avatar104" :src="shop.logo"></image>
              </view>
              <view class="u-ml25">
                <view class="u-font28 u-1A1A1A u-bold">{{ shop.shop_name }}</view>
                <view class="u-999 u-font24 u-mt5 u-text2" @click="goLocal">
                  <text class="iconfont" style="color: #FA6138;">&#xe6db;</text>
                  {{ shop.province_name }}{{ shop.city_name }}{{ shop.area_name }}{{ shop.address }}
                </view>
              </view>
            </view>
            <view class="iconfont" @click="goShop">&#xe6c7;</view>
          </view>
        </view>
      </view>
      <view class="u-bg-fff u-mt10">
        <view class="tab u-flex-center-sa u-font30 u-1A1A1A u-border-one-one"
          :style="`top: calc(${statusBarHeight}px + 44px)`">
          <view @tap="change(0)" class="pb30" :class="{ active: isChecked == 0 }">商品详情</view>
          <view @tap="change(1)" class="pb30" :class="{ active: isChecked == 1 }">用户评论({{ commentList.length }})</view>
        </view>
        <view class="u-mt10">
          <!--商品详情-->
          <view v-if="isChecked == 0">
            <view class="richText ql-editor-box">
              <rich-text :nodes="goodsInfo.mobile_detail"></rich-text>
              <!-- <jyf-parser :html="$mUtil.formatRichText(goodsInfo.mobile_detail)" ref="article"></jyf-parser> -->
            </view>
          </view>

          <!--评论-->
          <view class="u-plr30" v-else>
            <comment :value="commentList"></comment>
          </view>
        </view>
      </view>
    </view>
    <view style="height:170rpx;background-color:white"></view>
    <view class="bottom-btn u-bg-fff">
      <view class="pt-pb30 u-plr30 u-flex-center-sb">
        <button @click="share" class="u-text-center" style="line-height: normal">
          <view class="iconfont2 u-font44 u-999">&#xe684;</view>
          <view class="u-font28 u-1A1A1A">分享</view>
        </button>

        <!-- 两个按钮 -->
       <view class="u-flex-center" v-if="!selectGroup" >
          <button class="gb-btn btn-bg-dccda4 u-00321E btn-bg-dccda4-48" @click="goProduct(dataForm.goods_id)">
            <view>
              <view class="u-font36 u-bold"><rich-text
                  :nodes="$mUtil.priceBigSmall(dataForm.min_sale_price)"></rich-text></view>
            </view>
            <view class="u-font22">单独购买</view>
          </button>

          <button v-if="dataForm.active_state == 1" class="gb-btn btn-bg-00320E u-DCCDA4 btn-bg-dccda4-482"
            @click="buy(1, dataForm.id)">
            <view>
              <view class="u-font36 u-bold"><rich-text :nodes="$mUtil.priceBigSmall(dataForm.min_price)"></rich-text>
              </view>
            </view>
            <view class="u-font22">发起拼团</view>
          </button>
          <button v-if="dataForm.active_state == 0" class="gb-btn btn-bg-00320E u-DCCDA4 btn-bg-dccda4-482"
            @click="notStarted()">
            <view>
              <view class="u-font36 u-bold"><rich-text :nodes="$mUtil.priceBigSmall(dataForm.min_price)"></rich-text>
              </view>
            </view>
            <view class="u-font22">发起拼团</view>
          </button>
          <button v-if="dataForm.active_state == 2" class="gb-btn btn-bg-00320E u-DCCDA4 btn-bg-dccda4-482"
            @click="itSover()">
            <view>
              <view class="u-font36 u-bold"><rich-text :nodes="$mUtil.priceBigSmall(dataForm.min_price)"></rich-text>
              </view>
            </view>
            <view class="u-font22">发起拼团</view>
          </button>
        </view>

        <!-- 三个按钮 -->
        <view class="u-flex-center" v-if="selectGroup">
          <button class="gb-btn btn-bg-dccda4 u-00321E" @click="goProduct(dataForm.goods_id)">
            <view>
              <view class="u-font36 u-bold"><rich-text
                  :nodes="$mUtil.priceBigSmall(dataForm.min_sale_price)"></rich-text></view>
            </view>
            <view class="u-font22 font11">单独购买</view>
          </button>

          <button class="gb-btn btn-bg-00320E u-DCCDA4" @click="groupGoBuy">
            <view>
              <view class="u-font36 u-bold"><rich-text :nodes="$mUtil.priceBigSmall(dataForm.min_price)"></rich-text>
              </view>
            </view>
            <view class="u-font22">发起拼团</view>
          </button>
          <button class="gb-btn btn-bg-dccda4 u-00321E" @click="goGdProduct(dataForm.goods_id)">
            <view>
              <view class="u-font36 u-bold"><rich-text :nodes="$mUtil.priceBigSmall(dataForm.min_price)"></rich-text>
              </view>
            </view>
            <view class="u-font22">去拼团</view>
          </button>
        </view>
      </view>
    </view>

    <!--规格-->
    <uniPopup type="bottom" ref="specOpen" :touchmove="true">
      <view class="u-bg-fff spec">
        <view class="u-plr30 flex-sb u-border-one-one pb30">
          <view class="u-flex-center">
            <image class="u-goods200" :src="choseConfig.cover ? choseConfig.cover : cover"></image>
            <view class="u-ml20">
              <view class="u-999 u-font24 price-zhe">
                <view class="u-FF0000 u-font36"><rich-text
                    :nodes="$mUtil.priceBigSmall(choseConfig.activity_price ? choseConfig.activity_price : moPrice)"></rich-text>
                </view>
                <text
                  class="u-del u-ml15">￥{{ choseConfig.market_price ? choseConfig.market_price : moDelPrice }}</text>
                <!-- <text class="u-ml10">{{ dataForm.discount }}折</text> -->
              </view>
              <view class="u-font22 u-999 u-mt5">
                活动库存 {{ stock }} 件
                <text
                  class="u-ml30">商品库存{{ choseConfig.able_stock ? choseConfig.able_stock : goods_total_stock }}件</text>
              </view>

              <view class="u-font22 u-999 u-mt5"><!-- 商品库存 {{goods_total_stock}}件 --></view>
              <view class="u-1A1A1A u-mt25">{{ choseConfig.sku_set_name ? choseConfig.sku_set_name : '请选择' }}</view>
            </view>
          </view>
          <view class="iconfont u-999 closeIcon" @click="specOpenClose">&#xe612;</view>
        </view>

        <view>
          <view class="content">
            <scroll-view scroll-y="true">
              <view class="">
                <view class="u-mt30 bottom-bor" v-for="(item, index) in skuTab" :key="item.head.id">
                  <view class="u-plr30">{{ item.head.name }}</view>
                  <view class="u-mt20 u-border-one-one pb30">
                    <view class="u-plr30 u-flex u-flex-warp">
                      <view class="spec-item" :class="childrenItem.flag ? 'activeColor' : ''"
                        @click="chonseSku(index, childrenItem.id)" v-for="childrenItem in item.values"
                        :key="childrenItem.id">
                        {{ childrenItem.name }}
                      </view>
                    </view>
                  </view>
                </view>
              </view>
            </scroll-view>
          </view>
          <view class="u-plr30 u-mt30">
            <view class="u-flex-center-sb">
              <view>购买数量</view>
              <view class="u-flex-center">
                <view class="iconfont minus" @click="resNum">&#xe60b;</view>
                <view class="num">{{ add_num }}</view>
                <view class="iconfont plus-sign" @click="addNum">&#xe686;</view>
              </view>
            </view>
            <view class="specOpen-btn">
              <view v-if="btnType == 0"><button class="u-btn-two" @click="btnBuy(btnType)">立即购买</button></view>
              <view v-else><button class="u-btn-two" @click="btnBuy(btnType)">立即购买</button></view>
            </view>
          </view>
        </view>
      </view>
    </uniPopup>
    <!--更多拼团-->
    <uniPopup type="center" backgroundColor="transparent" ref="gbOpen">
      <view class="iconfont u-text-right u-font40 u-FFF" @click="gbClose">&#xe603;</view>
      <view class="u-bg-D5C49B u-mt30 br-rd20">
        <view class="br-284534">
          <view class="u-text-center gb-te">正在拼团</view>
        </view>
        <view class="gb-list pb50">
          <view class="gb-item u-plr30" v-for="item in teamlist" :key="item.id">
            <view class="u-flex-center-sb br-284534 pt28-pb18">
              <view class="u-flex-center u-00321E">
                <image class="u-avatar65" v-if="item.leader_user_info.head_photo"
                  :src="item.leader_user_info.head_photo"></image>
                <!-- <image class="u-avatar65" v-else :src="imgUrl + '/head-on.png'" mode=""></image> -->
				<image class="u-avatar65" v-else src="/static/default-avatar.png" mode=""></image>
                <view class="u-ml25">
                  <view class="u-font28 u-text-width ">{{ item.leader_user_info.nickname }}</view>
                  <view class="u-font20 per-num">
                    <div class="u-font24 u-flex-center">
                      <text>还差</text>
                      <text class="u-FF0000">{{ item.group_person_number - item.member_user_infos.length }}</text>
                      <text>人拼成</text>
                    </div>
                    <view class="u-flex-start u-font24 u-flex-center" style="display: flex">
                      <view class="u-00321E u-ml20 u-font24">剩余</view>
                      <view class="u-FF0000">
                        <uni-countdown :backgroundColor="'none'" :color="'#FF0000'" :splitorColor="'#FF0000'"
                          :show-day="item.time[0] > 0" :day="item.time[0]" :hour="item.time[1]" :minute="item.time[2]"
                          :second="item.time[3]" @timeup="overDown2"></uni-countdown>
                      </view>
                    </view>
                  </view>
                </view>
              </view>
              <view class="u-FFF  stb-btn u-font24 ml54" @click="gogroup(item)">我要参团</view>
            </view>
          </view>
        </view>
      </view>
    </uniPopup>
    <!--页面加载动画-->
    <ldLoading isFullScreen :active="loading"></ldLoading>
    <share ref="shares" :contentHeight="580" v-if="isvisible"></share>
  </view>
</template>

<script>
  import uniPopup from '../../../components/uni-popup/uni-popup.vue';
  import comment from '../../../components/ld-comment/ld-comment.vue';
  import jyfParser from '../../../components/jyf-parser/jyf-parser';
  import share from './../../public/share';
  import jVideo from '../../../components/j-video/j-video.vue';
  export default {
    components: {
      uniPopup,
      comment,
      jyfParser,
      share,
      jVideo
    },
    data() {
      return {
        //手机状态栏高度
        statusBarHeight: uni.getSystemInfoSync().statusBarHeight,
        config: {
          back: true, //false是tolbar页面 是则不写
          title: '商品详情',
          color: '#1a1a1a',
          //背景颜色;参数一：透明度（0-1）;参数二：背景颜色（array则为线性渐变，string为单色背景）
          backgroundColor: [1, '#fff'],
          statusBarFontColor: '#FFFFFF'
          // backTabPage: "",
          // leftSlot:true
        },
        imglist: [], //详情图片数组
        goods_total_stock: null,
        isChecked: 0,
        btnName: '',
        btnType: '', //0  购物车，1 立即购买
        dataForm: {}, //商品详情
        shop: {}, //店铺信息
        shopDiscounts: {}, //店铺首单优惠
        stock: 0,
        cover: '',
        loading: true,
        moDelPrice: '',
        moPrice: '',
        goodsSkuList: [], //sku组合值
        skuTab: [], //sku二位数组
        goods_id: null,
        limit_buy_num: 0,
        choseConfig: {},
        hasId: '',
        add_num: 1,
        goStatus: 0, //0:购物车，1下单
        shop_id: 0,
        commentList: [],
        goodsInfo: {},

        time1: [0, 0, 0, 0],
        time2: [0, 0, 0, 0],
        teamlist: [],
        selectGroup: null,
        show: false,
        teamId: null,
        isvisible: false,
        id: null,
        timetwo: null,
        // imgUrl: this.$mConfig.staticUrl,
        fromShare: false // 是否分享过来的页面
      };
    },
    onShow() {
      var pages = getCurrentPages();
      var prevPage = pages[pages.length - 2];
      if (prevPage == undefined) {
        // this.config.backTabPage = "/pages/research/homepage/lidaPage";
      }
    },
    onLoad(options) {
      //当用户进来有缓存店铺
      this.id = options.id;
      //店铺推荐（商品）
      if (options.id) {
        this.getDetailInfo(options.id);
      }

      if (options.teamId) {
        this.teamId = options.teamId;
        // this.getTime(options.teamId)
        //  console.log("团队信息"+this.teamId)
      }
      if (options.shareId) {
        this.recordSave(options.shareId, options.id);
      }
      if (options.share == 1) {
        this.fromShare = true;
      }
    },
    onShareAppMessage(res) {
      // debugger
      // console.log(`id=${this.dataForm.id}&Sshopid=${this.shop_id}&teamId=${this.selectGroup.id}`, )
      let that = this;
      if (res.from === 'button') {
        // 来自页面内分享按钮
        console.log(res.target);
      }
      return {
        title: that.shareTitle,
        imageUrl: that.shareImg,
        path: `/pages/product/goods/puzzleGoods?id=${that.dataForm.id}&Sshopid=${that.shop_id}&teamId=${that.teamId}&share=1`
      };
    },
    methods: {
      iconBtn() {
        if (this.fromShare) {
          uni.redirectTo({
            url: '/pages/index/home'
          });
        } else {
          uni.navigateBack();
        }
      },
      notStarted() {
        this.$mUtil.toast('活动尚未开始');
      },
      itSover() {
        this.$mUtil.toast('活动已结束');
      },
      goLocal() {
        uni.openLocation({
          latitude: Number(this.shop.tx_latitude),
          longitude: Number(this.shop.tx_longitude),
          name: this.shop.name,
          address: this.shop.address,
          success: function() {
            console.log('success');
          }
        });
      },
      goShop() {
        uni.navigateTo({
          url: '/pages/research/homepage/shopHomepage?shopId=' + this.shop_id
        });
      },
      recordSave(share_user_id, goods_id) {
        this.$http
          .post('/share/record/save', {
            share_user_id: share_user_id,
            goods_id: goods_id
          })
          .then(res => {});
      },

      share() {
        this.isvisible = false
        let token = uni.getStorageSync("apiToken");

        if (!token) {
          uni.navigateTo({
            url: '/pages/login/index'
          });
        } else {
          // console.log(`id=${this.dataForm.id}&Sshopid=${this.shop_id}&teamId=${this.selectGroup.id}`, 123)

          let user = uni.getStorageSync('personal');
          this.isvisible = true;

          this.$nextTick(() => {
            this.$refs.shares.shareInfo('/?pageType=1&type=3&id=' + this.dataForm.id + '&shareId=' + user.id,
              'pages/down', this.dataForm.title, '', this.dataForm.cover);
          });
        }
      },

      /**发起拼团 */
      groupGoBuy() {
        this.selectGroup = null;
        this.getTeam();
      },
      getTime(id) {
        this.$http.get(`/groupbuy/team/info/${id}`).then(res => {
          if (res && res.code == 200) {
            this.time2 = this.$mUtil
              .countDown(Math.floor(res.data.count_down_end_time))
              .split(':')
              .map(val => Number(val));

            console.log(this.time2, 123);
          }
        });
      },
      /**去拼团 */
      gogroup(item) {
        this.$refs.gbOpen.close();
        this.btnType = 1;
        //1
        // uni.navigateTo({
        // 	url:"./puzzleGoodsInfo?id="+this.id+"&groupid="+item.id
        // })

        //2
        this.$http.get(`/groupbuy/team/info/${item.id}`).then(res => {
          if (res && res.code == 200) {
            this.time2 = this.$mUtil
              .countDown(Math.floor(res.data.count_down_end_time))
              .split(':')
              .map(val => Number(val));

            console.log(this.time2, 123);
          }
        });

        //3
        this.selectGroup = item;
        // 		console.log(item)
        // this.time2 = this.$mUtil
        //   .countDown(Math.floor(this.selectGroup.end_time / 1000))
        //   .split(":").map(val=>Number(val));
        //  this.checkSku(item.group_buy_goods_id);
      },
      goGdProduct() {
        this.checkSku(this.selectGroup.group_buy_goods_id);
      },
      overDown2() {
        this.getTeam();
      },
      // 获取主页数据
      getIndexList(shopid) {
        this.$http.get('/yxt/shop/info/' + shopid).then(res => {
          uni.stopPullDownRefresh();
          this.loading = false;
          if (res.data && res.code == 200) {
            this.shop = res.data;
          }
        });
      },

      getByShop(id) {
        //店铺优惠查询
        this.$http.get('/marketing/firstOrder/getByShop/' + id).then(res => {
          if (res && res.code == 200) {
            this.shopDiscounts = res.data;
          }
        });
      },

      getTeam() {
        this.$http.get(`/groupbuy/team/list/${this.shop_id}/${this.dataForm.id}`).then(res => {
          if (res && res.code == 200) {
            res.list.forEach(val => {
              val.time = this.$mUtil
                .countDown(Math.floor(val.end_time / 1000))
                .split(':')
                .map(val => Number(val));
            });
            this.teamlist = res.list;
            // console.log(res.list)
            if (this.teamId) {
              this.btnType = 1;
              this.selectGroup = this.teamlist.filter(val => val.id == this.teamId)[0];
              console.log('团队信息2' + JSON.stringify(this.selectGroup));
              this.time2 = this.$mUtil
                .countDown(Math.floor(this.selectGroup.end_time / 1000))
                .split(':')
                .map(val => Number(val));
            }
          }
        });
      },
      getDetailInfo(id) {
        this.$http.get('/groupbuy/activitygoods/goodsInfo/' + id).then(res => {
          this.loading = false;

          if (res && res.code == 200) {
            this.dataForm = res.data;
            this.shop_id = res.data.shop_id;
            this.imglist = res.data.cover.split(',');
            this.getByShop(this.shop_id);
            this.getIndexList(this.shop_id);
            //  active_state 0：未开始 * 1：进行中 * 2：已结束
            if (res.data.active_state == 0) {
              this.time1 = this.$mUtil
                .countDown(res.data.activity_start_time)
                .split(':')
                .map(val => Number(val));
            } else {
              this.time1 = this.$mUtil
                .countDown(res.data.finish_time)
                .split(':')
                .map(val => Number(val));
            }

            this.$http.get(`/goods/content/${this.dataForm.goods_id}`).then(res => {
              if (res && res.code == 200) {
                this.goodsInfo = res.data;
                this.$http.get('/marketing/firstOrder/getByShop/' + this.shop_id).then(res => {
                  if (res && res.code == 200) {
                    this.shopDiscounts = res.data;
                  }
                });
              }
            });
            this.$http.get(`/comment/orderGoods/getgoodscomments/${this.dataForm.goods_id}`).then(res => {
              if (res && res.code == 200) {
                this.commentList = res.list;
              }
            });
            this.getTeam();
          }
        });
      },
      goProduct(id) {
        uni.navigateTo({
          url: './goods?id=' + id
        });
      },
      goTocart() {
        uni.navigateTo({
          url: '/pages/index/shop'
        });
      },
      //点击拼团更多
      goGb() {
        this.$refs.gbOpen.open();
      },
      //点击关闭
      gbClose() {
        this.$refs.gbOpen.close();
      },
      //评论，商品详情切换
      change(i) {
        this.isChecked = i;
      },
      //点购物车，立即购买
      buy(i, id) {
        this.btnType = i;
        this.selectGroup = null;
        this.checkSku(id);
        if (i == 0) {
          this.btnName = '加入购物车';
        } else {
          this.btnName = '立即购买';
        }
      },
      // 减数量
      resNum() {
        if (this.add_num > 1) {
          this.add_num--;
        }
      },
      //加数量
      addNum() {
        this.add_num++;
      },

      chonseSku(index, id) {
        this.skuTab[index].values.forEach(res => {
          res.flag = false;
          if (res.id == id) {
            res.flag = true;
          }
        });
        let choseId = [];
        this.skuTab.forEach(res => {
          res.values.forEach(Key => {
            if (Key.flag) {
              choseId.push(Key.id);
            }
          });
        });
        let totalId = choseId.join('|');
        this.hasId = totalId;
        this.goodsSkuList.forEach(res => {
          if (res.sku_hash_code == totalId) {
            this.choseConfig = res;
            this.stock = this.dataForm.real_stock_total;
            this.able_stock = res.able_stock;
          }
        });
      },
      //查询sku
      checkSku(id) {
        this.$http.get(`/groupbuy/activitygoods/skus/${this.dataForm.id}`).then(res => {
          this.loading = false;
          if (res && res.code == 200) {
            this.choseConfig = {};
            this.hasId = '';

            this.goods_total_stock = res.data.goods_total_stock;
            // this.goods_total_stock =
            res.data.goods.sku_table.forEach(keys => {
              keys.values.forEach(val => {
                val.flag = false;
              });
            });

            this.limit_buy_num = this.dataForm.limit_buy_num;
            this.goods_id = this.dataForm.goods_id;
            this.goodsSkuList = res.data.goods_sku_list;
            this.moPrice = this.dataForm.min_price;
            this.moDelPrice = this.dataForm.min_sale_price;
            this.cover = this.imglist[0];
            this.stock = this.dataForm.real_stock_total;
            if (res.data.goods_auth) {
              if (res.data.goods_auth.added) {
                this.$refs.specOpen.open();
              } else {
                this.$mUtil.toast('该商品已经下架');
              }
            } else {
              this.$mUtil.toast('没有经营权限');
            }
            //只有没数据才去重新渲染sku的数据
            if (this.skuTab.length == 0) {
              this.skuTab = res.data.goods.sku_table;
              for (let i in this.skuTab) {
                //默认选中第一个可选项
                this.skuTab[i].values[0].flag = true;
              }
              //显示选中的sku信息
              // this.chonseSku(0, this.skuTab[0].values[0].id);
            }
            //显示选中的sku信息
            this.chonseSku(0, this.skuTab[0].values[0].id);
            // if(res.data.goods.sku_table.length>0){
            // 	this.$refs.specOpen.open()
            // }else{
            // 	this.hasId = ''
            // 	this.btnBuy()
            // }
          }
        });
      },
      //关闭规格弹窗
      specOpenClose() {
        // this.show=false
        this.$refs.specOpen.close();
      },
      //加入购物车
      btnBuys() {
        // 判断是否选中sku
        if (this.skuTab.length > 0 && this.hasId == '') {
          this.$mUtil.toast('请选中sku');
          return false;
        }

        // 判断限购
        if (this.add_num > this.limit_buy_num && this.limit_buy_num != 0) {
          this.$mUtil.toast('商品限购' + this.limit_buy_num + '件');
          return false;
        }
        //判断库存
        if (this.goodsSkuList.length > 0 && this.able_stock < this.add_num) {
          this.$mUtil.toast('商品库存只有' + this.able_stock + '件');
          this.$http
            .post(`/singlegoods/understockrecord/save`, {
              shop_id: this.shop_id,
              goods_id: this.goods_id,
              single_goods_id: this.choseConfig.single_goods_id,
              sku_set_name: this.choseConfig.sku_set_name,
              buy_num: this.add_num
            })
            .then(res => {});
          return false;
        }
        if (this.goStatus == 0) {
          let data = {
            goods_id: this.goods_id,
            sku_hash_code: this.hasId,
            add_num: this.add_num,
            source_shop_id: this.shop_id.toString()
          };
          this.$http.post(`/cart/add`, data).then(res => {
            if (res && res.code == 200) {
              this.$mUtil.toast('添加成功');
              this.show = false;
              // this.$refs.specOpen.close();
              this.choseConfig = {};
              this.add_num = 1;
              this.cartList();
            }
          });
        } else {
          this.psotJson();
        }
      },
      //组合数据
      psotJson() {
        // this.loading = true;
        let dataJson = {};
        let childArr = [];
        let parendArr = [];
        // let shop = uni.getStorageSync('shop')
        // let shopid = shop.id ? shop.id : ''
        this.choseConfig;

        childArr.push({
          user_cart_id: 0,
          activity_goods_id: this.choseConfig.activity_goods_id,
          goods_id: this.goods_id,
          num: this.add_num,
          sku_hash_code: this.hasId
        });
        parendArr.push({
          shop_id: this.shop.id,
          source_shop_id: this.shop.id,
          activity_id: this.dataForm.group_buy_id, //活动id
          sponsor_activity_id: this.selectGroup ? this.selectGroup.id : 0, //拼团id
          user_remark: '',
          items: childArr
        });
        dataJson = {
          is_cart: false, //是否来源于购物车
          receipt_id: null, //收货地址ID
          shipment_mode: 0, //0物流，1自提
          shop_orders: parendArr,
          marketing_type: 2 //0无活动，1秒杀，2拼团
        };
        uni.setStorageSync('dataJson', dataJson);
        uni.navigateTo({
          url: '/pages/product/surePay/surePaySechill?type=group'
        });
        // let shop = uni.getStorageSync('shop')
        // let shopid=shop.id?shop.id:''
        // this.loading = false;
        // this.$http.post(`/order/build`, dataJson).then(res => {
        // 	if (res && res.code == 200) {
        // 		uni.setStorageSync('sureData', res.data)
        // 		uni.navigateTo({
        // 			url: '../surePay/surePay'
        // 		})
        // 	}
        // })
      },
      //
      btnBuy(i) {
        this.goStatus = i;
        let token = uni.getStorageSync("apiToken");
        //判断是否微信授权登录（没有授权登录进wx-login,授权了但没有注册进login）
        if (!token) {
          uni.navigateTo({
            url: '/pages/login/index'
          });
        } else {
          this.btnBuys();
        }

        //0  购物车，1 立即购买
      }
    }
  };
</script>
<style lang="scss">
  page {
    background-color: #f5f5f5;
  }
</style>
<style lang="scss" scoped>
  @font-face {
    font-family: 'hxicon';
    /* project id 2009392 */
    src: url(data:font/truetype;charset=utf-8;base64,AAEAAAALAIAAAwAwR1NVQrD+s+0AAAE4AAAAQk9TLzI8vEjdAAABfAAAAFZjbWFwt08gwQAAAggAAAJKZ2x5ZqU14o0AAARwAAAH3GhlYWQZ4AolAAAA4AAAADZoaGVhB94DjgAAALwAAAAkaG10eDQAAAAAAAHUAAAANGxvY2ELTA28AAAEVAAAABxtYXhwARsA0wAAARgAAAAgbmFtZbuddLgAAAxMAAACVXBvc3RDGZ0IAAAOpAAAAKEAAQAAA4D/gABcBAAAAAAABAAAAQAAAAAAAAAAAAAAAAAAAA0AAQAAAAEAAAgLkC9fDzz1AAsEAAAAAADbYGMVAAAAANtgYxUAAP+8BAADQgAAAAgAAgAAAAAAAAABAAAADQDHAAQAAAAAAAIAAAAKAAoAAAD/AAAAAAAAAAEAAAAKAB4ALAABREZMVAAIAAQAAAAAAAAAAQAAAAFsaWdhAAgAAAABAAAAAQAEAAQAAAABAAgAAQAGAAAAAQAAAAAAAQQAAZAABQAIAokCzAAAAI8CiQLMAAAB6wAyAQgAAAIABQMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAUGZFZABA5kbm6wOA/4AAXAOAAIAAAAABAAAAAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAAAAAUAAAADAAAALAAAAAQAAAGqAAEAAAAAAKQAAwABAAAALAADAAoAAAGqAAQAeAAAABQAEAADAATmRuZM5lHmXOZh5nnmiuaj5uv//wAA5kbmS+ZQ5lzmYeZ55ormo+bq//8AAAAAAAAAAAAAAAAAAAAAAAAAAQAUABQAFgAYABgAGAAYABgAGAAAAAEAAgADAAQABQAGAAcACwAIAAwACQAKAAABBgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAMAAAAAACgAAAAAAAAAAwAAOZGAADmRgAAAAEAAOZLAADmSwAAAAIAAOZMAADmTAAAAAMAAOZQAADmUAAAAAQAAOZRAADmUQAAAAUAAOZcAADmXAAAAAYAAOZhAADmYQAAAAcAAOZ5AADmeQAAAAsAAOaKAADmigAAAAgAAOajAADmowAAAAwAAObqAADm6gAAAAkAAObrAADm6wAAAAoAAAAAAAAANgBwANABBgFqAbIB2AMKA0QDnAPAA+4AAQAAAAADQQK+ABsAAAkBNjQmIgcJASYiBhQXCQEGFBYyNwkBFjI2NCcCLQEKCRMaCv73/vkKGRQKAQf+9woTGgoBCQEJChoTCQF/AQgJGhMJ/vgBCAkTGQr++P74ChkTCQEI/vUJExoKAAAAAQAA/7wDwwNAACAAAAEmJyUDJicxBgcDBQ4BHwEDBhY/ARcWOwEyNjc0JwM3NgO9BhP+8XgKExQJev7xEwwNxC8CIBHy8gcIAQ0SAQItxQ0B7BIDKgEDEQEBEf7+KQQkDsr+4xMXCYWGBBIOBgUBF8kOAAABAAD/vAPDA0EAOQAABSIvAQcGJjcTJyY2PwE2HgEGDwEXFg8BNzYfAScmPwEnJi8BBw4BLgE3EzY3MRYXEwUeAQ8BExYHBgL/CAfy8hEgAi/EDQwSnA0VBA4OX6YKAifIDxDHJgILpOERB2RkBhgYCQWCCRQTCngBDxINDcUuAhAIQASGhQkXEwEdyg4kBBoCDhsVAxCqDBDrbggJbuwQC6kiAw/V1AwJDBgMARIRAQER/v0qAyUOyf7jEwwGAAACAAD/wANgA0AAEAAcAAABDgEHFgAXFjsBMj8BEjcuAQMuASc+ATceARcOAQIAlccEEwEYHgkOAQ4JbdoBBMeVRFoCAlpERFoCAloDQATHlZv+nhkKC30BDIyVx/4EAlpERFoCAlpERFoAAAADAAD/wANgA0AACwAXADkAAAEuASc+ATceARcOAQMOAQceARc+ATcuAQMiJjQ3NhI3LgEnDgEHFBYXFg4BJicCJz4BNx4BFwYABwYCAFFtAgJtUVFtAgJtUTZJAQFJNjZJAQFJNgwUCUzgCwOjenqjA2ljCQMVGQnaAQTHlZXHBBP+6B4KASACbVFRbQICbVFRbQE+AUk2NkkBAUk2Nkn9YRIaCk4BLm56owMDo3o5vXkLGhEDCgEMjJXHBATHlZv+nhkKAAAAAAEAAP+9A8MDQQAsAAAFJz4BNS4BJw4BBx4BFzI3PgEuAQcGIy4BJz4BNx4BFxQGBwYUHwMWMj4BA7qZLjIF67Cx6wQE67FaUgwJCxgNRUyWxgQExpaVxwQzLwkKAwKmChkUAQyjOIdKsesEBOuxsOsFJQYYGQkFIATHlZbGBATGlkV9MgoZCgIEsQoSGgAAAAEAAAAAA4QCPwASAAABJiIHCQEmIgYUFwEXFjI3ATY0A3oKGQr+uP60ChoTCgFhAgoaCQFeCgI1CQn+tQFJChQZCv6iAgkJAWIKGQAEAAD/vgPCA0IACAARAHQAxgAAAS4BNDYyFhQGJyIGFBYyNjQmEyIvAQYnBw4BJyYnLgE/ASYnBwYmJyYnJjY/ASY0NycuATc2Nz4BHwE2NycmNjc2NzYWHwE2Fzc+ARcWFx4BDwEWFzc2FhcWFxYGDwEWFAcXHgEHBgcOAS8BBgcXFgYHBgcGJRYXNzYXFjc2HwE2NycmNzY3Nh8BNjcnJjc2NCcmPwEmJwcGJyYnJj8BJicHBicmBwYvAQYHFxYHBgcGLwEGBxcWBwYUFxYPARYXNzYXFhcWBwIAKTY2UjY2KQ4SEhwSEmkQCkkUFEkGEwo0LggJARQPDXwKEQUaDwIGCGUBAWUIBgIPGgURCnwNDxQBCQguNAoTBkkUFEkGEwo0LgkIARQPDXwKEQUaDwIGCGUBAWUIBgIPGgURCnwNDxQBCQguNAX+1hUXRgsTHx8TC0YXFRMCDhkTDBJ3CghhDgECAgEOYQgKdxIMExkOAhMVF0YLEx8fEwtGFxUTAg4ZEwwSdwoIYQ4BAgIBDmEICncSDBMZDgIBIAE2UjY2UjZ/EhwSEhwS/iANZQICZQgGAg8aBREKfA0PFAEJCC40ChMGSQoUCkkGEwo0LgkIARQPDXwKEQUaDwIGCGUCAmUIBgIPGgURCnwNDxQBCQguNAoTBkkKFApJBhMKNC4ICQEUDw18ChEFGg8BVwoIYQ4BBAQBDmEICncSDBMZDgITFRdGCxMPIA8TC0YXFRMCDhkTDBJ3CghhDgEEBAEOYQgKdxIMExkOAhMVF0YMEg8gDxIMRhcVEwIOGRMMEgAAAAABAAD/wAPBA0IAIAAACQEuAQ4BHQEOAQcOARcGHgE2Nz4BNxEUFhcWMzI3ATY0A7j+gAcTEwtwtkEyJwECCBIUCATStQsJBgYOCQGACQGSAaMIBAcQCuEHcWZUgQYKEwoCBwl7EP7kChAEAgoBnQkYAAAAAAEAAP/AA8EDPgA3AAAFIicuATURDgEHDgEuATcmNjc+ATMyFhQGIw4BBz4BNzIWHQEJARUUBiImPQE0PgEWFwEWFAcBBgIgBgYJC7XSAwgUEwgCAScyRsZ7DhISDrG3Hz3GhA4SATT+zBIcEgsTEwcBgAgJ/oAJQAIEEAoBHxF8CQcDChMKBoFUbnESHBIIyV4nRgISDu4BSgFPKw4SEg59ChAHBAj+YAoYCf5jCgAAAQAA/+8C0AMQABEAAAUiJwEmNDcBNjIWFAcJARYUBgKgEw/+oA4OAWAPJh0O/sIBPg4dEA4BYA8mDwFgDh0mD/7C/sIPJh0AAQAA//8DAgMCABYAAAE2NzYmJwEmDgEWFwkBDgEWMjcBPwE2AvkBAQYEDP6fDyccAQ8BPf7EDgEdJg8BXgECBAFsAQIOHgsBTg4BHiYP/tX+zw4mHg0BUgIBBQAAABIA3gABAAAAAAAAABUAAAABAAAAAAABAAYAFQABAAAAAAACAAcAGwABAAAAAAADAAYAIgABAAAAAAAEAAYAKAABAAAAAAAFAAsALgABAAAAAAAGAAYAOQABAAAAAAAKACsAPwABAAAAAAALABMAagADAAEECQAAACoAfQADAAEECQABAAwApwADAAEECQACAA4AswADAAEECQADAAwAwQADAAEECQAEAAwAzQADAAEECQAFABYA2QADAAEECQAGAAwA7wADAAEECQAKAFYA+wADAAEECQALACYBUQpDcmVhdGVkIGJ5IGljb25mb250Cmh4aWNvblJlZ3VsYXJoeGljb25oeGljb25WZXJzaW9uIDEuMGh4aWNvbkdlbmVyYXRlZCBieSBzdmcydHRmIGZyb20gRm9udGVsbG8gcHJvamVjdC5odHRwOi8vZm9udGVsbG8uY29tAAoAQwByAGUAYQB0AGUAZAAgAGIAeQAgAGkAYwBvAG4AZgBvAG4AdAAKAGgAeABpAGMAbwBuAFIAZQBnAHUAbABhAHIAaAB4AGkAYwBvAG4AaAB4AGkAYwBvAG4AVgBlAHIAcwBpAG8AbgAgADEALgAwAGgAeABpAGMAbwBuAEcAZQBuAGUAcgBhAHQAZQBkACAAYgB5ACAAcwB2AGcAMgB0AHQAZgAgAGYAcgBvAG0AIABGAG8AbgB0AGUAbABsAG8AIABwAHIAbwBqAGUAYwB0AC4AaAB0AHQAcAA6AC8ALwBmAG8AbgB0AGUAbABsAG8ALgBjAG8AbQAAAAACAAAAAAAAAAoAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA0BAgEDAQQBBQEGAQcBCAEJAQoBCwEMAQ0BDgAFY2xvc2UJZmF2b3JmaWxsBWZhdm9yDGxvY2F0aW9uZmlsbAhsb2NhdGlvbgZzZWFyY2gGdW5mb2xkCHNldHRpbmdzC2ZvcndhcmRmaWxsB2ZvcndhcmQEYmFjawVyaWdodAAAAAAA) format('truetype');
  }

  @font-face {
    font-family: 'iconfont';
    /* project id 2070236 */
    src: url('//at.alicdn.com/t/font_2070236_id1ac7qapa.eot');
    src: url('//at.alicdn.com/t/font_2070236_id1ac7qapa.eot?#iefix') format('embedded-opentype'), url('//at.alicdn.com/t/font_2070236_id1ac7qapa.woff2') format('woff2'),
      url('//at.alicdn.com/t/font_2070236_id1ac7qapa.woff') format('woff'), url('//at.alicdn.com/t/font_2070236_id1ac7qapa.ttf') format('truetype'),
      url('//at.alicdn.com/t/font_2070236_id1ac7qapa.svg#iconfont') format('svg');
  }

  .hxicon {
    font-family: hxicon;
    font-size: 20px;
    font-style: normal;
    /* #ifndef APP-PLUS-NVUE */
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.2px;
    -moz-osx-font-smoothing: grayscale;
    /* #endif */
  }

  .price-zhe {
    display: flex;
    align-items: baseline;
  }

  .per-num {
    display: flex;
  }

  .bottom-bor {
    border-bottom: 3rpx solid #e7e7e7;
  }

  .slotBox {
    .back {
      padding: 0 13rpx;
    }
  }

  .pd24 {
    padding: 24rpx;
  }

  .pd20 {
    padding: 20rpx;
  }

  .pt20-pb14 {
    padding-top: 20rpx;
    padding-bottom: 14rpx;
  }

  .pt28-pb18 {
    padding-top: 28rpx;
    padding-bottom: 18rpx;
  }

  .pb30 {
    padding-bottom: 30rpx;
  }

  .pb40 {
    padding-bottom: 40rpx;
  }

  .pb50 {
    padding-bottom: 50rpx;
  }

  .pt-pb30 {
    padding-top: 30rpx;
    padding-bottom: 30rpx;
  }

  .pt-pb35 {
    padding-top: 35rpx;
    padding-bottom: 35rpx;
  }

  .ml54 {
    margin-left: 54rpx;
  }

  .ml138 {
    margin-left: 138rpx;
  }

  .br-rd10 {
    border-radius: 10rpx;
  }

  .br-rd20 {
    border-radius: 20rpx;
  }

  .stb-btn {
    padding: 8rpx 18rpx;
    border-radius: 10rpx;
	background:  #ff0000;
  }

  .br-FF0000 {
    border: 1rpx solid #ff0000;
    border-radius: 24rpx;
    padding: 6rpx 12rpx;
  }

  .bg-FFF6EE {
    background-color: #fff6ee;
  }

  .mt80 {
    margin-top: 80rpx;
  }

  .mt10 {
    margin-top: 10rpx;
  }

  .product {
    // padding-bottom: 150rpx;
  }

  .pic {
    width: 100%;
    position: relative;

    .swiper {
      // height: 620rpx;
	  height: 100vw;
	
      video {
        width: 100%;
        // height: 620rpx;
		height: 100vw;
      }

      image {
        width: 100%;
        // height: 620rpx;
		height: 100vw;
      }
    }

    .p-price {
      width: 100%;
      // position: absolute;
      top: 460rpx;
      // background: linear-gradient(90deg,#20a733, #0a824b);
      background: #FA6138;
      border-radius: 20rpx 20rpx 0px 0px;
      position: relative;
      top: -18rpx;

      .discount {
        color: #ffffff;
      }
    }
  }

  .richText {
    padding: 30rpx;

    /deep/ img {
      margin-top: 0 !important;
    }
  }

  //秒杀，拼团样式
  .p-ab {
    position: absolute;
    z-index: 2;
    top: -8rpx;
    right: 0;
  }

  .stb-list {
    padding-bottom: 10rpx;
  }

  .triangle-bottomright {
    width: 0;
    height: 0;
    border-bottom: 105rpx solid #dccda4;
    border-left: 60rpx solid transparent;
  }

  .seckill {
    background-color: #dccda4;
    color: #FA6138;
    padding: 12rpx 15rpx;
    padding-right: 28rpx;
    border-radius: 5rpx 20rpx 0px 0px;
    box-sizing: border-box;
  }

  .seckill-btn {
    width: 86%;
  }

  .br-284534 {
    border-bottom: 1rpx solid rgba($color: #284534, $alpha: 0.3);
  }

  .gb-te {
    padding-top: 20rpx;
    padding-bottom: 15rpx;
  }

  .gb-btn {
    padding: 20rpx 40rpx;
    line-height: 30rpx;
  }

  .btn-bg-dccda4 {
    background: #dccda4;
    border-radius: 48px;
  }

  .btn-bg-00321E {
    background: #FA6138;
    border-radius: 48px;
  }

  .btn-bg-00320E {
    background: #FA6138;
    border-radius: 48px;
  }

  .btn-bg-dccda4-48 {
    padding: 20rpx 85rpx;
    border-radius: 48px;
    background: #F8A764;
    color: white;
    margin-right: 10rpx;
  }

  .btn-bg-dccda4-482 {
    padding: 20rpx 85rpx;
    border-radius: 48px;
    background: #FA6138;
    color: white;
    margin-left: 10rpx;
  }

  .tab {
    position: sticky;
    top: 0;
    background-color: #fff;
    padding-top: 38rpx;
    z-index: 9;

    .pb30 {
      position: relative;

      &::before {
        content: '';
        position: absolute;
        left: 50%;
        bottom: 0;
        transform: translateX(-50%);
        width: 0;
        height: 2px;
        background: #FA6138;
        transition: all 0.3s;
      }

      &.active {
        font-size: 30rpx;
        color: #FA6138;
        font-weight: 700;

        &::before {
          width: 100%;
        }
      }
    }
  }

  .bottom-btn {
    width: 100%;
    position: fixed;
    bottom: 0;
    border-top: 1rpx solid #e6e6e6;
    z-index: 9;

    .cart {
      position: relative;

      .number {
        position: absolute;
        top: -10rpx;
        left: 45rpx;
        padding: 4rpx 8rpx;
        background-color: #ff0000;
        border: 4rpx solid #ffffff;
        border-radius: 40rpx;
      }
    }

    .cart-btn {
      width: 230rpx;
      height: 85rpx;
      background: #dccda4;
      border-radius: 43rpx 0rpx 0rpx 43rpx;
    }

    .buy-btn {
      width: 230rpx;
      height: 85rpx;
      line-height: 85rpx;
      background: #FA6138;
      border-radius: 0rpx 43rpx 43rpx 0rpx;
    }
  }

  .flex-sb {
    display: flex;
    justify-content: space-between;
    border-bottom: 3rpx solid #e7e7e7;
  }

  //弹窗
  .spec {
    border-radius: 18rpx 18rpx 0rpx 0rpx;
    padding-top: 30rpx;
    max-height: 900rpx;
    overflow-y: auto;

    // position: fixed;
    //     bottom: 0;
    //     z-index: 999;
    //     width: 100%;
    .spec-item {
      background-color: #f6f6f6;
      border: 1px solid #f6f6f6;
      padding: 12rpx 30rpx;
      font-size: 24rpx;
      color: #1a1a1a;
      border-radius: 4px;
    }

    .activeColor {
      background-color: #e1e6e3;
      border: 1px solid #3775F6;
      color: #FA6138;
      border-radius: 4px;
    }

    .spec-item:not(:last-child) {
      margin-right: 24rpx;
    }

    //减号
    .minus {
      width: 50rpx;
      height: 50rpx;
      line-height: 50rpx;
      text-align: center;
      background: #dedede;
      border-radius: 8rpx 0rpx 0rpx 8rpx;
    }

    .num {
      width: 74rpx;
      height: 46rpx;
      line-height: 46rpx;
      text-align: center;
      border: 1px solid #dedede;
    }

    //加号
    .plus-sign {
      width: 50rpx;
      height: 50rpx;
      line-height: 50rpx;
      text-align: center;
      background: #dedede;
      border-radius: 0rpx 8rpx 8rpx 0rpx;
    }

    .specOpen-btn {
      margin-top: 68rpx;
      padding-bottom: 34rpx;

      button {
        background-color: #FA6138;
        color: #ffffff;
      }
    }
  }
</style>