<template>
  <scroll-view
    class="page-body"
    scroll-y="true"
    @scroll="handlePageScroll"
    :scroll-into-view="scrollView"
  >
    <div class="product-image" :style="{ marginTop: menu.top - 4 + 'px' }">
      <view
        class="header"
        :style="{
          height: menu.bottom + 'px',
          background: showTopFixed ? '#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">
        <swiper
          scroll-x="true"
          circular="true"
          class="banner"
          indicator-dots="true"
          indicator-active-color="#ff6d00"
          autoplay
          id="banner"
          interval="3000"
          @change="swiperChange"
          :current="pageMsg.current"
        >
          <swiper-item v-for="(img, i) in good.List" :key="i">
            <image
              mode="aspectFill"
              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>
        <image
          mode="aspectFill"
          lazy-load="true"
          :src="good.DEFAULT_IMG"
        ></image>
      </block>
    </div>

    <hr />
    <div class="product-info">
      <div
        style="
          display: flex;
          align-items: center;
          justify-content: space-between;
        "
      >
        <div class="price-box">
          <div class="vip-price">
            <span class="unit">¥</span>
            <span style="font-weight: bold">
              {{ good.bigNumber || "" }}.{{ good.smallNumber || "00" }}
              <!-- {{ good.COMMODITY_MEMBERPRICE || "-" }} -->
            </span>
          </div>
        </div>
        <div v-if="false">
          <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>
          <!-- <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">
        <view class="oldPrice"
          >原价：¥ {{ good.RETbigNumber || "" }}.{{
            good.RETsmallNumber || "00"
          }}</view
        >
        <view class="inventory">库存：{{ good.COMMODITY_STOCK || "0" }}</view>
        <view class="inventory">销量：{{ good.COMMODITY_EN || "0" }}</view>
      </div>
    </div>

    <div
      class="product-detail"
      style="background: #fff; padding: 16rpx 0"
      v-if="
        new Date(good.UPPER_DATE).getTime() > new Date().getTime() ||
        good.SEND_MODE > 0 ||
        good.DELIVER_AREA ||
        good.LIMIT_TOTALCOUNT > 0 ||
        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 || "-"
          }}</view
        >
        <view>{{
          good.SEND_MODE === 1000
            ? "发货模式：自提"
            : good.SEND_MODE === 2000
            ? "发货模式：邮寄"
            : good.SEND_MODE === 3000
            ? "发货模式：免发货"
            : ""
        }}</view>

        <view>{{
          good.DELIVER_AREA ? "配送区域：仅限云南省即江浙沪包邮区购买" : ""
        }}</view>
        <view>{{
          good.LIMIT_TOTALCOUNT
            ? `限购数量：每人限购${good.LIMIT_TOTALCOUNT}件`
            : ""
        }}</view>
        <view>{{
          good.LIMIT_TOTALCOUNT
            ? `每日限购：每人每日限购${good.LIMIT_TOTALCOUNT}件`
            : ""
        }}</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">
          {{ 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> -->
      <block
        v-if="good.ContentImgList && good.ContentImgList.length > 0"
        id="detail"
      >
        <!-- ContentImgList -->
        <div class="detail-unit">
          <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
              class="img"
              mode="aspectFill"
              lazy-load="true"
              :src="img.IMAGE_URL"
              @load="loadDetailImg($event, i)"
              @click="handlePreviewDetailImg(img)"
            ></image>
            <!-- :style="
                'width:' +
                detailImgList[i].width +
                'rpx; height:' +
                detailImgList[i].height +
                'rpx;'
              " -->
          </block>
        </div>
      </block>
    </div>

    <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">
          <image class="btnItemImg" src="/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 class="rightBtn">
        <div class="addCarBtn" @click="handleShowShopPopup(1)">加入购物车</div>
        <div
          class="addOrder"
          @click="handleShowShopPopup(2)"
          v-if="good.COMMODITY_STOCK > 0"
        >
          立即购买
        </div>
        <div
          class="sellOut"
          @click="handleShowShopPopup(3)"
          v-if="good.COMMODITY_STOCK === 0"
        >
          已售罄
        </div>
      </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>

    <UniPopup
      :show="showShareBox"
      position="bottom"
      overlay="false"
      @close="handleClosePopup"
      ref="popup"
    >
      <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>
    </UniPopup>

    <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>
          <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">
              <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 class="sizeItem">{{ good.COMMODITY_UNIT }}</div> -->
              </div>
            </div>
            <div class="descBox">
              <input
                class="desc"
                :value="good.SALEDETAIL_DESC"
                placeholder="请填写商品备注"
                @input="handleDesc($event, good)"
              />
            </div>
          </div>
        </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>
  </scroll-view>
</template>
<script>
// import rateItem from "../../rate/components/rateItem";
import { mapGetters, mapActions, mapMutations } from "vuex";
import UniPopup from "../../../uni_modules/uni-popup/components/uni-popup/uni-popup.vue";
export default {
  data() {
    const windows = uni.getSystemInfoSync();

    return {
      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: {},
      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 为工会商城
    };
  },
  components: {
    // rateItem,
    UniPopup,
  },
  computed: {
    ...mapGetters("shoppingCart", {
      totalNum: "goodNum",
    }),
    ...mapGetters(["user"]),
  },
  methods: {
    ...mapActions("shoppingCart", {
      addGood: "ADDGOOD",
      addCate: "ADDCATE",
    }),
    ...mapMutations("shoppingCart", {
      setOrder: "ORDERGOOD",
    }),
    ...mapMutations(["setInvitedCode"]),
    // 输入框里面的数量
    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);

      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) {
      console.log("value", value);
      this.good.COMMODITY_RULE = value;
      console.log("this.good", this.good);
    },
    // 点击的锚点
    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) {
      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链接列表
      });
    },
    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) {
        uni.redirectTo({
          url: "/pages/shopMallPage/index/index",
        });
      } else if (obj.value === 2) {
        uni.redirectTo({
          url: "/pages/shopMallPage/shopType/index",
        });
      } else if (obj.value === 3) {
        uni.redirectTo({
          url: "/pages/shopMallPage/shopCar/index",
        });
      }
    },
    // 返回首页
    handleBackIndex() {
      uni.navigateBack({
        delta: 1,
      });
    },
    // 显示购物车
    handleShowShopCar() {
      uni.redirectTo({
        url: "/pages/shopMallPage/shopCar/index",
      });
    },
    // 加入购物车方法
    handleAddShopCar() {
      // 是否为已售罄
      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);
      if (this.shopCarList && this.shopCarList.length > 0) {
        let nowShopList = [];
        // 判断有没有一样的
        let isSame = false;
        this.shopCarList.forEach((item) => {
          if (item.COMMODITY_BARCODE === this.good.COMMODITY_BARCODE) {
            item.count += this.good.count;
            item.COMMODITY_RULE = this.good.COMMODITY_RULE;
            isSame = true;
          }
        });
        if (isSame) {
          nowShopList = this.shopCarList;
        } else {
          this.shopCarList.push(this.good);
          nowShopList = this.shopCarList;
        }
        if (this.pageType === "UnionMall") {
          this.$store.commit("unionMyShopCar", nowShopList);
        } else {
          this.$store.commit("myShopCar", nowShopList);
        }
      } else {
        let nowShopList = [];
        nowShopList.push(this.good);
        if (this.pageType === "UnionMall") {
          this.$store.commit("unionMyShopCar", nowShopList);
        } else {
          this.$store.commit("myShopCar", nowShopList);
        }
      }
      uni.showToast({
        title: "加入成功！",
        duration: 2000,
      });

      setTimeout(() => {
        this.$refs.shopPopup.close();
      }, 2000);
    },
    // 立即购买方法
    handleMakeOrder() {
      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_RETAILPRICE;
          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_RETAILPRICE.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售罄
    handleShowShopPopup(type) {
      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;
    },
    swiperChange(e) {
      this.pageMsg.current = e.mp.detail.current;
    },
    goShop() {
      uni.navigateTo({ url: "/pages/product/shopCart/index" });
    },
    decodeHTML(str) {
      return str
        .replace(/&lt;/g, "<")
        .replace(/&gt;/g, ">")
        .replace(/&amp;/g, "&")
        .replace(/&quot;/g, '"')
        .replace(/&nbsp;/g, " ");
    },
    getDetail(id) {
      let _this = this;
      this.$api
        .getCoop({
          action_type: "GetGoodsDetail",
          commodityId: id,
        })
        .then(function (res) {
          console.log("detail", res);
          _this.good = res.Data;
          _this.good.COMMODITY_CURRPRICE = _this.good.COMMODITY_RETAILPRICE;
          _this.good.count = 1;
          _this.pageMsg.current = 0;
          _this.pageMsg.imgeCount = 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.ContentImgList.map((n) => {
            _this.detailImgList.push({ width: 750, height: 400 });
          });
        });
    },
    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_RETAILPRICE,
        ORDER_AMOUNT: this.pageMsg.buyCount * el.COMMODITY_RETAILPRICE,
        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) => {
          // 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_RETAILPRICE;
      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
      );
    },
  },
  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 = {};
  },
  onLoad(option) {
    this.menu = uni.getMenuButtonBoundingClientRect();
    console.log("option", option);
    if (option.pageType) {
      this.pageType = option.pageType;
    }

    // 判断当前的购物车里面是否有东西
    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;
    }

    this.getDetail(option.id);
    // 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>
.page-body {
  width: 100vw;
  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 #faf6ec;
        padding: 0 16rpx;
        .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%;
    }
  }
}

.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;
}

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

.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;
  }
}

// .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: 1;
  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;
    }
  }

  .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);
  }
}

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

.shopPopupBox {
  width: 100%;
  height: 70vh;
  background: #fff;
  border-radius: 16rpx 16rpx 0 0;
  box-sizing: border-box;
  padding: 16px;
  .shopPopupContent {
    width: 100%;
    height: calc(70vh - 92rpx - 64rpx);
    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;
          }
        }
      }
    }
    .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 {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 12px;
        .sizeTitle {
          font-size: 14px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #020e1a;
          line-height: 20px;
        }
        .sizeList {
          display: flex;
          .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;
          }
          .selectSizeItem {
            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;
          }
        }
      }
      .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;
    .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>
