chenrui 4 anni fa
parent
commit
8e484761c3

+ 69 - 53
pages/index/index.vue

@@ -24,30 +24,36 @@
 		</view>
 		<!-- 网点 -->
 		<view class="storeList">
-			 <u-section title="附近的网点" :right="false" line-color="#01c9b2"></u-section>
+			 <u-section title="附近的回收机" :right="false" line-color="#01c9b2" class="store-section"></u-section>
 			 <view class="stores-box">
-				<view class="stores-item" v-for="item in stationDataList" @click="viewStore(item)">
-					<view class="s-name">
-						<view>{{ item.name }}</view>
-					</view>
-					<view class="s-address">
-						<view>
-							<text>{{ item.provinceName }}{{ item.cityName }}{{ item.districtName }}{{ item.address }}</text>
-						</view>
-						<view>
-							<u-icon name="map-fill" color="#01c9b2" size="30"></u-icon>
-							{{ item.distanct.distance ? (item.distanct.distance/1000).toFixed(1) : 0 }}KM
-						</view>
-					</view>
-					<view class="s-time">
-						<view>
-							营业时间:
-							<text v-for="(tItem, tInd) in item.deliveryTimeRuleItemList" :key="tInd">
-								{{ tItem.openTime }} - {{ tItem.closeTime }}{{ tInd == item.deliveryTimeRuleItemList.length - 1 ? '' : ',' }}
-							</text>
-						</view>
-					</view>
-				</view>
+			 	<view class="stores-item" v-for="item in stationDataList" @click="viewStore(item)">
+			 		<view class="item-con">
+			 			<image src="/static/md-icon.png" class="item-icon"></image>
+			 			<view class="s-name item-main">{{ item.name }}</view>
+			 		</view>
+			 		<view class="item-con">
+			 			<image src="/static/dz-icon.png" class="item-icon"></image>
+			 			<view class="s-address item-main">
+			 				<view>{{ item.provinceName }}{{ item.cityName }}{{ item.districtName }}{{ item.address }}</view>
+			 				<view>
+			 					<u-icon name="map-fill" color="#01c9b2" size="30"></u-icon>
+			 					{{ item.distanct.distance ? (item.distanct.distance / 1000).toFixed(1) : 0 }}KM
+			 					<u-icon name="arrow-right" color="#999" size="20"></u-icon>
+			 				</view>
+			 			</view>
+			 		</view>
+			 		<view class="item-con">
+			 			<image src="/static/time-icon.png" class="item-icon"></image>
+			 			<view class="s-time item-main">
+			 				<view>
+			 					营业时间:
+			 					<text v-for="(tItem, tInd) in item.deliveryTimeRuleItemList" :key="tInd">
+			 						{{ tItem.openTime }} - {{ tItem.closeTime }}{{ tInd == item.deliveryTimeRuleItemList.length - 1 ? '' : ',' }}
+			 					</text>
+			 				</view>
+			 			</view>
+			 		</view>
+			 	</view>
 			 </view>
 		</view>
 	</view>
