You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1098 lines
28 KiB
1098 lines
28 KiB
<template>
|
|
<view class="goods-sku" @touchmove.prevent.stop>
|
|
<view class="sku-layer">
|
|
<uni-popup ref="skuPopup" type="bottom" class="sku-layer" @change="popclose">
|
|
<view class="sku-info" :style="{ height: skuHeight }">
|
|
<view class="header">
|
|
<view class="img-wrap" @click="previewMedia()">
|
|
<image :src="$util.img(goodsDetail.sku_image, { size: 'mid' })" @error="imageError()"
|
|
mode="aspectFit" />
|
|
</view>
|
|
|
|
<view class="main">
|
|
<view class="goods_name">{{ goodsDetail.goods_name }}</view>
|
|
<view class="price-wrap">
|
|
<text class="unit price-style small">￥</text>
|
|
<block v-if="goods_type == 2">
|
|
<!-- 秒杀 -->
|
|
<text class="price price-style large">
|
|
{{
|
|
parseFloat(seckillData.seckill_price)
|
|
.toFixed(2)
|
|
.split('.')[0]
|
|
}}
|
|
</text>
|
|
<text class="unit price-style small">
|
|
.{{
|
|
parseFloat(seckillData.seckill_price)
|
|
.toFixed(2)
|
|
.split('.')[1]
|
|
}}
|
|
</text>
|
|
</block>
|
|
<block v-else-if="goods_type == 3">
|
|
<!-- 拼团 -->
|
|
<text class="price price-style large">
|
|
{{
|
|
parseFloat(collageData.pintuan_price)
|
|
.toFixed(2)
|
|
.split('.')[0]
|
|
}}
|
|
</text>
|
|
<text class="unit price-style small">
|
|
.{{
|
|
parseFloat(collageData.pintuan_price)
|
|
.toFixed(2)
|
|
.split('.')[1]
|
|
}}
|
|
</text>
|
|
</block>
|
|
<block v-else-if="goodsDetail.discount_price > 0 && goods_type == 1">
|
|
<block v-if="goodsDetail.member_price">
|
|
<text class="price price-style large" v-if="
|
|
showPrice(goodsDetail.discount_price) <
|
|
showPrice(goodsDetail.member_price)
|
|
">
|
|
{{
|
|
parseFloat(goodsDetail.discount_price)
|
|
.toFixed(2)
|
|
.split('.')[0]
|
|
}}
|
|
</text>
|
|
<text class="price price-style large" v-else>
|
|
{{
|
|
parseFloat(goodsDetail.member_price)
|
|
.toFixed(2)
|
|
.split('.')[0]
|
|
}}
|
|
</text>
|
|
<text class="unit price-style small" v-if="
|
|
showPrice(goodsDetail.discount_price) <
|
|
showPrice(goodsDetail.member_price)
|
|
">
|
|
.{{
|
|
parseFloat(goodsDetail.discount_price)
|
|
.toFixed(2)
|
|
.split('.')[1]
|
|
}}
|
|
</text>
|
|
<text class="unit price-style small" v-else>
|
|
.{{
|
|
parseFloat(goodsDetail.member_price)
|
|
.toFixed(2)
|
|
.split('.')[1]
|
|
}}
|
|
</text>
|
|
</block>
|
|
<block v-else>
|
|
<text class="price price-style large" v-if="
|
|
showPrice(goodsDetail.discount_price) <
|
|
showPrice(goodsDetail.price)
|
|
">
|
|
{{
|
|
parseFloat(goodsDetail.discount_price)
|
|
.toFixed(2)
|
|
.split('.')[0]
|
|
}}
|
|
</text>
|
|
<text class="price price-style large" v-else>
|
|
{{
|
|
parseFloat(goodsDetail.price)
|
|
.toFixed(2)
|
|
.split('.')[0]
|
|
}}
|
|
</text>
|
|
<text class="unit price-style small" v-if="
|
|
showPrice(goodsDetail.discount_price) <
|
|
showPrice(goodsDetail.price)
|
|
">
|
|
.{{
|
|
parseFloat(goodsDetail.discount_price)
|
|
.toFixed(2)
|
|
.split('.')[1]
|
|
}}
|
|
</text>
|
|
<text class="unit price-style small" v-else>
|
|
.{{
|
|
parseFloat(goodsDetail.price)
|
|
.toFixed(2)
|
|
.split('.')[1]
|
|
}}
|
|
</text>
|
|
</block>
|
|
</block>
|
|
<block v-else>
|
|
<text class="price price-style large" v-if="goodsDetail.member_price">
|
|
{{
|
|
parseFloat(goodsDetail.member_price)
|
|
.toFixed(2)
|
|
.split('.')[0]
|
|
}}
|
|
</text>
|
|
<text class="price price-style large" v-else>
|
|
{{
|
|
parseFloat(goodsDetail.price)
|
|
.toFixed(2)
|
|
.split('.')[0]
|
|
}}
|
|
</text>
|
|
<text class="unit price-style small" v-if="goodsDetail.member_price">
|
|
.{{
|
|
parseFloat(goodsDetail.member_price)
|
|
.toFixed(2)
|
|
.split('.')[1]
|
|
}}
|
|
</text>
|
|
<text class="unit price-style small" v-else>
|
|
.{{
|
|
parseFloat(goodsDetail.price)
|
|
.toFixed(2)
|
|
.split('.')[1]
|
|
}}
|
|
</text>
|
|
</block>
|
|
</view>
|
|
<view class="stock">
|
|
<block v-if="goodsDetail.stock_show">库存{{ goodsDetail.stock }}</block>
|
|
</view>
|
|
|
|
<view class="sku-name font-size-tag"
|
|
v-if="goodsDetail.sku_spec_format && show_sku_spec_format">
|
|
<text class="color-tip">已选规格：</text>
|
|
<text v-for="(item, index) in goodsDetail.sku_spec_format" :key="index"
|
|
class="spec-value">
|
|
{{ item.spec_value_name }}
|
|
</text>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="sku-close iconfont icon-close" @click="closeSkuPopup()"></view>
|
|
</view>
|
|
|
|
<view class="body-item">
|
|
<scroll-view scroll-y class="wrap">
|
|
<view class="sku-list-wrap" v-for="(item, index) in goodsDetail.goods_spec_format"
|
|
:key="index" v-if="show_sku_spec_format">
|
|
<text class="title font-size-base">{{ item.spec_name }}</text>
|
|
<view v-for="(item_value, index_value) in item.value" :key="index_value" :class="{
|
|
selected: item_value['selected'] || skuId == item_value.sku_id,
|
|
disabled:
|
|
item_value['disabled'] ||
|
|
(!item_value['selected'] && disabled)
|
|
}" class="items" @click="change(item_value.sku_id, item_value.spec_id)">
|
|
<image v-if="item_value.image" :src="$util.img(item_value.image, { size: 'small' })"
|
|
@error="valueImageError(index, index_value)" />
|
|
<text>{{ item_value.spec_value_name }}</text>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="number-wrap">
|
|
<view class="number-line">
|
|
<text class="title font-size-base">购买数量</text>
|
|
<text class="limit-txt color-base-text" v-if="limitNumber > 0">
|
|
(每人限购{{ limitNumber }}件)
|
|
<!-- {{ goodsDetail.unit }} 换 件-->
|
|
</text>
|
|
<text v-if="maxBuy > 0 && minBuy > 1" class="limit-txt color-base-text">
|
|
({{ minBuy }}件起售，限购{{ maxBuy }}件)
|
|
</text>
|
|
<text v-else-if="maxBuy > 0" class="limit-txt color-base-text">
|
|
(限购{{ maxBuy }}件)
|
|
</text>
|
|
<text v-else-if="minBuy > 1" class="limit-txt color-base-text">
|
|
({{ minBuy }}件起售)
|
|
</text>
|
|
<view class="number">
|
|
<button type="default" class="decrease color-line-border"
|
|
:class="{ disabled: decreaseDisabled }" @click="changeNum('-')">
|
|
-
|
|
</button>
|
|
<input id="tet" type="number"
|
|
class="uni-input color-line-border font-size-goods-tag" @blur="blur"
|
|
v-model="number" placeholder="0" @input="keyInput(false)" />
|
|
<!-- <input id="tet" type="number" v-model="number"> -->
|
|
<button type="default" class="increase color-line-border"
|
|
:class="{ disabled: increaseDisabled }" @click="changeNum('+')">
|
|
+
|
|
</button>
|
|
<!-- v-if="max_buy == 1" -->
|
|
<!-- <button v-else type="default" class="increase color-line-border" @click="changeNum('+')">+</button> -->
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
<view class="footer" @click="confirm()">
|
|
<button type="primary"
|
|
v-if="goodsDetail.stock && goodsDetail.stock != 0 && type == 'join_cart'">
|
|
加入购物车
|
|
</button>
|
|
<button type="primary"
|
|
v-else-if="goodsDetail.stock && goodsDetail.stock != 0 && type == 'buy_now'">
|
|
立即购买
|
|
</button>
|
|
<button type="primary"
|
|
v-else-if="goodsDetail.stock && goodsDetail.stock != 0 && type == 'confirm'">
|
|
确认
|
|
</button>
|
|
<template v-else-if="goodsDetail.stock && goodsDetail.stock != 0">
|
|
<template v-if="goodsDetail.buy_num">
|
|
<button type="primary" v-if="goodsDetail.buy_num <= goodsDetail.stock">
|
|
立即抢购
|
|
</button>
|
|
<button type="primary" v-else disabled="true">库存不足</button>
|
|
</template>
|
|
<template v-else>
|
|
<button type="primary">立即抢购</button>
|
|
</template>
|
|
</template>
|
|
<button type="primary" v-else disabled="true">库存不足</button>
|
|
</view>
|
|
</view>
|
|
</uni-popup>
|
|
</view>
|
|
<ns-login ref="login"></ns-login>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import uniPopup from '@/components/uni-popup/uni-popup-sku.vue';
|
|
// 商品SKU
|
|
export default {
|
|
name: 'ns-goods-sku',
|
|
components: {
|
|
uniPopup
|
|
},
|
|
props: {
|
|
goodsId: {
|
|
type: [Number, String],
|
|
default: 0
|
|
},
|
|
goodsDetail: {
|
|
type: Object,
|
|
default: null
|
|
},
|
|
disabled: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
pointLimit: {
|
|
type: [Number, String]
|
|
},
|
|
maxBuy: {
|
|
type: Number,
|
|
default: 0
|
|
},
|
|
minBuy: {
|
|
type: Number,
|
|
default: 0
|
|
},
|
|
show_sku_spec_format: {
|
|
type: Boolean,
|
|
default: true
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
document,
|
|
detailData: {}, //普通商品信息
|
|
seckillData: {}, //秒杀商品信息
|
|
collageData: {}, //拼团商品信息
|
|
goods_type: undefined, //商品类型
|
|
isIphoneX: false,
|
|
control: false,
|
|
systemInfo: {}, //系统信息
|
|
number: 1,
|
|
btnSwitch: false, //提交按钮防止重复提交
|
|
type: '', //join_cart：加入购物车，buy_now：立即购买
|
|
callback: null, //回调
|
|
skuId: 0,
|
|
limitNumber: 0, // 限购
|
|
minNumber: 0,
|
|
//是否开启预览，0：不开启，1：开启
|
|
preview: 0,
|
|
cartNumber: 0, // 购物车中商品存在的数量
|
|
goodsSkuDetail: {},
|
|
goodsSkuInfo: null, //所有的商品规格信息
|
|
isLoad: false // 是否首次加载
|
|
};
|
|
},
|
|
created() {
|
|
if (this.goodsId) {
|
|
this.getDetail();
|
|
}
|
|
this.isIphoneX = this.$util.uniappIsIPhoneX();
|
|
this.systemInfo = uni.getSystemInfoSync();
|
|
this.isLoad = true;
|
|
if (this.goodsId && this.goodsDetail.goods_spec_format) {
|
|
this.skuId = this.goodsDetail.sku_id;
|
|
this.getAllGoodsSkuInfo();
|
|
}
|
|
|
|
this.$nextTick(() => {
|
|
this.number = this.minBuy || 1;
|
|
});
|
|
if (uni.getStorageSync('token')) {
|
|
this.control = true;
|
|
} else {
|
|
this.control = false;
|
|
}
|
|
},
|
|
watch: {
|
|
pointLimit(newNum, oldNum) {
|
|
this.limitNumber = Number(newNum);
|
|
},
|
|
goodsDetail: {
|
|
handler(newData, oldData) {
|
|
this.goodsDetail = newData;
|
|
this.skuId = newData.sku_id;
|
|
},
|
|
deep: true // 深度监听父组件传过来对象变化
|
|
},
|
|
minBuy(newData, oldData) {
|
|
if (this.minBuy > 1) {
|
|
this.number = Number(this.minBuy);
|
|
}
|
|
}
|
|
},
|
|
computed: {
|
|
decreaseDisabled: function() {
|
|
let min = this.minBuy > 0 ? this.minBuy : 1;
|
|
return this.number <= min;
|
|
},
|
|
increaseDisabled: function() {
|
|
let max =
|
|
this.maxBuy > 0 && this.maxBuy < this.goodsDetail.stock ?
|
|
this.maxBuy :
|
|
this.goodsDetail.stock;
|
|
return this.number >= max;
|
|
},
|
|
skuHeight() {
|
|
let height = 48;
|
|
if (this.goodsDetail) {
|
|
if (
|
|
this.goodsDetail.goods_spec_format &&
|
|
this.goodsDetail.goods_spec_format.length
|
|
) {
|
|
height = 51 + this.goodsDetail.goods_spec_format.length * 9.5;
|
|
}
|
|
}
|
|
height += 'vh';
|
|
return height;
|
|
}
|
|
},
|
|
methods: {
|
|
btn() {},
|
|
getDetail() {
|
|
this.$api.sendRequest({
|
|
url: '/api/goodssku/detail',
|
|
data: {
|
|
goods_id: this.goodsId
|
|
},
|
|
success: res => {
|
|
this.goods_type = res.data.goods_type;
|
|
if (res.data.goods_type == 1) {
|
|
this.detailData = res.data.goods_sku_detail;
|
|
} else if (res.data.goods_type == 2) {
|
|
this.detailData = res.data.goods_sku_detail;
|
|
this.seckillData = res.data.seckill_info;
|
|
} else if (res.data.goods_type == 3) {
|
|
this.detailData = res.data.goods_sku_detail;
|
|
this.collageData = res.data.pintuan_info;
|
|
}
|
|
// console.log(this.detailData, `detailData`);
|
|
// console.log(this.seckillData, `seckillData`);
|
|
// console.log(this.collageData, `collageData`);
|
|
}
|
|
});
|
|
},
|
|
//【普通商品】获取所有规格信息
|
|
getAllGoodsSkuInfo(callback) {
|
|
this.$api.sendRequest({
|
|
url: '/api/goodssku/goodsSku',
|
|
data: {
|
|
goods_id: this.goodsId
|
|
},
|
|
success: res => {
|
|
if (res.code >= 0) {
|
|
let data = res.data,
|
|
obj = {};
|
|
|
|
res.data.forEach((item, index) => {
|
|
item = this.handleData(item);
|
|
|
|
// 限时折扣
|
|
if (item.promotion_type == 1) {
|
|
item.discountTimeMachine = this.$util.countDown(
|
|
item.end_time - res.timestamp
|
|
);
|
|
}
|
|
|
|
if (item.promotion_type == 1 && item.discountTimeMachine) {
|
|
if (
|
|
item.member_price > 0 &&
|
|
Number(item.member_price) <= Number(item.discount_price)
|
|
) {
|
|
item.show_price = item.member_price;
|
|
} else {
|
|
item.show_price = item.discount_price;
|
|
}
|
|
} else if (item.member_price > 0) {
|
|
item.show_price = item.member_price;
|
|
} else {
|
|
item.show_price = item.price;
|
|
}
|
|
|
|
obj['sku_' + item.sku_id] = item;
|
|
});
|
|
if (this.skuId == 0) this.skuId = res.data[0].sku_id;
|
|
this.goodsSkuInfo = obj;
|
|
this.isLoad = false;
|
|
if (callback) callback();
|
|
} else {
|
|
this.$util.redirectTo('/pages/index/index');
|
|
}
|
|
}
|
|
});
|
|
},
|
|
handleData(item) {
|
|
if (item.sku_images) item.sku_images = item.sku_images.split(',');
|
|
else item.sku_images = [];
|
|
|
|
// 多规格时合并主图
|
|
if (item.goods_spec_format && item.goods_image) {
|
|
item.goods_image = item.goods_image.split(',');
|
|
item.sku_images = item.goods_image.concat(item.sku_images);
|
|
}
|
|
|
|
// 当前商品SKU规格
|
|
if (item.sku_spec_format) item.sku_spec_format = JSON.parse(item.sku_spec_format);
|
|
|
|
// 商品SKU格式
|
|
if (item.goods_spec_format) item.goods_spec_format = JSON.parse(item.goods_spec_format);
|
|
|
|
return item;
|
|
},
|
|
show(type, callback, data) {
|
|
this.callback = callback;
|
|
// 排除购物车切换规格
|
|
if (this.type != 'confirm') {
|
|
this.$refs.skuPopup.open();
|
|
}
|
|
this.type = type;
|
|
this.skuId = this.goodsDetail.sku_id;
|
|
this.preview = this.goodsDetail.preview || 0;
|
|
if (this.type == 'confirm') {
|
|
if (this.isLoad) return;
|
|
|
|
// 购物车切换规格
|
|
this.goodsId = data.goods_id;
|
|
this.skuId = data.sku_id;
|
|
this.getAllGoodsSkuInfo(() => {
|
|
this.$refs.skuPopup.open();
|
|
});
|
|
}
|
|
if (this.type == 'join_cart') this.getCartData();
|
|
this.$forceUpdate();
|
|
},
|
|
hide() {
|
|
this.$emit('hideSkuPop');
|
|
this.$refs.skuPopup.close();
|
|
},
|
|
popclose() {
|
|
if (this.$refs.skuPopup.showPopup) {
|
|
this.$emit('hideSkuPop');
|
|
}
|
|
},
|
|
//查看规格图片
|
|
previewMedia() {
|
|
var paths = [];
|
|
paths.push(
|
|
this.$util.img(this.goodsDetail.sku_image)
|
|
);
|
|
uni.previewImage({
|
|
current: 1,
|
|
urls: paths
|
|
});
|
|
},
|
|
change(skuId, spec_id) {
|
|
if (this.goodsSkuInfo == null) return;
|
|
if (this.disabled) return;
|
|
this.btnSwitch = false;
|
|
|
|
this.skuId = skuId;
|
|
|
|
// 清空选择
|
|
for (var i = 0; i < this.goodsDetail.goods_spec_format.length; i++) {
|
|
var sku = this.goodsDetail.goods_spec_format[i];
|
|
for (var j = 0; j < sku.value.length; j++) {
|
|
// 排除当前点击的规格值
|
|
if (spec_id == this.goodsDetail.goods_spec_format[i].value[j].spec_id) {
|
|
this.goodsDetail.goods_spec_format[i].value[j].selected = false;
|
|
}
|
|
}
|
|
}
|
|
|
|
this.goodsSkuDetail = this.goodsSkuInfo['sku_' + this.skuId];
|
|
this.$emit('refresh', this.goodsSkuDetail);
|
|
this.$emit('getSkuId', this.skuId);
|
|
this.keyInput(true);
|
|
},
|
|
showPrice(price) {
|
|
return parseFloat(price);
|
|
},
|
|
changeNum(tag) {
|
|
if (this.goodsDetail.stock == 0) return;
|
|
var min = 1;
|
|
var stock = this.goodsDetail.stock;
|
|
|
|
if (this.maxBuy == 1) {
|
|
stock = 1;
|
|
}
|
|
|
|
if (this.goodsDetail.is_limit == 1 && this.maxBuy > 0 && this.maxBuy < stock)
|
|
stock = this.maxBuy;
|
|
|
|
if (
|
|
this.goodsDetail.is_limit == 1 &&
|
|
this.goodsDetail.limit_type == 2 &&
|
|
this.maxBuy > 0 &&
|
|
this.goodsDetail.purchased_num > 0
|
|
) {
|
|
let maxBuy = this.maxBuy - this.goodsDetail.purchased_num;
|
|
stock = maxBuy < this.goodsDetail.stock ? maxBuy : this.goodsDetail.stock;
|
|
}
|
|
|
|
if (this.minBuy > 1) {
|
|
min = this.minBuy;
|
|
}
|
|
|
|
if (tag == '+') {
|
|
// 加
|
|
if (this.number < stock) {
|
|
this.number++;
|
|
} else {
|
|
if (this.number >= this.goodsDetail.stock) {
|
|
this.$util.showToast({
|
|
title: '库存不足'
|
|
});
|
|
return;
|
|
}
|
|
|
|
if (this.goodsDetail.is_limit == 1 && this.maxBuy > 0) {
|
|
if (this.goodsDetail.limit_type == 1) {
|
|
this.$util.showToast({
|
|
title: '该商品每次最多购买' + this.maxBuy + this.goodsDetail.unit
|
|
});
|
|
return;
|
|
}
|
|
|
|
if (this.goodsDetail.limit_type == 2) {
|
|
let message = '该商品每人限购' + this.maxBuy + this.goodsDetail.unit;
|
|
message +=
|
|
this.goodsDetail.purchased_num > 0 ?
|
|
'，您已购买了' +
|
|
this.goodsDetail.purchased_num +
|
|
this.goodsDetail.unit :
|
|
'';
|
|
this.$util.showToast({
|
|
title: message
|
|
});
|
|
return;
|
|
}
|
|
}
|
|
|
|
if (
|
|
this.type == 'seckill' &&
|
|
this.goodsDetail.seckill_id &&
|
|
this.goodsDetail.num > 0
|
|
) {
|
|
this.$util.showToast({
|
|
title: '该商品每人限购' + this.goodsDetail.num + this.goodsDetail.unit
|
|
});
|
|
return;
|
|
}
|
|
|
|
if (
|
|
this.type == 'presale' &&
|
|
this.goodsDetail.presale_id &&
|
|
this.goodsDetail.presale_num > 0
|
|
) {
|
|
this.$util.showToast({
|
|
title: '该商品每人限购' +
|
|
this.goodsDetail.presale_num +
|
|
this.goodsDetail.unit
|
|
});
|
|
return;
|
|
}
|
|
}
|
|
} else if (tag == '-') {
|
|
// 减
|
|
if (this.number > min) {
|
|
this.number -= 1;
|
|
} else {
|
|
if (this.minBuy > 1) {
|
|
this.$util.showToast({
|
|
title: '该商品' + this.minBuy + '件起售'
|
|
});
|
|
}
|
|
return;
|
|
}
|
|
}
|
|
if (this.number > this.limitNumber && this.limitNumber) {
|
|
this.number = this.limitNumber;
|
|
}
|
|
},
|
|
blur() {
|
|
if (!this.number) {
|
|
this.number = 0;
|
|
}
|
|
if (this.number > this.limitNumber && this.limitNumber) {
|
|
this.number = this.limitNumber;
|
|
}
|
|
if (this.number < this.minNumber && this.minNumber) {
|
|
this.number = this.minNumber;
|
|
}
|
|
|
|
if (this.goodsDetail.is_limit == 1 && this.maxBuy > 0 && this.number > this.maxBuy) {
|
|
this.number = this.maxBuy;
|
|
}
|
|
|
|
if (
|
|
this.goodsDetail.is_limit == 1 &&
|
|
this.maxBuy > 0 &&
|
|
this.goodsDetail.purchased_num > 0
|
|
) {
|
|
let maxBuy = this.maxBuy - this.goodsDetail.purchased_num;
|
|
if (this.number > maxBuy) this.number = maxBuy;
|
|
}
|
|
if (this.number < this.minBuy && this.minBuy > 0) {
|
|
this.number = this.minBuy;
|
|
}
|
|
|
|
if (this.number <= 0) {
|
|
this.number = 1;
|
|
}
|
|
},
|
|
//输入数量
|
|
keyInput(flag, callback) {
|
|
setTimeout(() => {
|
|
var stock = this.goodsDetail.stock;
|
|
|
|
// 库存为0
|
|
if (this.goodsDetail.stock == 0) {
|
|
this.number = 0;
|
|
return;
|
|
}
|
|
|
|
// 防止空
|
|
if (flag && this.number.length == 0) this.number = 1;
|
|
|
|
// 防止输入0和负数、非法输入
|
|
if (flag && (this.number <= 0 || isNaN(this.number))) this.number = 1;
|
|
|
|
if (this.number > stock) {
|
|
this.number = stock;
|
|
}
|
|
// 商品起售数
|
|
if (this.minBuy > 1 && this.number < this.minBuy) {
|
|
this.number = this.minBuy;
|
|
}
|
|
|
|
if (flag) this.number = parseInt(this.number);
|
|
if (callback) callback();
|
|
}, 0);
|
|
},
|
|
|
|
//提交
|
|
confirm() {
|
|
// 删除待付款物流方式缓存
|
|
uni.removeStorageSync('delivery');
|
|
if (this.preview) {
|
|
this.$util.showToast({
|
|
title: '预览商品无法购买'
|
|
});
|
|
return;
|
|
}
|
|
|
|
if (!uni.getStorageSync('token')) {
|
|
this.$refs.login.open();
|
|
return;
|
|
}
|
|
|
|
//纠正数量
|
|
this.keyInput(true, () => {
|
|
if (this.goodsDetail.stock == 0) {
|
|
this.$util.showToast({
|
|
title: '商品已售罄'
|
|
});
|
|
return;
|
|
}
|
|
|
|
if (this.number.length == 0 || this.number <= 0) {
|
|
this.$util.showToast({
|
|
title: '购买数量不能小于等于0'
|
|
});
|
|
return;
|
|
}
|
|
|
|
if (this.goodsDetail.buy_num > this.goodsDetail.stock) {
|
|
this.$util.showToast({
|
|
title: '库存小于最低购买数量'
|
|
});
|
|
return;
|
|
}
|
|
|
|
if (this.number > this.goodsDetail.stock) {
|
|
this.$util.showToast({
|
|
title: '库存不足'
|
|
});
|
|
return;
|
|
}
|
|
|
|
if (
|
|
this.goodsDetail.is_limit == 1 &&
|
|
this.goodsDetail.limit_type == 1 &&
|
|
this.maxBuy > 0 &&
|
|
this.number > this.maxBuy
|
|
) {
|
|
this.$util.showToast({
|
|
title: '该商品每次最多购买' + this.maxBuy + this.goodsDetail.unit
|
|
});
|
|
return;
|
|
}
|
|
|
|
if (
|
|
this.goodsDetail.is_limit == 1 &&
|
|
this.goodsDetail.limit_type == 2 &&
|
|
this.maxBuy > 0 &&
|
|
this.number + this.goodsDetail.purchased_num > this.maxBuy
|
|
) {
|
|
let message = '该商品每人限购' + this.maxBuy + this.goodsDetail.unit;
|
|
message +=
|
|
this.goodsDetail.purchased_num > 0 ?
|
|
'，您已购买了' +
|
|
this.goodsDetail.purchased_num +
|
|
this.goodsDetail.unit :
|
|
'';
|
|
this.$util.showToast({
|
|
title: message
|
|
});
|
|
return;
|
|
}
|
|
|
|
if (
|
|
this.type == 'join_cart' &&
|
|
this.goodsDetail.is_limit == 1 &&
|
|
this.maxBuy > 0 &&
|
|
this.cartNumber + this.number > this.maxBuy
|
|
) {
|
|
this.$util.showToast({
|
|
title: '该商品每人限购' + this.maxBuy + this.goodsDetail.unit
|
|
});
|
|
return;
|
|
}
|
|
|
|
if (this.btnSwitch) return;
|
|
this.btnSwitch = true;
|
|
|
|
if (this.type == 'join_cart') {
|
|
this.$api.sendRequest({
|
|
url: '/api/cart/add',
|
|
data: {
|
|
sku_id: this.skuId,
|
|
num: this.number
|
|
},
|
|
success: res => {
|
|
var data = res.data;
|
|
if (data > 0) {
|
|
this.$util.showToast({
|
|
title: '加入购物车成功'
|
|
});
|
|
this.cartNumber += this.number;
|
|
if (this.callback) this.callback();
|
|
}
|
|
this.$refs.skuPopup.close();
|
|
this.btnSwitch = false;
|
|
},
|
|
fail: res => {
|
|
this.$refs.skuPopup.close();
|
|
this.btnSwitch = false;
|
|
}
|
|
});
|
|
} else if (this.type == 'buy_now') {
|
|
var data = {
|
|
goods_type: this.goods_type,
|
|
sku_id: this.skuId,
|
|
num: this.number,
|
|
cart_ids: undefined,
|
|
coupon: null
|
|
};
|
|
uni.setStorage({
|
|
key: 'orderCreateData',
|
|
data: data,
|
|
success: () => {
|
|
this.$util.redirectTo('/page_goods/payment/payment');
|
|
this.btnSwitch = false;
|
|
}
|
|
});
|
|
} else if (this.type == 'confirm') {
|
|
this.btnSwitch = false;
|
|
this.$refs.skuPopup.close();
|
|
if (this.callback) this.callback(this.skuId, this.number);
|
|
}
|
|
});
|
|
},
|
|
closeSkuPopup() {
|
|
this.$emit('hideSkuPop');
|
|
this.$refs.skuPopup.close();
|
|
},
|
|
imageError() {
|
|
this.goodsDetail.sku_image = this.$util.getDefaultImage().goods;
|
|
this.$forceUpdate();
|
|
},
|
|
valueImageError(index, index_value) {
|
|
this.goodsDetail.goods_spec_format[index].value[
|
|
index_value
|
|
].image = this.$util.getDefaultImage().goods;
|
|
this.$forceUpdate();
|
|
},
|
|
// 获取购物车数据
|
|
getCartData() {
|
|
this.$api.sendRequest({
|
|
url: '/api/cart/goodsnum',
|
|
data: {
|
|
goods_id: this.goodsDetail.goods_id
|
|
},
|
|
success: res => {
|
|
if (res.code >= 0) {
|
|
this.cartNumber = res.data;
|
|
}
|
|
}
|
|
});
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.sku-layer .sku-info {
|
|
max-height: 75vh;
|
|
height: 45vh;
|
|
position: relative;
|
|
z-index: 999;
|
|
}
|
|
|
|
.sku-layer .sku-info .header {
|
|
padding: 30rpx 30rpx 20rpx 210rpx;
|
|
position: relative;
|
|
border-bottom: 2rpx solid $color-line;
|
|
min-height: 170rpx;
|
|
}
|
|
|
|
.sku-layer .sku-info .header .img-wrap {
|
|
width: 160rpx;
|
|
height: 160rpx;
|
|
position: absolute;
|
|
left: 20rpx;
|
|
border-radius: $border-radius;
|
|
overflow: hidden;
|
|
padding: 2rpx;
|
|
background-color: #fff;
|
|
line-height: 208rpx;
|
|
}
|
|
|
|
.sku-layer .sku-info .header .img-wrap image {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.sku-layer .sku-info .main {
|
|
font-size: 24rpx;
|
|
line-height: 40rpx;
|
|
padding-right: 40rpx;
|
|
|
|
.price-wrap {
|
|
font-weight: bold;
|
|
|
|
.unit {
|
|
margin-right: 4rpx;
|
|
}
|
|
}
|
|
|
|
.stock {
|
|
font-size: $font-size-tag;
|
|
color: $color-tip;
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 2;
|
|
-webkit-box-orient: vertical;
|
|
height: 70rpx;
|
|
overflow: hidden;
|
|
}
|
|
}
|
|
|
|
.sku-layer .sku-info .main .price {
|
|
word-wrap: break-word;
|
|
}
|
|
|
|
.sku-layer .sku-info .main .goods_name {
|
|
font-size: 30rpx;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.sku-layer .sku-info .main .sku-name {
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 1;
|
|
-webkit-box-orient: vertical;
|
|
overflow: hidden;
|
|
height: 42rpx;
|
|
|
|
.spec-value {
|
|
&::after {
|
|
content: '/';
|
|
}
|
|
|
|
&:last-child {
|
|
&::after {
|
|
content: '';
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.sku-layer .sku-info .sku-close {
|
|
position: absolute;
|
|
top: 20rpx;
|
|
right: 40rpx;
|
|
width: 40rpx;
|
|
height: 80rpx;
|
|
font-size: 40rpx;
|
|
}
|
|
|
|
.sku-layer .body-item {
|
|
padding: 0 30rpx;
|
|
height: calc(100% - 360rpx);
|
|
box-sizing: border-box;
|
|
overflow: scroll;
|
|
}
|
|
|
|
.sku-layer .body-item .wrap {
|
|
height: calc(100% - 60rpx);
|
|
}
|
|
|
|
.sku-layer .body-item .sku-list-wrap {
|
|
padding-bottom: 0rpx;
|
|
}
|
|
|
|
.sku-layer .body-item .sku-list-wrap .title {
|
|
padding: 20rpx 0;
|
|
display: block;
|
|
}
|
|
|
|
.sku-layer .body-item .sku-list-wrap .items {
|
|
position: relative;
|
|
display: inline-block;
|
|
border: 2rpx solid $color-line;
|
|
padding: 4rpx 30rpx;
|
|
border-radius: 8rpx;
|
|
margin: 0 20rpx 20rpx 0;
|
|
background-color: #fff;
|
|
font-size: $font-size-tag;
|
|
}
|
|
|
|
.sku-layer .body-item .sku-list-wrap .items.disabled {
|
|
border: 2rpx dashed;
|
|
}
|
|
|
|
.sku-layer .body-item .sku-list-wrap .items image {
|
|
height: 44rpx;
|
|
width: 44rpx;
|
|
border-radius: $border-radius;
|
|
margin-right: 10rpx;
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.sku-layer .body-item .number-wrap .number-line {
|
|
padding: 20rpx 0;
|
|
line-height: 72rpx;
|
|
}
|
|
|
|
.sku-layer .body-item .number-wrap .title {
|
|
font-weight: 400;
|
|
}
|
|
|
|
.sku-layer .body-item .number-wrap .limit-txt {}
|
|
|
|
.sku-layer .body-item .number-wrap .number {
|
|
display: flex;
|
|
height: 72rpx;
|
|
border-radius: 6rpx;
|
|
float: right;
|
|
}
|
|
|
|
.sku-layer .body-item .number-wrap .number button {
|
|
display: inline-block;
|
|
line-height: 64rpx;
|
|
height: 68rpx;
|
|
width: 60rpx;
|
|
font-size: 48rpx;
|
|
box-sizing: content-box;
|
|
border: 2rpx solid $color-line;
|
|
padding: 0;
|
|
margin: 0;
|
|
border-radius: 0;
|
|
background-color: #fff !important;
|
|
|
|
&.disabled {
|
|
background: #f7f7f7 !important;
|
|
}
|
|
}
|
|
|
|
.sku-layer .body-item .number-wrap .number button.decrease {
|
|
border-right-width: 0 !important;
|
|
}
|
|
|
|
.sku-layer .body-item .number-wrap .number button.increase {
|
|
border-left: 0 !important;
|
|
}
|
|
|
|
.sku-layer .body-item .number-wrap .number button:after {
|
|
border-radius: 0;
|
|
border: none;
|
|
}
|
|
|
|
.sku-layer .body-item .number-wrap .number input {
|
|
display: inline-block;
|
|
line-height: 64rpx;
|
|
height: 68rpx;
|
|
width: 72rpx;
|
|
text-align: center;
|
|
font-weight: 700;
|
|
border: 2rpx solid;
|
|
margin: 0;
|
|
padding: 0;
|
|
vertical-align: top;
|
|
background-color: $color-bg !important;
|
|
}
|
|
|
|
.sku-layer .footer {
|
|
height: 100rpx;
|
|
width: 100%;
|
|
position: absolute;
|
|
bottom: 30rpx;
|
|
bottom: calc(30rpx + constant(safe-area-inset-bottom));
|
|
bottom: calc(30rpx + env(safe-area-inset-bottom));
|
|
color: #fff;
|
|
z-index: 1;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: flex-start;
|
|
|
|
button {
|
|
width: 100%;
|
|
height: 80rpx;
|
|
background-color: var(--goods-btn-color);
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
</style>
|