1004749546@qq.com před 4 roky
rodič
revize
2f3fa12348

+ 22 - 0
pages.json

@@ -31,8 +31,30 @@
 			"style": {
 				"navigationBarTitleText": "我的优惠卷"
 			}
+<<<<<<< HEAD
 		}
 	],
+=======
+        }
+        ,{
+            "path" : "pages/order/order",
+            "style" : {
+				"navigationBarTitleText": "我的订单"
+			}
+        },{
+            "path" : "pages/order/orderDetail",
+            "style" : {
+				"navigationBarTitleText": "订单详情"
+			}
+        }
+        ,{
+            "path" : "pages/work/index/index",
+            "style" : {
+				"navigationBarTitleText": "洗车服务中"
+			}
+        }
+    ],
+>>>>>>> 8ad555f7cab379dcc5a6f560e31b529281c89e26
 	"globalStyle": {
 		"navigationBarTextStyle": "black",
 		"navigationBarTitleText": "uni-app",

+ 42 - 9
pages/coupon/couponTpl.vue

@@ -1,7 +1,8 @@
 <template>
 	<view class="coupon-list">
 		<view class="coupon-box">
-			<view class="coupon-head">
+			<view class="coupon-head" @click="checked">
+				<view class="coupon-sel"></view>
 				<view class="coupon-title">
 					<view class="coupon-title-1">满100减50</view>
 					<view class="coupon-title-time">有效期至:2020-05-12</view>
@@ -19,7 +20,27 @@
 
 <script>
 	export default{
-		name: 'couponTpl'
+		name: 'couponTpl',
+		props: {
+			showCheck: {
+				type: Boolean,
+				default: false
+			},
+			list:{
+				type: Array,
+				default: function(){
+					return []
+				}
+			}
+		},
+		methods: {
+			// 选中优惠卷
+			checked() {
+				if(this.showCheck){
+					
+				}
+			},
+		},
 	}
 </script>
 
@@ -28,20 +49,32 @@
 		padding: 25rpx;
 	}
 	.coupon-box{
-		background: #FFFFFF;
-		border: 1rpx solid #eee;
+		background: #fff7f5;
 		border-radius: 10rpx;
 		box-shadow: 1rpx 1rpx 5rpx #eee;
 		.coupon-head{
 			display: flex;
 			align-items: center;
-			padding: 30rpx;
+			padding: 20rpx 30rpx;
+			position: relative;
+			.coupon-sel{
+				position: absolute;
+				width: 60rpx;
+				height: 60rpx;
+				right: 0;
+				top: 0;
+			}
+			.coupon-checked{
+				background: url(../../static/img/select.png) no-repeat center;
+				background-size: 100% 100%;
+			}
 			.coupon-title{
 				flex-grow: 1;
 				font-size: 32rpx;
 				.coupon-title-time{
-					color: #999999;
+					color: #999;
 					padding-top: 15rpx;
+					font-size: 28rpx;
 				}
 			}
 			.coupon-price{
@@ -53,9 +86,9 @@
 			}
 		}
 		.coupon-desc{
-			border-top: 1rpx dashed #eee;
-			padding: 20rpx;
-			color: #999;
+			border-top: 1rpx dashed #ffcfcd;
+			padding: 18rpx 30rpx;
+			color: #666;
 		}
 	}
 </style>

+ 10 - 3
pages/coupon/index/index.vue

@@ -1,11 +1,11 @@
 <template>
 	<view class="pages-content">
 		<view class="tabs">
-			<u-tabs-swiper ref="uTabs" :list="list" :current="current" @change="tabsChange" :is-scroll="false"
+			<u-tabs-swiper ref="uTabs" :list="tabsList" bar-width="100" :current="current" @change="tabsChange" :is-scroll="false"
 			 swiperWidth="750"></u-tabs-swiper>
 		</view>
 		<swiper :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish">
-			<swiper-item class="swiper-item" v-for="(item, index) in list" :key="index">
+			<swiper-item class="swiper-item" v-for="(item, index) in tabsList" :key="index">
 				<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="onreachBottom">
 					<couponTpl></couponTpl>
 				</scroll-view>
