Signed-off-by: liuboyan <632697560@qq.com>

比率

config/api.js

@@ -51,6 +51,14 @@ module.exports = {
 	submitRenewCommunicateForm: API_BASE + '/v2/coach/center/writeRenewalCommunicateRecord',
 	//  提交签到学员沟通记录表单
 	submitSignCommunicateForm: API_BASE + '/v2/coach/center/writeSignCommunicateRecord',
+	//  获取续费率
+	getRenewPercent: API_BASE + '/v2/coach/center/getRenewPercent',
+	//  获取续费率排名列表
+	getRenewRankingList: API_BASE + '/v2/coach/center/getRenewRankingList',
+	//  获取签到率
+	getSignPercent: API_BASE + '/v2/coach/center/getSignPercent',
+	//  获取签到率排名列表
+	getSignRankingList: API_BASE + '/v2/coach/center/getSignRankingList',
 	
 	
 	//  上传地址

pagesMain/ratioRank.vue

@@ -1,5 +1,34 @@
 <template>
 	<view class="content">
+		<u-subsection mode="subsection" :active-color="mainColor" :list="tabList" :current="current" @change="tabsChange"></u-subsection>
+		<swiper :current="swiperCurrent" @animationfinish="animationfinish" class="swiper-box">
+			<swiper-item class="swiper-item" v-for="(item, index1) in tabList" :key="index1">
+				<scroll-view scroll-y class="scroll-box" @scrolltolower="handleLoadMore" :refresher-enabled="true"
+				 :refresher-triggered="triggered" :refresher-threshold="100" refresher-background="white" @refresherrefresh="onRefresh"
+				 @refresherrestore="onRestore">
+					<view class="filter-date-box">
+						<u-icon name="arrow-left" color="#999999" size="48" @click="previousMonth()"></u-icon>
+						<text class="filter-date">{{item.year}}年{{item.month}}月</text>
+						<u-icon name="arrow-right" color="#999999" size="48" @click="nextMonth()"></u-icon>
+					</view>
+					<view class="rank-box">
+						<u-line-progress :active-color="mainColor" :percent="item.percent" height="40"></u-line-progress>
+						<text class="rank-text" v-if="index1 == 1">签到人次：{{item.signCount}}</text>
+					</view>
+					<u-card :head-border-bottom="false" :foot-border-top="false" padding="0px" margin="0" borderRadius="0" v-for="(site, index2) in item.tableList"
+					 :key="index2" class="class-card" @click="goToStudent(site)">
+						<view class="class-content" slot="body">
+							<view class="class-info-sort">{{index2}}</view>
+							<view class="class-info-text">{{site.name}}&nbsp;&nbsp;{{index1 == 1 ? site.residue + '课时' :''}}</view>
+							<view class="class-info-img">
+								<u-avatar :src="site.url" size="100"></u-avatar>
+							</view>
+						</view>
+					</u-card>
+					<u-divider v-if="item.isOver" bg-color="transparent">没有更多了</u-divider>
+				</scroll-view>
+			</swiper-item>
+		</swiper>
 		<u-top-tips ref="uTips"></u-top-tips>
 	</view>
 </template>
@@ -13,28 +42,160 @@
 	export default {
 		computed: {
 			...mapGetters([
-				'mainColor'
+				'mainColor',
+				'handleCustomStyle',
+				'handleDefaultCustomStyle',
 			])
 		},
 		data() {
 			return {
+				triggered: false,
+				tabList: [{
+					name: '续费率',
+					isOver: false,
+					pageIndex: 1,
+					year: '',
+					month: '',
+					percent: 20,
+					signCount: '',
+					tableList: [
+									{
+										"name": "续费率",
+										"url": ""
+									},
+									{
+										"name": "续费率",
+										"url": ""
+									},
+									{
+										"name": "续费率",
+										"url": ""
+									},
+									{
+										"name": "续费率",
+										"url": ""
+									},
+									{
+										"name": "续费率",
+										"url": ""
+									},
+									{
+										"name": "续费率",
+										"url": ""
+									},
+									{
+										"name": "续费率",
+										"url": ""
+									},
+									{
+										"name": "续费率",
+										"url": ""
+									},
+					],
+				}, {
+					name: '签到率',
+					isOver: false,
+					pageIndex: 1,
+					year: '',
+					month: '',
+					percent: '',
+					signCount: '',
+					tableList: [],
+				}],
+				current: 0,
+				swiperCurrent: 0,
 			}
 		},
 		onLoad() {
-			this.getData()
+			this.tabList.forEach(site => {
+				site.year = new Date().getFullYear()
+				site.month = new Date().getMonth() + 1
+			})
+			this.getTableList(0)
+			this.getTableList(1)
+			this.getRank(0)
+			this.getRank(1)
 		},
 		onReady() {},
-		onPullDownRefresh() {
-			this.getData()
-		},
 		methods: {
-			//  获取数据
-			getData() {
-				NET.request(API.getEvaluateInfo, {
-					id: this.classId,
+			//  tab页面切换
+			tabsChange(index) {
+				this.swiperCurrent = index;
+			},
+			//  swiper滑动结束，分别设置tabs和swiper的状态
+			animationfinish(e) {
+				let current = e.detail.current;
+				this.swiperCurrent = current;
+				this.current = current;
+			},
+			//  上一个月
+			previousMonth() {
+				if (this.tabList[this.current].month == 1) {
+					this.tabList[this.current].year--
+					this.tabList[this.current].month = 12
+				} else {
+					this.tabList[this.current].month--
+				}
+				this.onRefresh(1)
+			},
+			//  下一个月
+			nextMonth() {
+				if (this.tabList[this.current].month == 12) {
+					this.tabList[this.current].year++
+					this.tabList[this.current].month = 1
+				} else {
+					this.tabList[this.current].month++
+				}
+				this.onRefresh(1)
+			},
+			//  下拉刷新
+			onRefresh(type) {
+				if (type != 1) {
+					this.triggered = true
+				}
+				this.tabList[this.current].isOver = false
+				this.tabList[this.current].pageIndex = 1
+				this.tabList[this.current].tableList = []
+				this.getTableList(this.current)
+				this.getRank(this.current)
+			},
+			//  重置下拉刷新状态
+			onRestore() {
+				this.triggered = 'restore'
+				this.triggered = false
+			},
+			//  懒加载
+			handleLoadMore() {
+				if (!this.tabList[this.current].isOver) {
+					this.tabList[this.current].pageIndex++
+					this.getTableList(this.current)
+				}
+			},
+			//  获取列表数据
+			getTableList(index) {
+				NET.request(index == 0 ? API.getRenewRankingList : API.getSignRankingList, {
+					date: this.tabList[index].year + '-' + this.tabList[index].month,
+					page: this.tabList[index].pageIndex,
+					size: 20,
 				}, 'POST').then(res => {
-					this.evaluateInfo = res.data
-					uni.stopPullDownRefresh();
+					this.triggered = false
+					this.tabList[index].tableList = this.tabList[index].tableList.concat(res.data.list)
+					this.tabList[index].isOver = res.data.list.length != 20
+				}).catch(error => {
+					this.triggered = false
+					this.$refs.uTips.show({
+						title: error.data.msg,
+						type: 'warning',
+					})
+				})
+			},
+			//  获取比率
+			getRank(index) {
+				NET.request(index == 0 ? API.getRenewPercent : API.getSignPercent, {
+					date: this.tabList[index].year + '-' + this.tabList[index].month,
+				}, 'POST').then(res => {
+					this.tabList[index].percent = res.data.percent
+					this.tabList[index].signCount = res.data.signCount
 				}).catch(error => {
 					this.$refs.uTips.show({
 						title: error.data.msg,
@@ -59,5 +220,84 @@
 	.content {
 		width: 100%;
 		float: left;
+
+		.swiper-box {
+			height: calc(100vh - 34px);
+
+			.swiper-item {
+				height: calc(100vh - 34px);
+
+				.scroll-box {
+					width: 100%;
+					height: calc(100vh - 34px);
+
+					.filter-date-box {
+						height: 48px;
+						display: flex;
+						justify-content: space-between;
+						align-items: center;
+						padding: 10px 15px;
+
+						.filter-date {
+							text-align: center;
+							font-size: 16px;
+							font-weight: bold;
+							line-height: 28px;
+							flex: 1;
+						}
+					}
+
+					.rank-box {
+						height: 30px;
+						display: flex;
+						justify-content: space-between;
+						align-items: center;
+						padding: 0 15px;
+
+						u-line-progress {
+							flex: 1;
+						}
+						.rank-text{
+							padding-left: 10px;
+							font-size: 11px;
+							color: $mainColor;
+						}
+					}
+
+					.class-card {
+						border-bottom: 1px solid #cccccc;
+
+						.class-content {
+							padding: 5px 15px;
+							display: flex;
+							align-items: center;
+
+							.class-info-sort {
+								width: 50px;
+							}
+
+							.class-info-img {
+								width: 50px;
+								height: 50px;
+								margin-right: 5px;
+								display: flex;
+								align-items: center;
+								justify-content: center;
+							}
+
+							.class-info-text {
+								line-height: 20px;
+								font-size: 14px;
+								flex: 1;
+							}
+						}
+					}
+
+					.class-card:last-child {
+						border-bottom: none;
+					}
+				}
+			}
+		}
 	}
 </style>