<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>红娘会在线对象匹配系统</title>
<script type="text/javascript" src="config_ip/config_ip.js?v=2.6"></script>
<script src="vue_js/vue.js"></script>
<script src="vue_js/axios.min.js"></script>
<script src="vue_js/xlsx.full.min.js"></script>
<style>
body{
padding:0px;
margin:0px;
}
.title_container{
width:calc(100% - 20px);
height:60px;
color: #FFB6C1;
display: flex;
align-items: center;
justify-content: flex-start;
padding: 20px;
border-bottom:1px solid #e3e2e2;
}
/*<!--匹配筛选-->*/
.picker_choose_container{
width:100%;
height:119px;
border-bottom:1px solid #e0dcdc;
/*background-color: #007BFF;*/
position: relative;
}
/*<!--匹配按钮-->*/
.picker_choose_confirm_btn_container{
width: 20%;
height: 60px;
background-color:#FFB6C1;
color:white;
position: absolute;
bottom:0;
right:0%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
/*<!--11.11%每个选项 60px-->*/
.picker_choose_item{
width:calc(10% - 1px);
height:59px;
/*background-color: #d9534f;*/
float:left;
position: relative;
display: flex;
align-items: center;
justify-content: center;
border-bottom: 1px solid #e0dcdc;
border-right: 1px solid #e0dcdc;
}
/*<!--下拉指示箭头-->*/
.select_icon_container{
width:30px;
height:60px;
/*background-color: yellow;*/
position: absolute;
top:0;
right:0;
display: flex;
align-items: center;
justify-content: center;
}
.select_icon{
width:20px;
height:20px;
}
/*<!--表格容器-->*/
.table_container{
margin-top: 60px;
width:100%;
height:auto;
/*background-color: #007BFF;*/
}
thead{
background-color: #FFB6C1;
}
table{
width:100%;
}
/*<!--表格导出按钮容器-->*/
.excel_export_btn_container{
width:100%;
height: auto;
}
.excel_excel_btn{
margin: 20px;
padding: 10px;
}
/*<!--点击后显示列表默认不显示，点击后显示-->*/
.choose_list_alert{
position: absolute;
top:0;
left: 0;
width: 100%;
height:auto;
background-color: white;
z-index: 99999;
overflow: auto;
max-height: 300px;
}
/*<!--选项列表-->*/
.choose_list_list{
width: 100%;
height: 60px;
background-color: #f6f2f2;
border-bottom: 1px solid #e8e2e2;
display: flex;
align-items: center;
justify-content: center;
}
/*<!--选项列表-->*/
.choose_list_alert_title{
width: 100%;
display: flex;
align-items: center;
justify-content: center;
height: 60px;
z-index: 99999;
border-bottom: 1px solid #e8e2e2;
position: relative;
}
/*<!--向上的箭头-->*/
.top_direction_container{
width:auto;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top:0;
right: 0;
/*background-color: red;*/
}
</style>
</head>
<body>
<div id="app" class="container">
<!--title_container-->
<div class="title_container">{{title}}</div>
<!--匹配筛选-->
<div class="picker_choose_container">
<!--11.11%每个选项 60px-->
<div class="picker_choose_item" v-for="item in choose_item_list" :key="id" >
<!--下拉指示箭头-->
<div class="select_icon_container">
<img class="select_icon" src="select_icon.png" @click="chooseClick(item.id)" >
</div>
{{item.tab_name}}
<!--点击后显示列表默认不显示，点击后显示-->
<div class="choose_list_alert" v-if="item.selected===true" >
<!--选项列表-->
<div class="choose_list_alert_title">{{item.tab_name}}
<!--向上的箭头-->
<div class="top_direction_container">
<img class="select_icon" src="up_select.png" @click="chooseClick(item.id)" >
</div>
</div>
<div class="choose_list_list" v-for="(choose_item,index) in item.choose_list" :key="item.id" @click="choose_list_item_click(item, choose_item.tab)">
{{choose_item.tab}}
</div>
</div>
</div>
<!--匹配按钮-->
<div class="picker_choose_confirm_btn_container">
开始匹配
</div>
</div>
<!--表格容器-->
<div class="table_container">
<table border="1">
<thead>
<tr>
<th>ID</th>
<th>姓名</th>
<th>电话号码</th>
<th>性别</th>
<th>城市</th>
<th>身高</th>
<th>体重</th>
<th>年龄</th>
<th>学历</th>
<th>月收入</th>
<th>婚姻状况</th>
<th>车辆状态</th>
<th>房产状态</th>
<th>海外经历</th>
<th>父母状况</th>
<th>兄弟姐妹状况</th>
<th>宗教信仰状况</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr v-for="item in get_data_list" :key="item.id">
<td>{{ item.id }}</td>
<td>{{ item.name }}</td>
<td>{{ item.phoneNumber }}</td>
<td>{{ item.gender }}</td>
<td>{{ item.city }}</td>
<td>{{ item.height }}</td>
<td>{{ item.weight }}</td>
<td>{{ item.age }}</td>
<td>{{ item.education }}</td>
<td>{{ item.month_income }}</td>
<td>{{ item.marital_status }}</td>
<td>{{ item.carStatus }}</td>
<td>{{ item.houseStatus }}</td>
<td>{{ item.overseas_experience }}</td>
<td>{{ item.parents_status }}</td>
<td>{{ item.siblings_status }}</td>
<td>{{ item.religious_belie_status }}</td>
<td><a style="color:blue;border-bottom:1px solid blue">导出表格</a></td>
</tr>
</tbody>
</table>
</div>
<!--表格导出按钮容器-->
<div class="excel_export_btn_container">
<button class="excel_excel_btn" @click="exportToExcel">导出excel表格</button>
</div>
</div>
<script>
new Vue({
el:'#app',
data:{
title:"红娘会在线对象匹配系统",
choose_item_list:[
{id:1,selected:true,tab_name:"性别",choose_list:[{id:1,tab:"男",selected:false},{id:2,tab:"女",selected:false}]},
{id:2,selected:false,tab_name:"户籍地",choose_list: [
{ id: 1, tab: "北京市", selected: false },
{ id: 2, tab: "天津市", selected: false },
{ id: 3, tab: "河北省", selected: false },
{ id: 4, tab: "山西省", selected: false },
{ id: 5, tab: "内蒙古自治区", selected: false },
{ id: 6, tab: "辽宁省", selected: false },
{ id: 7, tab: "吉林省", selected: false },
{ id: 8, tab: "黑龙江省", selected: false },
{ id: 9, tab: "上海市", selected: false },
{ id: 10, tab: "江苏省", selected: false },
{ id: 11, tab: "浙江省", selected: false },
{ id: 12, tab: "安徽省", selected: false },
{ id: 13, tab: "福建省", selected: false },
{ id: 14, tab: "江西省", selected: false },
{ id: 15, tab: "山东省", selected: false },
{ id: 16, tab: "河南省", selected: false },
{ id: 17, tab: "湖北省", selected: false },
{ id: 18, tab: "湖南省", selected: false },
{ id: 19, tab: "广东省", selected: false },
{ id: 20, tab: "广西壮族自治区", selected: false },
{ id: 21, tab: "海南省", selected: false },
{ id: 22, tab: "重庆市", selected: false },
{ id: 23, tab: "四川省", selected: false },
{ id: 24, tab: "贵州省", selected: false },
{ id: 25, tab: "云南省", selected: false },
{ id: 26, tab: "西藏自治区", selected: false },
{ id: 27, tab: "陕西省", selected: false },
{ id: 28, tab: "甘肃省", selected: false },
{ id: 29, tab: "青海省", selected: false },
{ id: 30, tab: "宁夏回族自治区", selected: false },
{ id: 31, tab: "新疆维吾尔自治区", selected: false },
{ id: 32, tab: "台湾省", selected: false },
{ id: 33, tab: "香港特别行政区", selected: false },
{ id: 34, tab: "澳门特别行政区", selected: false }
]},
{id:3,selected:false,tab_name:"年龄",
choose_list: [
{ id: 1, tab: "22岁", selected: false },
{ id: 2, tab: "23岁", selected: false },
{ id: 3, tab: "24岁", selected: false },
// 从 25 岁到 80 岁的选项
{ id: 4, tab: "25岁", selected: false },
{ id: 5, tab: "26岁", selected: false },
{ id: 6, tab: "27岁", selected: false },
{ id: 7, tab: "28岁", selected: false },
{ id: 8, tab: "29岁", selected: false },
{ id: 9, tab: "30岁", selected: false },
{ id: 10, tab: "31岁", selected: false },
{ id: 11, tab: "32岁", selected: false },
{ id: 12, tab: "33岁", selected: false },
{ id: 13, tab: "34岁", selected: false },
{ id: 14, tab: "35岁", selected: false },
{ id: 15, tab: "36岁", selected: false },
{ id: 16, tab: "37岁", selected: false },
{ id: 17, tab: "38岁", selected: false },
{ id: 18, tab: "39岁", selected: false },
{ id: 19, tab: "40岁", selected: false },
{ id: 20, tab: "41岁", selected: false },
{ id: 21, tab: "42岁", selected: false },
{ id: 22, tab: "43岁", selected: false },
{ id: 23, tab: "44岁", selected: false },
{ id: 24, tab: "45岁", selected: false },
{ id: 25, tab: "46岁", selected: false },
{ id: 26, tab: "47岁", selected: false },
{ id: 27, tab: "48岁", selected: false },
{ id: 28, tab: "49岁", selected: false },
{ id: 29, tab: "50岁", selected: false },
{ id: 30, tab: "51岁", selected: false },
{ id: 31, tab: "52岁", selected: false },
{ id: 32, tab: "53岁", selected: false },
{ id: 33, tab: "54岁", selected: false },
{ id: 34, tab: "55岁", selected: false },
{ id: 35, tab: "56岁", selected: false },
{ id: 36, tab: "57岁", selected: false },
{ id: 37, tab: "58岁", selected: false },
{ id: 38, tab: "59岁", selected: false },
{ id: 39, tab: "60岁", selected: false },
{ id: 40, tab: "61岁", selected: false },
{ id: 41, tab: "62岁", selected: false },
{ id: 42, tab: "63岁", selected: false },
{ id: 43, tab: "64岁", selected: false },
{ id: 44, tab: "65岁", selected: false },
{ id: 45, tab: "66岁", selected: false },
{ id: 46, tab: "67岁", selected: false },
{ id: 47, tab: "68岁", selected: false },
{ id: 48, tab: "69岁", selected: false },
{ id: 49, tab: "70岁", selected: false },
{ id: 50, tab: "71岁", selected: false },
{ id: 51, tab: "72岁", selected: false },
{ id: 52, tab: "73岁", selected: false },
{ id: 53, tab: "74岁", selected: false },
{ id: 54, tab: "75岁", selected: false },
{ id: 55, tab: "76岁", selected: false },
{ id: 56, tab: "77岁", selected: false },
{ id: 57, tab: "78岁", selected: false },
{ id: 58, tab: "79岁", selected: false },
{ id: 59, tab: "80岁", selected: false }
]},
{id:4,selected:false,tab_name:"学历",choose_list: [
{ id: 1, tab: "高中", selected: false },
{ id: 2, tab: "大专", selected: false },
{ id: 3,tab: "本科", selected: false },
{ id: 4, tab: "硕士", selected: false },
{ id: 5, tab: "博士", selected: false }
]},
{id:5,selected:false,tab_name:"月收入",
choose_list: [
{ id: 1, tab: "3000以下", selected: false },
{ id: 2, tab: "3000~4000", selected: false },
{ id: 3,tab: "4000~5000", selected: false },
{ id: 4, tab: "5000~10000", selected: false },
{ id: 5, tab: "10000~15000", selected: false },
{ id: 6, tab: "15000~20000", selected: false },
{ id: 7, tab: "20000以上", selected: false }
]},
{id:6,selected:false,tab_name:"婚姻状况",choose_list: [
{ id: 1, tab: "未婚", selected: false },
{ id: 2, tab: "离异带子", selected: false },
{ id: 3,tab: "离异不带子", selected: false },
{ id: 4, tab: "丧偶", selected: false }
]},
{id:7,selected:false,tab_name:"是否有车",choose_list: [
{ id: 1, tab: "有车", selected: false },
{ id: 2, tab: "没有车", selected: false }
]},
{id:8,selected:false,tab_name:"是否有房",choose_list: [
{ id: 1, tab: "有房", selected: false },
{ id: 2, tab: "没有房", selected: false }
]},
{id:9,selected:false,tab_name:"身高",choose_list: [
{ id: 1, tab: "150cm-155cm", selected: false },
{ id: 2, tab: "155cm-160cm", selected: false },
{ id: 3, tab: "160cm-165cm", selected: false },
{ id: 4, tab: "165cm-170cm", selected: false },
{ id: 5, tab: "170cm-175cm", selected: false },
{ id: 6, tab: "175cm-180cm", selected: false },
{ id: 7, tab: "185以上", selected: false },
]},
{id:10,selected:false,tab_name:"体重",choose_list: [
{ id: 1, tab: "50kg-60kg", selected: false },
{ id: 2, tab: "60kg-70kg", selected: false },
{ id: 3, tab: "70kg-80kg", selected: false },
{ id: 4, tab: "80kg-90kg", selected: false },
{ id: 5, tab: "90kg以上", selected: false }
]
},
{id:11,selected:false,tab_name:"是否有海外留学工作经历",choose_list: [
{ id: 1, tab: "有", selected: false },
{ id: 2, tab: "没有", selected: false }
]},
{id:12,selected:false,tab_name:"父母情况",choose_list: [
{ id: 1, tab: "父母健在", selected: false },
{ id: 2, tab: "父亲健在", selected: false },
{ id: 3, tab: "母亲健在", selected: false },
{ id: 4, tab: "父母离世", selected: false }
]},
{id:13,selected:false,tab_name:"兄弟姐妹情况",choose_list: [
{ id: 1, tab: "独生子女", selected: false },
{ id: 2, tab: "有兄弟姐妹", selected: false },
]},
{id:14,selected:false,tab_name:"是否有宗教信仰",choose_list: [
{ id: 1, tab: "有宗教信仰", selected: false },
{ id: 2, tab: "无宗教信仰", selected: false },
]}
],
get_data_list:[
{id:1,name:"张三",phoneNumber:"13105050392",gender:"男",city:"四川省",height:"165cm",weight:"55kg",age:26,education:"大专",month_income:"20000以上",marital_status:"未婚",carStatus:"有车",houseStatus:"有房",overseas_experience:"有",parents_status:"父母健在",siblings_status:"独生子女",religious_belie_status:"是"},
{id:2,name:"张三",phoneNumber:"13105050392",gender:"男",city:"四川省",height:"165cm",weight:"55kg",age:26,education:"大专",month_income:"20000以上",marital_status:"未婚",carStatus:"有车",houseStatus:"有房",overseas_experience:"有",parents_status:"父母健在",siblings_status:"独生子女",religious_belie_status:"是"},
{id:3,name:"张三",phoneNumber:"13105050392",gender:"男",city:"四川省",height:"165cm",weight:"55kg",age:26,education:"大专",month_income:"20000以上",marital_status:"未婚",carStatus:"有车",houseStatus:"有房",overseas_experience:"有",parents_status:"父母健在",siblings_status:"独生子女",religious_belie_status:"是"},
{id:4,name:"张三",phoneNumber:"13105050392",gender:"男",city:"四川省",height:"165cm",weight:"55kg",age:26,education:"大专",month_income:"20000以上",marital_status:"未婚",carStatus:"有车",houseStatus:"有房",overseas_experience:"有",parents_status:"父母健在",siblings_status:"独生子女",religious_belie_status:"是"},
{id:5,name:"张三",phoneNumber:"13105050392",gender:"男",city:"四川省",height:"165cm",weight:"55kg",age:26,education:"大专",month_income:"20000以上",marital_status:"未婚",carStatus:"有车",houseStatus:"有房",overseas_experience:"有",parents_status:"父母健在",siblings_status:"独生子女",religious_belie_status:"是"},
{id:6,name:"张三",phoneNumber:"13105050392",gender:"男",city:"四川省",height:"165cm",weight:"55kg",age:26,education:"大专",month_income:"20000以上",marital_status:"未婚",carStatus:"有车",houseStatus:"有房",overseas_experience:"有",parents_status:"父母健在",siblings_status:"独生子女",religious_belie_status:"是"},
{id:7,name:"张三",phoneNumber:"13105050392",gender:"男",city:"四川省",height:"165cm",weight:"55kg",age:26,education:"大专",month_income:"20000以上",marital_status:"未婚",carStatus:"有车",houseStatus:"有房",overseas_experience:"有",parents_status:"父母健在",siblings_status:"独生子女",religious_belie_status:"是"},
{id:8,name:"张三",phoneNumber:"13105050392",gender:"男",city:"四川省",height:"165cm",weight:"55kg",age:26,education:"大专",month_income:"20000以上",marital_status:"未婚",carStatus:"有车",houseStatus:"有房",overseas_experience:"有",parents_status:"父母健在",siblings_status:"独生子女",religious_belie_status:"是"},
{id:9,name:"张三",phoneNumber:"13105050392",gender:"男",city:"四川省",height:"165cm",weight:"55kg",age:26,education:"大专",month_income:"20000以上",marital_status:"未婚",carStatus:"有车",houseStatus:"有房",overseas_experience:"有",parents_status:"父母健在",siblings_status:"独生子女",religious_belie_status:"是"},
{id:10,name:"张三",phoneNumber:"13105050392",gender:"男",city:"四川省",height:"165cm",weight:"55kg",age:26,education:"大专",month_income:"20000以上",marital_status:"未婚",carStatus:"有车",houseStatus:"有房",overseas_experience:"有",parents_status:"父母健在",siblings_status:"独生子女",religious_belie_status:"是"},
{id:12,name:"张三",phoneNumber:"13105050392",gender:"男",city:"四川省",height:"165cm",weight:"55kg",age:26,education:"大专",month_income:"20000以上",marital_status:"未婚",carStatus:"有车",houseStatus:"有房",overseas_experience:"有",parents_status:"父母健在",siblings_status:"独生子女",religious_belie_status:"是"},
{id:13,name:"张三",phoneNumber:"13105050392",gender:"男",city:"四川省",height:"165cm",weight:"55kg",age:26,education:"大专",month_income:"20000以上",marital_status:"未婚",carStatus:"有车",houseStatus:"有房",overseas_experience:"有",parents_status:"父母健在",siblings_status:"独生子女",religious_belie_status:"是"},
{id:14,name:"张三",phoneNumber:"13105050392",gender:"男",city:"四川省",height:"165cm",weight:"55kg",age:26,education:"大专",month_income:"20000以上",marital_status:"未婚",carStatus:"有车",houseStatus:"有房",overseas_experience:"有",parents_status:"父母健在",siblings_status:"独生子女",religious_belie_status:"是"},
{id:15,name:"张三",phoneNumber:"13105050392",gender:"男",city:"四川省",height:"165cm",weight:"55kg",age:26,education:"大专",month_income:"20000以上",marital_status:"未婚",carStatus:"有车",houseStatus:"有房",overseas_experience:"有",parents_status:"父母健在",siblings_status:"独生子女",religious_belie_status:"是"},
{id:16,name:"张三",phoneNumber:"13105050392",gender:"男",city:"四川省",height:"165cm",weight:"55kg",age:26,education:"大专",month_income:"20000以上",marital_status:"未婚",carStatus:"有车",houseStatus:"有房",overseas_experience:"有",parents_status:"父母健在",siblings_status:"独生子女",religious_belie_status:"是"},
{id:17,name:"张三",phoneNumber:"13105050392",gender:"男",city:"四川省",height:"165cm",weight:"55kg",age:26,education:"大专",month_income:"20000以上",marital_status:"未婚",carStatus:"有车",houseStatus:"有房",overseas_experience:"有",parents_status:"父母健在",siblings_status:"独生子女",religious_belie_status:"是"},
{id:18,name:"张三",phoneNumber:"13105050392",gender:"男",city:"四川省",height:"165cm",weight:"55kg",age:26,education:"大专",month_income:"20000以上",marital_status:"未婚",carStatus:"有车",houseStatus:"有房",overseas_experience:"有",parents_status:"父母健在",siblings_status:"独生子女",religious_belie_status:"是"},
{id:19,name:"张三",phoneNumber:"13105050392",gender:"男",city:"四川省",height:"165cm",weight:"55kg",age:26,education:"大专",month_income:"20000以上",marital_status:"未婚",carStatus:"有车",houseStatus:"有房",overseas_experience:"有",parents_status:"父母健在",siblings_status:"独生子女",religious_belie_status:"是"},
{id:20,name:"张三",phoneNumber:"13105050392",gender:"男",city:"四川省",height:"165cm",weight:"55kg",age:26,education:"大专",month_income:"20000以上",marital_status:"未婚",carStatus:"有车",houseStatus:"有房",overseas_experience:"有",parents_status:"父母健在",siblings_status:"独生子女",religious_belie_status:"是"},
]
},
methods:{
choose_list_item_click(item, selectedValue) {
// 更新选中项的tab_name为选中的值
item.tab_name = item.tab_name+"："+selectedValue;
// 隐藏选项容器
item.selected = false;
},
chooseClick(itemId) {
// 根据itemId找到对应的选项
const item = this.choose_item_list.find(item => item.id === itemId);
// 切换选项的selected状态
item.selected = !item.selected;
},
exportToExcel() {
// 表格数据
const data = this.get_data_list;
// 表头
const header = [
"ID", "姓名", "电话号码", "性别", "城市", "身高", "体重", "年龄",
"学历", "月收入", "婚姻状况", "车辆状态", "房产状态", "海外经历",
"父母状况", "兄弟姐妹状况", "宗教信仰状况"
];
// 将表头和数据合并为二维数组
const exportData = [header, ...data.map(item => Object.values(item))];
// 创建一个工作簿
const workbook = XLSX.utils.book_new();
// 将数据转换为工作表
const worksheet = XLSX.utils.aoa_to_sheet(exportData);
// 将工作表添加到工作簿
XLSX.utils.book_append_sheet(workbook, worksheet, "Sheet1");
// 将工作簿导出为Excel文件
XLSX.writeFile(workbook, "data.xlsx");
}
},
mounted(){
}
})
</script>
</body>
</html>