第一次提交

2023-08-04 13:14:48 +08:00
commit 1b923e5cff
1030 changed files with 128016 additions and 0 deletions
--- a/sub_pages/search/index.vue
+++ b/sub_pages/search/index.vue
@@ -0,0 +1,490 @@
+<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>