上传

App.vue

@@ -28,4 +28,14 @@
 			padding: 10rpx !important;
 		}
 	}
+	
+	.screenSearch{
+		.uv-drop-down{
+			background: transparent !important;
+			border: none !important;
+			// .uv-text__value{
+			// 	color: #fff !important;
+			// }
+		}
+	}
 </style>

components/base/navbar.vue

@@ -2,33 +2,33 @@
 <!-- 	<view class="navbar"
 	:style="{backgroundColor : bgColor}"> -->
 		<view class="title"
-		:style="{backgroundColor : bgColor}">
+		:style="{backgroundColor : bgColor,color}">
 			<view class="left">
 				
 				<uv-icon name="home"
 				v-if="leftClick && length == 1"
 				@click="toHome"
-				color="#333" size="46rpx"></uv-icon>
+				:color="color"  size="46rpx"></uv-icon>
 				
 				<uv-icon name="arrow-left"
 				v-else-if="leftClick"
 				@click="$emit('leftClick')"
-				color="#333" size="46rpx"></uv-icon>
+				:color="color"  size="46rpx"></uv-icon>
 			</view>
 			<view>{{ title }}</view>
 			<view class="icon">
 				
 				<uv-icon name="search"
 				v-if="isSearch"
-				color="#333" size="58rpx"></uv-icon>
+				:color="color"  size="58rpx"></uv-icon>
 				
-				<uv-icon name="plus-circle" color="#333" 
+				<uv-icon name="plus-circle" :color="color"  
 				v-if="isPlus"
 				@click="plusCircleShow = true"
 				size="46rpx" style="margin-left: 30rpx;"></uv-icon>
 				
 				<view v-if="moreClick" style="margin-left: 30rpx;">
-					<uv-icon name="more-dot-fill" color="#333"
+					<uv-icon name="more-dot-fill" :color="color" 
 					v-if="!moreText"
 					@click="moreClick()"
 					size="46rpx"></uv-icon>
