From 0f0b28338772ee657788372e932f046f887e55d9 Mon Sep 17 00:00:00 2001
From: ch <cwl_ch@163.com>
Date: Mon, 9 May 2022 21:30:47 +0800
Subject: [PATCH] =?UTF-8?q?=E8=AE=A2=E5=8D=95=E8=AF=A6=E6=83=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 assets/img/account/order_status_1.png         | Bin 0 -> 1924 bytes
 assets/img/account/order_status_2.png         | Bin 0 -> 928 bytes
 assets/img/account/order_status_3.png         | Bin 0 -> 763 bytes
 assets/img/account/order_status_4.png         | Bin 0 -> 752 bytes
 assets/img/account/order_status_5.png         | Bin 0 -> 812 bytes
 assets/scss/global.scss                       |   2 +-
 components/BsPay.vue                          |  28 ++--
 components/UiButton.vue                       |  15 +-
 components/UiDialog.vue                       |  27 +++
 components/UiLineBox.vue                      |   4 +-
 pages/account/index.vue                       |   2 +-
 pages/account/index/order/detail/index.vue    |  66 +++++++-
 .../index/order/detail/module/Cancel.vue      | 122 ++++++++++++++
 .../index/order/detail/module/GoodsInfo.vue   | 127 ++++++++++++++
 .../order/detail/module/LogisitcsInfo.vue     | 136 +++++++++++++++
 .../index/order/detail/module/StatusInfo.vue  | 157 ++++++++++++++++++
 .../index/order/detail/module/StatusStep.vue  |  72 ++++++++
 pages/order/submit/index.vue                  |   4 +-
 18 files changed, 737 insertions(+), 25 deletions(-)
 create mode 100644 assets/img/account/order_status_1.png
 create mode 100644 assets/img/account/order_status_2.png
 create mode 100644 assets/img/account/order_status_3.png
 create mode 100644 assets/img/account/order_status_4.png
 create mode 100644 assets/img/account/order_status_5.png
 create mode 100644 components/UiDialog.vue
 create mode 100644 pages/account/index/order/detail/module/Cancel.vue
 create mode 100644 pages/account/index/order/detail/module/GoodsInfo.vue
 create mode 100644 pages/account/index/order/detail/module/LogisitcsInfo.vue
 create mode 100644 pages/account/index/order/detail/module/StatusInfo.vue
 create mode 100644 pages/account/index/order/detail/module/StatusStep.vue

diff --git a/assets/img/account/order_status_1.png b/assets/img/account/order_status_1.png
new file mode 100644
index 0000000000000000000000000000000000000000..bfeff83d2cd9540378af4da617180e6745807669
GIT binary patch
literal 1924
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

literal 0
HcmV?d00001

