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

Compare commits

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

No commits in common. 'ff800e4a0b78b70dbd3a4d7d13bd6620bddc609f' and '1db22929d46b872b2ec1afa14bb79fa32c26b20e' have entirely different histories.
ff800e4a0b ... 1db22929d4

5 changed files with 179 additions and 181 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 style="color: rgba(87, 87, 87, 1);">填写你的恋爱偏好</h1> <h1>填写你的恋爱偏好</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,7 +202,6 @@
</template> </template>
<script> <script>
import axios from '../utils/axiosConfig';
export default { export default {
name: "PreferenceForm", name: "PreferenceForm",
data() { data() {
@ -259,12 +258,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' }],
@ -274,7 +273,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: '请选择宗教信仰', trigger: 'change' }], religion: [{ required: true, message: '请选<EFBFBD><EFBFBD><EFBFBD>教信仰', 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' }],
@ -326,32 +325,28 @@ export default {
} }
}, },
// 提交表单 // 提交表单
async handleSubmit() { handleSubmit() {
try {
const isValid = await this.$refs.form.validate(); this.$refs.form.validate((valid) => {
if (isValid) { if (valid) {
// 发送表单数据到后端 // 在这里发送表单数据到后端
const response = await axios.post('/auth/login', { this.submitData(this.formData);
formData:this.formData // 修改跳转路径到 Recommenduser 页面
}) 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: "偏好已生成",
});
}
}, },
}; };
@ -372,7 +367,6 @@ fieldset {
align-items: center; align-items: center;
width: 100%; width: 100%;
max-width: 600px; max-width: 600px;
margin-top: 50px;
margin: auto; margin: auto;
} }
@ -398,12 +392,11 @@ fieldset {
background-color: #ff77a9; background-color: #ff77a9;
color: white; color: white;
border: 2px solid #ff77a9; border: 2px solid #ff77a9;
padding: 25px 40px; padding: 12px 25px;
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 {
@ -416,7 +409,6 @@ 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;
@ -440,9 +432,6 @@ 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.image_url" class="node-avatar"/> <img :size="50" :src="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.image_url" :src="currentMember.image_url" class="avatar" > <img v-if="currentMember.avatar" :src="currentMember.avatar" 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: '爷爷',
image_url: require('@/assets/pictures/space/Inbase.png'), avatar: 'https://via.placeholder.com/150',
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: '父亲',
image_url: require('@/assets/pictures/space/Inbase.png'), avatar: '../../assets/pictures/space/post1.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: '我',
image_url: require('@/assets/pictures/space/career.png'), avatar: '/avatar/3.jpg',
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: '父亲',
image_url: require('@/assets/pictures/space/career.png'), avatar: '/avatar/2.jpg',
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: '我',
image_url: require('@/assets/pictures/space/career.png'), avatar: '/avatar/3.jpg',
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: '',
image_url: '', avatar: '',
parentId: '', parentId: '',
relation: '', relation: '',
birthDate: '', birthDate: '',
@ -304,16 +304,8 @@ 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 || '未知'
@ -375,7 +367,7 @@ export default {
// 使用 FileReader 预览图片 // 使用 FileReader 预览图片
const reader = new FileReader() const reader = new FileReader()
reader.onload = (e) => { reader.onload = (e) => {
this.currentMember.image_url = e.target.result this.currentMember.avatar = e.target.result
} }
reader.readAsDataURL(file) reader.readAsDataURL(file)

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

@ -1,21 +1,43 @@
<template> <template>
<div class="background"> <div class="family-tree">
<div class="tree"> <!-- 工具栏 -->
<TreeChart :json="treeData"> <div class="toolbar">
<template v-slot:node="{ node }"> <el-button @click="zoomIn">放大</el-button>
<div class="node-info"> <el-button @click="zoomOut">缩小</el-button>
<img :src="node.image_url" alt="image" class="node-image" /> <el-button @click="resetZoom">重置</el-button>
<div class="info"> </div>
<!-- 树图容器 -->
<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>
<button @click="toggleNode(node)"> <div class="relation">{{ node.relation }}</div>
{{ node.expanded ? '隐藏下一代' : '显示下一代' }} <div class="birth-date">{{ node.birthDate }}</div>
</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>
@ -23,128 +45,134 @@
</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: { components: { TreeChart },
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: '爷爷',
image_url: require('@/assets/pictures/space/Inbase.png'), avatar: '../../assets/pictures/space/post1.png',
expanded: true, // 默认展开 relation: '祖父',
birthDate: '1940-01-01',
children: [ children: [
{ {
name: 'children1', name: '父亲',
image_url: "https://static.refined-x.com/avat1.jpg", avatar: 'https://via.placeholder.com/150',
expanded: true, relation: '父亲',
}, 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: 'grandchild', name: '我',
image_url: "https://static.refined-x.com/avat.jpg" avatar: '/avatars/me.jpg',
}, relation: '本人',
{ birthDate: '1990-01-01',
name: 'grandchild2', isCurrentUser: true,
image_url: "https://static.refined-x.com/avat1.jpg", children: []
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 {
margin: 0; height: 100%;
padding: 0;
box-sizing: border-box;
}
.background {
display: flex; display: flex;
align-content: center; flex-direction: column;
justify-content: center;
background-image: url("../../assets/pictures/space/Inbase3.png");
background-size: cover;
background-position: center top;
background-repeat: no-repeat;
height: 100vh;
width: 100%;
} }
.tree {
display: flex; .toolbar {
position: absolute; padding: 10px;
background: rgba(255, 255, 255, 0.8); border-bottom: 1px solid #eee;
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;
} }
.node-info { .tree-wrapper {
display: flex; flex: 1;
flex-direction: column; overflow: auto;
align-items: center; padding: 20px;
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;
}
.avatar-wrapper {
margin-bottom: 8px;
text-align: center; text-align: center;
} }
.node-image { .info-wrapper {
width: 40px; text-align: center;
height: 40px; }
border-radius: 50%;
margin-bottom: 10px; .name {
font-weight: bold;
font-size: 16px;
margin-bottom: 4px;
} }
.info { .relation {
color: #666;
font-size: 14px; font-size: 14px;
margin-bottom: 2px;
} }
.children { .birth-date {
margin-top: 20px; color: #999;
padding-left: 20px; font-size: 12px;
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="editProfile" class="showFamilytree-btn" v-if="!this.userId"> <button @click="showMoreInfo" class="showMoreInfo-btn">
<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="showMoreInfo-btn"> <button @click="showFamilyTree" class="showFamilytree-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="logout" v-if="!this.userId">退出登录</button> <button @click="editProfile">编辑</button>
<button @click="privateChat" v-if="this.userId">私聊</button> <button @click="privateChat">私聊</button>
</div> </div>
</div> </div>
@ -106,14 +106,11 @@
<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: {
@ -297,16 +294,12 @@
}, },
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>
@ -383,6 +376,7 @@
left: -130px; /* 在头像左侧 */ left: -130px; /* 在头像左侧 */
top: 110px; top: 110px;
} }
.showFamilytree-btn { .showFamilytree-btn {
right: -130px; /* 在头像右侧 */ right: -130px; /* 在头像右侧 */
top: 110px; top: 110px;
@ -442,22 +436,17 @@
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: 12px 20px; padding: 10px 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: 115px; width: 100px;
cursor: pointer; cursor: pointer;
} }
.post-container { .post-container {

Write Preview
Loading…
Cancel
Save