调整优化

This commit is contained in:
Strange 2024-07-17 21:48:01 +08:00
commit f56f7e97ed
8 changed files with 265 additions and 19 deletions

View File

@ -12,14 +12,17 @@ export const getQuestion= (type)=>{
}, },
}) })
} }
//注册 //验证题目是否正确
export const validationAnswer= (user)=>{ export const checkQuestion= ({
questionId,
answer
})=>{
return http({ return http({
url:"/question/validationAnswer", url:"/question/validationAnswer",
method:"get", method:"get",
data:user, params:{
headers:{ questionId,
isToken:false answer
} }
}) })
} }

18
src/api/upload/upload.js Normal file
View File

@ -0,0 +1,18 @@
import httpInstance from '@/utils/http'
export const uploadImage = (file) => {
// 创建一个 FormData 对象
const formData = new FormData();
// 将文件添加到 FormData
formData.append('file', file);
// 发送 POST 请求
return httpInstance({
url: `/QiNiu/upload`,
method: "post",
data: formData, // 将 FormData 对象作为请求体
headers: {
'Content-Type': 'multipart/form-data'
}
});
}

View File

@ -33,6 +33,6 @@ export const updateUserInfo= (user)=>{
return http.request({ return http.request({
url:"/user/update", url:"/user/update",
method:"post", method:"post",
params:user data:user
}) })
} }

View File

@ -0,0 +1,124 @@
<template>
<div class="img-upload">
<input v-show="0 != 0" ref="input" type="file" name="image" accept="image/*" @change="upload" :v-model="file">
<!-- <el-button type="" @click="uploadClick">上传</el-button> -->
<!-- <div v-if="imageUrl == ''" class="img-upload-box" @click="uploadClick">
<p>+</p>
</div> -->
<!-- <img class="img-img" v-if="imageUrl!=''" :src="imageUrl" alt="" style="height: 100%;"> -->
<el-image class="img-img" v-if="imageUrl != ''" style="height:100%" :src="imageUrl" :zoom-rate="1.2" :max-scale="7" :min-scale="0.2"
:preview-src-list="[imageUrl]" fit="cover" />
<el-button v-if="imageUrl != ''" type="primary" class="img-button" @click="uploadClick">修改头像</el-button>
</div>
</template>
<style lang="scss" scoped>
.img-upload {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
position: relative;
border: 1px solid #ebeef5;
}
.img-img:hover + .img-button {
display: block;
}
.img-button{
position: absolute;
bottom: 0;
left: 0;
right: 0;
margin: 0 auto;
width: 100px;
height: 30px;
margin-bottom: 10px;
display: none;
}
.img-upload-box {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
background-color: #ffffff;
}
</style>
<script setup>
import { uploadImage } from '@/api/upload/upload';
import { ref, watch } from 'vue';
//
const emit = defineEmits(['upload']);
const props=defineProps({
img:{
type:String,
default:''
}
})
watch(props.img,(newV)=>{
if(newV!=null){
console.log("传入了图片")
imageUrl.value=newV;
}
},{
deep: true})
// const
// eslint-disable-next-line no-unused-vars
//
const file = ref(null);
//dom
const input = ref(null);
//url
const imageUrl = ref('');
//
const uploadClick = () => {
input.value.click();
}
//
const toUploadImage = async () => {
let res = await uploadImage(file.value);
if (res.code == 1) {
//
return res.data;
}
return null;
}
const upload = async (e) => {
let imgMaxSize = 1024 * 1024 * 4;
if (e.target.files[0].size > imgMaxSize) {
alert("图片大小不能超过4M");
return;
}
if (['jpeg', 'png', 'gif', 'jpg'].indexOf(e.target.files[0].type.split("/")[1]) < 0) {
//
alert("上传的文件必须是图片格式");
return;
}
file.value = e.target.files[0];
// alert("");
let url = await toUploadImage();
if (url != null) {
imageUrl.value = url;
emit('upload', url);
} else {
alert("上传失败");
}
}
const updateUrl=(img)=>{
file.value=null;
if(img==null){
imageUrl.value='';
return ;
}
imageUrl.value=img;
}
//
defineExpose(
{
updateUrl
}
)
</script>

View File

