cxc/yshopb2c-uniapp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

feat: 优化获取手机号登录的逻辑

Browse Source
This commit is contained in:
Gaoxs
2023-04-26 14:55:21 +08:00
parent df492cbc63
commit 7b896ceee4
3 changed files with 212 additions and 99 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
pages/Loading/index.vue
View File

@ -1,7 +1,12 @@
<template>
<view class="lottie-bg">
<view id="lottie">
<image src="@/static/live-logo.gif" rel="preload" mode="widthFix" style="width: 100%" />
<image
src="@/static/live-logo.gif"
rel="preload"
mode="widthFix"
style="width: 100%"
/>
</view>
</view>
</template>
@ -50,7 +55,8 @@ export default {
}
console.log('进行登录操作')
login().finally(() => {
this.$yrouter.switchTab({
this.changeAuthorization(false)
this.$yrouter.replace({
path: '/pages/home/index',
})
})

163
pages/authorization/index.vue
View File

@ -1,19 +1,32 @@
<template>
<view class="container">
<!-- #ifdef MP-WEIXIN -->
<view v-if="!token" class="force-login-wrap">
<view
v-if="!token"
class="force-login-wrap"
>
<!-- <image class="logo-bg" :src="`${$VUE_APP_RESOURCES_URL}/images/logo_bg.png`" mode="aspectFill"></image> -->
<view class="force-login__content y-f">
<open-data class="user-avatar" type="userAvatarUrl"></open-data>
<open-data class="user-name" type="userNickName"></open-data>
<open-data
class="user-avatar"
type="userAvatarUrl"
></open-data>
<open-data
class="user-name"
type="userNickName"
></open-data>
<view class="login-notice">为了提供更优质的服务，请先登录</view>
<button
class="cu-btn author-btn"
open-type="getPhoneNumber"
@getphonenumber="phoneLogin">微信手机号一键登录</button>
<!-- <button class="cu-btn author-btn" v-if="canIUseGetUserProfile" @tap="getUserInfoProfile">授权并查看</button>
<button
class="cu-btn author-btn"
open-type="getPhoneNumber"
@getphonenumber="phoneLogin"
>微信手机号一键登录</button>
<!-- <button class="cu-btn author-btn" v-if="canIUseGetUserProfile" @tap="getUserInfoProfile">授权并查看</button>
<button class="cu-btn author-btn" v-else @getuserinfo="getUserInfoBtn" open-type="getUserInfo">授权并查看</button> -->
<button class="cu-btn close-btn" @tap="back">暂不登录</button>
<button
class="cu-btn close-btn"
@tap="back"
>暂不登录</button>
</view>
</view>
<!-- #endif -->
@ -22,7 +35,10 @@
<!-- <image class="logo-bg" :src="`${$VUE_APP_RESOURCES_URL}/images/logo_bg.png`" mode="aspectFill"></image> -->
<view class="force-login__content y-f">
<view class="login-notice">为了提供更优质的服务，请先登录</view>
<button class="cu-btn author-btn" @tap="toLogin">去登录</button>
<button
class="cu-btn author-btn"
@tap="toLogin"
>去登录</button>
</view>
</view>
<!-- #endif -->
@ -44,7 +60,8 @@ export default {
data() {
return {
authorize: false,
canIUseGetUserProfile: false
canIUseGetUserProfile: false,
code: ''
}
},
computed: {
@ -54,8 +71,13 @@ export default {
if (wx.getUserProfile) {
this.canIUseGetUserProfile = true
}
this.getLoginCode()
// // 先校验用户是否授权，如果没有授权，显示授权按钮
},
mounted() {
this.getLoginCode()
},
onHide() {
this.updateAuthorizationPage(false)
this.changeAuthorization(false)
@ -111,14 +133,14 @@ export default {
})
})
},
// 申请获取用户信息
// 申请获取用户信息
getUserInfoProfile(data) {
console.log('getUserInfoProfile')
wx.getUserProfile({
lang: 'zh_CN',
desc: '需要获取您的信息用来展示',
success: res => {
console.log('用户信息',res)
console.log('用户信息', res)
uni.showLoading({
title: '登录中',
})
@ -140,64 +162,63 @@ export default {
},
})
},
// 微信用户手机号登录
phoneLogin(e) {
console.log('用户微信手机号登录')
if (e.mp.detail.errMsg == 'getPhoneNumber:ok') {
console.log(e.mp.detail)
getProvider()
.then(provider => {
console.log('当前的环境商',provider)
if (!provider) {
reject()
}
// uni登录
uni.login({
provider: provider,
success: async loginRes => {
console.log(loginRes)
let code = loginRes.code // 获取开发code
cookie.set('wxLoginCode', loginRes.code)
wxappAuth({
encryptedData: e.mp.detail.encryptedData,
iv: e.mp.detail.iv,
code: code,
spread: cookie.get('spread'),
})
.then( res => {
console.log('登录成功,开始处理登录信息保存，并获取用户详情')
uni.hideLoading()
store.commit('login', res.data.token, dayjs(res.data.expires_time))
store.dispatch('userInfo', true)
getUserInfo()
.then(user => {
console.log('获取用户信息成功')
uni.setStorageSync('uid', user.data.uid)
store.dispatch('setUserInfo', user.data)
this.$yrouter.reLaunch({
path: cookie.get('redirect').replace(/\ /g, ''),
})
})
.catch(error => {
console.log('获取用户信息失败')
})
})
.catch(error => {
console.log(error)
console.log('登录接口调用失败')
})
}
})
})
.catch(err => {})
} else {
uni.showToast({
title: '已拒绝授权',
icon: 'none',
duration: 2000,
})
}
},
getLoginCode() {
getProvider()
.then(provider => {
// uni登录
uni.login({
provider: provider,
success: async loginRes => {
console.log("🚀 ~ file: index.vue:171 ~ getLoginCode ~ loginRes:", loginRes)
this.code = loginRes.code
}
})
})
},
// 微信用户手机号登录
phoneLogin(e) {
console.log('用户微信手机号登录')
if (e.mp.detail.errMsg == 'getPhoneNumber:ok') {
console.log('wxLoginCode', this.code)
cookie.set('wxLoginCode', this.code)
wxappAuth({
encryptedData: e.mp.detail.encryptedData,
iv: e.mp.detail.iv,
code: this.code,
spread: cookie.get('spread'),
})
.then(res => {
console.log('登录成功,开始处理登录信息保存，并获取用户详情')
uni.hideLoading()
store.commit('login', res.data.token, dayjs(res.data.expires_time))
store.dispatch('userInfo', true)
getUserInfo()
.then(user => {
console.log('获取用户信息成功')
uni.setStorageSync('uid', user.data.uid)
store.dispatch('setUserInfo', user.data)
this.$yrouter.reLaunch({
path: cookie.get('redirect').replace(/\ /g, ''),
})
})
.catch(error => {
console.log('获取用户信息失败')
this.getLoginCode()
})
})
.catch(error => {
console.log(error)
console.log('登录接口调用失败')
this.getLoginCode()
})
} else {
uni.showToast({
title: '已拒绝授权',
icon: 'none',
duration: 2000,
})
}
},
},
mounted() {
if (wx.getUserProfile) {

138
pages/user/User/index.vue
View File

@ -1,11 +1,26 @@
<template>
<view class="user">
<view v-if="$store.getters.token || userInfo.uid">
<view class="getUserBaseData header bg-color-red acea-row row-between-wrapper" v-if="!userInfo.avatar && !userInfo.nickname">
<button class="userDataBtn" v-if="canIUseGetUserProfile" @tap="getUserInfoProfile">授权并查看用户信息</button>
<button class="userDataBtn" v-else @getuserinfo="getUserInfo" open-type="getUserInfo">授权并查看用户信息</button>
<view
class="getUserBaseData header bg-color-red acea-row row-between-wrapper"
v-if="!userInfo.avatar && !userInfo.nickname"
>
<button
class="userDataBtn"
v-if="canIUseGetUserProfile"
@tap="getUserInfoProfile"
>授权并查看用户信息</button>
<button
class="userDataBtn"
v-else
@getuserinfo="getUserInfo"
open-type="getUserInfo"
>授权并查看用户信息</button>
</view>
<view class="header bg-color-red acea-row row-between-wrapper" v-else>
<view
class="header bg-color-red acea-row row-between-wrapper"
v-else
>
<view class="picTxt acea-row row-between-wrapper">
<view class="pictrue">
<image :src="userInfo.avatar" />
@ -13,12 +28,19 @@
<view class="text">
<view class="acea-row row-middle">
<view class="name line1">{{ userInfo.nickname }}</view>
<view class="member acea-row row-middle" v-if="userInfo.vip">
<view
class="member acea-row row-middle"
v-if="userInfo.vip"
>
<image :src="userInfo.vipIcon" />
<text>{{ userInfo.vipName }}</text>
</view>
</view>
<view @click="goPersonalData()" class="id" v-if="userInfo.phone">
<view
@click="goPersonalData()"
class="id"
v-if="userInfo.phone"
>
<text>ID：{{ userInfo.uid || 0 }}</text>
<text class="iconfont icon-bianji1"></text>
</view>
@ -35,23 +57,40 @@
<!-- #endif -->
</view>
</view>
<text class="iconfont icon-shezhi" @click="goPersonalData()"></text>
<text
class="iconfont icon-shezhi"
@click="goPersonalData()"
></text>
</view>
<view class="wrapper">
<view class="nav acea-row row-middle">
<view @click="goUserAccount()" class="item">
<view
@click="goUserAccount()"
class="item"
>
<text>我的余额</text>
<text class="num">{{ userInfo.nowMoney || 0 }}</text>
</view>
<view @click="goUserPromotion()" class="item" v-if="userInfo.isPromoter === 1 || userInfo.statu === 2">
<view
@click="goUserPromotion()"
class="item"
v-if="userInfo.isPromoter === 1 || userInfo.statu === 2"
>
<text>当前佣金</text>
<text class="num">{{ userInfo.brokeragePrice || 0 }}</text>
</view>
<view @click="goIntegral()" class="item" v-else>
<view
@click="goIntegral()"
class="item"
v-else
>
<text>当前积分</text>
<text class="num">{{ userInfo.integral || 0 }}</text>
</view>
<view @click="goUserCoupon()" class="item">
<view
@click="goUserCoupon()"
class="item"
>
<text>优惠券</text>
<text class="num">{{ userInfo.couponCount || 0 }}</text>
</view>
@ -59,44 +98,80 @@
<view class="myOrder">
<view class="title acea-row row-between-wrapper">
<text>我的订单</text>
<text @click="goMyOrder()" class="allOrder">
<text
@click="goMyOrder()"
class="allOrder"
>
<text>全部订单</text>
<text class="iconfont icon-jiantou"></text>
</text>
</view>
<view class="orderState acea-row row-middle" v-if="userInfo.orderStatusNum !== undefined || userInfo.orderStatusNum !== null">
<view @click="goMyOrder(0)" class="item">
<view
class="orderState acea-row row-middle"
v-if="userInfo.orderStatusNum !== undefined || userInfo.orderStatusNum !== null"
>
<view
@click="goMyOrder(0)"
class="item"
>
<view class="pictrue">
<image :src="`${$VUE_APP_RESOURCES_URL}/images/dfk.png`" />
<text class="order-status-num" v-if="userInfo.orderStatusNum.unpaidCount > 0">{{ userInfo.orderStatusNum.unpaidCount }}</text>
<text
class="order-status-num"
v-if="userInfo.orderStatusNum.unpaidCount > 0"
>{{ userInfo.orderStatusNum.unpaidCount }}</text>
</view>
<view>待付款</view>
</view>
<view @click="goMyOrder(1)" class="item">
<view
@click="goMyOrder(1)"
class="item"
>
<view class="pictrue">
<image :src="`${$VUE_APP_RESOURCES_URL}/images/dfh.png`" />
<text class="order-status-num" v-if="userInfo.orderStatusNum.unshippedCount > 0">{{ userInfo.orderStatusNum.unshippedCount }}</text>
<text
class="order-status-num"
v-if="userInfo.orderStatusNum.unshippedCount > 0"
>{{ userInfo.orderStatusNum.unshippedCount }}</text>
</view>
<view>待发货</view>
</view>
<view @click="goMyOrder(2)" class="item">
<view
@click="goMyOrder(2)"
class="item"
>
<view class="pictrue">
<image :src="`${$VUE_APP_RESOURCES_URL}/images/dsh.png`" />
<text class="order-status-num" v-if="userInfo.orderStatusNum.receivedCount > 0">{{ userInfo.orderStatusNum.receivedCount }}</text>
<text
class="order-status-num"
v-if="userInfo.orderStatusNum.receivedCount > 0"
>{{ userInfo.orderStatusNum.receivedCount }}</text>
</view>
<text>待收货</text>
</view>
<view @click="goMyOrder(3)" class="item">
<view
@click="goMyOrder(3)"
class="item"
>
<view class="pictrue">
<image :src="`${$VUE_APP_RESOURCES_URL}/images/dpj.png`" />
<text class="order-status-num" v-if="userInfo.orderStatusNum.evaluatedCount > 0">{{ userInfo.orderStatusNum.evaluatedCount }}</text>
<text
class="order-status-num"
v-if="userInfo.orderStatusNum.evaluatedCount > 0"
>{{ userInfo.orderStatusNum.evaluatedCount }}</text>
</view>
<text>待评价</text>
</view>
<view @click="goReturnList()" class="item">
<view
@click="goReturnList()"
class="item"
>
<view class="pictrue">
<image :src="`${$VUE_APP_RESOURCES_URL}/images/sh.png`" />
<text class="order-status-num" v-if="userInfo.orderStatusNum.refundCount > 0">{{ userInfo.orderStatusNum.refundCount }}</text>
<text
class="order-status-num"
v-if="userInfo.orderStatusNum.refundCount > 0"
>{{ userInfo.orderStatusNum.refundCount }}</text>
</view>
<text>售后/退款</text>
</view>
@ -105,7 +180,11 @@
<view class="myService">
<view class="serviceList acea-row row-middle">
<template v-for="(item, MyMenusIndex) in MyMenus">
<view class="item" :key="MyMenusIndex" @click="goPages(MyMenusIndex)">
<view
class="item"
:key="MyMenusIndex"
@click="goPages(MyMenusIndex)"
>
<view class="pictrue">
<image :src="item.pic" />
</view>
@ -127,7 +206,10 @@
:login_type="userInfo.login_type"
></SwitchWindow>-->
</view>
<Authorization v-else />
<Authorization
v-else
ref="authorization"
/>
</view>
</template>
<script>
@ -147,7 +229,7 @@ export default {
Authorization,
},
props: {},
data: function() {
data: function () {
return {
canIUseGetUserProfile: false,
MyMenus: [],
@ -160,6 +242,9 @@ export default {
if (wx.getUserProfile) {
this.canIUseGetUserProfile = true
}
if (!this.$store.getters.token && !this.userInfo.uid) {
this.$refs.authorization.getLoginCode()
}
},
methods: {
...mapMutations(['updateAuthorizationPage']),
@ -428,6 +513,7 @@ export default {
color: rgba(255, 255, 255, 1);
}
}
.footer-line-height {
height: 1 * 100rpx;
}