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.
1191 lines
26 KiB
1191 lines
26 KiB
<template>
|
|
<!-- 一行两个 -->
|
|
<view class="directionItem">
|
|
<view class="cover-box" @click="click">
|
|
<view class="cover1"><img :src="item[coverName]" /></view>
|
|
|
|
<!-- <view class="sales">销量：{{ item.sale_num }}</view> -->
|
|
</view>
|
|
<view class="content">
|
|
<view class="title" @click="click">{{ item.goods_name }}</view>
|
|
<!-- 客户需要修改 只有名字 -->
|
|
<view class="labels-1" @click="click">
|
|
<view class="label-item">产地：{{ item.address }}</view>
|
|
<view class="label-item">规格：{{ item.spec_name||'-' }}</view>
|
|
<view class="label-item" v-if=" item.execu_content">执行标准：{{ item.execu_content.title }}</view>
|
|
<view class="label-item">生产企业：{{ item.business }}</view>
|
|
</view>
|
|
|
|
<view class="bottom" v-if="userInfo.show_price && token">
|
|
<view class="price">
|
|
¥
|
|
<text class="price1">
|
|
{{
|
|
parseFloat(showPrice(item))
|
|
.toFixed(2)
|
|
.split('.')[0]
|
|
}}
|
|
</text>
|
|
.
|
|
<text>
|
|
{{
|
|
parseFloat(showPrice(item))
|
|
.toFixed(2)
|
|
.split('.')[1]
|
|
}}
|
|
</text>
|
|
/{{ item.unit ? item.unit : '件' }}
|
|
</view>
|
|
<view class="numBox">
|
|
<div class="tag">
|
|
<div v-if="item.label_name">{{ item.label_name }}</div>
|
|
</div>
|
|
<div class="btn" v-if="item.stock">
|
|
<view slot="minus" class="minus" @click="numChange(item, 'minus')">
|
|
<u-icon name="minus-circle-fill" size="20" color="var(--base-color)"></u-icon>
|
|
</view>
|
|
<!-- <input
|
|
slot="input"
|
|
type="number"
|
|
style="width: 28px;text-align: center;"
|
|
class="input"
|
|
v-model="item.cart_num || 0"
|
|
@input="inputBlur"
|
|
@click="btn"
|
|
@blur="(id)=>(btn1(item.sku_id,id))"
|
|
/> -->
|
|
<!-- @confirm="inputBlur($event, item)" -->
|
|
<view class="df aic jcsa" style="margin:0 24rpx;" @click="focus(item)">
|
|
{{ item.cart_num || 0 }}
|
|
</view>
|
|
<view slot="plus" class="minus" @click="numChange(item, 'add')">
|
|
<u-icon name="plus-circle-fill" size="20" color="var(--base-color)"></u-icon>
|
|
</view>
|
|
</div>
|
|
<div class="btn" v-else>
|
|
<div>库存不足</div>
|
|
</div>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<u-loading-page :loading="loading"></u-loading-page>
|
|
<!-- <view v-if="goods_Item_Detail"> -->
|
|
<uni-popup ref="skuPopup" type="bottom" class="sku-layer" v-if="goods_Item_Detail">
|
|
<view class="sku-info">
|
|
<view class="header">
|
|
<view class="img-wrap" @click="previewMedia()">
|
|
<image :src="$util.img(goods_Item_Detail.sku_image, { size: 'mid' })" mode="aspectFit" />
|
|
</view>
|
|
|
|
<view class="main">
|
|
<view class="goods_name">{{ goods_Item_Detail.goods_name }}</view>
|
|
<view class="price-wrap">
|
|
<text class="unit price-style small">￥</text>
|
|
|
|
<block>
|
|
<text class="price price-style large">
|
|
{{
|
|
parseFloat(showPrice(goods_Item_Detail))
|
|
.toFixed(2)
|
|
.split('.')[0]
|
|
}}
|
|
</text>
|
|
|
|
<text class="unit price-style small">
|
|
.{{
|
|
parseFloat(showPrice(goods_Item_Detail))
|
|
.toFixed(2)
|
|
.split('.')[1]
|
|
}}
|
|
</text>
|
|
</block>
|
|
</view>
|
|
<view class="stock">
|
|
<block v-if="goods_Item_Detail.stock_show">
|
|
库存{{ goods_Item_Detail.stock }}
|
|
</block>
|
|
</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="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 }}件)
|
|
</text>
|
|
<text v-if="
|
|
goods_Item_Detail.maxBuy > 0 && goods_Item_Detail.minBuy > 1
|
|
" class="limit-txt color-base-text">
|
|
({{ goods_Item_Detail.minBuy }}件起售，限购{{
|
|
goods_Item_Detail.maxBuy
|
|
}}件)
|
|
</text>
|
|
<text v-else-if="goods_Item_Detail.maxBuy > 0" class="limit-txt color-base-text">
|
|
(限购{{ goods_Item_Detail.maxBuy }}件)
|
|
</text>
|
|
<text v-else-if="goods_Item_Detail.minBuy > 1" class="limit-txt color-base-text">
|
|
({{ goods_Item_Detail.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" disabled="true"
|
|
v-model="number" placeholder="0" />
|
|
|
|
<button type="default" class="increase color-line-border"
|
|
:class="{ disabled: increaseDisabled }" @click="changeNum('+')">
|
|
+
|
|
</button>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
|
|
<u-number-keyboard mode="number" @change="change" :dotDisabled="true"
|
|
@backspace="backspace"></u-number-keyboard>
|
|
|
|
<view class="footer">
|
|
<button type="primary" v-if="goods_Item_Detail.stock" @click="confirm()">
|
|
加入购物车
|
|
</button>
|
|
|
|
<button type="primary" v-else disabled="true">库存不足</button>
|
|
</view>
|
|
</view>
|
|
</uni-popup>
|
|
<!-- </view> -->
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import nsGoodsSku from '@/components/ns-goods-sku/ns-goods-sku.vue';
|
|
import { mapGetters } from 'vuex';
|
|
export default {
|
|
components: { nsGoodsSku },
|
|
name: 'directionGoodsItem',
|
|
props: {
|
|
item: {
|
|
default: () => {}
|
|
},
|
|
pageUrlName: {
|
|
default: ''
|
|
},
|
|
coverName: {
|
|
default: 'cover'
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
token: uni.getStorageSync('token'),
|
|
goodsSkuDetail: {
|
|
goods_id: 0,
|
|
goods_service: []
|
|
},
|
|
goods_name: '',
|
|
discount_price: '',
|
|
sku_id: '',
|
|
unit: '',
|
|
stock: Number,
|
|
goods_image: '',
|
|
number: 1,
|
|
limitNumber: 0, // 限购
|
|
minNumber: 0,
|
|
goods_Item_Detail: {},
|
|
loading: false,
|
|
keyboardShow: true,
|
|
pageName: "",
|
|
};
|
|
},
|
|
computed: {
|
|
...mapGetters(['userInfo']),
|
|
decreaseDisabled: function() {
|
|
let min = this.goods_Item_Detail.minBuy > 0 ? this.goods_Item_Detail.minBuy : 1;
|
|
return this.goods_Item_Detail.number <= min;
|
|
},
|
|
increaseDisabled: function() {
|
|
let max =
|
|
this.goods_Item_Detail.maxBuy > 0 &&
|
|
this.goods_Item_Detail.maxBuy < this.goods_Item_Detail.stock ?
|
|
this.goods_Item_Detail.maxBuy :
|
|
this.goods_Item_Detail.stock;
|
|
return this.goods_Item_Detail.number >= max;
|
|
},
|
|
skuHeight() {
|
|
let height = 48;
|
|
if (this.goods_Item_Detail) {
|
|
if (
|
|
this.goods_Item_Detail.goods_spec_format &&
|
|
this.goods_Item_Detail.goods_spec_format.length
|
|
) {
|
|
height = 51 + this.goods_Item_Detail.goods_spec_format.length * 9.5;
|
|
}
|
|
}
|
|
height += 'vh';
|
|
return height;
|
|
},
|
|
|
|
},
|
|
watch: {
|
|
pageUrlName(e) {
|
|
this.pageName = e;
|
|
},
|
|
},
|
|
mounted() {
|
|
this.number = this.item.cart_num;
|
|
},
|
|
methods: {
|
|
change(e) {
|
|
if (!this.number) {
|
|
this.number = e;
|
|
} else {
|
|
this.number = this.number + String(e);
|
|
}
|
|
|
|
},
|
|
backspace() {
|
|
let str = String(this.number);
|
|
str = str.slice(0, -1);
|
|
this.number = str;
|
|
},
|
|
focus(item) {
|
|
this.number = item.cart_num;
|
|
uni.hideKeyboard();
|
|
this.getGoodsItem(item);
|
|
uni.removeStorageSync('buyer_message');
|
|
},
|
|
getGoodsItem(item) {
|
|
this.loading = true;
|
|
this.$api.sendRequest({
|
|
url: '/api/goodssku/detail',
|
|
data: {
|
|
goods_id: item.goods_id
|
|
},
|
|
success: res => {
|
|
this.goods_Item_Detail = res.data.goods_sku_detail;
|
|
this.goods_Item_Detail.goods_spec_format = JSON.parse(
|
|
res.data.goods_sku_detail.goods_spec_format
|
|
);
|
|
this.goods_Item_Detail.number = item.cart_num;
|
|
this.$refs.skuPopup.open();
|
|
uni.$emit('cartBottomShow', false);
|
|
this.loading = false;
|
|
}
|
|
});
|
|
},
|
|
|
|
click() {
|
|
this.$emit('click', this.item);
|
|
},
|
|
goodsTag(data) {
|
|
return data.label_name || '';
|
|
},
|
|
showPrice(data) {
|
|
let price = data.discount_price;
|
|
if (data.member_price && parseFloat(data.member_price) < parseFloat(price))
|
|
price = data.member_price;
|
|
return price;
|
|
},
|
|
numChange(item, type) {
|
|
console.log(item);
|
|
if (item.max_buy) {
|
|
// is_limit 是否限购 limit_type限购类型 1单次 2长期
|
|
if (item.is_limit && item.limit_type == 1) {
|
|
if (item.cart_num >= item.max_buy && type == "add") {
|
|
this.$util.showToast({
|
|
title: `每人限购${item.max_buy}件`
|
|
});
|
|
return
|
|
}
|
|
|
|
|
|
} else if (item.is_limit && item.limit_type == 2) {
|
|
if (item.purchased_num >= item.max_buy) {
|
|
this.$util.showToast({
|
|
// title: `每人长期限购${item.max_buy}件，您已购买${item.purchased_num}件`
|
|
title: `每人长期限购${item.max_buy}件`
|
|
});
|
|
return
|
|
}
|
|
}
|
|
}
|
|
if (type == 'add') {
|
|
if (item.cart_num >= item.stock) {
|
|
this.$util.showToast({
|
|
title: '库存不足'
|
|
});
|
|
return;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// if (item.max_buy) {
|
|
// if (item.purchased_num >= item.max_buy) {
|
|
// this.$util.showToast({
|
|
// title: `每人限购${item.max_buy}件，您已购买${item.purchased_num}件`
|
|
// });
|
|
// return
|
|
// }
|
|
// }
|
|
|
|
|
|
|
|
item.cart_num = Number(item.cart_num);
|
|
let setp = 1;
|
|
item.cart_num ? item.cart_num : (item.cart_num = 0);
|
|
if (type == 'minus' && !item.cart_num) {
|
|
return;
|
|
}
|
|
if (!item.cart_num || item.is_multiple) {
|
|
setp = item.min_buy || 1;
|
|
} else {
|
|
if (type == 'add') {
|
|
setp = item.cart_num >= item.min_buy ? 1 : item.min_buy;
|
|
} else {
|
|
setp = item.cart_num == item.min_buy ? item.min_buy : 1;
|
|
}
|
|
}
|
|
type == 'add' ? (item.cart_num += setp) : (item.cart_num -= setp);
|
|
|
|
|
|
console.log(item);
|
|
console.log(item.cart_num);
|
|
this.$api.sendRequest({
|
|
url: '/api/cart/add',
|
|
data: {
|
|
num: item.cart_num,
|
|
sku_id: item.sku_id,
|
|
is_all: 1
|
|
},
|
|
success: ({ data }) => {
|
|
if (data > 0) {
|
|
if (type == 'add'){
|
|
this.$util.showToast({
|
|
title: '加入购物车成功'
|
|
});
|
|
}else{
|
|
this.$util.showToast({
|
|
title: '移除购物车成功'
|
|
});
|
|
}
|
|
|
|
this.$forceUpdate();
|
|
this.cartNumber += this.number;
|
|
if (this.callback) this.callback();
|
|
this.$store.dispatch('getCartNumber');
|
|
// uni.$emit('refresh', true);
|
|
}
|
|
|
|
}
|
|
});
|
|
},
|
|
//查看规格图片
|
|
previewMedia() {
|
|
var paths = [];
|
|
paths.push(
|
|
this.$util.img(this.goods_Item_Detail.sku_image)
|
|
);
|
|
uni.previewImage({
|
|
current: 1,
|
|
urls: paths
|
|
});
|
|
},
|
|
closeSkuPopup() {
|
|
this.number = this.item.cart_num;
|
|
this.$refs.skuPopup.close();
|
|
uni.$emit('cartBottomShow', true);
|
|
},
|
|
changeNum(tag) {
|
|
|
|
if (this.goods_Item_Detail.max_buy) {
|
|
// is_limit 是否限购 limit_type限购类型 1单次 2长期
|
|
if (this.goods_Item_Detail.is_limit && this.goods_Item_Detail.limit_type == 1) {
|
|
if (this.goods_Item_Detail.number >= this.goods_Item_Detail.max_buy && tag == "+") {
|
|
this.$util.showToast({
|
|
title: `每人限购${this.goods_Item_Detail.max_buy}件`
|
|
});
|
|
return
|
|
}
|
|
|
|
|
|
} else if (this.goods_Item_Detail.is_limit && this.goods_Item_Detail.limit_type == 2) {
|
|
if (this.goods_Item_Detail.purchased_num >= this.goods_Item_Detail.max_buy) {
|
|
this.$util.showToast({
|
|
// title: `每人长期限购${this.goods_Item_Detail.max_buy}件，您已购买${this.goods_Item_Detail.purchased_num}件`
|
|
title: `每人长期限购${this.goods_Item_Detail.max_buy}件`
|
|
});
|
|
return
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
if (this.goods_Item_Detail.stock == 0) return;
|
|
var min = 1;
|
|
var stock = this.goods_Item_Detail.stock;
|
|
|
|
if (this.maxBuy == 1) {
|
|
stock = 1;
|
|
}
|
|
|
|
if (this.goods_Item_Detail.is_limit == 1 && this.maxBuy > 0 && this.maxBuy < stock)
|
|
stock = this.maxBuy;
|
|
|
|
if (
|
|
this.goods_Item_Detail.is_limit == 1 &&
|
|
this.goods_Item_Detail.limit_type == 2 &&
|
|
this.maxBuy > 0 &&
|
|
this.goods_Item_Detail.purchased_num > 0
|
|
) {
|
|
let maxBuy = this.maxBuy - this.goods_Item_Detail.purchased_num;
|
|
stock =
|
|
maxBuy < this.goods_Item_Detail.stock ? maxBuy : this.goods_Item_Detail.stock;
|
|
}
|
|
|
|
if (this.minBuy > 1) {
|
|
min = this.minBuy;
|
|
}
|
|
|
|
if (tag == '+') {
|
|
// 加
|
|
if (this.number < stock) {
|
|
this.number++;
|
|
} else {
|
|
if (this.number >= this.goods_Item_Detail.stock) {
|
|
this.$util.showToast({
|
|
title: '库存不足'
|
|
});
|
|
return;
|
|
}
|
|
|
|
if (this.goods_Item_Detail.is_limit == 1 && this.maxBuy > 0) {
|
|
if (this.goods_Item_Detail.limit_type == 1) {
|
|
this.$util.showToast({
|
|
title: '该商品每次最多购买' + this.maxBuy + this.goods_Item_Detail.unit
|
|
});
|
|
return;
|
|
}
|
|
|
|
if (this.goods_Item_Detail.limit_type == 2) {
|
|
let message =
|
|
'该商品每人限购' + this.maxBuy + this.goods_Item_Detail.unit;
|
|
message +=
|
|
this.goods_Item_Detail.purchased_num > 0 ?
|
|
'，您已购买了' +
|
|
this.goods_Item_Detail.purchased_num +
|
|
this.goods_Item_Detail.unit :
|
|
'';
|
|
this.$util.showToast({
|
|
title: message
|
|
});
|
|
return;
|
|
}
|
|
}
|
|
|
|
if (
|
|
this.type == 'seckill' &&
|
|
this.goods_Item_Detail.seckill_id &&
|
|
this.goods_Item_Detail.num > 0
|
|
) {
|
|
this.$util.showToast({
|
|
title: '该商品每人限购' +
|
|
this.goods_Item_Detail.num +
|
|
this.goods_Item_Detail.unit
|
|
});
|
|
return;
|
|
}
|
|
|
|
if (
|
|
this.type == 'presale' &&
|
|
this.goods_Item_Detail.presale_id &&
|
|
this.goods_Item_Detail.presale_num > 0
|
|
) {
|
|
this.$util.showToast({
|
|
title: '该商品每人限购' +
|
|
this.goods_Item_Detail.presale_num +
|
|
this.goods_Item_Detail.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;
|
|
}
|
|
},
|
|
|
|
//输入数量
|
|
keyInput(flag, callback) {
|
|
setTimeout(() => {
|
|
var stock = this.goods_Item_Detail.stock;
|
|
|
|
// 库存为0
|
|
if (this.goods_Item_Detail.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.goods_Item_Detail.stock == 0) {
|
|
this.$util.showToast({
|
|
title: '商品已售罄'
|
|
});
|
|
return;
|
|
}
|
|
|
|
if (this.number.length == 0 || this.number <= 0) {
|
|
this.$util.showToast({
|
|
title: '购买数量不能小于等于0'
|
|
});
|
|
return;
|
|
}
|
|
|
|
if (this.goods_Item_Detail.buy_num > this.goods_Item_Detail.stock) {
|
|
this.$util.showToast({
|
|
title: '库存小于最低购买数量'
|
|
});
|
|
return;
|
|
}
|
|
|
|
if (this.number > this.goods_Item_Detail.stock) {
|
|
this.$util.showToast({
|
|
title: '库存不足'
|
|
});
|
|
return;
|
|
}
|
|
|
|
if (
|
|
this.goods_Item_Detail.is_limit == 1 &&
|
|
this.goods_Item_Detail.limit_type == 1 &&
|
|
this.maxBuy > 0 &&
|
|
this.number > this.maxBuy
|
|
) {
|
|
this.$util.showToast({
|
|
title: '该商品每次最多购买' + this.maxBuy + this.goods_Item_Detail.unit
|
|
});
|
|
return;
|
|
}
|
|
|
|
if (
|
|
this.goods_Item_Detail.is_limit == 1 &&
|
|
this.goods_Item_Detail.limit_type == 2 &&
|
|
this.maxBuy > 0 &&
|
|
this.number + this.goods_Item_Detail.purchased_num > this.maxBuy
|
|
) {
|
|
let message = '该商品每人限购' + this.maxBuy + this.goods_Item_Detail.unit;
|
|
message +=
|
|
this.goods_Item_Detail.purchased_num > 0 ?
|
|
'，您已购买了' +
|
|
this.goods_Item_Detail.purchased_num +
|
|
this.goods_Item_Detail.unit :
|
|
'';
|
|
this.$util.showToast({
|
|
title: message
|
|
});
|
|
return;
|
|
}
|
|
|
|
if (
|
|
this.type == 'join_cart' &&
|
|
this.goods_Item_Detail.is_limit == 1 &&
|
|
this.maxBuy > 0 &&
|
|
this.cartNumber + this.number > this.maxBuy
|
|
) {
|
|
this.$util.showToast({
|
|
title: '该商品每人限购' + this.maxBuy + this.goods_Item_Detail.unit
|
|
});
|
|
return;
|
|
}
|
|
|
|
if (this.goods_Item_Detail.max_buy) {
|
|
if (this.goods_Item_Detail.purchased_num >= this.goods_Item_Detail.max_buy) {
|
|
this.$util.showToast({
|
|
// title: `每人限购${this.goods_Item_Detail.max_buy}件，您已购买${this.goods_Item_Detail.purchased_num}件`
|
|
});
|
|
return
|
|
}
|
|
}
|
|
|
|
|
|
if (this.goods_Item_Detail.max_buy) {
|
|
// is_limit 是否限购 limit_type限购类型 1单次 2长期
|
|
if (this.goods_Item_Detail.is_limit && this.goods_Item_Detail.limit_type == 1) {
|
|
if (this.number > this.goods_Item_Detail.max_buy) {
|
|
this.$util.showToast({
|
|
title: `每人限购${this.goods_Item_Detail.max_buy}件`
|
|
});
|
|
return
|
|
}
|
|
|
|
|
|
} else if (this.goods_Item_Detail.is_limit && this.goods_Item_Detail.limit_type == 2) {
|
|
if (this.goods_Item_Detail.purchased_num >= this.goods_Item_Detail.max_buy) {
|
|
this.$util.showToast({
|
|
// title: `每人长期限购${this.goods_Item_Detail.max_buy}件，您已购买${this.goods_Item_Detail.purchased_num}件`
|
|
title: `每人长期限购${this.goods_Item_Detail.max_buy}件`
|
|
});
|
|
return
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
|
|
if (this.btnSwitch) return;
|
|
this.btnSwitch = true;
|
|
|
|
this.$api.sendRequest({
|
|
url: '/api/cart/add',
|
|
data: {
|
|
sku_id: this.goods_Item_Detail.sku_id,
|
|
num: this.number,
|
|
is_all: 1
|
|
},
|
|
success: res => {
|
|
var data = res.data;
|
|
if (data > 0) {
|
|
this.$util.showToast({
|
|
title: '加入购物车成功'
|
|
});
|
|
this.cartNumber += this.number;
|
|
if (this.callback) this.callback();
|
|
this.$store.dispatch('getCartNumber');
|
|
}
|
|
|
|
// uni.$emit('refresh', true);
|
|
|
|
this.$refs.skuPopup.close();
|
|
this.btnSwitch = false;
|
|
},
|
|
fail: res => {
|
|
this.$refs.skuPopup.close();
|
|
this.btnSwitch = false;
|
|
}
|
|
});
|
|
});
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.box {
|
|
margin-bottom: 20rpx;
|
|
}
|
|
|
|
.head {
|
|
width: 750rpx;
|
|
height: 740rpx;
|
|
background: #ffffff;
|
|
border-radius: 32rpx 32rpx 0rpx 0rpx;
|
|
// z-index: 999;
|
|
padding: 46rpx 48rpx;
|
|
box-sizing: border-box;
|
|
position: relative;
|
|
|
|
.img {
|
|
image {
|
|
width: 160rpx;
|
|
height: 160rpx;
|
|
}
|
|
}
|
|
|
|
.imgtwo {
|
|
image {
|
|
width: 40rpx;
|
|
height: 40rpx;
|
|
}
|
|
}
|
|
|
|
.mlentc {
|
|
margin-left: 24rpx;
|
|
}
|
|
|
|
.guige {
|
|
margin-top: 16rpx;
|
|
color: #999;
|
|
text-align: center;
|
|
|
|
span {
|
|
color: #000;
|
|
}
|
|
}
|
|
|
|
.xuxian {
|
|
width: 100%;
|
|
border: 1rpx solid #ccc;
|
|
margin: 16rpx 0;
|
|
}
|
|
|
|
.danwei {
|
|
width: 200rpx;
|
|
border: 1rpx solid rgb(54, 171, 255);
|
|
padding: 10rpx 20rpx;
|
|
box-sizing: border-box;
|
|
margin-top: 16rpx;
|
|
color: rgb(54, 171, 255);
|
|
}
|
|
|
|
.goumai {
|
|
margin-top: 40rpx;
|
|
|
|
.one {
|
|
width: 40rpx;
|
|
height: 40rpx;
|
|
|
|
image {
|
|
width: 40rpx;
|
|
height: 40rpx;
|
|
}
|
|
}
|
|
|
|
.two {
|
|
width: 60rpx;
|
|
height: 40rpx;
|
|
text-align: center;
|
|
border: 1rpx solid #ccc;
|
|
margin: 0 12rpx;
|
|
}
|
|
|
|
.sui {
|
|
width: 40rpx;
|
|
height: 40rpx;
|
|
|
|
image {
|
|
width: 40rpx;
|
|
height: 40rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.add {
|
|
width: 686rpx;
|
|
height: 80rpx;
|
|
background: #21bbf3;
|
|
border-radius: 40rpx;
|
|
position: absolute;
|
|
bottom: 24rpx;
|
|
color: #fff;
|
|
}
|
|
}
|
|
|
|
.directionItem {
|
|
width: 48%;
|
|
/* #ifdef MP-WEIXIN */
|
|
width: 100%;
|
|
/* #endif */
|
|
background-color: #fff;
|
|
margin-bottom: 30rpx;
|
|
padding: 5rpx;
|
|
line-height: 40rpx;
|
|
border-radius: 16rpx;
|
|
|
|
.cover-box {
|
|
width: 100%;
|
|
position: relative;
|
|
|
|
.cover1 {
|
|
width: 44vw;
|
|
height: 44vw;
|
|
border-radius: 16rpx;
|
|
display: flex;
|
|
justify-content: center;
|
|
|
|
img {
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: 16rpx;
|
|
object-fit: cover;
|
|
}
|
|
}
|
|
|
|
.sales {
|
|
// top: calc(320rpx - 44rpx);
|
|
bottom: 0rpx;
|
|
width: 100%;
|
|
position: absolute;
|
|
text-align: center;
|
|
font-size: 30rpx;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #ffffff;
|
|
line-height: 44rpx;
|
|
background-color: rgba(0, 0, 0, 0.4);
|
|
}
|
|
}
|
|
|
|
.content {
|
|
margin-top: 20rpx;
|
|
padding: 0 20rpx;
|
|
|
|
.title {
|
|
// max-height: 80rpx;
|
|
font-size: 32rpx;
|
|
font-family: PingFangSC-Medium, PingFang SC;
|
|
font-weight: 500;
|
|
color: #333333;
|
|
line-height: 40rpx;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.labels-1 {
|
|
margin-top: 10rpx !important;
|
|
|
|
.label-item {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 1;
|
|
-webkit-box-orient: vertical;
|
|
font-size: 28rpx !important;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #999999 !important;
|
|
line-height: 40rpx !important;
|
|
}
|
|
}
|
|
|
|
.price {
|
|
// height: 104rpx;
|
|
font-size: 28rpx;
|
|
font-family: DINAlternate-Bold, DINAlternate;
|
|
font-weight: bold;
|
|
color: #f33b50;
|
|
|
|
.price1 {
|
|
font-size: 34rpx;
|
|
}
|
|
}
|
|
|
|
.origin {
|
|
margin-top: 10rpx;
|
|
}
|
|
|
|
.bottom {
|
|
// display: flex;
|
|
// align-items: center;
|
|
// justify-content: space-between;
|
|
|
|
.numBox {
|
|
margin-top: 20rpx;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
|
|
.tag {
|
|
width: 28px;
|
|
height: 20px;
|
|
|
|
div {
|
|
font-size: 30rpx;
|
|
text-align: center;
|
|
line-height: 20px;
|
|
color: #f33b50;
|
|
background: #f33b5078;
|
|
border-radius: 10rpx;
|
|
}
|
|
}
|
|
|
|
.btn {
|
|
display: flex;
|
|
align-items: ceter;
|
|
font-weight: normal;
|
|
float: right;
|
|
|
|
/deep/ .u-icon__icon {
|
|
font-size: 50rpx !important;
|
|
}
|
|
|
|
.input-number {
|
|
line-height: 30rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.sku-layer {
|
|
|
|
.sku-info {
|
|
max-height: 75vh;
|
|
height: 65vh;
|
|
position: relative;
|
|
|
|
.header {
|
|
padding: 30rpx 30rpx 20rpx 210rpx;
|
|
position: relative;
|
|
border-bottom: 2rpx solid $color-line;
|
|
min-height: 170rpx;
|
|
|
|
.img-wrap {
|
|
width: 160rpx;
|
|
height: 160rpx;
|
|
position: absolute;
|
|
left: 20rpx;
|
|
border-radius: $border-radius;
|
|
overflow: hidden;
|
|
padding: 2rpx;
|
|
background-color: #fff;
|
|
line-height: 208rpx;
|
|
|
|
image {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.price {
|
|
word-wrap: break-word;
|
|
}
|
|
|
|
.goods_name {
|
|
font-size: 30rpx;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.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-close {
|
|
position: absolute;
|
|
top: 20rpx;
|
|
right: 40rpx;
|
|
width: 40rpx;
|
|
height: 80rpx;
|
|
font-size: 40rpx;
|
|
}
|
|
}
|
|
|
|
.body-item {
|
|
padding: 0 30rpx;
|
|
height: 120rpx;
|
|
box-sizing: border-box;
|
|
overflow: scroll;
|
|
|
|
.wrap {
|
|
height: 120rpx;
|
|
}
|
|
|
|
.sku-list-wrap {
|
|
padding-bottom: 0rpx;
|
|
|
|
.title {
|
|
padding: 20rpx 0;
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
.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;
|
|
|
|
.disabled {
|
|
border: 2rpx dashed;
|
|
}
|
|
|
|
image {
|
|
height: 44rpx;
|
|
width: 44rpx;
|
|
border-radius: $border-radius;
|
|
margin-right: 10rpx;
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
}
|
|
}
|
|
|
|
.number-wrap {
|
|
.number-line {
|
|
padding: 20rpx 0;
|
|
line-height: 72rpx;
|
|
}
|
|
|
|
.title {
|
|
font-weight: 400;
|
|
}
|
|
|
|
.number {
|
|
display: flex;
|
|
height: 72rpx;
|
|
border-radius: 6rpx;
|
|
float: right;
|
|
|
|
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;
|
|
}
|
|
}
|
|
|
|
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;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.keyBoard {
|
|
padding: 0 30rpx;
|
|
}
|
|
|
|
/deep/ .u-keyboard {
|
|
background-color: #fff;
|
|
|
|
.u-keyboard__button-wrapper {
|
|
.u-keyboard__button-wrapper__button {
|
|
background-color: #eee;
|
|
}
|
|
}
|
|
}
|
|
|
|
.footer {
|
|
height: 100rpx;
|
|
width: 100%;
|
|
margin-top: 40rpx;
|
|
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>
|