活动页面完善
This commit is contained in:
@fawn-nine
@@ -1,37 +1,47 @@
|
||||
<template>
|
||||
<el-dialog title="选择优惠券" center :visible.sync="visible" :before-close="handleClose">
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="sedSelectCou">确 定</el-button>
|
||||
</span>
|
||||
<el-table ref="multipleTable"
|
||||
<el-dialog
|
||||
title="选择优惠券"
|
||||
center
|
||||
:visible.sync="visible"
|
||||
:before-close="handleClose"
|
||||
>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="sedSelectCou">确 定</el-button>
|
||||
</span>
|
||||
<el-table
|
||||
ref="multipleTable"
|
||||
:data="dataList"
|
||||
border
|
||||
v-loading="dataListLoading"
|
||||
@selection-change="selectionChangeHandle"
|
||||
style="width: 100%;">
|
||||
style="width: 100%;"
|
||||
>
|
||||
<el-table-column
|
||||
type="selection"
|
||||
header-align="center"
|
||||
align="center"
|
||||
width="50">
|
||||
width="50"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column label="序号" width="70" align="center">
|
||||
<template slot-scope="scope">
|
||||
{{ (pageIndex - 1) * pageSize + scope.$index + 1 }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="couponName"
|
||||
header-align="center"
|
||||
align="center"
|
||||
label="优惠券名称">
|
||||
label="优惠券名称"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="couponAmount"
|
||||
header-align="center"
|
||||
align="center"
|
||||
label="面值">
|
||||
</el-table-column>
|
||||
label="面值"
|
||||
>
|
||||
</el-table-column>
|
||||
<!-- <el-table-column header-align="center" align="center" label="商品图">
|
||||
<template slot-scope="scope">
|
||||
<img v-if="scope.row.productImages != ''" :src="scope.row.productImages" width="30" height="30" class="tableImg" />
|
||||
@@ -45,145 +55,169 @@
|
||||
:page-sizes="[10, 20, 50, 100]"
|
||||
:page-size="pageSize"
|
||||
:total="totalPage"
|
||||
layout="total, sizes, prev, pager, next, jumper">
|
||||
</el-pagination>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
visible: {
|
||||
type: Boolean,
|
||||
value: false
|
||||
},
|
||||
deliverOrder: {
|
||||
type: Object,
|
||||
value: {}
|
||||
}
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
>
|
||||
</el-pagination>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
visible: {
|
||||
type: Boolean,
|
||||
value: false
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
dataForm:{
|
||||
key:''
|
||||
},
|
||||
selectTitle:'',
|
||||
oldSelected:[],
|
||||
dataList: [],
|
||||
pageIndex: 1,
|
||||
pageSize: 20,
|
||||
totalPage: 0,
|
||||
dataListLoading: false,
|
||||
dataListSelections: [],
|
||||
deliverOrder: {
|
||||
type: Object,
|
||||
value: {}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
dataForm: {
|
||||
key: ""
|
||||
},
|
||||
selectTitle: "",
|
||||
oldSelected: [],
|
||||
dataList: [],
|
||||
pageIndex: 1,
|
||||
pageSize: 20,
|
||||
totalPage: 0,
|
||||
dataListLoading: false,
|
||||
dataListSelections: [],
|
||||
dataIndex: null
|
||||
};
|
||||
},
|
||||
create() {},
|
||||
mounted() {
|
||||
// console.log(454545)
|
||||
this.$bus.$on("ProListVisible", val => {
|
||||
this.visible = true;
|
||||
});
|
||||
this.$bus.$on("getCouListInMes", data => {
|
||||
this.oldSelected = data.List;
|
||||
this.selectTitle = data.opraName;
|
||||
this.dataIndex = data.dataIndex;
|
||||
console.log(data, "oldSelected");
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
// 判断初始选中的产品
|
||||
check() {
|
||||
// console.log(this.oldSelected,'check')
|
||||
if (this.oldSelected.length > 0) {
|
||||
this.dataList.forEach(item => {
|
||||
this.oldSelected.forEach(item2 => {
|
||||
if (item.id == item2.id) {
|
||||
this.dataListSelections.push(item);
|
||||
this.$refs.multipleTable.toggleRowSelection(item);
|
||||
}
|
||||
});
|
||||
});
|
||||
// console.log(this.dataListSelections, 'dataListSelections')
|
||||
}
|
||||
},
|
||||
create(){
|
||||
|
||||
handleClose() {
|
||||
this.$emit("CouponListClose", false);
|
||||
},
|
||||
mounted(){
|
||||
// console.log(454545)
|
||||
this.$bus.$on("ProListVisible", (val) => {
|
||||
this.visible = true
|
||||
});
|
||||
this.$bus.$on("getCouListInMes", (data) => {
|
||||
this.oldSelected = data.List
|
||||
console.log(this.oldSelected, 'oldSelected')
|
||||
|
||||
});
|
||||
},methods:{
|
||||
// 判断初始选中的产品
|
||||
check(){
|
||||
// console.log(this.oldSelected,'check')
|
||||
if(this.oldSelected.length > 0){
|
||||
this.dataList.forEach((item) => {
|
||||
this.oldSelected.forEach((item2) => {
|
||||
if(item.id == item2.id){
|
||||
this.dataListSelections.push(item)
|
||||
this.$refs.multipleTable.toggleRowSelection(item)
|
||||
}
|
||||
})
|
||||
})
|
||||
console.log(this.dataListSelections, 'dataListSelections')
|
||||
}
|
||||
},
|
||||
handleClose(){
|
||||
this.$emit("CouponListClose", false);
|
||||
},
|
||||
sedSelectCou(){
|
||||
sedSelectCou() {
|
||||
// console.log(this.dataListSelections)
|
||||
this.$bus.$emit('haveSelectedCoupon', this.dataListSelections)
|
||||
this.handleClose()
|
||||
},
|
||||
// 获取数据列表
|
||||
getDataList () {
|
||||
this.dataListLoading = true
|
||||
this.$http({
|
||||
url: this.$http.adornUrl('/book/coupon/list'),
|
||||
method: 'get',
|
||||
params: this.$http.adornParams({
|
||||
'page': this.pageIndex,
|
||||
'limit': this.pageSize,
|
||||
'key': this.dataForm.key,
|
||||
'currentState': "0"
|
||||
})
|
||||
}).then(({data}) => {
|
||||
if (data && data.code === 0) {
|
||||
this.dataList = data.page.list
|
||||
this.totalPage = data.page.totalCount
|
||||
this.$nextTick(()=> {
|
||||
this.check() // 获取到已选中的数据
|
||||
|
||||
})
|
||||
} else {
|
||||
this.dataList = []
|
||||
this.totalPage = 0
|
||||
}
|
||||
this.dataListLoading = false
|
||||
if (this.selectTitle == "manezeng") {
|
||||
this.$bus.$emit("haveSelectedCoupon", {
|
||||
list: this.dataListSelections,
|
||||
dataIndex: this.dataIndex,
|
||||
selectTitle: this.selectTitle
|
||||
});
|
||||
this.dataIndex = 0;
|
||||
this.selectTitle = [];
|
||||
} else if (this.selectTitle == "zhuce") {
|
||||
this.$bus.$emit("haveSelectedCoupon", { list: this.dataListSelections, selectTitle:'zhuce' });
|
||||
} else {
|
||||
this.$bus.$emit("haveSelectedCoupon", this.dataListSelections);
|
||||
}
|
||||
this.handleClose();
|
||||
},
|
||||
// 获取数据列表
|
||||
getDataList() {
|
||||
this.dataListLoading = true;
|
||||
this.$http({
|
||||
url: this.$http.adornUrl("/book/coupon/list"),
|
||||
method: "get",
|
||||
params: this.$http.adornParams({
|
||||
page: this.pageIndex,
|
||||
limit: this.pageSize,
|
||||
key: this.dataForm.key,
|
||||
currentState: "0"
|
||||
})
|
||||
},
|
||||
// 每页数
|
||||
sizeChangeHandle (val) {
|
||||
this.pageSize = val
|
||||
this.pageIndex = 1
|
||||
this.getDataList()
|
||||
},
|
||||
// 当前页
|
||||
currentChangeHandle (val) {
|
||||
this.pageIndex = val
|
||||
this.getDataList()
|
||||
},
|
||||
// 多选
|
||||
selectionChangeHandle (val) {
|
||||
this.dataListSelections = val
|
||||
},
|
||||
}).then(({ data }) => {
|
||||
if (data && data.code === 0) {
|
||||
this.dataList = data.page.list;
|
||||
this.totalPage = data.page.totalCount;
|
||||
this.$nextTick(() => {
|
||||
this.check(); // 获取到已选中的数据
|
||||
});
|
||||
} else {
|
||||
this.dataList = [];
|
||||
this.totalPage = 0;
|
||||
}
|
||||
this.dataListLoading = false;
|
||||
});
|
||||
},
|
||||
// 每页数
|
||||
sizeChangeHandle(val) {
|
||||
this.pageSize = val;
|
||||
this.pageIndex = 1;
|
||||
this.getDataList();
|
||||
},
|
||||
// 当前页
|
||||
currentChangeHandle(val) {
|
||||
this.pageIndex = val;
|
||||
this.getDataList();
|
||||
},
|
||||
// 多选
|
||||
selectionChangeHandle(val) {
|
||||
this.dataListSelections = val;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.el-form-item__label {
|
||||
font-size: 12px;
|
||||
};
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.el-form-item__label {
|
||||
font-size: 12px;
|
||||
}
|
||||
.el-uploadfeng {
|
||||
/deep/ .el-upload-list__item {
|
||||
width: 300px;
|
||||
height: 150px;
|
||||
}
|
||||
.el-uploadfeng {
|
||||
/deep/ .el-upload-list__item {
|
||||
width: 300px;
|
||||
height: 150px;
|
||||
}
|
||||
|
||||
/deep/ .el-upload--picture-card {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
line-height: 70px;
|
||||
|
||||
}}
|
||||
.pictureList{
|
||||
/deep/.el-upload--picture{ display: none;}
|
||||
/deep/ .el-upload-list{ display: flex; justify-content:space-between; flex-wrap: wrap;
|
||||
.el-upload-list__item{
|
||||
width:30%; padding: 5px 5px 5px 87px; height: 66px;
|
||||
img{width: 54px; height: 54px;}
|
||||
.el-upload-list__item-name{line-height: 54px;}
|
||||
|
||||
/deep/ .el-upload--picture-card {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
line-height: 70px;
|
||||
}
|
||||
}
|
||||
.pictureList {
|
||||
/deep/.el-upload--picture {
|
||||
display: none;
|
||||
}
|
||||
/deep/ .el-upload-list {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
.el-upload-list__item {
|
||||
width: 30%;
|
||||
padding: 5px 5px 5px 87px;
|
||||
height: 66px;
|
||||
img {
|
||||
width: 54px;
|
||||
height: 54px;
|
||||
}
|
||||
.el-upload-list__item-name {
|
||||
line-height: 54px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user