WenWuGuanJia/answer_pages/home/index.vue

<template>
	<view class="wrap">
		<u-navbar :autoBack="true" title="答题" bgColor="rgba(255,255,255,0)" :placeholder="true" titleStyle="font-weight:bold;color:#000000"></u-navbar>
		<view class="logo" @click="onStart">
			<image :src="topImage || 'https://huli-app.wenlvti.net/app_static/minnanhun/image/lb_3.jpg'" mode="widthFix"></image>
		</view>
		<!-- <view class="main" v-if="hasLoad"> -->
		<view class="main">
			<view>
				<u-popup :show="show" :round="10" mode="center" bgColor="#fdfff3" @close="close" @open="open">
					<view>
						<text class="b-content">{{ examineData.rule_content }}</text>
					</view>
				</u-popup>
			</view>

			<view class="user-info">
				<!-- 名次头像 -->
				<view style="display: flex; justify-content: space-between; align-items: center">
					<view v-if="selfData.ranking < 100" style="display: flex; justify-content: space-between; align-items: center; margin-right: 10rpx">
						<view class="s-tit1">第</view>
						<view class="s-num" style="color: #da5650; font-size: 40rpx; font-weight: 700">{{ selfData.ranking }}</view>
						<view class="s-tit2">名</view>
					</view>
					<view v-else style="color: #da5650; font-size: 30rpx; font-weight: 700">未上榜</view>
					<view class="b-avatar">
						<image :src="selfData.avatar_url || 'https://huli-app.wenlvti.net/app_static/minnanhun/image/lb_3.jpg'" mode="aspectFill"></image>
					</view>
					<!-- 分数 -->
					<view class="b-score" v-if="examineData.max_sid > 0" @click="onGoLast('max', examineData.max_sid)">
						<!-- 暂时注释显示undefind -->
						<text class="s-score">{{ selfData.match_score ? selfData.match_score : selfData.max_score }}分</text>

						<!-- 暂时注释 -->
						<!-- <text class="s-tit">{{ costTime(selfData.cost_time) }}</text> -->
					</view>
				</view>
				<!-- 名次头像end -->
				<!-- 		
				<view class="b-info">
					<view class="s-name">{{ selfData.name }}</view>
				</view> -->

				<view style="display: flex; flex-direction: column">
					<u-button customStyle="width:136rpx" open-type="share" @click="shareBtn" shape="circle" size="small" text="分享" color="#da5650"></u-button>
				</view>
			</view>
			<view class="examine">
				<view class="b-chance">
					<view class="s-tit" style="margin-left: 30rpx">答题机会</view>
					<view class="s-flag">×</view>
					<view class="s-num">{{ examineData.challenge_chance }}</view>
					<button @click="show = true" size="mini" style="font-size: 28upx; color: #da5650; margin-left: 250rpx">答题规则</button>
				</view>
				<view class="b-start disable" v-if="examineData.activity_status == 0">答题未开始</view>
				<template v-else-if="examineData.activity_status == 1">
					<view class="b-start" :class="{ disable: disable.submit }" @click="onContinue" v-if="examineData.session_data && examineData.session_data.status == 1">
						继续答题
					</view>
					<view class="b-start" :class="{ disable: disable.submit }" @click="onStart" v-else-if="examineData.challenge_chance > 0">
						{{ examineData.last_sid > 0 ? '重新答题' : '开始答题' }}
					</view>
					<view class="b-start disable" v-else>完成答题</view>
				</template>
				<view class="b-start disable" v-else-if="examineData.activity_status == 2">答题已结束</view>
				<view class="b-start f-finish" style="color: #da5650" v-if="examineData.last_sid > 0" @click="onGoLast('last', examineData.last_sid)">上次成绩</view>
			</view>

			<view class="top-data">
				<view class="b-tit" style="font-size: 30rpx; color: #ff0000; margin-left: 20rpx">排 行 榜</view>
				<view style="height: 20rpx"></view>
				<scroll-view class="top-scroll" scroll-y scroll-with-animation :lower-threshold="100" @scrolltolower="onScrollToLower" :style="{ height: scrollHeight + 'px' }">
					<!-- 数据列表排行榜 -->
					<view class="user-list">
						<view class="b-item" v-for="(item, index) in userData.ranking_list" :key="index">
							<view class="b-sort">
								<image
									:src="'https://huli-app.wenlvti.net/app_static/wuyuan/static/static/imgs/top_' + item.ranking + '.png'"
									mode="aspectFit"
									v-if="item.ranking < 4"
								></image>
								<text v-else>{{ item.ranking }}</text>
							</view>
							<view class="b-avatar">
								<image :src="item.avatar_url || 'https://huli-app.wenlvti.net/app_static/WenWuGuanJia/image/bm_top.png'" mode="aspectFill"></image>
							</view>
							<view class="b-user">
								<view class="s-name">{{ item.name }}</view>
							</view>
							<view class="b-data">
								<!-- 暂时注释显示undefind -->
								<view class="s-score">{{ item.match_score ? item.match_score : item.max_score }}分</view>

								<!-- 暂时注释显示 -->
								<!-- <view class="s-time">{{ costTime(item.cost_time) }}</view> -->
							</view>
						</view>
					</view>
					<!-- 加载中 -->
					<load-more :loadingsType="loadingsType" :loadingsText="loadingsText"></load-more>
				</scroll-view>
			</view>

			<!-- <view style="height: 100rpx"></view> -->

			<!-- <view class="rules">
				<view class="b-tit">答题规则</view>
				<text class="b-content">{{examineData.rule_content}}</text>
			</view> -->
		</view>
		<!-- </view> -->
		<view class="bottom_show" v-if="shareUserData.user_id">
			<view v-if="shareUserData.ranking < 100" style="display: flex; justify-content: space-between; align-items: center; margin-right: 30rpx">
				<view class="s-tit1">第</view>
				<view class="s-num" style="color: #da5650; font-size: 40rpx; font-weight: 700">{{ shareUserData.ranking }}</view>
				<view class="s-tit2">名</view>
			</view>
			<view v-else style="color: #da5650; font-size: 30rpx; font-weight: 700; margin-right: 30rpx">未上榜</view>
			<view class="b-avatar" style="width: 100upx; height: 100upx">
				<image
					style="width: 100upx; height: 100upx; border-radius: 50%"
					:src="shareUserData.avatar_url || 'https://huli-app.wenlvti.net/app_static/WenWuGuanJia/image/bm_top.png'"
					mode="aspectFill"
				></image>
			</view>
			<view style="margin-right: 50rpx; margin-left: 30rpx">{{ shareUserData.name }}</view>
			<view class="">
				<view class="">
					<text class="" style="color: #da5650">{{ shareUserData.match_score ? shareUserData.match_score : shareUserData.max_score }}分</text>
					<view class=""></view>
				</view>
			</view>

			<view class="gui-margin">
				<button type="default" class="gui-button gui-gtbg-red gui-noborder button" style="width: 100rpx" @click="toLike">
					<text class="gui-color-white gui-button-text gui-icons button-text">&#xe6ea;点赞</text>
				</button>
			</view>
		</view>

		<!-- 加载中 -->
		<load-more :loadingType="loadingType" :loadingText="loadingText" :top="300"></load-more>
		<!-- 上传头像 -->
		<upload-avatar :show="display.avatarChange" :image="userInfo.avatar_url" @bindClose="onAvatarClose" @bindChange="onAvatarChange"></upload-avatar>
	</view>
