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