ebike-ui/ebike-user/pages/user/login/userphtoinfo.vue

101 lines
2.3 KiB
Vue

<template>
<view class="flex justify-center margin">
<button class="balanced" type="balanced" open-type="chooseAvatar" @chooseavatar="onChooseavatar">
<image class="avatar" :src="avatarUrl"></image>
</button>
</view>
<view class="cu-form-group boxtwo">
<view class="title">昵称</view>
<input class="weui-input" type='nickname' name='nickname' v-model="nickname" placeholder="请输入昵称">
</view>
<view class="padding flex flex-direction">
<button @click="gotoLogin" class="cu-btn bg-green lg">完成</button>
</view>
</template>
<script setup>
import {
ref,
onMounted
} from 'vue';
import * as api from '@/utils/api.js';
import config from '@/utils/config';
import {
showModelMessage,
jkcBaseEncode,
jkcBaseDecode
} from '@/utils/tools.js';
const imgPath = config.imgPath;
const nickname = ref("");
const avatarUrl = ref(`${imgPath}static/userui/wxtouxiang.png`);
// 选择头像
const onChooseavatar = (e) => {
console.log("微信头像信息:", e);
const paramsfile = {
"path": e.detail.avatarUrl
}
api.fileUploadUserPicture(paramsfile).then(res => {
if (res.code == 200) {
avatarUrl.value = res.data.url;
}
});
};
const gotoLogin = () => {
let wechat_user = JSON.parse(jkcBaseDecode(uni.getStorageSync("wechat_user")));
if (!nickname.value) {
showModelMessage("请填写昵称!");
return;
}
const params = {
"userId": wechat_user.userId,
"avatar": avatarUrl.value,
"nickname": nickname.value,
}
api.callOrdereApi("ebikeUser/update", params);
api.callOrdereApi("ebikeUser/getInfo?id=" + wechat_user.userId, {},
"get")
.then((info) => {
if (info.code == 200) {
uni.setStorageSync('wechat_user', jkcBaseEncode(JSON
.stringify(info.data)));
setTimeout(() => {
uni.navigateTo({
url: "/pages/user/home/home"
})
}, 500);
}
})
}
</script>
<style scoped>
.avatar-wrapper {
padding: 0;
width: 56px !important;
border-radius: 8px;
margin-top: 40px;
margin-bottom: 40px;
}
.avatar {
display: block;
width: 56px;
height: 56px;
}
.balanced {
background-color: rgba(0, 0, 0, 0);
padding: 0px;
}
.container {
display: flex;
}
.boxtwo {
margin-top: 10px;
border-top: solid 1px #e6e6e6;
border-bottom: solid 1px #e6e6e6;
}
</style>