</template>

<script>
import { getHomeData } from '@/service/api/page.js';
import { startChallenge, getRankingList, getNew, userShare } from '@/service/api/examine.js';
// 暂时注释可以正常显示页面
// import mixinsCommon from '@/mixins/common.js';
// import mixinsAuth from '../../mixins/auth.js';
import Util from '../../common/util';
export default {
	// mixins: [mixinsCommon, mixinsAuth],
	data() {
		return {
			SharerId: '' /* 分享人的id */,
			userInfo: {},
			show: false,
			topData: {},
			examineData: {},
			hasLoad: false,
			loadingType: 1,
			loadingText: '',
			disable: {
				submit: false
			},
			display: {
				avatarChange: false
			},
			loadingsType: 1,
			loadingsText: '',
			userData: {
				ranking_list: []
			},
			selfData: {},
			shareUserData: {},
			refreshTime: 0,
			scrollHeight: 100,
			from_userid: 0
		};
	},
	onLoad(e) {
		console.log(e, 989898989);
		this.SharerId = e.SharerId;
		this.initScrollHeight();
		this.refreshTime = Util.getTimestamp();
		// 暂时注释3月12
		this.loadRankingList(e.from_userid);
		this.loadHomeData();
		if (e.from_userid) {
			this.from_userid = e.from_userid;
		}
	},

	computed: {
		topImage() {
			return this.$store.getters.globalConfig.home_top_img;
		}
	},
	methods: {
		/* 测试分享功能 */
		shareBtn() {
			// console.log(this.SharerId, '33333333');

			uni.share({
				provider: 'weixin',
				type: 0,
				scene: 'WXSceneSession',
				title: '分享标题',
				summary: '分享摘要',
				id: this.SharerId,
				href: 'http://example.com',
				imageUrl: 'https://huli-app.wenlvti.net//uploads/20230424/e3a3e0dccdc71d5ad6aab5a42fcfd1d1.jpg',
				success: function () {
					console.log('分享成功');
				},
				fail: function (err) {
					console.log('分享失败：' + err.errMsg);
				}
			});
		},
		open() {
			// console.log('open');
		},
		close() {
			this.show = false;
			// console.log('close');
		},
		loadHomeData() {
			getHomeData().then(([err, res]) => {
				console.log('getHomeData', err, res);
				if (!err) {
					this.hasLoad = true;
					this.loadingType = -1;
					this.userInfo = res.userInfo;
					this.topData = res.topData;
					this.examineData = res.examineData;
					if (!this.userInfo.avatar_url) {
						if (!this.$store.getters['user/uploadAvatarTip']) {
							this.$store.commit('user/setUploadAvatarTip', true);
							this.display.avatarChange = true;
						}
					}
				} else {
					if (!this.hasLoad) {
						this.loadingType = 3;
						this.loadingText = err.data.msg || '加载失败';
					}
				}
			});
		},
		loadRankingList(share_user_id) {
			// if (refresh) {
			// 	this.page = 1;
			// 	this.userData.ranking_list = [];
			// } else {
			// 	this.page++;
			// }
			this.loadingsType = 1;
			this.loadingsText = '';
			getRankingList(share_user_id).then(([err, res]) => {
				console.log('getRankingList66', err, res);
				this.loadingsType = -1;
				this.hasLoad = true;
				this.userData.ranking_list = res.ranking_list;
				console.log(this.userData.ranking_list, '成绩列表');

				this.selfData = res.self;
				console.log(this.selfData, '分数');
				this.shareUserData = res.share_user;
				//刷新重复出现，数据太少的原因？
				// if (!err) {
				// 	if (res.ranking_list.length > 0) {
				// 		this.userData.ranking_list = [...this.userData.ranking_list, ...res.ranking_list]
				// 	} else {
				// 		this.loadingsType = 2
				// 		if (this.page == 1) {
				// 			this.loadingsText = '暂无数据'
				// 		}
				// 		this.page-- // 重置分页
				// 	}
				// } else {
				// 	this.loadingsType = 3
				// }
			});
		},
		toLike() {
			let param = {
				share_user_id: 0
			};
			if (this.from_userid > 0) {
				param.share_user_id = this.from_userid;
			}
			userShare(param.share_user_id).then(([err, res]) => {
				console.log('userShare', err, res);
			});
		},
		onStart() {
			uni.navigateTo({
				url: '/answer_pages/examine/summary'
			});

			// 暂时注释3月12
			if (this.disable.submit) {
				return;
			}
			this.disable.submit = true;
			startChallenge().then(([err, res]) => {
				console.log('startChallenge', err, res);
				this.disable.submit = false;
				if (!err) {
					if (res.state === 'new' || res.state === 'exist') {
						uni.navigateTo({
							url: '/answer_pages/examine/answer?session_id=' + res.session_id + '&activity_type=' + this.examineData.activity_type
						});
					} else if (res.state === 'end') {
						uni.navigateTo({
							url: '/answer_pages/examine/summary?session_id=' + res.session_id + '&activity_type=' + this.examineData.activity_type
						});
					}
				}
			});
		},
		onContinue() {
			uni.navigateTo({
				url: '/answer_pages/examine/answer?session_id=' + this.examineData.session_data.session_id + '&activity_type=' + this.examineData.activity_type
			});
		},
		onGoTop(groupId) {
			this.$store.commit('examine/setTopGroupId', groupId);
			uni.navigateTo({
				url: '/answer_pages/examine/top'
			});
		},
		onGoLast(from, sessionId) {
			if (!sessionId) {
				return;
			}
			uni.navigateTo({
				url: '/answer_pages/examine/summary?from=' + from + '&session_id=' + sessionId
			});
		},
		onAvatarClose() {
			this.display.avatarChange = false;
		},
		onAvatarChange(avatarUrl) {
			this.userInfo.avatar_url = avatarUrl;
		},
		onFilter(e) {
			this.loadRankingList(true);
		},
		initScrollHeight() {
			const systemInfo = uni.getSystemInfoSync();
			const windowHeight = systemInfo.windowHeight;
			const searchBarHeight = this.$logic.rpx2px(360);
			this.scrollHeight = windowHeight - searchBarHeight;
		},
		onScrollToLower(e) {
			this.loadRankingList(false);
		}
	}
};
</script>

