6.8

2020-06-08 15:23:23 +08:00
parent e8c74df8a0
commit 233cb82ee4
44 changed files with 2461 additions and 82 deletions
--- a/pageE/tool/Manicure.vue
+++ b/pageE/tool/Manicure.vue
@@ -0,0 +1,112 @@
+<template>
+	<view class="manicure">
+		<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-name">美甲人姓名：xxx</view>
+						<view class="order-date">时间：2020-04-12</view>
+					</view>
+				</scroll-view>
+			</swiper-item>
+			<swiper-item class="swiper-item">
+				<scroll-view scroll-y class="none-page">
+					<view></view>
+				</scroll-view>
+			</swiper-item>
+		</swiper>
+	</view>
+</template>
+<script>
+export default {
+	data() {
+		return {
+			list: [{
+				name: '我的订单'
+			}, {
+				name: '申请表'
+			}],
+			current: 0,
+			swiperCurrent: 0
+		}
+	},
+	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/ManicureOrder'
+				});
+			}
+		}
+	},
+};
+</script>
+<style lang="scss" scoped>
+.manicure {
+	min-height: calc(100vh - var(--window-top));
+	background-color: #ECECEC;
+	display: flex;
+	flex-direction: column;
+	> uni-swiper {
+		flex: 1;
+	}
+	.swiper-item {
+		.order-list {
+			box-sizing: border-box;
+			padding: 20rpx 30rpx 0;
+			.order-item {
+				padding: 30rpx;
+				width:690rpx;
+				height: 229rpx;
+				background: rgba(255,255,255,1);
+				border-radius: 10rpx;
+				margin-bottom: 20rpx;
+				.order-title {
+					display: flex;
+					align-items: center;
+					justify-content: space-between;
+					.order-text {
+						font-size: 30rpx;
+						color: rgba(51,51,51,1);
+					}
+					.order-status {
+						font-size: 28rpx;
+						color: rgba(255,120,15,1);
+					}
+				}
+				.order-name {
+					font-size: 32rpx;
+					font-weight: 500;
+					color: rgba(51,51,51,1);
+					margin: 43rpx 0 45rpx;
+				}
+				.order-date {
+					font-size: 24rpx;
+					color: rgba(153,153,153,1);
+				}
+			}
+		}
+	}
+}
+</style>