qimall/addons/Scratch/backend/views/scratch/edit.php

<?php

use common\helpers\ComponentHelper;

//自定义公共方法
//ComponentHelper::loadComponentView('common-js', dirname(__DIR__) . '/components');

?>
<style>
    .form-body {
        padding: 20px;
        background-color: #fff;
        margin-bottom: 20px;
    }

    .form-button {
        margin: 0;
    }

    .form-button .el-form-item__content {
        margin-left: 0 !important;
    }

    .button-item {
        padding: 9px 25px;
    }
</style>
<section id="app" v-cloak>
    <el-card shadow="never" style="border:0" body-style="background-color: #f3f3f3;padding: 10px 0 0;">
        <div slot="header" class="clearfix">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                    <span style="color: #409EFF;cursor: pointer"
                          @click="$navigate({r:'scratch/scratch/index'})">奖品列表</span>
                </el-breadcrumb-item>
                <el-breadcrumb-item>添加奖品</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="text item form-body">
            <el-form :model="form" v-loading="loading" label-width="180px" :rules="FormRules" ref="form"
                     style="width: 50%;">
                <el-form-item label="奖品选择" size="small" prop="type">
                    <el-radio v-model="form.type"
                              v-for="(item, index) in types"
                              v-if="((is_coupon==true && index==3) || (index!=3)) && (index!=1)"
                              :key="index"
                              :value="index"
                              :label="index"
                    >
                        {{item}}
                    </el-radio>
                </el-form-item>
                <el-form-item label="状态" size="small" prop="status">
                    <el-switch v-model="form.status" active-value="1" inactive-value="0"></el-switch>
                </el-form-item>

                <el-form-item label="奖品图标" prop="pic">
                    <com-attachment v-if="!form.pic" :multiple="false" :max="1" type="images" @selected="coverPic">
                        <div class="card-upload">
                            <i class="el-icon-plus"></i>
                        </div>
                    </com-attachment>
                    <div class="card-coverimg" v-else>
                        <el-image style="width: 80px; height: 80px" :src="form.pic"></el-image>
                        <el-button @click="delPic('pic')" class="icon-close" type="primary" size="mini"
                                   icon="el-icon-close" circle></el-button>
                    </div>
                    <p class="tips-text">建议尺寸：750*750像素。</p>
                </el-form-item>

                <el-form-item label="奖品名称" size="small" prop="name">
                    <el-input
                            v-model="form.name"
                            maxlength="10"
                            show-word-limit
                            auto-complete="off"
                    ></el-input>
                </el-form-item>

                <el-form-item label="红包额度" size="small" prop="price" v-if="form.type == 1">
                    <el-input v-model="form.price" auto-complete="off">
                        <template slot="append">元</template>
                    </el-input>
                </el-form-item>
                <el-form-item label="奖励额度" size="small" prop="balance" v-if="form.type == 2">
                    <el-input v-model="form.balance" auto-complete="off">
                        <template slot="append">元</template>
                    </el-input>
                </el-form-item>
                <el-form-item label="优惠券" size="small" prop="coupon_id" v-if="form.type == 3">
                    <el-select style="width: 180px;" size="small" v-model="form.coupon_id">
                        <el-option
                                v-for="item in coupon"
                                :key="item.id"
                                :value="item.id"
                                :label="item.name">
                        </el-option>
                    </el-select>
                    <el-button type="primary" plain @click="$navigate({r:'coupon/default/edit'})">新增优惠券</el-button>
                </el-form-item>
                <el-form-item label="积分额度" size="small" prop="num" v-if="form.type == 4">
                    <el-input v-model="form.num" type="num" auto-complete="off"></el-input>
                </el-form-item>

                <el-form-item label="商品搜索" prop="" v-if="form.type == 5">
                    <el-autocomplete
                            v-model="form.nickname"
                            value-key="goods_name"
                            :fetch-suggestions="querySearchAsync"
                            placeholder="请输入内容"
                            @select="clerkClick"
                    ></el-autocomplete>
                </el-form-item>

                <el-form-item label="规格选择" prop="attr_id" v-if="form.type == 5">
                    <el-select v-model="form.attr_id" placeholder="无">
                        <el-option v-for="item in form.attr_list" :label="item.name" :value="item.id"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="奖励名额" size="small" prop="stock">
                    <el-input type="text" v-model="form.stock" auto-complete="off"  maxlength="6" show-word-limit></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" size="small" @click="onSubmit">提交</el-button>
                    <el-button @click="handleCancel" size="small">取消</el-button>
                </el-form-item>
            </el-form>
        </div>
    </el-card>
</section>

