|
|
@@ -4,23 +4,12 @@
|
|
|
<view class="zheshow" >
|
|
|
<view class="cen_ter">
|
|
|
<view class="box_At">
|
|
|
- <view class="box_At_text">获取您的昵称、头像、手机号</view>
|
|
|
- <view class="box_At_co">获取用户头像、昵称、手机号信息,主要用于完善个人资料,向用户提供更好使用体验</view>
|
|
|
- <view class="box_B" style="border-top:1px solid #f3f3f3 ;">
|
|
|
- <view class="acvter">头像</view>
|
|
|
- <button v-if="!active" class="acvter_all" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
|
|
|
- <view class="mast">请选择头像</view>
|
|
|
- </button>
|
|
|
- <view v-if="active" class="img"><image :src="active" ></image></view>
|
|
|
- </view>
|
|
|
- <view class="box_B">
|
|
|
- <view class="acvter">昵称</view>
|
|
|
- <input class="acvter_all" type="nickname" :value="nickname" @blur="bindblur" placeholder="请输入昵称" />
|
|
|
- </view>
|
|
|
+ <view class="box_At_text">获取您的手机号</view>
|
|
|
+ <view class="box_At_co">获取手机号信息,主要用于完善个人资料,向用户提供更好使用体验</view>
|
|
|
<view class="Brn_S">
|
|
|
- <view class="btn_btns" @click="colse">取消</view>
|
|
|
+ <button class="btn_btns" @click="colse">取消</button>
|
|
|
<button class="btn" open-type="getPhoneNumber" @getphonenumber="btns" >
|
|
|
- <view class="btn">保存</view>
|
|
|
+ 登录
|
|
|
</button>
|
|
|
</view>
|
|
|
</view>
|
|
|
@@ -36,9 +25,7 @@
|
|
|
data() {
|
|
|
return {
|
|
|
on_zheshows:false,
|
|
|
- zheshow1:false,
|
|
|
- active:'',
|
|
|
- nickname:''
|
|
|
+ zheshow1:false
|
|
|
}
|
|
|
},
|
|
|
watch:{
|
|
|
@@ -46,23 +33,8 @@
|
|
|
this.$refs.popup.open('bottom')
|
|
|
},
|
|
|
},
|
|
|
- methods: {
|
|
|
- colse(){
|
|
|
- this.$refs.popup.close()
|
|
|
- },
|
|
|
- onChooseAvatar(e) {
|
|
|
- let that = this
|
|
|
- uni.getFileSystemManager().readFile({
|
|
|
- filePath: e.detail.avatarUrl, //选择图片返回的相对路径
|
|
|
- encoding: "base64",
|
|
|
- success: (res) => {
|
|
|
- let base64s = "data:image/jpeg;base64," + res.data
|
|
|
- that.active = base64s
|
|
|
- },
|
|
|
- fail: (res) => reject(res.errMsg),
|
|
|
- });
|
|
|
- },
|
|
|
- bindblur(e){this.nickname = e.detail.value},
|
|
|
+ methods: {
|
|
|
+ colse(){this.$refs.popup.close()},
|
|
|
btns(e){
|
|
|
console.log(e,'e.detail.code换取手机号')
|
|
|
console.log('微信返回详情:', e.detail)
|
|
|
@@ -93,15 +65,6 @@
|
|
|
return
|
|
|
}
|
|
|
|
|
|
- if(this.active==''){
|
|
|
- uni.showToast({title:'请选择上传头像',icon:'none'})
|
|
|
- return
|
|
|
- }
|
|
|
- if(this.nickname==''){
|
|
|
- uni.showToast({title:'请填写昵称',icon:'none'})
|
|
|
- return
|
|
|
- }
|
|
|
-
|
|
|
// 成功获取到code,继续登录
|
|
|
this.proceedLogin(e.detail.code)
|
|
|
},
|
|
|
@@ -110,8 +73,6 @@
|
|
|
proceedLogin(code) {
|
|
|
// 将微信返回的手机号 code 一并传递给父组件
|
|
|
this.$parent.loset({
|
|
|
- nickname: this.nickname,
|
|
|
- active: this.active,
|
|
|
code: code || 'mock_dev_code' // 如果没有code,使用mock
|
|
|
})
|
|
|
}
|
|
|
@@ -124,25 +85,23 @@
|
|
|
width: 100%;height: 100%;background-color: rgba(0,0,0,0.3);position: fixed;top: 0;left: 0;
|
|
|
display: flex;align-items: center;align-items: flex-end;
|
|
|
.mast{margin-top: 6rpx;}
|
|
|
- .Brn_S{width: 70%;height: 100rpx;display: flex;align-items: center;justify-content: space-between;margin: 10rpx auto;}
|
|
|
- .btn_btns{width: 300rpx;height: 80rpx;background: antiquewhite; display: flex;align-items: center;
|
|
|
- justify-content: center; border-radius: 10rpx; margin-right: 70rpx;background-color: #fafafa;color: #39B54A;}
|
|
|
+ .Brn_S{width: 100%;height: 100rpx;display: flex;align-items: center;justify-content: space-around;margin: 20rpx 0;}
|
|
|
+ .btn_btns, .btn{width: 45%;max-width: 300rpx;height: 80rpx;display: flex;align-items: center;
|
|
|
+ justify-content: center; border-radius: 10rpx;font-size: 30rpx;margin: 0 !important;box-sizing: border-box;}
|
|
|
+ .btn_btns{background-color: #fafafa;color: #39B54A;}
|
|
|
+ .btn{background-color: #39B54A;color: #FFFFFF;}
|
|
|
.imgs{position: absolute;right: 6%;width: 32rpx;height: 32rpx;}
|
|
|
.img{width: 90rpx;height: 90rpx;border-radius: 50%;margin-left: 80rpx;image{width: 100%;height: 100%;border-radius: 50%;}}
|
|
|
.cen_ter{
|
|
|
- width: 100%;height: 600rpx;border-top-left-radius: 30rpx;border-top-right-radius: 30rpx;background-color: #FFFFFF;
|
|
|
+ width: 100%;min-height: 300rpx;border-top-left-radius: 30rpx;border-top-right-radius: 30rpx;background-color: #FFFFFF;
|
|
|
display: flex;align-items: center;justify-content: center;
|
|
|
- .box_At{width: 90%;height: 92%;margin-top: 20rpx;display: flex;flex-direction: column;.box_At_text{font-weight: bold;font-size: 30rpx}
|
|
|
+ .box_At{width: 90%;padding: 40rpx 0;display: flex;flex-direction: column;.box_At_text{font-weight: bold;font-size: 30rpx}
|
|
|
.box_At_co{font-size: 28rpx;color: #ababab;margin-top: 24rpx;}
|
|
|
- .box_B{width: 100%;height: 120rpx;border-bottom: 1px solid #f3f3f3;display: flex;align-items: center;
|
|
|
- margin-top: 12rpx;.acvter_all{font-size: 28rpx;color: #ababab;margin-left: 80rpx;}}
|
|
|
- .btn{width:300rpx;margin: 35rpx auto;height: 80rpx;display: flex;align-items: center;justify-content: center;
|
|
|
- background-color: #39B54A;color: #FFFFFF;border-radius: 10rpx;font-size: 30rpx;}
|
|
|
- }}
|
|
|
+ }}
|
|
|
}
|
|
|
button {
|
|
|
- border-radius: 30rpx;height: 80rpx !important;padding-left: 0!important ;
|
|
|
- padding-right: 0!important ; background-color: rgba(0,0,0,0) !important;color: #ababab !important;font-family: PingFang SC !important;
|
|
|
+ border-radius: 10rpx;height: 80rpx !important;padding-left: 0!important ;
|
|
|
+ padding-right: 0!important ;font-family: PingFang SC !important;
|
|
|
}
|
|
|
button:after {
|
|
|
top: 0;left: 0; border: 1px solid rgba(0,0,0,0) !important; -webkit-transform: scale(.5);
|