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