基于vue.js的跨平台框架 uni-app商城 毕业设计（3）用户注册

vue页面代码

<template>
<view>
	<form @submit="mysubmit" >
	<view class="zhuce">
		<view class="zhuce_zuo">手机号</view>
		<input type="text" class="zhuce_zhong" placeholder="请输入手机号" name="uname" />
		<view class="zhuce_you" style="display: none;">验证码</view>
	</view>
	<view class="zhuce" style="display: none;">
		<view class="zhuce_zuo">验证码</view>
		<input type="text" class="zhuce_zhong" placeholder="请输入验证码" />
		<view class="zhuce_you">已经发送</view>
	</view>	
	<view class="zhuce">
		<view class="zhuce_zuo">设置密码</view>
		<input type="text" class="zhuce_zhong" placeholder="请输入密码" name="upwd1" />
	</view>		
	<view class="zhuce">
		<view class="zhuce_zuo">确认密码</view>
		<input type="text" class="zhuce_zhong" placeholder="请输入密码" name="upwd2" />
	</view>		
	
	<view class="fujia">
		<checkbox class="fujia_check">阅读并同意《注册协议》</checkbox>
		<button class="fujia1" form-type="submit">注册并登陆</button>
		<view class="fujia2">登陆账号为您输入的手机号码</view>
		<navigator class="fujia3" url="/pages/d/u_login/u_login">已经有账号，去登录</navigator>
	</view>
	</form>	
</view>
</template>

<script>
	export default {
     
		data() {
     
			return {
     
				
			}
		},
		methods: {
     
			mysubmit:function(e){
     
				console.log("触发了提交事件")
				//var shuju = e.detail.value
				//shuju = JSON.stringify(shuju);
				//console.log("获取的数据：" + shuju)
				var uname = e.detail.value.uname.toString();
				var upwd1 = e.detail.value.upwd1;
				var upwd2 = e.detail.value.upwd2;
				if (uname.length > 0 && upwd1.length > 0 && upwd2.length > 0)
				{
     
					 if (upwd1 == upwd2){
     
						 //提交数据
						 //url:this.$WebURL.WebUrl.phpweb + "/wx_check_reg_yonghu.php",	
						 uni.request({
     
						 	url:this.$WebURL.WebUrl.phpweb + "/wx_check_reg_yonghu.php",	
							data:{
     
								yhm:uname,
								mm:upwd1
							},
							success: (res) => {
     
								console.log("返回信息："+res.data)
								if(res.data.zt=="yes"){
     
								  console.log("注册成功:"+res.data.xinxi+",用户id："+res.data.uid)
								  //将返回信息写入本地缓存，用以判断用户是否登陆和数据归属
								  uni.setStorage({
     
									key: 'u_login',
									data: 'yes',
									success:function(){
     
									  console.log("写入缓存成功")
									}
								  })
								  uni.setStorage({
     
									key: 'u_id',
									data: res.data.uid,
								  })  
								  uni.setStorage({
     
									key: 'u_name',
									data: uname,
									success:function(){
     
									  wx.switchTab({
     
										url: '/pages/d/d',
									  })
									}
								  })               
								} else if(res.data.zt=="no"){
     
									console.log("注册失败:" + res.data.xinxi )
								}								
							},
							fail: () => {
     
								
							}
						 })
					 }else{
     
						 uni.showToast({
     
						 	title:"密码不一致"
						 })
					 }
				}else{
     
					uni.showToast({
     
						title:"请输入账号和密码"
					})
				}
				
			},
			
			
		
		
		}
	}
</script>

<style>
.fujia{
     display: flex; flex-direction: column; padding: 5px;justify-content: center;}
.fujia_check{
     padding: 10px;}
.fujia1{
      width: 100%; background-color: #DD524D; color:  #FFFFFF;}
.fujia2{
     text-align: center;  font-size: 14px; color: #333333;}
.fujia3{
     text-align: center;}
.zhuce{
     display: flex; border-bottom: 1px solid #C0C0C0;}
.zhuce_zuo{
     width: 4em;padding: 5px;}
.zhuce_zhong{
     flex: 1;padding: 5px;}
.zhuce_you{
     width: 4em; text-align: center; background-color: #ECEBF0;padding: 5px;}
</style>