diff --git a/App.vue b/App.vue
index c0dc4a9..9943dca 100644
--- a/App.vue
+++ b/App.vue
@@ -19,6 +19,14 @@
 	@import "@/colorui/animation.css";
 	@import '@/common/styles/common.css';
 	/*每个页面公共css */
+	//底部按钮
+	.btn-bottom {
+		position: fixed;
+		left: 0;
+		bottom: 0;
+		width: 100%;
+		z-index: 1;
+	}
 	
 	// loading加载
 	.loading-more {
diff --git a/colorui/icon.css b/colorui/icon.css
index 16ed121..31a6158 100644
--- a/colorui/icon.css
+++ b/colorui/icon.css
@@ -430,7 +430,7 @@
 }
 
 .cuIcon-fold:before {
-	content: "\e6de";
+	/* content: "\e6de"; */
 }
 
 .cuIcon-game:before {
diff --git a/colorui/main.css b/colorui/main.css
index 9875069..8e3f158 100644
--- a/colorui/main.css
+++ b/colorui/main.css
@@ -331,10 +331,10 @@ checkbox.green.checked .uni-checkbox-input,
 checkbox.checked .uni-checkbox-input,
 radio.green.checked .uni-radio-input,
 radio.checked .uni-radio-input {
-	background-color: #39b54a !important;
-	border-color: #39b54a !important;
+	/* background-color: #39b54a !important;
+	border-color: #39b54a !important; */
 	color: #ffffff !important;
-	border-color: #39B54A !important;
+	/* border-color: #39B54A !important; */
 }
 
 switch.cyan[checked] .wx-switch-input,
@@ -3383,6 +3383,9 @@ scroll-view.cu-steps .cu-item {
 .fr {
 	float: right;
 }
+.border {
+	border: 1px solid #ccc;
+}
 
 /* ==================
           背景
@@ -3469,8 +3472,8 @@ scroll-view.cu-steps .cu-item {
 }
 
 .bg-orange {
-	background-color: #FE9903;
-	color: #ffffff;
+	background-color: #FE9903!important;
+	color: #ffffff!important;
 }
 
 .bg-yellow {
@@ -3494,10 +3497,14 @@ scroll-view.cu-steps .cu-item {
 }
 
 .bg-blue {
-	background-color: #0081ff;
+	background-color: #1E89FF!important;
 	color: #ffffff;
 }
 
+.border-blue {
+	border:  1px solid #1E89FF!important;
+}
+
 .bg-purple {
 	background-color: #6739b6;
 	color: #ffffff;
@@ -3524,8 +3531,8 @@ scroll-view.cu-steps .cu-item {
 }
 
 .bg-gray {
-	background-color: #f0f0f0;
-	color: #333333;
+	background-color: #999999!important;
+	color: white!important;
 }
 
 .bg-black {
@@ -3890,7 +3897,7 @@ scroll-view.cu-steps .cu-item {
 .text-orange,
 .line-orange,
 .lines-orange {
-	color: #f37b1d;
+	color: #FE9903;
 }
 
 .text-yellow,
@@ -3908,7 +3915,7 @@ scroll-view.cu-steps .cu-item {
 .text-green,
 .line-green,
 .lines-green {
-	color: #39b54a;
+	color: #10CB3B;
 }
 
 .text-cyan,
@@ -3920,7 +3927,7 @@ scroll-view.cu-steps .cu-item {
 .text-blue,
 .line-blue,
 .lines-blue {
-	color: #0081ff;
+	color: #1E89FF!important;
 }
 
 .text-purple,
@@ -3956,7 +3963,7 @@ scroll-view.cu-steps .cu-item {
 .text-gray,
 .line-gray,
 .lines-gray {
-	color: #aaaaaa;
+	color: #777777;
 }
 
 .text-black,
diff --git a/common/styles/common.css b/common/styles/common.css
index a68d65d..11bff85 100644
--- a/common/styles/common.css
+++ b/common/styles/common.css
@@ -14,13 +14,13 @@ uni-radio .uni-radio-input {
 /* #ifdef H5 */
 radio .uni-radio-input,
 checkbox .uni-checkbox-input {
-	border-radius: 50%;
+	/* border-radius: 50%; */
 	transform: scale(0.8);
 }
 
 radio .uni-radio-input.uni-radio-input-checked,
 checkbox .uni-checkbox-input.uni-checkbox-input-checked {
-	border-radius: 50%;
+	/* border-radius: 50%; */
 	border: 1px solid #FF4B48 !important;
 	background: #FF4B48 !important;
 	color: #FFFFFF !important;
diff --git a/components/me-tabs/me-tabs.vue b/components/me-tabs/me-tabs.vue
index 1d325ab..527e2b0 100644
--- a/components/me-tabs/me-tabs.vue
+++ b/components/me-tabs/me-tabs.vue
@@ -137,6 +137,7 @@
 		box-sizing: border-box;
 		overflow-y: hidden;
 		background-color: #FE9903;
+		border-radius: 10px;
 		// box-shadow: 0 0.06rem 0.3rem rgba(0, 0, 0, .1);
 
 		&.tabs-fixed {
diff --git a/components/mescroll-uni/mescroll-body.vue b/components/mescroll-uni/mescroll-body.vue
index 0068248..f6e3929 100644
--- a/components/mescroll-uni/mescroll-body.vue
+++ b/components/mescroll-uni/mescroll-body.vue
@@ -11,7 +11,7 @@
 			<!-- <mescroll-down :option="mescroll.optDown" :type="downLoadType" :rate="downRate"></mescroll-down> -->
 			<view v-if="mescroll.optDown.use" class="mescroll-downwarp" :style="{'background':mescroll.optDown.bgColor,'color':mescroll.optDown.textColor}">
 				<view class="downwarp-content">
-					<image style="width: 80rpx;" src="/static/images/logo.gif" mode="widthFix"></image>
+					<image style="width: 80rpx;" src="../../static/images/logo.gif" mode="widthFix"></image>
 					<view class="margin-top-sm">
 						<view class="downwarp-progress mescroll-wxs-progress" :class="{'mescroll-rotate': isDownLoading}" :style="{'border-color':mescroll.optDown.textColor, 'transform': downRotate}"></view>
 						<view class="downwarp-tip">{{downText}}</view>
diff --git a/components/self-line/self-line.vue b/components/self-line/self-line.vue
new file mode 100644
index 0000000..8149043
--- /dev/null
+++ b/components/self-line/self-line.vue
@@ -0,0 +1,16 @@
+<template>
+	<view class="bg-gray1 h-20" />
+</template>
+
+<script>
+</script>
+
+<style>
+	.h-20 {
+	    height: 10px;
+	}
+	.bg-gray1 {
+		background-color: #f7f7fb;
+		color: #333333;
+	}
+</style>
diff --git a/main.js b/main.js
index 85d8fff..adaddca 100644
--- a/main.js
+++ b/main.js
@@ -30,6 +30,17 @@ Vue.component('my-nocontent', myNocontent);
 import aMount from './components/amount/index.vue'
 Vue.component('amount', aMount)
 
+Vue.prototype.$toast=msg=>{
+	uni.showToast({
+		icon:'none',
+		title:msg
+	})
+}
+
+//H5复制到剪切板
+import VueClipboard from 'vue-clipboard2'
+Vue.use(VueClipboard)
+
 //路由跳转
 Vue.prototype.$routerGo = (obj) => {
 	uni.navigateTo({
diff --git a/package-lock.json b/package-lock.json
new file mode 100644
index 0000000..7d5d118
--- /dev/null
+++ b/package-lock.json
@@ -0,0 +1,52 @@
+{
+  "requires": true,
+  "lockfileVersion": 1,
+  "dependencies": {
+    "clipboard": {
+      "version": "2.0.8",
+      "resolved": "https://registry.npmjs.org/clipboard/-/clipboard-2.0.8.tgz",
+      "integrity": "sha512-Y6WO0unAIQp5bLmk1zdThRhgJt/x3ks6f30s3oE3H1mgIEU33XyQjEf8gsf6DxC7NPX8Y1SsNWjUjL/ywLnnbQ==",
+      "requires": {
+        "good-listener": "^1.2.2",
+        "select": "^1.1.2",
+        "tiny-emitter": "^2.0.0"
+      }
+    },
+    "delegate": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/delegate/-/delegate-3.2.0.tgz",
+      "integrity": "sha512-IofjkYBZaZivn0V8nnsMJGBr4jVLxHDheKSW88PyxS5QC4Vo9ZbZVvhzlSxY87fVq3STR6r+4cGepyHkcWOQSw=="
+    },
+    "good-listener": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/good-listener/-/good-listener-1.2.2.tgz",
+      "integrity": "sha1-1TswzfkxPf+33JoNR3CWqm0UXFA=",
+      "requires": {
+        "delegate": "^3.1.2"
+      }
+    },
+    "select": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/select/-/select-1.1.2.tgz",
+      "integrity": "sha1-DnNQrN7ICxEIUoeG7B1EGNEbOW0="
+    },
+    "tiny-emitter": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/tiny-emitter/-/tiny-emitter-2.1.0.tgz",
+      "integrity": "sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q=="
+    },
+    "tki-qrcode": {
+      "version": "0.1.6",
+      "resolved": "https://registry.npmjs.org/tki-qrcode/-/tki-qrcode-0.1.6.tgz",
+      "integrity": "sha512-EnnlS8psowC7PsW3MDYcxvJYkuklX3WAZ/BYanR4TdBHTu74GfjTBX8Y16REP+AeDENiVtBPh4jtTRL2P736hQ=="
+    },
+    "vue-clipboard2": {
+      "version": "0.3.1",
+      "resolved": "https://registry.npmjs.org/vue-clipboard2/-/vue-clipboard2-0.3.1.tgz",
+      "integrity": "sha512-H5S/agEDj0kXjUb5GP2c0hCzIXWRBygaWLN3NEFsaI9I3uWin778SFEMt8QRXiPG+7anyjqWiw2lqcxWUSfkYg==",
+      "requires": {
+        "clipboard": "^2.0.0"
+      }
+    }
+  }
+}
diff --git a/pages.json b/pages.json
index 44b53ca..517fe08 100644
--- a/pages.json
+++ b/pages.json
@@ -16,6 +16,36 @@
 				"navigationBarTitleText": "我的订单"
 			}
 		},
+		{
+			"path": "pages/order/order-details",
+			"style": {
+				"navigationBarTitleText": "订单详情"
+			}
+		},
+		{
+			"path": "pages/order/confirm-order",
+			"style": {
+				"navigationBarTitleText": "确认订单"
+			}
+		},
+		{
+			"path": "pages/order/pay-success",
+			"style": {
+				"navigationBarTitleText": "支付结果"
+			}
+		},
+		{
+			"path": "pages/order/apply-refund",
+			"style": {
+				"navigationBarTitleText": "申请退款"
+			}
+		},
+		{
+			"path": "pages/order/apply-details",
+			"style": {
+				"navigationBarTitleText": "退款详情"
+			}
+		},
 		{
 			"path": "pages/center/index",
 			"style": {
@@ -50,24 +80,24 @@
 	},
 	"tabBar": {
 	    "color": "#909399",
-	    "selectedColor": "#303133",
+	    "selectedColor": "#FE9903",
 	    "borderStyle": "black",
 	    "backgroundColor": "#ffffff",
 	    "list": [{
 	        "pagePath": "pages/index/index",
-	        "iconPath": "static/tabbar/index.png",
-	        "selectedIconPath": "static/tabbar/index-selected.png",
+	        "iconPath": "static/tabbar/home.png",
+	        "selectedIconPath": "static/tabbar/home-active.png",
 	        "text": "首页"
 	    }, {
 	        "pagePath": "pages/order/index",
-	        "iconPath": "static/tabbar/center.png",
-	        "selectedIconPath": "static/tabbar/center-selected.png",
+	        "iconPath": "static/tabbar/order.png",
+	        "selectedIconPath": "static/tabbar/order-active.png",
 	        "text": "订单"
 	    },
 		{
 		    "pagePath": "pages/center/index",
-		    "iconPath": "static/tabbar/center.png",
-		    "selectedIconPath": "static/tabbar/center-selected.png",
+		    "iconPath": "static/tabbar/my.png",
+		    "selectedIconPath": "static/tabbar/my-active.png",
 		    "text": "我的"
 		}
 		]
diff --git a/pages/order/apply-details.vue b/pages/order/apply-details.vue
new file mode 100644
index 0000000..5bfdeb8
--- /dev/null
+++ b/pages/order/apply-details.vue
@@ -0,0 +1,200 @@
+<template>
+	<view>
+		<mescroll-body ref="mescrollRef" @down="downCallback" :down="downOpt">
+
+			<!-- 商品信息 -->
+			<self-line/>
+			<view class="bg-white padding-tb-sm">
+				<skeleton :loading="skeletonLoading" :row="2" :showAvatar="false" :showTitle="true">
+
+					<view class="flex justify-between align-start padding-top-sm padding-lr">
+						<image src="@/static/tu.png" mode="aspectFill" style="width: 150rpx; height: 150rpx;"></image>
+						<view class="flex-sub padding-left-sm">
+							<view class="bref-box margin-top-xs">
+								网红辣椒棒 魔鬼辣椒挑战全网第一辣 网红优惠季 
+							</view>
+							<text class="block margin-top-sm text-gray text-sm">网红辣椒棒 500g <text class="margin-left text-gray">x1</text></text>
+							
+							<view class="flex justify-between margin-top-sm">
+								<view class="text-red text-price text-lg">
+									<amount :value="Number(19.90 || 0)" :is-round-up="false" :precision="2" :duration="800" transition></amount>
+								</view>
+								<view>
+									<button class="cu-btn border-blue bg-white text-blue round margin-left-sm text-sm">等待审核</button>
+								</view>
+							</view>
+						</view>
+					</view>
+
+				</skeleton>
+			</view>
+			
+			<self-line/>
+			<!-- 表单 -->
+			<view class="bg-white">
+				<view class="cu-bar padding-lr solid-bottom flex justify-between align-center text-center">
+					<text class="text-gray">可退金额</text>
+					<view class="text-red text-price text-lg">
+						<amount :value="Number(19.90 || 0)" :is-round-up="false" :precision="2" :duration="800" transition></amount>
+					</view>
+				</view>
+				<view class="cu-bar padding-lr solid-bottom flex justify-between align-center text-center">
+					<text class="text-gray">订单编号</text>
+					<view>
+						<text class="margin-right">67432428794847982374</text>
+						<text class="text-orange text-sm"  @tap="copy('67432428794847982374')">复制</text>
+					</view>
+				</view>
+			</view>
+			
+			<self-line/>
+			
+			<view class="padding bg-white" style="border-radius: 6rpx 6rpx 0 0">
+				<view class="cu-self menu">
+					<view class="text-gray">退款说明</view>
+				</view>
+				<view class="cu-self menu margin-top">
+					<view class="text-gray">看着不是很新鲜了，然后还有一些都烂了！！！看着不是很新鲜了，然后还有一些都烂了！！！看着不是很新鲜了，然后还有一些都烂了！！！看着不是很新鲜了，然后还有一些都烂了！！！看着不是很新鲜了，然后还有一些都烂了！！！</view>
+				</view>
+			</view>
+			<view class="cu-form-group solid-bottom">
+				<view class="grid col-4 grid-square flex-sub">
+					<view class="bg-img">
+						<image src="../../static/tu.png" @tap="showImg" mode="aspectFill"></image>
+					</view>
+					<view class="bg-img">
+						<image src="../../static/tu.png" @tap="showImg" mode="aspectFill"></image>
+					</view>
+					<view class="bg-img">
+						<image src="../../static/tu.png" @tap="showImg" mode="aspectFill"></image>
+					</view>
+				</view>
+			</view>
+			
+		</mescroll-body>
+		
+	</view>
+</template>
+
+<script>
+	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
+	export default {
+		mixins: [MescrollMixin], // 使用mixin
+		data() {
+			return {
+				skeletonLoading: true,
+				loading: false,
+				// 选择的本地图片路径
+				hostImg: '',
+				// 已上传服务器的图片名称
+				serverImg:'',
+			}
+		},
+		computed: {
+			
+		},
+		onLoad(e) {
+			setTimeout(()=>{
+				this.skeletonLoading = false
+				this.mescroll.endSuccess(); // 请求成功,隐藏加载状态
+			},1000)
+		},
+		methods: {
+			// 选择图片
+			ChooseImage(e) {
+				uni.chooseImage({
+					count: 1,
+					success: e => {
+						this.hostImg = e.tempFilePaths[0];
+					}
+				});
+			},
+			
+			// 预览图片
+			showImg() {
+				uni.previewImage({
+					urls: ['../../static/tu.png']
+				});
+			},
+			
+			// 删除图片
+			DelImg() {
+				uni.showModal({
+					title: '提示',
+					content: '即将取消上传这张图片，请确认？',
+					success: e => {
+						if (!e.confirm) return;
+						this.hostImg = '';
+						this.serverImg = '';
+					}
+				});
+			},
+			// 点击复制
+			copy(text) {
+				//app的复制方法
+				// #ifdef APP-PLUS
+				uni.setClipboardData({
+					data: text
+				});
+				// #endif
+			
+				//html的复制方法
+				// #ifdef H5
+				this.$copyText(text)
+					.then(res => {
+						uni.showToast({
+							title: '复制成功'
+						});
+					})
+					.catch(err => {
+						uni.showToast({
+							icon: 'none',
+							title: '复制失败，您的浏览器不支持'
+						});
+					});
+				// #endif
+			},
+			//下拉刷新
+			downCallback() {
+				setTimeout(()=>{
+					this.mescroll.endSuccess(); // 请求成功,隐藏加载状态
+					this.mescroll.endErr(); // 请求失败,隐藏加载状态
+				},1000)
+			},
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.address-box {
+		// background-image: url(../../static/images/shop/envelope.png);
+		background-repeat: repeat-x;
+		background-position: left bottom;
+		background-size: auto 8rpx;
+	}
+
+	.self-img-sm {
+		width: 40rpx;
+		height: 40rpx;
+	}
+
+	.bref-box {
+		text-overflow: -o-ellipsis-lastline;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		display: -webkit-box;
+		-webkit-line-clamp: 2;
+		-webkit-box-orient: vertical;
+	}
+
+	.order-bottom {
+		position: relative;
+
+		.cuIcon-fold {
+			position: absolute;
+			right: 50rpx;
+			top: -19rpx;
+			color: rgba(0, 0, 0, 0.1)
+		}
+	}
+</style>
diff --git a/pages/order/apply-refund.vue b/pages/order/apply-refund.vue
new file mode 100644
index 0000000..926a2d0
--- /dev/null
+++ b/pages/order/apply-refund.vue
@@ -0,0 +1,214 @@
+<template>
+	<view>
+		<mescroll-body ref="mescrollRef" @down="downCallback" :down="downOpt">
+
+			<!-- 商品信息 -->
+			<self-line/>
+			<view class="bg-white padding-tb-sm">
+				<skeleton :loading="skeletonLoading" :row="2" :showAvatar="false" :showTitle="true">
+
+					<view class="flex justify-between align-start padding-top-sm padding-lr">
+						<image src="@/static/tu.png" mode="aspectFill" style="width: 150rpx; height: 150rpx;"></image>
+						<view class="flex-sub padding-left-sm">
+							<view class="bref-box margin-top-xs">
+								网红辣椒棒 魔鬼辣椒挑战全网第一辣 网红优惠季 
+							</view>
+							<text class="block margin-top-sm text-gray text-sm">网红辣椒棒 500g <text class="margin-left text-gray">x1</text></text>
+							
+							<view class="flex justify-between margin-top-sm">
+								<view class="text-red text-price text-lg">
+									<amount :value="Number(19.90 || 0)" :is-round-up="false" :precision="2" :duration="800" transition></amount>
+								</view>
+							</view>
+						</view>
+					</view>
+
+				</skeleton>
+			</view>
+			
+			<self-line/>
+			<!-- 表单 -->
+			<view class="bg-white">
+				<view class="cu-bar padding-lr solid-bottom flex justify-between align-center text-center">
+					<text class="text-gray">可退金额</text>
+					<view class="text-red text-price text-lg">
+						<amount :value="Number(19.90 || 0)" :is-round-up="false" :precision="2" :duration="800" transition></amount>
+					</view>
+				</view>
+				<view class="cu-bar padding-lr solid-bottom flex justify-between align-center text-center">
+					<text class="text-gray">订单编号</text>
+					<view>
+						<text class="margin-right">67432428794847982374</text>
+						<text class="text-orange text-sm"  @tap="copy('67432428794847982374')">复制</text>
+					</view>
+				</view>
+				<view class="cu-bar padding-lr solid-bottom">
+					<text class="text-gray">退款说明</text>
+					<input type="text" class="text-right text-df" placeholder="请输入反馈信息" />
+				</view>
+			</view>
+			
+			<self-line/>
+			
+			<view class="padding bg-white" style="border-radius: 6rpx 6rpx 0 0">
+				<view class="cu-self menu">
+					<view class="text-gray">请上传退款凭证</view>
+				</view>
+			</view>
+			<view class="cu-form-group solid-bottom">
+				<view class="grid col-4 grid-square flex-sub">
+					<view class="solids" @tap="ChooseImage" v-if="hostImg == ''"><text class="cuIcon-cameraadd"></text></view>
+			
+					<view class="bg-img" v-else>
+						<image :src="hostImg" @tap="showImg" mode="aspectFill"></image>
+						<view class="cu-tag bg-red" @tap.stop="DelImg"><text class="cuIcon-close"></text></view>
+					</view>
+				</view>
+			</view>
+			
+			<view class="padding-top-sm padding-lr-lg">
+				<button class="cu-btn block bg-orange lg margin-top round" @tap="$routerGo('/pages/order/apply-details')">
+					<text class="cuIcon-loading2 cuIconfont-spin  margin-right-xs text-white" v-if="loading"></text>
+					<text class="text-df text-white">确认申请</text>
+				</button>
+			</view>
+		</mescroll-body>
+		
+	</view>
+</template>
+
+<script>
+	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
+	export default {
+		mixins: [MescrollMixin], // 使用mixin
+		data() {
+			return {
+				skeletonLoading: true,
+				loading: false,
+				// 选择的本地图片路径
+				hostImg: '',
+				// 已上传服务器的图片名称
+				serverImg:'',
+			}
+		},
+		computed: {
+			
+		},
+		onLoad(e) {
+			setTimeout(()=>{
+				this.skeletonLoading = false
+				this.mescroll.endSuccess(); // 请求成功,隐藏加载状态
+			},1000)
+		},
+		methods: {
+			// 选择图片
+			ChooseImage(e) {
+				uni.chooseImage({
+					count: 1,
+					success: e => {
+						this.hostImg = e.tempFilePaths[0];
+						this.upload(this.hostImg)
+					}
+				});
+			},
+			
+			// 上传图片到服务器
+			upload(url){
+				this.$http.upload({
+					url: '/user/api/file/image',
+					data: url,
+				}).then(res=>{
+					let imgurl = JSON.parse(res.data)
+					this.serverImg=imgurl.data;
+				})
+			},
+			
+			
+			// 预览图片
+			showImg() {
+				uni.previewImage({
+					urls: [this.hostImg]
+				});
+			},
+			
+			// 删除图片
+			DelImg() {
+				uni.showModal({
+					title: '提示',
+					content: '即将取消上传这张图片，请确认？',
+					success: e => {
+						if (!e.confirm) return;
+						this.hostImg = '';
+						this.serverImg = '';
+					}
+				});
+			},
+			// 点击复制
+			copy(text) {
+				//app的复制方法
+				// #ifdef APP-PLUS
+				uni.setClipboardData({
+					data: text
+				});
+				// #endif
+			
+				//html的复制方法
+				// #ifdef H5
+				this.$copyText(text)
+					.then(res => {
+						uni.showToast({
+							title: '复制成功'
+						});
+					})
+					.catch(err => {
+						uni.showToast({
+							icon: 'none',
+							title: '复制失败，您的浏览器不支持'
+						});
+					});
+				// #endif
+			},
+			//下拉刷新
+			downCallback() {
+				setTimeout(()=>{
+					this.mescroll.endSuccess(); // 请求成功,隐藏加载状态
+					this.mescroll.endErr(); // 请求失败,隐藏加载状态
+				},1000)
+			},
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.address-box {
+		// background-image: url(../../static/images/shop/envelope.png);
+		background-repeat: repeat-x;
+		background-position: left bottom;
+		background-size: auto 8rpx;
+	}
+
+	.self-img-sm {
+		width: 40rpx;
+		height: 40rpx;
+	}
+
+	.bref-box {
+		text-overflow: -o-ellipsis-lastline;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		display: -webkit-box;
+		-webkit-line-clamp: 2;
+		-webkit-box-orient: vertical;
+	}
+
+	.order-bottom {
+		position: relative;
+
+		.cuIcon-fold {
+			position: absolute;
+			right: 50rpx;
+			top: -19rpx;
+			color: rgba(0, 0, 0, 0.1)
+		}
+	}
+</style>
diff --git a/pages/order/confirm-order.vue b/pages/order/confirm-order.vue
new file mode 100644
index 0000000..f4d3a8e
--- /dev/null
+++ b/pages/order/confirm-order.vue
@@ -0,0 +1,217 @@
+<template>
+	<view>
+		<mescroll-body ref="mescrollRef" @down="downCallback" :down="downOpt" style="min-height: 645px;">
+
+			<!-- 商品信息 -->
+			<self-line/>
+			<view class="bg-white padding-tb-sm">
+				<skeleton :loading="skeletonLoading" :row="2" :showAvatar="false" :showTitle="true">
+
+					<view class="flex justify-between align-start padding-top-sm padding-lr">
+						<image src="@/static/tu.png" mode="aspectFill" style="width: 150rpx; height: 150rpx;"></image>
+						<view class="flex-sub padding-left-sm">
+							<view class="bref-box margin-top-xs">
+								网红辣椒棒 魔鬼辣椒挑战全网第一辣 网红优惠季 
+							</view>
+							<view class="flex justify-between">
+								<text class="block margin-top-sm text-gray text-sm">网红辣椒棒 500g</text>
+								<view class="flex align-center margin-top-sm">
+									<text class="cuIcon-move" @tap="reduce"></text>
+									<input type="number" v-model="num" class="text-center margin-lr-sm radius" style="width: 60rpx; height: 50rpx;background-color: #f7f7fb;" />
+									<text class="cuIcon-add" @tap="add"></text>
+								</view>
+							</view>
+							
+							<view class="flex justify-between margin-top-sm">
+								<view class="text-red text-price text-lg">
+									<amount :value="Number(19.90*num || 0)" :is-round-up="false" :precision="2" :duration="800" transition></amount>
+								</view>
+								<!-- <view>
+									<button v-if="true" class="cu-btn line-orange round margin-left-sm text-sm">申请退款</button>
+									<button v-else class="cu-btn line-gray bg-gray round margin-left-sm text-sm">退款中</button>
+								</view> -->
+							</view>
+						</view>
+					</view>
+
+				</skeleton>
+			</view>
+			
+			<self-line/>
+			<view class="bg-white">
+				<view class="cu-bar padding-lr solid-bottom">
+					<text class="text-gray">优惠</text>
+					<text>暂无优惠</text>
+				</view>
+			</view>
+			<self-line/>
+		</mescroll-body>
+		<view class="btn-bottom">
+			<view class="padding flex justify-around align-center">
+				<view class="margin-right">
+					<checkbox :class="checkbox[0].checked?'checked':''" :checked="checkbox[0].checked?true:false" value="A"></checkbox>
+				</view>
+				<view class="text-sm text-gray">请认真阅读并同意《时空网协议》，在小程序下单购买即表示您已默认同意《时空网协议》的所有条款。</view>
+			</view>
+			<self-line/>
+			<view class="padding-lr padding-tb-sm bg-white flex justify-between align-center solid-top shadow">
+				<view class="flex align-center">
+					<text class="">应付款：</text>
+					<view class="text-lg text-price text-red">
+						<amount :value="Number(total || 0)" :is-round-up="false" :precision="2" :duration="800" transition></amount>
+					</view>
+				</view>
+				<button class="cu-btn block bg-orange round shadow" @tap="submit">
+					<text class="cuIcon-loading2 cuIconfont-spin  margin-right-xs text-white" v-if="loading"></text>
+					<text class="text-df text-white">{{ loading ? '支付中...' : '下单付款' }}</text>
+				</button>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	import tkiQrcode from "tki-qrcode" // 二维码生成器
+	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
+	export default {
+		mixins: [MescrollMixin], // 使用mixin
+		data() {
+			return {
+				num: 1,
+				area: '币种地址',
+				base64Img: '',	//
+				skeletonLoading: true,
+				payCur: 0, //支付方式下标
+				loading: false,
+				address: {},
+				shopData: {},
+				payPwd: '',
+				price: '',	//价格
+				checkbox: [{
+					value: 'A',
+					checked: true
+				}, {
+					value: 'B',
+					checked: true
+				}, {
+					value: 'C',
+					checked: false
+				}],
+			}
+		},
+		components: {
+			tkiQrcode
+		},
+		computed: {
+			disabled() {
+				// 必须输入 邮箱和验证码 才能点击下一步
+				// if (this.payPwd) return false
+				return true
+			},
+			total(){
+				return this.num * this.price
+			}
+		},
+		onLoad(e) {
+			setTimeout(()=>{
+				this.skeletonLoading = false
+				this.mescroll.endSuccess(); // 请求成功,隐藏加载状态
+			},1000)
+		},
+		methods: {
+			reduce() {
+				if (this.num === 1) return
+				this.num--
+			},
+			add() {
+				this.num++
+			},
+			CheckboxChange(e) {
+				var items = this.checkbox,
+					values = e.detail.value;
+				for (var i = 0, lenI = items.length; i < lenI; ++i) {
+					items[i].checked = false;
+					for (var j = 0, lenJ = values.length; j < lenJ; ++j) {
+						if (items[i].value == values[j]) {
+							items[i].checked = true;
+							break
+						}
+					}
+				}
+			},
+			//二维码回调
+			qrR(data) {
+				this.base64Img = data;
+			},
+			// 点击复制
+			copy(text) {
+				//app的复制方法
+				// #ifdef APP-PLUS
+				uni.setClipboardData({
+					data: text
+				});
+				// #endif
+			
+				//html的复制方法
+				// #ifdef H5
+				this.$copyText(text)
+					.then(res => {
+						uni.showToast({
+							title: '复制成功'
+						});
+					})
+					.catch(err => {
+						uni.showToast({
+							icon: 'none',
+							title: '复制失败，您的浏览器不支持'
+						});
+					});
+				// #endif
+			},
+			submit(){
+				this.$routerGo('/pages/order/pay-success')
+			},
+			//下拉刷新
+			downCallback() {
+				setTimeout(()=>{
+					this.mescroll.endSuccess(); // 请求成功,隐藏加载状态
+					this.mescroll.endErr(); // 请求失败,隐藏加载状态
+				},1000)
+			},
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.address-box {
+		// background-image: url(../../static/images/shop/envelope.png);
+		background-repeat: repeat-x;
+		background-position: left bottom;
+		background-size: auto 8rpx;
+	}
+
+	.self-img-sm {
+		width: 40rpx;
+		height: 40rpx;
+	}
+
+	.bref-box {
+		text-overflow: -o-ellipsis-lastline;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		display: -webkit-box;
+		-webkit-line-clamp: 2;
+		-webkit-box-orient: vertical;
+	}
+
+	.order-bottom {
+		position: relative;
+
+		.cuIcon-fold {
+			position: absolute;
+			right: 50rpx;
+			top: -19rpx;
+			color: rgba(0, 0, 0, 0.1)
+		}
+	}
+</style>
diff --git a/pages/order/index.vue b/pages/order/index.vue
index dbf8723..a69ebb7 100644
--- a/pages/order/index.vue
+++ b/pages/order/index.vue
@@ -44,7 +44,7 @@
 			this.assetsType = e.type
 			this.tabIndex = this.assetsType === 'all' ? 0 : this.assetsType === 'delivered' ? 1 : this.assetsType === 'receiving' ? 2 : 0
 			// 需要固定swiper的高度
-			this.height = (uni.getSystemInfoSync().windowHeight -30) + 'px'
+			this.height = (uni.getSystemInfoSync().windowHeight) + 'px'
 		},
 
 		methods: {
diff --git a/pages/order/order-details.vue b/pages/order/order-details.vue
new file mode 100644
index 0000000..461c581
--- /dev/null
+++ b/pages/order/order-details.vue
@@ -0,0 +1,211 @@
+<template>
+	<view>
+		<mescroll-body ref="mescrollRef" @down="downCallback" :down="downOpt">
+
+			<!-- 商品信息 -->
+			<self-line/>
+			<view class="bg-white padding-tb-sm">
+				<skeleton :loading="skeletonLoading" :row="2" :showAvatar="false" :showTitle="true">
+
+					<view class="flex justify-between align-start padding-top-sm padding-lr">
+						<image src="@/static/tu.png" mode="aspectFill" style="width: 150rpx; height: 150rpx;"></image>
+						<view class="flex-sub padding-left-sm">
+							<view class="bref-box margin-top-xs">
+								网红辣椒棒 魔鬼辣椒挑战全网第一辣 网红优惠季 
+							</view>
+							<text class="block margin-top-sm text-gray text-sm">网红辣椒棒 500g <text class="margin-left text-gray">x1</text></text>
+							
+							<view class="flex justify-between margin-top-sm">
+								<view class="text-red text-price text-lg">
+									<amount :value="Number(19.90 || 0)" :is-round-up="false" :precision="2" :duration="800" transition></amount>
+								</view>
+								<view>
+									<button v-if="true" class="cu-btn line-orange round margin-left-sm text-sm" @tap="$routerGo('/pages/order/apply-refund')">申请退款</button>
+									<button v-else class="cu-btn line-gray bg-gray round margin-left-sm text-sm">退款中</button>
+								</view>
+							</view>
+						</view>
+					</view>
+
+				</skeleton>
+			</view>
+			
+			<self-line/>
+			<!-- 表单 -->
+			<view class="bg-white">
+				<view class="cu-bar padding-lr solid-bottom flex justify-between align-center text-center">
+					<text class="text-gray">订单编号</text>
+					<view>
+						<text class="margin-right">67432428794847982374</text>
+						<text class="text-orange text-sm">复制</text>
+					</view>
+				</view>
+				<view class="cu-bar padding-lr solid-bottom">
+					<text class="text-gray">下单时间</text>
+					<text>2021-6-17  15:35:46</text>
+				</view>
+				<view class="cu-bar padding-lr solid-bottom">
+					<text class="text-gray">付款时间</text>
+					<text>微信支付</text>
+				</view>
+				<view class="cu-bar padding-lr solid-bottom">
+					<text class="text-gray">支付方式</text>
+					<text>2021-6-17  15:35:46</text>
+				</view>
+			</view>
+			
+			<self-line/>
+			<view class="bg-white">
+				<view class="cu-bar padding-lr solid-bottom">
+					<text class="text-gray">优惠</text>
+					<text>暂无优惠</text>
+				</view>
+			</view>
+			
+			<self-line/>
+			<view class="bg-white flex flex-direction justify-around align-center text-center padding-tb">
+				<view>
+					<tki-qrcode ref="qrcode" @result="qrR" :val="area" :size="120" unit="px" background="#fff" foreground="#000"
+					 pdground="#000" :onval="true" :loadMake="true" :icon="require('@/static/images/system/user-default.jpg')" />
+				</view>
+				<view class="flex justify-around align-center text-center margin-top-sm">
+					<view>
+						<image class="margin-right" src="@/static/images/system/refresh.png" mode="widthFix" style="width: 20px;height: 20px;"></image>
+					</view>
+					<view class="text-lg">SP738644872</view>
+					<view class="text-orange text-sm margin-left" @tap="copy('SP738644872')">复制</view>
+				</view>
+				<view class="margin-top-sm text-green text-sm">
+					待使用
+				</view>
+			</view>
+			<view class="padding-lr padding-tb-sm bg-white flex justify-between align-center solid-top">
+				<view class="flex align-center">
+					<text class="text-gray text-sm">已付款：</text>
+					<view class="text-lg text-price text-red">
+						<amount :value="Number(19.90 || 0)" :is-round-up="false" :precision="2" :duration="800" transition></amount>
+					</view>
+				</view>
+				<view>
+					已付款
+				</view>
+			</view>
+		</mescroll-body>
+	</view>
+</template>
+
+<script>
+	import tkiQrcode from "tki-qrcode" // 二维码生成器
+	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
+	export default {
+		mixins: [MescrollMixin], // 使用mixin
+		data() {
+			return {
+				area: '币种地址',
+				base64Img: '',	//
+				skeletonLoading: true,
+				payCur: 0, //支付方式下标
+				loading: false,
+				address: {},
+				shopData: {},
+				num: 0,
+				payPwd: '',
+				price: '',	//价格
+			}
+		},
+		components: {
+			tkiQrcode
+		},
+		computed: {
+			disabled() {
+				// 必须输入 邮箱和验证码 才能点击下一步
+				if (this.payPwd) return false
+				return true
+			},
+			total(){
+				return this.num * this.price
+			}
+		},
+		onLoad(e) {
+			setTimeout(()=>{
+				this.skeletonLoading = false
+				this.mescroll.endSuccess(); // 请求成功,隐藏加载状态
+			},1000)
+		},
+		methods: {
+			//二维码回调
+			qrR(data) {
+				this.base64Img = data;
+			},
+			// 点击复制
+			copy(text) {
+				//app的复制方法
+				// #ifdef APP-PLUS
+				uni.setClipboardData({
+					data: text
+				});
+				// #endif
+			
+				//html的复制方法
+				// #ifdef H5
+				this.$copyText(text)
+					.then(res => {
+						uni.showToast({
+							title: '复制成功'
+						});
+					})
+					.catch(err => {
+						uni.showToast({
+							icon: 'none',
+							title: '复制失败，您的浏览器不支持'
+						});
+					});
+				// #endif
+			},
+			submit(){
+				this.$routerGo('/pages/order/order?type=all')
+			},
+			//下拉刷新
+			downCallback() {
+				setTimeout(()=>{
+					this.mescroll.endSuccess(); // 请求成功,隐藏加载状态
+					this.mescroll.endErr(); // 请求失败,隐藏加载状态
+				},1000)
+			},
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.address-box {
+		// background-image: url(../../static/images/shop/envelope.png);
+		background-repeat: repeat-x;
+		background-position: left bottom;
+		background-size: auto 8rpx;
+	}
+
+	.self-img-sm {
+		width: 40rpx;
+		height: 40rpx;
+	}
+
+	.bref-box {
+		text-overflow: -o-ellipsis-lastline;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		display: -webkit-box;
+		-webkit-line-clamp: 2;
+		-webkit-box-orient: vertical;
+	}
+
+	.order-bottom {
+		position: relative;
+
+		.cuIcon-fold {
+			position: absolute;
+			right: 50rpx;
+			top: -19rpx;
+			color: rgba(0, 0, 0, 0.1)
+		}
+	}
+</style>
diff --git a/pages/order/order-item.vue b/pages/order/order-item.vue
index 3d47e6d..a21cedf 100644
--- a/pages/order/order-item.vue
+++ b/pages/order/order-item.vue
@@ -7,7 +7,7 @@
 				
 				<block v-for="(item, index) in assetsFlow" :key="index">
 					<view class="margin-top bg-white">
-						<view class="flex justify-between align-start solid-bottom padding-tb-sm padding-lr">
+						<view class="flex justify-between align-start solid-bottom padding-tb-sm padding-lr" @tap="$routerGo('/pages/order/order-details')">
 							<image src="@/static/tu.png" mode="aspectFill" style="width: 150rpx; height: 150rpx;"></image>
 							<view class="flex-sub padding-left-sm">
 								<view class="bref-box margin-top-xs">
@@ -23,7 +23,7 @@
 										<button v-if="i==1" class="cu-btn line-gray round margin-left-sm" @tap="orderClick(item,'modalShowCancel')">取消订单</button>
 										<button v-if="i==2" class="cu-btn line-red round margin-left-sm" @tap="$routerGo('/pages/shop/returngoods?id=1')">我要退货</button>
 										<button v-if="i==2" class="cu-btn line-black round margin-left-sm" @tap="orderClick(item,'modalShowConfirm')">确认收货</button>
-										<button v-if="i !=1 && i != 2" class="cu-btn line-orange round margin-left-sm" @tap="orderClick(item,'modalShowDel')">立即付款</button>
+										<button v-if="i !=1 && i != 2" class="cu-btn line-orange round margin-left-sm" @tap.stop="$routerGo('/pages/order/confirm-order')">立即付款</button>
 									</view>
 								</view>
 							</view>
diff --git a/pages/order/pay-success.vue b/pages/order/pay-success.vue
new file mode 100644
index 0000000..75d3cb7
--- /dev/null
+++ b/pages/order/pay-success.vue
@@ -0,0 +1,54 @@
+<template>
+	<view>
+		<view v-if="false" class="flex flex-direction justify-around text-center align-center margin-bottom margin-top-lg">
+			<view>
+				<image src="@/static/images/system/paysuccess.png" mode="widthFix" style="height: 100px;width: 100px;"></image>
+			</view>
+			<view class="text-xxl margin-tb text-orange text-bold">订单支付成功</view>
+			<view class="text-gray">
+				您可以在我的订单中查询订单详情
+			</view>
+		</view>
+		<view v-else class="flex flex-direction justify-around text-center align-center margin-bottom margin-top-lg">
+			<view>
+				<image src="@/static/images/system/payfail.png" mode="widthFix" style="height: 100px;width: 100px;"></image>
+			</view>
+			<view class="text-xxl margin-tb text-gray text-bold">订单支付失败</view>
+			<view class="text-gray">
+				您可以在我的订单中查询订单详情
+			</view>
+		</view>
+		<view class="margin-top flex flex-direction justify-around">
+			<view class="padding-top padding-lr-lg">
+				<button class="cu-btn block bg-orange lg margin-top round" @tap="$routerGo('/pages/order/order-details')">
+					<text class="text-df text-white">查看订单</text>
+				</button>
+			</view>
+			<view class="padding-top-sm padding-lr-lg">
+				<button class="cu-btn block bg-white border lg margin-top round" @tap="returnIndex()">
+					<text class="text-df text-black">返回首页</text>
+				</button>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				
+			}
+		},
+		methods: {
+			returnIndex() {
+				uni.switchTab({
+					url: '/pages/order/index'
+				})
+			}
+		}
+	}
+</script>
+
+<style>
+</style>
diff --git a/static/images/logo.gif b/static/images/logo.gif
new file mode 100644
index 0000000..b2af14a
Binary files /dev/null and b/static/images/logo.gif differ
diff --git a/static/images/mescroll-empty.png b/static/images/mescroll-empty.png
new file mode 100644
index 0000000..918fb82
Binary files /dev/null and b/static/images/mescroll-empty.png differ
diff --git a/static/images/system/payfail.png b/static/images/system/payfail.png
new file mode 100644
index 0000000..d42a1f6
Binary files /dev/null and b/static/images/system/payfail.png differ
diff --git a/static/images/system/paysuccess.png b/static/images/system/paysuccess.png
new file mode 100644
index 0000000..c961320
Binary files /dev/null and b/static/images/system/paysuccess.png differ
diff --git a/static/images/system/refresh.png b/static/images/system/refresh.png
new file mode 100644
index 0000000..f239f35
Binary files /dev/null and b/static/images/system/refresh.png differ
diff --git a/static/images/system/user-default.jpg b/static/images/system/user-default.jpg
new file mode 100644
index 0000000..a7ed10d
Binary files /dev/null and b/static/images/system/user-default.jpg differ
diff --git a/static/tabbar/home-active.png b/static/tabbar/home-active.png
new file mode 100644
index 0000000..20d374f
Binary files /dev/null and b/static/tabbar/home-active.png differ
diff --git a/static/tabbar/home.png b/static/tabbar/home.png
new file mode 100644
index 0000000..3f7f029
Binary files /dev/null and b/static/tabbar/home.png differ
diff --git a/static/tabbar/my-active.png b/static/tabbar/my-active.png
new file mode 100644
index 0000000..845e73f
Binary files /dev/null and b/static/tabbar/my-active.png differ
diff --git a/static/tabbar/my.png b/static/tabbar/my.png
new file mode 100644
index 0000000..17632e3
Binary files /dev/null and b/static/tabbar/my.png differ
diff --git a/static/tabbar/order-active.png b/static/tabbar/order-active.png
new file mode 100644
index 0000000..93274b3
Binary files /dev/null and b/static/tabbar/order-active.png differ
diff --git a/static/tabbar/order.png b/static/tabbar/order.png
new file mode 100644
index 0000000..f4d3655
Binary files /dev/null and b/static/tabbar/order.png differ