qimall/addons/Sudoku/backend/views/default/index.php

<?php

use common\helpers\ComponentHelper;
ComponentHelper::loadComponentView('com-dialog-select');
ComponentHelper::loadComponentView('com-image');
?>
<?php defined('YII_ENV') or exit('Access Denied'); ?>
<style>
    .preview {
        background-color: #fff;
        border-radius: 30px;
        padding: 40px 12.5px;
        width: 400px;
        height: 740px;
        position: relative;
    }

    .preview-icon {
        position: absolute;
        height: 45%;
        top: 51%;
        left: 17%;
        right: 10%;
    }

    .el-tabs__nav-wrap .el-tabs__nav-scroll {
        height: 468px !important;
        background: #f3f3f3;
    }

    .is-left.is-active {
        background: #ffffff;
        color: #409EFF;
    }

    .el-tabs--card > .el-tabs__header .el-tabs__nav {
        border-left: none;
        border-top: none;
    }

    .setting-menu {
        background-color: #fff;
        margin-left: 1%;
        width: 100%;
        height: 100%;
        position: relative;
        overflow: visible;
    }

    .button-item {
        padding: 9px 25px;
        bottom: -50px;
        left: 0;
    }

    .el-form-item {
        margin-bottom: 2%;
    }

    .pond-left {
        height: 26.5%;
        padding: 4% 4% 7%;
        width: 31%;
    }
