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

<style>
    .header {
        padding: 18px 20px;
        background: #fff;
        margin-bottom: 10px;
        border-radius: 5px;
        border: 1px solid #EBEEF5;
    }


    .el-button--success {
        background-color: #67c23a;
        border-color: #67c23a;
    }

    .header .el-button {
        padding: 6px 26px;
    }

    .main {
        background: #ffffff;
    }

    .el-button--success:hover {
        background: #85ce61;
        border-color: #85ce61;
    }

    .coupon_type_list_expired {
        width: 100px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        opacity: 0.2;
        zoom: 1.05;
    }

    .el-card {
        box-shadow: none !important;
    }

    .el-form-item {
        margin-bottom: 0;
    }

    .el-divider--horizontal {
        margin: 20px 0;
    }

    .sky .el-input__inner {
        height: 34px;
    }

    .line {
        background: #03C5FF;
        width: 5px;
        height: 20px;
        margin-right: 6px;
    }

    .rule_name .el-form-item__label {
        color: #333333;
        font-size: 14px;
        font-weight: 600;
    }

    .start {
        color: #EF1818;
        font-size: 14px;
        /*font-weight: 600;*/
        margin-right: 4px;
    }

    .type_text {
        font-size: 14px;
        font-weight: 600;
        color: #333;
        margin-right: 20px;
    }

    .detail_top {
        flex-wrap: wrap;
    }

    .detail_box {
        margin-top: 10px;
    }

    .coupon_box {
        /*width: 600px;*/
        margin-right: 50px;
    }

    .detail_top .coupon_box:last-child {
        margin-right: 0px;
    }

    .coupon_list_box {
        padding: 20px 20px 0 0;
        flex-wrap: wrap;
        box-sizing: border-box;
        overflow: hidden;
        /*height: 125px;*/
    }

    .coupon_list_box_active {
        height: auto;
    }

    .coupon_list_item {
        background: #F4F4F4;
        width: 275px;
        border-radius: 5px;
        position: relative;
        margin: 0 15px 15px 0;
        padding: 10px;
    }

    .add_coupon .el-button {
        padding: 6px 18px;
        margin: 20px 0;
    }

    .close_icon {
        font-size: 20px;
        font-weight: 700;
        position: absolute;
        right: 10px;
        top: 8px;
        cursor: pointer;
    }

    .coupon_list_title {
        font-size: 16px;
        margin-bottom: 10px;
        width: 220px;
    }

    .coupon_list_content {
        margin-bottom: 5px;
        font-size: 12px;
    }

    .more_btn {
        text-align: center;
        cursor: pointer;
        margin-top: 20px;
    }

    .more_icon {
        transform: rotate(0deg);
        transition: all 0.7s;
    }

    .show_more_icon {
        transform: rotate(180deg);
    }

    .show {
        height: auto;
    }

    .hide {
        height: 0;
        overflow: hidden;
    }

    .transform-hide {
        opacity: 0;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
        -webkit-transition: .3s;
        transition: .3s;
    }

    .transform-show {
        opacity: 1 !important;
        -webkit-transform: translateY(0) !important;
        transform: translateY(0) !important;
    }

    .is_divider {
        display: block;
    }

    @media screen and (min-width: 1540px) {
        .is_divider {
            display: none;
        }
    }

    .red_envelope_box {
        width: 600px;
        margin-right: 50px;
    }

    .red_envelope_box:last-child {
        margin-right: 0px;
    }

    .red_envelope_box .el-input {
        width: 150px;
    }

    .red_envelope_box .el-textarea {
        width: 250px;
    }

    .el-input {
        flex: 1;
    }

    .el-textarea {
        flex: 1;
    }

    .types_box {
        padding: 20px 20px 30px;
    }

    .label_title {
        font-weight: 600;
        margin-bottom: 8px;
        font-size: 16px;
    }

    .checkt_select {
        width: 140px;
    }

    .check_input {
        width: 200px;
        margin-left: 10px;
    }

    .check_btn_list .el-button {
        padding: 6px 14px;
        margin-bottom: 20px;
    }

    .el-dialog__footer {
        text-align: center;
    }

    .check_pagination {
        justify-content: flex-end;
        margin-top: 20px;
    }

    .level-box {
        margin-bottom: 20px;
        padding-left: 20px;
        overflow-y: auto;
    }

    .level-item {
        font-weight: 600;
        margin-right: 30px;
        cursor: pointer;
    }

    .level_item_active {
        color: #03C5FF;
    }

    /* 谷歌 */
    input::-webkit-outer-spin-button,
    input::-webkit-inner-spin-button {
        -webkit-appearance: none;
        appearance: none;
        margin: 0;
    }

    /* 火狐 */
    input {
        -moz-appearance: textfield;
    }

    /* 公共样式 */
    .flex {
        display: -webkit-box;
        display: -webkit-flex;
        /* #ifndef APP-NVUE */
        display: flex;
        /* #endif */
    }

    .flex-x-center {
        display: -webkit-box;
        display: -webkit-flex;
        /* #ifndef APP-NVUE */
        display: flex;
        /* #endif */
        -webkit-box-pack: center;
        -webkit-justify-content: center;
        -ms-flex-pack: center;
        justify-content: center;
    }

    .flex-x-between {
        display: -webkit-box;
        display: -webkit-flex;
        /* #ifndef APP-NVUE */
        display: flex;
        /* #endif */
        -webkit-box-pack: space-between;
        -webkit-justify-content: space-between;
        -ms-flex-pack: space-between;
        justify-content: space-between;
    }

    .flex-y-center {
        display: -webkit-box;
        display: -webkit-flex;
        /* #ifndef APP-NVUE */
        display: flex;
        /* #endif */
        -webkit-box-align: center;
        -webkit-align-items: center;
        -ms-flex-align: center;
        -ms-grid-row-align: center;
        align-items: center;
    }

    /* 溢出隐藏 */
    .over1 {
        text-overflow: -o-ellipsis-lastline;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
    }

    .over2 {
        text-overflow: -o-ellipsis-lastline;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }
