<template>
|
<view class="wechat-login-container">
|
<view class="header">
|
<view class="title">微信授权登录</view>
|
<view class="subtitle">即将登录到若依管理系统</view>
|
</view>
|
|
<view class="user-info-card">
|
<view class="avatar-section">
|
<image
|
class="user-avatar"
|
:src="wechatUserInfo.avatarUrl || '/static/images/profile.jpg'"
|
mode="aspectFill"
|
></image>
|
</view>
|
|
<view class="info-section">
|
<view class="info-item">
|
<view class="label">昵称</view>
|
<view class="value">{{ wechatUserInfo.nickName || '未知用户' }}</view>
|
</view>
|
|
<view class="info-item">
|
<view class="label">性别</view>
|
<view class="value">{{ genderText }}</view>
|
</view>
|
|
<view class="info-item">
|
<view class="label">地区</view>
|
<view class="value">{{ wechatUserInfo.country }} {{ wechatUserInfo.province }} {{ wechatUserInfo.city }}</view>
|
</view>
|
</view>
|
</view>
|
|
<view class="agreement-section">
|
<label class="checkbox">
|
<checkbox :checked="agreed" @click="toggleAgreement" />
|
<text class="agreement-text">我已阅读并同意</text>
|
<text class="link" @click="handleUserAgrement">《用户协议》</text>
|
<text>和</text>
|
<text class="link" @click="handlePrivacy">《隐私协议》</text>
|
</label>
|
</view>
|
|
<view class="action-buttons">
|
<button
|
class="confirm-btn"
|
:class="{ disabled: !agreed }"
|
:disabled="!agreed"
|
@click="confirmLogin"
|
>
|
确认登录
|
</button>
|
<button class="cancel-btn" @click="cancelLogin">取消</button>
|
</view>
|
</view>
|
</template>
|
|
<script>
|
export default {
|
data() {
|
return {
|
agreed: false,
|
wechatUserInfo: {},
|
globalConfig: getApp().globalData.config
|
}
|
},
|
onLoad(options) {
|
// 接收从登录页面传递的微信用户信息
|
if (options.userInfo) {
|
this.wechatUserInfo = JSON.parse(decodeURIComponent(options.userInfo))
|
console.log('微信用户信息:', this.wechatUserInfo)
|
}
|
},
|
computed: {
|
genderText() {
|
const genderMap = {
|
0: '未知',
|
1: '男',
|
2: '女'
|
}
|
return genderMap[this.wechatUserInfo.gender] || '未知'
|
}
|
},
|
methods: {
|
toggleAgreement() {
|
this.agreed = !this.agreed
|
},
|
// 隐私协议
|
handlePrivacy() {
|
let site = this.globalConfig.appInfo.agreements[0]
|
this.$tab.navigateTo(`/pages/common/webview/index?title=${site.title}&url=${site.url}`)
|
},
|
// 用户协议
|
handleUserAgrement() {
|
let site = this.globalConfig.appInfo.agreements[1]
|
this.$tab.navigateTo(`/pages/common/webview/index?title=${site.title}&url=${site.url}`)
|
},
|
// 确认登录
|
async confirmLogin() {
|
if (!this.agreed) {
|
this.$modal.msgError("请先同意用户协议和隐私协议")
|
return
|
}
|
|
this.$modal.loading("登录中...")
|
|
// 这里应该调用后端微信登录接口
|
// 示例代码，实际需要根据后端接口调整
|
/*
|
this.$store.dispatch('WechatLogin', {
|
openid: this.wechatUserInfo.openId,
|
userInfo: this.wechatUserInfo
|
}).then(() => {
|
this.$modal.closeLoading()
|
this.loginSuccess()
|
}).catch(() => {
|
this.$modal.closeLoading()
|
this.$modal.msgError("微信登录失败")
|
})
|
*/
|
|
// 临时演示用
|
setTimeout(() => {
|
this.$modal.closeLoading()
|
this.$modal.showToast("微信登录成功")
|
this.$tab.reLaunch('/pages/index')
|
}, 1000)
|
},
|
// 取消登录
|
cancelLogin() {
|
this.$modal.confirm('确定要取消登录吗？').then(() => {
|
this.$tab.reLaunch('/pages/login')
|
}).catch(() => {
|
// 取消操作
|
})
|
},
|
// 登录成功后，处理函数
|
loginSuccess(result) {
|
// 设置用户信息
|
this.$store.dispatch('GetInfo').then(res => {
|
this.$tab.reLaunch('/pages/index')
|
})
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss">
|
.wechat-login-container {
|
padding: 40rpx;
|
background-color: #f5f5f5;
|
min-height: 100vh;
|
|
.header {
|
text-align: center;
|
margin-bottom: 60rpx;
|
|
.title {
|
font-size: 36rpx;
|
font-weight: bold;
|
margin-bottom: 20rpx;
|
}
|
|
.subtitle {
|
font-size: 28rpx;
|
color: #666;
|
}
|
}
|
|
.user-info-card {
|
background-color: white;
|
border-radius: 20rpx;
|
padding: 40rpx;
|
margin-bottom: 40rpx;
|
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
|
|
.avatar-section {
|
text-align: center;
|
margin-bottom: 40rpx;
|
|
.user-avatar {
|
width: 120rpx;
|
height: 120rpx;
|
border-radius: 50%;
|
border: 4rpx solid #f0f0f0;
|
}
|
}
|
|
.info-section {
|
.info-item {
|
display: flex;
|
justify-content: space-between;
|
padding: 20rpx 0;
|
border-bottom: 1rpx solid #f0f0f0;
|
|
&:last-child {
|
border-bottom: none;
|
}
|
|
.label {
|
font-size: 28rpx;
|
color: #666;
|
}
|
|
.value {
|
font-size: 28rpx;
|
font-weight: bold;
|
}
|
}
|
}
|
}
|
|
.agreement-section {
|
margin-bottom: 60rpx;
|
|
.checkbox {
|
display: flex;
|
align-items: center;
|
|
.agreement-text {
|
margin: 0 10rpx;
|
}
|
|
.link {
|
color: #007AFF;
|
margin: 0 5rpx;
|
}
|
}
|
}
|
|
.action-buttons {
|
.confirm-btn {
|
width: 100%;
|
height: 80rpx;
|
background-color: #07c160;
|
color: white;
|
border-radius: 10rpx;
|
font-size: 32rpx;
|
margin-bottom: 20rpx;
|
|
&.disabled {
|
background-color: #cccccc;
|
}
|
}
|
|
.cancel-btn {
|
width: 100%;
|
height: 80rpx;
|
background-color: white;
|
color: #333;
|
border: 1rpx solid #ddd;
|
border-radius: 10rpx;
|
font-size: 32rpx;
|
}
|
}
|
}
|
</style>
|
