From 46e5b6c99cd4fb905690df17e7b9858844ac2be2 Mon Sep 17 00:00:00 2001
From: BigBoss <2280520255@qq.com>
Date: Sun, 3 May 2020 21:54:44 +0800
Subject: [PATCH] add myOrder

---
 src/pages.json                  |  10 +--
 src/pages/myOrder/myOrder.vue   | 124 ++++++++++++++++-----------
 src/pages/myOrder/orderCard.vue | 183 ++++++++++++++++++++++++++++++++++++++--
 3 files changed, 258 insertions(+), 59 deletions(-)

diff --git a/src/pages.json b/src/pages.json
index d4df2a5..96a5114 100644
--- a/src/pages.json
+++ b/src/pages.json
@@ -1,10 +1,5 @@
 {
 	"pages": [ 
-        {
-            "path" : "pages/myOrder/myOrder",
-            "style" : {
-				"navigationBarTitleText": "我的订单"}
-        },
 		{
 			"path": "pages/index/index",
 			"style": {
@@ -12,6 +7,11 @@
 				// "enablePullDownRefresh":true
 			}
 		},
+        {
+            "path" : "pages/myOrder/myOrder",
+            "style" : {
+				"navigationBarTitleText": "我的订单"}
+        },
 		{
 			"path": "pages/addArddess/addArddess",
 			"style": {
diff --git a/src/pages/myOrder/myOrder.vue b/src/pages/myOrder/myOrder.vue
index ac9e18c..fddf56c 100644
--- a/src/pages/myOrder/myOrder.vue
+++ b/src/pages/myOrder/myOrder.vue
@@ -12,8 +12,12 @@
 				</view>
 			</view>
 		</view>
-		<OrderCard></OrderCard>
-		
+		<view class="orderList" >
+			<view  v-for="(order) in orderList" :key="orderId">
+				<OrderCard :order = "order" :current="current"></OrderCard>
+			</view>
+		</view>
+		<view class="footer">已显示全部</view>
 	</view>
 </template>
 
@@ -33,7 +37,18 @@
 					{current:4,text:'退款售后'},
 					],
 				current: 0,
-				
+				//订单数据
+				orderList:[
+					{ orderId: 0, img: '/static/img/goods/p1.jpg', name: '商品名称',originCost:'￥198',price: '￥168', orderType:1 ,buyNum:1},
+					{ orderId: 2, img: '/static/img/goods/p3.jpg', name: '商品名称',originCost:'￥198',price: '￥168', orderType:1 ,buyNum:1},
+					{ orderId: 3, img: '/static/img/goods/p4.jpg', name: '商品名称',originCost:'￥198',price: '￥168', orderType:2 ,buyNum:1},
+					{ orderId: 4, img: '/static/img/goods/p5.jpg', name: '商品名称',originCost:'￥198',price: '￥168', orderType:3 ,buyNum:1},
+					{ orderId: 5, img: '/static/img/goods/p6.jpg', name: '商品名称',originCost:'￥198',price: '￥168', orderType:3 ,buyNum:1},
+					{ orderId: 6, img: '/static/img/goods/p7.jpg', name: '商品名称',originCost:'￥198',price: '￥168', orderType:4 ,buyNum:1},
+					{ orderId: 7, img: '/static/img/goods/p8.jpg', name: '商品名称',originCost:'￥198',price: '￥168', orderType:4 ,buyNum:1},
+					{ orderId: 8, img: '/static/img/goods/p9.jpg', name: '商品名称',originCost:'￥198',price: '￥168', orderType:5 ,buyNum:1},
+					{ orderId: 9, img: '/static/img/goods/p10.jpg', name: '商品名称',originCost:'￥198',price: '￥168', orderType:5 ,buyNum:1}
+				],				
 			};
 		},
 		methods:{
@@ -52,55 +67,66 @@
 		flex-direction: column;
 		align-items: center;
 		background-color: #F7F6F6;
-		height: 100vh;
-	}
-	.header{
-		background-color: #ffffff;
-		width: 100%;
-		height: 232rpx;
-		padding: 40rpx 40rpx 36rpx 40rpx;
-		box-sizing: border-box;
-		.searchBar {
-			width: 670rpx;
-			display: flex;
-			justify-content: center;
-			align-items: center;
-			box-sizing: border-box;
-			padding: 0rpx 16rpx;
-			border: 1px solid #FF6B4A;
-			border-radius: 8rpx;
+		min-height: 100vh;
+		.header{
 			background-color: #ffffff;
+			width: 100%;
+			height: 232rpx;
+			padding: 40rpx 40rpx 36rpx 40rpx;
+			box-sizing: border-box;
+			position: fixed;
+			top: 0;
+			left: 0;
+			.searchBar {
+				width: 670rpx;
+				display: flex;
+				justify-content: center;
+				align-items: center;
+				box-sizing: border-box;
+				padding: 0rpx 16rpx;
+				border: 1px solid #FF6B4A;
+				border-radius: 8rpx;
+				background-color: #ffffff;
+			}
+			
+			.screenBar{
+				width: 670rpx;
+				height: 110rpx;
+				display: flex;
+				flex-direction: row;
+				justify-content: space-between;
+				align-items: center;
+				color: #333333;
+				font-size: 32rpx;
+			}
+			.screenItem{
+				height: 50rpx;
+				font-size: 32rpx;
+				color: #333333;
+				display: flex;
+				justify-content: center;
+				align-items: center;
+				transition:all 0.2s;
+			}
+			.active{
+				// font-size: 34rpx;
+				color: #EC5D3B;
+			}
+			.searchIpt {
+				height: 68rpx;
+				width: 670rpx;
+				padding: 16rpx;
+				font-size: 28rpx;
+				box-sizing: border-box;
+			}
 		}
-		
-		.screenBar{
-			width: 670rpx;
-			height: 110rpx;
-			display: flex;
-			flex-direction: row;
-			justify-content: space-between;
-			align-items: center;
-			color: #333333;
-			font-size: 32rpx;
-		}
-		.screenItem{
-			height: 50rpx;
-			font-size: 32rpx;
-			color: #333333;
-			display: flex;
-			justify-content: center;
-			align-items: center;
-			transition:all 0.2s;
-		}
-		.active{
-			// font-size: 34rpx;
-			color: #EC5D3B;
+		.orderList{
+			margin-top: 232rpx;
 		}
-		.searchIpt {
-			height: 68rpx;
-			width: 670rpx;
-			padding: 16rpx;
-			font-size: 28rpx;
-			box-sizing: border-box;
+		.footer{
+			font-size: 14px;
+			color: #B8B8B8;
+			margin: 40rpx 0;
 		}
 	}
 </style>
diff --git a/src/pages/myOrder/orderCard.vue b/src/pages/myOrder/orderCard.vue
index 339dac9..0d29f2e 100644
--- a/src/pages/myOrder/orderCard.vue
+++ b/src/pages/myOrder/orderCard.vue
@@ -1,14 +1,88 @@
-<template>
-	<view class="card">
-		
+<template>
+	<view>
+		<view class="card" v-if="current === order.orderType" >
+			<view class="cardHeader">
+				<text class="orderId">订单号：{{order.orderId}}</text>
+				<text class="orderType" v-if="order.orderType===1">待付款</text>
+				<text class="orderType" v-if="order.orderType===2">待发货</text>
+				<text class="orderType" v-if="order.orderType === 3">待收货</text>
+				<text class="orderType" v-if="order.orderType === 4">退款售后</text>
+				<text class="orderType" v-if="order.orderType === 5">已完成</text>
+			</view>
+			<view class="orderCardInfo">
+				<image :src="order.img" mode="aspectFill"></image>
+				<view class="infoText">
+					<view class="orderName">{{order.name}}</view>
+					<view class="orderDescrib">规格：玫瑰金 / 钛合金 / 防日光防紫外线</view>
+					<view class="infoText-bottom">
+						<view class="markPrice">{{order.price}}</view>
+						<view class="buy-num">X{{order.buyNum}}</view>
+					</view>
+				</view>
+			</view>
+			<view class="payPrice">实付：<text class="priceNum">{{order.price}}</text> </view>
+			<view class="btns" v-if="order.orderType === 1">
+				<view class="btn-type1">申请退款</view>
+				<view class="btn-type2">去支付</view>
+			</view>
+			<view class="btns" v-if="order.orderType === 0">
+				<view class="btn-type1">再次购买</view>
+			</view>
+		</view>
+		<view class="card" v-if="current === 0" >
+			<view class="cardHeader">
+				<text class="orderId">订单号：{{order.orderId}}</text>
+				<text class="orderType" v-if="order.orderType===1">待付款</text>
+				<text class="orderType" v-if="order.orderType===2">待发货</text>
+				<text class="orderType" v-if="order.orderType === 3">待收货</text>
+				<text class="orderType" v-if="order.orderType === 4">退款售后</text>
+			</view>
+			<view class="orderCardInfo">
+				<image :src="order.img" mode="aspectFill"></image>
+				<view class="infoText">
+					<view class="orderName">{{order.name}}</view>
+					<view class="orderDescrib">规格：玫瑰金 / 钛合金 / 防日光防紫外线</view>
+					<view class="infoText-bottom">
+						<view class="markPrice">{{order.price}}</view>
+						<view class="buy-num">X{{order.buyNum}}</view>
+					</view>
+				</view>
+			</view>
+			<view class="payPrice">实付：<text class="priceNum">{{order.price}}</text> </view>
+			<view class="btns" v-if="order.orderType === 1">
+				<view class="btn-type1">申请退款</view>
+				<view class="btn-type2">去支付</view>
+			</view>
+			<view class="btns" v-if="order.orderType === 0">
+				<view class="btn-type1">再次购买</view>
+			</view>
+		</view>
 	</view>
 </template>
 
 <script>
-	export default {
+	export default {
+		props: {
+			/**
+			 * 订单数据
+			 */
+			order: {
+				orderId: Number, 
+				img: String, 
+				name: String,
+				originCost:String,
+				price: String, 
+				orderType:Number,
+				buyNum:Number
+			},
+			/**
+			 * 当前选择
+			 */
+			current:Number
+			
+		},
 		data() {
 			return {
-				
 			};
 		}
 	}
@@ -23,5 +97,104 @@
 		border-radius: 8px;
 		border-radius: 8px;
 		margin-top: 20rpx;
+		padding: 40rpx;
+		box-sizing: border-box;
+		.cardHeader{
+			width: 100%;
+			height: 40rpx;
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+			.orderId{
+				font-size: 12px;
+				color: #999999;
+			}
+			.orderType{
+				font-size: 14px;
+				color: #FF6B4A;
+			}
+		}
+		.orderCardInfo{
+			width: 100%;
+			height: 188rpx;
+			display: flex;
+			flex-direction: row;
+			justify-content: space-between;
+			align-items: center;
+			margin-top: 40rpx;
+			image{
+				height: 188rpx;
+				width: 188rpx;
+				margin-right: 24rpx;
+			}
+			.infoText{
+				display: flex;
+				flex-direction: column;
+				justify-content: space-between;
+				align-items: flex-start;
+				height: 188rpx;
+			}
+			.orderName{
+				font-size: 14px;
+				color: #333333;
+			}
+			.orderDescrib{
+				font-size: 12px;
+				color: #999999;
+			}
+			.infoText-bottom{
+				display: flex;
+				flex-direction: row;
+				justify-content: space-between;
+				align-items: center;
+				width: 100%;
+				.markPrice{
+					font-size: 14px;
+					color: #FF6B4A;
+				}
+				.buy-num{
+					font-size: 12px;
+					color: #999999;
+				}
+			}
+		}
+		.payPrice{
+			text-align: right;
+			margin: 20rpx 0;
+			font-size: 14px;
+			color: #333333;
+			.priceNum{
+				font-size: 14px;
+				color: #FF6B4A;
+			}
+		}
+		.btns{
+			display: flex;
+			justify-content: flex-end;
+			align-items: center;
+			.btn-type1{
+				height: 48rpx;
+				width: 156rpx;
+				border: 1px solid #FF6B4A;
+				border-radius: 12px;
+				border-radius: 12px;
+				text-align: center;
+				line-height: 48rpx;
+				font-size: 12px;
+				color: #FF6B4A;
+			}
+			.btn-type2{
+				height: 48rpx;
+				width: 140rpx;
+				background: #FF6B4A;
+				border-radius: 12px;
+				border-radius: 12px;
+				text-align: center;
+				line-height: 48rpx;
+				font-size: 12px;
+				color: #FFFFFF;
+				margin-left: 20rpx;
+			}
+		}
 	}
 </style>
-- 
2.0.0