862 lines
24 KiB
Vue
862 lines
24 KiB
Vue
<template>
|
||
<div class="feedbackSurvey">
|
||
<main id="main">
|
||
<h1 id="title">AiDA 3.0 调查问卷</h1>
|
||
<p id="description">请填写调查问卷表</p>
|
||
<div id="survey-form">
|
||
<h2 class="section-title">参与者信息</h2>
|
||
<div class="section w40">
|
||
<label for="name"
|
||
>姓名:<span class="fontColor">*</span></label
|
||
>
|
||
<input
|
||
type="text"
|
||
v-model="userName"
|
||
placeholder="请输入您的名字"
|
||
/>
|
||
</div>
|
||
<div class="section w40">
|
||
<label for="gender"
|
||
>性别:<span class="fontColor">*</span></label
|
||
>
|
||
<select name="dropdown" id="dropdown" v-model="gender">
|
||
<option selected value='Female'>女性</option>
|
||
<option value='Male'>男性</option>
|
||
</select>
|
||
<!-- <input
|
||
type="text"
|
||
v-model="gender"
|
||
placeholder="Enter your gender"
|
||
required
|
||
/> -->
|
||
</div>
|
||
<div class="section w40">
|
||
<label for="occupation"
|
||
>职业:<span class="fontColor">*</span></label
|
||
>
|
||
|
||
<input
|
||
type="text"
|
||
v-model="occupation"
|
||
placeholder="请输入您的职业"
|
||
required
|
||
/>
|
||
</div>
|
||
<!-- <div class="section w40">
|
||
<label for="country"
|
||
>Country of Origin:<span class="fontColor" >*</span
|
||
></label
|
||
>
|
||
<input
|
||
type="text"
|
||
id="country"
|
||
name="country"
|
||
placeholder="Enter your country of origin"
|
||
required
|
||
/>
|
||
</div> -->
|
||
<div class="section w40">
|
||
<label for="dropdown">国籍:<span class="fontColor" >*</span></label>
|
||
<select name="dropdown" id="dropdown" v-model="country" required>
|
||
<option disabled selected value> 请选择 </option>
|
||
<option v-for="item in CountryList" :key="item" :value="item">{{ item }}</option>
|
||
</select>
|
||
</div>
|
||
<div class="section">
|
||
<label for="email"
|
||
>邮箱:<span class="fontColor">*</span></label
|
||
>
|
||
<input
|
||
type="email"
|
||
v-model="email"
|
||
placeholder="请输入您的邮箱"
|
||
required
|
||
/>
|
||
</div>
|
||
<div class="section">
|
||
<p>年龄:<span class="fontColor">*</span></p>
|
||
<label>
|
||
<input
|
||
type="radio"
|
||
value="below20"
|
||
name="age"
|
||
v-model="age"
|
||
|
||
/>
|
||
20岁以下
|
||
</label>
|
||
<label>
|
||
<input 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" />
|
||
30-40岁
|
||
</label>
|
||
<label>
|
||
<input type="radio" value="40+" v-model="age" name="age" />
|
||
40+岁
|
||
</label>
|
||
</div>
|
||
<h2 class="section-title">调查问题</h2>
|
||
|
||
<!-- <div class="section">
|
||
<p>Do you like this survey?</p>
|
||
<label>
|
||
<input
|
||
type="radio"
|
||
value="yes"
|
||
name="radio-question"
|
||
checked
|
||
/>
|
||
Yes
|
||
</label>
|
||
<label>
|
||
<input type="radio" value="no" name="radio-question" />
|
||
No
|
||
</label>
|
||
<label>
|
||
<input
|
||
type="radio"
|
||
value="maybe"
|
||
name="radio-question"
|
||
/>
|
||
Maybe
|
||
</label>
|
||
</div> -->
|
||
<div class="section">
|
||
<p>
|
||
1. AiDA对您有哪些帮助？（您可以选择多个答案）：<span class="fontColor">*</span>
|
||
</p>
|
||
<label>
|
||
<input
|
||
type="checkbox"
|
||
name="checkbox-question"
|
||
value="1"
|
||
v-model="helpful"
|
||
/>
|
||
易于学习和使用
|
||
</label>
|
||
<label>
|
||
<input
|
||
type="checkbox"
|
||
name="checkbox-question"
|
||
value="2"
|
||
v-model="helpful"
|
||
/>
|
||
容易获取趋势信息
|
||
</label>
|
||
<label>
|
||
<input
|
||
type="checkbox"
|
||
name="checkbox-question"
|
||
value="3"
|
||
v-model="helpful"
|
||
/>
|
||
提供大量创意设计方案
|
||
</label>
|
||
<label>
|
||
<input
|
||
type="checkbox"
|
||
name="checkbox-question"
|
||
value="4"
|
||
v-model="helpful"
|
||
/>
|
||
AIGC功能对灵感板有帮助
|
||
</label>
|
||
<label>
|
||
<input
|
||
type="checkbox"
|
||
name="checkbox-question"
|
||
value="5"
|
||
v-model="helpful"
|
||
/>
|
||
AIGC功能对设计草图有帮助
|
||
</label>
|
||
<label>
|
||
<input
|
||
type="checkbox"
|
||
name="checkbox-question"
|
||
value="6"
|
||
v-model="helpful"
|
||
/>
|
||
容易选择合适的颜色
|
||
</label>
|
||
<label>
|
||
<input
|
||
type="checkbox"
|
||
name="checkbox-question"
|
||
value="7"
|
||
v-model="helpful"
|
||
/>
|
||
聊天机器人功能有帮助
|
||
</label>
|
||
<label>
|
||
<input
|
||
type="checkbox"
|
||
name="checkbox-question"
|
||
value="8"
|
||
v-model="helpful"
|
||
/>
|
||
打印位置功能有帮助
|
||
</label>
|
||
<label>
|
||
<input
|
||
type="checkbox"
|
||
name="checkbox-question"
|
||
value="9"
|
||
v-model="helpful"
|
||
/>
|
||
绘图功能有帮助
|
||
</label>
|
||
<label>
|
||
<input
|
||
type="checkbox"
|
||
name="checkbox-question"
|
||
value="10"
|
||
v-model="helpful"
|
||
/>
|
||
导出功能有用
|
||
</label>
|
||
<label>
|
||
<input
|
||
type="checkbox"
|
||
name="checkbox-question"
|
||
value="11"
|
||
v-model="helpful"
|
||
/>
|
||
设计编辑简单
|
||
</label>
|
||
<label>
|
||
<input
|
||
type="checkbox"
|
||
name="checkbox-question"
|
||
class="marTop1"
|
||
ref="helpfulOthers"
|
||
/>
|
||
<span> 其他:</span>
|
||
<textarea
|
||
name="comments"
|
||
id="text-area"
|
||
placeholder="请输入..."
|
||
v-model="othersHelpful"
|
||
@input="()=>helpfulOthers.checked = true"
|
||
></textarea>
|
||
</label>
|
||
</div>
|
||
<div class="section">
|
||
<p>
|
||
2. 您认为AiDA应该改进什么？（您可以选择多个答案）：<span class="fontColor">*</span>
|
||
</p>
|
||
<label>
|
||
<input
|
||
type="checkbox"
|
||
name="checkbox-question"
|
||
value="1"
|
||
v-model="improve"
|
||
/>
|
||
提供的设计很无聊，需要更多有趣的设计
|
||
</label>
|
||
<label>
|
||
<input
|
||
type="checkbox"
|
||
name="checkbox-question"
|
||
value="2"
|
||
v-model="improve"
|
||
/>
|
||
设计修改困难
|
||
</label>
|
||
<label>
|
||
<input
|
||
type="checkbox"
|
||
name="checkbox-question"
|
||
value="3"
|
||
v-model="improve"
|
||
/>
|
||
只有2D输出，没有3D结果
|
||
</label>
|
||
<label>
|
||
<input
|
||
type="checkbox"
|
||
name="checkbox-question"
|
||
value="4"
|
||
v-model="improve"
|
||
/>
|
||
难以选择合适的关键词应用于AIGC生成
|
||
</label>
|
||
<label>
|
||
<input
|
||
type="checkbox"
|
||
name="checkbox-question"
|
||
value="5"
|
||
v-model="improve"
|
||
/>
|
||
服装比例不正确
|
||
</label>
|
||
<label>
|
||
<input
|
||
type="checkbox"
|
||
name="checkbox-question"
|
||
value="6"
|
||
v-model="improve"
|
||
/>
|
||
与打版解决方案不兼容
|
||
</label>
|
||
<label>
|
||
<input
|
||
type="checkbox"
|
||
name="checkbox-question"
|
||
value="7"
|
||
v-model="improve"
|
||
/>
|
||
改进用户界面以便更好导航
|
||
</label>
|
||
<label>
|
||
<input
|
||
type="checkbox"
|
||
name="checkbox-question"
|
||
value="8"
|
||
v-model="improve"
|
||
/>
|
||
客户支持响应不及时
|
||
</label>
|
||
<label>
|
||
<input
|
||
type="checkbox"
|
||
name="checkbox-question"
|
||
value="9"
|
||
v-model="improve"
|
||
/>
|
||
对新用户的教程或指导不足
|
||
</label>
|
||
<label>
|
||
<input
|
||
type="checkbox"
|
||
name="checkbox-question"
|
||
value="10"
|
||
v-model="improve"
|
||
/>
|
||
设计个性化选项有限
|
||
</label>
|
||
<label>
|
||
<input
|
||
type="checkbox"
|
||
name="checkbox-question"
|
||
class="marTop1"
|
||
ref="improvelOthers"
|
||
/>
|
||
<span> 其他:</span>
|
||
<!-- <input
|
||
class="others-input"
|
||
type="text"
|
||
/> -->
|
||
<textarea
|
||
name="comments"
|
||
id="text-area"
|
||
v-model="othersImprovel"
|
||
placeholder="请输入..."
|
||
@input="()=>improvelOthers.checked = true"
|
||
></textarea>
|
||
</label>
|
||
</div>
|
||
<div class="section">
|
||
<p>3. 您会订阅AiDA 3.0吗？<span class="fontColor">*</span></p>
|
||
<label>
|
||
<input
|
||
type="radio"
|
||
value="yes"
|
||
v-model="isSubscribe"
|
||
name="radio-question"
|
||
/>
|
||
会
|
||
</label>
|
||
<label>
|
||
<input v-model="isSubscribe" type="radio" value="no" name="radio-question" />
|
||
不会
|
||
</label>
|
||
</div>
|
||
<div class="section" v-show="isSubscribe == 'no'">
|
||
<p>如果不会，请说明原因：<span class="fontColor">*</span></p>
|
||
<label>
|
||
<input
|
||
type="checkbox"
|
||
value="Not useful"
|
||
name="reasonForNotSubscribe"
|
||
v-model="reasonForNotSubscribe"
|
||
/>
|
||
没有用
|
||
</label>
|
||
<label>
|
||
<input type="checkbox" value="Too expensive" v-model="reasonForNotSubscribe" name="reasonForNotSubscribe" />
|
||
太贵了
|
||
</label>
|
||
<label>
|
||
<input
|
||
type="checkbox"
|
||
name="reasonForNotSubscribe"
|
||
ref="isSubscribeCauseOthers"
|
||
class="marTop1"
|
||
/>
|
||
<span> 其他:</span>
|
||
<textarea
|
||
name="comments"
|
||
id="text-area"
|
||
v-model="othersIsSubscribeCause"
|
||
placeholder="请输入..."
|
||
@input="()=>isSubscribeCauseOthers.checked = true"
|
||
></textarea>
|
||
</label>
|
||
</div>
|
||
<div class="section">
|
||
<p>
|
||
4. 您目前使用哪些设计工具？请列出：
|
||
</p>
|
||
<textarea
|
||
name="comments"
|
||
id="text-area"
|
||
v-model="designTools"
|
||
placeholder="请输入..."
|
||
></textarea>
|
||
</div>
|
||
<div class="section">
|
||
<button id="submit" @click="setSubmit">提交 </button>
|
||
</div>
|
||
</div>
|
||
</main>
|
||
</div>
|
||
</template>
|
||
|
||
<script lang="ts">
|
||
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
|
||
import { Modal,message } from 'ant-design-vue';
|
||
import { Https } from "@/tool/https";
|
||
import { defineComponent, toRefs,ref, reactive, createVNode } from "vue";
|
||
export default defineComponent({
|
||
setup() {
|
||
const feedbackData:any = reactive({
|
||
userName:'',
|
||
gender:'Female',
|
||
occupation:'',
|
||
country:'',
|
||
email:'',
|
||
age:'20-30',
|
||
helpful:[],
|
||
improve:[],
|
||
isSubscribe:'',
|
||
reasonForNotSubscribe:[],
|
||
designTools:'',
|
||
});
|
||
let refList:any = reactive({
|
||
helpfulOthers:{},
|
||
improvelOthers:{},
|
||
isSubscribeCauseOthers:{},
|
||
})
|
||
let othersHelpful = ref('')
|
||
let othersImprovel = ref('')
|
||
let othersIsSubscribeCause = ref()
|
||
let CountryList = [
|
||
"Albania",
|
||
"Algeria",
|
||
"Andorra",
|
||
"Angola",
|
||
"Antigua and Barbuda",
|
||
"Argentina",
|
||
"Armenia",
|
||
"Australia",
|
||
"Austria",
|
||
"Azerbaijan",
|
||
"Bahamas",
|
||
"Bangladesh",
|
||
"Barbados",
|
||
"Belgium",
|
||
"Belize",
|
||
"Benin",
|
||
"Bhutan",
|
||
"Bolivia",
|
||
"Bosnia and Herzegovina",
|
||
"Botswana",
|
||
"Brazil",
|
||
"Brunei",
|
||
"Bulgaria",
|
||
"Burkina Faso",
|
||
"Cabo Verde",
|
||
"Canada",
|
||
"China",
|
||
"Chile",
|
||
"Colombia",
|
||
"Comoros",
|
||
"Congo",
|
||
"Costa Rica",
|
||
"Côte d'Ivoire",
|
||
"Croatia",
|
||
"Cyprus",
|
||
"Czech Republic",
|
||
"Denmark",
|
||
"Djibouti",
|
||
"Dominica",
|
||
"Dominican Republic",
|
||
"Ecuador",
|
||
"El Salvador",
|
||
"Estonia",
|
||
"Fiji",
|
||
"Finland",
|
||
"France",
|
||
"Gabon",
|
||
"Gambia",
|
||
"Georgia",
|
||
"Germany",
|
||
"Ghana",
|
||
"Greece",
|
||
"Grenada",
|
||
"Guatemala",
|
||
"Guinea",
|
||
"Guinea-Bissau",
|
||
"Guyana",
|
||
"Haiti",
|
||
"Holy See",
|
||
"Honduras",
|
||
"Hong Kong, China",
|
||
"Hungary",
|
||
"Iceland",
|
||
"India",
|
||
"Indonesia",
|
||
"Iraq",
|
||
"Ireland",
|
||
"Israel",
|
||
"Italy",
|
||
"Jamaica",
|
||
"Japan",
|
||
"Jordan",
|
||
"Kazakhstan",
|
||
"Kenya",
|
||
"Kiribati",
|
||
"Kuwait",
|
||
"Kyrgyzstan",
|
||
"Latvia",
|
||
"Lebanon",
|
||
"Lesotho",
|
||
"Liberia",
|
||
"Liechtenstein",
|
||
"Lithuania",
|
||
"Luxembourg",
|
||
"Madagascar",
|
||
"Malawi",
|
||
"Malaysia",
|
||
"Maldives",
|
||
"Mali",
|
||
"Malta",
|
||
"Marshall Islands",
|
||
"Mauritania",
|
||
"Mauritius",
|
||
"Mexico",
|
||
"Micronesia",
|
||
"Moldova",
|
||
"Monaco",
|
||
"Mongolia",
|
||
"Montenegro",
|
||
"Morocco",
|
||
"Mozambique",
|
||
"Myanmar",
|
||
"Namibia",
|
||
"Nauru",
|
||
"Nepal",
|
||
"Netherlands",
|
||
"New Zealand",
|
||
"Nicaragua",
|
||
"Niger",
|
||
"Nigeria",
|
||
"North Macedonia",
|
||
"Norway",
|
||
"Oman",
|
||
"Pakistan",
|
||
"Palau",
|
||
"Palestine",
|
||
"Panama",
|
||
"Papua New Guinea",
|
||
"Paraguay",
|
||
"Peru",
|
||
"Philippines",
|
||
"Poland",
|
||
"Portugal",
|
||
"Qatar",
|
||
"Romania",
|
||
"Rwanda",
|
||
"Saint Kitts and Nevis",
|
||
"Saint Lucia",
|
||
"Saint Vincent and the Grenadines",
|
||
"Samoa",
|
||
"San Marino",
|
||
"Sao Tome and Principe",
|
||
"Senegal",
|
||
"Serbia",
|
||
"Seychelles",
|
||
"Sierra Leone",
|
||
"Singapore",
|
||
"Slovakia",
|
||
"Slovenia",
|
||
"Solomon Islands",
|
||
"South Africa",
|
||
"South Korea",
|
||
"Spain",
|
||
"Sri Lanka",
|
||
"Suriname",
|
||
"Sweden",
|
||
"Switzerland",
|
||
"Taiwan, China",
|
||
"Tanzania",
|
||
"Thailand",
|
||
"Timor-Leste",
|
||
"Togo",
|
||
"Tonga",
|
||
"Trinidad and Tobago",
|
||
"Tunisia",
|
||
"Turkey",
|
||
"Tuvalu",
|
||
"Uganda",
|
||
"Ukraine",
|
||
"United Arab Emirates",
|
||
"United Kingdom",
|
||
"United States of America",
|
||
"Uruguay",
|
||
"Vanuatu",
|
||
"Zambia"
|
||
]
|
||
let setSubmit = () => {
|
||
let state = false
|
||
let skipList = ['designTools','reasonForNotSubscribe']
|
||
let data = JSON.parse(JSON.stringify(feedbackData))
|
||
if(refList.helpfulOthers.checked && othersHelpful.value){
|
||
data.helpful.push(othersHelpful.value)
|
||
}
|
||
if(refList.improvelOthers.checked && othersImprovel.value){
|
||
data.improve.push(othersImprovel.value)
|
||
}
|
||
if(refList.isSubscribeCauseOthers.checked && othersIsSubscribeCause.value){
|
||
data.reasonForNotSubscribe.push(othersIsSubscribeCause.value)
|
||
}
|
||
for (const key in data) {
|
||
if(skipList.indexOf(key) > -1){
|
||
continue
|
||
}
|
||
let keyList = ['helpful','improve']
|
||
if(keyList.indexOf(key) > -1){
|
||
if(data[key].length == 0){
|
||
state = true
|
||
break
|
||
}
|
||
}else if(data.isSubscribe == 'no' && data.reasonForNotSubscribe.length == 0){
|
||
state = true
|
||
break
|
||
}else{
|
||
if(data[key] == ''){
|
||
state = true
|
||
break
|
||
}
|
||
}
|
||
}
|
||
|
||
if(state){
|
||
message.info('Please check that all the * numbers have been filled in')
|
||
return
|
||
}
|
||
Modal.confirm({
|
||
title: `Please confirm your email address to ensure it is correct. ${data.email}`,
|
||
icon: createVNode(ExclamationCircleOutlined),
|
||
okText: 'Yes',
|
||
cancelText: 'No',
|
||
mask:false,
|
||
centered:true,
|
||
onOk() {
|
||
data.language = 'CN'
|
||
submit(JSON.stringify(data))
|
||
}
|
||
});
|
||
};
|
||
let submit = (value:any)=>{
|
||
Https.axiosPost(Https.httpUrls.questionnaire, value).then(
|
||
(rv) => {
|
||
alert('提交成功!')
|
||
}
|
||
).catch(res=>{
|
||
});
|
||
}
|
||
return {
|
||
...toRefs(feedbackData),
|
||
...toRefs(refList),
|
||
othersHelpful,
|
||
othersImprovel,
|
||
othersIsSubscribeCause,
|
||
CountryList,
|
||
setSubmit,
|
||
};
|
||
},
|
||
|
||
data() {
|
||
return {
|
||
// moodTemplateId: "", //模板id
|
||
};
|
||
},
|
||
mounted() {},
|
||
methods: {},
|
||
});
|
||
</script>
|
||
|
||
<style lang="less" scoped>
|
||
@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;
|
||
#main{
|
||
background: linear-gradient(45deg, #eee4f3, #f3f4e6);
|
||
|
||
}
|
||
#title {
|
||
font-size: 6rem;
|
||
margin: 0;
|
||
font-weight: 900;
|
||
}
|
||
|
||
#description {
|
||
font-size: 2.8rem;
|
||
font-style: italic;
|
||
}
|
||
|
||
#survey-form {
|
||
position: relative;
|
||
background: rgba(255, 255, 255, 0.2);
|
||
width: 60%;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
text-align: left;
|
||
border-radius: 15px;
|
||
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;
|
||
}
|
||
|
||
@media (max-width: 760px) {
|
||
form {
|
||
width: 75%;
|
||
}
|
||
}
|
||
h2 {
|
||
width: 100%;
|
||
font-weight: 900;
|
||
}
|
||
.section {
|
||
display: flex;
|
||
flex-direction: column;
|
||
margin: 1rem;
|
||
width: 100%;
|
||
}
|
||
.w40 {
|
||
width: 40%;
|
||
}
|
||
.fontColor{
|
||
color: rgb(255, 2, 2);
|
||
}
|
||
p{
|
||
font-size: 2.8rem;
|
||
}
|
||
p,
|
||
label {
|
||
font-weight: bold;
|
||
margin: 0;
|
||
margin-left: 5px;
|
||
}
|
||
|
||
input,
|
||
#dropdown {
|
||
border: none;
|
||
border-radius: 5px;
|
||
padding: 10px;
|
||
outline: 0;
|
||
}
|
||
|
||
input:focus,
|
||
#dropdown:focus {
|
||
border: 2px solid rgb(173, 173, 173);
|
||
}
|
||
input,select{
|
||
height: 7rem;
|
||
}
|
||
input,
|
||
button,
|
||
select,
|
||
textarea {
|
||
cursor: pointer;
|
||
font-family: inherit;
|
||
font-size: inherit;
|
||
}
|
||
|
||
input[type="radio"],
|
||
input[type="checkbox"] {
|
||
display: inline-block;
|
||
width: 2rem;
|
||
height: 2rem;
|
||
vertical-align: middle;
|
||
margin: 0;
|
||
}
|
||
label{
|
||
vertical-align: baseline;
|
||
cursor: pointer;
|
||
.others-input{
|
||
background: rgba(255, 255, 255, 0);
|
||
border-top: none;
|
||
border-right: none;
|
||
border-left: none;
|
||
border-radius: 0;
|
||
border-bottom: 2px solid;
|
||
}
|
||
.others-input:focus{
|
||
border: none;
|
||
border-bottom: 2px solid;
|
||
}
|
||
span{
|
||
vertical-align: top;
|
||
}
|
||
textarea{
|
||
width: 80%;
|
||
vertical-align: top;
|
||
margin-left: 1rem;
|
||
|
||
}
|
||
}
|
||
textarea {
|
||
min-height: 75%;
|
||
max-height: 250px;
|
||
width: 100%;
|
||
resize: vertical;
|
||
border: none;
|
||
border-radius: 10px;
|
||
padding: 10px;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
#submit {
|
||
background: green;
|
||
background: #39215b;
|
||
|
||
border: none;
|
||
border-radius: 10px;
|
||
color: white;
|
||
font-size: 3rem;
|
||
transition: all 0.3s ease-in;
|
||
}
|
||
|
||
#submit:hover {
|
||
background: darkgreen;
|
||
background: #543087;
|
||
}
|
||
}
|
||
</style> |