<template>
  <div>
    <!-- 骨架屏 -->
    <view v-if="isPageLoading" class="skeleton-container">
      <!-- 头部导航骨架 -->
      <view
        class="skeleton-header"
        :style="{
          height: (menu.bottom || 88) + 8 + 'px',
          paddingTop: (menu.top || 44) + 'px',
        }"
      >
        <view class="skeleton-nav">
          <view class="skeleton-back-btn skeleton-animate"></view>
          <view class="skeleton-title skeleton-animate"></view>
          <view class="skeleton-share-btn skeleton-animate"></view>
        </view>
      </view>

      <!-- 商品图片骨架 -->
      <view
        class="skeleton-product-image"
        :style="{
          marginTop: (menu.bottom || 88) + 8 + 'px',
          width: '100vw',
          height: '100vw',
        }"
      >
        <view class="skeleton-swiper skeleton-animate"></view>
      </view>

      <!-- 商品信息骨架 -->
      <view class="skeleton-product-info">
        <!-- 价格区域 -->
        <view class="skeleton-price-section">
          <view class="skeleton-price skeleton-animate"></view>
          <view class="skeleton-original-price skeleton-animate"></view>
        </view>

        <!-- 标题和描述 -->
        <view class="skeleton-title-section">
          <view class="skeleton-product-title skeleton-animate"></view>
          <view class="skeleton-product-subtitle skeleton-animate"></view>
        </view>

        <!-- 规格选择 -->
        <view class="skeleton-spec-section">
          <view class="skeleton-spec-title skeleton-animate"></view>
          <view class="skeleton-spec-options">
            <view
              class="skeleton-spec-item skeleton-animate"
              v-for="item in 3"
              :key="item"
            ></view>
          </view>
        </view>
      </view>

      <!-- 商品详情骨架 -->
      <view class="skeleton-detail-section">
        <view class="skeleton-detail-tabs">
          <view
            class="skeleton-tab-item skeleton-animate"
            v-for="item in 2"
            :key="item"
          ></view>
        </view>
        <view class="skeleton-detail-content">
          <view
            class="skeleton-detail-line skeleton-animate"
            v-for="item in 5"
            :key="item"
          ></view>
        </view>
      </view>

      <!-- 底部按钮骨架 -->
      <view class="skeleton-bottom-bar">
        <view class="skeleton-bottom-left">
          <view class="skeleton-cart-btn skeleton-animate"></view>
          <view class="skeleton-collect-btn skeleton-animate"></view>
        </view>
        <view class="skeleton-bottom-right">
          <view class="skeleton-buy-btn skeleton-animate"></view>
        </view>
      </view>
    </view>

    <!-- scroll-y="true" @scroll="handlePageScroll" :scroll-into-view="scrollView" -->
    <view
      v-else
      class="page-body"
      :style="{ paddingBottom: `${134 + (isCountdown || panicBuying ? 64 : 0)}rpx` }"
    >
      <div
        class="product-image"
        :style="{
          // marginTop: menu.top - 4 + 'px',
          marginTop: menu.bottom + 8 + 'px',
          width: '100vw',
          height: '100vw',
        }"
      >
        <view
          class="header"
          :style="{
            height: menu.bottom + 8 + 'px',
            // background: showTopFixed ? '#fff' : '',
            background: '#fff',
          }"
        >
          <view class="headerBottom" :style="{ bottom: 0, height: menu.height + 'px' }">
            <view class="backArrowBox">
              <image
                class="img"
                @click="handleBackIndex"
                src="/static/images/home/backArrowblack.svg"
              />
              <view class="line"></view>
              <image
                class="img"
                src="/static/images/home/export.svg"
                @click="handleShowExportBox"
              />
            </view>

            <view class="tabBox" v-if="showTopFixed">
              <view
                @click="handleChangePageTab(1)"
                :class="pageTab === 1 ? 'tabItem selectTabItem' : 'tabItem'"
                >商品
              </view>
              <view
                @click="handleChangePageTab(2)"
                :class="pageTab === 2 ? 'tabItem selectTabItem' : 'tabItem'"
                >详情
              </view>
            </view>
            <view class="rightContent"></view>

            <view
              class="moreFunBox"
              :style="{ top: menu.top + 'px' }"
              v-if="showExportFun"
            >
              <view class="triangle"></view>
              <view class="funList">
                <view
                  class="funItem"
                  v-for="(item, index) in funList"
                  :key="index"
                  @click="handleExpentGo(item)"
                >
                  <image class="funItemIcon" :src="item.src" />
                  <text
                    class="funItemText"
                    :style="{
                      border: index + 1 === funList.length ? 'none' : '',
                    }"
                    >{{ item.label }}</text
                  >
                </view>
              </view>
            </view>
          </view>
        </view>

        <block v-if="good.List && good.List.length > 0">
          <!-- interval="3000" -->
          <swiper
            scroll-x="true"
            class="banner"
            circular
            :indicator-dots="true"
            indicator-active-color="#ff6d00"
            :autoplay="true"
            id="banner"
          >
            <swiper-item v-for="(img, i) in good.List" :key="i">
              <!-- <view
              :style="{
                width: '100%',
                height: '100%',
                backgroundImage: `url(${img.IMAGE_URL})`,
                backgroundSize: '100% 100%',
              }"
            ></view> -->
              <!-- mode="aspectFit" -->
              <image
                :lazy-load="true"
                :src="img.IMAGE_URL"
                @click="handlePreviewSwiper(img, i)"
              >
              </image>
            </swiper-item>
          </swiper>
          <!-- <div class="swiper-dots" v-if="pageMsg.imgeCount > 0">
          <div class="dot">
            {{ pageMsg.current + 1 }}/{{ pageMsg.imgeCount }}
          </div>
        </div> -->
        </block>
        <block v-else>
          <view class="defaultImgBox">
            <image mode="aspectFit" :lazy-load="true" :src="good.DEFAULT_IMG"></image>
          </view>
        </block>
      </div>

      <hr />
      <div class="product-info">
        <div
          style="
            display: flex;
            box-sizing: border-box;
            padding: 16rpx 32rpx 16rpx 32rpx;
            justify-content: space-between;
          "
        >
          <!-- align-items: center;
          justify-content: space-between; -->
          <view style="display: flex">
            <div class="price-box">
              <div class="vip-price">
                <span class="unit">¥</span>
                <span style="font-weight: bold">
                  {{ good.bigNumber || "0" }}.{{ good.smallNumber || "00" }}
                  <!-- {{ good.COMMODITY_MEMBERPRICE || "-" }} -->
                </span>
              </div>

              <!-- <div class="originalPrice" v-if="pageType === 'UnionMall'">
              <span class="unit">¥</span>
              <span class="oldPrice">
                {{ good.RETbigNumber || "" }}.{{ good.RETsmallNumber || "00" }}
              </span>
            </div> -->
            </div>

            <div class="marketBottom" v-if="good.COMMODITY_RETAILPRICE">
              <span class="marketPrice">市场价：¥{{ good.COMMODITY_RETAILPRICE }}</span>
            </div>
          </view>

          <div>
            <view class="inventory">销量：{{ good.COMMODITY_EN || "0" }}</view>
            <!-- <span class="sale-count">
            {{
              good.COMMODITY_STOCK > 0 ? "库存 " + good.COMMODITY_STOCK : "售罄"
            }}</span
          >
          <span class="sale-count">已售 {{ good.SALE_COUNT }}</span> -->
          </div>
        </div>

        <div class="product-title">
          {{ good.COMMODITY_NAME || "-" }}
        </div>
        <div class="product-brand" style="align-items: flex-end">
          <!-- <view class="oldPrice"
          >原价：¥ {{ good.RETbigNumber || "" }}.{{
            good.RETsmallNumber || "00"
          }}</view
        > -->
          <view class="inventory">库存：{{ good.COMMODITY_STOCK || "0" }}</view>
          <view class="inventory" style="max-width: 50%"
            >规格：{{ good.COMMODITY_RULE || "" }}</view
          >

          <button class="share-btn" @tap="handleShowPopup">
            <!-- <van-icon name="share" color="#ea3323" size="20px" /> -->
            <div style="width: 16px; height: 16px">
              <image
                style="width: 16px; height: 16px"
                src="/static/images/home/share.svg"
              />
            </div>
            <div>分享</div>
          </button>
        </div>

        <div class="product-brand" v-if="good.REMINDER_DAY">
          <view class="inventory">{{ `平均${good.REMINDER_DAY}天内发货` }}</view>
        </div>
      </div>

      <div
        class="product-detail"
        style="background: #fff; padding: 0"
        v-if="
          new Date(good.UPPER_DATE).getTime() > new Date().getTime() ||
          good.SEND_MODE > 0 ||
          good.DELIVER_AREA ||
          good.LIMIT_TOTALCOUNT > 0
        "
      >
        <view
          class="detail-right"
          style="width: 100%; box-sizing: border-box; padding: 0 32rpx"
        >
          <view v-if="new Date(good.UPPER_DATE).getTime() > new Date().getTime()"
            >预售时间：{{
              good.UPPER_DATE && good.OFF_DATE
                ? `${good.UPPER_DATE || "-"}-${good.OFF_DATE || "-"}`
                : good.UPPER_DATE && !good.OFF_DATE
                ? `${good.UPPER_DATE || "-"}起`
                : ""
            }}</view
          >
          <!-- 预售时间：{{ good.UPPER_DATE || "-" }}-{{
            good.OFF_DATE || "-"
          }} -->
          <view>{{
            good.SEND_MODE === 1000
              ? "发货模式：自提"
              : good.SEND_MODE === 2000
              ? "发货模式：邮寄"
              : good.SEND_MODE === 3000
              ? "发货模式：免发货"
              : ""
          }}</view>

          <view
            v-if="good.DELIVER_AREA || good.LIMIT_TOTALCOUNT"
            style="width: 100%; box-sizing: border-box; padding: 16rpx 0"
          >
            <view v-if="good.DELIVER_AREA">{{
              good.DELIVER_AREA
                ? `配送区域：${good.DELIVER_AREA || "仅限云南省即江浙沪包邮区购买"}`
                : ""
            }}</view>
            <view>{{
              good.LIMIT_TOTALCOUNT ? `限购数量：每人限购${good.LIMIT_TOTALCOUNT}件` : ""
            }}</view>
            <view>{{
              good.LIMIT_TOTALCOUNT
                ? `每日限购：每人每日限购${good.LIMIT_TOTALCOUNT}件`
                : ""
            }}</view>
          </view>
        </view>
      </div>

      <div
        class="product-detail"
        style="background: #fff; padding: 0"
        v-if="good.AFTERSALE_NATRUE"
      >
        <view
          class="detail-right"
          style="width: 100%; box-sizing: border-box; padding: 16rpx 32rpx"
        >
          <view>{{
            good.AFTERSALE_NATRUE
              ? `${
                  good.AFTERSALE_NATRUE == 1000
                    ? "仅支持退货"
                    : good.AFTERSALE_NATRUE == 2000
                    ? "仅支持换货"
                    : good.AFTERSALE_NATRUE == 3000
                    ? "支持退货和换货"
                    : ""
                }`
              : ""
          }}</view>
        </view>
      </div>

      <div
        class="product-detail"
        style="padding-bottom: 16rpx"
        v-if="good.COMMODITY_DESC"
      >
        <div class="detail-unit" style="flex-direction: column" id="detail">
          <div
            class="detail-title desc-ico"
            style="margin-bottom: 32rpx; box-sizing: border-box; padding: 0 32rpx"
          >
            商品简介
          </div>
          <div
            class="detail-right"
            style="width: 100%; box-sizing: border-box; padding: 0 32rpx"
          >
            {{ good.COMMODITY_DESC || "暂无" }}
          </div>
        </div>
      </div>

      <div
        class="product-detail"
        v-if="!(good.ContentImgList && good.ContentImgList.length > 0)"
      >
        <div class="detail-unit" style="flex-direction: column" id="detail">
          <div
            class="detail-title desc-ico"
            style="margin-bottom: 32rpx; box-sizing: border-box; padding: 0 32rpx"
          >
            商品简介
          </div>
          <div class="detail-right">
            <rich-text :nodes="good.COMMODITY_INTRO"></rich-text>
            <!-- {{ good.COMMODITY_DESC || "暂无" }} -->
          </div>
        </div>
        <!-- <div class="">
        <div class="detail-unit rate-title">
          <div class="detail-title desc-ico">
            评价
          </div>
          <div class="rate-desc" @click="goRate" v-show="pageMsg.rateTotal > 0">
            <span>共{{ pageMsg.rateTotal }}条评论</span>
            <van-icon
              name="arrow"
              size="20rpx"
              color="#262626"
              custom-style="margin-left: 8rpx;"
            />
          </div>
        </div>
      </div> -->
      </div>
      <block v-if="good.ContentImgList && good.ContentImgList.length > 0" id="detail">
        <!-- ContentImgList -->
        <div class="detail-unit">
          <div
            class="detail-title desc-ico"
            style="margin-bottom: 32rpx; box-sizing: border-box; padding: 0 32rpx"
          >
            产品介绍
          </div>

          <!-- <span class="detail-title desc-ico"></span> -->
        </div>
        <div class="detail-image-box">
          <block
            v-for="(img, i) in good.ContentImgList"
            :key="i"
            v-show="detailImgList[i]"
          >
            <image
              mode="widthFix"
              class="img"
              :lazy-load="true"
              :src="img.IMAGE_URL"
              @load="loadDetailImg($event, i)"
              @click="handlePreviewDetailImg(img, good.ContentImgList)"
            ></image>
            <!-- :style="
                'width:' +
                detailImgList[i].width +
                'rpx; height:' +
                detailImgList[i].height +
                'rpx;'
              " -->
          </block>
        </div>
      </block>

      <uni-popup
        :show="showShareBox"
        position="bottom"
        overlay="false"
        @close="handleClosePopup"
        ref="popup"
        :safe-area="false"
      >
        <view class="share-popup" style="background-color: #fff">
          <view class="share-divider">
            <text>分享</text>
          </view>
          <!-- <van-divider contentPosition="center">分享</van-divider> -->
          <view class="share-pop-btn">
            <button open-type="share" @tap="handleClosePopup">
              <image src="https://eshangtech.com/ShopICO/icos/fxhy.png" act></image>
              <text>分享给好友</text>
            </button>
            <!-- <button  @tap="creatPageQR">
            <image src="https://eshangtech.com/ShopICO/icos/fxpyq.png"></image>
            <text>生成分享海报</text>
          </button> -->
          </view>
        </view>
      </uni-popup>

      <uni-popup ref="shopPopup" :safe-area="false">
        <view class="shopPopupBox">
          <view class="shopPopupContent">
            <div class="detailTop">
              <image
                class="detailImg"
                :src="good.DEFAULT_IMG || '/static/images/home/defultImg.png'"
              />
              <div class="box">
                <div class="nameTop">
                  <text class="name">{{ good.COMMODITY_NAME }}</text>
                  <image
                    class="closeIcon"
                    @click="handleClosePop"
                    src="https://eshangtech.com/ShopICO/ahyd-BID/examine/close.svg"
                  />
                </div>
                <div class="priceBox">
                  <text class="priceIcon">￥</text>
                  <text class="price">{{ good.COMMODITY_MEMBERPRICE }}</text>
                  <text class="unit">/{{ good.COMMODITY_UNIT }}</text>
                </div>
              </div>
            </div>
            <scroll-view :scroll-y="true" class="scrollDetailBox">
              <div class="detailMessage">
                <p class="detailTitle">详细信息</p>
                <text class="detailText"></text>
              </div>
              <div class="orderDetail">
                <p class="orderTitle">下单信息</p>
                <div class="numBox">
                  <text class="numTitle">购买数量</text>
                  <div class="cartcontrol">
                    <div class="subtract" @click="handleDetailSubtract($event, good)">
                      <image class="img" src="/static/images/home/subtract.svg"></image>
                    </div>
                    <input
                      class="cart-count"
                      confirm-type="done"
                      type="digit"
                      :maxlength="7"
                      style="background: #fff; text-align: center; width: 100px"
                      placeholder="0"
                      @blur="haveFocus($event, good)"
                      @focus="haveFocus($event, good)"
                      v-model="good.count"
                    />
                    <!-- @input="handleNumber" -->

                    <div class="subtract" @click="handleDetailAdd($event, good)">
                      <image class="img" src="/static/images/home/addIcon.svg"></image>
                    </div>
                  </div>
                </div>
                <div class="sizeBox">
                  <div class="sizeTitle">规格</div>

                  <scroll-view :scroll-x="true" :scroll-y="true" class="sizeScrollBox">
                    <div class="sizeList">
                      <div
                        :class="
                          good.RTCOMMODITY_MULTI_ID === item.RTCOMMODITY_MULTI_ID
                            ? 'sizeItem selectSizeItem'
                            : 'sizeItem'
                        "
                        :style="{
                          background:
                            item.COMMODITY_STOCK > 0
                              ? good.RTCOMMODITY_MULTI_ID === item.RTCOMMODITY_MULTI_ID
                                ? '#e7f3ff'
                                : '#dbdad6'
                              : '#9c9c9a0',
                          color:
                            item.COMMODITY_STOCK > 0
                              ? good.RTCOMMODITY_MULTI_ID === item.RTCOMMODITY_MULTI_ID
                                ? '#1890ff'
                                : '#000'
                              : '#a4a4a4',
                        }"
                        v-for="(item, index) in good.SKULIST"
                        :key="index"
                        @click="
                          handleChangeSelectSKULIST(item.RTCOMMODITY_MULTI_ID, item)
                        "
                      >
                        {{ item.COMMODITY_NAME }}
                      </div>
                      <!-- <div class="sizeItem">{{ good.COMMODITY_UNIT }}</div> -->
                    </div>
                  </scroll-view>
                </div>
                <!-- <div class="sizeBox">
              <text class="sizeTitle">规格</text>
              <div class="sizeList">
                <div :class="good.COMMODITY_RULE === item.COMMODITY_MULTI_ID
                  ? 'sizeItem selectSizeItem'
                  : 'sizeItem'
                  " v-for="(item, index) in good.SKULIST" :key="index"
                  @click="handleChangeSelectSKULIST(item.COMMODITY_MULTI_ID)">
                  {{ item.COMMODITY_NAME }}
                </div>
              </div>
            </div> -->
                <div class="descBox">
                  <input
                    class="desc"
                    :value="good.SALEDETAIL_DESC"
                    placeholder="请填写商品备注"
                    @input="handleDesc($event, good)"
                  />
                </div>
              </div>
            </scroll-view>
          </view>

          <view class="bottomBtn">
            <view class="shopCarBtn" v-if="bottomBtnType === 1" @click="handleAddShopCar"
              >加入购物车</view
            >
            <view class="makeOrderBtn" v-if="bottomBtnType === 2" @click="handleMakeOrder"
              >立即购买</view
            >
          </view>
        </view>
      </uni-popup>
    </view>

    <div class="product-btn-box">
      <view class="leftBtn">
        <view class="btnItem" @click="handleBackIndex">
          <image
            class="btnItemImg"
            src="https://eshangtech.com/ShopICO/shoppingMall/home.png"
          />
          <text class="btnItemText">首页</text>
        </view>
        <view class="btnItem" @click="handleCollect">
          <image
            class="btnItemImg"
            :src="
              isCollect
                ? '/static/images/home/collected.svg'
                : '/static/images/home/collect.svg'
            "
          />
          <text class="btnItemText">收藏</text>
        </view>
        <view class="btnItem" @click="handleShowShopCar">
          <image class="btnItemImg" src="/static/images/home/shopCarIcon.svg" />
          <text class="btnItemText">购物车</text>
        </view>
      </view>
      <!-- <view class="home-btn" url="/pages/home/index" open-type="switchTab"
        >首页</view
      > -->

      <!-- 积分暂时没有规定 所以 -->
      <view
        style="width: 58%; height: 100%"
        v-if="
          !good.bigNumber && !good.smallNumber ? (user.TEST_MEMBER ? true : false) : true
        "
      >
        <view
          class="rightBtn"
          style="width: 100%; height: 100%"
          v-if="good.PAY_METHOD !== 2000 && pageType !== 'pointsMall' && !offShop"
        >
          <div class="addCarBtn" @click="handleShowShopPopup(1)">加入购物车</div>
          <div class="sellOut presale" @click="handleShowShopPopup(4)" v-if="isCountdown">
            预售中
          </div>
          <div
            class="addOrder"
            @click="handleShowShopPopup(2)"
            v-if="
              good.OFF_DATE && !isCountdown
                ? new Date().getTime() < new Date(good.OFF_DATE).getTime()
                : good.COMMODITY_STOCK > 0 && !isCountdown
            "
          >
            立即购买
          </div>
          <div
            class="sellOut"
            @click="handleShowShopPopup(3)"
            v-if="good.COMMODITY_STOCK === 0 && !isCountdown"
          >
            已售罄
          </div>
          <div
            class="sellOut"
            @click="handleShowShopPopup(3)"
            v-if="
              new Date().getTime() > new Date(good.OFF_DATE).getTime() &&
              !(good.OFF_DATE && !isCountdown)
            "
          >
            已结束
          </div>
        </view>

        <view
          class="rightBtn"
          style="width: 100%; height: 100%"
          v-if="(good.PAY_METHOD === 2000 || pageType === 'pointsMall') && !offShop"
        >
          <div class="sellOut" style="width: 100%; border-radius: 16rpx">积分不足</div>
        </view>
      </view>
      <!-- <div
        class="buynow-btn"
        @click="getMemberPoint(1)"
        v-if="good.COMMODITY_STOCK > 0 && good.PAY_METHOD !== 1000"
      >
        立即兑换
      </div>
      <div
        class="join-shopCart"
        @click="getMemberPoint(2)"
        v-if="good.COMMODITY_STOCK > 0 && good.PAY_METHOD !== 2000"
      >
        立即购买
      </div>
      <div
        class="buynow-btn"
        style="background: #eee; color: #999"
        v-if="good.COMMODITY_STOCK < 1"
      >
        已售罄
      </div> -->
    </div>

    <!-- 预售倒计时 -->
    <div class="countdown" v-if="isCountdown || panicBuying">
      此商品为{{ panicBuying ? "热销" : "预售" }}商品，{{
        panicBuying ? "抢购" : "起售"
      }}倒计时 {{ countdown || "" }}
    </div>

    <!-- 商品下架显示 -->
    <div class="offShopDown" v-if="offShop">商品已下架！</div>
  </div>
