调查问卷
This commit is contained in:
X1627315083
@@ -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'],
|
||||
selectedKeys: [],
|
||||
openKeys: [],
|
||||
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{
|
||||
|
||||
@@ -2,12 +2,40 @@
|
||||
<div class="homeMain_max Guide_1_16_1">
|
||||
<header class="homeMain_heade">
|
||||
<div class="homeMain_right_content">
|
||||
<div class="homeMain_user_icon"></div>
|
||||
<div class="homeMain_user">
|
||||
<div class="homeMain_user_icon">
|
||||
|
||||
</div>
|
||||
<div class="homeMain_user_detail">
|
||||
<div v-if="isTest" class="username">{{$t('Header.hello')}}@{{ $t('isTest.userName') }}</div>
|
||||
<div v-else class="username">{{$t('Header.hello')}}@{{ userInfo?.userName }}</div>
|
||||
<div class="homeMain_user_detail_item homeMain_user_detail_attention">
|
||||
<div class="attention_item attention_item_active">
|
||||
<div>123</div>
|
||||
<span>关注</span>
|
||||
</div>
|
||||
<div class="attention_item attention_item_active">
|
||||
<div>321</div>
|
||||
<span>粉丝</span>
|
||||
</div>
|
||||
<div class="attention_item">
|
||||
<div>22</div>
|
||||
<span>作品数</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="homeMain_user_detail_item homeMain_user_detail_setUser">
|
||||
<i class="fi fi-rr-user"></i>
|
||||
<div>个人中心</div>
|
||||
<i class="icon iconfont icon-xiala"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="homeMain_user_content">
|
||||
<div v-if="isTest" class="username"><span>/</span> {{$t('Header.hello')}}@{{ $t('isTest.userName') }}</div>
|
||||
<div v-else class="username"><span>/</span> {{$t('Header.hello')}}@{{ userInfo?.userName }}</div>
|
||||
<div
|
||||
v-if="!isMurmur"
|
||||
|
||||
:class="[
|
||||
'icon',
|
||||
'iconfont',
|
||||
@@ -137,6 +165,8 @@ import { useStore } from "vuex";
|
||||
import { setLang } from "@/tool/guide";
|
||||
import showViewVideo from "@/tool/mount";
|
||||
import { useI18n } from "vue-i18n";
|
||||
import { gsap, TweenMax,TweenLite } from "gsap";
|
||||
import { ScrollTrigger } from "gsap/ScrollTrigger";
|
||||
export default defineComponent({
|
||||
components: {
|
||||
VerificationCodeInput,
|
||||
@@ -231,6 +261,12 @@ export default defineComponent({
|
||||
// console.log(String(newVal).length);
|
||||
// }
|
||||
},
|
||||
directives:{
|
||||
moveOpenDetal:{
|
||||
mounted (el,binding) {
|
||||
},
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
let isTest = getCookie('isTest')//获取是否是试用用户
|
||||
this.isTest =JSON.parse(isTest)
|
||||
@@ -253,6 +289,42 @@ export default defineComponent({
|
||||
this.store.dispatch('getLangType').then(()=>{
|
||||
this.getLangIsShowMark = false
|
||||
})
|
||||
|
||||
|
||||
let tl1 = gsap.timeline({ paused: true });
|
||||
let heradeRight = document.querySelector('.homeMain_max .homeMain_right_content')
|
||||
let userDetailMax = document.querySelector('.homeMain_max .homeMain_user')
|
||||
let userDetailIcon = document.querySelector('.homeMain_max .homeMain_user_icon')
|
||||
let userName = document.querySelector('.homeMain_max .homeMain_user_content')
|
||||
let userDetail = document.querySelector('.homeMain_max .homeMain_user_detail')
|
||||
// let anmiation = TweenMax.to(userDetailMax,1, {'margin-top':'30px',opacity:1})
|
||||
// anmiation.stop()
|
||||
let state
|
||||
tl1
|
||||
.to(userDetail,.3, {opacity:1,display:'flex'})
|
||||
.to(userDetailIcon,.3, {'left':'15rem',y:'25%',x:'-50%',scale:1.5,opacity:1},'-=.3')
|
||||
.to(userName,.3, {opacity:0},'-=.3')
|
||||
let overTime
|
||||
let outTime
|
||||
userDetailMax.addEventListener('mouseenter',(event)=>{
|
||||
if(state && !outTime)return
|
||||
clearTimeout(overTime)
|
||||
clearTimeout(outTime)
|
||||
overTime = setTimeout(() => {
|
||||
state = true
|
||||
this.isShowOperate = false
|
||||
this.isLanguage = false
|
||||
tl1.play()
|
||||
}, 500);
|
||||
})
|
||||
heradeRight.addEventListener('mouseleave',(event)=>{
|
||||
if(!state)return
|
||||
clearTimeout(outTime)
|
||||
outTime = setTimeout(() => {
|
||||
state = false
|
||||
tl1.reverse()
|
||||
}, 500);
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
setTask(data){
|
||||
@@ -509,39 +581,109 @@ export default defineComponent({
|
||||
width: 33%;
|
||||
height: 100%;
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
.homeMain_icon {
|
||||
font-size: 3.6rem;
|
||||
position: relative;
|
||||
top: 0.3rem;
|
||||
}
|
||||
.homeMain_user_icon{
|
||||
height: 4rem;
|
||||
width: 4rem;
|
||||
background-color: #000;
|
||||
border-radius: 50%;
|
||||
transform: translateX(-40%)scale(1.3);
|
||||
.homeMain_user{
|
||||
.homeMain_user_icon{
|
||||
height: 6rem;
|
||||
width: 6rem;
|
||||
position: relative;
|
||||
transform-origin: top;
|
||||
overflow: hidden;
|
||||
z-index: 2;
|
||||
left: 0;
|
||||
background-color: #000;
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
// transition: all .3s;
|
||||
}
|
||||
.homeMain_user_detail{
|
||||
position: absolute;
|
||||
top: calc(100% + .5rem);
|
||||
background: #fff;
|
||||
border-radius: 4px;
|
||||
width: 30rem;
|
||||
height: 30rem;
|
||||
opacity: 0;
|
||||
display: none;
|
||||
box-shadow: 0 0px 10px 1px rgba(0, 0, 0, 0.12);
|
||||
padding-top: 4rem;
|
||||
text-align: center;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 4rem 3rem;
|
||||
|
||||
.homeMain_user_detail_attention{
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 0 2rem;
|
||||
border-bottom: 1px solid #e3e5e7;
|
||||
.attention_item{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
.attention_item_active:hover{
|
||||
color: #39215b;
|
||||
span{
|
||||
color: #39215b;
|
||||
}
|
||||
}
|
||||
.attention_item:last-child{
|
||||
cursor: auto;
|
||||
}
|
||||
span{
|
||||
font-size: 1.4rem;
|
||||
color: #949eae;
|
||||
}
|
||||
}
|
||||
.homeMain_user_detail_setUser{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
cursor: pointer;
|
||||
width: 100%;
|
||||
i{
|
||||
font-size: 2rem;
|
||||
display: flex;
|
||||
}
|
||||
.fi-rr-user{
|
||||
margin-right: 1rem;
|
||||
}
|
||||
.icon-xiala{
|
||||
margin-left: auto
|
||||
}
|
||||
}
|
||||
.homeMain_user_detail_item{
|
||||
margin-top: 1rem;
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
.username {
|
||||
font-size: 1.8rem;
|
||||
color: #1a1a1a;
|
||||
margin: 0 0.8rem;
|
||||
font-weight: 900;
|
||||
span{
|
||||
margin: .7rem;
|
||||
}
|
||||
}
|
||||
.homeMain_user_content {
|
||||
// margin-left: 2rem;
|
||||
// transition: all .3s;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
// top: 1.2rem;
|
||||
height: 3.7rem;
|
||||
&.marLeft2{
|
||||
margin-left: 2rem;
|
||||
}
|
||||
.username {
|
||||
font-size: 1.8rem;
|
||||
color: #1a1a1a;
|
||||
margin: 0 0.8rem;
|
||||
font-weight: 900;
|
||||
span{
|
||||
margin: .7rem;
|
||||
}
|
||||
}
|
||||
|
||||
.icon-xiala {
|
||||
font-size: 1.4rem;
|
||||
cursor: pointer;
|
||||
|
||||
@@ -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>
|
||||
<div id="survey-form">
|
||||
<p id="description" v-if="!forbid">Please take the survey</p>
|
||||
<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%;
|
||||
}
|
||||
|
||||
@@ -20,8 +20,8 @@
|
||||
>性别:<span class="fontColor">*</span></label
|
||||
>
|
||||
<select name="dropdown" id="dropdown" v-model="gender">
|
||||
<option selected value='Female'>男性</option>
|
||||
<option value='Male'>女性</option>
|
||||
<option selected value='Female'>男女性性</option>
|
||||
<option value='Male'>男性</option>
|
||||
</select>
|
||||
<!-- <input
|
||||
type="text"
|
||||
@@ -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%);
|
||||
|
||||
Reference in New Issue
Block a user