lichunlei
/
cyb_configserver_com


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370
							<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>首页-商户维护-创业帮</title>
    <meta name="keywords" content="首页-商户维护-创业帮">
    <meta name="description" content="首页-商户维护-创业帮">
    <meta content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,shrink-to-fit=no,user-scalable=no" name="viewport" viewport="cover">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <meta content="telephone=no" name="format-detection">
    <meta content="email=no" name="format-detection">
    <meta name="apple-mobile-web-app-title" content="首页-商户维护-创业帮">
    <meta http-equiv="Cache-Control" content="no-siteapp">
    <link rel="stylesheet" href="./static/css/main.css">
  </head>
  <body class="bgc-back ovh">
    <div class="iphonetitle"></div>
    <div class="merchant_current" id="app" ref="container" v-cloak>
      <van-nav-bar class="camp_title user_title_normal titlef16 whit_icon" left-arrow title="商户维护" @click-left="goback" v-if="toptitleisshow">
        <template #left> 
          <van-icon name="arrow-left"> </van-icon>
        </template>
      </van-nav-bar>
      <div class="merchant-headers">
        <van-tabs class="merchant-list" v-model="active" animated line-width="20" line-height="2" :ellipsis="false" sticky>
          <van-tab v-for="merchant in merchantTypes" :title="merchant.title">
            <van-cell title="总计(户):21" center>
              <template #default><span class="f12 c333" @click="opoupisshow = true">筛选</span><img class="screen_icon" src="./static/images/merchant-icon1.png" alt="" @click="opoupisshow = true"></template>
            </van-cell>
            <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
              <van-list v-model="loading" :finished="finished" finished-text="没有更多数据了" @load="onLoad">
                <div class="merchant_panel ovh" v-for="item in merchants">
                  <div class="name df"><span class="block dib"></span><span class="f14 c333">{{item.name}}</span></div>
                  <div class="money">本月交易额(元)：{{item.label}}</div>
                  <div class="btnbox df">  
                    <button class="f12" v-if="item.iscreater">转为创客</button>
                    <button class="f12" v-if="item.isSVIP" @click="overlayisshow = true">升级SVIP</button>
                    <button class="f12" v-if="item.isdown" @click="downisshow = true">自助降扣</button>
                    <button class="f12 finishbtn" v-if="!item.isdown">自助降扣</button>
                  </div>
                </div>
              </van-list>
            </van-pull-refresh>
          </van-tab>
        </van-tabs>
      </div>
      <van-overlay class="overlay ovh" :show="overlayisshow" @click="overlayisshow = false"> 
        <div class="wrapper" @click.stop>
          <div class="panel tc">
            <div class="title f16 c333">升级SVIP</div>
            <div class="tips f12 c333 tl">您可以选择是否给该商户升级SVIP功能，一旦提交不支持修改！</div>
            <div class="explain pl16 pr16 tl"> 
              <div class="f14 c333 b">升级说明:</div>
              <p class="f14 c666">1、提交后立即生效，商户APP将展示SVIP功能，商户自由选择是否开通；</p>
              <p class="f14 c666">2、商户开通SVIP可立即享受每笔优惠费率；</p>
              <p class="f14 c666">3、商户开通SVIP后，即表示升级成功，创客交易分润规则将有所改变，详细请查看<span class="active">《活动说明》</span>。</p>
            </div>
            <div class="end_line rel">
              <div class="line abs"></div><span class="f12 c999 bgcfff">用心维护定有回馈!</span>
              <div class="line2 abs"></div>
            </div>
            <div class="btn"> 
              <button class="cancel f16 c333" @click="overlayisshow = false">取消</button>
              <button class="sure cfff f16" @click="submit">确认提交</button>
            </div>
            <div class="bottomtips"><img src="./static/images/tips.png" alt=""><span>为更好更稳定的维护商户，该按钮仅可操作一次</span></div>
          </div>
        </div>
      </van-overlay>
      <van-overlay class="overlay ovh" :show="downisshow" @click="downisshow = false"> 
        <div class="wrapper" @click.stop>
          <div class="panel downpanel tc">
            <div class="title f16 c333">自助降扣</div>
            <div class="tips f12 c333 tl"> 
              <p>1、您可以选择是否给该商户降扣，一旦提交成功不支持修改；</p>
              <p>2、自助降扣成功，交易分润规则将有所改变，详细请查看<span class="active">
                  《活动说明》。</span></p>
            </div>
            <div class="userinfo df tl">
              <div class="item">
                <div>商户姓名：</div>
                <div class="mt8">SN号：</div>
              </div>
              <div class="info"> 
                <div>真实姓名傅红雪</div>
                <div class="mt8">00000055555333322</div>
              </div>
            </div>
            <div class="radio tl ovh"> 
              <div class="f12 c999 title">选择交易手续费：</div>
              <van-radio-group v-model="radio"> 
                <van-radio name="63">刷卡 | 标准0.63%<span class="curren" v-if="radiotype === 1">当前</span>
                  <template #icon="props"> <img class="img-icon" :src="props.checked ? activeIcon : inactiveIcon"></template>
                </van-radio>
                <van-radio name="60"> 刷卡 | 标准0.60%<span class="curren" v-if="radiotype !== 1">当前</span>
                  <template #icon="props"> <img class="img-icon" :src="props.checked ? activeIcon : inactiveIcon"></template>
                </van-radio>
              </van-radio-group>
            </div>
            <div class="radio tl title"> 
              <div class="f12 c999 mb6">选择商户T0手续费：</div>
              <van-radio-group class="n" v-model="toradio"> 
                <van-radio name="+3">刷卡 | 加3<span class="curren" v-if="toradiotype === 1">当前</span>
                  <template #icon="props"> <img class="img-icon" :src="props.checked ? activeIcon : inactiveIcon"></template>
                </van-radio>
                <van-radio name="3"> 刷卡 | 不加3<span class="curren" v-if="toradiotype !== 1">当前</span>
                  <template #icon="props"> <img class="img-icon" :src="props.checked ? activeIcon : inactiveIcon"></template>
                </van-radio>
              </van-radio-group>
            </div>
            <div class="end_line rel">
              <div class="line abs"></div><span class="f12 c999 bgcfff">用心维护定有回馈!</span>
              <div class="line2 abs"></div>
            </div>
            <div class="btn"> 
              <button class="cancel f16 c333" @click="downisshow = false">取消</button>
              <button class="sure cfff f16" @click="downsubmit">确认提交</button>
            </div>
            <div class="bottomtips"><img src="./static/images/tips.png" alt=""><span>为更好更稳定的维护商户，该按钮仅可操作一次</span></div>
          </div>
        </div>
      </van-overlay>
      <van-popup class="merchant_screen" v-model="opoupisshow" position="right" :style="{ height: '100%',width:'76%' }"> 
        <div class="title f12 c666">排序筛选 </div>
        <div class="btnbox df">
          <button class="f12 c333O" v-for="item in screenstatus" :class="item.id === screenid? 'ischeck':''" @click="screenid = screenid === item.id ? '':item.id ">{{item.text}}</button>
        </div>
        <div class="title f12 c666">自助降扣状态 </div>
        <div class="btnbox df jcstart">
          <button class="f12 c333 mr10" v-for="item in downstatus" :class="item.id === downid? 'ischeck':''" @click="downid = downid === item.id ? '':item.id">{{item.text}}</button>
        </div>
        <div class="title f12 c666">商户转创客状态 </div>
        <div class="btnbox df warp jcstart">
          <button class="f12 c333" v-for="item in createrstatus" :class="item.id === creatertypeid? 'ischeck':''" @click="creatertypeid = creatertypeid === item.id ? '':item.id">{{item.text}}</button>
        </div>
        <div class="title f12 c666">升级SVIP状态 </div>
        <div class="btnbox df jcstart">
          <button class="f12 c333 mr10" v-for="item in vipstatus" :class="item.id === vipid? 'ischeck':''" @click="vipid = vipid === item.id ? '':item.id">{{item.text}}</button>
        </div>
        <div class="title f12 c666">商户SVIP状态 </div>
        <div class="btnbox df">
          <button class="f12 c333" v-for="item in merchantvipstatus" :class="merchantstatus(item.id)? 'ischeck':''" @click="checkmore(item.id)">{{item.text}}</button>
        </div>
        <div class="endbtnbox abs df">
          <button class="reset f16 c333 bgcfff" @click="reset">重置</button>
          <button class="sure f16 cfff" @click="sure">确定</button>
        </div>
      </van-popup>
      <van-dialog v-model="issure" title="提示" show-cancel-button @confirm="finalsure"> 
        <div class="f14 c666 tc">提交后不再支持修改，是否确认提交？</div>
        <van-checkbox v-model="istips"> 
          <div class="f14 c999">以后不再提醒</div>
          <template #icon="props"><img class="img-icon" :src="props.checked ? tipsimg : unimg"></template>
        </van-checkbox>
      </van-dialog>
      <van-dialog v-model="issure2" title="提示" show-cancel-button @confirm="finalsure2"> 
        <div class="f14 c666 tc">提交后不再支持修改，是否确认提交？</div>
        <van-checkbox v-model="istips"> 
          <div class="f14 c999">以后不再提醒</div>
          <template #icon="props"><img class="img-icon" :src="props.checked ? tipsimg : unimg"></template>
        </van-checkbox>
      </van-dialog>
    </div> 
    <script src="./static/js/klm-vv.min.js"></script>
    <script src="./static/js/appfunc.min.js"></script>
    <script src="./static/js/klm-axios-config.js"></script>
    <script src="./static/js/publicfn.js"></script>
    <script>
      // 通过 CDN 引入时不会自动注册 Lazyload 组件
      // 可以通过下面的方式手动注册
      Vue.use(vant.Lazyload);
      Vue.use(vant.Dialog);
      
      // 在 #app 标签下渲染一个按钮组件
      let app = new Vue({
        el: '#app',
        data() {
          return {
            toptitleisshow:true,
            //- TODO:vipid号需要和选择项目相匹配
            issure:false,
            issure2:false,
            active: 0,
            value: 0,
            switch1: false,
            switch2: false,
            selectedOption: 0,
            typeActived: 0,
            openOverlay: true,
            overlayisshow:false,
            downisshow:false,
            istips:true,
            istips2:true,
            vipid:'',
            //- 降扣选择参数
            radio: '63',
            radiotype:1,
            toradiotype:1,
            toradio:'+3',
            activeIcon: './static/images/radio-ischeck.png',
            inactiveIcon: './static/images/radio-uncheck.png',
            tipsimg:'./static/images/aftertips.png',
            unimg:'./static/images/afteruntips.png',
            //- 筛选弹窗
            opoupisshow:false,
            screenstatus: [
              { text: '本月交易-从高到低',id:1 },
              { text: '注册时间-从近至远',id:2 },
            ],
            downstatus: [
              { text: '未降扣',id:1 },
              { text: '已降扣',id:2 },
            ],
            createrstatus: [
              { text: '未转换',id:1 },
              { text: '转换中',id:2 },
              { text: '转换成功',id:3 },
              { text: '转换失败',id:4 },
              { text: '不可转换',id:5 },
            ],
            vipstatus: [
              { text: '未升级',id:1},
              { text: '已升级',id:2},
            ],
            merchantvipstatus: [
              { text: '未开通SVIP',id:1},
              { text: 'SVIP生效中',id:2},
              { text: 'SVIP已过期',id:3},
            ],
            //- 筛选状态ID
            screenid:1,
            downid:2,
            creatertypeid:1,
            vipid:1,
            merchantvipids:[1,2],
            merchantTypes: [
              {
                id: 1,
                title: '创业帮超级MPOS',
              },
              {
                id: 2,
                title: '创业帮MPOS',
              },
              {
                id: 3,
                title: '创业帮大POS',
              },
              {
                id: 4,
                title: '创业帮电签POS',
              },
            ],
            merchants:[
              {
                id: 1,
                name: '张三',
                label: '2000000.00',
                isSVIP:true,
                isdown:true
              },
              {
                id: 2,
                name: '李四',
                label: '2000000.00',
                isSVIP:false,
                isdown:false,
                iscreater:true,
              },
              {
                id: 3,
                name: '王五',
                label: '2001256140000.00',
                isSVIP:false,
                isdown:true
              },
            ],
      
            loading: false,
            finished: false,
            refreshing: false,
          };
        },
        created(){
        },
        mounted() {
          this.giveToast();
        },
        methods: {
          goback(){
            PublicLib.GoBack({Level:1});
          },
          //- aaa(id){
          //-    this.vipid = this.vipid === item.id ? '':'item.id'
          //- },
          //- 多选状态函数
          merchantstatus(id){
           return this.merchantvipids.includes(id);
          },
          //- 多选改变状态函数
          checkmore(id){
            if(this.merchantstatus(id)) {
              this.merchantvipids.splice(this.merchantvipids.indexOf(id),1);
            }else{
              this.merchantvipids.push(id);
            };
          },
          //- 重置
          reset(){
            this.screenid= '';
            this.downid= '';
            this.vipid= '';
            this.merchantvipids = [];
          },
          //- 确认
          sure(){
            this.opoupisshow = false;
            console.log(this.screenid,this.downid,this.vipid,this.merchantvipids);
          },
          giveToast(){
            vant.Toast('提示');
          },
          onLoad() {
            setTimeout(() => {
              if (this.refreshing) {
                this.list = [];
                this.refreshing = false;
              };
              for (let i = 0; i < 10; i++) {
                this.list.push(this.list.length + 1);
              };
              this.loading = false;
              if (this.list.length >= 40) {
                this.finished = true;
              };
            }, 1000);
          },
          onRefresh() {
            // 清空列表数据
            this.finished = false;
            // 重新加载数据
            // 将 loading 设置为 true，表示处于加载状态
            this.loading = true;
            this.onLoad();
          },
          submit(){
            this.overlayisshow = false;
            this.issure = true;
      
          },
          downsubmit(){
            this.downisshow = false;
            this.issure2 = true;
          },
          //- 二次确认
          finalsure(){
            const that = this;
            vant.Toast('确认提交！'+ that.vipid);
          },
          finalsure2(){
            const that = this;
            vant.Toast('确认提交！'+ that.radio + that.toradio);
          }
          
        }
      });
    </script>
  </body>
</html>