</template>
<script>
// import rateItem from "../../rate/components/rateItem";
import { mapGetters, mapActions, mapMutations } from "vuex";
export default {
  data() {
    const windows = uni.getSystemInfoSync();
    return {
      isPageLoading: true,
      safeHeight: 0,
      pageMsg: {
        current: 0,
        imgeCount: 0,
        goodId: "",
        buyCount: 1,
        rateTotal: 0,
        memberPoint: 0,
        money: 0,
      },
      isShowCount: 0,
      showSharePro: false, // 是否生成分享海报
      showShareBox: false, // 是否展示分享选项
      good: {},
      rateList: [], // 评价列表
      detailImgList: [],
      windowMsg: {
        width: 375,
        height: 667,
        ratio: 0.5,
        scale: windows.pixelRatio,
      },
      menu: {
        top: 44,
        bottom: 88,
        height: 32,
      },
      inputMaxLength: -1,
      bottomBtnType: 0,
      shopCarList: [], // 当前的购物车
      funList: [
        { label: "首页", value: 1, src: "/static/images/shopTabbar/home.png" },
        {
          label: "分类",
          value: 2,
          src: "/static/images/shopTabbar/classification.png",
        },
        {
          label: "购物车",
          value: 3,
          src: "/static/images/shopTabbar/shopCar.png",
        },
      ], // 展开来的方法列表
      showExportFun: false, // 显示展开的悬浮框
      showTopFixed: false, // 顶部显示的锚点tab
      pageTab: 1, // 锚点tab的选中
      scrollView: "", // 滚动的锚点
      pageType: "", // 页面类型 UnionMall 为工会之家
      countdown: "", // 存储倒计时的显示内容
      isCountdown: false, // 判断是否进入到倒计时
      panicBuying: false, //判断是否是抢购的倒计时
      timer: null, // 定时器
      isCollect: false,
      shopId: "", // 商品id
      offShop: false, // 判断商品是否下架了
      come: "", // 来自哪里的判断  暂时就一个订单列表页面 进来  然后点击的返回 应该是返回上一级
    };
  },
  components: {
    // rateItem,
    // UniPopup,
  },
  computed: {
    ...mapGetters("shoppingCart", {
      totalNum: "goodNum",
    }),
    ...mapGetters(["user"]),
  },
  methods: {
    ...mapActions("shoppingCart", {
      addGood: "ADDGOOD",
      addCate: "ADDCATE",
    }),
    ...mapMutations("shoppingCart", {
      setOrder: "ORDERGOOD",
    }),
    ...mapMutations(["setInvitedCode"]),
    // 备注的输入框
    handleDesc(e, item) {
      this.good.SALEDETAIL_DESC = e.detail.value;
    },
    // 查一下 当前商品有没有被收藏

    // 收藏
    async handleCollect() {
      if (
        (this.user && !this.user.MEMBERSHIP_ID) ||
        (!this.user && !this.user.MEMBERSHIP_ID)
      ) {
        let _this = this;
        uni.showModal({
          title: "温馨提示",
          content: "请您授权登录后再操作。",
          success(res) {
            if (res.confirm) {
              uni.navigateTo({ url: "/pages/register/index" });
            }
          },
        });
        return;
      }
      if (this.isCollect) {
        console.log("this.isCollectthis.isCollect", this.isCollect);
        console.log("this.good", this.good);

        let req = {
          COLLECTIONId: this.good.COLLECTION_ID,
          type: "encryption",
        };
        // 同步收藏
        console.log("reqreqreq", req);
        const data = await this.$api.$zzyLocalPost("/Member/DeleteCOLLECTION", req);
        console.log("data", data);
        if (data.Result_Code === 100) {
          uni.showToast({
            title: "取消成功！",
            icon: "none",
          });
          this.isCollect = false;
        } else {
          uni.showToast({
            title: data.Result_Desc,
            icon: "none",
          });
        }
      } else {
        if (this.offShop) {
          return;
        }

        let req = {
          COLLECTION_ID: this.good.COLLECTION_ID || "",
          COLLECTION_TYPE: 2000,
          MEMBERSHIP_ID: this.user.MEMBERSHIP_ID,
          TABLE_ID: this.good.COMMODITY_ID,
          TABLE_NAME: "COOP_MERCHANT.T_COMMODITY",
          APP_GUID: "wxee018fb96955552a",
          COLLECTION_STATE: 1,
          PROVINCE_CODE: this.user.PROVINCE_CODE,
          OWNERUNIT_ID: 911,
          type: "encryption",
          STAFF_NAME: this.user.MEMBERSHIP_NAME,
          OPERATE_DATE: this.$moment.now().format("YYYY-MM-DD"),
        };
        // 同步收藏
        console.log("reqreqreq", req);

        const data = await this.$api.$zzyLocalPost("/Member/SynchroCOLLECTION", req);
        console.log("data", data);
        if (data.Result_Code === 100) {
          uni.showToast({
            title: "已添加至收藏夹",
            icon: "none",
          });
          this.isCollect = true;
          await this.getDetail(this.good.COMMODITY_ID);
          this.$forceUpdate();
        } else {
          uni.showToast({
            title: data.Result_Desc,
            icon: "none",
          });
        }
      }

      // if (this.isCollect) {
      //   let collectGoodList = uni.getStorageSync('collectGood')
      //   let newList = []
      //   if (collectGoodList && collectGoodList.length > 0) {
      //     collectGoodList.forEach((item) => {
      //       if (item.COMMODITY_ID !== this.shopId) {
      //         newList.push(item)
      //       }
      //     })
      //   }
      //   uni.setStorageSync('collectGood', newList)
      //   uni.showToast({
      //     title: '取消收藏',
      //     icon: 'none'
      //   })
      //   this.isCollect = false
      // } else {
      //   let collectGoodList = uni.getStorageSync('collectGood')
      //   if (collectGoodList && collectGoodList.length > 0) {
      //     collectGoodList.push(this.good)
      //   } else {
      //     collectGoodList = [this.good]
      //   }
      //   uni.setStorageSync('collectGood', collectGoodList)
      //   uni.showToast({
      //     title: '已添加至收藏夹',
      //     icon: 'none'
      //   })
      //   this.isCollect = true
      // }
    },
    // 倒计时方法
    startCountdown(targetTime) {
      console.log("targetTime", targetTime);

      let target = new Date(targetTime); // 目标时间
      let _this = this;

      this.timer = setInterval(() => {
        let now = new Date(); // 当前时间
        let timeDiff = target - now; // 目标时间与当前时间的差值（毫秒）

        if (timeDiff <= 0) {
          clearInterval(this.timer); // 倒计时结束，停止定时器
          _this.isCountdown = false;
          _this.panicBuying = false;
          _this.countdown = "";

          if (new Date(_this.good.UPPER_DATE).getTime() > new Date().getTime()) {
            _this.isCountdown = true;
            _this.startCountdown(_this.good.UPPER_DATE);
          } else {
            _this.isCountdown = false;
            if (new Date(_this.good.OFF_DATE).getTime() > new Date().getTime()) {
              _this.panicBuying = true;
              _this.startCountdown(_this.good.OFF_DATE);
            } else {
              _this.panicBuying = false;
            }
          }
        } else {
          // 计算剩余时间的小时、分钟和秒数
          let hours = Math.floor(timeDiff / (1000 * 60 * 60)); // 小时
          let minutes = Math.floor((timeDiff % (1000 * 60 * 60)) / (1000 * 60)); // 分钟
          let seconds = Math.floor((timeDiff % (1000 * 60)) / 1000); // 秒

          // 格式化为“时:分:秒”
          _this.countdown = ` ${hours}时${minutes}分${seconds}秒`;
        }
      }, 1000); // 每秒更新一次
    },
    // 输入框里面的数量
    haveFocus(e, item) {
      console.log("e", e);
      let value = e.detail.value.toString();
      let number = 0;
      if (value.indexOf(".") === -1) {
        number = Number(value);
      } else {
        let bigNumber = value.split(".")[0];
        number = Number(bigNumber);
      }
      console.log("number", number);

      if (number < 0) {
        item.count = 1;
      } else {
        item.count = Number(number);
      }

      console.log("item", item);
      this.good = item;
      console.log("this.good", this.good);
      this.$forceUpdate();
    },
    // 输入框输入的触发方法
    // handleNumber(e) {
    //   console.log("e", e);
    //   if (e.detail.value.indexOf(".") !== -1) {
    //     const flag = e.detail.value.indexOf(".");
    //     console.log("flag", flag);
    //     if (flag === 0) {
    //       this.inputMaxLength = flag + 4;
    //     } else {
    //       this.inputMaxLength = flag + 3;
    //     }
    //   } else {
    //     // if (e.mp.detail.value === '') {
    //     //   this.currentRow.count = 0
    //     // }
    //     this.inputMaxLength = -1;
    //   }
    //   console.log("inputMaxLength", this.inputMaxLength);
    // },
    handleClosePop() {
      // this.good.COMMODITY_RULE = undefined;
      this.$refs.shopPopup.close();
    },
    // 改变当前选中的规格
    handleChangeSelectSKULIST(value, obj) {
      if (obj.COMMODITY_STOCK > 0) {
        console.log("value", value);
        // this.good.COMMODITY_RULE = value;
        this.good.COMMODITY_RULE = obj.COMMODITY_NAME;
        this.good.RTCOMMODITY_MULTI_ID = value;
        if (obj.COMMODITY_MEMBERPRICE) {
          this.good.COMMODITY_MEMBERPRICE = obj.COMMODITY_MEMBERPRICE;
        }
        if (obj.COMMODITY_PURCHASEPRICE) {
          this.good.COMMODITY_PURCHASEPRICE = obj.COMMODITY_PURCHASEPRICE;
        }
        console.log("this.good", this.good);
        this.$forceUpdate();
      } else {
        uni.showToast({
          title: "已售罄",
          icon: "error",
        });
      }
    },
    // 点击的锚点
    handleChangePageTab(value) {
      this.pageTab = value;
      if (value === 1) {
        this.scrollView = "banner";
      } else {
        this.scrollView = "detail";
      }
    },
    // 预览轮播图
    handlePreviewSwiper(obj) {
      console.log("obj", obj);
      let imgList = [];
      if (this.good.List && this.good.List.length > 0) {
        this.good.List.forEach((item) => {
          imgList.push(item.IMAGE_URL);
        });
      }
      uni.previewImage({
        current: obj.IMAGE_URL, // 当前显示图片的http链接
        urls: imgList, // 需要预览的图片http链接列表
      });
    },
    // 预览详情图片
    handlePreviewDetailImg(obj, list) {
      console.log("obj", obj);
      console.log("listlistlistlist", list);
      let imgList = [];
      if (list && list.length > 0) {
        // imgList = list
        list.forEach((item) => {
          imgList.push(item.IMAGE_URL);
        });
      } else {
        if (this.good.List && this.good.List.length > 0) {
          this.good.List.forEach((item) => {
            imgList.push(item.IMAGE_URL);
          });
        }
      }

      uni.previewImage({
        current: obj.IMAGE_URL, // 当前显示图片的http链接
        urls: imgList, // 需要预览的图片http链接列表
      });
    },
    handlePageScroll(e) {
      // console.log("handlePageScroll", e.detail.scrollTop);
      let scrollTop = e.detail.scrollTop;
      if (scrollTop < 80) {
        this.showTopFixed = false;
        this.scrollView = "";
      } else {
        this.showTopFixed = true;
      }
      if (scrollTop < 300) {
        this.scrollView = "banner";
        this.pageTab = 1;
      } else {
        this.scrollView = "detail";
        this.pageTab = 2;
      }

      this.showExportFun = false;
    },
    // 显示展开功能
    handleShowExportBox() {
      this.showExportFun = !this.showExportFun;
    },
    // 跳转对应的
    handleExpentGo(obj) {
      if (obj.value === 1) {
        if (this.pageType === "UnionMall") {
          uni.switchTab({
            url: `/pages/shopMallPage/tradeUnionMall/index`,
          });
        } else {
          uni.switchTab({
            url: `/pages/shopMallPage/index/index`,
          });
        }
      } else if (obj.value === 2) {
        uni.redirectTo({
          url: `/pages/shopMallPage/shopType/index?pageType=${this.pageType}`,
        });
      } else if (obj.value === 3) {
        uni.redirectTo({
          url: `/pages/shopMallPage/shopCar/index?pageType=${this.pageType}`,
        });
      }
    },
    // 返回首页
    handleBackIndex() {
      console.log("this.comethis.come", this.come);

      if (this.come === "buyOrder") {
        uni.navigateBack({
          delta: 1,
        });
      } else {
        // 根据传入的参数 判断是哪里来的  是返回 一层 还是 返回两层 还是 直接跳转去
        uni.switchTab({
          url:
            this.pageType === "UnionMall"
              ? `/pages/shopMallPage/tradeUnionMall/index`
              : `/pages/shopMallPage/index/index`,
        });
      }
    },
    // 显示购物车
    handleShowShopCar() {
      if (
        (this.user && !this.user.MEMBERSHIP_ID) ||
        (!this.user && !this.user.MEMBERSHIP_ID)
      ) {
        let _this = this;
        uni.showModal({
          title: "温馨提示",
          content: "请您授权登录后再操作。",
          success(res) {
            if (res.confirm) {
              uni.navigateTo({ url: "/pages/register/index" });
            }
          },
        });
        return;
      }
      uni.redirectTo({
        url: `/pages/shopMallPage/shopCar/index?pageType=${this.pageType}`,
      });
    },
    // 加入购物车方法
    handleAddShopCar() {
      console.log("this.good", this.good);

      if (
        this.good.SKULIST &&
        this.good.SKULIST.length > 0 &&
        // (this.good.COMMODITY_RULE === "默认" || !this.good.COMMODITY_RULE)
        !this.good.RTCOMMODITY_MULTI_ID
      ) {
        uni.showToast({
          title: "请先选择规格！",
          icon: "none",
        });
        return;
      }

      // 是否为已售罄
      if (this.good.COMMODITY_STOCK === 0) {
        uni.showToast({
          title: "商品已售罄！",
          icon: "none",
        });
        return;
      }

      if (this.good.COMMODITY_STOCK < this.good.count) {
        uni.showToast({
          title: "商品库存不足！",
          icon: "none",
        });
        return;
      }

      if (!this.good.COMMODITY_MEMBERPRICE) {
        uni.showToast({
          title: "商品信息有误，无法添加购物车！",
          icon: "none",
        });
        return;
      }

      console.log("this.good", this.good);
      console.log("this.shopCarList", JSON.parse(JSON.stringify(this.shopCarList)));
      // 当前购物车的数据
      if (this.shopCarList && this.shopCarList.length > 0) {
        let nowShopList = [];
        // 判断有没有一样的
        let isSame = false;
        let list = JSON.parse(JSON.stringify(this.shopCarList));
        console.log("listlistlistlist", list);
        list.forEach((item) => {
          // 先看看有没有规格id  如果选了规格 不一样规格 算不同的商品
          if (this.good.RTCOMMODITY_MULTI_ID) {
            // 是多规格 看一下 当前购物车中 是否已经有了 这个规格的商品
            let filterRuleList = list.filter(
              (item) => item.RTCOMMODITY_MULTI_ID === this.good.RTCOMMODITY_MULTI_ID
            );
            console.log("filterRuleList", JSON.parse(JSON.stringify(filterRuleList)));

            // 如果有一样规格的 就替换值  没有 就等于新增商品
            // 如果原本已经有了 那么就是当前购物车的数量  + 本次的数量
            if (filterRuleList && filterRuleList.length > 0) {
              if (item.COMMODITY_ID === this.good.COMMODITY_ID) {
                item.count = this.good.count + item.count;
                item.SALEDETAIL_DESC = this.good.SALEDETAIL_DESC;
              }
              isSame = true;
            } else {
              // 同商品 但是不同规格的添加
              // list.push({ ...this.good });
            }
          } else {
            // 没有多规格 购物车中又已经有了该商品 那么就数量就加上这次添加到购物车的数量
            if (item.COMMODITY_ID === this.good.COMMODITY_ID) {
              // item.count = this.good.count;
              item.count = this.good.count + item.count;
              item.SALEDETAIL_DESC = this.good.SALEDETAIL_DESC;
              isSame = true;
            } else {
              // 当前购物车中找不到同样的商品 说明是新商品 那么直接添加到购物车中
              // list.push({ ...this.good });
              // isSame = false
            }
          }
        });
        // nowShopList = list
        // 判断是否是一样的商品
        if (isSame) {
          // nowShopList = this.shopCarList;
          nowShopList = JSON.parse(JSON.stringify(list));
        } else {
          // this.shopCarList.push(this.good);
          // list.push(this.good);
          list.unshift(this.good);

          // nowShopList = this.shopCarList;
          nowShopList = JSON.parse(JSON.stringify(list));
        }

        console.log("nowShopListnowShopListnowShopList", nowShopList);
        this.shopCarList = nowShopList;

        // 区分一下 这个是工会商城的购物车 还是外面商城的购物车
        if (this.pageType === "UnionMall") {
          this.$store.commit("unionMyShopCar", nowShopList);
        } else {
          this.$store.commit("myShopCar", nowShopList);
        }
      } else {
        // 这是当前购物车为空的情况 那么就直接把当前商品 添加进去即可
        let nowShopList = [];
        let good = JSON.parse(JSON.stringify(this.good));
        nowShopList.push(good);
        this.shopCarList = [good];
        console.log("nowShopListnowShopListnowShopList", this.shopCarList);
        if (this.pageType === "UnionMall") {
          this.$store.commit("unionMyShopCar", nowShopList);
        } else {
          this.$store.commit("myShopCar", nowShopList);
        }
      }

      uni.showToast({
        title: "加入成功！",
        duration: 2000,
      });
      let _this = this;
      setTimeout(() => {
        _this.handleCloseShopPopup();
        // this.$refs.shopPopup.close();
      }, 1000);
    },
    // 立即购买方法
    async handleMakeOrder() {
      let userInfo = {};
      if (this.pageType === "UnionMall") {
        // 获取最新的用户余额
        uni.showLoading({
          title: "获取用户余额...",
        });
        const userData = await this.$api.getCoop({
          action_type: "GetMembershipInfo",
          WechatUserId: this.user.WechatUserId,
        });
        userInfo = userData.Data;
        console.log("this.userInfo", this.userInfo);
        uni.hideLoading();
        if (!(userInfo && userInfo.ACCOUNT_BALANCE > 0)) {
          uni.showToast({
            title: "您未被纳入工会会员采购名录，如有疑问，请联系工会咨询",
            icon: "none",
          });
          return;
        }
      }

      if (
        this.good.SKULIST &&
        this.good.SKULIST.length > 0 &&
        (this.good.COMMODITY_RULE === "默认" || !this.good.COMMODITY_RULE)
      ) {
        console.log("this.goodthis.good", this.good);

        uni.showToast({
          title: "请先选择规格！",
          icon: "none",
        });
        return;
      }
      // 是否为已售罄
      if (this.good.COMMODITY_STOCK === 0) {
        uni.showToast({
          title: "商品已售罄！",
          icon: "none",
        });
        return;
      }

      if (this.good.COMMODITY_STOCK < this.good.count) {
        uni.showToast({
          title: "商品库存不足！",
          icon: "none",
        });
        return;
      }

      console.log("this.good", this.good);
      let nowShopList = [this.good];

      if (nowShopList && nowShopList.length > 0) {
        this.pageOut = true;
        let orderList = [];
        let noSelectList = [];
        nowShopList.forEach((item) => {
          item.ORDER_COUNT = item.count;
          item.AVERAGE_PRICE = item.COMMODITY_MEMBERPRICE;
          item.cartItemAoumt = Number((item.AVERAGE_PRICE * item.ORDER_COUNT).toFixed(2));
          item.ORDER_AMOUNT = Number((item.AVERAGE_PRICE * item.ORDER_COUNT).toFixed(2));
          item.COMMODITY_INTRO = "";
          orderList.push(item);
        });
        // this.$store.commit('shopcartOrder', orderList)
        // 购物车改了后有些id不一样了 统一一下
        if (orderList && orderList.length > 0) {
          orderList.forEach((item) => {
            let [big, small] = item.COMMODITY_MEMBERPRICE.toString().split(".");
            item.COMMODITY_INYEGER = big;
            item.COMMODITY_DECIMAL = small;
            // item.COMMODITY_ID = item.SELLERCOMMODITY_ID
          });
        }
        console.log("noSelectList", noSelectList);
        console.log("orderList", orderList);
        let id = Number(Math.random().toString().substr(3, 5) + Date.now()).toString(36);
        if (orderList.length > 0) {
          uni.navigateTo({
            url: `/pages/shopPages/settlement/index?pageType=${
              this.pageType
            }&shopCarList=${JSON.stringify(orderList)}`,
          });
        } else {
          uni.showToast({ title: "购物车内无勾选商品", icon: "none" });
        }
      }
    },
    // 减少当前商品
    handleDetailSubtract(e, obj) {
      if (obj.count > 0) {
        if (obj.count - 1 === 0) {
          obj.count = 1;
        } else {
          obj.count -= 1;
        }
        this.good = obj;
        this.$forceUpdate();
      }
    },
    // 增加当前商品的数量
    handleDetailAdd(e, obj) {
      obj.count += 1;
      this.good = obj;
      this.$forceUpdate();
    },
    // 打开购物车 或 立即购买的悬浮框  1 打开购物车  2 立即购买  3售罄  4预售
    handleShowShopPopup(type) {
      if (
        (this.user && !this.user.MEMBERSHIP_ID) ||
        (!this.user && !this.user.MEMBERSHIP_ID)
      ) {
        let _this = this;
        uni.showModal({
          title: "温馨提示",
          content: "请您授权登录后再操作。",
          success(res) {
            if (res.confirm) {
              uni.navigateTo({ url: "/pages/register/index" });
            }
          },
        });
        return;
      }
      if (type === 4) {
        uni.showToast({
          title: "商品预售中",
          icon: "none",
        });
      } else if (type === 3) {
        uni.showToast({
          title: "商品已售罄",
          icon: "none",
        });
      } else {
        if (!this.user.MEMBERSHIP_ID) {
          uni.showModal({
            title: "温馨提示",
            content: "请您授权登录后再操作。",
            success(res) {
              if (res.confirm) {
                uni.navigateTo({ url: "/pages/register/index" });
              }
            },
          });
        } else {
          this.bottomBtnType = type;
          this.$refs.shopPopup.open("bottom");
        }
      }
    },
    handleShowPopup() {
      this.$refs.popup.open("bottom");
      this.showShareBox = true;
    },
    // 关闭分享框的事件
    handleClosePopup() {
      this.$refs.popup.close();
      this.showShareBox = false;
    },
    // 关闭商品弹出框 触发的事件
    handleCloseShopPopup() {
      this.$refs.shopPopup.close();
      // this.showShareBox = false;
      // 关闭详情 在多规格的时候  把商品数量变为1  选择的规格 清空
      this.good.count = 1;
      this.good.RTCOMMODITY_MULTI_ID = null;
      this.$forceUpdate();
    },
    swiperChange(e) {
      this.pageMsg.current = e.mp.detail.current;
    },
    goShop() {
      uni.navigateTo({ url: "/pages/product/shopCart/index" });
    },
    decodeHTML(str) {
      if (!str) {
        return "";
      }
      return str
        .replace(/&lt;/g, "<")
        .replace(/&gt;/g, ">")
        .replace(/&amp;/g, "&")
        .replace(/&quot;/g, '"')
        .replace(/&nbsp;/g, " ");
    },
    async getDetail(id) {
      let _this = this;
      const res = await this.$api.getCoop({
        action_type: "GetGoodsDetail",
        commodityId: id,
      });

      console.log("detail", res);
      res.Data.COMMODITY_GRADE = null;
      res.Data.LIMIT_TOTALCOUNT = res.Data.LIMIT_TOTALCOUNT
        ? res.Data.LIMIT_TOTALCOUNT.toString()
        : "";
      res.Data.LIMIT_DAILYCOUNT = res.Data.LIMIT_DAILYCOUNT
        ? res.Data.LIMIT_DAILYCOUNT.toString()
        : "";
      res.Data.REMINDER_DAY = res.Data.REMINDER_DAY
        ? res.Data.REMINDER_DAY.toString()
        : "";
      res.Data.SEND_MODE = res.Data.SEND_MODE ? res.Data.SEND_MODE.toString() : "";
      res.Data.AFTERSALE_NATRUE = res.Data.AFTERSALE_NATRUE
        ? res.Data.AFTERSALE_NATRUE.toString()
        : "";
      res.Data.DUTY_PARAGRAPH = res.Data.DUTY_PARAGRAPH
        ? res.Data.DUTY_PARAGRAPH.toString()
        : "";

      if (res.Data.COLLECTION_STATE === "1") {
        _this.isCollect = true;
      }

      _this.good = res.Data;
      // 判断商品是否已经下架了 若当前时间大于 下架时间 就代表 已经下架了
      if (
        _this.good.OFF_DATE &&
        new Date().getTime() > new Date(_this.good.OFF_DATE).getTime()
      ) {
        _this.offShop = true;
      }

      _this.good.COMMODITY_CURRPRICE = _this.good.COMMODITY_MEMBERPRICE;
      _this.good.count = 1;
      _this.pageMsg.current = 0;
      _this.pageMsg.imgeCount =
        res.Data && res.Data.List && res.Data.List.length > 0 ? res.Data.List.length : 0;
      _this.good.COMMODITY_INTRO = _this.decodeHTML(res.Data.COMMODITY_INTRO);
      // _this.good.COMMODITY_DESC = _this.decodeHTML(res.Data.COMMODITY_DESC);

      if (
        _this.good.COMMODITY_MEMBERPRICE &&
        _this.good.COMMODITY_MEMBERPRICE.toString().indexOf(".") !== -1
      ) {
        _this.good.bigNumber = _this.good.COMMODITY_MEMBERPRICE.toString().split(".")[0];
        _this.good.smallNumber = _this.good.COMMODITY_MEMBERPRICE.toString().split(
          "."
        )[1];
      } else {
        _this.good.bigNumber = _this.good.COMMODITY_MEMBERPRICE;
      }

      if (
        _this.good.COMMODITY_RETAILPRICE &&
        _this.good.COMMODITY_RETAILPRICE.toString().indexOf(".") !== -1
      ) {
        _this.good.RETbigNumber = _this.good.COMMODITY_RETAILPRICE.toString().split(
          "."
        )[0];
        _this.good.RETsmallNumber = _this.good.COMMODITY_RETAILPRICE.toString().split(
          "."
        )[1];
      } else {
        _this.good.RETbigNumber = _this.good.COMMODITY_RETAILPRICE;
      }
      console.log("_this.good", _this.good);

      if (_this.good.COMMODITY_INTRO.indexOf("</br>") > -1) {
        let desArr = _this.good.COMMODITY_INTRO.split("</br>");
        _this.good.COMMODITY_INTRO = [];
        desArr.forEach((element) => {
          _this.good.COMMODITY_INTRO.push({
            name: "p",
            children: [{ type: "text", text: element }],
          });
        });
      }

      _this.good &&
        _this.good.ContentImgList &&
        _this.good.ContentImgList.map((n) => {
          _this.detailImgList.push({ width: 750, height: 400 });
        });

      if (new Date(_this.good.UPPER_DATE).getTime() > new Date().getTime()) {
        _this.isCountdown = true;
        _this.startCountdown(_this.good.UPPER_DATE);
      } else {
        _this.isCountdown = false;
        if (new Date(_this.good.OFF_DATE).getTime() > new Date().getTime()) {
          _this.panicBuying = true;
          _this.startCountdown(_this.good.OFF_DATE);
        } else {
          _this.panicBuying = false;
        }
      }
    },
    getRate() {
      // 获取商品评价
      let _this = this;
      _this.$api
        .getCoop({
          action_type: "getMallCommentList",
          commodityId: this.pageMsg.goodId,
          pageIndex: 1,
          pageSize: 3,
        })
        .then((res) => {
          _this.rateList = res.Data.List;
          _this.pageMsg.rateTotal = res.Data.TotalCount;
        });
    },
    goRate() {
      uni.navigateTo({ url: "/pages/rate/index?id=" + this.pageMsg.goodId });
    },
    seePhoto(item, list) {
      let u = [];

      list.map((n) => {
        u.push(n.IMAGE_URL);
      });
      uni.previewImage({
        current: item, // 当前显示图片的http链接
        urls: u, // 需要预览的图片http链接列表
      });
    },
    addGoodToCartFn: function () {
      // 添加商品到购物车
      let cate = {
        USERDEFINEDTYPE_NAME: this.good.USERDEFINEDTYPE_NAME,
        USERDEFINEDTYPE_ID: this.good.USERDEFINEDTYPE_ID,
      };
      this.addGood(this.good);
      this.addCate(cate);
      this.$forceUpdate();
    },

    buyNow() {
      let s = [];
      let _this = this;
      let el = this.good;

      if (
        _this.isShowCount === 1 &&
        _this.pageMsg.memberPoint < this.pageMsg.buyCount * el.COMMODITY_POINT
      ) {
        uni.showToast({
          title: "您的积分不足",
          icon: "none",
        });
        return;
      }
      s.push({
        COMMODITY_ID: el.COMMODITY_ID,
        COMMODITY_CODE: el.COMMODITY_CODE,
        COMMODITY_NAME: el.COMMODITY_NAME,
        COMMODITY_BARCODE: el.COMMODITY_BARCODE,
        COMMODITY_UNIT: el.COMMODITY_UNIT,
        COMMODITY_RULE: el.COMMODITY_RULE,
        COMMODITY_POINT: el.COMMODITY_POINT,
        ORDER_COUNT: this.pageMsg.buyCount,
        AVERAGE_PRICE: el.COMMODITY_MEMBERPRICE,
        ORDER_AMOUNT: this.pageMsg.buyCount * el.COMMODITY_MEMBERPRICE,
        DISCOUNT_AMOUNT: 0,
        SUPPLIER_ID: el.SUPPLIER_ID,
        SUPPLIER_NAME: el.SUPPLIER_NAME,
        DEFAULT_IMG: el.DEFAULT_IMG,
        PAY_TYPE: _this.isShowCount === 1 ? 3000 : 1000, // 支付方式 3000 积分支付
      });
      _this.isShowCount = 0;
      _this.setOrder(s);
      uni.navigateTo({
        url: "/pages/product/confirmOrder/index?type=1&nature=" + el.COMMODITY_NATURE,
      });
    },
    loadDetailImg(e, i) {
      // 加载商品介绍图片指定原尺寸宽高
      let $width = e.mp.detail.width; // 获取图片真实宽度
      let $height = e.mp.detail.height;
      // 将图片的datadata-index作为image对象的key,然后存储图片的宽高值
      this.detailImgList[i] = {
        width: $width,
        height: $height,
      };
      this.$forceUpdate();
    },
    getMemberPoint(type) {
      // 获取会员积分
      let _this = this;
      if (this.user.MEMBERSHIP_ID) {
        this.$api
          .getCoop({
            action_type: "GetMemberPoint",
          })
          .then(function (rs) {
            _this.pageMsg.memberPoint = rs.Data.MEMBERSHIP_POINT;
            _this.pageMsg.money = rs.Data.MEMBERSHIP_POINT;
            _this.isShowCount = type;
          });
      } else {
        uni.showModal({
          title: "温馨提示",
          content: "您还没有登录，快去登录吧",
          confirmText: "一键登录",
          confirmColor: "#498fe2",
          success: (res) => {
            if (res.confirm) {
              uni.navigateTo({ url: "/pages/register/index" });
            }
          },
        });
      }
    },
    creatPageQR() {
      // 生成当前页面小程序二维码
      let _this = this;
      _this.showShareBox = false;
      uni.showLoading({ title: "正在加载" });
      _this.$api
        .getCoop({
          action_type: "CreateWxCode",
          page: "pages/product/productDetail/index",
          scene: _this.pageMsg.goodId + "&" + _this.user.InviteCode, // 商品id & 当前用户邀请码
          width: 280,
        })
        .then((res) => {
          console.log("creatPageQR", res);
          // let bin64 = res.Data.imgUrl
          // 生成的base64二维码
          // let fs = uni.getFileSystemManager()

          // fs.writeFile({
          //   filePath: `${uni.env.USER_DATA_PATH}/` + _this.pageMsg.goodId + `pro.png`,
          //   data: bin64,
          //   encoding: 'base64',
          //   success (res) {
          uni.getImageInfo({
            src: res.Data.imgUrl,
            success(res) {
              let codePath = res.path;
              let codeW = res.width;

              uni.getImageInfo({
                src: _this.good.DEFAULT_IMG, // _this.good.DEFAULT_IMG,
                success: (rs) => {
                  let productPath = rs.path;
                  let productW = rs.width;
                  let productH = rs.height;
                  _this.showSharePro = true;
                  _this.drawImage(productPath, productW, productH, codePath, codeW);
                },
              });
            },
            fail(err) {
              console.error(err);
            },
          });
          // },
          // fail (err) {
          //   console.error(err)
          // }})
        });
    },
    drawImage(productPath, productW, productH, codePath, codeW) {
      // 才canvas上画海报
      let _this = this;

      let canv = uni.createCanvasContext("pro", this);
      let ratio = uni.getSystemInfoSync().windowWidth / 750; // 适配不同机型的图片比例
      let imgMaxW = _this.windowMsg.width;
      // let imgMaxH = _this.windowMsg.width
      let canvHeight = _this.windowMsg.height;

      let paddL = 24 * ratio;
      let paddT = 24;
      let clipWidth = imgMaxW * ratio;
      let clipHeight = ((productH * imgMaxW) / productW) * ratio;
      let imgLeft = 0;

      if (productH / productW > 1.5 || clipHeight > clipWidth) {
        // 如果图片原图比例1：1.5则需要根据商品的高度调整适配
        clipHeight = imgMaxW * ratio;
        clipWidth = (clipHeight * productW) / productH;
        imgLeft = (imgMaxW * ratio - clipWidth) / 2;
      }

      // 设置一个背景色
      canv.fillStyle = "#fff";
      canv.fillRect(0, 0, imgMaxW * ratio, canvHeight);
      // canv.draw()

      // 设置字体大小、文本颜色 （如果不先写文字 则图片无法写入）
      canv.setFontSize(20 * ratio);
      canv.setFillStyle("#454545");
      // 简易绘制两行文本，多余...
      _this.canvasTextAutoLine(
        _this.good.COMMODITY_NAME,
        canv,
        paddL,
        paddT,
        28,
        clipWidth - 24,
        1
      ); // 标题
      // 绘制价格

      let text = _this.good.PAY_METHOD === 2000 ? "积分" : "元";
      let price =
        _this.good.PAY_METHOD === 2000
          ? _this.good.COMMODITY_POINT
          : _this.good.COMMODITY_MEMBERPRICE;
      canv.setFontSize(30 * ratio);
      canv.setFillStyle("#EA3323");
      canv.fillText(price, paddL, paddT + 28 * ratio + 8);

      let priceWidth = canv.measureText(price + "").width;
      canv.setFontSize(16 * ratio);
      canv.setFillStyle("#EA3323");
      canv.fillText(text, paddL + priceWidth + 1, paddT + 28 * ratio + 8);

      canv.setFontSize(16 * ratio);
      canv.setFillStyle("#999");
      canv.fillText("长按识别·去逛逛", 60 * ratio + 80, (canvHeight - 92) * ratio);
      canv.draw();

      canv.save();
      // 绘制商品图片
      canv.drawImage(productPath, 0 + imgLeft, paddT + 58 * ratio, clipWidth, clipHeight);

      // 绘制小程序二维码图片

      canv.drawImage(codePath, 60 * ratio, (canvHeight - 164) * ratio, 72, 72);
      canv.draw(true);
      // canv.scale(ratio, ratio)
      uni.hideLoading();
    },
    /*
      *  绘制多行文本，自动换行，超出添加...
      str:要绘制的字符串
      canvas:canvas对象
      initX:绘制字符串起始x坐标
      initY:绘制字符串起始y坐标
      lineHeight:字行高，自己定义个值即可
      maxWidth: 文本最大宽度
      row: 最大行数
      */
    canvasTextAutoLine: function (str, ctx, initX, initY, lineHeight, maxWidth, row = 1) {
      var lineWidth = 0;
      var lastSubStrIndex = 0;
      var currentRow = 1;
      for (let i = 0; i < str.length; i++) {
        lineWidth += ctx.measureText(str[i]).width;
        if (lineWidth > maxWidth) {
          currentRow++;
          let newStr = str.substring(lastSubStrIndex, i);
          if (currentRow > row && str.length > i) {
            newStr = str.substring(lastSubStrIndex, i - 2) + "...";
          }
          ctx.fillText(newStr, initX, initY);
          initY += lineHeight;
          lineWidth = 0;
          lastSubStrIndex = i;

          if (currentRow > row) {
            break;
          }
        }
        if (i === str.length - 1) {
          ctx.fillText(str.substring(lastSubStrIndex, i + 1), initX, initY);
        }
      }
    },
    saveImage() {
      // 将海报保存图片到
      let _this = this;
      uni.getSetting({
        success(res) {
          if (!res.authSetting["scope.writePhotosAlbum"]) {
            uni.authorize({
              scope: "scope.writePhotosAlbum",

              success() {
                // 用户已经同意小程序使用相册

                _this.saveImageToPhotos();
              },

              fail() {
                wx.openSetting({
                  success: (res) => {},
                });
              },
            });
          } else {
            // 用户已经同意小程序使用相册

            _this.saveImageToPhotos();
          }
        },
      });
    },
    saveImageToPhotos(tempFilePath) {
      let _this = this;
      uni.showLoading({ title: "正在生成图片" });
      uni.canvasToTempFilePath(
        {
          width: _this.windowMsg.width, // 导出图片的宽
          height: _this.windowMsg.height, // 导出图片的高
          destWidth: _this.windowMsg.width * _this.windowMsg.scale * 4, // 导出图片的宽
          destHeight: _this.windowMsg.height * _this.windowMsg.scale * 4, // 导出图片的高

          canvasId: "pro",
          success: function (res) {
            uni.saveImageToPhotosAlbum({
              filePath: res.tempFilePath,
              success(result) {
                uni.hideLoading();
                uni.showToast({
                  title: "保存成功，从相册中分享到朋友圈吧",
                  icon: "none",
                  duration: 4000,
                });
                _this.showSharePro = false;
              },
              fail: function (res) {
                uni.showToast({
                  title: "图片保存失败",
                  icon: "none",
                  duration: 2000,
                });
              },
            });
          },
          fail: function (res) {
            wx.showToast({
              title: "图片生成失败",
              icon: "none",
              duration: 2000,
            });
          },
        },
        _this
      );
    },

    handleGetIsCollect() {
      let collectGoodList = uni.getStorageSync("collectGood");
      if (collectGoodList && collectGoodList.length > 0) {
        let haveSame = false;
        collectGoodList.forEach((item) => {
          if (item.COMMODITY_ID === this.shopId) {
            haveSame = true;
          }
        });

        this.isCollect = haveSame;
      }
    },
  },
  onShareAppMessage() {
    let _this = this;

    return {
      title: _this.good.COMMODITY_NAME,
      path: `/pages/shopPages/shopDetail/index?pageType=${_this.pageType}&id=${_this.good.COMMODITY_ID}`,
    };
  },
  onShareTimeline() {
    let _this = this;
    return {
      title: _this.good.COMMODITY_NAME,
      path: `/pages/shopPages/shopDetail/index?pageType=${_this.pageType}&id=${_this.good.COMMODITY_ID}`,
    };
  },
  // onShareAppMessage() {
  //   let _this = this;

  //   return {
  //     title: _this.good.COMMODITY_NAME,
  //     path:
  //       "/pages/product/productDetail/index?invite=" +
  //       _this.user.InviteCode +
  //       "&id=" +
  //       _this.pageMsg.goodId,
  //     imageUrl: _this.good.DEFAULT_IMG,
  //   };
  // },
  onUnload() {
    this.isShowCount = false;
    this.showSharePro = false;
    this.good = {};
    clearInterval(this.timer);
  },
  async onLoad(option) {
    console.log("页面开始加载，骨架屏状态:", this.isPageLoading);
    let systemInfo = uni.getSystemInfoSync();
    let height = systemInfo.safeAreaInsets.bottom;
    this.safeHeight = Number(height);
    this.menu = uni.getMenuButtonBoundingClientRect();
    console.log("option", option);
    console.log("user", this.user);
    if (option.pageType) {
      this.pageType = option.pageType;
    }

    if (option.id) {
      this.shopId = Number(option.id);
    }
    if (option.come) {
      this.come = option.come;
    }

    // 判断当前的购物车里面是否有东西
    let shopCarList = [];
    if (this.pageType === "UnionMall") {
      shopCarList = this.$store.state.unionMyShopCar;
    } else {
      shopCarList = this.$store.state.myShopCar;
    }
    console.log("shopCarList", shopCarList);
    if (shopCarList && shopCarList.length > 0) {
      this.shopCarList = shopCarList;
    }

    await this.getDetail(option.id);

    // 数据加载完成，立即隐藏骨架屏
    console.log("数据加载完成，隐藏骨架屏");
    this.isPageLoading = false;

    this.handleGetIsCollect();

    this.$utils.addUserBehaviorNew({
      behaviorRecordDesc: `查看商品【${this.good.COMMODITY_NAME}】详情`,
    });
    // if (option.scene) {
    //   // 是否是商品分享码扫入的 带有他人的邀请码
    //   let scene = decodeURIComponent(option.scene);
    //   scene = scene.split("&");
    //   this.pageMsg.goodId = scene[0];
    //   this.setInvitedCode(scene[1]);
    // } else {
    //   this.pageMsg.goodId = option.id;
    // }

    // if (option.invite) {
    //   this.setInvitedCode(option.invite);
    // }
    // this.pageMsg.buyCount = 1;

    // this.getRate();
  },
};
</script>

