173 lines
4.4 KiB
Vue
173 lines
4.4 KiB
Vue
<template>
|
|
<div>
|
|
<Card>
|
|
<Form ref="form" :model="form" :label-width="120">
|
|
<div class="base-info-item">
|
|
<h4>优惠券将在指定发放时间发放到用户账号中</h4>
|
|
<div class="form-item-view">
|
|
<FormItem label="活动名称" prop="promotionName">
|
|
<Input type="text" v-model="form.promotionName" placeholder="活动名称" clearable style="width: 260px" />
|
|
</FormItem>
|
|
<FormItem label="目标客户" prop="vipType">
|
|
<RadioGroup v-model="vipType">
|
|
<Radio :label="0">全平台客户</Radio>
|
|
<Radio :label="1">指定客户</Radio>
|
|
</RadioGroup>
|
|
<Button type="primary" v-if="vipType==1" icon="ios-add" @click="addVip" ghost>添加客户</Button>
|
|
</FormItem>
|
|
<FormItem label="发放时间" prop="couponDiscount">
|
|
<DatePicker type="datetime" v-model="form.rangeTime" format="yyyy-MM-dd HH:mm:ss" placeholder="请选择" :options="options" style="width: 260px">
|
|
</DatePicker>
|
|
</FormItem>
|
|
<FormItem label="选择优惠券" prop="couponType">
|
|
<Button type="primary" icon="ios-add" @click="checkCoupon=!checkCoupon" ghost>选择优惠券</Button>
|
|
<Table class="table" :columns="couponColumns" :data="couponData"></Table>
|
|
</FormItem>
|
|
</div>
|
|
|
|
<div style="margin-left:100px">
|
|
<Button type="text" @click="closeCurrentPage">返回</Button>
|
|
<Button type="primary" :loading="submitLoading" @click="handleSubmit">提交</Button>
|
|
</div>
|
|
|
|
</div>
|
|
</Form>
|
|
<Modal width="1200" v-model="checkCoupon">
|
|
<couponList checked @selected="callbackSelectCoupon" />
|
|
</Modal>
|
|
<Modal width="1200" v-model="checkUserList">
|
|
<userList @selected="callbackSelectUser" ref="memberLayout" />
|
|
</Modal>
|
|
</Card>
|
|
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { addCouponActivity } from "@/api/promotion";
|
|
|
|
import couponList from "./coupon";
|
|
import userList from "@/views/member/list/index";
|
|
// import userList from ''
|
|
export default {
|
|
components: {
|
|
couponList,
|
|
userList,
|
|
},
|
|
|
|
data() {
|
|
return {
|
|
// 选择优惠券
|
|
checkCoupon: false,
|
|
// 选择用户
|
|
checkUserList: false,
|
|
// 优惠券表格title
|
|
couponColumns: [
|
|
{
|
|
title: "优惠券名称",
|
|
key: "name",
|
|
},
|
|
{
|
|
title: "有效期",
|
|
key: "age",
|
|
},
|
|
{
|
|
title: "优惠券数量",
|
|
key: "address",
|
|
},
|
|
{
|
|
title: "操作",
|
|
key: "action",
|
|
},
|
|
],
|
|
// datpicker时间设置
|
|
options: {
|
|
disabledDate(date) {
|
|
return date && date.valueOf() < Date.now() - 86400000;
|
|
},
|
|
},
|
|
|
|
//
|
|
vipType: 0, //客户会员类型 0全平台客户 1指定客户
|
|
form: {},
|
|
formRule: {},
|
|
id: this.$route.query.id, // 优惠券id
|
|
|
|
callbackCoupon: [],
|
|
};
|
|
},
|
|
mounted() {},
|
|
methods: {
|
|
|
|
// 添加指定用户
|
|
addVip() {
|
|
this.checkUserList = true;
|
|
this.$nextTick(() => {
|
|
this.$refs.memberLayout.selectedMember = true;
|
|
});
|
|
},
|
|
// 返回已选择的用户
|
|
callbackSelectUser(val){
|
|
console.log(val)
|
|
},
|
|
|
|
// 返回已选择的优惠券
|
|
callbackSelectCoupon(val) {
|
|
if (val.___selected) {
|
|
this.callbackCoupon.forEach((item, index) => {
|
|
if (item.id == val.id) this.callbackCoupon.splice(index, 1);
|
|
});
|
|
} else {
|
|
this.callbackCoupon.push(val);
|
|
}
|
|
},
|
|
// 关闭当前页面
|
|
closeCurrentPage() {
|
|
this.$store.commit("removeTag", "add-coupon-specify");
|
|
localStorage.pageOpenedList = JSON.stringify(
|
|
this.$store.state.app.pageOpenedList
|
|
);
|
|
this.$router.go(-1);
|
|
},
|
|
|
|
async handleSubmit() {
|
|
let res = await addCouponActivity();
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scpoed>
|
|
.table {
|
|
width: 800px;
|
|
margin: 20px 0;
|
|
}
|
|
h4 {
|
|
margin-bottom: 10px;
|
|
padding: 0 10px;
|
|
border: 1px solid #ddd;
|
|
background-color: #f8f8f8;
|
|
font-weight: bold;
|
|
color: #333;
|
|
font-size: 14px;
|
|
line-height: 40px;
|
|
text-align: left;
|
|
}
|
|
.form-item-view {
|
|
margin: 20px 0;
|
|
}
|
|
.describe {
|
|
font-size: 12px;
|
|
margin-left: 10px;
|
|
color: #999;
|
|
}
|
|
.effectiveDays {
|
|
font-size: 12px;
|
|
color: #999;
|
|
> * {
|
|
margin: 0 4px;
|
|
}
|
|
}
|
|
</style>
|
|
|