qimall/addons/RandomRedPacket/backend/views/index/edit.php

<!-- 引一个当前组件 -->
<?php
use common\helpers\ComponentHelper;
//use common\helpers\AddonHelper;
//if ($has_coupon) {
//    ComponentHelper::loadComponentView('coupon-select', AddonHelper::getAddonRootPath('Coupon') . 'backend/views/components');
//}
//ComponentHelper::loadComponentView('com-dialog-select');

ComponentHelper::loadComponentView('com-dialog-select');
?>

<div id="app" v-cloak>
    <el-card shadow="never" style="border:0;min-width: 1200px;">
        <el-form ref="formData" :model="formData" label-width="110px" :rules="rules">
            <el-form-item label="活动名称" prop="activities_name">
                <el-input v-model="formData.activities_name" style="max-width: 200px;"></el-input>
            </el-form-item>
            <el-form-item label="活动编号" prop="activities_number">
                <el-input v-model="formData.activities_number" style="max-width: 200px;" :disabled="true"></el-input>
            </el-form-item>
            <el-form-item label="活动时间" prop="dataTime" required>
                <el-date-picker
                    v-model="formData.dataTime"
                    type="datetimerange"
                    unlink-panels
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    :picker-options="pickerOptions"
                    @change="updateTime">
                </el-date-picker>
            </el-form-item>

            <el-form-item label="奖品类型" prop="reward_type">
                <el-radio-group v-model="formData.reward_type">
                    <el-radio :label="1">激活积分</el-radio>
                    <el-radio :label="2">贡献值</el-radio>
                    <el-radio :label="3">红包</el-radio>
                    <el-radio :label="4">余额</el-radio>
                </el-radio-group>
            </el-form-item>

<!--            <el-form-item  label="随机发放设置" class="coupon-item" >-->
<!--                <span style="padding-right: 10px;">每个用户随机领取</span>-->
<!--                <el-input onkeyup="value=toNumber(value,2)" :min="0" v-model="formData.min_value" placeholder="" style="width: 80px;margin-right: 20px;">-->
<!--                </el-input>-->
<!--                <span >~</span>-->
<!--                <el-input onkeyup="value=toNumber(value,2)" :min="0"  v-model="formData.max_value" placeholder="" style="width: 80px;margin: 0 20px">-->
<!--                </el-input>-->
<!--            </el-form-item>-->

            <template>
                <div class="app-container home" >
                    <el-form ref="formData" :inline="true" :model="formData" :rules="rules">
                        <label class="el-form-item__label section" style="width: 110px;">随机发放设置</label>
                            <el-form-item prop="min_value" :inline="true">
                                <el-input onkeyup="value=toNumber(value,2)" :min="0" v-model="formData.min_value" clearable="" style="width: 140px;margin-right: 20px;"/>
                            </el-form-item>
                            <span style="margin-right: 25px">~</span>
                            <el-form-item prop="max_value">
                                <el-input onkeyup="value=toNumber(value,2)" :min="0" v-model="formData.max_value" clearable="" style="width: 140px;margin-right: 20px;"/>
                            </el-form-item>
                    </el-form>
                </div>
            </template>




            <el-form-item label="发放总数" prop="sum_total">
                <el-input onkeyup="value=toNumber(value,2)" :min="0" v-model="formData.sum_total" style="max-width: 200px;"></el-input>
            </el-form-item>

            <el-form-item label="商品信息" prop="goods">
                <com-dialog-select :multiple="true" :url="goodsIndexUrl" @selected="goodsSelect" title="商品选择">
                    <el-button>选择商品</el-button>
                </com-dialog-select>
                <div class="table-body" style="padding-left: 0;padding-top: 10px;">
                    <template>
                        <el-table :data="formData.goods" border style="width: 50%">
                            <el-table-column label="商品ID" prop="id" width="80"></el-table-column>

                            <el-table-column label="商品名称" >
                                <template slot-scope="scope">
                                    <div flex="box:first">
                                        <div style="padding-right: 10px;">
                                            <com-image mode="aspectFill" :src="scope.row.cover_pic"></com-image>
                                        </div>
                                        <div flex="cross:top cross:center">
                                            {{scope.row.goods_name}}
                                        </div>
                                    </div>
                                </template>
                            </el-table-column>
                            <el-table-column label="成本价" width="100" prop="cost_price"></el-table-column>
                            <el-table-column label="库存" width="100" prop="stock"></el-table-column>

                            <el-table-column fixed="right" label="操作" width="100">
                                <template slot-scope="scope">
