hemall.terabimsoft.com.cn/plugins/business-card/views/admin/set.blade.php

@extends('layouts.base')
@section('title', "基础设置")
@section('content')

    <style>
        .rightlist #app .rightlist-head{padding:15px 0;line-height:50px;border-bottom:1px solid #ccc;}
        .rightlist #app{margin-left:30px;}
        .rightlist-head-con{float:left;padding-right:20px;font-size:16px;color:#888;}
        .el-form-item__label{padding-right:30px;}
        .mouse-active{cursor:pointer;border:1px dotted #409EFF;border-radius: 4px;}
        /* 滑块选择小白点 */
        .el-switch.is-checked .el-switch__core::after {left: 100%;margin-left: -17px;}
        .el-switch__core::after {content: "";position: absolute;top: 1px;left: 1px;border-radius: 100%;transition: all .3s;width: 16px;height: 16px;background-color: #fff;}
        
        .avatar-uploader .el-upload {margin-top:15px;border: 1px dashed #d9d9d9;border-radius: 6px;cursor: pointer;position: relative;overflow: hidden;}
        .avatar-uploader .el-upload:hover {border-color: #409EFF;}
        .avatar-uploader-icon {font-size: 28px;color: #8c939d;width: 178px;height: 178px;line-height: 178px;text-align: center;}
        .avatar {width: 178px;height: 178px;display: block;}
        .el-upload-tip{width:178px;margin:0;padding:0;color:#999;text-align:center;}
        input[type=file] {display: none;}
        .avatar-uploader-box{position:relative;width:200px;}
        .el-icon-circle-close{position:absolute;top:10px;right:0;color:#999;}
        .tip{font-size:12px;color:#999;}
    </style>

    <div class="rightlist">
        <div id="app" v-loading="loading">
        <link rel="stylesheet" href="//at.alicdn.com/t/font_913727_zrmdutznqpd.css">
            <!-- <div class="rightlist-head">
                <div class="rightlist-head-con">名片管理</div>
               
            </div> -->
            <el-form ref="form" :model="form" :rules="rules" ref="form" label-width="240px" >
                <h5 class="rightlist-head">
                    名片基础设置
                </h5>
                <el-form-item label="名片插件开启" prop="is_open">
                    <el-radio v-model.number="form.is_open" :label="1">开启</el-radio>
                    <el-radio v-model.number="form.is_open" :label="0">关闭</el-radio>
                </el-form-item>
                <el-form-item label="是否允许会员关闭名片" prop="is_allow">
                    <el-radio v-model.number="form.is_allow" :label="1">允许</el-radio>
                    <el-radio v-model.number="form.is_allow" :label="0">不允许</el-radio>
                    <div class="tip">如果允许，则会员在名片中心--名片编辑中可以关闭个人名片，关闭后，用户将无法访问关闭的会员名片首页。</div>
                </el-form-item>
                <el-form-item label="名片角色" prop="">
                    <el-checkbox v-model.number="form.member" :true-label="1" :false-label="0" border size="mini">会员</el-checkbox>
                    <el-checkbox v-model.number="form.role_commission" v-if="status.commission==true" :true-label="1" :false-label="0" border size="mini">推客</el-checkbox>
                    <el-checkbox v-model.number="form.role_team_dividend" v-if="status.team_dividend==true" :true-label="1" :false-label="0" border size="mini">经销商</el-checkbox>
                    <el-checkbox v-model.number="form.role_staff" v-if="status.merchant==true" :true-label="1" :false-label="0" border size="mini">招商员</el-checkbox>
                    <el-checkbox v-model.number="form.role_merchants" v-if="status.merchant==true" :true-label="1" :false-label="0" border size="mini">招商中心</el-checkbox>
                    <el-checkbox v-model.number="form.role_area_dividend" v-if="status.area_dividend==true" :true-label="1" :false-label="0" border size="mini">区域代理</el-checkbox>
                    <el-checkbox v-model.number="form.role_supplier" v-if="status.supplier==true" :true-label="1" :false-label="0" border size="mini">供应商</el-checkbox>
                    <el-checkbox v-model.number="form.role_store_cashier" v-if="status.store_cashier==true" :true-label="1" :false-label="0" border size="mini">店长/店员</el-checkbox>
                    <div class="tip">只有开启的角色会员中心才有名片中心入口，才能生成自己的名片。</div>
                </el-form-item>
                <el-form-item label="记录信息" prop="">
                    <el-checkbox v-model.number="form.phone" :true-label="1" :false-label="0" border size="mini">手机号</el-checkbox>
                    <el-checkbox v-model.number="form.wechat" :true-label="1" :false-label="0" border size="mini">微信</el-checkbox>
                    <div class="tip">我的收藏、收藏我的列表页面是否显示用户的手机号、微信信息！</div>
                </el-form-item>
                <el-form-item label="我的成就" prop="is_achievement">
                    <el-radio v-model.number="form.is_achievement" :label="0">显示</el-radio>
                    <el-radio v-model.number="form.is_achievement" :label="1">不显示</el-radio>
                    <div class="tip">如果显示，则名片中心--我的成就可以看到会员相关数据，关闭则不显示。</div>
                </el-form-item>
                <el-form-item label="我的客户" prop="is_customer">
                    <el-radio v-model.number="form.is_customer" :label="0">显示</el-radio>
                    <el-radio v-model.number="form.is_customer" :label="1">不显示</el-radio>
                    <div class="tip">如果显示，则名片中心--我的成就可以看到客户相关数据，关闭则不显示。</div>
                </el-form-item>
                <el-form-item label="是否显示底部导航" prop="nav_show">
                    <el-radio v-model.number="form.nav_show" :label="1">显示</el-radio>
                    <el-radio v-model.number="form.nav_show" :label="0">不显示</el-radio>
                    <div class="tip">如果显示，则名片页面（不含名片中心）显示底部导航，关闭则不显示。</div>
                </el-form-item>
                <el-form-item label="名片图片背景图" prop="thumb">
                    <el-input v-model="form.thumb" style="width:70%" disabled></el-input>
                    <div class="avatar-uploader-box">
                        <el-upload class="avatar-uploader" action="{{ yzWebFullUrl('plugin.business-card.admin.controllers.set.upload-local') }}" accept="image/*" :show-file-list="false" :on-success="uploadSuccess" :before-upload="beforeUpload">
                            <img v-if="form.thumb_url" :src="form.thumb_url" class="avatar">
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                            <div slot="tip" class="el-upload-tip">(点击上框进行图片选择)</div>
                            <div slot="tip" class="el-upload-tip">建议尺寸350*200</div>
                        </el-upload>
                        <a  v-show="form.thumb_url" class="el-icon-circle-close" @click="clearImg" title="点击清除图片"></a>
                    </div>
                </el-form-item>
                <el-form-item label="名片海报图片" prop="banner">
                    <el-input v-model="form.banner" style="width:70%" disabled></el-input>
                    <div class="avatar-uploader-box">
                        <el-upload class="avatar-uploader" action="{{ yzWebFullUrl('plugin.business-card.admin.controllers.set.upload-local') }}" accept="image/*" :show-file-list="false" :on-success="uploadSuccess1" :before-upload="beforeUpload">
                            <img v-if="form.banner_url" :src="form.banner_url" class="avatar">
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                            <div slot="tip" class="el-upload-tip">(点击上框进行图片选择)</div>
                            <div slot="tip" class="el-upload-tip">建议尺寸325*160</div>
                        </el-upload>
                        <a  v-show="form.banner_url" class="el-icon-circle-close" @click="clearImg2" title="点击清除图片"></a>
                    </div>
                </el-form-item>
                <h5 class="rightlist-head">
                    名片奖励设置
                </h5>
                <el-form-item label="访问奖励方式（名片会员）" prop="method">
                    <el-radio v-model.number="form.method" :label="1">每会员</el-radio>
                    <el-radio v-model.number="form.method" :label="2">每天</el-radio>
                    <div class="tip">每会员：每个会员访问只奖励一次；每天：每个会员访问都奖励一次。</div>
                </el-form-item>
                <el-row>
                    <el-col :span="11">
                        <el-form-item label="访问奖励规则（名片会员）" prop="rules_card_integral" label-width="240px">
                            <el-input v-model.number="form.rules_card_integral" style="width:90%" placeholder="请输入数值">
                                <template slot="append">积分</template>
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col v-if="plugin_love==true" :span="10">
                        <el-form-item label="" prop="rules_card_love" label-width="0" :rules="{type:'number',message:'请输入数字'}">
                            <el-input v-model.number="form.rules_card_love" style="width:60%;"  placeholder="请输入数值">
                                <template slot="append">爱心值</template>
                            </el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <div class="tip" style="width:100%;display:block;float:left;padding-left:240px;">每个会员每天访问非自己的名片首页都可以获得一次奖励。</div>
                    <el-col :span="11">
                        <el-form-item label="访问奖励规则（访问会员）" prop="rules_visit_integral" :rules="{type:'number',message:'请输入数字'}">
                            <el-input v-model.number="form.rules_visit_integral" style="width:90%"  placeholder="请输入数值">
                                <template slot="append">积分</template>
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col v-if="plugin_love==true" :span="10">
                        <el-form-item label="" prop="rules_visit_love" label-width="0" :rules="{type:'number',message:'请输入数字'}">
                            <el-input v-model.number="form.rules_visit_love" style="width:60%" placeholder="请输入数值">
                                <template slot="append">爱心值</template>
                            </el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="11">
                        <el-form-item label="新增会员奖励（名片会员）" prop="new_card_integral" :rules="{type:'number',message:'请输入数字'}">
                            <el-input v-model.number="form.new_card_integral" style="width:90%" placeholder="请输入数值">
                                <template slot="append">积分</template>
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col v-if="plugin_love==true" :span="10">
                        <el-form-item label="" prop="new_card_love" label-width="0" :rules="{type:'number',message:'请输入数字'}">
                            <el-input v-model.number="form.new_card_love" style="width:60%" placeholder="请输入数值">
                                <template slot="append">爱心值</template>
                            </el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="11">
                        <el-form-item label="新增会员奖励（注册会员）" prop="new_reg_integral" :rules="{type:'number',message:'请输入数字'}">
                            <el-input v-model.number="form.new_reg_integral" style="width:90%" placeholder="请输入数值">
                                <template slot="append">积分</template>
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col v-if="plugin_love==true" :span="10">
                        <el-form-item label="" prop="new_reg_love" label-width="0" :rules="{type:'number',message:'请输入数字'}">
                            <el-input v-model.number="form.new_reg_love" style="width:60%" placeholder="请输入数值">
                                <template slot="append">爱心值</template>
                            </el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-form-item label="" prop="">
                    <el-button @click="submit('form')">
                        保存
                    </el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
    <script>
        var vm = new Vue({
        el:"#app",
        delimiters: ['[[', ']]'],
            data() {
                let set = JSON.parse('{!! $set ?: '{}' !!}');
                let plugin_love = JSON.parse('{!! $plugin_love ?: 'false' !!}');
                if(set == null || set == [] || set.length==0) {
                    set = {}
                }
                console.log(set)
                return{
                    loading:false,
                    table_loading:false,
                    submit_loading:false,
                    plugin_love:plugin_love,
                    status:{},
                    form:{
                        // is_open:0,
                        // is_allow:0,
                        // phone:0,
                        // wechat:0,
                        // is_achievement:0,
                        // is_customer:0,
                        // thumb:'',
                        // thumb_url:'',
                        // banner:'',
                        // banner_url:,
                        // method:1,
                        // rules_card_integral:'',
                        // rules_card_love:'',
                        // rules_visit_integral:'',
                        // rules_visit_love:'',
                        // new_card_integral:'',
                        // new_card_love:'',
                        // new_reg_integral:'',
                        // new_reg_love:'',
                        ...set
                    },
                    rules:{
                        rules_card_integral:{type:"number",message:"请输入数字"},
                    },
                }
            },
            created(){
                this.loading = true;
                this.getStatus();
              
            },
            methods: {
                getStatus(){
                    this.$http.post("{!! yzWebFullUrl('plugin.business-card.admin.controllers.set.getPluginStatus') !!}",{}).then(response => {
                        if (response.data.result) {
                            this.loading = false;
                            this.status = response.data.data;
                            console.log(this.status)
                        } else {
                            this.$message({message: response.data.msg,type: 'error'});
                            this.loading = false;
                        }
                    },response => {
                        this.loading = false;
                    });
                },
                uploadSuccess(res, file) {
                    if (res.result == 1) {
                        this.form.thumb = res.data.img;
                        this.form.thumb_url = res.data.img_url;
                        this.$message.success("上传成功！");
                    } else {
                        this.$message.error(res.msg);
                    }
                    this.loading = false;
                },
                uploadSuccess1(res, file) {
                    if (res.result == 1) {
                        this.form.banner = res.data.img;
                        this.form.banner_url = res.data.img_url;
                        this.$message.success("上传成功！");
                    } else {
                        this.$message.error(res.msg);
                    }
                    this.loading = false;
                },
                beforeUpload(file) {
                    this.loading = true;
                    const isLt2M = file.size / 1024 / 1024 < 2;
                    if (!isLt2M) {
                        this.$message.error('上传图片大小不能超过 2MB!');
                        this.loading = false;
                    }
                    return isLt2M;
                },
                clearImg() {
                    this.form.thumb = "";
                    this.form.thumb_url = "";
                },
                clearImg1() {
                    this.form.banner = "";
                    this.form.banner_url = "";
                },
                clearImg2() {
                    this.form.banner = "";
                    this.form.banner_url = "";
                },
                submit(formName) {
                    console.log(this.form);
                    this.$refs[formName].validate((valid) => {
                        console.log(this.form);
                        if (valid) {
                            this.loading = true;
                            // delete(this.form['thumb_url']);
                            this.$http.post("{!! yzWebFullUrl('plugin.business-card.admin.controllers.set.index') !!}",{'form_data':this.form}).then(response => {
                                if (response.data.result) {
                                    this.$message({type: 'success',message: '操作成功!'});
                                      window.location.href='{!! yzWebFullUrl('plugin.business-card.admin.controllers.set.index') !!}';
                                    this.loading = false;
                                } else {
                                    this.$message({message: response.data.msg,type: 'error'});
                                    this.loading = false;
                                }
                            },response => {
                                this.loading = false;
                            });
                         }
                        else {
                            console.log('error submit!!');
                            return false;
                        }
                     });
                },
            },
        });
    </script>

@endsection