@ -1,5 +1,6 @@
<template> <template>
<div class="word-list"> <div class="word-list">
<!-- {{ props.type }}{{ props }} -->
<div <div
v-for="word in words" v-for="word in words"
:key="word.id" :key="word.id"
@ -8,6 +9,7 @@
> >
{{ word.name }} {{ word.name }}
</div> </div>
</div> </div>
</template> </template>
@ -29,6 +31,9 @@
emit('select',word); emit('select',word);
// //
}; };
onMounted(()=>{
getWords();
})
</script> </script>
<style scoped> <style scoped>
.word-list { .word-list {

9
src/store/TopicBox.js Normal file
View File

@ -0,0 +1,9 @@
// import { ref, computed } from 'vue'
// import { defineStore } from 'pinia'
// export const useCounterStore = defineStore('useTopicBox', () => {
// const index = ref(1);
// const Topics=ref([]);
// const count = computed(()=>Topics.value.length);
// return { count, doubleCount, increment }
// })

24
src/utils/debounceRef.js Normal file
View File

@ -0,0 +1,24 @@
import { customRef } from "vue";
/**
* 防抖Ref
* @param {} value
* @param {*} delay
* @returns
*/
export const debounceRef = (value, delay = 1000) => {
let timeout;
return customRef((track,trigger)=>({
get () {
track();
return value;
},
set (val) {
clearTimeout(timeout);
timeout = setTimeout(() => {
value = val;
trigger();
}, delay);
}
}))
};

View File

@ -1,27 +1,70 @@
<template> <template>
<div class="userBox"> <div class="userBox">
<div class="userInfo"> <div class="userInfo">
<div class="userT"> <div class="userT" @click="drawer = true">
<el-avatar :size="150" :src="circleUrl" /> <el-avatar :size="150" :src="circleUrl" />
</div> </div>
<div class="userName">用户名</div> <div class="userName">用户名</div>
<div class="userName" @click="router.push('/');">返回首页</div> <div class="userName" @click="router.push('/')">返回首页</div>
</div> </div>
<div class="collectionTopic"> <div class="collectionTopic">
<div class="title">收藏</div> <div class="title">收藏</div>
<div class="collectionList"> <div class="collectionList">
<div class="collectionTme"></div>
<div class="collectionTme"></div>
<div class="collectionTme"></div>
<div class="collectionTme"></div>
<div class="collectionTme"></div>
<div class="collectionTme"></div>
<div class="collectionTme"></div>
<div class="collectionTme"></div> <div class="collectionTme"></div>
<!-- <div class="collectionTme"></div> --> <!-- <div class="collectionTme"></div> -->
</div> </div>
</div> </div>
</div> </div>
<el-drawer
v-model="drawer"
title="个人信息"
direction="ltr"
:before-close="handleClose"
>
<div class="info">
<div class="infoItme">
<image-upload
ref="imgUpload"
img="123"
style="width: 200px; height: 200px; display: inline-block"
@upload="upload"
></image-upload>
</div>
<div class="infoItme">
<div class="text">账号</div>
<el-input
v-model="input"
style="width: 240px"
placeholder="Please input"
:disabled="true"
/>
</div>
<div class="infoItme">
<div class="text">签名</div>
<el-input
v-model="input"
style="width: 240px"
placeholder="Please input"
:rows="2"
type="textarea"
:disabled="true"
/>
</div>
<div class="infoItme">
<div class="text">手机号</div>
<el-input
v-model="input"
style="width: 240px"
placeholder="Please input"
:disabled="true"
/>
</div>
</div>
<template #footer>
<el-button type="success">更改信息</el-button>
<el-button type="danger">更改密码</el-button>
</template>
</el-drawer>
</template> </template>
<style lang="scss" scoped> <style lang="scss" scoped>
@ -89,7 +132,7 @@
/* 宽度是固定好的 */ /* 宽度是固定好的 */
width: 30%; width: 30%;
height: 47%; height: 47%;
background-color: #D2FCE3; background-color: #d2fce3;
margin-bottom: 10px; margin-bottom: 10px;
// border: 1px solid red; // border: 1px solid red;
/*这个数值需要自己去调*/ /*这个数值需要自己去调*/
@ -102,7 +145,27 @@
} }
} }
} }
.infoItme {
display: flex;
justify-content: center;
width: 80%;
margin: 20px auto;
.text {
width: 30%;
text-align: right;
margin-right: 30px;
}
}
.info {
width: 100%;
display: flex;
justify-content: center;
flex-direction: column;
}
</style> </style>
<script setup> <script setup>
import router from '@/router' import router from "@/router";
import ImageUpload from "@/components/ImageUpload.vue";
import { ref } from "vue";
const drawer = ref(false);
</script> </script>