frontend-app/pages/other_package/productInfo/productInfo.vue

<template>
  <view class="product_info_warp">
    <!-- <image v-if="tmpImg" :src="tmpImg" style="width:620rpx;height:960rpx"></image> -->
    <!-- 头部产品描述图 -->
    <view class="product_info_header_warp">
      <up-swiper :list="swiperList" class="product_info_header_swiper" @click="onSwiper"
        @change="(e) => (currentNum = e.current)">
        <template #indicator>
          <view class="indicator-num">
            <text class="indicator-num__text">{{ currentNum + 1 }}/{{ swiperList.length }}</text>
          </view>
        </template>
      </up-swiper>
      <view class="img_comm left_warp">
        <up-image src="/static/common/left_b_st.png" width="30" height="30" bgColor="#f1f6ff00" v-if="!isShareUrl"
          @click="jumpLeft"></up-image>
      </view>
      <view class="img_comm right_warp">
        <up-image v-if="!isShareUrl" src="/static/common/share_st.png" width="30" height="30" bgColor="#f1f6ff00"
          @click="jumpShare"></up-image>
      </view>
    </view>
    <!-- 数据详情 -->
    <view class="product_content_warp">
      <!-- 标题，系列 -->
      <view class="content_data">
        <view style="
            display: flex;
            align-items: center;
            justify-content: space-between;
          ">
          <view class="content_data_price buy_deduction" v-if="orderInfo.buyDeductionValue">
            <view class="buy_deduction_value">
              <text class="text-38 text-bold mr-10">{{ orderInfo.buyDeductionValue }}数字积分</text>
              <text class="text-24">+{{ orderInfo.minPrice }}元</text>
            </view>
            <view class="buy_deduction_label">
              兑后数字积分不退
            </view>
          </view>
          <view class="content_data_price" v-else>
            <text>￥</text>
            <text style="font-size: 60rpx" v-if="orderInfo.minPrice && orderInfo.maxPrice">{{ orderInfo.minPrice }} - {{
              orderInfo.maxPrice }}</text>
            <text style="font-size: 60rpx" v-else>{{
              orderInfo.minPrice
            }}</text>
            <text class="price_o">￥{{ orderInfo.adPrice }}</text>
          </view>
          <view class="text-24" style="color: #ff5a5a; height: 38rpx; display: flex; align-items: center; gap: 5rpx"
            v-if="orderInfo?.goodsTagList">
            <image v-for="val in orderInfo.goodsTagList" :src="val.icon" mode="heightFix" style="height: 38rpx">
            </image>
          </view>
        </view>
        <view class="content_data_title">
          {{ orderInfo.name }}
        </view>
        <view class="content_data_series">
          <!-- 暂时隐藏 -->
          <view class="content_data_series_tag" v-if="orderInfo.contribution">
            <image class="uni-image" src="https://static.tbmall.xin/static/new-home/home_3.png"></image>
            下单送{{ orderInfo.contribution }}贡献值
          </view>
          <!-- 销量还需要改 -->
          <view>全网销量{{ limit999(orderInfo.sales) }}件</view>
        </view>
      </view>

      <!-- 具体规格 -->
      <view class="content_concrete">
        <view class="concrete_item concrete_item_but" @click="checkSpecification(true, 'n')">
          <view class="concrete_item_">
            <view class="concrete_item_title">规格</view>
            <view class="concrete_item_value">
              {{ selectSpecificationTempl.combTypes || "暂未选择规格" }}
            </view>
          </view>
          <up-image src="/static/common/right.png" width="20" height="20" bgColor="#f1f6ff00"></up-image>
        </view>
        <!-- <view class="concrete_item">
          <view class="concrete_item_">
            <view class="concrete_item_title">收货地址</view>
            <view class="concrete_item_value" @click="jumpAddAddress">
              <view class="address_warp" v-if="!adressInfo">
                <up-image src="/static/common/address2.png" width="10" height="10" bgColor="#f1f6ff00"></up-image>
                <view style="margin-left: 10rpx">请填写地址</view>
              </view>
              <view class="address_warp" v-else>{{ adressInfo }}</view>
            </view>
          </view>
        </view> -->
        <view class="concrete_item" v-if="adressInfo">
          <view class="concrete_item_">
            <view class="concrete_item_title">运费</view>
            <view class="concrete_item_value">
              <view class="address_warp">
                <!-- <view style="margin-left: 10rpx">包邮</view> -->
                <view style="margin-left: 10rpx">{{
                  postage ? `¥${postage}元` : "包邮"
                }}</view>
              </view>
            </view>
          </view>
        </view>
        <view class="concrete_item">
          <view class="concrete_item_">
            <view class="concrete_item_title">购物保障</view>
            <view class="concrete_item_value concrete_item_bz">
              <view class="concrete_item_bz concrete_item_bz_item">
                <up-image src="/static/product/product_b.png" width="10" height="12" bgColor="#f1f6ff00"></up-image>
                <view class="concrete_item_bz_item_left">品质严保</view>
              </view>
              <view class="concrete_item_bz">
                <up-image src="/static/product/product_js.png" width="10" height="10" bgColor="#f1f6ff00"></up-image>
                <view class="concrete_item_bz_item_left">极速退款</view>
              </view>
            </view>
          </view>
          <!-- <up-image src="/static/common/right.png" width="20" height="20" bgColor="#f1f6ff00"></up-image> -->
        </view>
      </view>
      <Evaluation @goMore="onGoMore" :evalId="id"></Evaluation>
      <view class="tui-view">
        <text class="text-32 text-zu">退货提示</text>
        <text class="text-28 text-fu1">拆封后影响品质”或“影响二次销售的”不予退货。</text>
        <view class="tui-list">
          <view class="tui-box" :key="index" v-for="(item, index) in tuiList">
            <image :src="`https://static.tbmall.xin/static/new/tui_${index}.png`"></image>
            <text class="text-24 text-gray">{{ item }}</text>
          </view>
          <!-- tuiList -->
        </view>
      </view>

      <!-- 商品详情 -->
      <view class="content_details">
        <view class="content_details_title">商品详情</view>
        <view v-html="detailRich" class="content_details_content"></view>
      </view>
    </view>

    <!-- 底部编辑按钮 -->
    <view class="product_but_warp">
      <view class="product_but_left">
        <view class="left_item">
          <up-image src="/static/product/home_1.png" width="20" height="20" bgColor="#f1f6ff00"
            @click="jumpOther('home')"></up-image>
          <view>首页</view>
        </view>
        <view class="left_item">
          <up-image src="/static/product/kefu.png" width="20" height="20" bgColor="#f1f6ff00"
            @click="onZiXun"></up-image>
          <view>咨询</view>
        </view>
        <view class="left_item">
          <up-image src="/static/product/cart.png" width="24" height="20" bgColor="#f1f6ff00"
            @click="jumpOther('cart')"></up-image>
          <view>购物车</view>
        </view>
      </view>
      <view class="product_but_right" v-if="!isShareUrl">
        <view v-if="!isShowCart && !isCoupon" class="but_comm join_warp" @click="checkSpecification(true, 'addCart')">
          加入购物车
        </view>
        <!-- 限时秒杀现在要改为展示购物车icon 并且立即购买按钮变长一点 -->
        <view class="but_comm buy_warp" :class="{ 'border-16': isShowCart || isCoupon }"
          :style="isShowCart ? 'width: 360rpx' : ''" @click="checkSpecification(true, 'buy')">
          立即购买
        </view>
      </view>
      <MyBtn v-if="isShareUrl" mh="88rpx" text="打开APP" wd="200rpx" @ok="onOpenApp"></MyBtn>
    </view>
    <!-- 选择规格的弹框 -->
    <up-popup :show="specificationShow" :round="10" :closeOnClickOverlay="false" :closeable="true"
      @close="specificationShow = false" mode="bottom">
      <view class="specification_warp">
        <!-- 选择地址 -->
        <view class="specification_adress_warp">
          <view class="specification_adress_msg">10+刚刚抢购</view>
          <!-- <view class="specification_adress_arr">
						<up-image src="/static/common/address_st.png" width="30" height="30" bgColor="#f1f6ff00"></up-image>
						<view class="address_title address_title_sel" v-if="orderInfo && orderInfo.addressObj">
							<text style="font-size: 30rpx;margin-right: 20rpx;">{{orderInfo.addressObj.name}}</text>
							<text>{{orderInfo.addressObj.address}}</text>
						</view>
						<view class="address_title" v-else>暂无收货地址，请添加收货地址！</view>
						<view><up-image src="/static/common/right.png" width="16" height="16" bgColor="#f1f6ff00"></up-image></view>
					</view> -->
        </view>
        <!-- 商品 -->
        <view class="specification_product_warp">

          <up-image :src="skuBySpecInfo.skuImage" width="100" height="100" bgColor="#f1f6ff00"></up-image>
          <view class="product_content">
            <view class="price_warp">
              <!-- 优惠券价格 -->
              <view class="price_content_warp" v-if="isCoupon">
                <text class="text-38 text-bold mr-10">{{ orderInfo.buyDeductionValue }}数字积分</text>
                <text class="text-24" v-if="
                  selectSpecificationTempl &&
                  Object.keys(selectSpecificationTempl).length !== 0">+{{ selectSpecificationTempl.price }}元</text>
                <text v-else>+{{ orderInfo.minPrice }}元</text>
              </view>
              <view class="price_content_warp" v-else>
                <view>￥</view>
                <text style="font-size: 50rpx" v-if="
                  selectSpecificationTempl &&
                  Object.keys(selectSpecificationTempl).length !== 0
                ">
                  {{ selectSpecificationTempl.price }}
                </text>
                <view style="font-size: 50rpx" v-else>
                  {{ skuBySpecInfo.supplyPrice }}
                  <text v-if="skuBySpecInfo.price">- {{ skuBySpecInfo.price }}</text>
                </view>
                <view class="price_content_coupon_warp" v-if="orderInfo.couponPrice && orderInfo.couponPrice !== 0">
                  优惠券{{
                    orderInfo.couponPrice }}</view>
              </view>
              <view class="oOrice_content_warp" v-if="!isCoupon">￥{{ skuBySpecInfo.supplyPrice }}</view>
              <view class="coupon_content_warp" v-if="orderInfo.couponPrice && orderInfo.couponPrice !== 0">
                优惠券已优惠￥{{
                  orderInfo.couponPrice }}</view>
              <view class="coupon_content_stock">
                <view>库存</view>
                <view>{{ skuBySpecInfo.stock || 0 }}件</view>
              </view>

            </view>
            <view class="inventory_warp">
              <!-- <view>库存</view>
              <view>{{ skuBySpecInfo.stock || 0 }}件</view> -->
              <view>已选规格: {{ skuBySpecInfo.skuName }}</view>
            </view>


          </view>
        </view>

        <!-- 规格 -->
        <view class="specification_list_warp">
          <view v-for="(item, index) in specificationList" :key="item.id" class="list_warp">
            <view class="list_title_warp">{{ item.type }} <text></text></view>
            <view class="specification_item_warp">
              <view :class="oItem.disabled || oItem.inventory === 0
                ? 'item_Warp item_Warp_no_warp'
                : item.selectVal === oItem.n
                  ? 'item_Warp item_Warp_yes_warp'
                  : 'item_Warp'
                " v-for="(oItem, oIndex) in item.items" :key="oItem.id || oItem.n"
                @click="clickSpecification(index, item, oItem)">
                {{ oItem.n }}
              </view>
            </view>
          </view>
        </view>
        <!-- 购买数量 -->
        <view class="specification_but">
          <view class="specification_buy">
            <view>数量</view>
            <view class="shopping_info_quantity">
              <view class="quantity_but" @click="quantityFun('minus')">-</view>
              <view class="quantity_value">{{ orderInfo.quantity }}</view>
              <view class="quantity_but" @click="quantityFun('add')">+</view>
            </view>
          </view>
          <view v-if="specificationShowType === 'buy'" class="specification_buy_but" @click="addCart(true)">去支付</view>
          <view v-else-if="specificationShowType === 'addCart'" class="specification_buy_but" @click="addCart(false)">
            加入购物车
          </view>

          <view v-else class="product_but_right popup_buts">
            <view class="but_comm join_warp" @click="addCart(false)">加入购物车</view>
            <view class="but_comm buy_warp" @click="addCart(true)">立即购买</view>
          </view>
        </view>
      </view>
    </up-popup>
    <!-- 我的客服 -->
    <up-modal :show="serviceShow" :showConfirmButton="false">
      <view class="slot-content">
        <view class="close_warp" @click="serviceShow = false">
          <up-image src="/static/common/close.png" width="20" height="20" bgColor="#f1f6ff00"></up-image>
        </view>
        <view class="content_">
          <view class="content_1">{{
            source === "supply_chain" ? "云仓客服" : "平台客服"
          }}</view>
          <view class="content_3">{{
            source === "supply_chain"
              ? CLOUD_SERVICE_PHONE_NUMBER
              : CUSTOMER_SERVICE_PHONE_NUMBER
          }}</view>
        </view>
        <view class="but_">
          <view class="but_copy" @click="
            copyMobile(
              source === 'supply_chain'
                ? CLOUD_SERVICE_PHONE_NUMBER
                : CUSTOMER_SERVICE_PHONE_NUMBER
            )
            ">复制号码</view>
          <view class="but_close" @click="serviceShow = false">取消</view>
        </view>
      </view>
    </up-modal>
    <!-- 暂未开放 -->
    <up-overlay :show="openShow">
      <view class="up_content open_Show" @tap.stop>
        <view class="uni-banner">
          <view class="banner_box">
            <view class="title_">温馨提示</view>
            <view class="msg_">该商家暂未开通供应链权限，请联系供应链客服开通授权。</view>
            <view class="phone_">{{ CLOUD_SERVICE_PHONE_NUMBER }}</view>
            <view class="but_">
              <view class="but_b" @click="copyMobile(CLOUD_SERVICE_PHONE_NUMBER)">立即联系</view>
            </view>
          </view>
        </view>
      </view>
    </up-overlay>
    <!-- 选择地址 -->
    <up-popup v-model:show="addressShow" :round="10" :closeOnClickOverlay="false" :closeable="true"
      :safeAreaInsetBottom="false" @close="checkAddressShow(false, null, 0, 0)">
      <view class="address_popup_warp">
        <view class="address_popup_title">收件地址</view>
        <view class="address_popup_content">
          <view class="address_popup_content_add" @click="addAdress">
            + 新增地址</view>
          <Address @valueFunc="getAddressValueFunc" />
        </view>
        <view class="popup_but" @click="addressOk"> 确认 </view>
      </view>
    </up-popup>
    <SharePopup ref="share" v-if="shareOpen" :show="shareShow" @close="onClose" @share="onShare" :id="id"
      :text="orderInfo.name ? orderInfo.name : ''" :price="orderInfo.minPrice ? orderInfo.minPrice : ''"
      :tu="swiperList.length && swiperList[0]"></SharePopup>
    <EvaluateDialog ref="evaluateDialog" v-if="evaluateDialogShow" :show="evaluateDialogShow"
      @close="evaluateDialogShow = false" :evalId="id" :mainGraph="orderInfo.mainGraph" :name="orderInfo.name">
    </EvaluateDialog>
    <view class="hideCanvasView">
      <canvas id="myCanvas" canvas-id="myCanvas" :style="{
        height: bgObj.height + 'px',
        width: bgObj.width + 'px',
      }"></canvas>
    </view>
  </view>
