修改登录页

pages/login/login.vue

@@ -1,108 +1,46 @@
 <template>
 	<view class="body" :style="{height:screenHeight}">
-		<image class="login-bg" :src="staticUrl+'/img/login-bg.png'" mode="widthFix"></image>
-		<u-toast ref="uToast"></u-toast>
-		<view style="height: 40%;position: relative;z-index: 10;">
-			<view class="logo-wrap">
-				<img :src="logoSrc" class="logo" alt="">
-				<!-- <img :src="sitename" class="sitename" alt=""> -->
-<!-- 				<u--image :src="logoSrc" width="200rpx" height="200rpx"></u--image>
-				<u--image :src="sitename" width="460rpx" height="142rpx"></u--image> -->
-			</view>
-			<!-- <u-button text="getUserProfile" type="success" :hairline="false" throttleTime="2000" shape="circle" open-type="getUserProfile"
-				@click="getUserProfile"></u-button> -->
-			<!-- <u-button v-if="loginBtn" text="手机号快捷登录" type="success" :hairline="false" throttleTime="2000" shape="circle" 
-				@click="openAuth"></u-button> -->
-			<view class="btn-wrap" style="margin:94rpx">
-				<!-- #ifdef MP -->
-				<u-button
-					v-if="loginBtn&&checked.length>0" 
-					:hair-line='false' 
-					type="error" 
-					color="#ED0000"
-					throttleTime="2000" 
-					shape="circle" 
-					open-type="getPhoneNumber" 
-					@getphonenumber="authPhone">登录
-				</u-button>
-				<u-button
-					v-else
-					:hair-line='false' 
-					type="error" 
-					color="#ED0000"
-					@click="disabledClick"
-					shape="circle">登录
-				</u-button>
-				<!-- #endif -->
-				<!-- #ifdef H5 -->
-				<u-button
-					:hair-line='false' 
-					type="error" 
-					color="#ED0000"
-					@click="disabledClick"
-					shape="circle">登录
-				</u-button>
-				<!-- #endif -->
-			</view>
-			<view class="rule-wrap u-flex u-flex-wrap u-row-center">
-				<u-checkbox-group v-model="checked" @change="checkboxChange" placement="row">
-					<u-checkbox activeColor="#1677FF" name="同意" labelSize="24rpx" shape="circle" label="我已阅读并同意"></u-checkbox>
-				</u-checkbox-group>
-				<text class="link" @click="$u.route('/pages/login/regulation',{regulationName:'用户服务协议',type:1})">《用户服务协议》</text>
-				和<text class="link" @click="$u.route('/pages/login/regulation',{regulationName:'用户隐私政策',type:2})">《用户隐私政策》</text>
+		<view class="header">
+			<view class="circle circle1"></view>
+			<view class="circle circle2"></view>
+			<view class="circle circle3"></view>
+			<view class="text">
+				<view class="en-text">hello</view>
+				<view class="cn-text">欢迎登录！</view>
 			</view>
 		</view>
