web-base-pc/src/views/goodsDetails/index.vue

<template>
  <div class="contain" ref="box" v-loading="isLoading">
    <!-- 用户头 -->
    <personInfo></personInfo>
    <Sidebar
      :showCar="true"
      @showCar="showCar"
      @showShare="showShare"
      ref="sideBar"
    ></Sidebar>
    <div class="product-body">
      <div class="product-container">
        <!-- 面包屑 -->
        <div class="mianbao">
          <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item
              v-if="specialArea != 18 && specialArea != 19"
              :to="{ path: '/shoppingMall?id=' + specialArea }"
              >{{ labelName }}</el-breadcrumb-item
            >
            <el-breadcrumb-item v-else :to="{ path: '/spaceMallList' }">{{
              labelName
            }}</el-breadcrumb-item>
            <el-breadcrumb-item>商品详情</el-breadcrumb-item>
          </el-breadcrumb>
        </div>
        <div class="details_t">
          <!-- 轮播图 -->
          <Swiper :mainImgUrls="mainImgUrl" :imgUrlLists="imgUrlList"></Swiper>
          <!-- 商品信息 -->
          <div class="details_c">
            <div class="dis_flex">
              <div class="qzbq" v-if="goodDetail.prefixLabelTarget">
                [{{ goodDetail.prefixLabelTarget.label }}]
              </div>
              <div class="c_tit1">
                {{ goodDetail.waresName }}
              </div>
            </div>

            <div class="c_hui">{{ goodDetail.sellingPoints }}</div>

            <div class="c_bai">
              <div class="dis_flex jusc" v-if="goodDetail.preSaleStatus == 1">
                <div class="dis_flex">
                  <img src="@/assets/images/clock.png" alt="" />
                  <div>预计发货</div>
                </div>
                <div class="dis_flex jusc_r">
                  <div>剩余时间:</div>
                  <div class="jusc_ri">{{ countDown }}</div>
                </div>
              </div>
              <div class="c_bai_b">
                <div class="dis_flex just">
                  <div class="dis_flex">
                    <div class="goods-price">
                      {{ userInfo.currencyIcon
                      }}{{ goodDetail.goodsPrice | toThousandthAndKeepDecimal }}
                    </div>
                    <!-- <div class="tit6"   v-show="
                    goodDetail.specialArea == 31">
                  统一零售价:{{ userInfo.currencyIcon
                  }}{{ goodDetail.retailPrice | toThousandthAndKeepDecimal }}
                </div> -->
                  </div>
                  <div class="tit7">累计销售</div>
                </div>
                <div class="dis_flex just m10">
                  <div class="tit4 dis_flex">
                    <div
                      v-show="
                        goodDetail.specialArea != 13 &&
                        goodDetail.specialArea != 31 &&
                        goodDetail.specialArea != 10
                      "
                      style="margin-right: 20px"
                    >
                      业绩:{{
                        goodDetail.goodsAchive | toThousandthAndKeepDecimal
                      }}
                    </div>
                    <div
                      v-show="
                        goodDetail.specialArea == 31 &&
                        userInfo.isMakerSpace == 0
                      "
                      style="margin-right: 20px"
                    >
                      {{ "业绩" }}:{{
                        goodDetail.goodsAchive | toThousandthAndKeepDecimal
                      }}
                    </div>
                    <div
                      v-show="
                        goodDetail.specialArea == 10 ||
                        goodDetail.specialArea == 11
                      "
                    >
                      {{ "积分可抵扣" }}:{{
                        goodDetail.deductMoney | numberToCurrency
                      }}
                    </div>
                    <div v-show="goodDetail.specialArea == 13">
                      BV:{{
                        goodDetail.goodsAssAchive | toThousandthAndKeepDecimal
                      }}
                    </div>
                  </div>
                  <div class="goods-price">{{ goodDetail.sales | seles }}</div>
                </div>
                <div class="dis_flex just m10">
                  <div class="dis_flex" v-if="goodDetail.giftNames">
                    <div class="tit8">赠品：</div>
                    <div class="tit9">{{ goodDetail.giftNames }}</div>
                  </div>
                  <div v-else></div>
                </div>
              </div>
            </div>
            <!-- 规格 -->
            <div class="gui">
              <div v-for="item in filteredProductParams" :key="item.productId">
                <div class="gui_t">
                  <div class="gui_th">规格:</div>
                  <div class="gui_y">
                    <div class="gui_tt">{{ item.productName }}</div>
                    <div class="gui_yi">应选:</div>
                    <span class="coloNum">{{ item.quantity }}</span>
                    <div class="gui_yi">已选:</div>
                    <span class="coloNum">{{ item.quantitySel }}</span>
                  </div>
                </div>
                <div class="gui_b">
                  <div class="gui_bt">型号:</div>
                  <div class="gui_bb">
                    <div
                      v-for="(ctem, cndex) in item.waresItemsParamsList"
                      :key="ctem.pkSkuId"
                      class="gui_i"
                    >
                      <div class="gui_ia">
                        <el-popover placement="top-start" trigger="hover">
                          <div>{{ ctem.specsName }}</div>
                          <div
                            slot="reference"
                            v-show="ctem.specsNameDian.length > 17"
                            @click.stop="tapSku(index, cndex, ctem.quantity)"
                            :class="['gui_ii', ctem.checked ? 'gui_a' : '']"
                          >
                            <img :src="ctem.specCover" alt="" />
                            <div class="gui_iit">{{ ctem.specsNameDian }}</div>
                          </div>
                        </el-popover>
                        <div
                          v-show="ctem.specsNameDian.length <= 17"
                          @click.stop="tapSku(index, cndex, ctem.quantity)"
                          :class="['gui_ii', ctem.checked ? 'gui_a' : '']"
                        >
                          <img :src="ctem.specCover" alt="" />
                          <div class="gui_iit">{{ ctem.specsNameDian }}</div>
                        </div>
                      </div>
                      <div class="jbq" v-show="ctem.checked">
                        <el-input-number
                          @change="getNum(index, cndex, $event)"
                          v-model="ctem.quantity"
                          :max="ctem.maxNum"
                          :min="0"
                        >
                        </el-input-number>
                      </div>
                      <div class="jbq" v-show="!ctem.checked"></div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <!-- 数量 -->
            <div
              class="dis_flex"
              v-if="userInfo.registerShare == 0 || userInfo.registerFans == 0"
            >
              <div>数量：</div>
              <el-input-number v-model="num" :min="1"></el-input-number>
            </div>
            <div
              class="addCar"
              v-if="
                (specialArea == 31 && userInfo.isMakerSpace == 0) ||
                specialArea != 31
              "
              @click="toAddCar"
            >
              加入购物车
            </div>
            <!-- <div class="addCar" v-else @click="goBuy">{{ '购买' }}</div> -->
            <!-- {{ '服务承诺' }} -->
            <div
              v-if="
                goodDetail.ensureLabelList &&
                goodDetail.ensureLabelList.length > 0
              "
              class="dis_flex fw"
            >
              <div>服务承诺:</div>
              <div
                class="fw_i"
                v-for="item in goodDetail.ensureLabelList"
                :key="item.pkId"
              >
                <img src="@/assets/images/duihao.png" alt="" />
                <div>{{ item.label }}</div>
              </div>
            </div>
          </div>
        </div>
        <div class="menuList">
          <div
            :class="['menu_i', isMenu == 0 ? 'actMenu' : '']"
            @click="isMenu = 0"
          >
            商品介绍
          </div>
          <div
            :class="['menu_i', isMenu == 1 ? 'actMenu' : '']"
            @click="isMenu = 1"
          >
            售后保障
          </div>
        </div>
        <div class="xian"></div>
        <div class="allDetail">
          <div
            v-show="isMenu == 0"
            class="allDetail_i"
            v-html="goodDetail.details"
          ></div>
          <div
            v-show="isMenu == 1"
            class="allDetail_i"
            v-html="goodDetail.afterGuarantee"
          ></div>
        </div>
      </div>
      <!-- 推荐 -->
      <!-- 商品列表 -->
      <div class="goodList">
        <div class="tited">{{ "精品推荐" }}</div>
        <div
          class="good_i"
          v-for="item in goodList"
          :key="item.waresCode"
          @click="goDetails(item)"
        >
          <img class="goodImg" :src="item.cover1" alt="" />
          <div class="goodBtm">
            <div class="disFlex">
              <div class="goods-price">
                {{ userInfo.currencyIcon
                }}{{ item.waresPrice | toThousandthAndKeepDecimal }}
              </div>
              <div class="tit2"></div>
            </div>
            <div class="disFlex">
              <div class="tit3">{{ item.waresName }}</div>
            </div>
            <div class="disFlex">
              <div class="tit4">{{ "销量" }}:{{ item.sales | seles }}</div>
              <div class="tit4">
                {{ "业绩" }}:{{
                  item.waresAchieve | toThousandthAndKeepDecimal
                }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <selSpaceGoods ref="selSpaceGoods" @getCar="getCatLength"></selSpaceGoods>
  </div>
</template>

<script>
import personInfo from "@/components/personInfo.vue";
import Swiper from "@/components/Swiper.vue";
import Sidebar from "@/components/Sidebar.vue";
import * as api from "@/api/goods.js";
import { mapGetters } from "vuex";
import selSpaceGoods from "@/components/selSpaceGoods.vue";

export default {
  components: {
    personInfo,
    Swiper,
    Sidebar,
    selSpaceGoods,
  },
  data() {
    return {
      isLoading: false,
      isMenu: 0,
      specialArea: "",
      waresCode: "",
      goodList: [
        {
          waresCode: "1",
          cover1:
            "https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg",
          waresPrice: "1980.00",
          waresName: "海之圣超饱和富氢水杯（粉色），你值得拥有",
        },
      ],
      goodDetail: {
        num: 1,
        prefixLabelTarget: {},
        productParams: [],
      },
      isClick: 0,
      num: 1,
      mainImgUrl: "",
      imgUrlList: [],
      labelName: "",
      countDown: "",
      pkCountry: "",
      moneySymbol: "",
      zoneList: [
        {
          label: "分享专区",
          value: 100,
          name: "share",
          children: [
            {
              label: "海粉分享",
              value: 7,
              name: "hiFans",
            },
            {
              label: "免费注册",
              value: 21,
              name: "haiFans",
            },
          ],
        },
        {
          label: "注册专区",
          value: 1,
          name: "regiest",
          children: [
            {
              label: "自营专区",
              value: 1,
              name: "regiestArea",
            },
            {
              label: "乐学易考",
              value: 24,
              name: "ezLearnReg",
            },
          ],
        },
        {
          label: "升级专区",
          value: 2,
          name: "upgrade",
          children: [
            {
              label: "自营专区",
              value: 2,
              name: "upgradeArea",
            },
            {
              label: "乐学易考",
              value: 25,
              name: "ezLearnUp",
            },
            {
              label: "海粉专区",
              value: 27,
              name: "haiFunUpd",
            },
          ],
        },
        {
          label: "复购专区",
          value: 3,
          name: "repurchase",
          children: [
            {
              label: "自营专区",
              value: 3,
              name: "self",
            },
            {
              label: "三方供应",
              value: 21,
              name: "haiFans",
            },
            {
              label: "复购合作",
              value: 22,
              name: "cooperation",
            },
            {
              label: "乐学易考",
              value: 26,
              name: "ezLearnRep",
            },
            {
              label: "直播专区",
              value: 14,
              name: "live",
            },
            {
              label: "工具流",
              value: 12,
              name: "gongju",
            },
          ],
        },
        {
          label: "福利专区",
          value: 13,
          children: [],
          name: "welfare",
        },
        // {
        //   label: '积分专区',
        //   value: 11,
        //   children: [],
        //   name: 'integral',
        // },
        {
          label: "重消专区",
          value: 10,
          children: [],
          name: "rescission",
        },
      ],
    };
  },
  filters: {
    seles(value) {
      if (value > 999) {
        return 999 + "+";
      } else {
        return value;
      }
    },
  },
  computed: {
    ...mapGetters(["userInfo"]),
    filteredProductParams() {
      return this.goodDetail.productParams.filter(
        (item) =>
          item.waresItemsParamsList && item.waresItemsParamsList.length > 0
      );
    },
  },
  watch: {
    $route: {
      immediate: true,
      handler(n) {
        this.pkCountry = parseInt(localStorage.getItem("pkCountry"));
        this.specialArea = n.query.specialArea;

        this.waresCode = n.query.waresCode;

        this.zoneList.forEach((ctem) => {
          if (ctem.value == this.specialArea) {
            this.labelName = ctem.label;
          }
          if (ctem.children.length > 0) {
            ctem.children.forEach((stem) => {
              if (stem.value == this.specialArea) {
                this.labelName = stem.label;
              }
            });
          }
        });
        // this.labelName = n.query.label
        this.getDetails();
        this.$store.dispatch("SpecialQuantity", {
          specialArea: this.specialArea,
          pkCountry: this.pkCountry,
        });
        this.getRecGoods();
      },
    },
  },
  mounted() {
    window.scrollTo(0, 0);
    this.pkCountry = parseInt(localStorage.getItem("pkCountry"));
    // this.specialArea = this.$route.query.specialArea
    // this.waresCode = this.$route.query.waresCode
    // this.labelName = this.$route.query.label
    // this.getDetails()
    // this.getRecGoods()
    // this.getMoneySymbol()
  },
  methods: {
    showShare() {
      this.$refs.sideBar.getShare(this.specialArea);
    },
    getMoneySymbol() {
      if (this.specialArea == 1) {
        api
          .getCurrency({
            pkCountry: this.pkCountry,
          })
          .then((res) => {
            this.moneySymbol = res.data.symbol;
          });
      } else {
        this.moneySymbol = this.userInfo.currencyIcon;
      }
    },
    goDetails(item) {
      this.$router.replace({
        path: "/goodsDetails",
        query: {
          waresCode: item.waresCode,
          specialArea: this.specialArea,
          label: this.labelName,
        },
      });
    },
    getRecGoods() {
      api
        .recommend_wares({
          specialArea: this.specialArea,
          pkAreaClassify: "",
          pkCountry: this.pkCountry || "",
        })
        .then((res) => {
          if (res.code == 200) {
            this.goodList = res.data;
          }
        });
    },
    showCar() {
      this.$refs.sideBar.getCarList(this.specialArea);
    },
    toAddCar() {
      this.goodDetail.productParams.forEach((item) => {
        item.num = 0;
        item.waresItemsParamsList.forEach((ctem) => {
          item.num += ctem.quantity;
        });
      });
      let allNum = 0;
      let selNum = 0;
      this.goodDetail.productParams.forEach((item) => {
        allNum += item.quantity;
        selNum += item.num;
      });
      if (allNum != selNum) {
        this.$message({
          message: "请添加产品",
          type: "warning",
        });
        return false;
      }
      let carList = {
        specialArea: this.goodDetail.specialArea,
        number: this.num,
        waresCode: this.goodDetail.waresCode,
        productGroup: [],
        pkCountry: this.pkCountry || "",
      };
      this.goodDetail.productParams.forEach((item) => {
        item.waresItemsParamsList.forEach((ctem) => {
          if (ctem.quantity != 0) {
            carList.productGroup.push({
              pkProduct: ctem.pkProduct,
              pkSkuId: ctem.pkSkuId,
              quantity: ctem.quantity,
            });
          }
        });
      });
      if (this.goodDetail.isMakerGift == 2) {
        this.$refs.selSpaceGoods.getData(carList);
      } else {
        api.addShopping(carList).then(() => {
          this.$store.dispatch("SpecialQuantity", {
            specialArea: this.goodDetail.specialArea,
            pkCountry: this.pkCountry,
          });
          this.$message({
            message: "购物车添加成功",
            type: "success",
          });
        });
      }
    },
    getCatLength() {
      this.$store.dispatch("SpecialQuantity", {
        specialArea: this.goodDetail.specialArea,
        pkCountry: this.pkCountry,
      });
    },
    goBuy() {
      this.goodDetail.productParams.forEach((item) => {
        item.num = 0;
        item.waresItemsParamsList.forEach((ctem) => {
          item.num += ctem.quantity;
        });
      });
      let allNum = 0;
      let selNum = 0;
      this.goodDetail.productParams.forEach((item) => {
        allNum += item.quantity;
        selNum += item.num;
      });
      if (allNum != selNum) {
        this.$message({
          message: "请添加产品",
          type: "warning",
        });
        return false;
      }
      let waresInfoParam = {
        number: this.num,
        waresCode: this.goodDetail.waresCode,
        pkWares: this.goodDetail.pkWares,
        waresSpecsSku: [],
        pkCountry: this.pkCountry || "",
      };
      this.goodDetail.productParams.forEach((item) => {
        item.waresItemsParamsList.forEach((ctem) => {
          if (ctem.quantity != 0) {
            waresInfoParam.waresSpecsSku.push({
              pkWaresSpecsSku: ctem.pkSkuId,
              quantity: ctem.quantity,
            });
          }
        });
      });
      this.$router.push({
        path: "shareFansConfirm",
        query: {
          allData: JSON.stringify(waresInfoParam),
        },
      });
    },
    calPrice() {
      if (this.userInfo.pkCountry == 1) {
        this.goodDetail.productParams.forEach((item) => {
          item.waresItemsParamsList.forEach((ctem) => {
            ctem.priceTotal = ctem.price * ctem.quantity;
            ctem.vipPriceTotal = ctem.vipPrice * ctem.quantity;
            ctem.retailPriceTotal = ctem.retailPrice * ctem.quantity;
            ctem.assAchieveTotal = ctem.assAchieve * ctem.quantity;
            ctem.achieveTotal =
              ctem.achieve * ctem.quantity * this.goodDetail.inExchangeRate;
          });
        });
      } else {
        this.goodDetail.productParams.forEach((item) => {
          item.waresItemsParamsList.forEach((ctem) => {
            ctem.priceTotal = ctem.price * ctem.quantity;
            ctem.achieveTotal = ctem.achieve * ctem.quantity;
            ctem.assAchieveTotal = ctem.assAchieve * ctem.quantity;
          });
        });
      }
      let price = 0;
      let vipPrice = 0;
      let retailPrice = 0;
      let achieve = 0;
      let assAchieve = 0;
      if (this.specialArea == 31) {
        this.goodDetail.productParams.forEach((item) => {
          item.waresItemsParamsList.forEach((ctem) => {
            if (ctem.checked) {
              price += ctem.priceTotal;
              vipPrice += ctem.vipPriceTotal;
              retailPrice += ctem.retailPriceTotal;
              achieve += ctem.achieveTotal;
              assAchieve += ctem.assAchieveTotal;
            }
          });
        });
        this.goodDetail.productParams.forEach((item) => {
          item.quantitySel = 0;
          item.waresItemsParamsList.forEach((ctem) => {
            item.quantitySel += ctem.quantity;
          });
        });
        if (this.userInfo.isMakerSpace == 0) {
          this.goodDetail.goodsPrice = price;
        } else {
          this.goodDetail.goodsPrice = vipPrice;
        }
        this.goodDetail.retailPrice = retailPrice;
        this.goodDetail.goodsAchive = parseFloat(achieve).toFixed(2);
        this.goodDetail.goodsAssAchive = parseFloat(assAchieve).toFixed(2);
      } else {
        this.goodDetail.productParams.forEach((item) => {
          item.waresItemsParamsList.forEach((ctem) => {
            if (ctem.checked) {
              price += ctem.priceTotal;
              achieve += ctem.achieveTotal;
              assAchieve += ctem.assAchieveTotal;
            }
          });
        });
        this.goodDetail.productParams.forEach((item) => {
          item.quantitySel = 0;
          item.waresItemsParamsList.forEach((ctem) => {
            item.quantitySel += ctem.quantity;
          });
        });

        this.goodDetail.goodsPrice = price;
        this.goodDetail.goodsAchive = parseFloat(achieve).toFixed(2);
        this.goodDetail.goodsAssAchive = parseFloat(assAchieve).toFixed(2);
      }
    },
    getNum(index, cndex, quantity) {
      // 数量为0，关闭高亮
      if (quantity == 0) {
        this.$set(
          this.goodDetail.productParams[index].waresItemsParamsList[cndex],
          "checked",
          false
        );
      } else {
        this.$set(
          this.goodDetail.productParams[index].waresItemsParamsList[cndex],
          "checked",
          true
        );
      }
      let ggNum = 0;
      this.goodDetail.productParams[index].waresItemsParamsList.forEach(
        (item) => {
          ggNum += item.quantity;
        }
      );
      if (this.goodDetail.productParams[index].quantity - quantity >= 0) {
        this.goodDetail.productParams[index].waresItemsParamsList.forEach(
          (stem, sndex) => {
            if (sndex != cndex) {
              this.$set(
                stem,
                "maxNum",
                this.goodDetail.productParams[index].quantity -
                  (ggNum - stem.quantity)
              );
            }
          }
        );
      }
      this.calPrice();
    },
    tapSku(index, cndex, quantity) {
      if (quantity > 0) {
        this.$set(
          this.goodDetail.productParams[index].waresItemsParamsList[cndex],
          "checked",
          false
        );
        this.$set(
          this.goodDetail.productParams[index].waresItemsParamsList[cndex],
          "quantity",
          0
        );
        let ggNum = 0;
        this.goodDetail.productParams[index].waresItemsParamsList.forEach(
          (item) => {
            ggNum += item.quantity;
          }
        );
        this.goodDetail.productParams[index].quantitySel = ggNum;
        this.goodDetail.productParams[index].waresItemsParamsList.forEach(
          (stem, sndex) => {
            if (sndex == cndex) {
            } else {
              this.$set(
                stem,
                "maxNum",
                this.goodDetail.productParams[index].quantity -
                  (ggNum - stem.quantity)
              );
            }
          }
        );
      } else {
        let ggNum = 0;
        this.goodDetail.productParams[index].waresItemsParamsList.forEach(
          (item) => {
            ggNum += item.quantity;
          }
        );
        this.goodDetail.productParams[index].quantitySel = ggNum + 1;
        if (ggNum < this.goodDetail.productParams[index].quantity) {
          this.$set(
            this.goodDetail.productParams[index].waresItemsParamsList[cndex],
            "checked",
            true
          );
          this.$set(
            this.goodDetail.productParams[index].waresItemsParamsList[cndex],
            "quantity",
            1
          );
        }
        if (this.goodDetail.productParams[index].quantity - (ggNum + 1) >= 0) {
          this.goodDetail.productParams[index].waresItemsParamsList.forEach(
            (stem, sndex) => {
              if (sndex == cndex) {
                this.$set(
                  stem,
                  "maxNum",
                  this.goodDetail.productParams[index].quantity - ggNum
                );
              } else {
                this.$set(
                  stem,
                  "maxNum",
                  this.goodDetail.productParams[index].quantity -
                    (ggNum + 1 - stem.quantity)
                );
              }
            }
          );
        }
      }
      this.calPrice();
      this.$forceUpdate();
    },
    getDetails() {
      this.isLoading = true;
      api
        .waresDetail({
          specialArea: this.specialArea,
          waresCode: this.waresCode,
          pkCountry: this.pkCountry || "",
        })
        .then((res) => {
          this.goodDetail = res.data;
          let sl = this.goodDetail.sales + "";
          if (sl >= 10000) {
            sl = sl.substring(0, sl.length - 4) + "+";
          }
          this.goodDetail.sales = sl;
          this.mainImgUrl = res.data.videoUrl;
          this.imgUrlList = [
            // res.data.cover,
            res.data.cover1,
            res.data.cover2,
            res.data.cover3,
            res.data.cover4,
            res.data.cover5,
            res.data.cover6,
          ];

          this.imgUrlList = this.imgUrlList.filter(
            (item) => item && item.trim()
          );
          this.goodDetail.productParams.forEach((item, index) => {
            item.quantitySel = item.quantity;
            item.waresItemsParamsList.forEach((ctem, cndex) => {
              ctem.checked = false;
              ctem.quantity = 0;
              ctem.maxNum = 0;
              if (ctem.specsName.length > 17) {
                ctem.specsNameDian = ctem.specsName.substring(0, 17) + "...";
              } else {
                ctem.specsNameDian = ctem.specsName;
              }
            });
          });
          // 赋初值
          this.goodDetail.productParams.forEach((item) => {
            item.waresItemsParamsList.forEach((ctem, cndex) => {
              if (cndex == 0) {
                this.$set(ctem, "checked", true);
                this.$set(ctem, "quantity", item.quantity);
                this.$set(ctem, "maxNum", item.quantity);
                // 初始总价格业绩
                this.$set(item, "priceTotal", ctem.priceTotal);
                this.$set(item, "vipPriceTotal", ctem.vipPriceTotal);
                this.$set(item, "retailPriceTotal", ctem.retailPriceTotal);
                this.$set(item, "achieveTotal", ctem.achieveTotal);
                this.$set(item, "assAchieveTotal", ctem.assAchieveTotal);
              }
            });
          });
          this.$set(this.goodDetail, "goodsPrice", 0);
          this.$set(this.goodDetail, "retailPrice", 0);
          this.$set(this.goodDetail, "goodsAchive", 0);
          this.$set(this.goodDetail, "goodsAssAchive", 0);

          this.goodDetail.productParams.forEach((item) => {
            if (this.specialArea == 31) {
              if (this.userInfo.isMakerSpace == 0) {
                this.goodDetail.goodsPrice += parseFloat(item.priceTotal);
                this.goodDetail.retailPrice += parseFloat(
                  item.retailPriceTotal
                );
                this.goodDetail.goodsAchive += parseFloat(item.achieveTotal);
                this.goodDetail.goodsAssAchive += parseFloat(
                  item.assAchieveTotal
                );
              } else {
                this.goodDetail.goodsPrice += parseFloat(item.vipPriceTotal);
                this.goodDetail.retailPrice += parseFloat(
                  item.retailPriceTotal
                );
                this.goodDetail.goodsAchive += parseFloat(item.achieveTotal);
                this.goodDetail.goodsAssAchive += parseFloat(
                  item.assAchieveTotal
                );
              }
            } else {
              this.goodDetail.goodsPrice += parseFloat(item.priceTotal);
              this.goodDetail.goodsAchive += parseFloat(item.achieveTotal);
              this.goodDetail.goodsAssAchive += parseFloat(
                item.assAchieveTotal
              );
            }
          });

          this.downTime();
          if (this.specialArea == 31) {
            this.$refs.sideBar.getSpecial(31);
          }
        })
        .finally(() => {
          this.isLoading = false;
        });
    },
    downTime() {
      let that = this;
      this.clockTime = setInterval(() => {
        if (
          that.goodDetail.deliveryTimeMs &&
          that.goodDetail.deliveryTimeMs > 0
        ) {
          that.countDown = this.getTime(this.goodDetail.deliveryTimeMs--);
        } else {
          that.countDown = "0天00时00分00秒";
        }
      }, 1000);
    },
    getTime(time) {
      // 转换为式分秒
      let d = parseInt(time / 60 / 60 / 24); //计算剩余天数\
      d = d < 10 ? "0" + d : d;
      let h = parseInt((time / 60 / 60) % 24);
      h = h < 10 ? "0" + h : h;
      let m = parseInt((time / 60) % 60);
      m = m < 10 ? "0" + m : m;
      let s = parseInt(time % 60);
      s = s < 10 ? "0" + s : s;
      // 作为返回值返回
      return d + "天" + h + "小时" + m + "分" + s + "秒";
    },
  },
};
</script>

<style lang="scss" scoped>
.contain {
  background: rgba(249, 249, 249, 1);
  min-height: 100vh;
}

.mianbao {
  padding: 0 60px;
  margin-top: 30px;
}

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

.dis_flex1 {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.just {
  justify-content: space-between;
}

.m10 {
  margin-top: 10px;
}
.product-body {
  display: flex;
  .product-container {
    flex: 1;
    .details_t {
      display: flex;
      justify-content: space-between;
      padding: 0 0 0px 60px;
      margin-top: 40px;
      .details_c {
        flex: 1;
        margin: 0 60px 0 40px;
        .c_tit1 {
          font-size: 22px;
          font-weight: 600;
          color: #333333;
        }
        .c_hui {
          padding: 22px 20px;
          background: #eeeeee;
          border-radius: 10px 10px 10px 10px;
          font-size: 18px;
          color: #333333;
          margin-top: 20px;
        }
        .c_bai {
          // padding: 20px;
          background: #ffffff;
          box-shadow: 0px 0px 20px 0px rgba(204, 204, 204, 0.5);
          border-radius: 10px 10px 10px 10px; // margin-top: 20px;
          .c_bai_b {
            padding: 20px;
          }
        }
      }
    }
  }
  .goodList {
    width: 320px; /* Define a fixed width for the sticky column */
    align-self: flex-start; /* Prevent stretching vertically with flex items */
    padding-bottom: 20px; /* Add some padding at the bottom */
    padding-top: 80px;
    margin-right: 60px;
    .tited {
      font-size: 18px;
      font-weight: 600;
      color: #333333;
      margin-bottom: 10px;
    }
    .good_i {
      margin-bottom: 20px;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
      cursor: pointer;
      border-radius: 10px;
      overflow: hidden;
      .goodBtm {
        padding: 10px 20px 10px 20px;
        background: #ffffff;
        border-radius: 0px 0px 10px 10px;
        margin-top: -5px;
        position: relative;
        z-index: 1;
      }
      &:hover {
        transform: translateY(-5px);
        box-shadow: 0px 8px 20px rgba(100, 100, 100, 0.2);
        position: relative;
        z-index: 2;
      }
    }
    .goodImg {
      width: 318px;
      height: 318px;
      border-radius: 10px 10px 0px 0px;
      display: block;
    }
  }
}

.disFlex {
  width: 278px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.gui {
  display: flex;
  margin: 20px 0;
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 10px 20px;
  flex-direction: column;
  height: 350px;
  overflow-y: auto;
  .gui_t {
    display: flex;
    align-items: center;
    .gui_th {
      font-size: 18px;
      color: #333;
      font-weight: 600;
    }
    .gui_y {
      display: flex;
      align-items: center;
    }
    .gui_tt {
      margin-left: 10px;
      font-size: 16px;
      color: #333;
      font-weight: 600;
    }
    .gui_yi {
      color: #999;
      font-size: 16px;
    }
    .coloNum {
      color: #00417c;
      font-weight: 600;
      margin: 0 10px;
      margin-top: 3px;
    }
  }
  .gui_b {
    display: flex;
    .gui_bt {
      line-height: 70px;
      font-size: 18px;
      color: #333;
      font-weight: 600;
    }
    .gui_bb {
      margin-left: 10px;
      flex: 1;
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      margin: 10px 0 20px 10px;
    }
    .gui_i {
      // position: relative;
      display: flex;
      width: 50%;
      align-items: center;
      margin: 0px 0px 10px 0;
    }
    .gui_ia {
      flex: 1;
    }
    .gui_ii {
      display: flex;
      align-items: center;
      background: #ededed;
      border-radius: 10px;
      font-size: 14px;
      color: #333333;
      padding: 5px;
      img {
        width: 40px;
        height: 40px; // margin-right: 10px;
        border-radius: 10px;
      }
      .gui_iit {
        flex: 1;
        text-align: center;
      }
    }
    .gui_a {
      background: var(--primary-color);
      color: #fff;
    }
    .jbq {
      width: 130px;
      margin: 0 10px; // position: absolute;
      // top: 85px;
      ::v-deep .el-input-number {
        width: 130px;
      }
    }
  }
}

.addCar {
  background: var(--primary-color);
  border-radius: 4px 4px 4px 4px;
  font-size: 14px;
  font-weight: 600;
  color: #ffffff;
  padding: 12px 20px;
  display: inline-block;
  margin-top: 20px;
  cursor: pointer;
}

.tit1 {
  font-size: 18px;
  font-weight: 600;
  color: #00417c;
  margin-right: 10px;
  margin-bottom: 5px;
}

.tit2 {
  font-size: 12px;
  font-weight: 400;
  color: #666666;
  margin-bottom: 5px;
}

.tit3 {
  font-size: 16px;
  font-weight: 600;
  color: #333333;
  margin-bottom: 5px;
}

.tit4 {
  font-size: 14px;
  font-weight: 400;
  color: #999999;
  margin-right: 10px;
}

.goods-price {
  font-size: 24px;
  font-weight: 600;
  color: var(--price-color);
}

.tit6 {
  font-size: 14px;
  font-weight: 400;
  color: #999999;
  margin-left: 30px;
}

.tit7 {
  font-size: 18px;
  font-weight: 400;
  color: #333333;
}

.tit8 {
  font-size: 18px;
  font-weight: 400;
  color: #00417c;
}

.tit9 {
  font-size: 18px;
  font-weight: 400;
  color: #999999;
}

::v-deep .el-breadcrumb__inner.is-link:hover {
  color: var(--primary-color) !important;
}

::v-deep .el-breadcrumb {
  font-size: 14px;
  color: #666666 !important;
  font-weight: 400 !important;
}

::v-deep .el-breadcrumb__inner.is-link {
  font-size: 14px;
  color: #666666 !important;
  font-weight: 400 !important;
}

.menuList {
  display: flex;
  margin-top: 20px;
  padding: 0 60px;
  box-sizing: border-box;
  .menu_i {
    margin-right: 70px;
    line-height: 50px;
    cursor: pointer;
  }
  .actMenu {
    border-bottom: 5px solid #00417c;
  }
}

.xian {
  height: 5px;
  background: rgba(0, 0, 0, 0.05);
  margin-top: -5px;
  width: calc(100% - 60px);
}

.allDetail {
  padding: 40px 200px;
  text-align: center; // width: 100%;
  ::v-deep img {
    max-width: 100%;
  }
}

.qzbq {
  font-size: 22px;
  font-weight: 600;
  color: var(--primary-color);
  padding: 0px 5px;
  margin-right: 5px;
}

.fw {
  margin-top: 40px;
  font-size: 14px;
  font-family: PingFang SC-Regular, PingFang SC;
  font-weight: 400;
  color: #333333;
  .fw_i {
    font-size: 12px;
    font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400;
    color: #666666;
    margin: 0 20px 0 10px;
    display: flex;
    align-items: center;
    img {
      width: 20px;
      height: 20px;
      margin-right: 5px;
    }
  }
}

.jusc {
  justify-content: space-between;
  background: #ea3a3a;
  border-radius: 10px 10px 0px 0px;
  padding: 15px 20px;
  font-size: 28px;
  font-family: PingFang SC-Semibold, PingFang SC;
  font-weight: 600;
  color: #ffd046;
  img {
    width: 26px;
    height: 26px;
    margin-right: 10px;
  }
}

.jusc_r {
  font-size: 18px;
  font-family: PingFang SC-Regular, PingFang SC;
  font-weight: 400;
  color: #ffffff;
}

.jusc_ri {
  color: #ffcc33;
  margin-left: 10px;
}

::v-deep .el-input-number--mini {
  width: 105px !important;
}
</style>