You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 

114 lines
2.9 KiB

<template>
<view>
<view class="auth">
<view class="wanl-title">继续完善资料</view>
<form @submit="formSubmit">
<!-- #ifdef MP-WEIXIN -->
<button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
<image class="avatar" :src="$wanlshop.oss(userInfo.avatarUrl, 50, 50)" mode="aspectFill"/>
</button>
<!-- #endif -->
<!-- #ifndef MP-WEIXIN -->
<button class="avatar-wrapper" @tap="onUploadAvatar">
<image class="avatar" :src="$wanlshop.oss(userInfo.avatarUrl, 50, 50)" mode="aspectFill"/>
</button>
<!-- #endif -->
<view class="auth-group radius-bock bg-gray wlian-grey-light">
<input placeholder="请输入用户名" maxlength="12" confirm-type="next" placeholder-class="placeholder" name="nickname" type="nickname"
v-model="userInfo.nickName"></input>
</view>
<view class="auth-button flex flex-direction">
<button class="cu-btn bg-orange sl radius-bock" formType="submit">继续注册</button>
</view>
</form>
</view>
</view>
</template>
<script>
export default {
data() {
return {
userInfo: {
avatarUrl: '/assets/addons/wanlshop/img/common/mine_def_touxiang_3x.png',
nickName: null,
gender: 0
},
pageroute: '',
token: null
};
},
onLoad(option) {
this.pageroute = option.url;
this.token = option.token;
},
methods: {
onChooseAvatar(e) {
this.uploadFile(e.detail.avatarUrl);
},
onUploadAvatar() {
uni.chooseImage({
sourceType: ["camera", "album"],
sizeType: "compressed",
count: 1,
success: res => {
this.uploadFile(res.tempFilePaths[0]);
}
});
},
async uploadFile(file) {
await uni.uploadFile({
url: '/wanlshop/common/upload',
filePath: file,
name: 'file',
success: data => {
this.userInfo.avatarUrl = JSON.parse(data.data).data.url;
}
});
},
async formSubmit(e) {
if(e.detail.value.nickname){
await uni.request({
url: '/wanlshop/user/perfect',
method: 'POST',
data: {
token: this.token,
avatarUrl: this.userInfo.avatarUrl,
nickName: e.detail.value.nickname,
gender: this.userInfo.gender
},
success: res => {
this.$store.dispatch('user/login', res.data);
this.$store.dispatch('cart/login');
this.$store.dispatch('chat/get');
uni.reLaunch({
url: decodeURIComponent(this.pageroute)
});
}
});
}else{
this.$wanlshop.msg('请填写用户名');
}
}
}
};
</script>
<style>
@import url("auth.css");
.avatar-wrapper {
display: flex;
justify-content: center;
margin-bottom: 80rpx;
background-color: transparent;
}
.avatar-wrapper::after{
border: 0;
}
.avatar {
border-radius: 9999px;
overflow: hidden;
height: 240rpx;
width: 240rpx;
border: 1rpx solid #fe6600;
}
</style>