|
|
@@ -0,0 +1,1310 @@
|
|
|
+<template>
|
|
|
+ <view class="container">
|
|
|
+ <image class="bg" src="https://ysrw-1395926010.cos.ap-chengdu.myqcloud.com/images/bg_qestion.png" mode="widthFix"></image>
|
|
|
+ <view class="fixed-top-box" :style="{background: bgColor }">
|
|
|
+ <view class="status_bar" :style="{height: statusBarHeight}"></view>
|
|
|
+ <view class="back-box" @click="goBack">
|
|
|
+ <image src="@/static/image/back.png" mode=""></image>
|
|
|
+ <text class="title">问卷调查</text>
|
|
|
+ <text></text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <scroll-view class="content" scroll-y>
|
|
|
+ <!-- 表单标题 -->
|
|
|
+ <view class="form-header">
|
|
|
+ <view class="form-title">{{ formTitle }}</view>
|
|
|
+ <view class="form-tips">
|
|
|
+ <view class="tip-item">请您根据患者真实情况选择并填写</view>
|
|
|
+ <view class="tip-item">我们承诺对您及患者所提供的所有信息严格保密</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 动态表单内容 -->
|
|
|
+ <view class="form-section">
|
|
|
+ <view
|
|
|
+ class="form-item"
|
|
|
+ v-for="(field, index) in formFields"
|
|
|
+ :key="getFieldKey(field, index)">
|
|
|
+ <view class="form-label">
|
|
|
+ <text class="required" v-if="field.__config__.required">*</text>
|
|
|
+ <text>{{ index + 1 }}、{{ field.__config__.label }}</text>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 单行文本输入 -->
|
|
|
+ <template v-if="field.__config__.tag === 'el-input' && field.type !== 'textarea'">
|
|
|
+ <input
|
|
|
+ class="form-input"
|
|
|
+ :value="formData[field.__vModel__] || ''"
|
|
|
+ @input="(e) => onInputChange(field, e)"
|
|
|
+ :placeholder="field.placeholder || '请输入' + field.__config__.label"
|
|
|
+ type="text"
|
|
|
+ :disabled="field.disabled"
|
|
|
+ placeholder-class="text-placeholder"
|
|
|
+ />
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <!-- 多行文本输入 -->
|
|
|
+ <template v-else-if="field.__config__.tag === 'el-input' && field.type === 'textarea'">
|
|
|
+ <textarea
|
|
|
+ class="form-textarea"
|
|
|
+ :value="formData[field.__vModel__] || ''"
|
|
|
+ @input="(e) => onInputChange(field, e)"
|
|
|
+ :placeholder="field.placeholder || '请输入' + field.__config__.label"
|
|
|
+ :maxlength="field.maxlength"
|
|
|
+ :disabled="field.disabled"
|
|
|
+ :auto-height="field.autosize ? true : false"
|
|
|
+ placeholder-class="text-placeholder"
|
|
|
+ />
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <!-- 计数器 -->
|
|
|
+ <template v-else-if="field.__config__.tag === 'el-input-number'">
|
|
|
+ <view class="input-number-wrapper">
|
|
|
+ <view class="input-number-btn" @click="(e) => decreaseNumber(field, index)" :class="{ disabled: isNumberMin(field) }">-</view>
|
|
|
+ <input
|
|
|
+ class="form-input input-number-input"
|
|
|
+ :value="formData[field.__vModel__] || ''"
|
|
|
+ @input="(e) => onNumberInputChange(field, e)"
|
|
|
+ type="number"
|
|
|
+ :placeholder="field.placeholder || '请输入' + field.__config__.label"
|
|
|
+ :disabled="field.disabled"
|
|
|
+ placeholder-class="text-placeholder"
|
|
|
+ />
|
|
|
+ <view class="input-number-btn" @click="(e) => increaseNumber(field, index)" :class="{ disabled: isNumberMax(field) }">+</view>
|
|
|
+ </view>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <!-- 下拉选择 -->
|
|
|
+ <template v-else-if="field.__config__.tag === 'el-select'">
|
|
|
+ <picker
|
|
|
+ mode="selector"
|
|
|
+ :range="getSelectOptions(field)"
|
|
|
+ range-key="label"
|
|
|
+ :value="getSelectIndex(field)"
|
|
|
+ @change="(e) => onSelectChange(field, e)">
|
|
|
+ <view class="form-input picker-input" :class="{ placeholder: !formData[field.__vModel__] }">
|
|
|
+ {{ getSelectLabel(field) || field.placeholder || '请选择' + field.__config__.label }}
|
|
|
+ <image class="w48 h48" src="@/static/image/icon_more.png" mode=""></image>
|
|
|
+ </view>
|
|
|
+ </picker>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <!-- 滑块 -->
|
|
|
+ <template v-else-if="field.__config__.tag === 'el-slider'">
|
|
|
+ <view class="slider-wrapper">
|
|
|
+ <slider
|
|
|
+ :value="formData[field.__vModel__] || field.__config__.defaultValue || 0"
|
|
|
+ :min="field.min || 0"
|
|
|
+ :max="field.max || 100"
|
|
|
+ :step="field.step || 1"
|
|
|
+ :show-value="true"
|
|
|
+ activeColor="#388BFF"
|
|
|
+ @change="(e) => onSliderChange(field, e)"
|
|
|
+ />
|
|
|
+ </view>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <!-- 多选框组 -->
|
|
|
+ <template v-else-if="field.__config__.tag === 'el-checkbox-group'">
|
|
|
+ <checkbox-group @change="(e) => onCheckboxChange(field, e)" class="checkbox-group">
|
|
|
+ <label
|
|
|
+ class="checkbox-item"
|
|
|
+ v-for="(option, optIndex) in getSelectOptions(field)"
|
|
|
+ :key="optIndex">
|
|
|
+ <checkbox
|
|
|
+ :value="option.value"
|
|
|
+ :checked="isCheckboxChecked(field, option.value)"
|
|
|
+ color="#388BFF"
|
|
|
+ />
|
|
|
+ <text>{{ option.label }}</text>
|
|
|
+ </label>
|
|
|
+ </checkbox-group>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <!-- 单选框组 -->
|
|
|
+ <template v-else-if="field.__config__.tag === 'el-radio-group'">
|
|
|
+ <radio-group @change="(e) => onRadioChange(field, e)" class="radio-group">
|
|
|
+ <label
|
|
|
+ class="radio-item"
|
|
|
+ v-for="(option, optIndex) in getSelectOptions(field)"
|
|
|
+ :key="optIndex">
|
|
|
+ <radio
|
|
|
+ :value="option.value"
|
|
|
+ :checked="formData[field.__vModel__] == option.value"
|
|
|
+ color="#388BFF"
|
|
|
+ />
|
|
|
+ <text>{{ option.label }}</text>
|
|
|
+ </label>
|
|
|
+ </radio-group>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <!-- 文件上传 -->
|
|
|
+ <template v-else-if="field.__config__.tag === 'el-upload'">
|
|
|
+ <view class="upload-section">
|
|
|
+ <view class="upload-item" v-for="(file, fileIndex) in getUploadFiles(field)" :key="fileIndex">
|
|
|
+ <image class="uploaded-image" :src="file" mode="aspectFill" v-if="isImageFile(file)"></image>
|
|
|
+ <view class="uploaded-file" v-else>
|
|
|
+ <text class="file-name">{{ getFileName(file) }}</text>
|
|
|
+ </view>
|
|
|
+ <view class="delete-btn" @click="(e) => removeUploadFile(field, fileIndex, index)">×</view>
|
|
|
+ </view>
|
|
|
+ <view class="upload-item upload-placeholder" @click="(e) => chooseUploadFile(field, index)">
|
|
|
+ <image class="w48 h48" src="@/static/image/icon_camera1.png" mode=""></image>
|
|
|
+ <text class="upload-text">{{ field.__config__.buttonText || '点击上传' }}</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <!-- 开关 -->
|
|
|
+ <template v-else-if="field.__config__.tag === 'el-switch'">
|
|
|
+ <switch
|
|
|
+ :checked="formData[field.__vModel__] || false"
|
|
|
+ :disabled="field.disabled"
|
|
|
+ :color="field['active-color'] || '#388BFF'"
|
|
|
+ @change="(e) => onSwitchChange(field, e)"
|
|
|
+ />
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <!-- 时间选择 -->
|
|
|
+ <template v-else-if="field.__config__.tag === 'el-time-picker' && !field['is-range']">
|
|
|
+ <picker
|
|
|
+ mode="time"
|
|
|
+ :value="formData[field.__vModel__] || ''"
|
|
|
+ @change="(e) => onTimePickerChange(field, e)">
|
|
|
+ <view class="form-input picker-input" :class="{ placeholder: !formData[field.__vModel__] }">
|
|
|
+ {{ formData[field.__vModel__] || field.placeholder || '请选择' + field.__config__.label }}
|
|
|
+ <!-- <image class="w48 h48" src="@/static/image/icon_my_more.png" mode=""></image> -->
|
|
|
+ </view>
|
|
|
+ </picker>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <!-- 时间范围 -->
|
|
|
+ <template v-else-if="field.__config__.tag === 'el-time-picker' && field['is-range']">
|
|
|
+ <view class="time-range-wrapper">
|
|
|
+ <picker
|
|
|
+ mode="time"
|
|
|
+ :value="getTimeRangeStart(field)"
|
|
|
+ @change="(e) => onTimeRangeStartChange(field, e)">
|
|
|
+ <view class="form-input picker-input time-range-input" :class="{ placeholder: !getTimeRangeStart(field) }">
|
|
|
+ {{ getTimeRangeStart(field) || field['start-placeholder'] || '开始时间' }}
|
|
|
+ <!-- <image class="w48 h48" src="@/static/image/icon_my_more.png" mode=""></image> -->
|
|
|
+ </view>
|
|
|
+ </picker>
|
|
|
+ <text class="time-range-separator">{{ field['range-separator'] || '至' }}</text>
|
|
|
+ <picker
|
|
|
+ mode="time"
|
|
|
+ :value="getTimeRangeEnd(field)"
|
|
|
+ @change="(e) => onTimeRangeEndChange(field, e)">
|
|
|
+ <view class="form-input picker-input time-range-input" :class="{ placeholder: !getTimeRangeEnd(field) }">
|
|
|
+ {{ getTimeRangeEnd(field) || field['end-placeholder'] || '结束时间' }}
|
|
|
+ <!-- <image class="w48 h48" src="@/static/image/icon_my_more.png" mode=""></image> -->
|
|
|
+ </view>
|
|
|
+ </picker>
|
|
|
+ </view>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <!-- 日期选择 -->
|
|
|
+ <template v-else-if="field.__config__.tag === 'el-date-picker' && field.type !== 'daterange'">
|
|
|
+ <picker
|
|
|
+ mode="date"
|
|
|
+ :value="formData[field.__vModel__] || ''"
|
|
|
+ :start="field['start-date'] || ''"
|
|
|
+ :end="field['end-date'] || ''"
|
|
|
+ @change="(e) => onDatePickerChange(field, e)">
|
|
|
+ <view class="form-input picker-input" :class="{ placeholder: !formData[field.__vModel__] }">
|
|
|
+ {{ formData[field.__vModel__] || field.placeholder || '请选择' + field.__config__.label }}
|
|
|
+ <!-- <image class="w48 h48" src="@/static/image/icon_my_more.png" mode=""></image> -->
|
|
|
+ </view>
|
|
|
+ </picker>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <!-- 日期范围 -->
|
|
|
+ <template v-else-if="field.__config__.tag === 'el-date-picker' && field.type === 'daterange'">
|
|
|
+ <view class="date-range-wrapper">
|
|
|
+ <picker
|
|
|
+ mode="date"
|
|
|
+ :value="getDateRangeStart(field)"
|
|
|
+ @change="(e) => onDateRangeStartChange(field, e)">
|
|
|
+ <view class="form-input picker-input date-range-input" :class="{ placeholder: !getDateRangeStart(field) }">
|
|
|
+ {{ getDateRangeStart(field) || field['start-placeholder'] || '开始日期' }}
|
|
|
+ <!-- <image class="w48 h48" src="@/static/image/icon_my_more.png" mode=""></image> -->
|
|
|
+ </view>
|
|
|
+ </picker>
|
|
|
+ <text class="date-range-separator">{{ field['range-separator'] || '至' }}</text>
|
|
|
+ <picker
|
|
|
+ mode="date"
|
|
|
+ :value="getDateRangeEnd(field)"
|
|
|
+ @change="(e) => onDateRangeEndChange(field, e)">
|
|
|
+ <view class="form-input picker-input date-range-input" :class="{ placeholder: !getDateRangeEnd(field) }">
|
|
|
+ {{ getDateRangeEnd(field) || field['end-placeholder'] || '结束日期' }}
|
|
|
+ <!-- <image class="w48 h48" src="@/static/image/icon_my_more.png" mode=""></image> -->
|
|
|
+ </view>
|
|
|
+ </picker>
|
|
|
+ </view>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <!-- 评分 -->
|
|
|
+ <template v-else-if="field.__config__.tag === 'el-rate'">
|
|
|
+ <view class="rate-wrapper">
|
|
|
+ <view
|
|
|
+ class="rate-star"
|
|
|
+ v-for="(star, starIndex) in (field.max || 5)"
|
|
|
+ :key="starIndex"
|
|
|
+ @click="(e) => setRate(field, starIndex + 1, index)"
|
|
|
+ :class="{ active: (formData[field.__vModel__] || 0) >= (starIndex + 1) }">
|
|
|
+ ★
|
|
|
+ </view>
|
|
|
+ <text class="rate-text" v-if="field['show-score']">{{ formData[field.__vModel__] || 0 }}分</text>
|
|
|
+ </view>
|
|
|
+ </template>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </scroll-view>
|
|
|
+
|
|
|
+ <!-- 提交按钮 -->
|
|
|
+ <view v-if="caseDetail.periodNum!==0" class="submit-btn" @click="handleSubmit">提交</view>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import { submitQuestionnaire, getQuestionnaireDetail} from '@/api/questionnaire'
|
|
|
+
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ top: 0,
|
|
|
+ statusBarHeight: uni.getSystemInfoSync().statusBarHeight + 'px',
|
|
|
+ questionnaireId: '',
|
|
|
+ formTitle: '病例收集',
|
|
|
+ formFields: [],
|
|
|
+ formData: {},
|
|
|
+ caseDetail: null ,// 保存详情数据，用于获取 company_id, table_name 等
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onLoad(options) {
|
|
|
+ if (options.id) {
|
|
|
+ this.questionnaireId = options.id
|
|
|
+ }
|
|
|
+ if (options.title) {
|
|
|
+ this.formTitle = decodeURIComponent(options.title)
|
|
|
+ }
|
|
|
+ this.loadDetail()
|
|
|
+ },
|
|
|
+ onPageScroll(e) {
|
|
|
+ this.top = e.scrollTop
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ bgColor() {
|
|
|
+ const opacity = Math.min(this.top / 30, 1)
|
|
|
+ return `rgba(255, 255, 255, ${opacity})`
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ getFieldKey(field, index) {
|
|
|
+ // 在非 H5 平台，:key 不支持表达式，需要使用方法来生成 key
|
|
|
+ return field && field.__config__ && field.__config__.formId ? field.__config__.formId : `field_${index}`
|
|
|
+ },
|
|
|
+ goBack() {
|
|
|
+ uni.navigateBack()
|
|
|
+ },
|
|
|
+ initFormData() {
|
|
|
+ // 初始化表单数据
|
|
|
+ this.formFields.forEach(field => {
|
|
|
+ const vModel = field.__vModel__
|
|
|
+ if (!vModel) {
|
|
|
+ console.warn('字段缺少 __vModel__ 属性', field)
|
|
|
+ return
|
|
|
+ }
|
|
|
+
|
|
|
+ // 如果字段已存在值，跳过初始化（保留已有数据）
|
|
|
+ if (this.formData[vModel] !== undefined && this.formData[vModel] !== null) {
|
|
|
+ return
|
|
|
+ }
|
|
|
+
|
|
|
+ const tag = field.__config__.tag
|
|
|
+ const defaultValue = field.__config__.defaultValue
|
|
|
+
|
|
|
+ // 根据字段类型设置默认值
|
|
|
+ switch (tag) {
|
|
|
+ // 单行文本输入
|
|
|
+ case 'el-input':
|
|
|
+ if (field.type === 'textarea') {
|
|
|
+ // 多行文本
|
|
|
+ this.$set(this.formData, vModel, defaultValue !== undefined ? defaultValue : '')
|
|
|
+ } else {
|
|
|
+ // 单行文本
|
|
|
+ this.$set(this.formData, vModel, defaultValue !== undefined ? defaultValue : '')
|
|
|
+ }
|
|
|
+ break
|
|
|
+
|
|
|
+ // 数字输入（计数器）
|
|
|
+ case 'el-input-number':
|
|
|
+ if (defaultValue !== undefined) {
|
|
|
+ this.$set(this.formData, vModel, Number(defaultValue))
|
|
|
+ } else {
|
|
|
+ // 根据 min 值设置默认值，如果没有 min 则默认为 0
|
|
|
+ const minValue = field.min !== undefined ? Number(field.min) : null
|
|
|
+ this.$set(this.formData, vModel, minValue)
|
|
|
+ }
|
|
|
+ break
|
|
|
+
|
|
|
+ // 下拉选择
|
|
|
+ case 'el-select':
|
|
|
+ this.$set(this.formData, vModel, defaultValue !== undefined ? defaultValue : '')
|
|
|
+ break
|
|
|
+
|
|
|
+ // 滑块
|
|
|
+ case 'el-slider':
|
|
|
+ if (defaultValue !== undefined) {
|
|
|
+ this.$set(this.formData, vModel, Number(defaultValue))
|
|
|
+ } else {
|
|
|
+ // 默认值为 min 值，如果没有 min 则默认为 0
|
|
|
+ const minValue = field.min !== undefined ? Number(field.min) : 0
|
|
|
+ this.$set(this.formData, vModel, minValue)
|
|
|
+ }
|
|
|
+ break
|
|
|
+
|
|
|
+ // 多选框组
|
|
|
+ case 'el-checkbox-group':
|
|
|
+ if (defaultValue !== undefined && Array.isArray(defaultValue)) {
|
|
|
+ this.$set(this.formData, vModel, [...defaultValue])
|
|
|
+ } else {
|
|
|
+ this.$set(this.formData, vModel, [])
|
|
|
+ }
|
|
|
+ break
|
|
|
+
|
|
|
+ // 单选框组
|
|
|
+ case 'el-radio-group':
|
|
|
+ this.$set(this.formData, vModel, defaultValue !== undefined ? defaultValue : '')
|
|
|
+ break
|
|
|
+
|
|
|
+ // 文件上传
|
|
|
+ case 'el-upload':
|
|
|
+ if (defaultValue !== undefined && Array.isArray(defaultValue)) {
|
|
|
+ this.$set(this.formData, vModel, [...defaultValue])
|
|
|
+ } else if (defaultValue !== undefined && typeof defaultValue === 'string') {
|
|
|
+ // 如果是字符串（逗号分隔），转换为数组
|
|
|
+ this.$set(this.formData, vModel, defaultValue.split(',').filter(item => item.trim()))
|
|
|
+ } else {
|
|
|
+ this.$set(this.formData, vModel, [])
|
|
|
+ }
|
|
|
+ break
|
|
|
+
|
|
|
+ // 开关
|
|
|
+ case 'el-switch':
|
|
|
+ this.$set(this.formData, vModel, defaultValue !== undefined ? Boolean(defaultValue) : false)
|
|
|
+ break
|
|
|
+
|
|
|
+ // 时间选择
|
|
|
+ case 'el-time-picker':
|
|
|
+ if (field['is-range']) {
|
|
|
+ // 时间范围
|
|
|
+ if (defaultValue !== undefined && Array.isArray(defaultValue)) {
|
|
|
+ this.$set(this.formData, vModel, [...defaultValue])
|
|
|
+ } else {
|
|
|
+ this.$set(this.formData, vModel, ['', ''])
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ // 单个时间
|
|
|
+ this.$set(this.formData, vModel, defaultValue !== undefined ? defaultValue : '')
|
|
|
+ }
|
|
|
+ break
|
|
|
+
|
|
|
+ // 日期选择
|
|
|
+ case 'el-date-picker':
|
|
|
+ if (field.type === 'daterange') {
|
|
|
+ // 日期范围
|
|
|
+ if (defaultValue !== undefined && Array.isArray(defaultValue)) {
|
|
|
+ this.$set(this.formData, vModel, [...defaultValue])
|
|
|
+ } else {
|
|
|
+ this.$set(this.formData, vModel, ['', ''])
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ // 单个日期
|
|
|
+ this.$set(this.formData, vModel, defaultValue !== undefined ? defaultValue : '')
|
|
|
+ }
|
|
|
+ break
|
|
|
+
|
|
|
+ // 评分
|
|
|
+ case 'el-rate':
|
|
|
+ if (defaultValue !== undefined) {
|
|
|
+ this.$set(this.formData, vModel, Number(defaultValue))
|
|
|
+ } else {
|
|
|
+ this.$set(this.formData, vModel, 0)
|
|
|
+ }
|
|
|
+ break
|
|
|
+
|
|
|
+ // 默认情况：字符串类型
|
|
|
+ default:
|
|
|
+ this.$set(this.formData, vModel, defaultValue !== undefined ? defaultValue : '')
|
|
|
+ break
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ async loadDetail() {
|
|
|
+ try {
|
|
|
+ uni.showLoading({ title: '加载中...' })
|
|
|
+ const res = await getQuestionnaireDetail({ id: this.questionnaireId })
|
|
|
+ uni.hideLoading()
|
|
|
+
|
|
|
+ if (res.code === 200 && res.data) {
|
|
|
+ // 保存详情数据
|
|
|
+ this.caseDetail = res.data
|
|
|
+ // 设置表单标题
|
|
|
+ this.formTitle = res.data.questionnaireName || this.formTitle
|
|
|
+ let question = res.data.surveyQuestionnaireVersion
|
|
|
+ let formConfigData = question.formJson || ''
|
|
|
+ // 如果 formConfigData 是字符串，需要解析 JSON
|
|
|
+ if (typeof formConfigData === 'string') {
|
|
|
+ try {
|
|
|
+ formConfigData = JSON.parse(formConfigData)
|
|
|
+ } catch (e) {
|
|
|
+ console.error('解析表单配置 JSON 失败', e)
|
|
|
+ formConfigData = null
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // 设置表单字段
|
|
|
+ if (formConfigData && formConfigData.fields && Array.isArray(formConfigData.fields)) {
|
|
|
+ this.formFields = formConfigData.fields
|
|
|
+ this.initFormData()
|
|
|
+ } else {
|
|
|
+ // 接口返回的数据格式不正确，使用默认配置
|
|
|
+ console.warn('表单配置格式不正确，使用默认配置', formConfigData)
|
|
|
+ uni.showToast({
|
|
|
+ icon: 'none',
|
|
|
+ title: '表单配置加载失败'
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ // 如果有已保存的数据，填充表单
|
|
|
+ if (res.data.formData) {
|
|
|
+ Object.assign(this.formData, res.data.formData)
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ uni.showToast({
|
|
|
+ icon: 'none',
|
|
|
+ title: res.msg
|
|
|
+ })
|
|
|
+ }
|
|
|
+ } catch (e) {
|
|
|
+ uni.hideLoading()
|
|
|
+ console.error('加载详情失败，使用默认配置', e)
|
|
|
+ uni.showToast({
|
|
|
+ icon: 'none',
|
|
|
+ title: '表单配置加载失败'
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+ getSelectOptions(field) {
|
|
|
+ return field.__slot__?.options || []
|
|
|
+ },
|
|
|
+ getSelectIndex(field) {
|
|
|
+ const value = this.formData[field.__vModel__]
|
|
|
+ const options = this.getSelectOptions(field)
|
|
|
+ const index = options.findIndex(opt => opt.value == value)
|
|
|
+ return index >= 0 ? index : 0
|
|
|
+ },
|
|
|
+ getSelectLabel(field) {
|
|
|
+ const value = this.formData[field.__vModel__]
|
|
|
+ const options = this.getSelectOptions(field)
|
|
|
+ const option = options.find(opt => opt.value == value)
|
|
|
+ return option ? option.label : ''
|
|
|
+ },
|
|
|
+ onInputChange(field, e) {
|
|
|
+ const value = e.detail.value || e.target.value || ''
|
|
|
+ this.$set(this.formData, field.__vModel__, value)
|
|
|
+ },
|
|
|
+ onNumberInputChange(field, e) {
|
|
|
+ const value = e.detail.value || e.target.value || ''
|
|
|
+ const numValue = value === '' ? null : Number(value)
|
|
|
+ // 如果输入的不是有效数字，保持原值
|
|
|
+ if (value !== '' && isNaN(numValue)) {
|
|
|
+ return
|
|
|
+ }
|
|
|
+ this.$set(this.formData, field.__vModel__, numValue)
|
|
|
+ },
|
|
|
+ onSelectChange(field, e) {
|
|
|
+ const options = this.getSelectOptions(field)
|
|
|
+ const index = e.detail.value
|
|
|
+ if (options[index]) {
|
|
|
+ this.$set(this.formData, field.__vModel__, options[index].value)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onSliderChange(field, e) {
|
|
|
+ this.$set(this.formData, field.__vModel__, e.detail.value)
|
|
|
+ },
|
|
|
+ onCheckboxChange(field, e) {
|
|
|
+ this.$set(this.formData, field.__vModel__, e.detail.value)
|
|
|
+ },
|
|
|
+ onRadioChange(field, e) {
|
|
|
+ this.$set(this.formData, field.__vModel__, e.detail.value)
|
|
|
+ },
|
|
|
+ isCheckboxChecked(field, value) {
|
|
|
+ const checkedValues = this.formData[field.__vModel__] || []
|
|
|
+ return checkedValues.includes(value)
|
|
|
+ },
|
|
|
+ getUploadFiles(field) {
|
|
|
+ if (!field || !field.__vModel__) return []
|
|
|
+ const files = this.formData[field.__vModel__] || []
|
|
|
+ return Array.isArray(files) ? files : []
|
|
|
+ },
|
|
|
+ isImageFile(file) {
|
|
|
+ if (typeof file === 'string') {
|
|
|
+ return /\.(jpg|jpeg|png|gif|bmp|webp)$/i.test(file) || file.startsWith('data:image')
|
|
|
+ }
|
|
|
+ return false
|
|
|
+ },
|
|
|
+ getFileName(file) {
|
|
|
+ if (typeof file === 'string') {
|
|
|
+ const parts = file.split('/')
|
|
|
+ return parts[parts.length - 1]
|
|
|
+ }
|
|
|
+ return '文件'
|
|
|
+ },
|
|
|
+ chooseUploadFile(field, formIndex) {
|
|
|
+ // 如果 field 未定义，通过索引获取
|
|
|
+ if (!field && formIndex !== undefined) {
|
|
|
+ field = this.formFields[formIndex]
|
|
|
+ }
|
|
|
+ if (!field || !field.__vModel__) {
|
|
|
+ console.error('上传字段未找到')
|
|
|
+ return
|
|
|
+ }
|
|
|
+ const maxCount = field.multiple ? 9 : 3
|
|
|
+ const currentFiles = this.getUploadFiles(field)
|
|
|
+ const remaining = maxCount - currentFiles.length
|
|
|
+
|
|
|
+ if (remaining <= 0) {
|
|
|
+ uni.showToast({
|
|
|
+ icon: 'none',
|
|
|
+ title: '已达到最大上传数量'
|
|
|
+ })
|
|
|
+ return
|
|
|
+ }
|
|
|
+
|
|
|
+ const vm = this
|
|
|
+ uni.chooseImage({
|
|
|
+ //count: remaining,
|
|
|
+ sizeType: ['compressed'],
|
|
|
+ sourceType: ['album', 'camera'],
|
|
|
+ success: (res) => {
|
|
|
+ if (!res.tempFilePaths || res.tempFilePaths.length === 0) {
|
|
|
+ uni.showToast({
|
|
|
+ icon: 'none',
|
|
|
+ title: '未选择文件'
|
|
|
+ })
|
|
|
+ return
|
|
|
+ }
|
|
|
+
|
|
|
+ uni.showLoading({ title: '上传中...' })
|
|
|
+ const files = vm.formData[field.__vModel__] || []
|
|
|
+ const requestPath = uni.getStorageSync('requestPath')
|
|
|
+ const totalCount = res.tempFilePaths.length
|
|
|
+ let completedCount = 0
|
|
|
+ const uploadedUrls = []
|
|
|
+
|
|
|
+ // 循环上传所有选择的图片
|
|
|
+ res.tempFilePaths.forEach((filePath, index) => {
|
|
|
+ uni.uploadFile({
|
|
|
+ url: `${requestPath}/app/common/uploadOSS`,
|
|
|
+ filePath: filePath,
|
|
|
+ name: 'file',
|
|
|
+ formData: {},
|
|
|
+ success: (uploadRes) => {
|
|
|
+ completedCount++
|
|
|
+ try {
|
|
|
+ const result = typeof uploadRes.data === 'string' ? JSON.parse(uploadRes.data) : uploadRes.data
|
|
|
+ if (result.code == 200 && result.data && result.data.url) {
|
|
|
+ uploadedUrls.push(result.data.url)
|
|
|
+ } else if (result.code == 200 && result.url) {
|
|
|
+ // 兼容不同的返回格式
|
|
|
+ uploadedUrls.push(result.url)
|
|
|
+ }
|
|
|
+ } catch (e) {
|
|
|
+ console.error('解析上传结果失败', e)
|
|
|
+ }
|
|
|
+
|
|
|
+ // 所有文件上传完成后，更新表单数据
|
|
|
+ if (completedCount === totalCount) {
|
|
|
+ uni.hideLoading()
|
|
|
+ if (uploadedUrls.length > 0) {
|
|
|
+ vm.$set(vm.formData, field.__vModel__, [...files, ...uploadedUrls])
|
|
|
+ uni.showToast({
|
|
|
+ icon: 'success',
|
|
|
+ title: uploadedUrls.length === totalCount ? '上传成功' : `成功上传${uploadedUrls.length}/${totalCount}个文件`
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ uni.showToast({
|
|
|
+ icon: 'none',
|
|
|
+ title: '上传失败'
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ fail: (err) => {
|
|
|
+ completedCount++
|
|
|
+ console.error('上传失败', err)
|
|
|
+ // 所有文件上传完成后，更新表单数据
|
|
|
+ if (completedCount === totalCount) {
|
|
|
+ uni.hideLoading()
|
|
|
+ if (uploadedUrls.length > 0) {
|
|
|
+ vm.$set(vm.formData, field.__vModel__, [...files, ...uploadedUrls])
|
|
|
+ uni.showToast({
|
|
|
+ icon: 'none',
|
|
|
+ title: `成功上传${uploadedUrls.length}/${totalCount}个文件`
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ uni.showToast({
|
|
|
+ icon: 'none',
|
|
|
+ title: '上传失败'
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ })
|
|
|
+ },
|
|
|
+ fail: (err) => {
|
|
|
+ console.error('选择文件失败', err)
|
|
|
+ uni.showToast({
|
|
|
+ icon: 'none',
|
|
|
+ title: '选择文件失败'
|
|
|
+ })
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ removeUploadFile(field, fileIndex, formIndex) {
|
|
|
+ // 如果 field 未定义，通过索引获取
|
|
|
+ if (!field && formIndex !== undefined) {
|
|
|
+ field = this.formFields[formIndex]
|
|
|
+ }
|
|
|
+ if (!field || !field.__vModel__) {
|
|
|
+ console.error('上传字段未找到')
|
|
|
+ return
|
|
|
+ }
|
|
|
+ const files = this.formData[field.__vModel__] || []
|
|
|
+ if (fileIndex >= 0 && fileIndex < files.length) {
|
|
|
+ files.splice(fileIndex, 1)
|
|
|
+ this.$set(this.formData, field.__vModel__, files)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 计数器相关方法
|
|
|
+ decreaseNumber(field, index) {
|
|
|
+ // 如果 field 未定义，通过索引获取
|
|
|
+ if (!field && index !== undefined) {
|
|
|
+ field = this.formFields[index]
|
|
|
+ }
|
|
|
+ if (!field || !field.__vModel__) {
|
|
|
+ console.error('计数器字段未找到')
|
|
|
+ return
|
|
|
+ }
|
|
|
+ if (this.isNumberMin(field)) return
|
|
|
+ const current = Number(this.formData[field.__vModel__] || 0)
|
|
|
+ const step = field.step || 1
|
|
|
+ const min = field.min !== undefined ? field.min : 0
|
|
|
+ const newValue = Math.max(min, current - step)
|
|
|
+ this.$set(this.formData, field.__vModel__, newValue)
|
|
|
+ },
|
|
|
+ increaseNumber(field, index) {
|
|
|
+ // 如果 field 未定义，通过索引获取
|
|
|
+ if (!field && index !== undefined) {
|
|
|
+ field = this.formFields[index]
|
|
|
+ }
|
|
|
+ if (!field || !field.__vModel__) {
|
|
|
+ console.error('计数器字段未找到')
|
|
|
+ return
|
|
|
+ }
|
|
|
+ if (this.isNumberMax(field)) return
|
|
|
+ const current = Number(this.formData[field.__vModel__] || 0)
|
|
|
+ const step = field.step || 1
|
|
|
+ const max = field.max !== undefined ? field.max : Infinity
|
|
|
+ const newValue = Math.min(max, current + step)
|
|
|
+ this.$set(this.formData, field.__vModel__, newValue)
|
|
|
+ },
|
|
|
+ isNumberMin(field) {
|
|
|
+ if (!field || !field.__vModel__) return false
|
|
|
+ const current = Number(this.formData[field.__vModel__] || 0)
|
|
|
+ const min = field.min !== undefined ? field.min : 0
|
|
|
+ return current <= min
|
|
|
+ },
|
|
|
+ isNumberMax(field) {
|
|
|
+ if (!field || !field.__vModel__) return false
|
|
|
+ const current = Number(this.formData[field.__vModel__] || 0)
|
|
|
+ const max = field.max !== undefined ? field.max : Infinity
|
|
|
+ return current >= max
|
|
|
+ },
|
|
|
+ // 开关相关方法
|
|
|
+ onSwitchChange(field, e) {
|
|
|
+ this.$set(this.formData, field.__vModel__, e.detail.value)
|
|
|
+ },
|
|
|
+ // 时间选择相关方法
|
|
|
+ onTimePickerChange(field, e) {
|
|
|
+ this.$set(this.formData, field.__vModel__, e.detail.value)
|
|
|
+ },
|
|
|
+ getTimeRangeStart(field) {
|
|
|
+ const value = this.formData[field.__vModel__]
|
|
|
+ if (Array.isArray(value) && value.length > 0) {
|
|
|
+ return value[0]
|
|
|
+ }
|
|
|
+ return ''
|
|
|
+ },
|
|
|
+ getTimeRangeEnd(field) {
|
|
|
+ const value = this.formData[field.__vModel__]
|
|
|
+ if (Array.isArray(value) && value.length > 1) {
|
|
|
+ return value[1]
|
|
|
+ }
|
|
|
+ return ''
|
|
|
+ },
|
|
|
+ onTimeRangeStartChange(field, e) {
|
|
|
+ const value = this.formData[field.__vModel__] || []
|
|
|
+ value[0] = e.detail.value
|
|
|
+ this.$set(this.formData, field.__vModel__, [...value])
|
|
|
+ },
|
|
|
+ onTimeRangeEndChange(field, e) {
|
|
|
+ const value = this.formData[field.__vModel__] || []
|
|
|
+ value[1] = e.detail.value
|
|
|
+ this.$set(this.formData, field.__vModel__, [...value])
|
|
|
+ },
|
|
|
+ // 日期选择相关方法
|
|
|
+ onDatePickerChange(field, e) {
|
|
|
+ this.$set(this.formData, field.__vModel__, e.detail.value)
|
|
|
+ },
|
|
|
+ getDateRangeStart(field) {
|
|
|
+ const value = this.formData[field.__vModel__]
|
|
|
+ if (Array.isArray(value) && value.length > 0) {
|
|
|
+ return value[0]
|
|
|
+ }
|
|
|
+ return ''
|
|
|
+ },
|
|
|
+ getDateRangeEnd(field) {
|
|
|
+ const value = this.formData[field.__vModel__]
|
|
|
+ if (Array.isArray(value) && value.length > 1) {
|
|
|
+ return value[1]
|
|
|
+ }
|
|
|
+ return ''
|
|
|
+ },
|
|
|
+ onDateRangeStartChange(field, e) {
|
|
|
+ const value = this.formData[field.__vModel__] || []
|
|
|
+ value[0] = e.detail.value
|
|
|
+ this.$set(this.formData, field.__vModel__, [...value])
|
|
|
+ },
|
|
|
+ onDateRangeEndChange(field, e) {
|
|
|
+ const value = this.formData[field.__vModel__] || []
|
|
|
+ value[1] = e.detail.value
|
|
|
+ this.$set(this.formData, field.__vModel__, [...value])
|
|
|
+ },
|
|
|
+ // 评分相关方法
|
|
|
+ setRate(field, value, formIndex) {
|
|
|
+ // 如果 field 未定义，通过索引获取
|
|
|
+ if (!field && formIndex !== undefined) {
|
|
|
+ field = this.formFields[formIndex]
|
|
|
+ }
|
|
|
+ if (!field || !field.__vModel__) {
|
|
|
+ console.error('评分字段未找到')
|
|
|
+ return
|
|
|
+ }
|
|
|
+ if (field.disabled) return
|
|
|
+ this.$set(this.formData, field.__vModel__, value)
|
|
|
+ },
|
|
|
+ validateForm() {
|
|
|
+ for (let field of this.formFields) {
|
|
|
+ const value = this.formData[field.__vModel__]
|
|
|
+ const fieldLabel = field.__config__.label || '该字段'
|
|
|
+ const tag = field.__config__.tag
|
|
|
+ const isRequired = field.__config__.required
|
|
|
+
|
|
|
+ // 必填校验
|
|
|
+ if (isRequired) {
|
|
|
+ // 数组类型（多选框、文件上传、范围选择）
|
|
|
+ if (tag === 'el-checkbox-group' || tag === 'el-upload') {
|
|
|
+ const arr = tag === 'el-upload' ? this.getUploadFiles(field) : value
|
|
|
+ if (!arr || !Array.isArray(arr) || arr.length === 0) {
|
|
|
+ return { valid: false, message: tag === 'el-upload' ? `请上传${fieldLabel}` : `请选择${fieldLabel}` }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // 范围选择（时间范围、日期范围）
|
|
|
+ else if ((tag === 'el-time-picker' && field['is-range']) || (tag === 'el-date-picker' && field.type === 'daterange')) {
|
|
|
+ const range = value || []
|
|
|
+ if (!Array.isArray(range) || range.length < 2 || !range[0] || !range[1]) {
|
|
|
+ return { valid: false, message: `请选择${fieldLabel}` }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // 选择类型（下拉、单选框、时间、日期）
|
|
|
+ else if (tag === 'el-select' || tag === 'el-radio-group' ||
|
|
|
+ (tag === 'el-time-picker' && !field['is-range']) ||
|
|
|
+ (tag === 'el-date-picker' && field.type !== 'daterange')) {
|
|
|
+ if (!value && value !== 0 && value !== '0' && value !== false) {
|
|
|
+ return { valid: false, message: `请选择${fieldLabel}` }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // 文本输入
|
|
|
+ else if (tag === 'el-input') {
|
|
|
+ if (!value || (typeof value === 'string' && value.trim() === '')) {
|
|
|
+ return { valid: false, message: `请输入${fieldLabel}` }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // 数字类型（数字输入、滑块）
|
|
|
+ else if (tag === 'el-input-number' || tag === 'el-slider') {
|
|
|
+ if (value === null || value === undefined || value === '') {
|
|
|
+ return { valid: false, message: tag === 'el-slider' ? `请设置${fieldLabel}` : `请输入${fieldLabel}` }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // 评分
|
|
|
+ else if (tag === 'el-rate') {
|
|
|
+ if (!value || value === 0) {
|
|
|
+ return { valid: false, message: `请为${fieldLabel}评分` }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // 其他类型
|
|
|
+ else if (!value && value !== 0 && value !== false) {
|
|
|
+ return { valid: false, message: `请填写${fieldLabel}` }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 格式校验（必填和非必填都校验）
|
|
|
+ if (value !== null && value !== undefined && value !== '') {
|
|
|
+ // 文本长度校验
|
|
|
+ if (tag === 'el-input' && typeof value === 'string') {
|
|
|
+ if (field.maxlength && value.length > field.maxlength) {
|
|
|
+ return { valid: false, message: `${fieldLabel}不能超过${field.maxlength}个字符` }
|
|
|
+ }
|
|
|
+ if (field.minlength && value.length < field.minlength) {
|
|
|
+ return { valid: false, message: `${fieldLabel}不能少于${field.minlength}个字符` }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // 数字范围校验
|
|
|
+ else if ((tag === 'el-input-number' || tag === 'el-slider')) {
|
|
|
+ const numValue = Number(value)
|
|
|
+ if (!isNaN(numValue)) {
|
|
|
+ if (field.min !== undefined && numValue < field.min) {
|
|
|
+ return { valid: false, message: `${fieldLabel}不能小于${field.min}` }
|
|
|
+ }
|
|
|
+ if (field.max !== undefined && numValue > field.max) {
|
|
|
+ return { valid: false, message: `${fieldLabel}不能大于${field.max}` }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return { valid: true }
|
|
|
+ },
|
|
|
+ async handleSubmit() {
|
|
|
+ // 表单验证
|
|
|
+ const validation = this.validateForm()
|
|
|
+ if (!validation.valid) {
|
|
|
+ uni.showToast({
|
|
|
+ icon: 'none',
|
|
|
+ title: validation.message
|
|
|
+ })
|
|
|
+ return
|
|
|
+ }
|
|
|
+
|
|
|
+ try {
|
|
|
+ uni.showLoading({ title: '提交中...' })
|
|
|
+ // 处理表单数据：将数组类型字段转换为逗号分隔的字符串
|
|
|
+ const submitData = { ...this.formData }
|
|
|
+ this.formFields.forEach(field => {
|
|
|
+ const vModel = field.__vModel__
|
|
|
+ const value = submitData[vModel]
|
|
|
+
|
|
|
+ // 文件上传字段：数组转逗号分隔字符串
|
|
|
+ if (field.__config__.tag === 'el-upload') {
|
|
|
+ if (Array.isArray(value) && value.length > 0) {
|
|
|
+ submitData[vModel] = value.join(',')
|
|
|
+ } else if (value) {
|
|
|
+ // 如果已经是字符串，保持不变
|
|
|
+ submitData[vModel] = value
|
|
|
+ } else {
|
|
|
+ // 如果没有文件，设置为空字符串
|
|
|
+ submitData[vModel] = ''
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // 多选框组：数组转逗号分隔字符串
|
|
|
+ else if (field.__config__.tag === 'el-checkbox-group') {
|
|
|
+ if (Array.isArray(value) && value.length > 0) {
|
|
|
+ submitData[vModel] = value.join(',')
|
|
|
+ } else if (value) {
|
|
|
+ // 如果已经是字符串，保持不变
|
|
|
+ submitData[vModel] = value
|
|
|
+ } else {
|
|
|
+ // 如果没有选择，设置为空字符串
|
|
|
+ submitData[vModel] = ''
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+
|
|
|
+ // 获取用户信息
|
|
|
+ const userInfo = JSON.parse(uni.getStorageSync('userInfo') || '{}')
|
|
|
+ const userName = userInfo.doctorName|| ''
|
|
|
+
|
|
|
+ // 获取详情数据中的信息
|
|
|
+ const companyId = this.caseDetail?.companyId
|
|
|
+ const taskId = this.caseDetail?.taskId
|
|
|
+ const periodNum = this.caseDetail?.periodNum
|
|
|
+ const tableName = this.caseDetail?.surveyQuestionnaireVersion.tableName || ''
|
|
|
+ const version = this.caseDetail?.surveyQuestionnaireVersion.versionNo || 0
|
|
|
+ // 添加公用字段
|
|
|
+ submitData.company_id = Number(companyId) || 0
|
|
|
+ submitData.table_name = tableName
|
|
|
+ submitData.user_id = userInfo.id || 0
|
|
|
+ submitData.user_name = userName
|
|
|
+ submitData.version_id = Number(version) || 0
|
|
|
+ submitData.periodNum = periodNum
|
|
|
+ submitData.taskId = taskId
|
|
|
+ const res = await submitQuestionnaire(submitData)
|
|
|
+ uni.hideLoading()
|
|
|
+ if (res.code === 200) {
|
|
|
+ uni.showToast({
|
|
|
+ icon: 'success',
|
|
|
+ title: '提交成功'
|
|
|
+ })
|
|
|
+ setTimeout(() => {
|
|
|
+ uni.navigateBack()
|
|
|
+ }, 1500)
|
|
|
+ } else {
|
|
|
+ uni.showToast({
|
|
|
+ icon: 'none',
|
|
|
+ title: res.msg || '提交失败'
|
|
|
+ })
|
|
|
+ }
|
|
|
+ } catch (e) {
|
|
|
+ uni.hideLoading()
|
|
|
+ uni.showToast({
|
|
|
+ icon: 'none',
|
|
|
+ title: '提交失败'
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="stylus">
|
|
|
+.text-placeholder {
|
|
|
+ color: #C8C9CC !important;
|
|
|
+}
|
|
|
+
|
|
|
+checkbox .wx-checkbox-input {
|
|
|
+ border-radius: 0 !important;
|
|
|
+}
|
|
|
+
|
|
|
+checkbox .wx-checkbox-input.wx-checkbox-input-checked {
|
|
|
+ border-radius: 0 !important;
|
|
|
+}
|
|
|
+</style>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.container {
|
|
|
+ min-height: 100vh;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+
|
|
|
+ .bg {
|
|
|
+ width: 100%;
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.status-bar {
|
|
|
+ width: 100%;
|
|
|
+ background: transparent;
|
|
|
+}
|
|
|
+
|
|
|
+.fixed-top-box {
|
|
|
+ width: 100%;
|
|
|
+ position: fixed;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ z-index: 1000;
|
|
|
+
|
|
|
+ .back-box {
|
|
|
+ height: 88upx;
|
|
|
+ padding: 0 24upx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+
|
|
|
+ image {
|
|
|
+ width: 40upx;
|
|
|
+ height: 40upx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .title {
|
|
|
+ font-family: PingFang SC, PingFang SC;
|
|
|
+ font-weight: 600;
|
|
|
+ font-size: 36rpx;
|
|
|
+ color: #333333;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.content {
|
|
|
+ margin-top: 168rpx;
|
|
|
+ flex: 1;
|
|
|
+ padding: 24rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+}
|
|
|
+
|
|
|
+.form-header {
|
|
|
+ margin-bottom: 32rpx;
|
|
|
+
|
|
|
+ .form-title {
|
|
|
+ font-family: PingFang SC, PingFang SC;
|
|
|
+ font-weight: 600;
|
|
|
+ font-size: 40rpx;
|
|
|
+ color: #333333;
|
|
|
+ margin-bottom: 32rpx;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .form-tips {
|
|
|
+ .tip-item {
|
|
|
+ font-family: PingFang SC, PingFang SC;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #666666;
|
|
|
+ line-height: 44rpx;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.form-section {
|
|
|
+ padding-bottom: 160rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.form-item {
|
|
|
+ background: #fff;
|
|
|
+ padding: 24rpx 32rpx;
|
|
|
+ margin-bottom: 20rpx;
|
|
|
+ border-radius: 16rpx;
|
|
|
+
|
|
|
+ &:last-child {
|
|
|
+ margin-bottom: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .form-label {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #333;
|
|
|
+ margin-bottom: 16rpx;
|
|
|
+
|
|
|
+ .required {
|
|
|
+ color: #FF5030;
|
|
|
+ margin-right: 4rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .form-input {
|
|
|
+ width: 100%;
|
|
|
+ height: 72rpx;
|
|
|
+ padding: 0 24rpx;
|
|
|
+ border-radius: 12rpx;
|
|
|
+ border: 2rpx solid #F5F5F5;
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #333;
|
|
|
+ box-sizing: border-box;
|
|
|
+
|
|
|
+ &.placeholder {
|
|
|
+ color: #C8C9CC;
|
|
|
+ }
|
|
|
+
|
|
|
+ &.picker-input {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .slider-wrapper {
|
|
|
+ padding: 20rpx 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .radio-group,
|
|
|
+ .checkbox-group {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ gap: 48rpx;
|
|
|
+
|
|
|
+ .radio-item,
|
|
|
+ .checkbox-item {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 16rpx;
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #333;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .form-textarea {
|
|
|
+ width: 100%;
|
|
|
+ min-height: 200rpx;
|
|
|
+ padding: 24rpx;
|
|
|
+ border-radius: 12rpx;
|
|
|
+ border: 2rpx solid #F5F5F5;
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #333;
|
|
|
+ box-sizing: border-box;
|
|
|
+ line-height: 1.6;
|
|
|
+ }
|
|
|
+
|
|
|
+ .input-number-wrapper {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 16rpx;
|
|
|
+
|
|
|
+ .input-number-btn {
|
|
|
+ width: 60rpx;
|
|
|
+ height: 60rpx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ border: 2rpx solid #F5F5F5;
|
|
|
+ border-radius: 8rpx;
|
|
|
+ font-size: 32rpx;
|
|
|
+ color: #333;
|
|
|
+ background: #fff;
|
|
|
+
|
|
|
+ &.disabled {
|
|
|
+ opacity: 0.5;
|
|
|
+ color: #C8C9CC;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .input-number-input {
|
|
|
+ flex: 1;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .time-range-wrapper,
|
|
|
+ .date-range-wrapper {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 16rpx;
|
|
|
+
|
|
|
+ .time-range-input,
|
|
|
+ .date-range-input {
|
|
|
+ flex: 1;
|
|
|
+ }
|
|
|
+
|
|
|
+ .time-range-separator,
|
|
|
+ .date-range-separator {
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #666;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .rate-wrapper {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 16rpx;
|
|
|
+
|
|
|
+ .rate-star {
|
|
|
+ font-size: 48rpx;
|
|
|
+ color: #E0E0E0;
|
|
|
+ line-height: 1;
|
|
|
+ cursor: pointer;
|
|
|
+
|
|
|
+ &.active {
|
|
|
+ color: #FFD700;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .rate-text {
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #666;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .upload-section {
|
|
|
+ display: flex;
|
|
|
+ gap: 16rpx;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ padding: 10rpx;
|
|
|
+ width: 100%;
|
|
|
+ .upload-item {
|
|
|
+ flex: 0 0 calc((100% - 32rpx) / 3);
|
|
|
+ width: calc((100% - 32rpx) / 3);
|
|
|
+ // height: calc((100% - 32rpx) / 3);
|
|
|
+ min-height: 200rpx;
|
|
|
+ border-radius: 8rpx;
|
|
|
+ overflow: hidden;
|
|
|
+ position: relative;
|
|
|
+ box-sizing: border-box;
|
|
|
+ .uploaded-image {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .uploaded-file {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ background: #f5f5f5;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ padding: 16rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+
|
|
|
+ .file-name {
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #666;
|
|
|
+ text-align: center;
|
|
|
+ word-break: break-all;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .delete-btn {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ right:0;
|
|
|
+ width: 40rpx;
|
|
|
+ height: 40rpx;
|
|
|
+ background: rgba(0, 0, 0, 0.5);
|
|
|
+ border-radius: 50%;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ font-size: 32rpx;
|
|
|
+ color: #fff;
|
|
|
+ line-height: 1;
|
|
|
+ }
|
|
|
+
|
|
|
+ &.upload-placeholder {
|
|
|
+ background: #f5f5f5;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ gap: 8rpx;
|
|
|
+
|
|
|
+ .upload-text {
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #999;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.submit-btn {
|
|
|
+ position: fixed;
|
|
|
+ bottom: 0;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ height: 88rpx;
|
|
|
+ background: #388BFF;
|
|
|
+ border-radius: 200rpx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ font-size: 32rpx;
|
|
|
+ color: #fff;
|
|
|
+ font-weight: 500;
|
|
|
+ z-index: 100;
|
|
|
+ margin: 40rpx 32rpx;
|
|
|
+}
|
|
|
+</style>
|
