qimall/addons/ElectronCoupon/backend/views/setting/index.php

<?php

?>
<style>
    @media screen and (min-width:1370px){
        .form-body {
            padding: 20px 0;
            padding-right: 50%;
            min-width: 1400px;
        }
    }

    @media screen and (max-width:1369px){
        .form-body {
            padding: 20px 0;
            padding-right: 20%;
        }
    }

    .form-body {
        background-color: #fff;
        margin-bottom: 20px;
    }


    .form-button {
        margin: 0!important;
    }

    .form-button .el-form-item__content {
        margin-left: 0!important;
    }

    .button-item {
        padding: 9px 25px;
    }
    .agent-item-input{
        display: flex;
        align-items: center;
        margin-top: 16px;
    }
    .agent-item-input .item-lab-title{
        width: 80px;
        margin-right: 20px;
    }
    .tips-title{
        font-size: 12px;
        color: #999999;
    }

    .el-tabs__header{
        background-color: #fff;
    }
    .el-tabs__item{
        width: 100px;
        text-align: center;
    }

    .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;
    }
    .add-image-btn {
        width: 100px;
        height: 100px;
        color: #419EFB;
        border: 1px solid #e2e2e2;
        cursor: pointer;
    }
    .pic-url-remark{
        font-size: 12px;
        color: #999999;
    }
    .el-image {
        position: relative;
        display: inline-block;
        overflow: hidden;
    }
    .el-button.is-circle {
        border-radius: 50%;
        padding: 12px;
    }
    .el-button--mini.is-circle {
        padding: 7px;
    }
    .del-btn {
        position: absolute;
        right: 0px;
        top: 0px;
        padding: 4px 4px;
    }