</style>
<div id="app" v-cloak>
    <el-card shadow="never" style="border:0" body-style="background-color: #f3f3f3;padding: 10px 0 0;">
        <div slot="header">
            <span>奖品列表</span>
        </div>
        <div style="display: flex;">
            <div class="preview" v-loading=loading>
                <com-image style="border:2px solid #F4F5F6" src="/resources/addons/sudoku/img/pond.png" width='375px'
                           height='660px'></com-image>
                <div class="preview-icon">
                    <el-col :span=8 v-for="(item,index) in prizeImg" class="pond-left">
                        <el-image style="width:100%;height:100%;" :src="item" v-if="index != 4"
                                  fit="contain"></el-image>
                    </el-col>
                </div>
            </div>
            <el-card shadow="never" class="setting-menu" body-style="padding:2%;padding-right: 0">
                <div slot="header">
                    <span>奖品设置</span>
                </div>
                <div class="text item" v-loading=loading>
                    <el-form :model="form" label-width="80px" :rules='FormRules' ref="form">
                        <el-tabs type="card" style="border:1px solid #e2e2e2;height:650px" v-model="activeName"
                                 @tab-click="handleClick" tab-Position="left">
                            <el-tab-pane :label="item.name" :name="item.id" v-for="item in prize" :key="item.id">
                                <div style="margin-top:25px">
                                    <el-form-item label="奖品选择" prop="type">
                                        <el-radio v-model="form.type" label="5">谢谢参与</el-radio>
                                        <el-radio v-model="form.type" label="1">余额</el-radio>
                                        <el-radio v-model="form.type" label="2">优惠券</el-radio>
                                        <el-radio v-model="form.type" label="3">积分</el-radio>
                                        <el-radio v-model="form.type" label="4">赠品</el-radio>
                                    </el-form-item>
                                    <el-form-item prop="image_url">
                                        <com-attachment title="缩略图" @selected="singleSelected">
                                            <el-tooltip class="item"
                                                        effect="dark"
                                                        content="建议尺寸:150 * 80"
                                                        placement="top">
                                                <el-button size="mini">选择图片</el-button>
                                            </el-tooltip>
                                        </com-attachment>
                                        <el-image
                                                style="width: 80px; height: 80px"
                                                :src="form.image_url"
                                                fit="contain"></el-image>
                                    </el-form-item>
                                    <el-form-item label="名称" prop="name" v-if="form.type != 5">
                                        <el-input style='max-width: 180px' size="small" placeholder="奖品别名" size="small" v-model="form.name"
                                                  autocomplete="off"></el-input>
                                    </el-form-item>
                                    <el-form-item label="金额" prop="red_packet_amount" v-if="form.type == 1">
                                        <el-input style='max-width: 180px' size="small" type="number" v-model="form.red_packet_amount"
                                                  autocomplete="off"></el-input>
                                    </el-form-item>
                                    <el-form-item label="优惠券" prop="coupon_id" v-if="form.type == 2">
                                        <el-select size="small" v-model="form.coupon_id" size="small" placeholder="请选择">
                                            <el-option v-for="item in coupon" :label="item.name" :value='item.id'>
                                            </el-option>
                                        </el-select>
                                    </el-form-item>
                                    <el-form-item label="积分数量" prop="score" v-if="form.type == 3">
                                        <el-input style='max-width: 180px' size="small" size="small" type="number" v-model="form.score"
                                                  autocomplete="off"></el-input>
                                    </el-form-item>

                                    <el-form-item label="关联商品" v-if="form.type == 4" prop="goods_id">
                                        <el-radio-group v-model="form.goods_id">
                                            <com-dialog-select :multiple="true" @selected="goodsSelect" :params="{'sudoku_is_attr':0}" title="商品选择">
                                                <el-button type="text">选择商品</el-button>
                                            </com-dialog-select>
                                        </el-radio-group>
                                    </el-form-item>

                                    <el-form-item v-if="form.goods_id && form.type == 4">
                                        <template>
                                            <div style="color: #ff4544;">最多可关联1个商品</div>
                                            <div style="max-height: 300px;overflow-y: auto">
                                                <el-table :data="goods_list" :show-header="false" border>
                                                    <el-table-column label="">
                                                        <template slot-scope="scope">
                                                            <div flex>
                                                                <div style="padding-right: 10px;flex-grow: 0">
                                                                    <com-image mode="aspectFill" :src="scope.row.cover_pic"></com-image>
                                                                </div>
                                                                <div style="flex-grow: 1;">
                                                                    <com-ellipsis :line="2">{{scope.row.goods_name}}</com-ellipsis>
                                                                    <com-ellipsis :line="2" style="color: red;">￥{{scope.row.price}}</com-ellipsis>
                                                                </div>
                                                                <div style="flex-grow: 0;">
                                                                    <el-button @click="deleteGoods(scope.$index)" type="text" circle size="mini">
                                                                        删除
                                                                    </el-button>
                                                                </div>
                                                            </div>
                                                        </template>
                                                    </el-table-column>
                                                </el-table>
                                            </div>
                                        </template>
                                    </el-form-item>

                                    <el-form-item label="库存" prop="stock" v-if="form.type != 5">
                                        <el-input style='max-width: 180px' size="small" type="number" v-model="form.stock"
                                                  autocomplete="off"></el-input>
                                    </el-form-item>

                                    <el-form-item label="中奖概率" prop="probability">
                                        <el-input  style='max-width: 180px' size="small" type="number" @input = "handleInput($event)" @change = "probability_sum($event)" v-model="form.probability"
                                                   autocomplete="off"></el-input>
                                        <div class="tips-text" >(单位：%, 八个宫格概率总和需要小于100%)</div>
                                    </el-form-item>

                                </div>
                            </el-tab-pane>
                        </el-tabs>
                    </el-form>
                    <el-button class="button-item" type="primary" size="small"  @click="onSubmit">保存</el-button>
                </div>
            </el-card>
        </div>
    </el-card>