diff --git a/assets/img/account/order_status_2.png b/assets/img/account/order_status_2.png
new file mode 100644
index 0000000000000000000000000000000000000000..b8082d6d5985fbb1e742997ee53abe81d56a93c7
GIT binary patch
literal 928
zcmeAS@N?(olHy`uVBq!ia0vp^P9V&|3?#2~eYgdr7>k44ofy`glX(f`ybbUPaRt&q
z(9qBj8XCH4)hZw(EiG-*q)GGV&+qH&12SgLoY~&q4q;E9K7GQ32~(#|?eFiOJbCiG
zdGi)6TC`%tigoMOZQ8VH<Hn6!wrtt4W5@RG+kxbsJ$rWU+_`VxzJp+J;J|?+U~uTr
zAs`JT4<9~!?AS3N8_0l@N5SAY5;$?<#HmxKPM<yvBu|0?kO2fh5s2WKGiQJd2nlBZ
zxex#mfv|hnLz#fS^(zVT3ua(sVrFJxW#{1J;};YX6%&_`l#*4{(Kj-&vUPBDaSe`&
zOH9wm$;r*nFDNc4uWRk>nKW(sqRm@&?>lzv<jKodZr{8A=-JD+AHID3{{44p>5EVX
z1}1h-7srr@!)s^UjAAn6Y31g5RFa?}d?Z#-{Eq9L@|Z&9_x~;Kb(~UpyXDgVY2Rv8
zEpsOcI=Ks+@>(O*;Br({lI_sMppaIPt1D9W+fU$%n6ky%d*hsjX-i_xh@9|lW?*no
z`kdD4$vSg|XS0JIllG!HehUSfRSO-3-C3_`n5_~vEm&Z7aLz$b#szNY0s|g&cpX(1
zZ#Mpz5vTNn{bI-B2l0PCM%XC}tTu1{cT-5XFMhrE<$u3^$to$;t-EmliN77M`RaXt
z8}5IR{&J4jIQklwkL;cY`pZikfBtU0D3|njJ;S4fiE_#(I*us!UApS(JiqVmYC*l{
zGnQ~Dx^Ny_bVPddy;oToS1r3IU6*@Sy<(~P{B^ueEG`Q__OQ*n{EoxLL&fjH3D2y`
z6HC6_(<$`76s0IM!!fJU^~htdBRv~sRHt~nQJHt^tm4aTr2}4%Ql-rLr&rcTd6gu{
ze@vb>eZz0%TnqOjy4$Wqw|y4)CU8IfMpe?xEB|EH$m)K0dgNNv-@|hik3<#4#CtrO
zW$D#&CbfJD#|-u3zKc%T*5nBZe*d#?mT26|&)#QB6Q}K1;M%ZcYv!~Jqoo}pN7i{R
zJS^%GH7$C3{-1x_UyDUg>pkn}<{Y;rE6~T|wVUT{^Jlf&vh8NM$**1A&UVXP`hD_@
z4~Cb1NUW*pDYt9$(O<l-zw!3z8}FY!ZhovjLI17a#)o`iU+#eNmZz(q%Q~loCIGCy
B+%W(E

literal 0
HcmV?d00001

diff --git a/assets/img/account/order_status_3.png b/assets/img/account/order_status_3.png
new file mode 100644
index 0000000000000000000000000000000000000000..0fb88de99e70dd76a985262dae24a88455779949
GIT binary patch
literal 763
zcmeAS@N?(olHy`uVBq!ia0vp^P9V&|3?#2~eYgdr7>k44ofy`glX(f`tPAi7aRt&q
z(9qBj8XCH4)hZw(EiG-*q)GGV&+qH&12SgLoY~&q4q;E9K7GQ32~(#|?eFiOJbCiG
zdGnSnTefA(mLo@w90!9FU~m!)PMtahq|YFMvuDqqKY#whg$oxiUc7eg+Kn4GZr!?d
z`}Xa7_wL=lfB(UQ2M-@UeDvti<HwJmKY#w})vGse-n@JF?!$)<pFVy1{Q2{jFJJDT
z-uMaVT;-A=zhDMNCT3<9R(1|fK7K(VQ894|Nhw(ktAeWOv*s;ay8GCN@4s(o2Z{nc
zea6$pF(l&f+8LR}O$GvOfq^OxJ&{|#eej8{j;PMy|My>h_2G=wX~M!czE3{<z&P=H
zDu2^~B?f7d;zABw^EO)W*odmiS_G<h-uW+Y#JGZ`*xK88YQhws+3Ad>X^bKQVcUgo
zF`e_;qT3L~<mZ*8=G5H0xZ<#YJL5T_jF9Nq4*}a-=N#<bkecy4gX6;#i%$36=IuWU
z<AgL8J~<H>;KeSty1R(u<NH!J)uaDDX`WVkVz*gyO4zQ|2EP=m%#F8RW>Nb+fAi~k
zWjz-}Iu{0UIIUc$C{<<kE0{Uy*7Zq2AyIz?!cR2>Ouw~PFzd|0I~_Cl4Z5?g${jn^
z5s<vrJm)i`s3_aUx{rs{-oBIYUb%_WGdoOlBI_QlCgo$FTsj=WTu(5pQaZr6v1b2P
z<#YBYwC?My;ZNdwe)n?m!hW0obz535&$;4Tx4_&x=<Ky$HVS{%=v*_BuGttP8uk3=
z_2#n=Hac5e|30nY*p1V5O%;_}e<>aD>YKjRD&yg2CzXt!U!7bsgg-cP>=FH`AaPG1
zx5e_7z}9Uxn-ttKqL)eVakz<eId&$*ES8YcbPI1{oR!qGJVH$)OseZ>SJK|a5k{V2
mv0bgRQ{Jlo{PEx?=M!<k62qLZ_}ofRvh{TJb6Mw<&;$VK&vNhp

literal 0
HcmV?d00001

diff --git a/assets/img/account/order_status_4.png b/assets/img/account/order_status_4.png
new file mode 100644
index 0000000000000000000000000000000000000000..6cb6bc16bd08a5de66746406b1965d2ea92ecd1f
GIT binary patch
literal 752
zcmeAS@N?(olHy`uVBq!ia0vp^P9V&|3?#2~eYgdr7>k44ofy`glX(f`%na}eaRt&q
z(9qBj8XCH4)hZw(EiG-*q)GGV&+qH&12SgLoY~&q4q;E9K7GQ32~(#|?eFiOJbCiG
zdGnSnTefA(mLo@w90!9FU~m!)PMtahq|YFM^XJcBym;}_rAxPO-@bF_&fU9rA3b{X
z`0?Y{uV24;^XBc_w;w)y`1tYTr%#{0eEH(r8rutWnQ}>xUoZnB6EialD?0}#AHSfG
zsF=8fq?D|NRYBGCS@RYy-F@uC_un_P14V)UyXNWQ7!q-K?Tqa5CIg<f)r&kDqohmU
zJ=*H`ykz#{|NnOwF89lc(tPsw$ioZITU4GfC7ZDd`nQHKcy&#2XZ#!@@%@3@UJIRi
zy9Yu6o^j`<l`T4;HFe8-rdf9wEu1PY`@Znnp?$NILCSDS(47r}QA}Q5TXgEC1Vjma
z&05Yc_o`e#dJl)?;SGyb4+eiaCeO=wPw425BLR+uii;OaT3572bG71=`gO%CH0nB+
zuj&eTenKrE^5n`xGu(LM#C|Q2JacY(_w&X?w}j6}BC=T)e!cOC*I4H8PF6#CDM!n&
zsLLJdxsET~AKw)4J#+C=S47_i5z|$+K3hc>E_cg6@tDz6bi;`~KOao`SklrOvb&|l
zbZxiC%oW`N9!Zr-D#4|KU5=7Rvi|SgsJK8R>Fdl?cI!hQmDcax&aHU+cKnft=l(qT
zJ@doXZM!cEUUB|*T0>~V0;{0x$@9;axiU?QTE}uft$vqM0;k+grA?+BQa{fyr3Y-^
z&eB`+#^dBpyN#ALYv$g(>C8Ppyy<wx&#z7`8NweNJ@$zHRIs=w5Zj`9OQ3g~O`(EX
zM)WcXJ`OjLF2~M<n8gxOnr`7ujI)w@mPe>*gh_QB?Mm9aIKs#?EViq4cFJ4zpFbb`
b<bJ|#s&8=mLpIk|P+IkL^>bP0l+XkKSW0Tx

literal 0
HcmV?d00001

diff --git a/assets/img/account/order_status_5.png b/assets/img/account/order_status_5.png
new file mode 100644
index 0000000000000000000000000000000000000000..f69329aea2bc2d6fd938e75170349b2973be096c
GIT binary patch
literal 812
zcmeAS@N?(olHy`uVBq!ia0vp^P9V&|3?#2~eYgdr7>k44ofy`glX(f`Yz*)TaRt&q
z(9qBj8XCH4)hZw(EiG-*q)GGV&+qH&12SgLoY~&q4q;E9K7GQ32~(#|?eFiOJbCiG
zdGi)6S_IU!X3d%vD^{#qw{8a*?Afzt-@bkO_wPS=@ZjOYhYx|l5imG@{P>9zCm`g>
zlP7^}APEGgPMv}?fNUT*efsp7GiM+qkO2o*!&;vJU2Ihn<QL4q$i&Rd!phFU$;U4!
zBq}B@At@!RsG_Z-Z|mseA0CyMnwe8KdDiSjOP6ilvj5PrW2Y|Me);ypm+!xIg*_C2
z!SUGB#W5t}@Y)$SoemiYxH5})U(P)d!YUf>5*WkS_~(E7PlZd%d@pS|Q|oj2a*EN+
zr9CsBu-f=JC~$cs$yKab_{ZSrq)Qjd>+e5qh+-^{_O=(wn9}iUYlGf)1_43V_qRBi
z4@4b2!1SW!#gYxlN?(LZLM|EK5WEn%VC$=s0@4{3iz1zsnI3J})F+qV?08acE{n8w
z;Ca;}VqBvAhr+aeM2O!~RQO)nr+bwDx#lgUBmYmj-H5tqcc|kV$3xll&O1^CJWLYF
zXUgZ-f8F<YX8%>g{S%Y#y<IY;$aLL~j9WblPh-yV_EfHGxozvX?rLE_YhTOBH2(?K
zUmX|NUb=kp?9Pb_`%fR2%AU4oTG96zk{qAn=E`o)S~K%c?l05J!t+i|bblN%|M$+#
zhfgeRZ8)$>JVo2Pr+aE^LsO{l#QLHzMV(ErYIu_rMcrf>O{F#8)r9#A?5d91^8fRu
zwuS>jr*i|oPJ4N|^W4@iJ?oA4K0n?zBQ$je#|hu-Yt9%585qQsO-)o=kj`i6daNi#
zWy!V!-zNwk`*tUXZ+|d5)30wT25Z$FVzqYtyRjzT?d!@81x2AHsa=m67Pu_bn8I<&
zv}@7CMJ1{l3p7tvbfq;dTDmY}jm9nOF15)^t}e~k;d!fW(tLj2`o=#@&8bGuqm?yh
Pg3`ICtDnm{r-UW|3+a(C

literal 0
HcmV?d00001

diff --git a/assets/scss/global.scss b/assets/scss/global.scss
index 3a48ed2..dfa9183 100644
--- a/assets/scss/global.scss
+++ b/assets/scss/global.scss
@@ -15,7 +15,7 @@
     @extend *;
   }
 }
-body, dl, dd, h1, h2, h3, h4, h5, p, figure, form, ul, ol { margin: 0; font-size: .16rem;}
+body, dl, dd, h1, h2, h3, h4, h5, p, figure, form, ul, ol { margin: 0; font-size: 14px;}
 ul, ol, input, button { padding: 0;}
 ul, ol, li { list-style: none;list-style-type: none}
 h1, h2, h3, h4, h5 { font-size: 100%;}
diff --git a/components/BsPay.vue b/components/BsPay.vue
index a7dc338..090930f 100644
--- a/components/BsPay.vue
+++ b/components/BsPay.vue
@@ -2,12 +2,12 @@
  * @Author: ch
  * @Date: 2022-05-08 00:39:50
  * @LastEditors: ch
- * @LastEditTime: 2022-05-08 17:25:08
+ * @LastEditTime: 2022-05-09 21:17:10
  * @Description: file content
 -->
 <template>
 	<el-dialog title="打开微信扫描付款" width="380px" class="box" center
-		 :visible="visible" @open="getCodeImg" @close="close">
+		 :visible.sync="myVisible" @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" 
@@ -41,26 +41,34 @@ export default {
 	},
 	data(){
 		return {
-			imgUrl : 'https://pay.mashibing.com/api/scan/imgs/d2VpeGluOi8vd3hwYXkvYml6cGF5dXJsP3ByPVo4alVpUmF6eg==.png',
+			imgUrl : '',
 			timerTxt : '',
 			timerStop : null,
-			startSecondNum : 1800
+			startSecondNum : 0
 		}
 	},
-	mounted(){
-		this.timer()
+	computed:{
+		myVisible : {
+			get(){
+				return this.visible;
+			},
+			set(val){
+				this.$emit('update:visible', val)
+			}
+		}
 	},
 	methods : {
 		async getCodeImg(){
+			this.startSecondNum = 1800;
+			// 待支付 开始倒计时
+			if(this.timerStop){
+				clearTimeout(this.timerStop);
+			}
 			this.timerStop = null;
 			const {error, result} = await ApiPostPayCdoeImg({orderId : this.orderId});
 			if(error){
 				return false;
 			}
-			// 待支付 开始倒计时
-			if(this.timerStop){
-				clearTimeout(this.timerStop);
-			}
 			this.timer();
 			this.imgUrl = result.dataInfo.codeImgData;
 		},
diff --git a/components/UiButton.vue b/components/UiButton.vue
index 99f397e..99d1aff 100644
--- a/components/UiButton.vue
+++ b/components/UiButton.vue
@@ -2,7 +2,7 @@
  * @Author: ch
  * @Date: 2022-05-09 11:31:29
  * @LastEditors: ch
- * @LastEditTime: 2022-05-09 14:22:43
+ * @LastEditTime: 2022-05-09 15:24:30
  * @Description: 按钮，每个类型有设置默认高， 宽度默认随内容变化，有特殊大小需要自定义class控制
  props
  type 固定按钮类型 红色面板 red_panel 红色描边red_line 黄色面板yellow_panel 黄色线条yellow_line 黄色渐变yellow_gradual 灰色grey
@@ -32,10 +32,8 @@ export default {
 	},
 	computed : {
 		myClass(){
-			let classStr = this.type ? `ui-button__${this.type}` : '';
-			if(this.radius && typeof this.radius === 'boolean'){
-				classStr += ' ui-button__radius'
-			}
+			let classStr = this.type ? ` ui-button__${this.type}` : '';
+			classStr += this.radius ? ` ui-button__radius` : '';
 			classStr += this.disabled ? ' ui-button__disabled' : '';
 			return classStr;
 		}
@@ -79,12 +77,15 @@ export default {
 		background:#FF512B;
 		height: 30px;
 		padding: 0 10px;
+		border: none;
 		color: #fff;
 	}
 	&__yellow_gradual{
-		background: linear-gradient(270deg, #FFA25A 0%, #FF7F39 100%);
-		height: 42px;
+		background: linear-gradient(90deg, #FFA25A 0%, #FF7F39 100%);
+		height: 30px;
+		border: none;
 		color: #fff;
+		padding: 0 10px;
 	}
 	&__grey{
 		background:#f5f5f5;
diff --git a/components/UiDialog.vue b/components/UiDialog.vue
new file mode 100644
index 0000000..a7e702c
--- /dev/null
+++ b/components/UiDialog.vue
@@ -0,0 +1,27 @@
+<!--
+ * @Author: ch
+ * @Date: 2022-05-09 20:00:57
+ * @LastEditors: ch
+ * @LastEditTime: 2022-05-09 20:04:59
+ * @Description: file content
+-->
+<template>
+	<el-dialog :visible="visible" @close="close">
+		<slot></slot>
+	</el-dialog>
+</template>
+<script>
+export default {
+	props: {
+		visible : {
+			type : Boolean,
+			default : false
+		}
+	},
+	methods:{
+		close(...args){
+			this.$emit('close', args)
+		}
+	}
+}
+</script>
\ No newline at end of file
diff --git a/components/UiLineBox.vue b/components/UiLineBox.vue
index 490b906..0f7b95f 100644
--- a/components/UiLineBox.vue
+++ b/components/UiLineBox.vue
@@ -2,7 +2,7 @@
  * @Author: ch
  * @Date: 2022-05-07 22:40:55
  * @LastEditors: ch
- * @LastEditTime: 2022-05-08 14:24:16
+ * @LastEditTime: 2022-05-09 16:04:47
  * @Description: file content
 -->
 <template>
@@ -23,6 +23,8 @@ export default {
 	border:1px solid #ddd;
 	&--head{
 		height: 42px;
+		line-height: 42px;
+		padding: 0 30px;
 		background: #f8f8f8;
 	}
 }
diff --git a/pages/account/index.vue b/pages/account/index.vue
index 0710e02..86c2400 100644
--- a/pages/account/index.vue
+++ b/pages/account/index.vue
@@ -18,7 +18,7 @@ export default {
 </script>
 <style lang="scss" scoped>
 .account{
-  padding-top: 370px;
+  padding: 30px 0;
   margin:  0 auto;
   display: flex;
   &--nav{
diff --git a/pages/account/index/order/detail/index.vue b/pages/account/index/order/detail/index.vue
index 7cb5044..213f690 100644
--- a/pages/account/index/order/detail/index.vue
+++ b/pages/account/index/order/detail/index.vue
@@ -2,9 +2,69 @@
  * @Author: ch
  * @Date: 2022-05-08 01:14:03
  * @LastEditors: ch
- * @LastEditTime: 2022-05-08 01:14:31
+ * @LastEditTime: 2022-05-09 20:50:56
  * @Description: file content
 -->
 <template>
-	<div>订单详情页</div>
-</template>
\ No newline at end of file
+	<div>
+		<div class="box">
+			<StatusInfo :orderInfo="orderInfo" @cancel="getOrderInfo"
+				@receive="getOrderInfo"/>
+			<StatusStep :orderInfo="orderInfo" />
+		</div>
+		<LogisitcsInfo :orderInfo="orderInfo" />
+		<div class="pay-type" v-if="orderInfo.payType !== 1">
+			<p>支付方式：{{orderInfo.payTypeDesc}}</p>
+			<p>支付时间：{{orderInfo.submitTime}}</p>
+		</div>
+		<GoodsInfo :orderInfo="orderInfo"/>
+	</div>
+</template>
+<script>
+import {ApiGetOrderDetail} from '@/plugins/api/order';
+import StatusInfo from './module/StatusInfo.vue';
+import StatusStep from './module/StatusStep.vue';
+import LogisitcsInfo from './module/LogisitcsInfo.vue';
+import GoodsInfo from './module/GoodsInfo.vue';
+export default {
+	components: { StatusInfo, StatusStep, LogisitcsInfo, GoodsInfo },
+	data(){
+		return {
+			orderInfo : {}
+		}
+	},
+	mounted(){
+		this.getOrderInfo();
+	},
+	methods:{
+
+		/**
+		 * 获取订单最新信息
+		 */
+		async getOrderInfo(){
+			const {error, result} = await ApiGetOrderDetail(this.$route.query.id);
+			if(error){
+				this.$message.warning(error.message);
+				return false;
+			}
+			this.orderInfo = {...result};
+		},
+	}
+}
+</script>
+<style lang="scss" scoped>
+.box{
+	border: 1px solid #ddd;
+	border-radius: 4px;
+	display: flex;
+}
+.pay-type{
+	border: 1px solid #ddd;
+	background: #f8f8f8;
+	height: 59px;
+	line-height: 59px;
+	padding: 0 30px;
+	display: flex;
+	justify-content: space-between;
+}
+</style>
\ No newline at end of file
diff --git a/pages/account/index/order/detail/module/Cancel.vue b/pages/account/index/order/detail/module/Cancel.vue
new file mode 100644
index 0000000..d8f52da
--- /dev/null
+++ b/pages/account/index/order/detail/module/Cancel.vue
@@ -0,0 +1,122 @@
+<!--
+ * @Author: ch
+ * @Date: 2022-05-09 20:20:02
+ * @LastEditors: ch
+ * @LastEditTime: 2022-05-09 20:41:46
+ * @Description: file content
+-->
+<template>
+	<el-dialog :visible.sync="myVisible" title="取消订单原因" width="380px">
+		<ul class="cancel">
+			<li v-for="item in cancelData" :key="item.value" @click="selected = item.value"
+				:class="selected == item.value && 'cancel__active'">
+				{{item.label}}
+			</li>
+		</ul>
+		<UiButton type="yellow_gradual" class="btn" :radius="true" :disabled="!selected"
+			@click="cancelOrder">确认取消</UiButton>
+	</el-dialog>
+</template>
+<script>
+import {ApiPutCancelOrder,ApiPutOrderReceive} from '@/plugins/api/order'
+import UiButton from '../../../../../../components/UiButton.vue';
+export default {
+	components: { UiButton },
+	props : {
+		visible : {
+			type : Boolean,
+			default : false
+		},
+		orderId : {
+			type : Number
+		}
+	},
+	data(){
+		return {
+			selected : '',
+			cancelData : [
+				{value : 1, label : '我不想买了'},
+				{value : 2, label : '地址信息填写错误'},
+				{value : 3, label : '商品降价'},
+				{value : 4, label : '商品无货'},
+				{value : 5, label : '其他'}
+			]
+		}
+	},
+	computed:{
+		myVisible : {
+			get(){
+				return this.visible;
+			},
+			set(val){
+				this.$emit('update:visible', val)
+			}
+		}
+	},
+	methods:{
+
+		async cancelOrder(){
+			const ooderId = this.orderId;
+			const {error, result} = await ApiPutCancelOrder({
+				cancelReasonType : this.selected,
+				orderId : ooderId
+			});
+			if(error){
+				this.$message.error(error.message);
+				return false;
+			}
+			this.myVisible = false;
+			this.$emit('cancel')
+			// 取消成功，跳到订单关闭页
+		}
+	}
+}
+</script>
+<style lang="scss" scoped>
+.cancel{
+	width: 320px;
+	margin: 0 auto;
+	display: flex;
+	flex-wrap: wrap;
+	justify-content: space-between;
+	margin-top: 10px;
+	li{
+		width: 150px;
+		height: 36px;
+		line-height: 36px;
+		text-align: center;
+		border: 1px solid #ddd;
+		cursor: pointer;
+		margin: 15px 0;
+		&.cancel__active{
+			border-color: #FF875B;
+			color: #FF875B;
+		}
+	}
+}
+.btn{
+	width: 320px;
+	height: 36px;
+	margin-top: 25px;
+}
+/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/pages/account/index/order/detail/module/GoodsInfo.vue b/pages/account/index/order/detail/module/GoodsInfo.vue
new file mode 100644
index 0000000..6591f31
--- /dev/null
+++ b/pages/account/index/order/detail/module/GoodsInfo.vue
@@ -0,0 +1,127 @@
+<!--
+ * @Author: ch
+ * @Date: 2022-05-09 16:24:49
+ * @LastEditors: ch
+ * @LastEditTime: 2022-05-09 21:26:52
+ * @Description: file content
+-->
+<template>
+	<div>
+		<table class="goods">
+			<thead>
+				<tr>
+					<th>商品信息</th>
+					<th width="96">单价</th>
+					<th width="96">数量</th>
+					<th width="163">实付款</th>
+					<th width="135">操作</th>
+				</tr>
+			</thead>
+			<tbody>
+				<tr v-for="i in products" :key="i.orderProductId">
+					<td class="not-border"><UIGoodsInfo :goods="i"/></td>
+					<td class="not-border">
+						<UiMoney :money="i.realAmount" float/>
+					</td>
+					<td class="not-border">{{i.quantity}}</td>
+					<td>
+						<UiMoney :money="i.realAmount" float/>
+					</td>
+					<td>
+						<template v-if="i.afterSaleApplyFlag || [2,3,4].includes(i.detailStatus)">
+							<a v-if="i.afterSaleApplyFlag">申请售后</a>
+							<span v-else>
+								{{ i.detailStatus === 2 ? '退款中' :  i.detailStatus === 3 ? '已退款' : '退款关闭'}}
+							</span>
+						</template>
+					</td>
+				</tr>
+			</tbody>
+		</table>
+		<div class="message">
+			<div>
+				<label>买家留言</label>
+				<span>{{orderInfo.userMessage || '无'}}</span>
+			</div>
+			<div>
+				<p>
+					<label>商品总额</label>
+					<UiMoney :money="orderInfo.totalAmount" float/>
+				</p>
+				<p>
+					<label>运费</label>
+					<UiMoney :money="orderInfo.shippingAmount" float/>
+					
+				</p>
+				<p>
+					<label>
+						{{orderInfo.orderStatus == 1 ? '应付款：' : '实付款：'}}
+					</label>
+					<UiMoney :money="orderInfo.payAmount" float prefix suffix/>
+				</p>
+			</div>
+		</div>
+	</div>
+</template>
+<script>
+import UIGoodsInfo from '@/components/UIGoodsInfo.vue'
+import UiMoney from '@/components/UiMoney.vue'
+
+export default {
+	components: { UIGoodsInfo, UiMoney },
+	props : {
+		orderInfo : {
+			type : Object,
+			default : () => ({})
+		}
+	},
+	computed:{
+		products (){
+			return this.orderInfo.products || []
+		}
+	}
+}
+</script>
+<style lang="scss" scoped>
+
+.goods{
+	width: 100%;
+	border: 1px solid #ddd;
+	margin-top: 30px;
+	th{
+		height: 42px;
+		background: #f8f8f8;
+		font-weight: normal
+	};
+	td{
+		text-align: center;
+		border: 1px solid #ddd;
+		padding: 10px 20px;
+		&.not-border{
+			border-left: 0;
+			border-right: 0;
+		}
+	}
+	tbody tr:first-child td{
+		padding-top: 20px
+	}
+	tbody tr:last-child td{
+		padding-bottom: 20px
+	}
+}
+.message{
+	border: 1px solid #ddd;
+	border-top: 0;
+	display: flex;
+	justify-content: space-between;
+	padding: 30px;
+	p{
+		width: 250px;
+		display: flex;
+		justify-content: space-between;
+		&:nth-child(2){
+			margin: 20px 0;
+		}
+	}
+}
+</style>
\ No newline at end of file
diff --git a/pages/account/index/order/detail/module/LogisitcsInfo.vue b/pages/account/index/order/detail/module/LogisitcsInfo.vue
new file mode 100644
index 0000000..a5b9045
--- /dev/null
+++ b/pages/account/index/order/detail/module/LogisitcsInfo.vue
@@ -0,0 +1,136 @@
+<!--
+ * @Author: ch
+ * @Date: 2022-05-09 15:52:51
+ * @LastEditors: ch
+ * @LastEditTime: 2022-05-09 18:05:32
+ * @Description: file content
+-->
+<template>
+	<div class="logisitcs">
+		<UiLineBox class="logisitcs--info" title="收货人信息">
+			<div class="title"  slot="head">
+				<b>收货人信息</b>
+			</div>
+			<div slot="body" class="info">
+				<p>
+					<label>收货人：</label>
+					<span>{{logisitcsInfo.recipientName}}</span>
+				</p>
+				<p>
+					<label>手机号码：</label>
+					<span>{{logisitcsInfo.recipientPhone}}</span>
+				</p>
+				<p>
+					<label>收货地址：</label>
+					<span>{{logisitcsInfo.recipientAddress}}{{logisitcsInfo.recipientAddress}}{{logisitcsInfo.recipientAddress}}</span>
+				</p>
+			</div>
+		</UiLineBox>
+		<UiLineBox class="logisitcs--list" v-if="logisitcsList.length">
+			<div slot="head" class="title">
+				<b>物流信息</b>
+				<span>中嘻嘻嘻</span>
+			</div>
+			<ul slot="body" class="list">
+				<li v-for="(item, idx) in logisitcsList" :key="idx">
+					<b class="item--time">{{item.time}}</b>
+					<span class="item--ctx">{{item.context}}</span>
+				</li>
+			</ul>
+		</UiLineBox>
+	</div>
+</template>
+<script>
+import UiLineBox from '@/components/UiLineBox.vue'
+export default {
+	components: { UiLineBox },
+	props : {
+		orderInfo : {
+			type : Object,
+			defalut : () => ({})
+		}
+	},
+	computed:{
+		logisitcsInfo(){
+			return this.orderInfo.logistics || {}
+		},
+		logisitcsList(){
+			return this.logisitcsInfo.logisticsDataList || []
+		}
+	}
+	
+}
+</script>
+<style lang="scss" scoped>
+.logisitcs{
+	display: flex;
+	margin: 30px 0;
+	&--info{
+		flex: 1;
+	}
+	&--list{
+		width: 670px;
+		margin-left: 28px;
+	}
+}
+.info{
+	padding: 20px 30px;
+	color: #666;
+	p{
+		display: flex;
+		margin-bottom:20px ;
+		label{
+			width: 70px;
+		}
+		span{
+			flex: 1;
+		}
+	}
+}
+.list{
+	padding: 30px ;
+	height: 180px;
+	overflow-y: auto;
+	li{
+		position: relative;
+		padding-left: 20px;
+		padding-bottom: 20px;
+		font-size: 14px;
+		b{
+			display: block;
+			line-height: 14px;
+			margin-bottom: 10px;
+		}
+		span{
+			color: #999;
+		}
+		&::before{
+			display: block;
+			width: 10px;
+			height: 10px;
+			content: '';
+			border-radius: 50%;
+			background: #1EBC20;
+			position: absolute;
+			left: 0;
+			top: 2px;
+		}
+		&::after{
+			display: block;
+			content: '';
+			height: 100%;
+			width: 2px;
+			left: 5px;
+			top: 2px;
+			border-left: 1px solid #1EBC20;
+			position: absolute;
+		}
+		&:last-child{
+			padding-bottom: 0;
+			&::after{
+				display: none;
+			}
+		}
+	}
+}
+</style>
\ No newline at end of file
diff --git a/pages/account/index/order/detail/module/StatusInfo.vue b/pages/account/index/order/detail/module/StatusInfo.vue
new file mode 100644
index 0000000..a80b002
--- /dev/null
+++ b/pages/account/index/order/detail/module/StatusInfo.vue
@@ -0,0 +1,157 @@
+<!--
+ * @Author: ch
+ * @Date: 2022-05-09 14:41:37
+ * @LastEditors: ch
+ * @LastEditTime: 2022-05-09 21:12:47
+ * @Description: file content
+-->
+<template>
+		<div class="operation">
+			<span>订单编号：{{orderInfo.orderNo}}</span>
+			<p>订单状态：{{orderInfo.orderStatusDesc}}</p>
+			<span>{{ctxCon.tips}}</span>
+			<div class="operation--btns">
+			<!-- 已发货可以确认收货 -->
+			<UiButton v-if="orderInfo.orderStatus === 4" type="yellow_gradual" :radius="true" @click="receive">确认收货</UiButton>
+			<!-- 待支付可以取消，支付订单 -->
+			<template v-if="orderInfo.orderStatus === 1">
+				<UiButton type="yellow_gradual" :radius="true" @click="payVisible = true">去支付</UiButton>
+				<UiButton type="grey" :radius="true" @click="cancelVisible=true">取消</UiButton>
+			</template>
+			</div>
+			<Cancel :visible.sync="cancelVisible" :orderId="orderInfo.orderId" @cancel="cancel"/>
+			<BsPay :visible.sync="payVisible" :orderId="orderInfo.orderId"/>
+		</div>
+</template>
+<script>
+import BsPay from '../../../../../../components/BsPay.vue'
+import UiButton from '../../../../../../components/UiButton.vue'
+import Cancel from './Cancel.vue'
+export default {
+	components: { UiButton, Cancel, BsPay },
+	props: {
+		orderInfo : {
+			type : Object,
+			default : () => ({})
+		}
+	},
+	data(){
+		return {
+			ctxData : {
+				// 待付款
+				'1' : {name:'待付款', tips:''},
+				// 关闭
+				'2' : {name:'交易关闭' , tips:'关闭原因'},
+				// 已支付
+				'3' : {name:'等待发货', tips:'您的包裹整装待发'},
+				// 已发货
+				'4' : {name:'已发货', tips:'您的包裹正向您飞来'},
+				// 已收货
+				'5' : {name:'已收货'},
+				// 已完成
+				'6' : {name:'交易成功'},
+			},
+			ctxCon : {},
+			startSecondNum : 0,
+			timerStop : null,
+			cancelVisible : false,
+			payVisible : false
+
+		}
+	},
+	watch : {
+		orderInfo(nVal){
+			const {orderStatus} = this.orderInfo;
+			this.ctxCon = this.ctxData[orderStatus];
+			
+			if(orderStatus === 1){
+				// 待支付 开始倒计时
+				if(this.timerStop){
+					clearTimeout(this.timerStop);
+				}
+				this.calcTimerStartSecondNum();
+				this.timer();
+
+			}else if(orderStatus === 2){
+				this.ctxCon.tips = this.orderInfo.cancelReason;
+			}
+		}
+	},
+	methods:{
+		/**
+		 * 计算倒计时开始秒数
+		 */
+		calcTimerStartSecondNum(){
+			let expireTime = (new Date(this.orderInfo.expireTime.replace(/-/g,'/'))).getTime(),
+				curTime = (new Date(this.orderInfo.serverTime.replace(/-/g,'/'))).getTime(),
+				second = Math.floor((expireTime - curTime) / 1000);
+			this.startSecondNum = second > 0 ? second : 0;
+		},
+		/**
+		 * 待付款的倒计时
+		 */
+		timer(){
+			if(this.startSecondNum == 0){
+				this.$emit('close');
+				return;
+			}
+			this.startSecondNum--;
+			let minute = parseInt(this.startSecondNum / 60);
+			let second = parseInt(this.startSecondNum % 60);
+			this.ctxCon.tips = `剩余${minute > 0 ? `${minute}分` : ''} ${second}秒`;
+			this.timerStop = setTimeout(()=>this.timer(),1000)
+		},
+
+		/**
+		 * 确认收货
+		 */
+		receive(){
+			this.$confirm('确认已经收到货了吗？', '提示', {
+				confirmButtonText: '确定',
+				cancelButtonText: '取消',
+				type: 'warning'
+			}).then(async () => {
+				const {error} = await ApiPutOrderReceive({orderId : this.orderInfo.orderId});
+				if(error){
+					uni.$toast(error.message);
+					return false;
+				}
+				this.$message({
+					type: 'success',
+					message: '成功收货!'
+				});
+				this.$emit('receive')
+			});
+		},
+		cancel(){
+			this.$emit('cancel')
+		}
+	}
+	
+}
+</script>
+<style lang="scss" scoped>
+.operation{
+	width: 300px;
+	height: 200px;
+	background: #f8f8f8;
+	padding-top: 20px;
+	text-align: center;
+	border-right: 1px solid #ddd;
+	span{
+		color: #999;
+	}
+	p{
+		font-size: 14px;
+		margin: 30px 0 15px;
+	}
+	&--btns{
+		margin-top: 30px;
+		button{
+			margin: 0 7px;
+			width: 100px;
+		}
+	}
+}
+
+</style>
\ No newline at end of file
diff --git a/pages/account/index/order/detail/module/StatusStep.vue b/pages/account/index/order/detail/module/StatusStep.vue
new file mode 100644
index 0000000..1ab1e48
--- /dev/null
+++ b/pages/account/index/order/detail/module/StatusStep.vue
@@ -0,0 +1,72 @@
+<!--
+ * @Author: ch
+ * @Date: 2022-05-09 14:41:37
+ * @LastEditors: ch
+ * @LastEditTime: 2022-05-09 19:55:10
+ * @Description: file content
+-->
+<template>
+	<ul class="step">
+		<li v-for="item in steps" :key="item.operationType">
+			<img src="@/assets/img/account/order_status_1.png"/>
+			<b>{{item.operationTypeDesc}}</b>
+			<span>{{item.createTime}}</span>
+			<span>{{item.createTime}}</span>
+		</li>
+	</ul>
+</template>
+<script>
+import UiButton from '../../../../../../components/UiButton.vue'
+export default {
+	components: { UiButton },
+	props: {
+		orderInfo : {
+			type : Object,
+			default : () => ({})
+		}
+	},
+	data(){
+		return {
+		}
+	},
+	computed:{
+		steps(){
+			const normalStep = [
+				{type : 1, name : '待付款' },
+				{type : 6, name : '支付订单' },
+				{type : 7, name : '平台发货' },
+				{type : 1, name : '确认收货' },
+				{type : 1, name : '交易完成' },
+				{type : 2, name : '交易关闭' }
+			];
+			return [];
+		}
+	},
+	methods:{
+	}
+	
+}
+</script>
+<style lang="scss" scoped>
+.step{
+	padding: 45px 65px 0 65px;
+	display: flex;
+	flex: 1;
+	justify-content: space-between;
+	li{
+		text-align: center;
+		img{
+			width: 66px;
+		}
+		b{
+			display: block;
+			margin: 10px 0;
+			color: #999;
+		}
+		span{
+			display: block;
+			color: #666;
+		}
+	}
+}
+</style>
\ No newline at end of file
diff --git a/pages/order/submit/index.vue b/pages/order/submit/index.vue
index 7904554..66bda4c 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-09 14:13:53
+ * @LastEditTime: 2022-05-09 14:33:52
  * @Description: file content
 -->
 
@@ -113,7 +113,7 @@ export default {
 
 		},
 		cancelPay(){
-			this.$router.replace('/order/detail')
+			this.$router.replace(`/account/order/detail?id=${this.orderId}`)
 		}
 	}
 }