@@ -22,7 +22,7 @@
 		},
 		data() {
 			return {
-				list: [{
+				tabsList: [{
 					name: '未使用'
 				}, {
 					name: '已使用'
@@ -32,6 +32,9 @@
 				// 因为内部的滑动机制限制,请将tabs组件和swiper组件的current用不同变量赋值
 				current: 0, // tabs组件的current值,表示当前活动的tab选项
 				swiperCurrent: 0, // swiper组件的current值,表示当前那个swiper-item是活动的
+				pageNo:1,
+				pageSize:15,
+				count:0
 			};
 		},
 		methods: {
@@ -55,6 +58,10 @@
 			// scroll-view到底部加载更多
 			onreachBottom() {
 				
+			},
+			// 获取优惠卷列表
+			getList(){
+				
 			}
 		}
 	};

+ 141 - 0
pages/order/order.vue

@@ -0,0 +1,141 @@
+<template>
+	<view class="order-pages">
+		<view class="order-list">
+			<view class="order-list-item" @click="goView">
+				<view>
+					<view>高新二路站</view>
+					<view class="order-finish">已完成</view>
+				</view>
+				<view>
+					<view class="order-carNo">13709146191</view>
+					<u-icon name="arrow-right" color="#666" size="28"></u-icon>
+				</view>
+				<view>
+					<view class="order-price">
+						<text>¥9.8</text>
+						<text>微信支付</text>
+					</view>
+					<view>2020-07-25 16:20:33</view>
+				</view>
+			</view>
+			<view class="order-list-item">
+				<view>
+					<view>高新二路站</view>
+					<view class="order-unPay">待支付</view>
+				</view>
+				<view>
+					<view class="order-carNo">13709146191</view>
+					<u-icon name="arrow-right" color="#666" size="28"></u-icon>
+				</view>
+				<view>
+					<view class="order-price">
+						<text>¥9.8</text>
+						<text>微信支付</text>
+					</view>
+					<view>2020-07-25 16:20:33</view>
+				</view>
+			</view>
+			<view class="order-list-item">
+				<view>
+					<view>高新二路站</view>
+					<view class="order-cansel">已取消</view>
+				</view>
+				<view>
+					<view class="order-carNo">13709146191</view>
+					<u-icon name="arrow-right" color="#666" size="28"></u-icon>
+				</view>
+				<view>
+					<view class="order-price">
+						<text>¥9.8</text>
+						<text>微信支付</text>
+					</view>
+					<view>2020-07-25 16:20:33</view>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				list:[],
+				pageNo:1,
+				pageSize:15,
+				count:0,
+				status:'loading'
+			};
+		},
+		methods: {
+			// 获取订单列表
+			getList() {
+				
+			},
+			// 查看详情
+			goView(item){
+				uni.navigateTo({
+					url:"/pages/order/orderDetail?id="+item.id
+				})
+			}
+		},
+		// 滚动到底部自动加载下页
+		onReachBottom() {
+			
+		}
+	}
+</script>
+
+<style lang="scss">
+	.order-pages{
+		width: 100%;
+		.order-list{
+			padding: 25rpx;
+			.order-list-item{
+				box-shadow: 1rpx 1rpx 5rpx #eee;
+				border: 1px solid #eee;
+				border-radius: 10rpx;
+				margin: 30rpx 0;
+				> view{
+					padding:20rpx 30rpx;
+					display: flex;
+					align-items: center;
+					border-bottom: 1px dashed #eee;
+					&:last-child{
+						border: 0;
+					}
+					>view{
+						&:first-child{
+							flex-grow: 1;
+						}
+						&:last-child{
+							padding-left: 15rpx;
+						}
+					}
+					.order-finish{
+						color: #00aa00;
+					}
+					.order-unPay{
+						color: #ff0000;
+					}
+					.order-cansel{
+						color: #7e7b88;
+					}
+					.order-carNo{
+						font-size: 32rpx;
+					}
+					.order-price{
+						text{
+							margin-right: 20rpx;
+							color: #666;
+							&:first-child{
+								color: red;
+								font-size: 32rpx;
+							}
+						}
+					}
+				}
+			}
+		}
+	}
+</style>

+ 67 - 0
pages/order/orderDetail.vue

