文件

808 行
33 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 {
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-range-editor.el-input__inner {
width: 74.5%;
}
.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="radiodiv" @change="huodongxhi">
<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="awadradio" @change="changeradio">
<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="value1"
size="small"
type="daterange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="截至日期"
value-format="yyyy-MM-dd">
</el-date-picker>
</el-form-item>
<!-- 固定金额 -->
<template v-if="awadradio==1">
<el-form-item label="单个红包金额">
<el-input style="width: 330px;"
type="text"
size="small"
placeholder="请输入红包金额"
v-model='money_qwe'
onkeyup="value=value.replace(/[^\d\.]/g,'')"
maxlength="5"
clearable></el-input>
</el-form-item>
<el-form-item label="红包数量">
<el-input style="width: 330px;"
type="text"
size="small"
placeholder="请输入红包数量"
v-model="number"
onkeyup="value=value.replace(/[^\d\.]/g,'')"
maxlength="20" clearable></el-input>
</el-form-item>
<el-form-item label="每日上限">
<div>
<el-radio-group v-model="awadradio_1">
<el-radio :label="1">不限制</el-radio>
<el-radio :label="2">限制数量</el-radio>
<el-radio :label="3">限制金额</el-radio>
</el-radio-group>
<el-input v-show="awadradio_1==2"
style="width: 330px;margin: 5px 0;"
type="text"
size="small"
v-model="active_name_w"
maxlength="20"
onkeyup="value=value.replace(/[^\d\.]/g,'')"
clearable></el-input>
<el-input v-show="awadradio_1==3"
style="width: 330px;margin: 5px 0;"
type="text"
size="small"
v-model="active_name_q"
maxlength="20"
onkeyup="value=value.replace(/[^\d\.]/g,'')"
clearable></el-input>
</div>
</el-form-item>
</template>
<!-- 随机金额 -->
<template v-if="awadradio==2">
<el-form-item label="最小金额">
<el-input style="width: 330px;"
type="text"
size="small"
placeholder="请输入红包金额"
onkeyup="value=value.replace(/[^\d\.]/g,'')"
v-model="active_minmoney"
maxlength="20"
clearable></el-input>
</el-form-item>
<el-form-item label="最大金额">
<el-input style="width: 330px;"
type="text"
size="small"
placeholder="请输入红包数量"
onkeyup="value=value.replace(/[^\d\.]/g,'')"
v-model="active_maxmoney"
maxlength="20"
clearable></el-input>
</el-form-item>
<el-form-item label="总金额">
<el-radio-group v-model="awadradio_2" @change="zongjinedayu">
<el-radio :label="1">不限制金额</el-radio>
<el-radio :label="2">限制金额</el-radio>
</el-radio-group>
<el-input v-show="awadradio_2==2"
style="width: 330px;"
type="text"
size="small"
v-model="money"
maxlength="20"
onkeyup="value=value.replace(/[^\d\.]/g,'')"
clearable></el-input>
</el-form-item>
<el-form-item label="红包总数">
<el-radio-group v-model="rioder" @change="zhongjinedd">
<el-radio :label="1">不限制数量</el-radio>
<el-radio :label="2">限制数量</el-radio>
</el-radio-group>
<el-input v-show="rioder==2"
style="width: 330px;"
size="small"
type="text"
v-model="number"
maxlength="20"
onkeyup="value=value.replace(/[^\d\.]/g,'')"
clearable></el-input>
</el-form-item>
</template>
<!-- 梯度金额 -->
<template v-if="awadradio==3">
<el-form-item label="梯度设置">
<div>
<el-button size="small" type="primary" plain @click='add'>添加</el-button>
<el-button size="small" @click='delt'>删除</el-button>
<div class="tips">注意:至少设置3种梯度,最多设置8种梯度!</div>
</div>
<el-table :data="tidujinenc" style="width: 500px;" border>
<el-table-column type="index" label="梯度">
</el-table-column>
<el-table-column prop="min" label="最低金额" width="120">
<template slot-scope="scope">
<el-input v-model="scope.row.min"
type="text"
size="small"
onkeyup="value=value.replace(/[^\d\.]/g,'')"
maxlength="9"></el-input>
</template>
</el-table-column>
<el-table-column prop="max" label="最高金额" width="120">
<template slot-scope="scope">
<el-input v-model="scope.row.max"
type="text"
size="small"
onkeyup="value=value.replace(/[^\d\.]/g,'')"
maxlength="9"></el-input>
</template>
</el-table-column>
<el-table-column prop="nub" label="红包数量" width="120">
<template slot-scope="scope">
<el-input v-model="scope.row.nub"
type="text"
size="small"
onkeyup="value=value.replace(/[^\d\.]/g,'')"
maxlength="9"></el-input>
</template>
</el-table-column>
</el-table>
</el-form-item>
<el-form-item label="总金额">
<el-radio-group v-model="awadradio_2">
<el-radio :label="1">不限制金额</el-radio>
<el-radio :label="2">限制金额</el-radio>
</el-radio-group>
<el-input v-show="awadradio_2==2"
style="width: 330px;"
type="text"
size="small"
v-model="money" maxlength="20"
onkeyup="value=value.replace(/[^\d\.]/g,'')"
clearable></el-input>
</el-form-item>
</template>
<!-- 线下线上支付 -->
<template v-if="radiodiv==2||radiodiv==4">
<el-form-item label="消费金额">
<el-input style="width: 330px;"
type="text"
size="small"
placeholder="请输入红包金额"
v-model="needmoney"
onkeyup="value=value.replace(/[^\d\.]/g,'')"
maxlength="20"
clearable></el-input>
<div class="tips">会员在小程序商城消费多少钱能够参加红包活动</div>
</el-form-item>
</template>
<!-- 小程序商城 -->
<template>
<el-form-item v-if="radiodiv==2||radiodiv==3||radiodiv==4" label="活动门店">
<el-radio-group v-model="xianshangzhifu_3" @change="huodongmendi">
<el-radio :label="1">不限制门店</el-radio>
<el-radio :label="2">限制门店</el-radio>
</el-radio-group>
<div v-show="xianshangzhifu_3==2">
<el-select v-model="value_1" multiple placeholder="请选择">
<el-option v-for="item in cities_b"
:key="item.id"
:label="item.storetag"
:value="item.id">
</el-option>
</el-select>
<div class="tips">注意:如果选择多店参与大转盘活动,在选择奖品时,不可选择门店商品!</div>
</div>
</el-form-item>
<el-form-item v-if="radiodiv==3" label="非会员获得机会">
<el-switch
v-model="valueanniukaiguan"
@change="xianshangzhifu_4=valueanniukaiguan==0?1:xianshangzhifu_4"
inactive-value="1"
active-value="0"></el-switch>
<div class="tips">开启则非会员也能获得机会,领取前仍需注册会员</div>
</el-form-item>
<el-form-item v-if="(radiodiv==2||radiodiv==3||radiodiv==4) && valueanniukaiguan==1" label="会员等级限制">
<el-radio-group v-model="xianshangzhifu_4" @change="huaundd">
<el-radio :label="1">所有等级</el-radio>
<el-radio :label="2">指定等级</el-radio>
</el-radio-group>
<div v-show="xianshangzhifu_4==2">
<el-select v-model="value_4" multiple placeholder="请选择参加活动的会员等级">
<el-option v-for="item in huiyuan"
:key="item.id"
:label="item.cardname"
:value="item.id">
</el-option>
</el-select>
</div>
</el-form-item>
</template>
</el-form>
<div>
<div class="submit-btn-box">
<el-button type="primary" v-show="radiodiv==1" @click='huodongxuanzhedidi'>提交</el-button>
<el-button type="primary" v-show="radiodiv==3" @click="huodongxiehuan3">提交</el-button>
<el-button type="primary" v-show="radiodiv==4" @click="huodongxiehuan2">提交</el-button>
<el-button type="primary" v-show="radiodiv==2" @click='huodongxiehuan4'>提交</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 {
dialogTableVisible: false, // 按钮提示
radio: '1',
rioder: 1,
value_1: [], //小程序商城 活动门店请选择
value_2: '', //小程序商城 活动等级限制
value_4: [], //线上支付 会员等级选择
valueanniukaiguan: 1, //线上支付与商城首页是否是会员获取活动 1是 0否
activeName: 'first', //活动类型首要显示
value1: '', //公众号活动日期选择
awadradio: 1, //公众号通知栏类型
awadradio_1: 1, //公众号通知栏随机金额每日上限
awadradio_2: 1, //公众号通知栏随机限制金额
radioqwes_1: 1, //小程序商城首页活动门店
radioqwes_qw: 1, //小程序商城首页会员等级
radioqwe: 1, //小程序商城红包类型
xianshangzhifu_3: 1, //线上支付活动门店
xianshangzhifu_4: 1, //线上支付会员等级
xianxiazhifu_1: 1, //线下支付红包类型
aqweqw: 1, //活动类型
radioqwereward: 1, //红包类型
money: '', //总金额
number: '', //红包数量
value1A: '', //开始时间
value1B: '', //结束时间
active_name_w: '', //限制数量
active_name_q: '', //限制金额
active_minmoney: '', //最小金额
active_maxmoney: '', //最大金额
active_name_3: '12', //公众号通知栏每日上限栏框
active_name: '',
money_qwe: '', //固定金额
dengjixianzhi: '', //会员等级是否限制
needmoney: '', //消费金额
shidoumendian: '', //是否限制门店
// activeleixing: 'first',
shujudud: '',
txt: '',
dashfodhf: '',
indexMethod: '',
radiodiv: 1,
tidujinenc: [{
min: '',
max: '',
nub: ''
},
{
min: '',
max: '',
nub: ''
},
{
min: '',
max: '',
nub: ''
},
],
cities_b: [],
huiyuan: [],
}
},
methods: {
//添加红包接口
tijaianniu() {
if (this.value1 == '') {
this.value1A = ''
this.value1B = ''
} else {
if (this.value1[0] !== '') {
this.value1A = this.value1[0]
}
if (this.value1[1] !== '') {
this.value1B = this.value1[1]
}
}
console.log(this.value1A)
console.log(this.value1B)
var that = this;
let orderDa = JSON.stringify(this.tidujinenc)
// console.log(this.shujudud)
$.ajax({
url: '/index.php/Retail/PlugReward/editad',
type: 'post',
data: {
name: this.active_name, //活动名称
reward_type: this.radioqwereward, //红包类型
money: this.money, //红包总金额
type: this.aqweqw, //活动类型选择
number: this.number, //红包数量
starttime: this.value1A, //开始时间
endtime: this.value1B, //结束时间
fixed_money: this.money_qwe, //固定金额
day_max_time: this.active_name_w, //最多领取次数
day_max_money: this.active_name_q, //最多领取金额
maxmoney: this.active_maxmoney, //最大金额
minmoney: this.active_minmoney, //最小金额、
needmoney: this.needmoney, //消费金额
is_vip: this.valueanniukaiguan, //是否是会员活动
reward_list: orderDa
},
dataType: 'json',
success: res => {
if(res.status == 1){
that.$message({
massage: res.msg,
type: 'success',
duration: 1000,
onClose:function () {
var index = parent.layer.getFrameIndex(window.name);
parent.layer.close(index);
}
})
}else{
that.$message({
massage: res.msg,
type: 'error',
})
}
},
error: function () {
alert("数据请求失败")
}
})
},
//添加
add: function () {
if (this.tidujinenc.length == 8) {
this.$message('最多8个')
return false
}
this.tidujinenc.push({
min: '',
max: '',
nub: ''
})
console.log(this.tidujinenc)
},
//删除
delt: function (ind) {
if (this.tidujinenc.length == 3) {
this.$message('最少3个')
return false
} else {
this.tidujinenc.splice(ind, 1)
}
},
//添加会员等级
tianjailist() {
// this.value_4
var dengji = this.value_4;
var dengji_string = dengji.join(',');
console.log(dengji_string)
// let orderDaen = JSON.stringify(this.value_4)
$.ajax({
url: '/index.php/Retail/PlugReward/vipGrade',
type: 'post',
data: {
is_class_limit: this.dengjixianzhi,
class_type: dengji_string, //会员等级类型
},
dataType: 'json',
success: res => {
console.log(res)
this.huiyuan = res
},
error: function () {
alert("数据请求失败")
}
})
},
//参加红包活动的店铺接口
dainpuhuoodng() {
// this.value_1
var dengjiq = this.value_1; //选择的门店
console.log(dengjiq);
var dengjiq_string = dengjiq.join(',');
console.log(dengjiq_string)
// let orderDatafuben = JSON.stringify(this.value_1)
$.ajax({
url: '/index.php/Retail/PlugReward/mananger',
type: 'post',
data: {
is_limit_store: this.shidoumendian,
limit_store_id: dengjiq_string //活动店铺选择
},
dataType: 'json',
success: res => {
this.cities_b = res
// debugger
console.log(res)
}
})
// console.log(orderDatafuben)
},
//活动那个类型选择
huodongxuanzhedidi() {
this.ifhonbaopanduan()
// this.tijaianniu()
},
//线下
huodongxiehuan2() {
this.huodongleixinxainzhi()
this.dainpuhuoodng()
// this.tijaianniu()
this.tianjailist()
},
//小程序首页
huodongxiehuan3() {
this.huodongleixinxainzhi()
this.dainpuhuoodng()
// this.tijaianniu()
this.tianjailist()
},
//线上
huodongxiehuan4() {
this.huodongleixinxainzhi()
this.dainpuhuoodng()
// this.tijaianniu()
this.tianjailist()
},
//红包类型选择
changeradio(e) {
this.radioqwereward = e
console.log(this.radioqwereward);
},
// 活动类型
huodongxhi(e) {
this.aqweqw = e;
if (e == 1 || e == 2 || e == 4) {
this.valueanniukaiguan = 1;
}
console.log(this.aqweqw)
},
// 活动类型选择条件封装
xiaofeijine(e) {
if (this.needmoney === '' || this.needmoney === '') {
this.$message('请填写限制消费金额参加活动')
}
},
// 会员等级与门店限制
huiyuandmendian(e) {
},
huodongleixinxainzhi(e) {
if (this.aqweqw === 1) {
this.ifhonbaopanduan()
}
if (this.aqweqw === 2) {
if (this.xianshangzhifu_3 == 2 && this.value_1 == '') {
this.$message('请选择活动门店')
return false;
}
if (this.xianshangzhifu_4 == 2 && this.value_4 == '') {
this.$message('会员的等级限制不能为空')
return false;
} else {
this.ifhonbaopanduan()
this.xiaofeijine()
}
}
if (this.aqweqw === 3) {
if (this.xianshangzhifu_3 == 2 && this.value_1 == '') {
this.$message('请选择活动门店')
return false;
}
if (this.xianshangzhifu_4 == 2 && this.value_4 == '') {
this.$message('会员的等级限制不能为空')
return false;
} else {
this.ifhonbaopanduan()
}
}
if (this.aqweqw === 4) {
if (this.xianshangzhifu_3 == 2 && this.value_1 == '') {
this.$message('请选择活动门店')
return false;
}
if (this.xianshangzhifu_4 == 2 && this.value_4 == '') {
this.$message('会员的等级限制不能为空')
return false;
}
this.ifhonbaopanduan()
this.xiaofeijine()
}
},
// 红包类型判断条件
ifhonbaopanduan() {
if (this.radioqwereward === 1) {
if (this.active_name === '') {
this.$message('请填写活动名称')
return false
}
if (this.money_qwe === '') {
this.$message('单个红包金额不能空')
return false
}
if (this.value1 === '') {
this.$message('请选择活动时间')
return false
}
// if (this.active_name_w === '') {
// this.$message('请添加每日上限')
// return false
// }
if (this.number === '') {
this.$message('请填写红包数量')
return false
}
if (this.awadradio_1 === 2) {
if (this.active_name_w === '') {
this.$message('限制数量不能为空')
return false
}
}
if (this.awadradio_1 === 3) {
if (this.active_name_q === '') {
this.$message('限制金额不能为空')
return false
}
}
}
if (this.radioqwereward === 2) {
if (this.active_name === '') {
this.$message('请填写活动名称')
return false
}
if (this.value1 === '') {
this.$message('请选择活动时间')
return false
}
if (this.active_minmoney === '') {
this.$message('请填写最小金额')
return false
}
if (this.active_maxmoney === '') {
this.$message('请填写最大金额')
return false
}
if (this.active_maxmoney <= this.active_minmoney) {
this.$message('最大金额需大于最小金额')
return false
}
if (this.ethsis === 2) {
if (this.number === '') {
this.$message('总数不能为空')
return false
}
}
if (this.sdhsd === 2) {
if (this.money === '') {
this.$message('总金额不能为空')
return false
}
if (this.money <= this.active_maxmoney) {
this.$message('总金额不能小于最大金额')
return false
}
}
}
if (this.radioqwereward === 3) {
// this.adada()
if (this.active_name === '') {
this.$message('请填写活动名称')
return false
}
if (this.value1 === '') {
this.$message('请选择活动时间')
return false
}
if (this.sdhsd === 2) {
if (this.money === '') {
this.$message('总金额不能为空')
return false
}
if (this.money <= this.active_maxmoney) {
this.$message('总金额不能小于最大金额')
return false
}
}
try {
this.tidujinenc.forEach(data => {
if (data.min == '') {
throw new Error('min')
}
if (data.max == '') {
throw new Error('max')
}
if (data.nub == '') {
throw new Error('nub')
}
if (data.min > data.max) {
throw new Error('min>max')
}
})
} catch (e) {
if (e.message === 'min') {
this.$message({
message: '请输入最低金额',
});
return false;
}
if (e.message === 'max') {
this.$message({
message: '请输入最高金额',
});
return false;
}
if (e.message === 'nub') {
this.$message({
message: '请输入数量',
});
return false;
}
if (e.message === 'min>max') {
this.$message({
message: '最低金额不能大于最高金额',
});
return false;
}
}
this.$message({
message: '添加成功',
type: 'success',
})
// window.location.reload()
this.tijaianniu()
} else {
this.tijaianniu(),
this.$message({
message: '添加成功',
type: 'success',
})
// window.location.reload()
}
// window.location.reload()
},
adada() {
},
// 随机金额总金额
zongjinedayu(e) {
this.sdhsd = e
console.log(this.sdhsd)
},
//随机金额 红包总数
zhongjinedd(e) {
this.ethsis = e
console.log(this.ethsis)
},
huaundd(e) {
this.dengjixianzhi = e - 1
console.log(this.dengjixianzhi)
},
//参加门店限制
huodongmendi(e) {
this.shidoumendian = e - 1
console.log(this.shidoumendian)
}
},
mounted() {
this.dainpuhuoodng()
this.tianjailist()
}
})
</script>
</html>