</style>
<div id="app" v-cloak>
    <el-card style="border:0;min-width: 1000px;" shadow="never" body-style="background-color: #f3f3f3;padding: 10px 0 0;" v-loading="loading">
        <div slot="header">基本设置</div>

        <el-tabs v-model="activeName" @tab-click="handleClick">

                <div >
                    <div class="form-body">
                        <el-form ref="form" :model="form" :rules="rules" label-width="120px" size="small">
                            <el-form-item label="电子券开关">
                                <el-switch
                                        v-model="form.is_open"
                                        :active-value="1"
                                        :inactive-value="0"
                                        inactive-text="关闭"
                                        active-text="开启">
                                </el-switch>
                                <div class="tips-text" style="line-height: 24px;">
                                    开启后电子券才能领取使用
                                </div>
                            </el-form-item>

                            <el-form-item label="自定义名称">
                                <el-input v-model="form.customize_name" type="text" :maxlength="20" style="width: 50%" placeholder="自定义名称"></el-input>
                            </el-form-item>

                            <el-form-item label="领券中心">
                                <template>
                                    <el-input disabled v-model="center_url" type="text" style="width: 50%" placeholder="领券中心"></el-input>
                                </template>
                                <el-button class="button-item" v-on:click="copyText(center_url)">复制链接</el-button>

                            </el-form-item>
                            <el-form-item label="电子券首页">
                                <template>
                                    <el-input disabled v-model="coupon_url" type="text" style="width: 50%" placeholder="电子券首页"></el-input>
                                </template>
                                <el-button class="button-item" v-on:click="copyText(coupon_url)">复制链接</el-button>

                            </el-form-item>

                            <el-form-item label="电子券转让">
                                <el-switch
                                        v-model="form.is_allow_deal"
                                        :active-value="1"
                                        :inactive-value="0"
                                        inactive-text="关闭"
                                        active-text="开启">
                                </el-switch>
                                <div v-if="form.is_allow_deal==1" class="tips-title">开启后，所有电子券支持转让（注：电子券管理中，每张电子券可单独设置是否允许转让）</div>
                            </el-form-item>
                            <el-form-item label="转送权限">
                                <template>
                                    <el-radio v-model="form.source_transfer_permission" :label="0">不限</el-radio>
                                    <el-radio v-model="form.source_transfer_permission" :label="1">团队上下级</el-radio>
                                </template>
                            </el-form-item>
                            <el-form-item label="转让数量">
                                <el-input v-model="form.transfer_num" type="number" :maxlength="3" style="width: 50%" placeholder="会员可转让的数量"></el-input>
                                <div class="pic-url-remark">
                                    同一张电子券可转让给同一个会员多少张电子券，填 0 不限制
                                </div>

                            </el-form-item>
                            <el-form-item label="接收数量">
                                <el-input v-model="form.receive_num" type="number" :maxlength="3" style="width: 50%" placeholder="会员可接收的数量"></el-input>
                                <div class="pic-url-remark">
                                    同一张电子券可接收不同会员的多少张电子券，填 0 不限制
                                </div>

                            </el-form-item>
                            <el-form-item >
                                <template slot="label">
                                    <span>公司图文介绍</span>
                                    <el-tooltip effect="dark" placement="top" content="第一张图片为封面图">
                                        <i class="el-icon-info"></i>
                                    </el-tooltip>
                                </template>

                                <div flex="dir:left">
                                    <template v-if="form.images && form.images.length">
                                        <div class="el-image" v-for="(item,index) in form.images" :key="index"
                                             style="margin-right: 20px;position: relative;cursor: move;">
                                            <com-attachment @selected="updatePicUrl"
                                                            :params="{'currentIndex': index}">
                                                <el-image mode="aspectFill" style="width:100px;height:100px" :src="item">
                                                </el-image>
                                            </com-attachment>
                                            <el-button class="del-btn" size="mini" type="danger"
                                                       icon="el-icon-close" circle
                                                       @click="handle('delPic', index)"></el-button>
                                        </div>
                                    </template>
                                    <template v-if="form.images && form.images.length < 8">
                                        <com-attachment style="margin-bottom: 10px;" :multiple="true"
                                                        :max="9" @selected="handle('picUrl', $event)">
                                            <el-tooltip class="item" effect="dark" content="建议尺寸:750 * 750"
                                                        placement="top">
                                                <div flex="main:center cross:center" class="add-image-btn">
                                                    + 添加图片
                                                </div>
                                            </el-tooltip>
                                        </com-attachment>
                                    </template>
                                </div>
                                <div class="pic-url-remark">
                                    可以选择多张，建议尺寸是750*200
                                </div>
                            </el-form-item>
                            <el-form-item label="支付完成跳转">
                                <el-switch
                                        v-model="form.is_payed_url"
                                        :active-value="1"
                                        :inactive-value="0"
                                        inactive-text="关闭"
                                        active-text="开启">
                                </el-switch>
                            </el-form-item>
                            <el-form-item v-if="form.is_payed_url==1">
                                <!-- @selected="selectLink" -->
                                <com-pick-link title="选择链接" @selected="selectLink">
                                    <el-input size="small" v-model="form.payed_url" :disabled="true">
                                        <template slot="append">
                                            <el-button>选择链接</el-button>
                                        </template>
                                    </el-input>
                                </com-pick-link>
                            </el-form-item>

                            <el-form-item label="购买商品赠送电子券" >
                                <el-radio v-model="form.settlement_type"  :label="1">订单支付后</el-radio>
                                <el-radio v-model="form.settlement_type"  :label="2">订单完成后</el-radio>
                                <div class="tips-text" style="line-height: 24px;">
                                    如会员通过购物赠送其电子券，是支付后赠送还是需要订单完成后再赠送，注意，已赠送电子券无法收回
                                </div>
                            </el-form-item>

                        </el-form>
                    </div>
                    <el-button class="button-item" :loading="btnLoading" type="primary" size="small" @click="store('form')">保存</el-button>
                </div>



    </el-card>
