qimall/addons/Coupon/backend/views/goods/com-coupon.php

<?php
use common\helpers\ComponentHelper;
use common\helpers\AddonHelper;
ComponentHelper::loadComponentView('coupon-select', AddonHelper::getAddonRootPath('Coupon') . 'backend/views/components');
?>
<template id="com-coupon">
    <div class="com-coupon">
        <el-card class="edit-card" shadow="never">
            <div slot="header" class="clearfix">
                <div class="card-title">优惠券设置<span class="card-sub-title"></span></div>
            </div>
            <el-form :model="form" size="small">
                <el-form-item label="是否开启" prop="is_enable">
                                <el-switch :active-value="1" :inactive-value="0" v-model="form.is_enable"></el-switch>
                </el-form-item>
                <el-row :gutter="10" v-if="form.is_enable == 1">
                    <el-form-item label="选择优惠券">
                        <el-button type="primary" size="mini" @click="handle('select')">选择优惠券</el-button>
                    </el-form-item>
                    <el-form-item label="已选优惠券">
                        <el-row :gutter="3">
                            <el-col :span="3" v-for="(item,index) in form.multiple_selection" :key="index">
                                <el-card shadow="always" style="position: relative; margin-right: 10px;">
                                    <div>{{item.name}}</div>
                                    <div>优惠方式:{{ item.discount_method }}</div>
                                    <div>赠送数量：<span>{{item.num}}</span></div>
                                    <el-button type="danger" icon="el-icon-delete" circle style="position: absolute; right: 8px;top: 10px;" @click="handle('delete', index)"></el-button>
                                </el-card>
                            </el-col>
                        </el-row>
                    </el-form-item>
                    <el-form-item label="赠送方式">
                        <el-radio-group v-model="form.send_type">
                            <el-radio :label="0">订单完成</el-radio>
                            <el-radio :label="1">支付完成</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-row>
            </el-form>
        </el-card>

        <coupon-select :coupon-loading="couponLoading" :coupon_arr="form.multiple_selection" @submit="handleCoupon" @close="couponLoading = false"></coupon-select>
    </div>
</template>
<script>
    Vue.component('com-coupon', {
        template: "#com-coupon",
        props: {
            setting: {
                type: Object,
                default: () => {
                    return {};
                }
            },
            coupon_type_map: {
                type: Object,
                default: () => {
                    return {};
                }
            },
            goods_id: {
                type: Number | String,
                default: 0
            }
        },
        data() {
            return {
                couponLoading: false,
                form: {
                    is_enable: 0,
                    multiple_selection: [],
                    send_type: 0
                }
            }
        },
        watch: {
            form:{
                deep:true,
                immediate: true,
                handler(value){
                    this.$emit("select", {Coupon: this.form});
                }
            }
        },
        mounted: function() {
            if (this.goods_id) this.coupon();
        },
        methods: {
            handleCoupon(data) {
                this.couponLoading = false;
                this.form.multiple_selection = data
            },
            handle(type, data = null, data2 = null) {
                switch (type) {
                    case 'select':
                        this.couponLoading = true;
                        break;
                    case 'delete':
                        this.form.multiple_selection.splice(data, 1);
                        break;
                }
            },
            //优惠券列表
            coupon() {
                request({
                    params: {
                        r: 'coupon/coupon/get-setting-coupon',
                    },
                    method: 'post',
                    data: {
                        goods_id: this.goods_id
                    }
                }).then(res => {
                    this.form.is_enable = res.data.data.is_enable
                    this.form.send_type = res.data.data.send_type
                    this.form.multiple_selection = res.data.data.coupon
                })
            },
        }
    });
</script>