gree_leran/components/UpdateUserBox/UpdateUserBox.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>