141 lines
2.9 KiB
Vue
141 lines
2.9 KiB
Vue
|
<template>
|
||
|
|
<view class="update-hbd">
|
||
|
|
<view class="publish-container-box">
|
||
|
|
<view class="update-itme">
|
||
|
|
<view class="">
|
||
|
|
<up-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" multiple
|
||
|
|
:maxCount="1" :previewFullImage="true" width="400rpx" height="300rpx">
|
||
|
|
<view class="toux">
|
||
|
|
修改头像
|
||
|
|
</view>
|
||
|
|
</up-upload>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="update-itme" @click="open">
|
||
|
|
修改昵称
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<InputBox v-if="inputVisible" @submit="submitNote" @blurCom="blurCom" text="修改"></InputBox>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup>
|
||
|
|
import {
|
||
|
|
ref,
|
||
|
|
reactive
|
||
|
|
} from 'vue';
|
||
|
|
import {
|
||
|
|
updateUserImage,
|
||
|
|
updateUserName
|
||
|
|
} from '@/apis/user.js'
|
||
|
|
import {
|
||
|
|
uploadFile
|
||
|
|
} from '@/utils/http.js'
|
||
|
|
const emit = defineEmits(['updata'])
|
||
|
|
const fileList1 = ref([]); //1
|
||
|
|
const inputVisible = ref(false);
|
||
|
|
const open = () => {
|
||
|
|
inputVisible.value = true;
|
||
|
|
}
|
||
|
|
const blurCom = () => {
|
||
|
|
inputVisible.value = false;
|
||
|
|
}
|
||
|
|
const submitNote = async(name) => {
|
||
|
|
blurCom();
|
||
|
|
uni.showLoading({
|
||
|
|
title: '正在修改...'
|
||
|
|
});
|
||
|
|
let res = await updateUserName(name);
|
||
|
|
try {
|
||
|
|
if (res.code == 200) {
|
||
|
|
uni.showToast({
|
||
|
|
icon: "none",
|
||
|
|
title: "修改成功"
|
||
|
|
})
|
||
|
|
emit('updata');
|
||
|
|
} else {
|
||
|
|
uni.showToast({
|
||
|
|
icon: "none",
|
||
|
|
title: "修改失败，请检查网络"
|
||
|
|
})
|
||
|
|
emit('updata');
|
||
|
|
}
|
||
|
|
} catch (error) {
|
||
|
|
uni.showToast({
|
||
|
|
icon: "none",
|
||
|
|
title: "修改失败，请检查网络"
|
||
|
|
})
|
||
|
|
emit('updata');
|
||
|
|
} finally {
|
||
|
|
// httpStatic.value = false;
|
||
|
|
uni.hideLoading();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
const afterRead = async (event) => {
|
||
|
|
let lists = [].concat(event.file);
|
||
|
|
for (let item of lists) {
|
||
|
|
try {
|
||
|
|
uni.showLoading({
|
||
|
|
title: '正在修改...'
|
||
|
|
});
|
||
|
|
let res = await uploadFile(item.url); // 调用上传文件的方法
|
||
|
|
res = JSON.parse(res);
|
||
|
|
let jg = await updateUserImage(res.url);
|
||
|
|
if (jg.code == 200) {
|
||
|
|
uni.showToast({
|
||
|
|
icon: "none",
|
||
|
|
title: "修改成功"
|
||
|
|
})
|
||
|
|
emit('updata');
|
||
|
|
} else {
|
||
|
|
uni.showToast({
|
||
|
|
icon: "none",
|
||
|
|
title: "修改失败，请检查网络"
|
||
|
|
})
|
||
|
|
emit('updata');
|
||
|
|
fileList1.value = [];
|
||
|
|
}
|
||
|
|
} catch (error) {
|
||
|
|
uni.showToast({
|
||
|
|
icon: "none",
|
||
|
|
title: "修改失败，请检查网络"
|
||
|
|
})
|
||
|
|
emit('updata');
|
||
|
|
fileList1.value = [];
|
||
|
|
} finally {
|
||
|
|
// httpStatic.value = false;
|
||
|
|
uni.hideLoading();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
const deletePic = (event) => {
|
||
|
|
fileList1.value.splice(event.index, 1);
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
.update-hbd {
|
||
|
|
display: flex;
|
||
|
|
flex-flow: column;
|
||
|
|
}
|
||
|
|
|
||
|
|
.update-itme {
|
||
|
|
margin: 20rpx auto;
|
||
|
|
height: 60rpx;
|
||
|
|
width: 30vw;
|
||
|
|
font-size: 40rpx;
|
||
|
|
text-align: center;
|
||
|
|
border-radius: 20rpx;
|
||
|
|
background-color: #000;
|
||
|
|
color: #fff;
|
||
|
|
display: flex;
|
||
|
|
justify-content: center;
|
||
|
|
align-items: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.toux {
|
||
|
|
width: 100%;
|
||
|
|
margin: 0 auto;
|
||
|
|
// background-color: #aaaaff;
|
||
|
|
}
|
||
|
|
</style>
|