<style lang="less" scoped>
// 骨架屏样式
.skeleton-container {
  min-height: 100vh;
  background: #f5f5f5;
  position: relative;
  z-index: 999;
}

.skeleton-animate {
  background: linear-gradient(90deg, #f0f0f0 25%, #e6e6e6 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s infinite;
}

@keyframes skeleton-loading {
  0% {
    background-position: 200% 0;
  }

  100% {
    background-position: -200% 0;
  }
}

// 头部导航骨架
.skeleton-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: #fff;
  z-index: 999;
  box-sizing: border-box;
  padding: 0 32rpx;

  .skeleton-nav {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .skeleton-back-btn,
    .skeleton-share-btn {
      width: 60rpx;
      height: 60rpx;
      border-radius: 50%;
    }

    .skeleton-title {
      width: 200rpx;
      height: 40rpx;
      border-radius: 8rpx;
    }
  }
}

// 商品图片骨架
.skeleton-product-image {
  .skeleton-swiper {
    width: 100%;
    height: 100%;
    border-radius: 0;
  }
}

// 商品信息骨架
.skeleton-product-info {
  background: #fff;
  padding: 32rpx;
  margin-top: 20rpx;

  .skeleton-price-section {
    margin-bottom: 32rpx;

    .skeleton-price {
      width: 200rpx;
      height: 60rpx;
      border-radius: 8rpx;
      margin-bottom: 16rpx;
    }

    .skeleton-original-price {
      width: 120rpx;
      height: 32rpx;
      border-radius: 6rpx;
    }
  }

  .skeleton-title-section {
    margin-bottom: 32rpx;

    .skeleton-product-title {
      width: 100%;
      height: 48rpx;
      border-radius: 8rpx;
      margin-bottom: 16rpx;
    }

    .skeleton-product-subtitle {
      width: 80%;
      height: 32rpx;
      border-radius: 6rpx;
    }
  }

  .skeleton-spec-section {
    .skeleton-spec-title {
      width: 120rpx;
      height: 40rpx;
      border-radius: 6rpx;
      margin-bottom: 20rpx;
    }

    .skeleton-spec-options {
      display: flex;
      gap: 20rpx;

      .skeleton-spec-item {
        width: 120rpx;
        height: 60rpx;
        border-radius: 8rpx;
      }
    }
  }
}

