BLi/pages/doctor/upload.vue

<template>
	<view class="upload" @click="uploadMask()">
		<u-toast ref="uToast" />
		<view>
			<view class="title" v-if="htmlType==0">
				<u-input v-model="FormData.title" :disabled="ishtmlType" placeholder-style="color: rgba(0,0,0,0.8);font-size:48rpx;font-weight: 700;" :clearable="false" type="text" :border="border" placeholder="添加标题名称" />
			</view>
			<view class="title" v-else>
				<view style="font-size: 48rpx;color: rgba(0,0,0,0.8);">{{FormData.title}}</view>
			</view>
			<view class="flex" v-if="htmlType==0">
				<view v-if="FormData.uploadingName!=''" class="upData flex" @click.stop="Dropdown=true">
					{{FormData.uploadingName}}
					<u-icon name="arrow-right" size="28" color="#2979ff" style="margin-left: 10rpx;"></u-icon>
				</view>
				<view v-else class="upData flex" @click.stop="Dropdown=true">
					选择上传分类
					<u-icon name="arrow-right" size="28" color="#2979ff" style="margin-left: 10rpx;"></u-icon>
				</view>
				<view class="Dropdown" v-if="Dropdown">
					<view class="li">选择上传分类<u-icon name="arrow-down"></u-icon></view>
					<view :class="item == DropdownIndex?'li active':'li'" v-for="(item,index) in getUploading" @click.stop="DropdownMeh(item.name)">{{item.name}}</view>
				</view>
			</view>
			<view class="flex" v-else>
				<view class="upData flex">
					{{FormData.uploadingName}}
				</view>
			</view>
			<!-- 补充资料 -->
			<view class="box" v-if="htmlType == 1">
				<view class="input">
					<view class="label flex numbers">补充资料<view class="msg" style="margin: 0; padding: 0 12rpx 0;">PPT、视频</view>
					</view>
					<view :class="format(item)?'list flex': 'list list1 flex'" v-for="(item,index) in mhFileTwo" :key="index">
						<image v-if="format(item)" src="../../static/img/P.png" mode=""></image>
						<image v-else src="../../static/img/V.png" mode=""></image>
						<text>{{ item }}</text>
						<u-icon name="close" @click="deFile(index,2)" color="rgba(0,0,0,0.15)"></u-icon>
					</view>
					<view class="upButton" @click.stop="chooseMessageFile(2)">
						<image src="../../static/img/upButton.png" mode=""></image>上传新文件
					</view>
				</view>
				<view class="template" @click="downloadFile(ppt)">下载PPT模板（<text class="herf">{{ppt}}</text>）</view>
			</view>
			<view class="box" v-if="uploadData.type == 2">
				<view class="tit_box">通过原因</view>
				<text class="msg">{{uploadData.zjspPass}}</text>
			</view>
			<view class="box" v-if="uploadData.type == 1">
				<view class="tit_box" style="color: #F02E2F;">不通过原因</view>
				<text class="msg">{{uploadData.zjspNotpass}}</text>
			</view>
			<view class="box">
				<view class="tit">患者信息</view>
				<view class="input flex">
					<view class="icon">姓名</view>
					<u-input v-model="FormData.name" :disabled="ishtmlType" :clearable="false" type="text" :border="border" placeholder="患者姓名" />
				</view>
				<view class="input flex">
					<view class="icon">省份</view>
					<view class="text" :style="FormData.province?'flex: 1;':'flex: 1;color:rgba(0, 0, 0, 0.35);'" @click="provinceMet()">
						{{FormData.province?FormData.province:'请选择省份'}}
					</view>
					<u-select v-model="provinceType" :list="provinceList" @confirm="provinceConfirm"></u-select>
					<!-- <u-input v-model="FormData.province" :disabled="ishtmlType" :clearable="false" type="text" :border="border" placeholder="请输入省份" /> -->
				</view>
				<view class="input flex">
					<view class="icon">城市</view>
					<view class="text" @click="cityMet()" :style="FormData.city?'flex: 1;':'flex: 1;color:rgba(0, 0, 0, 0.35);'">
						{{FormData.city?FormData.city:'请选择城市'}}
					</view>
					<u-select v-model="cityType" :list="cityList" @confirm="cityConfirm"></u-select>
					<!-- <u-input v-model="FormData.city" :disabled="ishtmlType" :clearable="false" type="text" :border="border" placeholder="请输入城市" /> -->
				</view>
				<view class="input flex inputBorNode">
					<view class="icon">医院</view>
					<u-input v-model="FormData.hospital" :disabled="ishtmlType" :clearable="false" type="text" :border="border" placeholder="目前所处医院名称" />
				</view>
			</view>
			<view class="box">
				<view class="tit">病例详情</view>
				<view class="input flex" v-if="wisBllx == '1'">
					<view class="icon">病例类型</view>
					<view class="classType" v-if="FormData.caseName!=''" style="color:#167FFF;" @click.stop="!ishtmlType?selectType=true:''">{{FormData.caseName}}</view>
					<view v-else style="font-size: 28rpx;color: rgba(0,0,0,0.35);flex: 1;" @click.stop="!ishtmlType?selectType=true:''">请选择病病例类型</view>
					<!-- <u-input  :disabled="true" :clearable="false" type="number" :border="border" placeholder="请选择病病例类型" /> -->
					<image v-if="FormData.caseName ==''" src="../../static/img/r.png" mode=""></image>
					<view class="select Dropdown" v-if="selectType">
						<view v-for="(val,i) in itemList" @click.stop="selectMeh(val.name)" :class="selectIndex == val.name?'li active': 'li'" :key="i">{{val.name}}<u-icon style="float: right;" v-if="i==0" name="arrow-down"></u-icon></view>
					</view>
				</view>
				<view class="input">
					<view class="label">备注</view>
					<u-input v-model="FormData.remark" :disabled="ishtmlType" :clearable="false" type="text" :border="border" placeholder="详细信息" />
				</view>
				<view class="input">
					<view class="label flex numbers">相关照片<view class="msg" style="margin: 0; padding: 0 12rpx 0;">最多可上传十张图片</view>
					</view>
					<u-upload ref="uUpload1" width="160rpx" height="160rpx" :show-progress="true" :deletable="htmlType == 0 ? true : false" :action="action" @on-change="progress1" upload-text=" " :max-count="maxCount" :file-list="fileList"></u-upload>
				</view>
				<view class="input">
					<view class="label flex numbers">相关文件<view class="msg" style="margin: 0; padding: 0 12rpx 0;">PPT、视频</view>
					</view>
					<view :class="format(item)?'list flex': 'list list1 flex'" v-for="(item,index) in FormData.mhFile" :key="index">
						<image v-if="format(item)" src="../../static/img/P.png" mode=""></image>
						<image v-else src="../../static/img/V.png" mode=""></image>
						<text>{{ item }}</text>
						<u-icon name="close" color="rgba(0,0,0,0.15)" v-if="!ishtmlType" @click="deFile(index)"></u-icon>
					</view>
					<view v-if="htmlType == 0" class="upButton" @click.stop="chooseMessageFile()">
						<image src="../../static/img/upButton.png" mode=""></image>上传新文件
					</view>
				</view>
				<view class="template" v-if="htmlType == 0">下载PPT模板（<text class="herf" v-for="(a,b) in ppt.split(',')" :key="b" @click="downloadFile(a)">{{a}},</text>）</view>
			</view>
		</view>
		<u-popup v-model="show" mode="center">
			<view class="suc">
				<image src="../../static/img/suc.png" mode=""></image>
				<view class="con">
					<view class="tit">上传成功</view>
					<view class="p">患者资料上传成功，是否继续上传</view>
					<view class="btn">
						<view @click="indexHerf()">返回首页</view>
						<view class="next" @click.stop="nextMeh()">
							继续上传
						</view>
					</view>
				</view>
			</view>
		</u-popup>
		<view class="uploadBtn" v-if="htmlType!=2">
			<view class="yes" v-if="yesType==1" @click="patientQuide()">提交案例</view>
			<view class="yes" v-else @click="patientQuide()">重新提交</view>
		</view>
	</view>