@@ -70,6 +70,9 @@
 			},
 			bgColor : {
 				default : '#fff'
+			},
+			color : {
+				default : '#333'
 			}
 		},
 		created() {

pages.json

@@ -121,7 +121,8 @@
 			{
 				"path": "scenicSpot/scenicSpotList",
 				"style": {
-					"enablePullDownRefresh" : true
+					"enablePullDownRefresh" : true,
+					"navigationBarTextStyle": "white"
 				}
 			},
 			{

pages_order/components/screen/screenSearch.vue

@@ -0,0 +1,309 @@
+<template>
+	<view class="screenSearch">
+		
+		<view class="sx">
+			<uv-drop-down ref="dropDown"
+			sign="dropDown_1" 
+				text-active-color="#fff"
+				text-color="#fff"
+				:extra-icon="{name:'arrow-down-fill',color:'#fff',size:'26rpx'}"
+				:extra-active-icon="{name:'arrow-up-fill',color:'#fff',size:'26rpx'}" 
+				:defaultValue="defaultValue"
+				:custom-style="{padding: '0 30rpx', color : '#fff'}" 
+				@click="selectMenu">
+			
+				<uv-drop-down-item 
+				v-if="isArea"
+				name="area" type="2" 
+				:label="dropItem('area').label" 
+				:value="dropItem('area').value">
+				</uv-drop-down-item>
+			
+				<uv-drop-down-item 
+				v-if="isMaxPrice"
+				name="maxPrice" type="2" 
+				:label="dropItem('maxPrice').label" 
+				:value="dropItem('maxPrice').value">
+				</uv-drop-down-item>
+			
+			
+				
+			</uv-drop-down>
+			
+			<uv-drop-down-popup 
+			sign="dropDown_1" 
+			:click-overlay-on-close="true" 
+			:currentDropItem="currentDropItem"
+			@clickItem="clickItem" 
+			@popupChange="change"></uv-drop-down-popup>
+		</view>
+		
+	</view>
+</template>
+
+<script>
+	import {
+		mapState,
+	} from 'vuex'
+	export default {
+		props : {
+			isArea : {
+				default : true
+			},
+			isMaxPrice : {},
+		},
+		data() {
+			return {
+				// 表示value等于这些值，就属于默认值
+				defaultValue: [0, 'all', 'all'],
+				// 筛选结果
+				result: [],
+				activeName: 'area',
+				area: {
+					label: '区域',
+					value: 0,
+					activeIndex: 0,
+					color: '#333',
+					activeColor: '#3796F8',
+					child: [
+						{
+							label: '全部',
+							value: 0,
+						},
+					]
+				},
+				maxPrice: {
+					label: '最高价',
+					value: 'all',
+					activeIndex: 0,
+					color: '#333',
+					activeColor: '#3796F8',
+					child: [
+						{
+							label: '全部',
+							value: 'all'
+						},
+						{
+							label: '500以下',
+							value: 500
+						},
+						{
+							label: '1000以下',
+							value: 1000
+						},
+						{
+							label: '1500以下',
+							value: 1500
+						},
+						{
+							label: '2000以下',
+							value: 2000
+						},
+						{
+							label: '2500以下',
+							value: 2500
+						},
+						{
+							label: '3000以下',
+							value: 3000
+						},
+						{
+							label: '5000以下',
+							value: 5000
+						},
+						{
+							label: '8000以下',
+							value: 8000
+						},
+					]
+				},
+				list : [
+					// {
+					// 	title : '您目前所属的年龄段',
+					// 	tag : ['18岁～35岁', '35岁～45岁', '45岁～50岁', '50岁以上'],
+					// 	index : 0,
+					// },
+					{
+						title : '您希望从事的工种',
+						tag : ['电工', '焊工', '叉车', '其他'],
+						index : 0,
+					},
+					{
+						title : '您希望从事的工作性质',
+						tag : ['全职', '临时工',],
+						index : 0,
+					},
+				]
+			}
+		},
+		computed : {
+			dropItem(name) {
+				return (name) => {
+					const result = {};
+					const find = this.result.find(item => item.name === name);
+					if (find) {
+						result.label = find.label;
+						result.value = find.value;
+					} else {
+						result.label = this[name].label;
+						result.value = this[name].value;
+					}
+					return result;
+				}
+			},
+			// 获取当前下拉筛选项
+			currentDropItem() {
+				return this[this.activeName];
+			},
+			...mapState(['cityList']),
+		},
+		mounted() {
+			//价格
+			// this.jobTypeList.forEach(n => {
+			// 	this.maxPrice.child.push({
+			// 		label: n.name,
+			// 		value: n.id,
+			// 	})
+			// })
+			
+			
+			// 地区
+			this.cityList.forEach(n => {
+				this.area.child.push({
+					label: n.name,
+					value: n.id,
+				})
+			})
+		},
+		methods: {
+			clickTag(item, i){
+				console.log(i);
+				item.index = i
+			},
+
+			change(e) {},
+			/**
+			 * 点击每个筛选项回调
+			 * @param {Object} e { name, active, type } = e
+			 */
+			selectMenu(e) {
+				const {
+					name,
+					active,
+					type
+				} = e;
+				
+				
+				this.activeName = name;
+				
+				if(type == 1){
+					this.$refs.popup.open()
+					return
+				}
+
+				const find = this.result.find(item => item.name == this.activeName);
+				if (find) {
+					const findIndex = this[this.activeName]
+						.child.findIndex(item => item.label == find.label && item
+							.value == find.value);
+					this[this.activeName].activeIndex = findIndex;
+
+				} else {
+					this[this.activeName].activeIndex = 0;
+				}
+			},
+			/**
+			 * 点击菜单回调处理
+			 * @param {Object} item 选中项 { label,value } = e
+			 */
+			clickItem(e) {
+				// 下面有重新赋值，所以用let
+				let {
+					label,
+					value
+				} = e;
+				const findIndex = this.result.findIndex(item => item.name == this.activeName);
+				if (this.defaultValue.indexOf(value) > -1 && this[this.activeName].label) {
+					label = this[this.activeName].label;
+				}
+				// 已经存在筛选项
+				if (findIndex > -1) {
+					this.$set(this.result, findIndex, {
+						name: this.activeName,
+						label,
+						value
+					})
+				} else {
+					this.result.push({
+						name: this.activeName,
+						label,
+						value
+					});
+				}
+				
+				this.result = this.result.filter(item => this.defaultValue.indexOf(item.value) == -1);
+
+
+				this.$emit('clickItem', this.result)
+			},
+			submit(){
+				
+			},
+		}
+	}
+</script>
+
+<style scoped lang="scss">
+.screenSearch{
+	margin-top: 10rpx;
+	.sx{
+		// width: 160rpx;
+	}
+	.popup{
+		width: 80vw;
+		padding: 40rpx;
+		.list{
+			.item{
+				margin-top: 20rpx;
+				.title{
+					font-weight: 900;
+					font-size: 30rpx;
+				}
+				.tagList{
+					display: flex;
+					flex-wrap: wrap;
+					padding: 10rpx 0;
+					view{
+						background: rgba($uni-color, 0.1);
+						padding: 10rpx 20rpx;
+						margin: 10rpx;
+						border-radius: 10rpx;
+						font-size: 26rpx;
+					}
+					.act{
+						color: #fff;
+						background: $uni-color;
+					}
+				}
+			}
+		}
+		.btn {
+			display: flex;
+			justify-content: center;
+			width: 100%;
+			margin-top: 20rpx;
+			.a {
+				display: flex;
+				justify-content: center;
+				align-items: center;
+				width: 90%;
+				color: #FFF;
+				background-color: $uni-color;
+				border: 1px solid rgba($uni-color, 0.2);
+				border-radius: 100rpx;
+				font-size: 30rpx;
+			}
+		}
+	}
+}
+</style>

pages_order/components/screen/selectArea.vue

@@ -0,0 +1,22 @@
+<template>
+	<view>
+		
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				
+			}
+		},
+		methods: {
+			
+		}
+	}
+</script>
+
+<style>
+
+</style>

