mirror of
http://36.133.248.69:3088/admin/RentWeAppFront.git
synced 2026-03-07 17:32:25 +08:00
完成大体功能和样式
This commit is contained in:
308
pages-biz/login/login.vue
Normal file
308
pages-biz/login/login.vue
Normal file
@@ -0,0 +1,308 @@
|
||||
<template>
|
||||
<view class="login-container">
|
||||
<!-- 顶部状态栏 -->
|
||||
<view class="status-bar"> <u-icon :name="btn.icon" :color="btn.color || '#333'" :size="btn.size || 40"></u-icon>
|
||||
</view>
|
||||
|
||||
<!-- 主体内容区 -->
|
||||
<view class="content">
|
||||
<!-- 标题区域 -->
|
||||
<view class="title">登录</view>
|
||||
|
||||
<!-- 登录插图区域 -->
|
||||
<view class="illustration">
|
||||
<image :src="staticHost + '/public/static/login/bg.png'" mode="aspectFit" />
|
||||
</view>
|
||||
|
||||
<!-- 登录按钮 -->
|
||||
<button class="login-btn" open-type="getPhoneNumber" @getphonenumber="onGetPhone">
|
||||
使用微信授权登录
|
||||
</button>
|
||||
|
||||
<!-- 用户类型选择 -->
|
||||
<view class="user-type" shape="square">
|
||||
<u-radio-group v-model="loginType" active-color="#EA414A" shape="square">
|
||||
<u-radio name="0">个人</u-radio>
|
||||
<u-radio name="1">企业</u-radio>
|
||||
</u-radio-group>
|
||||
</view>
|
||||
|
||||
<!-- 协议勾选 -->
|
||||
<view class="agreement">
|
||||
<u-checkbox v-model="agreeProtocol" shape="square" active-color="#EA414A">
|
||||
<text class="agreement-text">
|
||||
我已阅读并同意
|
||||
<text class="link" @tap.stop="goPrivacy('user')">《用户协议》</text>
|
||||
和
|
||||
<text class="link" @tap.stop="goPrivacy('privacy')">《隐私政策》</text>
|
||||
</text>
|
||||
</u-checkbox>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
designWidth: 750,
|
||||
screenWidth: 0,
|
||||
scale: 1,
|
||||
loginType: "0",
|
||||
agreeProtocol: false
|
||||
}
|
||||
},
|
||||
|
||||
onLoad() {
|
||||
wx.getWindowInfo({
|
||||
success: (res) => {
|
||||
this.screenWidth = res.windowWidth
|
||||
this.scale = this.screenWidth / this.designWidth
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
onUnload() {
|
||||
|
||||
},
|
||||
computed: {
|
||||
// title 样式
|
||||
titleStyle() {
|
||||
const s = this.scale;
|
||||
return {
|
||||
width: `${93 * s}rpx`,
|
||||
height: `${45 * s}rpx`,
|
||||
fontSize: `${48 * s}rpx`,
|
||||
lineHeight: `${40 * s}rpx`,
|
||||
fontWeight: 500,
|
||||
color: '#222222',
|
||||
fontFamily: 'Noto Sans S Chinese',
|
||||
textAlign: 'center'
|
||||
}
|
||||
},
|
||||
staticHost() {
|
||||
return this.$config.staticUrl
|
||||
},
|
||||
headerStyle() {
|
||||
const s = this.scale;
|
||||
return {
|
||||
marginTop: `${214 * s}rpx`,
|
||||
flex: 1,
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
alignItems: 'center', // 水平居中
|
||||
justifyContent: 'flex-start' // 从顶部开始
|
||||
}
|
||||
},
|
||||
// cover 样式
|
||||
coverStyle() {
|
||||
const s = this.scale;
|
||||
return {
|
||||
width: `${428 * s}rpx`,
|
||||
height: `${608 * s}rpx`
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
/** 微信手机号授权 */
|
||||
onGetPhone(e) {
|
||||
const {
|
||||
code
|
||||
} = e.detail;
|
||||
|
||||
if (!code) {
|
||||
this.$mytip.toast("授权失败");
|
||||
return;
|
||||
}
|
||||
this.doLogin(code);
|
||||
},
|
||||
|
||||
/** 执行登录逻辑 */
|
||||
async doLogin(phoneGetCode) {
|
||||
if (!this.agreeProtocol) {
|
||||
this.$mytip.toast('请先阅读并同意用户协议和隐私政策')
|
||||
return
|
||||
}
|
||||
uni.showLoading({
|
||||
title: "登录中...",
|
||||
mask: true
|
||||
});
|
||||
|
||||
try {
|
||||
// 微信登录
|
||||
const loginRes = await new Promise((resolve, reject) => {
|
||||
uni.login({
|
||||
provider: 'weixin',
|
||||
success: resolve,
|
||||
fail: reject
|
||||
});
|
||||
});
|
||||
|
||||
// 调用后端登录接口
|
||||
const authRes = await this.$u.post(`/login/weChatLogin`, {
|
||||
phoneGetCode: phoneGetCode,
|
||||
loginCode: loginRes.code,
|
||||
loginType: this.loginType
|
||||
});
|
||||
|
||||
// let tempToken = 'asd5646'
|
||||
// 保存token
|
||||
let token = authRes.data;
|
||||
this.$u.vuex('vuex_token', token);
|
||||
// this.$u.vuex('vuex_token', tempToken);
|
||||
uni.hideLoading();
|
||||
this.getUserOtherInfo(this.loginType,token)
|
||||
// 跳转首页
|
||||
uni.switchTab({
|
||||
url: '/pages/index/index'
|
||||
});
|
||||
|
||||
} catch (err) {
|
||||
uni.hideLoading();
|
||||
this.$mytip.toast("登录失败");
|
||||
console.error('Login failed:', err);
|
||||
}
|
||||
},
|
||||
getUserOtherInfo(loginType, token) {
|
||||
let url = `/login/userInfo`;
|
||||
this.$u.get(url, {}, {
|
||||
'WT': token,
|
||||
'USERTYPE': loginType
|
||||
}).then(obj => {
|
||||
if(obj.flag){
|
||||
uni.setStorageSync('userInfo', {
|
||||
userType: obj.data.userType,
|
||||
oaAuth: obj.data.oaAuth,
|
||||
cusNo: obj.data.cusNo,
|
||||
userName: obj.data.userName,
|
||||
openId: obj.data.openId
|
||||
})
|
||||
}
|
||||
});
|
||||
// let tempUser = {
|
||||
// userType: '0',
|
||||
// oaAuth: '1',
|
||||
// cusNo: 'cus0001',
|
||||
// openId: '65456asd'
|
||||
// }
|
||||
// uni.setStorageSync('userInfo', tempUser)
|
||||
|
||||
},
|
||||
/** 触发手机号选择（子组件 → 父组件） */
|
||||
showPhoneSelector(phoneList, openid) {
|
||||
this.$emit("choosePhone", {
|
||||
phoneList,
|
||||
openid
|
||||
});
|
||||
},
|
||||
/** 查看协议 */
|
||||
goPrivacy(type) {
|
||||
console.log(type)
|
||||
const url = type === 'user' ?
|
||||
'/pages-biz/privacy/userAgreement' :
|
||||
'/pages-biz/privacy/privacyPolicy';
|
||||
|
||||
uni.navigateTo({
|
||||
url
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.login-container {
|
||||
height: 100vh;
|
||||
background-color: #fff;
|
||||
overflow: hidden;
|
||||
|
||||
.status-bar {
|
||||
margin-top: 7.56%;
|
||||
height: var(--status-bar-height);
|
||||
}
|
||||
|
||||
.content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
height: calc(100vh - var(--status-bar-height));
|
||||
margin-top: 12.8%;
|
||||
}
|
||||
|
||||
.title {
|
||||
height: 45rpx;
|
||||
font-family: Noto Sans S Chinese;
|
||||
font-weight: 500;
|
||||
font-size: 48rpx;
|
||||
color: #222222;
|
||||
line-height: 40rpx;
|
||||
}
|
||||
|
||||
.illustration {
|
||||
width: 100%;
|
||||
height: 44.6%;
|
||||
padding: 0 21.47%;
|
||||
margin-bottom: 6%;
|
||||
}
|
||||
|
||||
.illustration image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.login-btn {
|
||||
width: 78.6%;
|
||||
height: 7.12%;
|
||||
background: linear-gradient(90deg, #FF2F31 0%, #FF9379 100%);
|
||||
border-radius: 49rpx;
|
||||
font-size: 36rpx;
|
||||
color: #ffffff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 40rpx;
|
||||
}
|
||||
|
||||
.user-type {
|
||||
display: flex; justify-content: center;
|
||||
gap: 40rpx;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.agreement {
|
||||
margin-top: 6.24%;
|
||||
padding: 0 40rpx;
|
||||
}
|
||||
|
||||
.agreement-text {
|
||||
font-size: 26rpx;
|
||||
color: #cecece;
|
||||
}
|
||||
|
||||
.link {
|
||||
color: #334254;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* 响应式适配 */
|
||||
@media (max-width: 320rpx) {
|
||||
.title {
|
||||
font-size: 42rpx;
|
||||
margin-bottom: 100rpx;
|
||||
}
|
||||
|
||||
.illustration {
|
||||
height: 360rpx;
|
||||
}
|
||||
|
||||
.login-btn {
|
||||
height: 80rpx;
|
||||
font-size: 30rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user