<style>
.logo image {
	width: 100%;
	height: 460upx;
}
.wrap {
	width: 100%;
	padding-bottom: 50rpx;
	background-image: url('https://huli-app.wenlvti.net/app_static/WenWuGuanJia/image/xy_bgt.png');
	background-size: 100% 100%;
	background-attachment: fixed;
	background-repeat: repeat-y;
	height: auto;
}
.main {
	padding: 40upx;
}

.user-info {
	padding: 0 30upx 0 20upx;
	display: flex;
	align-items: center;
	background: #ffffff;
	border-radius: 20upx;
	justify-content: space-between;
}

.user-info .b-avatar {
	width: 100upx;
	height: 100upx;
}

.user-info .b-avatar image {
	width: 100upx;
	height: 100upx;
	border-radius: 50%;
}

.user-info .b-info {
	margin-left: 10upx;
	flex: 1;
	display: flex;
	flex-direction: column;
}

.user-info .b-info .s-name {
	font-size: 28upx;
}

.user-info .b-info .s-org {
	margin-top: 10upx;
	padding: 0 20upx;
	width: fit-content;
	background: #da5650;
	border-radius: 10upx;
	color: #fff;
	line-height: 20px;
	height: 20px;
	font-size: 24upx;
	text-align: center;
}

.user-info .b-score {
	margin-left: 15upx;
	margin-right: 10upx;
	display: flex;
	align-items: center;
	text-align: center;
	color: #ffc300;
}