// 商品详情骨架
.skeleton-detail-section {
  background: #fff;
  margin-top: 20rpx;
  padding: 32rpx;

  .skeleton-detail-tabs {
    display: flex;
    margin-bottom: 32rpx;
    border-bottom: 1px solid #f0f0f0;
    padding-bottom: 20rpx;

    .skeleton-tab-item {
      width: 120rpx;
      height: 40rpx;
      border-radius: 6rpx;
      margin-right: 40rpx;
    }
  }

  .skeleton-detail-content {
    .skeleton-detail-line {
      width: 100%;
      height: 32rpx;
      border-radius: 6rpx;
      margin-bottom: 20rpx;

      &:nth-child(2) {
        width: 85%;
      }

      &:nth-child(3) {
        width: 92%;
      }

      &:nth-child(4) {
        width: 78%;
      }

      &:last-child {
        width: 65%;
        margin-bottom: 0;
      }
    }
  }
}

// 底部操作栏骨架
.skeleton-bottom-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 134rpx;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 32rpx;
  box-sizing: border-box;
  border-top: 1px solid #f0f0f0;

  .skeleton-bottom-left {
    display: flex;
    gap: 32rpx;

    .skeleton-cart-btn,
    .skeleton-collect-btn {
      width: 80rpx;
      height: 80rpx;
      border-radius: 50%;
    }
  }

  .skeleton-bottom-right {
    .skeleton-buy-btn {
      width: 240rpx;
      height: 80rpx;
      border-radius: 40rpx;
    }
  }
}

