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

提交批量购买样式

master
lemon橪 2022-05-27 10:32:08 +08:00
parent 68cdcd8587
commit 1dc42e1333
1 changed files with 464 additions and 462 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,515 +1,517 @@
<template> <template>
<div class="wrapper"> <div class="wrapper">
<u-popup <u-popup class="popup" v-model="buyMask" :height="setup.height" closeable :mode="setup.mode"
class="popup" :border-radius="setup.radius" @close="closeMask()">
v-model="buyMask" <!-- 商品 -->
:height="setup.height" <view class="goods-box bottom">
closeable <view class="goods-header">
:mode="setup.mode" <view class="goods-img">
:border-radius="setup.radius" <u-image width="200rpx" border-radius="20" class="uimage" height="200rpx"
@close="closeMask()" :src="selectedSpecImg ? selectedSpecImg : goodsDetail.thumbnail"></u-image>
> </view>
<!-- 商品 --> <view class="goods-skus">
<view class="goods-box bottom"> <!-- 有活动商品价格 -->
<view class="goods-header"> <view class="goods-price"
<view class="goods-img"> v-if="goodsDetail.promotionPrice && ((isGroup && buyType === 'PINTUAN') || !isGroup)">
<u-image <span v-if="goodsDetail.promotionPrice && !pointDetail">
width="200rpx" ￥
border-radius="20" <span class="goods-price-promotionShow goods-price-bigshow">{{
class="uimage"
height="200rpx"
:src="selectedSpecImg ? selectedSpecImg : goodsDetail.thumbnail"
></u-image>
</view>
<view class="goods-skus">
<!-- 有活动商品价格 -->
<view class="goods-price" v-if="goodsDetail.promotionPrice && ((isGroup && buyType === 'PINTUAN') || !isGroup)">
<span v-if="goodsDetail.promotionPrice && !pointDetail">
￥
<span class="goods-price-promotionShow goods-price-bigshow">{{
formatPrice(goodsDetail.promotionPrice)[0] formatPrice(goodsDetail.promotionPrice)[0]
}}</span> }}</span>
.{{ formatPrice(goodsDetail.promotionPrice)[1] }} .{{ formatPrice(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">{{
formatPrice(goodsDetail.price)[0] formatPrice(goodsDetail.price)[0]
}}</span> }}</span>
.{{ formatPrice(goodsDetail.price)[1] }} .{{ formatPrice(goodsDetail.price)[1] }}
</div> </div>
</view> </view>
<!-- 正常商品的价格 --> <!-- 正常商品的价格 -->
<view class="goods-price" v-else> <view v-else>
<span> <div class="goods-price">
￥ <span>
<span class="goods-price-bigshow">{{ ￥
<span class="goods-price-bigshow">{{
formatPrice(goodsDetail.price)[0] formatPrice(goodsDetail.price)[0]
}}</span> }}</span>
.{{ formatPrice(goodsDetail.price)[1] }} .{{ formatPrice(goodsDetail.price)[1] }}
</span> </span>
</view> </div>
<view class="goods-check-skus"> <!-- 批发价格 -->
已选 <div class='price-row'>
<span class="goods-check-skus-name"> <div class='goods-price'>
{{ selectName }} <span >
<span>，{{ num }}个</span> ￥
</span> <span class="goods-price-bigshow">{{
</view> formatPrice(goodsDetail.price)[0]
</view> }}</span>
</view> .{{ formatPrice(goodsDetail.price)[1] }}
<!-- 商品信息 --> </span>
<scroll-view class="goods-skus-box" :scroll-y="true"> </div>
<!-- 规格 --> <div>
<view 23-30
class="goods-skus-view" </div>
:key="specIndex" </div>
v-for="(spec, specIndex) in formatList" </view>
> <view class="goods-check-skus">
<view class="skus-view-list"> 已选
<view class="view-class-title">{{ spec.name }}</view> <span class="goods-check-skus-name">
{{ selectName }}
<span>，{{ num }}个</span>
</span>
</view>
<view class="goods-check-skus">
库存
<span class="goods-check-skus-name">
<span>{{ goodsDetail.quantity }}</span>
</span>
</view>
</view>
</view>
<!-- 商品信息 -->
<scroll-view class="goods-skus-box" :scroll-y="true">
<!-- 规格 -->
<view class="goods-skus-view" :key="specIndex" v-for="(spec, specIndex) in formatList">
<view class="skus-view-list">
<view class="view-class-title">{{ spec.name }}</view>
<!-- 正常逻辑 循环出sku --> <!-- 正常逻辑 循环出sku -->
<view <view v-if="!parentOrder" :class="{ active: spec_val.value == currentSelceted[specIndex] }"
v-if="!parentOrder" class="skus-view-item" v-for="(spec_val, spec_index) in spec.values" :key="spec_index"
:class="{ active: spec_val.value == currentSelceted[specIndex] }" @click="handleClickSpec(spec, specIndex, spec_val)">{{ spec_val.value }}
class="skus-view-item" </view>
v-for="(spec_val, spec_index) in spec.values"
:key="spec_index"
@click="handleClickSpec(spec, specIndex, spec_val)"
>{{ spec_val.value }}
</view>
<!-- 拼团购买，仅筛选出当前拼团类型商品 --> <!-- 拼团购买，仅筛选出当前拼团类型商品 -->
<view <view v-if="parentOrder && spec_val.skuId == goodsDetail.id"
v-if="parentOrder && spec_val.skuId == goodsDetail.id" :class="{ active: spec_val.value == currentSelceted[specIndex] }" class="skus-view-item"
:class="{ active: spec_val.value == currentSelceted[specIndex] }" v-for="(spec_val, spec_index) in spec.values" :key="spec_index"
class="skus-view-item" @click="handleClickSpec(spec, specIndex, spec_val)">{{ spec_val.value }}
v-for="(spec_val, spec_index) in spec.values" </view>
:key="spec_index" </view>
@click="handleClickSpec(spec, specIndex, spec_val)" </view>
>{{ spec_val.value }} <!-- 数量 -->
</view> <view class="goods-skus-number">
</view> <view class="view-class-title">数量</view>
</view>
<!-- 数量 --> <u-input style='text-align: right;' v-model="num" type="number" />
<view class="goods-skus-number"> </view>
<view class="view-class-title">数量</view> </scroll-view>
<u-number-box <!-- 按钮 -->
:bg-color="numberBox.bgColor" <view class="btns">
:max="200" <view class="box-btn card" v-if="buyType != 'PINTUAN' && goodsDetail.goodsType != 'VIRTUAL_GOODS'"
:color="numberBox.color" @click="addToCartOrBuy('cart')">加入购物车</view>
:input-width="numberBox.width" <view class="box-btn buy" @click="addToCartOrBuy('buy')">立即购买</view>
:input-height="numberBox.height" </view>
:size="numberBox.size" </view>
:min="1" </u-popup>
v-model="num" </div>
>
</u-number-box>
</view>
</scroll-view>
<!-- 按钮 -->
<view class="btns">
<view
class="box-btn card"
v-if="buyType != 'PINTUAN' && goodsDetail.goodsType != 'VIRTUAL_GOODS'"
@click="addToCartOrBuy('cart')"
>加入购物车</view
>
<view class="box-btn buy" @click="addToCartOrBuy('buy')">立即购买</view>
</view>
</view>
</u-popup>
</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,
// 步进器的大小尺寸单位是 rpx
numberBox: { selectName: "", //选中商品的昵称
width: "50", selectSkuList: "", //选中商铺sku,
height: "50", selectedSpecImg: "", //选中的图片路径
size: "22", buyType: "", //用于存储促销，拼团等活动类型
color: "#333", parentOrder: "", //父级拼团活动的数据 - 如果是团员则有数据
bgColor: "#fff", formatList: [],
}, currentSelceted: [],
selectName: "", //选中商品的昵称 skuList: "",
selectSkuList: "", //选中商铺sku, isClose: false, //是否可以点击遮罩关闭
selectedSpecImg: "", //选中的图片路径 };
buyType: "", //用于存储促销，拼团等活动类型 },
parentOrder: "", //父级拼团活动的数据 - 如果是团员则有数据 props: {
formatList: [], buyMask: {
currentSelceted: [], type: Boolean,
skuList: "", default: false,
isClose: false, //是否可以点击遮罩关闭 },
}; isGroup: {
}, type: Boolean,
props: { default: false,
buyMask: { },
type: Boolean, goodsDetail: {
default: false, default: "",
}, type: null,
isGroup: { },
type: Boolean, selectedSku: {
default: false, default: "",
}, type: null,
goodsDetail: { },
default: "", goodsSpec: {
type: null, default: "",
}, type: null,
selectedSku: { },
default: "", addr: {
type: null, default: "",
}, type: null,
goodsSpec: { },
default: "", pointDetail: {
type: null, default: "",
}, type: null,
addr: { },
default: "", },
type: null, watch: {
}, num(val){
pointDetail: { if(val){
default: "", if(val > this.goodsDetail.quantity){
type: null, console.log(val)
}, this.val = this.goodsDetail.quantity
}, }
watch: { }
buyType: { },
handler(val) { buyType: {
if (val) { handler(val) {
this.buyType = val; if (val) {
} this.buyType = val;
}, }
immediate: true, },
}, immediate: true,
selectSkuList: { },
handler(val, oldval) { selectSkuList: {
this.$emit("changed", val); handler(val, oldval) {
}, this.$emit("changed", val);
deep: true, },
}, deep: true,
}, },
},
methods: { methods: {
// 格式化金钱 1999 --> [1999,00] // 格式化金钱 1999 --> [1999,00]
formatPrice(val) { formatPrice(val) {
if (typeof val == "undefined") { if (typeof val == "undefined") {
return val; return val;
} }
return val.toFixed(2).split("."); return val.toFixed(2).split(".");
}, },
closeMask() { closeMask() {
this.$emit("closeBuy", false); this.$emit("closeBuy", false);
}, },
/**点击规格 */ /**点击规格 */
handleClickSpec(val, index, specValue) { handleClickSpec(val, index, specValue) {
this.currentSelceted[index] = specValue.value; this.currentSelceted[index] = specValue.value;
let selectedSkuId = this.goodsSpec.find((i) => { let selectedSkuId = this.goodsSpec.find((i) => {
let matched = true; let matched = true;
let specValues = i.specValues.filter((j) => j.specName !== "images"); let specValues = i.specValues.filter((j) => j.specName !== "images");
for (let n = 0; n < specValues.length; n++) { for (let n = 0; n < specValues.length; n++) {
if (specValues[n].specValue !== this.currentSelceted[n]) { if (specValues[n].specValue !== this.currentSelceted[n]) {
matched = false; matched = false;
return; return;
} }
} }
if (matched) { if (matched) {
return i; return i;
} }
}); });
if (selectedSkuId?.skuId) { if (selectedSkuId?.skuId) {
this.$set(this.currentSelceted, index, specValue.value); this.$set(this.currentSelceted, index, specValue.value);
this.selectSkuList = { this.selectSkuList = {
spec: { spec: {
specName: val.name, specName: val.name,
specValue: specValue.value, specValue: specValue.value,
}, },
data: this.goodsDetail, data: this.goodsDetail,
}; };
this.selectName = specValue.value; this.selectName = specValue.value;
this.$emit("handleClickSku", { this.$emit("handleClickSku", {
skuId: selectedSkuId.skuId, skuId: selectedSkuId.skuId,
goodsId: this.goodsDetail.goodsId, goodsId: this.goodsDetail.goodsId,
}); });
} else { } else {
uni.showToast({ uni.showToast({
title: "暂无该商品!", title: "暂无该商品!",
duration: 2000, duration: 2000,
icon: "none", icon: "none",
}); });
} }
}, },
/** /**
* 直接购买 * 直接购买
*/ */
buy(data) { buy(data) {
API_trade.addToCart(data).then((res) => { API_trade.addToCart(data).then((res) => {
if (res.data.success) { if (res.data.success) {
uni.navigateTo({ uni.navigateTo({
url: `/pages/order/fillorder?way=${ url: `/pages/order/fillorder?way=${
data.cartType data.cartType
}&addr=${""}&parentOrder=${encodeURIComponent( }&addr=${""}&parentOrder=${encodeURIComponent(
JSON.stringify(this.parentOrder) JSON.stringify(this.parentOrder)
)}`, )}`,
}); });
} }
}); });
}, },
/** /**
* 添加到购物车或购买 * 添加到购物车或购买
*/ */
addToCartOrBuy(val) { addToCartOrBuy(val) {
if (!this.selectSkuList) { if (!this.selectSkuList) {
uni.showToast({ uni.showToast({
title: "请选择规格商品", title: "请选择规格商品",
icon: "none", icon: "none",
}); });
return; return;
} }
let data = { let data = {
skuId: this.goodsDetail.id, skuId: this.goodsDetail.id,
num: this.num, num: this.num,
}; };
if (val == "cart") { if (val == "cart") {
API_trade.addToCart(data).then((res) => { API_trade.addToCart(data).then((res) => {
if (res.data.code == 200) { if (res.data.code == 200) {
uni.showToast({ uni.showToast({
title: "商品已添加到购物车", title: "商品已添加到购物车",
icon: "none", icon: "none",
}); });
this.$emit("queryCart"); this.$emit("queryCart");
this.closeMask(); this.closeMask();
} }
}); });
} else { } else {
// 判断是否拼团商品 // 判断是否拼团商品
if (this.buyType) { if (this.buyType) {
data.cartType = "PINTUAN"; data.cartType = "PINTUAN";
} else if (this.goodsDetail.goodsType == "VIRTUAL_GOODS") { } else if (this.goodsDetail.goodsType == "VIRTUAL_GOODS") {
data.cartType = "VIRTUAL"; data.cartType = "VIRTUAL";
} else { } else {
data.cartType = "BUY_NOW"; data.cartType = "BUY_NOW";
} }
API_trade.addToCart(data).then((res) => { API_trade.addToCart(data).then((res) => {
if (res.data.code == 200) { if (res.data.code == 200) {
uni.navigateTo({ uni.navigateTo({
url: `/pages/order/fillorder?way=${data.cartType}&addr=${ url: `/pages/order/fillorder?way=${data.cartType}&addr=${
this.addr.id || "" this.addr.id || ""
}&parentOrder=${encodeURIComponent(JSON.stringify(this.parentOrder))}`, }&parentOrder=${encodeURIComponent(JSON.stringify(this.parentOrder))}`,
}); });
} }
}); });
} }
}, },
formatSku(list) { formatSku(list) {
// 格式化数据 // 格式化数据
let arr = [{}]; let arr = [{}];
if(!Array.isArray(list)){
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 (!Array.isArray(list)) {
if ( return false
arrItem.name == name && }
arrItem.values && list.forEach((item, index) => {
!arrItem.values.find((i) => { item.specValues.forEach((spec, specIndex) => {
return i.value === values.value; let name = spec.specName;
}) let values = {
) { value: spec.specValue,
arrItem.values.push(values); quantity: item.quantity,
} skuId: item.skuId,
};
if (name === "images") {
return;
}
let keys = arr.map((key) => { arr.forEach((arrItem, arrIndex) => {
return key.name; if (
}); arrItem.name == name &&
if (!keys.includes(name)) { arrItem.values &&
arr.push({ !arrItem.values.find((i) => {
name: name, return i.value === values.value;
values: [values], })
}); ) {
} arrItem.values.push(values);
}); }
});
});
arr.shift(); let keys = arr.map((key) => {
this.formatList = arr; return key.name;
});
if (!keys.includes(name)) {
arr.push({
name: name,
values: [values],
});
}
});
});
});
list.forEach((item) => { arr.shift();
// 默认选中 this.formatList = arr;
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; 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.selectSkuList = { this.selectName = value.specValue;
spec: value,
data: this.goodsDetail,
};
});
}
});
this.skuList = list; this.selectSkuList = {
// console.log(" this.skuList", this.skuList) spec: value,
}, data: this.goodsDetail,
}, };
});
}
});
mounted() { this.skuList = list;
this.formatSku(this.goodsSpec); // 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;
}
.buy {
background-image: linear-gradient(135deg, #ffba0d, #ffc30d 69%, #ffcf0d);
box-shadow: 0 2px 6px 0 rgba(255, 65, 66, 0.2);
}
.buy { .card {
background-image: linear-gradient(135deg, #ffba0d, #ffc30d 69%, #ffcf0d); background-image: linear-gradient(135deg, #f2140c, #f2270c 70%, #f24d0c);
box-shadow: 0 2px 6px 0 rgba(255, 65, 66, 0.2); box-shadow: 0 2px 6px 0 rgba(255, 65, 66, 0.2);
} }
.card { /deep/.u-icon-plus,
background-image: linear-gradient(135deg, #f2140c, #f2270c 70%, #f24d0c); .u-icon-minus,
box-shadow: 0 2px 6px 0 rgba(255, 65, 66, 0.2); .u-icon-disabled {
} height: 30rpx !important;
background: #fff !important;
}
/deep/.u-icon-plus, .goods-skus-number {
.u-icon-minus, justify-content: space-between;
.u-icon-disabled { display: flex;
height: 30rpx !important; text-align: right
background: #fff !important; }
}
.goods-skus-number { /deep/ .uni-scroll-view {
justify-content: space-between; overflow: hidden !important;
display: flex; }
}
/deep/ .uni-scroll-view { .active {
overflow: hidden !important; background: $price-light-color !important;
} border: 2rpx solid $price-color;
font-weight: bold;
color: $price-color !important;
box-sizing: border-box;
}
.active { .goods-skus-box {
background: $price-light-color !important; overflow-y: auto;
border: 2rpx solid $price-color; height: 610rpx;
font-weight: bold; // #ifdef MP-WEIXIN
color: $price-color !important; height: 570rpx;
box-sizing: border-box; // #endif
} margin-bottom: 10rpx;
}
.goods-skus-box { .goods-skus-view {
overflow-y: auto; overflow: hidden;
height: 610rpx;
// #ifdef MP-WEIXIN
height: 570rpx;
// #endif
margin-bottom: 10rpx;
}
.goods-skus-view { .skus-view-list {
overflow: hidden; >.skus-view-item {
flex: 1;
padding: 0 36rpx;
.skus-view-list { overflow: hidden;
> .skus-view-item { height: 60rpx;
flex: 1; line-height: 60rpx;
padding: 0 36rpx; float: left;
text-align: center;
margin-left: 24rpx;
margin-bottom: 20rpx;
font-size: 22rpx;
color: #262626;
background: #f2f2f2;
border-radius: 30rpx;
}
}
}
overflow: hidden; .goods-header {
height: 60rpx; height: 200rpx;
line-height: 60rpx; display: flex;
float: left; align-items: center;
text-align: center; margin-bottom: 36rpx;
margin-left: 24rpx; }
margin-bottom: 20rpx;
font-size: 22rpx;
color: #262626;
background: #f2f2f2;
border-radius: 30rpx;
}
}
}
.goods-header { .goods-box {
height: 200rpx; padding: 50rpx 36rpx 0 36rpx;
display: flex; }
align-items: center;
margin-bottom: 36rpx;
}
.goods-box { .goods-skus {
padding: 50rpx 36rpx 0 36rpx; padding: 0 20rpx;
} }
.goods-skus { .goods-price {
padding: 0 20rpx; color: $price-color;
} line-height: 80rpx;
>* {
color: $price-color;
line-height: 80rpx;
}
}
.goods-price { .promotion-box {
color: $price-color; line-height: 1;
line-height: 80rpx; display: flex;
display: flex; align-items: center;
} text-decoration: line-through;
.promotion-box { color: #999;
line-height: 1; margin-left: 10rpx;
display: flex;
align-items: center; /deep/ span {
text-decoration: line-through; font-size: 30rpx;
color: #999; }
margin-left: 10rpx; }
/deep/ span {
font-size: 30rpx; .promotion {
} font-size: 30rpx;
} }
.promotion {
font-size: 30rpx; .goods-price-promotionShow {
} font-size: 48rpx;
.goods-price-promotionShow { }
font-size: 48rpx;
} .goods-check-skus {
.goods-check-skus { font-size: 24rpx;
font-size: 24rpx; color: #999;
color: #999;
> .goods-check-skus-name { >.goods-check-skus-name {
margin-left: 4rpx; margin-left: 4rpx;
} }
> span {
color: #333; >span {
} color: #333;
} }
</style> }
</style>