Merge pull request '罗世杰：完成了Dropdown组件和两个page，初始化了主页导航' (#32) from lj into master

Reviewed-on: http://git.feashow.cn/odjbin/city-store-transfer/pulls/32

components/DropDown/DropDown.vue

@@ -1,50 +1,114 @@
 <template>
 	<view class="container">
-		<view 
+		<view class="tabs-bg"/>
-			class="title-view"
+		<view class="tabs">
-			v-for="item in title"
+			<view
-		>
+				class="title-view"
-			<text>{{item}}</text>
+				v-for="(item, index) in title"
-			<view class="arrow">
+				:key="item"
-				<u-image src="/static/dropdown/dp_icon_lxia.png" width="14rpx" height="11rpx"/>
+				@click="changeActiveIndex(index)"
+				:class="{isActive: activeIndex === index}"
+			>
+				<text>{{item}}</text>
+				<view class="arrow" v-if="activeIndex !== index">
+					<u-image src="/static/dropdown/dp_icon_lxia.png" width="14rpx" height="11rpx"/>
+				</view>
+				<view class="arrow" v-if="activeIndex === index">
+					<u-image src="/static/dropdown/dp_icon_hlxia.png" width="14rpx" height="11rpx"/>
+				</view>
+				
 			</view>
 		</view>
-		
+		<view class="item-border">
+			<DropDownItem v-if="activeIndex !== -1" :list="tablist"/>
+		</view>
 	</view>
 </template>
 
 <script>
+	/**
+	 * @property {Array} postlist   传递一个二维数组
+	 */
+	import DropDownItem from "./DropDownItem.vue"
 	export default {
 		name:"DropDown",
+		components: {
+			DropDownItem
+		},
+		props: {
+			postlist: {
+				type:Array,
+				default(){
+					return	[['全部', '餐饮美食', '百货超市', '美容美发'],['区域1', '区域2', '区域3', '区域4'],['100m2','200m2','300m2'],['附近的', '最新发布的', '其他']]
+				}
+			}
+		},
 		data() {
 			return {
-				title: ['行业','区域','面积','筛选']
+				title: ['行业','区域','面积','筛选'],
+				activeIndex: -1,
+				// postlist: [['全部', '餐饮美食', '百货超市', '美容美发'],['区域1', '区域2', '区域3', '区域4'],['100m2','200m2','300m2'],['附近的', '最新发布的', '其他']]
 			};
-		}
+		},
+		computed: {
+			tablist: function() {
+				return this.postlist[this.activeIndex]
+			}
+		},
+		methods: {
+			changeActiveIndex(index){
+				if(this.activeIndex === index){
+					this.activeIndex = -1;
+				}else 
+					this.activeIndex = index
+			}
+		},
+		
 	}
 </script>
 
 <style lang="scss" scoped>
