From 6b6ce39d0c604c8c5cadf501955a38c462097446 Mon Sep 17 00:00:00 2001
From: ch <cwl_ch@163.com>
Date: Mon, 9 May 2022 09:27:21 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E8=AE=A2=E5=8D=95=E5=88=97?=
 =?UTF-8?q?=E8=A1=A8,=E6=8F=90=E4=BA=A4=E8=AE=A2=E5=8D=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/BsPay.vue                          |  74 ++++++--
 components/UIGoodsInfo.vue                    |  56 ++++++
 components/UiLineBox.vue                      |  29 +++
 components/UiMoney.vue                        | 101 ++++++++++-
 layouts/default.vue                           |   6 +-
 pages/account/index.vue                       |  35 ++++
 pages/account/{ => index}/address.vue         |   0
 pages/account/{ => index}/home/index.vue      |   0
 .../{ => index}/home/module/LogisitcsInfo.vue |   0
 .../{ => index}/home/module/Message.vue       |   0
 pages/account/{ => index}/message.vue         |   0
 .../index}/order/detail/index.vue             |   0
 pages/account/index/order/list/index.vue      | 165 ++++++++++++++++++
 .../index/order/list/module/Tab.vue}          |   0
 .../index/order/saleAfter/detail.vue}         |   0
 pages/account/index/order/saleAfter/list.vue  |   0
 pages/account/{ => index}/userInfo.vue        |   0
 pages/order/list/index.vue                    |  32 ----
 pages/order/submit/index.vue                  |  34 +++-
 pages/order/submit/module/Amount.vue          |  49 ++++++
 pages/order/submit/module/Message.vue         |  95 ++++++++++
 pages/order/submit/module/OrderInfo.vue       |  50 +++++-
 22 files changed, 669 insertions(+), 57 deletions(-)
 create mode 100644 components/UIGoodsInfo.vue
 create mode 100644 pages/account/index.vue
 rename pages/account/{ => index}/address.vue (100%)
 rename pages/account/{ => index}/home/index.vue (100%)
 rename pages/account/{ => index}/home/module/LogisitcsInfo.vue (100%)
 rename pages/account/{ => index}/home/module/Message.vue (100%)
 rename pages/account/{ => index}/message.vue (100%)
 rename pages/{ => account/index}/order/detail/index.vue (100%)
 create mode 100644 pages/account/index/order/list/index.vue
 rename pages/{order/saleAfter/detail.vue => account/index/order/list/module/Tab.vue} (100%)
 rename pages/{order/saleAfter/list.vue => account/index/order/saleAfter/detail.vue} (100%)
 create mode 100644 pages/account/index/order/saleAfter/list.vue
 rename pages/account/{ => index}/userInfo.vue (100%)
 delete mode 100644 pages/order/list/index.vue
 create mode 100644 pages/order/submit/module/Amount.vue
 create mode 100644 pages/order/submit/module/Message.vue

diff --git a/components/BsPay.vue b/components/BsPay.vue
index e29a13e..a7dc338 100644
--- a/components/BsPay.vue
+++ b/components/BsPay.vue
@@ -2,24 +2,29 @@
  * @Author: ch
  * @Date: 2022-05-08 00:39:50
  * @LastEditors: ch
- * @LastEditTime: 2022-05-08 01:49:59
+ * @LastEditTime: 2022-05-08 17:25:08
  * @Description: file content
 -->
 <template>
-	<el-dialog :visible="visible" title="打开微信扫描付款" @open="getCodeImg" @close="close">
-		<div>
-			<span v-if="startSecondNum">{{timeTips}}</span>
-			<div class="code-img">
+	<el-dialog title="打开微信扫描付款" width="380px" class="box" center
+		 :visible="visible" @open="getCodeImg" @close="close">
+		<div class="pay">
+			<span class="pay--timer" v-if="startSecondNum">{{timerTxt}}</span>
+			<UiMoney class="money" sufSize="14px" preSize="14px" size="20px" 
+				float suffix prefix :money="39"/>
+			<div class="pay--code">
 				<img :src="imgUrl" v-if="imgUrl"/>
 				<p v-if="!startSecondNum">已超时，请重新下单</p>
 			</div>
