467 行
24 KiB
HTML
可执行文件
467 行
24 KiB
HTML
可执行文件
<!DOCTYPE html>
|
||
<html>
|
||
<!--[1.8.67]-->
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
|
||
<link rel="stylesheet" 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__/vue/element-ui.css">
|
||
<link rel="stylesheet" href="__PUBLIC__/css/system-gallery.css?v=1.0.3">
|
||
<script src="__PUBLIC__/jquery/js/jquery-3.2.1.min.js"></script>
|
||
<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.js"></script>
|
||
<script charset="utf-8" src="__PUBLIC__/js/system-gallery.js?v=1.0.3"></script>
|
||
<title>添加大转盘</title>
|
||
<style>
|
||
[v-cloak] {
|
||
display: none;
|
||
}
|
||
|
||
body {
|
||
padding: 20px;
|
||
}
|
||
|
||
.el-upload--picture-card {
|
||
width: 100px;
|
||
height: 100px;
|
||
line-height: 100px;
|
||
}
|
||
|
||
.el-upload-list--picture-card .el-upload-list__item {
|
||
width: 100px;
|
||
height: 100px;
|
||
}
|
||
|
||
.el-dialog__wrapper {
|
||
z-index: 3000 !important;
|
||
}
|
||
|
||
.tips {
|
||
color: #999;
|
||
font-size: 12px;
|
||
}
|
||
|
||
.center {
|
||
margin-top: 30px;
|
||
margin-bottom: 50px;
|
||
text-align: center;
|
||
width: 100%;
|
||
}
|
||
|
||
.error-tips {
|
||
color: red;
|
||
font-size: 12px;
|
||
position: absolute;
|
||
top: 26px;
|
||
}
|
||
|
||
.item-center {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.el-input.is-disabled .el-input__inner {
|
||
color: #aaa !important;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div id="app" v-cloak>
|
||
<el-tabs type="border-card" style="margin-bottom: 20px;">
|
||
<el-tab-pane label="基本设置">
|
||
<el-form id="formSet" ref="form" :model="form" :rules="rules" label-width="170px">
|
||
<el-form-item prop="turntable_type" label="活动类型">
|
||
<el-radio-group :disabled="form.id>0?true:false" v-model="form.turntable_type">
|
||
<el-radio label="1" value="1">会员通知栏</el-radio>
|
||
<el-radio label="2" value="2">会员支付</el-radio>
|
||
</el-radio-group>
|
||
</el-form-item>
|
||
<el-form-item prop="turntable_name" label="活动名称">
|
||
<el-input size="small" placeholder="请输入活动名称" type="text" v-model="form.turntable_name"></el-input>
|
||
</el-form-item>
|
||
<el-form-item prop="explain" label="活动说明">
|
||
<el-input size="small" placeholder="请输入活动说明" type="textarea" v-model="form.explain"></el-input>
|
||
</el-form-item>
|
||
<el-form-item prop="date" label="活动有效时间">
|
||
<el-date-picker
|
||
v-model="form.date"
|
||
type="datetimerange"
|
||
value-format="yyyy-MM-dd HH:mm:ss"
|
||
range-separator="至"
|
||
start-placeholder="开始日期"
|
||
end-placeholder="结束日期"
|
||
size="small">
|
||
</el-date-picker>
|
||
</el-form-item>
|
||
<el-form-item prop="strategy" label="活动规则">
|
||
<el-input size="small" placeholder="请输入活动规则" type="textarea" v-model="form.strategy"></el-input>
|
||
</el-form-item>
|
||
<el-form-item prop="isshownum" label="显示奖品数量">
|
||
<el-radio-group :disabled="form.id>0?true:false" v-model="form.isshownum">
|
||
<el-radio label="1">显示</el-radio>
|
||
<el-radio label="2">不显示</el-radio>
|
||
</el-radio-group>
|
||
</el-form-item>
|
||
<el-form-item prop="needmoney" label="消费满多少元可参与" v-if="form.turntable_type==2">
|
||
<el-input size="small" placeholder="请输入金额"
|
||
oninput="value=(this.value==parseInt(this.value * 100) / 100)?this.value:((parseInt(this.value * 100) / 100)?(parseInt(this.value * 100) / 100):'');"
|
||
type="text"
|
||
v-model="form.needmoney"></el-input>
|
||
</el-form-item>
|
||
<el-form-item prop="maxnum" label="每人最多领奖次数">
|
||
<el-input :disabled="form.id>0?true:false" size="small" placeholder="请输入次数（0为不限制）"
|
||
oninput="value=this.value.replace(/^\D/g,'')"
|
||
type="text"
|
||
v-model="form.maxnum"></el-input>
|
||
</el-form-item>
|
||
<el-form-item prop="daymaxnum" label="每人每天最多获奖次数">
|
||
<el-input :disabled="form.id>0?true:false" size="small" placeholder="请输入次数（0为不限制）"
|
||
oninput="value=this.value.replace(/^\D/g,'')"
|
||
type="text"
|
||
v-model="form.daymaxnum"></el-input>
|
||
</el-form-item>
|
||
<el-form-item prop="playnum" label="每人每天最多抽奖次数">
|
||
<el-input :disabled="form.id>0?true:false" size="small" placeholder="请输入次数（0为不限制）"
|
||
oninput="value=this.value.replace(/^\D/g,'')"
|
||
type="text"
|
||
v-model="form.playnum"></el-input>
|
||
</el-form-item>
|
||
<el-form-item prop="prizecode" label="奖品兑换码">
|
||
<el-input size="small" type="text" v-model="form.prizecode"></el-input>
|
||
<span class="tips">奖品有实物时会需要</span>
|
||
</el-form-item>
|
||
<el-form-item prop="copyright" label="版权信息">
|
||
<el-input size="small" type="textarea" v-model="form.copyright"></el-input>
|
||
<span class="tips">如果不填写，默认为商户名称</span>
|
||
</el-form-item>
|
||
<el-form-item label="按钮文字">
|
||
<el-input size="small" type="text" v-model="form.btn_word"></el-input>
|
||
<span class="tips">不填写表示不开启</span>
|
||
</el-form-item>
|
||
<el-form-item label="按钮链接">
|
||
<el-input size="small" type="text" v-model="form.link"></el-input>
|
||
<span class="tips">跳转的链接地址，如：http://www.baidu.com</span>
|
||
</el-form-item>
|
||
</el-form>
|
||
</el-tab-pane>
|
||
</el-tabs>
|
||
<el-tabs type="border-card" style="margin-bottom: 20px;">
|
||
<el-tab-pane label="奖品设置">
|
||
<el-tabs v-model="activeName" @tab-click="clickPrizeTab">
|
||
<template v-for="(item,index) in prizeList">
|
||
<el-tab-pane :key="index" :label="'奖品'+(index+1)" :name="''+index">
|
||
<el-form label-width="100px">
|
||
<el-form-item label="奖品类型">
|
||
<el-radio-group :disabled="form.id>0?true:false" v-model="item.type">
|
||
<el-radio label="1">实物</el-radio>
|
||
<el-radio label="2">积分</el-radio>
|
||
<el-radio label="3">余额</el-radio>
|
||
<el-radio label="5">谢谢惠顾(未中奖)</el-radio>
|
||
</el-radio-group>
|
||
</el-form-item>
|
||
<el-form-item label="奖品名称">
|
||
<el-input :disabled="form.id>0?true:false" size="small" type="text"
|
||
v-model="item.prize_name"></el-input>
|
||
</el-form-item>
|
||
<el-form-item v-if="item.type==2" label="积分数量">
|
||
<el-input :disabled="form.id>0?true:false" size="small" placeholder="请输入积分数量（整数）"
|
||
oninput="value=this.value.replace(/^[0]|\D/g,'')"
|
||
type="text" v-model="item.integral"></el-input>
|
||
</el-form-item>
|
||
<el-form-item v-if="item.type==3" label="会员卡余额">
|
||
<el-input :disabled="form.id>0?true:false" size="small" placeholder="请输入金额"
|
||
oninput="value=(this.value==parseInt(this.value * 100) / 100)?this.value:((parseInt(this.value * 100) / 100)?(parseInt(this.value * 100) / 100):'');"
|
||
type="text" v-model="item.money"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="奖品数量">
|
||
<el-input :disabled="form.id>0?true:false" size="small" type="text"
|
||
oninput="value=this.value.replace(/^[0]|\D/g,'')"
|
||
v-model="item.prizenum"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="获奖概率">
|
||
<el-input :disabled="form.id>0?true:false" size="small" placeholder="取值 1~93"
|
||
type="text"
|
||
oninput="value=this.value.replace(/^[0]|\D/g,'')"
|
||
v-model="item.prob"></el-input>
|
||
<span v-if="item.prob&&item.prob<0" class="error-tips">概率值有误</span>
|
||
</el-form-item>
|
||
<el-form-item v-if="item.type==1" label="奖品图片">
|
||
<div class="item-center">
|
||
<choose-one-file :file-url.sync="item.prize_img"
|
||
:file-id.sync="item.prize_img_id"
|
||
:is-disabled="form.id>0?true:false"></choose-one-file>
|
||
</div>
|
||
</el-form-item>
|
||
<el-form-item label="奖品说明">
|
||
<el-input :disabled="form.id>0?true:false" size="small" type="textarea"
|
||
v-model="item.prizemsg"></el-input>
|
||
</el-form-item>
|
||
</el-form>
|
||
</el-tab-pane>
|
||
</template>
|
||
</el-tabs>
|
||
</el-tab-pane>
|
||
</el-tabs>
|
||
<div class="center">
|
||
<el-button type="primary" @click="submit('form')">提交</el-button>
|
||
</div>
|
||
</div>
|
||
</body>
|
||
<script type="text/javascript">
|
||
function verProb(prob) {
|
||
let new_prob = parseInt(prob);
|
||
if (prob == new_prob) {
|
||
if (prob <= 0 || prob > 93) {
|
||
return false;
|
||
}
|
||
return true;
|
||
} else {
|
||
return false;
|
||
}
|
||
}
|
||
|
||
var date = '{$turnTable["date"]}';
|
||
var app = new Vue({
|
||
el: '#app',
|
||
data: function () {
|
||
return {
|
||
activeName: '0',
|
||
prizeList: {$prizeList},
|
||
form: {
|
||
turntable_type: "{$turnTable['turntable_type']}",
|
||
turntable_name: "{$turnTable['turntable_name']}",
|
||
explain: "{$turnTable['explain']}",
|
||
date: date ? JSON.parse(date) : '',
|
||
strategy: "{$turnTable['strategy']}",
|
||
isshownum: "{$turnTable['isshownum']}",
|
||
needmoney: "{$turnTable['needmoney']}",
|
||
maxnum: "{$turnTable['maxnum']}",
|
||
daymaxnum: "{$turnTable['daymaxnum']}",
|
||
playnum: "{$turnTable['playnum']}",
|
||
copyright: "{$turnTable['copyright']}",
|
||
prizecode: "{$turnTable['prizecode']}",
|
||
btn_word: "{$turnTable['btn_word']}",
|
||
link: "{$turnTable['link']}",
|
||
id: `{$turnTable['id']}`
|
||
},
|
||
rules: {
|
||
turntable_type: [{message: '请选择活动类型', required: true, trigger: 'change'}],
|
||
turntable_name: [{message: '请输入活动名称', required: true, trigger: 'change'}],
|
||
explain: [{message: '请输入活动说明', required: true, trigger: 'change'}],
|
||
date: [{message: '请选择活动有效时间', required: true, trigger: 'change'}],
|
||
strategy: [{message: '请输入活动规则', required: true, trigger: 'change'}],
|
||
isshownum: [{message: '请选择是否显示奖品数量', required: true, trigger: 'change'}],
|
||
needmoney: [{message: '请输入正确的金额', required: true, trigger: 'change'}, {
|
||
validator: function (rule, value, callback) {
|
||
if (app.turntable_type == 2) {
|
||
var reg = /^[+]?\d*\.?\d{0,2}$/;
|
||
if (reg.test(value) == false) {
|
||
callback(new Error("请输入正确的金额"));
|
||
} else {
|
||
callback();
|
||
}
|
||
} else {
|
||
callback();
|
||
}
|
||
}, trigger: 'blur'
|
||
}],
|
||
maxnum: [{message: '请输入正确的次数', required: true, trigger: 'change'}, {
|
||
validator: function (rule, value, callback) {
|
||
var reg = /\d/;
|
||
if (reg.test(value) == false) {
|
||
callback(new Error("请输入正确的次数"));
|
||
} else {
|
||
callback();
|
||
}
|
||
}, trigger: 'blur'
|
||
}],
|
||
daymaxnum: [{message: '请输入正确的次数', required: true, trigger: 'change'}, {
|
||
validator: function (rule, value, callback) {
|
||
var reg = /\d/;
|
||
if (reg.test(value) == false) {
|
||
callback(new Error("请输入正确的次数"));
|
||
} else {
|
||
callback();
|
||
}
|
||
}, trigger: 'blur'
|
||
}],
|
||
playnum: [{message: '请输入正确的次数', required: true, trigger: 'change'}, {
|
||
validator: function (rule, value, callback) {
|
||
var reg = /\d/;
|
||
if (reg.test(value) == false) {
|
||
callback(new Error("请输入正确的次数"));
|
||
} else {
|
||
callback();
|
||
}
|
||
}, trigger: 'blur'
|
||
}],
|
||
copyright: [{message: '请填写版权信息', required: false, trigger: 'change'}],
|
||
prizecode: [{message: '请设置奖品兑换码', required: true, trigger: 'change'}, {
|
||
validator: function (rule, value, callback) {
|
||
if (value == '') {
|
||
for (var i = 0; i < app.prizeList.length; i++) {
|
||
if (app.prizeList[i].type == 1) {
|
||
callback(new Error("奖品中有实物，请设置奖品兑换码"));
|
||
return;
|
||
}
|
||
}
|
||
}
|
||
callback();
|
||
}, trigger: 'blur'
|
||
}],
|
||
btn_word: [{message: '请设置按钮文字', required: false, trigger: 'change'}],
|
||
link: [{message: '请设置按钮链接', required: false, trigger: 'change'}],
|
||
},
|
||
uploadImgIndex: 0,
|
||
}
|
||
},
|
||
methods: {
|
||
clickPrizeTab: function (e) {
|
||
// console.log(e)
|
||
},
|
||
inputProb: function (index, prob) {
|
||
var new_prob = Math.floor(prob * 100) / 100;
|
||
console.log(new_prob, prob, new_prob == prob);
|
||
if (prob != new_prob) {
|
||
this.$set(this.prizeList[index], 'prob', new_prob);
|
||
this.$forceUpdate();
|
||
|
||
console.log(this.prizeList);
|
||
}
|
||
},
|
||
submit: function (formName) {
|
||
var that = this;
|
||
this.$refs[formName].validate((valid) => {
|
||
if (valid) {
|
||
var prizeList = this.prizeList;
|
||
var prob = 0;
|
||
var formData = new FormData(document.getElementById('formSet'));
|
||
for (let i = 0; i < prizeList.length; i++) {
|
||
if (!prizeList[i].type) {
|
||
that.$message({
|
||
message: '奖品' + (i + 1) + '类型未选择',
|
||
type: 'error',
|
||
duration: 1300
|
||
});
|
||
return;
|
||
}
|
||
switch (prizeList[i].type) {
|
||
case '1':
|
||
if (!prizeList[i].prize_img) {
|
||
that.$message({
|
||
message: '奖品' + (i + 1) + '图片未上传',
|
||
type: 'error',
|
||
duration: 1300
|
||
});
|
||
return;
|
||
}
|
||
if (that.prizeList[i].img && that.prizeList[i].img.name) {
|
||
formData.append('prize_img_' + i, that.prizeList[i].img, that.prizeList[i].img.name);
|
||
}
|
||
break;
|
||
case '2':
|
||
if (!prizeList[i].integral) {
|
||
that.$message({
|
||
message: '奖品' + (i + 1) + '积分数量未填写',
|
||
type: 'error',
|
||
duration: 1500
|
||
});
|
||
return;
|
||
}
|
||
break;
|
||
case '3':
|
||
if (!prizeList[i].money) {
|
||
that.$message({
|
||
message: '奖品' + (i + 1) + '金额未填写',
|
||
type: 'error',
|
||
duration: 1300
|
||
});
|
||
return;
|
||
}
|
||
break;
|
||
}
|
||
if (!prizeList[i].prize_name) {
|
||
that.$message({
|
||
message: '奖品' + (i + 1) + '名称未填写',
|
||
type: 'error',
|
||
duration: 1300
|
||
})
|
||
return;
|
||
} else if (!prizeList[i].prizenum) {
|
||
that.$message({
|
||
message: '奖品' + (i + 1) + '数量未填写',
|
||
type: 'error',
|
||
duration: 1300
|
||
})
|
||
return;
|
||
} else if (!prizeList[i].prob) {
|
||
that.$message({
|
||
message: '奖品' + (i + 1) + '中奖概率未填写',
|
||
type: 'error',
|
||
duration: 1500
|
||
});
|
||
return;
|
||
} else if (!verProb(prizeList[i].prob)) {
|
||
that.$message({
|
||
message: '奖品' + (i + 1) + '中奖概率设置有误',
|
||
type: 'error',
|
||
duration: 2000
|
||
});
|
||
return;
|
||
}
|
||
prob += prizeList[i].prob * 1;
|
||
}
|
||
prob = Math.round(prob);
|
||
if (prob != 100) {
|
||
that.$message({
|
||
message: '奖品的中奖概率之和应为 100',
|
||
type: 'error'
|
||
});
|
||
return;
|
||
}
|
||
console.log(that.form);
|
||
console.log(that.prizeList);
|
||
for (var i in that.form) {
|
||
formData.append(i, that.form[i]);
|
||
}
|
||
formData.append('prizeList', JSON.stringify(prizeList));
|
||
that.$loading({
|
||
lock: true,
|
||
text: '请求中，请等待',
|
||
spinner: 'el-icon-loading',
|
||
background: 'rgba(255, 255, 255, 0.7)'
|
||
});
|
||
$.ajax({
|
||
url: "{:U('turntable_editad')}",
|
||
type: 'POST',
|
||
data: formData,
|
||
processData: false,// 告诉jQuery不要去设置Content-Type请求头
|
||
contentType: false,
|
||
dataType: "json",
|
||
success: function (res) {
|
||
that.$loading().close();
|
||
if (res.status == 1) {
|
||
that.$message({
|
||
message: res.msg,
|
||
type: 'success',
|
||
onClose: function () {
|
||
var index = parent.layer.getFrameIndex(window.name);
|
||
parent.layer.close(index);
|
||
}
|
||
});
|
||
} else {
|
||
that.$message({
|
||
message: res.msg,
|
||
type: 'error'
|
||
})
|
||
}
|
||
}
|
||
})
|
||
}
|
||
});
|
||
}
|
||
}
|
||
})
|
||
</script>
|
||
</html> |