-.container{
+	.isActive{
-	height: 100rpx;
+		color: #CC3333;
-	background-color: #fff;
+	}
-	display: flex;
+	.container{
-	justify-content: space-around;
+		margin-top: 10px;
-	.title-view {
+		position: relative;
-		display: flex;
+		.tabs-bg {
-		>text {
+			position: absolute;
-			font-size: 14px;
+			background-color: $uni-bg-color-grey;
+			height: 120rpx;
+			width: 100%;
+			transform: translateY(-20rpx);
+			z-index: 2;
+		}
+		.tabs{
+			background-color: #fff;
+			height: 100rpx;
+			display: flex;
+			justify-content: space-around;
+			position: relative;
+			z-index: 3;
+		}
+		.title-view {
+			display: flex;
+			>text {
+				font-size: 14px;
+				display: flex;
+				flex-direction: column;
+				justify-content: center;
+			}
+		}
+		.arrow {
+			margin-left: 8rpx;
 			display: flex;
 			flex-direction: column;
 			justify-content: center;
 		}
 	}
-	.arrow {
+	.item-border{
-		margin-left: 8rpx;
+		position: absolute;
-		display: flex;
+		width: 100%;
-		flex-direction: column;
+		height: 100%;
-		justify-content: center;
 	}
-}
-	
 </style>

components/DropDown/DropDownItem.vue

@@ -1,8 +1,69 @@
 <template>
+	<view class="root">
+		<view class="mask"/>
+		<view class="list-container">
+			<view 
+				class="item"
+				v-for="(item,index) in list"
+			>
+				<view></view>
+				<text class="list-text">{{item}}</text>
+			</view>
+		</view>
+	</view>
 </template>
 
 <script>
+	export default {
+		props: {
+			list: {
+				type: Array,
+				default(){
+					return	[]
+				}
+			}
+		}
+	}
 </script>
 
-<style>
+<style lang="scss" scoped>
+	.mask{
+	    position: fixed;
+	    top: 0;
+	    left: 0;
+	    width: 100%;
+	    height: 100%;
+	    background-color: #000;
+		-webkit-backdrop-filter:saturate(150%) blur(8px);
+		background-color:rgba(0,0,0,.3);
+		z-index: 20;
+	}
+	.root {
+		position: absolute;
+		top: 0;
+		width: 100%;
+		
+		font-size: 28rpx;
+		background-color: #fff;
+		position: absolute;
+		z-index: 1;
+		.list-container {
+			position: relative;
+			background-color: #fff;
+			width: 100%;
+			z-index: 21;
+			
+			border-radius: 0px 0px 20px 20px;
+			.item {
+				border-top: 1px solid #EEEEEE;
+				font-weight: 500;
+				padding-left: 61rpx;
+				height: 80rpx;
+				
+				display: flex;
+				flex-direction: column;
+				justify-content: center;
+			}
+		}
+	}
 </style>

components/InputAndSwiper/InputAndSwiper.vue

@@ -1,5 +1,5 @@
 <template>
-	<view>
+	<view class="input-and-swiper-root">
 		<view class="search-box">
 			<view class="search-box-input">
 				<u-input placeholder="热门搜索" placeholder-style="color: #969696" prefixIcon="search"
@@ -133,6 +133,10 @@
 </script>
 
 <style lang="scss">
+	.input-and-swiper-root {
+		position: relative;
+		z-index: 2;
+	}
 	.search-box {
 		position: absolute;
 		z-index: 1;

components/ShowShopListItem/ShowShopListItem.vue

@@ -1,7 +1,7 @@
 <template>
 	<view class="list-border">
-		<view class="list-container">
+		<view class="list-container" @click="enterDetail()">
-			<view class="shop-list-img">
+			<view class="shop-list-img" >
 				<u-image width="80px" height="80px" :src="shopInfo.imageUrl" radius="8px"></u-image>
 			</view>
 			<view class="text-area">
@@ -87,7 +87,10 @@
 
 <script>
 	/**
-	 * @property shopInfo {Object}  传入商铺对象数据
+	 * @property {Object}   shopInfo          传入商铺对象数据
+	 * @property {Number}   showStyle        展示商铺的样式类型(0为首页默认)
+	 * @property {Boolean}  isADshow         是否显示推广广告
+	 * @property {Boolean}  isEdit           是否显示编辑和删除
 	 */
 	export default {
 		props: {
@@ -135,6 +138,11 @@
 			},
 			handleDel(shopid) {
 				this.$emit('delItem', shopid)
+			},
+			enterDetail(){
+				uni.navigateTo({
+					url: '/pages/detail/detail'
+				})
 			}
 		}
 	}

components/publishSlide/publishSlide.vue

@@ -60,7 +60,7 @@
 	}
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 	.mask{
 	           position: fixed;
 	           top: 0;

pages.json

@@ -105,6 +105,46 @@
 				"enablePullDownRefresh": false
 			}
 
+		},
+		{
+			"path" : "pages/index/NavBarPages/zrxx/zrxx",
+			"style" : 
+			{
+				"navigationBarTitleText" : "转让信息",
+				"enablePullDownRefresh" : false
+			}
+		},
+		{
+			"path" : "pages/index/NavBarPages/zdxx/zdxx",
+			"style" : 
+			{
+				"navigationBarTitleText" : "找店信息",
+				"enablePullDownRefresh" : false
+			}
+		},
+		{
+			"path" : "pages/index/NavBarPages/czxx/czxx",
+			"style" : 
+			{
+				"navigationBarTitleText" : "出租信息",
+				"enablePullDownRefresh" : false
+			}
+		},
+		{
+			"path" : "pages/index/NavBarPages/xmzs/xmzs",
+			"style" : 
+			{
+				"navigationBarTitleText" : "项目招商",
+				"enablePullDownRefresh" : false
+			}
+		},
+		{
+			"path" : "pages/index/NavBarPages/cjal/cjal",
+			"style" : 
+			{
+				"navigationBarTitleText" : "成交案例",
+				"enablePullDownRefresh" : false
+			}
 		}
 	],
 	"tabBar": {

pages/index/HomeMainContent/HomeNavCard.vue

@@ -15,31 +15,38 @@
 			return {
 				navItems: [{
 						icon: "/static/navbar/sy_icon_zrxx.png",
-						text: "转让信息"
+						text: "转让信息",
+						url: "/pages/index/NavBarPages/zrxx/zrxx"
 					},
 					{
 						icon: "/static/navbar/sy_icon_zdxx.png",
-						text: "找店信息"
+						text: "找店信息",
+						url: "/pages/index/NavBarPages/zdxx/zdxx"
 					},
 					{
 						icon: "/static/navbar/sy_icon_czxx.png",
-						text: "出租信息"
+						text: "出租信息",
+						url: "/pages/index/NavBarPages/czxx/czxx"
 					},
 					{
 						icon: "/static/navbar/sy_icon_xmzs.png",
-						text: "项目招商"
+						text: "项目招商",
+						url: "/pages/index/NavBarPages/xmzs/xmzs"
 					},
 					{
 						icon: "/static/navbar/sy_icon_cjal.png",
-						text: "成交案例"
+						text: "成交案例",
+						url: "/pages/index/NavBarPages/cjal/cjal"
 					},
 					{
 						icon: "/static/navbar/sy_icon_spdt.png",
-						text: "速配地图"
+						text: "速配地图",
+						url: '/pages/index/map/map'
 					},
 					{
 						icon: "/static/navbar/sy_icon_zmhb.png",
-						text: "招募合伙"
+						text: "招募合伙",
+						url:'/pages/Partnerships/Partnerships'
 					},
 					{
 						icon: "/static/navbar/sy_icon_lxwm.png",
@@ -51,12 +58,10 @@
 		},
 		methods: {
 			handleItemClick(index) {
-				// 在这里处理点击事件，并使用下标值
+				// 跳转页面
-				console.log(`项目 ${index} 被点击了`);
+				if (index >= 0 && index <= 6) {
-				// 或者执行其他需要的操作
-				if (index == 5) {
 					uni.navigateTo({
-						url: '/pages/index/map/map'
+						url: this.navItems[index].url
 					})
 				}
 			}

pages/index/NavBarPages/cjal/cjal.vue

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

pages/index/NavBarPages/czxx/czxx.vue

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

pages/index/NavBarPages/xmzs/xmzs.vue

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

pages/index/NavBarPages/zdxx/zdxx.vue

@@ -0,0 +1,64 @@
+<template>
+	<view>
+		<view class="search-box">
+			<view class="search-box-input">
+				<u-input placeholder="热门搜索" placeholder-style="color: #969696" prefixIcon="search"
+					prefixIconStyle="font-size: 24px;color: #909399;" border="true">
+				</u-input>
+			</view>
+		</view>
+		<view>
+			<DropDown></DropDown>
+		</view>
+		<view>
+			<SearchShopList :showStyle="1"/>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				
+			}
+		},
+		methods: {
+			
+		}
+	}
+</script>
+
+<style lang="scss">
+	page{
+		background-color: #F8F8F8;
+	}
+	.search-box {
+		position: relative;
+		z-index: 1;
+		left: 50%;
+		width: 84.6%;
+		transform: translateX(-50%);
+	
+		.search-box-input {
+			border-radius: 12rpx;
+			margin-top: 20rpx;
+			background-color: #fff;
+			opacity: 0.85;
+	
+			.u-border {
+				border: none;
+	
+				.u-input__content {
+					height: 62rpx;
+					border-radius: 12rpx;
+					background-color: #fff;
+	
+					.u-input__content__field-wrapper__field {
+						font-size: 26rpx !important;
+					}
+				}
+			}
+		}
+	}
+</style>

pages/index/NavBarPages/zrxx/zrxx.vue

@@ -0,0 +1,64 @@
+<template>
+	<view>
+		<view class="search-box">
+			<view class="search-box-input">
+				<u-input placeholder="热门搜索" placeholder-style="color: #969696" prefixIcon="search"
+					prefixIconStyle="font-size: 24px;color: #909399;" border="true">
+				</u-input>
+			</view>
+		</view>
+		<view>
+			<DropDown></DropDown>
+		</view>
+		<view>
+			<ShowShopList :showStyle="1"></ShowShopList>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				
+			}
+		},
+		methods: {
+			
+		}
+	}
+</script>
+
+<style lang="scss">
+	page{
+		background-color: #F8F8F8;
+	}
+	.search-box {
+		position: relative;
+		z-index: 1;
+		left: 50%;
+		width: 84.6%;
+		transform: translateX(-50%);
+	
+		.search-box-input {
+			border-radius: 12rpx;
+			margin-top: 20rpx;
+			background-color: #fff;
+			opacity: 0.85;
+	
+			.u-border {
+				border: none;
+	
+				.u-input__content {
+					height: 62rpx;
+					border-radius: 12rpx;
+					background-color: #fff;
+	
+					.u-input__content__field-wrapper__field {
+						font-size: 26rpx !important;
+					}
+				}
+			}
+		}
+	}
+</style>

