djz236@163.com
1 year ago
10 changed files with 1144 additions and 13 deletions
@ -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', |
|||
}) |
|||
} |
|||
@ -0,0 +1,8 @@ |
|||
import request from '@/utils/request' |
|||
export function fetchList(params) { |
|||
return request({ |
|||
url:'/sms/SmsCouponHistory/list', |
|||
method:'get', |
|||
params:params |
|||
}) |
|||
} |
|||
@ -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> |
|||
|
|||
|
|||
@ -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> |
|||
@ -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> |
|||
|
|||
|
|||
@ -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> |
|||
|
|||
|
|||
@ -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> |
|||
|
|||
|
|||
Loading…
Reference in new issue