847 lines
21 KiB
Vue
847 lines
21 KiB
Vue
|
<template>
|
|||
|
|
<view class="product-detail pr">
|
|||
|
|
<view class="product-pic">
|
|||
|
|
<swiper class="swiper" indicator-active-color="#ffffff" indicator-color="rgba(255,255,255,.3)"
|
|||
|
|
indicator-dots autoplay :interval="2000" :duration="500">
|
|||
|
|
<swiper-item v-if="detail.videoUrl && detail.cover">
|
|||
|
|
<view v-if="!isVideoPlay" class="icon iconfont icon-bofang" @click="isVideoPlay = true"></view>
|
|||
|
|
<image v-if="!isVideoPlay" :src="detail.cover" mode="" @click="isVideoPlay = true"></image>
|
|||
|
|
<video v-if="isVideoPlay" :src="detail.videoUrl" :autoplay="isVideoPlay"
|
|||
|
|
@click="isVideoPlay = false" class="video" :controls="false" :show-center-play-btn="false"
|
|||
|
|
:show-play-btn="false" :enable-progress-gesture="false"></video>
|
|||
|
|
</swiper-item>
|
|||
|
|
<swiper-item v-if="detail.cover1">
|
|||
|
|
<image :src="detail.cover1" mode="aspectFit"></image>
|
|||
|
|
</swiper-item>
|
|||
|
|
<swiper-item v-if="detail.cover2">
|
|||
|
|
<image :src="detail.cover1" mode="aspectFit"></image>
|
|||
|
|
</swiper-item>
|
|||
|
|
<swiper-item v-if="detail.cover3">
|
|||
|
|
<image :src="detail.cover1" mode="aspectFit"></image>
|
|||
|
|
</swiper-item>
|
|||
|
|
<swiper-item v-if="detail.cover4">
|
|||
|
|
<image :src="detail.cover1" mode="aspectFit"></image>
|
|||
|
|
</swiper-item>
|
|||
|
|
<swiper-item v-if="detail.cover5">
|
|||
|
|
<image :src="detail.cover1" mode="aspectFit"></image>
|
|||
|
|
</swiper-item>
|
|||
|
|
<swiper-item v-if="detail.cover6">
|
|||
|
|
<image :src="detail.cover1" mode="aspectFit"></image>
|
|||
|
|
</swiper-item>
|
|||
|
|
</swiper>
|
|||
|
|
</view>
|
|||
|
|
<view class="product-content">
|
|||
|
|
<view class="white d-b-c preview-box pr" v-if="detail.preSaleStatus == 1">
|
|||
|
|
<image class="preview-bg" src="/static/bg/preview-bg.png" mode=""></image>
|
|||
|
|
<view class="pr z1">
|
|||
|
|
<view class="f28">
|
|||
|
|
{{ currencyIcon() }}
|
|||
|
|
<text class="f42 fb">{{ formatNum(priceTotal) }}</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="f24">
|
|||
|
|
<text>{{ formatNum(achieveTotal) || "" }}</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="pr z1">
|
|||
|
|
<view class="d-e-c f24 mb16">
|
|||
|
|
<u-icon name="clock" size="30rpx" color="#fff"></u-icon>
|
|||
|
|
<text class="ml10">{{ $t("w_0116") }}</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="f20 d-e-c">
|
|||
|
|
{{ $t("CK_KS_11") }}：
|
|||
|
|
<Countdown ref="countdown" :color="'#999999'" :timeSize="'22rpx'" :config="countdownConfig"
|
|||
|
|
@returnVal="returnValFunc"></Countdown>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="product-info">
|
|||
|
|
<view class="d-s-c mb10" v-if="detail.preSaleStatus == 0 || cid == 21">
|
|||
|
|
<view class="f28 price-color">
|
|||
|
|
<view v-if="
|
|||
|
|
(cid == 101 || cid == 102 || cid == 201 || cid == 202) &&
|
|||
|
|
userinfo.pkSettleCountry != pkCountry
|
|||
|
|
">
|
|||
|
|
{{ borderunits1
|
|||
|
|
}}<text class="f42 fb">{{ formatNum(priceTotal1) }}</text>({{ currencyIcon() }}
|
|||
|
|
<text class="f42 fb">{{
|
|||
|
|
formatNum(priceTotal || detail.waresPrice)
|
|||
|
|
}}</text>)
|
|||
|
|
</view>
|
|||
|
|
<view v-else>
|
|||
|
|
{{ currencyIcon() }}
|
|||
|
|
<text class="f42 fb">{{
|
|||
|
|
formatNum(priceTotal || detail.waresPrice)
|
|||
|
|
}}</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="f24 gray9 ml20" v-if="cid != 10 && cid != 13&& cid!=30">{{
|
|||
|
|
formatNum(achieveTotal) || ""
|
|||
|
|
}}</view>
|
|||
|
|
<view class="f24 gray9 ml20" v-if="cid == 10">{{ $t("w_0118") }}{{ formatNum(detail.deductMoney) }}
|
|||
|
|
</view>
|
|||
|
|
<view class="f24 gray9 ml20" v-if="cid == 13">BV:{{ formatNum(achieveTotal) || "" }}</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="f24 gray9 mb20">{{ $t("w_0252") }}
|
|||
|
|
{{ detail.sales * 1 > 999 ? "999+" : detail.sales }}
|
|||
|
|
</view>
|
|||
|
|
<view class="text-ellipsis-2 mb23">
|
|||
|
|
<!-- <text class="type-tips">爆款</text> -->
|
|||
|
|
<text class="f32 gray3">{{ detail.waresName }}</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="f28 mb23" v-if="detail.giftNames">
|
|||
|
|
<text class="domation">{{ $t("ENU_SALE_T_0") }}：</text>
|
|||
|
|
<text class="gray9">{{ detail.giftNames }}</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="sellingPoints" v-if="detail.sellingPoints">{{
|
|||
|
|
detail.sellingPoints
|
|||
|
|
}}</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="secend-info">
|
|||
|
|
<view class="d-b-c sec-info-item" @click="openSpec">
|
|||
|
|
<view class="sec-info-label">{{ $t("w_0107") }}</view>
|
|||
|
|
<view class="flex-1">{{ alreadyChioce }}</view>
|
|||
|
|
<view class="icon iconfont icon-jiantou"></view>
|
|||
|
|
</view>
|
|||
|
|
<!-- <view class="d-b-c sec-info-item">
|
|||
|
|
<view class="sec-info-label">地址</view>
|
|||
|
|
<view class="flex-1">形成自行车</view>
|
|||
|
|
<view class="icon iconfont icon-jiantou"></view>
|
|||
|
|
</view> -->
|
|||
|
|
<!-- <view class="d-b-c sec-info-item">
|
|||
|
|
<view class="sec-info-label">活动</view>
|
|||
|
|
<view class="flex-1">新人福利</view>
|
|||
|
|
<view class="icon iconfont icon-jiantou"></view>
|
|||
|
|
</view> -->
|
|||
|
|
<!-- <view class="d-b-c sec-info-item">
|
|||
|
|
<view class="sec-info-label">邮费</view>
|
|||
|
|
<view class="flex-1">免邮</view>
|
|||
|
|
</view> -->
|
|||
|
|
<view class="d-b-c sec-info-item">
|
|||
|
|
<view class="sec-info-label">{{ $t("w_0122") }}</view>
|
|||
|
|
<view class="flex-1"></view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="thi-info">
|
|||
|
|
<view class="thi-nav">
|
|||
|
|
<view class="thi-nav-item" :class="{ active: thiType == 0 }" @click="thiType = 0">{{ $t("w_0124") }}
|
|||
|
|
</view>
|
|||
|
|
<!-- <view class="thi-nav-item" :class="{active:thiType == 1}">规格与包装</view> -->
|
|||
|
|
<view class="thi-nav-item" :class="{ active: thiType == 2 }" @click="thiType = 2">{{ $t("w_0125") }}
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view v-if="thiType == 0"><u-parse :content="detail.details"></u-parse></view>
|
|||
|
|
<!-- <view v-if="thiType == 1"><u-parse :content="detail.details"></u-parse></view> -->
|
|||
|
|
<view v-if="thiType == 2"><u-parse :content="detail.afterGuarantee"></u-parse></view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="btns-wrap">
|
|||
|
|
<view class="d-a-c flex-1">
|
|||
|
|
<view class="icon-box d-c-c" @click="gotoPage('/pages/index/index')">
|
|||
|
|
<button class="d-c-c d-c bg-white">
|
|||
|
|
<image style="width: 33rpx; height: 33rpx; margin-bottom: 10rpx"
|
|||
|
|
src="/static/icon/product/home.png" mode=""></image>
|
|||
|
|
<text class="f20"
|
|||
|
|
style="height: 20rpx; line-height: 20rpx; color: #fb3024">{{ $t("ENU_MENU_10") }}</text>
|
|||
|
|
</button>
|
|||
|
|
</view>
|
|||
|
|
<!-- <view class="icon-box d-c-c">
|
|||
|
|
<button
|
|||
|
|
class="d-c-c d-c bg-white"
|
|||
|
|
@click="
|
|||
|
|
gotoWeb(
|
|||
|
|
'https://im1c5366d.7x24cc.com/phone_webChat.html?accountId=N000000033467&chatId=302384fb-eda1-436e-a5e9-c03a2dbd6e97&visitorId=' +
|
|||
|
|
getUserId() +
|
|||
|
|
'&nickName=' +
|
|||
|
|
getUserId()
|
|||
|
|
)
|
|||
|
|
"
|
|||
|
|
>
|
|||
|
|
<image style="width: 33rpx;height: 33rpx;margin-bottom: 10rpx;" src="/static/icon/product/service.png" mode=""></image>
|
|||
|
|
<text class="f20 gray3" style="height: 20rpx;line-height: 20rpx;">{{ $t('w_0259') }}</text>
|
|||
|
|
</button>
|
|||
|
|
</view> -->
|
|||
|
|
<view class="icon-box d-c-c" @click="gotoPage('/pages/cart/cart')">
|
|||
|
|
<button class="pr d-c-c d-c bg-white">
|
|||
|
|
<image style="width: 33rpx; height: 33rpx; margin-bottom: 10rpx"
|
|||
|
|
src="/static/icon/product/cart.png" mode=""></image>
|
|||
|
|
<text class="f20 gray3" style="height: 20rpx; line-height: 20rpx">{{
|
|||
|
|
$t("N_I_194")
|
|||
|
|
}}</text>
|
|||
|
|
<text v-if="sCount > 0" class="cart_num">{{ sCount }}</text>
|
|||
|
|
</button>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- <template>
|
|||
|
|
<button type="primary" class="add-cart">加入购物车</button>
|
|||
|
|
<button type="primary" class="buy">立即购买</button>
|
|||
|
|
</template> -->
|
|||
|
|
<template>
|
|||
|
|
<button type="primary" class="buy one" @click="openSpec">
|
|||
|
|
{{ $t("N_I_192") }}
|
|||
|
|
</button>
|
|||
|
|
<!-- <button type="primary" class="buy one" @click="isTablePopup = true">加入购物车</button> -->
|
|||
|
|
</template>
|
|||
|
|
</view>
|
|||
|
|
<!--购物确定-->
|
|||
|
|
<specTable v-if="cid != 21" :isPopup="isTablePopup" :productModel="productModel" @close="closePopup"
|
|||
|
|
@addCart="addCart" :pkCountry="pkCountry" :cid="cid"></specTable>
|
|||
|
|
<!--海粉购物确定-->
|
|||
|
|
<spec v-if="cid == 21" :active_id="active_id" :isPopup="isTablePopup" :productModel="productModel"
|
|||
|
|
@close="closePopup" @addCart="addHfen" @changeFunc="changeFunc"></spec>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
import specTable from "./popup/spec-table.vue";
|
|||
|
|
import spec from "./popup/spec.vue";
|
|||
|
|
import Countdown from "@/components/countdown/countdown-presale.vue";
|
|||
|
|
export default {
|
|||
|
|
components: {
|
|||
|
|
specTable,
|
|||
|
|
Countdown,
|
|||
|
|
spec,
|
|||
|
|
},
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
cid: 0,
|
|||
|
|
waresCode: "",
|
|||
|
|
title: "",
|
|||
|
|
productModel: null,
|
|||
|
|
isPopup: false,
|
|||
|
|
isTablePopup: false,
|
|||
|
|
isPreview: false,
|
|||
|
|
isVideoPlay: false,
|
|||
|
|
detail: {},
|
|||
|
|
thiType: 0,
|
|||
|
|
alreadyChioce: "",
|
|||
|
|
isFirst: true,
|
|||
|
|
userinfo: {},
|
|||
|
|
productParams: [],
|
|||
|
|
/*倒计时配置*/
|
|||
|
|
countdownConfig: {
|
|||
|
|
/*开始时间*/
|
|||
|
|
startstamp: 1683194245,
|
|||
|
|
/*结束时间*/
|
|||
|
|
endstamp: 1683367044,
|
|||
|
|
},
|
|||
|
|
sCount: 0,
|
|||
|
|
active_id: "",
|
|||
|
|
pkCountry: 1,
|
|||
|
|
borderunits1: "",
|
|||
|
|
};
|
|||
|
|
},
|
|||
|
|
onLoad(e) {
|
|||
|
|
this.cid = e.cid;
|
|||
|
|
this.pkCountry = e.pkCountry || 0;
|
|||
|
|
this.waresCode = e.waresCode;
|
|||
|
|
this.pkId = e.pkId;
|
|||
|
|
let title = this.$t("ENU_TRADE_T_121");
|
|||
|
|
switch (this.cid) {
|
|||
|
|
case 0:
|
|||
|
|
title = this.$t("ENU_TRADE_T_121");
|
|||
|
|
break;
|
|||
|
|
case 1:
|
|||
|
|
title = this.$t("ENU_MENU_311");
|
|||
|
|
break;
|
|||
|
|
case 2:
|
|||
|
|
title = this.$t("ENU_MENU_321");
|
|||
|
|
break;
|
|||
|
|
case 3:
|
|||
|
|
title = this.$t("ENU_TRADE_T_121");
|
|||
|
|
break;
|
|||
|
|
case 7:
|
|||
|
|
title = this.$t("N_I_2");
|
|||
|
|
break;
|
|||
|
|
case 10:
|
|||
|
|
title = this.$t("ENU_MENU_360");
|
|||
|
|
break;
|
|||
|
|
case 11:
|
|||
|
|
title = this.$t("ENU_MENU_350");
|
|||
|
|
break;
|
|||
|
|
case 12:
|
|||
|
|
title = this.$t("ENU_MENU_333");
|
|||
|
|
break;
|
|||
|
|
case 13:
|
|||
|
|
title = this.$t("ENU_MENU_340");
|
|||
|
|
break;
|
|||
|
|
case 14:
|
|||
|
|
title = this.$t("ENU_MENU_334");
|
|||
|
|
break;
|
|||
|
|
case 18:
|
|||
|
|
title = this.$t("ENU_SPECIAL_A_18");
|
|||
|
|
break;
|
|||
|
|
case 19:
|
|||
|
|
title = this.$t("ENU_SPECIAL_A_19");
|
|||
|
|
break;
|
|||
|
|
case 21:
|
|||
|
|
title = this.$t("N_I_4");
|
|||
|
|
break;
|
|||
|
|
case 22:
|
|||
|
|
title = this.$t("ENU_SPECIAL_A_22");
|
|||
|
|
break;
|
|||
|
|
case 23:
|
|||
|
|
title = this.$t("ENU_SPECIAL_A_8");
|
|||
|
|
break;
|
|||
|
|
case 24:
|
|||
|
|
// title = '乐学易考';
|
|||
|
|
title = this.$t("ENU_MENU_312");
|
|||
|
|
break;
|
|||
|
|
case 25:
|
|||
|
|
// title = '乐学易考';
|
|||
|
|
title = this.$t("ENU_MENU_322");
|
|||
|
|
break;
|
|||
|
|
case 26:
|
|||
|
|
// title = '乐学易考';
|
|||
|
|
title = this.$t("ENU_MENU_335");
|
|||
|
|
break;
|
|||
|
|
case 27:
|
|||
|
|
// title = '海粉升级';
|
|||
|
|
title = this.$t("ENU_ORDER_T_27");
|
|||
|
|
break;
|
|||
|
|
case 101:
|
|||
|
|
title = this.$t("fn_004");
|
|||
|
|
break;
|
|||
|
|
case 102:
|
|||
|
|
title = this.$t("ENU_MENU_316");
|
|||
|
|
break;
|
|||
|
|
case 201:
|
|||
|
|
title = this.$t("fn_007");
|
|||
|
|
break;
|
|||
|
|
case 202:
|
|||
|
|
title = this.$t("fn_008");
|
|||
|
|
break;
|
|||
|
|
case 30:
|
|||
|
|
title = this.$t("fn_009");
|
|||
|
|
break;
|
|||
|
|
case 33:
|
|||
|
|
title = this.$t("APP_ADD_27");
|
|||
|
|
break;
|
|||
|
|
}
|
|||
|
|
this.title = title;
|
|||
|
|
this.getData();
|
|||
|
|
},
|
|||
|
|
onShow() {
|
|||
|
|
this.getShoppingCount();
|
|||
|
|
|
|||
|
|
this.getInfo();
|
|||
|
|
this.borderunits1 = uni.getStorageSync("borderUnit");
|
|||
|
|
},
|
|||
|
|
computed: {
|
|||
|
|
achieveTotal: function() {
|
|||
|
|
let self = this;
|
|||
|
|
let price = 0;
|
|||
|
|
if (this.cid == 21 && self.detail && self.detail.waresSkuList) {
|
|||
|
|
self.detail.waresSkuList.forEach((item) => {
|
|||
|
|
if (item.pkId == self.active_id) {
|
|||
|
|
price = item.achieve;
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
return price;
|
|||
|
|
}
|
|||
|
|
if (self.productParams) {
|
|||
|
|
self.productParams.forEach((item, index) => {
|
|||
|
|
item.waresItemsParamsList.forEach((pitem, pindex) => {
|
|||
|
|
if (self.cid == 13) {
|
|||
|
|
price += pitem.number * pitem.assAchieve;
|
|||
|
|
} else {
|
|||
|
|
price += pitem.number * pitem.achieveTotal;
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
return price;
|
|||
|
|
},
|
|||
|
|
priceTotal: function() {
|
|||
|
|
let self = this;
|
|||
|
|
let price = 0;
|
|||
|
|
if (this.cid == 21 && self.detail.waresSkuList) {
|
|||
|
|
self.detail.waresSkuList.forEach((item) => {
|
|||
|
|
if (item.pkId == self.active_id) {
|
|||
|
|
price = item.price;
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
return price;
|
|||
|
|
}
|
|||
|
|
if (self.productParams) {
|
|||
|
|
self.productParams.forEach((item, index) => {
|
|||
|
|
item.waresItemsParamsList.forEach((pitem, pindex) => {
|
|||
|
|
price += pitem.number * pitem.price;
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
return price;
|
|||
|
|
},
|
|||
|
|
priceTotal1: function() {
|
|||
|
|
let self = this;
|
|||
|
|
let price1 = 0;
|
|||
|
|
if (self.productParams) {
|
|||
|
|
self.productParams.forEach((item, index) => {
|
|||
|
|
item.waresItemsParamsList.forEach((pitem, pindex) => {
|
|||
|
|
price1 += pitem.number * pitem.borderPrice;
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
return price1;
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
getInfo() {
|
|||
|
|
let self = this;
|
|||
|
|
self._get("member/api/member/get-info", {}, (res) => {
|
|||
|
|
self.userinfo = res.data;
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
getShoppingCount() {
|
|||
|
|
let self = this;
|
|||
|
|
self._get(
|
|||
|
|
"sale/api/shopping/getShoppingCount", {
|
|||
|
|
specialArea: self.cid,
|
|||
|
|
},
|
|||
|
|
(res) => {
|
|||
|
|
self.sCount = res.data.smallCount;
|
|||
|
|
}
|
|||
|
|
);
|
|||
|
|
},
|
|||
|
|
gotoWeb(url) {
|
|||
|
|
this.gotoPage("/pages/webview/webview?url=" + encodeURIComponent(url));
|
|||
|
|
},
|
|||
|
|
addHfen(e) {
|
|||
|
|
let self = this;
|
|||
|
|
this.isTablePopup = false;
|
|||
|
|
self._post(
|
|||
|
|
"sale/api/shopping/addShopping", {
|
|||
|
|
number: 1,
|
|||
|
|
pkId: self.pkId,
|
|||
|
|
productGroup: [{
|
|||
|
|
pkProduct: self.pkId,
|
|||
|
|
pkSkuId: self.active_id,
|
|||
|
|
}, ],
|
|||
|
|
specialArea: self.cid,
|
|||
|
|
source: 2,
|
|||
|
|
},
|
|||
|
|
(res) => {
|
|||
|
|
uni.showToast({
|
|||
|
|
title: res.msg,
|
|||
|
|
icon: "none",
|
|||
|
|
});
|
|||
|
|
self.getShoppingCount();
|
|||
|
|
}
|
|||
|
|
);
|
|||
|
|
},
|
|||
|
|
addCart(e) {
|
|||
|
|
let self = this;
|
|||
|
|
this.isTablePopup = false;
|
|||
|
|
if (e) {
|
|||
|
|
this.productParams = e;
|
|||
|
|
this.getalreadyChioce();
|
|||
|
|
}
|
|||
|
|
let productGroup = [];
|
|||
|
|
self.productParams.forEach((item, index) => {
|
|||
|
|
item.waresItemsParamsList.forEach((pitem, pindex) => {
|
|||
|
|
if (pitem.number > 0) {
|
|||
|
|
productGroup.push({
|
|||
|
|
pkProduct: pitem.pkProduct,
|
|||
|
|
pkSkuId: pitem.pkSkuId,
|
|||
|
|
quantity: pitem.number,
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
self._post(
|
|||
|
|
"sale/api/shopping/addShopping", {
|
|||
|
|
number: 1,
|
|||
|
|
productGroup: productGroup,
|
|||
|
|
specialArea: self.cid,
|
|||
|
|
pkCountry: self.pkCountry,
|
|||
|
|
waresCode: self.waresCode,
|
|||
|
|
},
|
|||
|
|
(res) => {
|
|||
|
|
uni.showToast({
|
|||
|
|
title: res.msg,
|
|||
|
|
icon: "none",
|
|||
|
|
});
|
|||
|
|
self.getShoppingCount();
|
|||
|
|
}
|
|||
|
|
);
|
|||
|
|
},
|
|||
|
|
getData() {
|
|||
|
|
let self = this;
|
|||
|
|
let url = "sale/api/wares/query-spe-wares-detail";
|
|||
|
|
let params = {
|
|||
|
|
specialArea: self.cid || 0,
|
|||
|
|
waresCode: self.waresCode || "",
|
|||
|
|
pkCountry: self.pkCountry || 1,
|
|||
|
|
};
|
|||
|
|
if (!self.waresCode) {
|
|||
|
|
url = "sale/api/wares/query-spe-sharing-wares-detail";
|
|||
|
|
params = {
|
|||
|
|
pkId: self.pkId || 0,
|
|||
|
|
// source: 2
|
|||
|
|
};
|
|||
|
|
self._get(url, params, (res) => {
|
|||
|
|
self.detail = res.data;
|
|||
|
|
if (self.isFirst) {
|
|||
|
|
if (self.cid == 21) {
|
|||
|
|
self.productParams = self.detail.waresSkuList;
|
|||
|
|
self.active_id = self.productParams[0] ?
|
|||
|
|
self.productParams[0].pkId :
|
|||
|
|
0;
|
|||
|
|
} else {
|
|||
|
|
self.productParams = [...self.detail.productParams];
|
|||
|
|
self.productParams.forEach((item, index) => {
|
|||
|
|
item.waresItemsParamsList.forEach((pitem, pindex) => {
|
|||
|
|
if (pindex == 0) {
|
|||
|
|
pitem.number = item.quantity;
|
|||
|
|
} else {
|
|||
|
|
pitem.number = 0;
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
self.getalreadyChioce();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
self.isFirst = false;
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
} else {
|
|||
|
|
self._post(url, params, (res) => {
|
|||
|
|
self.detail = res.data;
|
|||
|
|
if (self.isFirst) {
|
|||
|
|
self.productParams = [...self.detail.productParams];
|
|||
|
|
self.productParams.forEach((item, index) => {
|
|||
|
|
item.waresItemsParamsList.forEach((pitem, pindex) => {
|
|||
|
|
if (pindex == 0) {
|
|||
|
|
pitem.number = item.quantity;
|
|||
|
|
} else {
|
|||
|
|
pitem.number = 0;
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
self.getalreadyChioce();
|
|||
|
|
self.isFirst = false;
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
changeFunc(e) {
|
|||
|
|
this.active_id = e;
|
|||
|
|
},
|
|||
|
|
openSpec() {
|
|||
|
|
let obj = {
|
|||
|
|
specData: this.productParams,
|
|||
|
|
detail: this.detail,
|
|||
|
|
};
|
|||
|
|
this.productModel = obj;
|
|||
|
|
this.isTablePopup = true;
|
|||
|
|
},
|
|||
|
|
getalreadyChioce() {
|
|||
|
|
let self = this;
|
|||
|
|
self.alreadyChioce = "";
|
|||
|
|
let has = self.$t("w_0112");
|
|||
|
|
let noone = "";
|
|||
|
|
console.log("--", self.productParams);
|
|||
|
|
self.productParams.forEach((item) => {
|
|||
|
|
if (item.waresItemsParamsList) {
|
|||
|
|
let h = "";
|
|||
|
|
for (let i = 0; i < item.waresItemsParamsList.length; i++) {
|
|||
|
|
let child = item.waresItemsParamsList[i];
|
|||
|
|
if (child.number > 0) {
|
|||
|
|
h += child.specsName + "*" + child.number + " / ";
|
|||
|
|
} else {
|
|||
|
|
h += "";
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
if (h != "") {
|
|||
|
|
has += h;
|
|||
|
|
} else {
|
|||
|
|
noone += item.productName;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
if (self.cid == 21) {
|
|||
|
|
self.detail.waresSkuList.forEach(
|
|||
|
|
(item,
|
|||
|
|
(index) => {
|
|||
|
|
if (item.pkId == self.active_id) {
|
|||
|
|
has = item.specValueNames;
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
if (noone != "") {
|
|||
|
|
self.alreadyChioce = noone;
|
|||
|
|
} else {
|
|||
|
|
has = has.replace(/(\s\/\s)$/gi, "");
|
|||
|
|
self.alreadyChioce = has;
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
/*关闭弹窗*/
|
|||
|
|
closePopup(e) {
|
|||
|
|
this.isTablePopup = false;
|
|||
|
|
if (e) {
|
|||
|
|
this.productParams = e;
|
|||
|
|
this.getalreadyChioce();
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
/*倒计时返回值*/
|
|||
|
|
returnValFunc(e) {},
|
|||
|
|
},
|
|||
|
|
};
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="scss">
|
|||
|
|
.product-detail {
|
|||
|
|
padding-bottom: 150rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.product-detail .product-pic,
|
|||
|
|
.product-detail .product-pic .swiper,
|
|||
|
|
.product-detail .product-pic image {
|
|||
|
|
width: 750rpx;
|
|||
|
|
height: 750rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.product-detail .product-pic .swiper .icon-bofang {
|
|||
|
|
position: absolute;
|
|||
|
|
top: 0;
|
|||
|
|
bottom: 0;
|
|||
|
|
left: 0;
|
|||
|
|
right: 0;
|
|||
|
|
margin: auto;
|
|||
|
|
font-size: 48rpx;
|
|||
|
|
color: #ffffff;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
border: 4rpx solid #ffffff;
|
|||
|
|
width: 120rpx;
|
|||
|
|
height: 120rpx;
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: center;
|
|||
|
|
align-items: center;
|
|||
|
|
background-color: #00000080;
|
|||
|
|
padding-left: 16rpx;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
z-index: 10;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.video {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.product-content {
|
|||
|
|
padding: 22rpx 23rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.preview-box {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 134rpx;
|
|||
|
|
padding: 0 20rpx;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
margin-bottom: -10rpx;
|
|||
|
|
|
|||
|
|
.preview-bg {
|
|||
|
|
width: 704rpx;
|
|||
|
|
height: 134rpx;
|
|||
|
|
position: absolute;
|
|||
|
|
left: 0;
|
|||
|
|
top: 0;
|
|||
|
|
z-index: 0;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.product-info {
|
|||
|
|
width: 704rpx;
|
|||
|
|
background: #ffffff;
|
|||
|
|
border-radius: 15rpx;
|
|||
|
|
position: relative;
|
|||
|
|
z-index: 2;
|
|||
|
|
padding: 42rpx 20rpx 30rpx 20rpx;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
margin-bottom: 22rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.type-tips {
|
|||
|
|
font-size: 22rpx;
|
|||
|
|
padding: 0 17rpx;
|
|||
|
|
line-height: 37rpx;
|
|||
|
|
background-color: #fb3024;
|
|||
|
|
border-radius: 19rpx;
|
|||
|
|
color: #ffffff;
|
|||
|
|
margin-right: 8rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.sellingPoints {
|
|||
|
|
background-color: #f5f5f5;
|
|||
|
|
border-radius: 10rpx;
|
|||
|
|
padding: 13rpx 38rpx;
|
|||
|
|
font-size: 22rpx;
|
|||
|
|
color: #666;
|
|||
|
|
word-break: break-all;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.secend-info {
|
|||
|
|
width: 704rpx;
|
|||
|
|
padding: 0 15rpx 0 19rpx;
|
|||
|
|
background: #ffffff;
|
|||
|
|
border-radius: 15rpx;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
margin-bottom: 25rpx;
|
|||
|
|
|
|||
|
|
.sec-info-item {
|
|||
|
|
padding: 20rpx 0;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
min-height: 90rpx;
|
|||
|
|
border-bottom: 1rpx solid #eee;
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
|
|||
|
|
.sec-info-label {
|
|||
|
|
max-width: 125rpx;
|
|||
|
|
min-width: 105rpx;
|
|||
|
|
flex-shrink: 0;
|
|||
|
|
word-break: break-all;
|
|||
|
|
color: #999999;
|
|||
|
|
margin-right: 20rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.sec-info-item:last-child {
|
|||
|
|
border: none;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.thi-info {
|
|||
|
|
width: 702rpx;
|
|||
|
|
background: #ffffff;
|
|||
|
|
border-radius: 20rpx;
|
|||
|
|
padding: 0 15rpx 15rpx 15rpx;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.thi-nav {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: flex-start;
|
|||
|
|
align-items: center;
|
|||
|
|
overflow-x: auto;
|
|||
|
|
width: 100%;
|
|||
|
|
padding-left: 20rpx;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
border-bottom: 1rpx solid #eee;
|
|||
|
|
margin-bottom: 22rpx;
|
|||
|
|
|
|||
|
|
.thi-nav-item {
|
|||
|
|
font-size: 30rpx;
|
|||
|
|
color: #333;
|
|||
|
|
padding: 0 30rpx;
|
|||
|
|
height: 92rpx;
|
|||
|
|
line-height: 92rpx;
|
|||
|
|
white-space: nowrap;
|
|||
|
|
flex-shrink: 0;
|
|||
|
|
position: relative;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.thi-nav-item.active::after {
|
|||
|
|
position: absolute;
|
|||
|
|
content: "";
|
|||
|
|
left: 0;
|
|||
|
|
right: 0;
|
|||
|
|
margin: auto;
|
|||
|
|
bottom: 0;
|
|||
|
|
width: 30%;
|
|||
|
|
height: 6rpx;
|
|||
|
|
border-radius: 4rpx;
|
|||
|
|
z-index: 1;
|
|||
|
|
background-color: #fb3024;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.btns-wrap {
|
|||
|
|
position: fixed;
|
|||
|
|
height: 100rpx;
|
|||
|
|
right: 0;
|
|||
|
|
bottom: 0;
|
|||
|
|
left: 0;
|
|||
|
|
display: flex;
|
|||
|
|
background: #ffffff;
|
|||
|
|
align-items: center;
|
|||
|
|
z-index: 97;
|
|||
|
|
border-top: 1rpx solid #eee;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.btns-wrap .icon-box {
|
|||
|
|
width: 92rpx;
|
|||
|
|
height: 100rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.btns-wrap .icon-box .iconfont {
|
|||
|
|
font-size: 40rpx;
|
|||
|
|
color: #888888;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.btns-wrap .icon-box .iconfont .num {
|
|||
|
|
position: absolute;
|
|||
|
|
top: 10rpx;
|
|||
|
|
left: 50%;
|
|||
|
|
height: 30rpx;
|
|||
|
|
min-width: 30rpx;
|
|||
|
|
overflow: hidden;
|
|||
|
|
line-height: 32rpx;
|
|||
|
|
border-radius: 15rpx;
|
|||
|
|
font-size: 20rpx;
|
|||
|
|
color: #ffffff;
|
|||
|
|
background: red;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.btns-wrap button,
|
|||
|
|
.btns-wrap button:after {
|
|||
|
|
height: 100rpx;
|
|||
|
|
line-height: 100rpx;
|
|||
|
|
margin: 0;
|
|||
|
|
padding: 0;
|
|||
|
|
border-radius: 0;
|
|||
|
|
border: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.btns-wrap button.add-cart {
|
|||
|
|
background: $dominant-color;
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
width: 214rpx;
|
|||
|
|
height: 75rpx;
|
|||
|
|
line-height: 75rpx;
|
|||
|
|
margin-left: 17rpx;
|
|||
|
|
border-radius: 40rpx 0 0 40rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.btns-wrap button.buy {
|
|||
|
|
background: #fb3024;
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
width: 214rpx;
|
|||
|
|
height: 75rpx;
|
|||
|
|
line-height: 75rpx;
|
|||
|
|
border-radius: 0 40rpx 40rpx 0;
|
|||
|
|
margin-right: 25rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.btns-wrap button.buy.one {
|
|||
|
|
border-radius: 40rpx;
|
|||
|
|
width: 428rpx;
|
|||
|
|
margin-left: 30rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.share-icon {}
|
|||
|
|
|
|||
|
|
.cart_num {
|
|||
|
|
position: absolute;
|
|||
|
|
background: #f6220c;
|
|||
|
|
width: 30rpx;
|
|||
|
|
height: 30rpx;
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: center;
|
|||
|
|
align-items: center;
|
|||
|
|
font-size: 22rpx;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
color: #ffff;
|
|||
|
|
right: 4rpx;
|
|||
|
|
top: 4rpx;
|
|||
|
|
}
|
|||
|
|
</style>
|