Skip to content

M
mayi-mp-shop
Commit aa0ee60f by 李嘉林
Options

加购弹窗

parent d125e8f4
Showing with 1369 additions and 4 deletions
src/api/live.js
......@@ -11,7 +11,7 @@ export default {
},
// 查询所有产品规格详情
getProductGoodsByProductInfo(options) {
return requestPOST1(`${process.env.OLSHOP_URL}/product/get_product_goods_by_product_info?productInfoId=${options}`);
return requestPOST1(`${process.env.OLSHOP_URL}/product/get_product_goods_by_product_info`, options);
},
// 获取商品所有规格
getProductGoodsSpecifications(options) {
......
src/components/common/SelectGoods.vue 0 → 100644
<template>
<!-- 选择商品规格 -->
<div class="livedSelectionSpe">
<div class="aaa" :style="{ 'z-index': show ? 999 : -999 }">
<div class="bg" v-if="show" @click="close"></div>
<div class="goodsMess" :style="{'bottom':show?0:''}">
<div class="sku">
<!-- 关闭按钮 -->
<div class="close" @click="closeDia">
<van-icon name="cross" />
</div>
<!-- 内容 -->
<div class="cont flex">
<div class="pic">
<img width="100%" height="100%" :src="product_goods_info.goodsImgUrl" alt />
</div>
<div class="content">
<div class="price" v-if="product_goods_info.discountPrice">
<div>￥{{ product_goods_info.discountPrice }}</div>
<div v-if="product_goods_info.singleItemActivityId">
<p class="delPrice">￥{{ product_goods_info.originalPrice }}</p>
<!-- <del style="color:#666;">￥{{product_goods_info.originalPrice}}</!-->
</div>
<div
v-else-if="product_goods_info.discountPrice - 0 < product_goods_info.goodsSuggestedRetailPrice - 0">
<p class="delPrice">￥{{ product_goods_info.goodsSuggestedRetailPrice }}</p>
<!-- <del style="color:#666;">￥{{product_goods_info.goodsSuggestedRetailPrice}}</del> -->
</div>
</div>
<template v-else-if="minSale < maxSale">
<div class="price">￥{{ minSale }}-￥{{ maxSale }}</div>
<p class="delPrice"
v-if="(minSale - 0 < minSuggestedRetailPrice - 0) && (maxSale - 0 < maxSuggestedRetailPrice - 0)">
￥{{ minSuggestedRetailPrice }}-￥{{ maxSuggestedRetailPrice }}
</p>
<!-- <del
v-if="(minSale-0<minSuggestedRetailPrice-0)&&(maxSale-0<maxSuggestedRetailPrice-0)"
>￥{{minSuggestedRetailPrice}}-￥{{maxSuggestedRetailPrice}}</del> -->
</template>
<template v-else>
<div class="price">￥{{ minSale }}</div>
</template>
<div class="num" v-if="product_goods_info.oversoldFlag == 1 && isGetMixId">库存充足</div>
<div class="num" v-else-if="product_goods_info.oversoldFlag != 1 && isGetMixId">
库存{{ product_goods_info.sellMaxQty }}件</div>
<div class="Choice" v-if="isChoice && !nonstandardGoods">【请选择规格】</div>
<div class="Choice line-clamp1" v-else>
<span v-for="(item, index) in goodsGuige" :key="index">{{ item }}&nbsp;&nbsp;&nbsp;</span>
</div>
</div>
</div>
<div class="commoditySty">
<ul>
<li v-for="(ProductItem, n) in goodsGuiges" :key="n">
<div class="property">{{ ProductItem.specificationName }}</div>
<div class="specification clearfix">
<div v-for="(oItem, index) in ProductItem.specificationValue" :key="index"
@click="specificationBtn(oItem.name, n, $event, index)"
:class="[oItem.isShow ? '' : 'soldOut', subIndex[n] == index ? 'active' : '']"
class="specification-item">
<div>{{ oItem.name }}</div>
</div>
</div>
</li>
</ul>
</div>
<div class="buyQty flex">
<div class="ti">购买数量</div>
<van-stepper :value="buyQty"
:min="product_goods_info.productMinCount > 0 ? product_goods_info.productMinCount : 1" :max="MaxQtyNum"
:disable-input="true" @change="changeQty" input-class="ipt" />
</div>
</div>
<div v-if="!goodsLowerShelf && !sellOut" class="bottom flex">
<div class="addCart van-button" @click="onAddCartClicked">加入购物车</div>
<div class="toPay van-button" @click="onBuyClicked">立即购买</div>
</div>
<div v-else-if="!goodsLowerShelf && sellOut" class="goodsStand">商品已售罄</div>
<div v-else class="goodsStand">商品已下架</div>
</div>
</div>
</div>
</template>
<script type="text/ecmascript-6">
import { DFSImg } from "@/utils/index";
import live from "@/api/live";
const app = getApp();
export default {
name: "",
data() {
return {
show: false,
productInfoId: "",
minSale: "",
maxSale: "",
goodsImg: "",
minSuggestedRetailPrice: "",
maxSuggestedRetailPrice: "",
goodsLowerShelf: false,
product_goods_info: {
afterSaleContent: "",
goodsImgUrl: "",
maxQty: "",
pdtName: "",
productGoodsId: "",
productGoodsMixId: "",
productId: "",
referencePrice: "",
marketPrice: "",
oversoldFlag: Number,
originalPrice: "",
sellMaxQty: "",
limitQty: "",
specifications: [], //原规格
discountPrice: ""
},
buyQty: 1,
goodsGuige: [],
// 对应商品所有规格
goodsGuiges: [],
// 规格转json对象
goodsString: {},
// 规格对象
choose: {},
MaxQtyNum: 0,
isGetMixId: false, // 是否取价格
isChoice: true, //显示“请选择规格”
getProductInfos: [], //产品信息数组
getProductInfo: {}, //产品信息
isSingle: false, //是否为单规格商品
saleStatus: 1, //销售状态,
goodsStand: 1, //上下架,
shopItemInfo: {}, //存放要和选中的值进行匹配的数据
subIndex: [], //是否选中 因为不确定是多规格还是但规格，所以这里定义数组来判断
isLogin: false, //是否登录
nonstandardGoods: false, //无规格商品
selectedPrice: "", // 选中的规格价格
isChoice: true, //显示“请选择规格”
productUrl: "", // 产品主图
sellOut: false, //售罄及无库存且不是超卖
isGetMixId: false, // 是否取价格
paramData: "", //埋点数据
maxSelectedPrice: 0, // 限时特惠选中规格后划线价
allSellOut: false, //全部售罄标识
isDefault: false,
};
},
components: {},
computed: {},
created() { },
onLoad() { },
mounted() {
let _this = this;
app.openSelectGoods = (val) => {
console.log("----打开弹窗");
_this.open(val);
}
},
methods: {
open(val) {
wx.showLoading({
title: '加载中...',
})
Object.assign(this.$data, this.$options.data());
this.productId = val.productId;
this.productInfoId = val.productId;
this.terminalProductId = val.terminalProductId;
this.productName = val.productName;
if (val.productNature == 5) {
return wx.showToast({
title: '电子卡券不可加入购物车',
icon: 'none',
});
}
if (val.productNature == 3) {
return wx.showToast({
title: '会员卡不可加入购物车',
icon: 'none',
});
}
if (val.productNature == 2) {
return wx.showToast({
title: '虚拟商品不可加入购物车',
icon: 'none',
});
}
live.getProductInfo(this.productId).then(res1 => {
let res = res1.data;
if (res.code == 200) {
this.maxSale = Number(
res.data.maxSuggestedRetailPrice
);
this.minSale = Number(
res.data.minSuggestedRetailPrice
);
this.maxDiscountPrice = Number(
res.data.maxDiscountPrice
);
this.minDiscountPrice = Number(
res.data.minDiscountPrice
);
this.productNature = res.data.productNature;
this.goodsLowerShelf =
res.data.saleStatus != 1 ? true : false; //1 上架 0下架 true 下架
if (
res.data.productPictures &&
res.data.productPictures.length > 0
) {
this.goodsImg = DFSImg(
res.data.productPictures[0].url
);
}
this.showAddShopCartFlag = res.data.showAddShopCartFlag;
this.productNature = res.data.productNature - 0;
// 商品开售状态 1：立刻开售，2：定时开售）
this.saleWay = res.data.saleWay ? res.data.saleWay - 0 : 1;
this.init();
}
})
},
close() {
this.show = false;
},
// 初始化
async init() {
let query = {
productInfoId: val.productId,
terminalProductId: val.terminalProductId,
}
await live
.getProductGoodsByProductInfo(query)
.then(res => {
if (res.data.code == 200) {
this.getProductInfos = res.data.data;
this.product_goods_info.productGoodsId = res.data.data[0].productGoodsId;
this.product_goods_info.goodsId = res.data.data[0].goodsId;
this.product_goods_info.productGoodsMixId =
res.data.data[0].productGoodsMixId;
this.product_goods_info.specifications = res.data.data[0].specifications;
this.product_goods_info.oversoldFlag = res.data.data[0].oversoldFlag;
}
});
// 获取商品规格
let productId = this.productInfoId;
await live.getProductGoodsSpecifications(productId).then(res => {
if (res.data.code == 200) {
this.goodsGuiges = res.data.data;
console.log(this.goodsGuiges, '------------188')
//做判断如果只有一套规格，直接添加规格 不用弹出选择规格弹窗直接进行下单 4.8建
let isSingles = [];
this.goodsGuiges.forEach((item, index) => {
if (item.specificationValue.length >= 2) {
isSingles.push(1);
}
if (isSingles.length != 0) {
this.isSingle = false; //多规格
this.goodsGuige = [];
this.subIndex.pop();
} else {
this.isSingle = true; // 单规格商品
this.isChoice = false;
// this.goodsGuige.push(item.specificationValue[0]);
this.goodsGuige = [];
this.subIndex.push(0);
// 通过mixid取价格
}
});
if (this.isSingle == true) {
this.getMixId(0);
} else {
this.show = true;
}
// 规格数据重组
for (var i = 0; i < this.goodsGuiges.length; i++) {
for (
var j = 0;
j < this.goodsGuiges[i].specificationValue.length;
j++
) {
this.goodsGuiges[i].specificationValue[j] = {
name: this.goodsGuiges[i].specificationValue[j],
isShow: true
};
}
}
// console.log(this.specifications,'-------------规格')
this.getProductInfos.forEach((item, index) => {
item.twoSpecifications = [];
item.specifications.forEach((item1, index1) => {
item.specifications.splice(index1, 1, item1.specificationValue);
item.twoSpecifications.splice(
index1,
1,
item1.specificationValue
);
});
item.specifications = item.specifications.join("abab@&*");
});
for (var i in this.getProductInfos) {
this.shopItemInfo[
this.getProductInfos[i].specifications
] = this.getProductInfos[i]; //修改数据结构格式，改成键值对的方式，以方便和选中之后的值进行匹配
}
let defaultnoSellOut=this.getProductInfos.filter((item,index)=>{return !((item.oversoldFlag==0&&item.saleQty-0<=0)||item.saleStatus=='0')});
// 默认选中一个只有一个未售罄的规格
// this.defaultSelection(defaultnoSellOut[0].twoSpecifications,this.goodsGuiges);
if (defaultnoSellOut.length == 1) {
// 默认选中一个只有一个未售罄的规格
this.defaultSelection(defaultnoSellOut[0].twoSpecifications, this.goodsGuiges);
}
if (this.goodsGuiges.length == 1) {
this.goodsGuiges[0].specificationValue.forEach((item, index) => {
for (var i in this.shopItemInfo) {
if (item.name == i && this.shopItemInfo[i].saleStatus == "0") {
item.isShow = false;
}
if (
item.name == i &&
this.shopItemInfo[i].oversoldFlag == 0 &&
this.shopItemInfo[i].saleQty - 0 <= 0
) {
item.isShow = false;
}
}
});
}
// this.checkItem();
} else if (res.data.code == -1) {
this.isSingle = true;
this.nonstandardGoods = true;
this.goodsGuige = [];
this.getMixId(0);
}
});
},
changeQty(event) {
console.log(event.mp.detail, '------------------------------279')
this.buyQty = event.mp.detail;
this.getMixId(1, true);
},
// 默认选中一组规格
// 两个参数goodsSpc,allSpc sku及所有规格
defaultSelection(goodsSpc, allSpc) {
// 是默认调取getMixid接口状态
this.isDefault = true;
// console.log(goodsSpc,'-------371')
// console.log(allSpc,'-------372')
for (let i = 0; i < allSpc.length; i++) {
for (let j = 0; j < allSpc[i].specificationValue.length; j++) {
for (let k = 0; k < goodsSpc.length; k++) {
if (allSpc[i].specificationValue[j].name == goodsSpc[k]) {
this.specificationBtn(allSpc[i].specificationValue[j].name, i, null, j);
break;
}
}
}
}
},
onAddCartClicked() {
let productGoodsId = this.product_goods_info.productGoodsId;
if (
this.goodsGuige.length < this.goodsGuiges.length ||
this.checkGoodsGuigeValue()
) {
wx.showToast({
title: '请选择规格',
icon: 'none',
})
} else if (
this.product_goods_info.oversoldFlag == 0 &&
this.product_goods_info.sellMaxQty <= 0
) {
wx.showToast({
title: '商品暂无库存',
icon: 'none',
})
} else {
live
.addCart([{ productGoodsId: productGoodsId, qty: this.buyQty }])
.then(res => {
if (res.data.code == 200) {
wx.showToast({
title: '加入成功',
icon: 'success',
})
this.show = false;
} else {
wx.showToast({
title: res.data.msg,
icon: 'none',
})
}
});
}
},
// 立即购买
onBuyClicked() {
if (
this.goodsGuige.length < this.goodsGuiges.length ||
this.checkGoodsGuigeValue()
) {
wx.showToast({
title: '请选择规格',
icon: 'none',
})
} else if (
this.product_goods_info.oversoldFlag == 0 &&
this.product_goods_info.sellMaxQty <= 0
) {
wx.showToast({
title: '商品暂无库存',
icon: 'none',
})
} else {
let query = {};
query.productGoodsMixId = this.product_goods_info.productGoodsMixId;
query.productGoodsId = this.product_goods_info.productGoodsId;
query.goodsId = this.product_goods_info.goodsId;
query.qty = this.buyQty;
query.goodsString = JSON.stringify(this.goodsString);
query.maxQty = this.product_goods_info.maxQty;
query.productMinCount = this.product_goods_info.productMinCount;
query.fromLived = 1;
query.liveId = this.liveId;
this.show = false;
// 将规格转化为json字符串
this.backPath = `/order/orderConfirm`;
wx.reLaunch({
url: `../index/main?from=livedToOrderConfirm&backpath=${this.backPath
}&params=${JSON.stringify(query)}`
})
}
},
// 取价格
getMixId(val, getNewPrice) {
if (!this.isDefault) {
wx.showLoading({
title: '加载中...',
})
}
this.isDefault = false;
this.isGetMixId = true;
let productGoodsMixId = this.product_goods_info.productGoodsMixId
live
.getProductGoodsByMixId(productGoodsMixId)
.then(res => {
this.show = true;
wx.hideLoading()
if (res.data.code == 200) {
if (this.nonstandardGoods == false) {
res.data.data.specifications.forEach((item, index) => {
if (item.specificationPictureUrl != "") {
this.product_goods_info.goodsImgUrl = DFSImg(
item.specificationPictureUrl,
400,
400
);
}
});
if (this.product_goods_info.goodsImgUrl == "") {
this.productUrl = res.data.data.productUrl || "";
this.product_goods_info.goodsImgUrl =
DFSImg(res.data.data.productUrl, 400, 400) || "";
}
} else {
this.productUrl = res.data.data.productUrl || "";
}
this.product_goods_info.goodsImgUrl =
DFSImg(res.data.data.productUrl, 400, 400) || DFSImg("", 400, 400);
this.product_goods_info.marketPrice = Number(res.data.data.marketPrice);
this.product_goods_info.originalPrice = Number(res.data.data.originalPrice);
this.product_goods_info.discountPrice = Number(res.data.data.discountPrice);
this.product_goods_info.sellMaxQty = Number(res.data.data.sellMaxQty); //可销售库存
this.product_goods_info.limitQty = Number(res.data.data.limitQty); // 实际库存
this.product_goods_info.productMinCount = Number(res.data.data.productMinCount); //最小购买数 0不限
this.product_goods_info.maxQty = Number(res.data.data.maxQty); // 最大购买数 0不限
this.product_goods_info.oversoldFlag = res.data.data.oversoldFlag; // 1超卖 0不超卖
this.product_goods_info.goodsSuggestedRetailPrice =
Number(res.data.data.goodsSuggestedRetailPrice);
this.product_goods_info.singleItemActivityId =
res.data.data.singleItemActivityId || '';
if (!getNewPrice) {
this.buyQty =
this.product_goods_info.productMinCount > 0 ? this.product_goods_info.productMinCount : 1;
}
if (
this.product_goods_info.oversoldFlag != 1 &&
this.product_goods_info.sellMaxQty - 0 <= 0
) {
this.sellOut = true;
// console.log(this.sellOut, "cg416");
} else {
this.sellOut = false;
}
this.getMaxQtyNum(); //更新最大值
this.$forceUpdate();
}
});
},
checkGoodsGuigeValue() {
for (let i = 0; i < this.goodsGuige.length; i++) {
if (
this.goodsGuige[i] == "" ||
this.goodsGuige[i] == "undefined" ||
this.goodsGuige[i] == undefined
) {
return true;
}
}
return false;
},
getMaxQtyNum() {
let num = 0;
if (this.product_goods_info.maxQty == "0") {
//无限制
if (this.product_goods_info.oversoldFlag == "0") {
//不允许超卖
num = this.product_goods_info.sellMaxQty;
} else {
num = 999;
}
} else {
if (
this.product_goods_info.sellMaxQty > this.product_goods_info.maxQty
) {
num = this.product_goods_info.sellMaxQty;
} else {
num = this.product_goods_info.maxQty;
}
}
this.MaxQtyNum = num;
},
specificationBtn(item, n, event, index) {
this.isChoice = false;
if (this.goodsGuige[n] != item) {
this.goodsGuige[n] = item;
// this.goodsGuige[n] = item;
this.subIndex[n] = index;
this.subIndex.splice(n, 1, index);
} else {
this.goodsGuige[n] = "";
this.subIndex[n] = -1; //去掉选中的颜色
this.subIndex.splice(n, 1, -1); //去掉选中的颜色
this.product_goods_info.discountPrice = null;
this.goodsStand = 1;
let isChoice = 0;
// this.product_goods_info.goodsImgUrl=DFSImg(this.goodsImg,400,400);
this.product_goods_info.goodsImgUrl =
this.goodsImg || DFSImg("", 1024, 1024);
this.sellOut = false;
this.isGetMixId = false;
this.goodsGuige.forEach((item, index) => {
if (item == "") {
isChoice++;
}
});
if (isChoice == this.goodsGuige.length) {
this.isChoice = true;
this.goodsGuige = [];
isChoice = 0;
} else {
this.isChoice = false;
}
}
this.checkItem();
let noStr = 0;
this.goodsGuige.forEach((item, index) => {
if (item != "") noStr++;
});
if (noStr == this.goodsGuiges.length) {
this.getMixId(1);
}
},
checkItem() {
var option = this.goodsGuiges;
var result = []; //定义数组存储被选中的值
// console.log(this.goodsGuiges,"cg524")
for (var i in option) {
result[i] = this.goodsGuige[i] ? this.goodsGuige[i] : "";
}
for (var i in option) {
var last = result[i]; //把选中的值存放到字符串last去
for (var k in option[i].specificationValue) {
result[i] = option[i].specificationValue[k].name; //赋值，存在直接覆盖，不存在往里面添加name值
option[i].specificationValue[k].isShow = this.isMay(result); //在数据里面添加字段isShow来判断是否可以选择
}
result[i] = last; //还原，目的是记录点下去那个值，避免下一次执行循环时避免被覆盖
}
this.$forceUpdate(); //重绘
},
isMay: function (result) {
for (var i in result) {
if (result[i] == "") {
return true; //如果数组里有为空的值，那直接返回true
}
}
// console.log(result,this.goodsGuige,"cg494")
for (var i in this.shopItemInfo) {
let newArr = i.split("abab@&*");
let isTrue = this.isContained(result, newArr);
if (isTrue == true) {
// console.log(newArr,i,result,"cg498")
if (this.goodsGuige.length == this.goodsGuiges.length) {
let isGoods = this.isContained(this.goodsGuige, newArr);
if (isGoods == true) {
this.product_goods_info.productGoodsMixId = this.shopItemInfo[
i
].productGoodsMixId;
this.product_goods_info.productGoodsId = this.shopItemInfo[
i
].productGoodsId;
this.product_goods_info.goodsId = this.shopItemInfo[i].goodsId;
}
}
// 判断上下架、售罄
console.log(
this.shopItemInfo[i].saleStatus == 0,
this.shopItemInfo[i].oversoldFlag == 0 &&
this.shopItemInfo[i].saleQty - 0 <= 0,
"-------------------703"
);
if (
this.shopItemInfo[i].saleStatus == 0 ||
(this.shopItemInfo[i].oversoldFlag == 0 &&
this.shopItemInfo[i].saleQty - 0 <= 0)
) {
return false;
} else {
return true;
}
}
}
},
isContained(aa, bb) {
if (
!(aa instanceof Array) ||
!(bb instanceof Array) ||
aa.length < bb.length
) {
return false;
}
for (var i = 0; i < bb.length; i++) {
var flag = false;
for (var j = 0; j < aa.length; j++) {
if (aa[j] == bb[i]) {
flag = true;
break;
}
}
if (flag == false) {
return flag;
}
}
return true;
},
// 关闭
closeDia() {
this.$emit("closeSpeDia");
}
}
};
</script>
<style lang="scss" scoped>
.aaa {
position: fixed;
width: 100%;
bottom: 0;
display: flex;
overflow: hidden;
justify-content: flex-end;
}
.bg {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(#000000, 0.75);
}
.delPrice {
text-decoration: line-through;
color: #666;
}
.flex {
display: flex;
}
/*清除浮动*/
.clearfix {
zoom: 1;
}
.clearfix:after {
clear: both;
content: '.';
display: block;
width: 0;
height: 0;
visibility: hidden;
}
/* 一行否则出现省略号 */
.line-clamp1 {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
}
.line-clamp2 {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
line-height: 22px;
}
.livedSelectionSpe {
.goodsMess {
width: 100%;
background: rgba(255, 255, 255, 1);
border-radius: 8px 8px 0px 0px;
bottom: -100vh;
transition: all 0.3s linear;
background: #fff;
position: relative;
overflow-y: auto;
.sku {
padding: 8px 10px;
position: relative;
.close {
position: absolute;
right: 8px;
top: 8px;
font-size: 20px;
}
}
.cont {
width: 100%;
height: 126px;
border-bottom: 1px solid #e5e5e5;
.pic {
width: 100px;
height: 100px;
img {
width: 100%;
height: 100%;
}
}
.content {
margin-left: 8px;
width: 65%;
.price {
font-size: 13px;
font-weight: 400;
color: #ff4240;
margin-top: 10px;
}
.num,
.size {
font-size: 11px;
font-weight: 400;
color: rgba(146, 146, 146, 1);
}
.size {
color: rgba(41, 41, 41, 1);
}
.Choice {
width: 100%;
margin-top: 10px;
font-size: 14px;
color: #292929;
}
.num,
.soldout {
margin-top: 10px;
margin-bottom: 13px;
}
}
}
.commoditySty {
border-bottom: 1px solid #e5e5e5;
// max-height: 240px;
// overflow-y: scroll;
ul {
height: 100%;
li {
height: 100%;
.property {
margin: 10px 0;
font-size: 15px;
}
.specification {
div.specification-item {
font-size: 15px;
border: 1px solid #606060;
border-radius: 4px;
color: #606060;
text-align: center;
padding: 2px 4px;
float: left;
margin-right: 6px;
min-width: 30px;
margin-bottom: 6px;
box-sizing: content-box;
div {
text-align: left;
display: inline-block;
}
}
div.active {
color: #fff;
background-color: #ff4240;
border-color: #ff4240;
}
div.soldOut {
background-color: #ccc;
opacity: 0.4;
color: #000;
pointer-events: none;
border-color: #606060;
}
}
}
}
}
.buyQty {
margin-top: 10px;
width: 100%;
height: 60px;
justify-content: space-between;
.ti {
font-size: 14px;
}
/deep/.ipt {
color: #000 !important;
}
}
.bottom {
margin-top: 60px;
.van-button {
width: 50vw;
height: 50px;
text-align: center;
line-height: 50px;
font-size: 14px;
}
.toPay {
background: #ff4240;
color: #fff;
}
.addCart {
background-color: #fff;
color: #292929;
}
}
.goodsStand {
margin-top: 60px;
background: #606060;
width: 100%;
height: 49px;
text-align: center;
line-height: 49px;
color: #fff;
font-size: 16px;
}
}
}
</style>
src/components/common/TwoBAddCart.vue 0 → 100644
<template>
<!-- 2B商城加入购物车弹窗 -->
<div class="aaa" :style="{ 'z-index': show ? 999 : -999 }">
<div class="bg" v-if="show" @click="close"></div>
<div class="goodsMess" :style="{ 'bottom': show ? 0 : '' }">
<div class="title">
<div class="close" @click="close">
<van-icon name="cross" />
</div>
</div>
<div class="content">
<div class="item flex" v-for="(item, index) in list" :key="index" v-show="item.saleStatus != 0">
<div class="img">
<img :src="item.goodsImgUrl" :onerror="defaultImg" alt="" />
</div>
<div class="right">
<div class="info-top flex">
<p class="name line-clamp2">{{ item.specificationsStr }}</p>
<!-- 起购限购量 -->
<div class="limitCount flex" v-if="item.minLimitPurchaseNum > 0 || item.maxLimitPurchaseNum > 0">
<p class="minLimitCount" v-if="item.minLimitPurchaseNum > 0">
起购量：{{ item.minLimitPurchaseNum | keepIntNum }}
</p>
<p class="maxLimitNum" v-if="item.maxLimitPurchaseNum > 0 && item.oversoldFlag == 0">
限购量：{{ item.maxLimitPurchaseNum | keepIntNum }}
</p>
</div>
</div>
<div class="info-center flex">
<p class="count">
库存：<span v-if="item.oversoldFlag == 1">充足</span><span v-else>{{ item.saleQty | keepIntNum }}</span>
</p>
<van-stepper button-size="24px" integer :min="0"
:max="item.oversoldFlag == 1 ? 999999 : item.maxLimitPurchaseNum > 0 ? item.maxLimitPurchaseNum : 999999"
@minus="(e) => changeQty(item, e, 'minus')" @plus="(e) => changeQty(item, e, 'plus')"
@blur="(e) => changeQty(item, e, 'blur')" v-model="item.qty" :disabled="item.disabled" />
</div>
<div class="info-bottom flex">
<p class="price">￥{{ item.discountPrice | keepTwoNum }}</p>
<!-- 已加购数量 -->
<p class="purchased" v-if="item.purchased > 0">
已加购：{{ item.purchased }}
</p>
</div>
</div>
</div>
</div>
<div class="footer-iphonex">
<div class="isSelect flex">
<p class="selected" v-if="selectedText">已选：{{ selectedText }}</p>
<div class="allPrice">
<p>
商品金额：<span>￥{{ selectPrice}}</span>
</p>
</div>
</div>
<div class="bottom flex">
<div :disabled="addCartLoading" class="addCart " @click="addCart">加入购物车</div>
</div>
</div>
</div>
</div>
</template>
<script type="text/ecmascript-6">
import live from "@/api/live";
import goods from "@/api/goods";
import { DFSImg } from "@/utils/index";
const app = getApp();
export default {
name: "TwoBAddCart",
data() {
return {
show: false,
productId: "",
list: [],
addCartLoading: false,
defaultImg: `this.src="https://cdn.mayi888.com/product/85pdScJ5ch.jpg?x-oss-process=image/resize,m_pad,limit_0,w_800,h_800"`,
selectList: [],
};
},
components: {},
computed: {
selectPrice() {
let allPrice = 0;
this.selectList.forEach((item) => {
allPrice += item.qty * item.discountPrice;
});
return allPrice.toFixed(2);
},
// 已选
selectedText() {
let val = this.selectList.length;
let species = this.selectList.reduce((pre, cur) => { return pre + (cur.qty - 0) }, 0)
if (val > 0) {
return `${val}种${species}件`
}
return ``
}
},
created() { },
mounted() {
let _this = this;
app.openTwoBAddCart = (val) => {
console.log("----打开2B弹窗");
_this.open(val);
}
},
methods: {
open(val) {
if (val.productNature == 5) {
return wx.showToast({
title: '电子卡券不可加入购物车',
icon: 'none',
});
}
if (val.productNature == 3) {
return wx.showToast({
title: '会员卡不可加入购物车',
icon: 'none',
});
}
if (val.productNature == 2) {
return wx.showToast({
title: '虚拟商品不可加入购物车',
icon: 'none',
});
}
this.productId = val.productId;
let query = {
productInfoId: val.productId,
terminalProductId: val.terminalProductId,
}
live.getProductGoodsByProductInfo(query).then(res1 => {
let res = res1.data;
if (res.code == 200) {
this.init({ list: res.data || [] });
} else {
wx.showToast({
title: res.msg,
icon: 'none',
});
}
})
},
close() {
this.show = false;
},
init({ list }) {
console.log(list, "----list");
list.forEach((item) => {
item.qty = 0;
item.disabled = false;
item.minLimitPurchaseNum = item.minLimitPurchaseNum - 0;
item.maxLimitPurchaseNum = item.maxLimitPurchaseNum - 0;
item.discountPrice = item.discountPrice - 0;
item.goodsImgUrl = DFSImg(item.goodsImgUrl);
item.purchased = 0;
});
// 查询已加购数量
this.query_goods_cart_info();
this.list = list;
this.show = true;
},
query_goods_cart_info() {
goods
.query_goods_cart_info([this.productId])
.then((res1) => {
let res = res1.data;
if (res.code == 200 && res.data) {
this.cartList = res.data;
this.list.forEach((item) => {
this.cartList.forEach((item1) => {
if (item.goodsId == item1.goodsId) {
this.$set(item, "purchased", item1.qty - 0);
}
});
});
this.$forceUpdate();
}
});
},
// 改变数值
changeQty(data, el = null, type = "") {
let { qty } = data;
console.log("changeQty", qty, type);
// TODO 减1<起购量直接赋值0、加1<起购量直接赋值起购量
if (type == "minus") {
if (
data.minLimitPurchaseNum > 0 &&
qty - data.minLimitPurchaseNum == 0
) {
qty = 0;
} else {
qty = Number(qty) - 1;
}
} else if (type == "plus") {
if (data.minLimitPurchaseNum > 0 && qty == 0) {
qty = data.minLimitPurchaseNum;
} else {
qty = Number(qty) + 1;
}
} else if (type == "blur") {
if (
data.minLimitPurchaseNum > 0 &&
qty < data.minLimitPurchaseNum
) {
qty = data.minLimitPurchaseNum;
}
}
console.log(qty);
this.$set(data, "qty", qty);
this.selectList = this.list.filter((item) => item.qty > 0) || [];
},
addCart() {
let selectList = this.list.filter((item) => item.qty > 0) || [];
let query = [];
if (selectList.length > 0) {
query = selectList.map((item) => {
return {
productGoodsId: item.productGoodsId,
qty: item.qty,
};
});
} else {
return wx.showToast({
title: "未选择加购商品数量",
icon: 'none',
});
}
wx.showLoading({
title: '加购中...',
})
live.addCart(query).then((res1) => {
wx.hideLoading()
let res = res1.data;
if (res.code == 200) {
wx.showToast({
title: res.data,
icon: 'none',
});
setTimeout(() => {
this.close();
this.selectList = [];
}, 500);
} else {
wx.showToast({
title: res.msg,
icon: 'none',
});
}
});
},
},
};
</script>
<style lang="scss" scoped>
.aaa {
position: fixed;
width: 100%;
bottom: 0;
display: flex;
overflow: hidden;
justify-content: flex-end;
}
.bg {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(#000000, 0.75);
}
.goodsMess {
width: 100%;
background: rgba(255, 255, 255, 1);
border-radius: 8px 8px 0px 0px;
bottom: -100vh;
transition: all 0.3s linear;
background: #fff;
position: relative;
overflow-y: auto;
}
.title,
.content {
padding: 0 16px;
position: relative;
}
.title {
padding-top: 16px;
padding-bottom: 16px;
.price {
color: var(--main-color);
font-size: 18px;
text-align: center;
}
.close {
position: absolute;
right: 6px;
top: 6px;
font-size: 20px;
}
}
.content {
min-height: 30vh;
max-height: 60vh;
overflow-y: auto;
.item {
margin-bottom: 16px;
background: #fff;
border-radius: 10px;
padding: 6px;
justify-content: space-between;
align-items: center;
.img {
width: 80px;
height: 80px;
display: flex;
justify-content: center;
align-items: center;
background: #f5f5f5;
border-radius: 10px;
overflow: hidden;
flex-shrink: 0;
img {
width: 100%;
height: 100%;
object-fit: cover;
}
}
.right {
flex: 1;
margin-left: 10px;
&>div {
justify-content: space-between;
margin-bottom: 6px;
}
.info-top {
align-items: center;
.name {
font-size: 14px;
color: #333;
width: 24vw;
}
.limitCount {
margin-left: 30px;
justify-content: space-between;
margin-bottom: 6px;
color: #666;
.maxLimitNum {
margin-left: 10px;
}
}
}
.info-center {
.count {
color: #333;
font-size: 12px;
}
.van-stepper__input {
width: 70px !important;
}
}
.info-bottom {
.price {
color: var(--main-color);
margin-top: 4px;
}
.purchased {}
}
}
}
}
.isSelect {
border-top: 1px solid #eee;
background: #fff;
padding: 4px 16px;
justify-content: space-between;
align-items: center;
font-size: 12px;
.selected {
color: #666;
}
.allPrice {
color: #333;
span {
font-size: 14px;
color: var(--main-color);
}
}
}
.bottom {
height: 49px;
align-items: center;
background: #fff;
.addCart {
width: 100%;
height: 38px;
border-radius: 18px;
line-height: 38px;
margin: 0 10px;
background-color: var(--main-color);
color: #fff;
text-align: center;
}
}
</style>
src/components/livedModel/livedSelectionSpe.vue
......@@ -185,7 +185,7 @@ export default {
async init() {
let productInfoId = this.productInfoId;
await live
.getProductGoodsByProductInfo(productInfoId)
.getProductGoodsByProductInfo({productInfoId})
.then(res => {
if (res.data.code == 200) {
this.getProductInfos = res.data.data;
......
src/main.js
......@@ -97,6 +97,10 @@ mpApp.indexBgCallBack = function () { }
mpApp.openFilterGoods = function () { }
// 筛选弹窗点击确认
mpApp.getFilterGoodsData = function () { }
// 打开选择商品规格弹窗
mpApp.openSelectGoods = function () { }
// 打开选择商品规格(2B)弹窗
mpApp.openTwoBAddCart = function () { }
/**
* 组件点击行为收集
......
src/pages/home/index.vue
......@@ -132,6 +132,10 @@
<couponPopup></couponPopup>
<!-- 商品筛选 -->
<GoodsFliters></GoodsFliters>
<!-- 选规格 -->
<SelectGoods></SelectGoods>
<!-- 选规格(开启了企业要货) -->
<TwoBAddCart></TwoBAddCart>
</div>
</template>
......@@ -163,6 +167,8 @@ import customList from "../../components/custom-list";
import richText from "../../components/basicTool/rich-text";
import memberInfo from "../../components/basicTool/member-info";
import GoodsFliters from "../../components/common/GoodsFliters";
import SelectGoods from "../../components/common/SelectGoods";
import TwoBAddCart from "../../components/common/TwoBAddCart";
import { setTabBarActive, checkTabbarPage,themeColor, checkShowConditionIds } from "../../utils/mayi.js";
import indexApi from "@/api/index.js";
import { throttle, concatUrl } from "../../utils/index.js"
......@@ -199,6 +205,7 @@ export default {
isShowBirth: false, // 是否展示生日礼品
birthGifts: "",
showbottomCont: false, //展示底部logo
showSpe: false,
};
},
components:{
......@@ -224,7 +231,9 @@ export default {
'custom-list':customList,
'rich-text':richText,
'member-info':memberInfo,
GoodsFliters
GoodsFliters,
SelectGoods,
TwoBAddCart
},
computed: {
applySucessEntryFlag() {
......
src/pages/home/main.json
......@@ -9,6 +9,7 @@
"time-limited-discount": "/static/nativeComponents/TimeLimitedDiscount/index",
"waterfall-flow": "/static/nativeComponents/module/WaterfallFlow/index",
"van-button": "/static/vant/button/index",
"van-stepper": "/static/vant/stepper/index",
"area-navigation":"/static/nativeComponents/AreaNavigation/index",
"cube-nav":"/static/nativeComponents/CubeNav/index",
"float-button":"/static/nativeComponents/FloatButton/index",
......
static/nativeComponents/GoodsList/GoodsItem/index.js
......@@ -103,6 +103,7 @@ const componentOptions = {
},
onclickBuynow(e) {
let { btnType } = this.data.datas.componentData;
let _this = this;
let {
minProductGoodsMixid,
minProductGoodsId,
......@@ -114,7 +115,15 @@ const componentOptions = {
if (btnType < 6) {
// 加入购物车
console.log("加入购物车");
$themeAddToCard(this.data.items);
// $themeAddToCard(this.data.items);
console.log(app.globalData.shopInfo.whetherOpenEnterprisesWantGoods - 0,'app.globalData.shopInfo=')
if (app.globalData.shopInfo.whetherOpenEnterprisesWantGoods - 0 == 1) {
// 开启企业要货加购
app.openTwoBAddCart(_this.data.items);
} else {
app.openSelectGoods(_this.data.items);
}
} else {
// 进入确认订单
linkVal = `/order/orderConfirm?productGoodsMixId=${minProductGoodsMixid}&productGoodsId=${minProductGoodsId}&goodsId=${minGoodsId}&qty=1&goodsString=null&source=3`;
......
static/nativeComponents/GoodsList/index.js
......@@ -560,6 +560,7 @@ const componentOptions = {
return
}
wx.createSelectorQuery().selectAll(`.goodsListItemIndex${that.data.datasIndex}>>>.${type}`).boundingClientRect(function(rects){
console.log(rects.length,'------rectslength')
for (let index = 0; index < rects.length; index++) {
if (rects[index].top == 0 && rects[index].bottom == 0 && rects[index].left == 0 && rects[index].right == 0) {
break
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment