feat: 增加排行榜功能

src/const/index.ts

@@ -46,25 +46,21 @@ export const provincesInChina = [
 ];
 
 export const logoUrl = "/static/logo.jpg";
-
 export const ossHost = "https://oss.justin3go.com";
-
 export const bannerUrl1 = "https://oss.justin3go.com/banners/banner1.jpg";
-
 export const shareCodeUrl = '/static/image/indexPage/shareCode.png'
-
 export const writerUrl = '/static/image/questionnairePage/writer.png'
-
 export const questionnaireUrl = '/static/image/questionnairePage/questionnaire.png'
-
 export const emptyUrl = '/static/image/noData.png'
 
 // icons
-
 export const indexIcon1 = '/static/image/icons/问卷填写.png'
-
 export const indexIcon2 = '/static/image/icons/问卷查看.png'
-
 export const indexIcon3 = '/static/image/icons/查看排行.png'
+export const indexIcon4 = '/static/image/icons/心理问答.png'
+
+// rankList
 
-export const indexIcon4 = '/static/image/icons/心理问答.png'
+export const firstRank = '/static/image/list/first.png'
+export const secondRank = '/static/image/list/second.png'
+export const thirdRank = '/static/image/list/third.png'

src/graphql/me.graphql.ts

@@ -61,3 +61,35 @@ export const getPostObjectParamsGQL = gql`
 		}
 	}
 `;
+
+export const listAsOwnerGQL = gql`
+  query listAsOwner($questionnaireId: String!) {
+    listAsOwner(questionnaireId: $questionnaireId) {
+      friend {
+        id
+        nickName
+        avatarUrl
+      }
+      owner {
+        id
+      }
+      similarity
+    }
+	}
+`
+
+export const listAsFriendGQL = gql`
+  query listAsFriend($questionnaireId: String!) {
+    listAsFriend(questionnaireId: $questionnaireId) {
+      friend {
+        id
+      }
+      owner {
+        id
+				nickName
+        avatarUrl
+      }
+      similarity
+    }
+	}
+`

src/pages.json

@@ -79,6 +79,12 @@
 			"style": {
 				"navigationBarTitleText": "修改资料"
 			}
+		},
+		{
+			"path": "pages/me/rankList",
+			"style": {
+				"navigationBarTitleText": "排行榜"
+			}
 		}
 	],
 	"globalStyle": {

src/pages/me/index.vue

@@ -36,18 +36,22 @@
 				</view>
 			</view>
 			<view class="quick-entry">
-				<quick-entry-card @click="feedbackService">
-					<template #title>关于自己</template>
-					<template #icon>
-						<uni-icons type="auth" size="40" color="#FFFFFF"></uni-icons>
-					</template>
-				</quick-entry-card>
-				<quick-entry-card>
-					<template #title>关于他人</template>
-					<template #icon>
-						<uni-icons type="staff" size="40" color="#FFFFFF"></uni-icons>
-					</template>
-				</quick-entry-card>
+				<view @click="toRankList('me')">
+					<quick-entry-card>
+						<template #title>关于自己</template>
+						<template #icon>
+							<uni-icons type="auth" size="40" color="#FFFFFF"></uni-icons>
+						</template>
+					</quick-entry-card>
+				</view>
+				<view @click="toRankList('other')">
+					<quick-entry-card>
+						<template #title>关于他人</template>
+						<template #icon>
+							<uni-icons type="staff" size="40" color="#FFFFFF"></uni-icons>
+						</template>
+					</quick-entry-card>
+				</view>
 			</view>
 		</view>
 		<view class="service-card">
@@ -197,6 +201,12 @@ function toUpdateUser() {
 	});
 }
 
