<template> <view class="exclusion"> <form @submit="formSubmit"> <template v-for="(item,index) in list"> <view v-if="item.type == 'radio'" class="margin-top padding sict-label" :key="index"> <view> <span style="color:red;display: inline-block; vertical-align:inherit;margin-right:4upx">*</span> {{index+1}}、 {{item.label}} </view> <view class="text-right sict-value"> <radio-group> <view> <view class="label" v-for="(opt,optIndex) in item.opts" :key="opt.label" @click="radioChange(opt.value,item.value)"> <radio :class="form[item.value]== opt.value ?'checked':''" :checked="form[item.value]== opt.value?true:false" :value="opt.value"></radio> <view style="display: inline-block;" class="right">{{opt.label}}</view> </view> </view> </radio-group> </view> </view> <view v-else-if="item.type == 'picker'" :key="index"> <view class="margin-top"> <uni-collapse> <uni-collapse-item :title="index+1 +'、' + item.label" :open="true" :required="item.required"> <view class="padding-lr"> <view class="uni-list"> <checkbox-group> <label class="uni-list-cell uni-list-cell-pd" v-for="(itemCheck,indexCheck) in item.opts" :key="itemCheck.value" @click="checkboxChange(indexCheck,item.opts,itemCheck,item.value)"> <view class="list-item"> <view class="fl"> <checkbox :value="itemCheck.value" :checked="itemCheck.checked" /> </view> <view style="padding-left:60upx">{{itemCheck.label}}</view> </view> </label> </checkbox-group> </view> </view> </uni-collapse-item> </uni-collapse> </view> </view> </template> <view class="padding"> <button form-type="submit" class="cu-btn block bg-blue margin-tb-sm lg">提交(2 / 2)</button> </view> </form> <view class="cu-modal" :class="modalName=='DialogModal1'?'show':''"> <view class="cu-dialog"> <view class="cu-bar bg-white justify-end"> <view class="content">提示消息</view> <view class="action" @tap="modalName = ''"> <text class="cuIcon-close text-black"></text> </view> </view> <view class="padding-xl"> 抱歉,您暂不符合筛查标准,具体详情请查看首页筛查公告,感谢您的参与! </view> <view class="cu-bar bg-white justify-end"> <view class="action"> <button class="cu-btn line-gray" @tap="modalName = ''">取消</button> <button class="cu-btn line-blue text-blue margin-left" @tap="hideModal">确定</button> </view> </view> </view> </view> </view> </template> <script> import uniCollapse from '@/components/uni-collapse/uni-collapse.vue' import uniCollapseItem from '@/components/uni-collapse-item/uni-collapse-item.vue' import validate from '@/utils/validate.js' export default { components: { uniCollapse, uniCollapseItem }, data() { return { modalName:'', form: { 'withinOneYear': null, 'subtotalGastrectomy': null, 'ppi': null, "symptom": [], "diseasesHistory": [], 'possibilityOfCancer': null, 'seriousIllness': null }, id: '', list: [ { label: '距上次胃镜检查间隔时间一年内', value: 'withinOneYear', type: 'radio', eliminateVal:'02', opts: [{ value: 'a', label: '是' }, { value: 'b', label: '否' }, ] }, { label: '胃大部切除术手术史', value: 'subtotalGastrectomy', eliminateVal:'03', type: 'radio', opts: [{ value: 'a', label: '是' }, { value: 'b', label: '否' }, ] }, { label: '两周内服用PPI(埃索美拉唑、泮托拉唑、雷贝拉唑、兰索拉唑等)或H2受体拮抗剂(法莫替丁等)', value: 'ppi', eliminateVal:'04', type: 'radio', opts: [{ value: 'a', label: '是' }, { value: 'b', label: '否' }, ] }, { label: '有下列一种或多种症状', value: 'symptom', required: true, type: 'picker', opts: [ { value: 'a', eliminateVal:'05', label: '6个月内缺铁性贫血' }, { value: 'b', eliminateVal:'06', label: '12个月内消化道出血(黑便、血便等)' }, { value: 'c', eliminateVal:'07', label: '体重减轻(非减肥原因6个月内体重减轻≥4.5Kg)' }, { value: 'd', eliminateVal:'08', label: '经常性腹泻' }, { value: 'e', eliminateVal:'09', label: '吞咽困难或哽噎感' }, { value: 'f', eliminateVal:'10', label: '腹部肿块' }, { value: 'g', label: '以上均无' } ], }, { label: '有以下任何一种或多种疾病史', value: 'diseasesHistory', required: true, type: 'picker', opts: [ { value: 'a', eliminateVal:'11', label: '食管癌' }, { value: 'b', eliminateVal:'12', label: '胃癌' }, { value: 'c', eliminateVal:'13', label: '结直肠肿瘤' }, { value: 'd', eliminateVal:'14', label: '炎症性肠病' }, { value: 'e', eliminateVal:'15', label: '其它器官恶性肿瘤(如乳腺、卵巢等其它器官)' }, { value: 'f', label: '以上均无' } ] }, { label: '是否有影像、肿瘤标志物等检查高度怀疑罹患肿瘤可能', value: 'possibilityOfCancer', eliminateVal:'16', type: 'radio', opts: [{ value: 'a', label: '是' }, { value: 'b', label: '否' }, ] }, { label: '是否有严重心、肺、肝、肾功能不全,或严重精神疾患', value: 'seriousIllness', eliminateVal:'17', type: 'radio', opts: [{ value: 'a', label: '是' }, { value: 'b', label: '否' }, ] } ], } }, onLoad(option) { this.id = option.id || '' if (option.id) { this.getInfo(option.id) } }, methods: { hideModal(){ this.modalName = '' // #ifdef MP-WEIXIN setTimeout(function() { wx.switchTab({ url: '/pages/home/home', }); }, 1000); // #endif }, // 获取信息 getInfo(id) { this.$http.get(`/gastric-cancer-data/report/selectReportBySampleId?id=${id}`).then(res => { const d = res.data if (d.code == 1) { this.form = Object.assign(this.form,d.object.reportContent.data) for (let i = 0; i < this.list[3].opts.length; i++) { if (this.form['symptom'].indexOf(this.list[3].opts[i].value) > -1) { this.$set(this.list[3].opts[i], 'checked', true) } } for (let i = 0; i < this.list[4].opts.length; i++) { if (this.form['diseasesHistory'].indexOf(this.list[4].opts[i].value) > -1) { this.$set(this.list[4].opts[i], 'checked', true) } } } }).catch(err => { console.log(err) }) }, // 更新复选框绑定的表单内容 checkboxChange(index, checkList, obj, prop) { for (var i = 0, lenI = checkList.length; i < lenI; ++i) { if (index == i) { this.$set(checkList[i], 'checked', !checkList[i].checked) } } // 处理以上均无情况 if (obj.label == '以上均无') { for (var i = 0, lenI = checkList.length; i < lenI; ++i) { this.$set(checkList[i], 'checked', false) } this.$set(checkList[checkList.length - 1], 'checked', true) } else { this.$set(checkList[checkList.length - 1], 'checked', false) } }, Switch(e, prop) { this.form[prop] = e.detail.value }, updatePickerVal(event, props) { this.form[props] = event.detail.value }, radioChange(event, props) { this.$set(this.form, props, event) }, // 提交信息 formSubmit() { // 症状 this.form['symptom'] = [] for (let i = 0, lenI = this.list[3].opts.length; i < lenI; ++i) { if (this.list[3].opts[i].checked) { this.form['symptom'].push(this.list[3].opts[i].value) } } // 疾病 this.form['diseasesHistory'] = [] for (let i = 0, lenI = this.list[4].opts.length; i < lenI; ++i) { if (this.list[4].opts[i].checked) { this.form['diseasesHistory'].push(this.list[4].opts[i].value) } } let rules = [{ name: 'withinOneYear', required: true, errmsg: '请选择距上次胃镜检查间隔时间' }, { name: 'subtotalGastrectomy', required: true, errmsg: '请选择是否有胃大部切除术手术史' }, { name: 'ppi', required: true, errmsg: '请选择服用药物情况' }, { name: 'symptom', required: true, errmsg: '请选择是否有描述症状' }, { name: 'diseasesHistory', required: true, errmsg: '请选择是否有疾病史' }, { name: 'possibilityOfCancer', required: true, errmsg: '请选择必填项' }, { name: 'seriousIllness', required: true, errmsg: '请选择必填项' } ] let valLoginRes = validate.validate(this.form, rules) if (!valLoginRes.isOk) { uni.showToast({ icon: 'none', title: valLoginRes.errmsg }) return false } else { let flag = true let temp_arr = [] this.list.forEach(item => { if(item.type == 'radio'){ if(this.form[item.value] != 'b'){ flag = false // 字段填充值 temp_arr.push(item.eliminateVal) } } if(item.type == 'picker'){ if(this.form[item.value] != item.opts[item.opts.length-1].value ){ flag = false // 字段填充值 item.opts.forEach(itemOpt => { if(itemOpt.checked){ temp_arr.push(itemOpt.eliminateVal) } }) } } }) if(flag){ this.saveData(-3,[]) }else{ this.modalName = "DialogModal1" this.saveData(-1,temp_arr) } } }, saveData(code,illegalReason){ let obj = { "id": this.id, "illegalReason":illegalReason, "auditStatus": code, "data": { "data": this.form, "diseaseType": this.$store.getters.userInfo.diseaseType, "isPrivate": this.$store.getters.userInfo.isPrivate } } this.$http.post(`/gastric-cancer-data/wechat/report`, obj).then(res => { const d = res.data if (d.code == 1) { if (code == -3){ let that = this // uni.navigateTo({ // url: `/personModule/signUp/questionnaire/questionnaire?id=${this.id}` // }) uni.showToast({ icon: 'none', title: '信息提交后不可更改,同时请留意通知公告,及时参与采血。' }) setTimeout(function() { wx.switchTab({ url: '/pages/index/stomach', }); // let modeUrl = that.$store.getters.userInfo.modeUrl // uni.navigateTo({ // url: modeUrl // }) }, 1000); } } else { uni.showToast({ icon: 'none', title: d.message }) } }).catch(err => { console.log(err) }) } } } </script> <style lang="scss" scoped> .sict-title { padding: 20upx 0; padding-right: 20upx; word-break: break-all; text-align: justify } .sict-label { background-color: white; font-size: 30upx; text-align: justify; } .sict-value { margin-top: 15upx; .right { margin-left: 10upx; vertical-align: bottom; } .label { // display: inline-block; text-align: left; padding: 20upx 0; padding-left: 30upx; &:first-child { border-bottom: 2upx solid #d3d3d3; } } } uni-radio-group { border: 2upx solid #d3d3d3; border-radius: 8upx; margin-left: 20upx; display: block; } radio-group { border: 2upx solid #d3d3d3; border-radius: 8upx; margin-left: 20upx; display: block; } .icon-right { font-family: cuIcon; font-size: 34upx; color: #8799a3; line-height: 100upx; width: 60upx; text-align: right; margin: auto; } .uni-list-cell { .list-item { border-bottom: 2upx solid #d3d3d3; padding: 20upx 0; padding-left: 30upx; } &:last-child { .list-item { border-bottom: 0; } } } .uni-list { margin-left: 20upx; border: 2upx solid #d3d3d3; border-radius: 8upx; } </style> <style> .exclusion .uni-collapse-cell__title:after { border-bottom: 0 !important; } </style>