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

<?php
use common\helpers\ComponentHelper;
ComponentHelper::loadComponentView('com-dialog-select');
ComponentHelper::loadComponentView('com-qq-map');
?>
<div id="app" v-cloak>
    <el-card class="box-card" v-loading="loading" shadow="never" style="border:0;min-width: 1200px;" body-style="background-color: #f3f3f3;padding: 10px 0 0;">
        <div slot="header">
            <div>
                <span>基础设置</span>
            </div>
        </div>
        <el-form :model="ruleForm" :rules="rules" size="small" ref="ruleForm" label-width="240px">
            <el-card style="margin-top: 10px" shadow="never" :body-style="{ padding: '0px' }">
                <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
                    <el-tab-pane label="基础设置" name="basic" style="padding: 10px">
<!--                        <el-form-item prop="share_title">-->
<!--                            <label slot="label">-->
<!--                                <span>自定义分享标题</span>-->
<!--                                <el-tooltip effect="dark" content="分享给好友时，显示的标题"-->
<!--                                            placement="top">-->
<!--                                    <i class="el-icon-info"></i>-->
<!--                                </el-tooltip>-->
<!--                            </label>-->
<!--                            <el-input style="width: 500px" placeholder="请输入分享标题,标题中需带分享者昵称，则加变量%s" v-model="ruleForm.share_title"></el-input>-->
<!--                        </el-form-item>-->
<!---->
<!--                        <el-form-item prop="share_desc">-->
<!--                            <label slot="label">-->
<!--                                <span>自定义分享描述</span>-->
<!--                                <el-tooltip effect="dark" content="分享给好友时，显示的描述" placement="top">-->
<!--                                    <i class="el-icon-info"></i>-->
<!--                                </el-tooltip>-->
<!--                            </label>-->
<!--                            <el-input style="width: 800px" type="textarea" placeholder="请输入分享描述,如需带分享者昵称，则加变量%s" v-model="ruleForm.share_desc"></el-input>-->
<!--                        </el-form-item>-->

                        <el-form-item label="公司名称" prop="company" >
                            <el-input style="width: 500px" placeholder="请输入公司名称" v-model="ruleForm.company" type="text"></el-input>
                        </el-form-item>

