文件

660 行
29 KiB
HTML
可执行文件

此文件含有模棱两可的 Unicode 字符

此文件含有可能会与其他字符混淆的 Unicode 字符。 如果您是想特意这样的,可以安全地忽略该警告。 使用 Escape 按钮显示他们。

<!DOCTYPE html>
<html>
<!--[1.4.13]-->
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<link rel="stylesheet" type="text/css" href="__PUBLIC__/vue/element-ui.2.8.2.css">
<link rel="stylesheet" type="text/css" href="__PUBLIC__/vue/element-ui.css">
<link rel="stylesheet" type="text/css" href="__PUBLIC__/Retail/css/myscroll.css"/>
<link rel="stylesheet" type="text/css" href="__PUBLIC__/css/common-upload.css">
<script type="text/javascript" charset="utf-8" src="__PUBLIC__/vue/js/vue2.5.16.js"></script>
<script type="text/javascript" charset="utf-8" src="__PUBLIC__/vue/element-ui.2.8.2.js"></script>
<script type="text/javascript" charset="utf-8" src="__PUBLIC__/vue/element-ui.js"></script>
<title>添加红包</title>
<style>
[v-cloak] {
display: none;
}
th .cell,td .cell,.cell .el-input__inner {
text-align: center;
}
.submit-btn-box {
margin-left: 100px;
}
.tips {
font-size: 12px;
color: #999999;
}
.el-dialog__body {
padding: 0 20px !important;
}
.el-tabs__nav-wrap::after {
content: none !important;
}
.el-tabs__active-bar {
background-color: transparent !important;
}
.el-tabs__header {
margin: 0px !important;
}
.el-date-editor .el-range__icon {
line-height: 21px !important;
}
.el-tabs {
width: 145%;
}
</style>
</head>
<body>
<div id="app" v-cloak>
<el-form label-width="120px">
<!-- 活动类型 -->
<el-divider content-position="left">活动类型</el-divider>
<el-form-item label="选择类型">
<el-radio-group v-model="scene_type" @change="changeActType">
<el-radio :label="1">公众号通知栏</el-radio>
<el-radio :label="2">线下支付</el-radio>
<el-radio :label="3">小程序商城</el-radio>
<el-radio :label="4">线上支付</el-radio>
</el-radio-group>
</el-form-item>
<!-- 活动设置 start -->
<el-divider content-position="left">活动设置</el-divider>
<el-form-item label="活动名称">
<el-input style="width: 330px;"
type="text"
size="small"
placeholder="请输入活动名称"
v-model="active_name"
maxlength="20"
clearable></el-input>
</el-form-item>
<el-form-item label="红包类型">
<el-radio-group v-model="price_type">
<el-radio :label="1">固定金额</el-radio>
<el-radio :label="2">随机金额</el-radio>
<el-radio :label="3">梯度金额</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="活动时间">
<el-date-picker v-model="act_range_time"
size="small"
type="daterange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="截至日期"
value-format="yyyy-MM-dd">
</el-date-picker>
</el-form-item>
<!-- 固定金额 -->
<!-- oninput="value=value.replace(/^(\-)*(\d+)\.(\d\d\d).*$/,'$1$2.$3')" -->
<template v-if="price_type==1">
<el-form-item label="固定红包金额">
<el-input style="width: 330px;"
type="text"
size="small"
placeholder="请输入固定红包金额"
v-model='fixed_money'
oninput="value=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')"
maxlength="10"
clearable></el-input>
</el-form-item>
<el-form-item label="红包数量">
<el-input style="width: 330px;"
type="text"
size="small"
placeholder="请输入红包总数量"
v-model="number"
oninput="value=value.replace(/[^\d]/g,'')"
maxlength="20" clearable></el-input>
</el-form-item>
</template>
<!-- 随机金额 -->
<template v-if="price_type==2">
<el-form-item label="最小金额">
<el-input style="width: 330px;"
type="text"
size="small"
placeholder="请输入单次最小金额"
oninput="value=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')"
v-model="min_money"
maxlength="20"
clearable></el-input>
</el-form-item>
<el-form-item label="最大金额">
<el-input style="width: 330px;"
type="text"
size="small"
placeholder="请输入单次最大金额"
oninput="value=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')"
v-model="max_money"
maxlength="20"
clearable></el-input>
</el-form-item>
<el-form-item label="红包总数">
<el-radio-group v-model="number_restrict_state">
<el-radio :label="1">不限制数量</el-radio>
<el-radio :label="2">限制数量</el-radio>
</el-radio-group>
<div v-if="number_restrict_state==2">
<el-input style="width: 330px;"
size="small"
placeholder="请输入红包总数量"
type="text"
v-model="number"
maxlength="20"
oninput="value=value.replace(/[^\d]/g,'')"
clearable></el-input>
</div>
</el-form-item>
</template>
<!-- 梯度金额 -->
<template v-if="price_type==3">
<el-form-item label="梯度设置">
<div>
<el-button size="small" type="primary" plain @click='addGroup'>添加</el-button>
<el-button size="small" @click='delGroup'>删除</el-button>
<div class="tips">注意:至少设置3种梯度,最多设置8种梯度!不能出现交错梯度,梯度请按照从小到大顺序添加</div>
</div>
<el-table :data="groupList" style="width: 500px;" border>
<el-table-column type="index" width="60px" label="梯度">
</el-table-column>
<el-table-column prop="min" label="最低金额" center>
<template slot-scope="scope">
<el-input v-model="scope.row.min"
type="text"
size="small"
oninput="value=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')"
maxlength="9"></el-input>
</template>
</el-table-column>
<el-table-column prop="max" label="最高金额" center>
<template slot-scope="scope">
<el-input v-model="scope.row.max"
type="text"
size="small"
oninput="value=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')"
maxlength="9"></el-input>
</template>
</el-table-column>
<el-table-column prop="num" label="红包数量" center>
<template slot-scope="scope">
<el-input v-model="scope.row.num"
type="text"
size="small"
oninput="value=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')"
maxlength="9"></el-input>
</template>
</el-table-column>
</el-table>
</el-form-item>
</template>
<!-- 线下线上支付 -->
<template v-if="scene_type==2||scene_type==4">
<el-form-item label="消费金额">
<el-input style="width: 330px;"
type="text"
size="small"
placeholder="请输入消费金额"
v-model="need_money"
oninput="value=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')"
maxlength="20"
clearable></el-input>
<div class="tips">会员在小程序商城消费多少钱能够参加红包活动</div>
</el-form-item>
</template>
<!-- 小程序商城 -->
<template>
<el-form-item v-if="scene_type==2||scene_type==3||scene_type==4" label="活动门店">
<el-radio-group v-model="store_restrict_state">
<el-radio :label="0">不限制门店</el-radio>
<el-radio :label="1">限制门店</el-radio>
</el-radio-group>
<div v-show="store_restrict_state==1">
<el-select v-model="choose_store" size="small" multiple placeholder="请选择">
<el-option v-for="item in storeList"
:key="item.id"
:label="item.store_name"
:value="item.id">
</el-option>
</el-select>
<div class="tips">注意:限制的是参与门店的活动,不是会员所属门店!</div>
</div>
</el-form-item>
<el-form-item v-if="scene_type==3" label="非会员获得机会">
<el-switch
v-model="is_vip"
@change="grade_restrict_state=is_vip==0?0:grade_restrict_state"
inactive-value="1"
active-value="0"></el-switch>
<div class="tips">开启则非会员也能获得机会,领取前仍需注册会员</div>
</el-form-item>
<el-form-item v-if="(scene_type==2||scene_type==3||scene_type==4) && is_vip==1" label="会员等级限制">
<el-radio-group v-model="grade_restrict_state">
<el-radio :label="0">所有等级</el-radio>
<el-radio :label="1">指定等级</el-radio>
</el-radio-group>
<div v-show="grade_restrict_state==1">
<el-select v-model="choose_grade" size="small" multiple placeholder="请选择参加活动的会员等级">
<el-option v-for="item in gradeList"
:key="item.id"
:label="item.cardname"
:value="item.id">
</el-option>
</el-select>
</div>
</el-form-item>
</template>
<el-form-item label="红包总金额" v-if="price_type==2||price_type==3">
<el-radio-group v-model="price_restrict_state">
<el-radio :label="1">不限制金额</el-radio>
<el-radio :label="2">限制金额</el-radio>
</el-radio-group>
<div v-if="price_restrict_state==2">
<el-input style="width: 330px;"
type="text"
size="small"
placeholder="请输入红包最大总发放金额"
v-model="money"
maxlength="20"
oninput="value=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')"
clearable></el-input>
</div>
</el-form-item>
<el-form-item label="每人每日上限">
<div>
<el-radio-group v-model="day_restrict_type">
<el-radio :label="0">不限制</el-radio>
<el-radio :label="1">限制数量</el-radio>
<el-radio :label="2">限制金额</el-radio>
</el-radio-group>
<div>
<el-input v-show="day_restrict_type==1"
style="width: 330px;"
type="text"
placeholder="请输入每人每日数量上限"
size="small"
v-model="day_max_time"
maxlength="20"
oninput="value=value.replace(/[^\d]/g,'')"
clearable></el-input>
<el-input v-show="day_restrict_type==2"
style="width: 330px;"
type="text"
size="small"
placeholder="请输入每人每日金额上限"
v-model="day_max_money"
maxlength="20"
oninput="value=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')"
clearable></el-input>
</div>
</div>
</el-form-item>
<el-form-item label="每人总上限">
<el-input style="width: 330px;"
type="text"
size="small"
placeholder="请输入每人总数量上限"
v-model="sum_max_time"
maxlength="20"
oninput="value=value.replace(/[^\d]/g,'')"
clearable></el-input>
</el-form-item>
</el-form>
<div>
<div class="submit-btn-box">
<el-button type="primary" @click='submit'>提交</el-button>
</div>
</div>
</div>
</body>
<script type="text/javascript" src="__PUBLIC__/jquery/js/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: function () {
return {
number_restrict_state: 1,//是否限制红包总数量 1不限制 2限制
choose_store: [], //选择的活动门店
choose_grade: [], //线上支付 会员等级选择
is_vip: 1, //线上支付与商城首页是否是会员获取活动 1是 0否
activeName: 'first', //活动类型首要显示
act_range_time: '', //活动时间范围
price_type: 1, //金额类型 1固定金额 2随机金额 3梯度金额
day_restrict_type: 1, //每日上限 0不限制 1限制数量 2限制金额
price_restrict_state: 1, //是否限制总金额 1不限制 2限制
store_restrict_state: 0, //是否限制门店 0不限制 1限制
grade_restrict_state: 0, //是否限制会员等级 0不限制 1限制
sum_max_time: '',//每人最大领取次数
money: '', //总金额
number: '', //红包数量
day_max_time: '', //每日最大限制限制数量
day_max_money: '', //每日最大限制金额
min_money: '', //最小金额
max_money: '', //最大金额
active_name_3: '12', //公众号通知栏每日上限栏框
active_name: '',
fixed_money: '', //固定金额
need_money: '', //消费金额
indexMethod: '',
scene_type: 1,//红包场景
groupList: [{
min: '',
max: '',
nub: ''
}, {
min: '',
max: '',
nub: ''
}, {
min: '',
max: '',
nub: ''
}],
storeList: [],
gradeList: [],
}
},
methods: {
//添加梯度
addGroup: function () {
if (this.groupList.length == 8) {
this.$message('最多8个')
return false
}
this.groupList.push({
min: '',
max: '',
num: ''
})
},
//删除梯度
delGroup: function (index) {
if (this.groupList.length == 3) {
this.$message('最少3个')
return false
} else {
this.groupList.splice(index, 1)
}
},
//获取会员等级
getVipGradeList() {
$.ajax({
url: "{:U('Retail/Reward/vipGrade')}",
type: 'post',
data: {},
dataType: 'json',
success: res => {
this.gradeList = res
},
error: res => {
this.requestError(res);
}
})
},
requestError(res) {
console.log(res);
this.$confirm("请求发生错误", "错误提示", {
confirmButtonText: '确定',
showCancelButton: false,
type: 'error'
}).then(() => {
}).catch(() => {
})
},
//参加红包活动的店铺接口
getStoreList() {
$.ajax({
url: "{:U('Retail/Reward/getStoreList')}",
type: 'post',
data: {},
dataType: 'json',
success: res => {
this.storeList = res
console.log(res)
},
error: res => {
this.requestError(res);
}
})
},
// 切换活动类型
changeActType(e) {
if (e == 1 || e == 2 || e == 4) {
this.is_vip = 1;
}
},
//提交
submit() {
if (this.scene_type != 1) {
if (this.store_restrict_state == 1 && this.choose_store == '') {
this.$message('请选择活动门店')
return false;
}
if (this.grade_restrict_state == 1 && this.choose_grade == '') {
this.$message('请选择会员等级')
return false;
}
if (this.scene_type == 2 || this.scene_type == 4) {
if (this.need_money === '') {
this.$message('请填写限制的消费金额')
return false;
}
}
}
this.verifyPublicData()
},
// 红包类型判断条件
verifyPublicData() {
if (this.active_name === '') {
this.$message('请填写活动名称')
return false
}
if (this.act_range_time === '') {
this.$message('请选择活动时间')
return false
}
if (this.price_type === 1) {
//固定金额
if (this.fixed_money === '') {
this.$message('请填写固定金额')
return false
}
if (this.number === '') {
this.$message('请填写红包数量')
return false
}
}
if ((this.price_type === 2 || this.price_type === 3) && this.price_restrict_state === 2) {
//限制总金额
if (this.money === '') {
this.$message('总金额不能为空')
return false
}
if (parseFloat(this.money) <= parseFloat(this.max_money)) {
this.$message('总金额不能小于最大金额')
return false
}
}
if (this.price_type === 2) {
//随机金额
if (this.min_money === '') {
this.$message('请填写最小金额')
return false
}
if (this.max_money === '') {
this.$message('请填写最大金额')
return false
}
if (parseFloat(this.max_money) <= parseFloat(this.min_money)) {
this.$message('最大金额需大于最小金额')
return false
}
if (this.number_restrict_state === 2) {
if (this.number === '') {
this.$message('总数不能为空')
return false
}
}
}
if (this.price_type === 3) {
//梯度金额
var reg = /^[+]{0,1}(\d+)$|^[+]{0,1}(\d+\.\d{0,2})$/;
var min = 0;
var max = 0;
try {
this.groupList.forEach(data => {
if (!reg.test(data.min)) {
console.log(reg.test(data.min));
throw new Error('min')
}
if (!reg.test(data.max)) {
throw new Error('max')
}
if (parseFloat(data.min) >= parseFloat(data.max)) {
throw new Error('min>max')
}
if (parseFloat(data.min) <= max) {
throw new Error('stag')
}
if (parseFloat(data.max) <= min) {
throw new Error('stag')
}
if (data.num == '' || data.num == undefined) {
throw new Error('num')
}
min = parseFloat(data.min);
max = parseFloat(data.max);
})
} catch (e) {
if (e.message === 'min') {
this.$message({
message: '请输入正确的最低金额',
});
return false;
}
if (e.message === 'max') {
this.$message({
message: '请输入正确的最高金额',
});
return false;
}
if (e.message === 'num') {
this.$message({
message: '请输入正确的梯度数量',
});
return false;
}
if (e.message === 'min>max') {
this.$message({
message: '最低金额不能大于等于最高金额',
});
return false;
}
if (e.message === 'stag') {
this.$message({
message: '金额区间交错或未按从小到大排序',
});
return false;
}
}
}
if (this.day_restrict_type === 1) {
if (this.day_max_time === '') {
this.$message('请输入每人每日数量上限')
return false
}
}
if (this.day_restrict_type === 2) {
if (this.day_max_money === '') {
this.$message('请输入每人每日金额上限')
return false
}
}
if (this.sum_max_time == '' || this.day_restrict_type == 1 && parseInt(this.sum_max_time) < parseInt(this.day_max_time)) {
this.$message('请设置正确的每人总的领取次数上限')
return false
}
if (this.number_restrict_state == 2 && parseInt(this.sum_max_time) > parseInt(this.number)) {
this.$message('每人最多领取次数不能大于红包总次数');
return false
}
this.addReward();
},
//添加红包接口
addReward() {
$.ajax({
url: "{:U('Retail/Reward/addReward')}",
type: 'post',
data: {
name: this.active_name, //活动名称
reward_type: this.price_type, //红包类型
money: this.money, //红包总金额
type: this.scene_type, //活动类型选择
number: this.number, //红包数量
start_time: this.act_range_time[0], //开始时间
end_time: this.act_range_time[1], //结束时间
fixed_money: this.fixed_money, //固定金额
max_money: this.max_money, //最大金额
min_money: this.min_money, //最小金额、
need_money: this.need_money, //消费金额
is_vip: this.is_vip, //是否是会员活动
reward_list: JSON.stringify(this.groupList),//梯度列表
is_limit_store: this.store_restrict_state,//是否限制门店
limit_store_id: this.choose_store.join(','),//选择的门店
is_class_limit: this.grade_restrict_state,//是否限制会员等级
class_type: this.choose_grade.join(','),//选择的会员等级
day_restrict_type: this.day_restrict_type,//每日上限 0不限制 1限制数量 2限制金额
day_max_time: this.day_max_time, //每日最多领取次数
day_max_money: this.day_max_money, //每日最多领取金额
sum_max_time: this.sum_max_time,//每人最多领取次数
},
dataType: 'json',
success: res => {
if (res.status == 1) {
console.log(res.msg);
this.$message({
message: res.msg,
type: 'success',
onClose: function () {
var index = parent.layer.getFrameIndex(window.name);
parent.layer.close(index);
}
})
} else {
this.$message({
message: res.msg,
type: 'error',
})
}
},
error: res => {
this.requestError(res);
}
})
},
},
mounted() {
this.getStoreList()
this.getVipGradeList()
}
})
</script>
</html>