商品选择器回显

master
mabo 2021-05-24 18:14:06 +08:00
parent 44c88468d4
commit 882e222c5a
12 changed files with 164 additions and 134 deletions

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.5 KiB

After

Width:  |  Height:  |  Size: 4.4 KiB

View File

@ -116,11 +116,13 @@
<span v-if="item.couponType === 'DISCOUNT'" class="fontsize_12 global_color"><span class="price">{{item.couponDiscount}}</span></span> <span v-if="item.couponType === 'DISCOUNT'" class="fontsize_12 global_color"><span class="price">{{item.couponDiscount}}</span></span>
<span class="describe">{{item.consumeThreshold}}元可用</span> <span class="describe">{{item.consumeThreshold}}元可用</span>
</div> </div>
<p>使用范围{{useScope(item.scopeType)}}</p> <p>使用范围{{useScope(item.scopeType)}}</p>
<p>有效期{{item.endTime}}</p> <p>有效期{{item.endTime}}</p>
</div> </div>
<img class="used" v-if="usedCouponId.includes(item.id)" src="../../assets/images/geted.png" alt="">
<b></b> <b></b>
<a class="c-right" @click="useCoupon(item.id)">使</a> <a class="c-right" @click="useCoupon(item.id, true)">立即使用</a>
<a class="c-right" v-if="usedCouponId.includes(item.id)" @click="useCoupon(item.id, false)"></a>
<i class="circle-top"></i> <i class="circle-top"></i>
<i class="circle-bottom"></i> <i class="circle-bottom"></i>
</li> </li>
@ -207,7 +209,9 @@ export default {
moreAddr: false, // moreAddr: false, //
canUseCouponNum: 0, // canUseCouponNum: 0, //
couponList: [], // couponList: [], //
logoImg: '' // logo logoImg: '', // logo
usedCouponId: [], // 使id
selectedCoupon: {} //
}; };
}, },
mounted () { mounted () {
@ -250,7 +254,10 @@ export default {
this.goodsList = res.result.cartList; this.goodsList = res.result.cartList;
this.priceDetailDTO = res.result.priceDetailDTO; this.priceDetailDTO = res.result.priceDetailDTO;
this.skuList = res.result.skuList; this.skuList = res.result.skuList;
let notSupArea = res.result.notSupportFreight let notSupArea = res.result.notSupportFreight;
this.selectedCoupon = {}
if (res.result.platformCoupon) this.selectedCoupon.platformCoupon = res.result.platformCoupon
Object.assign(this.selectedCoupon, res.result.storeCoupons)
if (notSupArea) { if (notSupArea) {
let content = []; let content = [];
let title = '' let title = ''
@ -295,8 +302,22 @@ export default {
storeId: storeArr.toString(), storeId: storeArr.toString(),
totalPrice: this.priceDetailDTO.goodsPrice totalPrice: this.priceDetailDTO.goodsPrice
} }
canUseCouponList(params).then(res => { canUseCouponList(params).then(res => { //
if (res.success) this.couponList = res.result.records if (res.success) this.couponList = res.result.records
const couponKeys = Object.keys(this.selectedCoupon)
this.usedCouponId = []
if (couponKeys.length) {
this.couponList.forEach(e => {
if (e.id === this.selectedCoupon[couponKeys].memberCoupon.id) {
this.usedCouponId.push(e.id)
}
})
this.$nextTick(() => {
this.$forceUpdate()
})
}
}) })
} }
}) })
@ -361,16 +382,14 @@ export default {
}); });
}, },
useCoupon (id) { // 使 useCoupon (id, used) { // 使
let params = { let params = {
way: this.$route.query.way, way: this.$route.query.way,
memberCouponId: id, memberCouponId: id,
used: true used: used // true 使 false
} }
selectCoupon(params).then(res => { selectCoupon(params).then(res => {
if (res.success) { if (res.success) this.init()
this.init()
}
}) })
}, },
editInvoice () { // editInvoice () { //
@ -774,5 +793,16 @@ export default {
.circle-top,.circle-bottom{ .circle-top,.circle-bottom{
right: 22px; right: 22px;
} }
.used {
position: absolute;
top: 60px;
right: 40px;
width: 50px;
height: 50px;
}
}
.coupon-list {
max-height: 260px;
overflow: scroll;
} }
</style> </style>

View File

