qimall/addons/Store/client/views/discount/index.php

<?php

use common\helpers\ComponentHelper;

?>

<div id="app" v-cloak>
    <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="优惠抵扣" name="collection-code">
            <el-card v-loading="loading" style="border:0" shadow="never" body-style="background-color: #f3f3f3;padding: 0 0;">
                <el-row>
                    <el-col :span="24">
                        <div class="form-body">
                            <el-form :model="basicForm" ref="basicForm" :rules="basicFormRules" label-width="172px" style="position: relative" size="small">
                                <el-form-item label="是否开启优惠券抵扣" prop="is_open_coupon_deduct">
                                    <div>
                                        <el-switch
                                                :active-value="1"
                                                :inactive-value="0"
                                                v-model="basicForm.deduct_setting.is_open_coupon_deduct">
                                        </el-switch>
                                    </div>
                                </el-form-item>
<!--                                <el-form-item label="是否开启积分抵扣" prop="is_open_score_deduct">-->
<!--                                    <div>-->
<!--                                        <el-switch :active-value="1" :inactive-value="0" v-model="basicForm.deduct_setting.is_open_score_deduct"></el-switch>-->
<!--                                    </div>-->
<!--                                 </el-form-item>-->
<!--                                <template v-if="basicForm.deduct_setting.is_open_score_deduct==1">-->
<!--                                    <el-form-item label="抵扣金额上限">-->
<!--                                        <div>-->
<!--                                            <el-radio v-model="basicForm.deduct_setting.score_deduct.is_limit" :label="0">不限制</el-radio>-->
<!--                                            <br/>-->
<!--                                                默认订单金额最低为1元-->
<!--                                            <br/>-->
<!--                                            <br/>-->
<!--                                            <el-radio v-model="basicForm.deduct_setting.score_deduct.is_limit" :label="1">最高抵扣金额</el-radio>-->
<!--                                            <el-input v-if="basicForm.deduct_setting.score_deduct.is_limit==1" placeholder="最高抵扣金额" class="width-200" v-model="basicForm.deduct_setting.score_deduct.limit_deduct_money">-->
<!--                                                <template slot="append">元</template>-->
<!--                                            </el-input>-->
<!--                                            <br/>-->
<!--                                            如：设置500元，即超过此金额部分的金额不能使用积分抵扣-->
<!--                                        </div>-->
<!--                                    </el-form-item>-->
<!--                                    <el-form-item label="抵扣设置" >-->
<!--                                        <div>-->
<!--                                            <el-radio v-model="basicForm.deduct_setting.score_deduct.is_percentage" :label="0">固定值</el-radio>-->
<!--                                            <br/>-->
<!--                                            <el-input placeholder="" class="width-200" v-model="basicForm.deduct_setting.score_deduct.deduct_score_num">-->
<!--                                                <template slot="append">个</template>-->
<!--                                            </el-input>-->
<!--                                            <br/>-->
<!--                                            N个积分抵扣1元-->
<!--                                            <br/>-->
<!--                                            <br/>-->
<!--                                            <el-radio v-model="basicForm.deduct_setting.score_deduct.is_percentage" :label="1">百分比</el-radio>-->
<!--                                            <br/>-->
<!--                                            <el-input placeholder="" class="width-200" v-model="basicForm.deduct_setting.score_deduct.deduct_score_percentage">-->
<!--                                                <template slot="append">%</template>-->
<!--                                            </el-input>-->
<!--                                            <br/>-->
<!--                                            如，设置1%：-->
<!--                                            <br/>-->
<!--                                            1、商品金额为100元，即可抵扣1元，商品实际支付金额为99元。-->
<!--                                            <br/>-->
<!--                                            2、商品金额为148元，即可抵扣1.48元，商品实际支付金额为146.52元。-->
<!---->
<!--                                        </div>-->
<!--                                    </el-form-item>-->
<!--                                </template>-->
                            </el-form>
                        </div>
                    </el-col>
                </el-row>
                <el-button :loading="submitLoading" class="button-item" size="small" type="primary" @click="submit('basicForm')">保存</el-button>
            </el-card>
        </el-tab-pane>
        <el-tab-pane label="优惠赠送" name="collection-log">
            <el-card v-loading="loading" style="border:0" shadow="never" body-style="background-color: #f3f3f3;padding: 0 0;">
                <el-row>
                    <el-col :span="24">
                        <div class="form-body">
                            <el-form :model="basicForm" ref="basicForm" :rules="basicFormRules" label-width="172px" style="position: relative" size="small">
                                <el-form-item label="是否开启优惠券赠送" prop="is_open_coupon_give">
                                    <div>
                                        <el-switch :active-value="1" :inactive-value="0" v-model="basicForm.give_setting.coupon_give.is_open_coupon_give">
                                        </el-switch>
                                    </div>
                                    <template v-if="basicForm.give_setting.coupon_give.is_open_coupon_give==1">
                                        <template>
                                            <el-checkbox v-model="basicForm.give_setting.coupon_give.give_type1"  >折扣券</el-checkbox>
                                            <br/>
                                                <el-select v-if="basicForm.give_setting.coupon_give.give_type1" size="large" v-model="basicForm.give_setting.coupon_give.coupon_id1" placeholder="请选择" @change="handleChange1">
                                                    <el-option v-for="item,k in coupon_list1" :key="item.id" :label="item.name" :value="item.id">
                                                    </el-option>
                                                </el-select>
                                            <br/>
                                            <el-checkbox v-model="basicForm.give_setting.coupon_give.give_type2" >满减券</el-checkbox>
                                            <br/>
                                                <el-select v-if="basicForm.give_setting.coupon_give.give_type2" size="large"  v-model="basicForm.give_setting.coupon_give.coupon_id2" placeholder="请选择" @change="handleChange2">
                                                    <el-option v-for="item,k in coupon_list2" :key="item.id" :label="item.name" :value="item.id">
                                                    </el-option>
                                                </el-select>
                                        </template>
                                    </template>
                                </el-form-item>
