274 lines
7.9 KiB
Vue
274 lines
7.9 KiB
Vue
<template>
|
||
<div>
|
||
<obj-modal
|
||
ref="modal"
|
||
labelWidth="150px"
|
||
:modalConfig="modalConfig"
|
||
:modalData="modalData"
|
||
:modalHandles="modalHandles"
|
||
>
|
||
<template slot="dialog__content">
|
||
<el-form :model="modalData" ref="modalForm">
|
||
<el-form-item label-width="150px" label="优惠券名称" prop="name">
|
||
<el-input
|
||
style="width: 350px"
|
||
v-model="modalData.name"
|
||
placeholder="请输入优惠券名称"
|
||
>
|
||
</el-input>
|
||
</el-form-item>
|
||
<el-form-item label-width="150px" label="使用日期" prop="name">
|
||
<el-date-picker
|
||
@change="usageDateChange"
|
||
v-model="usageDate"
|
||
value-format="yyyy-MM-dd"
|
||
type="daterange"
|
||
range-separator="至"
|
||
start-placeholder="开始日期"
|
||
end-placeholder="结束日期"
|
||
>
|
||
</el-date-picker>
|
||
</el-form-item>
|
||
<el-form-item label-width="150px" label="开放领取日期" prop="name">
|
||
<el-date-picker
|
||
@change="collectionDateChange"
|
||
v-model="collectionDate"
|
||
value-format="yyyy-MM-dd"
|
||
type="daterange"
|
||
range-separator="至"
|
||
start-placeholder="开始日期"
|
||
end-placeholder="结束日期"
|
||
>
|
||
</el-date-picker>
|
||
</el-form-item>
|
||
<el-form-item label-width="150px" label="选择商品" prop="targetIds">
|
||
<el-input
|
||
style="width: 350px"
|
||
placeholder="请选择选择商品"
|
||
v-model="modalData.targetIds"
|
||
>
|
||
<template slot="append">
|
||
<el-button @click="selectProduct">请选择</el-button>
|
||
</template>
|
||
</el-input>
|
||
<div v-if="product.name" class="product">
|
||
<div>
|
||
<el-image
|
||
style="width: 80px; height: 80px; margin-right: 10px"
|
||
:src="product.productPhotoList[0].url"
|
||
>
|
||
</el-image>
|
||
</div>
|
||
<div>
|
||
<div style="line-height: 20px">
|
||
商品名称：{{ product.name }}
|
||
</div>
|
||
<div style="line-height: 20px">
|
||
库存：{{ product.stockNum }}
|
||
</div>
|
||
<div style="line-height: 20px; color: rgba(255, 87, 51, 1)">
|
||
￥{{ product.minSalePrice }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</el-form-item>
|
||
<el-form-item label-width="150px" label="优惠金额" prop="targetIds">
|
||
<el-input-number
|
||
v-model="modalData.money"
|
||
:min="0"
|
||
label="请输入"
|
||
></el-input-number>
|
||
</el-form-item>
|
||
<el-form-item label-width="150px" label="发放数量" prop="targetIds">
|
||
<el-input-number
|
||
v-model="modalData.total"
|
||
:min="0"
|
||
:max="99999"
|
||
label="请输入"
|
||
></el-input-number>
|
||
</el-form-item>
|
||
<el-form-item label-width="150px" label="每人限领" prop="targetIds">
|
||
<el-select v-model="modalData.limitedNum" placeholder="请选择">
|
||
<el-option
|
||
v-for="item in [
|
||
{
|
||
label: '不限',
|
||
value: 0,
|
||
},
|
||
{
|
||
label: '1张',
|
||
value: 1,
|
||
},
|
||
{
|
||
label: '2张',
|
||
value: 2,
|
||
},
|
||
{
|
||
label: '3张',
|
||
value: 3,
|
||
},
|
||
{
|
||
label: '4张',
|
||
value: 4,
|
||
},
|
||
{
|
||
label: '5张',
|
||
value: 5,
|
||
},
|
||
]"
|
||
:key="item.value"
|
||
:label="item.label"
|
||
:value="item.value"
|
||
>
|
||
</el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
</el-form>
|
||
</template>
|
||
</obj-modal>
|
||
<!-- 选择商品 -->
|
||
<commodity @getProduct="getProduct" ref="commodity"></commodity>
|
||
</div>
|
||
</template>
|
||
<script>
|
||
import commodity from "./commodity.vue";
|
||
import { debounce, cloneDeep } from "lodash";
|
||
import { Divider } from "element-ui";
|
||
import loginVue from "../../../common/login.vue";
|
||
export default {
|
||
components: { commodity },
|
||
data() {
|
||
return {
|
||
isAdd: true,
|
||
//表格属性
|
||
modalConfig: {
|
||
title: "添加优惠卷",
|
||
show: false,
|
||
width: "800px",
|
||
},
|
||
formInline: {
|
||
marketId: "",
|
||
shopId: "",
|
||
},
|
||
modalData: {},
|
||
usageDate: [], //使用时间
|
||
collectionDate: [], //领取日期
|
||
product: {}, //商品
|
||
};
|
||
},
|
||
methods: {
|
||
queryTableData(pageNo, pageSize) {},
|
||
toggle(e) {
|
||
if (this.modalConfig.show == false) {
|
||
this.modalConfig.show = true;
|
||
} else {
|
||
this.modalConfig.show = false;
|
||
}
|
||
if (e) {
|
||
this.init(cloneDeep(e));
|
||
}
|
||
return {
|
||
add: (row) => {
|
||
this.formInline = {
|
||
marketId: row.marketId,
|
||
shopId: row.shopId,
|
||
};
|
||
this.modalConfig.title = `添加${row.label}`;
|
||
this.$nextTick(() => {
|
||
this.modalData = {
|
||
category: "NO_THRESHOLD",
|
||
receiveType: "MANUAL",
|
||
couponType: "MONEY",
|
||
isTimeReceive: 1, //0-不限时，1-限时
|
||
name: "",
|
||
useStartTime: "",
|
||
useEndTime: "",
|
||
receiveStartTime: "",
|
||
receiveEndTime: "",
|
||
money: "",
|
||
total: 10000,
|
||
limitedNum: 0,
|
||
minPrice: 0,
|
||
usableRange: "PARTIAL_GOODS", //部分商品-PARTIAL_GOODS 所有商品-ALL_GOODS 部分摊位-PARTIAL_SHOP
|
||
};
|
||
// this.$refs.modal.resetFields();
|
||
});
|
||
this.isAdd = true;
|
||
},
|
||
update: () => {
|
||
this.isAdd = false;
|
||
},
|
||
};
|
||
},
|
||
init(row) {},
|
||
usageDateChange(e) {
|
||
if (e) {
|
||
this.modalData.useStartTime = e[0];
|
||
this.modalData.useEndTime = e[1];
|
||
} else {
|
||
this.modalData.useStartTime = "";
|
||
this.modalData.useEndTime = "";
|
||
}
|
||
},
|
||
collectionDateChange(e) {
|
||
if (e) {
|
||
this.modalData.receiveStartTime = e[0];
|
||
this.modalData.receiveEndTime = e[1];
|
||
} else {
|
||
this.modalData.receiveStartTime = "";
|
||
this.modalData.receiveEndTime = "";
|
||
}
|
||
},
|
||
//选择商品
|
||
selectProduct() {
|
||
console.log("123");
|
||
this.$refs.commodity.toggle().add(this.formInline);
|
||
},
|
||
//获取商品
|
||
getProduct(row) {
|
||
console.log(row);
|
||
this.modalData.targetIds = row.id;
|
||
this.product = row;
|
||
},
|
||
},
|
||
computed: {
|
||
modalHandles() {
|
||
return [
|
||
{
|
||
label: "取消",
|
||
handle: () => {
|
||
this.toggle();
|
||
},
|
||
},
|
||
{
|
||
label: "确认添加",
|
||
type: "primary",
|
||
handle: () => {
|
||
console.log(this.modalData);
|
||
let data = { ...this.modalData };
|
||
data.targetIds = [data.targetIds];
|
||
console.log(this.modalData, data);
|
||
this.$api.coupon
|
||
.addCoupon({ ...data, ...this.formInline })
|
||
.then((res) => {
|
||
console.log(res);
|
||
this.$emit("queryList");
|
||
this.toggle();
|
||
});
|
||
},
|
||
},
|
||
];
|
||
},
|
||
},
|
||
asyncComputed: {},
|
||
};
|
||
</script>
|
||
<style lang="scss" scoped>
|
||
.product {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-top: 10px;
|
||
border: 1px solid #ccc;
|
||
width: 350px;
|
||
}
|
||
</style> |