<!--                        <el-form-item label="公司地址" prop="address" >-->
<!--                            <el-input style="width: 800px" placeholder="请输入公司地址" v-model.number="ruleForm.address" type="text"></el-input>-->
<!--                        </el-form-item>-->

                        <el-form-item label="公司地址" prop="address" :rules="[
                                {required: true, message: '公司地址不能为空'}
                            ]">
                            <el-input size="small" style="width: 800px" v-model="ruleForm.address" v-mtfocus placeholder="请输入公司地址"></el-input>
                        </el-form-item>
                        <el-form-item label="经纬度" prop="lng" :rules="[
                                {required: true, message: '经纬度不能为空'}
                            ]">
                            <el-input size="small" style="width: 800px" v-model="long_lat" disabled>
                                <template #append>

                                </template>
                            </el-input>
                            <!-- 地图 start -->
                            <com-qq-map style="margin-top: 10px" @map-submit="mapEvent" :address="ruleForm.address" :lat="ruleForm.lat" :long="ruleForm.lng">
                                <el-button type="primary">展开地图</el-button>
                            </com-qq-map>
                        </el-form-item>


                        <el-form-item label="公司logo" prop="logo" >
                            <com-attachment v-model="ruleForm.logo" :multiple="false" :max="1">
                                <el-tooltip class="item" effect="dark" content="建议尺寸:420 * 336" placement="top">
                                    <el-button size="mini">选择图片</el-button>
                                </el-tooltip>
                            </com-attachment>
                            <div v-if="ruleForm.logo" class="customize-share-title">
                                <el-image mode="aspectFill" width='80px' height='80px' :src="ruleForm.logo ? ruleForm.logo : ''"></el-image>
                                <el-button v-if="ruleForm.logo" class="del-btn" size="mini"  type="danger" icon="el-icon-close" circle  @click="ruleForm.logo = ''"></el-button>
                            </div>
                        </el-form-item>
                        <el-form-item label="视频简介" prop="video_url">
                            <el-input v-model="ruleForm.video_url" placeholder="请输入视频原地址或选择上传视频" class="width-560">
                                <template slot="append">
                                    <com-attachment :multiple="false" :max="1" @selected="videoUrl" type="videos">
                                        <el-tooltip class="item" effect="dark" content="支持格式mp4;支持编码H.264;视频大小不能超过50 MB" placement="top">
                                            <el-button size="mini">添加视频</el-button>
                                        </el-tooltip>
                                    </com-attachment>
                                </template>
                            </el-input>
                            <el-link class="box-grow-0" type="primary" style="font-size:12px" v-if='ruleForm.video_url'
                                     :underline="false" target="_blank" :href="ruleForm.video_url">视频链接
                            </el-link>
                        </el-form-item>
                        <el-form-item label="视频封面" prop="video_cover_pic">
                            <com-attachment v-if="!ruleForm.video_cover_pic" :multiple="false" :max="1" type="images" @selected="videoCoverPic">
                                <div class="card-upload">
                                    <i class="el-icon-plus"></i>
                                </div>
                            </com-attachment>
                            <div class="card-coverimg" v-else>
                                <el-image style="width: 80px; height: 80px" :src="ruleForm.video_cover_pic"></el-image>
                                <el-button @click="ruleForm.video_cover_pic = ''" class="icon-close" type="danger" size="mini" icon="el-icon-close" circle></el-button>
                            </div>
                            <p style="color: #999">建议尺寸：750 * 450px</p>
                        </el-form-item>

                        <el-form-item prop="images">
                            <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">
                                <draggable v-model="ruleForm.images" v-if="ruleForm.images.length" flex="dif:left">
                                    <div class="card-coverimg" v-for="(item, index) in ruleForm.images">
                                        <el-image :preview-src-list="ruleForm.images" mode="aspectFill" class="elImages"
                                                  style="width: 80px; height: 80px; cursor: move" :src="item"></el-image>
                                        <el-button @click="handle('delPic', index)" class="icon-close" type="danger" size="mini" icon="el-icon-close" circle></el-button>
                                    </div>
                                </draggable>
                                <com-attachment v-if="ruleForm.images.length < 8" :multiple="true" :max="9" type="images" @selected="handle('picUrl', $event)">
                                    <div class="card-upload">
                                        <i class="el-icon-plus"></i>
                                    </div>
                                </com-attachment>
                            </div>
                            <p class="tips-text">第一张图片为缩略图,可拖拽使其改变顺序,最多支持上传8张</p>
                        </el-form-item>
                        
                        <el-form-item label="个人简介" prop="company" >
                            <el-input style="width: 500px" placeholder="请输入个人简介" v-model="ruleForm.sign" type="textarea" :rows="3"></el-input>
                        </el-form-item>


                        <h3>其他设置</h3>
                        <el-form-item label="背景图" prop="share_pic">
                            <com-attachment v-if="!ruleForm.share_pic" :multiple="false" :max="1" type="images" @selected="sharePic">
                                <div class="card-upload">
                                    <i class="el-icon-plus"></i>
                                </div>
                            </com-attachment>
                            <div class="card-coverimg" v-else>
                                <el-image style="width: 80px; height: 80px" :src="ruleForm.share_pic"></el-image>
                                <el-button @click="ruleForm.share_pic = ''" class="icon-close" type="danger" size="mini" icon="el-icon-close" circle></el-button>
                            </div>
                            <p style="color: #999">建议尺寸：450 * 450px</p>
                        </el-form-item>
                        <el-form-item label="名片列表展示">
                            <label slot="label">
                                <span>名片列表展示</span>
                                <el-tooltip effect="dark" content="身份角色被勾选以后前端用户对应的角色才可以查看名片列表的用户（企业名片）" placement="top">
                                    <i class="el-icon-info"></i>
                                </el-tooltip>
                            </label>
                            <el-checkbox-group v-model="ruleForm.list_card_show">
                                <el-checkbox label="boss">boss列表展示</el-checkbox>
                                <el-checkbox label="leader">主管列表展示</el-checkbox>
                            </el-checkbox-group>
                        </el-form-item>
                        <el-form-item label="是否开启名片密令">
                            <label slot="label">
                                <span>是否开启名片密令</span>
                                <el-tooltip effect="dark" content="开启名片密令,前端显示弹框并且需要输入密令" placement="top">
                                    <i class="el-icon-info"></i>
                                </el-tooltip>
                            </label>
                           <el-switch
                              v-model="ruleForm.is_card_token"
                              :active-value="1"
                              :inactive-value="0"
                           >
                            </el-switch>
                        </el-form-item>
                        <el-form-item label="名片密令" v-if="ruleForm.is_card_token == 1">
                            <label slot="label">
                                <span>名片密令</span>
                                <el-tooltip effect="dark" content="用户需要输入当前密令才能创建名片" placement="top">
                                    <i class="el-icon-info"></i>
                                </el-tooltip>
                            </label>
                            <el-input style="width: 500px" placeholder="请输入名片密令" v-model="ruleForm.card_token" type="text"></el-input>
                        </el-form-item>

                        <el-form-item prop="goods_list">
                            <template slot="label">
                                <span>名片推广商品</span>
                            </template>
                            <div style="display: inline-block;">
                                <div flex="cross:center">
                                    <!-- <div>指定商品</div> -->
                                    <div style="margin-left: 10px;">
                                        <com-dialog-select :multiple="true" @selected="goodsSelect" title="商品选择">
                                            <el-button>选择商品</el-button>
                                        </com-dialog-select>
                                    </div>
                                </div>
                            </div>
                        </el-form-item>

                        <el-form-item v-if="goods_list && goods_list.length > 0">
                            <div style="max-width:400px;max-height: 300px;overflow-y: auto;background-color: #eee;margin-bottom: 5px;" v-for="(item,index) in goods_list">
                                <div flex>
                                    <div style="padding-right: 10px;flex-grow: 0">
                                        <com-image mode="aspectFill"
                                                   :src="item.cover_pic"></com-image>
                                    </div>
                                    <div style="flex-grow: 1;">
                                        <com-ellipsis :line="2">{{item.goods_name}}
                                        </com-ellipsis>
                                    </div>
                                    <div style="flex-grow: 0;">
                                        <el-button @click="handle('deleteGoods', index)"
                                                   type="text" circle size="mini">
                                            <el-tooltip class="item" effect="dark"
                                                        content="删除" placement="top">
                                                <img src="resources/img/mall/del.png" alt="">
                                            </el-tooltip>
                                        </el-button>
                                    </div>
                                </div>
                            </div>
                        </el-form-item>

                        <h3>名片样式</h3>
                        <el-row :gutter="30">
                            <el-col :span="4" style="position: relative">
                                <el-button :style="ruleForm.style == 0 ? '' : 'display: none'"
                                           type="success" class="icon-check" size="mini" icon="el-icon-check" circle></el-button>
                                <el-card style="cursor: pointer" title="选择样式1" :body-style="{ padding: '0px' }" shadow="hover" :class="ruleForm.style == 0 ? 'selected-style' : ''">
                                    <img @click="onChangeStyle(0)" style="width: 100%" :src="diy_img_prefix+'/static/addons/business-card/style-0.png'" class="image">
                                    <div @click="onChangeStyle(0)" style="padding: 14px; text-align: center">
                                        <span>样式1</span>
                                    </div>
                                </el-card>
                            </el-col>
                            <el-col :span="6" style="position: relative">
                                <el-button :style="ruleForm.style == 1 ? '' : 'display: none'" class="icon-check" type="success" size="mini" icon="el-icon-check" circle></el-button>
                                <el-card style="cursor: pointer" title="选择样式2" :body-style="{ padding: '0px' }" shadow="hover" :class="ruleForm.style == 1 ? 'selected-style' : ''">
                                    <img @click="onChangeStyle(1)" style="width: 100%" :src="diy_img_prefix+'/static/addons/business-card/style-1.png'" class="image">
                                    <div @click="onChangeStyle(1)" style="padding: 14px; text-align: center">
                                        <span>样式2</span>
                                    </div>
                                </el-card>
                            </el-col>
                        </el-row>
                    </el-tab-pane>
                    <el-tab-pane label="微信公众号通知" name="wechat" style="padding: 10px">
                        <el-form-item prop="wechat_notice_18" label="查看素材通知模板ID">
                            <el-input style="width: 500px" placeholder="请输入查看素材通知模板ID" v-model="ruleForm.wechat_notice_18" type="text"></el-input>
                        </el-form-item>
                        <el-form-item prop="wechat_notice_6" label="查看名片通知模板ID">
                            <el-input style="width: 500px" placeholder="请输入查看名片通知模板ID" v-model="ruleForm.wechat_notice_6" type="text"></el-input>
                        </el-form-item>
                        <el-form-item prop="wechat_notice_15" label="下单通知模板ID">
                            <el-input style="width: 500px" placeholder="请输入下单通知模板ID" v-model="ruleForm.wechat_notice_15" type="text"></el-input>
                        </el-form-item>
                        <el-form-item prop="wechat_notice_limit_6" label="查看名片通知间隔时间">
                            <label slot="label">
                                <span>查看名片通知间隔时间</span>
                                <el-tooltip effect="dark" content="考虑用户频繁查看你的名片的话这个时候为间隔1小时后在通知一次用户"
                                            placement="top">
                                    <i class="el-icon-info"></i>
                                </el-tooltip>
                            </label>
                            <el-input style="width: 500px" placeholder="请输入查看名片通知间隔时间" v-model="ruleForm.wechat_notice_limit_6" type="text">
                                <template #append>小时</template>
                            </el-input>
                        </el-form-item>
                    </el-tab-pane>
                    <el-tab-pane label="样式设置" name="style">
                        <el-form-item label="浏览名片弹窗">
                            <label slot="label">浏览名片弹窗
                                <el-tooltip class="item" effect="dark" content="开启以后用户浏览名片时弹窗不显示" placement="top-start">
                                    <i class="el-icon-info"></i>
                                </el-tooltip>
                            </label>
                            <el-switch v-model="ruleForm.is_show_alert" :active-value="1" :inactive-value="0" active-text="开启" inactive-text="关闭"></el-switch>
                        </el-form-item>
                        <el-form-item label="保存到通讯录">
                            <label slot="label">保存到通讯录
                                <el-tooltip class="item" effect="dark" content="开启以后可以保存名片电话号码至通讯录" placement="top-start">
                                    <i class="el-icon-info"></i>
                                </el-tooltip>
                            </label>
                            <el-switch v-model="ruleForm.is_enable_save_phone" :active-value="1" :inactive-value="0" active-text="开启" inactive-text="关闭"></el-switch>
                        </el-form-item>
                        <el-form-item label="人气靠谱">
                            <label slot="label">人气靠谱
                                <el-tooltip class="item" effect="dark" content="开启以后对'人气', '靠谱'做隐藏" placement="top-start">
                                    <i class="el-icon-info"></i>
                                </el-tooltip>
                            </label>
                            <el-switch v-model="ruleForm.is_hidden_popularity" :active-value="1" :inactive-value="0" active-text="开启" inactive-text="关闭"></el-switch>
                        </el-form-item>
                        <el-form-item label="商城底部导航">
                            <label slot="label">商城底部导航
                                <el-tooltip class="item" effect="dark" content="开启以后浏览名片时显示主商城导航" placement="top-start">
                                    <i class="el-icon-info"></i>
                                </el-tooltip>
                            </label>
                            <el-switch v-model="ruleForm.is_show_mall_nav" :active-value="1" :inactive-value="0" active-text="开启" inactive-text="关闭"></el-switch>
                        </el-form-item>
                        <el-form-item label="显示上级名片">
                            <label slot="label">显示上级名片
                                <el-tooltip class="item" effect="dark" content="开启以后用户未创建名片时显示上级名片" placement="top-start">
                                    <i class="el-icon-info"></i>
                                </el-tooltip>
                            </label>
                            <el-switch v-model="ruleForm.is_show_parent_card" :active-value="1" :inactive-value="0" active-text="开启" inactive-text="关闭"></el-switch>
                        </el-form-item>
                        <el-form-item label="修改部门">
                            <label slot="label">修改部门
                                <el-tooltip class="item" effect="dark" content="开启以后用户可以修改所属部门" placement="top-start">
                                    <i class="el-icon-info"></i>
                                </el-tooltip>
                            </label>
                            <el-switch v-model="ruleForm.is_show_update_division" :active-value="1" :inactive-value="0" active-text="开启" inactive-text="关闭"></el-switch>
                        </el-form-item>
                        <el-form-item label="修改名片权限">
                            <el-switch v-model="ruleForm.is_allow_edit_card_info" :active-value="1" :inactive-value="0" active-text="开启" inactive-text="关闭"></el-switch>
                            <p class="tips-text" style="line-height: 20px; color: red;">
                                注意：<br>
                                请谨慎使用，若开启后谨慎操作关闭！！<br>
                                开启后，所有名片主自己可自定义修改所有的名片内容，不受部门主管和BOSS权限影响；<br>
                                若关闭，员工的名片主的个性专栏信息会变回平台的默认配置；
                            </p>
                        </el-form-item>
                        <el-form-item>
                            <label slot="label">
                                查看名片时不强制唤起登录
                                <el-tooltip class="item" effect="dark" content="开启后用户即使没登录过，也可正常浏览" placement="top-start">
                                    <i class="el-icon-info"></i>
                                </el-tooltip>
                            </label>
                            <el-switch v-model="ruleForm.is_not_forced_login" :active-value="1" :inactive-value="0" active-text="开启" inactive-text="关闭"></el-switch>
                        </el-form-item>
                        <el-form-item>
                            <label slot="label">
                                查看名片时是否显示创建名片按钮
                                <el-tooltip class="item" effect="dark" content="开启后若没创建名片则显示，关闭后不显示" placement="top-start">
                                    <i class="el-icon-info"></i>
                                </el-tooltip>
                            </label>
                            <el-switch v-model="ruleForm.is_show_create_btn" :active-value="1" :inactive-value="0" active-text="开启" inactive-text="关闭"></el-switch>
                        </el-form-item>
                        <el-form-item>
                            <label slot="label">名片预览页公司名称
                                <el-tooltip class="item" effect="dark" content="配置名片预览页自定义“公司名称”显示的标题" placement="top-start">
                                    <i class="el-icon-info"></i>
                                </el-tooltip>
                            </label>
                            <el-input v-model="ruleForm.company_name_show_label" type="text" maxlength="4" style="width: 250px;" show-word-limit></el-input>
                        </el-form-item>
                        <el-form-item>
                            <label slot="label">名片预览页公司地址
                                <el-tooltip class="item" effect="dark" content="配置名片预览页自定义“公司地址”显示的标题" placement="top-start">
                                    <i class="el-icon-info"></i>
                                </el-tooltip>
                            </label>
                            <el-input v-model="ruleForm.company_address_show_label" type="text" maxlength="4" style="width: 250px;" show-word-limit></el-input>
                        </el-form-item>
                        <el-form-item>
                            <label slot="label">编辑名片页部门
                                <el-tooltip class="item" effect="dark" content="配置编辑名片页自定义“部门”显示的标题" placement="top-start">
                                    <i class="el-icon-info"></i>
                                </el-tooltip>
                            </label>
                            <el-input v-model="ruleForm.department_show_label" type="text" maxlength="4" style="width: 250px;" show-word-limit></el-input>
                        </el-form-item>
                        <el-form-item>
                            <label slot="label">编辑名片页公司
                                <el-tooltip class="item" effect="dark" content="配置编辑名片页自定义“公司”显示的标题" placement="top-start">
                                    <i class="el-icon-info"></i>
                                </el-tooltip>
                            </label>
                            <el-input v-model="ruleForm.company_show_label" type="text" maxlength="4" style="width: 250px;" show-word-limit></el-input>
                        </el-form-item>
                        <el-form-item>
                            <label slot="label">名片预览页添加命令
                                <el-tooltip class="item" effect="dark" content="配置名片预览页自定义“添加命令”显示的标题" placement="top-start">
                                    <i class="el-icon-info"></i>
                                </el-tooltip>
                            </label>
                            <el-input v-model="ruleForm.add_command_show_title" type="text" maxlength="15" style="width: 250px;" show-word-limit></el-input>
                        </el-form-item>
                    </el-tab-pane>

                    <el-tab-pane label="人脉设置" name="networking">
                        <h3 style="margin-left:20px;margin-right:20px;padding-bottom:10px;border-bottom:solid 1px #ccc;">基础设置</h3>
                        <el-form-item label="启用功能">
                            <el-switch v-model="ruleForm.is_show_networking" :active-value="1" :inactive-value="0"></el-switch>
                            <p class="tips-text">开启开关后才能启用人脉设置的全部功能</p>
                        </el-form-item>
                        <el-form-item label="人脉文字定义">
                            <el-input style="width: 500px" placeholder="请输入人脉名称" v-model="ruleForm.networking_name" type="text"></el-input>
                        </el-form-item>
                        <el-form-item label="顶部轮播图" prop="images">
                            <div>
                                <draggable v-model="ruleForm.first_img" v-if="ruleForm.first_img.length" style="display:flex;flex-wrap:wrap;flex-direction:row;">
                                    <div class="card-coverimg" v-for="(item, index) in ruleForm.first_img">
                                        <el-image :preview-src-list="ruleForm.first_img" mode="aspectFill" class="elImages"
                                                  style="width: 80px; height: 80px; cursor: move" :src="item"></el-image>
                                        <el-button @click="handle('delFirstImg', index)" class="icon-close" type="danger" size="mini" icon="el-icon-close" circle></el-button>
                                    </div>
                                </draggable>
                                <com-attachment v-if="ruleForm.first_img.length < 20" :multiple="true" :max="20" type="images" @selected="handle('firstImg', $event)">
                                    <div class="card-upload">
                                        <i class="el-icon-plus"></i>
                                    </div>
                                </com-attachment>
                            </div>
                            <p class="tips-text">未添加图片则前端隐藏该板块，前端轮播顺序同图片的添加顺序，最多可添加20张图片,建议尺寸:700*330</p>
                        </el-form-item>
                        <el-form-item label="公告">
                            <el-input style="width: 500px" placeholder="请输入公告" v-model="ruleForm.networking_notice" type="textarea" :rows="4" maxlength="120"
  show-word-limit></el-input>
                        </el-form-item>
                        <el-form-item label="脉友达人名称">
                            <el-input style="width: 500px" placeholder="请输入脉友达人名称" v-model="ruleForm.expert_name" type="text"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <label slot="label">显示的会员等级
                                <el-tooltip class="item" effect="dark" content="被选中的会员等级会随机抽取三名会员在麦友达人板块进行显示" placement="top-start">
                                    <i class="el-icon-info"></i>
                                </el-tooltip>
                            </label>
                            <el-select v-model="ruleForm.level" multiple placeholder="请选择">
                                <el-option
                                v-for="item in levels"
                                :key="item.level"
                                :label="item.name"
                                :value="item.level">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="二级轮播图" prop="images">
                            <div>
                                <draggable v-model="ruleForm.second_img" v-if="ruleForm.second_img.length" style="display:flex;flex-wrap:wrap;flex-direction:row;">
                                    <div class="card-coverimg" v-for="(item, index) in ruleForm.second_img">
                                        <el-image :preview-src-list="ruleForm.second_img" mode="aspectFill" class="elImages"
                                                  style="width: 80px; height: 80px; cursor: move" :src="item"></el-image>
                                        <el-button @click="handle('delSecondImg', index)" class="icon-close" type="danger" size="mini" icon="el-icon-close" circle></el-button>
                                    </div>
                                </draggable>
                                <com-attachment v-if="ruleForm.second_img.length < 20" :multiple="true" :max="20" type="images" @selected="handle('secondImg', $event)">
                                    <div class="card-upload">
                                        <i class="el-icon-plus"></i>
                                    </div>
                                </com-attachment>
                            </div>
                            <p class="tips-text">未添加图片则前端隐藏该板块，前端轮播顺序同图片的添加顺序，最多可添加20张图片,建议尺寸:700*330</p>
                        </el-form-item>
                        <el-form-item label="人脉广场名称">
                            <el-input style="width: 500px" placeholder="请输入人脉广场名称" v-model="ruleForm.square_name" type="text"></el-input>
                        </el-form-item>
                        <h3 style="margin-left:20px;margin-right:20px;padding-bottom:10px;border-bottom:solid 1px #ccc;">信息收集</h3>

                        <el-form-item label="微信二维码收集开关">
                            <el-switch v-model="ruleForm.collect_wechat" :active-value="1" :inactive-value="0"></el-switch>
                            <!-- <p class="tips-text">开启开关后才能启用人脉设置的全部功能</p> -->
                        </el-form-item>
                        <el-form-item label="我提供的人脉资源">
                            <el-tag
                                :key="index"
                                v-for="(tag, index) in ruleForm.supply_resources"
                                closable
                                :disable-transitions="false"
                                @close="handleClose(1, index)">
                                <el-input v-model='tag.name' type='text' size='small' style="width:100px;"></el-input>
                            </el-tag>
                            <el-input
                                class="input-new-tag"
                                v-if="inputSupply"
                                v-model="inputValue"
                                ref="saveSupplyInput"
                                size="small"
                                @keyup.enter.native="handleInputConfirm(1)"
                                @blur="handleInputConfirm(1)"
                                >
                            </el-input>
                            <el-button v-else class="button-new-tag" size="small" @click="showInput(1)" type><i class="el-icon-plus"></i></el-button>
                            <p class="tips-text">已关联过用户的标签不允许删除</p>
                        </el-form-item>

                        <el-form-item label="我需要的人脉资源">
                            <el-tag
                                :key="index"
                                v-for="(tag, index) in ruleForm.need_resources"
                                closable
                                :disable-transitions="false"
                                @close="handleClose(2, index)">
                                <el-input v-model='tag.name' type='text' size='small' style="width:100px;"></el-input>
                            </el-tag>
                            <el-input
                                class="input-new-tag"
                                v-if="inputNeed"
                                v-model="inputValue"
                                ref="saveNeedInput"
                                size="small"
                                @keyup.enter.native="handleInputConfirm(2)"
                                @blur="handleInputConfirm(2)"
                                >
                            </el-input>
                            <el-button v-else class="button-new-tag" size="small" @click="showInput(2)" type><i class="el-icon-plus"></i></el-button>
                            <p class="tips-text">已关联过用户的标签不允许删除</p>
                        </el-form-item>

                        <el-form-item label="最高学历">
                            <el-tag
                                :key="index"
                                v-for="(tag, index) in ruleForm.education"
                                closable
                                :disable-transitions="false"
                                @close="handleClose(3, index)">
                                <el-input v-model='tag.name' type='text' size='small' style="width:100px;"></el-input>
                            </el-tag>
                            <el-input
                                class="input-new-tag"
                                v-if="inputEducation"
                                v-model="inputValue"
                                ref="saveEducationInput"
                                size="small"
                                @keyup.enter.native="handleInputConfirm(3)"
                                @blur="handleInputConfirm(3)"
                                >
                            </el-input>
                            <el-button v-else class="button-new-tag" size="small" @click="showInput(3)" type><i class="el-icon-plus"></i></el-button>
                            <p class="tips-text">已关联过用户的标签不允许删除</p>
                        </el-form-item>
                        <el-form-item label="是否开启附加信息收集">
                            <el-switch v-model="ruleForm.collect_info" :active-value="1" :inactive-value="0"></el-switch>
                            <p class="tips-text">开启开关则智能拓客-名片编辑页面新增性别、活跃城市、婚姻状态、生肖、从事过的行业、身份标签填写项目</p>
                        </el-form-item>
                        <el-form-item label="填写状态">
                            <el-radio-group v-model="ruleForm.is_required">
                                <el-radio :label="1">必填</el-radio>
                                <el-radio :label="0">非必填</el-radio>
                            </el-radio-group>
                            <p class="tips-text">开启开关则智能拓客-名片编辑页面新增性别、活跃城市、婚姻状态、生肖、从事过的行业、身份标签填写项目</p>
                        </el-form-item>

                        <el-form-item label="从事过的行业">
                            <el-tag
                                :key="index"
                                v-for="(tag, index) in ruleForm.industry"
                                closable
                                :disable-transitions="false"
                                @close="handleClose(4, index)">
                                <el-input v-model='tag.name' type='text' size='small' style="width:100px;"></el-input>
                            </el-tag>
                            <el-input
                                class="input-new-tag"
                                v-if="inputIndustry"
                                v-model="inputValue"
                                ref="saveIndustryInput"
                                size="small"
                                @keyup.enter.native="handleInputConfirm(4)"
                                @blur="handleInputConfirm(4)"
                                >
                            </el-input>
                            <el-button v-else class="button-new-tag" size="small" @click="showInput(4)" type><i class="el-icon-plus"></i></el-button>
                            <p class="tips-text">已关联过用户的标签不允许删除</p>
                        </el-form-item>
                        <el-form-item label="身份标签">
                            <el-tag
                                :key="index"
                                v-for="(tag, index) in ruleForm.identity_tags"
                                closable
                                :disable-transitions="false"
                                @close="handleClose(5, index)">
                                <el-input v-model='tag.name' type='text' size='small' style="width:100px;"></el-input>
                            </el-tag>
                            <el-input
                                class="input-new-tag"
                                v-if="inputIdentity"
                                v-model="inputValue"
                                ref="saveIdentityInput"
                                size="small"
                                @keyup.enter.native="handleInputConfirm(5)"
                                @blur="handleInputConfirm(5)"
                                >
                            </el-input>
                            <el-button v-else class="button-new-tag" size="small" @click="showInput(5)" type><i class="el-icon-plus"></i></el-button>
                            <p class="tips-text">已关联过用户的标签不允许删除</p>
                        </el-form-item>
                    </el-tab-pane>
                </el-tabs>
            </el-card>
        </el-form>
    </el-card>
    <el-button :loading="btnLoading" class="button-item" type="primary" style="margin-top: 24px;"
                @click="send('add')" size="small">保存
    </el-button>
