408 lines
12 KiB
Vue
408 lines
12 KiB
Vue
<!-- eslint-disable vue/no-use-v-if-with-v-for -->
|
|
<template>
|
|
<div class="app-container">
|
|
<div class="tab">
|
|
<div v-for="(item,index) in tabList" v-if="(form.id&&form.type == item.type)||!form.id" :key="index" class="tab_item" :class="{active: form.type == item.type}" @click="tabClick(item)"> {{ item.name }} <span class="bor" /></div>
|
|
</div>
|
|
<!-- 优惠券 -->
|
|
<div v-if="form.type == 1" class="content">
|
|
<el-form ref="form" :model="form" :rules="rules" label-width="120px" label-position="left">
|
|
<el-form-item label="优惠券券名" prop="title">
|
|
<el-input v-model="form.title" placeholder="" style="width: 289px;" />
|
|
</el-form-item>
|
|
<el-form-item label="使用门槛">
|
|
<el-input v-model="form.fullAmount" type="number" placeholder="" style="width: 180px;margin-right: 66px;">
|
|
<template slot="prepend">满</template>
|
|
<template slot="append">元</template>
|
|
</el-input>
|
|
<el-input v-model="form.discountAmount" type="number" placeholder="" style="width: 180px;">
|
|
<template slot="prepend">减</template>
|
|
<template slot="append">元</template>
|
|
</el-input>
|
|
</el-form-item>
|
|
|
|
<el-form-item label="有效期类型">
|
|
<el-radio-group v-model="form.validityType">
|
|
<el-radio v-for="item in couponEnum.validityType" :key="item.value" :label="item.value">
|
|
{{ item.label }}
|
|
</el-radio>
|
|
</el-radio-group>
|
|
</el-form-item>
|
|
<el-form-item v-if="form.validityType == 'custom'" label="有效时间" prop="validEndTime">
|
|
<el-date-picker
|
|
v-model="validityTime"
|
|
type="daterange"
|
|
range-separator="至"
|
|
start-placeholder="开始日期"
|
|
end-placeholder="结束日期"
|
|
:default-time="['06:00:00', '23:59:59']"
|
|
value-format="yyyy-MM-dd HH:mm:ss"
|
|
@change="validityChange"
|
|
/>
|
|
</el-form-item>
|
|
<!-- <el-form-item label="使用门槛" prop="daysToTakeEffect">
|
|
<el-input v-model="form.daysToTakeEffect" placeholder="" style="width: 200px;">
|
|
<template slot="prepend">隔</template>
|
|
<template slot="append">天生效</template>
|
|
</el-input>
|
|
</el-form-item> -->
|
|
<el-form-item label="可用周期" prop="userDays">
|
|
<el-checkbox-group v-model="form.userDays">
|
|
<el-checkbox v-for="(city,index) in couponEnum.cycle" :key="index" :label="city.label" @change="userDayChagne">{{ city.label }}</el-checkbox>
|
|
</el-checkbox-group>
|
|
</el-form-item>
|
|
<el-form-item label="指定时间段">
|
|
<el-radio-group v-model="form.useTimeType">
|
|
<el-radio v-for="item in couponEnum.useTimeType" :key="item.value" :label="item.value">
|
|
{{ item.label }}
|
|
</el-radio>
|
|
</el-radio-group>
|
|
</el-form-item>
|
|
<el-form-item v-if="form.useTimeType == 'custom'" label="指定时间段" prop="useEndTime">
|
|
<el-time-picker
|
|
v-model="useTime"
|
|
is-range
|
|
range-separator="至"
|
|
start-placeholder="开始日期"
|
|
end-placeholder="结束日期"
|
|
:default-time="['00:00:00', '23:59:59']"
|
|
value-format="HH:mm"
|
|
@change="useTimeChange"
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item label="发放数量" prop="number">
|
|
<el-input v-model="form.number" type="number" placeholder="" style="width: 200px;" />
|
|
</el-form-item>
|
|
</el-form>
|
|
<span slot="footer" class="dialog-footer">
|
|
<el-button @click="dialogVisible = false">取 消</el-button>
|
|
<el-button type="primary" :loading="loading" @click="onSubmitHandle">确 定</el-button>
|
|
</span>
|
|
</div>
|
|
<!-- 商品券 -->
|
|
<div v-if="form.type == 2" class="content">
|
|
<el-form ref="form" :model="form" :rules="rules" label-width="120px" label-position="left">
|
|
<el-form-item label="商品券券名" prop="title">
|
|
<el-input v-model="form.title" placeholder="" style="width: 289px;" />
|
|
</el-form-item>
|
|
<el-form-item label="发放数量" prop="number">
|
|
<el-input v-model="form.number" type="number" placeholder="" style="width: 289px;" />
|
|
</el-form-item>
|
|
<el-form-item label="使用门槛">
|
|
全额满<el-input v-model="form.fullAmount" placeholder="" style="width: 100px;margin: 0 23px;"><template slot="suffix">元</template></el-input>可用
|
|
</el-form-item>
|
|
<el-form-item label="赠送商品" prop="products">
|
|
<div>
|
|
<el-button type="primary" icon="el-icon-plus" @click="$refs.shopListRef.show([...form.products])">
|
|
添加 </el-button>
|
|
</div>
|
|
<div class="shop_list">
|
|
<div
|
|
v-for="(item, index) in form.products"
|
|
:key="item.id"
|
|
class="item_wrap"
|
|
>
|
|
<div class="name">{{ item.name }}</div>
|
|
<el-input v-model="item.num" placeholder="请填写数量" style="width: 100px;" />
|
|
<div class="del" @click="form.products.splice(index, 1)">删除</div>
|
|
</div>
|
|
</div>
|
|
</el-form-item>
|
|
|
|
</el-form>
|
|
<span slot="footer" class="dialog-footer">
|
|
<el-button @click="dialogVisible = false">取 消</el-button>
|
|
<el-button type="primary" :loading="loading" @click="onSubmitHandle">确 定</el-button>
|
|
</span>
|
|
</div>
|
|
<shopList ref="shopListRef" @success="slectShop" />
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import couponEnum from './couponEnum'
|
|
import shopList from '@/components/shopList'
|
|
import { addTbShopCoupon, getTbShopCouponInfo } from '@/api/coupon'
|
|
export default {
|
|
components: { shopList },
|
|
data() {
|
|
const validateProduct = (rule, value, callback) => {
|
|
if (!this.form.products.length) {
|
|
callback(new Error('请选择商品'))
|
|
} else {
|
|
callback()
|
|
}
|
|
}
|
|
return {
|
|
tabList: [
|
|
{ name: '新增优惠券', type: 1 },
|
|
{ name: '新增商品券', type: 2 }
|
|
],
|
|
tabActive: 1,
|
|
couponEnum,
|
|
dialogVisible: false,
|
|
loading: false,
|
|
validityTime: [],
|
|
useTime: ['06:00:00', '23:59:59'],
|
|
form: {
|
|
id: '',
|
|
shopId: '',
|
|
type: '1',
|
|
title: '',
|
|
fullAmount: null,
|
|
discountAmount: null,
|
|
validityType: 'fixed',
|
|
validStartTime: '',
|
|
validEndTime: '',
|
|
userDays: [],
|
|
useTimeType: 'all',
|
|
useStartTime: '',
|
|
useEndTime: '',
|
|
products: [],
|
|
number: ''
|
|
},
|
|
rules: {
|
|
title: [
|
|
{
|
|
required: true,
|
|
message: '填写券名',
|
|
trigger: 'blur'
|
|
}
|
|
],
|
|
daysToTakeEffect: [
|
|
{
|
|
required: true,
|
|
message: '填写生效天数',
|
|
trigger: 'blur'
|
|
}
|
|
],
|
|
userDays: [
|
|
{
|
|
required: true,
|
|
message: '选择可用周期',
|
|
trigger: 'change'
|
|
}
|
|
],
|
|
validEndTime: [
|
|
{
|
|
required: true,
|
|
message: '选择有效时间段',
|
|
trigger: 'change'
|
|
}
|
|
],
|
|
useEndTime: [
|
|
{
|
|
required: true,
|
|
message: '选择指定时间段',
|
|
trigger: 'change'
|
|
}
|
|
],
|
|
products: [
|
|
{
|
|
required: true,
|
|
validator: validateProduct,
|
|
trigger: 'change'
|
|
}
|
|
],
|
|
number: [
|
|
{
|
|
required: true,
|
|
message: '填写发放数量',
|
|
trigger: 'blur'
|
|
}
|
|
]
|
|
},
|
|
resetForm: ''
|
|
}
|
|
},
|
|
mounted() {
|
|
this.resetForm = { ...this.form }
|
|
this.form.type = this.$route.query.type
|
|
this.form.useStartTime = this.useTime[0]
|
|
this.form.useEndTime = this.useTime[1]
|
|
if (this.$route.query.id) { this.form.id = this.$route.query.id; this.getCouponInfo(this.$route.query.id) }
|
|
},
|
|
methods: {
|
|
/**
|
|
* 切换类型
|
|
* @param item
|
|
*/
|
|
tabClick(item) {
|
|
console.log(item)
|
|
this.form.type = item.type
|
|
this.$refs.form.resetFields()
|
|
},
|
|
|
|
/**
|
|
* 获取优惠券详情
|
|
*/
|
|
async getCouponInfo(id) {
|
|
const resInfo = await getTbShopCouponInfo(id)
|
|
this.form = resInfo
|
|
if (resInfo.validityType === 'custom') {
|
|
this.validityTime = [resInfo.validStartTime, resInfo.validEndTime]
|
|
}
|
|
if (resInfo.useTimeType === 'custom') {
|
|
this.useTime = [resInfo.useStartTime, resInfo.useEndTime]
|
|
}
|
|
this.form.userDays = this.form.userDays.split(',')
|
|
},
|
|
|
|
/**
|
|
* 选择可用周期
|
|
*/
|
|
userDayChagne(e) {
|
|
console.log(this.form.userDays)
|
|
},
|
|
|
|
/**
|
|
* 有效期选择
|
|
* @param e
|
|
*/
|
|
validityChange(e) {
|
|
this.form.validStartTime = e[0]
|
|
this.form.validEndTime = e[1]
|
|
},
|
|
|
|
/**
|
|
* 指定时间段选择
|
|
* @param e
|
|
*/
|
|
useTimeChange(e) {
|
|
this.form.useStartTime = e[0]
|
|
this.form.useEndTime = e[1]
|
|
},
|
|
|
|
/**
|
|
* 选择商品
|
|
* @param res
|
|
*/
|
|
slectShop(res) {
|
|
if (res.length <= 0) {
|
|
return
|
|
}
|
|
this.form.products = []
|
|
if (this.form.products.length) {
|
|
res.map(async item => {
|
|
if (!await this.checkShop(item.id)) {
|
|
this.form.products.push({
|
|
id: item.id,
|
|
name: item.name,
|
|
num: null
|
|
})
|
|
}
|
|
})
|
|
} else {
|
|
this.form.products.push({
|
|
id: res[0].id,
|
|
name: res[0].name,
|
|
num: null
|
|
})
|
|
}
|
|
},
|
|
|
|
/**
|
|
* 判断是否存在重复商品
|
|
* @param id
|
|
*/
|
|
checkShop(id) {
|
|
let falg = false
|
|
this.form.products.map(item => {
|
|
// eslint-disable-next-line eqeqeq
|
|
if (item.id == id) {
|
|
falg = true
|
|
}
|
|
})
|
|
return falg
|
|
},
|
|
|
|
/**
|
|
* 提交
|
|
*/
|
|
onSubmitHandle() {
|
|
console.log(this.form)
|
|
this.$refs.form.validate(async valid => {
|
|
if (valid) {
|
|
try {
|
|
this.loading = true
|
|
if (!this.form.shopId) { this.form.shopId = localStorage.getItem('shopId') }
|
|
this.form.userDays = this.form.userDays.toString()
|
|
// eslint-disable-next-line no-unused-vars
|
|
const res = await addTbShopCoupon(this.form)
|
|
this.$store.dispatch('tagsView/delView', this.$route) // 关闭当前页
|
|
this.$router.replace({ name: 'coupon_list' }) // 要打开的页面
|
|
this.$notify({
|
|
title: '成功',
|
|
message: `${this.form.id ? '编辑' : '添加'}成功`,
|
|
type: 'success'
|
|
})
|
|
this.loading = false
|
|
} catch (error) {
|
|
this.loading = false
|
|
console.log(error)
|
|
}
|
|
}
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.tab{
|
|
display: flex;
|
|
margin-bottom: 30px;
|
|
padding-top: 40px;
|
|
padding-left: 10px;
|
|
.tab_item{
|
|
margin-right: 64px;
|
|
font-weight: 400;
|
|
font-size: 16px;
|
|
color: #666666;
|
|
cursor: pointer;
|
|
.bor{
|
|
display: block;
|
|
width: 56px;
|
|
height: 6px;
|
|
background-color: transparent;
|
|
border-radius: 3px 3px 3px 3px;
|
|
margin: 5px auto 0;
|
|
}
|
|
}
|
|
.active{
|
|
color: #3F9EFF;
|
|
.bor{
|
|
background-color: #3F9EFF;
|
|
}
|
|
}
|
|
|
|
}
|
|
.content{
|
|
font-weight: 400;
|
|
font-size: 16px;
|
|
color: #666666;
|
|
}
|
|
.shop_list {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
margin-top: 15px;
|
|
.item_wrap {
|
|
$size: 80px;
|
|
display: flex;
|
|
align-items: center;
|
|
.name {
|
|
width: $size;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
.del{
|
|
font-weight: 400;
|
|
font-size: 14px;
|
|
color: #3F9EFF;
|
|
margin-left: 11px;
|
|
}
|
|
}
|
|
}
|
|
</style>
|