<!--                                    <el-button @click="handle('deleteGoods', scope.$index)" type="primary" size="mini">删除</el-button>-->
                                    <el-button @click="deleteGoods(scope.$index)" type="primary" size="mini">删除</el-button>
                                </template>
                            </el-table-column>
                        </el-table>

                    </template>
                </div>
            </el-form-item>

            <el-form-item label="活动推广" style="font-weight: bold;">
            </el-form-item>

            <el-form-item prop="detail_show" label="商品详情页">
                <el-checkbox v-model="formData.detail_show" true-label="1" false-label="0">活动商品是否开启"随机红包"标识</el-checkbox>
            </el-form-item>

            <el-form-item prop="index_show" label="首页的商品列表">
                <el-checkbox v-model="formData.index_show" true-label="1" false-label="0">活动商品是否开启“随机红包"标识</el-checkbox>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="submitForm" :loading="subLoading">保存</el-button>
            </el-form-item>
        </el-form>

    </el-card>
</div>

<script>
    const app = new Vue({
        el: '#app',
        data() {
            return {
                id: null,
                formData: {
                    activities_name: "",
                    activities_number: "",
                    start_at: "",
                    end_at: "",
                    reward_type: '',
                    dataTime: [],
                    goods:[],
                    detail_show:'',
                    index_show:'',
                    min_value:'',
                    max_value:'',
                    sum_total:'',
                    goods_id: [240,239],
                },
                goodsIndexUrl: 'random-red-packet/index/goods-list',
                couponPop: false,
                couponPopIndex: -1,
                rules: {
                    activities_name: [
                        { required: true, message: '活动名称不能为空', trigger: 'blur' },
                        { min: 1, max: 12, message: '长度在 1 到 12 个字符', trigger: 'blur' }
                    ],
                    dataTime: [{ required: true, message: '活动时间不能为空', trigger: 'blur' }],
                    goods: [{ required: true, message: '商品不能为空', trigger: 'blur' }],
                    reward_type: [{ required: true, message: '奖品类型不能为空', trigger: 'blur' }],
                    min_value: [
                        { required: true, message: '随机发放设置最小值不能为空', trigger: 'blur' },
                        { validator: this.validateMin, trigger: "blur" },
                    ],
                    max_value: [
                        { required: true, message: '随机发放设置最大值不能为空', trigger: 'blur' },
                        { validator: this.validateMax, trigger: "blur" },
                    ],
                    sum_total: [{ required: true, message: '发放总数不能为空', trigger: 'blur' }],
                },
                subLoading: false,
                selCoupon: [],//打开优惠券弹窗传递已选中的优惠券
                pickerOptions: {
                    shortcuts: [{
                        text: '7天',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            end.setTime(end.getTime() + 3600 * 1000 * 24 * 7);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '15天',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            end.setTime(end.getTime() + 3600 * 1000 * 24 * 15);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '30天',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            end.setTime(end.getTime() + 3600 * 1000 * 24 * 30);
                            picker.$emit('pick', [start, end]);
                        }
                    }]
                },
            }
        },
        created(){
            if (getQuery('id') && getQuery('id') != 0) {
                this.id = getQuery('id');
            }
            this.getDetail();
        },
        methods: {
            // 获取信息
            getDetail(){
                request({
                    params: {
                        r: 'random-red-packet/index/edit',
                        id: this.id,
                    },
                    method: 'get',
                }).then(res => {
                    console.info(res);
                    if(res.data.code == 0){
                        if(res.data.data.detail) {
                            this.formData = res.data.data.detail;
                            this.formData.detail_show = String(this.formData.detail_show);
                            this.formData.index_show = String(this.formData.index_show);
                            this.rewardInfo = res.data.data.detail.reward_info;
                            this.$set(this.formData, 'dataTime', [new Date(res.data.data.detail.start_at * 1000),new Date(res.data.data.detail.end_at * 1000)]);
                        }
                        this.level_arr = res.data.data.level_arr;
                    }
                })
            },
            // 选择商品
            goodsSelect(param) {
                // var goods = [];
                var goods = this.formData.goods;
                for (var item of param) {
                    goods.push({
                        id: item.id,
                        goods_name: item.goods_name,
                        cover_pic: item.cover_pic,
                        price: item.price,
                        stock: item.stock,
                        cost_price: item.cost_price,
                    });
                }
                this.formData.goods = goods;
                console.log(this.formData.goods,222222)
            },

            // 删除商品
            deleteGoods(index) {
                // this.formData.item_info.splice(index, 1);
                // this.formData.item_id = 0;
                this.formData.goods.splice(index, 1);
            },


            // 最小值判断：不得大于最大值
            validateMin(rule, value, callback) {
                const num = Number(value);
                const max = Number(this.formData.max_value);
                if (!max || num < max) {
                    return callback();
                }
                return callback(new Error("输入值不得大于最大值"));
            },
            // 最小值判断：不得小于最小值
            validateMax(rule, value, callback) {
                const num = Number(value);
                const min = Number(this.formData.min_value);
                if (!min || num > min) {
                    return callback();
                }
                return callback(new Error("输入值不得小于最小值"));
            },

            updateTime(val){
                if(val){
                    this.formData.start_at = parseInt(val[0].getTime() / 1000);
                    this.formData.end_at = parseInt(val[1].getTime() / 1000);
                } else {
                    this.formData.start_at = "";
                    this.formData.end_at = "";
                }
            },
            // 表单数值验证
            validatorInfo(val,index,type = 1,key,couponIndex){
                console.info(val,index,type,key,couponIndex);
                if(val == ''){
                    return;
                }
                let dataIndex = -1;
                if(type != 1){
                    dataIndex = this.rewardInfo[index].data.findIndex(v => v.key == key);
                }
                if(val <= 0){
                    if(type == 2){
                        this.rewardInfo[index].data[dataIndex].data = 0;
                    } else if(type == 3){
                        this.rewardInfo[index].data[dataIndex].data[couponIndex].num = 0;
                    } else {
                        this.rewardInfo[index].num = 0;
                    }
                    return;
                }
                // 是否能最多保留两位小数
                let reg = /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/;
                if(!reg.test(val) && type != 3){
                    let i = val.indexOf(".") + 3;
                    val = val.substr(0,i)
                    if(type == 2){
                        this.rewardInfo[index].data[dataIndex].data = val;
                    } else {
                        this.rewardInfo[index].num = val;
                    }
                }
                if(type == 3){
                    // total_count
                    val = parseInt(val);
                    let totalCount = this.rewardInfo[index].data[dataIndex].data[couponIndex].total_count;
                    if(totalCount < val && totalCount != -1){
                        this.rewardInfo[index].data[dataIndex].data[couponIndex].num = totalCount;
                    } else {
                        this.rewardInfo[index].data[dataIndex].data[couponIndex].num = val;
                    }

                }

            },

            // 保存
            submitForm(){
                this.formData.activities_name = this.formData.activities_name.toString();
                console.log(this.formData.activities_name.toString());
                console.log(112)
                console.log(this.formData,"=>")
                this.$refs['formData'].validate((valid) => {
                    if (valid) {
                        // let text = this.validatorForm();
                        // if(text){
                        //     this.$message.error(text);
                        //     return;
                        // }
                        if(!this.formData.id){
                            if(this.formData.start_at > this.formData.end_at){
                                this.$message.error('开始时间只能结束时间之后');
                                return;
                            }
                        }

                        if (this.formData.goods.length <= 0) {
                            this.$message.error('请选择商品');
                            return;
                        }
                        // if(this.rewardInfo.length == 0) {
                        //     this.$message.error('请选择添加奖励条件');
                        //     return;
                        // }
                        // this.$set(this.formData,'reward_info',this.rewardInfo);
                        // this.subLoading = true;
                        request({
                            params: {
                                r: 'random-red-packet/index/edit',
                            },
                            method: 'post',
                            data: this.formData
                        }).then(res => {
                            console.info(res);
                            this.subLoading = false;
                            if(res.data.code == 0){
                                this.$message.success("保存成功");
                                navigateTo({
                                    r: "random-red-packet/index/index"
                                })
                            } else {
                                this.$message.error(res.data.msg);
                            }

                        })
                    }
                });
            },
        },
    })


</script>


<style>
    .el-table_1_column_1  .cell{
        display: flex;
        align-items: center;
    }
    .section:before{
        content: "*";
        color: #F56C6C;
        margin-right: 4px;
    }
</style>