ceres-uniapp-v2.0/pages_category_page1/goodsModule/goodsDetails.vue

<template>
  <view
      class="container u-skeleton"
      @scroll="handlePageScroll"
  >
    <global-loading/>
    <view class="">
      <!--  拼团滚动-->
      <view class="news-box">
        <view class="news-bg">
          <swiper
              class="goodsImgswiper-box"
              :vertical="true"
              :circular="true"
              interval="8000"
              duration="2000"
              :autoplay="true"
          >
            <swiper-item
                v-for="(item, index) of broadCastList"
                :key="index"
            >
              <view class="news-item flex-items">
                <image
                    class="item-avatar"
                    :src="item.headImage"
                ></image>
                <view class="news-item-user">{{ item.name }}</view>
                <view class="news-item-info">{{ item.timeStr }}</view>
                <view
                    class="news-item-info"
                    v-if="item.type === 1"
                >给了好评
                </view>
                <view
                    class="news-item-info"
                    v-if="item.type === 2"
                >正在拼单
                </view>
                <view
                    class="news-item-info"
                    v-if="item.type === 3"
                >拼单成功
                </view>
                <view
                    class="news-item-info"
                    v-if="item.type === 4"
                >下单
                </view>
              </view>
            </swiper-item>
          </swiper>
        </view>
      </view>

      <!-- 轮播图+分享+价格名称+活动倒计时+优惠券 -->
      <GoodActivityDetail
          ref="goodActivityDetail"
          :sku-select="selectedSku"
          :product-info="productData"
          :time-active-type="timeActiveType"
          :mark-tools="markTools"
          :shop-mark-tools="shopMarkTools"
          @activityEnd="handleActivityEnd"
          @couponClick="handleShowCoupon"
      />

      <!-- 发货 -->
      <view class="express-box flex-items flex-row fs24 u-skeleton-fillet">
        <label class="fs24 font-color-999 mar-right-20 ">发货</label>
        <image
            src="https://ceres.zkthink.com/static/images/mapIcon.png"
            v-if="productData.receive && productData.receive.receiveAdress"
        ></image>
        <label
            class="mar-left-10 mapName mar-right-30"
            v-if="productData.receive && productData.receive.receiveAdress"
        >{{
            productData.receive.receiveAdress
          }}</label>
        <label>快递：¥ {{ productData.logisticsPrice || 0 }}</label>
      </view>

      <!-- 选择SKU -->
      <view
          class="fs24 chooseSize-box flex-start"
          @click=" handleShowGoodsSkuSelect(6)"
      >
        <view class="chooseSize-content flex-items flex-row flex-sp-between u-skeleton-fillet">
          <view class="flex-row-plus ">
            <label class="fs26   mar-left-30 font-color-999">选择</label>
            <view class="valueBox mar-left-20 flex-items">
              <view
                  class="mar-right-10"
                  v-for="(item, index) of currentSuk"
                  :key="index"
              >{{ item.skuText || '-' }}
              </view>
            </view>
          </view>
          <image
              class="arrow-icon"
              src="https://ceres.zkthink.com/static/img/user/arrow.png"
          ></image>
        </view>
      </view>

      <!--结合销售-->
      <combined-sales
          :pid="productId"
          :productData="productData"
      ></combined-sales>
      <!--拼团-->
      <view
          v-if="selectedSku.activityType === 1"
          class="borRig-line-20"
      ></view>
      <!-- 拼单列表 -->
      <view
          v-if="selectedSku.activityType === 1&&topThreeCollageOrders.length > 0"
          class="goodsDiscount"
      >
        <view class="questionTit mar-left-30 flex-items flex-row flex-sp-between">
          <label class="">这些人正在拼单</label>
          <view class="allMoreBox">
            <view
                class="allMore"
                @click="handleOpenGroupBookingList"
            >查看全部
            </view>
            <image
                class="evaluateAllArrow-icon mar-left-10"
                src="https://ceres.zkthink.com/static/img/user/arrow.png"
            ></image>
          </view>
        </view>
        <view
            class="groupBuy"
            v-for="(Gitem, index) in topThreeCollageOrders"
            :key="index"
        >
          <view
              class="groupBuyList"
              v-if="Gitem.time > 0"
          >
            <view class="groupBuyItem">
              <view class="leftAvatar">
                <img
                    :src="Gitem.headImage"
                    alt=""
                >
                <span>{{ Gitem.name }}</span>
              </view>
              <view class="rightInfo">
                <view
                    class="groupBuyTime"
                    style="width: 70%;"
                >
                  <view class="needPeople flex-row-plus">还差<b>{{ Gitem.person }}人</b>拼成</view>
                  <view class="endDate">剩余{{ handleGetDownTime(Gitem.time) }}</view>
                </view>
                <view
                    class="groupBuyBtn"
                    @click="handleGoGroupBooking(Gitem.collageId)"
                >和Ta拼
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
      <!--  评价  -->
      <GoodEvaluateAndQuestion
          ref="goodEvaluateAndQuestion"
          class=" u-skeleton-fillet"
          :product-info="productData"
          :comment-list="commentList"
      />
      <!-- 店铺 -->
      <view class="inStore-box flex-items flex-row flex-sp-between  u-skeleton-fillet">
        <view class="flex-display flex-row">
          <view>
            <image
                @click="handleJumpToStore"
                class="inStore-logo default-img"
				onerror="this.src='url(https://ceres.zkthink.com/static/root/default.png) no-repeat center';this.οnerrοr=null"
                :src="productData.shopLogo"
            ></image>
          </view>
          <view class="flex-display flex-column mar-left-20">
            <label @click="handleJumpToStore">{{ productData.shopName }}</label>
            <view class="flex-display flex-row fs24 font-color-999 mar-top-5">
              <label>商品总类：{{ productData.classifyNumber }}</label>
              <label class="mar-left-30">已售：{{ productData.number }}件</label>
            </view>
          </view>
        </view>
        <view
            class="inStore-but"
            @click="handleJumpToStore"
        >去逛逛
        </view>
      </view>
      <!-- 详细信息 -->
      <view class="goodsDetails-box u-skeleton-fillet">
        <view class="goodsDetails-title">
          <view class="goodsDetails-Line"></view>
          <label class="goodsDetails-text">宝贝详情</label>
          <view class="goodsDetails-Line"></view>
        </view>
        <view class="goodsDetailsimg-box">
          <view class="">
            <rich-text :nodes="sellDescList"></rich-text>
          </view>
        </view>
      </view>
    </view>
    <!-- 底部购买 -->
    <view class="buygoods-box">
      <view
          class="buygoodsBut-box flex-row-plus"
          :style="{'height':(isIphone === true? 160:130)+'rpx'}"
      >
        <view class="btns_container">
          <view
              class="btns flex-column-plus"
              @click="handleJumpToStore"
          >
            <image
                class="store-icon"
                src="https://ceres.zkthink.com/static/images/storeIcon.png"
            ></image>
            <label class="fs22">店铺</label>
          </view>
          <!-- #ifdef MP-WEIXIN || APP-PLUS || H5 -->
          <view
              class="btns flex-column-plus mar-left-10"
              @click="flyToService"
          >
            <image
                class="store-icon"
                src="https://ceres.zkthink.com/static/images/service-product-detail.png"
            ></image>
            <label class="fs22">客服</label>
          </view>
          <!-- #endif -->
          <view
              class="btns flex-column-plus mar-left-10 flex-items Cart"
              @click="handleJumpToShopCart"
          >
            <view
                class="cartAllNum"
                v-if="allCartNum>0"
            >{{ allCartNum }}
            </view>
            <image
                class="store-icon"
                src="https://ceres.zkthink.com/static/images/gouwuche.png"
            ></image>
            <label class="fs22">购物车</label>
          </view>
        </view>
        <view class="btns_container">
          <view
              class="flex-row-plus offShelf"
              v-if="productData.shelveState === 0"
          >
            商品已下架
          </view>
          <view
              class="flex-row-plus flex-items"
              v-else-if="selectedSku.activityType === 1"
          >
            <view
                class="joinShopCartBut"
                @click=" handleShowGoodsSkuSelect(4)"
            >单独购买
            </view>
            <view
                class="buyNowBut"
                @click=" handleShowGoodsSkuSelect(3)"
            >我要开团
            </view>
          </view>
          <view
              class="flex-row-plus flex-items"
              v-else
          >
            <view
                class="joinShopCartBut"
                @click=" handleShowGoodsSkuSelect(1)"
            >加入购物车
            </view>
            <view
                class="buyNowBut"
                @click=" handleShowGoodsSkuSelect(2)"
            >立即购买
            </view>
          </view>
        </view>
      </view>
    </view>
    <!-- 回到顶部 -->
    <view class="returnTopService-box">
      <view
          class="returnTop-box flex-items-plus flex-column"
          @click="handleReturnTop"
          :style="{'display':(returnTopFlag===true? 'flex':'none')}"
      >
        <image
            class="returnTopImg"
            src="https://ceres.zkthink.com/static/images/backTop.png"
        ></image>
      </view>
    </view>
    <!-- SKU选择器 -->
    <GoodSkuSelect
        ref="skuSelect"
        :product-data="productData"
        :selected-sku="selectedSku"
        :collage-id="collageId"
        @postSelectSku="selectSkuPostProcessor"
        @getCurrentSku="handleSelectSku"
        @changeCartNum="(num)=>allCartNum = num"
    />
    <!-- 优惠券选择器 -->
    <coupon-popup
        ref="couponPopup"
        :markTools="markTools"
        :shopMarkTools="shopMarkTools"
        :setTop="topLeft"
        :currentActive="currentActive"
    ></coupon-popup>
    <!-- 拼单弹框 -->
    <u-popup
        class="popupDiscount"
        v-model="showGroupBuyList"
        mode="center"
        border-radius="14"
        close-icon-pos="top-right"
        close-icon-size="20"
    >
      <view class="popupDiscountTit">这些人正在拼单</view>
      <view class="groupBuy">
        <view class="groupBuyList">
          <scroll-view
              style="height: 480upx;"
              scroll-y
          >
            <view
                class="groupBuyItem1"
                v-for="(aitem,index) in selectedSku.collageOrders"
                :key="index"
            >
              <view
                  class="leftAvatar"
                  v-if="aitem.time > 0"
              >
                <img
                    :src="aitem.headImage"
                    alt=""
                >
                <view class="groupBuyTime">
                  <view class="needPeople"><span>{{ aitem.name }}</span>还差<b>{{ aitem.person }}人</b>
                  </view>
                  <view class="endDate">剩余{{ handleGetDownTime(aitem.time) }}</view>
                </view>
              </view>
              <view
                  class="rightInfo"
                  v-if="aitem.time > 0"
              >
                <view
                    class="groupBuyBtn"
                    @click="handleGoGroupBooking(aitem.collageId)"
                >和Ta拼
                </view>
              </view>
            </view>
          </scroll-view>
        </view>
      </view>
    </u-popup>
    <!-- 骨架屏 -->
    <Skeleton
        el-color="#efefef"
        bg-color="#fff"
        :loading="isFirstComeIn&&loading"
        :animation="true"
    ></Skeleton>
  </view>