</div>
<script>
    const app = new Vue({
        el: '#app',
        data() {
            return {
                form: {
                    attr_id:null,
                    goods_id:null,
                    prize_id:1,
                    red_packet_amount:0,
                    probability:0,
                    type:1,
                    score:null,
                },
                keyword: null,
                coupon: [],
                activeName: '0',
                prizeImg: [],
                loading: false,
                attr: true,
                leave: false,
                goods: [],
                goods_list:[],
                list:[],
                goodsName: null,
                timeout: null,
                btnLoading: false,
                api_url:"",
                prize: [
                    {name: '奖品一', id: '0'},
                    {name: '奖品二', id: '1'},
                    {name: '奖品三', id: '2'},
                    {name: '奖品四', id: '3'},
                    {name: '奖品五', id: '4'},
                    {name: '奖品六', id: '5'},
                    {name: '奖品七', id: '6'},
                    {name: '奖品八', id: '7'}
                ],
                FormRules: {
                    red_packet_amount: [
                        {required: true, message: '红包金额不能为空', trigger: 'blur'},
                        {pattern: /^(?!0$)([1-9][0-9]{0,8}|0)(\.[0-9]{1,2})?$/,message:'红包金额必须在0.01~999999999以内'}
                    ],
                    score: [
                        {required: true, message: '积分数量不能为空', trigger: 'blur'},
                        {required: true, pattern: /^[1-9]\d{0,8}$/,message:'积分数量必须在1~999999999以内'}
                    ],
                    stock: [
                        {required: true, message: '库存不能为空', trigger: 'blur'},
                    ],
                    coupon_id: [
                        {required: true, message: '请选择优惠券', trigger: 'change'},
                    ],
                    type: [
                        {required: true, message: '奖品类型不能为空', trigger: 'blur'},
                    ],
                    attr_id: [
                        {required: true, message: '请输入规格', trigger: 'change'},
                    ],
                    goods_id: [
                        {required: true, message: '请选择关联商品', trigger: 'change'},
                    ],
                    probability: [
                        {required: true, message: '概率不能为空', trigger: 'blur'},
                        {pattern: /^(0|[1-9]\d*)(.\d+)?$/, message: '请输入非负数'}
                    ],
                },
                attr_list: [],
            };
        },

        methods: {
            //搜索
            querySearchAsync(queryString, callback) {
                var goods = [];
                request({
                    params: {
                        r: 'sudoku/default/index',
                        keyword: queryString
                    },
                }).then(e => {
                    if (e.data.code == 0) {
                        goods = e.data.data.list;
                        for (let i of goods) {
                            i.value = i.name
                        }
                        callback(goods);
                    }
                }).catch(e => {
                    this.loading = false;
                });
            },
            deleteGoods(index) {
                this.goods_list.splice(index, 1);
                this.goods_id = '';
                this.form.goods_id = '';
            },
            goodsSelect(param) {
                this.goods_list = [];
                for (let j in param) {
                    let item = param[j];
                    if (this.form.goods_id) {
                        this.$message.error('只能关联1个商品');
                        return;
                    }
                    this.form.goods_id = item.id;
                    var goods_data = {
                        id: item.id,
                        goods_name: item.goods_name,
                        price: item.price,
                        cover_pic: item.cover_pic,
                    };
                    this.goods_list.push(goods_data);
                    this.list[this.activeName].goods = goods_data;
                    console.log(this.goods_list,999999999999);
                }
            },
            clerkClick(row) {
                this.form.attr_id = null;
                this.form.attr_list = row.attr;
                if(this.form.attr_list && this.form.attr_list.length){
                    this.form.attr_id = this.form.attr_list[0].id;
                }
                this.form.goods_id = row.id
            },
            handleInput(event) { // 设置概率输入只能是正整数
                this.form.probability = event.replace(/[^0-9]\d*/g, '');
            },
            probability_sum(value){
                var sum = 0;
                var sum_probability = 0;
                for (var i = 0; i<8; i++){
                    if(this.activeName==i) {
                        sum = parseFloat(sum) + parseFloat(value);
                    }else{
                        sum_probability =  parseFloat(sum_probability) +  parseFloat(this.list[i].probability);
                        sum = parseFloat(sum) + parseFloat(this.list[i].probability);
                    }

                }
                $courrct = 100 - sum;
                $last_value = 100 - sum_probability;
                if($courrct <= 0){
                    this.form.probability =  $last_value;
                    this.$message('概率总和最大只能100%，可输入最大值是'+this.form.probability);
                }
            },
            // 选择商品
            handleSelect(item) {
                let that = this;
                if (item == "") {
                    that.$message.error('请输入商品名称');
                } else {
                    that.form.attr = item;
                    that.form.attr_list = item.attr_list;
                    that.form.attr_id = item.attr_list[0].id;
                    setTimeout(function () {
                        that.attr = true;
                    }, 500)
                }
            },
            // 隐藏规格
            hideAttr() {
                this.attr = false;
            },
            // 提交
            onSubmit() {
                this.$refs.form.validate((valid) => {
                    if (valid) {
                        this.btnLoading = true;
                        this.list[this.activeName] = this.form;
                        let para = Object.assign(this.list);
                        request({
                            params: {
                                r: 'sudoku/default/index',
                            },
                            data: {
                                list: para
                            },
                            method: 'post'
                        }).then(e => {
                            this.btnLoading = false;
                            if (e.data.code === 0) {
                                this.$alert(e.data.msg, {
                                    confirmButtonText: '确定',
                                    callback: action => {
                                        location.reload();
                                    }
                                });
                            } else {
                                this.$alert(e.data.msg, {
                                    confirmButtonText: '确定',
                                });
                            }
                        }).catch(e => {
                            this.btnLoading = false;
                            this.$alert(e.data.msg, {
                                confirmButtonText: '确定',
                            });
                        });
                    }
                });
            },
            // 展示图片
            singleSelected(list) {
                this.form.image_url = list.length ? list[0].url : null;
                this.imgFormat(list);
                console.log(list,this.prizeImg,"999***",this.list);
            },
            imgFormat(list) {
                this.prizeImg = [
                    this.list[0].image_url,
                    this.list[1].image_url,
                    this.list[2].image_url,
                    this.list[7].image_url,
                    '',
                    this.list[3].image_url,
                    this.list[6].image_url,
                    this.list[5].image_url,
                    this.list[4].image_url,
                ];
            },
            // 表单验证没通过，不能切换
            toleave() {
                return this.$refs.form.validate().then(() => {
                    this.$refs.form.validate()
                }).catch(() => {
                    this.$message.error('填写完整后方能切换');
                    reject();
                });
            },
            // 切换左侧列表
            handleClick() {
                let that = this;
                setTimeout(function () {
                    that.goods_list = [];
                    that.form = that.list[that.activeName];
                    that.form.prize_id = parseInt(that.activeName)+1;
                    if(that.form.goods) that.goods_list[0] = that.form.goods;
                    console.log(that.form);
                    that.loading = false;
                }, 500)
            },

            getList() {
                this.loading = true;
                request({
                    params: {
                        r: 'sudoku/default/index',
                    },
                }).then(e => {
                    if (e.data.code == 0) {
                        this.loading = false;
                        this.coupon = e.data.data.coupon;
                        this.api_url = e.data.data.api_url;
                        if(e.data.data.list[0]){
                            this.list = e.data.data.list;
                            this.form = e.data.data.list[0];
                            if(this.form.goods) this.goods_list[0] = this.form.goods;
                            if (this.list.length < 8) {
                                let diff_len = 8 - this.list.length;
                                for (let i = 0; i < diff_len; i++) {
                                    console.log(i, this.list.length, 8 - this.list.length)
                                    this.list.push({
                                        'name':'',
                                        'type':'',
                                        'goods_id':'',
                                        'score':'',
                                        'red_packet_amount':'',
                                        'image_url':this.api_url+'/resources/addons/sudoku/img/sudoku'+i+'.png',
                                        'coupon_id':'',
                                        'stock':'',
                                        'probability':'',
                                        'prize_id':i+1,
                                    })
                                }
                            }
                            for (var i = 0; i<e.data.data.list.length ; i++) {
                                this.list[i].type = this.list[i].type ? this.list[i].type.toString(): "5";
                            }

                            console.log('list',this.list);
                            this.form.type = this.form.type.toString();
                            this.form.coupon_id = this.form.coupon_id !='0' ? this.form.coupon_id:null;
                            this.imgFormat(this.list);
                        }else{
                            this.list = [];
                            for (var i = 0; i<8; i++){
                                this.list[i] = {
                                    'name':'',
                                    'type':'',
                                    'goods_id':'',
                                    'score':'',
                                    'red_packet_amount':'',
                                    'image_url':this.api_url+'/resources/addons/sudoku/img/sudoku'+i+'.png',
                                    'coupon_id':'',
                                    'stock':'',
                                    'probability':'',
                                    'prize_id':i+1,
                                };
                            }
                            this.form = this.list[0];
                            this.imgFormat(this.list);
                            console.log(this.api_url,6666666666666);
                        }
                    } else {
                        this.$message.error(e.data.msg);
                    }
                    this.loading = false;
                }).catch(e => {
                    this.loading = false;
                });
            },
        },
        mounted: function () {
            this.getList();
        },
    })
</script>