手机号登录界面及接口对接

src/api/index.js

@@ -556,3 +556,14 @@ export function bindPhone(data) {
         data
     })
 }
+
+
+// 手机号登录
+export function phoneLogin(data) {
+    return request({
+        method: 'post',
+        url: '/weChat/phoneLogin',
+        data
+    })
+}
+

src/pages/index/index.vue

@@ -358,10 +358,6 @@ export default {
     },
     // 静默登录
     onLogin(wxCode) {
-      // let res =  {"code":200,"msg":"操作成功","data":{"token":"eyJhbGciOiJIUzUxMiJ9.eyJ0ZjoiOiI4MDNkNTc4Yy01ODUwLTQ1NTQtYjYxYy01MDgwN2ZhYmQ4ODEifQ.xPp7FrXL96AWNCjLrraiyZM484Beg-7UFJDJ9UvGbPO-_HMxKq78erEA25wnjq5qbG4pq8d_CkH1SUSQlck0-A","id":"2033845435640102913","loginTime":1776238572286,"expireTime":1776843372286,"ipaddr":"118.81.124.170","loginLocation":"XX XX","browser":"Mobile Safari","os":"Mac OS X (iPhone)","nickName":null,"code":null,"role":1,"enabled":false,"cnickName":"名字","cphone":null,"password":null,"cicon":"https://thirdwx.qlogo.cn/mmopen/vi_32/TEkI1cXrJCSwRNr5rqiajnRaNSlZdkn4SSZ6WVNicUibl0U0ncEqOSMEIWTebuD63qsaf53p234bmmmEW5jxuU3rX5VpHLDQ1qF65HDEOH8rfg/132","username":null,"copenid":"oQo5BvheBBvr-CjmQUEh3fmPnG08","csessionKey":"102_LwlHsNmeph_VOW1FwhQ5fHVdBJKiVxmDSgpH2JjlgNspYAEKf73f_uTAp7hNIY76U0HtArp3-_koH5FAYBFcvcJOnXxiYir8TH5vFn645Rc","cunionid":null,"dmoney":0.00,"nnum":0,"caddressList":null,"dbalance":0.00,"dallMoney":0.00,"cscanImg":null,"cupUser":null,"cmrAddressId":null,"accountNonExpired":false,"accountNonLocked":false,"credentialsNonExpired":false,"authorities":null}}
-      // uni.setStorageSync('wx_copenid', res.data.copenid)
-      // uni.setStorageSync('access-token', res.data.token)
-      // return false;
       let params = {
         code: wxCode,
       }
@@ -370,7 +366,7 @@ export default {
           if (res.data.code == 200) {
             uni.setStorageSync('wx_copenid', res.data.data.copenid)
             uni.setStorageSync('access-token', res.data.data.token)
-            if(res.data.data.cphone === null){
+            if(res.data.data.cphone === null || res.data.data.cphone === ''){
               uni.navigateTo({
                 url: '/setting/myNew/phone'
               })

src/pages/login/wxLogin.vue

@@ -5,9 +5,38 @@
 		<view class="logo">
 			<image src="/static/identify/logo.png" mode=""></image>
 		</view>
-		<view class="btn" @click="login">
+		<view class="btn" @click="login" v-if="isWechat">
 			微信登录
 		</view>
+    <view class="input-box" v-if="!isWechat">
+      <u-input
+          v-model="phone"
+          type="number"
+          border="none"
+          maxlength="11"
+          placeholder="请输入手机号"
+          placeholder-style="color: #999"
+          class="input-item"
+      ></u-input>
+    </view>
+    <view class="input-box code-box" v-if="!isWechat">
+      <u-input
+          v-model="code"
+          type="number"
+          border="none"
+          maxlength="6"
+          placeholder="请输入手机验证码"
+          placeholder-style="color: #999"
+          class="input-item code-input"
+      ></u-input>
+      <view class="code-btn" :class="{ disabled: !canGetCode }" @click="getCode">
+        <text v-if="countdown === 60">获取验证码</text>
+        <text v-else>{{ countdown }}s 后重新获取</text>
+      </view>
+    </view>
+    <view class="btnphone" @click="loginPhone" v-if="!isWechat">
+      登录
+    </view>
 		<view class="agree">
 			<view class="round" @click="isLook">
 				<image src="/static/other/select_round.png" mode="" v-if="look"></image>
@@ -22,19 +51,31 @@
 
 <!-- <script href="http://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script> -->
 <script ref="http://res.wx.qq.com/open/js/jweixin-1.6.0.js">
-	import {
-		wxGetCode
-	} from '../../api/my'
+  import {phoneLogin} from "@/api/index";
 	export default {
 		data() {
 			return {
 				openId: '',
 				isLogin: false,
 				token: '',
-				url:'',
-				look:false
+				look:false,
+        isWechat:navigator.userAgent.toLowerCase().includes('micromessenger'),
+        phone: '',
+        code: '',
+        countdown: 60,
+        timer: null,
+        isSendingCode: false,
+        isBinding: false
 			}
 		},
+    computed: {
+      canGetCode() {
+        return this.phone && this.validatePhone(this.phone) && !this.isSendingCode && this.countdown === 60
+      },
+      canBind() {
+        return this.phone && this.validatePhone(this.phone) && this.code && this.code.length === 6 && !this.isBinding
+      }
+    },
 		methods: {
 			goPrivacy(){
 				uni.navigateTo({
@@ -51,17 +92,10 @@
 			},
 			login() {
 				if (this.look) {
-          // 测试
-					// let ruri = encodeURIComponent('https://test.baoxianzhanggui.com/fragrance/');
-          // let appid = 'wxa72f643173a90106';
-          // 正式
           let ruri = encodeURIComponent('https://city.baoxianzhanggui.com/fragrance/');
           let appid = 'wx9dc677bd41e82569'
 				 	window.location.href = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${ruri}&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect`
-				 	// window.location.href = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxa72f643173a90106&redirect_uri=${ruri}&response_type=code&scope=snsapi_base&state=STATE#wechat_redirect`
-					// 正式——广誉源
-				 	// window.location.href = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx9dc677bd41e82569&redirect_uri=https://city.baoxianzhanggui.com/fragrance/&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect'
-				} else {
+        } else {
 					uni.showToast({
 						title: '请同意《用户协议》和《隐私政策》',
 						icon: 'none'
@@ -72,9 +106,102 @@
 				uni.switchTab({
 					url: '/pages/index/index'
 				})
-			}
+			},
+      // 手机号登录
+      validatePhone(phone) {
+        const reg = /^1[3-9]\d{9}$/
+        return reg.test(phone)
+      },
+      getCode() {
+        if (this.isSendingCode || this.countdown < 60) return
+
+        if (!this.phone) {
+          uni.showToast({
+            title: '请输入手机号',
+            icon: 'none'
+          })
+          return
+        }
+
+        if (!this.validatePhone(this.phone)) {
+          uni.showToast({
+            title: '请输入正确的手机号',
+            icon: 'none'
+          })
+          return
+        }
+
+        this.isSendingCode = true
+
+        uni.showToast({
+          title: '验证码已发送',
+          icon: 'success'
+        })
+
+        this.startCountdown()
+        this.isSendingCode = false
+      },
+      startCountdown() {
+        this.countdown = 60
+        this.timer = setInterval(() => {
+          this.countdown--
+          if (this.countdown <= 0) {
+            clearInterval(this.timer)
+            this.countdown = 60
+            this.timer = null
+          }
+        }, 1000)
+      },
+      loginPhone(){
+        var _this = this;
+        if (this.look) {
+          if (this.isBinding) return
+          if (!this.phone) {
+            uni.showToast({
+              title: '请输入手机号',
+              icon: 'none'
+            })
+            return
+          }
+
+          if (!this.validatePhone(this.phone)) {
+            uni.showToast({
+              title: '请输入正确的手机号',
+              icon: 'none'
+            })
+            return
+          }
+
+          if (!this.code || this.code.length !== 6) {
+            uni.showToast({
+              title: '请输入6位验证码',
+              icon: 'none'
+            })
+            return
+          }
+          _this.isBinding = true
+          phoneLogin({
+            phone:_this.phone,
+            code:_this.code
+          }).then(res => {
+            if (res.data.code == 200) {
+              uni.setStorageSync('wx_copenid', res.data.data.copenid || '')
+              uni.setStorageSync('access-token', res.data.data.token)
+              _this.isBinding = false;
+              _this.back();
+            }
+          })
+        } else {
+            uni.showToast({
+              title: '请同意《用户协议》和《隐私政策》',
+              icon: 'none'
+            })
+          }
+      }
 		},
-		onLoad(options) {}
+		onLoad(options) {
+
+    }
 	}
 </script>
 
@@ -106,7 +233,49 @@
 				height: 100%;
 			}
 		}
+    .input-box {
+      width: 678rpx;
+      height: 92rpx;
+      background: #FFFFFF;
+      border-radius: 24rpx;
+      margin: 46rpx auto;
+      display: flex;
+      align-items: center;
+      padding: 0 30rpx;
+
+      .input-item {
+        flex: 1;
+      }
+    }
+
+    .code-box {
+      .code-input {
+        flex: 1;
+      }
+
+      .code-btn {
+        width: 200rpx;
+        text-align: right;
+        font-size: 28rpx;
+        color: #2DB1A8;
+        line-height: 88rpx;
 
+        &.disabled {
+          color: #2DB1A8;
+        }
+      }
+    }
+    .btnphone{
+      width:670rpx;
+      height: 84rpx;
+      text-align: center;
+      background: linear-gradient(to right, #35c99d, #27aea7);
+      margin: 50rpx 0px 20px 40rpx;
+      line-height: 84rpx;
+      border-radius: 10px;
+      color: #fcfdff;
+      font-size: 28rpx;
+    }
 		.btn {
 			width:670rpx;
 			height: 84rpx;
@@ -141,4 +310,4 @@
 			}
 		}
 	}
-</style>
+</style>