</template>

<script>
	const cityData = require('@/https/data.js')
	export default {
		data() {
			return {
				optionId: '',
				// 自定义界面状态 0:第一次提交 1:二次上传 2:信息查询 
				htmlType: 0,
				ishtmlType: false, //是否可输入
				// 演示地址，请勿直接使用
				action: 'http://www.example.com/upload',
				fileList: [],
				Dropdown: false,
				DropdownIndex: 0,
				selectType: false,
				selectIndex: 0,
				itemList: [],
				show: false, //成功弹框
				getUploading: [], //上传分类
				// 第一次上传所需要值
				FormData: {
					title: '', //标题
					uploadingName: '', //分类名称	
					name: '', //姓名
					city: '', //城市
					province: '', //省份
					hospital: '', //医院名称
					caseName: '', //病历类型	
					remark: '', //备注
					pic: [], //上传图片
					mhFile: [], //上传文件
					mhFileName: [], //文件名称（小程序使用）
				},
				border: false,
				mhFileTwo: [], //二次上传
				mhFileTwoName: [], //二次上传名称
				uploadData: {
					type: 0
				},
				ppt: '',
				yesType: 1, //显示 提交按钮 还是重新提交
				maxCount: 10, //上传图片数量限制

				provinceType: false,
				provinceList: [],
				cityType: false,
				cityList: [],
				wisBllx: ''
			}
		},
		onLoad(option) {
			console.log(cityData.data)
			this.provinceList = cityData.data;

			uni.setNavigationBarTitle({
				title: '上传新病例'
			});
			this.action = this.$httpUrl + '/api/uploadLocality'
			if (option.id) {
				this.optionId = option.id
				if (uni.getStorageSync('token') && option.id == JSON.parse(uni.getStorageSync('uploadData')).id) {
					this.uploadData = JSON.parse(uni.getStorageSync('uploadData'))
					// 是否专家分配
					if (this.uploadData.allocation == 2) {
						// 二次上传完 展示详情
						this.htmlType = 2
						this.ishtmlType = true
					} else {
						if (this.uploadData.firstTrial == 2 && this.uploadData.isSecondaryUpload == 2 && this.uploadData.secondaryUpload == 1) {
							// 通过初审 并且 未二次上传
							this.htmlType = 1
							this.ishtmlType = true
						} else if ((this.uploadData.firstTrial == 2 && this.uploadData.isSecondaryUpload != 1) || (this.uploadData.firstTrial == 2 && this.uploadData.isSecondaryUpload == 1 && this.uploadData.secondaryUpload == 2)) {
							// 二次上传完 展示详情
							this.htmlType = 2
							this.ishtmlType = true
						} else if (this.uploadData.firstTrial == 1) {
							// 未通过重新上传
							this.htmlType = 0
							uni.setNavigationBarTitle({
								title: '重新编辑'
							});
							this.yesType = 2
						} else if (this.uploadData.firstTrial == 0) {
							// 未审核
							this.htmlType = 2
							this.ishtmlType = true
						}
					}
					console.log(this.htmlType)
					this.initDataTwo()
				}
			}
			this.getUploadingName()
			this.getCaseName()
			this.configInfo()
			// console.log(JSON.parse(uni.getStorageSync('uploadData')))
		},
		methods: {
			provinceConfirm(e) {
				console.log(e);
				this.FormData.province = e[0].label
				this.cityList = e[0].value
			},
			provinceMet() {
				if (this.ishtmlType) {
					return
				}
				this.provinceType = true
			},
			cityConfirm(e) {
				this.FormData.city = e[0].label
			},
			cityMet() {
				if (this.ishtmlType) {
					return
				}
				if (this.cityList.length != 0) {
					this.cityType = true
				} else {
					this.$refs.uToast.show({
						title: '请先选择省份',
						type: 'error ',
					})
				}
			},
			format(str) {
				if (str.indexOf('ppt') != -1) {
					return true
				} else {
					return false
				}
			},
			// 二次上传赋值
			initDataTwo() {
				console.log(this.FormData, this.uploadData);
				for (let key in this.FormData) {
					if (key == 'pic') {
						if (this.uploadData[key] == '') {
							return
						}
						// 相关图片处理
						let arr = this.uploadData.picTwo.split(',')
						this.FormData[key] = arr
						// this.maxCount = 10 - arr.length
						arr.forEach(item => {
							this.fileList.push({
								url: item
							})
						})
					} else if (key == 'mhFile') {
						if (this.uploadData[key] != '' && this.uploadData[key] != null) {
							if (this.uploadData.secondaryUploadFile != '' && this.uploadData.secondaryUploadFile != null) {
								this.FormData[key] = this.uploadData[key].split(',').concat(this.uploadData.secondaryUploadFile.split(','))
							} else {
								// 相关文件处理
								this.FormData[key] = this.uploadData[key].split(',')

							}
						}
					} else if (key == 'mhFileName') {
						if (this.uploadData[key] != '' && this.uploadData[key] != null) {
							if (this.uploadData.secondaryUploadFileName != '' && this.uploadData.secondaryUploadFileName != null) {
								this.FormData[key] = this.uploadData[key].split(',').concat(this.uploadData.secondaryUploadFileName.split(','))
							} else {
								// 相关文件处理
								this.FormData[key] = this.uploadData[key].split(',')

							}
						}
					} else {
						this.FormData[key] = this.uploadData[key]
					}
				}
				console.log(this.FormData)
			},
			chooseMessageFile(type) {
				let this_ = this;
				wx.chooseMessageFile({
					count: 10,
					type: 'all',
					success(res) {
						console.log(res)
						const tempFilePaths = res.tempFiles
						for (let i = 0; i < tempFilePaths.length; i++) {
							if (tempFilePaths[i].path.indexOf('ppt') == -1 && tempFilePaths[i].path.indexOf('mp4') == -1) {
								this_.$refs.uToast.show({
									title: '请上传ppt或mp4格式.',
									type: 'error ',
								})
							} else {
								this_.uploadFile(tempFilePaths[i], type)
							}
						}

					}
				})
			},
			// 微信上传
			uploadFile(val, type) {
				wx.uploadFile({
					url: this.$httpUrl + '/api/uploadLocality2/' + val.name, //仅为示例，非真实的接口地址
					filePath: val.path,
					name: 'file',
					formData: {
						'file': val,
						'name': val.name,
					},
					success: (uploadFileRes) => {
						let data = JSON.parse(uploadFileRes.data)
						if (data.code == 200) {
							this.$refs.uToast.show({
								title: '上传成功',
								type: 'success',
							})
							if (type == 2) {
								// 补充资料上传
								this.mhFileTwo.push(data.result)
								this.mhFileTwoName.push(val.name)
							} else {
								// 第一次上传
								this.FormData.mhFile.push(data.result)
								this.FormData.mhFileName.push(val.name)
							}
						}
					},
					fail(err) {
						console.log(err)
					},
				});
			},
			// 上传接口
			patientQuide() {
				console.log(this.$refs.uUpload1.lists);
				if (this.optionId == '') {
					// 第一次上传
					if (this.FormData.title == '') {
						this.$refs.uToast.show({
							title: '请输入标题',
							type: 'error ',
						})
						return;
					}
					if (this.FormData.uploadingName == '') {
						this.$refs.uToast.show({
							title: '请输入上传分类',
							type: 'error ',
						})
						return;
					}

					if (this.FormData.name == '') {
						this.$refs.uToast.show({
							title: '请输入姓名',
							type: 'error ',
						})
						return;
					}
					if (this.FormData.province == '') {
						this.$refs.uToast.show({
							title: '请输入省份',
							type: 'error ',
						})
						return;
					}
					if (this.FormData.city == '') {
						this.$refs.uToast.show({
							title: '请输入城市',
							type: 'error ',
						})
						return;
					}
					if (this.FormData.hospital == '') {
						this.$refs.uToast.show({
							title: '请输入医院',
							type: 'error ',
						})
						return;
					}
					if (this.wisBllx == 1) {
						if (this.FormData.caseName == '') {
							this.$refs.uToast.show({
								title: '请输入病例类型',
								type: 'error ',
							})
							return;
						}
					}

					let files1 = [];
					// 通过filter，筛选出上传进度为100的文件(因为某些上传失败的文件，进度值不为100，这个是可选的操作)
					files1 = this.$refs.uUpload1.lists.filter(val => {
						return val.progress == 100;
					})
					console.log(files1)
					if (files1.length == 0) {
						this.$refs.uToast.show({
							title: '请上传相关照片',
							type: 'error ',
						})
						return;
					}
					let values = []
					files1.forEach(item => {
						if (item.response) {
							values.push(item.response.result)
						} else {
							values.push(item.url)
						}
					})

					// let values = files1.map(item => item.response.result)
					this.FormData.pic = values.join(',')
					if (this.FormData.mhFile instanceof Array) {
						this.FormData.mhFile = this.FormData.mhFile.join(',')
					}
					if (this.FormData.mhFileName instanceof Array) {
						this.FormData.mhFileName = this.FormData.mhFileName.join(',')
					}
					uni.showLoading({
						mask: true,
						title:'请稍后'
					})
					this.$http.patientQuide(this.FormData).then(res => {
						uni.hideLoading()
						if (res.data.code == 200) {
							console.log(res.data)
							if (this.htmlType == 0) {
								this.show = true;
							} else {
								this.$refs.uToast.show({
									title: '上传成功',
									type: 'success',
								})
								uni.navigateTo({
									url: '/pages/index/calendar',
								})
							}
						} else {
							this.$refs.uToast.show({
								title: res.data.message,
								type: 'error ',
							})
						}
					})
				} else {
					// 审核失败
					if (this.uploadData.firstTrial == 1) {
						let data = JSON.parse(JSON.stringify(this.FormData))
						data['firstTrial'] = '0';
						data['id'] = this.uploadData.id;
						if (data.title == '') {
							this.$refs.uToast.show({
								title: '请输入标题',
								type: 'error ',
							})
							return;
						}
						if (data.uploadingName == '') {
							this.$refs.uToast.show({
								title: '请输入上传分类',
								type: 'error ',
							})
							return;
						}
						if (data.name == '') {
							this.$refs.uToast.show({
								title: '请输入姓名',
								type: 'error ',
							})
							return;
						}
						if (data.city == '') {
							this.$refs.uToast.show({
								title: '请输入城市',
								type: 'error ',
							})
							return;
						}
						if (data.province == '') {
							this.$refs.uToast.show({
								title: '请输入省份',
								type: 'error ',
							})
							return;
						}
						if (data.hospital == '') {
							this.$refs.uToast.show({
								title: '请输入医院',
								type: 'error ',
							})
							return;
						}
						if (this.wisBllx == 1) {
							if (data.caseName == '') {
								this.$refs.uToast.show({
									title: '请输入病例类型',
									type: 'error ',
								})
								return;
							}
						}

						let files1 = [];
						// 通过filter，筛选出上传进度为100的文件(因为某些上传失败的文件，进度值不为100，这个是可选的操作)
						files1 = this.$refs.uUpload1.lists.filter(val => {
							return val.progress == 100;
						})
						console.log(files1)
						if (files1.length == 0) {
							this.$refs.uToast.show({
								title: '请上传相关照片',
								type: 'error ',
							})
							return;
						}
						let values = []
						files1.forEach(item => {
							if (item.response) {
								values.push(item.response.result)
							} else {
								values.push(item.url)
							}
						})
						// let values = files1.map(item => item.response.result)
						data.pic = values.join(',')
						data.picTwo = values.join(',')
						if (data.mhFile instanceof Array) {
							data.mhFile = data.mhFile.join(',')
						}
						if (data.mhFileName instanceof Array) {
							data.mhFileName = data.mhFileName.join(',')
						}
						uni.showLoading({
							mask: true,
							title:'请稍后'
						})
						this.$http.patientQuideEdit(data).then(res => {
							console.log(res)
							uni.hideLoading()
							if (res.data.code == 200) {
								this.$refs.uToast.show({
									title: '提交成功',
								})
								uni.navigateTo({
									url: '/pages/index/calendar',
								})
							} else {
								this.$refs.uToast.show({
									title: res.data.message,
									type: 'error ',
								})
							}
						})
					} else {
						// 二次上传
						if (this.mhFileTwo == '') {
							this.$refs.uToast.show({
								title: '请上传补充资料',
								type: 'error ',
							})
							return;
						}
						let files1 = [];
						// 通过filter，筛选出上传进度为100的文件(因为某些上传失败的文件，进度值不为100，这个是可选的操作)
						files1 = this.$refs.uUpload1.lists.filter(val => {
							return val.progress == 100;
						})
						console.log(files1)
						if (files1.length == 0) {
							this.$refs.uToast.show({
								title: '请上传相关照片',
								type: 'error ',
							})
							return;
						}
						let values = []
						files1.forEach(item => {
							if (item.response) {
								values.push(item.response.result)
							} else {
								values.push(item.url)
							}
						})
						// let values = files1.map(item => item.response.result)
						this.FormData.pic = values.join(',')
						this.FormData.picTwo = values.join(',')
						if (this.FormData.mhFile instanceof Array) {
							this.FormData.mhFile = this.FormData.mhFile.join(',')
						}
						if (this.FormData.mhFileName instanceof Array) {
							this.FormData.mhFileName = this.FormData.mhFileName.join(',')
						}
						// 二次上传
						if (this.htmlType == 1) {
							let datas = {
								id: this.optionId,
								secondaryUpload: 2,
								secondaryUploadFileName: this.mhFileTwoName.join(','),
								secondaryUploadFile: this.mhFileTwo.join(',')
							}
							console.log(datas)
							uni.showLoading({
								mask: true,
								title:'请稍后'
							})
							this.$http.patientQuideEdit(datas).then(res => {
								uni.hideLoading()
								console.log(res)
								if (res.data.code == 200) {
									this.$refs.uToast.show({
										title: '提交成功',
									})
									uni.navigateTo({
										url: '/pages/index/calendar',
									})
								} else {
									this.$refs.uToast.show({
										title: res.data.message,
										type: 'error ',
									})
								}
							})
						}
					}
				}
				// if(this.htmlType!=0){
				// 	// 二次上传 补充资料
				// 	if(this.FormData.mhFile instanceof Array){
				// 		this.FormData.mhFile = this.FormData.mhFile.concat(this.mhFileTwo).join(',')
				// 	}
				// }else{
				// 	if(this.FormData.mhFile instanceof Array){
				// 		this.FormData.mhFile = this.FormData.mhFile.join(',')
				// 	}
				// }
				console.log(this.FormData)

			},
			// 继续提交
			nextMeh() {
				console.log('继续提交')
				this.show = false

				this.fileList = []
				this.$refs.uUpload1.clear()
				this.FormData = {
					title: '', //标题
					uploadingName: '', //分类名称	
					name: '', //姓名
					city: '', //城市
					province: '', //省份
					hospital: '', //医院名称
					caseName: '', //病历类型	
					remark: '', //备注
					pic: [], //上传图片
					mhFile: [], //上传文件
					mhFileName: [], //文件名称（小程序使用）
				}
			},
			uploadMask() {
				console.log('false')
				this.Dropdown = false;
				this.selectType = false;
			},
			// 上传分类
			getUploadingName() {
				this.$http.getUploadingName()
					.then(res => {
						if (res.data.code == 200) {
							this.getUploading = res.data.result
							// this.DropdownIndex=res.data.result[0].id
						}
					})
			},
			// 病历分类
			getCaseName() {
				this.$http.getCaseName()
					.then(res => {
						if (res.data.code == 200) {
							this.itemList = res.data.result
						}
					})
			},
			// 系统设置
			configInfo() {
				this.$http.configInfo()
					.then(res => {
						if (res.data.code == 200) {
							console.log(res)
							// console.log(this.data)
							this.ppt = res.data.result.ppt
							this.wisBllx = res.data.result.wisBllx

						}
					})
			},
			// 下载文件
			downloadFile(url) {
				uni.showLoading({
					title: '正在下载……'
				});
				uni.downloadFile({
					url: url,
					success: (data) => {
						console.log('打印data', data)
						if (data.statusCode === 200) {
							console.log('下载成功');
							//隐藏加载框
							uni.hideLoading();
							//文件保存到本地
							uni.saveFile({
								tempFilePath: data.tempFilePath, //临时路径
								success: function(res) {
									// console.log('打印res',res)
									uni.showToast({
										icon: 'success',
										mask: true,
										// title: '文件已保存：' + res.savedFilePath, //保存路径
										title: '下载成功',
										duration: 2000,
									});

									//自动打开文档查看
									setTimeout(() => {
										var filePath = res.savedFilePath;
										uni.openDocument({ //新开页面打开文档，支持格式：doc, xls, ppt, pdf, docx, xlsx, pptx。
											filePath: filePath,
											showMenu: true,
											success: function(res) {
												console.log('打开文档成功');
											}
										});
									}, 1000)
								},
							});
						}
					}
				});
			},
			// 上传分类选择
			DropdownMeh(item) {
				this.FormData.uploadingName = item;
				this.DropdownIndex = item;
				this.Dropdown = false;
			},
			selectMeh(item) {
				this.FormData.caseName = item;
				this.selectIndex = item;
				this.selectType = false;

			},
			// 图片上传失败 清空
			progress1(res, index, lists, name) {
				// console.log(JSON.parse(res.data))
				if (JSON.parse(res.data).code == 0) {
					this.$refs.uToast.show({
						title: JSON.parse(res.data).msg,
						type: 'error ',
					})
					// this.$refs.uUpload1.clear()
				}
			},
			// 删除相关文件
			deFile(index, type) {
				if (type == 2) {
					this.mhFileTwo.splice(index, 1)
					this.mhFileTwoName.splice(index, 1)
				} else {
					this.FormData.mhFile.splice(index, 1)
					this.FormData.mhFileName.splice(index, 1)
				}
			},
			// 返回首页
			indexHerf() {
				uni.navigateTo({
					url: '/pages/index/index',
				})
			},
		}
	}
