Parcourir la source

优惠卷,订单页

lilei il y a 4 ans
Parent
commit
3b16e46cf1

+ 11 - 0
pages.json

@@ -29,6 +29,17 @@
 				"navigationBarTitleText": "我的优惠卷"
 			}
         }
+        ,{
+            "path" : "pages/order/order",
+            "style" : {
+				"navigationBarTitleText": "我的订单"
+			}
+        },{
+            "path" : "pages/order/orderDetail",
+            "style" : {
+				"navigationBarTitleText": "订单详情"
+			}
+        }
     ],
 	"globalStyle": {
 		"navigationBarTextStyle": "black",

+ 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>

+ 4 - 4
pages/userCenter/index.vue

@@ -11,9 +11,9 @@
 		<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>
 		<!-- 退出 -->
@@ -32,7 +32,7 @@
 		},
 		methods:{
 			toPage(index){
-				let pageUrl=['/pages/coupon/index/index']
+				let pageUrl=['/pages/coupon/index/index','/pages/order/order']
 				uni.navigateTo({
 					url: pageUrl[index]
 				})

BIN
static/img/select.png


BIN
static/img/unselect.png