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.
180 lines
3.7 KiB
180 lines
3.7 KiB
<template>
|
|
<view class="user-config-info-page">
|
|
<!-- 页面内容 -->
|
|
<view class="page-content">
|
|
<!-- 用户信息表单 -->
|
|
<form @submit="formSubmit">
|
|
<!-- 头像 -->
|
|
<view class="line">
|
|
<view class="width-100 text-30 text-1a">头像</view>
|
|
<view class="flex-one">
|
|
<button hover-class="none" open-type="chooseAvatar" @chooseavatar="chooseAvatar">
|
|
<view class="flex align-center justify-end">
|
|
<image class="head_img jc-avatar-80" :src="userHeader ? userHeader : greyHeadImg"
|
|
style="margin: 0;"></image>
|
|
<text class="margin-left-10 tyIcon-fanhui text-26 text-98"></text>
|
|
</view>
|
|
</button>
|
|
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 昵称 -->
|
|
<view class="line">
|
|
<view class="width-100 text-30 text-1a">昵称</view>
|
|
<view class="flex-one flex align-center justify-end">
|
|
<input type="nickname" name="nick_name"
|
|
class="width-100p line-height-120 text-right text-28 text-1a" maxlength="20"
|
|
v-model="userName" placeholder="请输入昵称" placeholder-class="text-28 text-b3"></input>
|
|
</view>
|
|
</view>
|
|
<view class="bottomBox">
|
|
<view class=" line-height-90 radius-45 bg-2f9 text-center text-32 text-bold text-ff"
|
|
@click="submit">保存</view>
|
|
|
|
</view>
|
|
|
|
</form>
|
|
</view>
|
|
|
|
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import file from "@/components/hzjc/utils/functions/file.js"
|
|
export default {
|
|
data() {
|
|
return {
|
|
// 灰色头像
|
|
greyHeadImg: '/static/user/headimg_no.png',
|
|
userHeader: '',
|
|
userName: ''
|
|
}
|
|
},
|
|
|
|
onReady() {
|
|
|
|
this.rq.getData("fire/api/Fire/userCenter").then(res => {
|
|
if (res.code == 0) {
|
|
this.userHeader = res.data.user_info.head_img;
|
|
this.userName = res.data.user_info.nick_name;
|
|
}
|
|
})
|
|
},
|
|
|
|
methods: {
|
|
|
|
chooseAvatar(e) {
|
|
// 上传
|
|
uni.showLoading({
|
|
mask: true,
|
|
title: '正在上传'
|
|
})
|
|
|
|
let tempFile = e.detail.avatarUrl
|
|
let files = []
|
|
|
|
|
|
// 原文件名称
|
|
let localFileName,
|
|
// 上传后文件名称
|
|
fileName
|
|
|
|
// 获取源文件名称
|
|
let pos = tempFile.lastIndexOf('/')
|
|
if (pos != -1) {
|
|
localFileName = tempFile.substring(pos + 1)
|
|
}
|
|
|
|
// 上传后文件名称为随机文件名
|
|
let suffix = this.cn.getSuffix(localFileName)
|
|
fileName = this.cn.getRandomStr(10) + suffix
|
|
|
|
files.push({
|
|
// 图片的本地文件路径列表
|
|
path: tempFile,
|
|
// 上传后的文件名
|
|
fileName: fileName
|
|
})
|
|
|
|
// 上传至OSS服务器
|
|
file.uploadFilesToOss(files, [], {}, false, 'image').then(res => {
|
|
uni.hideLoading()
|
|
console.log(1008, res)
|
|
this.userHeader = res[0]
|
|
}).catch(err => {
|
|
uni.hideLoading()
|
|
})
|
|
},
|
|
|
|
|
|
|
|
|
|
|
|
//提交
|
|
submit(e) {
|
|
if (!this.userHeader) {
|
|
this.cn.toast("请选择头像")
|
|
return false
|
|
}
|
|
if (!this.userName) {
|
|
this.cn.toast("请填写昵称")
|
|
return false
|
|
}
|
|
this.rq.getData('base/user/api/User/updateUserInfo', {
|
|
head_img: this.userHeader,
|
|
nick_name: this.userName,
|
|
}).then(res => {
|
|
if (res.code == 0) {
|
|
this.cn.alert(res.msg).then(res => {
|
|
uni.navigateBack({
|
|
delta: 1
|
|
})
|
|
})
|
|
}
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
page {
|
|
background: #fff;
|
|
}
|
|
|
|
.line {
|
|
margin-left: 30rpx;
|
|
padding-right: 30rpx;
|
|
height: 120rpx;
|
|
line-height: 120rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
border-bottom: 1rpx solid #ededed;
|
|
}
|
|
|
|
.info {
|
|
width: 200rpx;
|
|
height: 120rpx;
|
|
line-height: 120rpx;
|
|
text-align: right;
|
|
}
|
|
|
|
.sign {
|
|
width: 100%;
|
|
height: 200rpx;
|
|
line-height: 40rpx;
|
|
}
|
|
|
|
.bottomBox {
|
|
width: 100vw;
|
|
background: #fff;
|
|
position: fixed;
|
|
left: 0;
|
|
bottom: 0;
|
|
padding: 10rpx 30rpx calc(10rpx + env(safe-area-inset-bottom));
|
|
box-sizing: border-box;
|
|
}
|
|
</style>
|