<!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 pb0"> <div class="merchant_achievement" id="app" v-cloak> <van-nav-bar class="camp_title user_title_normal titlef16 left_icon_cfff" 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_achievement_topblock"></div> <van-tabs class="toptab" v-model="active" @click="changetab" title-active-color="#FF5A32" title-inactive-color="#333" line-width="32" line-height="2"> <van-tab> <template #title> <div @click="choosetime"><span>{{nowdate}}</span> <van-icon name="arrow"></van-icon> </div> </template> <van-row class="main ovh rel" v-if="active === 0"> <van-col class="bgcfff peoname abs"> <van-sidebar v-model="activeKey" @change="onChange"> <van-list v-model="loading2" :finished="finished2" finished-text="没有更多了" @load="onLoad2"> <van-sidebar-item v-for="item in nameList" :title="item.MerchantName"></van-sidebar-item> </van-list> </van-sidebar> </van-col> <van-col class="infobox"> <van-list v-model="loading" :finished="finished" finished-text="没有更多数据了" @load="onLoad" :immediate-check="false"> <div class="panel bgcfff" v-for="obj in data"> <div class="toppanel df"> <div class="block"></div> <div class="f14 c333 b">{{obj.Date}}</div> </div> <div class="mainpanel"> <div class="title df c333 f16 flexsb"> <div>总参与</div> <div>{{obj.ActTotal}}户</div> </div> <div class="df c666 f12 flexsb" v-for="item in obj.ProductList" @click="gotransactiondetail(obj.TradeMonth,item)"> <div class="type">{{item.Name}}</div> <div class="num">{{item.ActCount}}户</div> </div> </div> </div> </van-list> </van-col> </van-row> </van-tab> <van-tab> <template #title><span>近半年</span></template> <van-row class="main rel" v-if="active === 1"> <van-col class="bgcfff peoname abs"> <van-sidebar v-model="activeKey" @change="onChange"> <van-list v-model="loading2" :finished="finished2" finished-text="没有更多了" @load="onLoad2" :immediate-check="false"> <van-sidebar-item v-for="item in nameList" :title="item.MerchantName"></van-sidebar-item> </van-list> </van-sidebar> </van-col> <van-col class="infobox marginleft"> <div class="panel bgcfff" v-for="obj in data"> <div class="toppanel df"> <div class="block"></div> <div class="f14 c333 b">{{obj.TradeMonth}}</div> </div> <div class="mainpanel"> <div class="title df c333 f16 flexsb"> <div>总参与</div> <div>{{obj.TradeAmount}}户</div> </div> <div class="df c666 f12 flexsb" v-for="item in obj.ProductList" @click="gotransactiondetail(obj.TradeMonth,item)"> <div class="type">{{item.Name}}</div> <div class="num">{{item.ActCount}}户</div> </div> </div> </div> </van-col> </van-row> </van-tab> </van-tabs> <van-popup class="product_mymerchant_transaction" v-model="showDate" position="bottom" :style="{ height: '50%' }" v-cloak> <van-datetime-picker v-model="currentDate" type="year-month" title="选择年月" :min-date="minDate" :max-date="maxDate" @cancel="showDate = false" :formatter="formatter" @confirm="onConfirmDate"></van-datetime-picker> </van-popup> </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 { toptitleisshow:true, active:0, activeKey: 0, loading: false, finished: false, loading2: false, finished2: false, pageinfo:{ PageSize:10, PageNum:1 }, pageinfo2:{ PageSize:10, PageNum:1 }, minDate: new Date(2020, 0, 1), maxDate: new Date(), currentDate: new Date(), nowdate:'', showDate: false, nameList:[ {MerchantName:'全部',Id:''} ], data:[ ], ismonth:true, merchantId:'', }; }, created() { this.onConfirmDate(); this.getmerchantlist(); }, methods: { onChange(index) { const people = this.nameList.find((item,ind)=>ind === index); this.data = []; this.merchantId = people.Id; if(this.active === 0) { this.getmonthinfo(people.Id); }else{ this.gethalfyearinfo(people.Id); }; }, onLoad() { this.pageinfo.PageNum++; this.getmonthinfo(this.merchantId); }, onLoad2() { this.pageinfo2.PageNum++; this.getmerchantlist(this.merchantId); }, changetab(){ this.activeKey = 0; this.nameList = [{MerchantName:'全部',Id:''}]; this.getmerchantlist(); if(this.active === 0 && !this.ismonth) { this.data = [] this.getmonthinfo(''); this.ismonth = true; } if(this.active === 1){ this.data = [] this.gethalfyearinfo(''); this.ismonth = false; }; }, choosetime(e){ if(this.active === 0) { e.stopPropagation() } if(this.active !== 0) return this.showDate = true }, formatter(type, val) { if (type === 'year') { return `${val}年`; } else if (type === 'month') { return `${val}月`; } else if (type === 'day') { return `${val}日`; } return val; }, onConformateDate(){ return formatDate(this.currentDate.getFullYear(),this.currentDate.getMonth() + 1); }, onParamsDate(date){ return formatDate(new Date(date).getFullYear(),new Date(date).getMonth() + 1); }, onConfirmDate() { this.data = []; this.showDate = false; this.nowdate = this.currentDate.getFullYear() + '-' + (this.currentDate.getMonth() + 1); this.getmonthinfo(''); }, async getmonthinfo(MerchantId){ PublicLib.ShowLoading({Message:''}); this.finished = false; const UserId = PublicLib.getCookieInfo('userId'); const res = await getRequest('/api/v1/activereward/teamactmerchantformonth',JSON.stringify({...this.pageinfo,TradeMonth:this.onConformateDate(),UserId,MerchantId})); if(res.status !== '1')return tips('月团队业绩获取失败!'); PublicLib.HideLoading(); if(res.data.length < this.pageinfo.PageSize) { this.finished = true }; this.data.push(...res.data); this.loading = false; }, async gethalfyearinfo(MerchantId){ PublicLib.ShowLoading({Message:''}); const UserId = PublicLib.getCookieInfo('userId'); const res = await getRequest('/api/v1/usertradedaysummary/teamperformancehalfyear',JSON.stringify({...this.pageinfo,UserId,MerchantId})); if(res.status !== '1')return tips('半年团队业绩获取失败!'); PublicLib.HideLoading(); this.data = res.data; }, async getmerchantlist(){ this.finished2 = false; const UserId = PublicLib.getCookieInfo('userId'); const res = await getRequest('/api/v1/merchantinfo/teamperformancemerchants',JSON.stringify({...this.pageinfo2,UserId})); if(res.status !== '1')return tips('商户列表获取失败!'); if(res.data.length < this.pageinfo2.PageSize) { this.finished2 = true }; this.nameList.push(...res.data); this.loading2 = false; }, goback(){ PublicLib.GoBack({Level:1}); }, } }); </script> </body> </html>