forest-H5/pages/usercenter/authentication/authentication.vue

<template>
	<view class="pages">	
		<view class="form-item-type nomal-top">
			<view class="form-item">
				<view class="form-item-til">主体类型</view>
				<view class="form-item-con">
					<picker @change="bindPickerChange" :value="typeindex" :range="typearray">
						<view class="uni-input">{{typearray[typeindex]}}</view>
					</picker>
					<!-- <input type="text" placeholder="请输入主体类型" v-model="params.type" value="" /> -->
				</view>
			</view>
			<view class="form-item"  v-if="typeindex==0">
				<view class="form-item-til">主体名称</view>
				<view class="form-item-con">
					<input type="text" placeholder="请输入单位/企业名称" v-model="params.companyName" value="" />
				</view>
			</view>
			<view class="form-item"  v-if="typeindex==0">
				<view class="form-item-til">邀请码</view>
				<view class="form-item-con">
					<input type="text" placeholder="请输入邀请码" v-model="params.certNo" value="" />
				</view>
			</view>		
			<view class="form-item">
				<view class="form-item-til">联系人</view>
				<view class="form-item-con">
					<input type="text" placeholder=" 请输入姓名" v-model="params.username" value="" />
				</view>
			</view>	
			<view class="form-item">
				<view class="form-item-til">手机号码</view>
				<view class="form-item-con">
					<input type="text" placeholder="请输入手机号码" maxlength="11" v-model="params.phone" value="" />
				</view>
			</view>	
			<view class="form-item">
				<view class="form-item-til">邮箱</view>
				<view class="form-item-con">
					<input type="text" placeholder="请输入邮箱" v-model="params.mail" value="" />
				</view>
			</view>
			<view class="form-item">
				<view class="form-item-til">地址</view>
				<view class="form-item-con">
					<input type="text" placeholder="请输入地址" v-model="params.address" value="" />
				</view>
			</view>
		</view>
		<!-- form-item-type end -->
		<!-- <view class="form-item-type nomal-top">
			<view class="form-item upfile">
				<view class="form-item-til">资料上传<text class="form-item-til-tip">(营业执照及其他证明材料)</text></view>
				<view class="form-item-con">					
					<view class="form-item-chooseIMGs-wrap">
						<image v-for="(item,index) in params.media" :key="index" :src="item" class="choosedIMG" ></image>
					</view>
					<view class="chooseIMG-btn">
						<image class="chooseIMG-btn-img" @click="chooseimg" src="/static/img/icon-upload.png"></image>
					</view>					
				</view>				
			</view>
		</view> -->
		<!-- form-item-type end -->
		<view class="page-tip">
			<text class="page-tip-til">特别提示：</text>提交材料后，管理员将审核您的信息，如核实无误将进行认证。
		</view>
		<view class="bottom-btn-wrap">
			<button class="bottom-btn" @click="saveclick" type="primary">保存</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				params:{
					token:'',
					tokenhead:'',
					companyName:'',
					type:'',
					username:'',
					phone:'',
					mail:'',
					address:'',
					// media:[],
					typeindex:0,
					certNo:'',
				},
				typeindex:0,
				// typearray:['供应商','农户'],
				typearray:['供应商'],
				//验证的规则
				rules:{
					phone:{
						rule:/^1[3456789]\d{9}$/,
					},
					mail:{
						rule:/^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/,
					},
				},
				//表单检查结果
				checkStatus:false,
				
				
			}
		},
		onShow() {
			let serf = this;
			//检查登录,获取token
			// let loginRes = this.checkLogin('/pages/index/index', '2');
			// if(!loginRes){return false;}
			// serf.params.token=loginRes[0];			
		},
		onLoad() {
			this.params.type = this.typearray[this.typeindex];
			let self = this;
			uni.getStorage({
				key:'token',
				success: function (res) {
					self.params.token = res.data;
				   // console.log(res.data);
				}
			});
			uni.getStorage({
				key:'tokenhead',
				success: function (res) {
					self.params.tokenhead = res.data;
				   // console.log(res.data);
				}
			});
		},
		methods: {
			bindPickerChange: function(e) {
				console.log('picker发送选择改变，携带值为', e.target.value)
				this.typeindex = e.target.value;				
				this.params.typeindex = e.target.value;
				this.params.type = this.typearray[this.params.typeindex];
			},
			//选择图片
			chooseimg() {
				let _self = this;
				uni.chooseImage({
					count: 2,
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], //从相册选择
					success: function(res) {
						const tempFilePaths = res.tempFilePaths;
						_self.image = tempFilePaths[0];
						console.log("tempFilePaths[0]", tempFilePaths[0]) //能够打印出选中的图片
						_self.iconcheck = 1; //点击后图片更改状态由0变成1
						console.log('111', JSON.stringify(res.tempFilePaths));
						_self.params.media = res.tempFilePaths;
						// _self.params.media = _self.params.media.concat(res.tempFilePaths)
						console.log(_self.params.media);
								
					},
					error: function(e) {
						console.log(e);
					}
				});
			},
			//点击保存
			saveclick(){
				// console.log(this.params.type);
				// console.log(this.params.typeindex);
				// console.log(this.params.certNo);
				
				
				this.checkStatus = this.check_form();
				if(this.checkStatus){
					uni.showLoading({
					    title: '请稍等'
					});	
						
					let thetoken = this.params.tokenhead+this.params.token;
					this.$api.http.put(this.config.apiBaseurl+'/wechat/h5/cert',this.params,{header: {Authorization:thetoken}}).then( res =>{
						uni.hideLoading();
						uni.showToast({
							icon:'success',
							title:res.data.message,
							duration: 3000
						});
						console.log(res)
					}).catch(err => {
						uni.hideLoading();
						console.log(err)
					});
				
					// setTimeout(function () {
					//     uni.hideLoading();
					// }, 1500);
					
					setTimeout(() => {
						uni.showToast({
							icon:'success',
							title:`保存成功,请等待审核!`,
							duration: 2000
						});
					}, 3000);
					
					
					setTimeout(() => {
						uni.switchTab({
							url:'/pages/usercenter/usercenter'
						})
					}, 3000);
					
				}
				
			},
			//表单验证
			check_form() {
				if(this.params.companyName.length <= 0 && this.params.typeindex == 0) {					
					uni.showToast({icon:'none',title:`请输入单位/企业名称!`,duration: 2000});					
					return false;
				}
				if(this.params.certNo.length <= 0 && this.params.typeindex == 0) {
					uni.showToast({icon:'none',title:`请输入邀请码!`,duration: 2000});					
					return false;
				}
				if(this.params.typeindex.length <= 0) {
					uni.showToast({icon:'none',title:`请输入主体类型!`,duration: 2000});					
					return false;
				}
				if(this.params.username.length <= 0) {
					uni.showToast({icon:'none',title:`请输入姓名!`,duration: 2000});					
					return false;
				}
				if(!this.rules['phone'].rule.test(this.params.phone)) {
					uni.showToast({icon:'none',title:`请输入正确手机号码!`,duration: 2000});					
					return false;
				}
				if(!this.rules['mail'].rule.test(this.params.mail)) {
					uni.showToast({icon:'none',title:`请输入正确邮箱!`,duration: 2000});					
					return false;
				}
				if(this.params.address.length <= 0) {
					uni.showToast({icon:'none',title:`请输入地址!`,duration: 2000});					
					return false;
				}
				// if(this.params.media.length < 2) {
				// 	uni.showToast({icon:'none',title:`请填上传所需资料!`,duration: 2000});					
				// 	return false;
				// }				
				return true;
			},
			

		}
	}
</script>

<style scoped>
	/* @import url("./authentication.css"); */
</style>