@@ -0,0 +1,67 @@
+<template>
+	<view class="order-pages">
+		<u-cell-group>
+			<u-cell-item title="订单状态" :arrow="false">
+				<view slot="right-icon">
+					<text class="order-finish">已完成</text>
+				</view>
+			</u-cell-item>
+			<u-cell-item title="订单编号" :arrow="false" value="BD426464654646466"></u-cell-item>
+			<u-cell-item title="创建时间" :arrow="false" value="2020-12-25 12:45:36"></u-cell-item>
+			<u-cell-item title="服务网点" :arrow="false" value="西部大道点"></u-cell-item>
+			<u-cell-item title="服务项目" :arrow="false" value="标准洗车"></u-cell-item>
+			<u-cell-item title="手机号" :arrow="false" value="1370946191"></u-cell-item>
+			<u-cell-item title="支付方式" :arrow="false" value="微信支付"></u-cell-item>
+			<u-cell-item title="应付金额" :arrow="false" value="¥30"></u-cell-item>
+			<u-cell-item title="优惠价" :arrow="false" value="5元代金卷"></u-cell-item>
+			<u-cell-item title="实付金额" :arrow="false">
+				<text class="order-price">¥25</text>
+			</u-cell-item>
+		</u-cell-group>
+		<view class="order-photo">
+			<view>洗车前</view>
+			<u-image width="100%" height="400rpx" :src="src"></u-image>
+			<view>洗车后</view>
+			<u-image width="100%" height="400rpx" :src="src"></u-image>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default{
+		data() {
+			return {
+				src: ''
+			}
+		},
+	}
+</script>
+
+<style lang="scss">
+	.order-pages{
+		width: 100%;
+		.u-cell{
+			padding:10rpx 32rpx;
+		}
+		.order-photo{
+			padding:0 30rpx;
+			>view{
+				text-align: center;
+				padding: 20rpx;
+			}
+		}
+		.order-finish{
+			color: #00aa00;
+		}
+		.order-unPay{
+			color: #ff0000;
+		}
+		.order-cansel{
+			color: #7e7b88;
+		}
+		.order-price{
+			font-size: 36rpx;
+			color: red;
+		}
+	}
+</style>

+ 10 - 5
pages/userCenter/index.vue

@@ -11,14 +11,14 @@
 		<view class="user-list">
 			<u-cell-group>
 				<u-cell-item icon="gift" index="0" @click="toPage" title="我的优惠卷"></u-cell-item>
-				<u-cell-item icon="order" index="1" title="我的订单"></u-cell-item>
-				<u-cell-item icon="file-text" index="2" title="服务协议"></u-cell-item>
-				<u-cell-item icon="info-circle" index="3" title="关于我们"></u-cell-item>
+				<u-cell-item icon="order" index="1" @click="toPage" title="我的订单"></u-cell-item>
+				<u-cell-item icon="file-text" index="2" @click="toPage" title="服务协议"></u-cell-item>
+				<u-cell-item icon="info-circle" index="3" @click="toPage" title="关于我们"></u-cell-item>
 			</u-cell-group>
 		</view>
 		<!-- 退出 -->
 		<view class="user-btn">
-			<u-button type="error" shape="circle">退出登录</u-button>
+			<u-button type="error" @click="quitSys" shape="circle">退出登录</u-button>
 		</view>
 	</view>
 </template>
@@ -31,11 +31,16 @@
 			};
 		},
 		methods:{
+			// 打开对应的页面
 			toPage(index){
-				let pageUrl=['/pages/coupon/index/index']
+				let pageUrl=['/pages/coupon/index/index','/pages/order/order']
 				uni.navigateTo({
 					url: pageUrl[index]
 				})
+			},
+			// 退出登录
+			quitSys(){
+				
 			}
 		}
 	}

+ 252 - 0
pages/work/index/index.vue