.page-body {
  width: 100vw;
  min-height: 100vh;
  // overflow-x: hidden;
  // overflow-y: scroll;
}

* {
  box-sizing: border-box;
}

hr {
  color: #e9e9e9;
  height: 2rpx;
}

.product-image {
  height: 55vh;
  width: 100%;
  // padding-top 20rpx
  background: #fff;
  // position: relative;

  .header {
    width: 100%;
    position: fixed;
    z-index: 10;
    top: 0;

    .headerBottom {
      width: calc(100% - 64rpx);
      position: absolute;
      left: 32rpx;
      z-index: 10;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .backArrowBox {
        width: 120rpx;
        background: rgba(255, 255, 255, 0.6);
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 32rpx;
        border: 1px solid #d9d5cc;
        padding: 4rpx 16rpx;
        margin-bottom: 8px;

        .img {
          width: 48rpx;
          height: 48rpx;
        }

        .line {
          width: 2rpx;
          height: 32rpx;
          background: #bbbbba;
          margin: 0 8rpx;
        }
      }

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

        .tabItem {
          padding: 0 16rpx;
          line-height: 40rpx;
        }

        .selectTabItem {
          position: relative;
        }

        .selectTabItem:after {
          content: "";
          position: absolute;
          bottom: -6rpx;
          left: 50%;
          transform: translateX(-50%);
          width: 2rem;
          height: 4rpx;
          background: #ff8000;
        }
      }

      .rightContent {
        width: 120rpx;
      }

      .moreFunBox {
        width: 220rpx;
        height: 220rpx;
        background: #fff;
        border-radius: 16rpx;
        position: absolute;
        z-index: 10;
        left: 50rpx;
        box-sizing: border-box;
        padding: 12rpx 0 12rpx 16rpx;

        .triangle {
          position: absolute;
          width: 0;
          height: 0;
          border-left: 5px solid transparent;
          /* 左边透明 */
          border-right: 5px solid transparent;
          /* 右边透明 */
          border-bottom: 10px solid #fff;
          /* 底边颜色 */
          top: -10px;
          left: 40px;
        }

        .funList {
          width: 100%;
          height: 100%;

          .funItem {
            width: 100%;
            height: 70rpx;
            display: flex;
            align-items: center;

            .funItemIcon {
              width: 30rpx;
              height: 30rpx;
              margin-right: 20rpx;
            }

            .funItemText {
              width: calc(100% - 50rpx);
              height: 100%;
              display: inline-block;
              font-size: 26rpx;
              display: flex;
              align-items: center;
              border-bottom: 1px solid #dad6cb;
            }
          }
        }
      }
    }
  }

  .banner {
    height: 100%;
    width: 100%;
    margin: 0 auto;

    image {
      height: 100%;
      width: 100%;
    }
  }

  .defaultImgBox {
    height: 100%;
    width: 100%;
    margin: 0 auto;

    image {
      height: 100%;
      width: 100%;
    }
  }
}

