255 lines
7.1 KiB
Vue
255 lines
7.1 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";
|
|||
|
|
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 = {
|
|||
|
|
total: 10000,
|
|||
|
|
};
|
|||
|
|
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);
|
|||
|
|
this.$api.mer_admin.bankCardAdd(this.modalData).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>
|