|
|
<template>
|
|
|
<div class="prize-add">
|
|
|
<div class="demo-split">
|
|
|
<Split v-model="split">
|
|
|
<div slot="left" class="split-pane">
|
|
|
<Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :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>
|
|
|
<Button type="primary">添加</Button>
|
|
|
</div>
|
|
|
<div slot="right" class="split-pane right">
|
|
|
<Table :columns="columns1" :data="data1"></Table>
|
|
|
<Button type="error">保存所有商品</Button>
|
|
|
</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;
|
|
|
export default {
|
|
|
name: 'PrizeItem',
|
|
|
data () {
|
|
|
return {
|
|
|
split: 0.5,
|
|
|
|
|
|
columns1: [
|
|
|
{
|
|
|
title: '奖品名称',
|
|
|
key: 'name'
|
|
|
},
|
|
|
{
|
|
|
title: '奖品类型',
|
|
|
key: 'age'
|
|
|
},
|
|
|
{
|
|
|
title: '奖品值',
|
|
|
key: 'address'
|
|
|
},
|
|
|
{
|
|
|
title: '奖品总数',
|
|
|
key: 'address'
|
|
|
},
|
|
|
{
|
|
|
title: '奖品图片',
|
|
|
key: 'address'
|
|
|
},
|
|
|
{
|
|
|
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'
|
|
|
},
|
|
|
{
|
|
|
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'
|
|
|
}
|
|
|
],
|
|
|
formValidate: {
|
|
|
name: '',
|
|
|
mail: '',
|
|
|
city: '',
|
|
|
gender: '',
|
|
|
interest: [],
|
|
|
date: '',
|
|
|
time: '',
|
|
|
desc: ''
|
|
|
},
|
|
|
ruleValidate: {
|
|
|
name: [
|
|
|
{ required: true, message: 'The name cannot be empty', trigger: 'blur' }
|
|
|
],
|
|
|
mail: [
|
|
|
{ required: true, message: 'Mailbox cannot be empty', trigger: 'blur' },
|
|
|
{ type: 'email', message: 'Incorrect email format', trigger: 'blur' }
|
|
|
],
|
|
|
city: [
|
|
|
{ required: true, message: 'Please select the city', trigger: 'change' }
|
|
|
],
|
|
|
gender: [
|
|
|
{ required: true, message: 'Please select gender', trigger: 'change' }
|
|
|
],
|
|
|
interest: [
|
|
|
{ required: true, type: 'array', min: 1, message: 'Choose at least one hobby', trigger: 'change' },
|
|
|
{ type: 'array', max: 2, message: 'Choose two hobbies at best', trigger: 'change' }
|
|
|
],
|
|
|
date: [
|
|
|
{ required: true, type: 'date', message: 'Please select the date', trigger: 'change' }
|
|
|
],
|
|
|
time: [
|
|
|
{ required: true, type: 'string', message: 'Please select time', trigger: 'change' }
|
|
|
],
|
|
|
desc: [
|
|
|
{ required: true, message: 'Please enter a personal introduction', trigger: 'blur' },
|
|
|
{ type: 'string', min: 20, message: 'Introduce no less than 20 words', trigger: 'blur' }
|
|
|
]
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
|
|
|
|
|
|
|
},
|
|
|
mounted() {
|
|
|
window.qn_dynamic_el_upload(this.$refs.prizeImg);
|
|
|
window.qn_dynamic_el_upload(this.$refs.gotPrizeBg);
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
<style lang="scss">
|
|
|
.split-pane {
|
|
|
padding: 10px;
|
|
|
|
|
|
&.right {
|
|
|
padding-left: 20px;
|
|
|
}
|
|
|
}
|
|
|
</style>
|
|
|
|
|
|
|
...
|
...
|
|