.swiper-dots {
  width: 100%;
  height: 30rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  bottom: 70rpx;
  // flex-direction row
  // position absolute
  // left 50%
  // transform translateX(-50%)
  // bottom 100rpx
}

.dot {
  width: 70rpx;
  height: 32rpx;
  border-radius: 32rpx;
  line-height: 32rpx;
  background-color: rgba(0, 0, 0, 0.3);
  // opacity .3
  font-size: 26rpx;
  color: #fff;
  text-align: center;
}

.product-info {
  background: #fff;
}

.price-box {
  color: #ea3323;
  font-size: 40rpx;
  // height: 75rpx;
  // padding-bottom: 25rpx;
  line-height: 1;
  // padding-left: 32rpx;
  display: flex;
  align-items: flex-end;
  position: relative;
}

.marketBottom {
  margin-left: 12px;

  .marketPrice {
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #9fa3a8;
    text-decoration: line-through;
  }

  .marketPriceValue {
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #9fa3a8;
    text-decoration: line-through;
  }

  .unit {
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #9fa3a8;
  }
}

.sale-count {
  font-size: 24rpx;
  color: #333;
  padding-right: 32rpx;
}

.inventory {
  display: inline-block;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  color: #999999;
  font-size: 24rpx;
}

.vip-price {
  font-size: 42rpx;
  color: #ea3323;

  .unit {
    font-size: 28rpx;
  }

  // display flex
  // align-items flex-end
  // margin-left 24rpx
  // justify-content center

  // line-height 1
  // padding-bottom 4rpx
  .vip-card-ico {
    background: url("https://eshangtech.com/ShopICO/shoppingMall/vip-text.png") no-repeat
      center; // eshangtech.com/ShopICO/shoppingMall/vip-text.png) no-repeat center
    background-size: contain;
    font-size: 18rpx;
    color: #e6e1cf;
    height: 26rpx;
    line-height: 26rpx;
    width: 52rpx;
    text-align: right;
    padding-right: 10rpx;
    margin-bottom: 2rpx;
    display: inline-block;
  }
}

