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

<template>
  <view class="product_info_warp">
    <!-- 头部产品描述图 -->
    <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"
          @click="jumpLeft"
        ></up-image>
      </view>
      <view class="img_comm right_warp">
        <up-image
          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">
            <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; width: 120rpx; height: 38rpx"
            v-if="orderInfo.tag"
          >
            <image
              src="/static/shopping/tg.png"
              style="width: 120rpx; height: 38rpx"
            ></image>
          </view>
        </view>
        <view class="content_data_title">
          {{ orderInfo.name }}
        </view>
        <view class="content_data_series">
          <!-- 暂时隐藏 -->
          <view></view>
          <!-- 销量还需要改 -->
          <view>销量{{ 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>
          <!-- <up-image src="/static/common/right.png" width="20" height="20" bgColor="#f1f6ff00"></up-image> -->
        </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>

      <!-- 商品详情 -->
      <view class="content_details">
        <view class="content_details_title">商品详情</view>
        <view v-html="orderInfo.detailInfo"></view>
      </view>
    </view>

    <!-- 底部编辑按钮 -->
    <view class="product_but_warp">
      <view class="product_but_left">
        <view class="left_item">
          <up-image
            src="/static/product/home.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" v-if="!ji">
          <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">
        <view
          v-if="!ji"
          class="but_comm join_warp"
          @click="checkSpecification(true, 'addCart')"
          >加入购物车</view
        >
        <view
          class="but_comm buy_warp"
          :class="{ 'border-16': ji }"
          @click="checkSpecification(true, 'buy')"
          >立即购买</view
        >
      </view>
    </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="orderInfo.mainGraph"
            width="100"
            height="100"
            bgColor="#f1f6ff00"
          ></up-image>
          <view class="product_content">
            <view class="price_warp">
              <view class="price_content_warp">
                <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>
                  {{ orderInfo.minPrice }}
                  <text v-if="orderInfo.maxPrice"
                    >- {{ orderInfo.maxPrice }}</text
                  >
                </view>
                <view
                  class="price_content_coupon_warp"
                  v-if="orderInfo.couponPrice && orderInfo.couponPrice !== 0"
                  >优惠卷{{ orderInfo.couponPrice }}</view
                >
              </view>
              <view class="oOrice_content_warp">￥{{ orderInfo.adPrice }}</view>
              <view
                class="coupon_content_warp"
                v-if="orderInfo.couponPrice && orderInfo.couponPrice !== 0"
                >优惠卷已优惠￥{{ orderInfo.couponPrice }}</view
              >
            </view>
            <view class="inventory_warp">
              <view>库存</view>
              <view>{{ orderInfo.inventory || 0 }}件</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 }}</view>
            <view class="specification_item_warp">
              <view
                :class="
                  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.n"
                @click="clickSpecification(oIndex, 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>
  </view>
</template>

