zhuce
/
lilishop-uniapp
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

购买数量超过库存后修改为库存数量

master
chc 2022-11-29 11:19:37 +08:00
parent 7f71614781
commit 2b5f57dfab
1 changed files with 391 additions and 378 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

769
components/m-buy/goods.vue
View File

@ -16,39 +16,39 @@
<span v-if="goodsDetail.promotionPrice && !pointDetail"> <span v-if="goodsDetail.promotionPrice && !pointDetail">
￥ ￥
<span class="goods-price-promotionShow goods-price-bigshow">{{ <span class="goods-price-promotionShow goods-price-bigshow">{{
$options.filters.goodsFormatPrice(goodsDetail.promotionPrice)[0] $options.filters.goodsFormatPrice(goodsDetail.promotionPrice)[0]
}}</span> }}</span>
.{{ $options.filters.goodsFormatPrice(goodsDetail.promotionPrice)[1] }} .{{ $options.filters.goodsFormatPrice(goodsDetail.promotionPrice)[1] }}
</span> </span>
<span v-if="pointDetail.points"> <span v-if="pointDetail.points">
<span class="goods-price-promotionShow goods-price-bigshow">{{ <span class="goods-price-promotionShow goods-price-bigshow">{{
pointDetail.points pointDetail.points
}}</span> }}</span>
积分 积分
</span> </span>
<div class="promotion-box"> <div class="promotion-box">
￥ ￥
<span class="goods-price-bigshow">{{ <span class="goods-price-bigshow">{{
$options.filters.goodsFormatPrice(goodsDetail.price)[0] $options.filters.goodsFormatPrice(goodsDetail.price)[0]
}}</span> }}</span>
.{{ $options.filters.goodsFormatPrice(goodsDetail.price)[1] }} .{{ $options.filters.goodsFormatPrice(goodsDetail.price)[1] }}
</div> </div>
</view> </view>
<!-- 正常商品的价格 --> <!-- 正常商品的价格 -->
<view v-else> <view v-else>
<!-- 批发价格 --> <!-- 批发价格 -->
<div class='price-row flex' v-if="goodsDetail.salesModel === 'WHOLESALE'"> <div class='price-row flex' v-if="goodsDetail.salesModel === 'WHOLESALE'">
<div class='goods-price' v-for="(item,index) in wholesaleList" :key="index"> <div class='goods-price' v-for="(item, index) in wholesaleList" :key="index">
<span> <span>
￥ ￥
<span class="goods-price-bigshow">{{ <span class="goods-price-bigshow">{{
$options.filters.goodsFormatPrice(item.price)[0] $options.filters.goodsFormatPrice(item.price)[0]
}}</span> }}</span>
.{{ $options.filters.goodsFormatPrice(item.price)[1] }} .{{ $options.filters.goodsFormatPrice(item.price)[1] }}
</span> </span>
<span class='wholesale-item'> <span class='wholesale-item'>
{{item.num}}{{goodsDetail.goodsUnit}} {{ item.num }}{{ goodsDetail.goodsUnit }}
</span> </span>
</div> </div>
</div> </div>
@ -56,8 +56,8 @@
<span> <span>
￥ ￥
<span class="goods-price-bigshow">{{ <span class="goods-price-bigshow">{{
$options.filters.goodsFormatPrice(goodsDetail.price)[0] $options.filters.goodsFormatPrice(goodsDetail.price)[0]
}}</span> }}</span>
.{{ $options.filters.goodsFormatPrice(goodsDetail.price)[1] }} .{{ $options.filters.goodsFormatPrice(goodsDetail.price)[1] }}
</span> </span>
</div> </div>
@ -101,8 +101,9 @@
<!-- 数量 --> <!-- 数量 -->
<view class="goods-skus-number flex flex-a-c flex-j-sb"> <view class="goods-skus-number flex flex-a-c flex-j-sb">
<view class="view-class-title">数量</view> <view class="view-class-title">数量</view>
<u-input class="view-class-input" input-align="right" v-model="num" type="number" /> <u-input class="view-class-input" input-align="right" v-model="num" type="number"
@change="numChange()" />
</view> </view>
</scroll-view> </scroll-view>
<!-- 按钮 --> <!-- 按钮 -->
@ -116,421 +117,433 @@
</div> </div>
</template> </template>
<script> <script>
import * as API_trade from "@/api/trade.js"; import * as API_trade from "@/api/trade.js";
import setup from "./popup"; import setup from "./popup";
export default { export default {
data() { data() {
return { return {
setup, setup,
num: 1, num: 1,
selectName: "", //选中商品的昵称 selectName: "", //选中商品的昵称
selectSkuList: "", //选中商铺sku, selectSkuList: "", //选中商铺sku,
selectedSpecImg: "", //选中的图片路径 selectedSpecImg: "", //选中的图片路径
buyType: "", //用于存储促销，拼团等活动类型 buyType: "", //用于存储促销，拼团等活动类型
parentOrder: "", //父级拼团活动的数据 - 如果是团员则有数据 parentOrder: "", //父级拼团活动的数据 - 如果是团员则有数据
formatList: [], formatList: [],
currentSelceted: [], currentSelceted: [],
skuList: "", skuList: "",
isClose: false, //是否可以点击遮罩关闭 isClose: false, //是否可以点击遮罩关闭
}; };
},
props: {
wholesaleList: {
type: null,
default: false,
}, },
props: { buyMask: {
wholesaleList:{ type: Boolean,
type: null, default: false,
default: false,
},
buyMask: {
type: Boolean,
default: false,
},
isGroup: {
type: Boolean,
default: false,
},
goodsDetail: {
default: "",
type: null,
},
selectedSku: {
default: "",
type: null,
},
goodsSpec: {
default: "",
type: null,
},
addr: {
default: "",
type: null,
},
pointDetail: {
default: "",
type: null,
},
}, },
computed: { isGroup: {
wholesalePrice(key){ type: Boolean,
return this.wholesaleList.length ? this.wholesaleList.map(item=>{ return item.price }) :[] default: false,
}, },
wholesaleNum(key){ goodsDetail: {
return this.wholesaleList.length ? this.wholesaleList.map(item=>{ return item.num }) :[] default: "",
type: null,
},
selectedSku: {
default: "",
type: null,
},
goodsSpec: {
default: "",
type: null,
},
addr: {
default: "",
type: null,
},
pointDetail: {
default: "",
type: null,
},
},
computed: {
wholesalePrice(key) {
return this.wholesaleList.length ? this.wholesaleList.map(item => { return item.price }) : []
},
wholesaleNum(key) {
return this.wholesaleList.length ? this.wholesaleList.map(item => { return item.num }) : []
}
},
watch: {
num(val) {
if (val) {
//超过库存后修改回库存
if (val > this.goodsDetail.quantity) {
this.$nextTick(function () {
this.num = this.goodsDetail.quantity
})
}
} }
}, },
watch: { buyType: {
num(val){ handler(val) {
if(val){ if (val) {
if(val > this.goodsDetail.quantity){ this.buyType = val;
this.val = this.goodsDetail.quantity
}
} }
}, },
buyType: { immediate: true,
handler(val) {
if (val) {
this.buyType = val;
}
},
immediate: true,
},
selectSkuList: {
handler(val, oldval) {
this.$emit("changed", val);
},
deep: true,
},
}, },
selectSkuList: {
methods: { handler(val, oldval) {
closeMask() { this.$emit("changed", val);
this.$emit("closeBuy", false);
}, },
deep: true,
},
},
/**点击规格 */ methods: {
handleClickSpec(val, index, specValue) { closeMask() {
this.currentSelceted[index] = specValue.value; this.$emit("closeBuy", false);
let selectedSkuId = this.goodsSpec.find((i) => { },
let matched = true; numChange() {
let specValues = i.specValues.filter((j) => j.specName !== "images"); if (this.num > this.goodsDetail.quantity) {
for (let n = 0; n < specValues.length; n++) { alert(1)
if (specValues[n].specValue !== this.currentSelceted[n]) { this.num = this.goodsDetail.quantity
matched = false; }
return; },
} /**点击规格 */
handleClickSpec(val, index, specValue) {
this.currentSelceted[index] = specValue.value;
let selectedSkuId = this.goodsSpec.find((i) => {
let matched = true;
let specValues = i.specValues.filter((j) => j.specName !== "images");
for (let n = 0; n < specValues.length; n++) {
if (specValues[n].specValue !== this.currentSelceted[n]) {
matched = false;
return;
} }
if (matched) {
return i;
}
});
if (selectedSkuId?.skuId) {
this.$set(this.currentSelceted, index, specValue.value);
this.selectSkuList = {
spec: {
specName: val.name,
specValue: specValue.value,
},
data: this.goodsDetail,
};
this.selectName = specValue.value;
this.$emit("handleClickSku", {
skuId: selectedSkuId.skuId,
goodsId: this.goodsDetail.goodsId,
});
} else {
uni.showToast({
title: "暂无该商品!",
duration: 2000,
icon: "none",
});
} }
}, if (matched) {
return i;
/**
* 直接购买
*/
buy(data) {
API_trade.addToCart(data).then((res) => {
if (res.data.success) {
uni.navigateTo({
url: `/pages/order/fillorder?way=${
data.cartType
}&addr=${""}&parentOrder=${encodeURIComponent(
JSON.stringify(this.parentOrder)
)}`,
});
}
});
},
/**
* 添加到购物车或购买
*/
addToCartOrBuy(val) {
if (!this.selectSkuList) {
uni.showToast({
title: "请选择规格商品",
icon: "none",
});
return;
} }
let data = { });
skuId: this.goodsDetail.id, if (selectedSkuId?.skuId) {
num: this.num, this.$set(this.currentSelceted, index, specValue.value);
this.selectSkuList = {
spec: {
specName: val.name,
specValue: specValue.value,
},
data: this.goodsDetail,
}; };
this.selectName = specValue.value;
if (val == "cart") { this.$emit("handleClickSku", {
API_trade.addToCart(data).then((res) => { skuId: selectedSkuId.skuId,
if (res.data.code == 200) { goodsId: this.goodsDetail.goodsId,
uni.showToast({ });
title: "商品已添加到购物车", } else {
icon: "none", uni.showToast({
}); title: "暂无该商品!",
duration: 2000,
icon: "none",
});
}
},
this.$emit("queryCart"); /**
this.closeMask(); * 直接购买
} */
}); buy(data) {
} else { API_trade.addToCart(data).then((res) => {
// 判断是否拼团商品 if (res.data.success) {
if (this.buyType) { uni.navigateTo({
data.cartType = "PINTUAN"; url: `/pages/order/fillorder?way=${data.cartType
} else if (this.goodsDetail.goodsType == "VIRTUAL_GOODS") { }&addr=${""}&parentOrder=${encodeURIComponent(
data.cartType = "VIRTUAL"; JSON.stringify(this.parentOrder)
} else { )}`,
data.cartType = "BUY_NOW";
}
API_trade.addToCart(data).then((res) => {
if (res.data.code == 200) {
uni.navigateTo({
url: `/pages/order/fillorder?way=${data.cartType}&addr=${
this.addr.id || ""
}&parentOrder=${encodeURIComponent(JSON.stringify(this.parentOrder))}`,
});
}
}); });
} }
}, });
formatSku(list) { },
// 格式化数据
let arr = [{}];
if (!Array.isArray(list)) { /**
return false * 添加到购物车或购买
} */
list.forEach((item, index) => { addToCartOrBuy(val) {
item.specValues.forEach((spec, specIndex) => { if (!this.selectSkuList) {
let name = spec.specName; uni.showToast({
let values = { title: "请选择规格商品",
value: spec.specValue, icon: "none",
quantity: item.quantity, });
skuId: item.skuId, return;
}; }
if (name === "images") { let data = {
return; skuId: this.goodsDetail.id,
} num: this.num,
};
arr.forEach((arrItem, arrIndex) => { if (val == "cart") {
if ( API_trade.addToCart(data).then((res) => {
arrItem.name == name && if (res.data.code == 200) {
arrItem.values && uni.showToast({
!arrItem.values.find((i) => { title: "商品已添加到购物车",
return i.value === values.value; icon: "none",
})
) {
arrItem.values.push(values);
}
let keys = arr.map((key) => {
return key.name;
});
if (!keys.includes(name)) {
arr.push({
name: name,
values: [values],
});
}
}); });
});
});
arr.shift(); this.$emit("queryCart");
this.formatList = arr; this.closeMask();
list.forEach((item) => {
// 默认选中
if (item.skuId === this.goodsDetail.id) {
item.specValues
.filter((i) => i.specName !== "images")
.forEach((value, _index) => {
this.currentSelceted[_index] = value.specValue;
this.selectName = value.specValue;
this.selectSkuList = {
spec: value,
data: this.goodsDetail,
};
});
} }
}); });
} else {
// 判断是否拼团商品
if (this.buyType) {
data.cartType = "PINTUAN";
} else if (this.goodsDetail.goodsType == "VIRTUAL_GOODS") {
data.cartType = "VIRTUAL";
} else {
data.cartType = "BUY_NOW";
}
this.skuList = list; API_trade.addToCart(data).then((res) => {
// console.log(" this.skuList", this.skuList) if (res.data.code == 200) {
}, uni.navigateTo({
url: `/pages/order/fillorder?way=${data.cartType}&addr=${this.addr.id || ""
}&parentOrder=${encodeURIComponent(JSON.stringify(this.parentOrder))}`,
});
}
});
}
}, },
formatSku(list) {
// 格式化数据
let arr = [{}];
mounted() { if (!Array.isArray(list)) {
this.formatSku(this.goodsSpec); return false
}
list.forEach((item, index) => {
item.specValues.forEach((spec, specIndex) => {
let name = spec.specName;
let values = {
value: spec.specValue,
quantity: item.quantity,
skuId: item.skuId,
};
if (name === "images") {
return;
}
arr.forEach((arrItem, arrIndex) => {
if (
arrItem.name == name &&
arrItem.values &&
!arrItem.values.find((i) => {
return i.value === values.value;
})
) {
arrItem.values.push(values);
}
let keys = arr.map((key) => {
return key.name;
});
if (!keys.includes(name)) {
arr.push({
name: name,
values: [values],
});
}
});
});
});
arr.shift();
this.formatList = arr;
list.forEach((item) => {
// 默认选中
if (item.skuId === this.goodsDetail.id) {
item.specValues
.filter((i) => i.specName !== "images")
.forEach((value, _index) => {
this.currentSelceted[_index] = value.specValue;
this.selectName = value.specValue;
this.selectSkuList = {
spec: value,
data: this.goodsDetail,
};
});
}
});
this.skuList = list;
// console.log(" this.skuList", this.skuList)
}, },
}; },
mounted() {
this.formatSku(this.goodsSpec);
},
};
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@import "./popup.scss"; @import "./popup.scss";
.price-row{
text-align: center; .price-row {
text-align: center;
}
.buy { }
background-image: linear-gradient(135deg, #ffba0d, #ffc30d 69%, #ffcf0d);
box-shadow: 0 2px 6px 0 rgba(255, 65, 66, 0.2); .buy {
background-image: linear-gradient(135deg, #ffba0d, #ffc30d 69%, #ffcf0d);
box-shadow: 0 2px 6px 0 rgba(255, 65, 66, 0.2);
}
.card {
background-image: linear-gradient(135deg, #f2140c, #f2270c 70%, #f24d0c);
box-shadow: 0 2px 6px 0 rgba(255, 65, 66, 0.2);
}
/deep/.u-icon-plus,
.u-icon-minus,
.u-icon-disabled {
height: 30rpx !important;
background: #fff !important;
}
.goods-skus-number {
justify-content: space-between;
display: flex;
>.view-class-title {
flex: 8;
} }
.card { >.view-class-input {
background-image: linear-gradient(135deg, #f2140c, #f2270c 70%, #f24d0c); flex: 1
box-shadow: 0 2px 6px 0 rgba(255, 65, 66, 0.2);
} }
}
/deep/.u-icon-plus, /deep/ .uni-scroll-view {
.u-icon-minus, overflow: hidden !important;
.u-icon-disabled { }
height: 30rpx !important;
background: #fff !important;
}
.goods-skus-number { .active {
justify-content: space-between; background: $price-light-color !important;
display: flex; border: 2rpx solid $price-color;
font-weight: bold;
>.view-class-title{ color: $price-color !important;
flex: 8; box-sizing: border-box;
} }
>.view-class-input{
flex:1 .goods-skus-box {
overflow-y: auto;
height: 610rpx;
// #ifdef MP-WEIXIN
height: 570rpx;
// #endif
margin-bottom: 10rpx;
}
.goods-skus-view {
overflow: hidden;
.skus-view-list {
>.skus-view-item {
flex: 1;
padding: 0 36rpx;
overflow: hidden;
height: 60rpx;
line-height: 60rpx;
float: left;
text-align: center;
margin-left: 24rpx;
margin-bottom: 20rpx;
font-size: 22rpx;
color: #262626;
background: #f2f2f2;
border-radius: 30rpx;
} }
} }
}
/deep/ .uni-scroll-view { .wholesale-item {
overflow: hidden !important; color: #999 !important;
} font-size: 24rpx;
margin: 0 20rpx;
display: flex;
justify-content: center;
}
.active { .goods-header {
background: $price-light-color !important; height: 200rpx;
border: 2rpx solid $price-color; display: flex;
font-weight: bold; align-items: center;
color: $price-color !important; margin-bottom: 36rpx;
box-sizing: border-box; }
}
.goods-skus-box { .goods-box {
overflow-y: auto; padding: 50rpx 36rpx 0 36rpx;
height: 610rpx; }
// #ifdef MP-WEIXIN
height: 570rpx;
// #endif
margin-bottom: 10rpx;
}
.goods-skus-view { .goods-skus {
overflow: hidden; padding: 0 20rpx;
}
.skus-view-list { .goods-price {
>.skus-view-item { color: $price-color;
flex: 1; line-height: 80rpx;
padding: 0 36rpx; margin-right: 20rpx;
overflow: hidden; >* {
height: 60rpx;
line-height: 60rpx;
float: left;
text-align: center;
margin-left: 24rpx;
margin-bottom: 20rpx;
font-size: 22rpx;
color: #262626;
background: #f2f2f2;
border-radius: 30rpx;
}
}
}
.wholesale-item{
color: #999 !important;
font-size: 24rpx;
margin:0 20rpx;
display: flex;
justify-content: center;
}
.goods-header {
height: 200rpx;
display: flex;
align-items: center;
margin-bottom: 36rpx;
}
.goods-box {
padding: 50rpx 36rpx 0 36rpx;
}
.goods-skus {
padding: 0 20rpx;
}
.goods-price {
color: $price-color; color: $price-color;
line-height: 80rpx; line-height: 80rpx;
margin-right: 20rpx;
>* {
color: $price-color;
line-height: 80rpx;
}
} }
}
.promotion-box { .promotion-box {
line-height: 1; line-height: 1;
display: flex; display: flex;
align-items: center; align-items: center;
text-decoration: line-through; text-decoration: line-through;
color: #999; color: #999;
margin-left: 10rpx; margin-left: 10rpx;
/deep/ span { /deep/ span {
font-size: 30rpx;
}
}
.promotion {
font-size: 30rpx; font-size: 30rpx;
} }
}
.goods-price-promotionShow { .promotion {
font-size: 48rpx; font-size: 30rpx;
}
.goods-price-promotionShow {
font-size: 48rpx;
}
.goods-check-skus {
font-size: 24rpx;
color: #999;
>.goods-check-skus-name {
margin-left: 4rpx;
} }
.goods-check-skus { >span {
font-size: 24rpx; color: #333;
color: #999;
>.goods-check-skus-name {
margin-left: 4rpx;
}
>span {
color: #333;
}
} }
}
</style> </style>