.originalPrice {
  display: inline-block;
  margin-left: 16rpx;

  .unit {
    font-size: 24rpx;
    color: #999999;
  }

  .oldPrice {
    font-size: 28rpx;
    color: #999999;
    text-decoration: line-through;
  }
}

// .share-btn:before
// content ''
// height 31rpx
// width 32rpx
// background url(https://eshangtech.com/ShopICO/shoppingMall/share-btn.png) no-repeat center
// background-size contain
.share-btn {
  position: relative;
  background: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #ea3323;
  font-size: 20rpx;
  // height 100rpx
  width: 100rpx;
  justify-content: center;
  margin: 0;
  padding: 0;
  line-height: 1.2;
}

button:after {
  border: none;
}

.colorRed {
  color: #ea3323;
  font-size: 24rpx;
  margin-right: 32rpx;
}

.join-vip {
  height: 120rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 26rpx;
  border: 1rpx solid #ebebeb;

  .vip-left {
    background: #f7f7f7;
    flex: 1;
    height: 120rpx;
    padding-left: 32rpx;
    padding-top: 16rpx;
    box-sizing: border-box;

    .vip-card-ico:before {
      content: "";
      background: url("https://eshangtech.com/ShopICO/shoppingMall/vip-ico.png") no-repeat
        center; // eshangtech.com/ShopICO/shoppingMall/vip-ico.png) no-repeat center
      width: 13rpx;
      height: 12rpx;
      margin-right: 4rpx;
      background-size: contain;
    }

    .vip-card-ico {
      font-size: 20rpx;
      color: #e6e1cf;
      border-radius: 20rpx;
      height: 30rpx;
      display: flex;
      align-items: center;
      line-height: 30rpx;
      background: #362f14;
      width: 90rpx;
      justify-content: center;
      margin-right: 8rpx;
    }

    .vip-title {
      color: #333;
      line-height: 1.5;
      display: flex;
      align-items: center;
    }

    .vip-des {
      color: #999;
      line-height: 2;
    }
  }

  .vip-right {
    height: 120rpx;
    display: flex;
    align-items: center;
    background: #f4eee0;
    width: 140rpx;
    line-height: 1.5;
    padding: 20rpx 20rpx 20rpx 36rpx;
    color: #000;
    box-sizing: border-box;
  }
}

.product-title {
  color: #333333;
  line-height: 1.5;
  font-weight: bolder;
  font-size: 30rpx;
  padding: 12rpx 24rpx;
}

.product-brand {
  display: flex;
  align-items: center;
  padding: 8rpx 16rpx 16rpx 32rpx;
  justify-content: space-between;

  .oldPrice {
    color: #999999;
    font-size: 24rpx;
    text-decoration-line: line-through;
  }

  .inventory {
    color: #999999;
    font-size: 24rpx;
  }
}

.product-detail {
  margin-top: 32rpx;
  font-size: 26rpx;
  // padding-bottom: 150rpx;
}

.detail-unit {
  width: 100%;
  box-sizing: border-box;
  padding: 16rpx 0;
  display: flex;
  align-items: top;
  justify-content: space-between;
  background: #ffffff;
  margin-top: 32rpx;
  border-radius: 16rpx 16rpx 0 0;

  .detail-title {
    width: 240rpx;
    font-size: 28rpx;
  }

  .detail-right {
    // width: calc(100% - 240rpx);
  }
}

.detail-unit + .detail-unit {
  border-top: 2rpx solid #e9e9e9;
}

.detail-title .small-title {
  font-size: 24rpx;
  color: #ea3a3c;
  margin-left: 16rpx;
}

.rate-desc {
  color: #b2b2b2;
  font-size: 24rpx;
}

.rate-title {
  align-items: center;
}

.rate-box {
  background: #fff;
  padding: 16rpx 32rpx;
}

.detail-image-box {
  width: 100%;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  text-align: center;

  .img {
    width: 100%;
  }
}

