zhihuixiaoyuan2-ui/mine/components/login/applyregister.vue

<template>
  <view class="regbox flexdc">
	  <uni-forms  ref="form" :rules="rules" :modelValue="variables">
	  	<!-- <uni-forms-item label="学校" required name="schoolName">
	  		<uni-easyinput :inputBorder="false" v-model="variables.schoolName" placeholder="请输入学校名称"></uni-easyinput>
			<view class="rimg">	</view>
	  	</uni-forms-item> -->
		<view @click="getSchoolFn">
			<uni-forms-item label="学校" name="schoolName">
				<view  class="f16  flex1 txr" :class="variables.schoolName?'co16':'coa'">{{variables.schoolName||'请选择学校'}}</view>
				<view class="rimg"><image :src="rimg" class="rimgs"></image>	</view>
			</uni-forms-item>
		</view>
		<!-- <picker  range-key='dictLabel' :value="xxindex" :range="schoolval" @change='bindDateChangea'>
			<uni-forms-item label="学校" name="schoolName">
					<view  class="f16  flex1 txr" :class="variables.schoolName?'co16':'coa'">{{variables.schoolName||'请选择学校'}}</view>
			<view class="rimg"><image :src="rimg" class="rimgs"></image>	</view>
			</uni-forms-item>
		</picker> -->
		<uni-forms-item name="userName" required label="负责人姓名">
			<uni-easyinput :inputBorder="false" v-model="variables.userName" placeholder="请输入负责人姓名"></uni-easyinput>
			<view class="rimg">	</view>
		</uni-forms-item>
	  	<uni-forms-item name="userPhone" required label="联系方式">
	  		<uni-easyinput :inputBorder="false" type="number" v-model="variables.userPhone" placeholder="请输入您的联系方式"></uni-easyinput>
			<view class="rimg">	</view>
	  	</uni-forms-item>
		<view class="noborder">
			<uni-forms-item name="registerSchoolFileList"  style='margin-bottom: 0;'>
				<view class="flexc" style="width: 100%;">
					<view class="f16 fw co16 flex0 ">上传资质</view>
					<view class="infolist_a co47" ><lsj-upload
						    ref="lsjUpload"
						    childId="upload1"
						    :width="width"
						    :height="height"
						    :option="option"
						    :size="size"
							:count="count"
						    :formats="formats"
						    :debug="debug"
						    :instantly="instantly"
						    @progress=""
							@uploadEnd="onuploadEnd" >
						        <view class="btn" :style="{width: width,height: height}">去上传</view>
						</lsj-upload></view>
					</view>
			</uni-forms-item>
			
		</view>
		
		<view>
			<view class="cldelistbf flexc"  v-for="(ite,idx) in filelist" :key='idx'>
				<view class="flext f15 co16 flex1" @click="getDown(ite.url)">
					<view class="imgl"><image :src="wimg" ></image></view>
					<view class="tit">{{ite.name}}</view>
				</view>
				<!-- 删除 -->
				<view class="delimg flex0" @click.stop="getDelFj(idx)">
					<image :src="delimg" class="imgr"></image>
				</view>
			</view>
		</view>
		<view class="infolist_tit">注：须上传学校法人营业执照，或后期补传</view>
		<view class="infolist_b"><text>*</text>请上传大小不超过<text>100MB</text>格式为<text>pdf</text>的文件</view>
	  </uni-forms>
	  <view class="mt26">
	  	<view class="rbtn" @click="getSubmit">提交</view>
	  	 <view class="apllytxt"><text>*</text>请确认您提交的信息真实有效</view>
	  </view>
  </view>
</template>