</script>

<style lang="scss">
	.upload {
		padding: 32rpx 32rpx 120rpx;

		.title {
			input {
				font-size: 48rpx;
				color: #000;
				padding-bottom: 24rpx;
			}
		}

		.flex {
			position: relative;

			.Dropdown {
				position: absolute;
				top: 0;
				z-index: 10;
				width: 100%;
				padding: 24rpx 36rpx 0;
				background-color: #fff;
				box-shadow: 0px 2rpx 20rpx 0px rgba(0, 0, 0, 0.1);
				border-radius: 16rpx;
				font-size: 28rpx;
				color: rgba(0, 0, 0, 0.8);

				.li {
					margin-bottom: 28rpx;
				}

				.active {
					color: $color;
				}
			}
		}

		.upData {
			display: inline-block;
			padding: 4rpx 24rpx;
			background: rgba(22, 127, 255, 0.1);
			border-radius: 24rpx;
			font-size: 28rpx;
			color: $color;

			image {
				width: 32rpx;
				height: 32rpx;
				margin-left: 12rpx;
			}
		}

		.box {
			box-sizing: border-box;
			padding: 32rpx 20rpx 0;
			background-color: #fff;
			border-radius: 24rpx;
			margin-top: 24rpx;

			.tit_box {
				font-size: 32rpx;
				color: $color;
			}

			.msg {
				display: block;
				margin-top: 24rpx;
				font-size: 28rpx;
				color: #000000;
				padding-bottom: 32rpx;
			}

			.tit {
				font-weight: 700;
				font-size: 32rpx;
				color: rgba(0, 0, 0, 0.8);
			}

			.input {
				position: relative;

				.u-upload {
					.u-list-item {
						width: 180rpx !important;
						height: 180rpx !important;
					}
				}

				.label {}

				.icon {
					width: 140rpx;
					color: rgba(0, 0, 0, 0.8);
				}

				.msg {
					color: rgba(0, 0, 0, 0.35);
					margin-left: 10rpx;
				}

				.list {
					padding: 20rpx;
					background: rgba(227, 66, 33, 0.1);
					border-radius: 24rpx;
					font-size: 28rpx;
					color: #000000;
					margin-top: 20rpx;

					image {
						width: 40rpx;
						height: 40rpx;
						margin-right: 20rpx;
					}

					text {
						flex: 1;
						white-space: nowrap;
						text-overflow: ellipsis;
						overflow: hidden;
						word-break: break-all;
					}
				}

				.list1 {
					background: rgba(22, 127, 255, 0.1);
				}

				u-input {
					flex: 1;
				}

				image {
					width: 32rpx;
					height: 32rpx;
				}

				.upButton {
					padding: 24rpx 0;
					text-align: center;
					background: #F3F3F3;
					border-radius: 24rpx;
					color: rgba(0, 0, 0, 0.35);
					font-size: 32rpx;
					margin-top: 20rpx;

					image {
						vertical-align: middle;
					}
				}

				.select {
					position: absolute;
					top: 10rpx;
					z-index: 10;
					right: 0;
					width: 550rpx;
					padding: 24rpx 36rpx 0;
					background-color: #fff;
					box-shadow: 0px 2rpx 20rpx 0px rgba(0, 0, 0, 0.1);
					border-radius: 16rpx;
					font-size: 28rpx;
					color: rgba(0, 0, 0, 0.8);
				}
			}

			.input:last-child {
				border-bottom: 1px solid transparent;
			}
		}

		.template {
			padding: 24rpx 0;
			font-size: 28rpx;
			color: #000;

			.herf {
				color: $color;
			}
		}

		.suc {
			position: relative;
			text-align: center;
			width: 520rpx;
			height: 510rpx;
			margin: 0 auto;

			image {
				position: absolute;
				left: 0;
				top: 0;
				width: 100%;
				height: 510rpx;
			}

			.con {
				position: relative;
				z-index: 11;
				text-align: center;
				box-sizing: border-box;
				padding: 0 40rpx;
				overflow: hidden;

				.tit {
					font-size: 36rpx;
					color: $color;
					padding-top: 190rpx;
				}

				.p {
					width: 230rpx;
					margin: 32rpx auto 50rpx;
					font-size: 28rpx;
					color: rgba(0, 0, 0, 0.6);
				}

				.btn {
					display: flex;
					flex-direction: row;
					align-items: center;
					justify-content: space-between;

					view {
						width: 208rpx;
						height: 56rpx;
						line-height: 56rpx;
						text-align: center;
						border: 2rpx solid rgba(0, 0, 0, 0.35);
						font-size: 28rpx;
						color: rgba(0, 0, 0, 0.35);
						border-radius: 40rpx;
					}

					.next {
						background-color: $color;
						color: #fff;
						border: 2rpx solid $color;
					}
				}
			}
		}

		.u-mode-center-box {
			background-color: transparent !important;
		}

		.uploadBtn {
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			box-sizing: border-box;
			padding: 12rpx 32rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
			font-size: 32rpx;
			color: #fff;
			background-color: #fff;
			z-index: 11;

			.yes {
				width: 100%;
				box-sizing: border-box;
				border-radius: 48rpx;
				padding: 20rpx 0;
				text-align: center;
				background-color: $color;
			}
		}
	}
</style>