feat: 相关图标对应功能服务实现

src/const/index.ts

@@ -54,9 +54,9 @@ export const questionnaireUrl = '/static/image/questionnairePage/questionnaire.p
 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 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
@@ -65,4 +65,7 @@ export const firstRank = '/static/image/list/first.png'
 export const secondRank = '/static/image/list/second.png'
 export const thirdRank = '/static/image/list/third.png'
 
-export const feedbackUrl = 'https://xh4u7d54le.feishu.cn/share/base/form/shrcntq0JjHrPv50gsBhU5yVRrc'
+export const feedbackUrl = 'https://xh4u7d54le.feishu.cn/share/base/form/shrcntq0JjHrPv50gsBhU5yVRrc'
+export const sourceCodeUrl = 'https://github.com/Justin3go/xiaoyou-mp'
+
+export const wxMoney = '/static/微信收款.jpg'

src/pages.json

@@ -97,6 +97,18 @@
 			"style": {
 				"navigationBarTitleText": "智能客服"
 			}
+		},
+		{
+			"path": "pages/me/supportService",
+			"style": {
+				"navigationBarTitleText": "支持我们"
+			}
+		},
+		{
+			"path": "pages/me/aboutService",
+			"style": {
+				"navigationBarTitleText": "关于笑友"
+			}
 		}
 	],
 	"globalStyle": {

src/pages/index/index.vue

@@ -36,26 +36,26 @@
 
 		<view class="common-container">
 			<view class="common-item">
-				<view class="common-icon">
-					<image style="height: 35px; width: 35px;" :src="indexIcon1"></image>
+				<view class="common-icon" @click="toQuestionnaire">
+					<image style="height: 45px; width: 45px" :src="indexIcon1"></image>
 				</view>
-				<view class="common-title">填写问卷</view>
+				<view class="common-title">查看问卷</view>
 			</view>
 			<view class="common-item">
-				<view class="common-icon">
-					<image style="height: 35px; width: 35px;" :src="indexIcon2"></image>
+				<view class="common-icon" @click="toRankListMe">
+					<image style="height: 45px; width: 45px" :src="indexIcon2"></image>
 				</view>
-				<view class="common-title">查看问卷</view>
+				<view class="common-title">关于自己</view>
 			</view>
 			<view class="common-item">
-				<view class="common-icon">
-					<image style="height: 35px; width: 35px;" :src="indexIcon3"></image>
+				<view class="common-icon" @click="toRankListOther">
+					<image style="height: 45px; width: 45px" :src="indexIcon3"></image>
 				</view>
-				<view class="common-title">查看排行</view>
+				<view class="common-title">关于他人</view>
 			</view>
 			<view class="common-item">
-				<view class="common-icon">
-					<image style="height: 35px; width: 35px;" :src="indexIcon4"></image>
+				<view class="common-icon" @click="toQA">
+					<image style="height: 45px; width: 45px" :src="indexIcon4"></image>
 				</view>
 				<view class="common-title">心理问答</view>
 			</view>
@@ -99,7 +99,7 @@ import { userDefaultData, shareCodeUrl, bannerUrl1 } from "@/const";
 import oneRowCard from "@/components/oneRowCard.vue";
 import empty from "@/components/empty.vue";
 import { onShow } from "@dcloudio/uni-app";
-import { indexIcon1, indexIcon2, indexIcon3, indexIcon4 } from "@/const"
+import { indexIcon1, indexIcon2, indexIcon3, indexIcon4 } from "@/const";
 
 const meStore = useMeStore();
 const questionnaireCount = ref(12);
@@ -117,7 +117,7 @@ const curNewsId = ref("");
 const curNewsContent = ref("");
 
 onShow(async () => {
-	if(meStore.user === null) {
+	if (meStore.user === null) {
 		await getUser();
 	}
 	console.log("App Show");
@@ -128,7 +128,7 @@ async function getUser() {
 	const { data, error } = await execute();
 	console.log("query user data: ", data);
 	console.log("query user error: ", error);
-	meStore.$patch({ user:  data.me})
+	meStore.$patch({ user: data.me });
 }
 
 function clickNewsCard(item: { id: string; content: string }) {
@@ -146,6 +146,42 @@ function confirmNews() {
 	news.value.splice(deleteItem, 1);
 	newsPopup.value.close();
 }
+
+// common
+function toQuestionnaire() {
+	setTimeout(
+		() =>
+			uni.switchTab({
+				url: "/pages/questionnaire/index",
+			}),
+		500  // 等待点击动画
+	);
+}
+function toRankListMe() {
+	setTimeout(
+		() =>
+			uni.navigateTo({
+				url: "/pages/me/rankList?option=me",
+			}),
+		500
+	);
+}
+function toRankListOther() {
+	setTimeout(
+		() =>
+			uni.navigateTo({
+				url: "/pages/me/rankList?option=other",
+			}),
+		500
+	);
+}
+function toQA() {
+	uni.showToast({
+		title: "敬请期待",
+		icon: "none",
+		duration: 2000,
+	})
+}
 </script>
 
 <style lang="scss" scoped>
@@ -234,11 +270,19 @@ function confirmNews() {
 	margin: auto;
 	padding: 0 3vw;
 	.common-icon {
+		height: 45px;
+		width: 45px;
+		padding: 10px;
+		background-color: $theme-color-background;
+		border-radius: 15px;
+		box-shadow: 5px 5px 20px #dddddd;
+		transition: 0.3s;
+	}
+	.common-icon:active {
 		height: 35px;
 		width: 35px;
 		padding: 15px;
-		background-color: $theme-color-background;
-		border-radius: 15px;
+		box-shadow: 5px 5px 20px #ffffff;
 	}
 	.common-title {
 		margin-top: 5px;

src/pages/me/aboutService.vue

@@ -0,0 +1,35 @@
+<template>
+	<view class="help-service-container">
+		<uni-title type="h2" title="1. 笑友出现的原因"></uni-title>
+    <view>
+      <text>&nbsp;&nbsp;&nbsp;&nbsp;无论是随时间出现的互联网、新冠疫情、短视频、网络社交媒体，还是长期以往存在的如高考、宿舍氛围、人际交往、就业压力等都无时无刻考验着青少年的心理健康，据相关研究表明，出现心理健康问题的青少年不在少数，并且一些心智成熟的成年人同样也面临着心理健康问题的煎熬。</text>
+    </view>
+    <view>
+      <text>&nbsp;&nbsp;&nbsp;&nbsp;心理健康问题危害极大，国家高度重视，出台了相关政策完善心理健康体系。</text>
+    </view>
+    <view>
+      <text>&nbsp;&nbsp;&nbsp;&nbsp;但目前的情况仍然有3个痛点。分别是普及难、发现难、解决难。而“互联网+心理健康系统”被多篇论文及文章指出是解决心理健康问题的重要途径之一。</text>
+    </view>
+    <view>
+      <text>&nbsp;&nbsp;&nbsp;&nbsp;该小程序基于该理念，并结合特有的一些创新点（好友互换角度填写问卷，及时可视化正反馈，以及朋友之间相互分享等）可以很好地解决这这些痛点，这也是本课题出现的原因，希望为社会的心理健康体系的完善尽上自己的绵薄之力。</text>
+    </view>
+    <uni-title type="h2" title="2. 普及难"></uni-title>
+    <text>&nbsp;&nbsp;&nbsp;&nbsp;如何普及心理健康教育，让每一位家长、老师、学生自己都重视起来。当所有人都能正视并重视心理健康教育的时候，这个问题就能迎刃而解。目前普遍存在的问题就是父母家长教育水平偏低，不够重视心理健康教育，更加关注孩子的学业、就业情况，忽略其本身的发展。学校虽然响应国家政策，实施了一系列活动，如心理班会，心理测评、心理咨询等，但总归趣味性较低，学生参与感较少，积极度不高，即效果较差。让每一个人都重视心理健康教育是一条漫长的道路，需要坚持，不过我们仍然可以通过发现+解决的途径来加强心理健康教育，但由此又引入了痛点2和痛点3两个新的问题。</text>
+		<uni-title type="h2" title="3. 发现难"></uni-title>
+    <text>&nbsp;&nbsp;&nbsp;&nbsp;如何发现心理健康问题。学生在填写相关心理调查问卷等时，填写时可能具有片面性和欺骗性。片面性是指由于学生本身缺少相关的心理专业知识，一些心理有问题的学生对于自身的真实情况了解程度也不高，误认为自己心理并没有任何问题；欺骗性本质上也是学生并不重视这方面的调查，认为填写它并不能帮助自己，或者以为自身最近出现的问题是暂时的，并且担心其他人知道自己“有病”，所以填写的结果也就敷衍了事，往好的方向填写。最终调查结果虽然令人满意，但学生的真实问题并没有被发现。</text>
+		<uni-title type="h2" title="4. 解决难"></uni-title>
+    <text>&nbsp;&nbsp;&nbsp;&nbsp;解决心理健康问题。优质心理健康咨询资源不足，部分落后地区甚至根本无法享受到对应的心理健康咨询资源。心理咨询师通常需要较强的专业能力，丰富的阅历与人生经验，厚积而薄发，培养一个优秀的（能解决问题的）心理咨询师成本较高，即优秀的心理咨询师资源缺乏；并且在心理咨询过程中，可能会出现线下尴尬的情况，过度暴露隐私的情况。目前对于已经发现存在心理问题的学生，大多数是沟通能力并不突出，甚至并不愿意沟通交流，所以在对其进行心理辅导时，难以了解真实情况从而对症下药，整个心理辅导过程难以开展。</text>
+	</view>
+</template>
+<script setup lang="ts"></script>
+<style lang="scss" scoped>
+.help-service-container {
+	padding: 20px;
+  background-color: #FFFFFF;
+}
+text {
+	font-size: 14px;
+	line-height: 22px;
+	color: #333;
+}
+</style>

src/pages/me/index.vue

@@ -86,25 +86,25 @@
 			</view>
 			<view class="service-ul">
 				<view class="service-li">
-					<view class="service-icon">
+					<view class="service-icon" @click="supportService">
 						<uni-icons type="hand-up" size="35" color="#030a27"></uni-icons>
 					</view>
 					<view class="service-title">支持我们</view>
 				</view>
 				<view class="service-li">
-					<view class="service-icon">
+					<view class="service-icon" @click="codeService">
 						<uni-icons type="flag" size="35" color="#030a27"></uni-icons>
 					</view>
 					<view class="service-title">代码开源</view>
 				</view>
 				<view class="service-li">
-					<view class="service-icon">
+					<view class="service-icon" @click="aboutService">
 						<uni-icons type="info" size="35" color="#030a27"></uni-icons>
 					</view>
 					<view class="service-title">关于笑友</view>
 				</view>
 				<view class="service-li">
-					<view class="service-icon">
+					<view class="service-icon" @click="moreService">
 						<uni-icons type="more" size="35" color="#030a27"></uni-icons>
 					</view>
 					<view class="service-title">更多</view>
@@ -135,7 +135,7 @@ import oneRowCard from "@/components/oneRowCard.vue";
 import { getToken } from "@/utils/auth";
 import { userDefaultData } from "@/const";
 import { onShow, onInit, onLoad, onReady, onShareAppMessage } from "@dcloudio/uni-app";
-import { logoUrl, feedbackUrl } from "@/const";
+import { logoUrl, feedbackUrl, sourceCodeUrl } from "@/const";
 import { useMutation } from "villus";
 import { meGQL } from "@/graphql/me.graphql";
 
@@ -260,6 +260,35 @@ function customerChatService() {
 		url: "/pages/me/customerChatService",
 	});
 }
+
+function supportService() {
+	uni.navigateTo({
+		url: "/pages/me/supportService",
+	});
+}
+
+function codeService() {
+	uni.setClipboardData({
+		data: sourceCodeUrl,
+		success: function () {
+			infoPopup.value.open();
+		},
+	});
+}
+
+function aboutService() {
+	uni.navigateTo({
+		url: "/pages/me/aboutService",
+	});
+}
+
+function moreService() {
+	uni.showToast({
+		title: "敬请期待",
+		icon: "none",
+		duration: 2000,
+	});
+}
 </script>
 
 <style lang="scss" scoped>

src/pages/me/supportService.vue

@@ -0,0 +1,21 @@
+<template>
+  <view class="support-service-container">
+    <image :src="wxMoney" mode="widthFix"></image>
+    <view class="info">请作者喝杯☕~</view>
+  </view>
+</template>
+<script setup lang="ts">
+import { wxMoney } from '@/const';
+</script>
+<style lang="scss" scoped>
+.support-service-container {
+  image {
+    width: 100vw;
+  }
+  .info {
+    margin-top: 20px;
+    text-align: center;
+    color: $theme-color-gray;
+  }
+}
+</style>

src/pages/questionnaire/index.vue

@@ -59,7 +59,7 @@ const tabs = ["已填", "未填"];
 const questionnaires: Ref<QuestionnaireI[]> = ref([]);
 
 const completed: Ref<QuestionnaireI[]> = ref([]);
-const noCompleted: Ref<QuestionnaireI[]> = ref([])
+const noCompleted: Ref<QuestionnaireI[]> = ref([]);
 // 总的减去已完成的就是未完成的
 watchEffect(() => {
 	const idSet = new Set();
@@ -72,8 +72,8 @@ watchEffect(() => {
 			res.push(item);
 		}
 	});
-	noCompleted.value = res
-})
+	noCompleted.value = res;
+});
 
 const { execute: exeMe } = useQuery({ query: meGQL, paused: () => true });
 const { execute: exeFindAllQ } = useQuery({ query: findAllQGQL, paused: () => true });