列表

pages/guidecar/guidecarList.vue

@@ -8,7 +8,6 @@
 		<view class="topB" style="height: 20px;align-items: center;">
 			<span style='font-size: 11px;color: #1C1E1F;'>{{intervalDay}}</span>
 			<image src="../../static/images/sanjiao.png" mode="aspectFill" style="width: 55px;height: 4px;"></image>
-			
 		</view>
 		<view class="topB" @click="">
 			<span class='ztext'>{{ETime.month}}月{{ETime.day}}日</span>
@@ -17,7 +16,13 @@
 						
 	  </div>
 	 <view style="padding: 10px 0 0; background: #fff;width: 100%;border-bottom: 1px solid #E2E2E2;">
-		  <u-tabs :list="list" :is-scroll="false" :current="current" @change="change" :active-color="mainColor"></u-tabs>
+		  <!-- <u-tabs :list="list" :is-scroll="false" :current="current" @change="change" :active-color="mainColor"></u-tabs> -->
+		  <wyb-drop-down 
+		   ref="dropDown"
+		   :options="options"
+		   @select="onItemSelect">
+		      <!-- 自定义模式开启时，这里可以放内容 -->
+		  </wyb-drop-down>
 	  </view>
 	  <div style='display: flex;width: 100%;'>
 		  <div class="left-slider">
@@ -90,9 +95,11 @@
 
 <script>
 import sidebar from "../../components/sidebar/index.vue";
