<style>
  .loginDiv {
    width: 100%;
    height: 100%;
    position: relative;
    background-size: cover;
    background-size: 100% 100%;
    background-position: center;
  }

  .el-tabs__header {
    padding: 0 20px;
    position: relative;
    height: 56px;
    line-height: 56px;
    background-color: #fff;
    margin: 0;
  }

  .title {
    margin-top: 10px;
    padding: 18px 20px;
    border-top: 1px solid #F3F3F3;
    border-bottom: 1px solid #F3F3F3;
    background-color: #fff;
  }

  .form-body {
    background-color: #fff;
    padding: 20px 50% 20px 0;
  }

  .el-form-item__label {
    padding: 0 23px 0 0;
  }

  .custom_t {
    display: flex;
    flex-direction: row;
    background-color: rgb(255, 255, 255);
    padding: 20px 0px;

  }
  .Mintips{
      max-width: 700px;
    white-space: nowrap;/*内容超宽后禁止换行显示*/
    overflow: hidden;/*超出部分隐藏*/
    text-overflow:ellipsis;/*文字超出部分以省略号显示*/
    height: 72px;
    display: flex;
    flex-direction: row;
    align-content: center;
    background: black;
    position: absolute;
    right: 25px;
    top:200px;
    line-height: 72px;
  }
  .triangle-up {
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 20px solid black;
    position: absolute;
    right: 150px;
    top:180px
  }
  .left-setting-menu {
    width: 260px;

  }
  .left-setting-menu .el-form-item {
    height: 60px;
    padding-left: 20px;
    display: flex;
    align-items: center;
    margin-bottom: 0;
    cursor: pointer;
  }
  .left_box{
    height: 60px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    padding-right: 20px;

  }
  .active{
    background-color: #F3F5F6;
    border-top-left-radius: 10px;
    /*width: 105%;*/
    border-bottom-left-radius: 10px;
  }
.right-setting-menu{
  background-color: rgb(243, 245, 246);
  padding: 30px;
  border-radius: 10px;

}
.item-img{
  height: 550px;
  padding: 25px 10px;
  border-radius: 30px;
  border: 1px solid #CCCCCC;
  background-color: #fff;
}
  .item-img img{
    height: 100%;
  }
  .img_yuan{
    width: 80px;
    height: 80px;
    margin-top: 5px;
  }
  .img_yuan img{
    width: 100%;
    height: 100%;
  }