</style>
<?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');
?>
<div id="app">
    <div class="header flex flex-x-between flex-y-center">
        <div>发放规则</div>
        <div>
            <el-button type="primary" @click="submit('ruleForm')">保存</el-button>
        </div>
    </div>

    <el-card v-loading='loading'>
        <el-form ref="ruleForm" :rules="rules" label-position='center' :model="ruleForm" label-width="auto">
            <div class="flex flex-y-center">
                <div class="type_text flex flex-x-between flex-y-center">
                    <div>{{ gift_type_name }}</div>
                </div>
            </div>

            <el-divider></el-divider>
            <div class="flex flex-y-center">
                <div class="line"></div>
                <div class="start">*</div>
                <div class="flex flex-x-between flex-y-center">
                    <div>状态</div>
                </div>
            </div>
            <div style="padding: 20px 0;">
                <el-radio v-model="ruleForm.status" :label="1">启用</el-radio>
                <el-radio v-model="ruleForm.status" :label="0">禁用</el-radio>
            </div>

            <el-divider></el-divider>
            <div class="flex flex-y-center">
                <div class="line"></div>
                <div class="start">*</div>
                <div class="flex flex-x-between flex-y-center">
                    <div>选择{{ level_name }}等级</div>
                </div>
            </div>

            <!-- 等级tabs -->
            <el-tabs v-model="activeName" style="margin-top: 20px;" type="card" @tab-click="handleClick">
                <el-tab-pane v-for="(name,level) in level_arr" :label="name" :key="name">
                    <div class="detail_box">
                        <div class="detail_top">
                            <div class="flex flex-y-center" style="flex-wrap: wrap;"  v-for="(title,type) in setting_type_arr">
                                <!-- 优惠券特殊处理start -->
                                <div class="coupon_box" v-if="type == 'coupon'">
                                    <div v-if="has_coupon">
                                        <div class="coupon_title flex flex-y-center">
                                            <div class="line"></div>
                                            <div style="margin-right: 6px;">{{ title }}</div>
                                            <el-tooltip class="item" effect="dark" content="所发优惠券不记入优惠券库存中" placement="right">
                                                <div class="el-icon-warning" style="margin-top: 2px;"></div>
                                            </el-tooltip>
                                        </div>
                                        <div class="add_coupon">
                                            <el-button type="primary" @click='handle("coupon_select",ruleForm.setting[type][level].arr, {gift_type:type,level_index:level})'>选择优惠券</el-button>
                                        </div>
                                        <div class="coupon_title flex flex-y-center">
                                            <div style="margin-right: 6px;">{{ title }}明细</div>
                                        </div>
                                        <div class="coupon_list_box flex-x-between flex" v-if="ruleForm.setting[type][level].arr" :class="{coupon_list_box_active:is_coupon_more}">
                                            <div class="coupon_list_item" v-for="(item,index) in ruleForm.setting[type][level].arr" :key='index'>
                                                <div class="coupon_list_title over1">{{item.name}}</div>
                                                <div class="coupon_list_content">优惠方式：{{item.discount_method}}</div>
                                                <div class="coupon_list_content">发放数量：{{item.num}}</div>
                                                <div class="el-icon-close close_icon" @click="handle('coupon_delete',ruleForm.setting[type][level].arr,index)"></div>
                                                <img v-if='item.status == 0' class='coupon_type_list_expired' src="/resources/img/common/gq.jpg">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!-- 优惠券特殊处理end -->

                                <!-- 商品特殊处理start -->
                                <div class="coupon_box" v-else-if="type == 'goods'">
                                    <div v-if="has_coupon">
                                        <div class="coupon_title flex flex-y-center">
                                            <div class="line"></div>
                                            <div style="margin-right: 6px;">{{ title }}</div>
                                        </div>
                                        <div class="add_coupon">
                                            <com-dialog-select v-model="bind_goods_id" :multiple="false" url="mall/goods/search"
                                                               @selected="selectGoodsWarehouse">
                                                <el-button type="primary" @click='handle("goods_select", ruleForm.setting[type][level], {gift_type:type,level_index:level})'>选择商品</el-button>
                                            </com-dialog-select>
                                        </div>
                                        <div class="coupon_title flex flex-y-center">
                                            <div style="margin-right: 6px;">{{ title }}明细</div>
                                        </div>
                                        <div class="coupon_list_box flex-x-between flex" v-if="Object.keys(ruleForm.setting[type][level]).length !== 0">
                                            <div class="table-body">
                                                <template>
                                                    <el-table
                                                            :data="[ruleForm.setting[type][level]]"
                                                            border
                                                            style="width: 680px">
                                                        <el-table-column
                                                                label="商品"
                                                                min-width="400">
                                                            <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>
                                                                        <div>
                                                                            {{scope.row.goods_name}}
                                                                        </div>
                                                                        <div>
                                                                            <span style="color:red;margin-right: 10px;">
                                                                                ￥{{scope.row.price}}
                                                                            </span>
                                                                            <span>
                                                                                库存：{{scope.row.stock}}
                                                                            </span>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </template>
                                                        </el-table-column>
                                                        <el-table-column label="操作" min-width="150" align="center">
                                                            <template slot-scope="scope">
                                                                <el-button @click="delGoods(type, level)" type="text" size="small">删除</el-button>
                                                            </template>
                                                        </el-table-column>
                                                    </el-table>

                                                </template>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!-- 商品特殊处理end -->

                                <div class="red_envelope_box" v-else>
                                    <div class="coupon_title flex flex-y-center">
                                        <div class="line"></div>
                                        <div style="margin-right: 6px;">{{ title }}</div>
                                    </div>
                                    <div class="flex flex-y-center" v-if="ruleForm.setting[type]" >
                                        <div class="flex flex-y-center sky" style="margin-right: 20px;">
                                            <div style="width: 80px;">{{ title }}充值：</div>
                                            <el-input v-model="ruleForm.setting[type][level].prize" type="number" placeholder="请输入数值"></el-input>
                                        </div>
                                        <div class="flex flex-y-center">
                                            <div style="width: 80px;">备注说明：</div>
                                            <el-input type="textarea" placeholder="请输入内容" v-model="ruleForm.setting[type][level].remark" maxlength="30" show-word-limit>
                                        </div>
                                    </div>
                                </div>
                                <el-divider></el-divider>
                            </div>

                        </div>
                    </div>
                </el-tab-pane>
            </el-tabs>
        </el-form>
    </el-card>

    <!-- 选择优惠券 -->
    <coupon-select v-if="has_coupon" :coupon-loading="couponLoading" :coupon_arr="coupon_arr" @submit="handleCoupon" @close="couponLoading = false"></coupon-select>