+function toRankList(option: "me" | "other") {
+	uni.navigateTo({
+		url: `/pages/me/rankList?option=${option}`
+	})
+}
+
 // 相关服务
 function feedbackService() {
 	console.log("feedbackService...");

src/pages/me/me.interface.ts

@@ -0,0 +1,8 @@
+export interface rankDataI {
+  [questionnaireId: string]: {
+    id: string;
+    nickName: string;
+    avatarUrl: string;
+    similarity: number;
+  }[]
+}

src/pages/me/rankList.vue

@@ -0,0 +1,217 @@
+<template>
+	<view class="rank-list-container">
+		<view class="questionnaire-select">
+			<uni-data-select v-model="curValue" :localdata="range" @change="chooseQuestionnaire"></uni-data-select>
+		</view>
+		<view class="top-placeholder"></view>
+		<view v-if="!curQuestionnaireId" class="no-data">
+			<empty info="请先选择问卷"></empty>
+		</view>
+		<view v-if="curQuestionnaireId && !rankData[curQuestionnaireId].length" class="no-data">
+			<empty info="暂无排行，请先分享或帮助好友填写问卷"></empty>
+		</view>
+		<view class="rank-list" v-for="(item, index) in rankData[curQuestionnaireId]" :key="item.id">
+			<view class="rank-item">
+				<view class="info">
+					<view class="order">
+						<view v-if="index === 0">
+							<image :src="firstRank"></image>
+						</view>
+						<view v-else-if="index === 1">
+							<image :src="secondRank"></image>
+						</view>
+						<view v-else-if="index === 2">
+							<image :src="thirdRank"></image>
+						</view>
+						<view class="number" v-else> {{ index + 1 }} </view>
+					</view>
+					<view class="avatar">
+						<image
+							style="height: 50px; width: 50px; border-radius: 25px"
+							:src="item.avatarUrl || userDefaultData.avatarUrl"
+						></image>
+					</view>
+					<view class="nick-name">{{ item.nickName }}</view>
+				</view>
+				<view class="similarity">{{ (item.similarity / 100).toFixed(2) }}</view>
+			</view>
+		</view>
+	</view>
+</template>
+<script setup lang="ts">
+import { onLoad, onShow } from "@dcloudio/uni-app";
+import { ref, watch, type Ref } from "vue";
+import type { RangeI } from "../show/show.interface";
+import type { QuestionnaireI } from "../questionnaire/questionnaire.interface";
+import { useQuery } from "villus";
+import { meGQL } from "@/graphql/questionnaire.graphql";
+import type { rankDataI } from "./me.interface";
+import { listAsOwnerGQL, listAsFriendGQL } from "@/graphql/me.graphql";
+import { userDefaultData, firstRank, secondRank, thirdRank } from "@/const";
+
+const meOrOther: Ref<"me" | "other"> = ref("me");
+
+const questionnaires: Ref<QuestionnaireI[]> = ref([]);
+const range: Ref<RangeI[]> = ref([]);
+
+watch(questionnaires, (newVal) => {
+	range.value = newVal.map((item) => ({
+		value: item.id,
+		text: item.title,
+	}));
+});
+
+const curValue = ref("");
+const curQuestionnaireId = ref("");
+
+onLoad((option) => {
+	meOrOther.value = option?.option;
+});
+
+onShow(async () => {
+	const { execute } = useQuery({ query: meGQL });
+	const { error, data } = await execute();
+	if (error) {
+		uni.showToast({
+			title: `获取已填写问卷失败: ${error}`,
+			icon: "error",
+			duration: 2000,
+		});
+		throw new Error(`获取已填写问卷失败: ${error}`);
+	}
+	questionnaires.value = data?.me.questionnairesAsOwnerAsFriend.map((item: any) => item.questionnaire) || [];
+});
+
+const rankData: Ref<rankDataI> = ref({});
+
+async function chooseQuestionnaire(e: any) {
+	console.log("chooseQuestionnaire: ", e);
+
+	curQuestionnaireId.value = e;
+	if (meOrOther.value === "me") {
+		await getListAsOwner(e);
+	} else {
+		await getListAsFriend(e);
+	}
+}
+
+async function getListAsOwner(questionnaireId: string) {
+	const { execute } = useQuery({ query: listAsOwnerGQL, variables: { questionnaireId } });
+	const { error, data } = await execute();
+	if (error) {
+		uni.showToast({
+			title: `获取排行榜失败: ${error}`,
+			icon: "error",
+			duration: 2000,
+		});
+		throw new Error(`获取排行榜失败: ${error}`);
+	}
+	rankData.value[questionnaireId] = [];
+	// 作为拥有者，我需要查看相关朋友列表的排行榜
+	data?.listAsOwner.forEach((item: any) => {
+		if (item.friend.id !== item.owner.id) {
+			rankData.value[questionnaireId].push({
+				id: item.friend.id,
+				nickName: item.friend.nickName,
+				avatarUrl: item.friend.avatarUrl,
+				similarity: item.similarity,
+			});
+		}
+	});
+}
+
+async function getListAsFriend(questionnaireId: string) {
+	const { execute } = useQuery({ query: listAsFriendGQL, variables: { questionnaireId } });
+	const { error, data } = await execute();
+	if (error) {
+		uni.showToast({
+			title: `获取排行榜失败: ${error}`,
+			icon: "error",
+			duration: 2000,
+		});
+		throw new Error(`获取排行榜失败: ${error}`);
+	}
+	rankData.value[questionnaireId] = [];
+	// 作为朋友，我需要查看相关问卷拥有者列表排行榜
+	data?.listAsFriend.forEach((item: any) => {
+		if (item.friend.id !== item.owner.id) {
+			rankData.value[questionnaireId].push({
+				id: item.owner.id,
+				nickName: item.owner.nickName,
+				avatarUrl: item.owner.avatarUrl,
+				similarity: item.similarity,
+			});
+		}
+	});
+}
+</script>
+<style lang="scss" scoped>
+.rank-list-container {
+	.no-data {
+		padding-top: 80px;
+	}
+	.rank-list {
+		.rank-item {
+			height: 60px;
+			width: calc(100vw - 40px);
+			background-color: #ffffff;
+			padding: 15px 20px;
+			border-bottom: 1px solid $theme-color-gray-lighter-1;
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+
+			.info {
+				width: 220px;
+				display: flex;
+				justify-content: space-around;
+				align-items: center;
+
+				.order {
+					height: 50px;
+					width: 50px;
+					.number {
+						font-size: 24px;
+						font-weight: 900;
+						text-align: center;
+						line-height: 50px;
+					}
+					image {
+						height: 50px;
+						width: 50px;
+					}
+				}
+				.avatar {
+					margin: 0 10px;
+				}
+				.nick-name {
+					width: 100px;
+					font-size: 16px;
+					color: $theme-color-dark;
+					overflow: hidden;
+					text-overflow: ellipsis;
+					white-space: nowrap;
+				}
+			}
+			.similarity {
+				font-size: 25px;
+				font-weight: 900;
+				color: $theme-color-light;
+			}
+		}
+	}
+}
+
+.questionnaire-select {
+	position: fixed;
+	top: -1px;
+	width: 100vw;
+	background-color: #ffffff;
+	z-index: 1000;
+}
+
+.top-placeholder {
+	height: 50px;
+	width: 100vw;
+}
+</style>