</template>

<script>
import Skeleton from "../../components/Skeleton";
import UButton from "../../uview-ui/components/u-button/u-button";
import CombinedSales from "@/components/activities/combinedSales";
import CouponPopup from "../../components/goodsDetalils/coupon-popup";
import { Services } from "../../utils/services";
import GoodEvaluateAndQuestion from "./components/GoodEvaluateAndQuestion";
import GoodActivityDetail from "./components/GoodActivityDetail";
import GoodSkuSelect from "./components/GoodSkuSelect";
import { TimeFormatting } from "../../utils/timeUtil";
import USkeleton from "../../uview-ui/components/u-skeleton/u-skeleton";

const NET = require('../../utils/request')
const API = require('../../config/api')
export default {
  components: {
    USkeleton,
    Skeleton,
    CouponPopup,
    CombinedSales,
    UButton,
    GoodEvaluateAndQuestion, GoodActivityDetail, GoodSkuSelect
  },
  data() {
    return {
      isFirstComeIn: true,
      loading: true,
      isIphone: "",
      returnTopFlag: false, // 回到顶部
      productId: '', // 商品ID，有可能屎缓存数据
      shopGroupWorkId: null,// 拼团数据ID
      topThreeCollageOrders: {}, //当前商品拼单数据
      collageId: 0, // 去拼团时的拼单ID
      broadCastList: [], // 拼团滚动数据
      showGroupBuyList: false, // 是否展示拼单弹窗
      shopGroupWorkTicker: null, // 拼团倒计时定时器
      paramSkuId: null, // 秒杀商品ID
      // 商品详情
      productData: {},
      // 当前选中SKU
      selectedSku: {},
      currentSuk: [], // 选中的SKU（子组件给当前页面做数据渲染）
      buyNum: 1,// 当前选取的SKU购买数量
      storeId: '',// 店铺ID
      commentList: [], // 商品评价列表
      sellDescList: '', // 商品详情长图（富文本）
      timeActiveType: true,// 是否开启活动（非则预热）
      btnType: 1, // 拉起SKU窗口的按钮类型 1加入购物车 2立即购买 3开团 4单独购买 6选择SKU
      allCartNum: 0, // 购物车数量
      markTools: [], //平台优惠券
      shopMarkTools: [], //店铺优惠券
      currentActive: 0, // 优惠券选项卡类型
      topLeft: 0, // 距离顶部（返回顶部使用）
      // 埋点对象
      pointOption: {
        inTime: null,
        data: {
          eventType: 1,
          productIds: '',
        }
      }
    }
  },
  created() {
    if (this.ticker) { //这一段是防止进入页面出去后再进来计时器重复启动
      clearInterval(this.ticker);
    }
    if (this.allCartNum > 99) {
      this.allCartNum = '...'
    }
  },
  beforeDestroy() {


  },
  onShow() {

  },
  onLoad(options) {
    // 页面滚动条归0，不然骨架屏有问题
    uni.pageScrollTo({
      scrollTop:0,
      duration:0
    })
    this.productData = {
      logisticsPrice: 0,
      images: ['123', '123', '123'],
      productName: '....',
      ifCollect: 1,
    }
    this.selectedSku = {
      activityType: 0,
      originalPrice: 0
    }
    if(options.detail){
      options = this.$getJumpParam(options)
    }
    this.isFirstComeIn = true
    this.loading = true
    let salesId = null
    this.pointOption.inTime = new Date().getTime()
    this.isIphone = getApp().globalData.isIphone;
    let item = getApp().globalData.productShareItem
    if (item) {
      const item = getApp().globalData.productShareItem
      this.shopId = parseInt(item.shopId)
      this.productId = item.productId
      this.paramSkuId = item.skuId
      salesId = parseInt(item.salesId)
      getApp().globalData.productShareItem = undefined
    } else {
      this.shopId = parseInt(options.shopId)
      this.productId = options.productId
      this.paramSkuId = options.skuId
      salesId = parseInt(options.salesId)
    }
    // 判断是否是拼团
    if (options.shopGroupWorkId) {
      this.shopGroupWorkId = options.shopGroupWorkId
    }
    this.handleGetProductDetail()
    // 绑定分销关系
    salesId && this.shopId ? this.bindSalesCustomer(salesId, this.shopId) : ''
    this.allCartNum = uni.getStorageSync('allCartNum')
  },
  onUnload() {
    // 判断是否要埋点
    const nowTime = new Date().getTime()
    if (nowTime - this.pointOption.inTime >= 5000) {
      // 埋点
      this.pointOption.data.productIds = this.productId
      this.$store.dispatch('doPointer', this.pointOption.data)
    }
    // 销毁平团倒计时计时器
    if (this.shopGroupWorkTicker) {
      clearInterval(this.shopGroupWorkTicker)
      this.shopGroupWorkTicker = null
    }
  },
  mounted() {

  },
  onPageScroll(e) {
    this.returnTopFlag = e.scrollTop > 600;
    this.topLeft = e.scrollTop
  },
  methods: {
    /**
     * 页面滚动事件
     * @param e
     */
    handlePageScroll(e) {
      this.topLeft = e.scrollTop
    },

    /**
     * 选取sku
     * @param skuObj:{currentSuk:object,selectedSku:object,buyNum:number}
     */
    handleSelectSku(skuObj) {
      this.currentSuk = skuObj.currentSku
      this.selectedSku = skuObj.skuItem
      this.buyNum = skuObj.buyNum
    },

    /**
     * 选择sku后置方法
     * 判断有无活动等操作
     */
    selectSkuPostProcessor() {
      const ifEnable = this.selectedSku['ifEnable']
      if (this.selectedSku.activityType === 1 && ifEnable === 0) {
        this.topThreeCollageOrders = this.selectedSku.collageOrders.slice(0, 3)
      }
      if ([1, 2, 3, 4, 5].includes(this.selectedSku.activityType) && ifEnable === 0) {
        this.$refs.goodActivityDetail.handleGetCountDownNumber(this.selectedSku.endTime)
      }
      this.timeActiveType = ifEnable === 0;
    },

    /**
     * 获取拼团滚动数据
     */
    async handleGetGroupBookingRollList() {
      let param = {
        productId: this.productId,
        shopGroupWorkId: this.shopGroupWorkId ?? undefined,
      }
      const res = await NET.request(API.GetBroadCastList, param, 'GET')
      this.broadCastList = res.data
    },

    /**
     * 和他人拼单
     * @param collageId 已存在的拼团订单ID
     */
    handleGoGroupBooking(collageId) {
      this.showGroupBuyList = false
      this.collageId = collageId
      this.$refs.skuSelect.goodsDetailShowFlag = true
    },

    /**
     * 设置拼团倒计时
     */
    handleSetDownTime() { //这个计时器是每秒减去数组中指定字段的时间
      let productHaveCollageOrder = false
      // 判断sku组合中是否存在拼单
      const skuCollects = this.productData.map
      for (const skuCollectItemKey in skuCollects) {
        const collageOrders = skuCollects[skuCollectItemKey]['collageOrders']
        if (collageOrders && collageOrders.length > 0) {
          productHaveCollageOrder = true
          break
        }
      }
      if (!productHaveCollageOrder) return

      this.shopGroupWorkTicker = setInterval(() => {
        for (const skuCollectItemKey in skuCollects) {
          const collageOrders = skuCollects[skuCollectItemKey]['collageOrders']
          if (collageOrders && collageOrders.length > 0) {
            collageOrders.forEach(collageItem => {
              collageItem.time > 0 ? collageItem.time -= 1000 : ''
            })
          }
        }
      }, 1000);
    },

    /**
     * 根据时间戳获取格式化时间（处理计时器）
     * @param remainMillSecs 毫秒，还有多久结束
     * @return {string}
     */
    handleGetDownTime(remainMillSecs) {
      if (remainMillSecs <= 0) {
        clearInterval(this.shopGroupWorkTicker)
        this.shopGroupWorkTicker = null
        this.handleGetProductDetail()
      }
      const timeFormatting = TimeFormatting(remainMillSecs / 1000);
      return `${ timeFormatting.hour }:${ timeFormatting.min }:${ timeFormatting.sec }`;
    },

    /**
     * 跳转到购物车
     */
    handleJumpToShopCart() {
      this.$jumpToTabbar('../../pages/tabbar/cart/index')
    },

    /**
     * 跳转到店铺
     */
    handleJumpToStore() {
      this.$jump(`../store/index?storeId=${ this.shopId }`)
    },

    /**
     * 返回头部
     */
    handleReturnTop() {
      uni.pageScrollTo({
        scrollTop: 0,
        duration: 300
      });
    },

    /**
     * 打开SKU弹窗
     * @param type 1加入购物车 2立即购买 3开团 4单独购买 6选择SKU
     */
    handleShowGoodsSkuSelect(type) {
      // 为type情况时，绝不可能为和他人拼单
      this.collageId = 0
      this.$refs.skuSelect.btnType = type
      this.$refs.skuSelect.goodsDetailShowFlag = true
    },

    /**
     * 打开优惠券弹窗
     */
    handleShowCoupon() {
      this.$refs.couponPopup.showActivity = true
    },

    /**
     * 活动商品时间到后置方法
     * 供GoodActivityDetail组件调用
     */
    handleActivityEnd() {
      this.selectedSku.activityType = 0
      location.reload()
    },

    /**
     * 获取商品详情
     */
    async handleGetProductDetail() {
      this.loading = true
      // uni.showLoading({
      //   title: '加载中...',
      //   mask: true
      // })
      try {
        let postData = {
          shopId: this.shopId,
          productId: this.productId,
          skuId: this.paramSkuId,
          terminal: 1
        }
        const res = await NET.request(API.QueryProductDetail, postData, "GET")
        this.isFirstComeIn = false
        this.loading = false
        this.productData = res.data
        this.markTools = res.data.markTools //平台优惠券
        this.shopMarkTools = res.data.shopMarkTools //店铺优惠券
        this.currentActive = this.markTools.length === 0 && this.shopMarkTools.length > 0 ? 1 : 0
        //处理单规格商品，如果是单款式商品，需要特殊处理productData.names
        const skuCollectionList = this.productData.map
        const skuCollectionListKeys = Object.keys(skuCollectionList)
        if (skuCollectionListKeys.length === 1 && skuCollectionListKeys[0] === '单款项') {
          this.productData.names[0].values.push({
            skuValue: this.productData.names[0].skuName,
            valueCode: '单款项'
          })
        }

        //如果sku的图像为空，设置为商品的图像
        for (const key in skuCollectionList) {
          if (!skuCollectionList[key].image) {
            skuCollectionList[key].image = this.productData.images[0]
          }
        }

        // 评价
        this.commentList = res.data.comments
        // 宝贝详情
		
        this.sellDescList = res.data.text.replace(/\<img class=\"wscnph\"/gi,
            '<img')
			.replace(/\<img style=\"display: block; margin-left: auto; margin-right: auto;\"/gi,
			    '<img')
			.replace(/\<img/gi,
            '<img style="display:block;float: none;margin: 0;padding: 0;width:100%;max-width:100%;height:auto" ')

        //渲染商详之后，如果参数传了skuId，则选中该skuId，否则选中第一个规格
        this.$nextTick(async () => {
          if (this.paramSkuId) {
            this.$refs.skuSelect.handleSelectBySkuId(this.paramSkuId)
          } else {
            // 默认选中第0个
            for (const skuRowItem of this.productData.names) {
              this.$refs.skuSelect.handleClickSkuItem(skuRowItem.nameCode, skuRowItem.values[0].valueCode)
            }
          }
          //如果是拼团，设置拼团id
          if (this.productData.activityType === 1) {
            this.shopGroupWorkId = this.productData.shopGroupWorkId
            await this.handleGetGroupBookingRollList()
            this.handleSetDownTime();
          }
          await this.$refs.goodEvaluateAndQuestion.handleGetProblemList()
        })
      } finally {
        uni.hideLoading()
        // this.loading = false
      }
    },

    /**
     * 绑定分销关系
     * @param salesId 分销员ID
     * @param storeId 店铺ID
     */
    bindSalesCustomer(salesId, storeId) {
      //如果已登录，静默绑定客户关系，否则跳转到登录页面
      if (!uni.getStorageSync('storage_key')) {
        uni.setStorageSync('salesId', salesId)
        uni.setStorageSync("shopId", storeId)
        uni.navigateTo({
          url: '../../pages_category_page2/userModule/login'
        })
        return
      }
      NET.request(API.BindSalesCustomer, {
        shopId: storeId,
        distributorId: salesId
      }, 'POST').then(res => {
      })
    }
    ,

    /**
     * 打开拼团列表
     */
    handleOpenGroupBookingList() {
      if (this.topThreeCollageOrders.length > 0) {
        this.showGroupBuyList = true
      } else {
        uni.showToast({
          title: "还没有人拼单，快去拼单吧！",
          icon: "none"
        })
      }
    }
    ,

    /**
     * 打开客服
     * @return {Promise<void>}
     */
    async flyToService() {
      (await Services(this.shopId)).flyToService()
    }
    ,

  }
}
</script>
<style>
.page {
background-color: #F7F7F7;
}
</style>
<style
    scoped
    lang="scss"
