|
|
@@ -9,104 +9,190 @@
|
|
|
<h2 class="title">校管乐团启蒙课 调查问卷</h2>
|
|
|
</div>
|
|
|
<studentInfo v-if="form.loginFlag" class="studentInfo" />
|
|
|
- <div class="questions" v-for="(item, index) in questionList" :key="index">
|
|
|
- <van-tag class="form-mark" :color="themeColor" mark type="primary">{{
|
|
|
- item["type"] | formTypeFormat
|
|
|
- }}</van-tag>
|
|
|
- <van-cell-group :border="false">
|
|
|
- <van-cell title-class="questionName" :title="item['content']" />
|
|
|
- <van-cell :border="false">
|
|
|
- <template #title>
|
|
|
- <van-radio-group v-model="check" v-if="item['type'] == 'radio'">
|
|
|
- <van-cell-group :border="false">
|
|
|
- <van-cell
|
|
|
- :border="false"
|
|
|
- v-for="item in item['questionnaireQuestionItemList']"
|
|
|
- :clickable="true"
|
|
|
- :key="item.id"
|
|
|
- :title="item.answerValue"
|
|
|
- class="teacher-item"
|
|
|
- @click="toggle(item.id)"
|
|
|
+ <van-form @submit="onSubmit" ref="form">
|
|
|
+ <div class="questions" v-for="(item, index) in questionList" :key="index">
|
|
|
+ <van-tag class="form-mark" :color="themeColor" mark type="primary">{{
|
|
|
+ item["type"] | formTypeFormat
|
|
|
+ }}</van-tag>
|
|
|
+ <van-cell-group :border="false">
|
|
|
+ <van-cell
|
|
|
+ :title-class="['questionName', item['isRequire'] ? 'require' : '']"
|
|
|
+ :title="item['content']"
|
|
|
+ />
|
|
|
+ <van-field
|
|
|
+ v-if="item['type'] != 'textarea'"
|
|
|
+ :border="false"
|
|
|
+ :name="item.id + ''"
|
|
|
+ :rules="[
|
|
|
+ {
|
|
|
+ required: item['isRequire'] ? true : false,
|
|
|
+ message: getErrorMsg(item),
|
|
|
+ },
|
|
|
+ ]"
|
|
|
+ >
|
|
|
+ <template #input>
|
|
|
+ <div style="width: 100%">
|
|
|
+ <van-radio-group
|
|
|
+ v-model="form[item.id]"
|
|
|
+ v-if="item['type'] == 'radio'"
|
|
|
>
|
|
|
- <template #right-icon>
|
|
|
- <van-radio :name="item.id">
|
|
|
- <template #icon="props">
|
|
|
- <!-- <img
|
|
|
+ <van-cell-group :border="false">
|
|
|
+ <van-cell
|
|
|
+ :border="false"
|
|
|
+ v-for="item in item['questionnaireQuestionItemList']"
|
|
|
+ :clickable="true"
|
|
|
+ :key="item.id"
|
|
|
+ :title="item.answerValue"
|
|
|
+ class="teacher-item"
|
|
|
+ @click="toggle(item.id)"
|
|
|
+ >
|
|
|
+ <template #right-icon>
|
|
|
+ <van-radio :name="item.id">
|
|
|
+ <template #icon="props">
|
|
|
+ <!-- <img
|
|
|
class="img-icon"
|
|
|
:src="props.checked ? activeButtonIcon : inactiveIcon"
|
|
|
/> -->
|
|
|
|
|
|
- <i
|
|
|
- class="iconfont"
|
|
|
- :class="
|
|
|
- props.checked
|
|
|
- ? 'icon-gouxuan'
|
|
|
- : 'icon-weigouxuan'
|
|
|
- "
|
|
|
- :style="{ color: themeColor }"
|
|
|
- ></i>
|
|
|
+ <i
|
|
|
+ class="iconfont"
|
|
|
+ :class="
|
|
|
+ props.checked
|
|
|
+ ? 'icon-gouxuan' : 'icon-weigouxuan'
|
|
|
+ "
|
|
|
+ :style="{ color: themeColor }"
|
|
|
+ ></i>
|
|
|
+ </template>
|
|
|
+ </van-radio>
|
|
|
</template>
|
|
|
- </van-radio>
|
|
|
- </template>
|
|
|
- </van-cell>
|
|
|
- </van-cell-group>
|
|
|
- </van-radio-group>
|
|
|
- <van-checkbox-group
|
|
|
- v-model="checkBox"
|
|
|
- v-if="item['type'] == 'checkbox'"
|
|
|
- >
|
|
|
- <van-cell-group :border="false">
|
|
|
- <van-cell
|
|
|
- :border="false"
|
|
|
- v-for="(item, index) in item['questionnaireQuestionItemList']"
|
|
|
- :clickable="true"
|
|
|
- :key="item.id"
|
|
|
- :title="item.answerValue"
|
|
|
- class="teacher-item"
|
|
|
- @click="toggle(index)"
|
|
|
+ </van-cell>
|
|
|
+ </van-cell-group>
|
|
|
+ </van-radio-group>
|
|
|
+ <van-checkbox-group
|
|
|
+ v-model="form[item.id]"
|
|
|
+ v-if="item['type'] == 'checkbox'"
|
|
|
>
|
|
|
- <template #right-icon>
|
|
|
- <van-checkbox
|
|
|
- shape="square"
|
|
|
- :name="item.id ? item.id.toString() : item.answerValue"
|
|
|
- ref="checkboxes"
|
|
|
+ <van-cell-group :border="false">
|
|
|
+ <van-cell
|
|
|
+ :border="false"
|
|
|
+ v-for="(item, index) in item[
|
|
|
+ 'questionnaireQuestionItemList'
|
|
|
+ ]"
|
|
|
+ :clickable="true"
|
|
|
+ :key="item.id"
|
|
|
+ :title="item.answerValue"
|
|
|
+ class="teacher-item"
|
|
|
+ @click="toggle(index)"
|
|
|
>
|
|
|
- <template #icon="props">
|
|
|
- <!-- <img
|
|
|
+ <template #right-icon>
|
|
|
+ <van-checkbox
|
|
|
+ shape="square"
|
|
|
+ :name="
|
|
|
+ item.id ? item.id.toString() : item.answerValue
|
|
|
+ "
|
|
|
+ ref="checkboxes"
|
|
|
+ >
|
|
|
+ <template #icon="props">
|
|
|
+ <!-- <img
|
|
|
class="img-icon"
|
|
|
:src="props.checked ? activeButtonIcon : inactiveIcon"
|
|
|
/> -->
|
|
|
- <i
|
|
|
- class="iconfont"
|
|
|
- :class="
|
|
|
- props.checked
|
|
|
- ? 'icon-gouxuan'
|
|
|
- : 'icon-weigouxuan'
|
|
|
- "
|
|
|
- :style="{ color: themeColor }"
|
|
|
- ></i>
|
|
|
+ <i
|
|
|
+ class="iconfont"
|
|
|
+ :class="
|
|
|
+ props.checked
|
|
|
+ ? 'icon-gouxuan' : 'icon-weigouxuan'
|
|
|
+ "
|
|
|
+ :style="{ color: themeColor }"
|
|
|
+ ></i>
|
|
|
+ </template>
|
|
|
+ </van-checkbox>
|
|
|
</template>
|
|
|
- </van-checkbox>
|
|
|
- </template>
|
|
|
- </van-cell>
|
|
|
- </van-cell-group>
|
|
|
- </van-checkbox-group>
|
|
|
+ </van-cell>
|
|
|
+ </van-cell-group>
|
|
|
+ </van-checkbox-group>
|
|
|
|
|
|
- <div v-if="item['type'] == 'textarea'">
|
|
|
- <van-field
|
|
|
- v-model="textarea"
|
|
|
- rows="4"
|
|
|
- autosize
|
|
|
- maxlength="255"
|
|
|
- type="textarea"
|
|
|
- class="textareaClass"
|
|
|
- placeholder="请写下您的使用感受或建议～"
|
|
|
- />
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- </van-cell>
|
|
|
- </van-cell-group>
|
|
|
- </div>
|
|
|
+ <div v-if="item['type'] == 'image'">
|
|
|
+ <van-uploader
|
|
|
+ v-model="list[item.id]"
|
|
|
+ :max-count="1"
|
|
|
+ :before-delete="
|
|
|
+ (file) => {
|
|
|
+ beforeDelete(file, item.id + '', item.id);
|
|
|
+ }
|
|
|
+ "
|
|
|
+ :before-read="beforeRead"
|
|
|
+ :after-read="
|
|
|
+ (file) => {
|
|
|
+ afterRead(file, item.id, item.id);
|
|
|
+ }
|
|
|
+ "
|
|
|
+ accept="image/*"
|
|
|
+ >
|
|
|
+ <div class="uploaderBox">
|
|
|
+ <img src="../images/imageIcon.png" alt="" />
|
|
|
+ </div>
|
|
|
+ </van-uploader>
|
|
|
+ <!-- </van-button> -->
|
|
|
+ <p class="uploaderTitle">请上传5M内的图片文件</p>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- <div v-if="item['type'] == 'file'">
|
|
|
+ <van-uploader
|
|
|
+ v-model="list[item.id]"
|
|
|
+ :max-count="1"
|
|
|
+ accept="*"
|
|
|
+ :before-delete="
|
|
|
+ (file) => {
|
|
|
+ beforeDelete(file, item.id, item.id);
|
|
|
+ }
|
|
|
+ "
|
|
|
+ :before-read="
|
|
|
+ (file) => {
|
|
|
+ return beforeRead(file, item.type);
|
|
|
+ }
|
|
|
+ "
|
|
|
+ :after-read="
|
|
|
+ (file) => {
|
|
|
+ afterRead(file, item.id, item.id);
|
|
|
+ }
|
|
|
+ "
|
|
|
+ >
|
|
|
+ <div class="uploaderBox">
|
|
|
+ <img src="../images/fileIcon.png" alt="" />
|
|
|
+ <p>点击上传</p>
|
|
|
+ </div>
|
|
|
+ </van-uploader>
|
|
|
+ <p class="uploaderTitle">
|
|
|
+ 请上传5M以内的psd、ai、eps、svg、sketch类型文件
|
|
|
+ </p>
|
|
|
+ </div> -->
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </van-field>
|
|
|
+
|
|
|
+ <div v-if="item['type'] == 'textarea'">
|
|
|
+ <!-- class="textareaClass" -->
|
|
|
+ <van-field
|
|
|
+ v-model="form[item.id]"
|
|
|
+ :name="item.id + ''"
|
|
|
+ :rules="[
|
|
|
+ {
|
|
|
+ required: item['isRequire'] ? true : false,
|
|
|
+ message: getErrorMsg(item),
|
|
|
+ },
|
|
|
+ ]"
|
|
|
+ rows="4"
|
|
|
+ autosize
|
|
|
+ maxlength="255"
|
|
|
+ type="textarea"
|
|
|
+ class="textarea"
|
|
|
+ placeholder="请写下您的使用感受或建议～"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </van-cell-group>
|
|
|
+ </div>
|
|
|
+ </van-form>
|
|
|
<van-goods-action>
|
|
|
<!-- <van-goods-action-button
|
|
|
class="btn-submit"
|
|
|
@@ -210,6 +296,7 @@ export default {
|
|
|
checkList: [],
|
|
|
templateType: 2,
|
|
|
questionList: [{type:'',content:''}],
|
|
|
+ list:''
|
|
|
};
|
|
|
},
|
|
|
async mounted() {
|
|
|
@@ -331,6 +418,50 @@ export default {
|
|
|
this.$refs.checkboxes[index].toggle();
|
|
|
}
|
|
|
},
|
|
|
+ beforeRead(file, name) {
|
|
|
+ const isLt2M = file.size / 1024 / 1024 < 5;
|
|
|
+
|
|
|
+ if (!isLt2M) {
|
|
|
+ this.$toast("文件大小不能超过 5MB");
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ if (name && name == "fileUrl") {
|
|
|
+ let arr = ["psd", "ai", "eps", "svg", "sketch"];
|
|
|
+ let typeArr = file.name.split(".");
|
|
|
+ let type = typeArr[typeArr.length - 1];
|
|
|
+ if (arr.indexOf(type) == -1) {
|
|
|
+ this.$toast("请上传正确的文件");
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return true;
|
|
|
+ },
|
|
|
+ beforeDelete(file, name, list) {
|
|
|
+ this.form[name] = ""; // 上传图片地址为空
|
|
|
+ this[list] = [];
|
|
|
+ return true;
|
|
|
+ },
|
|
|
+ async afterRead(file, name, origin) {
|
|
|
+ this.setLoading(true);
|
|
|
+ let formData = new FormData();
|
|
|
+ formData.append("file", file.file);
|
|
|
+ try {
|
|
|
+ await uploadFile(formData).then((res) => {
|
|
|
+ let result = res.data;
|
|
|
+ if (result.code == 200) {
|
|
|
+ this[name] = result.data.url;
|
|
|
+ } else {
|
|
|
+ this[origin] = [];
|
|
|
+ this[name] = "";
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ this.setLoading(false);
|
|
|
+ } catch (err) {
|
|
|
+ this.setLoading(false);
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ },
|
|
|
async onSubmit() {
|
|
|
this.$emit('close')
|
|
|
// let selectList = this.questionList[this.currentIndex - 1];
|
|
|
@@ -405,6 +536,15 @@ export default {
|
|
|
state.user.status = "init";
|
|
|
}
|
|
|
},
|
|
|
+ getErrorMsg(item) {
|
|
|
+ if (item.type == "radio") {
|
|
|
+ return "请选择此题目";
|
|
|
+ } else if (item.type == "checkbox") {
|
|
|
+ return "请选择此题目";
|
|
|
+ } else {
|
|
|
+ return "";
|
|
|
+ }
|
|
|
+ },
|
|
|
},
|
|
|
filters: {
|
|
|
formTypeFormat(type) {
|
|
|
@@ -412,6 +552,7 @@ export default {
|
|
|
radio: "单选",
|
|
|
checkbox: "多选",
|
|
|
textarea: "问答",
|
|
|
+ image: "图片",
|
|
|
};
|
|
|
return template[type];
|
|
|
},
|
|
|
@@ -1014,4 +1155,52 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+.questions {
|
|
|
+ .van-cell--borderless {
|
|
|
+ // padding-bottom: 0;
|
|
|
+ &::after {
|
|
|
+ border-bottom: 1px solid #f0f0f0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.questionName {
|
|
|
+ padding-bottom: 0 !important;
|
|
|
+}
|
|
|
+.questionName.require {
|
|
|
+ span {
|
|
|
+ position: relative;
|
|
|
+ &::before {
|
|
|
+ content: "*";
|
|
|
+ color: #ee0a24;
|
|
|
+ position: absolute;
|
|
|
+ left: -8px;
|
|
|
+ top: 2px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.van-cell--required {
|
|
|
+ &::before {
|
|
|
+ content: "";
|
|
|
+ }
|
|
|
+}
|
|
|
+.textarea {
|
|
|
+ /deep/.van-field__value {
|
|
|
+ background-color: #f5f5f5;
|
|
|
+ padding: 14px 12px;
|
|
|
+ }
|
|
|
+}
|
|
|
+.uploaderBox {
|
|
|
+ img {
|
|
|
+ margin-top: 10px;
|
|
|
+ margin-bottom: 15px;
|
|
|
+ width: 76px;
|
|
|
+ }
|
|
|
+}
|
|
|
+.uploaderTitle {
|
|
|
+ font-size: 14px;
|
|
|
+ font-family: PingFangSC-Regular, PingFang SC;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #999999;
|
|
|
+ line-height: 24px;
|
|
|
+}
|
|
|
</style>
|
mo