</style>
<template>
  <div class="basicSetUp">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="基本信息" name="first">
        <div id="pane-first">
          <div class="title"><span>基本设置</span></div>
          <div class="form-body">
            <el-form :model="msg" :rules="rules" ref="msg" label-width="130px" style="padding:0 50px;">
              <el-form-item label="商城名称" prop="MallName" class="is-required">
                <el-input v-model="msg.MallName"/>
              </el-form-item>
              <el-form-item label="联系号码" prop="password1">
                <el-input v-model="msg.ContactNumber" @keyup.native="checkInteger(msg,'ContactNumber')" type="text"/>
              </el-form-item>
              <el-form-item label="外链客服链接" prop="password2">
                <el-input v-model="msg.OuterServiceLink"/>
              </el-form-item>
              <el-form-item label="一键导航">
                <el-form-item label="详细地址" label-width="80px">
                  <el-input v-model="msg.Address"/>
                </el-form-item>
                <el-form-item label="经纬度" style="margin-top: 15px;" label-width="80px">
                  <el-tooltip class="item" effect="dark" content="点击地图，可获取经纬度" placement="top"
                              style="position: absolute;left: -20px;top:13px">
                    <i class="el-tooltip el-icon-info"></i>
                  </el-tooltip>

                  <el-input v-model="msg.LongAndLat" :disabled="true"/>
                </el-form-item>
                <el-form-item label="地图" style="margin-top: 15px" label-width="80px">
                  <button class="el-button el-button--default el-button--small">
                    展开地图
                  </button>
                </el-form-item>
              </el-form-item>
              <el-form-item label="跳转小程序">
                <el-tooltip class="item" effect="dark" content="悬浮按钮跳转小程序" placement="top"
                            style="position: absolute;left: -20px;top:13px">
                  <i class="el-tooltip el-icon-info"></i>
                </el-tooltip>
                <el-form-item label="小程序appId" label-width="120px">
                  <el-input v-model="msg.MinAppId" placeholder="请输入跳转小程序AppId"/>
                </el-form-item>
                <el-form-item label="小程序路径" label-width="120px" style="margin-top: 15px">
                  <el-input v-model="msg.MinUrl" placeholder="请输入跳转小程序路径"/>
                </el-form-item>
              </el-form-item>
            </el-form>
          </div>


          <div class="title"><span>交易设置</span></div>
          <div class="form-body">
            <el-form :model="msg" :rules="rules" ref="msg" label-width="200px" style="padding:0 20px;">
              <el-form-item label="未支付订单超时时间" prop="CancelTime">
                <el-tooltip class="item" effect="dark" content="注意：如果设置为0，则为支付订单将不会被取消" placement="top"
                            style="position: absolute;left: -20px;top:13px">
                  <i class="el-tooltip el-icon-info"></i>
                </el-tooltip>
                <el-input v-model="msg.CancelTime" type="number">
                  <template slot="append">分</template>
                </el-input>
              </el-form-item>

              <el-form-item label="自动确认收货时间">
                <el-tooltip class="item" effect="dark" content="从发货到自动确认的时间" placement="top"
                            style="position: absolute;left: -20px;top:13px">
                  <i class="el-tooltip el-icon-info"></i>
                </el-tooltip>
                <el-input v-model="msg.AutoReceiving" type="number">
                  <template slot="append">天</template>
                </el-input>
              </el-form-item>

              <el-form-item label="售后时间">
                <el-tooltip class="item" effect="dark"
                            content="可以申请售后的时间。注意：分销订单中的已完成订单，只有订单已确认收货，并且时间超过设置的售后天数之后才计入其中！" placement="top"
                            style="position: absolute;left: -20px;top:13px">
                  <i class="el-tooltip el-icon-info"></i>
                </el-tooltip>
                <el-input v-model="msg.AfterTime" type="number">
                  <template slot="append">天</template>
                </el-input>
              </el-form-item>

              <el-form-item label="支付方式">
                <el-tooltip class="item" effect="dark" content="若都不勾选，默认选中线上支付" placement="top"
                            style="position: absolute;left: -20px;top:13px">
                  <i class="el-tooltip el-icon-info"></i>
                </el-tooltip>
                <el-checkbox-group v-model="msg.PayWay">
                  <el-checkbox label="线上支付"></el-checkbox>
                  <el-checkbox label="货到付款"></el-checkbox>
                  <el-checkbox label="余额支付"></el-checkbox>
                </el-checkbox-group>
              </el-form-item>


              <el-form-item label="发货方式">
                <el-tooltip class="item" effect="dark" content="需添加门店，到店自提方可生效" placement="top"
                            style="position: absolute;left: -20px;top:13px">
                  <i class="el-tooltip el-icon-info"></i>
                </el-tooltip>
                <el-checkbox-group v-model="msg.DeliverWay">
                  <el-checkbox label="快递配送"></el-checkbox>
                  <el-checkbox label="到店自提"></el-checkbox>
                  <el-checkbox label="同城配送"></el-checkbox>
                </el-checkbox-group>
                <div style="color: rgb(204, 204, 204);">
                  注：手机端显示排序（<span>1.同城配送 </span><span>2.到店自提 </span><span>3.快递配送 </span>）
                </div>
              </el-form-item>
              <el-form-item label="余额功能">
                <el-switch
                  :active-value="1"
                  :inactive-value="0"
                  v-model="msg.BalanceFun"
                  active-text=""
                  inactive-text="">
                </el-switch>
              </el-form-item>

              <el-form-item label="商品面议联系方式">
                <el-tooltip class="item" effect="dark" content="若客服和外链客服两者都不勾选，默认勾选客服；客服和外链客服前端统一显示为客服" placement="top"
                            style="position: absolute;left: -20px;top:13px">
                  <i class="el-tooltip el-icon-info"></i>
                </el-tooltip>
                <el-checkbox-group v-model="msg.ConsultWay">
                  <el-checkbox label="在线客服"></el-checkbox>
                  <el-checkbox label="联系电话"></el-checkbox>
                  <el-checkbox label="外链客服"></el-checkbox>
                </el-checkbox-group>
              </el-form-item>

            </el-form>

          </div>
          <div class="title"><span>自定义设置</span></div>
          <div class="custom_t">
            <div style="width: 50%">
              <el-form :model="msg" :rules="rules" ref="msg" label-width="200px" style="padding:0 20px;">
                <el-form-item label="添加到我的小程序">
                </el-form-item>

                <el-form-item label="开关">
                  <el-switch
                  :active-value="1"
                  :inactive-value="0"
                    v-model="msg.MinSwitch"
                    active-text=""
                    inactive-text="">
                  </el-switch>
                </el-form-item>

                <el-form-item label="背影颜色" v-if="msg.MinSwitch== true">
                  <el-color-picker
                    v-model="msg.MinBackColor"
                    show-alpha
                    :predefine="predefineColors">
                  </el-color-picker>
                </el-form-item>
                <el-form-item label="背影透明度" v-if="msg.MinSwitch== true">
                  <el-row>
                    <el-col class="userinfo" :span="16">
                      <el-slider v-model="msg.MinBackClarity"></el-slider>
                    </el-col>
                    <el-col class="userinfo" :span="7" style="margin-left: 4.16667%;">
                      <el-input-number v-model="msg.MinBackClarity" controls-position="right" :min="0" :max="100"></el-input-number>
                    </el-col>
                  </el-row>

                </el-form-item>

                <el-form-item label="背景框圆角" v-if="msg.MinSwitch== true">
                  <el-row>
                    <el-col class="userinfo" :span="16">
                      <el-slider v-model="msg.MinBackCircularBead" :min="0" :max="36"></el-slider>
                    </el-col>
                    <el-col class="userinfo" :span="7" style="margin-left: 4.16667%;">
                      <el-input-number v-model="msg.MinBackCircularBead" controls-position="right" :min="0" :max="36"></el-input-number>
                    </el-col>
                  </el-row>
                </el-form-item>

                <el-form-item label="提示文本内容" v-if="msg.MinSwitch== true">
                  <el-tooltip class="item" effect="dark" content="最多允许添加20个字" placement="top"
                              style="position: absolute;left: -20px;top:13px">
                    <i class="el-tooltip el-icon-info"></i>
                  </el-tooltip>
                  <el-input v-model="msg.MinTips" @keyup="inputChange" maxlength="20" show-word-limit/>
                </el-form-item>

                <el-form-item label="文本颜色" v-if="msg.MinSwitch== true">
                  <el-color-picker
                    v-model="msg.MinTipsColor"
                    show-alpha
                    :predefine="predefineColors">
                  </el-color-picker>
                </el-form-item>

                <el-form-item label="图标颜色" v-if="msg.MinSwitch== true">
                  <el-radio-group v-model="msg.MinIcoColor">
                    <el-radio :label="1">白色</el-radio>
                    <el-radio :label="2">黑色</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-form>
            </div>

            <div style="width: 50%; padding-left: 100px; zoom: 0.5;" v-if="msg.MinSwitch== true">
              <div style="width: 750px; border: 1px solid rgb(238, 238, 238);position: relative">
                <img src="../../assets/img/heads.png"  alt="" :style="{width: '750px',background:msg.MinIcoColor==1? '#FFFFFF':'#000000'}">
                <div class="Mintips" :style="{opacity: msg.MinBackClarity/100,borderRadius:msg.MinBackCircularBead+'px',background:msg.MinBackColor}">
                  <img src="../../assets/img/fork_white.png" alt="" style="width: 72px;height: 72px">
                  <span :style="{padding: '0 10px',color:msg.MinTipsColor}" >{{msg.MinTips}}</span>
                </div>
                <div class="triangle-up" :style="{opacity: msg.MinBackClarity/100,borderBottomColor:msg.MinBackColor}">

                </div>
              </div>
            </div>
          </div>


          <div style="margin-top: 1px" class="form-body">
            <el-form :model="msg" :rules="rules" ref="msg" label-width="200px" style="padding:0 20px;">
              <el-form-item label="转发小程序">
              </el-form-item>

              <el-form-item label="转发标题" >
                <el-input v-model="msg.MinShareTitle"/>
                <button class="el-button el-button--default el-button--small">
                  选择图标
                </button>
              </el-form-item>
            </el-form>

          </div>
          <div style="margin-top: 1px" class="form-body">
            <el-form :model="msg" :rules="rules" ref="msg" label-width="200px" style="padding:0 20px;">
              <el-form-item label="首页购买记录框">
              </el-form-item>

              <el-form-item label="开关">
                <el-switch
                  :active-value="1"
                  :inactive-value="0"
                  v-model="msg.BuySwitch"
                  active-text=""
                  inactive-text="">
                </el-switch>
              </el-form-item>

              <el-form-item label="轮播订单数">
                <el-tooltip class="item" effect="dark" content="轮播最新的N条订单" placement="top"
                            style="position: absolute;left: -20px;top:13px">
                  <i class="el-tooltip el-icon-info"></i>
                </el-tooltip>
                <el-input v-model="msg.CarouselOrder"/>
              </el-form-item>
            </el-form>
          </div>

        </div>
      </el-tab-pane>
      <el-tab-pane label="显示设置" name="second">
        <div id="pane-second">
          <el-tabs v-model="activeName2" @tab-click="handleClick2" style="margin-top: 20px">
            <el-tab-pane label="商品列表显示" name="one">
              <div id="pane-first">
                <div class="form-body" style="padding: 40px; display: flex;">
                  <div class="left-setting-menu">
                      <div class="left_box" @click="target(1)" :class="{active:target_o== 1}">
                        <span style="margin-right: 10px">购物车</span>
                        <el-switch
                          :active-value="1"
                          :inactive-value="0"
                          v-model="msg.ListShopCar">
                        </el-switch>
                      </div>
                      <div class="left_box " @click="target(2)" :class="{active:target_o== 2}" >
                        <span style="margin-right: 10px">已售量</span>
                        <el-switch
                          :active-value="1"
                          :inactive-value="0"
                          v-model="msg.ListBuyCount">
                        </el-switch>
                      </div>
                      <div class="left_box " @click="target(3)" :class="{active:target_o== 3}">
                        <span style="margin-right: 10px">商品名称</span>
                        <el-switch
                          :active-value="1"
                          :inactive-value="0"
                          v-model="msg.ListName">
                        </el-switch>
                      </div>
                  </div>
                  <div class="right-setting-menu">
                    <div class="item-img">
                      <img v-if="target_o==1" src="../../assets/img/setup/is_show_cart.png" alt="">
                      <img v-else-if="target_o==2" src="../../assets/img/setup/is_show_sales_num.png" alt="">
                      <img v-else-if="target_o==3" src="../../assets/img/setup/is_show_goods_name.png" alt="">
                    </div>
                  </div>
                </div>
              </div>
            </el-tab-pane>
            <el-tab-pane label="商品详情显示" name="two">
              <div id="pane-first">
                <div class="form-body" style="padding: 40px; display: flex;">
                  <div class="left-setting-menu">
                    <div class="left_box" @click="target2(1)" :class="{active:target_o2== 1}">
                      <span style="margin-right: 10px">商城评论</span>
                      <el-switch
                        :active-value="1"
                        :inactive-value="0"
                        v-model="msg.DetailsComment">
                      </el-switch>
                    </div>
                    <div class="left_box " @click="target2(2)" :class="{active:target_o2== 2}" >
                      <span style="margin-right: 10px">划线价</span>
                      <el-switch
                        :active-value="1"
                        :inactive-value="0"
                        v-model="msg.DetailsLineationPrice">
                      </el-switch>
                    </div>
                    <div class="left_box " @click="target2(3)" :class="{active:target_o2== 3}">
                      <span style="margin-right: 10px">普通用户会员价</span>
                      <el-switch
                        :active-value="1"
                        :inactive-value="0"
                        v-model="msg.DetailsMemberPrice">
                      </el-switch>
                    </div>
                    <div class="left_box " @click="target2(4)" :class="{active:target_o2== 4}">
                      <span style="margin-right: 10px">会员用户会员价</span>
                      <el-switch
                        :active-value="1"
                        :inactive-value="0"
                        v-model="msg.DetailsVipMemberPrice">
                      </el-switch>
                    </div>
                    <div class="left_box " @click="target2(5)" :class="{active:target_o2== 5}">
                      <span style="margin-right: 10px">快递</span>
                      <el-switch
                        :active-value="1"
                        :inactive-value="0"
                        v-model="msg.DeatilsExpress">
                      </el-switch>
                    </div>
                    <div class="left_box " @click="target2(6)" :class="{active:target_o2== 6}">
                      <span style="margin-right: 10px">已售量</span>
                      <el-switch
                        :active-value="1"
                        :inactive-value="0"
                        v-model="msg.DetailsBuyNum">
                      </el-switch>
                    </div>
                    <div class="left_box " @click="target2(7)" :class="{active:target_o2== 7}">
                      <span style="margin-right: 10px">分销价</span>
                      <el-switch
                        :active-value="1"
                        :inactive-value="0"
                        v-model="msg.DetailsSharePrice">
                      </el-switch>
                    </div>
                    <div class="left_box " @click="target2(8)" :class="{active:target_o2== 8}">
                      <span style="margin-right: 10px">商品视频特色样式开关</span>
                      <el-switch
                        :active-value="1"
                        :inactive-value="0"
                        v-model="msg.DetailsVideo">
                      </el-switch>
                    </div>
                  </div>
                  <div class="right-setting-menu">
                    <div class="item-img">
                      <img v-if="target_o2==1" src="../../assets/img/setup/comment_show.png" alt="">
                      <img v-else-if="target_o2==2" src="../../assets/img/setup/is_underline_price.png" alt="">
                      <img v-else-if="target_o2==3" src="../../assets/img/setup/price_show_2.png" alt="">
                      <img v-else-if="target_o2==4" src="../../assets/img/setup/price_show.png" alt="">
                      <img v-else-if="target_o2==5" src="../../assets/img/setup/is_express.png" alt="">
                      <img v-else-if="target_o2==6" src="../../assets/img/setup/sales_show.png" alt="">
                      <img v-else-if="target_o2==7" src="../../assets/img/setup/share_show.png" alt="">
                      <img v-else-if="target_o2==8" src="../../assets/img/setup/goods-video.png" alt="">
                    </div>
                  </div>
                </div>
              </div>
            </el-tab-pane>
            <el-tab-pane label="其他显示" name="san">
              <div id="pane-first">
                <div class="form-body" style="padding: 40px; display: flex;">
                  <div class="left-setting-menu">
                    <div class="left_box" @click="target3(1)" :class="{active:target_o3== 1}">
                      <span style="margin-right: 10px">非分销商分销中心显示</span>
                      <el-tooltip class="item" effect="dark"
                                  content="仅控制用户中心显示" placement="top" style="margin-right: 5px">
                        <i class="el-tooltip el-icon-info"></i>
                      </el-tooltip>
                      <el-switch
                        :active-value="1"
                        :inactive-value="0"
                        v-model="msg.OtherNoShare">
                      </el-switch>
                    </div>
                    <div class="left_box " @click="target3(2)" :class="{active:target_o3== 2}" >
                      <span style="margin-right: 10px">首页授权手机号</span>
                      <el-switch
                        :active-value="1"
                        :inactive-value="0"
                        v-model="msg.OtherIndexMoblie">
                      </el-switch>
                    </div>
                    <div class="left_box " @click="target3(3)" :class="{active:target_o3== 3}">
                      <span style="margin-right: 10px">手动授权手机号</span>
                      <el-tooltip class="item" effect="dark"
                                  content="开启后,绑定手机号页面会显示手机号手动授权" placement="top" style="margin-right: 5px">
                        <i class="el-tooltip el-icon-info"></i>
                      </el-tooltip>
                      <el-switch
                        :active-value="1"
                        :inactive-value="0"
                        v-model="msg.OtherManualMobile">
                      </el-switch>
                    </div>
                    <div class="left_box " @click="target3(4)" :class="{active:target_o3== 4}">
                      <span style="margin-right: 10px">关联公众号组件</span>
                      <el-tooltip class="item" effect="dark"
                                  content="注意：该功能需要 ->微信小程序后台->设置->接口设置 开启并设置关联(同一主体下)的公众号" placement="top" style="margin-right: 5px">
                        <i class="el-tooltip el-icon-info"></i>
                      </el-tooltip>
                      <el-switch
                        :active-value="1"
                        :inactive-value="0"
                        v-model="msg.OtherTencent">
                      </el-switch>
                    </div>
                    <div class="left_box " @click="target3(5)" :class="{active:target_o3== 5}">
                      <span style="margin-right: 10px">会员等级标识</span>
                      <el-switch
                        :active-value="1"
                        :inactive-value="0"
                        v-model="msg.OtherMemerLevel">
                      </el-switch>
                    </div>
                    <div class="left_box " @click="target3(6)" :class="{active:target_o3== 6}">
                      <span style="margin-right: 10px">定位地址是否必填</span>
                      <el-switch
                        :active-value="1"
                        :inactive-value="0"
                        v-model="msg.OtherMustAddress">
                      </el-switch>
                    </div>
                    <div class="left_box " @click="target3(7)" :class="{active:target_o3== 7}">
                      <span style="margin-right: 10px">申请分销商提示弹窗</span>
                      <el-switch
                        :active-value="1"
                        :inactive-value="0"
                        v-model="msg.OtherApplyShare">
                      </el-switch>
                    </div>
                  </div>
                  <div class="right-setting-menu">
                    <div class="item-img">
                      <img v-if="target_o3==1" src="../../assets/img/setup/is_not_share_show.png" alt="">
                      <img v-else-if="target_o3==2" src="../../assets/img/setup/auth_mobile.png" alt="">
                      <img v-else-if="target_o3==3" src="../../assets/img/setup/manual_mobile_auth.png" alt="">
                      <img v-else-if="target_o3==4" src="../../assets/img/setup/official_account.png" alt="">
                      <img v-else-if="target_o3==5" src="../../assets/img/setup/icon_members_grade.png" alt="">
                      <img v-else-if="target_o3==6" src="../../assets/img/setup/is_required_position.png" alt="">
                      <img v-else-if="target_o3==7" src="../../assets/img/setup/is_share_tip.png" alt="">
                    </div>
                  </div>
                </div>
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>
      </el-tab-pane>
      <el-tab-pane label="悬浮按钮设置" name="third">
        <div id="pane-third">
          <div class="title"><span>悬浮窗设置</span></div>
          <div class="form-body">
            <el-form :model="msg" :rules="rules" ref="msg" label-width="200px" style="padding:0 20px;">
              <el-form-item label="启用悬浮按钮">
                <el-switch
                  :active-value="1"
                  :inactive-value="0"
                  v-model="msg.SuspendBtn">
                </el-switch>
              </el-form-item>

              <el-form-item label="悬浮按钮样式" v-if="msg.SuspendBtn==true">
                <el-radio-group v-model="msg.SuspendStyle">
                  <el-radio :label="1">展开收起</el-radio>
                  <el-radio :label="2">固定展开</el-radio>
                </el-radio-group>
              </el-form-item>

              <el-form-item label="展开图标" v-if="msg.SuspendBtn==true">
                <el-tooltip class="item" effect="dark" content="建议尺寸:100 * 100" placement="top" style="margin-right: 5px">
                  <el-button>选择图标</el-button>
                </el-tooltip>
                <el-button type="primary" @click="msg.UnfoldIco =''">恢复默认</el-button>
                <div class="img_yuan">
                  <img v-if="msg.UnfoldIco =='' " src="../../assets/img/setup/quick_navigation_opened_pic.png" alt="">
                  <img v-else :src="msg.UnfoldIco" alt="">
                </div>

              </el-form-item>
              <el-form-item label="收起图标" v-if="msg.SuspendBtn==true">
                <el-tooltip class="item" effect="dark" content="建议尺寸:100 * 100" placement="top" style="margin-right: 5px">
                  <el-button>选择图标</el-button>
                </el-tooltip>
                <el-button type="primary" @click="msg.PackUpIco =''">恢复默认</el-button>
                <div class="img_yuan">
                  <img v-if="msg.PackUpIco =='' " src="../../assets/img/setup/quick_navigation_closed_pic.png" alt="">
                  <img v-else :src="msg.PackUpIco" alt="">
                </div>

              </el-form-item>
            </el-form>
          </div>
          <div class="form-body" v-if="msg.SuspendBtn==true" style="margin-top: 1px">
            <el-form :model="msg" :rules="rules" ref="msg" label-width="200px" style="padding:0 20px;">
              <el-form-item label="在线客服开关">
                <el-switch
                  :active-value="1"
                  :inactive-value="0"
                  v-model="msg.OnlineService">
                </el-switch>
              </el-form-item>
              <el-form-item label="">
                <el-tooltip class="item" effect="dark" content="建议尺寸:100 * 100" placement="top" style="margin-right: 5px">
                  <el-button>选择图标</el-button>
                </el-tooltip>
                <el-button type="primary" @click="msg.OnlineServiceIco =''">恢复默认</el-button>
                <div class="img_yuan">
                  <img v-if="msg.OnlineServiceIco =='' " src="../../assets/img/setup/customer_services_pic.png" alt="">
                  <img v-else :src="msg.OnlineServiceIco" alt="">
                </div>
              </el-form-item>
            </el-form>
          </div>

          <div class="form-body" v-if="msg.SuspendBtn==true" style="margin-top: 1px">
            <el-form :model="msg" :rules="rules" ref="msg" label-width="200px" style="padding:0 20px;">
              <el-form-item label="返回首页导航开关">
                <el-switch
                  :active-value="1"
                  :inactive-value="0"
                  v-model="msg.BackTopNavigation">
                </el-switch>
              </el-form-item>
              <el-form-item label="">
                <el-tooltip class="item" effect="dark" content="建议尺寸:100 * 100" placement="top" style="margin-right: 5px">
                  <el-button>选择图标</el-button>
                </el-tooltip>
                <el-button type="primary" @click="msg.BackTopNavigationIco =''">恢复默认</el-button>
                <div class="img_yuan">
                  <img v-if="msg.BackTopNavigationIco =='' " src="../../assets/img/setup/quick_home_pic.png" alt="">
                  <img v-else :src="msg.BackTopNavigationIco" alt="">
                </div>
              </el-form-item>
            </el-form>
          </div>

          <div class="form-body" v-if="msg.SuspendBtn==true" style="margin-top: 1px">
            <el-form :model="msg" :rules="rules" ref="msg" label-width="200px" style="padding:0 20px;">
              <el-form-item label="一键拨号开关">
                <el-switch
                  :active-value="1"
                  :inactive-value="0"
                  v-model="msg.OneCall">
                </el-switch>
              </el-form-item>
              <el-form-item label="">
                <el-tooltip class="item" effect="dark" content="建议尺寸:100 * 100" placement="top" style="margin-right: 5px">
                  <el-button>选择图标</el-button>
                </el-tooltip>
                <el-button type="primary" @click="msg.OneCallIco =''">恢复默认</el-button>
                <div class="img_yuan">
                  <img v-if="msg.OneCallIco =='' " src="../../assets/img/setup/dial_pic.png" alt="">
                  <img v-else :src="msg.OneCallIco" alt="">
                </div>
              </el-form-item>
            </el-form>
          </div>

          <div class="form-body" v-if="msg.SuspendBtn==true" style="margin-top: 1px">
            <el-form :model="msg" :rules="rules" ref="msg" label-width="200px" style="padding:0 20px;">
              <el-form-item label="客服外链开关">
                <el-switch
                  :active-value="1"
                  :inactive-value="0"
                  v-model="msg.ServiceOutLink">
                </el-switch>
              </el-form-item>
              <el-form-item label="">
                <el-tooltip class="item" effect="dark" content="建议尺寸:100 * 100" placement="top" style="margin-right: 5px">
                  <el-button>选择图标</el-button>
                </el-tooltip>
                <el-button type="primary" @click="msg.ServiceOutLinkIco =''">恢复默认</el-button>
                <div class="img_yuan">
                  <img v-if="msg.ServiceOutLinkIco =='' " src="../../assets/img/setup/web_service_pic.png" alt="">
                  <img v-else :src="msg.ServiceOutLinkIco" alt="">
                </div>
              </el-form-item>
            </el-form>
          </div>

          <div class="form-body" v-if="msg.SuspendBtn==true" style="margin-top: 1px">
            <el-form :model="msg" :rules="rules" ref="msg" label-width="200px" style="padding:0 20px;">
              <el-form-item label="快捷导航开关">
                <el-switch
                  :active-value="1"
                  :inactive-value="0"
                  v-model="msg.ShortcutNavigation">
                </el-switch>
              </el-form-item>
              <el-form-item label="">
                <el-tooltip class="item" effect="dark" content="建议尺寸:100 * 100" placement="top" style="margin-right: 5px">
                  <el-button>选择图标</el-button>
                </el-tooltip>
                <el-button type="primary" @click="msg.ShortcutNavigationIco =''">恢复默认</el-button>
                <div class="img_yuan">
                  <img v-if="msg.ShortcutNavigationIco =='' " src="../../assets/img/setup/quick_map_pic.png" alt="">
                  <img v-else :src="msg.ShortcutNavigationIco" alt="">
                </div>
              </el-form-item>
            </el-form>
          </div>

          <div class="form-body" v-if="msg.SuspendBtn==true" style="margin-top: 1px">
            <el-form :model="msg" :rules="rules" ref="msg" label-width="200px" style="padding:0 20px;">
              <el-form-item label="跳转小程序开关">
                <el-switch
                  :active-value="1"
                  :inactive-value="0"
                  v-model="msg.TurnMini">
                </el-switch>
              </el-form-item>
              <el-form-item label="">
                <el-tooltip class="item" effect="dark" content="建议尺寸:100 * 100" placement="top" style="margin-right: 5px">
                  <el-button>选择图标</el-button>
                </el-tooltip>
                <el-button type="primary" @click="msg.TurnMiniIco =''">恢复默认</el-button>
                <div class="img_yuan">
                  <img v-if="msg.TurnMiniIco =='' " src="../../assets/img/setup/small_app_pic.png" alt="">
                  <img v-else :src="msg.TurnMiniIco" alt="">
                </div>
              </el-form-item>
            </el-form>
          </div>

          <div class="form-body" v-if="msg.SuspendBtn==true" style="margin-top: 1px">
            <el-form :model="msg" :rules="rules" ref="msg" label-width="200px" style="padding:0 20px;">
              <el-form-item label="自定义按钮">
                <el-switch
                  :active-value="1"
                  :inactive-value="0"
                  v-model="msg.Custom">
                </el-switch>
              </el-form-item>

              <el-form-item label="跳转链接">
                <el-row :gutter="0">
                  <el-col class="userinfo" :span="18" >
                    <el-input v-model="msg.TurnLink" :disabled="true"></el-input>
                  </el-col>
                  <el-col class="userinfo" :span="6" >
                    <el-button type="info" plain>选择链接</el-button>
                  </el-col>
                </el-row>
              </el-form-item>
              <el-form-item label="">
                <el-tooltip class="item" effect="dark" content="建议尺寸:100 * 100" placement="top" style="margin-right: 5px">
                  <el-button>选择图标</el-button>
                </el-tooltip>
                <el-button type="primary" @click="msg.TurnIco=''">恢复默认</el-button>
                <div class="img_yuan">
                  <img v-if="msg.TurnIco=='' " src="../../assets/img/setup/default_img.png" alt="">
                  <img v-else :src="msg.TurnIco" alt="">
                </div>
              </el-form-item>
            </el-form>
          </div>
          <div class="title"><span>悬浮按钮设置</span><el-tooltip class="item" effect="dark" content="用于商品列表页" placement="top" style="margin-right: 10px"><i class="el-tooltip el-icon-info"></i></el-tooltip></div>
          <div class="form-body">
            <el-form :model="msg" :rules="rules" ref="msg" label-width="200px" style="padding:0 20px;">
              <el-form-item label="启用回到顶部悬浮按钮">
                <el-switch
                  :active-value="1"
                  :inactive-value="0"
                  v-model="msg.BackTopBtn">
                </el-switch>
              </el-form-item>

              <el-form-item label="启用购物车悬浮按钮">
                <el-switch
                  :active-value="1"
                  :inactive-value="0"
                  v-model="msg.CarSuspendBtn">
                </el-switch>
              </el-form-item>
            </el-form>
          </div>


          <div class="title"><span>商品售罄图标设置</span></div>
          <div class="form-body">
            <el-form :model="msg" :rules="rules" ref="msg" label-width="200px" style="padding:0 20px;">
              <el-form-item label="售罄图标显示开关">
                <el-switch
                  :active-value="1"
                  :inactive-value="0"
                  v-model="msg.SellOutIcoSwitch">
                </el-switch>
              </el-form-item>

              <el-form-item label="是否使用默认图标" v-if="msg.SellOutIcoSwitch==true">
                <el-switch
                  :active-value="1"
                  :inactive-value="0"
                  v-model="msg.SellOutDefaultIco">
                </el-switch>
              </el-form-item>

              <el-form-item label="商品图正常尺寸" v-if="msg.SellOutIcoSwitch==true">
                <el-tooltip class="item" effect="dark" content="建议尺寸:100 * 100" placement="top" style="margin-right: 5px">
                  <el-button>选择图标</el-button>
                </el-tooltip>
                <div class="img_yuan">
                  <img v-if="msg.SellOutDefaultIco == true" src="../../assets/img/setup/plugins-out.png" alt="" style="background: black">
                  <img v-if="msg.SellOutDefaultIco == false" :src='msg.GoodsNormalPic' alt="">
                </div>
              </el-form-item>

              <el-form-item label="商品图4:3尺寸" v-if="msg.SellOutIcoSwitch==true">
                <el-tooltip class="item" effect="dark" content="建议尺寸:100 * 100" placement="top" style="margin-right: 5px">
                  <el-button>选择图标</el-button>
                </el-tooltip>
                <div class="img_yuan">
                  <img v-if="msg.SellOutDefaultIco == true" src="../../assets/img/setup/plugins-out.png" alt="" style="background: black">
                  <img v-if="msg.SellOutDefaultIco == false" :src='msg.GoodsZoomPic' alt="">
                </div>
              </el-form-item>


            </el-form>
          </div>

        </div>
      </el-tab-pane>
    </el-tabs>
    <el-button type="primary" style="margin: 12px 0 ">保存</el-button>


  </div>