pages_order/scenicSpot/scenicSpotDetail.vue

@@ -43,33 +43,27 @@
 					地址：{{ detail.address }}
 				</view>
 			</view> -->
-			<view class="ditu">
-				<view class="weizhi">
-					湖南省永州市大石桥镇
-				</view>
-				<addressSpot :address="detail.address" :latitude="detail.latitude" :longitude="detail.longitude" />
-			</view>
-
+			<addressSpot :address="detail.address" :latitude="detail.latitude" :longitude="detail.longitude" />
 
 
-			<!-- <view class="content">
-				<uv-parse :content="detail.details"></uv-parse>
-			</view> -->
-			<view class="convenient">
-				<view class="Evaluate ">
-					景区评论
-				</view>
-
-				<view class="Details">
-					景区详情
-				</view>
-				<view class="Gohere">
-					去这里
-				</view>
-			</view>
+			
+		</view>
+		
+		<view style="background-color: #fff;margin-top: 20rpx;">
+			<uv-tabs :list="tags"
+			:activeStyle="{color : '#000', fontWeight : 900}"
+			lineColor="#5baaff"
+			lineHeight="8rpx"
+			lineWidth="50rpx"
+			:scrollable="false"
+			@click="tabsClick"></uv-tabs>
+		</view>
 
+		<view class="content" v-if="tagIndex == 1">
+			<uv-parse :content="detail.details"></uv-parse>
 		</view>
-		<commentList @getData="getData" :list="list" :params="params" />
+		
+		<commentList v-if="tagIndex == 0" @getData="getData" :list="list" :params="params" />
 	</view>
 </template>
 
@@ -91,7 +85,15 @@
 					name: '',
 				},
 				id: 0,
