调查问卷动态渲染
<template>
<div class="vote-list-wrapper">
<!-- 题型 -->
<div v-for="(item,i) of questionList" :key="i">
<span style="color:red" v-if="item.required">*</span><span>{{i+1}}{{item.question}}</span>
<van-radio-group v-if="item.type=='radio'" v-model="resultList[i].value">
<van-radio v-for="val of item.optionList" :key="val.id" :name="val.id">{{val.content}}</van-radio>
</van-radio-group>
<van-checkbox-group v-else-if="item.type=='checkbox'" v-model="resultList[i].value">
<van-checkbox v-for="val of item.optionList" :key="val.id" :name="val.id">{{val.content}}</van-checkbox>
</van-checkbox-group>
<van-field
v-else-if="item.type=='input'"
v-model="resultList[i].value"
rows="1"
autosize
type="textarea"
maxlength="150"
clearable
placeholder="请输入留言"
show-word-limit
/>
<van-field
v-else-if="item.type=='select'"
v-model="resultList[i].value"
@click="openSelectClick(i)"
is-link
readonly
placeholder="请选择内容"
/>
<van-field
v-else
v-model="resultList[i].value"
@click="selectDate(i)"
is-link
readonly
placeholder="请选择内容"
/>
</div>
<!-- 下拉选弹出框 -->
<van-popup
v-model="showSelect"
position="bottom"
:style="{ height: '40%' }"
>
<van-picker
title="标题"
show-toolbar
:columns="columns"
@confirm="onConfirm"
@cancel="showSelect = false"
/>
</van-popup>
<!-- 时间选择框 -->
<van-popup
v-model="showDatePopup"
position="bottom"
:style="{ height: '40%' }"
>
<van-datetime-picker
v-model="currentDate"
type="date"
title="选择年月日"
@confirm="onDateConfirm"
@cancel="showDatePopup = false"
:min-date="minDate"
/>
</van-popup>
<div class="submit" @click="submit">
提交
</div>
<!-- <div @click="toIxy" class="open">
如果有i襄阳我要打开i襄阳，如果没有i襄阳我要去下载i襄阳
</div> -->
</div>
</template>
<script>
Date.prototype.Format = function (fmt) {
var o = {
"M+": this.getMonth() + 1, //月份
"d+": this.getDate(), //日
"h+": this.getHours(), //小时
"m+": this.getMinutes(), //分
"s+": this.getSeconds(), //秒
"q+": Math.floor((this.getMonth() + 3) / 3), //季度
S: this.getMilliseconds(), //毫秒
};
if (/(y+)/.test(fmt))
fmt = fmt.replace(
RegExp.$1,
(this.getFullYear() + "").substr(4 - RegExp.$1.length)
);
for (var k in o)
if (new RegExp("(" + k + ")").test(fmt))
fmt = fmt.replace(
RegExp.$1,
RegExp.$1.length == 1 ? o[k] : ("00" + o[k]).substr(("" + o[k]).length)
);
return fmt;
};
export default {
data() {
return {
checked: [],
radio: "",
message: "",
select: "",
showSelect: false,
columns: [],
myTime: "",
showDatePopup: false, // 日期弹框
currentDate: new Date(), // 当前日期
minDate: new Date(),
resultList: [],
questionList: [
{
type: "radio",
question: "（单选题）选出这学期线性代数课任教",
required: true,
optionList: [
{
id: 1,
content: "周星星",
},
{
id: 2,
content: "石哈哈",
},
{
id: 3,
content: "李讲究",
},
{
id: 4,
content: "赵看看",
},
],
},
{
type: "checkbox",
question: "(多选题)以下哪些食品，是您会选择作为礼品送给菜需捆的？",
required: true,
optionList: [
{
id: 5,
content: "茶叶",
},
{
id: 6,
content: "青菜",
},
{
id: 7,
content: "水果",
},
{
id: 8,
content: "肉类",
},
],
},
{
type: "checkbox",
question: "(多选题)以下哪些食品，是您会选择作为礼品送给菜需捆的？",
optionList: [
{
id: 5,
content: "茶叶",
},
{
id: 6,
content: "青菜",
},
{
id: 7,
content: "水果",
},
{
id: 8,
content: "肉类",
},
],
},
{
type: "input",
question: "你喜欢什么季节？",
},
{
type: "select",
question: "四大名著你喜欢哪本？",
optionList: [
{
id: 9,
text: "西游记",
},
{
id: 10,
text: "三国演义",
},
],
},
{
type: "date",
question: "读过最感人的书籍是在什么时候",
},
{
type: "date",
question: "人生中最难忘的日子",
},
],
selectIndex: "",
flag: "",
};
},
mounted() {
this.getModelList();
},
methods: {
toIxy() {
if (navigator.userAgent.match(/Android/i)) {
var loadDateTime = new Date();
window.location =
"ixiangyang.scheme://com.xiangyang.xyzw:1010/xy?url=https://ixy.xiangyang.gov.cn:3721/sga/sgah5/socservice/schemePart/authorizationPage"; //schema链接或者universal link
window.setTimeout(function () {
//如果没有安装app,便会执行setTimeout跳转下载页
var timeOutDateTime = new Date();
if (timeOutDateTime - loadDateTime < 2000) {
window.location =
"https://www.pgyer.com/apiv2/app/install?_api_key=706461e1d6932d01f8c9a2638bf7b4df&appKey=f441fdb065d8ec53ef969591364754cd&buildPassword=9527"; //ios下载地址
} else {
window.close();
}
}, 500);
// try {
// window.location = "ixiangyang.scheme://com.xiangyang.xyzw:1010/xy?url=/sga/sgah5/socservice/schemePart/authorizationPage?code=12 "; //schema链接或者universal link
// window.setTimeout(function () {
// window. = "https://www.pgyer.com/apiv2/app/install?_api_key=706461e1d6932d01f8c9a2638bf7b4df&appKey=f441fdb065d8ec53ef969591364754cd&buildPassword=9527"; //android下载地址
// }, 500);
// window.open("ixiangyang.scheme://com.xiangyang.xyzw:1010/xy")
// console.loh(12)
// } catch (e) {}
}
},
getModelList() {
let result = [];
if (!this.questionList.length) {
result = [{}];
} else {
for (let i = 0; i < this.questionList.length; i++) {
if (this.questionList[i].type === "checkbox") {
result.push({ index: i + 1, value: [] });
} else {
result.push({ index: i + 1, value: "" });
}
}
this.resultList = result;
console.log("======result======");
console.log(result);
}
},
submit() {
this.flag = true;
this.questionList.forEach((item, index) => {
if (item.required) {
if (
this.resultList[index].value == "" ||
this.resultList[index].value == []
) {
if (this.flag) {
this.$toast(item.question);
}
this.flag = false;
}
}
});
console.log(this.resultList);
},
// 下拉选择
openSelectClick(index) {
// this.columns = ['sd','sd']
this.selectIndex = index;
this.columns = this.questionList[this.selectIndex].optionList;
// alert(this.selectIndex)
this.showSelect = true;
},
// 时间选择
selectDate(index) {
this.dateIndex = index;
// alert(this.dateIndex)
this.showDatePopup = true;
},
// picker
onConfirm(val) {
console.log(val);
this.resultList[this.selectIndex].value = val.id;
this.showSelect = false;
},
// 日期弹框
onDateConfirm(val) {
this.resultList[this.dateIndex].value = val.Format("yyyy-MM-dd");
this.showDatePopup = false;
},
},
};
</script>
<style lang="less" scoped>
.vote-list-wrapper {
min-height: 100vh;
background: #fff;
.open {
margin: 20px;
height: 90px;
background: darkblue;
color: #fff;
padding: 20px;
font-weight: 700;
box-sizing: content-box;
}
}
</style>
编辑于 2021-06-21 08:57