<!--                                <el-form-item label="是否开启积分赠送" prop="is_open_score_give">-->
<!--                                    <div>-->
<!--                                        <el-switch :active-value="1" :inactive-value="0" v-model="basicForm.give_setting.score_give.is_open_score_give">-->
<!--                                        </el-switch>-->
<!--                                    </div>-->
<!--                                </el-form-item>-->
<!--                                <template v-if="basicForm.give_setting.score_give.is_open_score_give==1">-->
<!--                                    <el-form-item label="赠送门槛">-->
<!--                                        <div>-->
<!--                                            <el-radio v-model="basicForm.give_setting.score_give.is_limit" :label="0">不限制</el-radio>-->
<!--                                            <br/>-->
<!--                                            默认订单金额最低为1元-->
<!--                                            <br/>-->
<!--                                            <br/>-->
<!--                                            <el-radio v-model="basicForm.give_setting.score_give.is_limit" :label="1">订单金额区间为</el-radio>-->
<!--                                            <el-input  placeholder="最低金额" class="width-200" v-model="basicForm.give_setting.score_give.min">-->
<!--                                                <template slot="append">元</template>-->
<!--                                            </el-input> --->
<!--                                            <el-input  placeholder="最高金额" class="width-200" v-model="basicForm.give_setting.score_give.max">-->
<!--                                                <template slot="append">元</template>-->
<!--                                            </el-input>-->
<!--                                            <br/>-->
<!--                                            如：设置100元和1000元，即低于100元的不能进行积分赠送；超过1000元的，超部分不能进行积分赠送。-->
<!--                                        </div>-->
<!--                                    </el-form-item>-->
<!--                                    <el-form-item label="赠送设置" >-->
<!--                                        <div>-->
<!--                                            <el-radio v-model="basicForm.give_setting.score_give.is_percentage" :label="0">固定值</el-radio>-->
<!--                                            <br/>-->
<!--                                            每满-->
<!--                                            <el-input placeholder="" class="width-200" v-model="basicForm.give_setting.score_give.full_money">-->
<!--                                                <template slot="append">元</template>-->
<!--                                            </el-input>-->
<!--                                            赠送-->
<!--                                            <el-input placeholder="" class="width-200" v-model="basicForm.give_setting.score_give.give_score_num">-->
<!--                                                <template slot="append">个</template>-->
<!--                                            </el-input>-->
<!--                                            <br/>-->
<!--                                            <br/>-->
<!--                                            <el-radio v-model="basicForm.give_setting.score_give.is_percentage" :label="1">百分比</el-radio>-->
<!--                                            <br/>-->
<!--                                            <el-input placeholder="" class="width-200" v-model="basicForm.give_setting.score_give.give_score_percentage">-->
<!--                                                <template slot="append">%</template>-->
<!--                                            </el-input>-->
<!--                                            <br/>-->
<!--                                            如，设置为10%，即实际支付金额为148元的，即赠送14个积分，取整数-->
<!--                                        </div>-->
<!--                                    </el-form-item>-->
<!--                                </template>-->
                            </el-form>
                        </div>
                    </el-col>
                </el-row>
                <el-button :loading="submitLoading" class="button-item" size="small" type="primary" @click="submit('basicForm')">保存</el-button>
            </el-card>
        </el-tab-pane>
    </el-tabs>
</div>

