hemall.terabimsoft.com.cn/plugins/group-code/views/admin/group-code-add.blade.php

@extends('layouts.base')
@section('title', '群活码详情')
@section('content')
<link href="{{ static_url('yunshop/element-ui/2.10.1/css/index.css') }}" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="{{static_url('yunshop/goods/vue-goods1.css')}}"/>
<link rel="stylesheet" href="{{static_url('css/public-number.css')}}">
<script type="text/javascript"
        src="https://api.map.baidu.com/api?v=2.0&ak=QXSZyPZk26shrYzAXjTkDLx5LbRCHECz"></script>
<style>
    .vue-main-title-content a{color:#333}
    .vue-main-title-content a:hover{color:#29ba9c;}
    th {border-bottom: 1px solid #EBEEF5 !important;}
    .dialog-cover{z-index:2001}
    .dialog-content{z-index:2002}
</style>
    <div class="all">
        <div id="app" v-cloak>
            <div class="vue-main">
                
                <div class="vue-main-title">
                    <div class="vue-main-title-left"></div>
                    <div class="vue-main-title-content"><a @click="goParent">群活码</a> > 创建活码</div>
                </div>
                <div class="vue-main-form">
                    
                    <el-form ref="form" :model="form" :rules="rules" label-width="15%">
                        <div class="vue-category-title">活动信息</div>
                        <el-form-item label="活码名称" prop="code_name">
                            <el-input v-model="form.code_name" style="width:70%;" maxlength="20" show-word-limit></el-input>
                        </el-form-item>
                        <el-form-item label="引导语" prop="code_guide">
                            <el-input v-model="form.code_guide" style="width:70%;" maxlength="20" show-word-limit></el-input>
                        </el-form-item>
                        <el-form-item label="访问授权" prop="auth_visit">
                            <el-radio v-model.number="form.auth_visit" :label="0">关闭授权</el-radio>
                            <el-radio v-model.number="form.auth_visit" :label="1">开启授权</el-radio>
                            <div class="tip">开启后会弹窗授权用户信息，可以获取用户头像昵称，关闭授权后则静默获取用户身份</div>
                        </el-form-item>
                        <el-form-item label="选择进群方式" prop="join_type">
                            <el-radio @change="joinTypeChange()" v-model.number="form.join_type" :label="0">默认进群</el-radio>
                            <el-radio @change="joinTypeChange()" v-model.number="form.join_type" :label="1">标签进群</el-radio>
                            <el-radio @change="joinTypeChange()" v-model.number="form.join_type" :label="2">距离进群</el-radio>
                            <div class="tip">当选择默认进群，用户可直接扫码进群，当选择标签进群，用户根据标签选择扫码进群</div>
                        </el-form-item>
                        <el-form-item label="进群权限" prop="join_auth">
                            <el-switch v-model="form.join_auth" :active-value="1" :inactive-value="0"></el-switch>
                        </el-form-item>
                        <el-form-item label="" prop="">
                            <el-checkbox v-model="form.is_pay" :true-label="1" :false-label="0" style="margin-right: 10px"></el-checkbox>
                            累计支付金额满<el-input v-model="form.pay_money" style="width:30%;margin: 0 10px 0 10px" ></el-input>元
                        </el-form-item>
                        <el-form-item label="" prop="">
                            <el-checkbox v-model="form.is_member_level" :true-label="1" :false-label="0" style="margin-right: 10px"></el-checkbox>
                            指定会员等级
                            <el-select
                                    v-model="form.member_level"
                                    multiple
                                    filterable
                                    collapse-tags
                                    style="margin-left: 20px;width: 60%"
                                    placeholder="请选择会员等级">
                                <el-option
                                        v-for="item in member_level_list"
                                        :key="item.id"
                                        :label="item.level_name"
                                        :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="" prop="" v-if="member_tags">
                            <el-checkbox v-model="form.is_member_tags" :true-label="1" :false-label="0" style="margin-right: 10px"></el-checkbox>
                            指定会员标签
                            <el-select
                                    v-model="form.member_tags"
                                    multiple
                                    filterable
                                    {{--reserve-keyword--}}
                                    remote
                                    :remote-method="selectMemberTag"
                                    :loading="loading"
                                    style="margin-left: 20px;width: 60%"
                                    placeholder="请选择会员标签">
                                <el-option
                                        v-for="item in tag_list"
                                        :key="item.id"
                                        :label="item.title"
                                        :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="" prop="">
                            <el-checkbox v-model="form.is_goods" :true-label="1" :false-label="0" style="margin-right: 10px"></el-checkbox>
                            购买指定商品
                            <el-select
                                    v-model="form.goods"
                                    multiple
                                    filterable
                                    {{--reserve-keyword--}}
                                    remote
                                    :remote-method="selectGoods"
                                    :loading="loading"
                                    style="margin-left: 20px;width: 60%"
                                    placeholder="请选择商品">
                                <el-option
                                        v-for="item in goods_list"
                                        :key="item.id"
                                        :label="item.title"
                                        :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>

                        <el-form-item label="标签页banner" prop="label_banner" v-if="form.join_type==1">
                            <div class="upload-box" @click="openUpload('label_banner')" v-if="!form.label_banner_img">
                                <i class="el-icon-plus" style="font-size:32px"></i>
                            </div>
                            <div @click="openUpload('label_banner')" class="upload-boxed" v-if="form.label_banner_img">
                                <img :src="form.label_banner_img" alt="" style="width:150px;height:150px;border-radius: 5px;cursor: pointer;">
                                <div class="upload-boxed-text">点击重新上传</div>
                            </div>
                            <div class="tip">尺寸: 720px*480px，分辨率：72，大小不超过800Kb</div>
                        </el-form-item>

                        <el-form-item label="标签设置" prop="display_order" v-if="form.join_type==1">
                            <el-input
                                v-for="(item,index) in label_data"
                                :key="index"
                                placeholder="请选择标签名"
                                @focus="focusInput(index)"
                                @blur="blurInput(index)"
                                v-model="label_data[index]"
                                style="width:150px;margin:5px">
                                <i slot="suffix" class="el-input__icon el-icon-close" @click="delLable(index)" style="cursor: pointer;"></i>
                            </el-input>
                            <el-button plain type="primary" @click="addLable">新增标签</el-button>
                            <div class="tip">注意事项：删除标签，标签下指定的群二维码也将被删除</div>
                        </el-form-item>
                        <el-form-item label="默认参与人数" prop="in_number" v-if="form.join_type==1">
                            <el-input v-model.number="form.in_number" style="width:70%;"></el-input>
                        </el-form-item>
                        <el-form-item label="说明" prop="explain">
                            <el-radio v-model.number="form.explain" :label="1">开启</el-radio>
                            <el-radio v-model.number="form.explain" :label="0">关闭</el-radio>
                            <tinymceee v-model="form.explain_content" style="width:70%"></tinymceee>
                        </el-form-item>
                        <div class="vue-category-title">客服设置</div>
                        <el-form-item label="客服二维码" prop="customer_service">
                            <div class="upload-box" @click="openUpload('customer_service')" v-if="!form.customer_service_img">
                                <i class="el-icon-plus" style="font-size:32px"></i>
                            </div>
                            <div @click="openUpload('customer_service')" class="upload-boxed" v-if="form.customer_service_img">
                                <img :src="form.customer_service_img" alt="" style="width:150px;height:150px;border-radius: 5px;cursor: pointer;">
                                <div class="upload-boxed-text">点击重新上传</div>
                            </div>
                            <div class="tip">尺寸: 400px*400px，分辨率：72，大小不超过800Kb</div>
                        </el-form-item>
                        <el-form-item label="客服引导话术" prop="customer_service_guide">
                            <el-input v-model="form.customer_service_guide" style="width:70%;" aria-placeholder="引导用户添加客服微信" maxlength="20" show-word-limit></el-input>
                        </el-form-item>
                        <div class="vue-category-title">群二维码管理<div class="tip" style="display:inline-block;padding-left:20px">(图片尺寸: 宽度400px，高度不限，分辨率：72，大小不超过800Kb)</div></div>

                        <el-form-item label="二维码类型" prop="code_type">
                            <el-radio :disabled="code_type_disabled" v-model.number="form.code_type" :label="0" @change="changeCodeType">手动上传</el-radio>
                            <el-radio v-model.number="form.code_type" :label="1" @change="changeCodeType" v-if="group_develop_user">自动生成</el-radio>
                            <div class="tip">自动生成二维码必须先配置企业微信，并使用群拓客功能。</div>
                        </el-form-item>
                        <div style="width:85%;margin:0 auto" v-show="list.length>0 && form.code_type==0">
                            <el-table :data="list" stripe>
                                <el-table-column label="群二维码" align="center" prop="display_order">
                                    <template slot-scope="scope">
                                        <div style="display: flex;justify-content: center;">
                                            <div class="upload-box" style="width:60px;height:60px;text-align:center" @click="openUpload('code_url',scope.$index)" v-show="!list[scope.$index].code_url_img">
                                                <i class="el-icon-plus" style="font-size:32px"></i>
                                            </div>
                                            <div @click="openUpload('code_url',scope.$index)" class="upload-boxed" style="width:60px;height:60px;text-align:center" v-show="list[scope.$index].code_url_img">
                                                <img :src="scope.row.code_url_img" alt="" style="width:60px;height:60px;border-radius: 5px;cursor: pointer;">
                                                <div class="upload-boxed-text" style="font-size:12px">重新上传</div>
                                            </div>
                                        </div>
                                        
                                    </template>
                                </el-table-column>
                                <el-table-column label="过期时间" align="center" width="200">
                                    <template slot-scope="scope">
                                    <el-date-picker
                                        v-model="scope.row.expire"
                                        type="datetime"
                                        style="width:180px"
                                        placeholder="选择日期"
                                        value-format="yyyy-MM-dd HH:mm:ss">
                                    </el-date-picker>
                                    </template>
                                </el-table-column>
                                <el-table-column label="扫码上限" align="center" prop="display_order" width="110">
                                    <template slot-scope="scope">
                                        <div>
                                            <el-input v-model.number="scope.row.upper_limit" style="width:100px"></el-input>
                                        </div>
                                    </template>
                                </el-table-column>
                                <el-table-column label="群标签" align="center"  width="180">
                                    <template slot-scope="scope">
                                        <div>
                                        <el-select v-model="scope.row.label" filterable style="width:150px" placeholder="请选择标签" >
                                            <!-- <el-option label="无" value=""></el-option> -->
                                            <el-option v-for="(item,index) in label_data" :key="index" :label="item" :value="item"></el-option>
                                        </el-select>
                                        </div>
                                    </template>
                                </el-table-column>
                                <el-table-column label="状态" align="center" prop="display_order">
                                    <template slot-scope="scope">
                                        <div>
                                            <el-switch v-model="scope.row.status" :active-value="1" :inactive-value="0"></el-switch>
                                        </div>
                                    </template>
                                </el-table-column>
                                <el-table-column label="备注" align="center" prop="display_order">
                                    <template slot-scope="scope">
                                        <div>
                                            <el-input v-model="scope.row.remark" style="width:120px"></el-input>
                                        </div>
                                    </template>
                                </el-table-column>
                                <el-table-column label="操作" align="center" width="80">
                                    <template slot-scope="scope">
                                        <div>
                                            <el-button type="danger" size="mini" @click="delList(scope.$index)">删除</el-button>
                                        </div>
                                    </template>
                                </el-table-column>
                                
                            </el-table>
                        </div>
                        <div style="width:85%;margin:0 auto" v-show="list.length>0 && form.code_type==1">
                            <el-table :data="list" stripe>
                                <el-table-column label="ID"  prop="id">
                                </el-table-column>
                                <el-table-column label="选择群聊" align="center" prop="display_order">
                                    <template slot-scope="scope">
                                        <div style="display: flex;justify-content: center;" v-for="(group,group_index) in scope.row.group_data">
                                            [[group.group_name]]
                                        </div>
                                        <el-button type="primary" size="mini" @click="selectGroup(scope.$index)" v-if="scope.row.group_data_count<5">选择群聊</el-button>
                                    </template>
                                </el-table-column>
                                <el-table-column label="群标签" align="center"  width="180">
                                    <template slot-scope="scope">
                                        <div>
                                            <el-select v-model="scope.row.label" filterable style="width:150px" placeholder="请选择标签" >
                                                <!-- <el-option label="无" value=""></el-option> -->
                                                <el-option v-for="(item,index) in label_data" :key="index" :label="item" :value="item"></el-option>
                                            </el-select>
                                        </div>
                                    </template>
                                </el-table-column>
                                <el-table-column label="是否自动生成群聊" align="center" prop="auto_generate">
                                    <template slot-scope="scope">
                                        <div>
                                            <el-switch v-model="scope.row.auto_generate" :active-value="1" :inactive-value="0"></el-switch>
                                        </div>
                                    </template>
                                </el-table-column>
                                <el-table-column label="累计加群人数" align="center" prop="">
                                    <template slot-scope="scope">
                                        <div style="display: flex;justify-content: center;">
                                            [[scope.row.join_group_num]]
                                        </div>
                                    </template>
                                </el-table-column>
                                <el-table-column label="自动生成群数量" align="center" prop="display_order">
                                    <template slot-scope="scope">
                                        <div style="display: flex;justify-content: center;">
                                            [[scope.row.generate_group_num]]
                                        </div>
                                    </template>
                                </el-table-column>
                                <el-table-column label="状态" align="center" prop="display_order">
                                    <template slot-scope="scope">
                                        <div>
                                            <el-switch v-model="scope.row.status" :active-value="1" :inactive-value="0"></el-switch>
                                        </div>
                                    </template>
                                </el-table-column>
                                <el-table-column label="经纬度" align="center" prop="">
                                    <template slot-scope="scope">
                                        经度:[[scope.row.longitude]]<br>
                                        纬度:[[scope.row.latitude]]<br>
                                        <el-button type="primary" size="mini"
                                                   @click="openMap(scope.row.longitude,scope.row.latitude,true,true,scope.$index)">查看定位
                                        </el-button>
                                    </template>
                                </el-table-column>
                                <el-table-column label="备注" align="center" prop="display_order">
                                    <template slot-scope="scope">
                                        <div>
                                            <el-input v-model="scope.row.remark" style="width:120px"></el-input>
                                        </div>
                                    </template>
                                </el-table-column>
                                <el-table-column label="操作" align="center" width="80">
                                    <template slot-scope="scope">
                                        <div>
                                            <el-button type="danger" size="mini" @click="delList(scope.$index)">删除</el-button>
                                        </div>
                                    </template>
                                </el-table-column>

                            </el-table>
                        </div>

                        <div @click="addList" style="width:85%;margin:40px auto;text-align: center;font-size: 16px;font-weight: 600;cursor: pointer;padding: 8px;border: 1px #29ba9c dashed;">添&nbsp;&nbsp;加</div>

                    </el-form>

                    <el-dialog :visible.sync="group_show" width="60%" center title="选择群聊">
                        <div>
                            <div style="text-align: center">
                                <el-input  v-model="group_keyword_type" style="width:80%"  placeholder="请输入群聊ID/群聊名搜索"></el-input>
                                <el-button type="primary" @click="searchGroup()" style="margin-left:20px;">搜索</el-button>
                            </div>
                            <el-table :data="group_list" style="width: 100%;height:600px;overflow-y:auto"  >
                                <el-table-column prop="id" label="ID"  align="center"></el-table-column>
                                <el-table-column prop="group_name" label="群聊名"  align="center"></el-table-column>
                                <el-table-column prop="" label="操作" align="center" >
                                    <template slot-scope="scope">
                                        <el-button  @click="addSelectGroup(scope.$index)">
                                            选择
                                        </el-button>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </div>
                    </el-dialog>
                </div>
            </div>

            <div class="vue-page">
                <div class="vue-center">
                    <el-button type="primary" @click="submitForm('form')">提交</el-button>
                    <el-button @click="goBack">返回</el-button>
                </div>
            </div>
            <el-dialog :visible.sync="map_show" width="60%" center title="选择坐标">
                <div>
                    <div v-if="map_search_show">
                        <input v-model="map_keyword" style="width:70%" @keyup.enter="searchMap"
                               class="el-input__inner">
                        <el-button type="primary" @click="searchMap()">搜索</el-button>
                    </div>
                    <div ref="ditucontent" style="width:100%;height:450px;margin:20px 0"></div>
                </div>
                <span slot="footer" class="dialog-footer">
                    <el-button v-if="map_change_show" @click="sureMap">确 定</el-button>
                    <el-button @click="map_show = false">取 消</el-button>
                </span>
            </el-dialog>
            <upload-img :upload-show="uploadShow" :name="chooseImgName" @replace="changeProp" @sure="sureImg"></upload-img>

            <!--end-->
        </div>
    </div>

    <script src="{{resource_get('static/yunshop/tinymce4.7.5/tinymce.min.js')}}"></script> 
    @include('public.admin.uploadImg')
    @include('public.admin.tinymceee')
    <script>
        /**地图组件代码开始**/
        var top_left_control = new BMap.ScaleControl({anchor: BMAP_ANCHOR_TOP_LEFT});// 左上角，添加比例尺
        var top_left_navigation = new BMap.NavigationControl();  //左上角，添加默认缩放平移控件
        var top_right_navigation = new BMap.NavigationControl({
            anchor: BMAP_ANCHOR_TOP_RIGHT,
            type: BMAP_NAVIGATION_CONTROL_SMALL
        }); //右上角，仅包含平移和缩放按钮
        /*缩放控件type有四种类型:
        BMAP_NAVIGATION_CONTROL_SMALL：仅包含平移和缩放按钮；BMAP_NAVIGATION_CONTROL_PAN:仅包含平移按钮；BMAP_NAVIGATION_CONTROL_ZOOM：仅包含缩放按钮*/
        /**地图组件代码结束**/
        var app = new Vue({
            el:"#app",
            delimiters: ['[[', ']]'],
            name: 'test',
            data() {
                let member_tags = {!! json_encode($member_tags?:[]) !!};
                let member_level = {!! json_encode($member_level?:[]) !!};
                let group_develop_user = {!! json_encode($group_develop_user?:[]) !!};
                return{
                    code_type_disabled:false,
                    label_data:[],
                    choose_value:'',
                    form:{
                        auth_visit:0,
                        join_type:0,
                        explain:0,
                        join_auth:0,
                        is_pay:0,
                        pay_money:"",
                        is_member_tags:0,
                        member_tags:[],
                        is_member_level:0,
                        member_level:[],
                        is_goods:0,
                        code_type:0,
                        goods:[],
                    },
                    filter_names:[],//选中的标签组名
                    list:[],
                    keyword:'',

                    group_develop_user:group_develop_user,
                    group_show:false,
                    group_list:[],
                    select_group_index:'',
                    group_keyword_type:'',
                    member_level_list:member_level,
                    member_tags:member_tags,
                    tag_list:[],
                    goods_list:[],

                    uploadShow:false,
                    chooseImgName:'',
                    chooseImgIndex:'-1',
                    
                    loading: false,
                    uploadImg1:'',
                    rules:{
                        code_name:{ required: true, message: '请输入群活码名称'},
                        code_guide:{ required: true, message: '请输入群活码引导语'},
                        explain_content:{ required: true, message: '请输入说明内容'},
                        auth_visit:{ required: true, message: '请选择'},
                        join_type:{ required: true, message: '请选择'},
                        explain:{ required: true, message: '请选择'},
                        // customer_service:{ required: true, message: '请上传客服二维码'},
                        customer_service_guide:{ required: true, message: '请输入客服引导语'},
                        // label_banner:{ required: true, message: '请上传标签页banner'},
                        in_number:{ required: true, message: '请输入默认参与人数'},

                    },
                    /**地图组件代码开始**/
                    map: "",
                    marker: "",
                    centerParam: [113.275995, 23.117055],
                    zoomParam: "",
                    markersParam: [113.275995, 23.117055],
                    pointNew: "",
                    choose_center: [],
                    choose_marker: [],
                    map_show: false,
                    map_search_show: false,
                    map_change_show: false,
                    map_keyword: '',
                    map_save_key:'',
                    /**地图组件代码结束**/

                }
            },
            created() {
                this.joinTypeChange();
            },
            mounted() {
            },
            methods: {
                joinTypeChange(){
                    if(this.form.join_type==2){
                        if(this.form.code_type==0){
                            this.form.code_type = 1;
                            this.changeCodeType();
                        }
                        this.code_type_disabled = true;
                    }else{
                        this.code_type_disabled = false;
                    }
                },
                goParent() {
                    window.location.href = `{!! yzWebFullUrl('plugin.group-code.admin.group-code.index') !!}`;
                },
                addList() {
                    if (this.form.code_type==1) {
                        this.list.push({id:'',select_group:[],group_data:[],group_data_count:0,auto_generate:0,label:'',join_group_num:0,generate_group_num:'',status:0,remark:'',config:'',generate_group:[],longitude:'',latitude:''});
                    } else {
                        this.list.push({code_url:'',code_url_img:'',label:'',expire:'',upper_limit:'',status:0,remark:''});
                    }
                },
                delList(index) {
                    this.list.splice(index,1);
                },
                addLable() {
                    this.label_data.push('');
                },
                delLable(index) {
                    let value = this.label_data[index];
                    let arr = [];
                    this.list.forEach((item,index) => {
                        if(item.label != value) {
                            arr.push(item);
                        }
                    })
                    this.list = [];
                    this.list = arr;
                    this.label_data.splice(index,1)
                },
                focusInput(index) {
                    this.choose_value = this.label_data[index];
                },
                blurInput(index) {
                    // 改变值
                    if(this.label_data[index] != this.choose_value) {
                        this.label_data.forEach((item,index1) => {
                            if(index1!=index) {
                                // 标签重复
                                if(item == this.label_data[index]) {
                                    this.$message.error("标签名不能重复!")
                                    this.label_data[index] = this.choose_value;
                                    this.$forceUpdate();
                                }
                            }
                        })
                    }
                    // 改名成功,给群二维码选中的旧的标签名字更新成新名字
                    if(this.label_data[index] != this.choose_value) {
                        this.list.forEach((item,index1) => {
                            if(item.label == this.choose_value) {
                                item.label = this.label_data[index]
                            }

                        })
                    }

                    console.log(this.label_data)
                },
                submitForm(formName) {
                    console.log(this.list)
                    let that = this;
                    if(this.form.explain) {
                        if(!this.form.explain_content) {
                            this.$message.error("请输入说明内容");
                            return;
                        }
                    }
                    if(this.form.join_type==1) {
                        if(!this.label_data || this.label_data.length<=0) {
                            this.$message.error("标签不能为空!");
                            return;
                        }
                        if(this.form.label_banner == "") {
                            this.$message.error("标签banner不能为空!");
                            return;
                        }
                        let is_true = true;
                        this.list.some((item,index) => {
                            if(item.label == "") {
                                this.$message.error("请选中群二维码中的群标签!");
                                is_true = false;
                                return true;
                            }
                        })
                        if(is_true == false) {
                            return;
                        }
                    }
                    if(this.form.customer_service == "") {
                        this.$message.error("客服二维码不能为空!");
                        return;
                    }
                    let json = {
                        group:{
                            code_name:this.form.code_name,
                            code_guide:this.form.code_guide,
                            auth_visit:this.form.auth_visit,
                            join_type:this.form.join_type,
                            explain:this.form.explain,
                            explain_content:this.form.explain_content,
                            customer_service:this.form.customer_service,
                            customer_service_guide:this.form.customer_service_guide,
                            label_banner:this.form.label_banner,
                            label_data:this.label_data,
                            in_number:this.form.in_number,
                            join_auth:this.form.join_auth,
                            is_pay:this.form.is_pay,
                            pay_money:this.form.pay_money,
                            is_member_level:this.form.is_member_level,
                            member_level:this.form.member_level,
                            is_member_tags:this.form.is_member_tags,
                            member_tags:this.form.member_tags,
                            is_goods:this.form.is_goods,
                            goods:this.form.goods,
                            code_type:this.form.code_type,
                        },
                        // code_data:this.list
                    };
                    json.code_data = [];
                    this.list.forEach((item,index) => {
                        json.code_data.push(item)
                    })
                    
                    if(!json.code_data || json.code_data.length<=0) {
                        this.$message.error("群二维码不能为空!");
                        return;
                    }
                    json.code_data = JSON.stringify(json.code_data)
                    console.log(json);
                    // return
                    if(this.id) {
                        json.id = this.id;
                    }
                    
                    this.$refs[formName].validate((valid) => {
                        if (valid) {
                            // plugin.group-code.admin.group-code.add
                            let loading = this.$loading({target:document.querySelector(".content"),background: 'rgba(0, 0, 0, 0.2)'});
                            this.$http.post('{!! yzWebFullUrl('plugin.group-code.admin.group-code.add') !!}',json).then(response => {
                                if (response.data.result) {
                                    this.$message({type: 'success',message: '操作成功!'});
                                    this.goBack();
                                } else {
                                    this.$message({message: response.data.msg,type: 'error'});
                                }
                                loading.close();
                            },response => {
                                loading.close();
                            });
                        }
                        else {
                            console.log('error submit!!');
                            return false;
                        }
                    });
                },
                
                goBack() {
                    history.go(-1)
                },
                openUpload(str,index) {
                    console.log(index);
                    this.chooseImgName = str;
                    this.uploadShow = true;
                    this.chooseImgIndex = "-1";
                    if(index || index == 0) {
                        this.chooseImgIndex = index;
                    }
                    console.log(this.chooseImgIndex);

                },
                changeProp(val) {
                    if(val == true) {
                        this.uploadShow = false;
                    }
                    else {
                        this.uploadShow = true;
                    }
                },
                sureImg(name,image,image_url) {
                    console.log(this.chooseImgIndex)
                    console.log(name)

                    console.log(image)
                    console.log(image_url)
                    // 表格里
                    if(this.chooseImgIndex != '-1') {
                        this.list[this.chooseImgIndex][name] = image;
                        this.list[this.chooseImgIndex][name+'_img'] = image_url;
                        this.list.push({});
                        this.list.splice(this.list.length-1,1)
                        this.$forceUpdate();
                        console.log("qqqqqqqqqqqqqqqqqqqqq")
                    }
                    // 普通图片
                    else {
                        console.log("afdfdfdff")
                        this.form[name] = image;
                        this.form[name+'_img'] = image_url;
                    }
                    
                },
                clearImg(str) {
                    this.form[str] = "";
                    this.form[str+'_img'] = "";
                    this.$forceUpdate();
                },
                selectMemberTag(query) {
                    // console.log(query);
                    if (query == '') {
                        return;
                    }
                    this.$http.post("{!! yzWebUrl('plugin.group-code.admin.group-code.search-member-tags') !!}",{title:query}).then(response => {
                        if (response.data.result) {
                            this.tag_list=response.data.data.data;
                        }else{
                            this.$message({type: 'error',message: response.data.msg});
                        }
                    }, response => {
                        this.$message({type: 'error',message: response.data.msg});
                        console.log(response);
                    });
                },
                selectGoods(query) {
                    if (query == '') {
                        return;
                    }
                    this.$http.post("{!! yzWebUrl('plugin.group-code.admin.group-code.search-goods') !!}",{keyword:query}).then(response => {
                        if (response.data.result) {
                            this.goods_list=response.data.data.data;
                        }else{
                            this.$message({type: 'error',message: response.data.msg});
                        }
                    }, response => {
                        this.$message({type: 'error',message: response.data.msg});
                        console.log(response);
                    });
                },
                changeCodeType(index) {
                    this.list = [];
                },
                selectGroup(index) {
                    this.select_group_index = index;
                    this.group_show = true;
                },
                searchGroup() {
                    this.$http.post("{!! yzWebUrl('plugin.group-code.admin.group-code.search-work-group') !!}",{keyword:this.group_keyword_type}).then(response => {
                        if (response.data.result) {
                            this.group_list=response.data.data.data;
                        }else{
                            this.$message({type: 'error',message: response.data.msg});
                        }
                    }, response => {
                        this.$message({type: 'error',message: response.data.msg});
                        console.log(response);
                    });
                },
                addSelectGroup(index) {
                    let group = this.group_list[index];
                    if (this.list[this.select_group_index].group_data.length == 5) {
                        this.$message({type: 'error',message: '最多选择5个群聊'});
                        return false;
                    }
                    let has = false;
                    this.list[this.select_group_index].group_data.forEach((item,index) => {
                        if (group.chat_id == item.chat_id ) {
                            has = true;
                        }
                    });
                    if (has) {
                        this.$message({type: 'error',message: '已选择该群聊'});
                        return false;
                    }
                    if (this.select_group_index === '') {
                        return false;
                    }
                    this.list[this.select_group_index].group_data.push({
                        id:group.id,
                        chat_id:group.chat_id,
                        group_name:group.group_name,
                    });
                    this.list[this.select_group_index].select_group.push(group.chat_id);
                    this.list[this.select_group_index].group_data_count = this.list[this.select_group_index].group_data_count + group.member_count;
                },
                /**地图组件代码开始**/
                reloadList() {
                    location.reload(); //刷新页面
                },
                openMap(longitude, latitude, map_search_show, map_change_show,key) {
                    this.map_save_key = key;
                    this.centerParam = [longitude, latitude];
                    this.markersParam = [longitude, latitude];
                    this.map_search_show = map_search_show === false ? false : true;
                    this.map_change_show = map_change_show === false ? false : true;
                    this.map_show = true;
                    setTimeout(() => {
                        this.initMap();
                    }, 100);
                    this.map_keyword = "";
                },
                searchMap() {
                    console.log(this.marker);
                    let that = this;
                    geo.getPoint(this.map_keyword, function (point) {

                        that.choose_marker = [point.lng, point.lat];
                        that.choose_center = [point.lng, point.lat];
                        console.log(point)
                        that.map.panTo(point);
                        that.marker.setPosition(point);
                        that.marker.setAnimation(BMAP_ANIMATION_BOUNCE);
                        setTimeout(function () {
                            that.marker.setAnimation(null)
                        }, 3600);
                    });

                },
                sureMap() {
                    let that = this;
                    this.markersParam = [];
                    this.centerParam = [];
                    this.markersParam = this.choose_marker.length <= 0 ? [113.275995, 23.117055] : this.choose_marker;
                    this.centerParam = this.choose_center.length <= 0 ? [113.275995, 23.117055] : this.choose_center;
                    this.list[this.map_save_key].longitude = this.markersParam[0];
                    this.list[this.map_save_key].latitude = this.markersParam[1];
                    // this.form.longitude = this.markersParam[0];
                    // this.form.latitude = this.markersParam[1];
                    console.log(this.centerParam);
                    console.log(this.markersParam);
                    that.map_show = false;

                },
                //创建和初始化地图函数：
                initMap() {
                    let that = this;
                    // [FF]切换模式后报错
                    if (!window.BMap) {
                        return;
                    }

                    console.log(this.$refs['ditucontent']);
                    for (let i in this.$refs) {
                        console.log(i)
                    }
                    this.createMap(); //创建地图
                    this.setMapEvent(); //设置地图事件
                    this.addMapControl(); //向地图添加控件
                    geo = new BMap.Geocoder();


                    // 创建标注

                    var point = new BMap.Point(this.markersParam[0], this.markersParam[1]);
                    this.marker = new BMap.Marker(point);
                    this.marker.enableDragging();

                    this.map.addOverlay(this.marker); // 将标注添加到地图中
                    this.marker.addEventListener('dragend', function (e) {//拖动标注结束
                        that.pointNew = e.point;
                        var point = that.marker.getPosition();
                        geo.getLocation(point, function (address) {
                            console.log(address.address);
                            that.map_keyword = address.address;
                        });
                        console.log(e);
                        console.log("使用拖拽获取的百度坐标" + that.pointNew.lng + "," + that.pointNew.lat);
                        that.choose_marker = [that.pointNew.lng, that.pointNew.lat];
                        that.choose_center = [that.pointNew.lng, that.pointNew.lat];
                    });
                    if (this.map_change_show) {
                        this.marker.setLabel(new BMap.Label('请您移动此标记，选择您的坐标！', {'offset': new BMap.Size(10, -20)}));
                    }
                    if (parent.editor && parent.document.body.contentEditable == "true") {
                        //在编辑状态下
                        setMapListener(); //地图改变修改外层的iframe标签src属性
                    }
                },

                //创建地图函数：
                createMap() {
                    this.map = new BMap.Map(this.$refs['ditucontent']); //在百度地图容器中创建一个地图
                    // this.centerParam = '116.712617,24.778619';
                    // var centerArr = this.centerParam.split(",");
                    var point = new BMap.Point(
                        this.centerParam[0],
                        this.centerParam[1]
                    ); //

                    this.zoomParam = 12;
                    this.map.centerAndZoom(point, parseInt(this.zoomParam)); //设定地图的中心点和坐标并将地图显示在地图容器中
                },

                //地图事件设置函数：
                setMapEvent() {
                    // this.map.disableDragging(); //启用地图拖拽事件，默认启用(可不写)
                    this.map.enableScrollWheelZoom(); //启用地图滚轮放大缩小
                    this.map.enableDoubleClickZoom(); //启用鼠标双击放大，默认启用(可不写)
                    this.map.enableKeyboard(); //启用键盘上下左右键移动地图
                },

                //地图控件添加函数：
                addMapControl() {
                    this.map.addControl(new BMap.NavigationControl());
                    this.map.addControl(top_left_control);
                    this.map.addControl(top_left_navigation);
                    this.map.addControl(top_right_navigation);
                },

                setMapListener() {
                    var editor = parent.editor,
                        containerIframe,
                        iframes = parent.document.getElementsByTagName("iframe");
                    for (var key in iframes) {
                        if (iframes[key].contentWindow == window) {
                            containerIframe = iframes[key];
                            break;
                        }
                    }
                    if (containerIframe) {
                        this.map.addEventListener("moveend", mapListenerHandler);
                        this.map.addEventListener("zoomend", mapListenerHandler);
                        this.marker.addEventListener("dragend", mapListenerHandler);
                    }

                    function mapListenerHandler() {
                        var zoom = this.map.getZoom();
                        this.center = this.map.getCenter();
                        this.marker = window.marker.getPoint();
                        containerIframe.src = containerIframe.src
                            .replace(
                                new RegExp("([?#&])center=([^?#&]+)", "i"),
                                "$1center=" + center.lng + "," + center.lat
                            )
                            .replace(
                                new RegExp("([?#&])markers=([^?#&]+)", "i"),
                                "$1markers=" + this.marker.lng + "," + this.marker.lat
                            )
                            .replace(new RegExp("([?#&])zoom=([^?#&]+)", "i"), "$1zoom=" + zoom);
                        editor.fireEvent("saveScene");
                    }
                },
                /**地图组件代码结束**/
            },
        })

    </script>
@endsection