>
.page {
  background-color: #F7F7F7;
}

.news-box {
  position: fixed;
  left: 20rpx;
  top: 200rpx;
  z-index: 9999;

  .news-bg {
    width: 450rpx;
    height: 70rpx;
    overflow: hidden;

    .news-item {
      background: rgba(0, 0, 0, 0.75);
      border-radius: 16rpx;
      height: 70rpx;
      color: #FFFFFF;
      font-size: 24rpx;
      padding: 0 20rpx;
      width: 450rpx;

      .item-avatar {
        width: 50rpx;
        height: 50rpx;
        border-radius: 50%;
        margin-right: 20rpx;
      }
    }
  }
}


.tabsbox {
  width: 100%;
  margin-top: 20rpx;
  background-color: #FFFFFF;
}


.checkimg {
  width: 40rpx;
  height: 40rpx;
  margin-right: 30rpx;
}

.container {
  padding-bottom: 180upx;

  .arrow-icon {
    width: 16rpx;
    height: 24rpx;
  }

  .goodgDes-box {
    background-color: #FFFFFF;
    width: 100%;
    padding-bottom: 25rpx;

    .priceBuyNum-box {
      width: 677rpx;
      margin-top: 30rpx;
    }

    .nameContainer {
      display: flex;

      .goodsName-box {
        width: 677rpx;
        height: 85rpx;

        .img618-cion {
          width: 70rpx;
          height: 36rpx;
        }
      }

      .collectBox {
        width: 80rpx;
        margin: 0 30rpx 0 15rpx;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
      }

      .store-icon {
        width: 48rpx;
        height: 48rpx;
      }
    }

    .discounts-box {
      margin-top: 20rpx;

      .discounts-text {
        margin-left: 10rpx;
        color: #FF7800;
        background-color: #FFE4CC;
        padding: 6rpx 12rpx;
        border-radius: 4rpx;
      }
    }

    .activity-box {
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: flex-end;
      border-top: 1upx solid #EDEDED;

      .activity-content {
        width: 614rpx;
        padding-top: 20rpx;

        .activity-text {
          color: #FF7700;
          border: 1rpx solid #FF7700;
          padding: 6rpx 23rpx;
        }

        .coupon-arrow {
          width: 16rpx;
          height: 24rpx;
          margin-left: 15rpx;
        }
      }
    }
  }

  .express-box {
    height: 100rpx;
    background-color: #FFFFFF;
    padding-left: 30rpx;
    border-top: 12rpx solid #F8F8F8;
    border-bottom: 12rpx solid #F8F8F8;

    image {
      width: 21rpx;
      height: 27rpx;
    }

    .expressSite-icon {
      width: 30rpx;
      height: 30rpx;
    }

    .mapName {
      position: relative;

      &:before {
        content: '';
        width: 2rpx;
        height: 30rpx;
        background: #CCCCCC;
        display: block;
        position: absolute;
        right: -16rpx;
        top: 5rpx;
      }
    }
  }

  .chooseSize-box {
    height: 90rpx;
    background-color: #FFFFFF;
    margin: 10rpx 0;

    .chooseSize-content {
      width: 100%;
    }
  }

  .questionTit {
    height: 90rpx;
    border-bottom: 1rpx solid #EEEEEE;
    margin-right: 35rpx;
    color: #333333;
    font-size: 30rpx;

    .allMoreBox {
      display: flex;
      align-items: center;
      color: #999999;
      font-size: 24rpx;

      .evaluateAllArrow-icon {
        width: 18rpx;
        height: 24rpx;
      }
    }
  }

  .shopEvaList {
    display: flex;
    padding: 30rpx;
    flex-wrap: wrap;
    border-bottom: 20rpx solid #EEEEEE;

    .shopEvaItem {
      padding: 0 14rpx;
      height: 60rpx;
      background: #ffe4cc;
      border-radius: 6rpx;
      line-height: 60rpx;
      text-align: center;
      font-size: 28rpx;
      color: #666666;
      margin: 0 20rpx 20rpx 0;
    }
  }

  .storeEvaluate-box {
    background-color: #FFFFFF;
    margin-top: 20rpx;

    .storeEvaluate {
      width: 690rpx;
      padding: 20rpx 0;
      border-bottom: 1rpx solid #EDEDED;
    }

    .storeEvaluateTag-box {
      margin-top: 10rpx;
      margin-left: 10rpx;
      padding-bottom: 30rpx;
      display: flex;
      flex-wrap: wrap;

      .storeEvaluateTag-text {
        background-color: #FFE4CC;
        border-radius: 6rpx;
        padding: 16rpx 14rpx;
        color: #656565;
        margin-left: 20rpx;
        margin-top: 20rpx;
      }
    }
  }

  .inStore-box {
    background-color: #FFFFFF;
    margin-top: 20rpx;
    padding: 20rpx 30rpx;

    .inStore-logo {
      width: 70rpx;
      height: 70rpx;
    }

    .inStore-but {
      width: 140rpx;
      height: 60rpx;
      line-height: 60rpx;
      text-align: left;
      font-size: 24rpx;
      color: #FFEBC4;
      background: #333333;
      padding-left: 20rpx;
      position: relative;

      &:before {
        content: '';
        width: 60rpx;
        height: 60rpx;
        background: url("https://ceres.zkthink.com/static/images/arrow.png") no-repeat center center;
        background-size: contain;
        display: block;
        position: absolute;
        right: 0;
      }
    }
  }

  .goodsDetails-box {
    background-color: #FFFFFF;
    margin-top: 20rpx;
    padding: 20rpx 30rpx;

    .goodsDetails-title {
      display: flex;
      flex-direction: row;
      align-items: center;

      .goodsDetails-Line {
        width: 265rpx;
        border-bottom: 1rpx solid #EDEDED;
      }

      .goodsDetails-text {
        padding: 0 22rpx;
      }
    }

    .goodsDetailsimg-box {
    }
  }

  .priceExplain-box {
    background-color: #FFFFFF;
    margin-top: 20rpx;
    padding: 20rpx 30rpx;

    .priceExplain-title {
      display: flex;
      flex-direction: row;
      align-items: center;

      .priceExplain-Line {
        width: 265rpx;
        border-bottom: 1rpx solid #EDEDED;
      }

      .priceExplain-text {
        padding: 0 22rpx;
      }
    }

    .priceExplain-dot {
      width: 9rpx;
      height: 9rpx;
      border: 1rpx solid #FF7700;
      border-radius: 50%;
      background-color: #FF7700;
    }
  }

  .buygoods-box {
    position: fixed;
    bottom: 0rpx;
    box-sizing: border-box;
    z-index: 999;
    .groupByInfo {
      background: #fffbe9;
      padding: 0 30rpx;
      height: 80rpx;

      .groupByInfoBox {
        height: 80rpx;
      }

      .groupByLeft {
        .groupByAvatar {
          margin-right: 15rpx;
        }

        img {
          width: 50rpx;
          height: 50rpx;
        }

        .name {
          font-size: 24rpx;
        }

        .groupByNum {
          margin-right: 10rpx;
        }

        .groupByTime {
          color: #333333;
        }
      }

      .groupByBtn {
        height: 60rpx;
        background: #333333;
        color: #FFEBC4;
        font-size: 14rpx;
        line-height: 60rpx;
        text-align: center;
        padding: 0 20rpx;
      }
    }

    .buygoodsBut-box {
      background-color: #FFFFFF;
      width: 750rpx;
      padding: 20rpx 32rpx;
      box-shadow: 0rpx 0rpx 10rpx 1rpx #EDEDED;
      box-sizing: border-box;
      display: flex;
      justify-content: space-between;

      .btns_container {
        display: flex;
        align-items: center;
      }

      .btns {
        width: 80rpx;
      }

      .Cart {
        position: relative;

        .cartAllNum {
          position: absolute;
          width: 30rpx;
          height: 30rpx;
          line-height: 30rpx;
          text-align: center;
          font-size: 17rpx;
          color: #FFFFFF;
          background: #C5AA7B;
          border-radius: 50%;
          opacity: 1;
          z-index: 999;
        }

        // #ifdef APP-PLUS
        .cartAllNum {
          right: -6rpx;
          top: -6rpx;
        }

        // #endif
        /* #ifdef H5 */
        .cartAllNum {
          right: -10rpx;
          top: -6rpx;
        }

        /* #endif */
        /* #ifdef MP-WEIXIN */
        .cartAllNum {
          right: -3rpx;
          top: 0;
        }

        /* #endif */
      }

      .store-icon {
        width: 48rpx;
        height: 48rpx;
      }

      .joinShopCartBut {
        width: 190rpx;
        height: 80rpx;
        background-color: #FFFFFF;
        color: #333333;
        font-size: 28rpx;
        line-height: 80rpx;
        border: 2rpx solid #333333;
        text-align: center;
        margin-left: 40rpx;
        box-sizing: border-box;
      }

      .buyNowBut {
        width: 190rpx;
        height: 80rpx;
        background: #333333;
        color: #FFEBC4;
        font-size: 28rpx;
        line-height: 80rpx;
        text-align: center;
        margin-left: 16rpx;
      }

      .offShelf {
        background: #b7b7b7;
        border-radius: 50rpx;
        width: 360rpx;
        margin-left: 50rpx;
        line-height: 80rpx;
        height: 80rpx;
        justify-content: center;
        color: #333333;
      }
    }
  }

  .returnTopService-box {
    position: fixed;
    bottom: 160rpx;
    right: 30rpx;

    .fs16 {
      font-size: 16rpx;
    }

    .returnTop-box {
      width: 88rpx;
      height: 88rpx;
      border-radius: 50%;
      background: #FFFFFF;
      opacity: 0.8;

      .returnTopImg {
        width: 58rpx;
        height: 58rpx;
      }
    }

    .serviceImg-box {
      width: 90rpx;
      height: 90rpx;
      border-radius: 50%;
      background-color: #FFFFFF;
      box-shadow: 0rpx 0rpx 5rpx 3rpx #999999;

      .serviceImg {
        width: 36rpx;
        height: 36rpx;
        display: block;
        background: url("https://ceres.zkthink.com/static/images/serviceImg.png") no-repeat center center;
        background-size: contain;
      }
    }
  }


  .parameterShow-box {
    .parameter-title {
      width: 100%;
      text-align: center;
      padding-bottom: 36rpx;
    }

    .parameter-modle {
      width: 690rpx;
      padding-bottom: 36rpx;
      font-size: 26rpx;
    }

    .parameterTruebut-box {
      background-color: #FFFFFF;
      padding: 20rpx 0;

      .parameterTruebut {
        width: 690rpx;
        height: 80rpx;
        background-image: linear-gradient(135deg, #FFA100 10%, #FF7911 100%);
        color: #FFFFFF;
        border-radius: 40rpx;
        line-height: 80rpx;
        text-align: center;
        font-size: 26rpx;
      }
    }
  }

  .couponShow-box {
    .couponShow {
      z-index: 333;
      height: 1000rpx;

      .couponTitle-box {
        width: 100%;
      }

      .coupon-title-active {
        color: #FF7700;
        border-bottom: 2rpx solid #FF7700;
        padding-bottom: 30rpx;
      }

      .usableCoupon-content {
        padding: 30rpx 0;

        .usableCoupon-box {
          width: 690rpx;
          height: 140rpx;
          border-radius: 10rpx;
          background-color: #FFE9D8;

          .immediateUse-but {
            color: #FF7800;
            border-radius: 30rpx;
            padding: 0 40rpx;
            border-left: 3rpx solid #EBD7C7;
            height: 140rpx;
            border-radius: 60rpx;
            line-height: 140rpx;
            font-weight: bold;
          }
        }
      }
    }
  }

  .succeedShow-box {
    position: absolute;
    top: 220rpx;
    left: 185rpx;

    .succeedShow {
      background-color: #7F7F7F;
      width: 380rpx;
      height: 280rpx;
      border-radius: 10rpx;
      opacity: 0.8;

      .couponSucceedImg {
        width: 200rpx;
        height: 130rpx;
      }
    }
  }

}

.activity-box {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;

  .title-box {
    width: 100%;
    height: 100upx;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    position: relative;
    border-bottom: solid 1px #EEEEEE;
  }
}

.activity-coupon-box {
  display: flex;
  flex-direction: column;
  width: 100%;
  overflow: auto;
  flex: 1;
}

.content-box {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  padding: 30rpx;
}

.tag-box {
  width: 100%;
  box-sizing: border-box;
  height: 80rpx;
  line-height: 80rpx;
  font-size: 28rpx;
  font-weight: 500;
  color: #FF7911;
}

.label-lingqu {
  width: 100%;
  font-weight: 500;
  color: rgba(51, 51, 51, 1);
}

.coupon-item {
  width: 690rpx;
  height: 120rpx;
  border-radius: 10rpx;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  margin-top: 20rpx;
  flex-shrink: 0;
  background-color: #FFE9D8;
}

.money-box {
  width: 160rpx;
  box-sizing: border-box;
  padding-left: 30rpx;
  font-weight: 500;
  color: #FF7911;
}

.info-box {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  color: rgba(255, 121, 17, 1);
}

.receive-btn {
  width: 200rpx;
  height: 120rpx;
  background: rgba(255, 233, 216, 1);
  box-shadow: 0px 0px 5rpx 0px rgba(102, 102, 102, 0.35);
  line-height: 120rpx;
  text-align: center;
  font-size: 28rpx;
  font-weight: bold;
  color: rgba(255, 121, 17, 1);
  border-bottom-right-radius: 10rpx;
  border-top-right-radius: 10rpx;
  border-top-left-radius: 120rpx;
  border-bottom-left-radius: 120rpx;
}

.received {
  background: #f1f1f1;
  color: #999;
}


.canvas-box {
  display: block;
  position: absolute;
  top: 100rpx;
}

.sceneMarketingBox {
  width: 100%;
  background: url("https://zk-cereshop.oss-cn-shenzhen.aliyuncs.com/zkthink/2022-02-15/5f85fe4782e34c10b15b04f76c571d12_sceneMarketingDetailsIcon.png"
  ) no-repeat center;
  padding: 20rpx 30rpx;
  background-size: cover;
  display: flex;
  justify-content: space-between;
  align-items: center;

  .sceneNameBox {
    width: 220rpx;
    text-align: center;
    color: #C83732;
    font-size: 20rpx;
  }
}


.goodsDiscount {
  .groupBuy {
    .groupBuyList {
      .groupBuyItem {
        padding: 0 30rpx;
        height: 116rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1rpx solid #EEEEEE;

        .leftAvatar {
          display: flex;
          align-items: center;
          width: 50%;

          img {
            width: 72rpx;
            height: 72rpx;
            margin-right: 10rpx;
            border-radius: 50%;
          }
        }

        .rightInfo {
          display: flex;
          align-items: center;
          width: 50%;

          .groupBuyTime {
            .needPeople {
              font-size: 28rpx;
              color: #333333;
              margin-bottom: 10rpx;
              font-weight: 400;

              b {
                color: #C5AA7B;
                font-weight: 400;
              }
            }

            .endDate {
              color: #666666;
            }
          }

          .groupBuyBtn {
            width: 140rpx;
            height: 60rpx;
            line-height: 60rpx;
            background: #333333;
            text-align: center;
            color: #FFEBC4;
            font-size: 24rpx;
          }
        }
      }
    }
  }
}

.popupDiscount {
  padding-bottom: 70rpx;

  .popupDiscountTit {
    font-size: 36rpx;
    color: #333333;
    height: 105rpx;
    line-height: 105rpx;
    text-align: center;
    border-bottom: 1rpx solid #EEEEEE;
  }

  .groupBuy {
    padding-bottom: 80rpx;

    .groupBuyList {
      .groupBuyItem1 {
        padding: 0 30rpx;
        height: 116rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1rpx solid #EEEEEE;

        .leftAvatar {
          display: flex;
          align-items: center;

          img {
            width: 72rpx;
            height: 72rpx;
            margin-right: 10rpx;
            border-radius: 50%;
          }

          .groupBuyTime {
            margin-right: 80rpx;
            margin-bottom: 10rpx;
            width: 320rpx;

            .needPeople {
              font-size: 26rpx;
              color: #333333;

              span {
                color: #333333;
                padding-right: 10rpx;
              }

              b {
                color: #C5AA7B;
                font-weight: 400;
              }
            }

            .endDate {
              color: #333333;
              opacity: 0.7;
              font-size: 24rpx;
            }
          }
        }

        .rightInfo {
          display: flex;
          align-items: center;

          .groupBuyBtn {
            width: 140rpx;
            height: 70rpx;
            line-height: 70rpx;
            background: #333333;
            text-align: center;
            color: #FFEBC4;
            font-weight: 400;
          }
        }
      }
    }
  }
}

.combination {
  padding: 0 20rpx;

  .combinationList {
    width: 100%;
    height: 680rpx;
    background: #333333;
    box-shadow: 0 20rpx 30rpx rgba(0, 0, 0, 0.3);
    border-radius: 20rpx;

    .combinationTitle {
      padding: 32rpx 20rpx 0 30rpx;

      image {
        width: 211rpx;
        height: 33rpx;
      }

      .combinationPrice {
        padding: 0 20px;
        height: 50rpx;
        background: linear-gradient(90deg, #C83732 0%, #E25C44 100%);
        box-shadow: 0 6rpx 12rpx rgba(233, 0, 0, 0.3);
        border-radius: 26rpx;
        line-height: 50rpx;
        text-align: center;
        color: #FFFFFF;
        opacity: 0.8;
      }
    }

    .buyBtn {
      width: 96%;
      height: 84rpx;
      line-height: 84rpx;
      border: 2rpx solid rgba(0, 0, 0, 0);
      background: linear-gradient(88deg, #C5AA7B 0%, #FFEBC4 100%);
      text-align: center;
      color: #333333;
      margin: 0 auto;
    }
  }
}
</style>