</div>
<script>
    const app = new Vue({
        el: '#app',
        data() {
            var validatePass = (rule, value, callback) => {
                if (Number.isInteger(Number(value)) && Number(value) > 0) {
                    callback();
                } else {
                    callback(new Error('请输入大于0的整数'));
                }
            };
            return {
                rubik: 0,
                h5_url:'',
                center_url:'/#/plugins/ElectronCoupon/center',
                coupon_url: '/#/plugins/ElectronCoupon/index',
                data: {
                    style: -1,
                    space: 0,
                    height: 0,
                    list: [],
                },
                // 0.1 设置页数据
                activeName: 'first',
                loading: false,
                load: false,
                btnLoading: false,
                payed_title : '',
                form: {
                    is_open : 0,	//是否开启
                    customize_name : '电子券',	//自定义名称
                    is_allow_deal : 0,	//是否可以转让;1是
                    source_transfer_permission : 0,	//转让权限0不限1团队上下级
                    transfer_num : 0,	//转让数量
                    receive_num : 0,	//接收数量
                    payed_url : '',	//支付后跳转链接
                    is_payed_url : 0,	//支付后是否跳转链接;1是
                    is_notice : 0,	//是否通知
                    agreement : '',		//协议
                    images:[],//广告图片
                    settlement_type: 0,
                },

                rules: {
                    customize_name: [
                        {required: true, message: '请填写电子券名称', trigger: 'change'},
                    ],
                    name: [
                        {required: true, message: '请填写图片名称', trigger: 'change'},
                    ],
                    transfer_num: [
                        {required: true, message: '请填写转让数量', trigger: 'change'},
                        {required: true, validator: validatePass, trigger: 'blur'},
                    ],
                    receive_num: [
                        {required: true, message: '请填写接收数量', trigger: 'change'},
                        {required: true, validator: validatePass, trigger: 'blur'},
                    ],
                },
            };
        },
        created() {
            this.getDetail();
        },
        methods: {
            // 链接选择(edit)
            selectLink(list) {
                if(list[0].route){
                    this.payed_title = list[0].title;
                    this.form.payed_url = list[0].route;
                }
            },
            rubikLink () {
                if (!this.data.list[this.rubik].link) {
                    Vue.set(this.data.list[this.rubik], 'link', {});
                }
                return this.data.list[this.rubik].link.name
            },

            // 0.1.1 获取电子券设置详情
            getDetail(){
                this.loading = true;
                request({
                    params: {
                        r: 'electron-coupon/setting/index',
                    }
                }).then(e => {
                    this.loading = false;
                    if (e.data.code == 0) {
                        if(e.data.data){
                            let responsData = e.data.data;
                            let h5_url = responsData.config.web_url;
                            let mall_sign = responsData.config.mall_sign;
                            this.center_url = h5_url+'/#/plugins/ElectronCoupon/center?sign='+mall_sign;
                            this.coupon_url = h5_url+'/#/plugins/ElectronCoupon/index?sign='+mall_sign;
                            this.form = {...this.form, ...responsData.setting}
                        }
                    } else {
                        this.$message.error(e.data.msg);
                    }
                }).catch(e => {
                    this.btnLoading = false;
                });
            },


            // 2.0 提交表单-编辑电子券基础设置
            store(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        if(this.form.is_payed_url){
                            if(!this.form.payed_url){
                                this.$message.error('请选中支付成功后跳转路径');
                                return
                            }
                        }
                        this.btnLoading = true;
                        let postForm = JSON.parse(JSON.stringify(this.form));
                        request({
                            params: {
                                r: 'electron-coupon/setting/index',
                            },
                            method: 'post',
                            data: postForm,
                        }).then(e => {
                            this.btnLoading = false;
                            if (e.data.code == 0) {
                                this.$message.success(e.data.msg);
                            } else {
                                this.$message.error(e.data.msg)
                            }
                        }).catch(e => {
                            // this.$message.error(e);
                            this.btnLoading = false;
                        });
                    } else {
                        this.btnLoading = false;
                        return false;
                    }
                })
            },
            //复制素材中心链接
            copyText(url){
                // if (!this.center_url) {
                //     this.$message.error('请输入复制内容')
                // } else {
                //     var url = this.center_url;
                    // createElement() 方法通过指定名称创建一个元素
                    var copyInput = document.createElement('input')
                    copyInput.setAttribute('value', url)
                    document.body.appendChild(copyInput)
                    copyInput.select()

                    try {
                        var copyed = document.execCommand('copy')
                        if (copyed) {
                            document.body.removeChild(copyInput)
                            this.$message.success('复制成功')
                        }
                    } catch {
                        this.$message.success('复制失败，请检查浏览器兼容')
                    }
                // }

            },
            handleClick(tab, event) {
                if(tab.name=='second'){	//点击了广告图tab-初始化一下，请求列表
                    this.page = 1;
                    this.list = [];
                    this.getAdList(this.page);
                }
            },
            handle(type, param1 = null, param2 = null) {
                switch(type) {
                    //上传图片
                    case 'picUrl':
                        if (param1) {
                            let self = this;
                            param1.forEach(function(item, index){
                                if (!self.form.images && self.form.images.length >= 9) {
                                    return;
                                }
                                self.form.images.push(item.url)
                            })
                        }
                        break;
                    //删除图片
                    case 'delPic':
                        this.form.images.splice(param1, 1)
                        break;
                }
            },
            updatePicUrl(e, params) {
                console.log(e);
            },

        },
        filters: {

        },
    });
</script>