+import wybDropDown from './wyb-drop-down/wyb-drop-down.vue'
 export default {
    components: {
 		sidebar,
+		wybDropDown
     },
   data() {
     return {
@@ -119,10 +126,19 @@ export default {
 		  CarBrandId:0,
 		  RegionIds:0
 	  },
+	  
+	     options: [{
+				  header: '综合排序',
+				  contents: ['不限','综合升序', '综合降序', '价格升序', '价格降序','评分升序','评分降序']
+			  }, {
+				  header: '品牌',
+				  contents: []
+			  }],
 	  list: [{name: '综合排序'}, {name: '品牌'}],   
 	  STime:'',
 	  ETime:'',
 	  intervalDay:'',
+	  BrandList:[],//品牌列表
 	  g: [],
 	  page_count: 1,
 	  status: "loadmore",
@@ -133,9 +149,7 @@ export default {
 	  },
     };
   },
-  components: {
-    sidebar,
-  },
+
   onLoad(options) {
 		if(options && options.item){
 		  let item = JSON.parse(decodeURIComponent(options.item))
@@ -164,6 +178,7 @@ export default {
 	}
 	this.getCarClassList()
 	this.init();
+	this.getGuideCarBrandList()
   },
   created() {
     this.mainColor = this.$uiConfig.mainColor;
@@ -197,6 +212,25 @@ export default {
 		  	}
 		  );
 	  },
+getGuideCarBrandList(){
+	this.request2(
+	  {
+	    url: "/api/AppletGuideCar/GetGuideCarBrandList",
+	    data: {},
+	  },
+	  (res) => {
+				this.BrandList = res.data;
+				let obj  = {Name: "全部", ID: 0}
+				this.BrandList.unshift(obj) 
+				console.log(this.BrandList)
+				let list=[];
+				this.BrandList.forEach(x=>{
+					list.push(x.Name)
+				})
+				this.options[1].contents = list
+	  }
+	);
+},
    getCarClassList(){
 	   this.request2(
 	     {
@@ -221,8 +255,18 @@ export default {
 	   console.log(val)
 	   this.current= val
    },
-   onItemSelect(){
-	   
+   onItemSelect(val){
+	   console.log(val)
+	   if(val.headerIndex ==0){
+		   this.msg.OrderBy = val.contentIndex
+	   }
+	   if(val.headerIndex ==1){
+		   this.msg.CarBrandId = this.BrandList[val.contentIndex].ID
+	   }
+	   this.msg.pageIndex=1;
+	   this.g = [];
+	   this.init()
+	   this.$refs.dropDown.close() // 关闭
    },
    lower(e) {
    	

pages/guidecar/wyb-drop-down/iconfont.css

+@font-face {font-family: "iconfont";
+  src: url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAMoAAsAAAAABxwAAALZAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDHAqBYIFNATYCJAMQCwoABCAFhG0HPRs0BsgusG3YowCKZblG/A248I8FOyAe+Oye987uPHySFUCVQo0KTFJCRZnz739uc6TZ6xcSFkmmSfPs/p8faiVYyJAysa8jwJbrp83gaCY/j/s8l9O7q4ACmd/Ochtr0Z5+1AswDijQsQZt4QI6QW6pXcSBwSv/1nYCCqqqsdC7M5oKSRHpFxDmudwQkr2QKEbZvCA7MzUKh2Tkk93JOxzUvw//aBnyJDIpMnTQjLYt1H4v9UeQN/18GCcJYQJ3dgYpGiMSZs2mppCFiJ8qyI6iLfLyEn7P/b7mjxDH1smHZfQvjyCRErJIZWHQ2kun/J7jNIHfTzQJf4gVUvghxnw/0x4DfV5lXaBHlFVi7aO0/bxWdv6+cPdRmdlrbzn+qfO6PVN6994+P/v5PWXZ++LdvWUs9gsXP7QrtrfB91P9aflbn1u37JV5vmPHmbH/a+bW/pculdBKpMfTy/pJ27c1d3s3Ha40b4Xnb7c73PMn7hxVM+r+psb222nvS698xqM+qUXITmlvaakgkG5KhgsC6ePkJarZcby5/0ws1vn5QhH8iDY/1tYIZoAvBViBWAWwLpYq4ogxV3N5FYzKghIJClIX6MxR0m9XGMuAawnyyhwI5lRpkcqrTUZeY2QU0hpZed1QUCP9ZhdSyhKyEAugoe0OguIeIlHUK6SKe09G3q/IKOs/ZBUPKQoaEUotWUjdMDvda4XGBm2YcoTZFkWMuTZpUz1Gvg2MVVelBXNcrd0otGjafJjtYoSrK0Ys3fHKsg2DGSsKoa+zGwYBwaIVeWhtCrM2m0W1WbMZc3cqTKVQSOtlBRk2kA1McQRms5AIk8030qPvjyFuK2BYrTAW0nNoZc1tH7TQVHMA2dVHIMav3LLUDlexzAYDZlghIdDX8aKApghYNN/JgywbBbMOJBaqmnmNZkD1heeNIYZboCByVgxJSEMMGdlpW5fTVplG+0he5RqCAAAAAA==') format('woff2')
+}
+
+.iconfont {
+  font-family: "iconfont" !important;
+  margin-top: 5rpx;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-selected:before {
+  content: "\e613";
+}
+
+.icon-down:before {
+  font-weight: bold;
+  content: "\e67a";
+}
+
+.icon-down-fill:before {
+  content: "\e701";
+}
+

pages/guidecar/wyb-drop-down/wyb-drop-down.vue

+<template>
+	<view 
+	 class="wyb-drop-down-box"
+	 :style="{
+		 '--duration': duration + 'ms',
+		 '--autoContentTop': autoContentTop}">
+		
+		<view class="wyb-drop-down-container" @tap.stop.prevent @touchmove.stop.prevent>
+			<view 
+			 class="wyb-drop-down-header"
+			 :style="{
+				 zIndex: zIndex,
+				 backgroundColor: bgColor.header}">
+				<view 
+				 class="wyb-drop-down-header-item"
+				 v-for="(item,index) in options"
+				 :key="item.header"
+				 @tap.stop="onHeaderTap(index)"
+				 :style="{fontSize: fontSize.header + 'rpx'}">
+					<text
+					 class="wyb-drop-down-header-item-label"
+					 :style="{
+						 fontWeight: headerActiveIndex === index && dropOver && activeWeight ? 'bold' : 'normal',
+						 color: headerActiveIndex === index && dropOver ? activeColor: defaultColor}">{{item.header}}</text>
+					<text
+					 v-if="dropIcon === 'fill'"
+					 class="iconfont icon-down-fill wyb-drop-down-header-item-icon"
+					 :class="[headerActiveIndex === index && dropOver ? 'wyb-drop-down-header-item-icon-active' : '']"
+					 :style="{
+						 fontSize: fontSize.header - 5 + 'rpx',
+						 color: headerActiveIndex === index && dropOver ? activeColor: defaultColor}" />
+					<text
+					 v-if="dropIcon==='line'"
+					 class="iconfont icon-down wyb-drop-down-header-item-icon"
+					 :class="[headerActiveIndex === index && dropOver ? 'wyb-drop-down-header-item-icon-active' : '']"
+					 :style="{
+						 fontSize: fontSize.header - 5 + 'rpx',
+						 transformOrigin: '50% 45%',
+						 color: headerActiveIndex === index && dropOver ? activeColor: defaultColor}" />
+					<view class="wyb-drop-down-vline" v-if="index !== options.length - 1" />
+				</view>
+			</view>
+			
+			<scroll-view 
+			 v-if="dropDown"
+			 class="wyb-drop-down-content" 
+			 :class="[dropOver ? 'wyb-drop-down-content-active' : '']"
+			 :scroll-y="scroll"
+			 :enable-flex="true"
+			 :scroll-anchoring="true"
+			 :style="{
+				 zIndex: zIndex - 1,
+				 fontSize: fontSize.content + 'rpx',
+				 backgroundColor: bgColor.content,
+				 borderBottomLeftRadius: radius + 'px',
+				 borderBottomRightRadius: radius + 'px',
+				 minHeight: minHeight + 'rpx',
+				 height: autoHeight ? 'auto' : minHeight + 'rpx',
+				 maxHeight: autoHeight && maxHeight ? maxHeight + 'rpx' : 'auto'}">
+				 <view class="wyb-drop-down-content-box" v-for="(item,index) in options" :key="contentBoxKey(index)">
+				 	<view v-if="item['custom'] && headerActiveIndex === index && dropDown" class="wyb-drop-down-content-slot">
+						<slot></slot>
+					</view>
+					<view
+					 v-if="!item['custom'] && headerActiveIndex === index && dropDown"
+					 class="wyb-drop-down-content-item"
+					 v-for="(content,zIndex) in item['contents']"
+					 :key="content"
+					 @tap.stop="onContentItemsTap(zIndex)">
+						<text
+						 class="wyb-drop-down-content-item-label"
+						 :style="{color: contentActiveIndexList[headerActiveIndex]['index'] === zIndex && dropOver ? activeColor: defaultColor}">
+							{{content}}
+						</text>
+						<text
+						 v-if="contentActiveIndexList[headerActiveIndex]['index'] === zIndex && dropOver"
+						 :style="{color: activeColor}"
+						 class="iconfont icon-selected wyb-drop-down-content-item-icon" />
+						<view class="wyb-drop-down-line" v-if="zIndex !== options[headerActiveIndex].contents.length - 1" />
+					</view>
+				 </view>
+			</scroll-view>
+		</view>
+		
+		<view
+		 v-if="dropDown"
+		 class="wyb-drop-down-mask"
+		 :class="[dropOver ? 'wyb-drop-down-mask-active' : '']"
+		 @tap.stop="close"
+		 @touchmove.stop.prevent
+		 :style="{
+			 zIndex: zIndex - 2,
+			 height: screenHeight + 'px',
+			 backgroundColor: 'rgba(0, 0, 0, ' + maskAlpha + ')'}" />
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				dropDown: false,
+				dropOver: false,
+				duration: 100,
+				contents: this.options[0].contents || [0],
+				headerActiveIndex: 0,
+				contentActiveIndexList: []
+			}
+		},
+		computed: {
+			autoContentTop() {
+				return `${44 + this.rpxToPx(100)}px`
+			},
+			screenHeight() {
+				return uni.getSystemInfoSync().screenHeight
+			},
+			screenWidth() {
+				return uni.getSystemInfoSync().screenWidth
+			},
+			contentBoxKey() {
+				return function(index) {
+					return `option${index}`
+				}
+			}
+		},
+		props: {
+			options: {
+				type: Array,
+				default() {
+					return [{
+						header: 'A',
+						contents: ['1', '2']
+					}]
+				}
+			},
+			defaultIndexList: {
+				type: Array,
+				default() {
+					return []
+				}
+			},
+			autoHeight: {
+				type: Boolean,
+				default: true
+			},
+			minHeight: {
+				type: [String, Number],
+				default: 10
+			},
+			maxHeight: {
+				type: [String, Number],
+				default: 600
+			},
+			scroll: {
+				type: Boolean,
+				default: true
+			},
+			radius: {
+				type: [String, Number],
+				default: '0'
+			},
+			activeColor: {
+				type: String,
+				default: '#2979ff'
+			},
+			activeWeight: {
+				type: Boolean,
+				default: true
+			},
+			defaultColor: {
+				type: String,
+				default: '#333'
+			},
+			bgColor: {
+				type: Object,
+				default() {
+					return {
+						header: '#fff',
+						content: '#fff'
+					}
+				}
+			},
+			dropIcon: {
+				type: String,
+				default: 'fill'
+			},
+			fontSize: {
+				type: Object,
+				default() {
+					return {
+						header: 30,
+						content: 30
+					}
+				}
+			},
+			maskAlpha: {
+				type: [String, Number],
+				default: '0.5'
+			},
+			zIndex: {
+				type: Number,
+				default: 500
+			}
+		},
+		mounted() {
+			if (this.defaultIndexList.length === 0) {
+				this.options.forEach((item, index) => {
+					if (!item.custom) {
+						this.contentActiveIndexList.push({headerIndex: index, index: 0})
+					} else {
+						this.contentActiveIndexList.push({headerIndex: index, custom: true})
+					}
+				})
+			} else {
+				let i = 0
+				this.options.forEach((item, index) => {
+					if (!item.custom) {
+						this.contentActiveIndexList.push([...this.defaultIndexList][i])
+						i++
+					} else {
+						this.contentActiveIndexList.push({headerIndex: index, custom: true})
+					}
+				})
+			}
+		},
+		methods: {
+			onHeaderTap(index) {
+				let item = this.options[index]
+				if (Object.is(this.headerActiveIndex, index) && this.dropOver) {
+					this.close()
+				} else {
+					this.headerActiveIndex = index
+					if (item.custom) {
+						this.$emit('change', {
+							headerIndex: index,
+							header: this.options[index].header
+						})
+					}
+					this.dropDown = true
+					this.$nextTick(() => {
+						this.dropOver = true
+						this.$emit('show')
+					})
+				}
+			},
+			onContentItemsTap(index) {
+				this.contentActiveIndexList[this.headerActiveIndex]['index'] = index
+				this.$forceUpdate()
+				let event = {
+					headerIndex: this.headerActiveIndex,
+					header: this.options[this.headerActiveIndex]['header'],
+					contentIndex: index,
+					content: this.options[this.headerActiveIndex]['contents'][index],
+					contentActiveIndexList: this.contentActiveIndexList
+				}
+				this.$emit('select', event)
+			},
+			close() {
+				this.dropOver = false
+				setTimeout(() => {
+					this.dropDown = false
+					this.$emit('hide')
+				}, this.duration)
+			},
+			rpxToPx(rpx) {
+				return rpx / 750 * this.screenWidth
+			}
+		}
+	}
+</script>
+
+<style>
+	@import './iconfont.css';
+	.wyb-drop-down-mask {
+		position: fixed;
+		top: 44px;
+		/* #ifndef H5 */
+		top: 55px;
+		/* #endif */
+		left: 0;
+		bottom: 0;
+		right: 0;
+		opacity: 0;
+		transition: opacity var(--duration);
+		z-index: 498;
+	}
+	
+	.wyb-drop-down-mask-active {
+		opacity: 1;
+		transition: opacity var(--duration);
+	}
+	
+	.wyb-drop-down-header {
+		position: fixed;
+		top: 44px;
+		/* #ifndef H5 */
+		top: 55px;
+		/* #endif */
+		left: 0;
+		right: 0;
+		display: flex;
+		flex-direction: row;
+		background-color: #fff;
+		z-index: 500;
+	}
+	
+	.wyb-drop-down-header-item {
+		flex: 1;
+		height: 100rpx;
+		font-size: 30rpx;
+		border-bottom: 1px solid #eee;
+		display: flex;
+		flex-direction: row;
+		align-items: center;
+		justify-content: center;
+		position: relative;
+	}
+	
+	.wyb-drop-down-header-item-label {
+		display: flex;
+		flex-direction: row;
+		align-items: center;
+		justify-content: flex-end;
+	}
+	
+	.wyb-drop-down-header-item-icon {
+		margin-left: 20rpx;
+		display: flex;
+		flex-direction: row;
+		align-items: center;
+		justify-content: flex-start;
+		transform-origin: 50% 40%;
+		transform: rotate(0);
+		transition: transform var(--duration);
+	}
+	
+	.wyb-drop-down-header-item-icon-active {
+		transform: rotate(180deg);
+		transition: transform var(--duration);
+	}
+	
+	.wyb-drop-down-content {
+		position: fixed;
+		top: var(--autoContentTop);
+		/* #ifndef H5 */
+		top: 105px;
+		/* #endif */
+		left: 0;
+		right: 0;
+		z-index: 499;
+		display: flex;
+		flex-direction: column;
+		align-items: flex-start;
+		background-color: #fff;
+		/* transform: translateY(-100%); */
+		transition: transform var(--duration);
+	}
+	
+	.wyb-drop-down-content-active {
+		transform: translateY(0);
+		transition: transform var(--duration);
+	}
+	
+	.wyb-drop-down-content-item {
+		width: 100%;
+		height: 100rpx;
+		font-size: 30rpx;
+		display: flex;
+		flex-direction: column;
+		position: relative;
+	}
+	
+	.wyb-drop-down-content-item-label {
+		width: 90%;
+		height: 100%;
+		display: flex;
+		flex-direction: row;
+		align-items: center;
+		justify-content: flex-start;
+		padding-left: 50rpx;
+	}
+	
+	.wyb-drop-down-content-item-icon {
+		position: absolute;
+		top: 50%;
+		right: 40rpx;
+		font-size: 40rpx;
+		transform: translateY(-50%);
+	}
+	
+	.wyb-drop-down-content-box {
+		width: 100%;
+	}
+	
+	.wyb-drop-down-content-slot {
+		width: 100%;
+		height: 100%;
+	}
+	
+	.wyb-drop-down-vline {
+		width: 1px;
+		height: 40rpx;
+		background-color: #eee;
+		position: absolute;
+		right: 0;
+	}
+
+	.wyb-drop-down-line {
+		width: 100%;
+		height: 1px;
+		background-color: #eee;
+		margin-left: 50rpx;
+	}
+</style>