</template>

<script>
import { getGoodsDetail, addGoods, getGoodsSpecs, getGoodsSpecsInfo } from "@/api/product.js";
import { getValue, PRODUCT_DELIVERY_TIME, ACTIVITY_TYPE } from "@/utils/enumUtils.js";
import { copyData } from "@/utils/index.js";
import Evaluation from "@/pages/other_package/productInfo/evaluation.vue";
import EvaluateDialog from "@/pages/other_package/productInfo/evaluate-dialog.vue";
import SharePopup from "@/pages/other_package/components/share-popup.vue";
import MyBtn from "@/components/common/my-btn.vue";
import { getPostageQuery } from "@/api/cart.js";
import { assembleAddress } from "@/utils/index.js";
// const QSCanvas = require('qs-canvas')
import QSCanvas from "qs-canvas";
// import {getSharePoster} from "@/components/QuShe-SharerPoster/QS-SharePoster/QS-SharePoster.js";
import func from "@/utils/func.js";
import Address from "@/components/address.vue";
import {
  CUSTOMER_SERVICE_PHONE_NUMBER,
  CLOUD_SERVICE_PHONE_NUMBER,
  SHARE_URL,
} from "@/utils/config.js";
let qsc = null;
let timer = null;
export default {
  computed: {
    PRODUCT_DELIVERY_TIME() {
      return PRODUCT_DELIVERY_TIME;
    },
    CUSTOMER_SERVICE_PHONE_NUMBER() {
      return CUSTOMER_SERVICE_PHONE_NUMBER;
    },
    CLOUD_SERVICE_PHONE_NUMBER() {
      return CLOUD_SERVICE_PHONE_NUMBER;
    },
  },
  components: {
    Address,
    SharePopup,
    Evaluation,
    EvaluateDialog,
    MyBtn,
  },
  data() {
    return {
      id: 0,
      shareShow: false,
      addressShow: false, // 收件地址选择
      evaluateDialogShow: false, // 评价弹框显示
      shareOpen: false,
      tuiList: ["破损", "污渍", "划痕", "标签", "其他"],
      swiperList: [],
      currentNum: 0,
      specificationShow: false,
      specificationShowType: "", // 弹框类型
      orderInfo: {},
      specificationList: [], //规格
      selectSpecification: [], // 选择的规格
      specificationTempl: [], // 规格模版数据
      selectSpecificationTempl: {}, // 选择规格模版数据
      selectedSpecValueIds: [],
      skuBySpecKey: {},
      serviceShow: false, // 联系客服弹框
      openShow: false,
      source: null, // 来源：供应链，自营
      isShowCart: 0,
      selectAddress: {}, // 选择的地址
      postage: null, // 邮费
      adressInfo: "",
      urlPath: "",
      posterImage: "",
      canvasId: "default_PosterCanvasId",
      poster: "",
      bgObj: {
        height: 480,
        width: 310,
      },
      draw: null,
      tmpImg: "",
      isShareUrl: false,
      isSplash: false,
      isCoupon: false, // 是否是优惠券商品
      curAmount: 0, // 当前人剩余优惠券金额 
      activedType: "", // 活动类型
      activityId: "", // 秒杀活动ID
      skuBySpecInfo: {},
      detailRich: "",
    };
  },
  onBackPress(options) {
    console.log("我是侧滑", options)
    // #ifdef APP-PLUS
    if (options.from === 'backbutton' && this.isSplash) {
      // 1. 阻止默认 pop
      plus.webview.currentWebview().canBack = false   // 关键句
      uni.reLaunch({ url: '/pages/home/home' })     // 举例：回首页
      return true                                     // 返回 true 即“我处理过了”
    }
    // #endif
  },
  onLoad(options) {
    const id = options.id;
    this.activedType = options.activedType;
    this.activityId = options.activityId;

    this.isCoupon = options.isPar;
    if (this.isCoupon && options.curAmount) {
      this.curAmount = options.curAmount;
    }
    const source = options.source;
    this.isSplash = options.isSplash;
    console.log("isSplash", this.isSplash == "true");

    if (id && id !== 0) {
      this.id = id ? parseInt(id, 10) : 0;
      if (source && source === "supply_chain") {
        this.source = source;
        this.getSupplyChainById();
      } else {
        this.getById();
      }
    }

    // #ifdef H5
    let url = window.location.href;
    if (url.indexOf(SHARE_URL) != -1) {
      this.isShareUrl = true;
    }
    console.log("url", url, SHARE_URL);
    // #endif
    qsc = new QSCanvas(
      {
        canvasId: "myCanvas",
        setCanvasWH: (bg) => {
          this.bgObj = bg;
        },
      },
      this
    );
  },

  onHide() {
    timer && clearTimeout(timer);
    timer = null;
  },
  onUnload() {
    timer && clearTimeout(timer);
    timer = null;
  },
  methods: {
    assembleAddress,
    limit999(n) {
      const num = Number(n);
      if (isNaN(num) || num < 10000) {
        return n != null && n !== '' ? String(n) : '0';
      }
      return `${Math.floor(num / 10000)}万+`;
    },

    onOpenApp() {
      //https://download.tbmall.xin/1002/apppacket/20251113/20251113183449483.apk
      let iphone = this.iosOrAnd();
      window.location = "trustbridgeapp://";
      timer = setTimeout(() => {
        if (timer != null) {
          uni.showModal({
            title: "未成功唤起APP",
            content: "是否前往下载?",
            success: (res) => {
              if (res.confirm) {
                window.open("https://app.tbmall.xin");
              }
            },
          });
        }
      }, 3000);
    },
    iosOrAnd() {
      let userAgent = navigator.userAgent || navigator.vendor || window.opera;
      if (/iPad|iPhone|iPod/.test(userAgent) && !window.MSStream) {
        return "ios";
      }
      if (/Android/.test(userAgent)) {
        return "and";
      }
      return "Other";
    },
    onZiXun() {
      if (this.isShareUrl) {
        return;
      }
      uni.setStorageSync("kefu-pending-context", {
        type: "product",
        data: {
          goodsId: this.id,
          goodsName: this.orderInfo.name,
          goodsMainGraph: this.orderInfo.mainGraph,
          currentPrice: this.orderInfo.adPrice,
        },
      });
      uni.navigateTo({
        url: `/pages/rwa_package/setting/kefu?scene=product&goodsId=${this.id}`,
      });
    },
    getValue,
    onShare(index) {
      let tmp = `【信任桥】消费共享数字化权益　${SHARE_URL}/#/pages/other_package/productInfo/productInfo?id=${this.id}  ${this.orderInfo.name}`;
      if (index == 0) {
        // WXSceneTimeline
        uni.share({
          provider: "weixin",
          scene: "WXSceneSession",
          type: 1,
          summary: tmp,
        });
        this.onClose();
      } else if (index == 1) {
        uni.share({
          provider: "weixin",
          scene: "WXSceneTimeline",
          type: 1,
          summary: tmp,
        });
      } else if (index == 2) {
        this.onClose();
      } else if (index == 3) {
        setTimeout(() => {
          this.onDraw();
        }, 1000);
        this.onClose();
      } else if (index == 4) {
        return func.myToast("暂未开放");
        uni.share({
          provider: "qq",
          type: 1,
          summary: tmp,
        });
      }
    },
    async onDraw() {
      let _this = this;
      try {
        let last;
        // qsc.setRect({ x: 0, y: 0,r:12, height: 960, width: 620});

        qsc.setPaintbrush({
          strokeStyle: "#EBEBEB",
          font: {
            fontSize: 16,
          },
        });
        last = await qsc.drawImg({
          val: "https://static.tbmall.xin/static/new/di.png",
          x: 0,
          y: 0,
          height: 480,
          width: 310,
        });

        last = await qsc.drawImg({
          val: "https://static.tbmall.xin/static/new/logo.png",
          x: 228,
          y: 393,
          height: 62,
          width: 62,
        });

        // last = await qsc.drawImg({
        // 	val:'https://niu8.letaocm.top/17557729915067836.jpg',
        // 	x: 20,
        // 	y: 20,
        // 	height: 270,
        // 	width: 270,
        // })

        // #ifndef H5
        last = await qsc.drawImg({
          val: _this.swiperList[0],
          x: 20,
          y: 20,
          height: 270,
          width: 270,
        });

        // #endif
        qsc.setPaintbrush({
          strokeStyle: "#EBEBEB",
        });
        // { x1: obj.x, y1: y, x2: obj.x + tw, y2: y, style, gap, width, color }
        last = await qsc.drawLine({
          style: "solide",
          x1: 210,
          y1: 313,
          x2: 210,
          y2: 342,
          width: 1,
          gap: 1,
        });

        last = await qsc.drawLine({
          style: "solide",
          x1: 20,
          y1: 368,
          x2: 290,
          y2: 368,
          width: 1,
          gap: 1,
        });

        // last = await qsc.drawImg({
        // 	val:'https://hashmall-prod.oss-cn-shenzhen.aliyuncs.com/1002/image/20250818/20250818134614672.jpg',
        // 	x: 20,
        // 	y: 20,
        // 	height: 270,
        // 	width: 270,
        // })

        last = await qsc.drawText({
          val: this.orderInfo.name,
          x: 20,
          y: 310,
          maxWidth: 180,
          line: 2,
        });

        last = await qsc.drawText({
          val: "1、保存图片到相册",
          x: 93,
          y: 397,
          paintbrushProps: {
            fillStyle: "#7f7f7f",
            font: { fontSize: 12, fontWeight: 400 },
          },
        });

        last = await qsc.drawText({
          val: "2、扫一扫下载信任桥",
          x: 93,
          y: 438,
          paintbrushProps: {
            fillStyle: "#7f7f7f",
            font: { fontSize: 12, fontWeight: 400 },
          },
        });

        last = await qsc.drawText({
          val: "￥" + this.orderInfo.minPrice,
          x: 230,
          y: 317,
          paintbrushProps: {
            fillStyle: "#7A35F6",
            font: { fontSize: 20, fontWeight: 700 },
          },
        });

        last = await qsc.drawQrCode({
          val: `${SHARE_URL}/#/pages/other_package/productInfo/productInfo?id=${this.id}`,
          x: 20,
          y: 391,
          size: 65,
        });

        // await qsc.updateCanvasWH({ width: '300px', height: '960px'})
        await qsc.draw();

        setTimeout(() => {
          uni.canvasToTempFilePath({
            canvasId: "myCanvas",
            success: function (res) {
              const tempFilePath = res.tempFilePath;
              _this.tmpImg = tempFilePath;

              // #ifdef H5
              uni.downloadFile({
                url: tempFilePath,
                success: function () {
                  let link = document.createElement("a");
                  link.href = tempFilePath;
                  link.download = "分享图片";
                  link.click();
                },
                fail: function (err) {
                  uni.showToast({
                    title: "保存失败",
                    icon: "none",
                    duration: 2000,
                  });
                },
              });
              // #endif

              // #ifndef H5
              uni.saveImageToPhotosAlbum({
                filePath: tempFilePath,
                success: function () {
                  uni.showToast({
                    title: "保存成功",
                    icon: "success",
                    duration: 2000,
                  });
                },
                fail: function (err) {
                  console.error("保存失败:", err);
                  uni.showModal({
                    title: "错误",
                    content: "保存图片到相册失败",
                    showCancel: false,
                  });
                },
              });
              // #endif
            },
            fail: function (error) {
              console.error("获取图片失败:", error);
            },
          });
        }, 200);

        // let img = await qsc.toImage({x:0,y:0,width:620,height:960,
        // destWidth:310 * 4,destHeight:480 * 4,fileType:'png'});
        // uni.saveImageToPhotosAlbum({filePath:img});
        // console.log('img',img)
      } catch (e) {
        //TODO handle the exception
        console.log("绘制异常", e);
        uni.showModal({
          content: JSON.stringify(e),
        });
      }
    },
    onClose() {
      this.shareShow = false;
      setTimeout(() => {
        this.shareOpen = false;
      }, 1000);
    },
    onSwiper(index) {
      uni.previewImage({
        current: index,
        loop: true,
        urls: this.swiperList,
      });
    },
    jumpAddAddress() {
      if (this.isShareUrl) {
        return;
      }
      this.addressShow = true;
    },
    // 地址选中
    getAddressValueFunc(item) {
      const addressObj = item;
      addressObj.addressStr = assembleAddress(addressObj).names;
      this.selectAddress = addressObj;
    },
    // 地址类型
    checkAddressShow(status, type, addIndex, index) {
      this.addressShow = status;
      this.addressType = type;
      this.addressIndex = addIndex;
      this.shopsIndex = index;
    },
    // 增加收货地址
    addAdress() {
      uni.navigateTo({
        url:
          "/pages/mine_package/mine_address_add/mine_address_add?detail=" +
          true,
      });
    },
    // 地址选中OK
    async addressOk() {
      console.log("this.selectAddress", this.selectAddress);

      const params = {
        addrId: this.selectAddress.id,
      };
      const resp = await getPostageQuery(params);
      if (resp && resp.bizcode === 100) {
        this.adressInfo =
          this.selectAddress.countryName +
          this.selectAddress.provinceName +
          this.selectAddress.cityName +
          this.selectAddress.address;
        this.addressShow = false;
        this.postage = resp.data;
      }
    },
    copyMobile(mobile) {
      copyData(mobile);
      this.serviceShow = false;
      this.openShow = false;
    },
    jumpLeft() {
      if (this.isSplash == "true") {
        uni.switchTab({ url: "/pages/home/home" });
        return;
      }
      uni.navigateBack({
        delta: 1, // 返回的页面数，默认为1,返回到上一级
      });
    },
    jumpOther(type) {
      if (this.isShareUrl) {
        return;
      }
      if (type === "home") {
        uni.switchTab({
          // 首页
          url: "/pages/home/home",
        });
      } else if (type === "share") {
        // 分享
        uni.navigateTo({
          url: "/pages/other_package/invite_friends/invite_friends",
        });
      } else if (type === "cart") {
        // 购物车
        uni.switchTab({
          url: "/pages/shopping_cart/shopping_cart",
        });
      }
    },
    /**
     * 查询详细内容
     */
    async getById() {
      const params = {
        id: this.id,
      };
      if (this.isCoupon) {
        params.type = -1;
      }
      if (this.activedType === 'seckill') {
        params.activityId = this.activityId;
        params.activityType = 'seckill';
      }
      const resp = await getGoodsDetail(params);
      if (resp && resp.bizcode === 100) {
        const data = resp.data;
        // 限时秒杀 和 积分兑换 不需要购物车

        //限时秒杀现在要改为展示购物车icon
        this.isShowCart = this.activedType === 'seckill' || data.type == 3 ? 1 : 0;
        // 商品图
        if (data.goodsGraph) {
          this.swiperList = data.goodsGraph.split(",");
        }
        data.addressObj = {}; // 收件人地址
        data.quantity = 1; // 数量
        data.inventory = 0; // 库存
        if (this.activedType === 'seckill') {
          data.minPrice = data.activity?.activityPrice;
        }

        console.log("查询详细内容---", data)
        this.orderInfo = data;
        this.detailRich = this.orderInfo.detailInfo.replace(
          /<img([^>]*?)>/gi,
          '<img$1 style="max-width:100%;height:auto;display:block;">'
        );

      }
    },
    /**
     * 来自商城的订单
     */
    getSupplyChainById() {
      const params = {
        goods_id: this.id,
        app_id: "2024111300164927",
        sign_type: "MD5",
        sign: "d04be0cedd49608e758458325faecf90",
      };
      uni.request({
        url: "https://cyysc.gscm.top/outside/1/atm/goods/detail",
        method: "get",
        data: params,
        header: {},
        success: (res) => {
          const data = res.data;
          if (data && data.result === 1) {
            const objData = data.data;
            const content = objData.content
              .replace(/&amp;/g, "&")
              .replace(/&lt;/g, "<")
              .replace(/&gt;/g, ">")
              .replace(/&quot;/g, "'")
              .replace(/&#39;/g, '"')
              .replace(/\n/g, "<br>");
            const orderInfo = {
              detailInfo: content,
              minPrice: objData.min_price,
              // maxPrice:objData.max_price,
              adPrice: objData.price,
              sales: objData.virtual_sales,
            };
            const domain = "https://cyysc.gscm.top";
            let currentThumb = objData.thumb;
            if (
              objData.thumb.indexOf("https://") === -1 &&
              objData.thumb.indexOf("http://") === -1
            ) {
              currentThumb = domain + "/static/upload/" + objData.thumb;
            }
            this.swiperList = [currentThumb]; // 封面图
            this.orderInfo = orderInfo;
          }
        },
        fail: (error) => {
          console.log("error", error);
        },
      });
    },
    async checkSpecification(val, type) {
      if (this.isShareUrl) {
        return;
      }
      const source = this.source;
      if (type == "n" && (this.isShowCart == 1 || this.isCoupon)) {
        type = "buy";
      }
      console.log("afsdfsd", source, type);
      if (source && source === "supply_chain") {
        this.openShow = true;
        return;
      }
      // 需要查询一下最新的规格
      if (val) {
        const hasStructuredSpecs = await this.querySpecification();
        if (!hasStructuredSpecs) {
          uni.showToast({ title: "SKU规格加载失败，请稍后重试", icon: "none" });
          return;
        }
      } else {
        this.specificationList = []; //规格
        this.selectSpecification = []; // 选择的规格
        this.specificationTempl = []; // 规格模版数据
      }
      this.specificationShow = val;
      this.specificationShowType = type;
    },
    // 获取规格模版数据
    async querySpecification() {
      let infoResp = null;
      const params = {
        id: this.id,
      };
      if (this.isCoupon) {
        params.type = -1;
      }
      if (this.activedType === 'seckill') {
        params.activityId = this.activityId;
        params.activityType = 'seckill';
      }
      try {
        infoResp = await getGoodsSpecsInfo(params);
      } catch (e) {
        return false;
      }
      if (!infoResp || infoResp.bizcode !== 100 || !infoResp.data) {
        return false;
      }
      const groups = infoResp.data.specGroups || [];
      const skus = infoResp.data.skus || [];
      if (!groups.length || !skus.length) {
        return false;
      }

      const skuBySpecKey = {};
      skus.forEach((sku) => {
        const valueIds = this.getSkuValueIds(sku, groups);
        if (valueIds.length !== groups.length) {
          return;
        }
        const normalizedSku = Object.assign({}, sku, {
          id: sku.id,
          valueIds,
          minBuyNum: sku.minBuyNum || 1,
          combTypes: this.formatSkuSelection(groups, valueIds),
        });
        skuBySpecKey[valueIds.join("_")] = normalizedSku;
      });
      if (!Object.keys(skuBySpecKey).length) {
        return false;
      }

      this.skuBySpecKey = skuBySpecKey;
      this.specificationTempl = Object.keys(skuBySpecKey).map((key) => skuBySpecKey[key]);
      this.orderInfo.inventory = this.specificationTempl.reduce(
        (total, sku) => total + Number(sku.stock || 0),
        0
      );
      this.selectedSpecValueIds = groups.map(() => null);
      this.selectSpecification = groups.map(() => null);
      this.selectSpecificationTempl = {};
      this.specificationList = groups.map((group) => ({
        id: group.id,
        type: group.name,
        selectVal: null,
        items: (group.values || []).map((value) => ({
          id: value.id,
          groupId: group.id,
          n: value.name,
          image: value.image,
          disabled: false,
        })),
      }));
      this.refreshSpecOptionState();
      // 默认选中每组规格的第一个可用选项（若均无可用则选中第一个选项）
      this.specificationList.forEach((group, groupIndex) => {
        const defaultItem = group.items.find((item) => !item.disabled) || group.items[0];
        if (defaultItem) {
          this.clickSpecification(groupIndex, group, defaultItem);
        }
      });
      return true;
    },

    getSkuValueIds(sku, groups) {
      if (sku.specValueIds) {
        try {
          const ids = JSON.parse(sku.specValueIds);
          if (Array.isArray(ids)) {
            return ids.map((id) => Number(id));
          }
        } catch (e) { }
      }
      let path = {};
      try {
        path = JSON.parse(sku.specValuePath || "{}") || {};
      } catch (e) { }
      const legacyValues = String(path.legacyName || "")
        .split(/\s*(?:\/|♧)\s*/)
        .filter(Boolean);
      return groups.map((group, index) => {
        const selectedName = path[group.name] || legacyValues[index];
        const value = (group.values || []).find((item) => item.name === selectedName);
        return value ? Number(value.id) : null;
      }).filter((id) => id !== null);
    },

    formatSkuSelection(groups, valueIds) {
      return groups.map((group, index) => {
        const value = (group.values || []).find((item) => Number(item.id) === Number(valueIds[index]));
        return value ? `${group.name}:${value.name}` : "";
      }).filter(Boolean).join(";");
    },

    refreshSpecOptionState() {
      this.specificationList.forEach((group, groupIndex) => {
        group.items.forEach((value) => {
          const candidate = this.selectedSpecValueIds.slice();
          candidate[groupIndex] = Number(value.id);
          value.disabled = !Object.keys(this.skuBySpecKey).some((key) => {
            const sku = this.skuBySpecKey[key];
            const skuIds = sku.valueIds || [];
            return candidate.every((selectedId, index) =>
              selectedId == null || Number(skuIds[index]) === Number(selectedId)
            ) && Number(sku.stock || 0) > 0;
          });
        });
      });
    },
    //改变规格的样式
    clickSpecification(groupIndex, item, oItem) {
      console.log(
        "改变规格的样式",
        groupIndex,
        item,
        oItem,
        this.specificationTempl,
        this.specificationList
      );

      if (oItem.disabled) {
        return;
      }
      this.selectedSpecValueIds.splice(groupIndex, 1, Number(oItem.id));
      this.selectSpecification.splice(groupIndex, 1, oItem.n);
      this.specificationList[groupIndex].selectVal = oItem.n;
      this.refreshSpecOptionState();

      const skuBySpecBash = this.getSkuBySpecValueIds(this.selectedSpecValueIds) || {};
      console.log("----111", skuBySpecBash)

      this.skuBySpecInfo = { ...this.orderInfo, skuImage: skuBySpecBash.skuImage, stock: skuBySpecBash.stock, supplyPrice: skuBySpecBash.supplyPrice, price: skuBySpecBash.price, skuName: skuBySpecBash.skuName }
      console.log("----222", this.orderInfo)

      if (this.selectedSpecValueIds.every((id) => id != null)) {
        const currentSelectSpecification = this.skuBySpecKey[this.selectedSpecValueIds.join("_")] || {};
        this.selectSpecificationTempl = currentSelectSpecification;
        this.orderInfo.quantity = currentSelectSpecification.minBuyNum || 1;
        this.orderInfo.inventory = currentSelectSpecification.stock || 0;
      } else {
        this.selectSpecificationTempl = {};
      }
    },
    // 根据规格 ID 数组（如 [颜色id, 尺码id] -> [146913, 146916]）获取单条 SKU 对象
    getSkuBySpecValueIds(specValueIds) {
      if (!specValueIds || !specValueIds.length) return null;
      // 方式一：直接通过预先拼接的 key ("146913_146916") 获取 (O(1))
      const key = specValueIds.join("_");
      if (this.skuBySpecKey && this.skuBySpecKey[key]) {
        return this.skuBySpecKey[key];
      }
      // 方式二：在 specificationTempl (skus) 数组中按 specValueIds 检索匹配
      return (this.specificationTempl || []).find((sku) => {
        const ids = sku.valueIds || JSON.parse(sku.specValueIds || "[]");
        return specValueIds.every((id) => ids.map(Number).includes(Number(id)));
      }) || null;
    },
    // 选择规格
    selectSpecificationFun(index, item) {
      console.log("selectSpecificationTempl");
      const currentSelectSpecification = this.selectSpecification;
      currentSelectSpecification[index] = item.n;
      this.selectSpecification = currentSelectSpecification;
      const oldLength = this.specificationList.length;
      const newLength = this.selectSpecification.length;
      // 开始做校验
      if (oldLength === newLength) {
        const newLengthStr = this.selectSpecification.join("♧");
        const specificationTempl = this.specificationTempl;
        let selectTempl = {};
        specificationTempl.map((item) => {
          if (item.combNames === newLengthStr) {
            selectTempl = item;
            return;
          }
        });
        this.selectSpecificationTempl = selectTempl;
        this.orderInfo.inventory = selectTempl.stock; // 库存
      }
    },
    // 改变数量
    quantityFun(type) {
      let currentQuantity = this.orderInfo.quantity; // 当前数量
      const minBuyNum = this.selectSpecificationTempl.minBuyNum || 1; // 当前起订量，默认为1
      console.log(" 当前起订量，默认为1", currentQuantity, minBuyNum);

      // 确保起订量至少为1
      const step = Math.max(minBuyNum, 1);
      if (type === "minus") {
        // 计算减少后的数量，确保不低于最小起订量且是其倍数
        const newQuantity = currentQuantity - step;
        if (newQuantity < minBuyNum) {
          this.$refs.uToastRef.show({
            type: "error",
            message: `不能低于最低购买数量${minBuyNum}`,
          });
        } else {
          currentQuantity = newQuantity;
        }
      } else if (type === "add") {
        currentQuantity = currentQuantity + step;
      }

      this.orderInfo.quantity = currentQuantity;
    },

    // 加入购入车
    async addCart(isBy = false) {
      const selectTempl = this.selectSpecificationTempl;
      if (!selectTempl || Object.keys(selectTempl).length === 0) {
        uni.showToast({
          title: "请先选择规格",
          icon: "none", // 可选 success/loading/none
          duration: 2000, // 持续时长，单位ms
        });
        return;
      }
      if (
        !(
          selectTempl.minBuyNum > 0 &&
          this.orderInfo.quantity >= selectTempl.minBuyNum &&
          this.orderInfo.quantity % selectTempl.minBuyNum === 0
        )
      ) {
        uni.showToast({
          title: `购买数量需要大于等于起订量${selectTempl.minBuyNum}`,
          icon: "none", // 可选 success/loading/none
          duration: 2000, // 持续时长，单位ms
        });
        return;
      }
      const params = {
        id: this.id,
        specsId: selectTempl.id, // 规格ID
        goodsNum: this.orderInfo.quantity, // 商品数量 
      };

      console.log("selectTempl", selectTempl);
      if (this.isShowCart == 1 || this.isCoupon || isBy) {
        console.log("活动类型params---秦星星", params, this.isCoupon);
        params["specsId"] = selectTempl;
        let url = "";
        if (this.activedType == "seckill") {
          params["activedType"] = this.activedType; // 活动类型
          params["activityId"] = this.activityId;// 秒杀活动ID
          url = `/pages/order_package/order_submit/order_submit?sed=${JSON.stringify(
            params
          )}`;
        }

        if (this.isCoupon) {
          url = `/pages/order_package/order_submit/order_submit?sed=${JSON.stringify(
            params
          )}&address=${this.selectAddress?.id}&isCoupon=${this.isCoupon}`
        }

        if (!url) {
          url = `/pages/order_package/order_submit/order_submit?sed=${JSON.stringify(
            params
          )}&address=${this.selectAddress?.id}`;
          this.specificationShow = false;
        }

        uni.navigateTo({
          url: url
        });
        return;
      }
      const resp = await addGoods(params);
      if (resp && resp.bizcode === 100) {
        this.specificationShow = false;
        uni.showToast({
          title: "成功加入购物车",
          icon: "success", // 可选 success/loading/none
          duration: 2000, // 持续时长，单位ms
        });
      }
    },
    // 跳转到分享页面
    jumpShare() {
      console.log("jumpShare");
      this.shareOpen = true;
      this.shareShow = true;
    },
    // 查看全部评价
    onGoMore() {
      this.evaluateDialogShow = true;
    },
  },
};
</script>

<style lang="scss" scoped>
.border-16 {
  border-radius: 16rpx !important;
}

.product_info_warp {
  min-height: 100vh;
  background-color: $app-bj;
  padding-bottom: calc(160rpx + env(safe-area-inset-bottom) + 20rpx);
  box-sizing: border-box;
}

.product_info_header_warp {
  position: relative;

  .product_info_header_swiper {
    height: 800rpx !important;

    .u-swiper {
      height: 800rpx !important;
    }

    ::v-deep(.u-swiper__wrapper) {
      height: 800rpx !important;

      .u-swiper__wrapper {
        height: 800rpx !important;

        .u-swiper__wrapper__item__wrapper__image {
          height: 800rpx !important;
        }
      }
    }
  }

  .img_comm {
    position: absolute;
    top: 140rpx;
  }

  .left_warp {
    left: 40rpx;
  }

  .right_warp {
    right: 40rpx;
  }
}

.product_content_warp {
  // background: linear-gradient(0deg, #F9F9F9 0%, #FFFFFF 100%);
  border-radius: 30rpx 30rpx 0rpx 24rpx;
  padding: 20rpx;

  .content_data {
    padding: 20rpx;
  }

  .content_data_price {
    font-weight: bold;
    font-size: 36rpx;
    color: $app-bt-bj;

    .price_o {
      font-weight: 500;
      font-size: 26rpx;
      color: #999999;
      text-decoration-line: line-through;
      margin-left: 10rpx;
    }

    &.buy_deduction {
      width: 100%;
      display: flex;
      justify-content: space-between;

      .buy_deduction_value {
        font-weight: 500;
        font-size: 26rpx;
        color: #7A35F6;
        margin-left: 10rpx;
      }

      .buy_deduction_label {
        font-size: 24rpx;
        color: #E88900;
      }
    }
  }

  .content_data_title {
    font-weight: bold;
    font-size: 36rpx;
    color: #111111;
    margin-top: 10rpx;
  }

  .content_data_series {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 500;
    font-size: 24rpx;
    color: #999999;
    margin-top: 10rpx;

    .content_data_series_tag {
      font-weight: 500;
      font-size: 24rpx;
      height: 45rpx;
      color: #7934F6;
      padding: 0 12rpx;
      border-radius: 8rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(121, 52, 246, 0.1);

      .uni-image {
        width: 40rpx;
        height: 28rpx;
      }
    }
  }

  .tui-view {
    width: 100%;
    height: 286rpx;
    min-height: 286rpx;
    background-color: #fff;
    border-radius: 24rpx;
    display: flex;
    flex-direction: column;
    padding: 32rpx;
    box-sizing: border-box;
    margin-top: 24rpx;

    .tui-list {
      width: 100%;
      height: 104rpx;
      min-height: 104rpx;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      margin-top: 24rpx;

      .tui-box {
        width: 64rpx;
        min-height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;

        image {
          width: 64rpx;
          height: 64rpx;
        }
      }
    }
  }

  .content_concrete {
    padding: 20rpx;
    background: #ffffff;
    border-radius: 30rpx;
    margin-top: 20rpx;

    .concrete_item {
      display: flex;
      justify-content: space-between;
      font-size: 28rpx;
      padding: 20rpx 0;
    }

    .concrete_item_ {
      display: flex;
      width: 100%;
    }

    .concrete_item_but {
      border-bottom: 1rpx solid #eeeeeeff;
    }

    .concrete_item_title {
      color: #808080;
      width: 140rpx;
    }

    .concrete_item_value {
      font-weight: 500;
      color: #1a1a1a;
      width: calc(100% - 140rpx);

      .address_warp {
        display: flex;
        margin-bottom: 10rpx;
      }

      .address_72_warp {
        font-size: 24rpx;
        color: #808080;
      }
    }

    .concrete_item_bz {
      display: flex;
    }

    .concrete_item_bz_item {
      margin-right: 20rpx;
    }

    .concrete_item_bz_item_left {
      margin-left: 10rpx;
    }
  }
}

.content_details {
  background: #ffffff;
  border-radius: 24rpx;
  padding: 10rpx 10rpx 30rpx;
  margin-top: 30rpx;
  // margin-bottom: 200rpx;


  .content_details_title {
    padding: 20rpx 30rpx;
  }

  .content_details_content {
    rich-text {
      width: 700rpx;
    }
  }

  img,
  img[alt] {
    max-width: 100%;
  }
}

.product_but_warp {
  padding: 20rpx 20rpx calc(20rpx + env(safe-area-inset-bottom));
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: calc(160rpx + env(safe-area-inset-bottom));
  background-color: #ffffff;
  display: flex;
  justify-content: space-between;
  box-sizing: border-box;
  z-index: 99;

  .product_but_left {
    display: flex;
    justify-content: space-between;
    // width: 225rpx;
    margin-top: 6rpx;

    .left_item {
      // width: 50%;
      width: 78rpx;
      text-align: center;
      font-weight: 500;
      font-size: 20rpx;
      color: #666666;
    }
  }
}

.product_but_right {
  display: flex;
  justify-content: end;
  flex: 1;

  .but_comm {
    text-align: center;
    padding: 20rpx 30rpx;
    color: #ffffff;
    height: 46rpx;
    font-size: 32rpx;
    line-height: 46rpx;
  }

  .join_warp {
    background: #e4d6fd;
    border-radius: 16rpx 0rpx 0rpx 16rpx;
    color: $app-zt-color;
  }

  .buy_warp {
    background: $app-bt-bj;
    border-radius: 0rpx 16rpx 16rpx 0rpx;
  }
}

.specification_warp {
  background-color: $app-bj;

  .specification_adress_warp {
    padding: 30rpx;
    background: #ffffff;
    border-radius: 24rpx;
  }

  .specification_adress_msg {
    text-align: center;
    font-weight: 500;
    font-size: 24rpx;
    color: #808080;
    margin: 0 10rpx 0 20rpx;
  }

  .specification_adress_arr {
    display: flex;
    align-items: center;
    margin-top: 20rpx;
  }

  .address_title {
    font-weight: 500;
    font-size: 26rpx;
    color: #bbbbbb;
    margin-bottom: 10rpx;
    margin-right: 20rpx;
    width: 592rpx;
    white-space: nowrap;
    /* 防止文本换行 */
    overflow: hidden;
    /* 隐藏溢出的文本 */
    text-overflow: ellipsis;
    /* 使用省略号表示溢出的内容 */
  }

  .address_title_sel {
    color: #333333;
  }

  .specification_product_warp {
    display: flex;
    background: #ffffff;
    border-radius: 24rpx;
    padding: 30rpx;
    margin-top: 20rpx;

    .product_content {
      margin-left: 10rpx;
      // display: grid;
    }

    .price_content_warp {
      // font-weight: bold;
      font-size: 36rpx;
      color: $app-bt-bj;
      display: flex;
      align-items: center;
    }

    .price_content_coupon_warp {
      margin-left: 20rpx;
      padding: 4rpx 10rpx;
      text-align: center;
      color: $app-bt-bj;
      font-size: 22rpx;
      font-weight: 500;
      border: 1px solid $app-bt-bj;
      border-radius: 6rpx;
    }

    .oOrice_content_warp {
      font-size: 26rpx;
      color: #808080;
      line-height: 11rpx;
      text-decoration-line: line-through;
      margin-top: 10rpx;
    }

    .coupon_content_warp {
      font-weight: 500;
      font-size: 22rpx;
      color: $app-bt-bj;
      margin-top: 10rpx;
    }

    .coupon_content_stock {
      display: flex;
      font-size: 22rpx;
      color: #808080;
      margin-top: 10rpx;
    }

    .inventory_warp {
      display: flex;
      font-size: 24rpx;
      color: #808080;
      margin-top: 16rpx;
    }
  }

  .specification_list_warp {
    background: #ffffff;
    border-radius: 24rpx;
    padding: 30rpx;
    margin-top: 20rpx;

    .list_warp {
      margin-bottom: 30rpx;
    }

    .list_title_warp {
      font-weight: 500;
      font-size: 30rpx;
      color: #1a1a1a;
      line-height: 48rpx;
    }

    .specification_item_warp {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20rpx 24rpx;
      margin-top: 16rpx;
    }

    .item_Warp {
      width: 100%;
      min-width: 0;
      box-sizing: border-box;
      padding: 0 12rpx;
      background: $app-bj;
      border-radius: 10rpx;
      color: #333333;
      text-align: center;
      font-size: 26rpx;
      font-weight: 500;
      height: 56rpx;
      line-height: 54rpx;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      border: 1px solid transparent;
    }

    .item_Warp_no_warp {
      background: #f5f5f5;
      color: #999999;
      text-decoration-line: line-through;
      border-color: transparent;
    }

    .item_Warp_yes_warp {
      border-color: $app-bt-bj;
      color: $app-bt-bj;
      background: rgba(121, 52, 246, 0.1);
    }
  }

  .specification_but {
    background: #ffffff;
    border-radius: 24rpx;
    padding: 30rpx;
    margin-top: 30rpx;

    .specification_buy {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 30rpx;
    }

    .specification_buy_but {
      width: 100%;
      padding: 20rpx 0;
      text-align: center;
      background-color: $app-bt-bj;
      color: #ffffff;
      margin-top: 20rpx;
      font-weight: 500;
      font-size: 28rpx;
      color: #ffffff;
      border-radius: 16rpx;
    }
  }
}

.popup_buts {
  background-color: #ffffff;

  .but_comm {
    width: 40%;
  }
}

.open_Show {

  /* 弹出层形式的广告 */
  .uni-banner {
    display: flex;
    align-items: center;
    flex-direction: column;
    position: fixed;
    left: 50%;
    top: 50%;
    z-index: 1000;
    transform: translate(-50%, -50%);
    width: 80%;
    background-image: url("data:image/png;base64,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
    background-size: 100% 100%;
    background-position: center;
    /* 将图片居中显示 */
    height: 746rpx;
  }

  .banner_box {
    margin-top: 140rpx;
    padding: 40rpx;
    width: 88%;
  }

  .title_ {
    font-size: 62rpx;
    color: rgba(0, 0, 0, 0.9);
    margin-top: 30rpx;
  }

  .msg_ {
    font-size: 32rpx;
    color: rgba(0, 0, 0, 0.9);
    line-height: 42rpx;
    text-align: center;
    margin-top: 50rpx;
  }

  .phone_ {
    background: rgba(216, 216, 216, 0.16);
    border-radius: 15rpx;
    text-align: center;
    width: 100%;
    padding: 20rpx 0;
    margin-top: 50rpx;
  }

  .but_ {
    display: flex;
    justify-content: center;
    margin-top: 50rpx;

    .but_b {
      background: #03ad27;
      border-radius: 41rpx;
      font-size: 32rpx;
      color: #ffffff;
      width: 70%;
      text-align: center;
      padding: 20rpx 0;
    }
  }
}

.hideCanvasView {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 10000px;
  left: 10000px;
  z-index: 1000000000000;
  // background-color: rgba(0,0,0,0.2);
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>