-
+				tags : [
+					{
+						name : '景区评论'
+					},
+					{
+						name : '景区详情'
+					},
+				],
+				tagIndex : 0,
 			}
 		},
 		onLoad(options) {
@@ -118,6 +120,9 @@
 			}
 		},
 		methods: {
+			tabsClick({index}){
+				this.tagIndex = index
+			},
 			click(item) {
 				console.log('item', item);
 			},
@@ -223,38 +228,14 @@
 			.controls {
 				margin-top: 30rpx;
 			}
-
-			.content {
-				margin-top: 30rpx;
-				font-size: 28rpx;
-			}
 		}
-		.convenient {
-			display: flex;
-			justify-content: space-between;
-			padding: 10rpx 20rpx;
-			margin-top: 20rpx;
-
-			.Evaluate:hover {
-				text-decoration: underline;
-				text-decoration-color: $uni-color;
-				text-decoration-thickness: 8rpx;
-				text-decoration-widht: 100rpx;
-			}
-
-			.Details:hover {
-				text-decoration: underline;
-				text-decoration-color: $uni-color;
-				text-decoration-thickness: 8rpx;
-				text-decoration-widht: 100rpx;
-			}
 
-			.Gohere:hover {
-				text-decoration: underline;
-				text-decoration-color: $uni-color;
-				text-decoration-thickness: 8rpx;
-				text-decoration-widht: 100rpx;
-			}
+		.content {
+			padding: 30rpx;
+			margin-top: 30rpx;
+			font-size: 28rpx;
+			background-color: #fff;
+			padding-bottom: 100rpx;
 		}
 	}
 </style>

pages_order/scenicSpot/scenicSpotList.vue

@@ -1,20 +1,23 @@
 <template>
 	<view class="page pageList">
 		
-		<navbar title="景点" leftClick @leftClick="$utils.navigateBack" />
+		<navbar title="景点" bgColor="#5baaff" color="#fff" leftClick @leftClick="$utils.navigateBack" />
 		
 		<view class="top-bg"></view>
 		
-		<view style="padding: 10rpx 30rpx;">
+		<view style="padding: 10rpx 30rpx 0 30rpx;">
 			<uv-search bgColor="#fff" @search="getData" :showAction="false" searchIconSize="30rpx"
 				placeholder="请输入搜索关键字..." v-model="queryParams.title"></uv-search>
+			
+			<screenSearch @clickItem="clickItem" />
 		</view>
 		
-		<view class="">
+		<!-- <view class="">
 			<screenRen @clickItem="clickItem" />
-		</view>
+		</view> -->
 		
 		<view class="waterfall" v-for="(item,index) in list" 
+		:key="index"
 		 @click="$utils.navigateTo('/pages_order/scenicSpot/scenicSpotDetail?id=' + item.id)">
 			<view class="images">
 				
@@ -94,14 +97,15 @@
 
 <script>
 	import mixinsList from '@/mixins/list.js'
-	import screenRen from '../components/screen/screenRen.vue'
+	// import screenRen from '../components/screen/screenRen.vue'
+	import screenSearch from '../components/screen/screenSearch.vue'
 	import scenicSpotItem from '../components/list/scenicSpot/scenicSpotItem.vue'
 	import { guid } from '@/uni_modules/uv-ui-tools/libs/function/index.js'
 	export default {
 		mixins: [mixinsList],
 		components: {
 			scenicSpotItem,
-			screenRen,
+			screenSearch,
 		},
 		data() {
 			return {
@@ -156,8 +160,9 @@
 	}
 	.top-bg{
 		position: absolute;
-		height: 400rpx;
-		// background: linear-gradient(blue, pink);
+		height: 500rpx;
+		width: 100%;
+		background: linear-gradient($uni-color, #fff);
 	}
 	.waterfall{
 		margin: 50rpx 0rpx;
@@ -183,8 +188,6 @@
 				justify-content: center;
 				align-items: center;
 				border-bottom-right-radius: 30rpx;
-			
-				
 			}
 			
 		}