331 lines
8.9 KiB
Vue
331 lines
8.9 KiB
Vue
<template>
|
|
<div v-if="isMerchant" style="height: calc(100vh - 200px)">
|
|
<obj-table-plus
|
|
ref="oTable"
|
|
style="height: 100%"
|
|
:tableCols="tableCols"
|
|
:tableProp="tableProp"
|
|
@query="queryList"
|
|
v-model="dataList"
|
|
:tableEvent="tableEvent"
|
|
:enableAutoQuery="false"
|
|
>
|
|
<template slot="tableTop">
|
|
<el-form
|
|
v-if="marketList.length > 0"
|
|
:inline="true"
|
|
:model="formInline"
|
|
class="demo-form-inline"
|
|
>
|
|
<el-form-item label="菜市场">
|
|
<el-select
|
|
@change="getData"
|
|
v-model="formInline.marketId"
|
|
placeholder="请选择菜市场"
|
|
>
|
|
<el-option
|
|
v-for="item in marketList"
|
|
:key="item.marketId"
|
|
:label="item.marketName"
|
|
:value="item.marketId"
|
|
></el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item label="店铺">
|
|
<el-select v-model="formInline.shopId" placeholder="请选择店铺">
|
|
<el-option
|
|
v-for="item in storeList"
|
|
:key="item.shopId"
|
|
:label="item.shopName"
|
|
:value="item.shopId"
|
|
></el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item>
|
|
<el-button type="primary" @click="$refs.oTable.reload()"
|
|
>查询</el-button
|
|
>
|
|
</el-form-item>
|
|
</el-form>
|
|
<div class="mb-2">
|
|
<el-popover placement="bottom" trigger="click">
|
|
<el-button
|
|
type="warning"
|
|
size="mini"
|
|
v-for="item in [
|
|
{ label: '无门槛商品优惠卷', value: '1' },
|
|
{ label: '满减卷', value: '2' },
|
|
{ label: '新粉优惠卷', value: '3' },
|
|
]"
|
|
:key="item.value"
|
|
@click="addProduct({ label: item.label })"
|
|
>{{ item.label }}
|
|
</el-button>
|
|
<el-button
|
|
slot="reference"
|
|
type="primary"
|
|
class="link-left"
|
|
icon="el-icon-plus"
|
|
>添加优惠卷</el-button
|
|
>
|
|
</el-popover>
|
|
<!-- <el-button type="primary" size="small" @click="addProduct"
|
|
>添加优惠卷</el-button
|
|
> -->
|
|
<!-- <el-button
|
|
:disabled="selectList.length <= 0"
|
|
type="danger"
|
|
size="small"
|
|
@click="deleteProduct"
|
|
>批量删除</el-button
|
|
> -->
|
|
</div>
|
|
</template>
|
|
</obj-table-plus>
|
|
<!-- 添加或编辑 -->
|
|
<add-or-update
|
|
@queryList="$refs.oTable.reload()"
|
|
ref="addOrUpdate"
|
|
></add-or-update>
|
|
<!-- 查看详情 -->
|
|
<!-- <viewDetails ref="viewDetails"></viewDetails> -->
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { mapState } from "vuex";
|
|
import AddOrUpdate from "./popup/add-or-update.vue";
|
|
// import viewDetails from "./popup/view-details.vue";
|
|
export default {
|
|
components: { AddOrUpdate },
|
|
data() {
|
|
return {
|
|
dataList: [],
|
|
formInline: {
|
|
marketId: "",
|
|
shopId: "",
|
|
},
|
|
tableProp: {
|
|
"auto-resize": true,
|
|
border: true,
|
|
height: "auto",
|
|
"row-id": "id",
|
|
"show-overflow": false,
|
|
},
|
|
productFilterType: "SALE",
|
|
selectList: [],
|
|
|
|
};
|
|
},
|
|
created() {
|
|
this.formInline = {
|
|
name: "",
|
|
marketId: this.marketId,
|
|
shopId: this.shopId,
|
|
};
|
|
this.$nextTick(() => {
|
|
this.$refs.oTable.reload();
|
|
});
|
|
},
|
|
methods: {
|
|
getData() {
|
|
// this.$api.mer_admin
|
|
// .storeList({ marketId: this.formInline.marketId })
|
|
// .then((res) => {
|
|
// this.storeList = res.data.data;
|
|
// this.formInline.shopId = res.data.data[0].shopId;
|
|
// this.$nextTick(() => {
|
|
// this.$refs.oTable.reload();
|
|
// });
|
|
// });
|
|
},
|
|
addProduct(row) {
|
|
this.$refs.addOrUpdate.toggle().add({
|
|
...row,
|
|
marketId: this.formInline.marketId,
|
|
shopId: this.formInline.shopId,
|
|
});
|
|
},
|
|
deleteProduct() {
|
|
console.log(this.selectList);
|
|
let integers = this.selectList.map((item) => {
|
|
return item.id;
|
|
});
|
|
this.$confirm("此操作将删除该商品, 是否继续?", "提示", {
|
|
confirmButtonText: "确定",
|
|
cancelButtonText: "取消",
|
|
type: "warning",
|
|
})
|
|
.then(() => {
|
|
console.log("111");
|
|
this.$api.mer_admin.BatchDeleteProducts(integers).then((res) => {
|
|
this.$refs.oTable.reload();
|
|
});
|
|
})
|
|
.catch(() => {
|
|
this.$message({
|
|
type: "info",
|
|
message: "已取消删除",
|
|
});
|
|
});
|
|
},
|
|
queryList(pageNo, pageSize) {
|
|
this.$api.coupon
|
|
.couponList({
|
|
pageNumber: pageNo,
|
|
pageSize: pageSize,
|
|
...this.formInline,
|
|
})
|
|
.then((res) => {
|
|
console.log(res);
|
|
this.$refs.oTable.complete(
|
|
res.data.data.data,
|
|
Number(res.data.data.total)
|
|
);
|
|
})
|
|
.catch((err) => {
|
|
this.$refs.oTable.complete(false);
|
|
});
|
|
},
|
|
},
|
|
computed: {
|
|
tableCols() {
|
|
return [
|
|
{ type: "checkbox", width: "60px", fixed: "left" },
|
|
// { type: "seq", width: "60px", align: "center", title: "序号" },
|
|
{
|
|
title: "优惠券名称",
|
|
align: "center",
|
|
field: "name",
|
|
},
|
|
{
|
|
title: "发行方",
|
|
align: "center",
|
|
field: "publisher",
|
|
type: "jsx",
|
|
render: ({ row }) => {
|
|
if (row.publisher === "MERCHANT") {
|
|
return <span>店铺</span>;
|
|
} else if (row.publisher == "PLATFORM") {
|
|
return <span>平台</span>;
|
|
}
|
|
},
|
|
},
|
|
{
|
|
title: "类别",
|
|
align: "center",
|
|
field: "category",
|
|
type: "jsx",
|
|
render: ({ row }) => {
|
|
if (row.category == "NO_THRESHOLD") {
|
|
return <span>无门槛优惠券</span>;
|
|
} else if (row.category == "MAX_OUT") {
|
|
return <span>满减优惠券</span>;
|
|
} else if (row.category == "FIRST_ATTENTION") {
|
|
return <span>首次关注优惠券</span>;
|
|
} else if (row.category == "BIRTHDAY") {
|
|
return <span>生日券</span>;
|
|
} else if (row.category == "PLATFORM") {
|
|
return <span>平台优惠券</span>;
|
|
}
|
|
},
|
|
},
|
|
{
|
|
title: "优惠券类型",
|
|
align: "center",
|
|
field: "couponType",
|
|
type: "jsx",
|
|
render: ({ row }) => {
|
|
if (row.couponType == "MONEY") {
|
|
return <span>满减券</span>;
|
|
} else if (row.couponType == "DISCOUNT") {
|
|
return <span>折扣券</span>;
|
|
}
|
|
},
|
|
},
|
|
{
|
|
title: "优惠金额",
|
|
align: "center",
|
|
field: "money",
|
|
},
|
|
{
|
|
title: "折扣",
|
|
align: "center",
|
|
field: "discount",
|
|
},
|
|
{
|
|
title: "最低消费",
|
|
align: "center",
|
|
field: "minPrice",
|
|
},
|
|
{
|
|
title: "限量",
|
|
align: "center",
|
|
field: "limitedNum",
|
|
},
|
|
{
|
|
title: "发放总数",
|
|
align: "center",
|
|
field: "total",
|
|
},
|
|
{
|
|
title: "剩余数量",
|
|
align: "center",
|
|
field: "lastTotal",
|
|
},
|
|
{
|
|
title: "状态",
|
|
align: "center",
|
|
field: "status",
|
|
type: "jsx",
|
|
render: ({ row }) => {
|
|
if (row.status == 0) {
|
|
return <span>关闭</span>;
|
|
} else if (row.status == 1) {
|
|
return <span>开启</span>;
|
|
}
|
|
},
|
|
},
|
|
{
|
|
title: "操作",
|
|
fixed: "right",
|
|
type: "jsx",
|
|
align: "center",
|
|
width: "140px",
|
|
render: (row) => {
|
|
let edit = () => {
|
|
// this.$refs.viewDetails.toggle(row).update();
|
|
};
|
|
return (
|
|
<div>
|
|
<el-button size="mini" type="primary" onClick={edit}>
|
|
详情
|
|
</el-button>
|
|
</div>
|
|
);
|
|
},
|
|
},
|
|
];
|
|
},
|
|
tableEvent() {
|
|
return {
|
|
"checkbox-all": ({ records, reserves }) => {
|
|
this.selectList = [...records, ...reserves];
|
|
},
|
|
"checkbox-change": ({ records, reserves }) => {
|
|
this.selectList = [...records, ...reserves];
|
|
},
|
|
};
|
|
},
|
|
...mapState("userData", [
|
|
"isMerchant",
|
|
"marketList",
|
|
"storeList",
|
|
"marketId",
|
|
"shopId",
|
|
]),
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped></style> |