qimall/addons/CloudStock/backend/views/components/give-coupon.php

<?php

use common\helpers\ComponentHelper;
use common\helpers\AddonHelper;

ComponentHelper::loadComponentView('coupon-select', AddonHelper::getAddonRootPath('Coupon') . 'backend/views/components');
?>
<template id="give-coupon">
    <el-dialog width="60%" :title="'补货赠送设置'" class="dialogClass" center :visible.sync="visible" :before-close="cancel"><!-- 添加库存商品 -->
        <div style="height: 600px;overflow-y: auto;">
            <el-form :model="form" size="small">
                <el-form-item label="是否开启补货赠送优惠券" prop="is_buhuo">
                    <el-switch :active-value="1" :inactive-value="0" v-model="form.is_buhuo"></el-switch>
                </el-form-item>
                <div v-if="form.is_buhuo == 1" style="margin-left: 100px">
                    <el-row :gutter="10" v-for="(data,index) in form.coupon_data">
                        <el-form-item>
                            <span style="margin-right: 10px">
                                {{data.level_name}}
                            </span>
                            <el-input type="number" :min="0" class="member-money" v-model="data.num" placeholder="" style="width: 300px">
                                <template slot="prepend">一次性补货满</template>
                                <template slot="append">件</template>
                            </el-input>
                        </el-form-item>
                        <el-form-item label="选择优惠券">
                            <el-button type="primary" size="mini" @click="handle('select',null,index)">选择优惠券</el-button>
                        </el-form-item>
                        <el-form-item>
                            <el-row>
                                <el-col :span="2">已选优惠券</el-col>
                                <el-col :span="20">
                                    <el-col :span="5" v-for="(item,i_index) in data.multiple_selection" :key="i_index" style="margin-bottom: 10px">
                                        <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', i_index,index)"></el-button>
                                        </el-card>
                                    </el-col>
                                </el-col>
                            </el-row>
                        </el-form-item>
                    </el-row>
                </div>


                <el-form-item label="配货是否触发补货规则" prop="is_peihuo">
                    <el-tooltip class='item' effect='dark' content='上级配货数量满足补货赠送规则，也会获得对应的优惠券奖励' placement='top'>
                        <i class='el-icon-info'></i></el-tooltip>
                    <el-switch :active-value="1" :inactive-value="0" v-model="form.is_peihuo"></el-switch>
                </el-form-item>
            </el-form>
        </div>
        <span slot="footer" class="dialog-footer">
            <el-button @click="cancel" type="default" size="small">取消</el-button>
            <el-button type="primary" :loading="btnLoading" style="margin-bottom: 10px;" size="small"
                @click="save">保存</el-button>
        </span>
        <coupon-select :coupon-loading="couponLoading" :coupon_arr="multiple_selection" @submit="handleCoupon" @close="couponLoading = false" :index="index"></coupon-select>
    </el-dialog>
</template>
<script>
    Vue.component('give-coupon', {
        template: "#give-coupon",
        props: {
            visible: {
                type: Boolean,
                default: false
            },
            goods_id: {
                type: Number | String,
                default: 0
            }
        },
        data() {
            return {
                couponLoading: false,
                form: {
                    goods_id: 0,
                    num: 0,
                    is_buhuo: 0,
                    coupon_data: [],
                    is_peihuo: 0
                },
                multiple_selection: [],
                index: -1,
                btnLoading: false,
            }
        },
        watch: {
            form: {
                deep: true,
                immediate: true,
                handler(value) {
                    this.$emit("select", {
                        Coupon: this.form
                    });
                }
            },
            visible: {
                deep: true,
                immediate: true,
                handler(value) {
                    if (value) {
                        this.form.goods_id = this.goods_id;
                        this.coupon();
                    }
                }
            }
        },
        mounted: function() {
            if (this.goods_id) this.coupon();
        },
        methods: {
            handleCoupon(data) {
                this.couponLoading = false;
                this.multiple_selection = data;
                this.form.coupon_data[this.index].multiple_selection = data;
            },
            handle(type, data = null, index = -1) {
                let selection = this.form.coupon_data[index].multiple_selection;
                this.multiple_selection = selection;
                switch (type) {
                    case 'select':
                        this.couponLoading = true;
                        this.index = index;
                        break;
                    case 'delete':
                        this.form.coupon_data[index].multiple_selection.splice(data, 1);
                        break;
                }
            },
            cancel() {
                this.$emit("cancel");
            },
            save() {
                request({
                    params: {
                        r: 'cloud-stock/goods/set-setting'
                    },
                    method: 'post',
                    data: this.form,
                }).then(response => {
                    this.btnLoading = false;
                    if (response.data.code == 0) {
                        this.$message.success('保存成功');
                        this.$emit("save");
                        this.cancel()
                    } else {
                        this.$message.error(response.data.msg);
                    }
                }).catch(response => {
                    this.btnLoading = false;
                });
            },
            //优惠券列表
            coupon() {
                request({
                    params: {
                        r: 'cloud-stock/goods/get-coupon-setting',
                    },
                    method: 'post',
                    data: {
                        goods_id: this.goods_id
                    }
                }).then(res => {
                    this.form.is_buhuo = res.data.data.is_buhuo
                    this.form.is_peihuo = res.data.data.is_peihuo
                    this.form.coupon_data = res.data.data.coupon_data
                })
            },
        }
    });
</script>
<style>
    .dialogClass .el-dialog__body {
        padding: 15px 20px;
        color: #606266;
        font-size: 14px;
        word-break: break-all;
        padding-bottom: 0;
    }

    input::-webkit-outer-spin-button,
    input::-webkit-inner-spin-button {
        -webkit-appearance: none;
    }

    input[type="number"] {
        -moz-appearance: textfield;
    }
</style>