602 lines
16 KiB
Vue
Executable File
602 lines
16 KiB
Vue
Executable File
<template>
|
||
<view class="search">
|
||
<u-sticky>
|
||
<view class="search-wrapper">
|
||
<u-search color="#333333" border-color="#E8E8E8" :showAction="true" actionText="搜索" :animation="false" v-model="where.keywords"
|
||
@search="onSearch" @custom="onSearch" :actionStyle="actionStyle"></u-search>
|
||
</view>
|
||
</u-sticky>
|
||
<view class="container">
|
||
<!-- <u-picker :show="showRegion" ref="uPicker" :columns="columns" :columnData="columnData" @confirm="confirm"
|
||
@change="changeHandler" @cancel="showRegion = false"></u-picker> -->
|
||
<view class="history">
|
||
<view class="his-head">
|
||
<view class="line"></view>
|
||
<text class="title">基本条件</text>
|
||
</view>
|
||
<u-cell-group :border="false">
|
||
<u-cell title="年龄" isLink :value="where.ageMate" @click="showAgeMate = true"></u-cell>
|
||
<u-cell title="注册地址" isLink :value="regionMate" @click="onArea"></u-cell>
|
||
<u-cell title="身高" isLink :value="where.heightMate" @click="showHeightMate = true"></u-cell>
|
||
<u-cell title="体型" isLink :value="where.shapeMate" @click="showShapeMate = true"></u-cell>
|
||
<u-cell title="学历" isLink :value="where.educationMate" @click="showEducationMate = true"></u-cell>
|
||
<u-cell title="年收入" isLink :value="where.monthlyPayMate"
|
||
@click="showMonthlyPayMate = true"></u-cell>
|
||
</u-cell-group>
|
||
</view>
|
||
<view class="history">
|
||
<view class="his-head">
|
||
<view class="line"></view>
|
||
<text class="title">高级搜索</text>
|
||
</view>
|
||
<u-cell-group :border="false">
|
||
<u-cell title="职员" isLink :value="where.vocationMate" @click="showVocationMate = true"></u-cell>
|
||
<u-cell title="是否有房" isLink :value="where.hasHouseMate" @click="showHasHouseMate = true"></u-cell>
|
||
<u-cell title="是否有车" isLink :value="where.hasCarMate" @click="showHasCarMate = true"></u-cell>
|
||
<u-cell title="婚姻状况" isLink :value="where.maritalStatusMate"
|
||
@click="showMaritalStatusMate = true"></u-cell>
|
||
<u-cell title="有无小孩" isLink :value="where.hasChildrenMate"
|
||
@click="showHasChildrenMate = true"></u-cell>
|
||
<u-cell title="星座" isLink :value="where.constellation" @click="showConstellation = true"></u-cell>
|
||
</u-cell-group>
|
||
</view>
|
||
|
||
<u-picker :show="showAgeMate" :columns="dict.ageMate" @confirm="confirmAgeMate"
|
||
@cancel="showAgeMate = false"></u-picker>
|
||
<u-picker :show="showRegionMate" :columns="regionsData" keyName="label" @confirm="confirmRegionMate"
|
||
@cancel="showRegionMate = false"></u-picker>
|
||
<u-picker :show="showHeightMate" :columns="dict.heightMate" @confirm="confirmHeightMate"
|
||
@cancel="showHeightMate = false"></u-picker>
|
||
<u-picker :show="showShapeMate" :columns="dict.shapeMate" @confirm="confirmShapeMate"
|
||
@cancel="showShapeMate = false"></u-picker>
|
||
<u-picker :show="showEducationMate" :columns="dict.educationMate" @confirm="confirmEducationMate"
|
||
@cancel="showEducationMate = false"></u-picker>
|
||
<u-picker :show="showMonthlyPayMate" :columns="dict.yearlyPayMate" @confirm="confirmMonthlyPayMate"
|
||
@cancel="showMonthlyPayMate = false"></u-picker>
|
||
|
||
<u-picker :show="showVocationMate" :columns="dict.positionMate" @confirm="confirmVocationMate"
|
||
@cancel="showVocationMate = false"></u-picker>
|
||
<u-picker :show="showHasHouseMate" :columns="dict.hasHouseMate" @confirm="confirmHasHouseMate"
|
||
@cancel="showHasHouseMate = false"></u-picker>
|
||
<u-picker :show="showHasCarMate" :columns="dict.hasCarMate" @confirm="confirmHasCarMate"
|
||
@cancel="showHasCarMate = false"></u-picker>
|
||
<u-picker :show="showMaritalStatusMate" :columns="dict.maritalStatusMate"
|
||
@confirm="confirmMaritalStatusMate" @cancel="showMaritalStatusMate = false"></u-picker>
|
||
<u-picker :show="showHasChildrenMate" :columns="dict.hasChildrenMate" @confirm="confirmHasChildrenMate"
|
||
@cancel="showHasChildrenMate = false"></u-picker>
|
||
<u-picker :show="showConstellation" :columns="dict.constellation" @confirm="confirmConstellation"
|
||
@cancel="showConstellation = false"></u-picker>
|
||
<view class="" style="height: 300rpx;">
|
||
|
||
</view>
|
||
<!-- 操作按钮 -->
|
||
<view class="footer">
|
||
<view class="btn-wrapper">
|
||
<u-button text="开始搜索" color="linear-gradient(to bottom, #010002, #681752)" shape="circle"
|
||
@click="onSearch"></u-button>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 地址选择器 -->
|
||
<liu-customize-sel ref="area" @change="chooseSuccess"> </liu-customize-sel>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import * as UserProfileApi from '@/api/love-user-profile.js'
|
||
import * as DictApi from '@/api/dict.js'
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
list: [],
|
||
dict: [],
|
||
page: 0,
|
||
regionMate: '不限',
|
||
where: {
|
||
ageMate: '不限',
|
||
regionMate: '不限',
|
||
heightMate: '不限',
|
||
shapeMate: '不限',
|
||
educationMate: '不限',
|
||
monthlyPayMate: '不限',
|
||
vocationMate: '不限',
|
||
hasHouseMate: '不限',
|
||
hasCarMate: '不限',
|
||
maritalStatusMate: '不限',
|
||
hasChildrenMate: '不限',
|
||
constellation: '不限',
|
||
random: true
|
||
},
|
||
showRegion: false,
|
||
showAgeMate: false,
|
||
showRegionMate: false,
|
||
showHeightMate: false,
|
||
showShapeMate: false,
|
||
showEducationMate: false,
|
||
showMonthlyPayMate: false,
|
||
showVocationMate: false,
|
||
showHasHouseMate: false,
|
||
showHasCarMate: false,
|
||
showMaritalStatusMate: false,
|
||
showHasChildrenMate: false,
|
||
showConstellation: false,
|
||
// regionsData: [
|
||
// ['广西壮族自治区'],
|
||
// ['南宁市', '北海市', '贵港市']
|
||
// ],
|
||
// defaultIndex: ['广西壮族自治区','南宁市'],
|
||
// 控制onShow事件是否刷新订单列表
|
||
canReset: false,
|
||
disabled: false,
|
||
// citys: [],
|
||
// columns: [],
|
||
// columnData: []
|
||
actionStyle: {
|
||
background: '#8b004c',
|
||
color: '#ffffff',
|
||
padding: '12rpx 16rpx',
|
||
borderRadius: '50rpx'
|
||
},
|
||
}
|
||
},
|
||
|
||
/**
|
||
* 生命周期函数--监听页面加载
|
||
*/
|
||
onLoad(options) {
|
||
if(!uni.getStorageSync("userId") ||uni.getStorageSync("userId") == 1101){
|
||
uni.redirectTo({
|
||
url: "/pages/login/index"
|
||
})
|
||
}
|
||
this.getDict()
|
||
// this.getCitysData()
|
||
// 获取历史搜索
|
||
// this.historySearch = this.getHistorySearch()
|
||
},
|
||
|
||
// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
|
||
onReady() {
|
||
this.$refs.uForm.setRules(this.rules)
|
||
// 微信小程序需要用此写法
|
||
this.$refs.datetimePicker.setFormatter(this.formatter)
|
||
},
|
||
|
||
methods: {
|
||
getDict() {
|
||
DictApi.listDictionary().then(res => {
|
||
this.dict = res.data;
|
||
// this.dict.ageMate[0].unshift('不限')
|
||
// this.dict.heightMate[0].unshift('不限')
|
||
// this.dict.shapeMate[0].unshift('不限')
|
||
// this.dict.positionMate[0].unshift('不限')
|
||
// this.dict.monthlyPayMate[0].unshift('不限')
|
||
// this.dict.hasCarMate[0].unshift('不限')
|
||
// this.dict.hasChildrenMate[0].unshift('不限')
|
||
// this.dict.hasHouseMate[0].unshift('不限')
|
||
// this.dict.educationMate[0].unshift('不限')
|
||
// this.dict.maritalStatusMate[0].unshift('不限')
|
||
// this.dict.constellation[0].unshift('不限')
|
||
})
|
||
},
|
||
// 读取城市数据
|
||
// getCitysData() {
|
||
// const app = this
|
||
// const { defaultIndex } = this
|
||
// var province = []
|
||
// var city = []
|
||
// var region = []
|
||
// uni.request({
|
||
// url: 'https://file.wsdns.cn/json/city.js',
|
||
// success(result) {
|
||
// console.log("result: ", result);
|
||
// const list = result.data
|
||
// app.citys = list
|
||
|
||
// // 默认选中
|
||
// list.map((d, i) => {
|
||
// // 收集省份
|
||
// province.push(d.label)
|
||
|
||
// if (i == 0) {
|
||
// console.log(d);
|
||
// // 收集城市
|
||
// d.children.map((d1,i1) => {
|
||
// console.log("d1: ", d1);
|
||
// console.log("i1: ",i1);
|
||
// city.push(d1.label)
|
||
// // 收集地区
|
||
// if (i1 == 0) {
|
||
// d1.children.map(d2 => {
|
||
// console.log("d2: ",d2);
|
||
// region.push(d2.label)
|
||
// })
|
||
// }
|
||
// })
|
||
// }
|
||
// })
|
||
// app.columns = [province,city,region]
|
||
// }
|
||
// })
|
||
// },
|
||
// changeHandler(e) {
|
||
// const app = this
|
||
// const {
|
||
// columnIndex,
|
||
// value,
|
||
// values, // values为当前变化列的数组内容
|
||
// index,
|
||
// // 微信小程序无法将picker实例传出来，只能通过ref操作
|
||
// picker = this.$refs.uPicker
|
||
// } = e
|
||
// // 当第一列值发生变化时，变化第二列(后一列)对应的选项
|
||
// console.log("columnIndex: ",columnIndex);
|
||
// console.log("e: ",e);
|
||
// var city = []
|
||
// if (columnIndex === 0) {
|
||
// console.log("this.citys[index]: ",app.citys[index].children);
|
||
// app.citys[index].children.map(d => {
|
||
// city.push(d.label)
|
||
// })
|
||
// console.log("city: ",city);
|
||
// // picker为选择器this实例，变化第二列对应的选项
|
||
// picker.setColumnValues(1, city)
|
||
// }
|
||
// },
|
||
// //地址选择成功
|
||
// confirm(e) {
|
||
// const data = e.value
|
||
// this.regionMate = `${data[0].label} ${data[1].label} ${data[2].label}`
|
||
// this.where.cityMate = data[1].label
|
||
// this.showRegion = false
|
||
// },
|
||
/**
|
||
* 获取历史搜索
|
||
*/
|
||
getHistorySearch() {
|
||
return uni.getStorageSync(HISTORY_SEARCH) || []
|
||
},
|
||
|
||
onSearch() {
|
||
if (this.where.ageMate == '不限') {
|
||
this.where.ageMate = undefined
|
||
}
|
||
if (this.where.regionMate == '不限') {
|
||
this.where.regionMate = undefined
|
||
}
|
||
if (this.where.heightMate == '不限') {
|
||
this.where.heightMate = undefined
|
||
}
|
||
if (this.where.shapeMate == '不限') {
|
||
this.where.shapeMate = undefined
|
||
}
|
||
if (this.where.educationMate == '不限') {
|
||
this.where.educationMate = undefined
|
||
}
|
||
if (this.where.monthlyPayMate == '不限') {
|
||
this.where.monthlyPayMate = undefined
|
||
}
|
||
if (this.where.hasHouseMate == '不限') {
|
||
this.where.hasHouseMate = undefined
|
||
}
|
||
if (this.where.vocationMate == '不限') {
|
||
this.where.vocationMate = undefined
|
||
}
|
||
if (this.where.constellation == '不限') {
|
||
this.where.constellation = undefined
|
||
}
|
||
if (this.where.hasChildrenMate == '不限') {
|
||
this.where.hasChildrenMate = undefined
|
||
}
|
||
if (this.where.maritalStatusMate == '不限') {
|
||
this.where.maritalStatusMate = undefined
|
||
}
|
||
if (this.where.hasCarMate == '不限') {
|
||
this.where.hasCarMate = undefined
|
||
}
|
||
this.where.recommend = true
|
||
this.$push('/sub_pages/member/member', this.where)
|
||
},
|
||
|
||
onArea() {
|
||
this.$refs.area.open()
|
||
},
|
||
//地址选择成功
|
||
chooseSuccess(e) {
|
||
const data = e.value
|
||
this.regionMate = `${data[0].label} ${data[1].label}`
|
||
this.where.cityMate = data[1].label
|
||
},
|
||
|
||
/**
|
||
* 记录历史搜索
|
||
*/
|
||
setHistory(searchValue) {
|
||
const data = this.getHistorySearch()
|
||
const index = data.indexOf(searchValue)
|
||
index > -1 && data.splice(index, 1)
|
||
data.unshift(searchValue)
|
||
this.historySearch = data
|
||
this.onUpdateStorage()
|
||
},
|
||
|
||
/**
|
||
* 清空最近搜索记录
|
||
*/
|
||
clearSearch() {
|
||
this.historySearch = []
|
||
this.onUpdateStorage()
|
||
},
|
||
|
||
/**
|
||
* 更新历史搜索缓存
|
||
* @param {Object} data
|
||
*/
|
||
onUpdateStorage(data) {
|
||
uni.setStorageSync(HISTORY_SEARCH, this.historySearch)
|
||
},
|
||
// 选择年龄
|
||
confirmAgeMate(e) {
|
||
this.where.ageMate = e.value[0]
|
||
this.showAgeMate = false
|
||
},
|
||
confirmRegionMate(e) {
|
||
this.where.regionMate = e.value[0] + ' ' + e.value[1]
|
||
this.showRegionMate = false
|
||
},
|
||
confirmHeightMate(e) {
|
||
this.where.heightMate = e.value[0]
|
||
this.showHeightMate = false
|
||
},
|
||
confirmShapeMate(e) {
|
||
this.where.shapeMate = e.value[0]
|
||
this.showShapeMate = false
|
||
},
|
||
confirmEducationMate(e) {
|
||
this.where.educationMate = e.value[0]
|
||
this.showEducationMate = false
|
||
},
|
||
confirmMonthlyPayMate(e) {
|
||
this.where.monthlyPayMate = e.value[0]
|
||
this.showMonthlyPayMate = false
|
||
},
|
||
confirmVocationMate(e) {
|
||
this.where.vocationMate = e.value[0]
|
||
this.showVocationMate = false
|
||
},
|
||
confirmHasHouseMate(e) {
|
||
this.where.hasHouseMate = e.value[0]
|
||
this.showHasHouseMate = false
|
||
},
|
||
confirmMaritalStatusMate(e) {
|
||
this.where.maritalStatusMate = e.value[0]
|
||
this.showMaritalStatusMate = false
|
||
},
|
||
confirmHasCarMate(e) {
|
||
this.where.hasCarMate = e.value[0]
|
||
this.showHasCarMate = false
|
||
},
|
||
confirmHasChildrenMate(e) {
|
||
this.where.hasChildrenMate = e.value[0]
|
||
this.showHasChildrenMate = false
|
||
},
|
||
confirmConstellation(e) {
|
||
this.where.constellation = e.value[0]
|
||
this.showConstellation = false
|
||
},
|
||
|
||
/**
|
||
* 跳转到最近搜索
|
||
*/
|
||
handleQuick(search) {
|
||
this.$navTo('pages/goods/list', {
|
||
search
|
||
})
|
||
}
|
||
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
page {
|
||
background: #f7f7f7;
|
||
}
|
||
|
||
.container {
|
||
// padding: 40rpx;
|
||
width: 700rpx;
|
||
margin: 20rpx auto;
|
||
height: 90vh;
|
||
}
|
||
|
||
.search-wrapper {
|
||
display: flex;
|
||
height: 64rpx;
|
||
padding: 20rpx;
|
||
background-color: #FFFFFF;
|
||
}
|
||
|
||
.base {
|
||
margin-top: 40rpx;
|
||
background-color: #ffffff;
|
||
}
|
||
|
||
.senior {
|
||
margin-top: 40rpx;
|
||
background-color: #ffffff;
|
||
}
|
||
|
||
// 搜索输入框
|
||
.search-input {
|
||
width: 80%;
|
||
background: #fff;
|
||
height: 72rpx;
|
||
line-height: 72rpx;
|
||
border-radius: 10rpx 0 0 10rpx;
|
||
box-sizing: border-box;
|
||
overflow: hidden;
|
||
|
||
.search-input-wrapper {
|
||
display: flex;
|
||
|
||
.left {
|
||
display: flex;
|
||
width: 60rpx;
|
||
justify-content: center;
|
||
align-items: center;
|
||
|
||
.search-icon {
|
||
display: block;
|
||
color: #b4b4b4;
|
||
font-size: 28rpx;
|
||
}
|
||
|
||
}
|
||
|
||
.right {
|
||
flex: 1;
|
||
|
||
input {
|
||
font-size: 28rpx;
|
||
height: 72rpx;
|
||
line-height: 72rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.input-placeholder {
|
||
color: #aba9a9;
|
||
}
|
||
}
|
||
|
||
}
|
||
}
|
||
}
|
||
|
||
// 搜索按钮
|
||
.search-button {
|
||
width: 20%;
|
||
box-sizing: border-box;
|
||
|
||
.button {
|
||
height: 64rpx;
|
||
font-size: 28rpx;
|
||
border-radius: 0 10rpx 10rpx 0;
|
||
background: $main-bg;
|
||
color: $main-text;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
}
|
||
|
||
|
||
// 最近搜索
|
||
.history {
|
||
.title {
|
||
font-weight: bold;
|
||
}
|
||
.his-head {
|
||
display: flex;
|
||
justify-content: flex-start;
|
||
align-items: center;
|
||
font-size: 30rpx;
|
||
padding: 50rpx 0 20rpx 0;
|
||
color: #681752;
|
||
|
||
.line {
|
||
background-color: #681752;
|
||
width: 8rpx;
|
||
height: 30rpx;
|
||
margin-right: 12rpx;
|
||
}
|
||
|
||
.icon {
|
||
float: right;
|
||
}
|
||
|
||
}
|
||
|
||
.his-list {
|
||
padding: 20rpx 0;
|
||
overflow: hidden;
|
||
|
||
.his-item {
|
||
width: 33.3%;
|
||
float: left;
|
||
padding: 10rpx;
|
||
box-sizing: border-box;
|
||
|
||
.history-button {
|
||
text-align: center;
|
||
padding: 14rpx;
|
||
line-height: 30rpx;
|
||
border-radius: 100rpx;
|
||
background: #fff;
|
||
font-size: 26rpx;
|
||
border: 1rpx solid #efefef;
|
||
overflow: hidden;
|
||
white-space: nowrap;
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
}
|
||
|
||
}
|
||
|
||
/deep/.u-cell__body{
|
||
padding: 10px 0 10px 10px !important;
|
||
}
|
||
}
|
||
|
||
/* 底部操作栏 */
|
||
|
||
.footer {
|
||
margin-top: 50rpx;
|
||
padding-bottom: 50rpx;
|
||
position: fixed;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
background-color: #f3f3f3;
|
||
padding-top: 20rpx;
|
||
|
||
.btn-wrapper {
|
||
width: 360rpx;
|
||
margin: auto;
|
||
// display: flex;
|
||
// align-items: center;
|
||
padding: 0 20rpx;
|
||
}
|
||
|
||
.btn-item {
|
||
flex: 1;
|
||
font-size: 28rpx;
|
||
height: 86rpx;
|
||
color: #fff;
|
||
border-radius: 50rpx;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
|
||
.btn-item-wechat {
|
||
background: #0ba90b;
|
||
margin-bottom: 26rpx;
|
||
}
|
||
|
||
.btn-item-main {
|
||
background: linear-gradient(to right, $main-bg, $main-bg2);
|
||
color: $main-text;
|
||
|
||
// 禁用按钮
|
||
&.disabled {
|
||
opacity: 0.6;
|
||
}
|
||
}
|
||
|
||
}
|
||
</style>
|