</div>

<script>
    new Vue({
        el: '#app',
        data() {
            var validatePass = (rule, value, callback) => {
                var reg = /^[\u4e00-\u9fa5\w]+$/;
                if (reg.test(value)) {
                    callback();
                }else{
                    callback(new Error('规则名不能含有特殊字符'));
                }
            };
            return {
                activeName: '',
                loading: false,
                is_coupon_more: false,
                couponLoading: false,
                level_arr: {},
                gift_type: '',
                goods_gift_type: '',
                level_name: '',
                level_index: 0,
                goods_level_index: 0,
                gift_type_name: '',
                setting_type_arr: {},
                coupon_arr: [],
                has_coupon: <?php echo $has_coupon ? 'true' : 'false'; ?>,
                ruleForm: {
                    id: null,
                    title: null,
                    gift_type: null,
                    status: 1,
                    setting: {},
                },
                rules: {
                    title: [
                        {
                            required: true,
                            message: '请输入规则名称',
                            trigger: 'blur',
                        },
                        {
                            min: 1,
                            max: 50,
                            message: '长度在50个字符以内',
                            trigger: 'blur'
                        },
                        {
                            validator:validatePass,
                            trigger: 'blur'
                        },
                    ],
                },
                formGoodsList:[],
                bind_goods_id: 0,
            }
        },
        mounted() {
            this.getDetail();
        },
        methods: {
            getDetail() {
                let self = this;
                self.loading = true;
                request({
                    params: {
                        r: 'upgrade-gift/default/edit',
                        gift_type: getQuery('gift_type') ?? '',
                        id: getQuery('id') ?? null,
                    },
                    method: 'get',
                }).then(e => {
                    self.loading = false;
                    if (e.data.code == 0) {
                        let ruleForm_setting = e.data.data.detail.setting;// 配置数据
                        self.level_arr = e.data.data.level_arr;// 等级
                        self.setting_type_arr = e.data.data.setting_type_arr;// 赠送类型

                        // 获取已有的数据
                        let init_setting = {};
                        if (ruleForm_setting) {
                            for(let id in ruleForm_setting) {
                                let item = ruleForm_setting[id];
                                if(!init_setting[item.type]){ init_setting[item.type] = {}}// 空对象赋空值
                                if (item.type == 'coupon') {
                                    if(!init_setting[item.type][item.level]){ init_setting[item.type][item.level] = {}}// 空对象赋空值
                                    if(!init_setting[item.type][item.level].arr){ init_setting[item.type][item.level].arr = []}// 空数组赋空值
                                    init_setting[item.type][item.level].arr.push({
                                        relevant_id: item.relevant_id,
                                        num: item.num,
                                        name: item.name,
                                        discount_method: item.discount_method,
                                        status: item.status,
                                    });
                                } else if (item.type == 'goods') {
                                    init_setting[item.type][item.level] = item;
                                } else {
                                    init_setting[item.type][item.level] = {
                                        prize: item.prize, remark: item.remark
                                    };
                                }
                            }
                        }

                        // 初始化ruleForm
                        let setting = {};
                        for(let type in self.setting_type_arr) {
                            for(let level in self.level_arr) {
                                if(!setting[type]){ setting[type] = {}}// 空对象赋空值
                                if (init_setting[type] && init_setting[type][level]) {
                                    setting[type][level] = init_setting[type][level];
                                } else {
                                    if (type == 'coupon') {
                                        setting[type][level] = {};// 空对象赋空值
                                    } else {
                                        setting[type][level] = {};// 空对象赋空值
                                    }
                                }
                            }
                        }
                        this.ruleForm.id = getQuery('id') ?? null;
                        this.ruleForm.gift_type = e.data.data.detail.gift_type ?? getQuery('gift_type');
                        this.ruleForm.setting = setting;
                        this.level_name = e.data.data.level_name;
                        this.gift_type_name = e.data.data.gift_type_name;
                        this.ruleForm.status = e.data.data.detail.status ?? 1;
                    } else {
                        self.$message.error(e.data.msg);
                    }
                })
            },
            submit(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        console.log(this.ruleForm,'save');
                        let self = this;
                        self.loading = true;
                        request({
                            params: {
                                r: 'upgrade-gift/default/edit',
                            },
                            method: 'post',
                            data:this.ruleForm
                        }).then(e => {
                            self.loading = false;
                            if (e.data.code == 0) {
                                self.loading = false;
                                self.$message.success(e.data.msg);
                                navigateTo({
                                    r: 'upgrade-gift/default/index'
                                })
                            } else {
                                self.$message.error(e.data.msg);
                            }
                        })
                    } else {
                        return false;
                    }
                });
            },
            handleClick(tab, event){
                console.log(tab);
            },
            handleCoupon(data) {
                this.couponLoading = false;
                this.ruleForm.setting[this.gift_type][this.level_index].arr = data;
            },
            handle(type, data = null, data2 = null) {
                let id = data ? parseInt(data.id) : '';
                switch (type) {
                    case 'edit':
                        let params = {
                            r: 'upgrade-gift/default/edit'
                        };
                        if (id) params = Object.assign(params, {
                            id: id
                        });
                        navigateTo(params);
                        break;
                    case 'destroy':
                        param = {id: data.id,type:type};
                        this.$confirm('删除该条数据后不可以恢复, 是否继续?', '警告', {type: 'warning'}).then(() => {this.send(param,'upgrade-gift/default/handle')})
                        break;
                    case 'coupon_delete':
                        data.splice(data2,1);
                        console.log(this.ruleForm,'delete');
                        break;
                    case 'coupon_select':
                        this.coupon_arr = data ?? [];
                        this.gift_type = data2.gift_type;
                        this.level_index = data2.level_index;
                        this.couponLoading = true;
                        break;
                    case 'goods_select':
                        this.goods_gift_type = data2.gift_type;
                        this.goods_level_index = data2.level_index;
                        break;
                }
            },
            send(params, url = '', callback) {
                let self = this;
                request({
                    params: {
                        r: url,
                    },
                    method: 'post',
                    data: params
                }).then(e => {
                    if (e.data.code == 0) {
                        self.$message.success(e.data.msg);
                        self.getList();
                    } else {
                        self.$message.error(e.data.msg);
                    }
                    if (callback) callback(e.data);
                }).catch(e => {
                    console.log(e);
                });
            },
            selectGoodsWarehouse(v) {
                this.$set(this.ruleForm.setting[this.goods_gift_type], this.goods_level_index, {
                    id: v.id,
                    cover_pic: v.cover_pic,
                    goods_name: v.goods_name,
                    price: v.price,
                    stock: v.stock,
                })
            },
            delGoods(type, level) {
                this.$set(this.ruleForm.setting[type], level, {})
            },
        }
    })
</script>