6.8

pageE/tool/SendWash.vue

@@ -0,0 +1,149 @@
+<template>
+	<view class="wash">
+		<view>
+			<u-tabs-swiper ref="tabs" :list="list" :is-scroll="false" active-color="#FF780F" :current="current" font-size="32" :show-bar="false" @change="tabsChange" height="88" ></u-tabs-swiper>
+		</view>
+		<swiper :current="swiperCurrent" @animationfinish="animationfinish">
+			<swiper-item class="swiper-item">
+				<scroll-view scroll-y class="order-list">
+					<view v-for="(item, index) in 6" :key="index" class="order-item">
+						<view class="order-title">
+							<view class="order-text">订单状态</view>
+							<view class="order-status">已预约</view>
+						</view>
+						<view class="order-info">
+							<image src="../static/mine/23.png"></image>
+							<view>
+								<view>骑手名字：xxx</view>
+								<view>联系方式：123456789</view>
+								<view>所属公司：xx公司</view>
+							</view>
+						</view>
+					</view>
+				</scroll-view>
+			</swiper-item>
+			<swiper-item class="swiper-item">
+				<scroll-view scroll-y style="height: 100%;" class="none-page">
+					<view></view>
+				</scroll-view>
+			</swiper-item>
+			<swiper-item class="swiper-item">
+				<scroll-view scroll-y class="comment">
+					<view v-for="(item, index) in 3" :key="index" class="comment-item">
+						<Comment></Comment>
+					</view>
+				</scroll-view>
+			</swiper-item>
+		</swiper>
+	</view>
+</template>
+<script>
+import Comment from '@/components/mine/comment/index'
+export default {
+	data() {
+		return {
+			list: [{
+				name: '我的订单'
+			}, {
+				name: '申请表'
+			}, {
+				name: '评价'
+			}],
+			current: 0,
+			swiperCurrent: 0
+		}
+	},
+	components: {
+		Comment
+	},
+	onShow() {
+		this.current = 0;
+		this.swiperCurrent = 0;
+	},
+	methods: {
+		tabsChange(index) {
+			this.swiperCurrent = index;
+			this.toApplyPage(index);
+		},
+		animationfinish(e) {
+			let current = e.detail.current;
+			this.swiperCurrent = current;
+			this.current = current;
+			this.toApplyPage(current);
+		},
+		toApplyPage(index) {
+			if(index == 1) {
+				uni.navigateTo({
+					url: '/pageE/tool/WashOrder'
+				});
+			}
+		}
+	},
+};
+</script>
+<style lang="scss" scoped>
+.wash {
+	min-height: calc(100vh - var(--window-top));
+	background-color: #ECECEC;
+	display: flex;
+	flex-direction: column;
+	> uni-swiper {
+		flex: 1;
+	}
+	.swiper-item {
+		padding-top: 20rpx;
+		.order-list {
+			width: 100%;
+			height: 100%;
+			box-sizing: border-box;
+			padding: 0 30rpx;
+			.order-item {
+				padding: 30rpx;
+				width:690rpx;
+				height: 308rpx;
+				background: rgba(255,255,255,1);
+				border-radius: 10rpx;
+				margin-bottom: 20rpx;
+				.order-title {
+					display: flex;
+					align-items: center;
+					justify-content: space-between;
+					margin-bottom: 30rpx;
+					.order-text {
+						font-size: 30rpx;
+						color: rgba(51,51,51,1);
+					}
+					.order-status {
+						font-size: 28rpx;
+						color: rgba(255,120,15,1);
+					}
+				}
+				.order-info {
+					display: flex;
+					align-items: center;
+					> image {
+						width: 180rpx;
+						height: 160rpx;
+						border-radius: 10rpx;
+						margin-right: 30rpx;
+					}
+					> view {
+						font-size:　26rpx;
+						color:　rgba(51,51,51,1);
+						> view:not(:last-child) {
+							margin-bottom: 19rpx;
+						}
+					}
+				}
+			}
+		}
+		.comment {
+			width: 100%;
+			height: 100%;
+			.comment-item {
+				margin-bottom: 20rpx;
+			}
+		}
+	}
+}
+</style>