Authored by 李奇

活动配置修改

... ... @@ -158,7 +158,7 @@ var CURRENT_URL = window.location.href.split('#')[0].split('?')[0],
})
});
window.qn_dynamic_el_upload = function ($el) {
window.qn_dynamic_el_upload = function ($el, success, fail) {
if (!$($el).length) {
return;
}
... ... @@ -202,11 +202,10 @@ var CURRENT_URL = window.location.href.split('#')[0].split('?')[0],
var domain = up.getOption('domain');
var res = JSON.parse(info.response);
var url = domain + res.key;
console.log(url)
success && success(url);
},
Error: function(up, err, errTip) {
console.log(err, errTip);
fail && fail(err);
}
}
});
... ...
... ... @@ -30,6 +30,8 @@
}
.vue-app-inner-view {
padding: 0 10px 60px 10px;
padding: 0 10px 10px 10px;
max-height: 100%;
overflow: auto;
}
</style>
... ...
<template>
<div class="prize-add">
<div class="demo-split">
<Split v-model="split">
<div slot="left" class="split-pane">
<Form ref="formValidate" :model="formValidate" :label-width="120">
<FormItem label="奖品名称" prop="name">
<Input v-model="formValidate.name" placeholder="奖品名称"></Input>
</FormItem>
<FormItem label="奖品类型" prop="name">
<Select>
<Option value="1">谢谢惠顾</Option>
<Option value="2">红包</Option>
<Option value="3">优惠券</Option>
</Select>
</FormItem>
<FormItem label="奖品值" prop="name">
<Input v-model="formValidate.value" placeholder="口令或面值等"></Input>
</FormItem>
<FormItem label="奖品总数" prop="total">
<Input v-model="formValidate.total" placeholder="奖品总数"></Input>
</FormItem>
<FormItem label="中奖概率" prop="total">
<Input v-model="formValidate.total" placeholder="中奖概率"></Input>
</FormItem>
<FormItem label="奖品图片" prop="name">
<span ref="prizeImg">+添加奖品图片</span>
</FormItem>
<FormItem label="中奖背景图" prop="name">
<span ref="gotPrizeBg">+添加中奖背景图</span>
</FormItem>
</Form>
<div class="add-btn"><Button type="primary">添加</Button></div>
<Split v-model="split">
<div slot="left" class="split-pane">
<Form ref="formValidate" :label-width="120">
<FormItem label="奖品位置" prop="prize_idx" required>
<Input v-model="prize.prize_idx" placeholder="奖品位置序号(竖直方向顺时针从1开始)"></Input>
</FormItem>
<FormItem label="奖品名称" prop="name" required>
<Input v-model="prize.name" placeholder="奖品名称"></Input>
</FormItem>
<FormItem label="奖品类型" prop="type" required>
<Select v-model="prize.type">
<Option :value="1">谢谢惠顾</Option>
<Option :value="2">红包</Option>
<Option :value="3">优惠券</Option>
</Select>
</FormItem>
<FormItem label="奖品值" prop="value" required>
<Input v-model="prize.value" placeholder="口令或面值等"></Input>
</FormItem>
<FormItem label="奖品总数" prop="total" required>
<Input v-model="prize.total" placeholder="奖品总数"></Input>
</FormItem>
<FormItem label="中奖概率" prop="chance" required>
<Input v-model="prize.chance" placeholder="中奖概率"></Input>
</FormItem>
<FormItem label="中奖背景图" prop="prize_bg" required>
<img class="win-prize-bg" v-show="prize.prize_bg" :src="prize.prize_bg">
<Button v-show="!prize.prize_bg">
<span ref="winPrizeBg">添加中奖背景图</span>
</Button>
</FormItem>
</Form>
<div class="add-btn">
<Button type="primary" @click="addPrize">添加</Button>
</div>
<div slot="right" class="split-pane right">
<Table :columns="columns1" :data="data1"></Table>
<div class="save">
<Button type="error" class="save-all">保存所有商品</Button>
</div>
</div>
</Split>
</div>
</div>
<div slot="right" class="split-pane right">
<Table :columns="prizeColumns" :data="prizes"></Table>
</div>
</Split>
</div>
</div>
</template>
<script>
// # 大转盘活动奖品表
// CREATE TABLE IF NOT EXISTS act_wheel_surf_prize (
// `id` INT(8) NOT NULL PRIMARY KEY AUTO_INCREMENT,
// `act_id` INT(8) NOT NULL DEFAULT 0,
// `name` VARCHAR(50) COMMENT '奖品名称',
// `type` INT(2) DEFAULT 0 COMMENT '奖品类型: 0、空奖 2、红包 3、优惠券',
// `value` VARCHAR(200) DEFAULT '' COMMENT '奖品口令或面值等',
// `img` VARCHAR(300) COMMENT '奖品图片',
// `total` INT(8) DEFAULT 0 COMMENT '奖品总数',
// `total_left` INT(8) DEFAULT 0 COMMENT '奖品总数',
// `chance` FLOAT COMMENT '中奖概率',
// `prize_bg` VARCHAR(300) COMMENT '中奖背景图',
// `prize_idx` INT(2) NOT NULL COMMENT '圆盘上奖品位置序号',
// `create_time` TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP
// ) DEFAULT CHARSET=utf8;
// GO;
const pirzeType = {
1: '谢谢惠顾',
2: '红包',
3: '优惠券'
};
export default {
name: 'PrizeItem',
data () {
return {
split: 0.5,
columns1: [
actId: 0,
split: 0.3,
prizeColumns: [
{
title: '位置序号',
key: 'prize_idx'
},
{
title: '奖品名称',
key: 'name'
},
{
title: '奖品类型',
key: 'age'
render: (h, {row}) => {
return h('span', {}, pirzeType[row.type]);
}
},
{
title: '奖品值',
key: 'address'
key: 'value'
},
{
title: '奖品总数',
key: 'address'
key: 'total'
},
{
title: '奖品图片',
key: 'address'
title: '中奖概率',
key: 'chance'
},
{
title: '中奖背景图',
key: 'address'
}
],
data1: [
{
name: 'John Brown',
age: 18,
address: 'New York No. 1 Lake Park',
total: 'New York No. 1 Lake Park',
img: 'New York No. 1 Lake Park',
got_img: '2016-10-03'
key: 'prize_bg',
render: (h, {row}) => {
return h('img', {
attrs: {
src: row.prize_bg
},
style: {
width: '100%',
height: 'auto'
}
});
}
},
{
name: 'John Brown',
age: 18,
address: 'New York No. 1 Lake Park',
total: 'New York No. 1 Lake Park',
img: 'New York No. 1 Lake Park',
got_img: '2016-10-03'
title: '奖品操作',
render: (h, {row}) => {
return h('Button', {
props: {
type: 'error',
size: 'small'
},
on: {
click: () => {
this.deletePrize(row.id);
}
}
}, '删除');
}
}
],
formValidate: {
prize: {
act_id: 20,
name: '',
mail: '',
city: '',
gender: '',
interest: [],
date: '',
time: '',
desc: ''
}
type: 1,
value: '',
img: '',
total: '',
chance: '',
prize_bg: '',
prize_idx: ''
},
prizes: []
}
},
methods: {
addPrize() {
$.ajax({
method: 'post',
url: '/admin/wheelSurf/api/prize/create',
contentType: 'application/json',
data: JSON.stringify([this.prize])
}).then(res => {
if (res.code === 200) {
this.$Message.success('奖品新增成功');
this.prizeList();
} else {
this.$Message.error(res.msg);
}
});
},
deletePrize(id) {
this.$Modal.warning({
title: '删除',
content: '奖品删除后不可恢复,确认删除?',
onOk: () => {
$.ajax({
url: '/admin/wheelSurf/api/prize/delete',
data: {id}
}).then(res => {
if (res.code === 200) {
this.$Message.success('奖品删除成功')
}
this.prizeList();
});
}
});
},
prizeList() {
$.ajax({
url: '/admin/wheelSurf/api/prize/list',
data: {act_id: this.actId}
}).then(res => {
if (res.code === 200) {
this.prizes = res.data;
}
});
},
bindUpload() {
window.qn_dynamic_el_upload(this.$refs.winPrizeBg, url => {
this.prize.prize_bg = url;
});
}
},
mounted() {
window.qn_dynamic_el_upload(this.$refs.prizeImg);
window.qn_dynamic_el_upload(this.$refs.gotPrizeBg);
this.actId = this.$route.query.actId;
this.bindUpload();
this.prizeList();
}
}
</script>
... ... @@ -135,18 +192,27 @@
.split-pane {
padding: 10px;
&.right {
padding-left: 20px;
}
&
.right {
padding-left: 20px;
}
}
.add-btn {
text-align: center;
margin: 0 auto;
}
.save {
text-align: center;
padding-top: 20px;
}
.win-prize-bg {
width: 100%;
max-width: 150px;
height: auto;
}
</style>
... ...