<script>
import { getGoodsDetail, addGoods, getGoodsSpecs } from "@/api/product.js";
import { getValue, PRODUCT_DELIVERY_TIME } from "@/utils/enumUtils.js";
import { copyData } from "@/utils/index.js";
import { getPostageQuery } from "@/api/cart.js";
import { assembleAddress } from "@/utils/index.js";
import Address from "@/components/address.vue";
import {
  CUSTOMER_SERVICE_PHONE_NUMBER,
  CLOUD_SERVICE_PHONE_NUMBER,
} from "@/utils/config.js";

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,
  },
  data() {
    return {
      id: 0,
      addressShow: false, // 收件地址选择
      swiperList: [],
      currentNum: 0,
      specificationShow: false,
      specificationShowType: "", // 弹框类型
      orderInfo: {},
      specificationList: [], //规格
      selectSpecification: [], // 选择的规格
      specificationTempl: [], // 规格模版数据
      selectSpecificationTempl: {}, // 选择规格模版数据
      serviceShow: false, // 联系客服弹框
      openShow: false,
      source: null, // 来源：供应链，自营
      ji: 0,
      selectAddress: {}, // 选择的地址
      postage: null, // 邮费
      adressInfo: "",
    };
  },
  onLoad(options) {
    const id = options.id;
    const source = options.source;

    if (id && id !== 0) {
      this.id = id ? parseInt(id, 10) : 0;
      if (source && source === "supply_chain") {
        this.source = source;
        this.getSupplyChainById();
      } else {
        this.getById();
      }
    }
  },
  methods: {
    assembleAddress,
    onZiXun() {
      uni.navigateTo({
        url: "/pages/rwa_package/setting/kefu?type=5260",
      });
    },
    getValue,
    onSwiper(index) {
      uni.previewImage({
        current: index,
        loop: true,
        urls: this.swiperList,
      });
    },
    jumpAddAddress() {
      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() {
      uni.navigateBack({
        delta: 1, // 返回的页面数，默认为1,返回到上一级
      });
    },
    jumpOther(type) {
      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,
      };
      const resp = await getGoodsDetail(params);
      if (resp && resp.bizcode === 100) {
        const data = resp.data;
        this.ji = data.type == 3 ? 1 : 0;
        // 商品图
        if (data.goodsGraph) {
          this.swiperList = data.goodsGraph.split(",");
        }
        data.addressObj = {}; // 收件人地址
        data.quantity = 1; // 数量
        data.inventory = 0; // 库存
        this.orderInfo = data;
      }
    },
    /**
     * 来自商城的订单
     */
    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) {
      const source = this.source;
      if (type == "n" && this.ji == 1) {
        type = "buy";
      }
      console.log("afsdfsd", source, type);
      if (source && source === "supply_chain") {
        this.openShow = true;
        return;
      }
      // 需要查询一下最新的规格
      if (val) {
        await this.querySpecification();
        const data = this.orderInfo;
        this.getSpecification(data.specs);
      } else {
        this.specificationList = []; //规格
        this.selectSpecification = []; // 选择的规格
        this.specificationTempl = []; // 规格模版数据
      }
      this.specificationShow = val;
      this.specificationShowType = type;
    },
    // 拆解规格
    getSpecification(specs) {
      const optionArr = [];
      if (specs) {
        const arr = JSON.parse(specs);
        arr.map((item) => {
          optionArr.push({
            type: item.type,
            items: item.items,
            selectVal: null,
          });
        });
      }
      this.specificationList = optionArr;
    },
    // 获取规格模版数据
    async querySpecification() {
      const params = {
        id: this.id,
      };
      const resp = await getGoodsSpecs(params);
      if (resp && resp.bizcode === 100) {
        const data = resp.data;
        let stock = 0;
        data.map((item) => {
          stock = stock + item.stock;
        });
        this.specificationTempl = data;
        this.orderInfo.inventory = stock; // 库存
      }
    },
    //改变规格的样式
    clickSpecification(pIndex, item, oItem) {
      console.log(
        "改变规格的样式",
        pIndex,
        item,
        oItem,
        this.specificationTempl,
        this.specificationList
      );

      const currentSelectSpecification = this.specificationTempl[pIndex];

      console.log("当前规格", currentSelectSpecification);
      this.orderInfo.quantity = currentSelectSpecification?.minBuyNum || 1;

      this.specificationList[0].selectVal = oItem.n;

      this.selectSpecificationTempl = currentSelectSpecification;
      this.orderInfo.inventory = currentSelectSpecification.stock; // 库存
      // 计算规格的价格
      // this.selectSpecificationFun(pIndex, oItem);
    },
    // 选择规格
    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.ji == 1) {
        params["specsId"] = selectTempl;
        uni.navigateTo({
          url: `/pages/order_package/order_submit/order_submit?sed=${JSON.stringify(
            params
          )}&address=${this.selectAddress?.id}`,
        });
        return;
      }
      const resp = await addGoods(params);
      if (resp && resp.bizcode === 100) {
        if (isBy) {
          uni.navigateTo({
            url: `/pages/order_package/order_submit/order_submit?ids=${resp.data}&address=${this.selectAddress?.id}`,
          });
        } else {
          this.specificationShow = false;
          uni.showToast({
            title: "成功加入购物车",
            icon: "success", // 可选 success/loading/none
            duration: 2000, // 持续时长，单位ms
          });
        }
        // setTimeout(() => {
        // 	this.checkSpecification(false, null);
        // }, 2000)
      }
    },
    // 跳转到分享页面
    jumpShare() {},
  },
};
</script>

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

.product_info_warp {
  height: calc(100vh - 196rpx);
  background-color: $app-bj;
}

.product_info_header_warp {
  position: relative;

  // .product_info_header_swiper {
  // 	height: 562.5rpx !important;

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

  // 		.u-swiper__wrapper {
  // 			height: 562.5rpx !important;

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

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

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

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

.product_but_warp {
  padding: 20rpx;
  position: fixed;
  bottom: 0;
  height: 160rpx;
  width: calc(100% - 40rpx);
  background-color: #ffffff;
  display: flex;
  justify-content: space-between;

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

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

.product_but_right {
  display: flex;
  justify-content: center;

  .but_comm {
    text-align: center;
    padding: 20rpx 40rpx;
    color: #ffffff;
    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;
    }

    .inventory_warp {
      display: flex;
      font-weight: 500;
      font-size: 24rpx;
      color: #808080;
    }
  }

  .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: flex;
      justify-content: space-between;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
    }

    .item_Warp {
      width: 48%;
      background: $app-bj;
      border-radius: 10rpx;
      color: #333333;
      text-align: center;
      padding: 10rpx 0;
      margin-top: 13rpx;
      font-size: 26rpx;
      font-weight: 500;
    }

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

    .item_Warp_yes_warp {
      border: 1px solid $app-bt-bj;
      color: $app-bt-bj;
      background: #ffffff;
    }
  }

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