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

vue页面代码

<template>
<view>
<form @submit="mysubmit" >
<view class="denglu">
	
	<view class="denglu_mc">欢迎登录商城</view>
	
	<view class="denglu_xiangmu">
		<image src="/static/img/yonghu.png" class="denglu_xiangmu_img"></image>
		<input type="text" placeholder="请输入用户名" class="denglu_xiangmu_input" name="uname" />
	</view>
	<view class="gaodu10"></view>
	
	<view class="denglu_xiangmu">
		<image src="/static/img/mima.png" class="denglu_xiangmu_img"></image>
		<input type="text" placeholder="请输入密码" class="denglu_xiangmu_input" name="upwd" />
	</view>	
	<view class="gaodu10"></view>
	
	<button class="denglu_putong" form-type="submit" size="mini">立即登录</button>
	<view class="gaodu10"></view>
	
	<view class="denglu_weixin" style="display: none;">微信登录</view>
	<view class="gaodu10"></view>
	<view class="gaodu10"></view>
	<view class="gaodu10"></view>
	
	<view class="qita">
		<navigator class="qita_zuo" url="/pages/a/a" open-type="switchTab">返回首页</navigator>
		<navigator class="qita_you" url="/pages/d/u_reg/u_reg">免费注册</navigator>
	</view>
	
</view>
</form>	
</view>
</template>

<script>
export default {
     
	data() {
     
		return {
     
			
		}
	},
	methods: {
     
		//普通登录
		mysubmit:function(e)
		{
     
			var that = this
			if (e.detail.value.uname == "" || e.detail.value.upwd ==""){
     
			  uni.showToast({
     
				title:"请填写用户名和密码！"
			  })
			}else{
      //填写了用户名和密码
				//提交数据
				//url:this.$WebURL.WebUrl.phpweb + "/wx_check_login_yonghu.php",	
				uni.request({
     
					url:this.$WebURL.WebUrl.phpweb + "/wx_check_login_yonghu.php",	
					data:{
     
					    yhm: e.detail.value.uname,
					    mm: e.detail.value.upwd
					},
					success: (res) => {
     
						if(res.data.zt=="yes"){
     
							//返回信息写入缓存
							wx.setStorage({
     
							  key: 'u_login',
							  data: 'yes',
							  success: function () {
     
								console.log("写入缓存成功")
							  }
							})
							wx.setStorage({
     
							  key: 'u_flid',
							  data: res.data.fl_id,
							  success: function () {
     
							  }
							})
							wx.setStorage({
     
							  key: 'u_name',
							  data: res.data.shouji,
							  success: function () {
     
							  }
							})							
							
							wx.setStorage({
     
							  key: 'u_id',
							  data: res.data.uid,
							  success:function(){
     
								wx.reLaunch({
     
								  url: '/pages/d/d',
								})
							  }
							})
						}else{
     
							uni.showToast({
     
								title:"账号和密码错误"
							})
						}
					},
					fail: (res) => {
     
						
					}
				})
			}

		},  //mysubmit:function(e)
	}
}
</script>


<style>
.qita{
     display: flex;}
.qita_zuo{
     color: #FFFFFF;flex-grow: 1;}
.qita_you{
     color: #FFFFFF;}
	
.denglu_putong{
     
	background-color: #4CD964; padding: 10px; text-align: center; border-radius: 5px; color: #FFFFFF; width: 100%;
}
.denglu_weixin{
     
	background-color: #DD524D;padding: 10px; text-align: center;border-radius: 5px; color: #FFFFFF;
}

.gaodu10{
     height: 10px;}	
page{
     background-color: #2C405A; padding: 20px;}	
.denglu{
     display: flex; flex-direction: column;}
.denglu_mc{
     padding: 20px 0px; text-align: center; color: #FFFFFF;}
.denglu_xiangmu{
     display: flex; background-color: #C0C0C0; padding: 10px; border-radius: 5px;
align-items: center;}
.denglu_xiangmu_img{
     width: 16px;height: 16px;}
.denglu_xiangmu_input{
      margin-left: 5px;}
</style>