登录改造

pages/login/components/mp-weixin-mobile.vue

@@ -1,12 +1,17 @@
 <template>
 	<!-- 微信授权手机号一键登录 -->
-	<view class="wechat-auth">
+	<view class="wechat-auth" v-if="isNew==1">
 		<button class="btn-normal" open-type="getPhoneNumber" @getphonenumber="handelMpWeixinMobileLogin($event)">
 			<view class="wechat-auth-container">
 				<text class="title">手机号快捷登录</text>
 			</view>
 		</button>
 	</view>
+	<view class="wechat-new" v-if="isNew==2">
+		<button class="btn-normal" open-type="getPhoneNumber" @getphonenumber="handelMpWeixinMobileLogin($event)">
+			<view class="fd fd-on" @click="login">登录</view>
+		</button>
+	</view>
 </template>
 
 <script>
@@ -18,10 +23,13 @@
 	import * as UserApi from '@/api/user'
 	export default {
 		props: {
-		  // 分享人id
+			// 分享人id
-		  refereeId: {
+			refereeId: {
-		    type: String
+				type: String
-		  },
+			},
+			isNew: {
+				type: String || Number
+			}
 		},
 		data() {
 			return {
@@ -50,7 +58,7 @@
 			async handelMpWeixinMobileLogin({
 				detail
 			}) {
-				console.log("handelMpWeixinMobileLogin",detail)
+				console.log("handelMpWeixinMobileLogin", detail)
 				const app = this
 				app.code = await app.getCode()
 				if (detail.errMsg != 'getPhoneNumber:ok') {
@@ -68,7 +76,7 @@
 							partyData: app.userInfo
 						})
 						.then(result => {
-							console.log("result",result)
+							console.log("result", result)
 							// 显示登录成功
 							app.$toast(result.message);
 							app.getUserInfo()
@@ -78,7 +86,7 @@
 							setTimeout(() => app.onNavigateBack(1), 2000)
 						})
 						.catch(err => {
-							console.log("err",err)
+							console.log("err", err)
 							const resultData = err.result.data
 							// 显示错误信息
 							if (isEmpty(resultData)) {
@@ -95,7 +103,7 @@
 			getUserInfo() {
 				UserApi.info()
 					.then(result => {
-						console.log("getUserInfo",result)
+						console.log("getUserInfo", result)
 						uni.setStorageSync('userInfo', result.data.userInfo)
 					})
 			},
@@ -146,6 +154,39 @@
 </script>
 
 <style lang="scss" scoped>
+	.wechat-new {
+		width: 100%;
+
+		.fd {
+			width: 680rpx;
+			line-height: 88rpx;
+			background: rgba(243, 74, 64, 1);
+			border-radius: 88rpx;
+			text-align: center;
+			margin: 0 auto;
+			margin-top: 20rpx;
+			font-size: 28rpx;
+			font-weight: 600;
+			color: #ffffff;
+
+			.fd-on {
+				background-color: rgba(243, 74, 64, 1);
+			}
+		}
+
+		.wechat-auth-container {
+			display: flex;
+			justify-content: center;
+		}
+
+		.icon {
+			width: 38rpx;
+			height: 38rpx;
+			margin-right: 15rpx;
+		}
+	}
+
+
 	// 微信授权登录
 	.wechat-auth {
 		width: 320rpx;

pages/login/index.vue

@@ -1,5 +1,5 @@
 <template>
-	<view class="login">
+	<!-- 	<view class="login">
 		<view class="refund-navbar">
 			<u-navbar title="" :border-bottom="false" :background="background"></u-navbar>
 		</view>
@@ -21,7 +21,7 @@
 		</view>
 		<view class="login-fd login-fd-on" @click="login">登录</view>
 		<view class="" v-if="isCheckout">
-			<mpWeiXinMobile :refereeId="refereeId"></mpWeiXinMobile>
+			<mpWeiXinMobile :refereeId="refereeId" :isNew='1'></mpWeiXinMobile>
 		</view>
 		<view class="" v-else style="
         font-size: 28rpx;
@@ -31,8 +31,8 @@
       " @click="login">
 			手机号快捷登录
 		</view>
-	</view>
+	</view> -->
-	<view class="login-box" style="display: none;">
+	<view class="login-box">
 		<view class="refund-navbar">
 			<u-navbar title="" :border-bottom="false" background="rgba(255, 233, 240, 1)"></u-navbar>
 		</view>
@@ -46,7 +46,10 @@
 			<u-checkbox active-color="#FF343C" v-model="isCheckout" style="margin-right: -20rpx"></u-checkbox>
 			同意<text @click="toTextPage(1)">《用户服务协议》</text>和<text @click="toTextPage(2)">《隐私政策》</text>
 		</view>
-		<view class="fd fd-on" @click="login">登录</view>
+		<view class="" v-if="isCheckout">
+			<mpWeiXinMobile :isNew='2' :refereeId="refereeId"></mpWeiXinMobile>
+		</view>
+		<view class="fd fd-on" v-else @click="login">登录</view>
 	</view>
 </template>
 
@@ -226,11 +229,12 @@
 <style lang="scss" scoped>
 	.login-box {
 		width: 100%;
-		background: linear-gradient(180deg, rgba(255, 233, 240, 1) 0%, rgba(226, 244, 243, 0) 35%);
+		background: linear-gradient(180deg, rgba(255, 233, 240, 1) 0%, rgba(226, 244, 243, 0) 30%);
 		min-height: 100vh;
+		height: 100%;
 
 		.login-logo {
-			margin: 365rpx auto 0 auto;
+			margin: 38% auto 0 auto;
 			width: 132rpx;
 			height: 132rpx;
 			border-radius: 24rpx;
@@ -247,9 +251,9 @@
 		.login-name {
 			width: 100%;
 			text-align: center;
-
+			margin-bottom: 70rpx;
 			font-weight: bold;
-			font-size: 36rpx;
+			font-size: 38rpx;
 			color: rgba(243, 74, 64, 1);
 			margin-top: 22rpx;
 		}
@@ -281,7 +285,7 @@
 			border-radius: 88rpx;
 			text-align: center;
 			margin: 0 auto;
-			margin-top: 50rpx;
+			margin-top: 20rpx;
 			font-size: 28rpx;
 			font-weight: 600;
 			color: #ffffff;