180 lines
4.3 KiB
Vue
180 lines
4.3 KiB
Vue
<template>
|
||
<view class="page">
|
||
<u-navbar :is-back="false" :title="tittxt" :border-bottom="false" :background="bgc" title-color='#fff' title-size='36' height='36' >
|
||
|
||
</u-navbar>
|
||
<view class="imgbox">
|
||
<image src="@/static/login.png" mode=""></image>
|
||
</view>
|
||
<view class="tip">
|
||
欢迎来到e租居
|
||
</view>
|
||
<view class="inputbox">
|
||
<!-- 在这里放置你的输入框 -->
|
||
<view class="box1" v-if="chooseType">
|
||
<view class="input_txt">
|
||
首次使用请选择您的身份
|
||
</view>
|
||
<div class="button" style="margin-top: 162rpx;" @click="userType(1)">
|
||
我是房东
|
||
</div>
|
||
<div class="button" @click="userType(2)">
|
||
我是租户
|
||
</div>
|
||
</view>
|
||
<view class="box1" v-if="login">
|
||
<view class="input_txt" style="width: 536rpx;font-size: 24rpx;line-height: 32rpx;">
|
||
您暂未授权e租居小程序获取你的信息，将无法正常使用小程序的功能。如需要正常使用请点击“授权”按钮，打开头像，昵称等信息的授权。
|
||
</view>
|
||
|
||
<button class="button" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber" style="margin-top: 330rpx;margin-left: -10rpx;" >
|
||
授权登录
|
||
</button>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
bgc: {
|
||
backgroundColor: "#7D86EF",
|
||
},
|
||
tittxt:"授权登录",
|
||
chooseType:true,
|
||
usertype:'',
|
||
login:false
|
||
}
|
||
},
|
||
methods: {
|
||
userType(num){
|
||
this.chooseType=false
|
||
this.login=true
|
||
if(num==1){
|
||
this.usertype='00'
|
||
}else{
|
||
this.usertype='01'
|
||
}
|
||
},
|
||
getPhoneNumber(e) {
|
||
let that = this;
|
||
console.log("eeeeeeee", e);
|
||
const wxLoginAsync = () => {
|
||
return new Promise((resolve, reject) => {
|
||
wx.login({
|
||
success(res) {
|
||
if (res.code) {
|
||
console.log('登录！', res);
|
||
let data = {
|
||
wxOpenId: res.code,
|
||
userType: that.usertype,
|
||
mobileCode: e.detail.code,
|
||
};
|
||
resolve(data);
|
||
} else {
|
||
reject(res.errMsg);
|
||
}
|
||
},
|
||
fail(err) {
|
||
reject(err);
|
||
}
|
||
});
|
||
});
|
||
};
|
||
wxLoginAsync()
|
||
.then(async (data) => {
|
||
this.$u.post("/app/auth/wxLogin",data).then((res) => {
|
||
|
||
|
||
|
||
|
||
// this.$forceUpdate()
|
||
if (res.code == 200) {
|
||
console.log(res,'resres');
|
||
wx.setStorageSync('token', res.token);
|
||
that.ceshi()
|
||
}
|
||
});
|
||
|
||
})
|
||
.catch((err) => {
|
||
console.error(err);
|
||
});
|
||
},
|
||
async ceshi() {
|
||
this.$u.get("/app/user/userInfo").then((res) => {
|
||
console.log('进入跳转');
|
||
// uni.switchTab({
|
||
// url: '/pages/index/index'
|
||
// })
|
||
});
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" >
|
||
page{
|
||
background: #FFFFFF;
|
||
}
|
||
.page {
|
||
position: relative; /* 添加相对定位 */
|
||
}
|
||
|
||
.imgbox {
|
||
width: 750rpx;
|
||
height: 576rpx;
|
||
z-index: 0;
|
||
|
||
image {
|
||
width: 750rpx;
|
||
height: 576rpx;
|
||
}
|
||
}
|
||
|
||
.tip {
|
||
width: 204rpx;
|
||
position: absolute;
|
||
top: 400rpx;
|
||
left: 30rpx;
|
||
font-weight: 500;
|
||
font-size: 48rpx;
|
||
color: #FFFFFF;
|
||
line-height: 66rpx;
|
||
}
|
||
|
||
.inputbox {
|
||
position: absolute; /* 或者 fixed，根据你的需求 */
|
||
top: 700rpx; /* 调整这里来控制距离顶部的距离 */
|
||
|
||
width: 750rpx; /* 调整输入框的宽度 */
|
||
padding: 100rpx 0;
|
||
background: #fff; /* 设置背景颜色，这里是红色的半透明 */
|
||
border-radius: 50rpx; /* 设置圆角 */
|
||
z-index: 999; /* 设置 z-index，确保在其他内容上方显示 */
|
||
padding-left: 104rpx;
|
||
.input_txt{
|
||
font-weight: 400;
|
||
font-size: 32rpx;
|
||
color: #3D3D3D;
|
||
line-height: 44rpx;
|
||
}
|
||
.button{
|
||
margin-top: 64rpx;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
width: 562rpx;
|
||
height: 96rpx;
|
||
background: #8883F0;
|
||
border-radius: 52rpx 52rpx 52rpx 52rpx;
|
||
|
||
font-weight: 500;
|
||
font-size: 36rpx;
|
||
color: #FFFFFF;
|
||
}
|
||
}
|
||
</style>
|