lichunlei
/
miniprogram


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319
							<!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="bgcf7f7f7 pb0 vh100">
    <div class="vh100" id="app" v-cloak>
      <van-sticky>
        <van-nav-bar class="camp_title user_title_normal titlef16 whit_icon" left-arrow title="我的商户" v-if="toptitleisshow" @click-left="goback">
          <template #left> 
            <van-icon name="arrow-left" color="#fff"> </van-icon>
          </template>
        </van-nav-bar>
      </van-sticky>
      <div class="merchant-header pt16">
        <div class="f12 cfff pl16" ref="closedropdown">共5个商户，今日3个商户参与活动</div>
        <van-tabs class="merchant-list bgcfff" v-model="active" line-width="20" line-height="2" :ellipsis="false" @click="checktab">
          <van-tab class="bgcfff" v-for="merchant,ind in merchantTypes" :title="merchant.Name">
            <van-dropdown-menu :overlay="openOverlay ? true : false" active-color="#ff502a" v-if="ind === active"> 
              <van-dropdown-item title="排序" :options="option1" v-model="sortdata" @change="sortbtn"></van-dropdown-item>
              <van-dropdown-item :title-class="typeActived == index ? 'no-arrow more' : 'no-arrow'" v-for="item,index in dropdownMenus" :ref="`activeType${index}`" @open="changeActiveType(item,index)">
                <template #title>
                  <div class="f12">{{item.title + '(' + item.count + ')'}}</div>
                </template>
              </van-dropdown-item>
              <van-dropdown-item title="筛选" ref="item" title-class="no-arrow filter-icon">
                <template #default>
                  <div class="pb32 ml16 mr16">
                    <div class="f12 c333">参与时间</div>
                    <div class="df mt8 dropdown-button">
                      <van-button plain v-for="item,index in option" :class="selectedOption == index ? 'dropdown-button__active' : ''" @click="onSelectOption(item,index)">{{item.text}}</van-button>
                    </div>
                  </div>
                  <div class="df dropdown-checkbutton">
                    <van-button block @click="resetbtn">
                      <div class="f14 c666">重置</div>
                    </van-button>
                    <van-button block @click="surebtn">
                      <div class="f16 more">确认</div>
                    </van-button>
                  </div>
                </template>
              </van-dropdown-item>
            </van-dropdown-menu>
            <van-pull-refresh v-model="refreshing" @refresh="onRefresh" :class="merchants.length === 0 ? 'isnodata':''">
              <van-list v-model="loading" :finished="finished" finished-text="没有更多数据了" @load="onLoad" :immediate-check="false">
                <van-empty class="custom-image" image="./static/images/empty-img.png" description="暂无数据" v-if="isnodata"></van-empty>
                <van-cell-group :border="false">
                  <van-cell v-for="item,index in merchants" :title="item.MerchantName" center>
                    <template #label><span class="mr16">注册时间:{{item.KqRegTime}}</span><span>当月交易额(元)：{{item.ThisMonthTrade}}</span></template>
                  </van-cell>
                </van-cell-group>
              </van-list>
            </van-pull-refresh>
          </van-tab>
        </van-tabs>
      </div>
    </div>
    <script src="./static/js/klm-vv.min.js"></script>
    <script src="./static/js/klm-axios-config.js"></script>
    <script>
      // 通过 CDN 引入时不会自动注册 Lazyload 组件
      // 可以通过下面的方式手动注册
      Vue.use(vant.Lazyload);
      
      // 在 #app 标签下渲染一个按钮组件
      let app = new Vue({
        el: '#app',
        data() {
          return {
            isnodata:false,
            toptitleisshow:true,
            container:'',
            active: 0,
            value: 0,
            switch1: false,
            switch2: false,
            selectedOption: 0,
            //- 商户参与状态
            typeActived: 0,
            //- 产品类型id
            ProductType:0,
            //- 排序类型
            sortdata:'trade',
            //- 商户数
            TotalCount:0,
            //- 新增商户数
            ActCount:0,
            openOverlay: true,
            screen:{
              min: '',
              max: '',
              time:''
            },
            pageinfo:{
              PageSize:10,
              PageNum:1
            },
            option1: [
              { text: '本月交易额（由高至低）', value: 'trade' },
              //- { text: '注册时间（由近及远）', value: 'regdate' },
            ],
            option: [
              { text: '全部', value: '',index:0 },
              { text: `${new Date().getFullYear() - 1}年参与`, value: new Date().getFullYear() - 1,index:1 },
              { text: `${new Date().getFullYear()}年参与`, value: new Date().getFullYear(),index:2 },
            ],
            dropdownMenus: [
              { title: '全部', count: 5, id: 0},
              { title: '已参与', count: 3, id: 1},
              { title: '未参与', count: 2, id: 2},
            ],
            //- 产品类型
            merchantTypes: [
            ],
            //- 商户列表
            merchants:[
            ],
      
            loading: false,
            finished: false,
            refreshing: false,
          };
        },
        async created() {
          await this.getproductlist();
          this.getmerchantlist();
        },
        methods: {
          onLoad() {
              if (this.refreshing) {
                this.merchants = [];
                this.refreshing = false;
                this.pageinfo.PageNum = 0;
              };
              this.pageinfo.PageNum++;
              this.getmerchantlist();
          },
          onRefresh() {
            // 清空列表数据
            this.finished = false;
      
            // 重新加载数据
            // 将 loading 设置为 true，表示处于加载状态
            this.loading = true;
            this.onLoad();
          },
          onSelectOption(item,index) {
            this.openOverlay = true;
            if(item.index == index){
              this.selectedOption = index;
            }
            this.screen.time = item.value;
          },
          changeActiveType(item,index){
            const that = this;
            console.log(2222)
            that.openOverlay = false;
            if(item.id == index){
              that.typeActived = index;
              setTimeout(function(){
                that.$refs[`activeType${index}`][0].toggle();
                that.openOverlay = true;
              },100)
              this.merchants = [];
              this.getmerchantlist();
            }
          },
          resetbtn(){
            this.screen.min = '';
            this.screen.max = '';
            this.screen.time = '';
            this.selectedOption = 0
          },
          surebtn(){
            this.dropdownMenus[0].count = 0;
            this.dropdownMenus[1].count = 0;
            this.dropdownMenus[2].count = 0;
            this.merchants = [];
            this.getmerchantlist();
            this.$refs.closedropdown.click();
          },
          //- 切换排序方式
          sortbtn(){
            this.merchants = [];
            this.getmerchantlist();
          },
          //- 切换tab栏
          checktab(index){
            this.merchants = [];
            this.ProductType = this.merchantTypes[index].Id
            this.getmerchantlist();
          },
          //- 获取产品列表
          async getproductlist(){
            const res = await getRequest('/api/v1/kqproducts/list',JSON.stringify({PageSize:20,PageNum:1}));
            if(res.status === '1') {
              res.data = [{Id:0,Name:'全部'}];
              this.merchantTypes = res.data;
              this.ProductType = res.data[0].Id;
            }
          },
          //- 获取商户列表
          async getmerchantlist(){
            PublicLib.ShowLoading({Message:''});
            const UserId = PublicLib.getCookieInfo('userId');
            console.log({...this.pageinfo,UserId,ActiveStatus:this.typeActived,ProductType:this.ProductType,MinTrade:this.screen.min,MaxTrade:this.screen.max,ActTime:this.screen.time,Sort:this.sortdata});
            const res = await getRequest('/api/v1/merchantinfo/mymerchant',JSON.stringify({...this.pageinfo,UserId,ActiveStatus:this.typeActived,ProductType:this.ProductType,MinTrade:this.screen.min,MaxTrade:this.screen.max,ActTime:this.screen.time,Sort:this.sortdata}));
            if(res.status !== '1') return tips('获取商户列表失败，请重试！');
            PublicLib.HideLoading();
            if(res.data.length < this.pageinfo.PageSize) {
              this.finished = true;
            };
            this.merchants.push(...res.data);
            if((this.typeActived === 0 && this.screen.time === 2021) || this.screen.time === ''){
              this.merchants = [
                {
                  MerchantName: "张晟源2504", //商户姓名
                  KqRegTime: "2021-12-25", //渠道注册时间
                  Id: "2", //Id
                  ThisMonthTrade: "4251.00", //当月交易额
                },
                {
                  MerchantName: "惠启航9572", //商户姓名
                  KqRegTime: "2021-11-19", //渠道注册时间
                  Id: "2", //Id
                  ThisMonthTrade: "3851.03", //当月交易额
                },
                {
                  MerchantName: "徐涛6841", //商户姓名
                  KqRegTime: "2021-11-26", //渠道注册时间
                  Id: "2", //Id
                  ThisMonthTrade: "3521.50", //当月交易额
                },
                {
                  MerchantName: "李春雷8471", //商户姓名
                  KqRegTime: "2021-12-18", //渠道注册时间
                  Id: "2", //Id
                  ThisMonthTrade: "2987.53", //当月交易额
                },
                {
                  MerchantName: "谢程7152", //商户姓名
                  KqRegTime: "2021-11-08", //渠道注册时间
                  Id: "2", //Id
                  ThisMonthTrade: "2654.38", //当月交易额
                }
              ];
              this.dropdownMenus[0].count = 5;
              this.dropdownMenus[1].count = 3;
              this.dropdownMenus[2].count = 2;
            } else if((this.typeActived === 1 && this.screen.time === 2021) || this.screen.time === ''){
              this.merchants = [
                {
                  MerchantName: "张晟源2504", //商户姓名
                  KqRegTime: "2021-12-25", //渠道注册时间
                  Id: "2", //Id
                  ThisMonthTrade: "4251.00", //当月交易额
                },
                {
                  MerchantName: "徐涛6841", //商户姓名
                  KqRegTime: "2021-11-26", //渠道注册时间
                  Id: "2", //Id
                  ThisMonthTrade: "4251.00", //当月交易额
                },
                {
                  MerchantName: "谢程7152", //商户姓名
                  KqRegTime: "2021-11-08", //渠道注册时间
                  Id: "2", //Id
                  ThisMonthTrade: "2654.38", //当月交易额
                }
              ]
            }else if((this.typeActived === 2 && this.screen.time === 2021) || this.screen.time === ''){
              this.merchants = [
                {
                  MerchantName: "惠启航9572", //商户姓名
                  KqRegTime: "2021-11-19", //渠道注册时间
                  Id: "2", //Id
                  ThisMonthTrade: "4251.00", //当月交易额
                },
                {
                  MerchantName: "李春雷8471", //商户姓名
                  KqRegTime: "2021-12-18", //渠道注册时间
                  Id: "2", //Id
                  ThisMonthTrade: "2987.53", //当月交易额
                },
              ]
            };
            if(this.merchants.length === 0) {this.isnodata = true}else{this.isnodata = false};
            this.TotalCount = res.other.TotalCount;
            this.ActCount = res.other.ActCount;
            this.loading = false;
          },
          //- 进入搜索
          gosearch(){
            PublicLib.Goto({Url:'merchant-search'});
          },
          goback(){
            PublicLib.GoBack({Level:1});
          },
          merchantdetail(id){
            PublicLib.putCookieInfo('merchantId', id);
            PublicLib.Goto({Url:'merchant-detail'});
          }
        }
      });
    </script>
  </body>
</html>