<script>
    const app = new Vue({
        el: '#app',
        data() {
            return {
                activeName: 'collection-code',
                basicForm:{
                    give_setting:{
                        coupon_give:{
                            is_open_coupon_give:0,
                            give_type1:false,
                            give_type2:false,
                            coupon_id1:'',
                            coupon_id2:'',
                            from_type1:1,
                            from_type2:1,
                        },
                        score_give:{
                            is_open_score_give:0,
                            is_limit:0,
                            min:'',
                            max:'',
                            is_percentage:0,
                            full_money:'',
                            give_score_num:'',
                            give_score_percentage:'',

                        },
                    },
                    deduct_setting:{
                        is_open_coupon_deduct:0,
                        is_open_score_deduct:0,
                        score_deduct:{
                            is_limit:0,
                            limit_deduct_money:'',
                            is_percentage:0,
                            deduct_score_num:'',
                            deduct_score_percentage:'',
                        },
                    },
                },
                coupon_list1:[],
                coupon_list2:[],
                basicFormRules:{},
                loading:false,
                submitLoading:false,
                formLabelWidth: '120px',
            };
        },
        mounted: function() {
            this.loadData();
        },
        methods: {
            loadData() {
                let self = this;
                request({
                    params: {
                        r: 'store/client/discount/index',
                    },
                }).then(e => {
                    self.loading = false;
                    if (e.data.code === 0) {
                        self.coupon_list1 = e.data.data.coupon_list1;
                        self.coupon_list2 = e.data.data.coupon_list2;
                        if(e.data.data.give_setting){
                            self.basicForm.give_setting = e.data.data.give_setting;
                        }
                        if(e.data.data.deduct_setting) {
                            self.basicForm.deduct_setting = e.data.data.deduct_setting;
                        }
                    } else {
                        self.$message.error(e.data.msg);
                    }
                }).catch(e => {
                    self.$message.error('网络错误');
                });
            },
            submit(){
                request({
                    params: {
                        r: 'store/client/discount/index',
                    },
                    method: 'post',
                    data: {
                        form: this.basicForm
                    }
                }).then(e => {
                    this.loading = false;
                    if (e.data.code === 0) {
                        this.$message.success(e.data.msg);
                    } else {
                        this.$message.error(e.data.msg);
                    }
                }).catch(e => {
                    this.$message.error('网络错误');
                });
            },
            handleClick(tab, event){
            },
            handleChange1(value){
                this.coupon_list1.forEach(item=>{
                    if(item.id==value){
                        this.basicForm.give_setting.coupon_give.from_type1 =item.from_type
                        return
                    }
                })
            },
            handleChange2(value){
                this.coupon_list2.forEach(item=>{
                    if(item.id==value){
                        this.basicForm.give_setting.coupon_give.from_type2 =item.from_type
                        return
                    }
                })
            },
        },
        computed: {

        }
    });
</script>
<style>
    .el-tabs__header {
        font-size: 16px;
    }

    .table-body {
        padding: 20px;
        background-color: #fff;
    }

    .table-body .el-button {
        padding: 0 !important;
        border: 0;
        margin: 0 5px;
    }

    .input-item {
        width: 250px;
        margin: 0 0 20px;
        display: inline-block;
    }

    /*.input-item .el-input__inner {*/
    /*    border-right: 0;*/
    /*}*/

    .input-item .el-input__inner:hover {
        border: 1px solid #dcdfe6;
        /*border-right: 0;*/
        outline: 0;
    }

    .input-item .el-input__inner:focus {
        border: 1px solid #dcdfe6;
        /*border-right: 0;*/
        outline: 0;
    }

    .input-item .el-input-group__append {
        background-color: #fff;
        border-left: 0;
        width: 10%;
        padding: 0;
    }

    .input-item .el-input-group__append .el-button {
        padding: 0;
    }

    .input-item .el-input-group__append .el-button {
        margin: 0;
    }

    .batch {
        margin: 0 0 20px;
        display: inline-block;
    }

    .batch .el-button {
        padding: 9px 15px !important;
    }

    .el-table th>.cell{
        color: #333;
        font-weight: bold;
        font-size: 14px;
    }
    .el-table__footer-wrapper, .el-table__header-wrapper{
        border-bottom: 1.4px solid #D6D6D6;
    }
    .el-table th>.cell {
        color: #333;
        font-weight: bold;
        font-size: 14px;
    }

    .table1 .el-table__footer-wrapper,
    .table1 .el-table__header-wrapper {
        border-bottom: 1.4px solid #D6D6D6;
    }
    .user_img{
        position: relative;
        margin-right: 8px;
        /* height: 50px;
        width: 50px; */
    }
    .default-avatar{
        width: 50px;
        height: 50px;
        border-radius: 50%;
        margin-right: 8px;
    }
    .uer-nickname {
        flex: 1;
    }

    .value_input  .el-form-item__content{
        display: flex;
    }

    .value_input .el-input-group input{
        width: 58px;
        border-right: 0;
    }

    .value_input .el-input-group{
        display: flex;
        width: 100px;
    }

    .value_input .el-input-group__append{
        display: flex;
        align-items: center;
        justify-content: center;
        background: #FFF;
    }
</style>