qimall/addons/Recharge/backend/views/default/edit.php

<!-- 引一个当前组件 -->
<?php

use common\helpers\ComponentHelper;

use common\helpers\AddonHelper;

//Yii::$app->loadComponentView('com-coupon');

ComponentHelper::loadComponentView('coupon-select', AddonHelper::getAddonRootPath('Coupon') . 'backend/views/components');
?>

<div id="app" v-cloak>
    <el-card shadow="never" style="border:0;min-width: 1200px;">
        <el-form ref="formData" :model="formData" label-width="90px" :rules="rules">
            <el-form-item label="活动名称" prop="name">
                <el-input v-model="formData.name" style="max-width: 200px;"></el-input>
            </el-form-item>
            <el-form-item label="活动时间" prop="dataTime">
                <el-date-picker
                        v-model="formData.dataTime"
                        type="datetimerange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        @change="updateTime">
                </el-date-picker>
            </el-form-item>
            <el-form-item label="赠送说明">
                <el-input type="textarea" v-model="formData.give_desc" style="max-width: 400px;"></el-input>
            </el-form-item>
            <el-form-item label="赠送条件">
                <el-radio-group v-model="formData.give_cond">
                    <el-radio :label="0">单次充值</el-radio>
                    <el-radio :label="1">累计充值</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="赠送奖励">
                <el-table :data="rewardInfo" stripe style="width: 100%">
                    <el-table-column prop="num" label="赠送条件" width="240" class="accon">
                        <template slot-scope="scope">
                            满
                            <el-input v-model="scope.row.num" type="number" style="max-width: 150px;padding-left: 10px;"
                                      @input="validatorInfo($event,scope.$index)">
                                <template slot="append">元</template>
                            </el-input>
                        </template>
                    </el-table-column>
                    <el-table-column prop="data" label="赠送内容">
                        <template slot-scope="scope">
                            <div style="margin-bottom: 14px;" v-for="(type,index) in scope.row.data" :key="index">
                                <div style="margin-bottom: 10px;" flex>
                                    <el-select v-model="scope.row.data[index].key" placeholder="请选择"
                                               @change="updateType($event,scope.$index,index)">
                                        <el-option
                                                v-for="item in rechargeType"
                                                :key="item.value"
                                                :label="item.label"
                                                :value="item.value"
                                                :disabled="scope.row.data.findIndex(v => v.key == item.value) != -1"
                                        >
                                        </el-option>
                                    </el-select>
                                    <el-button v-if="scope.row.data[index].key == 0" style="margin-left: 12px;"
                                               @click="openCouponPop(scope.$index)">选择优惠券
                                    </el-button>
                                    <div style="margin-left: 10px;" v-else>
                                        <el-input v-model="scope.row.data[index].data" type="number"
                                                  @input="validatorInfo($event,scope.$index,2,scope.row.data[index].key)">
                                            <template slot="append">{{scope.row.data[index].key == 2?'分':'元'}}
                                            </template>
                                        </el-input>
                                    </div>
                                    <el-button @click="delAward(scope.row.data[index].key,scope.$index)"
                                               v-if="scope.row.data.length > 1" type="text" icon="el-icon-close"
                                               style="color: #ec1717;font-size: 20px;padding: 0;margin-left: 12px;"></el-button>
                                </div>
                                <el-table v-if="scope.row.data[index].key == 0" :data="scope.row.data[index].data"
                                          stripe style="width: 100%;">
                                    <el-table-column prop="name" label="优惠券名称" width="160"></el-table-column>
                                    <el-table-column prop="discount_method" label="优惠券内容"></el-table-column>
                                    <el-table-column label="库存（张）" width="160">
                                        <template slot-scope="couponScope">
                                            {{couponScope.row.total_count == -1?'不限量':couponScope.row.total_count}}
                                        </template>
                                    </el-table-column>
                                    <el-table-column prop="dcount" label="赠送张数" width="160">
                                        <template slot-scope="couponScope">
                                            <el-input v-model="couponScope.row.num" type="number"
                                                      @input="validatorInfo($event,scope.$index,3,0,couponScope.$index)">
                                                <template slot="append">张</template>
                                            </el-input>
                                        </template>
                                    </el-table-column>
                                    <el-table-column label="操作" width="100" align="center">
                                        <template slot-scope="couponScope">
                                            <el-button type="text" size="small"
                                                       @click="delCoupon(couponScope.$index,scope.$index)">删除
                                            </el-button>
                                        </template>
                                    </el-table-column>
                                </el-table>
                            </div>
                            <div v-if="scope.row.data.length != rechargeType.length">
                                <el-button @click="addAward(scope.$index)" size="small" plain>添加奖励内容</el-button>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" width="100" align="center">
                        <template slot-scope="scope">
                            <el-button @click="deleteReward(scope.$index)" type="text" size="small">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <div>
                    <el-button size="small" style="margin-top: 10px;" @click="addRewardInfo">添加赠送条件</el-button>
                </div>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm" :loading="subLoading">保存</el-button>
            </el-form-item>
        </el-form>

        <!-- 优惠券弹窗 -->
        <!--        <com-coupon :coupon-pop="couponPop" :sel-coupon="selCoupon" @close="showCoupon" @submit="determine"></com-coupon>-->
        <coupon-select :coupon-loading="couponPop" :coupon_arr="coupon_arr"
                       @submit="handleCoupon"
                       @close="showCoupon"></coupon-select>
    </el-card>