@@ -0,0 +1,252 @@
+<template>
+	<view class="work-pages">
+		<!-- 工作控制按钮及进度 -->
+		<view class="work-cons flex-center">
+			<!-- 操作按钮组件 -->
+			<view class="work-button-wrap">
+				<!-- 按钮 -->
+				<view class="work-button flex-center" @click="startWork">
+					<!-- 扇形 -->
+					<view class="circle_process">
+					    <view class="wrapper right">
+					        <view class="circle rightcircle"></view>
+					    </view>
+					    <view class="wrapper left">
+					        <view class="circle leftcircle" id="leftcircle"></view>
+					    </view>
+					</view>
+					<view class="cirle-one"></view>
+					<view class="cirle-two flex-center" v-for="item in 60" >
+						<view class="sector" :style="{transform: `rotate(${item*6}deg)`}"></view>
+					</view>
+					<view class="cirle-three flex-center"></view>
+					<view class="cirle-free w-start"></view>
+					<view class="cirle-sex flex-center">
+						点击启动
+					</view>
+				</view>
+				<!-- 状态提示 -->
+				<view class="work-button-tips">设备准备就绪</view>
+			</view>
+		</view>
+		<!-- 说明提示 -->
+		<view class="work-tips">
+			<view class="work-dtime">
+				距离订单强制完成还剩 
+				<u-count-down @change="changeDtime" separator="zh" font-size="36" separator-size="28" color="#ff0000" :timestamp="timestamp" :show-days="false" :show-hours="false"></u-count-down>
+			</view>
+			<view class="work-remarks">
+				<view class="title">说明:</view>
+				<view>
+					支付完成后<text class="red">请尽快启动洗车服务</text>,否则订单将在5分钟后自动完成。
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				timestamp: 300
+			};
+		},
+		methods:{
+			// 倒计时监听,0 时自动结束订单
+			changeDtime(time){
+				console.log(time)
+			},
+			// 启动按钮
+			startWork(){
+				
+			},
+			// 进度条动画
+			loading(){
+				
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+	// 扇形圆环
+	.circle_process{
+		position: absolute;
+		width: 380rpx;
+		height : 380rpx;
+	}
+	.circle_process .wrapper{
+		width: 190rpx;
+		height: 380rpx;
+		position: absolute;
+		top:0;
+		overflow: hidden;
+	}
+	.circle_process .right{
+		right:0;
+	}
+	.circle_process .left{
+		left:0;
+	}
+	.circle_process .circle{
+		width: 380rpx;
+		height: 380rpx;
+		border:20rpx solid transparent;
+		border-radius: 50%;
+		position: absolute;
+		top:0;
+		transform : rotate(-135deg);
+	}
+	.circle_process .rightcircle{
+		border-top:20rpx solid red;
+		border-right:20rpx solid red;
+		right:0;
+		-webkit-animation: circle_right 25s linear infinite;
+	}
+	.circle_process .leftcircle{
+		border-bottom:20rpx solid red;
+		border-left:20rpx solid red;
+		left:0;
+		-webkit-animation: circle_left 25s linear infinite;
+	}
+	@-webkit-keyframes circle_right{
+		0%{
+			-webkit-transform: rotate(-135deg);
+		}
+		50%,100%{
+			-webkit-transform: rotate(45deg);
+		}
+	}
+	@-webkit-keyframes circle_left{
+		0%,50%{
+			-webkit-transform: rotate(-135deg);
+		}
+		100%{
+			-webkit-transform: rotate(45deg);
+		}
+	}
+	 
+	.work-pages{
+		width: 100%;
+		.flex-center{
+			display: flex;
+			align-items: center;
+			justify-content: center;
+		}
+		.work-cons{
+			height: 60vh;
+			background-image: linear-gradient(0deg, #666, #333);
+			border-bottom-left-radius: 300rpx 30rpx;
+			border-bottom-right-radius: 300rpx 30rpx;
+			position: relative;
+			// 按钮
+			.work-button-wrap{
+				width: 400rpx;
+				margin-top: -50rpx;
+				.work-button{
+					background: #aaa;
+					border-radius: 100%;
+					width: 380rpx;
+					height: 380rpx;
+					cursor: pointer;
+					.cirle-one{
+						background: #444;
+						width: 370rpx;
+						height: 370rpx;
+						border-radius: 100%;
+						position: absolute;
+					}
+					.cirle-two{
+						width: 370rpx;
+						height: 370rpx;
+						border-radius: 100%;
+						position: absolute;
+						.sector {
+							transform-origin:center center;
+							width: 350rpx;
+							height: 5rpx;
+							background: #aaa;
+						}
+					}
+					.cirle-three{
+						background: #444;
+						width: 280rpx;
+						height: 280rpx;
+						border-radius: 100%;
+						position: absolute;
+					}
+					.cirle-free{
+						width: 230rpx;
+						height: 230rpx;
+						border-radius: 100%;
+						position: absolute;
+						animation:mymove 5s infinite;
+					}
+					@keyframes mymove
+					{
+						0%{
+						transform: scale(1);  /*开始为原始大小*/
+						opacity:1
+						}
+						25%{
+							transform: scale(1.1); /*放大1.1倍*/
+							opacity:0.5
+						}
+						50%{
+							transform: scale(1);
+							opacity:1
+						}
+						75%{
+							transform: scale(1.1);
+							opacity:0.5
+						}
+					}
+					.cirle-sex{
+						background-image: linear-gradient(-180deg, #888, #333 80%);
+						width: 210rpx;
+						height: 210rpx;
+						border-radius: 100%;
+						position: absolute;
+						color: #FFFFFF;
+						font-size: 28rpx;
+						color: #eee;
+					}
+					.w-start{
+						background: #ffcc00;
+					}
+					.w-stop{
+						background: #ff0000;
+					}
+					&:active{
+						.cirle-sex{
+							background-image: linear-gradient(180deg, #888, #333 80%);
+						}
+					}
+				}
+				.work-button-tips{
+					color: #eee;
+					text-align: center;
+					padding-top: 30rpx;
+				}
+			}
+		}
+		.work-tips{
+			padding: 45rpx;
+			.work-dtime{
+				text-align: center;
+				font-weight: bold;
+				font-size: 34rpx;
+			}
+			.work-remarks{
+				padding-top: 50rpx;
+				.red{
+					color: red;
+				}
+				.title{
+					font-weight: bold;
+				}
+			}
+		}
+	}
+</style>

binární
static/img/select.png


binární
static/img/unselect.png