Skip to content

M
mayi-mp-shop
Commit 1333464e by 李嘉林
Options

选择规格组件测试

parent d915a381
Showing with 687 additions and 29 deletions
src/api/live.js
......@@ -5,4 +5,20 @@ export default {
getLiveInfo(options) {
return requestPOST1(`${process.env.OLSHOP_URL}/liveBroadcastInfo/getLiveBroadcastInfoByIds?liveBroadcastId=${options}`);
},
// 查询所有产品规格详情
getProductGoodsByProductInfo(options) {
return requestPOST(`${process.env.OLSHOP_URL}/product/get_product_goods_by_product_info`, options);
},
// 获取商品所有规格
getProductGoodsSpecifications(options) {
return requestPOST(`${process.env.OLSHOP_URL}/product/get_goods_specifications`, options);
},
// 查询产品信息
getProductGoodsByMixId(options) {
return requestPOST(`${process.env.OLSHOP_URL}/product/get_product_goods_by_mix_id`, options);
},
// 添加购物车
addCart(options) {
return requestPOST(`${process.env.OLSHOP_URL}/cart/add_item`, options);
},
};
\ No newline at end of file
src/components/livedModel/livedExplainGoods.vue deleted 100644 → 0
<template>
<!-- 讲解商品模块 -->
<div class="livedExplainGoods">
</div>
</template>
<script type="text/ecmascript-6">
export default {
name: "",
data() {
return {};
},
components: {},
computed: {},
created() {},
mounted() {},
methods: {}
};
</script>
<style lang="scss" scoped>
.livedExplainGoods {
}
</style>
src/components/livedModel/livedGoodsDia.vue
......@@ -25,7 +25,7 @@
<span>{{999}}</span>
</p>
</div>
<div class="icon">
<div class="icon" @click="showSpeDia(item)">
<van-icon name="shopping-cart" />
</div>
</div>
......@@ -33,10 +33,13 @@
</div>
</div>
</van-popup>
<!-- 选择规格弹层 -->
<livedSelectionSpe :show="showSpe" :productInfoId="productInfoId" @closeSpeDia="closeSpeDia"></livedSelectionSpe>
</div>
</template>
<script type="text/ecmascript-6">
import livedSelectionSpe from "@/components/livedModel/livedSelectionSpe";
export default {
props: {
showDia: {
......@@ -72,10 +75,14 @@ export default {
"//img3.imgtn.bdimg.com/it/u=3743111107,1940472030&fm=11&gp=0.jpg",
price: 123
}
]
],
showSpe:false,
productInfoId:0,
};
},
components: {},
components: {
livedSelectionSpe
},
computed: {},
created() {},
mounted() {},
......@@ -83,6 +90,13 @@ export default {
// 关闭
closeDia() {
this.$emit("changeStatus");
},
showSpeDia(val){
this.showSpe=true;
// 调用规格列表及价格信息传入组件先展示
},
closeSpeDia(){
this.showSpe=false;
}
}
};
......
src/components/livedModel/livedSelectionSpe.vue 0 → 100644
<template>
<!-- 选择商品规格 -->
<div class="livedSelectionSpe">
<van-popup
:show="show"
position="bottom"
custom-style="height: 50vh;padding:14px;border-top-left-radius:10px;border-top-right-radius:10px;"
:close-on-click-overlay="true"
@close="closeDia"
>
<div class="goodsMess">
<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">
<del style="color:#666;">￥{{product_goods_info.originalPrice}}</del>
</div>
<div
v-else-if="product_goods_info.discountPrice-0<product_goods_info.goodsSuggestedRetailPrice-0"
>
<del style="color:#666;">￥{{product_goods_info.goodsSuggestedRetailPrice}}</del>
</div>
</div>
<template v-else-if="minSale<maxSale">
<div class="price">￥{{minSale}}-{{maxSale}}</div>
<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">【请选择规格】</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 flex-btw">
<div class="ti">购买数量</div>
<van-stepper
v-model="buyQty"
:min="product_goods_info.productMinCount=='0'?1:product_goods_info.productMinCount"
:max="MaxQtyNum"
@minus="numMinus"
/>
</div>
</div>
<div v-if="!goodsLowerShelf&&!sellOut" class="bottom flex">
<van-button class="addCart" @click="onAddCartClicked">加入购物车</van-button>
<van-button class="toPay" @click="onBuyClicked">立即购买</van-button>
</div>
<div v-else-if="!goodsLowerShelf&&sellOut" class="goodsStand">商品已售罄</div>
<div v-else class="goodsStand">商品已下架</div>
</div>
</van-popup>
</div>
</template>
<script type="text/ecmascript-6">
import { DFSImg } from "@/utils/index";
import live from "@/api/live";
export default {
props: {
show: {
type: Boolean,
default: false
},
productInfoId: String,
isShowSize: Boolean,
minSale: String,
maxSale: String,
proDesc: String,
goodsImg: String,
minSuggestedRetailPrice: String,
maxSuggestedRetailPrice: String,
goodsLowerShelf: Boolean
},
name: "",
data() {
return {
product_goods_info: {
afterSaleContent: "",
goodsImgUrl: "",
maxQty: "",
pdtName: "",
productGoodsId: "",
productGoodsMixId: "",
productId: "",
referencePrice: "",
marketPrice: "",
oversoldFlag: Number,
originalPrice: "",
sellMaxQty: "",
limitQty: "",
specifications: [], //原规格
discountPrice: ""
},
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 //全部售罄标识
};
},
components: {},
computed: {},
created() {},
onLoad() {
this.init();
},
mounted() {},
methods: {
// 初始化
init() {
let productInfoId = this.productInfoId;
live
.getProductGoodsByProductInfo({ productInfoId: productInfoId })
.then(res => {
if (res.code == 200) {
this.getProductInfos = res.data;
this.product_goods_info.productGoodsId = res.data[0].productGoodsId;
this.product_goods_info.goodsId = res.data[0].goodsId;
this.product_goods_info.productGoodsMixId =
res.data[0].productGoodsMixId;
this.product_goods_info.specifications = res.data[0].specifications;
this.product_goods_info.oversoldFlag = res.data[0].oversoldFlag;
}
});
// 获取商品规格
let productId = this.productInfoId;
live.getProductGoodsSpecifications({ productId: productId }).then(res => {
if (res.code == 200) {
this.goodsGuiges = res.data;
//做判断如果只有一套规格，直接添加规格 不用弹出选择规格弹窗直接进行下单 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);
}
// 规格数据重组
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]; //修改数据结构格式，改成键值对的方式，以方便和选中之后的值进行匹配
}
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.code == -1) {
this.isSingle = true;
this.nonstandardGoods = true;
this.goodsGuige = [];
this.getMixId(0);
}
console.log(this.goodsGuige, "-----------------------381cg");
});
},
// 取价格
getMixId(val) {
this.isGetMixId = true;
live
.getProductGoodsByMixId({
productGoodsMixId: this.product_goods_info.productGoodsMixId
})
.then(res => {
if (res.code == 200) {
if (this.nonstandardGoods == false) {
res.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.productUrl || "";
this.product_goods_info.goodsImgUrl =
DFSImg(res.data.productUrl, 400, 400) || "";
}
// this.product_goods_info.goodsImgUrl = res.data.specifications
// ? res.data.specifications[0].specificationPictureUrl
// : "";
} else {
this.productUrl = res.data.productUrl || "";
}
this.product_goods_info.goodsImgUrl =
DFSImg(res.data.productUrl, 400, 400) || DFSImg("", 400, 400);
this.product_goods_info.marketPrice = res.data.marketPrice;
this.product_goods_info.originalPrice = res.data.originalPrice;
this.product_goods_info.discountPrice = res.data.discountPrice;
this.product_goods_info.sellMaxQty = res.data.sellMaxQty; //可销售库存
this.product_goods_info.limitQty = res.data.limitQty; // 实际库存
this.product_goods_info.productMinCount = res.data.productMinCount; //最小购买数 0不限
this.product_goods_info.maxQty = res.data.maxQty; // 最大购买数 0不限
this.product_goods_info.oversoldFlag = res.data.oversoldFlag; // 1超卖 0不超卖
this.product_goods_info.goodsSuggestedRetailPrice =
res.data.goodsSuggestedRetailPrice;
this.product_goods_info.singleItemActivityId =
res.data.singleItemActivityId;
this.buyQty =
res.data.productMinCount == "0" ? 1 : res.data.productMinCount;
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;
}
}
// if(!item.isShow){
// if(item.oversoldFlag==0&&item.saleQty-0<=0){
// this.$emit("sellingOut", {
// sellOut: false, //售罄及无库存且不是超卖
// });
// }
// return;
// }
this.checkItem();
let noStr = 0;
this.goodsGuige.forEach((item, index) => {
if (item != "") noStr++;
});
if (noStr == this.goodsGuiges.length) {
this.getMixId(1);
} else {
this.$emit("sellingOut", {
sellOut: false //售罄及无库存且不是超卖
});
// console.log("换主图")
// this.$set(this.product_goods_info,'goodsImgUrl',this.productUrl);
// console.log(this.product_goods_info.goodsImgUrl,this.productUrl,"cg532")
}
},
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;
}
// return this.shopItemInfo[i].saleStatus == 0 ? false : true; //匹配选中的数据的库存，若不为空返回true反之返回false
}
}
},
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>
.livedSelectionSpe {
.goodsMess {
width: 100%;
background: rgba(255, 255, 255, 1);
border-radius: 8px 8px 0px 0px;
.sku {
padding: 8px 9px;
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: 200px;
overflow-y: scroll;
ul {
height: 95%;
li {
height: 100%;
.property {
margin: 10px 0;
font-size: 15px;
}
.specification {
div.specification-item {
border: 1px solid #606060;
border-radius: 0.08rem;
color: #606060;
text-align: center;
padding: 0.04rem 0.16rem;
float: left;
margin-right: 0.16rem;
min-width: 0.96rem;
margin-bottom: 0.16rem;
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;
}
.bottom {
margin-top: 60px;
.van-button {
width: 188px;
height: 49px;
}
.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/pages/lived/main.json
......@@ -4,6 +4,8 @@
"usingComponents": {
"van-button": "/static/vant/button/index",
"van-icon": "/static/vant/icon/index",
"van-popup": "/static/vant/popup/index"
"van-popup": "/static/vant/popup/index",
"van-stepper": "/static/vant/stepper/index"
}
}
\ No newline at end of file
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