-			<p>如支付后没有自动跳转，请点击 <span>完成付款</span></p>
+			<p class="pay--tips">如支付后没有自动跳转，请点击 <span class="pay--finish">完成付款</span></p>
 		</div>
 	</el-dialog>
 </template>
 <script>
 import {ApiPostPayCdoeImg} from '@/plugins/api/wx'
+import UiMoney from './UiMoney.vue'
 export default {
+	components: { UiMoney },
 	props : {
 		visible : {
 			type : Boolean,
@@ -36,12 +41,15 @@ export default {
 	},
 	data(){
 		return {
-			imgUrl : '',
-			timeTips : '',
+			imgUrl : 'https://pay.mashibing.com/api/scan/imgs/d2VpeGluOi8vd3hwYXkvYml6cGF5dXJsP3ByPVo4alVpUmF6eg==.png',
+			timerTxt : '',
 			timerStop : null,
 			startSecondNum : 1800
 		}
 	},
+	mounted(){
+		this.timer()
+	},
 	methods : {
 		async getCodeImg(){
 			this.timerStop = null;
@@ -66,7 +74,7 @@ export default {
 			this.startSecondNum--;
 			let minute = parseInt(this.startSecondNum / 60);
 			let second = parseInt(this.startSecondNum % 60);
-			this.timeTips = `剩余${minute > 0 ? `${minute}分` : ''} ${second}秒`;
+			this.timerTxt = `剩余${minute > 0 ? `${minute}分` : ''} ${second}秒`;
 			this.timerStop = setTimeout(()=>this.timer(),1000)
 		},
 		close(){
@@ -74,4 +82,50 @@ export default {
 		}
 	}
 }
-</script>
\ No newline at end of file
+</script>
+<style lang="scss" scoped>
+.pay{
+	text-align: center;
+	&--code{
+		width: 160px;
+		height: 160px;
+		margin: 15px auto 20px;
+	}
+	&--timer{
+		color: #999;
+		display: block;
+		margin-bottom: 15px;
+	}
+	&--tips, &--timer{
+		font-size: 14px;
+	}
+	&--finish{
+		color: #FF512B;
+		cursor: pointer;
+	}
+}
+.money{
+	color: #FF512B;
+	font-weight: bold;
+}
+/deep/{
+	.el-dialog{
+		border-radius: 4px;
+	}
+	.el-dialog__header{
+		padding: 30px 0 15px;
+	}
+	.el-dialog__title{
+		font-size: 20px;
+		font-weight: bold;
+	}
+	.el-dialog__body{
+		padding-top: 0;
+		padding-bottom: 50px;
+	}
+	.el-dialog__headerbtn{
+		top: 32px;
+		right: 30px;
+	}
+}
+</style>
\ No newline at end of file
diff --git a/components/UIGoodsInfo.vue b/components/UIGoodsInfo.vue
new file mode 100644
index 0000000..eeaae78
--- /dev/null
+++ b/components/UIGoodsInfo.vue
@@ -0,0 +1,56 @@
+<!--
+ * @Author: ch
+ * @Date: 2022-05-08 14:41:42
+ * @LastEditors: ch
+ * @LastEditTime: 2022-05-08 15:11:29
+ * @Description: file content
+-->
+<template>
+	<div class="ui-goods-info">
+		<div class="ui-goods-info--img">
+			<img :src="goods.productImageUrl"/>
+		</div>
+		<p>
+			<b>{{goods.productName}}</b>
+			<span>{{goods.skuDescribe}}{{goods.productName}}</span>
+		</p>
+	</div>
+</template>
+<script>
+export default {
+	props : {
+		goods : {
+			type : Object,
+			default : () => ({})
+		}
+	}
+}
+</script>
+<style lang="scss" scoped>
+.ui-goods-info{
+	display: flex;
+	&--img{
+		width: 100px;
+		height: 100px;
+		border: 1px solid #eee;
+	}
+	p{
+		width: 270px;
+		margin: 7px 0 0 18px;
+		text-align: left;
+		b{
+			display: block;
+			line-height: 22px;
+			margin-bottom: 10px;
+			overflow: hidden;
+			text-overflow:ellipsis;
+			display:-webkit-box; 
+			-webkit-box-orient:vertical;
+			-webkit-line-clamp:2; 
+		}
+		span{
+			color: #999;
+		}
+	}
+}
+</style>
\ No newline at end of file
diff --git a/components/UiLineBox.vue b/components/UiLineBox.vue
index e69de29..490b906 100644
--- a/components/UiLineBox.vue
+++ b/components/UiLineBox.vue
@@ -0,0 +1,29 @@
+<!--
+ * @Author: ch
+ * @Date: 2022-05-07 22:40:55
+ * @LastEditors: ch
+ * @LastEditTime: 2022-05-08 14:24:16
+ * @Description: file content
+-->
+<template>
+	<div class="ui-line-box">
+		<div class="ui-line-box--head">
+			<slot name="head"></slot>
+		</div>
+		<slot name="body"></slot>
+	</div>
+</template>
+<script>
+export default {
+	
+}
+</script>
+<style lang="scss" scoped>
+.ui-line-box{
+	border:1px solid #ddd;
+	&--head{
+		height: 42px;
+		background: #f8f8f8;
+	}
+}
+</style>
\ No newline at end of file
diff --git a/components/UiMoney.vue b/components/UiMoney.vue
index 75d22c9..230095e 100644
--- a/components/UiMoney.vue
+++ b/components/UiMoney.vue
@@ -2,17 +2,108 @@
  * @Author: ch
  * @Date: 2022-05-04 17:44:29
  * @LastEditors: ch
- * @LastEditTime: 2022-05-04 17:44:52
- * @Description: file content
+ * @LastEditTime: 2022-05-08 17:24:29
+ * @Description: 金额显示UI组件，金额￥和小数点显示大小不同，以及需不需要小数点
+ props
+ money 金额 数组或字符串
+ float 是否需要展示小数点
+ prefix 是否需要把￥前缀单独提取到一个标签 
+ suffix 是否需要把小数点后缀单独提取到一个标签
+ preSize 前缀字体大小 Strin 记得带单位 浏览器支持的单位都可以 默认12px
+ sufSize 小数点字体大小 Strin 记得带单位 浏览器支持的单位都可以 默认12px
+ size 整数数字体大小 Strin 记得带单位 浏览器支持的单位都可以 默认14px
+
 -->
+
 <template>
-	<div>我是金额展示组件</div>
+	<div class="ui-money">
+		<span v-if="prefix" :style="preStyle" class="ui-money--prefix">￥</span>
+		<span :style="style" class="ui-money--price">{{moneyStr}}</span>
+		<span v-if="float && suffix" :style="sufStyle" class="ui-money--suffix">.{{moneyArr[1]}}</span>
+	</div>
 </template>
 <script>
 export default {
-	
+	props : {
+		money : {
+			type : Number | String,
+			default : '0'
+		},
+		float : {
+			type : Boolean,
+			default : false
+		},
+		prefix : {
+			type : Boolean,
+			default : false
+		},
+		suffix : {
+			type : Boolean,
+			default : false
+		},
+		sufSize : {
+			type : String,
+			default : '12px'
+		},
+		preSize : {
+			type : String,
+			default : '12px'
+		},
+		size : {
+			type : String,
+			default : '14px'
+		}
+	},
+	computed : {
+		sufStyle(){
+			return {
+				fontSize : this.sufSize
+			}
+		},
+		preStyle(){
+			return {
+				fontSize : this.preSize
+			}
+		},
+		style(){
+			return {
+				fontSize : this.size
+			}
+		},
+		moneyStr (){
+			let priceStr = '',
+				intNum = this.moneyArr[0],
+				floatNum = this.moneyArr[1];
+			// 前缀不需要缩小显示
+			if(!this.prefix){
+				priceStr = `￥${intNum}`;
+			}else{
+				priceStr = intNum;
+			}
+			// 后缀不需要缩小显示
+			if(!this.suffix){
+				priceStr += floatNum ? `.${floatNum}` : '';
+			}
+			return priceStr;
+		},
+		moneyArr (){
+			let moneyArr = (this.money || '0').toString().split('.');
+			// 如果需要补0 则整数时补00
+			if(this.float){
+				if(!moneyArr[1]){
+					moneyArr[1] = '00';
+				}else if(moneyArr[1].length < 1){
+					moneyArr[1] = `${moneyArr[1]}0`;
+				}
+			}
+			return moneyArr;
+		}
+
+	}
 }
 </script>
 <style lang="scss" scoped>
-
+.ui-money{
+	font-size: 0;
+}
 </style>
\ No newline at end of file
diff --git a/layouts/default.vue b/layouts/default.vue
index 4a373e2..514bb40 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -2,7 +2,7 @@
  * @Author: ch
  * @Date: 2022-05-04 17:56:39
  * @LastEditors: ch
- * @LastEditTime: 2022-05-07 23:02:34
+ * @LastEditTime: 2022-05-08 15:53:49
  * @Description: file content
 -->
 <template>
@@ -25,4 +25,8 @@ export default {
   width: 1200px;
   margin: 0 auto;
 }
+.layout-footer{
+  height: 189px;
+  background: #ddd;
+}
 </style>
diff --git a/pages/account/index.vue b/pages/account/index.vue
new file mode 100644
index 0000000..0710e02
--- /dev/null
+++ b/pages/account/index.vue
@@ -0,0 +1,35 @@
+<!--
+ * @Author: ch
+ * @Date: 2022-05-08 17:48:36
+ * @LastEditors: ch
+ * @LastEditTime: 2022-05-08 20:03:35
+ * @Description: file content
+-->
+<template>
+	<div class="account">
+		<div class="account--nav">左侧栏</div>
+		<nuxt-child class="account--main"/>
+	</div>
+</template>
+<script>
+export default {
+	
+}
+</script>
+<style lang="scss" scoped>
+.account{
+  padding-top: 370px;
+  margin:  0 auto;
+  display: flex;
+  &--nav{
+	  width: 170px;
+	  height: 300px;
+	  border: 1px solid #ddd;
+	  border-radius: 4px;
+	  margin-right: 30px;
+  }
+  &--main{
+	  flex: 1;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/pages/account/address.vue b/pages/account/index/address.vue
similarity index 100%
rename from pages/account/address.vue
rename to pages/account/index/address.vue
diff --git a/pages/account/home/index.vue b/pages/account/index/home/index.vue
similarity index 100%
rename from pages/account/home/index.vue
rename to pages/account/index/home/index.vue
diff --git a/pages/account/home/module/LogisitcsInfo.vue b/pages/account/index/home/module/LogisitcsInfo.vue
similarity index 100%
rename from pages/account/home/module/LogisitcsInfo.vue
rename to pages/account/index/home/module/LogisitcsInfo.vue
diff --git a/pages/account/home/module/Message.vue b/pages/account/index/home/module/Message.vue
similarity index 100%
rename from pages/account/home/module/Message.vue
rename to pages/account/index/home/module/Message.vue
diff --git a/pages/account/message.vue b/pages/account/index/message.vue
similarity index 100%
rename from pages/account/message.vue
rename to pages/account/index/message.vue
diff --git a/pages/order/detail/index.vue b/pages/account/index/order/detail/index.vue
similarity index 100%
rename from pages/order/detail/index.vue
rename to pages/account/index/order/detail/index.vue
diff --git a/pages/account/index/order/list/index.vue b/pages/account/index/order/list/index.vue
new file mode 100644
index 0000000..21ffa75
--- /dev/null
+++ b/pages/account/index/order/list/index.vue
@@ -0,0 +1,165 @@
+<!--
+ * @Author: ch
+ * @Date: 2022-05-04 20:47:29
+ * @LastEditors: ch
+ * @LastEditTime: 2022-05-08 21:17:05
+ * @Description: file content
+-->
+<template>
+	<div>
+		<ul class="tab">
+			<li v-for="item in tabs" :key="item.value" @click="changeTab(item.value)"
+				:class="tabActive == item.value && 'tab__active'">
+				{{item.label}}
+				<span>6</span>
+			</li>
+		</ul>
+		<div class="order" v-for="item in orderList" :key="item.orderId">
+			<div class="order--head"></div>
+			<table class="order--table">
+				<tbody>
+					<tr v-for="(i, idx) in item.products" :key="i.orderProductId">
+						<td width="620px">
+							<div class="order--product">
+								<UIGoodsInfo :goods="i"/>
+								<p>{{i.realAmount}}</p>
+								<p>{{i.quantity}}</p>
+							</div>
+						</td>
+						<template  v-if="!idx">
+							<td width="119px" :rowspan="item.products.length">{{item.payAmount}}</td>
+							<td width="110px" :rowspan="item.products.length">{{item.orderStatusDesc}}</td>
+							<td :rowspan="item.products.length">
+								<button v-if="item.orderStatus === 1" @click="pay(item)">去支付</button>
+								<button v-if="[2,3].includes(item.orderStatus)" 
+									@click="$router.push(`./detail?id=${item.orderId}`)">查看详情</button>
+								<button  v-if="item.orderStatus >= 4" 
+									@click="$router.push(`/logisitcsInfo?orderId=${item.orderId}`)">查看物流</button>
+								<button  v-if="item.orderStatus === 4" @click="receive(item)">确认收货</button>
+							</td>
+						</template>
+					</tr>
+				</tbody>
+			</table>
+		</div>
+		<el-pagination v-if=" orderTotal > pageSize" background layout="prev, pager, next" 
+			:current-page.sync="pageIndex"
+			:total="orderTotal" @current-change="getOrderList"></el-pagination>
+	</div>
+</template>
+<script>
+import {ApiGetOrderList, ApiPutOrderReceive} from '~/plugins/api/order';
+import UIGoodsInfo from '../../../../../components/UIGoodsInfo.vue';
+import UiLineBox from '../../../../../components/UiLineBox.vue';
+export default {
+	components: { UiLineBox, UIGoodsInfo },
+	data(){
+		return {
+			tabs : [
+				{label : '全部', value : -1},
+				{label : '待付款', value : 1},
+				{label : '待发货', value : 3},
+				{label : '待收货', value : 4},
+			],
+			tabActive : this.$route.query.type || -1,
+			pageIndex : 1,
+			pageSize : 15,
+			orderList : [],
+			orderTotal : 0
+		}
+	},
+	mounted(){
+		this.getOrderList()
+	},
+	methods : {
+		changeTab(val){
+			if(val === this.$route.query.type){
+				return false;
+			}
+			this.$router.replace({
+				query:{
+					type : val
+				}
+			})
+			this.pageIndex = 1;
+			this.tabActive = val;
+			this.getOrderList();
+			
+		},
+		async getOrderList(){
+			const {error, result} = await ApiGetOrderList({
+				length : this.pageSize,
+				pageIndex : this.pageIndex,
+				orderStatus : this.tabActive > -1 ? this.tabActive : null
+			});
+			if(error){
+				this.message.warning(error.message);
+				return false;
+			}
+			this.orderList = result.records;
+			this.orderTotal = result.total
+		},
+		pageChange(){
+			
+		}
+	}
+}
+</script>
+<style lang="scss" scoped>
+.tab {
+	height: 42px;
+	line-height: 42px;
+	border-bottom: 1px solid #ddd;
+	li{
+		float: left;
+		margin-right: 54px;
+		font-size: 16px;
+		cursor: pointer;
+		span{
+			color: #FF875B;
+		}
+	}
+	&__active{
+		color: #FF875B;
+		position: relative;
+		&::after{
+			display: block;
+			height: 2px;
+			width: 100%;
+			content: '';
+			background: #FF875B;
+			position: absolute;
+			bottom: 0;
+		}
+	}
+}
+.order{
+	margin: 10px 0;
+	&--head{
+		height: 42px;
+		color: #999;
+		background: #F8F8F8;
+		border: 1px solid #ddd;
+		border-bottom: 0;
+	}
+	&--table{
+		width: 100%;
+		td{
+			border: 1px solid #ddd;
+			padding: 20px;
+			text-align: center;
+		}
+		tr:first-child td{
+			border-top: 0;
+		}
+	}
+	&--product{
+		display: flex;
+		align-items: center;
+		p{
+			width: 96px;
+			text-align: center;
+		}
+	}
+}
+</style>
\ No newline at end of file
diff --git a/pages/order/saleAfter/detail.vue b/pages/account/index/order/list/module/Tab.vue
similarity index 100%
rename from pages/order/saleAfter/detail.vue
rename to pages/account/index/order/list/module/Tab.vue
diff --git a/pages/order/saleAfter/list.vue b/pages/account/index/order/saleAfter/detail.vue
similarity index 100%
rename from pages/order/saleAfter/list.vue
rename to pages/account/index/order/saleAfter/detail.vue
diff --git a/pages/account/index/order/saleAfter/list.vue b/pages/account/index/order/saleAfter/list.vue
new file mode 100644
index 0000000..e69de29
diff --git a/pages/account/userInfo.vue b/pages/account/index/userInfo.vue
similarity index 100%
rename from pages/account/userInfo.vue
rename to pages/account/index/userInfo.vue
diff --git a/pages/order/list/index.vue b/pages/order/list/index.vue
deleted file mode 100644
index 5f0a200..0000000
--- a/pages/order/list/index.vue
+++ /dev/null
@@ -1,32 +0,0 @@
-<!--
- * @Author: ch
- * @Date: 2022-05-04 20:47:29
- * @LastEditors: ch
- * @LastEditTime: 2022-05-04 21:49:40
- * @Description: file content
--->
-<template>
-	<div>
-		<h1>我是订单列表</h1>
-		<a href="/">回首页</a>
-	</div>
-</template>
-<script>
-import {ApiGetOrderList} from '~/plugins/api/order';
-export default {
-  name: 'IndexPage',
-  asyncData(){
-      
-  },
-  mounted(){
-    this.getData();
-  },
-  methods : {
-    async getData(){
-      const res = await ApiGetOrderList();
-      console.log(res);
-
-    }
-  }
-}
-</script>
\ No newline at end of file
diff --git a/pages/order/submit/index.vue b/pages/order/submit/index.vue
index 552c77a..289045e 100644
--- a/pages/order/submit/index.vue
+++ b/pages/order/submit/index.vue
@@ -2,7 +2,7 @@
  * @Author: ch
  * @Date: 2022-05-04 17:30:58
  * @LastEditors: ch
- * @LastEditTime: 2022-05-08 01:17:18
+ * @LastEditTime: 2022-05-08 16:25:39
  * @Description: file content
 -->
 
@@ -13,24 +13,32 @@
 			<el-radio label="微信支付" />
 			<el-radio label="支付宝支付" />
 		</div>
-		<div v-for="item in orderInfo.products" :key="item.productId">
-			<div>{{item.productName}}</div>
+		<h3 class="title">确认商品信息</h3>
+		<OrderInfo :products="orderInfo.products" />
+		<Message :orderInfo="orderInfo" :message.sync="userMessage"/>
+		<Amount :amount="orderInfo.payAmount"/>
+		<div class="pay">
+			<button class="btn" @click="submit">立即支付</button>
 		</div>
-		<button @click="submit">立即支付</button>
 		<BsPay :visible.sync="payVisible" :orderId="orderId" @cancel="cancelPay"/>
 	</div>
 </template>
 <script>
 import {ApiPostSubmitOrder, ApiGetBeforeOrder, ApiGetBeforeCartOrder} from '@/plugins/api/order';
 import BsPay from '../../../components/BsPay.vue';
+import UIGoodsInfo from '../../../components/UIGoodsInfo.vue';
+import OrderInfo from './module/OrderInfo.vue';
+import Message from './module/Message.vue';
+import Amount from './module/Amount.vue';
 export default {
-	components: { BsPay },
+	components: { BsPay, UIGoodsInfo, OrderInfo, Message, Amount },
 	data(){
 		return {
 			address : {id:3},
 			orderInfo : {},
 			orderId : '',
-			payVisible : false
+			userMessage : '',
+			payVisible : true
 		}
 	},
 	created(){
@@ -116,4 +124,18 @@ export default {
 	border: 1px solid #DDDDDD;
 	padding: 30px 70px;
 }
+.pay{
+	text-align: right;
+	padding-bottom: 50px;
+	.btn{
+		background: #FF512B;
+		color: #fff;
+		font-size: 18px;
+		border: none;
+		height: 50px;
+		width: 163px;
+		margin-top: 10px;
+	}
+}
+
 </style>
\ No newline at end of file
diff --git a/pages/order/submit/module/Amount.vue b/pages/order/submit/module/Amount.vue
new file mode 100644
index 0000000..5fffc7f
--- /dev/null
+++ b/pages/order/submit/module/Amount.vue
@@ -0,0 +1,49 @@
+<!--
+ * @Author: ch
+ * @Date: 2022-05-08 16:12:18
+ * @LastEditors: ch
+ * @LastEditTime: 2022-05-08 16:14:57
+ * @Description: file content
+-->
+<template>
+	<div class="amount">
+		<div>
+			<span>应付款</span>
+			<b>{{amount}}</b>
+		</div>
+		<p>北京市XXXXX区XXXX路xxxxxx小区XXX单元</p>
+		<p>卖火柴的灰姑凉 18888888888</p>
+	</div>
+</template>
+<script>
+export default {
+	props : {
+		amount : {
+			type : Number,
+			default : 0
+		},
+		address : {
+			type : Object,
+			default : () => ({})
+		}
+		
+	}
+}
+</script>
+<style lang="scss" scoped>
+.amount{
+	height: 133px;
+	background: #f8f8f8;
+	text-align: right;
+	padding: 20px 40px;
+	margin-top: 10px;
+	b{
+		font-size: 20px;
+	}
+	p{
+		font-size: 12px;
+		color: #9E9E9E;
+		margin-top: 15px;
+	}
+}
+</style>
\ No newline at end of file
diff --git a/pages/order/submit/module/Message.vue b/pages/order/submit/module/Message.vue
new file mode 100644
index 0000000..f33b5af
--- /dev/null
+++ b/pages/order/submit/module/Message.vue
@@ -0,0 +1,95 @@
+<!--
+ * @Author: ch
+ * @Date: 2022-05-08 16:06:28
+ * @LastEditors: ch
+ * @LastEditTime: 2022-05-08 16:18:51
+ * @Description: file content
+-->
+<template>
+	<div class="message">
+		<div class="message--left">
+			<label>买家留言</label>
+			<el-input type="textarea"  class="textarea" placeholder="填写您想要备注的信息，50字以内" 
+				show-word-limit :maxlength="50" v-model="myMsg"/>
+		</div>
+		<div>
+			<p>
+				<label>商品总额</label>
+				<b>￥{{orderInfo.totalAmount}}</b>
+			</p>
+			<p>
+				<label>运费</label>
+				<b>￥{{orderInfo.shippingAmount}}</b>
+			</p>
+		</div>
+	</div>
+</template>
+<script>
+export default {
+	props : {
+		orderInfo : {
+			type: Object,
+			defautl : ()=>({})
+		},
+		message : {
+			type : String,
+			default : ''
+		}
+	},
+	computed : {
+		myMsg : {
+			get(){
+				return this.message;
+			},
+			set(val){
+				this.$emit('update:message',val)
+			}
+		}
+	}
+}
+</script>
+<style lang="scss" scoped>
+.message{
+	height: 110px;
+	border: 1px solid #ddd;
+	border-top: 0;
+	padding: 20px 40px 20px 20px;
+	display: flex;
+	justify-content: space-between;
+	&--left{
+		display: flex;
+		label{
+			margin: 11px 16px 0 0;
+		}
+	}
+	label{
+		color: #666;
+	}
+	p{
+		display: flex;
+		justify-content: space-between;
+		width: 308px;
+		margin: 11px 0;
+	}
+}
+/deep/ {
+	.textarea {
+		display: inline-block;
+		width: 467px;
+		textarea{
+			height: 70px;
+			background: #f8f8f8;
+			border: none;
+			resize:none;
+			&::placeholder{
+				color: #999;
+				font-size: 12px;
+			}
+		}
+		span{
+			background: #f8f8f8;
+
+		}
+	}
+}
+</style>
\ No newline at end of file
diff --git a/pages/order/submit/module/OrderInfo.vue b/pages/order/submit/module/OrderInfo.vue
index c2ea61e..67c94a3 100644
--- a/pages/order/submit/module/OrderInfo.vue
+++ b/pages/order/submit/module/OrderInfo.vue
@@ -2,15 +2,40 @@
  * @Author: ch
  * @Date: 2022-05-04 17:36:46
  * @LastEditors: ch
- * @LastEditTime: 2022-05-07 22:42:40
+ * @LastEditTime: 2022-05-08 16:04:39
  * @Description: file content
 -->
 
 <template>
-	<div>我是订单商品模块</div>
+	<table class="goods">
+		<thead>
+			<tr>
+				<th width="600">商品信息</th>
+				<th>单价</th>
+				<th>数量</th>
+				<th>小计</th>
+			</tr>
+		</thead>
+		<tbody>
+			<tr v-for="item in products" :key="item.productId">
+				<td>
+					<UIGoodsInfo :goods="item"></UIGoodsInfo>
+				</td>
+				<td>￥{{item.realPrice}}</td>
+				<td>{{item.quantity}}</td>
+				<td>￥{{item.realAmount}}</td>
+			</tr>
+		</tbody>
+	</table>
 </template>
 <script>
 export default {
+	props : {
+		products : {
+			type : Array,
+			default : ()=>([])
+		}
+	},
 	data(){
 		return {
 			
@@ -20,5 +45,24 @@ export default {
 }
 </script>
 <style lang="scss" scoped>
-
+.goods{
+	width: 100%;
+	border: 1px solid #ddd;
+	th{
+		height: 42px;
+		background: #f8f8f8;
+		color: #999;
+		font-weight: normal
+	};
+	td{
+		text-align: center;
+		padding: 10px 20px;
+	}
+	tbody tr:first-child td{
+		padding-top: 20px
+	}
+	tbody tr:last-child td{
+		padding-bottom: 20px
+	}
+}
 </style>
\ No newline at end of file