</template>

<script>

  export default {
    name: "basicSetUp",
    data() {
      return {
        activeName: 'first',
        activeName2:'one',
        msg: {
          ID: '',
          MallName: '',//商城名称
          TenantId: '',//商户号
          Indate: '',//有效期
          ContactNumber: '',//联系号码
          OuterServiceLink: '',
          Address: '',
          LongAndLat: '',
          MinAppId: '',
          MinUrl: '',
          CancelTime: '',
          AutoReceiving: '',
          AfterTime: '',
          PayWay: [],
          DeliverWay: [],
          BalanceFun: 0,
          ConsultWay: [],
          MinSwitch: 1,
          MinBackColor: '#000000',
          MinBackClarity: 100,
          MinBackCircularBead: 36,
          MinTips: '添加到我的小程序，购买更便捷',
          MinTipsColor: '#FFFFFF',
          MinIcoColor: 1,
          MinShareTitle: '',
          MinShareIco: '',
          BuySwitch: 0,
          CarouselOrder: 0,
          ListShopCar: 0,
          ListBuyCount: 1,
          ListName: 1,
          DetailsComment: 1,
          DetailsLineationPrice: 1,
          DetailsMemberPrice: 1,
          DetailsVipMemberPrice: 1,
          DeatilsExpress: 1,
          DetailsBuyNum: 1,
          DetailsSharePrice: 1,
          DetailsVideo: 1,
          OtherNoShare: 1,
          OtherIndexMoblie: 0,
          OtherManualMobile: 1,
          OtherTencent:0,
          OtherMemerLevel: 0,
          OtherMustAddress: 0,
          OtherApplyShare:0,
          SuspendBtn: 0,
          BackTopBtn: 1,
          CarSuspendBtn: 0,
          SellOutIcoSwitch: 1,
          SellOutDefaultIco: 0,
          GoodsNormalPic: '',
          GoodsZoomPic: '',
          SuspendStyle:1,
          UnfoldIco:'',
          PackUpIco:'',
          OnlineService:0,
          OnlineServiceIco:'',
          BackTopNavigation:0,
          BackTopNavigationIco:'',
          OneCall:0,
          OneCallIco:'',
          ServiceOutLink:0,
          ServiceOutLinkIco:'',
          ShortcutNavigation:0,
          ShortcutNavigationIco:'',
          TurnMini:0,
          TurnMiniIco:'',
          Custom:1,
          TurnLink:'',
          TurnIco:'',
        },
        predefineColors: [
          '#000000',
          '#FFFFFF',
          '#888888',
          '#FF4544',
        ],
        target_o:1,
        target_o2:1,
        target_o3:1,
        rules: {
          MallName: [
            {required: true, message: "请输入商城名称", trigger: "blur"}
          ],
          CancelTime: [
            {required: true, message: "未支付订单超时时间必须为整数", trigger: "blur"}
          ],

        },
      };
    },
    methods: {
      handleClick(tab, event) {
        // console.log(tab, event);
      },
      handleClick2(tab, event){

      },
      inputChange() { //输入框值改变
        this.msg.tipstext = this.msg.tipstext.replace(/[^\d]/g, '')
      },
      target(btn){
        this.target_o = btn
      },
      target2(btn){
        this.target_o2 = btn
      },
      target3(btn){
        this.target_o3 = btn
      },

    },
    computed:{

    }
  }
</script>

<style scoped>

</style>