pages/shopAddress/shopAddress.vue

@@ -2,17 +2,28 @@
 	<view class="root">
 		<InputAndSwiper></InputAndSwiper>
 		
-		<view style="margin-top: 10px;">
+		<view>
-			<DropDown></DropDown>
+			<view class="dropdown-bug">
+				
+			</view>
+			<view class="marginLR10">
+				<DropDown></DropDown>
+			</view>
+			<view class="marginLR10">
+				<SearchShopList :showStyle="1"/>
+			</view>
 		</view>
 		
-		<SearchShopList :showStyle="1"></SearchShopList>
 		<TabBar :current-page="3"></TabBar>
 	</view>
 </template>
 
 <script>
+	import DropDownItem from "@/components/DropDown/DropDownItem.vue"
 	export default {
+		components: {
+			DropDownItem
+		},
 		data() {
 			return {
 				
@@ -24,11 +35,23 @@
 	}
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 	page {
 		background-color: $uni-bg-color-grey;
 	}
 	.root{
+		position: relative;
+	}
+	.dropdown-bug {
+		position: absolute;
+		background-color: $uni-bg-color-grey;
+		height: 120rpx;
+		width: 100%;
+		transform: translateY(-20rpx);
+		z-index: 2;
+	}
+	.marginLR10{
 		margin: 0 10px;
 	}
+	
 </style>

pages/shopTransfer/shopTransfer.vue

@@ -2,43 +2,31 @@
 	<view class="root">
 		<InputAndSwiper></InputAndSwiper>
 		
-		<view style="margin-top: 10px;">
+		<view>
-			<DropDown></DropDown>
+			<view class="dropdown-bug">
+				
+			</view>
+			<view class="marginLR10">
+				<DropDown></DropDown>
+			</view>
+			<view class="marginLR10">
+				<ShowShopList :showStyle="1"></ShowShopList>
+			</view>
 		</view>
 		
-		<ShowShopList :showStyle="1"></ShowShopList>
 		<TabBar :current-page="1"></TabBar>
 	</view>
 </template>
 
 <script>
+	import DropDownItem from "@/components/DropDown/DropDownItem.vue"
 	export default {
+		components: {
+			DropDownItem
+		},
 		data() {
 			return {
-				value1: 1,
+				
-								value2: 2,
-								options1: [{
-										label: '默认排序',
-										value: 1,
-									},
-									{
-										label: '距离优先',
-										value: 2,
-									},
-									{
-										label: '价格优先',
-										value: 3,
-									}
-								],
-								options2: [{
-										label: '去冰',
-										value: 1,
-									},
-									{
-										label: '加冰',
-										value: 2,
-									},
-								],
 			}
 		},
 		methods: {
@@ -47,11 +35,22 @@
 	}
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 	page {
 		background-color: $uni-bg-color-grey;
 	}
-	.root {
+	.root{
+		position: relative;
+	}
+	.dropdown-bug {
+		position: absolute;
+		background-color: $uni-bg-color-grey;
+		height: 120rpx;
+		width: 100%;
+		transform: translateY(-20rpx);
+		z-index: 2;
+	}
+	.marginLR10{
 		margin: 0 10px;
 	}