mobile_mj/pages/login/zhuce.vue

<template>
	<view>
		<cu-custom  :isBack="true" >
			<block slot="backText">返回</block>
			<block slot="content">用户注册</block>
		</cu-custom>
		<form>
			<view class="cu-form-group">
				<view class="title">姓名</view>
				<input placeholder="请输入姓名" name="input" v-model="myFormData.username"></input>
			</view>
			<view class="cu-form-group">
				<view class="title">单位名称</view>
				<input placeholder="请输入公司名称" name="input"  v-model="myFormData.companyname"></input>
			<!-- 	<text style="display: none;" >{{company}}</text> -->
			</view>
			<view class="cu-form-group">
				<view class="title">单位地址</view>
				<input placeholder="请输入公司地址" name="input"  v-model="myFormData.dizhi"></input>
		
			</view>

			<view class="cu-form-group">
				<view class="title">邮箱</view>
				<input placeholder="请输入公司邮箱" name="input"  v-model="myFormData.email"></input>
			</view>
 -->

			<!---->
			<view class="cu-form-group margin-top">
				<view class="title">性别</view> <input type="text" v-model="myFormData.sex" value="myFormData.sex"/> <text v-model="myFormData.sex" >{{myFormData.sex}}</text>
				<switch class='switch-sex' @change="SwitchC" :class="switchC?'checked':''" :checked="switchC?true:false"></switch>
			</view>
			
			
			

			<!--
			<view class="cu-form-group">
				<view class="title">邮箱</view>
				<input placeholder="输入邮箱" name="input"  v-model="myFormData.email"></input>
			</view> -->
			
			<view class="cu-form-group">
				<view class="title">密码</view>
				<input placeholder="请输入六位以上密码" name="input" type="password" v-model="myFormData.password"></input>
			</view>
			<view class="cu-form-group">
				<view class="title">确认密码</view>
				<input placeholder="请确认密码" name="input" type="password" v-model="myFormData.confirm"></input>
			</view>
			
			<!--
			<view class="cu-form-group margin-top  shadow-warp" :class="[shape=='round'?'round':'']">
				<view class="title"><text class="cuIcon-mobile margin-right-xs"></text>手机号:</view>
				<input placeholder="请输入手机号" type="number" maxlength="11" v-model="phone"></input>
			</view>
			-->
			<view class="cu-form-group margin-top">
				<view class="title">手机号码</view>
				<input placeholder="输入手机号码" type="number" maxlength="11" name="input" v-model="myFormData.phone"></input>
				<view class="cu-capsule radius">
					<view class='cu-tag bg-blue '>
						+86
					</view>

				</view>
			</view>
			<view class="cu-form-group margin-top">
				<view class="title">验证码</view>
				<input placeholder="短信验证码" type="number" name="input" v-model="myFormData.smsCode"></input>
                <view class="action">
                			<button class="cu-btn line-blue sm" :disabled="!isSendSMSEnable" @click="onSMSSend"> {{ getSendBtnText }}</button>
                </view>
			</view>
			
			<view class="padding flex flex-direction">
				<button class="cu-btn bg-blue lg"  @click="onSubmit">注册并登录</button>
			</view>
		</form>
	</view>
</template>

