|
|
|
@ -1,37 +1,108 @@ |
|
|
|
<template> |
|
|
|
<view class="login"> |
|
|
|
<view class="page flex flex-column"> |
|
|
|
<!-- todo: 换回接口提供的 --> |
|
|
|
|
|
|
|
<image class="logo" src="../static/auth/logo.png" mode=""></image> |
|
|
|
|
|
|
|
<view class="title"> |
|
|
|
酒店桌布租赁平台 |
|
|
|
<!-- todo: 换回接口提供的 --> |
|
|
|
裂变星小程序 |
|
|
|
</view> |
|
|
|
<view class="title"> |
|
|
|
|
|
|
|
<view class="desc"> |
|
|
|
申请获取你的头像、昵称 |
|
|
|
</view> |
|
|
|
|
|
|
|
<button class="chooseAvatar" open-type="chooseAvatar" @chooseavatar="onChooseAvatar"> |
|
|
|
<view class="line"> |
|
|
|
<view class=""> |
|
|
|
<view class="form"> |
|
|
|
<view class="form-item"> |
|
|
|
<view class="label"> |
|
|
|
头像 |
|
|
|
</view> |
|
|
|
<view class=""> |
|
|
|
<image :src="userInfo.headImage" v-if="userInfo.headImage" style="width: 60rpx;height: 60rpx;" |
|
|
|
mode=""></image> |
|
|
|
<view class="content"> |
|
|
|
<button class="btn-avatar" :plain="true" :hairline="false" open-type="chooseAvatar" @chooseavatar="onChooseAvatar"> |
|
|
|
|
|
|
|
<image :src="userInfoForm.headImage" v-if="userInfoForm.headImage" class="avatar" |
|
|
|
mode=""></image> |
|
|
|
|
|
|
|
<image src="../static/auth/avatar.png" v-else class="avatar" |
|
|
|
mode=""></image> |
|
|
|
|
|
|
|
<image src="../static/auth/headImage.png" v-else style="width: 50rpx;height: 50rpx;" mode=""></image> |
|
|
|
</button> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</button> |
|
|
|
<view class="line"> |
|
|
|
<view class=""> |
|
|
|
昵称 |
|
|
|
<view class="form-item"> |
|
|
|
<view class="label"> |
|
|
|
昵称 |
|
|
|
</view> |
|
|
|
<view class="content"> |
|
|
|
<input |
|
|
|
id="nickName" |
|
|
|
type="nickname" |
|
|
|
placeholder="请输入昵称" |
|
|
|
style="text-align: right;" |
|
|
|
placeholder-class="auth-placeholder" |
|
|
|
v-model="userInfoForm.nickName" |
|
|
|
/> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<view class=""> |
|
|
|
<input type="nickname" placeholder="请输入昵称" style="text-align: right;" id="nickName" |
|
|
|
v-model="userInfo.nickName" /> |
|
|
|
<view class="form-item"> |
|
|
|
<view class="label"> |
|
|
|
微信号 |
|
|
|
</view> |
|
|
|
<view class="content"> |
|
|
|
<input |
|
|
|
id="nickName" |
|
|
|
type="nickname" |
|
|
|
placeholder="请输入微信号" |
|
|
|
style="text-align: right;" |
|
|
|
placeholder-class="auth-placeholder" |
|
|
|
v-model="userInfoForm.nickName" |
|
|
|
/> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<!-- <view class="form-item"> |
|
|
|
<view class="label"> |
|
|
|
手机号 |
|
|
|
</view> |
|
|
|
<view class="content"> |
|
|
|
<input v-if="userInfoForm.phone" |
|
|
|
placeholder-class="auth-placeholder" |
|
|
|
placeholder="请输入手机号" |
|
|
|
style="text-align: right;" |
|
|
|
disabled |
|
|
|
v-model="userInfoForm.phone" |
|
|
|
/> |
|
|
|
<view v-else> |
|
|
|
<button |
|
|
|
:plain="true" :hairline="false" |
|
|
|
class="btn-phone" |
|
|
|
open-type="getPhoneNumber" |
|
|
|
@getphonenumber="getPhone" |
|
|
|
> |
|
|
|
获取电话号码 |
|
|
|
</button> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> --> |
|
|
|
</view> |
|
|
|
<view class="btn" @click="submit"> |
|
|
|
|
|
|
|
|
|
|
|
<button |
|
|
|
:plain="true" :hairline="false" |
|
|
|
class="btn" |
|
|
|
open-type="getPhoneNumber" |
|
|
|
@getphonenumber="getPhone" |
|
|
|
> |
|
|
|
获取电话号码 |
|
|
|
</button> |
|
|
|
<button |
|
|
|
:plain="true" :hairline="false" |
|
|
|
class="btn btn-confirm" |
|
|
|
@click="submit" |
|
|
|
> |
|
|
|
确认 |
|
|
|
</view> |
|
|
|
</button> |
|
|
|
|
|
|
|
</view> |
|
|
|
</template> |
|
|
|
|
|
|
|
@ -39,21 +110,43 @@ |
|
|
|
export default { |
|
|
|
data() { |
|
|
|
return { |
|
|
|
userInfo: { |
|
|
|
userInfoForm: { |
|
|
|
headImage: '', |
|
|
|
nickName: '', |
|
|
|
phone : '', |
|
|
|
} |
|
|
|
}; |
|
|
|
}, |
|
|
|
onShow() {}, |
|
|
|
onLoad() { |
|
|
|
this.userInfoForm.phone = this.userInfo.phone || '' |
|
|
|
this.userInfoForm.nickName = this.userInfo.nickName || '' |
|
|
|
this.userInfoForm.headImage = this.userInfo.headImage || '' |
|
|
|
}, |
|
|
|
computed: {}, |
|
|
|
methods: { |
|
|
|
onChooseAvatar(res) { |
|
|
|
let self = this |
|
|
|
self.$Oss.ossUpload(res.target.avatarUrl) |
|
|
|
.then(url => { |
|
|
|
self.userInfo.headImage = url |
|
|
|
}) |
|
|
|
this.$Oss.ossUpload(res.target.avatarUrl) |
|
|
|
.then(url => { |
|
|
|
this.userInfoForm.headImage = url |
|
|
|
}) |
|
|
|
}, |
|
|
|
getPhone(e){ |
|
|
|
this.$api('bindPhone', { |
|
|
|
phoneCode : e.detail.code |
|
|
|
}, res => { |
|
|
|
if(res.code == 200){ |
|
|
|
let phoneObj = JSON.parse(res.result) |
|
|
|
if(phoneObj.errmsg == 'ok'){ |
|
|
|
this.userInfoForm.phone = phoneObj.phone_info.phoneNumber |
|
|
|
}else{ |
|
|
|
uni.showModal({ |
|
|
|
title: phoneObj.errmsg |
|
|
|
}) |
|
|
|
} |
|
|
|
console.log(phoneObj); |
|
|
|
} |
|
|
|
}) |
|
|
|
}, |
|
|
|
submit() { |
|
|
|
let self = this |
|
|
|
@ -65,18 +158,23 @@ |
|
|
|
}) |
|
|
|
.exec((res) => { |
|
|
|
const nickName = res?.[0]?.value |
|
|
|
self.userInfo.nickName = nickName |
|
|
|
self.userInfoForm.nickName = nickName |
|
|
|
|
|
|
|
if (self.$utils.verificationAll(self.userInfo, { |
|
|
|
if (self.$utils.verificationAll(self.userInfoForm, { |
|
|
|
headImage: '请选择头像', |
|
|
|
nickName: '请填写昵称', |
|
|
|
phone: '请填写手机号', |
|
|
|
})) { |
|
|
|
return |
|
|
|
} |
|
|
|
|
|
|
|
self.$api('updateInfo', self.userInfo, res => { |
|
|
|
self.$api('updateInfo', { |
|
|
|
avatarUrl : self.userInfoForm.headImage, |
|
|
|
nickName : self.userInfoForm.nickName, |
|
|
|
phone : self.userInfoForm.phone, |
|
|
|
}, res => { |
|
|
|
if (res.code == 200) { |
|
|
|
uni.switchTab({ |
|
|
|
uni.reLaunch({ |
|
|
|
url:'/pages/index/index' |
|
|
|
}) |
|
|
|
} |
|
|
|
@ -89,45 +187,129 @@ |
|
|
|
</script> |
|
|
|
|
|
|
|
<style lang="scss" scoped> |
|
|
|
.login { |
|
|
|
.page { |
|
|
|
background-color: $uni-fg-color; |
|
|
|
position: relative; |
|
|
|
width: 100vw; |
|
|
|
height: 100vh; |
|
|
|
padding-top: calc(#{$navbar-height} + var(--status-bar-height) + 20rpx); |
|
|
|
padding-left: 60rpx; |
|
|
|
padding-right: 60rpx; |
|
|
|
box-sizing: border-box; |
|
|
|
justify-content: flex-start; |
|
|
|
} |
|
|
|
|
|
|
|
.logo { |
|
|
|
width: 148rpx; |
|
|
|
height: 148rpx; |
|
|
|
margin-top: 96rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.title { |
|
|
|
color: #333333; |
|
|
|
font-size: 32rpx; |
|
|
|
font-weight: 900; |
|
|
|
margin-top: 20rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.desc { |
|
|
|
color: #474747; |
|
|
|
font-size: 28rpx; |
|
|
|
margin-top: 40rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.form { |
|
|
|
margin-top: 120rpx; |
|
|
|
margin-bottom: 193rpx; |
|
|
|
width: 100%; |
|
|
|
display: flex; |
|
|
|
flex-direction: column; |
|
|
|
justify-content: center; |
|
|
|
align-items: center; |
|
|
|
height: 80vh; |
|
|
|
|
|
|
|
.title { |
|
|
|
line-height: 45rpx; |
|
|
|
font-weight: 900; |
|
|
|
} |
|
|
|
box-sizing: border-box; |
|
|
|
|
|
|
|
.form-item { |
|
|
|
width: 100%; |
|
|
|
min-height: 136rpx; |
|
|
|
border-bottom: 1rpx solid #E8E8E8; |
|
|
|
|
|
|
|
.line { |
|
|
|
display: flex; |
|
|
|
justify-content: space-between; |
|
|
|
align-items: center; |
|
|
|
width: 80%; |
|
|
|
border-bottom: 1px solid #00000023; |
|
|
|
padding: 30rpx 0; |
|
|
|
margin: 0 auto; |
|
|
|
justify-content: center; |
|
|
|
|
|
|
|
&:first-child { |
|
|
|
border-top: 1rpx solid #E8E8E8; |
|
|
|
} |
|
|
|
|
|
|
|
.label { |
|
|
|
width: 110rpx; |
|
|
|
font-size: 36rpx; |
|
|
|
font-weight: 500; |
|
|
|
text-align: left; |
|
|
|
color: #474747; |
|
|
|
} |
|
|
|
|
|
|
|
.content { |
|
|
|
flex: 1; |
|
|
|
text-align: right; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.chooseAvatar { |
|
|
|
width: 100%; |
|
|
|
.btn-avatar { |
|
|
|
background: transparent; |
|
|
|
border: none; |
|
|
|
border-radius: none; |
|
|
|
box-shadow: none; |
|
|
|
padding: 0; |
|
|
|
margin: 0; |
|
|
|
margin-top: 10vh; |
|
|
|
font-size: 0; |
|
|
|
text-align: right; |
|
|
|
} |
|
|
|
|
|
|
|
.avatar { |
|
|
|
display: inline-block; |
|
|
|
width: 96rpx; |
|
|
|
height: 96rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.btn-phone { |
|
|
|
border: none; |
|
|
|
border-radius: 0; |
|
|
|
padding: 7rpx; |
|
|
|
margin: 0; |
|
|
|
text-align: right; |
|
|
|
color: #7C7C7C; |
|
|
|
font-size: 26rpx; |
|
|
|
line-height: 1; |
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
.auth-placeholder { |
|
|
|
color: #7C7C7C; |
|
|
|
font-size: 26rpx; |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.btn { |
|
|
|
width: 100%; |
|
|
|
height: auto; |
|
|
|
border-radius: 45rpx; |
|
|
|
color: #07C160; |
|
|
|
border-color: #07C160; |
|
|
|
padding: 25rpx 0; |
|
|
|
box-sizing: border-box; |
|
|
|
font-size: 28rpx; |
|
|
|
line-height: 1; |
|
|
|
margin: 0; |
|
|
|
|
|
|
|
&-confirm { |
|
|
|
background-color: #07C160; |
|
|
|
color: #FFFFFF; |
|
|
|
} |
|
|
|
|
|
|
|
.btn { |
|
|
|
// background: $uni-linear-gradient-btn-color; |
|
|
|
background: $uni-color; |
|
|
|
color: #fff; |
|
|
|
width: 80%; |
|
|
|
padding: 20rpx 0; |
|
|
|
text-align: center; |
|
|
|
border-radius: 15rpx; |
|
|
|
margin-top: 10vh; |
|
|
|
& + & { |
|
|
|
margin-top: 34rpx; |
|
|
|
} |
|
|
|
} |
|
|
|
</style> |
|
|
|
</style> |
