<template> <div class="set-up"> <title-block title="设置"> <template #left> <div> <image style="width: 112rpx;height: 52rpx" src="https://cdns.fontree.cn/fonchain-main/prod/image/default/artwork/785cf885-c4c9-44b3-8155-4b39988c7ef8.png" @click="back"> </image> </div> </template> </title-block> <div class="content2"> <div class="wrap1"> <image :src="user.avatar ? user.avatar:'https://cdns.fontree.cn/fonchain-main/prod/image/407e7c22-eb62-411e-957b-b6c296fde530/artwork/814ac246-e1eb-49fe-beee-dd53aaf5d309.png'" mode="scaleToFill"></image> </div> <div class="wrap2"> <div class="wrap2_1" @click="backDafult">恢复默认头像</div> <u-upload :fileList="fileList" name="1" multiple :maxCount="1" @afterRead="changeAvatar"> <view style="width:348rpx;height:56rpx;margin-top:20rpx"> <u-button text="更换头像" shape="circle" class="size" color="#76C458"></u-button> </view> </u-upload> </div> </div> <div class="content3"> <div class="wrap1"> <div class="wrap1_1"> <div class="wrap1_1_1">姓名</div> <div class="wrap1_1_2">{{ user.nickName }}</div> <div class="wrap1_1_3"> <view></view> </div> <div class="wrap1_1_4"></div> </div> <div class="wrap1_1"> <div class="wrap1_1_1">身份证号码</div> <div class="wrap1_1_2">{{ user.iDNum }}</div> <div class="wrap1_1_3"> <view></view> </div> <div class="wrap1_1_4"></div> </div> <div class="wrap1_1"> <div class="wrap1_1_1">手机号</div> <div class="wrap1_1_2">{{ user.telNum }}</div> <div class="wrap1_1_3"> <view></view> </div> </div> </div> <div class="wrap2"></div> </div> <div class="content4"> <div class="wrap1" @click="logout">注销账号</div> <div class="wrap2" @click="quit">退出登录</div> </div> </div> </template> <script> import http from "@/http/api"; export default { name: "set-up", data() { return { user: {} } }, onLoad() { this.info() }, methods: { async info() { const res = await this.$api.mine.info() if (res.status === 0) { this.user = res.data.user } else { this.$common.msgToast(res.msg); } }, changeAvatar(file) { console.log(file) this.uploadFilePromise(file.file[0].url); }, uploadFilePromise(url) { return new Promise((resolve) => { uni.uploadFile({ url: http.baseUrl + "/api/wxuser/uploadpic", filePath: url, name: "file", success: (res) => { res.data = JSON.parse(res.data); resolve(res.data.data.path); this.updateInfo({ avatar: res.data.data.path, }); }, }); }); }, async updateInfo(data){ let res = await this.$api.mine.update(data); if (res.status === 0) { this.$common.msgToast('修改成功'); this.info(); } else { this.$common.msgToast(res.msg); } }, backDafult() { this.updateInfo({ avatar: "https://cdns.fontree.cn/fonchain-main/prod/image/407e7c22-eb62-411e-957b-b6c296fde530/artwork/814ac246-e1eb-49fe-beee-dd53aaf5d309.png", }); }, quit(){ uni.clearStorageSync(); uni.navigateTo({ url: '/pages/login/login' }) }, async logout(){ let res = await this.$api.mine.logout(); if (res.status === 0) { this.$common.msgToast('注销成功'); this.quit(); } else { this.$common.msgToast(res.msg); } }, back(){ uni.navigateBack({ delta: 2 }); } }, } </script> <style scoped lang="scss"> .set-up { background-image: url("https://cdns.fontree.cn/fonchain-main/prod/image/default/artwork/4fdc9a0f-d72a-46b6-a04d-ed56d5465213.png"); position: relative; box-sizing: border-box; overflow: hidden; padding-left: 30rpx; padding-right: 30rpx; background-size: cover; width: 100vw; height: 100vh; .content4 { left: 50%; transform: translateX(-50%); bottom: 104rpx; position: absolute; display: flex; .wrap2 { margin-left: 38rpx; color: #fff; display: flex; justify-content: center; align-items: center; font-size: 32rpx; border-radius: 40rpx; width: 292rpx; height: 56rpx; background: #3E3E3E; } .wrap1 { color: #fff; display: flex; justify-content: center; align-items: center; font-size: 32rpx; border-radius: 40rpx; width: 292rpx; height: 56rpx; background: #ED6666; } } .content2 { margin-top: 60rpx; display: flex; align-items: center; justify-content: center; .wrap1 { image { height: 154rpx; width: 154rpx; } } .wrap2 { margin-left: 42rpx; .wrap2_2 { margin-top: 20rpx; display: flex; justify-content: center; align-items: center; width: 348rpx; height: 56rpx; color: #fff; font-size: 32rpx; background: #76C458; border-radius: 40rpx; } .wrap2_1 { display: flex; justify-content: center; align-items: center; width: 348rpx; height: 56rpx; color: #fff; font-size: 32rpx; background: #000; border-radius: 40rpx; } } } .content3 { margin-top: 60rpx; .wrap1 { border: 1rpx dashed #DFE9F0; background-color: #fff; .wrap1_1 { position: relative; height: 114rpx; display: flex; align-items: center; .wrap1_1_4 { left: 50%; transform: translateX(-50%); bottom: 0; position: absolute; height: 0; width: 636rpx; border-bottom: 0.5px solid #626262; } .wrap1_1_2 { margin-right: 36rpx; width: 0; height: 66rpx; border-left: 0.5px solid #626262; line-height: 66rpx; width: 100%; padding-left: 20rpx; } .wrap1_1_1 { width: 210rpx; padding-left: 32rpx; color: #626262; font-size: 24rpx; } } } } } </style>