初始化项目
This commit is contained in:
@@ -0,0 +1,210 @@
|
||||
<template>
|
||||
<a-card :bordered="false">
|
||||
<div class="card-title">{{ $route.meta.title }}</div>
|
||||
<a-spin :spinning="isLoading">
|
||||
<a-form :form="form" @submit="handleSubmit">
|
||||
<a-form-item label="优惠券名称" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<a-input
|
||||
placeholder="请输入优惠券名称"
|
||||
v-decorator="['name', { rules: [{ required: true, min: 2, message: '请输入至少2个字符' }] }]"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="优惠券类型" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<a-radio-group
|
||||
v-decorator="['coupon_type', { initialValue: 10, rules: [{ required: true }] }]"
|
||||
>
|
||||
<a-radio :value="10">满减券</a-radio>
|
||||
<a-radio :value="20">折扣券</a-radio>
|
||||
</a-radio-group>
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
v-if="form.getFieldValue('coupon_type') == 10"
|
||||
label="减免金额"
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="wrapperCol"
|
||||
>
|
||||
<a-input-number
|
||||
:min="0.01"
|
||||
:precision="2"
|
||||
v-decorator="['reduce_price', { rules: [{ required: true, message: '请输入减免金额' }] }]"
|
||||
/>
|
||||
<span class="ml-5">元</span>
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
v-if="form.getFieldValue('coupon_type') == 20"
|
||||
label="折扣率"
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="wrapperCol"
|
||||
>
|
||||
<a-input-number
|
||||
:min="0"
|
||||
:max="9.9"
|
||||
:precision="1"
|
||||
v-decorator="['discount', { initialValue: 9.9, rules: [{ required: true, message: '请输入折扣率' }] }]"
|
||||
/>
|
||||
<span class="ml-5">%</span>
|
||||
<p class="form-item-help">
|
||||
<small>折扣率范围 0-9.9，8代表打8折，0代表不折扣</small>
|
||||
</p>
|
||||
</a-form-item>
|
||||
<a-form-item label="最低消费金额" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<a-input-number
|
||||
:min="1"
|
||||
:precision="2"
|
||||
v-decorator="['min_price', { rules: [{ required: true, message: '请输入最低消费金额' }] }]"
|
||||
/>
|
||||
<span class="ml-5">元</span>
|
||||
</a-form-item>
|
||||
<a-form-item label="到期类型" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<a-radio-group
|
||||
v-decorator="['expire_type', { initialValue: 10, rules: [{ required: true }] }]"
|
||||
>
|
||||
<a-radio :value="10">领取后生效</a-radio>
|
||||
<a-radio :value="20">固定时间</a-radio>
|
||||
</a-radio-group>
|
||||
<a-form-item v-show="form.getFieldValue('expire_type') == 10" class="expire_type-10">
|
||||
<InputNumberGroup
|
||||
addonBefore="有效期"
|
||||
addonAfter="天"
|
||||
:inputProps="{ min: 1, precision: 0 }"
|
||||
v-decorator="['expire_day', { initialValue: 7, rules: [{ required: true, message: '请输入有效期天数' }] }]"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item v-show="form.getFieldValue('expire_type') == 20" class="expire_type-20">
|
||||
<a-range-picker
|
||||
format="YYYY-MM-DD"
|
||||
v-decorator="['betweenTime', { initialValue: defaultDate, rules: [{ required: true, message: '请选择有效期范围' }] }]"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-form-item>
|
||||
<a-form-item label="券适用范围" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<a-radio-group
|
||||
v-decorator="['apply_range', { initialValue: 10, rules: [{ required: true }] }]"
|
||||
>
|
||||
<a-radio :value="10">全场通用</a-radio>
|
||||
<a-radio :value="20">指定商品</a-radio>
|
||||
</a-radio-group>
|
||||
<a-form-item v-if="form.getFieldValue('apply_range') == 20">
|
||||
<SelectGoods
|
||||
:defaultList="containGoodsList"
|
||||
v-decorator="['apply_range_config.applyGoodsIds', { initialValue: [], rules: [{ required: true, message: '请选择指定的商品' }] }]"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-form-item>
|
||||
<a-form-item label="发放总数量" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<a-input-number
|
||||
:min="-1"
|
||||
:precision="0"
|
||||
v-decorator="['total_num', { initialValue: -1, rules: [{ required: true, message: '请输入发放总数量' }] }]"
|
||||
/>
|
||||
<span class="ml-5">张</span>
|
||||
<p class="form-item-help">
|
||||
<small>发放的优惠券总数量，-1为不限制</small>
|
||||
</p>
|
||||
</a-form-item>
|
||||
<a-form-item label="显示状态" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<a-radio-group v-decorator="['status', { initialValue: 1, rules: [{ required: true }] }]">
|
||||
<a-radio :value="1">显示</a-radio>
|
||||
<a-radio :value="0">隐藏</a-radio>
|
||||
</a-radio-group>
|
||||
<p class="form-item-help">
|
||||
<small>如果设为隐藏将不会展示在用户端页面</small>
|
||||
</p>
|
||||
</a-form-item>
|
||||
<a-form-item label="优惠券描述" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<a-textarea :autoSize="{ minRows: 4 }" v-decorator="['describe']" />
|
||||
</a-form-item>
|
||||
<a-form-item label="排序" :labelCol="labelCol" :wrapperCol="wrapperCol" extra="数字越小越靠前">
|
||||
<a-input-number
|
||||
:min="0"
|
||||
v-decorator="['sort', {initialValue: 100, rules:[{required: true, message: '请输入排序值'}]}]"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item class="mt-20" :wrapper-col="{ span: wrapperCol.span, offset: labelCol.span }">
|
||||
<a-button type="primary" html-type="submit" :loading="isBtnLoading">提交</a-button>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</a-spin>
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import moment from 'moment'
|
||||
import * as Api from '@/api/market/coupon'
|
||||
import { InputNumberGroup, SelectGoods } from '@/components'
|
||||
import { ApplyRangeEnum, CouponTypeEnum, ExpireTypeEnum } from '@/common/enum/coupon'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
SelectGoods,
|
||||
InputNumberGroup
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
// 枚举类
|
||||
ApplyRangeEnum,
|
||||
CouponTypeEnum,
|
||||
ExpireTypeEnum,
|
||||
// 正在加载
|
||||
isLoading: false,
|
||||
isBtnLoading: false,
|
||||
// 标签布局属性
|
||||
labelCol: { span: 3 },
|
||||
// 输入框布局属性
|
||||
wrapperCol: { span: 10 },
|
||||
// 当前表单元素
|
||||
form: this.$form.createForm(this),
|
||||
// 默认日期范围
|
||||
defaultDate: [moment(), moment()],
|
||||
// 适用范围：指定的商品
|
||||
containGoodsList: []
|
||||
}
|
||||
},
|
||||
created () {
|
||||
this.$nextTick(() => {
|
||||
this.$forceUpdate()
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
|
||||
// 确认按钮
|
||||
handleSubmit (e) {
|
||||
e.preventDefault()
|
||||
// 表单验证
|
||||
const { form: { validateFields }, onFormSubmit } = this
|
||||
validateFields((errors, values) => {
|
||||
!errors && onFormSubmit(values)
|
||||
})
|
||||
},
|
||||
|
||||
// 提交到后端api
|
||||
onFormSubmit (values) {
|
||||
this.isLoading = true
|
||||
this.isBtnLoading = true
|
||||
Api.add({ form: values })
|
||||
.then(result => {
|
||||
// 显示提示信息
|
||||
this.$message.success(result.message, 1.5)
|
||||
// 跳转到列表页
|
||||
setTimeout(() => {
|
||||
this.$router.push('./index')
|
||||
}, 1500)
|
||||
})
|
||||
.catch(() => {
|
||||
this.isBtnLoading = false
|
||||
})
|
||||
.finally(result => {
|
||||
this.isLoading = false
|
||||
})
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.ant-form-item {
|
||||
.ant-form-item {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,215 @@
|
||||
<template>
|
||||
<a-card :bordered="false">
|
||||
<div class="card-title">{{ $route.meta.title }}</div>
|
||||
<a-alert message="注：优惠券只能抵扣商品金额，最多优惠到0.01元，不能抵扣运费" banner />
|
||||
<div class="table-operator">
|
||||
<a-row>
|
||||
<a-col :span="6">
|
||||
<a-button
|
||||
v-if="$auth('/market/coupon/create')"
|
||||
type="primary"
|
||||
icon="plus"
|
||||
@click="handleAdd"
|
||||
>新增</a-button>
|
||||
</a-col>
|
||||
<a-col :span="8" :offset="10">
|
||||
<a-input-search
|
||||
style="max-width: 300px; min-width: 150px;float: right;"
|
||||
v-model="queryParam.search"
|
||||
placeholder="请输入优惠券名称"
|
||||
@search="onSearch"
|
||||
/>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</div>
|
||||
<s-table
|
||||
ref="table"
|
||||
rowKey="coupon_id"
|
||||
:loading="isLoading"
|
||||
:columns="columns"
|
||||
:data="loadData"
|
||||
:pageSize="15"
|
||||
>
|
||||
<!-- 优惠券类型 -->
|
||||
<template slot="coupon_type" slot-scope="text">
|
||||
<a-tag>{{ CouponTypeEnum[text].name }}</a-tag>
|
||||
</template>
|
||||
<!-- 最低消费金额 -->
|
||||
<template slot="min_price" slot-scope="text">
|
||||
<p class="c-p">{{ text }}</p>
|
||||
</template>
|
||||
<!-- 优惠方式 -->
|
||||
<template slot="discount" slot-scope="item">
|
||||
<template v-if="item.coupon_type == 10">
|
||||
<span>立减</span>
|
||||
<span class="c-p mlr-2">{{ item.reduce_price }}</span>
|
||||
<span>元</span>
|
||||
</template>
|
||||
<template v-if="item.coupon_type == 20">
|
||||
<span>打</span>
|
||||
<span class="c-p mlr-2">{{ item.discount }}</span>
|
||||
<span>折</span>
|
||||
</template>
|
||||
</template>
|
||||
<!-- 有效期 -->
|
||||
<template slot="duetime" slot-scope="item">
|
||||
<template v-if="item.expire_type == 10">
|
||||
<span>领取</span>
|
||||
<span class="c-p mlr-2">{{ item.expire_day }}</span>
|
||||
<span>天内有效</span>
|
||||
</template>
|
||||
<template v-if="item.expire_type == 20">
|
||||
<span>{{ item.start_time }} ~ {{ item.end_time }}</span>
|
||||
</template>
|
||||
</template>
|
||||
<!-- 状态 -->
|
||||
<template slot="status" slot-scope="text">
|
||||
<a-tag :color="text ? 'green' : ''">{{ text ? '显示' : '隐藏' }}</a-tag>
|
||||
</template>
|
||||
<!-- 操作 -->
|
||||
<span class="actions" slot="action" slot-scope="item">
|
||||
<a v-if="$auth('/market/coupon/update')" @click="handleEdit(item)">编辑</a>
|
||||
<a v-action:delete @click="handleDelete(item)">删除</a>
|
||||
</span>
|
||||
</s-table>
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as Api from '@/api/market/coupon'
|
||||
import { STable } from '@/components'
|
||||
import { ApplyRangeEnum, CouponTypeEnum, ExpireTypeEnum } from '@/common/enum/coupon'
|
||||
|
||||
export default {
|
||||
name: 'Index',
|
||||
components: {
|
||||
STable
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
// 查询参数
|
||||
queryParam: {},
|
||||
// 枚举类
|
||||
ApplyRangeEnum,
|
||||
CouponTypeEnum,
|
||||
ExpireTypeEnum,
|
||||
// 正在加载
|
||||
isLoading: false,
|
||||
// 表头
|
||||
columns: [
|
||||
{
|
||||
title: '优惠券ID',
|
||||
dataIndex: 'coupon_id'
|
||||
},
|
||||
{
|
||||
title: '优惠券名称',
|
||||
dataIndex: 'name'
|
||||
},
|
||||
{
|
||||
title: '优惠券类型',
|
||||
dataIndex: 'coupon_type',
|
||||
scopedSlots: { customRender: 'coupon_type' }
|
||||
},
|
||||
{
|
||||
title: '最低消费金额 (元)',
|
||||
dataIndex: 'min_price',
|
||||
scopedSlots: { customRender: 'min_price' }
|
||||
},
|
||||
{
|
||||
title: '优惠方式',
|
||||
scopedSlots: { customRender: 'discount' }
|
||||
},
|
||||
// {
|
||||
// title: '有效期',
|
||||
// scopedSlots: { customRender: 'duetime' }
|
||||
// },
|
||||
// {
|
||||
// title: '发放总数量',
|
||||
// dataIndex: 'total_num'
|
||||
// },
|
||||
{
|
||||
title: '已发放/领取数量',
|
||||
dataIndex: 'receive_num'
|
||||
},
|
||||
{
|
||||
title: '状态',
|
||||
dataIndex: 'status',
|
||||
scopedSlots: { customRender: 'status' }
|
||||
},
|
||||
{
|
||||
title: '排序',
|
||||
dataIndex: 'sort'
|
||||
},
|
||||
{
|
||||
title: '添加时间',
|
||||
dataIndex: 'create_time'
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
width: '180px',
|
||||
scopedSlots: { customRender: 'action' }
|
||||
}
|
||||
],
|
||||
// 加载数据方法 必须为 Promise 对象
|
||||
loadData: param => {
|
||||
return Api.list({ ...param, ...this.queryParam })
|
||||
.then(response => {
|
||||
return response.data.list
|
||||
})
|
||||
}
|
||||
}
|
||||
},
|
||||
created () {
|
||||
|
||||
},
|
||||
methods: {
|
||||
|
||||
// 新增记录
|
||||
handleAdd () {
|
||||
this.$router.push('./create')
|
||||
},
|
||||
|
||||
// 编辑记录
|
||||
handleEdit (item) {
|
||||
this.$router.push({ path: './update', query: { couponId: item.coupon_id } })
|
||||
},
|
||||
|
||||
/**
|
||||
* 删除记录
|
||||
*/
|
||||
handleDelete (item) {
|
||||
const app = this
|
||||
const modal = this.$confirm({
|
||||
title: '您确定要删除该记录吗?',
|
||||
content: '删除后不可恢复',
|
||||
onOk () {
|
||||
return Api.deleted({ couponId: item.coupon_id })
|
||||
.then((result) => {
|
||||
app.$message.success(result.message, 1.5)
|
||||
app.handleRefresh()
|
||||
})
|
||||
.finally(result => {
|
||||
modal.destroy()
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
/**
|
||||
* 刷新列表
|
||||
* @param Boolean bool 强制刷新到第一页
|
||||
*/
|
||||
handleRefresh (bool = false) {
|
||||
this.$refs.table.refresh(bool)
|
||||
},
|
||||
|
||||
/**
|
||||
* 检索查询
|
||||
*/
|
||||
onSearch () {
|
||||
this.handleRefresh(true)
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,165 @@
|
||||
<template>
|
||||
<a-card :bordered="false">
|
||||
<div class="card-title">{{ $route.meta.title }}</div>
|
||||
<div class="table-operator">
|
||||
<!-- 搜索板块 -->
|
||||
<a-row class="row-item-search">
|
||||
<a-form class="search-form" :form="searchForm" layout="inline" @submit="handleSearch">
|
||||
<a-form-item label="优惠券名称">
|
||||
<a-input v-decorator="['couponName']" placeholder="请输入优惠券名称" />
|
||||
</a-form-item>
|
||||
<a-form-item label="会员昵称">
|
||||
<a-input v-decorator="['nickName']" placeholder="请输入会员昵称" />
|
||||
</a-form-item>
|
||||
<a-form-item label="领取时间">
|
||||
<a-range-picker format="YYYY-MM-DD" v-decorator="['betweenTime']" />
|
||||
</a-form-item>
|
||||
<a-form-item class="search-btn">
|
||||
<a-button type="primary" icon="search" html-type="submit">搜索</a-button>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</a-row>
|
||||
</div>
|
||||
<s-table
|
||||
ref="table"
|
||||
rowKey="user_coupon_id"
|
||||
:loading="isLoading"
|
||||
:columns="columns"
|
||||
:data="loadData"
|
||||
:pageSize="15"
|
||||
>
|
||||
<!-- 会员信息 -->
|
||||
<template slot="user" slot-scope="item">
|
||||
<UserItem :user="item" />
|
||||
</template>
|
||||
<!-- 优惠券类型 -->
|
||||
<template slot="coupon_type" slot-scope="text">
|
||||
<a-tag>{{ CouponTypeEnum[text].name }}</a-tag>
|
||||
</template>
|
||||
<!-- 最低消费金额 -->
|
||||
<template slot="min_price" slot-scope="text">
|
||||
<p class="c-p">{{ text }}</p>
|
||||
</template>
|
||||
<!-- 优惠方式 -->
|
||||
<template slot="discount" slot-scope="item">
|
||||
<template v-if="item.coupon_type == CouponTypeEnum.FULL_DISCOUNT.value">
|
||||
<span>立减</span>
|
||||
<span class="c-p mlr-2">{{ item.reduce_price }}</span>
|
||||
<span>元</span>
|
||||
</template>
|
||||
<template v-if="item.coupon_type == CouponTypeEnum.DISCOUNT.value">
|
||||
<span>打</span>
|
||||
<span class="c-p mlr-2">{{ item.discount }}</span>
|
||||
<span>折</span>
|
||||
</template>
|
||||
</template>
|
||||
<!-- 有效期 -->
|
||||
<template slot="duetime" slot-scope="item">
|
||||
<template v-if="item.expire_type == 10">
|
||||
<span>领取</span>
|
||||
<span class="c-p mlr-2">{{ item.expire_day }}</span>
|
||||
<span>天内有效</span>
|
||||
</template>
|
||||
<template v-if="item.expire_type == 20">
|
||||
<span>{{ item.start_time }} ~ {{ item.end_time }}</span>
|
||||
</template>
|
||||
</template>
|
||||
</s-table>
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as Api from '@/api/market/coupon'
|
||||
import { STable, UserItem } from '@/components/Table'
|
||||
import { CouponTypeEnum } from '@/common/enum/coupon'
|
||||
|
||||
export default {
|
||||
name: 'Index',
|
||||
components: {
|
||||
STable,
|
||||
UserItem
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
// 当前表单元素
|
||||
searchForm: this.$form.createForm(this),
|
||||
// 查询参数
|
||||
queryParam: {},
|
||||
// 枚举类
|
||||
CouponTypeEnum,
|
||||
// 正在加载
|
||||
isLoading: false,
|
||||
// 表头
|
||||
columns: [
|
||||
{
|
||||
title: 'ID',
|
||||
dataIndex: 'user_coupon_id'
|
||||
},
|
||||
{
|
||||
title: '会员信息',
|
||||
dataIndex: 'user',
|
||||
scopedSlots: { customRender: 'user' }
|
||||
},
|
||||
{
|
||||
title: '优惠券名称',
|
||||
dataIndex: 'name'
|
||||
},
|
||||
{
|
||||
title: '优惠券类型',
|
||||
dataIndex: 'coupon_type',
|
||||
scopedSlots: { customRender: 'coupon_type' }
|
||||
},
|
||||
{
|
||||
title: '最低消费金额 (元)',
|
||||
dataIndex: 'min_price',
|
||||
scopedSlots: { customRender: 'min_price' }
|
||||
},
|
||||
{
|
||||
title: '优惠方式',
|
||||
scopedSlots: { customRender: 'discount' }
|
||||
},
|
||||
{
|
||||
title: '有效期',
|
||||
scopedSlots: { customRender: 'duetime' }
|
||||
},
|
||||
{
|
||||
title: '领取时间',
|
||||
dataIndex: 'create_time'
|
||||
}
|
||||
],
|
||||
// 加载数据方法 必须为 Promise 对象
|
||||
loadData: param => {
|
||||
return Api.receive({ ...param, ...this.queryParam })
|
||||
.then(response => {
|
||||
return response.data.list
|
||||
})
|
||||
}
|
||||
}
|
||||
},
|
||||
created () {
|
||||
|
||||
},
|
||||
methods: {
|
||||
|
||||
/**
|
||||
* 刷新列表
|
||||
* @param Boolean bool 强制刷新到第一页
|
||||
*/
|
||||
handleRefresh (bool = false) {
|
||||
this.$refs.table.refresh(bool)
|
||||
},
|
||||
|
||||
// 确认搜索
|
||||
handleSearch (e) {
|
||||
e.preventDefault()
|
||||
this.searchForm.validateFields((error, values) => {
|
||||
if (!error) {
|
||||
this.queryParam = { ...this.queryParam, ...values }
|
||||
this.handleRefresh(true)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,278 @@
|
||||
<template>
|
||||
<a-card :bordered="false">
|
||||
<div class="card-title">{{ $route.meta.title }}</div>
|
||||
<a-spin :spinning="isLoading">
|
||||
<a-form :form="form" @submit="handleSubmit">
|
||||
<a-form-item label="优惠券名称" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<a-input
|
||||
placeholder="请输入优惠券名称"
|
||||
v-decorator="['name', { rules: [{ required: true, min: 2, message: '请输入至少2个字符' }] }]"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="优惠券类型" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<a-radio-group
|
||||
v-decorator="['coupon_type', { initialValue: 10, rules: [{ required: true }] }]"
|
||||
>
|
||||
<a-radio :value="10">满减券</a-radio>
|
||||
<a-radio :value="20">折扣券</a-radio>
|
||||
</a-radio-group>
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
v-show="form.getFieldValue('coupon_type') == CouponTypeEnum.FULL_DISCOUNT.value"
|
||||
label="减免金额"
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="wrapperCol"
|
||||
>
|
||||
<a-input-number
|
||||
:min="0.01"
|
||||
:precision="2"
|
||||
v-decorator="['reduce_price', { rules: [{ required: true, message: '请输入减免金额' }] }]"
|
||||
/>
|
||||
<span class="ml-5">元</span>
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
v-show="form.getFieldValue('coupon_type') == CouponTypeEnum.DISCOUNT.value"
|
||||
label="折扣率"
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="wrapperCol"
|
||||
>
|
||||
<a-input-number
|
||||
:min="0"
|
||||
:max="9.9"
|
||||
:precision="1"
|
||||
v-decorator="['discount', { initialValue: 9.9, rules: [{ required: true, message: '请输入折扣率' }] }]"
|
||||
/>
|
||||
<span class="ml-5">%</span>
|
||||
<p class="form-item-help">
|
||||
<small>折扣率范围 0-9.9，8代表打8折，0代表不折扣</small>
|
||||
</p>
|
||||
</a-form-item>
|
||||
<a-form-item label="最低消费金额" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<a-input-number
|
||||
:min="1"
|
||||
:precision="2"
|
||||
v-decorator="['min_price', { rules: [{ required: true, message: '请输入最低消费金额' }] }]"
|
||||
/>
|
||||
<span class="ml-5">元</span>
|
||||
</a-form-item>
|
||||
<a-form-item label="到期类型" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<a-radio-group
|
||||
v-decorator="['expire_type', { initialValue: 10, rules: [{ required: true }] }]"
|
||||
>
|
||||
<a-radio :value="10">领取后生效</a-radio>
|
||||
<a-radio :value="20">固定时间</a-radio>
|
||||
</a-radio-group>
|
||||
<a-form-item v-show="form.getFieldValue('expire_type') == 10" class="expire_type-10">
|
||||
<InputNumberGroup
|
||||
addonBefore="有效期"
|
||||
addonAfter="天"
|
||||
:inputProps="{ min: 1, precision: 0 }"
|
||||
v-decorator="['expire_day', { initialValue: 7, rules: [{ required: true, message: '请输入有效期天数' }] }]"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item v-show="form.getFieldValue('expire_type') == 20" class="expire_type-20">
|
||||
<a-range-picker
|
||||
format="YYYY-MM-DD"
|
||||
v-decorator="['betweenTime', { initialValue: defaultDate, rules: [{ required: true, message: '请选择有效期范围' }] }]"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-form-item>
|
||||
<a-form-item label="券适用范围" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<a-radio-group
|
||||
v-decorator="['apply_range', { initialValue: 10, rules: [{ required: true }] }]"
|
||||
>
|
||||
<a-radio :value="10">全场通用</a-radio>
|
||||
<a-radio :value="20">指定商品</a-radio>
|
||||
</a-radio-group>
|
||||
<a-form-item v-if="form.getFieldValue('apply_range') == 20">
|
||||
<SelectGoods
|
||||
:defaultList="containGoodsList"
|
||||
v-decorator="['apply_range_config.applyGoodsIds', { rules: [{ required: true, message: '请选择指定的商品' }] }]"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-form-item>
|
||||
<a-form-item label="发放总数量" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<a-input-number
|
||||
:min="-1"
|
||||
:precision="0"
|
||||
v-decorator="['total_num', { initialValue: -1, rules: [{ required: true, message: '请输入发放总数量' }] }]"
|
||||
/>
|
||||
<span class="ml-5">张</span>
|
||||
<p class="form-item-help">
|
||||
<small>发放的优惠券总数量，-1为不限制</small>
|
||||
</p>
|
||||
</a-form-item>
|
||||
<a-form-item label="显示状态" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<a-radio-group v-decorator="['status', { initialValue: 1, rules: [{ required: true }] }]">
|
||||
<a-radio :value="1">显示</a-radio>
|
||||
<a-radio :value="0">隐藏</a-radio>
|
||||
</a-radio-group>
|
||||
<p class="form-item-help">
|
||||
<small>如果设为隐藏将不会展示在用户端页面</small>
|
||||
</p>
|
||||
</a-form-item>
|
||||
<a-form-item label="优惠券描述" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<a-textarea :autoSize="{ minRows: 4 }" v-decorator="['describe']" />
|
||||
</a-form-item>
|
||||
<a-form-item label="排序" :labelCol="labelCol" :wrapperCol="wrapperCol" extra="数字越小越靠前">
|
||||
<a-input-number
|
||||
:min="0"
|
||||
v-decorator="['sort', {initialValue: 100, rules:[{required: true, message: '请输入排序值'}]}]"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item class="mt-20" :wrapper-col="{ span: wrapperCol.span, offset: labelCol.span }">
|
||||
<a-button type="primary" html-type="submit" :loading="isBtnLoading">提交</a-button>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</a-spin>
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import moment from 'moment'
|
||||
import { pick, get } from 'lodash'
|
||||
import * as Api from '@/api/market/coupon'
|
||||
import * as GoodsApi from '@/api/goods'
|
||||
import { isEmpty } from '@/utils/util'
|
||||
import { InputNumberGroup, SelectGoods } from '@/components'
|
||||
import { ApplyRangeEnum, CouponTypeEnum, ExpireTypeEnum } from '@/common/enum/coupon'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
SelectGoods,
|
||||
InputNumberGroup
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
// 枚举类
|
||||
ApplyRangeEnum,
|
||||
CouponTypeEnum,
|
||||
ExpireTypeEnum,
|
||||
// 正在加载
|
||||
isLoading: false,
|
||||
isBtnLoading: false,
|
||||
// 标签布局属性
|
||||
labelCol: { span: 3 },
|
||||
// 输入框布局属性
|
||||
wrapperCol: { span: 10 },
|
||||
// 当前表单元素
|
||||
form: this.$form.createForm(this),
|
||||
// 默认日期范围
|
||||
defaultDate: [moment(), moment()],
|
||||
// 优惠券ID
|
||||
couponId: null,
|
||||
// 当前记录
|
||||
record: {},
|
||||
// 适用范围：指定的商品
|
||||
containGoodsList: []
|
||||
}
|
||||
},
|
||||
async created () {
|
||||
// 记录优惠券ID
|
||||
this.couponId = this.$route.query.couponId
|
||||
// 获取当前记录
|
||||
await this.getDetail()
|
||||
// 获取适用范围：指定的商品
|
||||
await this.getContainGoodsList()
|
||||
},
|
||||
methods: {
|
||||
|
||||
// 获取当前记录
|
||||
async getDetail () {
|
||||
const { couponId } = this
|
||||
this.isLoading = true
|
||||
await Api.detail({ couponId })
|
||||
.then(result => {
|
||||
// 当前记录
|
||||
this.record = result.data.detail
|
||||
// 设置表单默认值
|
||||
this.setFieldsValue()
|
||||
})
|
||||
.finally(() => {
|
||||
this.isLoading = false
|
||||
})
|
||||
},
|
||||
|
||||
// 获取指定的商品列表
|
||||
async getContainGoodsList () {
|
||||
const { record } = this
|
||||
const goodsIds = get(record, 'apply_range_config.applyGoodsIds')
|
||||
if (goodsIds !== undefined && goodsIds.length) {
|
||||
this.isLoading = true
|
||||
await GoodsApi.listByIds(goodsIds)
|
||||
.then(result => {
|
||||
this.containGoodsList = result.data.list
|
||||
})
|
||||
.finally(result => {
|
||||
this.isLoading = false
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
// 设置表单默认值
|
||||
setFieldsValue () {
|
||||
const { record, form, $nextTick } = this
|
||||
// 设置表单内容
|
||||
!isEmpty(form.getFieldsValue()) && $nextTick(() => {
|
||||
// 表单数据
|
||||
const data = pick(record, [
|
||||
'name', 'coupon_type', 'reduce_price', 'discount', 'min_price', 'status',
|
||||
'expire_type', 'expire_day', 'apply_range', 'total_num', 'describe', 'sort'
|
||||
])
|
||||
// 时间范围
|
||||
data.betweenTime = this.getBetweenTime(record)
|
||||
form.setFieldsValue(data)
|
||||
})
|
||||
},
|
||||
|
||||
// 格式化时间范围
|
||||
getBetweenTime (record) {
|
||||
if (record.expire_type === ExpireTypeEnum.FIXED_TIME.value) {
|
||||
return [moment(new Date(record.start_time)), moment(new Date(record.end_time))]
|
||||
}
|
||||
return this.defaultDate
|
||||
},
|
||||
|
||||
// 确认按钮
|
||||
handleSubmit (e) {
|
||||
e.preventDefault()
|
||||
// 表单验证
|
||||
const { form: { validateFields }, onFormSubmit } = this
|
||||
validateFields((errors, values) => {
|
||||
!errors && onFormSubmit(values)
|
||||
})
|
||||
},
|
||||
|
||||
/**
|
||||
* 提交到后端api
|
||||
*/
|
||||
onFormSubmit (values) {
|
||||
this.isLoading = true
|
||||
this.isBtnLoading = true
|
||||
Api.edit({ couponId: this.couponId, form: values })
|
||||
.then(result => {
|
||||
// 显示提示信息
|
||||
this.$message.success(result.message, 1.5)
|
||||
// 跳转到列表页
|
||||
setTimeout(() => {
|
||||
this.$router.push('./index')
|
||||
}, 1500)
|
||||
})
|
||||
.catch(() => {
|
||||
this.isBtnLoading = false
|
||||
})
|
||||
.finally(result => {
|
||||
this.isLoading = false
|
||||
})
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.ant-form-item {
|
||||
.ant-form-item {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user