<script>
    const app = new Vue({
        el: '#app',
        data() {
            return {
                form: {type: '2', name: '', pic: '', status: '0', goods_id: 0, attr_id: null, attr_list: []},
                is_coupon: false,
                coupon: [],
                types: [],
                goods_list: [],
                loading: false,
                FormRules: {
                    stock: [
                        {required: true, message: '库存不能为空', trigger: 'blur'},
                    ],
                    num: [
                        {required: true, message: '积分数量不能为空', trigger: 'blur'},
                        {required: true, pattern: /^[1-9]\d{0,8}$/, message: '积分数量必须在1~999999999以内'}
                    ],
                    price: [
                        {required: true, message: '红包金额不能为空', trigger: 'blur'},
                        {
                            pattern: /^(?!0$)([1-9][0-9]{0,8}|0)(\.(?![0]{1,2}$)[0-9]{1,2})?$/,
                            message: '红包金额必须在0.01~999999999.99以内'
                        }
                    ],
                    balance: [
                        {required: true, message: '奖励额度不能为空', trigger: 'blur'},
                        {
                            pattern: /^(?!0$)([1-9][0-9]{0,8}|0)(\.(?![0]{1,2}$)[0-9]{1,2})?$/,
                            message: '奖励额度必须在0.01~999999999.99以内'
                        }
                    ],
                    status: [
                        {required: true}
                    ],
                    type: [
                        {required: true, message: '请选择类型'}
                    ],
                    name: [
                        {required: true, message: '请输入奖品名称'}
                    ],
                    pic: [
                        {required: true, message: '请选择奖品图标'}
                    ],
                    coupon_id: [
                        {required: true, message: '请选择优惠券'}
                    ],
                    attr_id: [
                        {required: true, message: '请选择规格', trigger: 'blur'}
                    ]
                },
                keyword: null,
            };
        },
        watch: {
            //字段值监测变动，进行数据处理
            'form.num'(val) {
                this.form.num = numberHandle(val);
            },
            //字段值监测变动，进行数据处理
            'form.stock'(val) {
                this.form.stock = numberHandle(val);
            },
        },
        methods: {
            goodsSelect(param) {
                for (let j in param) {
                    let item = param[j];
                    if (this.goods_list.length > 1) {
                        this.$message.error('指定商品不能大于1个');
                        return;
                    }
                    let flag = true;
                    for (let i in this.goods_list) {
                        if (this.goods_list[i].id == item.goods_warehouse_id) {
                            flag = false;
                            break;
                        }
                    }
                    if (flag) {
                        this.goods_list.push({
                            id: item.id,
                            name: item.name,
                            cover_pic: item.goodsWarehouse.cover_pic,
                            price: item.price,
                            goods_stock: item.goods_stock,
                        });
                        this.form.goods_id = item.id;
                    }
                }
                if (this.goods_list.length > 1) {
                    this.$message.error('指定商品不能大于1个');
                    return;
                }
                console.log(this.goods_list);
            },
            deleteGoods(index) {
                this.goods_list.splice(index, 1);
            },
            //搜索
            querySearchAsync(queryString, cb) {
                this.keyword = queryString;
                this.clerkUser(cb);
            },

            clerkClick(row) {
                this.form.attr_id = null;
                this.form.goods_id = row.id;
                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;
            },

            clerkUser(cb) {
                request({
                    params: {
                        r: 'scratch/scratch/search-goods',
                        keyword: this.keyword,
                        status: 1,
                    },
                }).then(e => {
                    if (e.data.code === 0) {
                        cb(e.data.data.list);
                    } else {
                        this.$message.error(e.data.msg);
                    }
                }).catch(e => {
                });
            },

            handleCancel: function () {
                window.history.go(-1)
            },

            onSubmit() {
                let _this = this;
                this.$refs.form.validate((valid) => {
                    if (valid) {
                        let para = Object.assign(this.form);
                        request({
                            params: {
                                r: 'scratch/scratch/save-edit',
                            },
                            data: para,
                            method: 'post'
                        }).then(e => {
                            if (e.data.code == 0) {
                                const h = this.$createElement;
                                this.$message({message: e.data.msg, type: 'success'});

                                setTimeout(function(){
                                    navigateTo({ r: 'scratch/scratch/index' });
                                },300);
                            } else {
                                this.$message({message: e.data.msg, type: 'error'});
                            }
                        }).catch(e => {
                            this.$alert(e.data.msg, '提示', {
                                confirmButtonText: '确定'
                            })
                        });
                    }
                });
            },
            getList() {
                this.loading = true;
                let _this = this;
                request({
                    params: {
                        r: 'scratch/scratch/get-edit',
                        id: getQuery('id'),
                    },
                    method: 'get'
                }).then(e => {
                    this.loading = false;
                    if (e.data.code == 0) {
                        _this.is_coupon = e.data.data.is_coupon;
                        _this.coupon = e.data.data.coupon;
                        _this.types = e.data.data.types;

                    }
                })
            },
            coverPic(e) { // 选择图片
                this.form.pic = e[0].url
            },
            delPic(type, index) { // 删除图片
                switch (type) {
                    case 'pic':
                        this.form.pic = ''
                        break;
                    default:
                        break;
                }
            },
        },
        mounted() {
            this.getList();
        }
    })
</script>