Skip to content

M
mayi-mp-shop
Commit 6f68575b by 李嘉林
Options

测试规格

parent 1333464e
Showing with 205 additions and 107 deletions
src/api/live.js
......@@ -5,17 +5,21 @@ export default {
getLiveInfo(options) {
return requestPOST1(`${process.env.OLSHOP_URL}/liveBroadcastInfo/getLiveBroadcastInfoByIds?liveBroadcastId=${options}`);
},
// 查询商品详情
getProductInfo(options) {
return requestPOST1(`${process.env.OLSHOP_URL}/product/get_product_info?productId=${options}`);
},
// 查询所有产品规格详情
getProductGoodsByProductInfo(options) {
return requestPOST(`${process.env.OLSHOP_URL}/product/get_product_goods_by_product_info`, options);
return requestPOST1(`${process.env.OLSHOP_URL}/product/get_product_goods_by_product_info?productInfoId=${options}`);
},
// 获取商品所有规格
getProductGoodsSpecifications(options) {
return requestPOST(`${process.env.OLSHOP_URL}/product/get_goods_specifications`, options);
return requestPOST1(`${process.env.OLSHOP_URL}/product/get_goods_specifications?productId=${options}`);
},
// 查询产品信息
getProductGoodsByMixId(options) {
return requestPOST(`${process.env.OLSHOP_URL}/product/get_product_goods_by_mix_id`, options);
return requestPOST1(`${process.env.OLSHOP_URL}/product/get_product_goods_by_mix_id?productGoodsMixId=${options}`);
},
// 添加购物车
addCart(options) {
......
src/components/livedModel/livedGoodsDia.vue
......@@ -10,15 +10,15 @@
<div class="list">
<div class="item" v-for="(item,index) in goodsList" :key="index">
<div class="img">
<img :src="item.img" alt />
<img :src="item.productImgUrl" alt />
</div>
<div class="info">
<p class="name line-clamp2">{{item.name}}</p>
<p class="name line-clamp2">{{item.productName}}</p>
<div class="bottom">
<div class="price">
<p>
<span>￥</span>
<span>{{item.price}}</span>
<span>{{item.minPrice}}</span>
</p>
<p class="del">
<span>￥</span>
......@@ -34,12 +34,14 @@
</div>
</van-popup>
<!-- 选择规格弹层 -->
<livedSelectionSpe :show="showSpe" :productInfoId="productInfoId" @closeSpeDia="closeSpeDia"></livedSelectionSpe>
<livedSelectionSpe v-if="showSpe" :show="showSpe" :productInfoId="itemGoods.productId" :minSale="itemGoods.minSale" :maxSale="itemGoods.maxSale" :goodsImg="itemGoods.goodsImg" :minSuggestedRetailPrice="itemGoods.minSuggestedRetailPrice" :maxSuggestedRetailPrice="itemGoods.maxSuggestedRetailPrice" :goodsLowerShelf="itemGoods.goodsLowerShelf" @closeSpeDia="closeSpeDia"></livedSelectionSpe>
</div>
</template>
<script type="text/ecmascript-6">
import livedSelectionSpe from "@/components/livedModel/livedSelectionSpe";
import { DFSImg } from "@/utils/index";
import live from "@/api/live";
export default {
props: {
showDia: {
......@@ -52,32 +54,40 @@ export default {
return {
goodsList: [
{
name: "产品名称产品名称产品名称产品名称产品名称",
img:
"//img3.imgtn.bdimg.com/it/u=3743111107,1940472030&fm=11&gp=0.jpg",
price: 123
coverImage: "",
createDatetime: "2019-07-18 16:16:40",
createOperator: "44",
customMainPic: "",
expectedArriveDate: "",
firstAttrCode: "",
isDelete: "0",
maxDiscountPrice: "83.000000",
maxSalePrice: "83.000000",
maxSuggestedRetailPrice: "81.000000",
metaDescription: "",
metaKeywords: "",
metaTitle: "",
minDiscountPrice: "49.000000",
minSalePrice: "49.000000",
minSuggestedRetailPrice: "49.100000",
onsaleEndDatetime: null,
onsaleStartDatetime: null,
outerProductCode: "12355455",
productDetails: "",
productId: "266",
productImgUrl: "",
productName: "瑞士进口 雀巢（Nestle) 金牌 黑咖啡粉 至臻原味 速溶 咖啡豆微研磨",
productImgUrl:'http://test-bucket-ant.oss-cn-shanghai.aliyuncs.com/product/jpg/de6ca6a1-f161-49da-8b76-3450144b4d47.jpg',
minSale: 0,
maxSale: 0,
goodsImg: 0,
minSuggestedRetailPrice: 0,
maxSuggestedRetailPrice: 0,
goodsLowerShelf: false
},
{
name: "产品名称产品名称产品名称产品名称产品名称",
img:
"//img3.imgtn.bdimg.com/it/u=3743111107,1940472030&fm=11&gp=0.jpg",
price: 123
},
{
name: "产品名称产品名称产品名称产品名称产品名称",
img:
"//img3.imgtn.bdimg.com/it/u=3743111107,1940472030&fm=11&gp=0.jpg",
price: 123
},
{
name: "产品名称产品名称产品名称产品名称产品名称",
img:
"//img3.imgtn.bdimg.com/it/u=3743111107,1940472030&fm=11&gp=0.jpg",
price: 123
}
],
showSpe:false,
productInfoId:0,
itemGoods:{},//选中商品
showSpe: false
};
},
components: {
......@@ -85,18 +95,37 @@ export default {
},
computed: {},
created() {},
inLoad(){
this.goodsList.forEach((item,index)=>{
item.img=DFSImg(item.productImgUrl);
})
},
mounted() {},
methods: {
// 关闭
closeDia() {
this.$emit("changeStatus");
},
showSpeDia(val){
this.showSpe=true;
// 调用规格列表及价格信息传入组件先展示
showSpeDia(val) {
let productId=val.productId;
this.itemGoods.productId=productId;
live.getProductInfo(productId).then(res=>{
if(res.data.code==200){
this.itemGoods.maxSale = Number(res.data.data.maxSuggestedRetailPrice);
this.itemGoods.minSale = Number(res.data.data.minSuggestedRetailPrice);
this.itemGoods.maxDiscountPrice = Number(res.data.data.maxDiscountPrice);
this.itemGoods.minDiscountPrice = Number(res.data.data.minDiscountPrice);
this.itemGoods.productNature = res.data.data.productNature;
this.itemGoods.goodsLowerShelf = res.data.data.saleStatus != 1 ? true : false; //1 上架 0下架 true 下架
if(res.data.data.productPics && res.data.data.productPics.length > 0){
this.itemGoods.goodsImg = DFSImg(res.data.data.productPics[0].url);
}
this.showSpe = true;
}
})
},
closeSpeDia(){
this.showSpe=false;
closeSpeDia() {
this.showSpe = false;
}
}
};
......@@ -141,7 +170,7 @@ export default {
}
.price {
font-size: 18px;
.del{
.del {
font-size: 16px;
text-decoration: line-through;
span {
......
src/components/livedModel/livedSelectionSpe.vue
......@@ -4,7 +4,7 @@
<van-popup
:show="show"
position="bottom"
custom-style="height: 50vh;padding:14px;border-top-left-radius:10px;border-top-right-radius:10px;"
custom-style="height: 60vh;padding:14px;border-top-left-radius:10px;border-top-right-radius:10px;"
:close-on-click-overlay="true"
@close="closeDia"
>
......@@ -32,10 +32,10 @@
</div>
</div>
<template v-else-if="minSale<maxSale">
<div class="price">￥{{minSale}}-{{maxSale}}</div>
<div class="price">￥{{minSale}}-￥{{maxSale}}</div>
<del
v-if="(minSale-0<minSuggestedRetailPrice-0)&&(maxSale-0<maxSuggestedRetailPrice-0)"
>￥{{minSuggestedRetailPrice}}-{{maxSuggestedRetailPrice}}</del>
>￥{{minSuggestedRetailPrice}}-￥{{maxSuggestedRetailPrice}}</del>
</template>
<template v-else>
<div class="price">￥{{minSale}}</div>
......@@ -72,7 +72,7 @@
<div class="buyQty flex flex-btw">
<div class="ti">购买数量</div>
<van-stepper
v-model="buyQty"
:value="buyQty"
:min="product_goods_info.productMinCount=='0'?1:product_goods_info.productMinCount"
:max="MaxQtyNum"
@minus="numMinus"
......@@ -80,8 +80,8 @@
</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 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>
......@@ -95,15 +95,10 @@ import { DFSImg } from "@/utils/index";
import live from "@/api/live";
export default {
props: {
show: {
type: Boolean,
default: false
},
show: Boolean,
productInfoId: String,
isShowSize: Boolean,
minSale: String,
maxSale: String,
proDesc: String,
goodsImg: String,
minSuggestedRetailPrice: String,
maxSuggestedRetailPrice: String,
......@@ -129,6 +124,7 @@ export default {
specifications: [], //原规格
discountPrice: ""
},
buyQty: 1,
goodsGuige: [],
// 对应商品所有规格
goodsGuiges: [],
......@@ -162,31 +158,33 @@ export default {
computed: {},
created() {},
onLoad() {
console.log(this.productInfoId,'-------------167')
this.init();
},
mounted() {},
methods: {
// 初始化
init() {
async init() {
let productInfoId = this.productInfoId;
live
.getProductGoodsByProductInfo({ productInfoId: productInfoId })
await live
.getProductGoodsByProductInfo(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;
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[0].productGoodsMixId;
this.product_goods_info.specifications = res.data[0].specifications;
this.product_goods_info.oversoldFlag = res.data[0].oversoldFlag;
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;
live.getProductGoodsSpecifications({ productId: productId }).then(res => {
if (res.code == 200) {
this.goodsGuiges = res.data;
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) => {
......@@ -242,6 +240,9 @@ export default {
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 (this.goodsGuiges.length == 1) {
this.goodsGuiges[0].specificationValue.forEach((item, index) => {
for (var i in this.shopItemInfo) {
......@@ -265,20 +266,71 @@ export default {
this.goodsGuige = [];
this.getMixId(0);
}
console.log(this.goodsGuige, "-----------------------381cg");
});
},
// 默认选中一组规格
// 两个参数goodsSpc,allSpc sku及所有规格
defaultSelection(goodsSpc,allSpc){
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.showSize = false;
} else {
wx.showToast({
title: res.data.msg,
icon: 'none',
})
}
});
}
},
// 取价格
getMixId(val) {
this.isGetMixId = true;
let productGoodsMixId=this.product_goods_info.productGoodsMixId
live
.getProductGoodsByMixId({
productGoodsMixId: this.product_goods_info.productGoodsMixId
})
.getProductGoodsByMixId(productGoodsMixId)
.then(res => {
if (res.code == 200) {
if (res.data.code == 200) {
if (this.nonstandardGoods == false) {
res.data.specifications.forEach((item, index) => {
res.data.data.specifications.forEach((item, index) => {
if (item.specificationPictureUrl != "") {
this.product_goods_info.goodsImgUrl = DFSImg(
item.specificationPictureUrl,
......@@ -288,33 +340,30 @@ export default {
}
});
if (this.product_goods_info.goodsImgUrl == "") {
this.productUrl = res.data.productUrl || "";
this.productUrl = res.data.data.productUrl || "";
this.product_goods_info.goodsImgUrl =
DFSImg(res.data.productUrl, 400, 400) || "";
DFSImg(res.data.data.productUrl, 400, 400) || "";
}
// this.product_goods_info.goodsImgUrl = res.data.specifications
// ? res.data.specifications[0].specificationPictureUrl
// : "";
} else {
this.productUrl = res.data.productUrl || "";
this.productUrl = res.data.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不超卖
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 =
res.data.goodsSuggestedRetailPrice;
Number(res.data.data.goodsSuggestedRetailPrice);
this.product_goods_info.singleItemActivityId =
res.data.singleItemActivityId;
res.data.data.singleItemActivityId||'';
this.buyQty =
res.data.productMinCount == "0" ? 1 : res.data.productMinCount;
res.data.data.productMinCount == "0" ? 1 : Number(res.data.data.productMinCount);
if (
this.product_goods_info.oversoldFlag != 1 &&
this.product_goods_info.sellMaxQty - 0 <= 0
......@@ -394,14 +443,6 @@ export default {
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) => {
......@@ -409,13 +450,6 @@ export default {
});
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() {
......@@ -475,8 +509,6 @@ export default {
} else {
return true;
}
// return this.shopItemInfo[i].saleStatus == 0 ? false : true; //匹配选中的数据的库存，若不为空返回true反之返回false
}
}
},
......@@ -511,6 +543,39 @@ export default {
</script>
<style lang="scss" scoped>
.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%;
......@@ -544,7 +609,7 @@ export default {
.price {
font-size: 13px;
font-weight: 400;
color: #FF4240;
color: #ff4240;
margin-top: 10px;
}
.num,
......@@ -600,8 +665,8 @@ export default {
}
div.active {
color: #fff;
background-color: #FF4240;
border-color: #FF4240;
background-color: #ff4240;
border-color: #ff4240;
}
div.soldOut {
background-color: #ccc;
......@@ -626,7 +691,7 @@ export default {
height: 49px;
}
.toPay {
background: #FF4240;
background: #ff4240;
color: #fff;
}
.addCart {
......
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