You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
473 lines
11 KiB
473 lines
11 KiB
<template>
|
|
<view class="content">
|
|
<!-- 主要内容区域 -->
|
|
<view class="main-content">
|
|
<!-- 权限申请卡片 -->
|
|
<view class="permission-card">
|
|
<view class="app-icon">
|
|
<text class="icon-text">ES</text>
|
|
</view>
|
|
<view class="login-tip">Epic Soul 申请获得</view>
|
|
<view class="login-tip2">以下权限</view>
|
|
<view class="login-tip-box">
|
|
<view class="permission-item">
|
|
<text class="permission-icon">👤</text>
|
|
<text class="permission-text">获得你的公开信息（昵称、头像、地区及性别）</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 按钮区域 -->
|
|
<view class="btn-container">
|
|
<view class="btn-box">
|
|
<button class="cancel-btn" @click="redirectIndex">取消</button>
|
|
<button class="confirm-btn" @click="getUserInfo">同意</button>
|
|
</view>
|
|
|
|
<!-- 协议同意区域 -->
|
|
<view class="agreement-box">
|
|
<radio-group @change="toggleAgreement">
|
|
<label class="agreement-label">
|
|
<radio value="1" :checked="isAgreed" class="agreement-radio"></radio>
|
|
<text class="agreement-text">同意</text>
|
|
<text class="agreement-link" @click="gotoInfo">《用户服务协议》、《隐私政策》</text>
|
|
</label>
|
|
</radio-group>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 手机号授权弹窗 -->
|
|
<uni-popup ref="popup" type="bottom" background-color="#fff">
|
|
<view class="phone-auth-popup">
|
|
<view class="popup-title">手机号授权</view>
|
|
<view class="popup-desc">为了更好地为您提供服务，需要获取您的手机号</view>
|
|
<button class="phone-auth-btn" open-type="getPhoneNumber" @getphonenumber="handlePhoneNumber">
|
|
点击授权手机号
|
|
</button>
|
|
</view>
|
|
</uni-popup>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: "login",
|
|
data() {
|
|
return {
|
|
// 导航栏参数
|
|
height: 0,
|
|
statusBarHeight: 0,
|
|
isAgreed: false,
|
|
};
|
|
},
|
|
onLoad(options) {
|
|
this.initRectInfo()
|
|
// 只需授权手机号
|
|
if (options.needAuth === '1') {
|
|
setTimeout(() => {
|
|
this.$refs.popup.open('bottom');
|
|
}, 400);
|
|
}
|
|
},
|
|
methods: {
|
|
initRectInfo () {
|
|
const sysInfo = uni.getSystemInfoSync()
|
|
this.statusBarHeight = sysInfo.statusBarHeight
|
|
// 默认高度
|
|
this.height = sysInfo.statusBarHeight + 40
|
|
},
|
|
// 处理手机号授权
|
|
handlePhoneNumber(e) {
|
|
if (e.detail.errMsg === "getPhoneNumber:ok") { // 成功
|
|
this.$refs.popup.close();
|
|
this.Post({
|
|
code: e.detail.code,
|
|
encryptedData: e.detail.encryptedData,
|
|
iv: e.detail.iv,
|
|
token: uni.getStorageSync('token1')
|
|
}, '/api/mini_program/bindPhoneNumber')
|
|
.then(res => {
|
|
this.Post({
|
|
}, '/framework/points/add','DES')
|
|
.then(res => {
|
|
|
|
})
|
|
this.$store.commit('changeUserInfo', res.data.userinfo);
|
|
this.navigateBasedOnPath();
|
|
|
|
})
|
|
.catch(error => {
|
|
console.error('绑定手机号失败:', error);
|
|
uni.showToast({
|
|
title: error.data.msg,
|
|
icon: 'none'
|
|
});
|
|
});
|
|
} else {
|
|
console.error('获取手机号失败:', e.detail.errMsg);
|
|
uni.showToast({
|
|
title: '获取手机号失败，请稍后重试',
|
|
icon: 'none'
|
|
});
|
|
}
|
|
},
|
|
// 跳转到协议页面
|
|
gotoInfo() {
|
|
uni.navigateTo({
|
|
url: '/subPackages/user/privacy'
|
|
});
|
|
},
|
|
// 切换协议同意状态
|
|
toggleAgreement() {
|
|
this.isAgreed = !this.isAgreed;
|
|
},
|
|
// 重定向到首页
|
|
redirectIndex() {
|
|
uni.switchTab({
|
|
url: '/pages/index/index',
|
|
});
|
|
},
|
|
// 获取用户信息
|
|
getUserInfo() {
|
|
if (!this.isAgreed) {
|
|
uni.showToast({
|
|
title: '请先勾选同意《用户服务协议》、《隐私政策》',
|
|
icon: 'none'
|
|
});
|
|
return;
|
|
}
|
|
uni.login({
|
|
provider: 'weixin',
|
|
success: (loginRes) => {
|
|
uni.getUserInfo({
|
|
withCredentials: true,
|
|
success: (res) => {
|
|
this.Post({
|
|
code: loginRes.code,
|
|
userInfo: res.userInfo,
|
|
encryptedData: res.encryptedData,
|
|
iv: res.iv,
|
|
wechat_qrcode: uni.getStorageSync('wechat_qrcode') || ''
|
|
}, '/api/mini_program/login')
|
|
.then(resTwo => {
|
|
this.$store.commit('changeUserInfo', resTwo.data.userinfo);
|
|
if (resTwo.data.userinfo.mobile) {
|
|
this.navigateBasedOnPath();
|
|
} else {
|
|
uni.setStorageSync('token1', resTwo.data.userinfo.token);
|
|
this.$refs.popup.open('bottom');
|
|
}
|
|
})
|
|
.catch(error => {
|
|
console.error('登录失败:', error);
|
|
uni.showToast({
|
|
title: '登录失败，请稍后重试',
|
|
icon: 'none'
|
|
});
|
|
});
|
|
},
|
|
fail: (err) => {
|
|
console.error('获取用户信息失败:', err);
|
|
uni.showToast({
|
|
title: '获取用户信息失败，请稍后重试',
|
|
icon: 'none'
|
|
});
|
|
}
|
|
});
|
|
},
|
|
fail: (err) => {
|
|
console.error('微信登录失败:', err);
|
|
uni.showToast({
|
|
title: '微信登录失败，请稍后重试',
|
|
icon: 'none'
|
|
});
|
|
}
|
|
});
|
|
},
|
|
// 根据路径进行导航
|
|
navigateBasedOnPath() {
|
|
if (this.$store.state.user.toPath.includes('user/user')) {
|
|
uni.switchTab({
|
|
url: this.$store.state.user.toPath
|
|
});
|
|
} else {
|
|
uni.navigateBack({});
|
|
}
|
|
}
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
// 整体容器
|
|
.content {
|
|
min-height: 100vh;
|
|
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
|
|
position: relative;
|
|
}
|
|
|
|
// 顶部导航栏
|
|
.search-header {
|
|
width: 100%;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
background: rgba(255, 255, 255, 0.95);
|
|
backdrop-filter: blur(10px);
|
|
text-align: center;
|
|
z-index: 99;
|
|
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
|
|
|
|
.title {
|
|
font-size: 32rpx;
|
|
font-weight: 600;
|
|
color: #2c3e50;
|
|
letter-spacing: 1rpx;
|
|
}
|
|
|
|
.subtitle {
|
|
font-size: 24rpx;
|
|
color: #7f8c8d;
|
|
margin-top: 4rpx;
|
|
}
|
|
}
|
|
|
|
// 主要内容区域
|
|
.main-content {
|
|
padding: 120rpx 40rpx 40rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
min-height: calc(100vh - 120rpx);
|
|
}
|
|
|
|
// 权限申请卡片
|
|
.permission-card {
|
|
background: white;
|
|
border-radius: 24rpx;
|
|
padding: 60rpx 40rpx;
|
|
margin-bottom: 60rpx;
|
|
box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.08);
|
|
text-align: center;
|
|
position: relative;
|
|
|
|
&::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 8rpx;
|
|
background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
|
|
border-radius: 24rpx 24rpx 0 0;
|
|
}
|
|
}
|
|
|
|
// 应用图标
|
|
.app-icon {
|
|
width: 120rpx;
|
|
height: 120rpx;
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
border-radius: 24rpx;
|
|
margin: 0 auto 40rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
box-shadow: 0 8rpx 24rpx rgba(102, 126, 234, 0.3);
|
|
|
|
.icon-text {
|
|
color: white;
|
|
font-size: 36rpx;
|
|
font-weight: bold;
|
|
letter-spacing: 2rpx;
|
|
}
|
|
}
|
|
|
|
// 权限申请文字
|
|
.login-tip {
|
|
font-size: 32rpx;
|
|
color: #2c3e50;
|
|
margin-bottom: 16rpx;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.login-tip2 {
|
|
font-size: 48rpx;
|
|
color: #2c3e50;
|
|
margin-bottom: 40rpx;
|
|
font-weight: 600;
|
|
}
|
|
|
|
// 权限详情框
|
|
.login-tip-box {
|
|
background: #f8f9fa;
|
|
border-radius: 16rpx;
|
|
padding: 32rpx;
|
|
margin-top: 32rpx;
|
|
border-left: 6rpx solid #667eea;
|
|
}
|
|
|
|
.permission-item {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 16rpx;
|
|
|
|
.permission-icon {
|
|
font-size: 32rpx;
|
|
line-height: 1;
|
|
margin-top: 4rpx;
|
|
}
|
|
|
|
.permission-text {
|
|
font-size: 28rpx;
|
|
color: #5a6c7d;
|
|
line-height: 1.6;
|
|
flex: 1;
|
|
}
|
|
}
|
|
|
|
// 按钮容器
|
|
.btn-container {
|
|
// margin-top: auto;
|
|
}
|
|
|
|
// 按钮组
|
|
.btn-box {
|
|
display: flex;
|
|
gap: 24rpx;
|
|
margin-bottom: 40rpx;
|
|
|
|
button {
|
|
flex: 1;
|
|
height: 88rpx;
|
|
border-radius: 44rpx;
|
|
font-size: 32rpx;
|
|
font-weight: 500;
|
|
border: none;
|
|
position: relative;
|
|
overflow: hidden;
|
|
transition: all 0.3s ease;
|
|
|
|
&::after {
|
|
border: none;
|
|
}
|
|
}
|
|
|
|
.cancel-btn {
|
|
background: #f8f9fa;
|
|
color: #6c757d;
|
|
border: 2rpx solid #e9ecef;
|
|
|
|
&:active {
|
|
background: #e9ecef;
|
|
transform: scale(0.98);
|
|
}
|
|
}
|
|
|
|
.confirm-btn {
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
color: white;
|
|
box-shadow: 0 6rpx 20rpx rgba(102, 126, 234, 0.4);
|
|
|
|
&:active {
|
|
transform: scale(0.98);
|
|
box-shadow: 0 4rpx 16rpx rgba(102, 126, 234, 0.3);
|
|
}
|
|
|
|
&::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: -100%;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
|
|
transition: left 0.5s;
|
|
}
|
|
|
|
&:active::before {
|
|
left: 100%;
|
|
}
|
|
}
|
|
}
|
|
|
|
// 协议同意区域
|
|
.agreement-box {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
|
|
.agreement-label {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12rpx;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.agreement-radio {
|
|
transform: scale(0.8);
|
|
margin: 0;
|
|
}
|
|
|
|
.agreement-text {
|
|
font-size: 26rpx;
|
|
color: #6c757d;
|
|
}
|
|
|
|
.agreement-link {
|
|
font-size: 26rpx;
|
|
color: #667eea;
|
|
text-decoration: underline;
|
|
margin-left: 8rpx;
|
|
|
|
&:active {
|
|
color: #5a67d8;
|
|
}
|
|
}
|
|
}
|
|
|
|
// 手机号授权弹窗
|
|
.phone-auth-popup {
|
|
padding: 60rpx 40rpx;
|
|
text-align: center;
|
|
border-radius: 24rpx 24rpx 0 0;
|
|
|
|
.popup-title {
|
|
font-size: 36rpx;
|
|
font-weight: 600;
|
|
color: #2c3e50;
|
|
margin-bottom: 24rpx;
|
|
}
|
|
|
|
.popup-desc {
|
|
font-size: 28rpx;
|
|
color: #6c757d;
|
|
line-height: 1.6;
|
|
margin-bottom: 60rpx;
|
|
}
|
|
|
|
.phone-auth-btn {
|
|
width: 100%;
|
|
height: 88rpx;
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
color: white;
|
|
border: none;
|
|
border-radius: 44rpx;
|
|
font-size: 32rpx;
|
|
font-weight: 500;
|
|
box-shadow: 0 6rpx 20rpx rgba(102, 126, 234, 0.4);
|
|
transition: all 0.3s ease;
|
|
|
|
&::after {
|
|
border: none;
|
|
}
|
|
|
|
&:active {
|
|
transform: scale(0.98);
|
|
box-shadow: 0 4rpx 16rpx rgba(102, 126, 234, 0.3);
|
|
}
|
|
}
|
|
}
|
|
</style>
|