<script>
	// import tabSearch from "@/components/toptab/search.vue"
	import config from '@/config'
	 const baseUrl = config.baseUrl
	 const Clientid = config.Clientid
	 import { getToken } from '@/utils/auth'
	 import {getschoolregFn,getschoolDetFn,getschoolPutFn} from "@/api/mine/register.js"
	 import {getDeptList} from "@/api/mine/mine.js"
  export default {
	  props:{
	  	schoolval:{
	  		type: Array,
	  		default () {
	  			return []
	  		}
	  	},
		schoolobj:{
			type: Object,
			default () {
				return {}
			}
		}
	  },
	watch:{
		schoolobj(val){
			this.schooltit=val
			this.variables.schoolName=val.schoolName
		}
	},
	mounted() {
		
	},
	data(){
		return{
			//附件
			  option: {
			        // 上传服务器地址，需要替换为你的接口地址
			        // url: baseUrl+'/common/upload', // 该地址非真实路径，需替换为你项目自己的接口地址
			        url: baseUrl+'/common/upload', // 该地址非真实路径，需替换为你项目自己的接口地址
			        // 上传附件的key
			        name: 'file',
			        // 根据你接口需求自定义请求头,默认不要写content-type,让浏览器自适配
			        header: {
			            // 示例参数可删除
			            'Authorization':  'Bearer ' + getToken(),
			            'Clientid':  Clientid,
			        },
			        // 根据你接口需求自定义body参数
			        formData: {
						
			        }
			    },
			// 选择文件后是否立即自动上传，true=选择后立即上传
			instantly: true,
			// 必传宽高且宽高应与slot宽高保持一致
			width: '',
			height: '44rpx',
			// 限制允许上传的格式，空串=不限制，默认为空
			formats: 'pdf',
			// 文件上传大小限制
			size: 100,
			// 文件数量限制 默认10
			count: 5,
			// 文件回显列表
			files: new Map(),
			// 微信小程序Map对象for循环不显示，所以转成普通数组，不要问为什么，我也不知道
			wxFiles: [],
			// 是否打印日志
			debug: false,
			filelist:[], 
			rimg:require("@/static/images/rimg.png"),
			wimg:require('@/static/images/read.png'),
			delimg:require('@/static/images/del.png'),
			cyvalue:'',
			cyindex:0,
			cylist:[{label:'是',id:'Y'},{label:'否',id:'N'}],
			variables:{
				"schoolName": "",
				"userName": "",
				"userPhone": "",
				"registerSchoolFileList": [],
			},
			rules: {
			  schoolName: {rules: [{required: true,errorMessage: '请输入学校名称'}]},
			  userName: {rules: [{required: true,errorMessage: '请输入负责人姓名'}]},
			  userPhone: {rules: [{required: true,errorMessage: '请输入联系方式'},{pattern:"^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\\d{8}$",errorMessage: '请输入正确的联系方式'}]},
			  // registerSchoolFileList: {rules: [{required: true,errorMessage: '请上传附件' } ]},
			},
			wxInfo:{},
			xxindex:[],
			id:'',
			type:'add',//页面类型
			schooltit:{},
			// procDefId:'flow_1se5q74i:17:32545',//流程定义id
			// deploymentId:'32542',
			// type:'',//0学校注册 1 家长  2 老师
		}
	},
	methods:{
		getSchoolFn(){
			console.log(this.schooltit)
			this.$tab.navigateTo(`/mine/pages/mine/school?id=`+this.schooltit.schoolNameId+'&name='+this.schooltit.schoolName)
		},
		// 选择学校
		bindDateChangea(e) {
			var val = e.detail.value;
			var v = this.schoolval[val];
			this.variables.schoolName=v.dictLabel
			this.variables.schoolId=v.dictValue
		},
		getSubmit(){
			var that=this;
			this.$refs.form.validate().then(res => {
				var params=JSON.parse(JSON.stringify(that.variables));
				// params.openId=that.wxInfo.openId;
				this.$emit('getschoolregFn',params)
					
			})
			
			
		},
		 onuploadEnd(item) {
		 	var newobj={}
		 	var responseText=JSON.parse(item.responseText)
		 	// newobj.name=item.name;
		 	newobj.name=responseText.originalFilename;
		 	newobj.url=responseText.fileName;
		 	this.filelist.push(newobj)
		 		this.variables.registerSchoolFileList=JSON.parse(JSON.stringify(this.filelist))
		 },
		 getDelFj(idx){
		 	this.filelist.splice(idx,1)
		 		this.variables.registerSchoolFileList=JSON.parse(JSON.stringify(this.filelist))
		 },
		 getDown(e){
		 	uni.showLoading({
		 		title: '加载中'
		 	});
		 	var url=baseUrl+e;
		 	uni.downloadFile({
		 		url: url,//文件的下载路径
		 		success(result) {
		 				uni.hideLoading()
		 			var filePath = result.tempFilePath;
		 			   uni.openDocument({
		 			     filePath: filePath,
		 			     showMenu: true,
		 			     success: function (res) {
		 			     }
		 			   });
		 		},
		 		fail(res) {uni.hideLoading()}
		 	})
		 },
	},
	
  }
</script>

<style lang="scss" scoped>
.infolist_a{height: 44rpx;flex: 1;text-align: right;font-size: 32rpx;}


.cldelistbf {
	padding: 20rpx 24rpx;
		image{flex: 0 0 auto;}
		.imgl{width: 40rpx;height: 40rpx;display: flex;align-items: center;justify-content: center;margin-right: 24rpx;
			image{width: 40rpx;height: 34rpx;}
		}
		.imgr{width: 30rpx;height: 30rpx;margin-left: 24rpx;}
		.tit{line-height: 40rpx;font-size: 32rpx;color: #161616;flex: 1;word-break: break-all;}
	}
.infolist_b{color: #aaaaaa;font-size: 26rpx;padding:0 24rpx;margin-top:10rpx;
	text{word-break: break-all;margin: 0 4rpx;color: #ff0000;}
}
.infolist_tit{font-size: 26rpx;padding:0 24rpx;color: #ff0000;margin-top: 36rpx;}
.regbox{padding: 20rpx 36rpx 80rpx;box-sizing: border-box;min-height: auto;overflow: auto;}
.regbox /deep/ .uni-forms{flex: 1;}
.regbox /deep/ .uni-forms-item__label{flex: 0 0 auto;width: auto !important;font-size: 32rpx;font-weight: bold;
color: #161616;}
.regbox /deep/ .uni-forms .uni-forms-item{padding: 36rpx 24rpx 20rpx;border-bottom: 2rpx #C1C1C1 solid;margin-bottom: 0;
}
.regbox /deep/ .uni-forms .noborder  .uni-forms-item{margin-bottom: 0;border-bottom: 0;}
.regbox /deep/ .uni-forms-item__content{display: flex;align-items: center;flex-direction: row;}
.regbox /deep/ .uni-easyinput{flex: 1;text-align: right;}
.regbox /deep/ .uni-easyinput__placeholder-class{font-size: 30rpx;}
.regbox /deep/ .uni-easyinput__content-input{font-size: 30rpx;}
 .regbox /deep/ .uni-forms-item__error{margin-top:20rpx;left: auto;right: 0;}
</style>