</div>
<script src="/resources/js/Sortable.min.js"></script>
<script src="/resources/unpkg/vuedraggable@2.18.1/dist/vuedraggable.umd.min.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data() {
            return {
                loading: false,
                btnLoading: false,
                goods_list:[],
                ruleForm: {
                    company: '',
                    address: '',
                    share_title: '',
                    share_desc: '',
                    logo: '',
                    is_card_token: '0',
                    card_token: '',
                    images: [],
                    goods_list: [],
                    list_card_show: [],
                    style: 0,
                    video_url: '',
                    video_cover_pic: '',
                    wechat_notice_18: '',   //  查看素材
                    wechat_notice_6: '',    //  查看名片
                    wechat_notice_limit_6: 0,    //  查看名片 限制
                    wechat_notice_15: '',   //  下单
                    share_pic: '',
                    is_show_alert: 0,
                    is_enable_save_phone: 0,
                    is_hidden_popularity: 0,
                    is_show_mall_nav: 0,
                    is_show_parent_card: 0,
                    lng: '',
                    lat: '',
                    company_name_show_label: '',
                    company_address_show_label: '',
                    department_show_label: '',
                    company_show_label: '',
                    add_command_show_title: '',
                    is_allow_edit_card_info: 0,
                    is_not_forced_login: 0,
                    is_show_create_btn: 0,
                    is_show_networking:0,//是否启用人脉功能
                    collect_wechat:0, //收集微信二维码
                    collect_info: 0,//附加信息收集
                    is_required: 0, //是否必填
                    networking_name: '人脉',
                    expert_name: '脉友达人',
                    square_name: '人脉广场',
                    networking_notice: '',//公告
                    first_img: [],
                    second_img:[],
                    level: [],
                    supply_resources: [], //能提供的人脉资源
                    need_resources : [], //需要的人脉资源
                    education: [], //学历
                    industry: [], //从事行业
                    identity_tags: [], //身份标签
                    sign: '',//个人简介
                },
                inputSupply: false,
                inputNeed: false,
                inputEducation: false,
                inputIndustry: false,
                inputIdentity: false,
                inputValue: '',
                levels: [],
                long_lat: '',
                diy_img_prefix: '<?= Yii::getAlias('@attachurl') ?>',
                activeName: 'basic',
            }
        },
        mounted() {
            this.send('getData');
        },
        methods: {
            clickHandler() {
                alert(1)
            },
            handleClick(tab, event) {

            },
            send(type, param1 = null, param2 = null) {
                switch(type) {
                    case 'getData':
                        this.loading = true;
                        request({
                            params: {r: 'business-card/setting/index'},
                        }).then(e=>{
                            if (e.data.code == 0) {
                                this.ruleForm = Object.assign(this.ruleForm, e.data.data)
                                console.log(this.ruleForm);
                                if (this.ruleForm.lat) this.long_lat = `${this.ruleForm.lat}-${this.ruleForm.lng}`
                                this.levels = e.data.data.levels;
                                if(!this.ruleForm.goods_list){
                                    this.ruleForm.goods_list = [];
                                }else{
                                    this.goods_list = this.ruleForm.goods_list;
                                }
                            } else {
                                this.$message.error(e.data.msg);
                            }
                            this.loading = false;
                        }).catch(e=>{
                            this.loading = false;
                            this.$message.error(e.data.msg);
                        })
                        break;
                    case 'add':
                        this.btnLoading = true
                        this.ruleForm.goods_list =this.goods_list;
                        if (this.ruleForm.is_card_token == '1') {
                            if (this.ruleForm.card_token === undefined || this.ruleForm.card_token === null || this.ruleForm.card_token == '') {
                                this.btnLoading = false;
                                this.$message.error('名片密令不能为空');
                                return false;
                            }
                        }
                        request({
                            params: {r: 'business-card/setting/index'},
                            data: this.ruleForm,
                            method: 'post'
                        }).then(e=>{
                            if(e.data.code == 0) {
                                this.send('getData');
                                this.$message.success(e.data.msg);
                            } else {
                                this.$message.error(e.data.msg);
                            }
                            this.btnLoading = false;
                        }).catch(e=>{
                            this.btnLoading = false,
                            this.$message.error(e.data.msg);
                        })
                        break;
                }
            },
            handle(type, param1 = null, param2 = null) {
                switch(type) {
                    //上传图片
                    case 'picUrl':
                        if (param1) {
                            let self = this;
                            param1.forEach(function(item, index){
                                if (!self.ruleForm.images || self.ruleForm.images.length >= 9) {
                                    return;
                                }
                                self.ruleForm.images.push(item.url)
                            })
                        }
                        break;
                    //删除图片
                    case 'delPic':
                        this.ruleForm.images.splice(param1, 1)
                        break;
                    case 'deleteGoods':
                        this.goods_list.splice(param1,1);
                        break
                    case 'firstImg':
                        if (param1) {
                            let self = this;
                            param1.forEach(function(item, index){
                                if (!self.ruleForm.first_img || self.ruleForm.first_img.length >= 20) {
                                    return;
                                }
                                self.ruleForm.first_img.push(item.url)
                            })
                        }
                        break;
                    case 'delFirstImg':
                        this.ruleForm.first_img.splice(param1, 1)
                        break;
                    case 'secondImg':
                        if (param1) {
                            let self = this;
                            param1.forEach(function(item, index){
                                if (!self.ruleForm.second_img || self.ruleForm.second_img.length >= 20) {
                                    return;
                                }
                                self.ruleForm.second_img.push(item.url)
                            })
                        }
                        break;
                    case 'delSecondImg':
                        this.ruleForm.second_img.splice(param1, 1)
                        break;
                }
            },
            updatePicUrl(e, params) {
                console.log(e);
            },
            goodsSelect(param) {
                for (let i = 0; i < param.length; i++) {
                    if (i > 14) {
                        break;
                    }
                    this.goods_list.push(JSON.parse(JSON.stringify({
                        goods_name: param[i]['goods_name'], goods_id: param[i]['id'], cover_pic: param[i]['cover_pic'], price: param[i]['price']
                    })));
                }
            },
            videoUrl(e) {
                if (e.length > 0) {
                    this.$set(this.ruleForm, 'video_url', e[0].url)
                    this.$set(this.ruleForm, 'video_cover_pic', e[0].thumb_url)
                }
            },
            videoCoverPic(e) { // 选择图片
                this.ruleForm.video_cover_pic = e[0].url
            },
            sharePic(e) { // 选择图片
                this.$set(this.ruleForm, 'share_pic', e[0].url)
            },
            onChangeStyle(index) {
                this.$set(this.ruleForm, 'style', index)
            },
            mapEvent(e) {
                this.ruleForm.lng = e.long;
                this.ruleForm.lat = e.lat;
                this.ruleForm.address = e.address;
                this.long_lat = e.lat + '-' + e.long;
                this.$forceUpdate();
                this.clearValidate('ruleForm');
            },

            handleClose(type, index) {
                switch (type) {
                    case 1:
                        if (!this.ruleForm.supply_resources[index].id) {
                            this.ruleForm.supply_resources.splice(index, 1);
                        } else {
                            this.$confirm('此操作将永久删除该标签, 是否继续?', '提示', {
                                confirmButtonText: '确定',
                                cancelButtonText: '取消',
                                type: 'warning'
                            }).then(() => {
                                this.delTag(this.ruleForm.supply_resources[index].id, 1, index);
                            }).catch(() => {
                                this.$message({
                                    type: 'info',
                                    message: '已取消操作'
                                });          
                            });
                        }
                    break;
                    case 2:
                        if (!this.ruleForm.need_resources[index].id) {
                            this.ruleForm.need_resources.splice(index, 1);
                        } else {
                            this.$confirm('此操作将永久删除该标签, 是否继续?', '提示', {
                                confirmButtonText: '确定',
                                cancelButtonText: '取消',
                                type: 'warning'
                            }).then(() => {
                                this.delTag(this.ruleForm.need_resources[index].id, 2, index);
                            }).catch(() => {
                                this.$message({
                                    type: 'info',
                                    message: '已取消操作'
                                });          
                            });
                        }
                    break;
                    case 3:
                        if (!this.ruleForm.education[index].id) {
                            this.ruleForm.education.splice(index, 1);
                        } else {
                            this.$confirm('此操作将永久删除该标签, 是否继续?', '提示', {
                                confirmButtonText: '确定',
                                cancelButtonText: '取消',
                                type: 'warning'
                            }).then(() => {
                                this.delTag(this.ruleForm.education[index].id, 3, index);
                            }).catch(() => {
                                this.$message({
                                    type: 'info',
                                    message: '已取消操作'
                                });          
                            });
                        }
                    break;
                    case 4:
                        if (!this.ruleForm.industry[index].id) {
                            this.ruleForm.industry.splice(index, 1);
                        } else {
                            this.$confirm('此操作将永久删除该标签, 是否继续?', '提示', {
                                confirmButtonText: '确定',
                                cancelButtonText: '取消',
                                type: 'warning'
                            }).then(() => {
                                this.delTag(this.ruleForm.industry[index].id, 4, index);
                            }).catch(() => {
                                this.$message({
                                    type: 'info',
                                    message: '已取消操作'
                                });          
                            });
                        }
                    break;
                    case 5:
                        if (!this.ruleForm.identity_tags[index].id) {
                            this.ruleForm.identity_tags.splice(index, 1);
                        } else {
                            this.$confirm('此操作将永久删除该标签, 是否继续?', '提示', {
                                confirmButtonText: '确定',
                                cancelButtonText: '取消',
                                type: 'warning'
                            }).then(() => {
                                this.delTag(this.ruleForm.identity_tags[index].id, 5, index);
                            }).catch(() => {
                                this.$message({
                                    type: 'info',
                                    message: '已取消操作'
                                });          
                            });
                        }
                    break;
                }
                // this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
            },

            showInput(type) {
                switch (type) {
                    case 1:
                        this.inputSupply = true;
                        this.$nextTick(_ => {
                            this.$refs.saveSupplyInput.$refs.input.focus();
                        });
                    break;
                
                    case 2:
                        this.inputNeed = true;
                        this.$nextTick(_ => {
                            this.$refs.saveNeedInput.$refs.input.focus();
                        });
                    break;
                    case 3:
                        this.inputEducation = true;
                        this.$nextTick(_ => {
                            this.$refs.saveEducationInput.$refs.input.focus();
                        });
                    break;
                    case 4:
                        this.inputIndustry = true;
                        this.$nextTick(_ => {
                            this.$refs.saveIndustryInput.$refs.input.focus();
                        });
                    break;
                    case 5:
                        this.inputIdentity = true;
                        this.$nextTick(_ => {
                            this.$refs.saveIdentityInput.$refs.input.focus();
                        });
                    break;
                }
                
            },

            handleInputConfirm(type) {
                let inputValue = this.inputValue;
                switch (type) {
                    case 1:
                        if (inputValue) {
                            this.ruleForm.supply_resources.push({"name" : inputValue, "type": 1, "status": 1});
                        }
                        this.inputSupply = false;
                    break;
                
                    case 2:
                        if (inputValue) {
                            this.ruleForm.need_resources.push({"name" : inputValue, "type": 2, "status": 1});
                        }
                        this.inputNeed = false;
                    break;
                    case 3:
                        if (inputValue) {
                            this.ruleForm.education.push({"name" : inputValue, "type": 3, "status": 1});
                        }
                        this.inputEducation = false;
                    break;
                    case 4:
                        if (inputValue) {
                            this.ruleForm.industry.push({"name" : inputValue, "type": 4, "status": 1});
                        }
                        this.inputIndustry = false;
                    break;
                    case 5:
                        if (inputValue) {
                            this.ruleForm.identity_tags.push({"name" : inputValue, "type": 5, "status": 1});
                        }
                        this.inputIdentity = false;
                    break;
                }
                this.inputValue = '';
            },
            delTag(id, type, index) {
                request({
                    params: {r: 'business-card/setting/del-tag'},
                    data: {
                        id: id,
                        type: type,
                    },
                    method: 'post'
                }).then(e=>{
                    if(e.data.code == 0) {
                        switch (type) {
                            case 1:
                                this.ruleForm.supply_resources.splice(index, 1);
                            break;
                            case 2:
                                this.ruleForm.need_resources.splice(index, 1);
                            break;
                            case 3:
                                this.ruleForm.education.splice(index, 1);
                            break;
                            case 4:
                                this.ruleForm.industry.splice(index, 1);
                            break;
                            case 5:
                                this.ruleForm.identity_tags.splice(index, 1);
                            break;
                        }
                        this.$message.success(e.data.msg);
                    } else {
                        this.$message.error(e.data.msg);
                    }
                    this.btnLoading = false;
                }).catch(e=>{
                    this.btnLoading = false,
                    this.$message.error(e.data.msg);
                })
            }
        }
    })
