pwfnlmjh2
/
frontend
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Compare commits

base: pwfnlmjh2:1db22929d46b872b2ec1afa14bb79fa32c26b20e
Branches Tags
pwfnlmjh2:main
...
compare: pwfnlmjh2:ff800e4a0b78b70dbd3a4d7d13bd6620bddc609f
Branches Tags
pwfnlmjh2:main

2 Commits
1db22929d4 ... ff800e4a0b

Author SHA1 Message Date
helloworld180 ff800e4a0b Merge branch 'main' of https://bdgit.educoder.net/pwfnlmjh2/dazuoye
1 month ago
helloworld180 9bf2339fcb 修改接口
1 month ago
5 changed files with 181 additions and 179 deletions
Show Stats

BIN
src/assets/pictures/space/more.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 11 KiB

After

Width:  |  Height:  |  Size: 11 KiB

67
src/recommend/PreferenceForm.vue
Unescape View File

@ -10,7 +10,7 @@
</div> </div>
<!-- 内容 --> <!-- 内容 -->
<h1>填写你的恋爱偏好</h1> <h1 style="color: rgba(87, 87, 87, 1);">填写你的恋爱偏好</h1>
<div class="card-container"> <div class="card-container">
<el-card class="card" v-for="card in cards" :key="card.title"> <el-card class="card" v-for="card in cards" :key="card.title">
<div class="card-image"> <div class="card-image">
@ -24,7 +24,7 @@
</div> </div>
<el-form class="form" ref="form" :model="formData" :rules="rules"> <el-form class="form" ref="form" :model="formData" :rules="rules">
<fieldset> <fieldset>
<legend style="color: #ff77a9">- 基本属性 -</legend> <legend style="color: #ff77a9;">- 基本属性 -</legend>
<el-form-item label="匹配的性别" prop="gender"> <el-form-item label="匹配的性别" prop="gender">
<el-radio-group v-model="formData.gender"> <el-radio-group v-model="formData.gender">
<el-radio label="男">男</el-radio> <el-radio label="男">男</el-radio>
@ -202,6 +202,7 @@
</template> </template>
<script> <script>
import axios from '../utils/axiosConfig';
export default { export default {
name: "PreferenceForm", name: "PreferenceForm",
data() { data() {
@ -258,12 +259,12 @@ export default {
{ validator: this.checkAgeRange, trigger: 'change' } { validator: this.checkAgeRange, trigger: 'change' }
], ],
distance: [{ required: true, message: '请选择距离范围', trigger: 'change' }], distance: [{ required: true, message: '请选择距离范围', trigger: 'change' }],
heightRange: [ // heightRange: [
{ validator: this.checkHeightRange, trigger: 'change' } // { validator: this.checkHeightRange, trigger: 'change' }
], // ],
weightRange: [ // weightRange: [
{ validator: this.checkWeightRange, trigger: 'change' } // { validator: this.checkWeightRange, trigger: 'change' }
], // ],
education: [{ required: true, message: '请选择最低教育水平', trigger: 'change' }], education: [{ required: true, message: '请选择最低教育水平', trigger: 'change' }],
smoker: [{ required: true, message: '请选择抽烟情况', trigger: 'change' }], smoker: [{ required: true, message: '请选择抽烟情况', trigger: 'change' }],
drinker: [{ required: true, message: '请选择喝酒情况', trigger: 'change' }], drinker: [{ required: true, message: '请选择喝酒情况', trigger: 'change' }],
@ -273,7 +274,7 @@ export default {
musicTypes: [{ required: true, message: '请选择喜欢的音乐类型', trigger: 'change' }], musicTypes: [{ required: true, message: '请选择喜欢的音乐类型', trigger: 'change' }],
movieTypes: [{ required: true, message: '请选择喜欢的电影类型', trigger: 'change' }], movieTypes: [{ required: true, message: '请选择喜欢的电影类型', trigger: 'change' }],
lifeValue: [{ required: true, message: '请选择生活价值观', trigger: 'change' }], lifeValue: [{ required: true, message: '请选择生活价值观', trigger: 'change' }],
religion: [{ required: true, message: '请选<EFBFBD><EFBFBD><EFBFBD>教信仰', trigger: 'change' }], religion: [{ required: true, message: '请选择宗教信仰', trigger: 'change' }],
relationshipType: [{ required: true, message: '请选择关系类型', trigger: 'change' }], relationshipType: [{ required: true, message: '请选择关系类型', trigger: 'change' }],
maritalStatus: [{ required: true, message: '请选择婚姻状况', trigger: 'change' }], maritalStatus: [{ required: true, message: '请选择婚姻状况', trigger: 'change' }],
minIncome: [{ required: true, message: '请选择最低收入', trigger: 'change' }], minIncome: [{ required: true, message: '请选择最低收入', trigger: 'change' }],
@ -325,28 +326,32 @@ export default {
} }
}, },
// 提交表单 // 提交表单
handleSubmit() { async handleSubmit() {
try {
this.$refs.form.validate((valid) => { const isValid = await this.$refs.form.validate();
if (valid) { if (isValid) {
// 在这里发送表单数据到后端 // 发送表单数据到后端
this.submitData(this.formData); const response = await axios.post('/auth/login', {
// 修改跳转路径到 Recommenduser 页面 formData:this.formData
this.$router.push('/main/recommend/recommenduser'); })
if (response.code === 200) {
// 跳转到 Recommenduser 页面
this.$router.push('/main/recommend/recommenduser');
this.$message({
type: "success",
message: "偏好已生成",
});
}
} else { } else {
// 如果表单验证失败，显示错误消息
this.$message.error("请检查表单填写是否正确"); this.$message.error("请检查表单填写是否正确");
} }
}); } catch (error) {
// 处理可能的错误
console.error("表单提交失败:", error);
this.$message.error("表单提交失败，请稍后再试");
}
}, },
// 提交数据
submitData(data) {
// 发送数据到后端接口
console.log("表单数据:", data);
this.$message({
type: "success",
message: "偏好已生成",
});
}
}, },
}; };
@ -367,6 +372,7 @@ fieldset {
align-items: center; align-items: center;
width: 100%; width: 100%;
max-width: 600px; max-width: 600px;
margin-top: 50px;
margin: auto; margin: auto;
} }
@ -392,11 +398,12 @@ fieldset {
background-color: #ff77a9; background-color: #ff77a9;
color: white; color: white;
border: 2px solid #ff77a9; border: 2px solid #ff77a9;
padding: 12px 25px; padding: 25px 40px;
font-size: 18px; font-size: 18px;
margin-top: 20px; margin-top: 20px;
border-radius: 25px; border-radius: 25px;
cursor: pointer; cursor: pointer;
margin-bottom: 50px;
} }
.submit-button:hover { .submit-button:hover {
@ -409,6 +416,7 @@ fieldset {
text-align: center; text-align: center;
background: linear-gradient(to bottom, #fffacd, #ffe4e1); background: linear-gradient(to bottom, #fffacd, #ffe4e1);
overflow: hidden; /* 确保背景图片不超出区域 */ overflow: hidden; /* 确保背景图片不超出区域 */
margin-bottom: 50px;
} }
.intro h1 { .intro h1 {
font-size: 28px; font-size: 28px;
@ -432,6 +440,9 @@ fieldset {
border-radius: 10px; border-radius: 10px;
background: #fff; background: #fff;
} }
.card:hover {
transform: scale(1.1);
}
.card-image { .card-image {
height: 100px; height: 100px;
width: 100px; width: 100px;

28
src/views/space/familyTree.vue
Unescape View File

@ -17,7 +17,7 @@
> >
<template #node="{ node }"> <template #node="{ node }">
<div class="custom-node" :class="{ 'current-user': node.isCurrentUser }"> <div class="custom-node" :class="{ 'current-user': node.isCurrentUser }">
<img :size="50" :src="node.avatar" /> <img :size="50" :src="node.image_url" class="node-avatar"/>
<div class="node-info"> <div class="node-info">
<span class="name">{{ node.name }}</span> <span class="name">{{ node.name }}</span>
<span class="relation">{{ node.relation }}</span> <span class="relation">{{ node.relation }}</span>
@ -43,7 +43,7 @@
<el-form-item label="头像"> <el-form-item label="头像">
<div class="avatar-uploader"> <div class="avatar-uploader">
<div class="avatar-wrapper"> <div class="avatar-wrapper">
<img v-if="currentMember.avatar" :src="currentMember.avatar" class="avatar" > <img v-if="currentMember.image_url" :src="currentMember.image_url" class="avatar" >
<el-icon v-else><Plus /></el-icon> <el-icon v-else><Plus /></el-icon>
<input <input
type="file" type="file"
@ -158,7 +158,7 @@ export default {
treeData :{ treeData :{
id: '1', id: '1',
name: '爷爷', name: '爷爷',
avatar: 'https://via.placeholder.com/150', image_url: require('@/assets/pictures/space/Inbase.png'),
relation: 'grandfather', relation: 'grandfather',
birthDate: '1940-01-01', birthDate: '1940-01-01',
phone: '13800138000', phone: '13800138000',
@ -166,7 +166,7 @@ export default {
{ {
id: '2', id: '2',
name: '父亲', name: '父亲',
avatar: '../../assets/pictures/space/post1.png', image_url: require('@/assets/pictures/space/Inbase.png'),
relation: 'father', relation: 'father',
birthDate: '1965-01-01', birthDate: '1965-01-01',
phone: '13800138001', phone: '13800138001',
@ -174,7 +174,7 @@ export default {
{ {
id: '3', id: '3',
name: '我', name: '我',
avatar: '/avatar/3.jpg', image_url: require('@/assets/pictures/space/career.png'),
relation: 'self', relation: 'self',
birthDate: '1990-01-01', birthDate: '1990-01-01',
phone: '13800138002', phone: '13800138002',
@ -186,7 +186,7 @@ export default {
{ {
id: '2', id: '2',
name: '父亲', name: '父亲',
avatar: '/avatar/2.jpg', image_url: require('@/assets/pictures/space/career.png'),
relation: 'father', relation: 'father',
birthDate: '1965-01-01', birthDate: '1965-01-01',
phone: '13800138001', phone: '13800138001',
@ -194,7 +194,7 @@ export default {
{ {
id: '3', id: '3',
name: '我', name: '我',
avatar: '/avatar/3.jpg', image_url: require('@/assets/pictures/space/career.png'),
relation: 'self', relation: 'self',
birthDate: '1990-01-01', birthDate: '1990-01-01',
phone: '13800138002', phone: '13800138002',
@ -212,7 +212,7 @@ export default {
currentMember: { currentMember: {
id: '', id: '',
name: '', name: '',
avatar: '', image_url: '',
parentId: '', parentId: '',
relation: '', relation: '',
birthDate: '', birthDate: '',
@ -304,8 +304,16 @@ export default {
} }
}, },
processTreeData(node) { processTreeData(node) {
// 将 avatar 字段改为 image_url，并使用 require 处理图片路径
try {
// 如果后端返回的是完整的图片路径，则使用 require 处理
node.image_url = node.image_url ? require('@/assets/pictures/space/' + node.image_url) : require('@/assets/pictures/space/Inbase.png')
} catch (e) {
// 如果 require 失败，使用默认图片
node.image_url = require('@/assets/pictures/space/Inbase.png')
}
// 设置默认值 // 设置默认值
node.avatar = node.avatar || '/default-avatar.png'
node.relation = node.relation || '未知' node.relation = node.relation || '未知'
node.birthDate = node.birthDate || '未知' node.birthDate = node.birthDate || '未知'
node.phone = node.phone || '未知' node.phone = node.phone || '未知'
@ -367,7 +375,7 @@ export default {
// 使用 FileReader 预览图片 // 使用 FileReader 预览图片
const reader = new FileReader() const reader = new FileReader()
reader.onload = (e) => { reader.onload = (e) => {
this.currentMember.avatar = e.target.result this.currentMember.image_url = e.target.result
} }
reader.readAsDataURL(file) reader.readAsDataURL(file)

238
src/views/space/familyTree1.vue
Unescape View File

@ -1,43 +1,21 @@
<template> <template>
<div class="family-tree"> <div class="background">
<!-- 工具栏 --> <div class="tree">
<div class="toolbar"> <TreeChart :json="treeData">
<el-button @click="zoomIn">放大</el-button> <template v-slot:node="{ node }">
<el-button @click="zoomOut">缩小</el-button> <div class="node-info">
<el-button @click="resetZoom">重置</el-button> <img :src="node.image_url" alt="image" class="node-image" />
</div> <div class="info">
<!-- 树图容器 -->
<div class="tree-wrapper" ref="treeWrapper">
<TreeChart
:json="treeData"
:collapse-enabled="true"
:horizontal-gap="60"
:vertical-gap="60"
node-text="name"
class="tree-chart"
>
<template #node="{ node }">
<div
class="custom-node"
:class="{ 'is-current': node.isCurrentUser }"
>
<!-- 头像区域 -->
<div class="avatar-wrapper">
<el-avatar
:size="50"
:src="node.avatar"
@error="() => true"
/>
</div>
<!-- 信息区域 -->
<div class="info-wrapper">
<div class="name">{{ node.name }}</div> <div class="name">{{ node.name }}</div>
<div class="relation">{{ node.relation }}</div> <button @click="toggleNode(node)">
<div class="birth-date">{{ node.birthDate }}</div> {{ node.expanded ? '隐藏下一代' : '显示下一代' }}
</button>
</div> </div>
</div> </div>
<div v-if="node.expanded" class="children">
<!-- 子节点展示 -->
<TreeChart :json="node.children" v-if="node.children && node.children.length"/>
</div>
</template> </template>
</TreeChart> </TreeChart>
</div> </div>
@ -45,134 +23,128 @@
</template> </template>
<script> <script>
import TreeChart from 'vue-tree-chart-3' import TreeChart from "vue-tree-chart-3";
import { ref } from 'vue'
export default { export default {
components: { TreeChart }, components: {
TreeChart
setup() {
const treeWrapper = ref(null)
const scale = ref(1)
// 缩放功能
const zoomIn = () => {
scale.value = Math.min(scale.value + 0.1, 2)
updateScale()
}
const zoomOut = () => {
scale.value = Math.max(scale.value - 0.1, 0.5)
updateScale()
}
const resetZoom = () => {
scale.value = 1
updateScale()
}
const updateScale = () => {
if (treeWrapper.value) {
treeWrapper.value.style.transform = `scale(${scale.value})`
}
}
return {
treeWrapper,
zoomIn,
zoomOut,
resetZoom
}
}, },
data() { data() {
return { return {
treeData: { treeData: {
name: '爷爷', name: '爸爸',
avatar: '../../assets/pictures/space/post1.png', image_url: require('@/assets/pictures/space/Inbase.png'),
relation: '祖父', expanded: true, // 默认展开
birthDate: '1940-01-01',
children: [ children: [
{ {
name: '父亲', name: 'children1',
avatar: 'https://via.placeholder.com/150', image_url: "https://static.refined-x.com/avat1.jpg",
relation: '父亲', expanded: true,
birthDate: '1965-01-01', },
{
name: 'children2',
image_url: "https://static.refined-x.com/avat2.jpg",
expanded: true,
mate: [{
name: 'mate',
image_url: "https://static.refined-x.com/avat3.jpg"
}],
children: [ children: [
{ {
name: '我', name: 'grandchild',
avatar: '/avatars/me.jpg', image_url: "https://static.refined-x.com/avat.jpg"
relation: '本人', },
birthDate: '1990-01-01', {
isCurrentUser: true, name: 'grandchild2',
children: [] image_url: "https://static.refined-x.com/avat1.jpg",
expanded: true,
children:[
{
name:'dd',
image_url: "https://static.refined-x.com/avat1.jpg",
}
]
},
{
name: 'grandchild3',
image_url: "https://static.refined-x.com/avat2.jpg"
},
{
name:'hh',
image_url: "https://static.refined-x.com/avat2.jpg"
} }
] ]
},
{
name: 'children3',
image_url: "https://static.refined-x.com/avat.jpg"
} }
] ]
} }
};
},
methods: {
toggleNode(node) {
node.expanded = !node.expanded; // 切换展开/收起
} }
} }
} };
</script> </script>
<style scoped> <style scoped>
.family-tree { * {
height: 100%; margin: 0;
display: flex; padding: 0;
flex-direction: column; box-sizing: border-box;
} }
.background {
.toolbar { display: flex;
padding: 10px; align-content: center;
border-bottom: 1px solid #eee; justify-content: center;
} background-image: url("../../assets/pictures/space/Inbase3.png");
background-size: cover;
.tree-wrapper { background-position: center top;
flex: 1; background-repeat: no-repeat;
overflow: auto; height: 100vh;
padding: 20px; width: 100%;
transform-origin: center center;
transition: transform 0.3s;
}
.custom-node {
padding: 10px;
border: 1px solid #ddd;
border-radius: 8px;
background: white;
min-width: 150px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.is-current {
border: 2px solid #409EFF;
background: #ecf5ff;
} }
.tree {
.avatar-wrapper { display: flex;
margin-bottom: 8px; position: absolute;
text-align: center; background: rgba(255, 255, 255, 0.8);
width: 1100px;
height: 700px;
border-radius: 30px;
margin-top: 30px;
margin-left: 240px;
padding-top: 100px;
justify-content: center;
align-items: center;
flex-shrink: 0;
} }
.info-wrapper { .node-info {
display: flex;
flex-direction: column;
align-items: center;
text-align: center; text-align: center;
} }
.name { .node-image {
font-weight: bold; width: 40px;
font-size: 16px; height: 40px;
margin-bottom: 4px; border-radius: 50%;
margin-bottom: 10px;
} }
.relation { .info {
color: #666;
font-size: 14px; font-size: 14px;
margin-bottom: 2px;
} }
.birth-date { .children {
color: #999; margin-top: 20px;
font-size: 12px; padding-left: 20px;
display: flex;
flex-direction: column;
} }
</style> </style>

25
src/views/space/space.vue
Unescape View File

@ -7,11 +7,11 @@
<div class="avatar-container"> <div class="avatar-container">
<img :src="userInfo.avatar || defaultAvatar" alt="Avatar" class="avatar"> <img :src="userInfo.avatar || defaultAvatar" alt="Avatar" class="avatar">
<!-- 更多信息按钮 --> <!-- 更多信息按钮 -->
<button @click="showMoreInfo" class="showMoreInfo-btn"> <button @click="editProfile" class="showFamilytree-btn" v-if="!this.userId">
<img src="../../assets/pictures/space/more.png" alt="" style="width: 80px;"> <img src="../../assets/pictures/space/more.png" alt="" style="width: 80px;">
</button> </button>
<!-- 族谱树按钮 --> <!-- 族谱树按钮 -->
<button @click="showFamilyTree" class="showFamilytree-btn"> <button @click="showFamilyTree" class="showMoreInfo-btn">
<img src="../../assets/pictures/space/tree.png" alt="" style="width: 80px;"> <img src="../../assets/pictures/space/tree.png" alt="" style="width: 80px;">
</button> </button>
</div> </div>
@ -59,8 +59,8 @@
<!-- 操作按钮 --> <!-- 操作按钮 -->
<div class="actions"> <div class="actions">
<button @click="editProfile">编辑</button> <button @click="logout" v-if="!this.userId">退出登录</button>
<button @click="privateChat">私聊</button> <button @click="privateChat" v-if="this.userId">私聊</button>
</div> </div>
</div> </div>
@ -106,11 +106,14 @@
<script> <script>
import axios from '@/utils/axiosConfig' import axios from '@/utils/axiosConfig'
import {getUserId} from '@/token/auth'
export default { export default {
props: ['userId'],
name:'spaceIndex', name:'spaceIndex',
data() { data() {
return { return {
userId: 1, userId: 1,
myId: 0,
userlikelist:[], userlikelist:[],
// myfollows: [], // myfollows: [],
userInfo: { userInfo: {
@ -294,12 +297,16 @@
}, },
privateChat() { privateChat() {
// Navigate to private chat page // Navigate to private chat page
},
logout() {
this.$router.push('/')
} }
}, },
mounted() { mounted() {
// 加载用户信息 // 加载用户信息
this.fetchUserInfo(); this.fetchUserInfo();
this.fetchPostInfo(); this.fetchPostInfo();
this.myId = getUserId();
}, },
}; };
</script> </script>
@ -376,7 +383,6 @@
left: -130px; /* 在头像左侧 */ left: -130px; /* 在头像左侧 */
top: 110px; top: 110px;
} }
.showFamilytree-btn { .showFamilytree-btn {
right: -130px; /* 在头像右侧 */ right: -130px; /* 在头像右侧 */
top: 110px; top: 110px;
@ -436,17 +442,22 @@
font-size: 14px; font-size: 14px;
margin-left: 10px; margin-left: 10px;
} }
.actions {
display: flex;
justify-content: center;
align-items: center;
}
.actions button { .actions button {
color:white; color:white;
font-size: 18px; font-size: 18px;
background-color: #f077a8; background-color: #f077a8;
padding: 10px 20px; padding: 12px 20px;
margin-left: 55px; margin-left: 55px;
margin-right: 40px; margin-right: 40px;
margin-top: 30px; margin-top: 30px;
border: none; border: none;
border-radius: 30px; border-radius: 30px;
width: 100px; width: 115px;
cursor: pointer; cursor: pointer;
} }
.post-container { .post-container {

Write Preview
Loading…
Cancel
Save