491 lines
12 KiB
Vue
Executable File
491 lines
12 KiB
Vue
Executable File
<template>
|
||
<view class="search">
|
||
<view class="container">
|
||
<view class="search-wrapper">
|
||
<u-search :showAction="true" actionText="搜索" :animation="true" v-model="where.keywords"
|
||
@search="onSearch"></u-search>
|
||
</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.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.monthlyPayMate" @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="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: '不限',
|
||
},
|
||
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: [
|
||
['广西壮族自治区'],
|
||
['南宁市', '北海市', '贵港市']
|
||
],
|
||
// 控制onShow事件是否刷新订单列表
|
||
canReset: false,
|
||
disabled: false,
|
||
}
|
||
},
|
||
|
||
/**
|
||
* 生命周期函数--监听页面加载
|
||
*/
|
||
onLoad(options) {
|
||
this.getDict()
|
||
// 获取历史搜索
|
||
// 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('不限')
|
||
})
|
||
},
|
||
/**
|
||
* 获取历史搜索
|
||
*/
|
||
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.$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} ${data[2].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: 40rpx auto;
|
||
height: 90vh;
|
||
}
|
||
|
||
.search-wrapper {
|
||
display: flex;
|
||
height: 64rpx;
|
||
}
|
||
|
||
.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 {
|
||
|
||
.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;
|
||
}
|
||
|
||
}
|
||
|
||
}
|
||
}
|
||
|
||
/* 底部操作栏 */
|
||
|
||
.footer {
|
||
margin-top: 50rpx;
|
||
padding-bottom: 50rpx;
|
||
|
||
.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>
|