.user-info .b-score .s-score {
	font-size: 32upx;
	font-weight: bold;
}

.user-info .b-score .s-tit {
	margin-top: 10upx;
	font-size: 24upx;
	color: #999;
}

.examine {
	margin-top: 40upx;
}

.examine .b-chance {
	display: flex;
	align-items: center;
	justify-content: center;
}

.examine .b-chance .s-tit {
	font-size: 26upx;
	color: #808080;
}

.examine .b-chance .s-flag {
	margin: 0 10upx;
	font-size: 26upx;
	color: #808080;
}

.examine .b-chance .s-num {
	font-size: 36upx;
	color: #da5650;
	font-weight: bold;
}

.examine .b-start {
	margin-top: 20upx;
	height: 100upx;
	line-height: 100upx;
	text-align: center;
	color: #fff;
	font-size: 32upx;
	background: #da5650;
	border-radius: 50upx;
	letter-spacing: 10upx;
}

.examine .b-start.disable {
	background: rgba(218, 86, 80, 0.8);
}

.examine .b-start.f-finish {
	font-size: 28upx;
	background: #ffffff;
	color: #da5650;
}

.top-data {
	margin-top: 40upx;
}

.top-data .b-tit {
	font-size: 28upx;
	font-weight: bold;
}

.top-data .b-main {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
}

.top-data .b-main .b-item {
	margin-top: 20upx;
	padding: 30upx;
	width: 260upx;
	background: #ffffff;
	border-radius: 20upx;
	display: flex;
	align-items: center;
}

.top-data .b-main .b-item .b-top {
	flex: 1;
	display: flex;
	align-items: center;
}

.top-data .b-main .b-item .b-top .s-tit1,
.top-data .b-main .b-item .b-top .s-tit2 {
	font-size: 26upx;
	color: #808080;
}

.top-data .b-main .b-item .b-top .s-num {
	margin: 0 20upx;
	font-size: 32upx;
	color: #da5650;
}

.top-data .b-main .b-item .b-more .iconfont {
	font-size: 30upx;
	color: #ccc;
}

.rules {
	margin-top: 50upx;
	padding: 30upx;
	background: #ffffff;
	border-radius: 20upx;
}

.rules .b-tit {
	color: #da5650;
	font-size: 30upx;
}

.rules .b-content {
	margin-top: 20upx;
	display: block;
	color: #383838;
	font-size: 24upx;
	line-height: 40upx;
}

.user-list {
	padding: 40upx 40upx 20upx 10upx;
}

.user-list .b-item {
	margin-bottom: 50upx;
	height: 100upx;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.user-list .b-item:last-child {
	margin-bottom: 0;
}

.user-list .b-item .b-sort {
	width: 100upx;
	display: flex;
	justify-content: center;
	align-items: center;
}

.user-list .b-item .b-sort text {
	font-size: 36upx;
	color: #808080;
}

.user-list .b-item .b-sort image {
	width: 60upx;
	height: 60upx;
}

.user-list .b-item .b-avatar {
	width: 100upx;
	height: 100upx;
}

.user-list .b-item .b-avatar image {
	width: 100upx;
	height: 100upx;
	border-radius: 50%;
}

.user-list .b-item .b-user {
	margin-left: 20upx;
	flex: 1;
	display: flex;
	flex-direction: column;
}

.user-list .b-item .b-user .s-name {
	font-size: 32upx;
}

.user-list .b-item .b-user .s-org {
	margin-top: 10upx;
	font-size: 26upx;
	color: #a6a6a6;
}

.user-list .b-item .b-data {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
}

.user-list .b-item .b-data .s-score {
	color: #ffc300;
	font-size: 40upx;
}

.user-list .b-item .b-data .s-time {
	margin-top: 10upx;
	color: #a6a6a6;
	font-size: 24upx;
}

button::after {
	border: none;
}
</style>