<script>
	import { mapActions } from "vuex"
	import configService from '@/common/service/config.service.js';
	import { ACCESS_TOKEN,USER_NAME,USER_INFO } from "@/common/util/constants"
	import {formatDate} from '@/common/util/date.js';
	
	export default {
		data() {
			return {
				index: -1,
				switchC: true,
				imgList: [],				
				uploadUrl:"/sys/common/upload",
				companyname:"",
				myFormData:{
					dizhi:'',
					youxiang:'',
					smsCode:'',
					avatar:'',
					companyname:'',
					username:'',
					sex:"男",
					confirm:'',
					phone:'',
					email:'',
					id:'',
					code:'',
				},
				smsCountDown: 0,
				smsCountInterval: null,
				
			};
		},
		onLoad: function (option) {
			//console.log(this.myFormData.sex)
			//console.log(formatDate(new Date(),"yyyy-MM-dd")) 
			//console.log("this.$Route.query",this.$Route.query);
			let query=this.$Route.query
			if(query){
				this.myFormData=query;
				if(this.myFormData.sex=='女'){
				  this.switchC = false
				}else if(this.myFormData.sex=='男'){
				  this.switchC = true
				}

				if(this.myFormData.avatar){
				  this.imgList=[this.myFormData.avatar]
				}
				if(!this.myFormData.birthday){
				  this.myFormData.birthday= '无'
				}
				if(this.myFormData.identity=='普通成员'){
				  this.myFormData.identity = 1
				}else if(this.myFormData.identity=='上级'){
				  this.myFormData.identity = 2
				}
				if(this.myFormData.status=='正常'){
				  this.myFormData.status = 1
				}else if(this.myFormData.status=='冻结'){
				  this.myFormData.status = 2
				}
				 this.Avatar=this.myFormData.avatar
	
				Object.keys(this.myFormData).map(key=>{
				  if(this.myFormData[key]=='无'){
					this.myFormData[key] = ''
				  }
				})
				console.log("this.myFormData",this.myFormData)
			}
		},
		computed: {
/* 			  company(){

				 
				 
				 //console.log(data)
				 
				  return company;
			  }, */			  
		      isSendSMSEnable() {
		        return  this.smsCountDown <= 0 && this.myFormData.phone>1111;
		      },
		      getSendBtnText() {
		        if (this.smsCountDown > 0) {
		          return this.smsCountDown + '秒后发送';
		        } else {
		          return '发送验证码';
		        }
		      },
		      canSMSLogin() {
		        return this.userName.length > 4 && this.smsCode.length > 4;
		      },
		      canPwdLogin() {
		        return this.userName.length > 4 && this.password.length > 4;
		      },
		},
		mounted() {
			
		},
		methods: {
		...mapActions([ "mLogin","PhoneLogin","mSign", "ThirdLogin" ]),
			onSMSSend() {
				let smsParams = {};
				smsParams.phone=this.myFormData.phone;
				smsParams.smsmode="0";
				let checkPhone = new RegExp(/^[1]([3-9])[0-9]{9}$/);
			    if(!smsParams.phone || smsParams.phone.length==0){
					this.$tip.toast('请输入手机号');
					return false
				}
				if(!checkPhone.test(smsParams.phone)){
					this.$tip.toast('请输入正确的手机号');
					return false
				}
				this.$http.post("/ibps/business/v3/mobile/sys/verification",smsParams).then(res=>{
				  if(res.data.state==200){
					  
					  
					this.smsCountDown = 60;
					this.startSMSTimer();
				  }else{
					console.log(res)
					this.smsCountDown = 0;
					this.$tip.toast("发送异常");
				  }
				});
			  },
			  startSMSTimer() {
			  	this.smsCountInterval = setInterval(() => {
			  	  this.smsCountDown--;
			  	  if (this.smsCountDown <= 0) {
			  		clearInterval(this.smsCountInterval);
			  	  }
			  	}, 1000);
			  },
			onSubmit() {
			  let myForm = this.myFormData;
			  let checkPhone = new RegExp(/^[1]([3-9])[0-9]{9}$/);
			  let checkEmail = /^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/;
			  console.log("myForm",myForm)
			  

			  if(!myForm.username || myForm.username.length==0){
			  				this.$tip.alert('请输入姓名');
			  				return false
			  }
			  if(!myForm.companyname || myForm.companyname.length==0){
			  				this.$tip.alert('请输入公司名称');
			  				return false
			  }
			  if(!myForm.password || myForm.password.length<6){
			  				this.$tip.alert('正确输入密码');
			  				return false
			  }
			  if(myForm.password != myForm.confirm){
				  
			  				this.$tip.alert('两次输入密码不一致');
			  				return false
			  }
			  
			  
			  if(!myForm.phone || myForm.phone.length==0){
				this.$tip.alert('请输入手机号');
				return false
			  }
			  if(!checkPhone.test(myForm.phone)){
				this.$tip.alert('请输入正确的手机号');
				return false
			  }
			  if(!myForm.smsCode || myForm.smsCode.length!=6){
			  				this.$tip.alert('请输入六位验证码');
			  				return false
			  }
				//this.myFormData.id = this.$store.getters.userid
				console.log('myform',this.myFormData)
				
				
				//首先往客户意向表加数据
				 let data =
				{
					id: "",
					keHuMingCheng: myForm.companyname, //客户名称
					keHuDianHua:myForm.phone, //电话
					youXiang:myForm.email , //邮箱
					lianXiRen: myForm.username, //联系人
					laiYuanQuDao: "手机注册", //来源
					diZhi: myForm.dizhi, //地址
					beiZhu: "", //备注
					xiaoShouRenYuan: "", //销售人
					qianZaiZhuanYiShi: formatDate(new Date(),"yyyy-MM-dd")
				}
				let parajjj={
					boCode:"yxkh",
					version:"0",
					formKey:"yxkh",
					pk:"",
					data:JSON.stringify(data)
				}
				
				//ibps/business/v3/data/template/saveFormData/vo
				this.$tip.loading();
				let that=this;
				this.$http.post("ibps/business/v3/data/template/saveFormData/vo", parajjj).then(res => {
					if (res.data.state == 200) {
						let result = res.data.variables;
						that.myFormData.companyId=result.id;
						
								that.mSign(that.myFormData).then(res=>{
									console.log(res)
									that.$tip.loaded();
									if (res.data.state==200){
		
										console.log(res.data.data)
										console.log(that.$store)
										 that.$tip.success('登录成功!')
										 that.$Router.replaceAll({name:'index'})						 
									}
									else{
										that.$tip.error(res.data.message)
									}
								}).catch(()=>{
									that.$tip.loaded();
									that.$tip.error('提交失败')
								});
								
								
								
					}else{
						that.$tip.loaded();
						that.$tip.error('提交失败')
					}				
					}).catch(()=>{
					this.$tip.loaded();
					this.$tip.error('提交失败')
				});;
				
				
				
				

				
				
				
			},
			DateChange(e) {
				this.myFormData.birthday = e.detail.value
			},
			SwitchC(e) {
				
				this.switchC = e.detail.value
				if(this.switchC){this.myFormData.sex="男"}else{this.myFormData.sex="女"}
			},
			ChooseImage() {
				var that=this;
				uni.chooseImage({
					count: 4, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: (res) => {
						that.$http.upload(that.$config.apiUrl+that.uploadUrl, {
								filePath: res.tempFilePaths[0],
								name: 'file'
							})
							.then(res => {
								that.myFormData.avatar=res.data.message;
							})
							.catch(err => {
								that.$tip.error(err.data.message)
							});
						this.imgList = res.tempFilePaths
					}
				});
			},
			ViewImage(e) {
				uni.previewImage({
					urls: this.imgList,
					current: e.currentTarget.dataset.url
				});
			},
			DelImg(e) {
				uni.showModal({
					title: '召唤师',
					content: '确定要删除这段回忆吗？',
					cancelText: '再看看',
					confirmText: '再见',
					success: res => {
						if (res.confirm) {
							this.imgList.splice(e.currentTarget.dataset.index, 1)
						}
					}
				})
			}
		}
	}
</script>

<style>
	.cu-form-group .title {
		min-width: calc(4em + 15px);
	}
</style>