|
|
@@ -0,0 +1,516 @@
|
|
|
+<template>
|
|
|
+ <view class="container">
|
|
|
+ <image class="bg" src="@/static/image/bg_qestion.svg" 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">{{ formData.title }}</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">
|
|
|
+ <view class="form-label">
|
|
|
+ <text class="required">*</text>
|
|
|
+ <text>1、患者姓名</text>
|
|
|
+ </view>
|
|
|
+ <input
|
|
|
+ class="form-input"
|
|
|
+ v-model="formData.patientName"
|
|
|
+ placeholder="请输入患者姓名"
|
|
|
+ />
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 患者性别 -->
|
|
|
+ <view class="form-item">
|
|
|
+ <view class="form-label">
|
|
|
+ <text class="required">*</text>
|
|
|
+ <text>2、患者性别</text>
|
|
|
+ </view>
|
|
|
+ <radio-group @change="onGenderChange" class="radio-group">
|
|
|
+ <label class="radio-item">
|
|
|
+ <radio value="male" :checked="formData.patientGender === 'male'" color="#388BFF" />
|
|
|
+ <text>男</text>
|
|
|
+ </label>
|
|
|
+ <label class="radio-item">
|
|
|
+ <radio value="female" :checked="formData.patientGender === 'female'" color="#388BFF" />
|
|
|
+ <text>女</text>
|
|
|
+ </label>
|
|
|
+ </radio-group>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 患者年龄 -->
|
|
|
+ <view class="form-item">
|
|
|
+ <view class="form-label">
|
|
|
+ <text class="required">*</text>
|
|
|
+ <text>3、患者年龄</text>
|
|
|
+ </view>
|
|
|
+ <input
|
|
|
+ class="form-input"
|
|
|
+ v-model="formData.patientAge"
|
|
|
+ type="number"
|
|
|
+ placeholder="请输入患者年龄 (岁)"
|
|
|
+ />
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 处方日期 -->
|
|
|
+ <view class="form-item">
|
|
|
+ <view class="form-label">
|
|
|
+ <text class="required">*</text>
|
|
|
+ <text>4、处方日期</text>
|
|
|
+ </view>
|
|
|
+ <picker mode="date" :value="formData.prescriptionDate" @change="onDateChange">
|
|
|
+ <view class="form-input picker-input" :class="{ placeholder: !formData.prescriptionDate }">
|
|
|
+ {{ formData.prescriptionDate || '请选择处方日期' }}
|
|
|
+ <image class="w48 h48" src="@/static/image/calendar.png" mode=""></image>
|
|
|
+ </view>
|
|
|
+ </picker>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 并发症类型 -->
|
|
|
+ <view class="form-item">
|
|
|
+ <view class="form-label">
|
|
|
+ <text class="required">*</text>
|
|
|
+ <text>5、您被诊断的并发症类型 (多选)</text>
|
|
|
+ </view>
|
|
|
+ <checkbox-group @change="onComplicationTypeChange" class="checkbox-group">
|
|
|
+ <label class="checkbox-item">
|
|
|
+ <checkbox value="retinopathy" :checked="formData.complicationTypes.includes('retinopathy')" color="#388BFF" />
|
|
|
+ <text>视网膜病变</text>
|
|
|
+ </label>
|
|
|
+ <label class="checkbox-item">
|
|
|
+ <checkbox value="neuropathy" :checked="formData.complicationTypes.includes('neuropathy')" color="#388BFF" />
|
|
|
+ <text>周围神经病变</text>
|
|
|
+ </label>
|
|
|
+ <label class="checkbox-item">
|
|
|
+ <checkbox value="osteoporosis" :checked="formData.complicationTypes.includes('osteoporosis')" color="#388BFF" />
|
|
|
+ <text>骨质疏松</text>
|
|
|
+ </label>
|
|
|
+ </checkbox-group>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 图片上传 -->
|
|
|
+ <view class="form-item">
|
|
|
+ <view class="form-label">
|
|
|
+ <text class="required">*</text>
|
|
|
+ <text>6、图片上传</text>
|
|
|
+ </view>
|
|
|
+ <view class="upload-section">
|
|
|
+ <view class="upload-item" v-for="(image, index) in formData.images" :key="index">
|
|
|
+ <image class="uploaded-image" :src="image" mode="aspectFill"></image>
|
|
|
+ <view class="delete-btn" @click="removeImage(index)">×</view>
|
|
|
+ </view>
|
|
|
+ <view class="upload-item upload-placeholder" @click="chooseImage" v-if="formData.images.length < 2">
|
|
|
+ <image class="w48 h48" src="@/static/image/icon_camera1.png" mode=""></image>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </scroll-view>
|
|
|
+
|
|
|
+ <!-- 提交按钮 -->
|
|
|
+ <view class="submit-btn" @click="handleSubmit">提交</view>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import { submitCaseCollection } from '@/api-js/medicationSurvey'
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ top:0,
|
|
|
+ statusBarHeight: uni.getSystemInfoSync().statusBarHeight + 'px',
|
|
|
+ activityId: '',
|
|
|
+ formData: {
|
|
|
+ title: '糖尿病并发症调研',
|
|
|
+ patientName: '',
|
|
|
+ patientGender: 'male',
|
|
|
+ patientAge: '',
|
|
|
+ prescriptionDate: '',
|
|
|
+ complicationTypes: ['retinopathy', 'neuropathy'],
|
|
|
+ images: []
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onLoad(options) {
|
|
|
+ if (options.activityId) {
|
|
|
+ this.activityId = options.activityId
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onPageScroll(e) {
|
|
|
+ //console.log(e)
|
|
|
+ this.top = e.scrollTop;
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ // 计算属性的 getter
|
|
|
+ bgColor: function() {
|
|
|
+ var top = this.top / 30;
|
|
|
+ return 'rgba(255, 255, 255,' + top + ')';
|
|
|
+ },
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ goBack() {
|
|
|
+ uni.navigateBack()
|
|
|
+ },
|
|
|
+ onDateChange(e) {
|
|
|
+ this.formData.prescriptionDate = e.detail.value
|
|
|
+ },
|
|
|
+ onGenderChange(e) {
|
|
|
+ this.formData.patientGender = e.detail.value
|
|
|
+ },
|
|
|
+ onDiseaseTypeChange(e) {
|
|
|
+ this.formData.diseaseTypes = e.detail.value
|
|
|
+ },
|
|
|
+ chooseImage() {
|
|
|
+ uni.chooseImage({
|
|
|
+ count: 2 - this.formData.images.length,
|
|
|
+ sizeType: ['compressed'],
|
|
|
+ sourceType: ['album', 'camera'],
|
|
|
+ success: (res) => {
|
|
|
+ this.formData.images = [...this.formData.images, ...res.tempFilePaths]
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ removeImage(index) {
|
|
|
+ this.formData.images.splice(index, 1)
|
|
|
+ },
|
|
|
+ async handleSubmit() {
|
|
|
+ // 表单验证
|
|
|
+ if (!this.formData.patientName) {
|
|
|
+ uni.showToast({
|
|
|
+ icon: 'none',
|
|
|
+ title: '请输入患者姓名'
|
|
|
+ })
|
|
|
+ return
|
|
|
+ }
|
|
|
+ if (!this.formData.patientAge) {
|
|
|
+ uni.showToast({
|
|
|
+ icon: 'none',
|
|
|
+ title: '请输入患者年龄'
|
|
|
+ })
|
|
|
+ return
|
|
|
+ }
|
|
|
+ if (!this.formData.prescriptionDate) {
|
|
|
+ uni.showToast({
|
|
|
+ icon: 'none',
|
|
|
+ title: '请选择处方日期'
|
|
|
+ })
|
|
|
+ return
|
|
|
+ }
|
|
|
+ if (this.formData.diseaseTypes.length === 0) {
|
|
|
+ uni.showToast({
|
|
|
+ icon: 'none',
|
|
|
+ title: '请至少选择一种心脏病类型'
|
|
|
+ })
|
|
|
+ return
|
|
|
+ }
|
|
|
+ if (this.formData.images.length === 0) {
|
|
|
+ uni.showToast({
|
|
|
+ icon: 'none',
|
|
|
+ title: '请至少上传一张图片'
|
|
|
+ })
|
|
|
+ return
|
|
|
+ }
|
|
|
+
|
|
|
+ try {
|
|
|
+ uni.showLoading({ title: '提交中...' })
|
|
|
+ const res = await submitCaseCollection({
|
|
|
+ activityId: this.activityId,
|
|
|
+ ...this.formData
|
|
|
+ })
|
|
|
+ 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">
|
|
|
+ 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%;
|
|
|
+ // background: linear-gradient(135deg, #66b2ef 0%, #0bb3f2 100%);
|
|
|
+ position: fixed;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ z-index: 1000;
|
|
|
+ .back-box{
|
|
|
+ height: 88upx;
|
|
|
+ padding-left: 22upx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ padding: 0 24upx;
|
|
|
+ image{
|
|
|
+ width: 40upx;
|
|
|
+ height: 40upx;
|
|
|
+ }
|
|
|
+ .title{
|
|
|
+ font-family: PingFang SC, PingFang SC;
|
|
|
+ font-weight: 600;
|
|
|
+ font-size: 36rpx;
|
|
|
+ color: #333333;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+.header {
|
|
|
+ position: relative;
|
|
|
+ height: 88rpx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ background: transparent;
|
|
|
+
|
|
|
+ .back-btn {
|
|
|
+ position: absolute;
|
|
|
+ left: 24rpx;
|
|
|
+ width: 40rpx;
|
|
|
+ height: 40rpx;
|
|
|
+
|
|
|
+ image {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .title {
|
|
|
+ font-size: 36rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #333;
|
|
|
+ }
|
|
|
+
|
|
|
+ .header-right {
|
|
|
+ position: absolute;
|
|
|
+ right: 24rpx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 16rpx;
|
|
|
+
|
|
|
+ .more-icon {
|
|
|
+ font-size: 32rpx;
|
|
|
+ color: #333;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.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;
|
|
|
+ // background: #f5f5f5;
|
|
|
+ border-radius: 12rpx 12rpx 12rpx 12rpx;
|
|
|
+ border: 2rpx solid #F5F5F5;
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #333;
|
|
|
+
|
|
|
+ &.placeholder {
|
|
|
+ color: #C8C9CC
|
|
|
+ }
|
|
|
+
|
|
|
+ &.picker-input {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+
|
|
|
+ .calendar-icon {
|
|
|
+ font-size: 32rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .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;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .upload-section {
|
|
|
+ display: flex;
|
|
|
+ gap: 16rpx;
|
|
|
+ flex-wrap: wrap;
|
|
|
+
|
|
|
+ .upload-item {
|
|
|
+ width: 200rpx;
|
|
|
+ height: 200rpx;
|
|
|
+ border-radius: 8rpx;
|
|
|
+ overflow: hidden;
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ .uploaded-image {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .delete-btn {
|
|
|
+ position: absolute;
|
|
|
+ top: 8rpx;
|
|
|
+ right: 8rpx;
|
|
|
+ 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;
|
|
|
+ }
|
|
|
+
|
|
|
+ &.upload-placeholder {
|
|
|
+ background: #f5f5f5;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+
|
|
|
+ .camera-icon {
|
|
|
+ font-size: 60rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.submit-btn {
|
|
|
+ position: fixed;
|
|
|
+ bottom: 0;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ height: 88rpx;
|
|
|
+ background: #388BFF;
|
|
|
+ border-radius: 200rpx 200rpx 200rpx 200rpx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ font-size: 32rpx;
|
|
|
+ color: #fff;
|
|
|
+ font-weight: 500;
|
|
|
+ z-index: 100;
|
|
|
+ margin:40rpx 32rpx;
|
|
|
+}
|
|
|
+</style>
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|