</div>

<script>
    const app = new Vue({
        el: '#app',
        data() {
            return {
                id: -1,
                formData: {
                    name: "",
                    start_at: "",
                    end_at: "",
                    give_desc: "",
                    give_cond: 0,
                    dataTime: [],
                    give_info: [],
                },
                coupon_arr: [],
                couponLoading: false,
                rechargeType: [
                    {
                        value: 0,
                        label: '优惠券'
                    },
                    {
                        value: 1,
                        label: '余额'
                    },
                    {
                        value: 2,
                        label: '积分'
                    },
                    // {
                    //     value: '3',
                    //     label: '红包'
                    // },
                ],
                // typeArr: ['coupon', 'balance', 'score', 'res_packet'], //跟rechargeType对应
                typeArr: ['coupon', 'balance', 'score'], //跟rechargeType对应
                selRechargeType: [{
                    key: 0,
                    type: 'coupon',
                    data: [],
                }],
                rewardInfo: [{
                    num: 0,
                    data: [{
                        key: 0,
                        name: "优惠券",
                        type: 'coupon',
                        data: []
                    }],
                }],//奖励内容
                couponPop: false,
                couponPopIndex: -1,
                rules: {
                    name: [{required: true, message: '活动名称不能为空', trigger: 'blur'},],
                    dataTime: [{required: true, message: '活动时间不能为空', trigger: 'blur'}],
                },
                subLoading: false,
                selCoupon: [],//打开优惠券弹窗传递已选中的优惠券
                coupon_arr: [],//打开优惠券弹窗传递已选中的优惠券
            }
        },
        created() {
            if (getQuery('id') && getQuery('id') != 0) {
                this.id = getQuery('id');
                this.getRechargeData();
            }
        },
        methods: {
            // 获取充值信息
            getRechargeData() {
                request({
                    params: {
                        r: '/recharge/default/detail',
                    },
                    method: 'post',
                    data: {
                        id: this.id,
                    }
                }).then(res => {
                    if (res.data.code == 0) {
                        this.formData = res.data.data;
                        this.$set(this.formData,'dataTime',[new Date(res.data.data.start_at * 1000), new Date(res.data.data.end_at * 1000)])
                        this.rewardInfo = res.data.data.give_info;
                        console.log(this.formData.dataTime)
                    }
                })
            },
            // 添加奖励条件
            addAward(index) {
                let key = 0;
                for (let i = 0; i < this.rechargeType.length; i++) {
                    let dataIndex = this.rewardInfo[index].data.findIndex(v => v.key == this.rechargeType[i].value);
                    if (dataIndex == -1) {
                        key = i;
                        break;
                    }
                }
                let obj = {
                    key,
                    name: this.rechargeType[key].label,
                    type: this.typeArr[key],
                    data: key == 0 ? [] : "",
                }
                if (key != 0) {
                    obj.data = 0;
                }
                this.rewardInfo[index].data.push(obj);

            },
            // 删除奖励条件
            delAward(key, index) {
                let couponIndex = this.rewardInfo[index].data.findIndex(v => v.key == key);
                this.rewardInfo[index].data.splice(couponIndex, 1);
            },
            // 打开优惠券弹窗
            openCouponPop(index) {
                this.couponPopIndex = index;
                let dataIndex = this.rewardInfo[index].data.findIndex(v => v.type == 'coupon');
                this.selCoupon = this.rewardInfo[index].data[dataIndex].data;
                this.coupon_arr = this.rewardInfo[index].data[dataIndex].data;
                this.couponPop = true;
            },
            showCoupon() {
                this.couponPopIndex = -1;
                this.couponPop = false;
            },
            //弹窗确定
            determine(arr) {
                let couponPopData = this.rewardInfo[this.couponPopIndex].data;
                let couponIndex = couponPopData.findIndex(v => v.key == 0);
                if (couponIndex != -1) {
                    this.rewardInfo[this.couponPopIndex].data[couponIndex].data = arr;
                }
                this.couponPop = false;
            },
            // 删除优惠券
            delCoupon(selCouponIndex, index) {
                let couponPopData = this.rewardInfo[index].data;
                let couponIndex = couponPopData.findIndex(v => v.key == 0);
                if (couponIndex != -1) {
                    this.rewardInfo[index].data[couponIndex].data.splice(selCouponIndex, 1);
                }
            },
            handleCoupon(data) {
                this.couponLoading = false;
                let couponPopData = this.rewardInfo[this.couponPopIndex].data;
                let couponIndex = couponPopData.findIndex(v => v.key == 0);
                if(couponIndex != -1){
                    this.rewardInfo[this.couponPopIndex].data[couponIndex].data = data;
                }
                this.couponPop = false;
            },
            // 添加赠送条件
            addRewardInfo() {
                this.rewardInfo.push({
                    num: 0,
                    data: [{
                        key: 0,
                        name: "优惠券",
                        type: 'coupon',
                        data: []
                    }],
                });
            },
            // 删除赠送条件
            deleteReward(index) {
                this.rewardInfo.splice(index, 1);
            },
            updateTime(val) {
                if (val) {
                    this.formData.start_at = val[0].getTime() / 1000;
                    this.formData.end_at = 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;
                    }

                }

            },
            // 赠送奖励表单严重
            validatorForm() {
                /* this.rewardInfo.forEach(v => {
                    if()
                }) */
                // let arr = ['优惠券', '余额', '积分', '红包'];
                let arr = ['优惠券', '余额', '积分'];
                for (let i = 0; i < this.rewardInfo.length; i++) {
                    if (this.rewardInfo[i].num <= 0) {
                        return "赠送条件不能小于等于0";
                    }
                    for (let j = 0; j < this.rewardInfo[i].data.length; j++) {
                        if (this.rewardInfo[i].data[j].key == 0) {
                            if (this.rewardInfo[i].data[j].data.length == 0) {
                                return "请选择赠送内容的优惠券";
                            }
                            text = this.validatorCoupon(this.rewardInfo[i].data[j].data);
                            if (text) return text;
                        } else {
                            if (!this.rewardInfo[i].data[j].data || this.rewardInfo[i].data[j].data <= 0) {
                                return "赠送内容的" + arr[this.rewardInfo[i].data[j].key] + "值不能为空或小于等于0";
                            }
                        }
                    }
                }

                for (let i = 0; i < this.rewardInfo.length; i++) {
                    let num = this.rewardInfo[i].num;
                    let arr = this.rewardInfo.filter(v => v.num == num);
                    if (arr.length > 1) {
                        return "赠送条件不能重复"
                    }
                }

                return "";
            },
            // 验证优惠券
            validatorCoupon(couponList) {
                for (let i = 0; i < couponList.length; i++) {
                    if (couponList[i].num <= 0) {
                        return "优惠券赠送数量不能小于等于0";
                    }
                }
                return "";
            },
            // 更改赠送内容类型
            updateType(key, index, dataIndex) {
                this.rewardInfo[index].data[dataIndex].name = this.rechargeType[key].label;
                this.rewardInfo[index].data[dataIndex].type = this.typeArr[key];
                if (key == 0) {
                    this.rewardInfo[index].data[dataIndex].data = [];
                } else {
                    if (Array.isArray(this.rewardInfo[index].data[dataIndex].data)) {
                        this.rewardInfo[index].data[dataIndex].data = 0;
                    }
                }
            },
            // 保存
            submitForm() {
                this.$refs['formData'].validate((valid) => {
                    if (valid) {
                        let text = this.validatorForm();
                        console.info(text);
                        if (text) {
                            this.$message.error(text);
                            return;
                        }
                        if (!this.formData.id) {
                            if (this.formData.start_at < (Date.parse(new Date()) / 1000)) {
                                this.$message.error('开始时间只能创建当前时间或者之后的时间');
                                return;
                            }
                        }
                        this.$set(this.formData, 'give_info', this.rewardInfo);
                        console.log(this.formData)
                        this.subLoading = true;
                        this.$request({
                            params: {
                                r: 'recharge/default/edit',
                            },
                            method: 'post',
                            data: this.formData,
                        }).then(res => {
                            this.subLoading = false;
                            if (res.data.code == 0) {
                                this.$message.success("保存成功");
                                navigateTo({
                                    r: "recharge/default/index"
                                })
                            } else {
                                this.$message.error(res.data.msg);
                            }
                        }).catch(e => {
                            this.btnLoading = false;
                        });
                    }
                });
            },
        },
    })


</script>


<style>
    .el-table_1_column_1 .cell {
        display: flex;
        align-items: center;
    }
</style>