소스 검색

停车规则页面修改和优化找车位首次图标未放大问题

zaijin 3 년 전
부모
커밋
1d10e712d2
4개의 변경된 파일52개의 추가작업 그리고 35개의 파일을 삭제
  1. 20 1
      pages/chargeStandard/chargeStandard.scss
  2. 14 7
      pages/chargeStandard/chargeStandard.vue
  3. 8 5
      pages/parkingLists/parkingLists.scss
  4. 10 22
      pages/parkingLists/parkingLists.vue

+ 20 - 1
pages/chargeStandard/chargeStandard.scss

@@ -51,7 +51,26 @@
 			font-family: PingFangSC-Regular, PingFang SC;
 		}
 	}
-	.charge-rules {
+	.charge-rule-list-header {
+		display: flex;
+		flex-direction: row;
+		justify-content: space-between;
+		.charge-time {
+			display: flex;
+			flex-direction: row;
+			font-size: 24rpx;
+			line-height: 40rpx;
+			color: #999999;
+			view:first-child {
+				margin-right: 40rpx;
+			}
+			text {
+				color: #008CFF;
+				margin-left: 10rpx;
+			}
+		}
+	}
+	.charge-rules-box {
 		display: flex;
 		flex-direction: row;
 		justify-content: space-between;

+ 14 - 7
pages/chargeStandard/chargeStandard.vue

@@ -2,11 +2,11 @@
 	<!-- 收费标准 -->
 	<view class="charge">
 		<view class="charge-rules-container" v-for="(item, index) in chargeRulesInfo" :key="index">
-			<view class="charge-list">
-				<!-- <view class="charge-list-item">
+			<!-- <view class="charge-list">
+				<view class="charge-list-item">
 					<view>2.5元/小时</view>
 					<view>收费标准</view>
-				</view> -->
+				</view>
 				<view class="charge-list-item">
 					<view>{{item.freeTime}}分钟内</view>
 					<view>免费时长</view>
@@ -15,13 +15,20 @@
 					<view>{{item.topAmt}}元</view>
 					<view>封顶金额</view>
 				</view>
-			</view>
+			</view> -->
 			<view class="charge-rules-list">
-				<view class="charge-type">
+				<view class="charge-rule-list-header">
+					<view class="charge-type">
 						<text v-if="item.feePeriod ==1">节假日规则</text>
 						<text v-else>非节假日规则</text>
 					</view>
-					<view class="charge-rules" v-for="(type, tIndex) in item.list" :key="tIndex">
+					<view class="charge-time">
+						<view>免费时长<text>{{item.freeTime}}分钟内</text></view>
+						<view>封顶金额<text>{{item.topAmt}}元</text></view>
+					</view>
+				</view>
+				<view class="charge-rules" v-for="(type, tIndex) in item.list" :key="tIndex">
+					<view v-if="type.list[0].amt || type.list[1].amt" class="charge-rules-box">
 						<view v-if="type.vehicleType == 0">小车</view>
 						<view v-if="type.vehicleType == 1">大车</view>
 						<view v-if="type.vehicleType == 2">超大型车</view>
@@ -35,7 +42,7 @@
 							</view>
 						</view>
 					</view>
-				
+				</view>
 			</view>
 		</view>
 		<view class="charge-instructions">

+ 8 - 5
pages/parkingLists/parkingLists.scss

@@ -122,16 +122,19 @@
 	text-align: center;
 	margin-top: 30rpx;
 	color: #A4A4A4;
-	font-size: 20rpx;
+	font-size: 24rpx;
 }
 .parking-address-list {
 	position: absolute;
 	z-index: 99;
-	width: calc(100% - 28rpx);
-	left: 14rpx;
+	width: 100%;
+	padding: 32rpx 28rpx;
 	bottom: 0;
 	max-height: 65vh;
 	overflow-y: scroll;
+	// background-image: linear-gradient(top, rgba(246, 245, 255, 0) 0%, rgba(246, 245, 255, 1) 100%);
+	background-image: url('./../../static/img/parking-search-list-bg.png');
+	background-size: 100% 100%;
 }
 .parking-address-list-item {
 	background-color: #fff;
@@ -177,8 +180,8 @@
 }
 .swiper-item-button button {
 	width: 48%;
-	height: 64rpx;
-	line-height: 64rpx;
+	height: 70rpx;
+	line-height: 70rpx;
 	font-size: 30rpx;
 }
 .swiper-item-button button:first-child {

+ 10 - 22
pages/parkingLists/parkingLists.vue

@@ -1,7 +1,8 @@
 <template>
 	<view class="parking">
 		<view class="loading" v-show="loading">
-			<u-loading size="36" mode="flower"></u-loading>
+			<!-- <u-loading size="36" mode="flower"></u-loading> -->
+			<u-loadmore status="loading" icon-type="flower" :load-text="{loading: '正在定位中...',}" />
 		</view>
 		<view class="parking-header">
 			<u-search placeholder="搜索停车场" v-model="searchContent" :show-action="false" @change="searchInputChange"></u-search>
@@ -112,7 +113,6 @@
 				searchContent: '',
 				page_map:'',
 				loading: false,
-				// id: 0, //使用 marker点击事件 需要填写id
 				latitude: 26.64969,
 				longitude: 106.636453,
 				scale: 16,
@@ -120,20 +120,7 @@
 					latitude: 26.64969,
 					longitude: 106.636453,
 				},
-				covers: [
-					// {
-					// 	latitude: 26.597864,
-					// 	longitude: 106.72947,
-					// 	id: '0',
-					// 	iconPath: require('./../../static/img/parking-icon.png')
-					// },
-					// {
-					// 	latitude: 26.497864,
-					// 	longitude: 106.72947,
-					// 	id: '1',
-					// 	iconPath: require('./../../static/img/parking-icon.png')
-					// }
-				],
+				covers: [],
 				// 附近列表是否显示
 				nearParkingFlag: false,
 				// 轮播选中
@@ -156,7 +143,7 @@
 		onShow() {
 			this.isShowSearchParking = false
 			this.isShowParkingDetail = false
-			this.getNearRoadsl()
+			// this.getNearRoadsl()
 		},
 		methods:{
 			/* 
@@ -174,7 +161,7 @@
 			getLocation(){
 				let that = this;
 				console.log("请求定位")
-				// that.loading = true
+				that.loading = true
 				uni.getLocation({
 					type:"gcj02",
 					success : function (res) {
@@ -223,7 +210,7 @@
 					const nearParkingList = [] // 附近停车场列表
 					this.covers = []
 					res.data.forEach((item, index, arr)=>{
-						if(item.latitude&&item.longitude){
+						if(item.latitude && item.longitude){
 							nearParkingList.push(item)
 							let marker = {
 								latitude: item.latitude,
@@ -233,15 +220,16 @@
 								width: 20,
 								height: 25
 							}
+							// 选中经纬度图标变大
 							if (lon && lat) {
 								if (lon === item.longitude && lat === item.latitude) {
 									marker.width = 40
 									marker.height = 50
 								}
 							} else {
-								if (index === 1) {
-									marker.width = 40
-									marker.height = 50
+								if (this.covers.length > 0) {
+									this.covers[0].width = 40
+									this.covers[0].height = 50
 								}
 							}
 							this.covers.push(marker)