chore: show page 选择框

src/App.vue

@@ -1,26 +1,36 @@
 <script setup lang="ts">
 import { onLaunch, onShow, onHide } from "@dcloudio/uni-app";
 onLaunch(() => {
-  console.log("App Launch");
+	console.log("App Launch");
 });
 onShow(() => {
-  console.log("App Show");
+	console.log("App Show");
 });
 onHide(() => {
-  console.log("App Hide");
+	console.log("App Hide");
 });
 </script>
 <style lang="scss">
-page{
-  background-color: $theme-color-background;
+page {
+	background-color: $theme-color-background;
 }
-
-.uni-collapse-item__title-box{
-  height: 60px !important;
-  line-height: 60px !important;
+// questionnaire/write
+.uni-collapse-item__title-box {
+	height: 60px !important;
+	line-height: 60px !important;
+}
+.uni-collapse-item__title-text {
+	font-size: 18px !important;
+	font-weight: 900;
 }
-.uni-collapse-item__title-text{
+// show/index
+.uni-select {
+	height: 60px !important;
+	line-height: 60px !important;
+
+	.uni-select__input-text {
 		font-size: 18px !important;
-    font-weight: 900;
+		font-weight: 900 !important;
 	}
+}
 </style>

src/graphql/questionnaire.graphql.ts

@@ -6,6 +6,7 @@ export const meGQL = gql`
 			questionnairesAsOwner {
 				questionnaire {
 					id
+					type
 					title
 					description
 				}

src/pages/questionnaire/index.vue

@@ -55,15 +55,7 @@ const meStore = useMeStore();
 const activeTab = ref("已填");
 const tabs = ["已填", "未填"];
 
-const questionnaires: Ref<QuestionnaireI[]> = ref([
-	{ id: "1", title: "这是一份问卷1", description: "这是一份非常不错的问卷".repeat(6) },
-	{ id: "2", title: "这是一份问卷2", description: "这是一份非常不错的问卷".repeat(16) },
-	{ id: "3", title: "这是一份问卷3", description: "这是一份非常不错的问卷".repeat(6) },
-	{ id: "4", title: "这是一份问卷4", description: "这是一份非常不错的问卷".repeat(6) },
-	{ id: "5", title: "这是一份问卷5", description: "这是一份非常不错的问卷".repeat(6) },
-	{ id: "5", title: "这是一份问卷6", description: "这是一份非常不错的问卷".repeat(6) },
-	{ id: "5", title: "这是一份问卷7", description: "这是一份非常不错的问卷".repeat(6) },
-]);
+const questionnaires: Ref<QuestionnaireI[]> = ref([]);
 
 const completed: Ref<QuestionnaireI[]> = ref([]);
 // 总的减去已完成的就是未完成的
@@ -132,7 +124,7 @@ onShareAppMessage((res: any) => {
 		console.log("share target: ", res.target);
 	}
 	const userId = meStore.user?.id;
-	const questionnaireId = res.target.dataset.data
+	const questionnaireId = res.target.dataset.data;
 	return {
 		title: "帮助好友填写问卷",
 		path: `/pages/me/index?questionnaireId=${questionnaireId}&ownerId=${userId}&curScene=1`,

src/pages/questionnaire/questionnaire.interface.ts

@@ -1,5 +1,6 @@
 export interface QuestionnaireI {
 	id: string;
+	type: number;
 	title: string;
 	description: string;
 }

src/pages/show/components/radar.vue

@@ -0,0 +1,10 @@
+<template>
+	雷达图可视化
+</template>
+<script setup lang="ts">
+import { reactive } from "vue";
+
+</script>
+<style lang="scss" scoped>
+
+</style>

src/pages/show/index.vue

@@ -1,41 +1,96 @@
 <template>
-	<view class="content">
-		<image class="logo" src="/static/logo.jpg" />
-		<view class="text-area">
-			<text class="title">{{ title }}</text>
+	<view class="show-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 class="chart-container">
+			<view v-if="showType === -1" class="no-data">
+				<empty info="请先选择问卷"></empty>
+			</view>
+			<radar v-if="showType === 0"></radar>
 		</view>
 	</view>
 </template>
 
 <script setup lang="ts">
-import { ref } from "vue";
-const title = ref("可视化");
-</script>
+import { ref, watch, type Ref } from "vue";
+import radar from "./components/radar.vue";
+import { onShow } from "@dcloudio/uni-app";
+import { useQuery } from "villus";
+import { meGQL } from "@/graphql/questionnaire.graphql";
+import type { QuestionnaireI } from "../questionnaire/questionnaire.interface";
+import type { RangeI } from "./show.interface";
+import empty from "@/components/empty.vue";
+
+const questionnaires: Ref<QuestionnaireI[]> = ref([]);
+
+// FIXME 这里在questionnaires被赋值更新后不执行
+/*
+const range = computed(() => {
+	console.log(questionnaires.value);
+	const arr = questionnaires.value.map((item) => ({
+		value: item.id,
+		text: item.title,
+	}));
+	console.log("show page computed: ", arr);
+	return arr;
+});
+*/
+const range: Ref<RangeI[]> = ref([]);
+
+const curValue = ref();
+const showType = ref(-1);
 
-<style>
-.content {
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-	justify-content: center;
+watch(questionnaires, (newVal) => {
+	range.value = newVal.map((item) => ({
+		value: item.id,
+		text: item.title,
+	}));
+});
+
+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.questionnairesAsOwner.map((item: any) => item.questionnaire) || [];
+});
+
+function chooseQuestionnaire(e: any) {
+	console.log("questionnaires.value: ", questionnaires.value);
+	console.log(
+		"questionnaires.value.find((item) => (item.id == e))",
+		questionnaires.value.find((item) => item.id == e)
+	);
+	console.log("e: ", e);
+
+	showType.value = questionnaires.value.find((item) => item.id == e)?.type ?? -1;
+	console.log("show type: ", showType.value);
 }
+</script>
 
-.logo {
-	height: 200rpx;
-	width: 200rpx;
-	margin-top: 200rpx;
-	margin-left: auto;
-	margin-right: auto;
-	margin-bottom: 50rpx;
+<style lang="scss" scoped>
+.show-container {
+	.no-data {
+		padding-top: 80px;
+	}
 }
 
-.text-area {
-	display: flex;
-	justify-content: center;
+.questionnaire-select {
+	position: fixed;
+	top: -1px;
+	width: 100vw;
 }
 
-.title {
-	font-size: 36rpx;
-	color: #8f8f94;
+.top-placeholder {
+	height: 60px;
+	width: 100vw;
 }
 </style>

src/pages/show/show.interface.ts

@@ -0,0 +1,5 @@
+export interface RangeI {
+  text: string;
+  value: string;
+  disable?: boolean;
+}