@ -41,12 +41,17 @@
<script> <script>
import * as API_Goods from "@/api/goods"; import * as API_Goods from "@/api/goods";
export default { export default {
data() { props: {
selectedWay: {
type: Array,
default: new Array()
}
},
data () {
return { return {
type: "multiple", // single multiple type: "multiple", // single multiple
cateList: [], // cateList: [], //
selectedWay: [], //
total: "", // total: "", //
goodsParams: { // goodsParams: { //
pageNumber: 1, pageNumber: 1,
@ -64,18 +69,17 @@ export default {
loading: false, // loading loading: false, // loading
}; };
}, },
props: ["clearFlag"],
watch: { watch: {
category(val) { category(val) {
this.goodsParams.categoryPath = val[2]; this.goodsParams.categoryPath = val[2];
}, },
selectedWay: { selectedWay: {
handler() { handler(val) {
this.$emit("selected", this.selectedWay); this.$emit("selected", this.selectedWay);
}, },
deep: true, deep: true,
immediate: true
}, },
"goodsParams.categoryPath": { "goodsParams.categoryPath": {
handler: function () { handler: function () {
this.goodsData = []; this.goodsData = [];
@ -88,7 +92,7 @@ export default {
this.init(); this.init();
}, },
methods: { methods: {
handleReachBottom() { handleReachBottom() { //
setTimeout(() => { setTimeout(() => {
if ( if (
this.goodsParams.pageNumber * this.goodsParams.pageSize <= this.goodsParams.pageNumber * this.goodsParams.pageSize <=
@ -99,17 +103,24 @@ export default {
} }
}, 1500); }, 1500);
}, },
getQueryGoodsList() { getQueryGoodsList() { //
API_Goods.getGoodsSkuData(this.goodsParams).then((res) => { API_Goods.getGoodsSkuData(this.goodsParams).then((res) => {
this.initGoods(res); this.initGoods(res);
}); });
}, },
initGoods(res) { initGoods(res) { //
if (res.result.records.length !=0) { if (res.result.records.length !=0) {
res.result.records.forEach((item) => { let data = res.result.records;
data.forEach((item) => {
item.selected = false; item.selected = false;
item.___type = "goods"; //goodspc wap item.___type = "goods"; //goodspc wap
this.selectedWay.forEach(e => {
if (e.id === item.id) {
item.selected = true
}
})
}); });
/** /**
* 解决数据请求中滚动栏会一直上下跳动 * 解决数据请求中滚动栏会一直上下跳动
@ -141,7 +152,6 @@ export default {
deepGroup(val) { deepGroup(val) {
val.forEach((item) => { val.forEach((item) => {
let childWay = []; // let childWay = []; //
let grandWay = []; //
// //
if (item.children) { if (item.children) {
item.children.forEach((child) => { item.children.forEach((child) => {
@ -196,7 +206,12 @@ export default {
this.selectedWay.push(val); this.selectedWay.push(val);
} else { } else {
val.selected = false; val.selected = false;
this.selectedWay.splice(index, 1); for (let i = 0; i<this.selectedWay.length; i++ ) {
if (this.selectedWay[i].id===val.id) {
this.selectedWay.splice(i,1)
break;
}
}
} }
}, },
}, },

View File

@ -10,20 +10,13 @@
scrollable scrollable
> >
<goodsDialog <goodsDialog
@selected=" @selected="(val) => {goodsData = val;}"
(val) => { :selectedWay='goodsData'
goodsData = val;
}
"
ref="goodsDialog" ref="goodsDialog"
v-if="goodsFlag" v-if="goodsFlag"
/> />
<linkDialog <linkDialog
@selectedLink=" @selectedLink="(val) => {linkData = val;}"
(val) => {
linkData = val;
}
"
v-else v-else
class="linkDialog" class="linkDialog"
/> />
@ -41,14 +34,11 @@ export default {
return { return {
title: "选择", // title: "选择", //
goodsFlag: false, // goodsFlag: false, //
goodsData: "", // goodsData: [], //
linkData: "", // linkData: "", //
flag: false, // flag: false, //
}; };
}, },
props: ["types"],
watch: {},
mounted() {},
methods: { methods: {
// //
clickClose() { clickClose() {
@ -58,7 +48,6 @@ export default {
// //
singleGoods(){ singleGoods(){
var timer = setInterval(() => { var timer = setInterval(() => {
if (this.$refs.goodsDialog) { if (this.$refs.goodsDialog) {
@ -66,19 +55,16 @@ export default {
clearInterval(timer); clearInterval(timer);
} }
}, 100); }, 100);
}, },
clickOK() { clickOK() { //
if (this.goodsFlag) { if (this.goodsFlag) {
this.$emit("selectedGoodsData", this.goodsData); this.$emit("selectedGoodsData", this.goodsData);
} else { } else {
this.$emit("selectedLink", this.linkData); this.$emit("selectedLink", this.linkData);
} }
this.clickClose(); this.clickClose();
// this.clearFlag = false
}, },
open(type){ open (type) { // ref
this.flag = true; this.flag = true;
if(type == 'goods'){ if(type == 'goods'){
this.goodsFlag = true; this.goodsFlag = true;
@ -87,7 +73,7 @@ export default {
} }
}, },
close(){ close(){ //
this.flag = false; this.flag = false;
} }
}, },

View File

@ -223,7 +223,7 @@ export default {
{ {
title: "状态", title: "状态",
key: "promotionStatus", key: "promotionStatus",
minWidth: 100, width: 100,
fixed: "right", fixed: "right",
render: (h, params) => { render: (h, params) => {
let text = "未知", let text = "未知",
@ -250,9 +250,9 @@ export default {
}, },
}, },
text text
), )
]); ]);
}, }
}, },
{ {
title: "操作", title: "操作",

View File

@ -114,9 +114,8 @@
v-if="form.scopeType == 'PORTION_GOODS'" v-if="form.scopeType == 'PORTION_GOODS'"
> >
<div style="display: flex; margin-bottom: 10px"> <div style="display: flex; margin-bottom: 10px">
<Button type="primary" @click="$refs.skuSelect.open('goods')" <Button type="primary" @click="openSkuList"
>选择商品</Button >选择商品</Button>
>
<Button <Button
type="error" type="error"
ghost ghost
@ -466,6 +465,14 @@ export default {
name: "coupon", name: "coupon",
}); });
}, },
openSkuList() { //
this.$refs.skuSelect.open("goods");
let data = JSON.parse(JSON.stringify(this.form.promotionGoodsList))
data.forEach(e => {
e.id = e.skuId
})
this.$refs.skuSelect.goodsData = data;
},
changeSelect(e) { changeSelect(e) {
// //
this.selectedGoods = e; this.selectedGoods = e;
@ -497,15 +504,9 @@ export default {
this.form.promotionGoodsList.splice(index, 1); this.form.promotionGoodsList.splice(index, 1);
}, },
selectedGoodsData(item) { selectedGoodsData(item) {
console.log(item);
// //
let ids = [];
let list = []; let list = [];
this.form.promotionGoodsList.forEach((e) => {
ids.push(e.skuId);
});
item.forEach((e) => { item.forEach((e) => {
if (!ids.includes(e.id)) {
list.push({ list.push({
goodsName: e.goodsName, goodsName: e.goodsName,
price: e.price, price: e.price,
@ -515,9 +516,8 @@ export default {
sellerName: e.sellerName, sellerName: e.sellerName,
skuId: e.id, skuId: e.id,
}); });
}
}); });
this.form.promotionGoodsList.push(...list); this.form.promotionGoodsList = list;
}, },
getGoodsCategory(e) { getGoodsCategory(e) {
// id // id

View File

@ -140,12 +140,12 @@ export default {
{ {
title: "活动类型", title: "活动类型",
slot: "promotionType", slot: "promotionType",
minWidth: 60, width: 100,
}, },
{ {
title: "活动状态", title: "活动状态",
key: "promotionStatus", key: "promotionStatus",
minWidth: 60, width: 100,
render: (h, params) => { render: (h, params) => {
let text = "未知", let text = "未知",
color = "default"; color = "default";

View File

@ -183,7 +183,7 @@
style="display: flex; margin-bottom: 10px" style="display: flex; margin-bottom: 10px"
v-if="form.promotionStatus == 'NEW'" v-if="form.promotionStatus == 'NEW'"
> >
<Button type="primary" @click="$refs.skuSelect.open('goods')" <Button type="primary" @click="openSkuList"
>选择商品</Button >选择商品</Button
> >
<Button <Button
@ -376,6 +376,14 @@ export default {
); );
this.$router.go(-1); this.$router.go(-1);
}, },
openSkuList() { //
this.$refs.skuSelect.open("goods");
let data = JSON.parse(JSON.stringify(this.form.promotionGoodsList))
data.forEach(e => {
e.id = e.skuId
})
this.$refs.skuSelect.goodsData = data;
},
getDetail() { getDetail() {
// //
getFullDiscountById(this.id).then((res) => { getFullDiscountById(this.id).then((res) => {
@ -496,28 +504,20 @@ export default {
this.form.promotionGoodsList.splice(index, 1); this.form.promotionGoodsList.splice(index, 1);
}, },
selectedGoodsData(item) { selectedGoodsData(item) {
console.log(item);
// //
let ids = [];
let list = []; let list = [];
this.form.promotionGoodsList.forEach((e) => {
ids.push(e.skuId);
});
item.forEach((e) => { item.forEach((e) => {
if (!ids.includes(e.id)) { list.push({
list.push({ goodsName: e.goodsName,
goodsName: e.goodsName, price: e.price,
price: e.price, quantity: e.quantity,
quantity: e.quantity, storeId: e.storeId,
storeId: e.storeId, storeName: e.storeName,
storeName: e.storeName, thumbnail: e.thumbnail,
thumbnail: e.thumbnail, skuId: e.id,
skuId: e.id, });
});
}
}); });
console.log(list); this.form.promotionGoodsList = list;
this.form.promotionGoodsList.push(...list);
}, },
getCouponList(query) { getCouponList(query) {
// //

View File

@ -155,17 +155,15 @@ export default {
{ {
title: "活动开始时间", title: "活动开始时间",
key: "startTime", key: "startTime",
minWidth: 120
}, },
{ {
title: "活动结束时间", title: "活动结束时间",
key: "endTime", key: "endTime",
minWidth: 120
}, },
{ {
title: "状态", title: "状态",
key: "promotionStatus", key: "promotionStatus",
minWidth: 100, width: 100,
render: (h, params) => { render: (h, params) => {
let text = "未知", let text = "未知",
color = "default"; color = "default";

View File

@ -36,7 +36,7 @@
</Row> </Row>
</Card> </Card>
<sku-select ref="skuSelect" @selectedGoodsData="selectedGoodsData"></sku-select> <sku-select ref="skuSelect" :goodsData="goodsData" @selectedGoodsData="selectedGoodsData"></sku-select>
</div> </div>
</template> </template>
<script> <script>
@ -65,7 +65,7 @@ export default {
data: [], // data: [], //
total: 0, // total: 0, //
status: this.$route.query.status, // status: this.$route.query.status, //
columns: [ columns: [ //
{ {
title: "活动名称", title: "活动名称",
key: "promotionName", key: "promotionName",
@ -111,7 +111,7 @@ export default {
}, },
}, },
], ],
goodsColumns: [ goodsColumns: [ //
{ type: "selection", width: 60, align: "center" }, { type: "selection", width: 60, align: "center" },
{ {
title: "商品名称", title: "商品名称",
@ -202,7 +202,6 @@ export default {
handleReset() { handleReset() {
// //
// this.$refs.searchForm.resetFields();
this.searchForm.pageNumber = 0; this.searchForm.pageNumber = 0;
this.searchForm.promotionName = ""; this.searchForm.promotionName = "";
this.selectDate = null; this.selectDate = null;
@ -211,7 +210,7 @@ export default {
this.getDataList(); this.getDataList();
}, },
clearSelectAll() { clearSelectAll() { //
this.$refs.table.selectAll(false); this.$refs.table.selectAll(false);
}, },
changeSelect(e) { changeSelect(e) {
@ -220,7 +219,7 @@ export default {
this.selectCount = e.length; this.selectCount = e.length;
}, },
getDataList() { getDataList() { //
this.loading = true; this.loading = true;
this.searchForm.pintuanId = this.$route.query.id; this.searchForm.pintuanId = this.$route.query.id;
@ -233,14 +232,12 @@ export default {
}); });
}, },
getPintuanMsg() { getPintuanMsg() { //
//
getPintuanDetail(this.$route.query.id).then((res) => { getPintuanDetail(this.$route.query.id).then((res) => {
if (res.success) this.data.push(res.result); if (res.success) this.data.push(res.result);
}); });
}, },
delGoods(index) { delGoods(index) { //
//
this.goodsData.splice(index, 1); this.goodsData.splice(index, 1);
}, },
delAll() { // delAll() { //
@ -263,13 +260,9 @@ export default {
}); });
}, },
selectedGoodsData(item) { // selectedGoodsData(item) { //
let ids = []; console.log(item);
let list = []; let list = [];
this.goodsData.forEach((e) => {
ids.push(e.skuId);
});
item.forEach((e) => { item.forEach((e) => {
if (!ids.includes(e.id)) {
list.push({ list.push({
goodsName: e.goodsName, goodsName: e.goodsName,
price: e.price, price: e.price,
@ -281,15 +274,19 @@ export default {
skuId: e.id, skuId: e.id,
categoryPath: e.categoryPath, categoryPath: e.categoryPath,
}); });
}
}); });
this.goodsData.push(...list); this.goodsData = list;
}, },
openSkuList() { // openSkuList() { //
this.$refs.skuSelect.open("goods"); this.$refs.skuSelect.open("goods");
let data = JSON.parse(JSON.stringify(this.goodsData))
data.forEach(e => {
e.id = e.skuId
})
this.$refs.skuSelect.goodsData = data;
}, },
}, },
mounted() { mounted () {
this.init(); this.init();
}, },
}; };

View File

@ -134,6 +134,7 @@ export default {
{ {
title: "状态", title: "状态",
key: "promotionStatus", key: "promotionStatus",
width: 100,
render: (h, params) => { render: (h, params) => {
let text = "未知", let text = "未知",
color = "default"; color = "default";

View File

@ -318,17 +318,17 @@ export default {
}, },
delGoods(index, id) { delGoods(index, id) {
// //
if (id) { // if (id) {
removeSeckillGoods(this.$route.query.id, id).then((res) => { // removeSeckillGoods(this.$route.query.id, id).then((res) => {
if (res.success) { // if (res.success) {
this.goodsList[this.tabIndex].list.splice(index, 1); // this.goodsList[this.tabIndex].list.splice(index, 1);
this.$Message.success("删除成功!"); // this.$Message.success("");
} // }
}); // });
} else { // } else {
this.goodsList[this.tabIndex].list.splice(index, 1); this.goodsList[this.tabIndex].list.splice(index, 1);
this.$Message.success("删除成功!"); this.$Message.success("删除成功!");
} // }
}, },
delAll() { delAll() {
if (this.selectCount <= 0) { if (this.selectCount <= 0) {
@ -350,43 +350,46 @@ export default {
].list.filter((item) => { ].list.filter((item) => {
return !ids.includes(item.id); return !ids.includes(item.id);
}); });
removeSeckillGoods(this.$route.query.id, ids).then((res) => { // removeSeckillGoods(this.$route.query.id, ids).then((res) => {
if (res.success) { // if (res.success) {
this.$Message.success("删除成功!"); // this.$Message.success("");
} // }
}); // });
}, },
}); });
}, },
selectedGoodsData(item) { selectedGoodsData(item) {
// //
let ids = [];
let list = []; let list = [];
console.log(item);
this.goodsList[this.tabIndex].list.forEach((e) => {
ids.push(e.skuId);
});
item.forEach((e) => { item.forEach((e) => {
if (!ids.includes(e.id)) { list.push({
list.push({ goodsName: e.goodsName,
goodsName: e.goodsName, price: e.price,
price: e.price, originalPrice: e.price,
originalPrice: e.price, promotionApplyStatus: e.promotionApplyStatus || '',
promotionApplyStatus: "", quantity: e.quantity,
quantity: e.quantity, seckillId: this.$route.query.id,
seckillId: this.$route.query.id, storeId: e.storeId,
storeId: e.storeId, storeName: e.storeName,
storeName: e.storeName, skuId: e.id,
skuId: e.id, timeLine: this.data[0].hours.split(",")[this.tabIndex],
timeLine: this.data[0].hours.split(",")[this.tabIndex],
}); });
}
}); });
this.goodsList[this.tabIndex].list.push(...list); this.goodsList[this.tabIndex].list = list;
this.$nextTick(()=> {
this.$forceUpdate()
})
}, },
openSkuList() { openSkuList() { //
this.$refs.skuSelect.open("goods"); this.$refs.skuSelect.open("goods");
let data = JSON.parse(JSON.stringify(this.goodsList[this.tabIndex].list))
data.forEach(e => {
e.id = e.skuId
})
this.$refs.skuSelect.goodsData = data;
}, },
unixDate(time) { unixDate(time) {
// //