管理员页面新增i查看调查问卷信息

.env.dev

@@ -6,6 +6,6 @@ NODE_ENV = 'development'
 VUE_APP_BASE_URL = 'https://develop.api.aida.com.hk'
 VUE_APP_BASE_URL = 'https://api.aida.com.hk'
 # 佩佩
-# VUE_APP_BASE_URL = 'http://192.168.1.7:5567'
+VUE_APP_BASE_URL = 'http://192.168.1.7:5567'
 # 海波
 # VUE_APP_BASE_URL = 'http://192.168.1.9:5567'

src/assets/style/style.css

@@ -480,6 +480,22 @@ li {
   width: 0.8rem;
   height: 0.8rem;
 }
+.trial_page .ant-tooltip {
+  z-index: 1049 !important;
+}
+.trial_page .habit :deep(.ant-tooltip .ant-tooltip-inner),
+.trial_page :deep(.ant-tooltip-arrow-content) {
+  background: #000 !important;
+}
+.trial_page .habit_mod {
+  background-color: #000 !important;
+  /* top: 0 !important; */
+  /* left: 0 !important; */
+}
+.trial_page .ant-tooltip .ant-tooltip-inner,
+.trial_page .ant-tooltip-arrow-content {
+  background: #000 !important;
+}
 .trial_page .ant-cascader-checkbox-checked .ant-cascader-checkbox-inner {
   background-color: #767676;
   border-color: #d9d9d9 !important;
@@ -1163,6 +1179,19 @@ li {
   border: none;
   background: transparent;
 }
+.admin_page .admin_table_content .operate_list {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 1rem;
+}
+.admin_page .admin_table_content .operate_list .operate_item {
+  font-size: 1.4rem;
+  font-family: Roboto;
+  font-weight: 400;
+  color: #343579;
+  cursor: pointer;
+}
 .admin_page .admin_table_content .ant-table-tbody > tr:hover > td {
   background: #ffffff3a;
 }
@@ -1174,6 +1203,7 @@ li {
   align-items: center;
   justify-content: space-between;
   padding: 0 1rem;
+  justify-content: center;
 }
 .admin_page .admin_table_content .operate_list .operate_item {
   font-size: 1.4rem;
@@ -1204,6 +1234,29 @@ li {
   border: solid 2px rgba(0, 0, 0, 0.55);
   color: #000000;
 }
+.homeMain_heade .ant-badge {
+  width: auto;
+  height: auto;
+}
+.homeMain_heade sup.ant-scroll-number {
+  height: 2rem;
+  min-height: 2rem;
+  width: 2rem;
+  min-width: 2rem;
+  padding: 0;
+}
+.homeMain_heade sup.ant-scroll-number .ant-scroll-number-only {
+  width: 100%;
+  height: 100%;
+  font-size: 1.2rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.homeMain_heade p.ant-scroll-number-only-unit {
+  line-height: 2rem;
+  height: 100%;
+}
 .modal_title_text {
   font-size: var(--aida-fsize2);
   font-weight: 900;
@@ -1216,6 +1269,13 @@ li {
   font-weight: 400;
   color: rgba(0, 0, 0, 0.45);
 }
+.modal_title_text .modal_title_text_intro a {
+  color: #000;
+  font-weight: 900;
+}
+.modal_title_text .modal_title_text_intro a:hover {
+  text-decoration: underline;
+}
 .modal_title_text .modal_title_text_assistant {
   font-size: var(--aida-fsize1-6);
   font-weight: 400;

src/component/Administrator/questionnaire.vue

@@ -0,0 +1,197 @@
+<template>
+    <div class="admin_page">
+        <div class="admin_table_search">
+			<div class="admin_state">
+				<div class="admin_state_item">
+				</div>
+			</div>
+		</div>
+        <div class="admin_table_content" ref="questionnaireTable">
+			<a-table
+				:columns="columns"
+				:data-source="dataList"
+				:scroll="{ y: historyTableHeight}"
+				@change="changePage"
+				@resizeColumn="handleResizeColumn"
+				:pagination="{
+					showSizeChanger: true,
+					current: currentPage,
+					pageSize: pageSize,
+					total: total,
+					showQuickJumper: true,
+					bordered: false,
+				}"
+			>
+				<template
+					#bodyCell="{ column, text, record, index }"
+				>
+					<div v-if="column?.Operations">
+						<div class="operate_list" v-if="column?.Operations">
+							<div class="operate_item" @click="setDetail(record)">Details</div>
+						</div>
+					</div>
+				</template>
+			</a-table>
+        </div>
+		<a-modal 
+			class="generalModelOperate"
+            v-model:visible="isFeedbackShow" 
+            :footer="null" 
+            width="55%"
+            :maskClosable="false"
+            :centered="true"
+			:keyboard="false"
+			:closable="false"
+			:mask="false"
+        >
+			<div class="generalModelOperate_closeIcon" @click.stop="closeModal()">
+				<i class="fi fi-rr-cross-small"></i>
+			</div>
+			<feedbackSurveyVue ref="feedbackSurveyVue"></feedbackSurveyVue>
+		</a-modal>
+    </div>
+</template>
+<script lang="ts">
+import { defineComponent, ref, createVNode,toRefs, computed,reactive, onMounted, nextTick } from "vue";
+import { Https } from "@/tool/https";
+
+import type { TableColumnsType } from 'ant-design-vue';
+import feedbackSurveyVue from "@/views/feedbackSurvey.vue";
+
+export default defineComponent({
+    components: {feedbackSurveyVue},
+    setup() {
+		const columns: any = ref([
+                {
+                    title: 'User Name',
+                    align: "center",
+                    ellipsis: true,
+                    width: 50,
+                    dataIndex: "userName",
+                    key: "userName",
+                },
+				{
+                    title: 'Age',
+                    align: "center",
+                    width: 50,
+                    dataIndex: "age",
+                    key: "age",
+                },
+				{
+                    title: 'Country',
+                    align: "center",
+                    ellipsis: true,
+                    width: 50,
+                    dataIndex: "country",
+                    key: "country",
+                },
+				{
+                    title: 'Email',
+                    align: "center",
+                    ellipsis: true,
+                    width: 50,
+					
+                    dataIndex: "email",
+                    key: "email",
+                },
+                {
+                    title: 'Is Subscribe',
+                    align: "center",
+                    width: 50,
+					
+                    dataIndex: "isSubscribe",
+                    key: "isSubscribe",
+                },
+				{
+                    title: 'Occupation',
+                    align: "center",
+                    ellipsis: true,
+                    width: 50,
+					// 
+                    dataIndex: "occupation",
+                    key: "occupation",
+                },{
+					title: 'Operations',
+					key: 'operation',
+					align:'center', 
+					fixed: 'right',
+					width: 50, 
+					// slots:{customRender:'action'}
+					Operations:true,
+				},
+            ]
+        );
+        let dataList: any = ref([]);
+		let tabelData = reactive({
+			currentPage: 1,
+            pageSize: 10,
+            total: 0,
+            historyTableHeight: 0,
+			isFeedbackShow:false,
+		})
+		let getQuestionnaireList =async  ()=>{
+			return new Promise((resolve, reject) => {
+				Https.axiosGet(Https.httpUrls.getAllQuestionnaire).then((res:any)=>{
+					if(res){
+						dataList.value = res
+						console.log(dataList);
+						// console.log(allEchartsList.value);
+						
+						resolve('')
+					}
+				})
+			})
+		}
+		let questionnaireTable:any = ref()
+		let feedbackSurveyVue = ref()
+		let changePage = (e:any)=>{
+			tabelData.currentPage = e.current;
+            tabelData.pageSize = e.pageSize;
+		}
+		let setDetail = (data:any)=>{
+			tabelData.isFeedbackShow = true
+			nextTick().then(()=>{
+				feedbackSurveyVue.value.initData(data)
+			})
+		}
+		let closeModal = ()=>{
+			tabelData.isFeedbackShow = false
+		}
+        onMounted(async () => {
+			await getQuestionnaireList()
+			tabelData.historyTableHeight = questionnaireTable.value.clientHeight - 200;
+        });
+        return {
+			columns,
+			dataList,
+			...toRefs(tabelData),
+			handleResizeColumn: (w:any, col:any) => {
+				col.width = w;
+			},
+			questionnaireTable,
+			feedbackSurveyVue,
+			changePage,
+			setDetail,
+			closeModal,
+		};
+    },
+    data() {
+        return {
+		};
+    },
+    mounted() {
+		
+	},
+    methods: {},
+});
+</script>
+<style lang="less">
+.generalModelOperate{
+	// .ant-modal-body{
+	// 	height: calc(65rem*1.2);
+	// 	display: flex;
+	// 	overflow-y: auto;
+	// 	flex-direction: column;
+	// }
+}
+</style>

src/router/index.ts

@@ -2,18 +2,17 @@ import { createRouter, createWebHistory, RouteRecordRaw, createWebHashHistory }
 import { defineAsyncComponent } from 'vue'
 import store from "@/store"
 import { getCookie, setCookie } from "@/tool/cookie";
-const _import = (path: string) => defineAsyncComponent(() => import(`../views/${path}.vue`));
+const _import = (path: string) => () => import(`../views/${path}.vue`);
-const _import_component = (path : string) => defineAsyncComponent(() => import(`../component/${path}`));
+const _import_component = (path : string) => () => import(`../component/${path}`);
-const _import_custom = (path : string) => defineAsyncComponent(() => import(`../views/${path}`));
+const _import_custom = (path : string) => () => import(`../views/${path}`);
-
+// defineAsyncComponent(import(`../views/${path}.vue`))
 const routes: Array<RouteRecordRaw> = [
 	{
 		path: "/",
 		// redirect重定向
-		// redirect: "/login"
+		redirect: "/Square"
 		// redirect: "/upgrade"
-		name: "HomeRecommend",
+		
-		component: _import('HomeRecommend'),
 	},
 	{
 		path: '/login',
@@ -39,18 +38,16 @@ const routes: Array<RouteRecordRaw> = [
 		path: '/home',
 		name: 'home',
 		component: _import('HomeMain'),
-		meta:{keepAlive:true},
 		children:[
 			{
 				path: "",
-				name:'""',
+				name:'HomeChil',
-				redirect: "home/homePage"
+				redirect: "/home/homePage"
 			},
 			{
 				path:'homePage',
 				name:'homePage',
 				component: _import_custom('HomeView/HomeView.vue'),
-					meta:{keepAlive:true},
 				},{
 				path:'library',
 				name:'library',
@@ -63,7 +60,41 @@ const routes: Array<RouteRecordRaw> = [
 				path:'works',
 				name:'works',
 				component: _import_custom('HomeView/Works.vue'),
+			},{
+				path:'events',
+				name:'events',
+				component: _import_custom('HomeView/Events.vue'),
+			},{
+				path:'eventsDetail',
+				name:'eventsDetail',
+				component: _import_component('Events/eventsDetail.vue'),
+			}
+		]
+	},
+	{
+		path: '/Square',
+		name: "HomeRecommend",
+		component: _import('HomeRecommend'),
+		children:[
+			{
+				path: "",
+				name:'SquareChil',
+				redirect: "/Square/works"
 			},
+			{
+				path:'works',
+				name:'SquareWorks',
+				component: _import_custom('HomeView/Works.vue'),
+			},{
+				path:'events',
+				name:'SquareEvents',
+				component: _import_custom('HomeView/Events.vue'),
+				
+			},{
+				path:'eventsDetail',
+				name:'SquareEventsDetail',
+				component: _import_component('Events/eventsDetail.vue'),
+			}
 		]
 	},
 	{
@@ -86,6 +117,11 @@ const routes: Array<RouteRecordRaw> = [
 		name: 'administrator',
 		component: _import('Administrator'),
 		children:[
+			{
+				path: "",
+				name:'adminChil',
+				redirect: "/administrator/allUser"
+			},
 			{
 				path:'allUser',
 				name:'allUser',
@@ -100,6 +136,10 @@ const routes: Array<RouteRecordRaw> = [
 				path:'trialApproval',
 				name:'trialApproval',
 				component: _import_component('Administrator/trialApproval.vue'),
+			},{
+				path:'questionnaire',
+				name:'questionnaire',
+				component: _import_component('Administrator/questionnaire.vue'),
 			},
 		]
 	},
@@ -183,7 +223,9 @@ router.beforeEach((to, from, next) => {
 	let isMurmur = JSON.parse(getIsMurmur)
     let routeList = ['/testClickData','/trialApproval']//指定页面需要指定id才能进入
     let userIdList = [88,6,46,31,73,83,87,4]
-    let isSystemUserRouteList = ['/login','/']//指定页面
+    let isSystemUserRouteList = ['/login','/Square']//游客用户只能进入这两个页面
+    let upgradeList = ['/feedbackSurvey','/feedbackSurveyCN']//指定页面系统维护也可以访问
+
 
 	let systemUser = state.UserHabit.systemUser
 	const routeExists = router.getRoutes().some(({ name }) =>{
@@ -193,25 +235,35 @@ router.beforeEach((to, from, next) => {
 			return false
 		}
 	});
-	if(systemUser.value == 0){
+	if(upgradeList.indexOf(to.path) > -1){//指定页面任何用户都可以进入
-		if(isSystemUserRouteList.indexOf(to.path) > -1){
+		next();
+		return
+	}
+	if(systemUser.value == 0){//游客用户只能进入这两个页面
+		let sSystemUser = false
+		for (let index = 0; index < isSystemUserRouteList.length; index++) {
+			if(to.path.indexOf(isSystemUserRouteList[index]) > -1){
+				sSystemUser = true
+				break
+			}
+		}
+		if(sSystemUser){
 			next();
 		}else{
-			next('/');
+			next('/Square');
 		}
 		return
 	}
-	if (routeExists) {
+	if (routeExists) {//检测档期那页面是否存在
 		if (isMurmur && murmurStr && token) {
 			const toName = to.name === 'login';
 			if (toName) {
-				next({ name: '/homePage' });
+				next({ name: '/home' });//机房用户
 			} else {
 				next();
 			}
 		} else {
-			if (routeList.indexOf(to.path) > -1 ) {
+			if (routeList.indexOf(to.path) > -1 ) {//指定也买你必须指定用户可以进入
-				
 				if(userIdList.indexOf(userInfo.userId) > -1){
 					next();
 				}else{

src/tool/https.js

@@ -90,7 +90,17 @@ axios.interceptors.response.use((res) =>{
     if(error?.response?.status === 401 && router.currentRoute._value.name != 'setIdentification'){//如果是记录浏览器页面就不跳转login
 		if(!isLoginTime){
 			isLoginTime = true
-			router.replace('/')
+			let isSystemUserRouteList = ['/Square']//如果是这两个页面就无需跳转未登录页
+			let sSystemUser = false
+			for (let index = 0; index < isSystemUserRouteList.length; index++) {
+				if(router.currentRoute.value.path.indexOf(isSystemUserRouteList[index]) > -1){
+					sSystemUser = true
+					break
+				}
+			}
+			if(!sSystemUser){
+				router.replace('/')
+			}
 			message.warning('Please login and try again~')
 			clonAllCookie()
 			store.commit('clearSystemUser')
@@ -223,10 +233,13 @@ export const Https = {
 		trialOrderApproval:`/api/account/trialOrderApproval`,//通过审批
 		trialOrderRefuse:`/api/account/trialOrderRefuse`,//拒绝审批
 		
+		//管理员接口
 		//查询所有试用用户
 		inquiryGetTrial:`/api/inquiry/getTrial`,//拒绝审批
 		//查询某个时间内design点击次数
 		getDesignStatistic:`/api/inquiry/getDesignStatistic`,//拒绝审批
+		getAllQuestionnaire:`/api/inquiry/getAllQuestionnaire`,//拒绝审批
+
 
 		getTasksList:`/api/tasks/getList`,//获取w为执行完的所有任务
 		getTasksHistory:`/api/tasks/getAllTask`,//获取所有任务列表
@@ -262,6 +275,8 @@ export const Https = {
 		exportSave:`/api/history/exportSave`,//保存画布
 		exportSearch:`/api/history/exportSearch`,//保存画布
 
+		//活动
+		activity:`/api/account/activity`,
 
 
 		//调查问卷

src/views/Administrator.vue

@@ -1,6 +1,12 @@
 <template>
 	<div class="administrator_page">
 		<div class="administrator_page_left">
+			<div class="administrator_title ">
+				<div class="modal_title_text" @click="setBack">
+					<i class="fi fi-sr-left"></i>
+					<div class="modal_title_intro administrator_title_text">Back</div>
+				</div>
+			</div>
 			<div class="modal_title_text">Administrator</div>
             <a-menu
                 id="dddddd"
@@ -14,7 +20,9 @@
 
                 <div v-for="(menu) in rootSubmenuKeys" :key="menu.key" >
                     <a-menu-item :key="menu.key" :name="menu.name" :route="menu.route" v-if="!menu.children">
-                        <template #icon><span :class="['icon','iconfont', 'menu_icon', menu.icon]"></span></template>
+                        <template #icon>
+							<span :class="['icon','iconfont', 'menu_icon', menu.icon]"></span>
+						</template>
                         <span class="menu_title">{{menu.name}}</span>
                     </a-menu-item>
                     <a-sub-menu :key="menu.key" v-else> 
@@ -47,7 +55,11 @@
                 </div>
             </div>
 			<div class="administrator_page_right_content">
-				<router-view/>
+				<router-view v-slot="{ Component }">
+					<keep-alive>
+						<component :is="Component" />
+					</keep-alive>
+				</router-view>
 			</div>
 		</div>
 	</div>	
@@ -78,13 +90,13 @@ export default defineComponent({
     setup() {
 		const router = useRouter()
         const route:any = useRoute()
-		const state = reactive({
+		const state:any = reactive({
 		rootSubmenuKeys: [{
 			name:'Trial User',
 			route:'/administrator/allUser',
 			icon:'yonghu',
 			expandIcon:'icon-xiala',
-			key:'/administrator/allUser',
+			key:'sub1',
 			isShow:true,
 			// children: [
 			//         {
@@ -108,18 +120,41 @@ export default defineComponent({
 			route:'/administrator/testClickData',
 			icon:'shenpi',
 			expandIcon:'icon-xiala',
-			key:'/administrator/testClickData',
+			key:'sub2',
 			isShow:true,
 		},{
 			name:'Trial User Approval',
 			route:'/administrator/trialApproval',
 			icon:'usetime',
-			key:'/administrator/trialApproval',
+			key:'sub3',
 			expandIcon:'icon-xiala',
 			isShow:true,
+		},{
+			name:'Events',
+			icon:'usetime',
+			key:'sub4',
+			expandIcon:'icon-xiala',
+			isShow:true,
+			children: [
+				{
+					name:'Questionnaire Survey',
+					route:'/administrator/questionnaire',
+					icon:'',
+					key:'sub4-1',
+					isShow:true,
+				},
+				// {
+				// 	code:'ROLE_MANAGER',
+				// 	name:'Access Permission',
+				// 	route:'/home/excil2',
+				// 	icon:'',
+				// 	key:'/home/excil33',
+				// 	isShow:true,
+				// },
+			],
 		}],
-		openKeys: ['sub1'],
+		openKeys: [],
-		selectedKeys: [],
+		selectedKeys: ['sub1'],
 		nowPageName:'Trial User',//当前页面名称
 		});
 		let routers:any = ref([])
@@ -134,11 +169,13 @@ export default defineComponent({
 		}
 		};
 		let handleClick = (event:any) => {
-
             // state.selectedKeys = [Number(event.key)]
             state.nowPageName = event.item.name
             router.push({path:event.item.route})
         }
+		let setBack = ()=>{
+			router.push('/home');
+		} 
 		onMounted(() => {
             let cookieInfo = getCookie('userInfo') || ''
             if(cookieInfo){
@@ -149,8 +186,22 @@ export default defineComponent({
                 // getTitle(menuList.value, route.path)
             }else{
             }
-			state.nowPageName = state.rootSubmenuKeys[0].name
+			
-			router.push(state.rootSubmenuKeys[0].route)
+			state.rootSubmenuKeys.forEach((item:any) => {
+				if(item.children){
+					item.children.forEach((item:any) => {
+						if(item.route == router.currentRoute.value.path){
+							state.selectedKeys[0] = item.key
+						}
+					});
+				}else{
+					if(item.route == router.currentRoute.value.path){
+						state.selectedKeys[0] = item.key
+					}
+				}
+			});
+			// state.nowPageName = state.rootSubmenuKeys[0].name
+			// router.push(state.rootSubmenuKeys[0].route)
             
         })
 		return {
@@ -158,6 +209,7 @@ export default defineComponent({
 			onOpenChange,
 			routers,
 			handleClick,
+			setBack,
 		};
     },
     data(prop) {
@@ -190,7 +242,31 @@ export default defineComponent({
     height: 100%;
     display: flex;
     background: rgba(243,244,248,0.4);
-	
+	.administrator_title{
+		display: flex;
+		align-items: center;
+		position: sticky;
+		top: 0;
+		z-index: 222;
+		.modal_title_text{
+			cursor: pointer;
+			display: flex;
+			margin-bottom: 0;
+			font-size: 1.8rem;
+		}
+		.administrator_title_text{
+			line-height: 1;
+		}
+		.modal_title_text:hover .administrator_title_text{
+			text-decoration: underline;
+		}
+		i{
+			font-size: 1.2rem;
+			display: flex;
+			align-items: center;
+			margin-right: 1rem;
+		}
+	}
 	.administrator_page_left{
 		padding-top: 20px;
 		.modal_title_text{
@@ -231,6 +307,7 @@ export default defineComponent({
             }
             .ant-menu-inline.ant-menu-sub{
                 background: #FFFFFF;
+				padding-left: 4rem;
             }
             
             .menu_title{

src/views/feedbackSurvey.vue

@@ -1,15 +1,16 @@
 <template>
-    <div class="feedbackSurvey">
+    <div class="feedbackSurvey" :class="{'active': forbid}">
         <main id="main">
             <h1 id="title">AiDA 3.0 Feedback Survey</h1>
-            <p id="description">Please take the survey</p>
+            <p id="description" v-if="!forbid">Please take the survey</p>
-            <div id="survey-form">
+            <div id="survey-form" :class="{'active': !forbid}">
                 <h2 class="section-title">Personal Information</h2>
                 <div class="section w40">
                     <label for="name"
                         >Name:<span class="fontColor">*</span></label
                     >
                     <input
+						:readonly="forbid"
                         type="text"
 						v-model="userName"
                         placeholder="Enter your name"
@@ -19,7 +20,7 @@
                     <label for="gender"
                         >Gender:<span class="fontColor">*</span></label
                     >
-					<select name="dropdown" id="dropdown" v-model="gender">
+					<select :disabled="forbid" name="dropdown" id="dropdown" v-model="gender">
                         <option selected value='Female'>Female</option>
                         <option value='Male'>Male</option>
                     </select>
@@ -37,6 +38,7 @@
 					
                     <input
                         type="text"
+						:readonly="forbid"
 						v-model="occupation"
                         placeholder="Enter your occupation"
                         required
@@ -57,7 +59,7 @@
                 </div> -->
 				<div class="section w40">
                     <label for="dropdown">Country of Origin:<span class="fontColor" >*</span></label>
-                    <select name="dropdown" id="dropdown" v-model="country" required>
+                    <select :disabled="forbid" name="dropdown" id="dropdown" v-model="country" required>
                         <option disabled selected value> Select an option </option>
 						<option v-for="item in CountryList" :key="item" :value="item">{{ item }}</option>
                     </select>
@@ -68,6 +70,7 @@
                     >
                     <input
                         type="email"
+						:readonly="forbid"
 						v-model="email"
                         placeholder="Enter your email"
                         required
@@ -77,6 +80,7 @@
                     <p>Age Group:<span class="fontColor">*</span></p>
                     <label>
                         <input
+							:disabled="forbid"
                             type="radio"
                             value="below20"
                             name="age"
@@ -86,15 +90,15 @@
                         Below 20
                     </label>
                     <label>
-                        <input checked type="radio" value="20-30" v-model="age" name="age" />
+                        <input :disabled="forbid" checked type="radio" value="20-30" v-model="age" name="age" />
                         20-30
                     </label>
                     <label>
-                        <input type="radio" value="30-40" v-model="age" name="age" />
+                        <input :disabled="forbid" type="radio" value="30-40" v-model="age" name="age" />
                         30-40
                     </label>
                     <label>
-                        <input type="radio" value="40+" v-model="age" name="age" />
+                        <input :disabled="forbid" type="radio" value="40+" v-model="age" name="age" />
                         40+
                     </label>
                 </div>
@@ -131,6 +135,7 @@
                     </p>
                     <label>
                         <input
+							:disabled="forbid"
                             type="checkbox"
                             name="checkbox-question"
                             value="1"
@@ -140,6 +145,7 @@
                     </label>
                     <label>
                         <input
+							:disabled="forbid"
                             type="checkbox"
                             name="checkbox-question"
                             value="2"
@@ -149,6 +155,7 @@
                     </label>
                     <label>
                         <input
+							:disabled="forbid"
                             type="checkbox"
                             name="checkbox-question"
                             value="3"
@@ -158,6 +165,7 @@
                     </label>
                     <label>
                         <input
+							:disabled="forbid"
                             type="checkbox"
                             name="checkbox-question"
                             value="4"
@@ -167,6 +175,7 @@
                     </label>
                     <label>
                         <input
+							:disabled="forbid"
                             type="checkbox"
                             name="checkbox-question"
                             value="5"
@@ -176,6 +185,7 @@
                     </label>
                     <label>
                         <input
+							:disabled="forbid"
                             type="checkbox"
                             name="checkbox-question"
                             value="6"
@@ -185,6 +195,7 @@
                     </label>
                     <label>
                         <input
+							:disabled="forbid"
                             type="checkbox"
                             name="checkbox-question"
                             value="7"
@@ -194,6 +205,7 @@
                     </label>
                     <label>
                         <input
+							:disabled="forbid"
                             type="checkbox"
                             name="checkbox-question"
                             value="8"
@@ -203,6 +215,7 @@
                     </label>
                     <label>
                         <input
+							:disabled="forbid"
                             type="checkbox"
                             name="checkbox-question"
                             value="9"
@@ -212,6 +225,7 @@
                     </label>
                     <label>
                         <input
+							:disabled="forbid"
                             type="checkbox"
                             name="checkbox-question"
                             value="10"
@@ -221,6 +235,7 @@
                     </label>
                     <label>
                         <input
+							:disabled="forbid"
                             type="checkbox"
                             name="checkbox-question"
                             value="11"
@@ -230,6 +245,7 @@
                     </label>
                     <label>
                         <input
+							:disabled="forbid"
                             type="checkbox"
                             name="checkbox-question"
                             class="marTop1"
@@ -237,6 +253,7 @@
                         />
                         <span> Others:</span>
                         <textarea
+							:readonly="forbid"
                             name="comments"
                             id="text-area"
                             placeholder="Please enter..."
@@ -252,6 +269,7 @@
                     </p>
                     <label>
                         <input
+							:disabled="forbid"
                             type="checkbox"
                             name="checkbox-question"
                             value="1"
@@ -262,6 +280,7 @@
                     </label>
                     <label>
                         <input
+							:disabled="forbid"
                             type="checkbox"
                             name="checkbox-question"
                             value="2"
@@ -271,6 +290,7 @@
                     </label>
                     <label>
                         <input
+							:disabled="forbid"
                             type="checkbox"
                             name="checkbox-question"
                             value="3"
@@ -280,6 +300,7 @@
                     </label>
                     <label>
                         <input
+							:disabled="forbid"
                             type="checkbox"
                             name="checkbox-question"
                             value="4"
@@ -289,6 +310,7 @@
                     </label>
                     <label>
                         <input
+							:disabled="forbid"
                             type="checkbox"
                             name="checkbox-question"
                             value="5"
@@ -298,6 +320,7 @@
                     </label>
                     <label>
                         <input
+							:disabled="forbid"
                             type="checkbox"
                             name="checkbox-question"
                             value="6"
@@ -307,6 +330,7 @@
                     </label>
                     <label>
                         <input
+							:disabled="forbid"
                             type="checkbox"
                             name="checkbox-question"
                             value="7"
@@ -316,6 +340,7 @@
                     </label>
                     <label>
                         <input
+							:disabled="forbid"
                             type="checkbox"
                             name="checkbox-question"
                             value="8"
@@ -325,6 +350,7 @@
                     </label>
                     <label>
                         <input
+							:disabled="forbid"
                             type="checkbox"
                             name="checkbox-question"
                             value="9"
@@ -334,6 +360,7 @@
                     </label>
                     <label>
                         <input
+							:disabled="forbid"
                             type="checkbox"
                             name="checkbox-question"
                             value="10"
@@ -343,6 +370,7 @@
                     </label>
                     <label>
                         <input
+							:disabled="forbid"
                             type="checkbox"
                             name="checkbox-question"
                             class="marTop1"
@@ -354,6 +382,7 @@
 							type="text"
 						/> -->
                         <textarea
+							:readonly="forbid"
                             name="comments"
                             id="text-area"
 							v-model="othersImprovel"
@@ -366,6 +395,7 @@
                     <p>3. Will you subscribe to AiDA 3.0?<span class="fontColor">*</span></p>
                     <label>
                         <input
+							:disabled="forbid"
                             type="radio"
                             value="yes"
 							v-model="isSubscribe"
@@ -374,7 +404,7 @@
                         Yes
                     </label>
                     <label>
-                        <input v-model="isSubscribe" type="radio" value="no" name="radio-question" />
+                        <input :disabled="forbid" v-model="isSubscribe" type="radio" value="no" name="radio-question" />
                         No
                     </label>
                 </div>
@@ -382,6 +412,7 @@
                     <p>If NO, please share why:<span class="fontColor">*</span></p>
                     <label>
                         <input
+							:disabled="forbid"
                             type="checkbox"
 							value="Not useful"
                             name="reasonForNotSubscribe"
@@ -390,11 +421,12 @@
                         Not useful
                     </label>
                     <label>
-                        <input type="checkbox" value="Too expensive" v-model="reasonForNotSubscribe" name="reasonForNotSubscribe" />
+                        <input :disabled="forbid" type="checkbox" value="Too expensive" v-model="reasonForNotSubscribe" name="reasonForNotSubscribe" />
                         Too expensive
                     </label>
                     <label>
                         <input
+							:disabled="forbid"
                             type="checkbox"
                             name="reasonForNotSubscribe"
 							ref="isSubscribeCauseOthers"
@@ -402,6 +434,7 @@
                         />
                         <span> Others:</span>
                         <textarea
+							:readonly="forbid"
                             name="comments"
                             id="text-area"
 							v-model="othersIsSubscribeCause"
@@ -416,13 +449,14 @@
                         list:
                     </p>
                     <textarea
+						:readonly="forbid"
                         name="comments"
                         id="text-area"
 						v-model="designTools"
                         placeholder="Please enter..."
                     ></textarea>
                 </div>
-                <div class="section">
+                <div v-if="!forbid" class="section">
                     <button id="submit" @click="setSubmit">Submit</button>
                 </div>
             </div>
@@ -437,7 +471,7 @@ import { Https } from "@/tool/https";
 import { defineComponent, toRefs,ref, reactive, createVNode } from "vue";
 export default defineComponent({
     setup() {
-        const feedbackData:any = reactive({
+        let feedbackData:any = reactive({
 			userName:'',
 			gender:'Female',
 			occupation:'',
@@ -684,7 +718,42 @@ export default defineComponent({
 			).catch(res=>{
 			});
 		}
-	
+		let forbid = ref(false)
+		let initData = (data:any) => {
+			// Object.assign(feedbackData,data)
+			// console.log(JSON.parse(JSON.stringify(feedbackData)));
+			forbid.value =  true
+			for (const iterator in data) {
+				if(typeof data[iterator] == 'object'){
+					data[iterator].forEach((item:any)=>{
+						if(item*1){
+							feedbackData[iterator].push(item)
+						}else{
+							if(iterator == 'helpful'){
+								refList.helpfulOthers.checked = true
+								othersHelpful.value = item
+							}else if(iterator == 'improve'){
+								refList.improvelOthers.checked = true
+								othersImprovel.value = item
+							}
+						}
+					})
+				}else{
+					feedbackData[iterator] = data[iterator]
+				}
+			}
+			if(data.othersIsSubscribeCause){
+				refList.isSubscribeCauseOthers.checked = true
+				let arr = []
+				data.reasonForNotSubscribe.forEach((item:any,index:number) => {
+					if(index <= 1){
+						arr.push(item)
+					}
+				});
+				othersIsSubscribeCause.value = data.othersIsSubscribeCause[2]
+			}
+			// feedbackData = reactive(...data)
+		}
         return {
             ...toRefs(feedbackData),
             ...toRefs(refList),
@@ -693,6 +762,8 @@ export default defineComponent({
 			othersIsSubscribeCause,
 			CountryList,
             setSubmit,
+			forbid,
+			initData,
         };
     },
 
@@ -710,15 +781,49 @@ export default defineComponent({
 @import url("https://fonts.googleapis.com/css2?family=Quicksand:wght@400;700&display=swap");
 .feedbackSurvey {
     font-family: "Quicksand", sans-serif;
+	font-family: 'Roboto', sans-serif;
     text-align: center;
     line-height: 1.5;
     // background: linear-gradient(180deg, #f3f3e6 0%, #eee4f3 100%);
     margin: 1rem;
 	height: 100%;
 	overflow-y: auto;
+	&.active{
+		#title {
+			font-size: 3rem;
+		}
+		#description {
+			font-size: 1.4rem;
+		}
+		#survey-form {
+			width: 90%;
+			padding: 1.5rem;
+			font-size: 1.2rem;
+		}
+		p{
+			font-size: 1.4rem;
+		}
+		input,
+		#dropdown {
+			padding: 5px;
+		}
+
+		textarea {
+			max-height: 125px;
+			padding: 5px;
+		}
+		input[type="radio"],
+		input[type="checkbox"] {
+			width: 1rem;
+			height: 1rem;
+		}
+		input,select{
+			height: 3.5rem;	
+		}
+	}
 	#main{
 		background: linear-gradient(45deg, #eee4f3, #f3f4e6);
-
+		padding: 2rem;
 	}
     #title {
         font-size: 6rem;
@@ -730,7 +835,7 @@ export default defineComponent({
         font-size: 2.8rem;
         font-style: italic;
     }
-
+	
     #survey-form {
         position: relative;
         background: rgba(255, 255, 255, 0.2);
@@ -742,12 +847,14 @@ export default defineComponent({
         padding: 3rem;
         box-shadow: -1px 1px 5px 0.5px;
         font-size: 2.4rem;
-        transition: width 1s ease;
         display: flex;
         flex-wrap: wrap;
 		justify-content: space-between;
+		&.active{
+			transition: width 1s ease;
+		}
     }
-
+	
     @media (max-width: 760px) {
         form {
             width: 75%;
@@ -763,6 +870,9 @@ export default defineComponent({
         margin: 1rem;
         width: 100%;
     }
+	.section:last-child{
+		margin-bottom: 4rem;
+	}
     .w40 {
         width: 40%;
     }

src/views/feedbackSurveyCN.vue

@@ -20,7 +20,7 @@
                         >性别:<span class="fontColor">*</span></label
                     >
 					<select name="dropdown" id="dropdown" v-model="gender">
-                        <option selected value='Female'>女性</option>
+                        <option selected value='Female'>男女性性</option>
                         <option value='Male'>男性</option>
                     </select>
                     <!-- <input
@@ -705,6 +705,7 @@ export default defineComponent({
 @import url("https://fonts.googleapis.com/css2?family=Quicksand:wght@400;700&display=swap");
 .feedbackSurvey {
     font-family: "Quicksand", sans-serif;
+	font-family: 'Roboto', sans-serif;
     text-align: center;
     line-height: 1.5;
     // background: linear-gradient(180deg, #f3f3e6 0%, #eee4f3 100%);