|
|
@ -1,37 +1,47 @@ |
|
|
|
<template> |
|
|
|
<view class="login"> |
|
|
|
<view class="title"> |
|
|
|
帧视界 |
|
|
|
<view class="logo"> |
|
|
|
<image src="/static/image/login/logo.png" mode=""></image> |
|
|
|
</view> |
|
|
|
<view class="title"> |
|
|
|
申请获取你的头像、昵称 |
|
|
|
欢迎登录真视界 |
|
|
|
</view> |
|
|
|
|
|
|
|
<button class="chooseAvatar" open-type="chooseAvatar" @chooseavatar="onChooseAvatar"> |
|
|
|
<view class="line"> |
|
|
|
<view class=""> |
|
|
|
头像 |
|
|
|
</view> |
|
|
|
<view class=""> |
|
|
|
<image :src="userInfo.headImage" v-if="userInfo.headImage" style="width: 60rpx;height: 60rpx;" |
|
|
|
mode=""></image> |
|
|
|
|
|
|
|
<image src="/static/login/6.png" v-else style="width: 50rpx;height: 50rpx;" mode=""></image> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</button> |
|
|
|
<view class="line"> |
|
|
|
<view class=""> |
|
|
|
昵称 |
|
|
|
<view class="btn mt"> |
|
|
|
<view class="icon"> |
|
|
|
<image src="/static/image/login/wx.png" mode=""></image> |
|
|
|
</view> |
|
|
|
<view class=""> |
|
|
|
<input type="nickname" placeholder="请输入昵称" style="text-align: right;" id="nickName" |
|
|
|
v-model="userInfo.nickName" /> |
|
|
|
<view class="" |
|
|
|
@click="wxLogin"> |
|
|
|
微信授权手机号登录 |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<view class="btn" @click="submit"> |
|
|
|
确认 |
|
|
|
<view class="btn b2"> |
|
|
|
使用短信验证登录 |
|
|
|
</view> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<view class="config"> |
|
|
|
<uv-checkbox-group |
|
|
|
v-model="checkboxValue" |
|
|
|
shape="circle"> |
|
|
|
<view class="content"> |
|
|
|
<view |
|
|
|
style="display: flex;"> |
|
|
|
|
|
|
|
<uv-checkbox |
|
|
|
size="30rpx" |
|
|
|
:name="1" |
|
|
|
></uv-checkbox> |
|
|
|
阅读并同意我们的<text>“服务协议与隐私条款”</text> |
|
|
|
</view> |
|
|
|
<view class=""> |
|
|
|
以及<text>个人信息保护指引</text> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</uv-checkbox-group> |
|
|
|
</view> |
|
|
|
|
|
|
|
</view> |
|
|
|
</template> |
|
|
|
|
|
|
@ -39,92 +49,86 @@ |
|
|
|
export default { |
|
|
|
data() { |
|
|
|
return { |
|
|
|
userInfo: { |
|
|
|
headImage: '', |
|
|
|
nickName: '', |
|
|
|
} |
|
|
|
}; |
|
|
|
checkboxValue : [] |
|
|
|
} |
|
|
|
}, |
|
|
|
onShow() {}, |
|
|
|
computed: {}, |
|
|
|
methods: { |
|
|
|
onChooseAvatar(res) { |
|
|
|
let self = this |
|
|
|
self.$Oss.ossUpload(res.target.avatarUrl) |
|
|
|
.then(url => { |
|
|
|
self.userInfo.headImage = url |
|
|
|
}) |
|
|
|
}, |
|
|
|
submit() { |
|
|
|
let self = this |
|
|
|
|
|
|
|
uni.createSelectorQuery().in(this) |
|
|
|
.select("#nickName") |
|
|
|
.fields({ |
|
|
|
properties: ["value"], |
|
|
|
}) |
|
|
|
.exec((res) => { |
|
|
|
const nickName = res?.[0]?.value |
|
|
|
self.userInfo.nickName = nickName |
|
|
|
}) |
|
|
|
|
|
|
|
if (this.$utils.verificationAll(this.userInfo, { |
|
|
|
headImage: '请选择头像', |
|
|
|
nickName: '请填写昵称', |
|
|
|
})) { |
|
|
|
return |
|
|
|
} |
|
|
|
|
|
|
|
this.$api('infoUpdateInfo', this.userInfo, res => { |
|
|
|
if (res.code == 200) { |
|
|
|
uni.navigateBack(-1) |
|
|
|
} |
|
|
|
}) |
|
|
|
wxLogin(){ |
|
|
|
this.$store.commit('login') |
|
|
|
}, |
|
|
|
} |
|
|
|
} |
|
|
|
</script> |
|
|
|
|
|
|
|
<style lang="scss" scoped> |
|
|
|
.login { |
|
|
|
<style scoped lang="scss"> |
|
|
|
.login{ |
|
|
|
display: flex; |
|
|
|
justify-content: center; |
|
|
|
align-items: center; |
|
|
|
height: 80vh; |
|
|
|
flex-direction: column; |
|
|
|
position: relative; |
|
|
|
.logo{ |
|
|
|
height: 80rpx; |
|
|
|
width: 80rpx; |
|
|
|
padding: 40rpx 30rpx; |
|
|
|
background-color: #ddd; |
|
|
|
border-radius: 70rpx; |
|
|
|
image{ |
|
|
|
width: 80rpx; |
|
|
|
height: 80rpx; |
|
|
|
} |
|
|
|
margin-bottom: 20rpx; |
|
|
|
} |
|
|
|
.title{ |
|
|
|
position: relative; |
|
|
|
font-weight: 900; |
|
|
|
font-size: 45rpx; |
|
|
|
&::after{ |
|
|
|
content: ''; |
|
|
|
position: absolute; |
|
|
|
left: 0; |
|
|
|
top: 100%; |
|
|
|
display: block; |
|
|
|
height: 8rpx; |
|
|
|
width: 210rpx; |
|
|
|
background: linear-gradient(to right,#3c69f1, #fff); |
|
|
|
} |
|
|
|
} |
|
|
|
.btn{ |
|
|
|
width: 80%; |
|
|
|
height: 100rpx; |
|
|
|
background-color: #3c69f1; |
|
|
|
color: #fff; |
|
|
|
display: flex; |
|
|
|
flex-direction: column; |
|
|
|
justify-content: center; |
|
|
|
align-items: center; |
|
|
|
height: 80vh; |
|
|
|
|
|
|
|
.title { |
|
|
|
line-height: 45rpx; |
|
|
|
font-weight: 900; |
|
|
|
} |
|
|
|
|
|
|
|
.line { |
|
|
|
display: flex; |
|
|
|
justify-content: space-between; |
|
|
|
align-items: center; |
|
|
|
width: 80%; |
|
|
|
border-bottom: 1px solid #00000023; |
|
|
|
padding: 30rpx 0; |
|
|
|
margin: 0 auto; |
|
|
|
margin: 20rpx 0; |
|
|
|
.icon{ |
|
|
|
margin-right: 10rpx; |
|
|
|
image{ |
|
|
|
width: 40rpx; |
|
|
|
height: 35rpx; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.chooseAvatar { |
|
|
|
width: 100%; |
|
|
|
padding: 0; |
|
|
|
margin: 0; |
|
|
|
margin-top: 10vh; |
|
|
|
border: none; |
|
|
|
} |
|
|
|
|
|
|
|
.btn { |
|
|
|
// background: $uni-linear-gradient-btn-color; |
|
|
|
background: lightblue; |
|
|
|
color: #fff; |
|
|
|
width: 80%; |
|
|
|
padding: 20rpx 0; |
|
|
|
text-align: center; |
|
|
|
border-radius: 15rpx; |
|
|
|
margin-top: 10vh; |
|
|
|
} |
|
|
|
.b2{ |
|
|
|
background-color: #3c69f122; |
|
|
|
color: #3c69f1; |
|
|
|
} |
|
|
|
.mt{ |
|
|
|
margin-top: 200rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.config{ |
|
|
|
position: absolute; |
|
|
|
bottom: 0; |
|
|
|
font-size: 22rpx; |
|
|
|
text-align: center; |
|
|
|
line-height: 40rpx; |
|
|
|
text{ |
|
|
|
color: #3c69f1; |
|
|
|
} |
|
|
|
} |
|
|
|
</style> |
|
|
|
} |
|
|
|
</style> |