156 lines
3.1 KiB
Vue
156 lines
3.1 KiB
Vue
<template>
|
||
<view class="bindphone-page">
|
||
<!-- 返回按钮 -->
|
||
<view class="nav-back" @click="back">
|
||
<text class="back-icon">‹</text>
|
||
</view>
|
||
|
||
<!-- 页面标题 -->
|
||
<view class="nav-title">绑定手机号</view>
|
||
|
||
<!-- 占位区域，背景图已包含Logo和欢迎语 -->
|
||
<view class="logo-section"></view>
|
||
|
||
<!-- 底部绑定区域 -->
|
||
<view class="bindphone-bottom">
|
||
<!-- 小程序授权手机号按钮 -->
|
||
<button class="bind-btn" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">
|
||
绑定手机号
|
||
</button>
|
||
|
||
<!-- 跳过按钮 -->
|
||
<view class="skip-btn" @click="back()">取消</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { bindMobileByWx } from '@/common/server/auth.js';
|
||
|
||
export default {
|
||
data() {
|
||
return {}
|
||
},
|
||
methods: {
|
||
back() {
|
||
let that = this;
|
||
uni.navigateBack({
|
||
fail: function() {
|
||
that.$customRouter.navigateTo('/pages/user/index', {}, 'reLaunch');
|
||
}
|
||
});
|
||
},
|
||
|
||
async getPhoneNumber(e) {
|
||
if (!e.detail.code) {
|
||
return uni.showToast({ title: '授权失败，请重试', icon: 'none' });
|
||
}
|
||
|
||
let that = this;
|
||
uni.login({
|
||
async success(res) {
|
||
uni.checkSession({
|
||
async success() {
|
||
try {
|
||
const result = await bindMobileByWx(e.detail.code);
|
||
if (result.status == 1) {
|
||
if (result.data?.token) {
|
||
uni.setStorageSync('token', result.data.token);
|
||
}
|
||
uni.showToast({
|
||
title: '绑定成功~',
|
||
icon: 'success',
|
||
success() {
|
||
setTimeout(() => {
|
||
uni.navigateBack({
|
||
fail: function() {
|
||
that.$customRouter.navigateTo('/pages/user/index', {}, 'reLaunch');
|
||
}
|
||
});
|
||
}, 1000);
|
||
}
|
||
});
|
||
} else {
|
||
uni.showToast({ title: result.msg || '绑定失败', icon: 'none' });
|
||
}
|
||
} catch (error) {
|
||
uni.showToast({ title: '绑定失败，请重试', icon: 'none' });
|
||
}
|
||
}
|
||
});
|
||
}
|
||
});
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.bindphone-page {
|
||
min-height: 100vh;
|
||
background: url('https://youdas-1308826010.cos.ap-shanghai.myqcloud.com/static/web/static/common/bj.png') no-repeat center top / 100% auto;
|
||
background-color: #FFFFFF;
|
||
position: relative;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.nav-back {
|
||
position: absolute;
|
||
top: 88rpx;
|
||
left: 32rpx;
|
||
width: 60rpx;
|
||
height: 60rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
|
||
.back-icon {
|
||
font-size: 40rpx;
|
||
color: #333;
|
||
}
|
||
}
|
||
|
||
.nav-title {
|
||
position: absolute;
|
||
top: 88rpx;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
font-size: 34rpx;
|
||
color: #333;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.logo-section {
|
||
flex: 1;
|
||
}
|
||
|
||
.bindphone-bottom {
|
||
padding: 0 48rpx 80rpx;
|
||
|
||
.bind-btn {
|
||
width: 100%;
|
||
height: 96rpx;
|
||
background: #03D8F4;
|
||
border-radius: 48rpx;
|
||
font-size: 32rpx;
|
||
color: #FFFFFF;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
border: none;
|
||
|
||
&::after {
|
||
border: none;
|
||
}
|
||
}
|
||
|
||
.skip-btn {
|
||
margin-top: 32rpx;
|
||
text-align: center;
|
||
font-size: 28rpx;
|
||
color: #999;
|
||
}
|
||
}
|
||
</style>
|