.product-btn-box {
  height: 124rpx;
  width: 100%;
  position: fixed;
  bottom: 0rpx;
  left: 0;
  display: flex;
  align-items: center;
  text-align: center;
  justify-content: space-between;
  z-index: 2;
  box-sizing: border-box;
  padding-bottom: 24rpx;
  background: #fff;

  .leftBtn {
    width: 38%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-around;
    box-sizing: border-box;
    padding: 0 0 0 12rpx;

    .btnItem {
      width: calc(100% / 2);
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;

      .btnItemImg {
        height: 46rpx;
        width: 46rpx;
      }

      .btnItemText {
        color: #c6a773;
        font-size: 20rpx;
      }
    }
  }

  // .home-btn:before {
  //   content: "";
  //   height: 45rpx;
  //   width: 47rpx;
  //   background: url("https://eshangtech.com/ShopICO/shoppingMall/home.png")
  //     no-repeat center; // eshangtech.com/ShopICO/shoppingMall/home.png) no-repeat center
  //   background-size: contain;
  // }

  // .home-btn {
  //   flex: 1;
  //   background: #fff;
  //   border-top: 2rpx solid #e9e9e9;
  //   display: flex;
  //   flex-direction: column;
  //   align-items: center;
  //   color: #c6a773;
  //   font-size: 20rpx;
  //   height: 100rpx;
  //   justify-content: center;
  //   position: relative;
  // }

  .rightBtn {
    width: 58%;
    height: 100%;
    background: #fff;
    box-sizing: border-box;
    padding: 12rpx;
    display: flex;

    .addCarBtn {
      width: 50%;
      font-size: 28rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      background: linear-gradient(90deg, #ffc500 0%, #ff8d00 100%);
      border-radius: 16rpx 0 0 16rpx;
    }

    .addOrder {
      width: 50%;
      font-size: 28rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      background: linear-gradient(90deg, #ff6d00 0%, #ff3a00 100%);
      border-radius: 0 16rpx 16rpx 0;
    }

    .sellOut {
      width: 50%;
      font-size: 28rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      background: #bbbbbb;
      border-radius: 0 16rpx 16rpx 0;
    }

    .presale {
      background: #ffae00;
    }
  }

  .shopcart-btn:before {
    content: "";
    height: 45rpx;
    width: 47rpx;
    background: url("https://eshangtech.com/ShopICO/shoppingMall/shopcart.png") no-repeat
      center; // eshangtech.com/ShopICO/shoppingMall/shopcart.png) no-repeat center
    background-size: contain;
  }

  .shopcart-btn {
    flex: 1;
    background: #fff;
    border-top: 2rpx solid #e9e9e9;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #c6a773;
    font-size: 20rpx;
    height: 100rpx;
    justify-content: center;
    position: relative;
  }

  .shopcart-count {
    position: absolute;
    top: 10rpx;
    right: 66rpx;
    width: 42rpx;
    height: 32rpx;
    line-height: 32rpx;
    text-align: center;
    border-radius: 32rpx;
    font-size: 18rpx;
    font-weight: 700;
    color: #fff;
    background: rgba(240, 20, 20, 0.808);
    // box-shadow 0 0rpx 4rpx 0 rgba(0, 0, 0, 0.4)
  }

  .join-shopCart {
    flex: 2;
    background: #404040;
    font-size: 30rpx;
    line-height: 100rpx;
    color: #fff;
  }

  .buynow-btn {
    flex: 2;
    font-size: 30rpx;
    line-height: 100rpx;
    color: #fff;
    background: linear-gradient(to right, #c5a671, #dcc194);
  }
}

.countdown {
  width: 100%;
  height: 64rpx;
  background: #fff2e7;
  position: fixed;
  z-index: 2;
  left: 0;
  bottom: 124rpx;
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  font-size: 28rpx;
  color: #ff8417;
  line-height: 32rpx;
  text-align: justify;
  font-style: normal;
  display: flex;
  align-items: center;
  justify-content: center;
}

.offShopDown {
  width: 100%;
  height: 64rpx;
  background: #f5f6f7;
  position: fixed;
  z-index: 2;
  left: 0;
  bottom: 124rpx;
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  font-size: 28rpx;
  color: #716f69;
  line-height: 32rpx;
  text-align: justify;
  font-style: normal;
  display: flex;
  align-items: center;
  justify-content: center;
}

.popup-box {
  padding: 50rpx 40rpx 32rpx;
  font-size: 28rpx;
}

.shopPopupBox {
  width: 100%;
  height: 80vh;
  background: #fff;
  border-radius: 16rpx 16rpx 0 0;
  box-sizing: border-box;
  padding: 16px;

  .shopPopupContent {
    width: 100%;
    height: calc(80vh - 80px - 32px + 12rpx);
    margin-bottom: 12rpx;

    .detailTop {
      display: flex;
      border-bottom: 1px solid #f2f4f5;

      .detailImg {
        width: 80px;
        height: 80px;
      }

      .box {
        width: calc(100% - 92px);
        padding-bottom: 16px;
        margin-left: 12px;

        .nameTop {
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: space-between;

          .name {
            font-size: 14px;
            font-family: PingFangSC-Semibold, PingFang SC;
            font-weight: 600;
            color: #020e1a;
            line-height: 18px;
            display: block;
            width: calc(100% - 56rpx);
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
          }

          .closeIcon {
            width: 20px;
            height: 20px;
          }
        }

        .priceBox {
          margin-top: 32px;

          .priceIcon {
            font-size: 16px;
            font-family: PingFangSC-Semibold, PingFang SC;
            font-weight: 600;
            color: #ff6219;
            line-height: 20px;
          }

          .price {
            font-size: 20px;
            font-family: PingFangSC-Semibold, PingFang SC;
            font-weight: 600;
            color: #ff6219;
            line-height: 20px;
          }

          .unit {
            font-size: 12px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #9fa3a8;
            line-height: 18px;
          }
        }
      }
    }

    .scrollDetailBox {
      width: 100%;
      height: calc(80vh - 80px - 32px + 12rpx - 80px);

      .detailMessage {
        margin-top: 16px;
        border-bottom: 1px solid #f2f4f5;
        padding-bottom: 16px;

        .detailTitle {
          font-size: 14px;
          font-family: PingFangSC-Semibold, PingFang SC;
          font-weight: 600;
          color: #020e1a;
          line-height: 20px;
          margin-bottom: 8px;
        }

        .detailText {
          font-size: 14px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #6c737a;
          line-height: 18px;
        }
      }

      .orderDetail {
        margin-top: 16px;

        .orderTitle {
          font-size: 14px;
          font-family: PingFangSC-Semibold, PingFang SC;
          font-weight: 600;
          color: #020e1a;
          line-height: 20px;
        }

        .numBox {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-top: 12px;

          .numTitle {
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #020e1a;
            line-height: 20px;
          }

          .cartcontrol {
            width: 150px;
            height: 30px;
            line-height: 24px;
            display: flex;
            justify-content: flex-start;
            border: 1px solid rgba(2, 14, 26, 0.06);
            border-radius: 2px;

            .subtract {
              width: 30px;
              height: 30px;
              background: #f2f4f5;
              display: flex;
              justify-content: center;
              align-items: center;
              border-radius: 2px 0 0 2px;
              font-size: 8px;
              color: #9fa3a8;

              .img {
                width: 16px;
                height: 16px;
              }
            }

            .cart-count {
              height: 30px !important;
              font-size: 16px;
              line-height: 30px;
              flex: 1;
            }
          }
        }

        .sizeBox {
          width: 100%;
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-top: 12px;

          .sizeTitle {
            display: inline-block;
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #020e1a;
            line-height: 20px;
            width: 100rpx;
          }

          .sizeScrollBox {
            width: calc(100% - 112rpx);
            flex: 1;

            .sizeList {
              // display: flex;
              width: 100%;

              .sizeItem {
                font-size: 12px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #000;
                line-height: 18px;
                padding: 4px 16px;
                background: #dbdad6;
                border-radius: 4px;
                margin-left: 8px;
                display: inline-block;
                margin-bottom: 16rpx;
              }

              .selectSizeItem {
                display: inline-block;
                font-size: 12px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #1890ff;
                line-height: 18px;
                padding: 4px 16px;
                background: #e7f3ff;
                border-radius: 4px;
                margin-left: 8px;
                margin-bottom: 16rpx;
              }
            }
          }
        }

        .descBox {
          width: 100%;
          height: 76px;
          background: #f2f4f5;
          border-radius: 4px;
          box-sizing: border-box;
          padding: 8px 12px;
          margin-top: 19px;
        }

        .submitBtn {
          font-size: 16px;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: #ffffff;
          line-height: 22px;
          width: 100%;
          height: 40px;
          display: flex;
          justify-content: center;
          align-items: center;
          background: #1890ff;
          border-radius: 4px;
          margin-top: 24px;
        }
      }
    }
  }

  .bottomBtn {
    width: 100%;
    height: 80rpx;
    box-sizing: border-box;
    position: relative;
    z-index: 9;

    .shopCarBtn {
      width: 100%;
      height: 76rpx;
      font-size: 28rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      background: linear-gradient(90deg, #ffc500 0%, #ff8d00 100%);
      border-radius: 16rpx;
    }

    .makeOrderBtn {
      width: 100%;
      height: 76rpx;
      font-size: 28rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      background: linear-gradient(90deg, #ff6d00 0%, #ff3a00 100%);
      border-radius: 16rpx;
    }
  }
}

.cart-count {
  width: 80rpx;
  line-height: 40rpx;
  text-align: center;
  font-size: 20rpx;
  color: #333;
  height: 40rpx;
  font-size: 28rpx;
}

.buy-it-btn {
  text-align: center;
  width: 674rpx;
  height: 88rpx;
  line-height: 88rpx;
  border-radius: 6rpx;
  font-size: 32rpx;
  color: #fff;
  margin-top: 100rpx;
  background: linear-gradient(to right, #1f1f1f, #62605f);
}

.cartcontrol {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-left: 45rpx;
}

.cart-decrease {
  width: 48rpx;
  height: 48rpx;
  border: 2rpx solid #eee;
  position: relative;
  border-radius: 50%;
}

.cart-decrease:before {
  content: "";
  height: 4rpx;
  width: 25rpx;
  background: #4d4d4d;
  display: block;
  position: absolute;
  left: 12rpx;
  top: 21rpx;
  border-radius: 4rpx;
}

.cart-add {
  width: 48rpx;
  height: 48rpx;
  border: 2rpx solid #e6e6e6;
  position: relative;
  border-radius: 50%;
  box-sizing: border-box;
}

.cart-add:before {
  content: "";
  height: 4rpx;
  width: 25rpx;
  background: #4d4d4d;
  display: block;
  position: absolute;
  left: 11rpx;
  top: 21rpx;
  border-radius: 4rpx;
}

.cart-add:after {
  content: "";
  height: 25rpx;
  width: 4rpx;
  background: #4d4d4d;
  display: block;
  position: absolute;
  top: 11rpx;
  left: 21rpx;
  border-radius: 4rpx;
}

.desc-ico:before {
  content: "";
  height: 30rpx;
  width: 6rpx;
  background: linear-gradient(#dcb97e, #faefdd);
  display: inline-block;
  vertical-align: middle;
  margin-right: 16rpx;
}

// 分享商品页弹出窗口
.share-pop-body {
  width: 100%;
  background: #f9f9f9;
  overflow: hidden;
  height: 100%;
  position: relative;
  padding-top: 80rpx;
  box-sizing: border-box;
}

.down-img-btn {
  text-align: center;
  padding: 32rpx 0;
  background: #fff;
  position: absolute;
  bottom: 0;
  width: 100%;
  left: 0;
}

.canvas-content {
  margin: auto;
  display: hidden;
}

//
.share-pop-btn {
  display: flex;
  align-items: center;
  padding-bottom: 40rpx;
}

.share-pop-btn button {
  display: flex;
  align-items: center;
  flex-direction: column;
  background: #fff;
  font-size: 24rpx;
}

.share-pop-btn image {
  width: 80rpx;
  height: 80rpx;
}

.share-popup {
  padding: 16px;
  border-radius: 12px 12px 0 0;
  /* 圆角设置 */
  box-shadow: 0 -4px 10px rgba(0, 0, 0, 0.1);
}

.share-divider {
  text-align: center;
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 16px;
  color: #333;
}

.share-pop-btn {
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.share-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: none;
  border: none;
}

.share-icon {
  width: 50px;
  height: 50px;
  margin-bottom: 8px;
}
</style>
