2020/06/04

api.js

@@ -44,6 +44,7 @@ export const api_getTeamJoinNum = '/data/team_num'  //获取团队参赛数量
 
 export const api_Mychallenge_list = '/challenge/Mychallenge_list'  //获取我的挑战列表
 export const api_GuessingList = '/challenge/GuessingList'  //获取围观预测列表
+export const api_GuessingRanklList = '/challenge/challenge_rank'  //获取围观预测列表
 
 export const api_initiate_challenge = '/challenge/initiate_challenge'  //发起挑战
 export const api_getCrown = '/challenge/get_crown'  //获得参赛代理公司

pages/challengeList/challengeList.vue

@@ -10,6 +10,7 @@
 			<view class="nav">
 				<view class="nav-item" :class="{ active: active === 0 }" @click="active = 0">我的挑战</view>
 				<view class="nav-item" :class="{ active: active === 1 }" @click="active = 1">围观竞猜</view>
+				<view class="nav-item" :class="{ active: active === 2 }" @click="active = 2">挑战排行</view>
 			</view>
 			<view class="my-challenge">
 				<scroll-view 
@@ -36,11 +37,16 @@
 								<view class="nickname">{{ item.challenge_nickname | getName }}</view>
 							</view>
 							<view class="detail-c">
-								<view class="long">
+								<view class="long2">
+									<view class="long2-item">{{ item.challenge_total }}</view>
+									<view class="long2-c">:</view>
+									<view class="long2-item">{{ item.accept_total }}</view>
+								</view>
+								<!-- <view class="long">
 									<view class="long-item">{{ item.day | getLong(0) }}</view>
 									<view class="long-item">{{ item.day | getLong(1) }}</view>
-								</view>
-								<view class="time">{{ item.time }}</view>
+								</view> -->
+								<!-- <view class="time">{{ item.time }}</view> -->
 								<view class="action" :class="{ end: item.status == 3 || item.guessing || Date.now() > item.guessing_endtime }" @click="toDetail(item)">{{ item | getAction(nowActive) }}</view>
 							</view>
 							<view class="detail-r">
@@ -61,12 +67,12 @@
 </template>
 
 <script>
-	import { api_Mychallenge_list, api_GuessingList } from '@/api.js'
+	import { api_Mychallenge_list, api_GuessingList, api_GuessingRanklList } from '@/api.js'
 	export default {
 		data() {
 			return {
 				pageTitle: '学分挑战',
-				active: 0,
+				active: 1,
 				nowActive: 0,
 				list: [],
 				page: 1,
@@ -145,7 +151,7 @@
 				if (!this.requesting && this.page > 0) {
 					this.requesting = true
 					uni.loading()
-					this.$ajax.get((this.active == 0 ? api_Mychallenge_list : api_GuessingList) + `?page=${this.page}`).then(([, { data: { data: { list, size }}}]) => {
+					this.$ajax.get((this.active == 0 ? api_Mychallenge_list + `?page=${this.page}` : (this.active === 1 ? api_GuessingList + `?page=${this.page}` : api_GuessingRanklList + `?page=${this.page}`))).then(([, { data: { data: { list, size }}}]) => {
 						list.length < size ? this.page = 0 : this.page += 1
 						this.list = refresh ? list : [...this.list, ...list],
 						this.nowActive = this.active
@@ -275,7 +281,6 @@
 						@include flex();
 						box-sizing: border-box;
 						> view {
-							flex: 1;
 							height: 100%;
 							position: relative;
 							@include flex(column);
@@ -300,6 +305,8 @@
 								overflow: hidden;
 								white-space: nowrap;
 								text-overflow: ellipsis;
+								width: 100%;
+								text-align: center;
 							}
 							.success {
 								left: 50%;
@@ -310,7 +317,39 @@
 								position: absolute;
 								transform: translateX(-50%);
 							}
-							&.detail-c {
+							&.detail-r, &.detail-l {
+								width: calc((100% - 290rpx) / 2);
+							}
+							
+							&.detail-c{
+								width: 290rpx;
+								.long2 {
+									flex: 1;
+									display: flex;
+									align-items: center;
+									justify-content: space-between;
+									
+									.long2-c {
+										font-size: 50rpx;
+										color: #333333;
+										margin: 0 9rpx;
+									}
+									
+									.long2-item {
+										width: 120rpx;
+										height: 72rpx;
+										text-align: center;
+										line-height: 72rpx;
+										font-size: 26rpx;
+										color: #FFA231;
+										border: 1px solid #CCCCCC;
+										border-radius: 6rpx;
+										
+										&:last-of-type{
+											color: #C55AAE;
+										}
+									}
+								}
 								.long {
 									width: 100rpx;
 									height: 64rpx;

store.js

@@ -39,10 +39,13 @@ const store = new Vuex.Store({
 			console.log(payload)
 			
 			// payload.cha_nickname = 'TEST1211313123'
+			// payload.money = 1
+			
+			// 模拟用户 请打开下面注释
 			// payload.signuped = true
 			// payload.type = 2
 			// payload.level_name = '代理公司'
-			// payload.money = 1
+			
 			
 			state.userServerInfo = payload //把获取到的用户服务器信息，保存到 vuex 中
 		},