</script>
<style>
    .form_box {
        background-color: #f3f3f3;
        padding: 0 0 20px;
    }

    .button-item {
        margin-top: 12px;
        padding: 9px 25px;
    }
    .customize-share-title {
        margin-top: 10px;
        width: 80px;
        height: 80px;
        position: relative;
        cursor: move;
    }
    .del-btn {
        position: absolute;
        right: -8px;
        top: -8px;
        padding: 4px 4px;
    }

    .el-input-group__append {
        background-color: #fff;
        color: #353535;
    }
	.add-image-btn {
	    width: 100px;
	    height: 100px;
	    color: #419EFB;
	    border: 1px solid #e2e2e2;
	    cursor: pointer;
	}
    .selected-style {
        border: solid 2px #67C23A;
        position: relative;
    }
    .icon-check {
        position: absolute;
        bottom: -10px;
        right: 0px;
        z-index: 999;
    }
    .el-tag {
        height: auto;
        padding-top:5px;
        padding-bottom: 5px;
    }
    .el-tag + .el-tag {
        margin-left: 10px;
    }
    .button-new-tag {
        margin-left: 10px;
        height: 32px;
        line-height: 30px;
        padding-top: 0;
        padding-bottom: 0;
    }
    .input-new-tag {
        width: 90px;
        margin-left: 10px;
        vertical-align: bottom;
    }
</style>