@@ -237,51 +243,61 @@
 
 <style lang="scss" scoped>
 	.content {
-		background: url(../../static/topBg.png) no-repeat top center;
-		background-size: 100%;
+		// background: url(../../static/topBg.png) no-repeat top center;
+		// background-size: 100%;
 		width: 100%;
-		.nav{
+		.nav {
 			margin: 20upx 0;
 			border-radius: 15upx;
 			box-shadow: 0upx 3upx 6upx #eee;
 			overflow: hidden;
-			.grid-text{
+			.grid-text {
 				padding-top: 10upx;
 			}
 		}
-		.storeList{
+		.storeList {
 			padding: 25upx 20upx 20upx;
-			background: #FFFFFF;
-			border-radius: 15upx;
-			box-shadow: 0upx 3upx 6upx #eee;
-			.stores-box{
+			.store-section {
+				margin-bottom: 20rpx;
+			}
+			.stores-box {
 				padding-top: 5upx;
-				.stores-item{
-					border-bottom: 1px solid #F8F8F8;
-					padding: 20upx 10upx;
-					&:last-child{
+				.stores-item {
+					background: #ffffff;
+					border-radius: 15upx;
+					box-shadow: 0upx 3upx 6upx #eee;
+					border-bottom: 1px solid #f8f8f8;
+					padding: 10upx 20upx;
+					margin-bottom: 20rpx;
+					&:last-child {
 						border: 0;
 					}
-					> view{
-						padding: 10upx 0;
+					.item-con {
 						display: flex;
-						align-items: center;
-					}
-					.s-address,.s-time{
-						justify-content: space-between;
-						color: #666;
-						font-size: 24rpx;
-					}
-					.s-address{
-						> view{
-							&:last-child{
-								font-size: 24rpx;
-								width: 30%;
-								display: flex;
-								align-items: center;
-								justify-content: flex-end;
+						&:last-child {
+							.item-main {
+								border: none;
 							}
 						}
+						.item-icon {
+							width: 34rpx;
+							height: 34rpx;
+							margin-right: 10rpx;
+							flex-shrink: 0;
+							padding: 18rpx 0;
+						}
+						.item-main {
+							font-size: 24rpx;
+							color: #666;
+							padding: 18rpx 0;
+							border-bottom: 1rpx solid #f2f2f2;
+							flex-grow: 1;
+						}
+						.s-address {
+							display: flex;
+							align-items: center;
+							justify-content: space-between;
+						}
 					}
 				}
 			}

+ 39 - 8
pages/store/store.vue

@@ -8,7 +8,7 @@
 		show-compass 
 		show-location 
 		:markers="markers"
-		style="width: 100%; height:30%;">
+		style="width: 100%; height:400rpx;">
 		</map>
 		<!-- 网点信息及设备 -->
 		<view class="details" v-if="stationData">
@@ -28,15 +28,23 @@
 					<view class="details-dev-title">设备编号:<text>{{ item.srcDeviceCode }}</text></view>
 					<view class="details-dev-cons">
 						<view class="dev-item" v-for="boxItem in item.deviceTypeBoxList">
-							<view>
+							<view class="item-pic-con">
+								<!-- <image class="full-" src="/static/full-bg.png"></image> -->
+								<text class="full-sign">
+									已满
+								</text>
 								<u-image height="80" width="80" :src="`/static/${boxItem.rubbishType}.png`"></u-image>
 							</view>
-							<view>
+							<view class="dev-main">
 								<view>
 									{{ boxItem.rubbishTypeDictValue }}
 									<u-tag v-if="boxItem.flag==1" text="已满" size="mini" mode="dark" type="info" />
 								</view>
-								<text>{{ getRule(boxItem.rubbishType).rubbishWeight }}g/{{ getRule(boxItem.rubbishType).goleNum }}乐豆</text>
+								<view class="rule-con">
+									{{ getRule(boxItem.rubbishType).rubbishWeight }}g/
+									<text class="goleNum">{{ getRule(boxItem.rubbishType).goleNum }}</text>
+									<image src="/static/ledou.png" class="ld-pic"></image>
+								</view>
 							</view>
 						</view>
 					</view>
@@ -176,10 +184,6 @@
 						> view{
 							padding: 15upx 10upx;
 							&:last-child{
-								text{
-									color: #666;
-									font-size: 24upx;
-								}
 								view{
 									display: flex;
 									align-items: center;
@@ -189,6 +193,33 @@
 								}
 							}
 						}
+						.item-pic-con{
+							.full-sign{
+								font-size: 24rpx;
+								padding: 4rpx 10rpx 14rpx;
+								color: #fff;
+								background: url('/static/full-bg.png') no-repeat;
+								background-size: 100% 100%;
+								transform: scale(1.5);
+							}
+						}
+						.dev-main{
+							.rule-con{
+								color: #666;
+								font-size: 24upx;
+								.goleNum{
+									color: #eb0000;
+									font-size: 26rpx;
+									font-weight: bold;
+									margin-left: 4rpx;
+								}
+								.ld-pic{
+									width: 30rpx;
+									height: 30rpx;
+									margin-left: 6rpx;
+								}
+							}
+						}
 					}
 				}
 			}

BIN
static/CLOTHES.png


BIN
static/HARM.png


BIN
static/METAL.png


BIN
static/PAPER.png


BIN
static/dz-icon.png


BIN
static/full-bg.png


BIN
static/hexiao.png


BIN
static/liucheng.png


BIN
static/md-icon.png


BIN
static/shouyi.png


BIN
static/tabbar/home-active.png


BIN
static/tabbar/home.png


BIN
static/tabbar/shop-active.png


BIN
static/tabbar/shop.png


BIN
static/tabbar/user-active.png


BIN
static/tabbar/user.png


BIN
static/time-icon.png


BIN
static/zhinan.png