优惠券管理
This commit is contained in:
djz236@163.com
38
src/api/coupon/coupon.js
Normal file
38
src/api/coupon/coupon.js
Normal file
@@ -0,0 +1,38 @@
|
||||
import request from '@/utils/request'
|
||||
export function fetchList(params) {
|
||||
return request({
|
||||
url:'/sms/SmsCoupon/list',
|
||||
method:'get',
|
||||
params:params
|
||||
})
|
||||
}
|
||||
|
||||
export function createCoupon(data) {
|
||||
return request({
|
||||
url:'/sms/SmsCoupon/create',
|
||||
method:'post',
|
||||
data:data
|
||||
})
|
||||
}
|
||||
|
||||
export function getCoupon(id) {
|
||||
return request({
|
||||
url:'/sms/SmsCoupon/'+id,
|
||||
method:'get',
|
||||
})
|
||||
}
|
||||
|
||||
export function updateCoupon(id,data) {
|
||||
return request({
|
||||
url:'/sms/SmsCoupon/update/'+id,
|
||||
method:'post',
|
||||
data:data
|
||||
})
|
||||
}
|
||||
|
||||
export function deleteCoupon(id) {
|
||||
return request({
|
||||
url:'/sms/SmsCoupon/delete/'+id,
|
||||
method:'get',
|
||||
})
|
||||
}
|
||||
8
src/api/coupon/couponHistory.js
Normal file
8
src/api/coupon/couponHistory.js
Normal file
@@ -0,0 +1,8 @@
|
||||
import request from '@/utils/request'
|
||||
export function fetchList(params) {
|
||||
return request({
|
||||
url:'/sms/SmsCouponHistory/list',
|
||||
method:'get',
|
||||
params:params
|
||||
})
|
||||
}
|
||||
@@ -14,6 +14,13 @@ export function fetchSimpleList(params) {
|
||||
params:params
|
||||
})
|
||||
}
|
||||
export function simpleProductList(params) {
|
||||
return request({
|
||||
url:'/pms/PmsProduct/simpleProductList',
|
||||
method:'get',
|
||||
params:params
|
||||
})
|
||||
}
|
||||
|
||||
export function updateDeleteStatus(params) {
|
||||
return request({
|
||||
|
||||
@@ -239,6 +239,16 @@
|
||||
name: '/pickupPoint/index',
|
||||
path: '/pickupPoint/index'
|
||||
},
|
||||
{
|
||||
alwaysShow: true,
|
||||
component: 'coupon',
|
||||
meta: {
|
||||
icon: 'el-icon-menu',
|
||||
title: '优惠券管理'
|
||||
},
|
||||
name: '/coupon/index',
|
||||
path: '/coupon/index'
|
||||
},
|
||||
{
|
||||
alwaysShow: true,
|
||||
component: 'network',
|
||||
|
||||
@@ -268,19 +268,40 @@ export const constantRoutes = [{
|
||||
},
|
||||
]
|
||||
}, {
|
||||
path: '/pickupPoint',
|
||||
component: Layout,
|
||||
redirect: '/pickupPoint/index',
|
||||
children: [{
|
||||
path: '/pickupPoint/index',
|
||||
component: () =>
|
||||
import('@/views/pickupPoint/index.vue'),
|
||||
name: 'index',
|
||||
meta: {
|
||||
title: '提货点信息'
|
||||
}
|
||||
}, ]
|
||||
},
|
||||
path: '/pickupPoint',
|
||||
component: Layout,
|
||||
redirect: '/pickupPoint/index',
|
||||
children: [{
|
||||
path: '/pickupPoint/index',
|
||||
component: () =>
|
||||
import('@/views/pickupPoint/index.vue'),
|
||||
name: 'index',
|
||||
meta: {
|
||||
title: '提货点信息'
|
||||
}
|
||||
}, ]
|
||||
}, {
|
||||
path: '/coupon',
|
||||
component: Layout,
|
||||
redirect: '/coupon/index',
|
||||
children: [{
|
||||
path: '/coupon/index',
|
||||
component: () =>
|
||||
import('@/views/coupon/index.vue'),
|
||||
name: 'index',
|
||||
meta: {
|
||||
title: '优惠券管理'
|
||||
}
|
||||
},{
|
||||
path: '/coupon/add',
|
||||
component: () =>
|
||||
import('@/views/coupon/add.vue'),
|
||||
name: 'index',
|
||||
meta: {
|
||||
title: '优惠券管理'
|
||||
}
|
||||
}]
|
||||
},
|
||||
{
|
||||
path: '/network',
|
||||
component: Layout,
|
||||
|
||||
19
src/views/coupon/add.vue
Normal file
19
src/views/coupon/add.vue
Normal file
@@ -0,0 +1,19 @@
|
||||
<template>
|
||||
<coupon-detail :isEdit="false"></coupon-detail>
|
||||
</template>
|
||||
<script>
|
||||
import CouponDetail from './components/CouponDetail'
|
||||
export default {
|
||||
name: 'addCoupon',
|
||||
components: { CouponDetail },
|
||||
methods: {
|
||||
showAdd() {
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
</style>
|
||||
|
||||
|
||||
425
src/views/coupon/components/CouponDetail.vue
Normal file
425
src/views/coupon/components/CouponDetail.vue
Normal file
@@ -0,0 +1,425 @@
|
||||
<template>
|
||||
<el-card class="form-container" shadow="never">
|
||||
<el-form :model="coupon" :rules="rules" ref="couponFrom" label-width="150px" size="small">
|
||||
<el-form-item label="优惠券类型：">
|
||||
<span>全场赠券</span>
|
||||
</el-form-item>
|
||||
<el-form-item label="优惠券名称：" prop="name">
|
||||
<el-input v-model="coupon.name" class="input-width"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="适用平台：">
|
||||
|
||||
<span>全平台</span>
|
||||
</el-form-item>
|
||||
<el-form-item label="总发行量：" prop="publishCount">
|
||||
<el-input v-model.number="coupon.publishCount" placeholder="只能输入正整数" class="input-width"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="面额：" prop="amount">
|
||||
<el-input v-model="coupon.amount" @keyup.native="coupon.amount = UpNumber(coupon.amount,2)"
|
||||
placeholder="面值只能是数值，限2位小数" class="input-width">
|
||||
<template slot="append">元</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="每人限领：">
|
||||
<el-input v-model="coupon.perLimit" placeholder="只能输入正整数" class="input-width">
|
||||
<template slot="append">张</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="使用门槛：" prop="minPoint">
|
||||
<el-input v-model.number="coupon.minPoint" placeholder="只能输入正整数" class="input-width">
|
||||
<template slot="prepend">满</template>
|
||||
<template slot="append">元可用</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="有效期：">
|
||||
<el-date-picker type="datetime" placeholder="选择日期" v-model="coupon.startTime" default-time="00:00:00"
|
||||
style="width:200px">
|
||||
</el-date-picker>
|
||||
<span style="margin-left:5px;margin-right: 5px">至</span>
|
||||
<el-date-picker type="datetime" placeholder="选择日期" v-model="coupon.endTime" default-time="23:59:59"
|
||||
style="width: 200px">
|
||||
</el-date-picker>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="可使用商品：">
|
||||
<el-radio-group v-model="coupon.useType">
|
||||
<el-radio-button :label="0">全场通用</el-radio-button>
|
||||
<el-radio-button :label="1">指定分类</el-radio-button>
|
||||
<el-radio-button :label="2">指定商品</el-radio-button>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item v-show="coupon.useType===1">
|
||||
<el-cascader clearable placeholder="请选择分类名称" v-model="selectProductCate" :options="productCateOptions">
|
||||
</el-cascader>
|
||||
<el-button @click="handleAddProductCategoryRelation()">添加</el-button>
|
||||
<el-table ref="productCateRelationTable" :data="coupon.productCategoryRelationList"
|
||||
style="width: 100%;margin-top: 20px" border>
|
||||
<el-table-column label="分类名称" align="center">
|
||||
<template
|
||||
slot-scope="scope">{{scope.row.parentCategoryName}}>{{scope.row.productCategoryName}}</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" align="center" width="100">
|
||||
<template slot-scope="scope">
|
||||
<el-button size="mini" type="text"
|
||||
@click="handleDeleteProductCateRelation(scope.$index, scope.row)">删除
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-form-item>
|
||||
<el-form-item v-show="coupon.useType===2">
|
||||
<el-select v-model="selectProduct" filterable remote reserve-keyword placeholder="商品名称/商品货号"
|
||||
:remote-method="searchProductMethod" :loading="selectProductLoading">
|
||||
<el-option v-for="item in selectProductOptions" :key="item.productId" :label="item.productName"
|
||||
:value="item.productId">
|
||||
<span style="float: left">{{ item.productName }}</span>
|
||||
<span style="float: right; color: #8492a6; font-size: 13px">NO.{{ item.productSn }}</span>
|
||||
</el-option>
|
||||
</el-select>
|
||||
<el-button @click="handleAddProductRelation()">添加</el-button>
|
||||
<el-table ref="productRelationTable" :data="coupon.productRelationList"
|
||||
style="width: 100%;margin-top: 20px" border>
|
||||
<el-table-column label="商品名称" align="center">
|
||||
<template slot-scope="scope">{{scope.row.productName}}</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="货号" align="center" width="120">
|
||||
<template slot-scope="scope">NO.{{scope.row.productSn}}</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" align="center" width="100">
|
||||
<template slot-scope="scope">
|
||||
<el-button size="mini" type="text"
|
||||
@click="handleDeleteProductRelation(scope.$index, scope.row)">删除
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-form-item>
|
||||
<el-form-item label="备注：">
|
||||
<el-input class="input-width" type="textarea" :rows="5" placeholder="请输入内容" v-model="coupon.note">
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="onSubmit('couponFrom')">提交</el-button>
|
||||
<el-button v-if="!isEdit" @click="resetForm('couponFrom')">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-card>
|
||||
</template>
|
||||
<script>
|
||||
import {
|
||||
createCoupon,
|
||||
getCoupon,
|
||||
updateCoupon
|
||||
} from '@/api/coupon/coupon';
|
||||
import {
|
||||
fetchSimpleList as fetchProductList,
|
||||
simpleProductList as simpleProductList
|
||||
} from '@/api/product';
|
||||
import {
|
||||
fetchListWithChildren
|
||||
} from '@/api/productCate'
|
||||
const defaultCoupon = {
|
||||
type: 0,
|
||||
name: null,
|
||||
platform: 0,
|
||||
amount: null,
|
||||
perLimit: 1,
|
||||
minPoint: null,
|
||||
startTime: null,
|
||||
endTime: null,
|
||||
useType: 0,
|
||||
note: null,
|
||||
publishCount: null,
|
||||
productRelationList: [],
|
||||
productCategoryRelationList: []
|
||||
};
|
||||
const defaultTypeOptions = [{
|
||||
label: '全场赠券',
|
||||
value: 0
|
||||
},
|
||||
{
|
||||
label: '会员赠券',
|
||||
value: 1
|
||||
},
|
||||
{
|
||||
label: '购物赠券',
|
||||
value: 2
|
||||
},
|
||||
{
|
||||
label: '注册赠券',
|
||||
value: 3
|
||||
}
|
||||
];
|
||||
const defaultPlatformOptions = [{
|
||||
label: '全平台',
|
||||
value: 0
|
||||
},
|
||||
{
|
||||
label: '移动平台',
|
||||
value: 1
|
||||
},
|
||||
{
|
||||
label: 'PC平台',
|
||||
value: 2
|
||||
}
|
||||
];
|
||||
var validatePrice = (rule, value, callback) => {
|
||||
if (!value) {
|
||||
callback(new Error("面额不能为空"));
|
||||
} else if (value.split(".").length > 2) {
|
||||
callback(new Error("请输入正确格式的金额")); //防止输入多个小数点
|
||||
}
|
||||
// else if (value > add_Com.Retail_Price) {
|
||||
// callback(new Error("金额不能大于零售价"));
|
||||
// }
|
||||
else {
|
||||
value = Math.round(value * Math.pow(10, 2)) / Math.pow(10, 2); //四舍五入
|
||||
value = Number(value).toFixed(2); //不足补位
|
||||
this.add_Com.Cost_Price = value;
|
||||
callback();
|
||||
}
|
||||
};
|
||||
|
||||
export default {
|
||||
name: 'CouponDetail',
|
||||
props: {
|
||||
isEdit: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
coupon: Object.assign({}, defaultCoupon),
|
||||
typeOptions: Object.assign({}, defaultTypeOptions),
|
||||
platformOptions: Object.assign({}, defaultPlatformOptions),
|
||||
rules: {
|
||||
name: [{
|
||||
required: true,
|
||||
message: '请输入优惠券名称',
|
||||
trigger: 'blur'
|
||||
},
|
||||
{
|
||||
min: 2,
|
||||
max: 140,
|
||||
message: '长度在 2 到 140 个字符',
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
publishCount: [{
|
||||
type: 'number',
|
||||
required: true,
|
||||
message: '只能输入正整数',
|
||||
trigger: 'blur'
|
||||
}],
|
||||
amount: [{
|
||||
|
||||
required: true,
|
||||
message: '面值只能是数值，0.01-10000，限2位小数',
|
||||
trigger: 'blur'
|
||||
}],
|
||||
minPoint: [{
|
||||
type: 'number',
|
||||
required: true,
|
||||
message: '只能输入正整数',
|
||||
trigger: 'blur'
|
||||
}]
|
||||
},
|
||||
selectProduct: null,
|
||||
selectProductLoading: false,
|
||||
selectProductOptions: [],
|
||||
selectProductCate: null,
|
||||
productCateOptions: []
|
||||
}
|
||||
},
|
||||
created() {
|
||||
if (this.isEdit) {
|
||||
getCoupon(this.$route.query.id).then(response => {
|
||||
this.coupon = response.data;
|
||||
});
|
||||
}
|
||||
this.getProductCateList();
|
||||
},
|
||||
methods: {
|
||||
dateChange(val) {
|
||||
|
||||
console.log("val", val)
|
||||
},
|
||||
UpNumber(val, limit = 2) {
|
||||
val = val.replace(/[^\d.]/g, '') // 保留数字
|
||||
val = val.replace(/^00/, '0.') // 开头不能有两个0
|
||||
val = val.replace(/^\./g, '0.') // 开头为小数点转换为0.
|
||||
val = val.replace(/\.{2,}/g, '.') // 两个以上的小数点转换成一个
|
||||
val = val.replace('.', '$#$').replace(/\./g, '').replace('$#$', '.'); // 只保留一个小数点
|
||||
/^0\d+/.test(val) ? val = val.slice(1) : '' // 两位以上数字开头不能为0
|
||||
const str = '^(\\d+)\\.(\\d{' + limit + '}).*$'
|
||||
const reg = new RegExp(str)
|
||||
if (limit === 0) {
|
||||
// 不需要小数点
|
||||
val = val.replace(reg, '$1')
|
||||
} else {
|
||||
// 通过正则保留小数点后指定的位数
|
||||
val = val.replace(reg, '$1.$2')
|
||||
}
|
||||
return val
|
||||
},
|
||||
onSubmit(formName) {
|
||||
this.$refs[formName].validate((valid) => {
|
||||
if (valid) {
|
||||
if(parseFloat(this.coupon.amount)>=parseFloat(this.coupon.minPoint)){
|
||||
this.$message({
|
||||
message: '优惠券面值金额须小于使用门槛金额',
|
||||
type: 'error',
|
||||
duration: 1000
|
||||
});
|
||||
return false;
|
||||
}
|
||||
|
||||
this.$confirm('是否提交数据', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
if (this.isEdit) {
|
||||
updateCoupon(this.$route.query.id, this.coupon).then(response => {
|
||||
this.$refs[formName].resetFields();
|
||||
this.$message({
|
||||
message: '修改成功',
|
||||
type: 'success',
|
||||
duration: 1000
|
||||
});
|
||||
this.$router.back();
|
||||
});
|
||||
} else {
|
||||
createCoupon(this.coupon).then(response => {
|
||||
this.$refs[formName].resetFields();
|
||||
this.$message({
|
||||
message: '提交成功',
|
||||
type: 'success',
|
||||
duration: 1000
|
||||
});
|
||||
this.$router.back();
|
||||
});
|
||||
}
|
||||
});
|
||||
} else {
|
||||
this.$message({
|
||||
message: '验证失败',
|
||||
type: 'error',
|
||||
duration: 1000
|
||||
});
|
||||
return false;
|
||||
}
|
||||
});
|
||||
},
|
||||
resetForm(formName) {
|
||||
this.$refs[formName].resetFields();
|
||||
this.coupon = Object.assign({}, defaultCoupon);
|
||||
},
|
||||
searchProductMethod(query) {
|
||||
if (query !== '') {
|
||||
this.loading = true;
|
||||
simpleProductList({
|
||||
keyword: query
|
||||
}).then(response => {
|
||||
this.loading = false;
|
||||
let productList = response.data;
|
||||
this.selectProductOptions = [];
|
||||
for (let i = 0; i < productList.length; i++) {
|
||||
let item = productList[i];
|
||||
this.selectProductOptions.push({
|
||||
productId: item.id,
|
||||
productName: item.name,
|
||||
productSn: item.productSn
|
||||
});
|
||||
}
|
||||
});
|
||||
} else {
|
||||
this.selectProductOptions = [];
|
||||
}
|
||||
},
|
||||
handleAddProductRelation() {
|
||||
if (this.selectProduct === null) {
|
||||
this.$message({
|
||||
message: '请先选择商品',
|
||||
type: 'warning'
|
||||
});
|
||||
return
|
||||
}
|
||||
this.coupon.productRelationList.push(this.getProductById(this.selectProduct));
|
||||
this.selectProduct = null;
|
||||
},
|
||||
handleDeleteProductRelation(index, row) {
|
||||
this.coupon.productRelationList.splice(index, 1);
|
||||
},
|
||||
handleAddProductCategoryRelation() {
|
||||
if (this.selectProductCate === null || this.selectProductCate.length === 0) {
|
||||
this.$message({
|
||||
message: '请先选择商品分类',
|
||||
type: 'warning'
|
||||
});
|
||||
return
|
||||
}
|
||||
this.coupon.productCategoryRelationList.push(this.getProductCateByIds(this.selectProductCate));
|
||||
this.selectProductCate = [];
|
||||
},
|
||||
handleDeleteProductCateRelation(index, row) {
|
||||
this.coupon.productCategoryRelationList.splice(index, 1);
|
||||
},
|
||||
getProductById(id) {
|
||||
for (let i = 0; i < this.selectProductOptions.length; i++) {
|
||||
if (id === this.selectProductOptions[i].productId) {
|
||||
return this.selectProductOptions[i];
|
||||
}
|
||||
}
|
||||
return null;
|
||||
},
|
||||
getProductCateList() {
|
||||
fetchListWithChildren().then(response => {
|
||||
let list = response.data;
|
||||
this.productCateOptions = [];
|
||||
for (let i = 0; i < list.length; i++) {
|
||||
let children = [];
|
||||
if (list[i].children != null && list[i].children.length > 0) {
|
||||
for (let j = 0; j < list[i].children.length; j++) {
|
||||
children.push({
|
||||
label: list[i].children[j].name,
|
||||
value: list[i].children[j].id
|
||||
});
|
||||
}
|
||||
}
|
||||
this.productCateOptions.push({
|
||||
label: list[i].name,
|
||||
value: list[i].id,
|
||||
children: children
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
getProductCateByIds(ids) {
|
||||
let name;
|
||||
let parentName;
|
||||
for (let i = 0; i < this.productCateOptions.length; i++) {
|
||||
if (this.productCateOptions[i].value === ids[0]) {
|
||||
parentName = this.productCateOptions[i].label;
|
||||
for (let j = 0; j < this.productCateOptions[i].children.length; j++) {
|
||||
if (this.productCateOptions[i].children[j].value === ids[1]) {
|
||||
name = this.productCateOptions[i].children[j].label;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
return {
|
||||
productCategoryId: ids[1],
|
||||
productCategoryName: name,
|
||||
parentCategoryName: parentName
|
||||
};
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.input-width {
|
||||
width: 60%;
|
||||
}
|
||||
</style>
|
||||
314
src/views/coupon/history.vue
Normal file
314
src/views/coupon/history.vue
Normal file
@@ -0,0 +1,314 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<div class="table-layout">
|
||||
<el-row>
|
||||
<el-col :span="4" class="table-cell-title">名称</el-col>
|
||||
<el-col :span="4" class="table-cell-title">优惠券类型</el-col>
|
||||
<el-col :span="4" class="table-cell-title">可使用商品</el-col>
|
||||
<el-col :span="4" class="table-cell-title">使用门槛</el-col>
|
||||
<el-col :span="4" class="table-cell-title">面值</el-col>
|
||||
<el-col :span="4" class="table-cell-title">状态</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="4" class="table-cell">{{coupon.name}}</el-col>
|
||||
<el-col :span="4" class="table-cell">{{coupon.type | formatType}}</el-col>
|
||||
<el-col :span="4" class="table-cell">{{coupon.useType | formatUseType}}</el-col>
|
||||
<el-col :span="4" class="table-cell">满{{coupon.minPoint}}元可用</el-col>
|
||||
<el-col :span="4" class="table-cell">{{coupon.amount}}元</el-col>
|
||||
<el-col :span="4" class="table-cell">{{coupon.endTime | formatStatus}}</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="4" class="table-cell-title">有效期</el-col>
|
||||
<el-col :span="4" class="table-cell-title">总发行量</el-col>
|
||||
<el-col :span="4" class="table-cell-title">已领取</el-col>
|
||||
<el-col :span="4" class="table-cell-title">待领取</el-col>
|
||||
<el-col :span="4" class="table-cell-title">已使用</el-col>
|
||||
<el-col :span="4" class="table-cell-title">未使用</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="4" class="table-cell" style="font-size: 13px">
|
||||
{{coupon.startTime|formatDate}}至{{coupon.endTime|formatDate}}
|
||||
</el-col>
|
||||
<el-col :span="4" class="table-cell">{{coupon.publishCount}}</el-col>
|
||||
<el-col :span="4" class="table-cell">{{coupon.receiveCount}}</el-col>
|
||||
<el-col :span="4" class="table-cell">{{coupon.publishCount-coupon.receiveCount}}</el-col>
|
||||
<el-col :span="4" class="table-cell">{{coupon.useCount}}</el-col>
|
||||
<el-col :span="4" class="table-cell">{{coupon.publishCount-coupon.useCount}}</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
<el-card class="filter-container" shadow="never">
|
||||
<div>
|
||||
<i class="el-icon-search"></i>
|
||||
<span>筛选搜索</span>
|
||||
<el-button
|
||||
style="float:right"
|
||||
type="primary"
|
||||
@click="handleSearchList()"
|
||||
size="small">
|
||||
查询搜索
|
||||
</el-button>
|
||||
<el-button
|
||||
style="float:right;margin-right: 15px"
|
||||
@click="handleResetSearch()"
|
||||
size="small">
|
||||
重置
|
||||
</el-button>
|
||||
</div>
|
||||
<div style="margin-top: 15px">
|
||||
<el-form :inline="true" :model="listQuery" size="small" label-width="140px">
|
||||
<el-form-item label="使用状态：">
|
||||
<el-select v-model="listQuery.useStatus" placeholder="全部" clearable class="input-width">
|
||||
<el-option v-for="item in useTypeOptions"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="订单编号：">
|
||||
<el-input v-model="listQuery.orderSn" class="input-width" placeholder="订单编号"></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</el-card>
|
||||
<div class="table-container">
|
||||
<el-table ref="couponHistoryTable"
|
||||
:data="list"
|
||||
style="width: 100%;"
|
||||
v-loading="listLoading" border>
|
||||
<el-table-column label="优惠码" width="160" align="center">
|
||||
<template slot-scope="scope">{{scope.row.couponCode}}</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="领取会员" width="140" align="center">
|
||||
<template slot-scope="scope">{{scope.row.memberNickname}}</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="领取方式" width="100" align="center">
|
||||
<template slot-scope="scope">{{scope.row.getType | formatGetType}}</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="领取时间" width="160" align="center">
|
||||
<template slot-scope="scope">{{scope.row.createTime | formatTime}}</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="当前状态" width="140" align="center">
|
||||
<template slot-scope="scope">{{scope.row.useStatus | formatCouponHistoryUseType}}</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="使用时间" width="160" align="center">
|
||||
<template slot-scope="scope">{{scope.row.useTime | formatTime}}</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="订单编号" align="center">
|
||||
<template slot-scope="scope">{{scope.row.orderSn===null?'N/A':scope.row.orderSn}}</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
<div class="pagination-container">
|
||||
<el-pagination
|
||||
background
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
layout="total, sizes,prev, pager, next,jumper"
|
||||
:current-page.sync="listQuery.pageNum"
|
||||
:page-size="listQuery.pageSize"
|
||||
:page-sizes="[5,10,15]"
|
||||
:total="total">
|
||||
</el-pagination>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import {formatDate} from '@/utils/date';
|
||||
import {getCoupon} from '@/api/coupon/coupon';
|
||||
import {fetchList as fetchCouponHistoryList} from '@/api/coupon/couponHistory';
|
||||
|
||||
const defaultTypeOptions = [
|
||||
{
|
||||
label: '全场赠券',
|
||||
value: 0
|
||||
},
|
||||
{
|
||||
label: '会员赠券',
|
||||
value: 1
|
||||
},
|
||||
{
|
||||
label: '购物赠券',
|
||||
value: 2
|
||||
},
|
||||
{
|
||||
label: '注册赠券',
|
||||
value: 3
|
||||
}
|
||||
];
|
||||
const defaultListQuery = {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
useStatus: null,
|
||||
orderSn: null,
|
||||
couponId: null
|
||||
};
|
||||
const defaultUseTypeOptions= [
|
||||
{
|
||||
label: "未使用",
|
||||
value: 0
|
||||
},
|
||||
{
|
||||
label: "已使用",
|
||||
value: 1
|
||||
},
|
||||
{
|
||||
label: "已过期",
|
||||
value: 2
|
||||
}
|
||||
];
|
||||
export default {
|
||||
name: 'couponHistoryList',
|
||||
data() {
|
||||
return {
|
||||
coupon: {},
|
||||
listQuery: Object.assign({}, defaultListQuery),
|
||||
useTypeOptions:Object.assign({},defaultUseTypeOptions),
|
||||
list:null,
|
||||
total:null,
|
||||
listLoading:false
|
||||
}
|
||||
},
|
||||
created() {
|
||||
getCoupon(this.$route.query.id).then(response => {
|
||||
this.coupon = response.data;
|
||||
});
|
||||
this.listQuery.couponId=this.$route.query.id;
|
||||
this.getList();
|
||||
},
|
||||
filters: {
|
||||
formatType(type) {
|
||||
for (let i = 0; i < defaultTypeOptions.length; i++) {
|
||||
if (type === defaultTypeOptions[i].value) {
|
||||
return defaultTypeOptions[i].label;
|
||||
}
|
||||
}
|
||||
return '';
|
||||
},
|
||||
formatUseType(useType) {
|
||||
if (useType === 0) {
|
||||
return '全场通用';
|
||||
} else if (useType === 1) {
|
||||
return '指定分类';
|
||||
} else {
|
||||
return '指定商品';
|
||||
}
|
||||
},
|
||||
formatPlatform(platform) {
|
||||
if (platform === 1) {
|
||||
return '移动平台';
|
||||
} else if (platform === 2) {
|
||||
return 'PC平台';
|
||||
} else {
|
||||
return '全平台';
|
||||
}
|
||||
},
|
||||
formatDate(time) {
|
||||
if (time == null || time === '') {
|
||||
return 'N/A';
|
||||
}
|
||||
let date = new Date(time);
|
||||
return formatDate(date, 'yyyy-MM-dd')
|
||||
},
|
||||
formatStatus(endTime){
|
||||
let now = new Date().getTime();
|
||||
let date = new Date(endTime);
|
||||
if(date.getTime()>now){
|
||||
return '未过期'
|
||||
}else{
|
||||
return '已过期';
|
||||
}
|
||||
},
|
||||
formatGetType(type) {
|
||||
if(type===1){
|
||||
return '主动获取';
|
||||
}else{
|
||||
return '后台赠送';
|
||||
}
|
||||
},
|
||||
formatCouponHistoryUseType(useType) {
|
||||
if (useType === 0) {
|
||||
return '未使用';
|
||||
} else if (useType === 1) {
|
||||
return '已使用';
|
||||
} else {
|
||||
return '已过期';
|
||||
}
|
||||
},
|
||||
formatTime(time) {
|
||||
if (time == null || time === '') {
|
||||
return 'N/A';
|
||||
}
|
||||
let date = new Date(time);
|
||||
return formatDate(date, 'yyyy-MM-dd hh:mm:ss')
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
getList(){
|
||||
this.listLoading=true;
|
||||
fetchCouponHistoryList(this.listQuery).then(response=>{
|
||||
this.listLoading=false;
|
||||
this.list=response.data.records;
|
||||
this.total=response.data.total;
|
||||
});
|
||||
},
|
||||
handleResetSearch() {
|
||||
this.listQuery = Object.assign({}, defaultListQuery);
|
||||
this.listQuery.couponId=this.$route.query.id;
|
||||
},
|
||||
handleSearchList() {
|
||||
this.listQuery.pageNum = 1;
|
||||
this.getList();
|
||||
},
|
||||
handleSizeChange(val) {
|
||||
this.listQuery.pageNum = 1;
|
||||
this.listQuery.pageSize = val;
|
||||
this.getList();
|
||||
},
|
||||
handleCurrentChange(val) {
|
||||
this.listQuery.pageNum = val;
|
||||
this.getList();
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.app-container {
|
||||
width: 80%;
|
||||
margin: 20px auto;
|
||||
}
|
||||
|
||||
.filter-container {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.table-layout {
|
||||
margin-top: 20px;
|
||||
border-left: 1px solid #DCDFE6;
|
||||
border-top: 1px solid #DCDFE6;
|
||||
}
|
||||
|
||||
.table-cell {
|
||||
height: 60px;
|
||||
line-height: 40px;
|
||||
border-right: 1px solid #DCDFE6;
|
||||
border-bottom: 1px solid #DCDFE6;
|
||||
padding: 10px;
|
||||
font-size: 14px;
|
||||
color: #606266;
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.table-cell-title {
|
||||
border-right: 1px solid #DCDFE6;
|
||||
border-bottom: 1px solid #DCDFE6;
|
||||
padding: 10px;
|
||||
background: #F2F6FC;
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
color: #303133;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
275
src/views/coupon/index.vue
Normal file
275
src/views/coupon/index.vue
Normal file
@@ -0,0 +1,275 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<div v-show="viewState == 1" >
|
||||
<el-card class="filter-container" shadow="never">
|
||||
<div >
|
||||
<i class="el-icon-search"></i>
|
||||
<span>筛选搜索</span>
|
||||
<el-button
|
||||
style="float:right"
|
||||
type="primary"
|
||||
@click="handleSearchList()"
|
||||
size="small">
|
||||
查询搜索
|
||||
</el-button>
|
||||
<el-button
|
||||
style="float:right;margin-right: 15px"
|
||||
@click="handleResetSearch()"
|
||||
size="small">
|
||||
重置
|
||||
</el-button>
|
||||
</div>
|
||||
<div style="margin-top: 15px">
|
||||
<el-form :inline="true" :model="listQuery" size="small" label-width="140px">
|
||||
<el-form-item label="优惠券名称：">
|
||||
<el-input v-model="listQuery.name" class="input-width" placeholder="优惠券名称"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="优惠券类型：">
|
||||
<el-select v-model="listQuery.type" placeholder="全部" clearable class="input-width">
|
||||
<el-option v-for="item in typeOptions"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</el-card>
|
||||
<el-card class="operate-container" shadow="never">
|
||||
<i class="el-icon-tickets"></i>
|
||||
<span>数据列表</span>
|
||||
<el-button size="mini" class="btn-add" @click="handleAdd()">添加</el-button>
|
||||
</el-card>
|
||||
<div class="table-container">
|
||||
<el-table ref="couponTable"
|
||||
:data="list"
|
||||
style="width: 100%;"
|
||||
@selection-change="handleSelectionChange"
|
||||
v-loading="listLoading" border>
|
||||
<el-table-column type="selection" width="60" align="center"></el-table-column>
|
||||
<el-table-column label="编号" width="100" align="center">
|
||||
<template slot-scope="scope">{{scope.row.id}}</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="优惠劵名称" align="center">
|
||||
<template slot-scope="scope">{{scope.row.name}}</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="优惠券类型" width="100" align="center">
|
||||
<template slot-scope="scope">{{scope.row.type | formatType}}</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="可使用商品" width="100" align="center">
|
||||
<template slot-scope="scope">{{scope.row.useType | formatUseType}}</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="使用门槛" width="140" align="center">
|
||||
<template slot-scope="scope">满{{scope.row.minPoint}}元可用</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="面值" width="100" align="center">
|
||||
<template slot-scope="scope">{{scope.row.amount}}元</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="适用平台" width="100" align="center">
|
||||
<template slot-scope="scope">{{scope.row.platform | formatPlatform}}</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="有效期" width="180" align="center">
|
||||
<template slot-scope="scope">{{scope.row.startTime|formatDate}}至{{scope.row.endTime|formatDate}}</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="状态" width="100" align="center">
|
||||
<template slot-scope="scope">{{scope.row.endTime | formatStatus}}</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" width="180" align="center">
|
||||
<template slot-scope="scope">
|
||||
<el-button size="mini"
|
||||
type="text"
|
||||
@click="handleView(scope.$index, scope.row)">查看</el-button>
|
||||
<el-button size="mini"
|
||||
type="text"
|
||||
@click="handleUpdate(scope.$index, scope.row)">
|
||||
编辑</el-button>
|
||||
<el-button size="mini"
|
||||
type="text"
|
||||
@click="handleDelete(scope.$index, scope.row)">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
<div class="pagination-container">
|
||||
<el-pagination
|
||||
background
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
layout="total, sizes,prev, pager, next,jumper"
|
||||
:current-page.sync="listQuery.pageNum"
|
||||
:page-size="listQuery.pageSize"
|
||||
:page-sizes="[5,10,15]"
|
||||
:total="total">
|
||||
</el-pagination>
|
||||
</div>
|
||||
</div>
|
||||
<divAdd v-show="viewState == 2|| viewState ==3" ref="divadd" @doback="resetState" @reloadlist="loadList" />
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import {fetchList,deleteCoupon} from '@/api/coupon/coupon';
|
||||
import {formatDate} from '@/utils/date';
|
||||
import divAdd from './add.vue'
|
||||
import ButtonBar from '@/components/ButtonBar'
|
||||
import Pagination from '@/components/pagination'
|
||||
import pageye from '@/components/pagination/pageye'
|
||||
const defaultListQuery = {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
name: null,
|
||||
type: null
|
||||
};
|
||||
const defaultTypeOptions=[
|
||||
{
|
||||
label: '全场赠券',
|
||||
value: 0
|
||||
},
|
||||
{
|
||||
label: '会员赠券',
|
||||
value: 1
|
||||
},
|
||||
{
|
||||
label: '购物赠券',
|
||||
value: 2
|
||||
},
|
||||
{
|
||||
label: '注册赠券',
|
||||
value: 3
|
||||
}
|
||||
];
|
||||
export default {
|
||||
name:'couponList',
|
||||
components: {
|
||||
divAdd
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
viewState: 1, // 1、列表 2、添加 3、修改 4、查看
|
||||
listQuery:Object.assign({},defaultListQuery),
|
||||
typeOptions:Object.assign({},defaultTypeOptions),
|
||||
list:null,
|
||||
total:null,
|
||||
listLoading:false,
|
||||
multipleSelection:[]
|
||||
}
|
||||
},
|
||||
created(){
|
||||
this.getList();
|
||||
},
|
||||
filters:{
|
||||
formatType(type){
|
||||
for(let i=0;i<defaultTypeOptions.length;i++){
|
||||
if(type===defaultTypeOptions[i].value){
|
||||
return defaultTypeOptions[i].label;
|
||||
}
|
||||
}
|
||||
return '';
|
||||
},
|
||||
formatUseType(useType){
|
||||
if(useType===0){
|
||||
return '全场通用';
|
||||
}else if(useType===1){
|
||||
return '指定分类';
|
||||
}else{
|
||||
return '指定商品';
|
||||
}
|
||||
},
|
||||
formatPlatform(platform){
|
||||
if(platform===1){
|
||||
return '移动平台';
|
||||
}else if(platform===2){
|
||||
return 'PC平台';
|
||||
}else{
|
||||
return '全平台';
|
||||
}
|
||||
},
|
||||
formatDate(time){
|
||||
if(time==null||time===''){
|
||||
return 'N/A';
|
||||
}
|
||||
let date = new Date(time);
|
||||
return formatDate(date, 'yyyy-MM-dd')
|
||||
},
|
||||
formatStatus(endTime){
|
||||
let now = new Date().getTime();
|
||||
let date = new Date(endTime);
|
||||
if(date.getTime()>now){
|
||||
return '未过期'
|
||||
}else{
|
||||
return '已过期';
|
||||
}
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
loadList() {
|
||||
this.listQuery.pageNum = 1;
|
||||
this.getList();
|
||||
},
|
||||
resetState() {
|
||||
this.viewState = 1
|
||||
},
|
||||
handleResetSearch() {
|
||||
this.listQuery = Object.assign({}, defaultListQuery);
|
||||
},
|
||||
handleSearchList() {
|
||||
this.listQuery.pageNum = 1;
|
||||
this.getList();
|
||||
},
|
||||
handleSelectionChange(val){
|
||||
this.multipleSelection = val;
|
||||
},
|
||||
handleSizeChange(val) {
|
||||
this.listQuery.pageNum = 1;
|
||||
this.listQuery.pageSize = val;
|
||||
this.getList();
|
||||
},
|
||||
handleCurrentChange(val) {
|
||||
this.listQuery.pageNum = val;
|
||||
this.getList();
|
||||
},
|
||||
handleAdd(){
|
||||
this.viewState = 2
|
||||
this.$refs['divadd'].showAdd()
|
||||
// this.$router.push({path: '/sms/addCoupon'})
|
||||
},
|
||||
handleView(index, row) {
|
||||
this.$router.push({path: '/sms/couponHistory', query: {id: row.id}})
|
||||
},
|
||||
handleUpdate(index, row) {
|
||||
this.$router.push({path: '/sms/updateCoupon', query: {id: row.id}})
|
||||
},
|
||||
handleDelete(index, row) {
|
||||
this.$confirm('是否进行删除操作?', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
deleteCoupon(row.id).then(response=>{
|
||||
this.$message({
|
||||
type: 'success',
|
||||
message: '删除成功!'
|
||||
});
|
||||
this.getList();
|
||||
});
|
||||
})
|
||||
},
|
||||
getList(){
|
||||
this.listLoading=true;
|
||||
fetchList(this.listQuery).then(response=>{
|
||||
this.listLoading = false;
|
||||
this.list = response.data.records;
|
||||
this.total = response.data.total;
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.input-width {
|
||||
width: 203px;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
14
src/views/coupon/update.vue
Normal file
14
src/views/coupon/update.vue
Normal file
@@ -0,0 +1,14 @@
|
||||
<template>
|
||||
<coupon-detail :isEdit="true"></coupon-detail>
|
||||
</template>
|
||||
<script>
|
||||
import CouponDetail from './components/CouponDetail'
|
||||
export default {
|
||||
name: 'updateCoupon',
|
||||
components: { CouponDetail }
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
</style>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user