-		
-		<!-- 微信获取手机号弹窗 -->
-	  <!-- <u-modal :show="showAuthorizePhone" :show-title="false"
-				 :show-confirm-button="false">
-			<view class="slot-content">
-				<div class="auth-card">
-					<div class="img">
-						<img class="avatar-img" :src="logoSrc" mode="widthFix">
-					</div>
-					<div class="title">{{bname}}</div>
-					<div class="content">申请获得您的手机号</div>
-				</div>
-				<div class="auth-btncard u-flex u-row-between">
-					<div class="btn-unok"><u-button :hair-line='false' :custom-style="customStyleUnOk" @click="showAuthorizePhone=false">拒绝</u-button></div>
-					<div class="btn-ok"><u-button :hair-line='false' :custom-style="customStyleOk" open-type="getPhoneNumber" @getphonenumber="authPhone"> 允许</u-button></div>
-				</div>
-			</view>
-		</u-modal> -->
-		<!-- 微信获取用户头像昵称弹窗 -->
-		<!-- <u-modal :show="showAuthorizeUser" :show-title="false"
-		                 :show-confirm-button="false">
-		    <view class="slot-content">
-		        <div class="auth-card">
-		            <div class="img">
-		                <img class="avatar-img"
-		                     :src="logoSrc"
-		                     mode="widthFix">
-		            </div>
-		            <div class="title">{{bname}}</div>
-		            <div class="content">邀请您补全个人信息<br></br>（昵称、头像）</div>
-		        <div style="margin-left: 100rpx;margin-right: 100rpx">
-		            <u-form :model="user" ref="uForm">
-		                <u-form-item label="头像">
-		                    <button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar" slot="right">
-		                        <image class="avatar" :src="user.avatar"></image>
-		                    </button>
-		                </u-form-item>
-		                <u-form-item label="昵称">
-		                    <input type="nickname" class="weui-input u-border-bottom" @blur="nickNameInput" placeholder="请输入昵称"/>
-		                </u-form-item>
-		            </u-form>
-		        </div>
-		        </div>
-		    <div class="auth-btncard">
-		        <div class="btn-unok"><u-button :hair-line='false' :custom-style="customStyleUnOk" @click="showAuthorizeUser=false"> 拒绝</u-button></div>
-		        <div class="btn-ok"><u-button :hair-line='false' :custom-style="customStyleOk" @click="authUser"> 允许</u-button></div>
-		    </div>
-		    </view>
-		</u-modal> -->
-
-
+		<view class="login-box">
+			<u--form labelPosition="left" :model="form" :rules="rules" ref="uForm" >
+				<u-form-item label="" prop="account" ref="account" >
+					<u--input
+						v-model="form.account"
+						border="surround"
+						placeholder="输入账号"
+						:customStyle="inputCustomStyle"
+					></u--input>
+				</u-form-item>
+				<u-form-item label="" prop="password" ref="password" >
+					<u--input
+						v-model="form.password"
+						border="surround"
+						:password="true"
+						placeholder="输入密码"
+						:customStyle="inputCustomStyle"
+					></u--input>
+				</u-form-item>
+			</u--form>
+			<u-button 
+				@click="submit"
+				text="登录" 
+				type="primary" 
+				shape="circle" 
+				:customStyle="{'margin-top':'60rpx',height:'98rpx','box-sizing':'border-box'}"
+				color="linear-gradient(90deg, #00D17D 0%, #00A447 100%)">
+			</u-button>
+		</view>
+		<view class="tip">
+			提示：初始账号和密码由管理员设置，请与管理人员联系
+		</view>
 	</view>
 </template>
 
