<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> </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> </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: '' } } }, 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; } } .add-btn { text-align: center; margin: 0 auto; } .save { text-align: center; padding-top: 20px; } </style>