@@ -110,42 +48,43 @@
 	export default {
 		data() {
 			return {
-				staticUrl:this.$commonConfig.staticUrl,
-				checked:false,
-				checkboxVal:null,
-				loginBtn:true,
 				bname:'旭烁集团',
 				//屏幕高度
 				screenHeight: "",
-				logoSrc: "/static/logo.svg",
-				// sitename:"/static/sitename.png",
-				miniappLoginInfo:null,
-				hasUserInfo:false,
-				userInfo: null,
-				user:{   
-					avatar:'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0',
-					name:'',
-					mobile:'',
-				},
-				code: '',
-				showAuthorizeUser: false,
-				showAuthorizePhone: false,
-				customStyleUnOk:{},
-				customStyleOk:{'margin-left': '30px',color:'#00A447'},
 				backUrl:null,
-				scene:'',
+				form:{
+					account:'',
+					password:''
+				},
+				rules: {
+					account: {
+						type: 'string',
+						required: true,
+						message: '请填写账号',
+						trigger: ['blur', 'change']
+					},
+					password: {
+						type: 'string',
+						required: true,
+						message: '请填写密码',
+						trigger: ['blur', 'change']
+					},
+				},
+				inputCustomStyle:{
+					height:'98rpx',
+					'border-color':'#eee',
+					'padding-left':'30rpx',
+					'box-sizing':'border-box',
+				}
 			};
 		},
-		onLoad(e) {
-			// #ifdef H5
-			console.log("回调参数=======",e)
-			if(e&&e.code) { // 微信第三方登录成功
-				this.code = e.code
-				this.login(e)
+		onLoad() {
+			// 测试环境填充用户名密码
+			if(process.env.NODE_ENV=='development'){
+				this.form.account = 'dls1234';
+				this.form.password = '654321';
 			}
-			// #endif
 			let that = this;
-			//获取屏幕高度，我的项目再store里已经取到了
 			uni.getSystemInfo({
 				success: (res) => {
 					this.screenHeight = res.windowHeight + "px"
@@ -154,422 +93,134 @@
 			uni.getStorage({
 				key: 'backUrl',
 				success: function (res) {
-					that.backUrl = '/'+res.data;
+					console.log('getStorage',res);
+				},
+				complete(res) {
+					if(res.data){
+						that.backUrl = '/'+res.data;
+					}else{
+						that.backUrl = '/pages/index/index';
+					}
+					console.log('backUrl',that.backUrl);
 				}
 			});
 		},
+		onReady() {
+			//onReady 为uni-app支持的生命周期之一
+			this.$refs.uForm.setRules(this.rules)
+		},
 		onShow() {
-			// #ifdef H5
-			let pages = getCurrentPages(); //当前页面栈
-			console.log("pages=====",pages)
-			// #endif
-			// #ifdef MP
-			// uni.showLoading({
-			// 	mask:true
-			// });
-			this.getChatCode();
-			// setTimeout(() => {
-			// 	this.openAuth();
-			// 	// this.showAuthorizeUser = true //弹出头像用户名
-			// }, 100);
-			// #endif
-			let userInfo = uni.getStorageSync('userInfo');
-			this.user.name = userInfo.name;
 		},
 		methods: {
-			openAuth(){
-				this.showAuthorizePhone = true;
-				// let userInfo = uni.getStorageSync('userInfo')
-				// console.log('userInfo>>>>>>>>>>>>>>>>>>>>>',userInfo)
-				// if(userInfo){
-				// 	this.showAuthorizeUser = true;
-				// }else{
-				// 	this.showAuthorizePhone = true;
-				// }
-				// uni.hideLoading()
-			},
-			getChatCode() {
-				//因为作用域先提前赋值
-				var that = this
-				//使用uni封装的一键登录方法
-				uni.login({
-					provider: 'weixin',
-					success(res) {
-						//成功后带着微信登录返回的code去请求我们的后端
-						that.code = res.code;
-						// console.log('code',that.code);
-					}
-				})
-			},
-			getUserProfile() {
-				var that = this
-				uni.getUserProfile({
-					desc: "获取你的昵称、头像",
-					success(res) {
-						console.log('getUserProfile success',res);
-						if (res.errMsg == "getUserProfile:ok" && res.userInfo != undefined) {
-							//我用store来存储一些数据，你可以放到你要放的地方
-							console.log(' res.userInfo', res.userInfo);
-							// that.$u.vuex('wx_user_info.nickName', res.userInfo.nickName);
-							// that.$u.vuex('wx_user_info.avatarUrl', res.userInfo.avatarUrl);
-							// that.getChatCode()
-						}
-					},
-					complete(res) {
-						// console.log('complete',res);
-					}
-				})
-			},
-			//获取昵称输入内容
-			// userNameInput(e){
-			//     this.user.nickName = e.detail.value
-			// },
-			onChooseAvatar(e) {
-				console.log('头像信息》')
-				console.log(e)
-				this.user.avatar = e.detail.avatarUrl;
-			},
-			async authPhone(e){
-				console.log('checked',this.checked);
-				console.log('detail',e.detail);
-				let errMsg = e.detail?.errMsg;
-				if(errMsg!='getPhoneNumber:ok'){
-					uni.showToast({
-						title:'您已拒绝使用！',
-						icon:'error'
-					})
-					return					
-				}
-				this.showAuthorizePhone=false;
-				this.loginBtn = false;
-				let _this = this;
-				
-				await uni.getStorage({
-					key: 'scene',
-					success: function (res) {
-						// console.log('scene====',res.data);
-						if(res.data){
-							_this.scene = res.data
-						}
-					}
-				});
-				
-				// this.getMobile()
-				let mobileData = await this.$u.api.getMobile({code:e.detail.code});
-				// console.log('mobileData',mobileData);
-				let mobile = mobileData.data?.mobile;
-				if(mobile){
-					this.mobile = mobile
-				}else{
-					// uni.showToast({
-					// 	title: '没有获取手机号',
-					// 	icon:'error',
-					// 	duration: 2000
-					// });
-				}
-				this.login(e);
-				this.loginBtn = true;
-			},
-			async login(e){
-				// console.log('e',e);
-				let _this = this;
-				let wxinfo = null
-				let data = {}
-				// #ifdef MP
-				wxinfo = await this.$u.api.wxinfo({code:this.code});
-				let {openid,sessionKey,unionid} = wxinfo.data;
-				
-				_this.$u.vuex('vuex_wechatOpenid', openid);
-				const { errMsg, iv, encryptedData } = e.detail;
-				if (errMsg !== 'getPhoneNumber:ok') return;
-				
-				data = {
-					code: this.code,
-					encryptedData: encryptedData,
-					ivStr: iv,
-					openId:openid,
-					sessionKey,
-					sourceType:1,
-					mobile:this.mobile
-				}
-				
-				if(this.scene&&this.scene!='undefined'){
-					await this.$u.api.uncompress({scene:this.scene}).then(res=>{
-						data.agentId = res.data.agentId;
-						data.agentShopId = res.data.agentShopId;
-						data.sourceType = 2;
-						// console.log('uncompress',res.data);
+			submit(){
+				console.log('form',this.form);
+				this.$refs.uForm.validate().then(res => {
+					// uni.$u.toast('校验通过')
+					this.$u.api.login(this.form).then(res=>{
+						// console.log('res',res.data);
+						this.$u.vuex('vuex_user_info', res.data);
+						uni.reLaunch({url: this.backUrl});
 					}).catch(err=>{
-						console.log('uncompress',err);
-					})
-				}
-				// #endif
-				
-				// #ifdef H5
-				wxinfo = await this.$u.api.wxinfoH5({code:this.code});
-				let { openid } = wxinfo.data;
-				data = {
-					"openId": "",
-					"h5OpenId": openid,
-					"mobile": ""
-				}
-				// #endif
-				// console.log('----------登陆中',data)
-				this.$u.api.login(data).then(res=>{
-					// console.log('微信登录返回结果========',res.data)
-					_this.$u.vuex('vuex_user_info', res.data);
-					// _this.$u.vuex('vuex_member_info',res.data);
-					// uni.setStorageSync('userInfo', res.data)
-					this.showAuthorizePhone = false;
-					uni.removeStorage({
-						key:'scene'
-					});
-					// console.log('res.data.userid',res.data.userid);
-					this.getMemberInfo(res.data.userId);
-					
-				}).catch(err=>{
-					console.log('err',err);
-					this.showAuthorizePhone = false
-				})
-			},
-			getMemberInfo(userid){
-				// console.log('userid',userid);
-				let _this = this;
-				this.$u.api.memberInfo({id:userid}).then(res=> {
-					if(res.code ===200) {
-						_this.userInfo = res.data;
-						this.$u.vuex('vuex_member_info', res.data);
-						// this.$u.vuex('vuex_member_info.avatar', 'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0');
-						if(!res.data.name){
-							this.$u.vuex('vuex_member_info.name', '微信用户');
-							this.updateMemberInfo();
-						}else{
-							this.goBack();
-						}
-						// 下面需要获取微信头像和昵称
-						// if(res.data.name){
-						// 	_this.hasUserInfo = true;
-						// 	_this.userInfo = res.data;
-						// 	uni.navigateTo({
-						// 		url: '/pages/index/index'
-						// 	})
-						// }else{
-						// 	_this.showAuthorizeUser = true
-						// 	// uni.hideLoading()
-						// }
-						// console.log('---------登陆成功')
-						
-					}
-				})
-			},
-			goBack(){
-				let url = this.backUrl&&this.backUrl.length>0?this.backUrl:'/pages/index/index';
-				// console.log('url',url);
-				uni.removeStorage({
-					key: 'backUrl',
-					success: function (res) {
-						// console.log('success');
-						uni.reLaunch({url: decodeURIComponent(url)});
-					}
-				});
-			},
-			updateMemberInfo(){
-				let params ={
-					id:this.userInfo.id,
-					// avatar:'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0',
-					name:'微信用户'
-				};
-				this.$u.api.updateMemberInfo(params).then(res=>{
-					this.goBack();
-				}).catch(err=>{
-					console.log('err',err);
-				})
-			},
-			authUser(){
-				let userInfo = this.vuex_user_info || {};
-				// console.log('this===',this);
-				// console.log('vuex_user_info===',this.vuex_user_info);
-				// console.log('userInfo',userInfo);
-				// console.log('this.user',this.user);
-				if(!this.user.name){
-					uni.showToast({
-						title: '请输入您的昵称！',
-						icon:'error',
-						duration: 2000
-					});
-					return;
-				}
-				userInfo.avatar = this.user.avatar;
-				userInfo.name =  this.user.name;
-				this.userInfo = userInfo;
-				uni.setStorageSync('userInfo', userInfo)
-				this.user.id = userInfo.userid;
-				let param = {
-					id:this.user.id,
-					name:this.user.name,
-					avatar:this.user.avatar
-				}
-				this.$u.api.updateMemberInfo(param).then(res=>{
-					this.hasUserInfo = true;
-					this.showAuthorizeUser = false;
-					uni.navigateTo({
-						url: '/pages/index/index'
+						console.log('login',err);
 					})
-				}).catch(err=>{
-					console.log('err',err);
+				}).catch(errors => {
+					uni.$u.toast('请正确填写表单')
 				})
-			},
-			nickNameInput(e){
-				this.user.name = e.detail.value
-			},
-			checkboxChange(e){
-				this.checkboxVal = e[0];
-			},
-			disabledClick(){
-				// console.log('checked',this.checked?.length);
-				// console.log('loginBtn',this.loginBtn);
-				// #ifdef MP
-				if(!this.checked||this.checked?.length<=0){
-					uni.showToast({
-						title:'请先同意使用条款！',
-						icon:'none'
-					})
-				}else if(this.loginBtn==false){
-					uni.showToast({
-						title:'登录中！',
-						icon:'none'
-					})
-				}
-				// #endif
-				
-				// #ifdef H5 
-				if(!this.checked||this.checked?.length<=0){
-					uni.showToast({
-						title:'请先同意使用条款！',
-						icon:'none'
-					})
-				}else{
-					uni.showToast({
-						title:'登录中！',
-						icon:'none'
-					})
-					this.redirectToAuth()
-				}
-				// #endif
-			},
-			/**  公众号 微信授权登录  */
-			redirectToAuth() {
-			    const appid = 'wx6490eaa0d20d2be2';
-			    const redirectUri = encodeURIComponent('https://greath5.dev.gztjy.top/pages/login/login');
-			    const authUrl = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${redirectUri}&response_type=code&scope=snsapi_base&state=STATE#wechat_redirect`;
-			 
-			    window.location.href = authUrl;
-			},
+			}
+			
 		}
 	}
 </script>
 
 <style lang="scss" scoped>
-.login-bg{
-	position: fixed;
-	left: 0;
-	right: 0;
-	bottom: 0;
-	width: 100%;
-}
 .body {
 	background-color: #fff;
 	box-sizing: border-box;
-	text-align: center;
-	.logo-wrap {
-		padding-top: 100rpx;
-		img{
-			display: block;
-			margin: 0 auto;
+}
+.header{
+	position: relative;
+	height: 368rpx;
+	overflow: hidden;
+	background: linear-gradient(325deg, #FCFFFD 0%, #ECFFF4 100%);
+	.circle{
+		position: absolute;
+		border-radius: 50%;
+		&.circle1{
+			width: 201rpx;
+			height: 149rpx;
+			background: linear-gradient(230deg, #E5FFEC 0%, #C0FFD7 100%);
+			left:-20rpx;
+			bottom: -50rpx;
 		}
-		.logo{
-			width: 400rpx;
-			height: 400rpx;
+		&.circle2{
+			width: 148rpx;
+			height: 148rpx;
+			background: linear-gradient(215deg, #E7FFEE 0%, #BFFFDB 100%);
+			opacity: 0.6;
+			right:158rpx;
+			top: 80rpx;
 		}
-		.sitename{
-			width: 460rpx;
-			height: 142rpx;
+		&.circle3{
+			width: 232rpx;
+			height: 237rpx;
+			background: linear-gradient(215deg, #F1FFF8 0%, #C3FFD3 100%);
+			right:-32rpx;
+			top: -65rpx;
+		}
+	}
+	.text{
+		position: absolute;
+		left: 40rpx;
+		bottom: 80rpx;
+		.en-text{
+			position: relative;
+			text-transform: uppercase;
+			font-size: 58rpx;
+			font-family: AlibabaPuHuiTi_2_115_Black;
+			color: #333333;
+			line-height: 81rpx;
+			font-weight: bold;
+			width: fit-content;
+			z-index: 5;
+			&::before{
+				content: '';
+				display: block;
+				width: 104%;
+				height: 10rpx;
+				background-color: #FFB100;
+				position: absolute;
+				left: -2%;
+				bottom: 10rpx;
+				z-index: -1;
+			}
+		}
+		.cn-text{
+			font-size: 50rpx;
+			font-family: PingFangSC-Regular, PingFang SC;
+			font-weight: 400;
+			color: #333333;
+			line-height: 70rpx;
 		}
 	}
 }
-
-// 
-
-.auth-btncard{
-	margin-top: 20px;
-    .btn-unok{
-        width: 45%;
-        float: left;
-    }
-    .btn-ok{
-        width: 45%;
-        float: left;
-        margin: 0;
-        padding: 0;
-        border: 0px solid transparent;  //自定义边框
-        outline: none;    //消除默认点击蓝色边框效果
-        u-button{
-			font-size: 16px;
-            margin: 0;
-            padding: 0;
-            // border: 0px solid transparent;  //自定义边框
-            outline: none;    //消除默认点击蓝色边框效果
-        }
-    }
-}
-.auth-card{
-    text-align: center;
-    .avatar-img{
-        width: 150rpx;
-        height: 150rpx;
-        overflow: hidden;
-        border-radius: 100%;
-        margin-top: 30rpx;
-    }
-    .title{
-        font-size: 30rpx;
-    }
-    .content{
-        margin-top: 10rpx;
-		margin-bottom: 20rpx;
-    }
-}
-.avatar-wrapper{
-	width: 150rpx;
-	height: 100rpx;
-	color: #333 !important;
-	text-align: center !important;
-	border: none !important;
-	border-radius:0 !important;
-	background-color:transparent !important;
-}
-.avatar-wrapper::after {
-	border: none !important;
-}
-.avatar{
-	width: 100rpx;
-	height: 100rpx;
-	overflow: hidden;
-	border-radius: 100%;
+.login-box{
+	position: relative;
+	top: -24rpx;
+	padding: 60rpx 40rpx;
+	border-top-left-radius: 24rpx;
+	border-top-right-radius: 24rpx;
+	background-color: #fff;
+	// box-shadow: 0rpx 0rpx 16rpx 0rpx rgba(0,28,12,0.06);
 }
-
-.rule-wrap{
+.tip{
 	position: fixed;
-	left: 0;
-	right: 0;
-	bottom: 20px;
-	margin: 40rpx auto;
+	bottom: 108rpx;
+	width: 100vw;
+	box-sizing: border-box;
+	text-align: center;
 	font-size: 24rpx;
-	line-height: 1.5;
-	.link{
-		white-space: nowrap;
-		color: #1677FF;
-	}
+	font-weight: 400;
+	color: #999999;
 }
 </style>