From eda69d0269921f7209ce76de8c11e947867b5d1b Mon Sep 17 00:00:00 2001
From: Fox-33 <1466778434@qq.com>
Date: Tue, 26 Aug 2025 13:03:04 +0800
Subject: [PATCH] feat: page-order+;

---
 common.scss                                        |   2 +-
 components/base/navbar.vue                         |  13 +-
 pages.json                                         |  14 +-
 pages/index/index.vue                              |   7 +-
 pages_order/auth/wxUserInfo.vue                    | 226 +++---
 pages_order/coupon/couponCard.vue                  |  85 +++
 pages_order/coupon/index.vue                       | 139 ++++
 .../order/components/contactMentorPopup.vue        | 114 +++
 pages_order/order/components/orderInfoView.vue     | 230 ++++++
 .../{orderConfirm => components}/productCard.vue   |  50 +-
 pages_order/order/orderConfirm/index.vue           | 495 +++++++------
 pages_order/order/orderConfirm/infoPopup.vue       |   1 -
 pages_order/order/orderConfirm/memberCard.vue      | 128 ++++
 .../order/orderConfirm/memberChooseView.vue        |  60 ++
 pages_order/order/orderDetail/index.vue            | 791 ++++++---------------
 pages_order/order/orderList/index.vue              |  29 +-
 pages_order/order/orderList/orderCard.vue          | 286 ++------
 pages_order/order/orderPay/index.vue               | 329 +++++++++
 pages_order/order/styles/style.scss                | 161 +++++
 pages_order/order/styles/tag.scss                  |  23 +
 pages_order/traveler/travelerCard.vue              |   2 +-
 pages_order/traveler/travelerPopup.vue             |  14 +-
 static/image/icon-change.png                       | Bin 0 -> 542 bytes
 static/image/icon-phone.png                        | Bin 0 -> 1082 bytes
 static/image/icon-plus.png                         | Bin 0 -> 651 bytes
 .../traveler => static/image}/icon-require.png     | Bin
 store/store.js                                     |   4 +
 27 files changed, 2036 insertions(+), 1167 deletions(-)
 create mode 100644 pages_order/coupon/couponCard.vue
 create mode 100644 pages_order/coupon/index.vue
 create mode 100644 pages_order/order/components/contactMentorPopup.vue
 create mode 100644 pages_order/order/components/orderInfoView.vue
 rename pages_order/order/{orderConfirm => components}/productCard.vue (80%)
 create mode 100644 pages_order/order/orderConfirm/memberCard.vue
 create mode 100644 pages_order/order/orderConfirm/memberChooseView.vue
 create mode 100644 pages_order/order/orderPay/index.vue
 create mode 100644 pages_order/order/styles/style.scss
 create mode 100644 pages_order/order/styles/tag.scss
 create mode 100644 static/image/icon-change.png
 create mode 100644 static/image/icon-phone.png
 create mode 100644 static/image/icon-plus.png
 rename {pages_order/static/traveler => static/image}/icon-require.png (100%)

diff --git a/common.scss b/common.scss
index 0f52d15..1e22371 100644
--- a/common.scss
+++ b/common.scss
@@ -54,7 +54,7 @@
 	width: 100vw;
 	min-height: 100vh;
 	color: #181818;
-	background: linear-gradient(#DAF3FF, #F4F4F4 200rpx, #F4F4F4);
+	background: linear-gradient(#DAF3FF, #F4F4F4 400rpx, #F4F4F4);
 	position: relative;
 	font-family: PingFang SC;
 	font-weight: 400;
diff --git a/components/base/navbar.vue b/components/base/navbar.vue
index 582b3f1..45beebe 100644
--- a/components/base/navbar.vue
+++ b/components/base/navbar.vue
@@ -15,7 +15,11 @@
 				@click="$emit('leftClick')"
 				:color="color"  size="46rpx"></uv-icon>
 			</view>
-			<view>{{ title }}</view>
+			<view>
+				<slot>
+					{{ title }}
+				</slot>
+			</view>
 			<view class="icon">
 				
 				<uv-icon name="search"
@@ -69,10 +73,10 @@
 				
 			},
 			bgColor : {
-				default : '#fff'
+				default : 'transparent'
 			},
 			color : {
-				default : '#333'
+				default : '#191919'
 			}
 		},
 		created() {
@@ -110,8 +114,7 @@
 	left: 0;
 	padding-top: calc(var(--status-bar-height) + 20rpx);
 	width: 100%;
-	height: 100rpx;
-	background-color: #fff;
+	height: $navbar-height;
 	display: flex;
 	justify-content: center;
 	font-size: 32rpx;
diff --git a/pages.json b/pages.json
index 42ddbde..84af214 100644
--- a/pages.json
+++ b/pages.json
@@ -47,22 +47,28 @@
 				"path": "product/productDetail"
 			},
 			{
-				"path": "traveler/travelerList"
+				"path": "order/orderConfirm/index"
 			},
 			{
-				"path": "order/orderConfirm/index"
+				"path": "order/orderPay/index"
 			},
 			{
-				"path": "order/orderList/index",
+				"path": "order/orderDetail/index",
 				"style": {
 					"enablePullDownRefresh": true
 				}
 			},
 			{
-				"path": "order/orderDetail/index",
+				"path": "order/orderList/index",
 				"style": {
 					"enablePullDownRefresh": true
 				}
+			},
+			{
+				"path": "traveler/travelerList"
+			},
+			{
+				"path": "coupon/index"
 			}
 		]
 	}],
diff --git a/pages/index/index.vue b/pages/index/index.vue
index edb4a75..8903ae4 100644
--- a/pages/index/index.vue
+++ b/pages/index/index.vue
@@ -93,10 +93,13 @@
 			}
 		},
 		onLoad() {
+			// uni.navigateTo({
+			// 	url: `/pages_order/order/orderConfirm/index`
+			// })
+			// return
 			uni.navigateTo({
-				url: `/pages_order/product/productDetail`
+				url: `/pages_order/order/orderDetail/index`
 			})
-      // this.$utils.navigateTo('/pages_order/traveler/travelerList')
 
 			// let id = '1948353988875821058'
 			// uni.navigateTo({
diff --git a/pages_order/auth/wxUserInfo.vue b/pages_order/auth/wxUserInfo.vue
index b10db03..4c4ef41 100644
--- a/pages_order/auth/wxUserInfo.vue
+++ b/pages_order/auth/wxUserInfo.vue
@@ -3,63 +3,32 @@
 
 		<navbar title="修改信息" leftClick @leftClick="$utils.navigateBack" color="#191919" bgColor="#FFFFFF" />
 
-		<view class="flex flex-column content">
-			
-			<!-- todo: check key -->
-			<image class="logo" src="@/static/image/temp-29.png" mode="widthFix"></image>
-			<!-- todo: check key -->
-			<view class="name">鸿宇研学生</view>
-
-			<view class="title">
-				申请获取你的头像、昵称
-			</view>
-
-			<view class="form">
-				<uv-form 
-					ref="form"
-					:model="form"
-					:rules="rules"
-					errorType="toast"
-				>
-					<view class="form-item">
-						<uv-form-item prop="phone" :customStyle="formItemStyle">
-							<view class="row">
-								<view class="form-item-label">头像</view>
-								<view class="form-item-content input">
-									<button class="btn btn-avatar" :plain="true" :hairline="false" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
-										<view v-if="form.avatar" class="avatar">
-											<image class="img" :src="form.avatar" mode="aspectFill"></image>
-											<view class="flex mask">
-												<image class="icon" src="@/pages_order/static/center/icon-change.png" mode="widthFix" />
-											</view>
-										</view>
-										<view v-else class="flex avatar is-empty">
-											<image class="icon" src="@/pages_order/static/auth/avatar.png" mode="widthFix" />
-										</view>
-									</button>
-								</view>
-							</view>
-						</uv-form-item>
-					</view>
-					<view class="form-item">
-						<uv-form-item prop="name" :customStyle="formItemStyle">
-							<view class="row">
+    <view class="main">
+
+      <view class="card">
+        <view class="card-header">个人信息</view>
+        <view class="form">
+          <uv-form 
+            ref="form"
+            :model="form"
+            :rules="rules"
+            errorType="toast"
+          >
+						<view class="form-item">
+							<uv-form-item prop="name" :customStyle="formItemStyle">
 								<view class="form-item-label">昵称</view>
 								<view class="form-item-content input">
 									<input 
 										type="nickname" 
 										placeholder="请输入"
-										placeholderStyle="color: #C6C6C6; font-size: 32rpx; font-weight: 400;"
+    								placeholderStyle="color: #C6C6C6; font-size: 32rpx; font-weight: 400;"
 										v-model="form.name" 
-										style="text-align: right;"
 									/>
 								</view>
-							</view>
-						</uv-form-item>
-					</view>
-					<view class="form-item">
-						<uv-form-item prop="phone" :customStyle="formItemStyle">
-							<view class="row">
+							</uv-form-item>
+						</view>
+						<view class="form-item">
+							<uv-form-item prop="phone" :customStyle="formItemStyle">
 								<view class="form-item-label">电话</view>
 								<view class="form-item-content input">
 									<formInput v-if="form.phone" v-model="form.phone"></formInput>
@@ -73,16 +42,37 @@
 										</button>
 									</view>
 								</view>
-							</view>
-						</uv-form-item>
-					</view>
-				</uv-form>
+							</uv-form-item>
+						</view>
+						<view class="form-item">
+							<uv-form-item prop="phone" :customStyle="formItemStyle">
+								<view class="form-item-label">头像</view>
+								<view class="form-item-content input">
+									<button class="btn btn-avatar" :plain="true" :hairline="false" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
+										<view v-if="form.avatar" class="avatar">
+											<image class="img" :src="form.avatar" mode="aspectFill"></image>
+											<view class="flex mask">
+	        							<image class="icon" src="@/static/image/icon-change.png" mode="widthFix" />
+											</view>
+										</view>
+										<view v-else class="flex avatar is-empty">
+        							<image class="icon" src="@/static/image/icon-plus.png" mode="widthFix" />
+										</view>
+									</button>
+								</view>
+							</uv-form-item>
+						</view>
+					</uv-form>
+				</view>
 			</view>
+    </view>
+  
+    <view class="bottom">
+      <button class="btn" @click="onSubmit">保存</button>
+    </view>
 
-			<button class="btn btn-save" @click="onSubmit">保存</button>
-		</view>
-
-	</view>
+  </view>
+	
 </template>
 
 <script>
@@ -208,66 +198,86 @@
 </script>
 
 <style lang="scss" scoped>
-	
+
 	.page__view {
 		width: 100vw;
 		min-height: 100vh;
-		padding: 0 40rpx;
-		box-sizing: border-box;
-		background: #FFFFFF;
+		background-color: $uni-bg-color;
+		position: relative;
+		
+		/deep/ .nav-bar__view {
+			position: fixed;
+			top: 0;
+			left: 0;
+		}
 	}
 
-	.content {
-		margin-top: 52rpx;
+	.main {
+		padding: calc(var(--status-bar-height) + 144rpx) 32rpx 224rpx 32rpx;
 	}
 
-	.logo {
-		width: 248rpx;
-		height: auto;
-	}
+	.card {
+		padding: 32rpx;
+		background: #FAFAFF;
+		border: 2rpx solid #FFFFFF;
+		border-radius: 32rpx;
 
-	.name {
-		margin-top: 20rpx;
-		font-family: Alimama ShuHeiTi;
-		font-size: 56rpx;
-		font-weight: 700;
-		color: #000000;
-	}
+		& + & {
+			margin-top: 40rpx;
+		}
 
-	.title {
-		color: #333333;
-		font-size: 32rpx;
-		font-weight: 500;
-		margin-top: 20rpx;
+		&-header {
+			font-family: PingFang SC;
+			font-weight: 500;
+			font-size: 36rpx;
+			line-height: 1.4;
+			color: #252545;
+			margin-bottom: 32rpx;
+		}
 	}
-	
+
 	.row {
-		display: flex;
 		justify-content: space-between;
-		align-items: center;
 		font-family: PingFang SC;
 		font-weight: 400;
 		line-height: 1.4;
 		column-gap: 24rpx;
+
+		& + & {
+			margin-top: 32rpx;
+		}
+
+		&-label {
+			flex: none;
+			font-size: 26rpx;
+			color: #8B8B8B;
+		}
+
+		&-content {
+			font-size: 32rpx;
+			color: #181818;
+		}
 	}
 
 	.form {
-		margin-top: 122rpx;
-    width: 100%;
+		padding: 8rpx 0 0 0;
 
 		&-item {
 			border-bottom: 2rpx solid #EEEEEE;
 
+			&:last-child {
+				border: none;
+			}
+
 			& + & {
-				margin-top: 20rpx;
+				margin-top: 40rpx;
 			}
 
 			&-label {
-				min-height: 96rpx;
 				font-family: PingFang SC;
-				font-size: 36rpx;
-				font-weight: 500;
-				line-height: 96rpx;
+				font-weight: 400;
+				font-size: 26rpx;
+				line-height: 1.4;
 				color: #181818;
 			}
 
@@ -307,8 +317,8 @@
 
 	.avatar {
 		position: relative;
-		width: 96rpx;
-		height: 96rpx;
+		width: 200rpx;
+		height: 200rpx;
 		border-radius: 24rpx;
 		overflow: hidden;
 
@@ -343,19 +353,31 @@
 		}
 	}
 
+	.bottom {
+		position: fixed;
+		left: 0;
+		bottom: 0;
 
-	.btn-save {
-		margin-top: 100rpx;
-		width: 100%;
-		padding: 16rpx 0;
+		width: 100vw;
+		// height: 200rpx;
+		padding: 24rpx 40rpx;
+		padding-bottom: calc(env(safe-area-inset-bottom) + 24rpx);
+		background: #FFFFFF;
 		box-sizing: border-box;
-		font-family: PingFang SC;
-		font-weight: 500;
-		font-size: 36rpx;
-		line-height: 1;
-		color: #FFFFFF;
-		background-image: linear-gradient(to right, #21FEEC, #019AF9);
-		border-radius: 41rpx;
+
+		.btn {
+			width: 100%;
+			padding: 14rpx 0;
+			box-sizing: border-box;
+			font-family: PingFang SC;
+			font-weight: 500;
+			font-size: 36rpx;
+			line-height: 1;
+			color: #FFFFFF;
+			background-image: linear-gradient(to right, #21FEEC #019AF9);
+			border: 2rpx solid #00A9FF;
+			border-radius: 41rpx;
+		}
 	}
 
 </style>
\ No newline at end of file
diff --git a/pages_order/coupon/couponCard.vue b/pages_order/coupon/couponCard.vue
new file mode 100644
index 0000000..d46f091
--- /dev/null
+++ b/pages_order/coupon/couponCard.vue
@@ -0,0 +1,85 @@
+<template>
+  <view class="flex card">
+    <view class="radio">
+      <uv-radio :name="data.id"></uv-radio>
+    </view>
+    <view class="flex price">
+      ¥<view class="highlight">{{ data.price }}</view>
+    </view>
+    <view class="flex flex-column info">
+      <view class="title">{{ data.label }}</view>
+      <view class="desc">{{ `有效期至 ${data.validTime}` }}</view>
+    </view>
+  </view>
+</template>
+
+<script>
+  export default {
+    props: {
+      data: {
+        type: Object,
+        default() {
+          return {}
+        }
+      },
+      value: {
+        type: String,
+        default: null,
+      }
+    },
+    data() {
+      return {
+      }
+    },
+    methods: {
+    },
+  }
+</script>
+
+<style scoped lang="scss">
+
+  .card {
+    column-gap: 24rpx;
+    padding: 8rpx 8rpx 8rpx 26rpx;
+    font-family: PingFang SC;
+    font-weight: 400;
+    line-height: 1.4;
+    background: #FFFFFF;
+    border-radius: 24rpx;
+  }
+
+  .price {
+    width: 164rpx;
+    height: 224rpx;
+    font-size: 24rpx;
+    font-weight: 500;
+    color: #FF4800;
+    background: #FFF2F2;
+    border-radius: 16rpx;
+
+    .highlight {
+      font-size: 48rpx;
+    }
+  }
+
+  .info {
+    flex: 1;
+    align-items: flex-start;
+    row-gap: 16rpx;
+    height: 224rpx;
+    padding-left: 24rpx;
+    border-left: 2rpx dashed #DADADA;
+
+    .title {
+      font-size: 32rpx;
+      font-weight: 500;
+      color: #181818;
+    }
+
+    .desc {
+      font-size: 28rpx;
+      color: #9B9B9B;
+    }
+  }
+
+</style>
\ No newline at end of file
diff --git a/pages_order/coupon/index.vue b/pages_order/coupon/index.vue
new file mode 100644
index 0000000..66d2d63
--- /dev/null
+++ b/pages_order/coupon/index.vue
@@ -0,0 +1,139 @@
+<template>
+	<view class="page__view">
+
+		<navbar title="我的优惠券" leftClick @leftClick="$utils.navigateBack" color="#191919" bgColor="#FFFFFF" />
+
+    <view class="list">
+      <uv-radio-group 
+        v-model="selectedId" 
+        placement="column"
+        shape="circle"
+        size="36rpx"
+        iconSize="36rpx"
+        activeColor="#00A9FF"
+        @change="onRadioChange"
+      >
+      <view class="list-item" v-for="item in list" :key="item.id">
+        <couponCard 
+          :data="item" 
+          @select="onSelect"
+        ></couponCard>
+      </view>
+      </uv-radio-group>
+    </view>
+
+  </view>
+  
+</template>
+
+<script>
+	import { mapState } from 'vuex'
+
+	import mixinsList from '@/mixins/list.js'
+
+  import couponCard from './couponCard.vue'
+
+  export default {
+		mixins: [mixinsList],
+    components: {
+      couponCard,
+    },
+    data() {
+      return {
+        // todo: check key
+				mixinsListApi: '',
+        queryParams: {
+          pageNo: 1,
+          pageSize: 10,
+        },
+        selectedId: null,
+      }
+    },
+    computed: {
+			...mapState(['couponInfo']),
+    },
+    onLoad(arg) {
+      if (this.couponInfo?.id) {
+        this.selectedId = this.couponInfo.id
+      }
+
+      this.getData()
+    },
+    onUnload() {
+      if (!this.selectedId) {
+        this.$store.commit('setCouponInfo', null)
+        return
+      }
+
+      const target = this.list.find(item => item.id === this.selectedId)
+      this.$store.commit('setCouponInfo', target)
+    },
+    methods: {
+      // todo: delete
+      getData() {
+        this.list = [
+          {
+            id: '001',
+            label: '专属福利】20元红包',
+            price: 20,
+            validTime: '2026-04-28',
+          },
+          {
+            id: '002',
+            label: '专属福利】400元红包',
+            price: 400,
+            validTime: '2026-04-28',
+          },
+          {
+            id: '003',
+            label: '专属福利】400元红包',
+            price: 400,
+            validTime: '2026-04-28',
+          },
+          {
+            id: '004',
+            label: '专属福利】400元红包',
+            price: 400,
+            validTime: '2026-04-28',
+          },
+          {
+            id: '005',
+            label: '专属福利】400元红包',
+            price: 400,
+            validTime: '2026-04-28',
+          },
+        ]
+
+      },
+      onSelect(id) {
+        console.log('onSelect', id)
+        this.selectedId = id
+      },
+      onRadioChange(e) {
+        console.log('onRadioChange', e)
+      },
+    },
+  }
+</script>
+
+<style scoped lang="scss">
+  .page__view {
+		width: 100vw;
+		min-height: 100vh;
+		background-color: $uni-bg-color;
+		position: relative;
+  }
+
+  .list {
+    padding: 32rpx 40rpx;
+
+    &-item {
+
+      & + & {
+        margin-top: 24rpx;
+      }
+
+    }
+  }
+
+</style>
\ No newline at end of file
diff --git a/pages_order/order/components/contactMentorPopup.vue b/pages_order/order/components/contactMentorPopup.vue
new file mode 100644
index 0000000..2af80a2
--- /dev/null
+++ b/pages_order/order/components/contactMentorPopup.vue
@@ -0,0 +1,114 @@
+<template>
+  <view>
+    <uv-popup ref="popup" mode="bottom" bgColor="none" >
+      <view class="popup__view">
+        <view class="flex header">
+          <view class="title">导师电话</view>
+          <button class="btn" @click="close">关闭</button>
+        </view>
+        <view class="flex content">
+          <view>{{ phone }}</view>
+          <button plain class="flex btn" @click="onCall">
+            <image class="btn-icon" src="@/static/image/icon-phone.png" mode="widthFix"></image>
+          </button>
+        </view>
+      </view>
+    </uv-popup>
+  </view>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        phone: null,
+      }
+    },
+    methods: {
+      open(phone) {
+        this.phone = phone
+        this.$refs.popup.open()
+      },
+      close() {
+        this.$refs.popup.close()
+      },
+      onCall() {
+        uni.makePhoneCall({
+          phoneNumber: this.phone,
+          success() {
+            console.log('安卓拨打成功');
+          },
+          fail() {
+            console.log('安卓拨打失败');
+          }
+        })
+      },
+    },
+  }
+</script>
+
+<style lang="scss" scoped>
+
+  .popup__view {
+    width: 100vw;
+    display: flex;
+    flex-direction: column;
+    box-sizing: border-box;
+    font-family: PingFang SC;
+    font-weight: 400;
+    line-height: 1.4;
+    background: #FFFFFF;
+    border-top-left-radius: 32rpx;
+    border-top-right-radius: 32rpx;
+  }
+
+  .header {
+    position: relative;
+    width: 100%;
+    padding: 24rpx 0;
+    box-sizing: border-box;
+    border-bottom: 2rpx solid #EEEEEE;
+
+    .title {
+      font-family: PingFang SC;
+      font-weight: 500;
+      font-size: 34rpx;
+      line-height: 1.4;
+      color: #181818;
+    }
+
+    .btn {
+      font-family: PingFang SC;
+      font-weight: 500;
+      font-size: 32rpx;
+      line-height: 1.4;
+      color: #8B8B8B;
+      position: absolute;
+      top: 26rpx;
+      left: 40rpx;
+    }
+
+  }
+
+  .content {
+    padding: 84rpx;
+    column-gap: 12rpx;
+    font-size: 36rpx;
+    color: #181818;
+
+    .btn {
+      border: none;
+      width: 72rpx;
+      height: 72rpx;
+      background: #F6F6F6;
+      border-radius: 50%;
+      overflow: hidden;
+
+      &-icon {
+        width: 40rpx;
+        height: auto;
+      }
+    }
+  }
+
+</style>
\ No newline at end of file
diff --git a/pages_order/order/components/orderInfoView.vue b/pages_order/order/components/orderInfoView.vue
new file mode 100644
index 0000000..2fc1c4e
--- /dev/null
+++ b/pages_order/order/components/orderInfoView.vue
@@ -0,0 +1,230 @@
+<template>
+  <view>
+    <view class="card">
+      <view class="flex card-header" style="justify-content: space-between;">
+        <view>订单详情</view>
+        <view :class="['tag', `tag-${data.status}`]">
+          {{ statusDesc }}
+        </view>
+      </view>
+      <view class="flex member" v-for="item in members" :key="item.id">
+        <view class="info">
+          <view class="flex info-top">
+            <view>{{ item.name }}</view>
+            <view>{{ getTypeDesc(item.type) }}</view>
+            <view class="light">{{ getTypeTips(item.type) }}</view>
+          </view>
+          <view class="info-bottom">{{ item.idNo }}</view>
+        </view>
+        <view class="flex price">¥<view class="highlight">{{ item.price }}</view></view>
+      </view>
+      <view class="row">
+        <view class="row-label">总价格</view>
+        <view class="row-content">
+          <view class="flex total-price">
+            <view>¥</view>
+            <view class="highlight">{{ totalPrice }}</view>
+            <view class="light" v-if="data.discount">
+              {{ `优惠（${data.discount}）` }}
+            </view>
+          </view>
+        </view>
+      </view>
+    </view>
+    <view class="card">
+      <view class="card-header">联系人信息</view>
+      <view class="row">
+        <view class="row-label">真实姓名</view>
+        <view class="row-content">{{ data.name }}</view>
+      </view>
+      <view class="row">
+        <view class="row-label">手机号码</view>
+        <view class="row-content">{{ data.phone }}</view>
+      </view>
+    </view>
+    <view class="card order">
+      <view class="card-header">订单信息</view>
+      <view class="row">
+        <view class="row-label">订单编号</view>
+        <view class="row-content">{{ data.orderNo }}</view>
+      </view>
+      <view class="row">
+        <view class="row-label">下单时间</view>
+        <view class="row-content">{{ data.createTime }}</view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+
+  const ORDER_STATUS_AND_DESC_MAPPING = {
+    0: '待支付',
+    1: '已支付',
+    2: '已完成',
+  }
+  const MEMBER_TYPE_AND_DESC_MAPPING = {
+    0: '成人',
+    1: '青少年',
+    2: '儿童',
+  }
+  const MEMBER_TYPE_AND_TIPS_MAPPING = {
+    0: '(18周岁以上)',
+    1: '(14周岁以上)',
+    2: '(14周岁以下)',
+  }
+
+  export default {
+    props: {
+      data: {
+        type: Object,
+        default() {
+          return {}
+        }
+      },
+    },
+    computed: {
+      statusDesc() {
+        const { status } = this.data
+        return ORDER_STATUS_AND_DESC_MAPPING[status]
+      },
+      productPackage() {
+        const { time, product } = this.data
+        const { timeOptions } = product || {}
+
+        return timeOptions?.find?.(item => item.id === time) || {}
+      },
+			totalPrice() {
+        const { adults, teenager, child } = this.data
+
+        const { adultsPrice, teenagerPrice, childPrice } = this.productPackage
+
+        let total = 0
+        
+        adults && (total += adults * (adultsPrice || 0))
+        teenager && (total += teenager * (teenagerPrice || 0))
+        child && (total += child * (childPrice || 0))
+
+				return total
+			},
+      members() {
+        const { members } = this.data
+        const { adultsPrice, teenagerPrice, childPrice } = this.productPackage
+
+        return members?.map?.(item => {
+          const { type } = item
+
+          let price = 0
+          
+          switch(type) {
+            case 0: // 成年
+              price =  adultsPrice
+              break
+            case 1: // 青少年
+              price =  teenagerPrice
+              break
+            case 2: // 儿童
+              price =  childPrice
+              break
+          }
+
+          return { ...item, price }
+        })
+      },
+    },
+    methods: {
+      getTypeDesc(type) {
+        return MEMBER_TYPE_AND_DESC_MAPPING[type]
+      },
+      getTypeTips(type) {
+        return MEMBER_TYPE_AND_TIPS_MAPPING[type]
+      },
+    },
+  }
+</script>
+
+<style scoped lang="scss">
+
+  @import '../styles/style.scss';
+  
+  @import '../styles/tag.scss';
+
+  .member {
+    margin-top: 16rpx;
+    justify-content: space-between;
+    padding: 24rpx;
+    background: #F9F9F9;
+    border-radius: 24rpx;
+
+    .info {
+      &-top {
+        justify-content: space-between;
+        column-gap: 24rpx;
+        font-size: 32rpx;
+        color: #181818;
+
+        .light {
+          font-size: 24rpx;
+          color: #8B8B8B;
+        }
+      }
+
+      &-bottom {
+        font-size: 28rpx;
+        color: #9B9B9B;
+      }
+    }
+
+    .price {
+      column-gap: 4rpx;
+      font-size: 24rpx;
+      font-weight: 500;
+      color: #FF4800;
+
+      .highlight {
+        font-size: 32rpx;
+      }
+    }
+
+  }
+
+  .row {
+    margin-top: 16rpx;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    &-label {
+      font-size: 26rpx;
+      color: #8B8B8B;
+    }
+
+    &-content {
+      font-size: 28rpx;
+      color: #393939;
+    }
+  }
+
+  .order {
+    .row {
+      margin-top: 32rpx;
+    }
+  }
+
+  .total-price {
+    column-gap: 8rpx;
+    font-size: 24rpx;
+    font-weight: 500;
+    color: #FF4800;
+
+    .highlight {
+      font-size: 32rpx;
+    }
+
+    .light {
+      font-size: 22rpx;
+      font-weight: 400;
+    }
+  }
+
+</style>
\ No newline at end of file
diff --git a/pages_order/order/orderConfirm/productCard.vue b/pages_order/order/components/productCard.vue
similarity index 80%
rename from pages_order/order/orderConfirm/productCard.vue
rename to pages_order/order/components/productCard.vue
index 305ada6..5bd9cd6 100644
--- a/pages_order/order/orderConfirm/productCard.vue
+++ b/pages_order/order/components/productCard.vue
@@ -28,33 +28,33 @@
 </template>
 
 <script>
-export default {
-  props: {
-    data: {
-      type: Object,
-      default() {
-        return {}
-      }
-    },
-  },
-  computed: {
-    product() {
-      return this.data?.product || {}
-    },
-    productPackage() {
-      const { time, product } = this.data
-      const { timeOptions } = product || {}
-
-      return timeOptions?.find?.(item => item.id === time) || {}
+  export default {
+    props: {
+      data: {
+        type: Object,
+        default() {
+          return {}
+        }
+      },
     },
-    days() {
-      console.log('productPackage', this.productPackage)
-      const { startDate, endDate } = this.productPackage
-
-      return this.$dayjs(endDate).diff(this.$dayjs(startDate), 'day')
+    computed: {
+      product() {
+        return this.data?.product || {}
+      },
+      productPackage() {
+        const { time, product } = this.data
+        const { timeOptions } = product || {}
+
+        return timeOptions?.find?.(item => item.id === time) || {}
+      },
+      days() {
+        console.log('productPackage', this.productPackage)
+        const { startDate, endDate } = this.productPackage
+
+        return this.$dayjs(endDate).diff(this.$dayjs(startDate), 'day')
+      },
     },
-  },
-}
+  }
 </script>
 
 <style scoped lang="scss">
diff --git a/pages_order/order/orderConfirm/index.vue b/pages_order/order/orderConfirm/index.vue
index 45b1556..d6fdc94 100644
--- a/pages_order/order/orderConfirm/index.vue
+++ b/pages_order/order/orderConfirm/index.vue
@@ -1,26 +1,91 @@
 <template>
   <view class="page__view">
-		<navbar title="填写订单" leftClick @leftClick="$utils.navigateBack" color="#191919" bgColor="#F3F2F7" />
+		<navbar title="填写订单" leftClick @leftClick="$utils.navigateBack" />
 
     <view class="main">
 
-      <view class="card">
-        <productCard :data="orderInfo"></productCard>
-      </view>
-
-      <view class="order" v-if="orderData">
-        <view class="order-header">
-          订单信息
+      <productCard :data="orderInfo"></productCard>
+
+      <uv-form 
+        ref="form"
+        :model="form"
+        errorType="toast"
+      >
+        <view class="card">
+          <view class="card-header">联系人信息</view>
+          <view class="form-item">
+            <uv-form-item prop="name" :customStyle="formItemStyle">
+              <view class="form-item-label">
+                <image class="icon" src="@/static/image/icon-require.png" mode="widthFix"></image>
+                真实姓名
+              </view>
+              <view class="form-item-content">
+                <formInput v-model="form.name"></formInput>
+              </view>
+            </uv-form-item>
+          </view>
+          <view class="form-item">
+            <uv-form-item prop="phone" :customStyle="formItemStyle">
+              <view class="form-item-label">
+                <image class="icon" src="@/static/image/icon-require.png" mode="widthFix"></image>
+                手机号码
+              </view>
+              <view class="form-item-content">
+                <formInput v-model="form.phone"></formInput>
+              </view>
+            </uv-form-item>
+          </view>
         </view>
-        <view class="flex row">
-          <view class="row-label">订单编号</view>
-          <view class="row-content">{{ orderData.number }}</view>
+        <view class="card">
+          <view class="card-header">订单详情</view>
+          <view style="margin-top: 16rpx;">
+            <uv-form-item prop="members" :customStyle="formItemStyle">
+              <!-- style="width: calc(100vw - 40rpx*2);" -->
+              <view>
+                <peopleNumberInput 
+                  :adults.sync="form.adults"
+                  :teenager.sync="form.teenager"
+                  :child.sync="form.child"
+                  :adultsPrice="productPackage.adultsPrice"
+                  :teenagerPrice="productPackage.teenagerPrice"
+                  :childPrice="productPackage.childPrice"
+                ></peopleNumberInput>
+
+                <memberChooseView
+                  :members.sync="form.members"
+                ></memberChooseView>
+              </view>
+            </uv-form-item>
+          </view>
         </view>
-        <view class="flex row">
-          <view class="row-label">下单时间</view>
-          <view class="row-content">{{ $dayjs(orderData.createTime).format('YYYY-MM-DD HH:mm') }}</view>
+        <view class="card">
+          <view class="card-header">其他</view>
+          <view class="form-item">
+            <uv-form-item prop="coupon" :customStyle="formItemStyle">
+              <view class="form-item-label">选择优惠券</view>
+              <view class="form-item-content">
+                <view class="flex row" @click="jumpToSelectCoupon">
+                  <view v-if="form.coupon" class="text">{{ couponInfo.label }}</view>
+                  <view v-else class="text placeholder">请选择</view>
+                  <uv-icon name="arrow-right" color="#C6C6C6" size="32rpx"></uv-icon>
+                </view>
+              </view>
+            </uv-form-item>
+          </view>
+          <view class="form-item">
+            <uv-form-item prop="invoice" :customStyle="formItemStyle">
+              <view class="form-item-label">选择发票类型</view>
+              <view class="form-item-content">
+                <view class="flex row" @click="jumpToSelectInvoice">
+                  <view v-if="form.invoice" class="text">{{ getInvoiceDesc(form.invoice) }}</view>
+                  <view v-else class="text placeholder">请选择</view>
+                  <uv-icon name="arrow-right" color="#C6C6C6" size="32rpx"></uv-icon>
+                </view>
+              </view>
+            </uv-form-item>
+          </view>
         </view>
-      </view>
+      </uv-form>
       
       <view class="notice">
         <!-- <view class="notice-header">下单须知</view> -->
@@ -42,7 +107,7 @@
 					<uv-checkbox
 						size="40rpx"
 						icon-size="40rpx"
-						activeColor="#7451DE"
+						activeColor="#00A9FF"
 						:name="1"
 					></uv-checkbox>
 				</uv-checkbox-group>
@@ -59,13 +124,15 @@
 				</view>
 			</view>
       <view class="flex bar">
-        <view class="flex col price">
-          <view class="price-label">
-            已选<view>{{ `${totolPeople}人` }}</view>总额
+        <view class="col price">
+          <view class="flex price-label">
+            已选<view class="highlight">{{ `${totolPeople}人` }}</view>总额
+          </view>
+          <view class="flex price-value">
+            ¥<view class="highlight">{{ totalPrice }}</view>
           </view>
-          <view class="price-unit">¥</view><view class="price-value">{{ totalPrice }}</view>
         </view>
-        <button class="col btn" @click="onPay">立即支付</button>
+        <button class="col btn btn-primary btn-pay" @click="onPay">立即支付</button>
       </view>
     </view>
 
@@ -77,71 +144,158 @@
 <script>
 	import { mapState } from 'vuex'
 
-  import productCard from './productCard.vue'
+  import productCard from '@/pages_order/order/components/productCard.vue'
+  import peopleNumberInput from './peopleNumberInput.vue'
+  import memberChooseView from './memberChooseView.vue'
+  import formInput from '@/pages_order/components/formInput.vue'
 	import agreementModal from '@/pages_order/components/agreementModal.vue'
 
   export default {
     components: {
       productCard,
+      peopleNumberInput,
+      memberChooseView,
+      formInput,
       agreementModal,
     },
     data() {
       return {
-        id: null,
-        defaultAddressInfo: null,
-        orderData: null,
-        productList: [],
+        form: {
+          name: null,
+          phone: null,
+          adults: 0,
+          teenager: 0,
+          child: 0,
+          members: [],
+          coupon: null,
+          invoice: null,
+        },
         checkboxValue: [],
+        formItemStyle: { padding: 0 },
       }
     },
     computed: {
-			...mapState(['configList', 'userInfo', 'orderInfo']),
+			...mapState(['configList', 'userInfo', 'orderInfo', 'couponInfo']),
+      productPackage() {
+        const { time, product } = this.orderInfo
+        const { timeOptions } = product || {}
+
+        return timeOptions?.find?.(item => item.id === time) || {}
+      },
       totolPeople() {
-        const { adults, teenager, child } = this.orderInfo
+        const { adults, teenager, child } = this.form
 
         return (adults || 0) + (teenager || 0) + (child || 0)
       },
 			totalPrice() {
-        const { time, adults, teenager, child, product } = this.orderInfo
-        const { timeOptions } = product || {}
+        const { adults, teenager, child, coupon } = this.form
 
-        const { adultsPrice, teenagerPrice, childPrice } = timeOptions?.find?.(item => item.id === time) || {}
+        const { adultsPrice, teenagerPrice, childPrice } = this.productPackage
 
         let total = 0
         
         adults && (total += adults * (adultsPrice || 0))
         teenager && (total += teenager * (teenagerPrice || 0))
         child && (total += child * (childPrice || 0))
+        
+        coupon && (total -= (this.couponInfo?.price || 0))
 
 				return total
 			},
-      addressData() {
-        return this.addressInfo || this.defaultAddressInfo || null
-      },
+    },
+    watch: {
+      form: {
+        handler(val) {
+          this.$refs.form.setRules(this.getRules())
+        },
+        deep: true
+      }
+    },
+    onShow() {
+      if (this.couponInfo) {
+        this.form.coupon = this.couponInfo.id
+      }
     },
     onLoad(arg) {
       console.log('onLoad')
-
-      console.log('payOrderProduct', this.payOrderProduct)
-      this.productList = JSON.parse(JSON.stringify(this.payOrderProduct))
-      
-      // todo: check include Overseas Product ?
-			// this.$utils.navigateTo('/pages_order/order/userInfo/infoFill')
-
-      return
-      this.orderData = {
-        id: '001',
-        number: 'BH872381728321983929',
-        createTime: '2025-04-28 08:14',
-      }
-
-      console.log('orderData', this.orderData)
-
+      console.log('orderInfo', this.orderInfo)
+      this.initData()
+    },
+    onReady() {
+      this.$refs.form.setRules(this.getRules())
     },
     onUnload() {
-      this.$store.commit('setAddressInfo', null)
+      this.$store.commit('setCouponInfo', null)
     },
     methods: {
+      getRules() {
+        const { adults, teenager, child } = this.form
+
+        return {
+          'name': {
+            type: 'string',
+            required: true,
+            message: '请输入真实姓名',
+          },
+          'phone': {
+            type: 'string',
+            required: true,
+            message: '请输入手机号码',
+          },
+          'adults': {
+            type: 'number',
+            required: true,
+            message: '请选择人数',
+            validator: (rule, value, callback) => {
+
+              if (adults || teenager || child) {
+                return true
+              }
+
+              return false
+            },
+          },
+          'members': {
+            type: 'array',
+            required: true,
+            message: '请选择出行人',
+          },
+        }
+      },
+      initData() {
+        const {
+          time,
+          adults,
+          teenager,
+          child,
+          members,
+        } = this.orderInfo
+
+        this.form = {
+          name: null,
+          phone: null,
+          adults,
+          teenager,
+          child,
+          members: members.map(item => ({ ...item, isSelected: true })),
+          coupon: null,
+          invoice: null,
+        }
+      },
+      jumpToSelectCoupon() {
+        uni.navigateTo({
+          url: `/pages_order/coupon/index`
+        })
+      },
+      getCouponDesc() {
+        // todo
+      },
+      jumpToSelectInvoice() {
+        // todo
+      },
+      getInvoiceDesc() {
+        // todo
+      },
       onConfirmAgreement(confirm) {
         if (confirm) {
           this.checkboxValue = [1]
@@ -156,22 +310,52 @@
             icon:'none'
           })
         }
+        
+        try {
+          await this.$refs.form.validate()
+          
+          // todo: fetch create order and save wx pay data
+          const {
+            product,
+            time,
+          } = this.orderInfo
+
+          const {
+            name,
+            phone,
+            adults,
+            teenager,
+            child,
+            members,
+            coupon,
+            invoice,
+          } = this.form
+
+          const orderInfo = {
+            product,
+            couponInfo: this.couponInfo,
+            time,
+            adults,
+            teenager,
+            child,
+            members,
+            coupon,
+            invoice,
+            name,
+            phone,
+          }
+
+          this.$store.commit('setOrderInfo', orderInfo)
+          
+          // todo: get id?
+          uni.navigateTo({
+            url: `/pages_order/order/orderPay/index`
+          })
 
-        // todo
-
-        return
-        // const  { id } = this.orderData
+        } catch (err) {
 
-        const obj = {
-          // // todo: check title
-          // title: '营养套餐消费', 
-          // orderId: id,
-          list: this.productList,
-          addressId: this.addressData.id,
-          amount: this.totalPrice,
         }
 
-        this.$refs.payPopup.open(obj)
       },
       onPaySuccess() {
         setTimeout(() => {
@@ -193,179 +377,46 @@
 
 <style scoped lang="scss">
 
-	.page__view {
-		width: 100vw;
-		min-height: 100vh;
-		background-color: $uni-bg-color;
-		position: relative;
-
-    /deep/ .nav-bar__view {
-      position: fixed;
-      top: 0;
-      left: 0;
-    }
-  }
-
-  .main {
-    padding: calc(var(--status-bar-height) + 144rpx) 32rpx 310rpx 32rpx;
-  }
-
-  .address {
-    margin-bottom: 40rpx;
-    justify-content: space-between;
+  @import '../styles/style.scss';
 
-    padding: 24rpx 32rpx;
-    background: #FFFFFF;
-    border-radius: 24rpx;
-  }
+  .price {
+    justify-content: flex-start;
 
-  .card {
-    & + & {
-      margin-top: 32rpx;
-    }
-  }
-
-  .order {
-    margin-top: 40rpx;
-    padding: 32rpx;
-    background: #FAFAFF;
-    border: 2rpx solid #FFFFFF;
-    border-radius: 32rpx;
-
-    &-header {
-      font-family: PingFang SC;
-      font-weight: 500;
-      font-size: 36rpx;
-      line-height: 1.4;
-      color: #252545;
-    }
-    
-    .row {
-      margin-top: 32rpx;
-      justify-content: space-between;
+    &-label {
+      justify-content: flex-start;
+      column-gap: 12rpx;
       font-family: PingFang SC;
       font-weight: 400;
-      line-height: 1.4;
-
-      &-label {
-        font-size: 26rpx;
-        color: #8B8B8B;
-      }
-      
-      &-content {
-        font-size: 28rpx;
-        color: #393939;
-      }
-    }
-  }
-
-  .notice {
-    margin-top: 40rpx;
-    font-family: PingFang SC;
-    font-weight: 400;
-
-    &-header {
-      font-size: 28rpx;
-      line-height: 1.4;
-      color: #393939;
-    }
-
-    &-content {
-      margin-top: 24rpx;
       font-size: 24rpx;
       line-height: 1.4;
-      color: #BABABA;
-    }
-  }
-
-  .bottom {
-		position: fixed;
-		left: 0;
-		bottom: 0;
-
-		width: 100vw;
-		// height: 270rpx;
-		background: #FFFFFF;
-		box-sizing: border-box;
-    
-    .agreement {
-      display: flex;
-      padding: 16rpx 40rpx;
-      background: #EFEAFF;
-      box-sizing: border-box;
-
-      /deep/ .uv-checkbox-group {
-        flex: none;
-      }
-
-      .desc {
-        flex: 1;
-        font-family: PingFang SC;
-        font-size: 24rpx;
-        font-weight: 400;
-        line-height: 40rpx;
-        color: #8B8B8B;
-      }
+      color: #626262;
 
       .highlight {
+        font-size: 24rpx;
+        font-weight: 500;
         color: $uni-color;
       }
     }
 
-    .bar {
-      padding: 24rpx 40rpx;
-  		padding-bottom: calc(env(safe-area-inset-bottom) + 24rpx);
-      box-sizing: border-box;
-      column-gap: 30rpx;
-
-      .col {
-        flex: 1;
-      }
-
-      .price {
-        justify-content: flex-start;
-
-        &-label {
-          font-family: PingFang SC;
-          font-weight: 400;
-          font-size: 24rpx;
-          line-height: 1.4;
-          color: #626262;
-        }
-
-        &-unit {
-          margin: 0 8rpx;
-          font-family: PingFang SC;
-          font-weight: 500;
-          font-size: 24rpx;
-          line-height: 1.4;
-          color: #7451DE;
-        }
-
-        &-value {
-          font-family: PingFang SC;
-          font-weight: 500;
-          font-size: 40rpx;
-          line-height: 1.4;
-          color: #7451DE;
-        }
-      }
-
-      .btn {
-        width: 100%;
-        padding: 16rpx 0;
-        box-sizing: border-box;
-        font-family: PingFang SC;
-        font-weight: 500;
-        font-size: 36rpx;
-        line-height: 1;
-        color: #FFFFFF;
-        background-image: linear-gradient(to right, #4B348F, #845CFA);
-        border-radius: 41rpx;
+    &-value {
+      justify-content: flex-start;
+      column-gap: 8rpx;
+      font-family: PingFang SC;
+      font-weight: 500;
+      font-size: 24rpx;
+      line-height: 1.4;
+      color: $uni-color;
+      
+      .highlight {
+        font-size: 40rpx;
       }
-
     }
+  }
 
-	}
+  .btn-pay {
+    flex: none;
+    width: auto;
+    padding: 14rpx 74rpx;
+  }
 
 </style>
\ No newline at end of file
diff --git a/pages_order/order/orderConfirm/infoPopup.vue b/pages_order/order/orderConfirm/infoPopup.vue
index 9ba2c00..780f76a 100644
--- a/pages_order/order/orderConfirm/infoPopup.vue
+++ b/pages_order/order/orderConfirm/infoPopup.vue
@@ -127,7 +127,6 @@
       },
       form: {
         handler(val) {
-          console.log('watch form', val)
           this.$refs.form.setRules(this.getRules())
         },
         deep: true
diff --git a/pages_order/order/orderConfirm/memberCard.vue b/pages_order/order/orderConfirm/memberCard.vue
new file mode 100644
index 0000000..ae45cc6
--- /dev/null
+++ b/pages_order/order/orderConfirm/memberCard.vue
@@ -0,0 +1,128 @@
+<template>
+  <view class="flex card">
+    <view>
+      <uv-checkbox-group
+        v-model="selectCheckboxValue"
+        @change="onSelectChange"
+      >
+        <uv-checkbox
+          size="36rpx"
+          icon-size="36rpx"
+          activeColor="#00A9FF"
+          :name="1"
+        ></uv-checkbox>
+      </uv-checkbox-group>
+    </view>
+    <view class="info">
+      <view class="flex name">
+        <view>{{ data.name }}</view>
+        <view :class="['tag', `tag-${data.type}`]">{{ typeDesc }}</view>
+      </view>
+      <view class="id">{{ data.idNo }}</view>
+    </view>
+  </view>
+</template>
+
+<script>
+
+  const MEMBER_TYPE_AND_DESC_MAPPING = {
+    0: '成人',
+    1: '青少年',
+    2: '儿童',
+  }
+  
+  export default {
+    props: {
+      data: {
+        type: Object,
+        default() {
+          return {}
+        }
+      },
+    },
+    data() {
+      return {
+        selectCheckboxValue: [],
+      }
+    },
+    computed: {
+      isSelected: {
+        set(val) {
+          this.selectCheckboxValue = val ? [1]: []
+
+          if (this.data.isSelected == val) {
+            return
+          }
+
+          this.$emit('selectChange', val)
+        },
+        get() {
+          return this.selectCheckboxValue.length ? true : false
+        }
+      },
+      typeDesc() {
+        return MEMBER_TYPE_AND_DESC_MAPPING[this.data.type]
+      },
+    },
+    watch: {
+      data: {
+        handler(val) {
+          this.isSelected = val.isSelected
+        },
+        immediate: true,
+        deep: true,
+      }
+    },
+    methods: {
+      onSelectChange(val) {
+        this.isSelected = val.length ? true : false
+      },
+    }
+  }
+</script>
+
+<style scoped lang="scss">
+  .card {
+    justify-content: flex-start;
+    column-gap: 24rpx;
+    padding: 24rpx;
+    background: #F9F9F9;
+  }
+
+  .info {
+    .name {
+      justify-content: flex-start;
+      column-gap: 24rpx;
+      font-size: 32rpx;
+      color: #181818;
+
+      .tag {
+        padding: 2rpx 14rpx;
+        font-size: 24rpx;
+        color: #00A9FF;
+        background: #E9F8FF;
+        border: 2rpx solid #00A9FF;
+        border-radius: 8rpx;
+
+        &-1 {
+          color: #03C25C;
+          background: #E9FFF5;
+          border-color: #03C25C;
+        }
+
+        &-2 {
+          color: #EE6E05;
+          background: #FFEFE9;
+          border-color: #EE6E05;
+        }
+
+      }
+    }
+
+    .id {
+      margin-top: 8rpx;
+      font-size: 28rpx;
+      color: #9B9B9B;
+    }
+  }
+</style>
\ No newline at end of file
diff --git a/pages_order/order/orderConfirm/memberChooseView.vue b/pages_order/order/orderConfirm/memberChooseView.vue
new file mode 100644
index 0000000..de0e617
--- /dev/null
+++ b/pages_order/order/orderConfirm/memberChooseView.vue
@@ -0,0 +1,60 @@
+<template>
+  <view :style="style">
+    <view class="card" v-for="item in list" :key="item.id">
+      <memberCard 
+        :data="item" 
+        @selectChange="onSelectChange(item.id, $event)"
+      ></memberCard>
+    </view>
+  </view>
+</template>
+
+<script>
+  import memberCard from './memberCard.vue'
+
+  export default {
+    components: {
+      memberCard,
+    },
+    props: {
+      members: {
+        type: Array,
+        default() {
+          return []
+        },
+      },
+      style: {
+        type: String,
+        default: ''
+      },
+    },
+    computed: {
+      list: {
+        set(val) {
+          this.$emit('update:list', val)
+        },
+        get() {
+          return this.members
+        }
+      },
+    },
+    methods: {
+      onSelectChange(id, val) {
+
+        let list = [...this.list]
+
+        const target = list.find(item => item.id === id)
+
+        target.isSelected = val
+
+        this.list = list
+      },
+    },
+  }
+</script>
+
+<style scoped lang="scss">
+  .card {
+    margin-top: 16rpx;
+  }
+</style>
\ No newline at end of file
diff --git a/pages_order/order/orderDetail/index.vue b/pages_order/order/orderDetail/index.vue
index 0d921d0..d9ab425 100644
--- a/pages_order/order/orderDetail/index.vue
+++ b/pages_order/order/orderDetail/index.vue
@@ -1,320 +1,254 @@
 <template>
   <view class="page__view">
-		
-    <navbar title="订单详情" leftClick @leftClick="$utils.navigateBack" color="#191919" bgColor="#FFFFFF" />
+		<navbar title="订单详情" leftClick @leftClick="$utils.navigateBack" />
 
     <view class="main">
 
-      <template v-if="orderData">
+      <productCard :data="detail"></productCard>
 
-        <view class="card detail">
-          <view class="flex card-top">
-            <view class="title">订单详情</view>
-            <view :class="['flex', 'status', `status-${status}`]">{{ statusDesc }}</view>
-          </view>
-          <view class="card-main">
-            <view class="flex product" v-for="item in orderData.appletOrderProductList" :key="item.id">
-              <image class="img" :src="getCoverImg(item.image)" mode="scaleToFill"></image>
-              <view class="info">
-                <view class="row">{{ item.productName }}</view>
-                <view class="flex row">
-                  <view class="row-label">产品类型：</view>
-                  <!-- todo: check key -->
-                  <view class="row-content">{{ getTypeDesc(item.type) || '--' }}</view>
-                </view>
-                <view class="flex row">
-                  <view class="row-label">产品内容：</view>
-                  <!-- todo: check key -->
-                  <view class="row-content">{{ item.content || '--' }}</view>
-                </view>
-                <view class="flex price">
-                  <text class="price-label">价格：</text>
-                  <text class="price-unit">¥</text><text class="price-value">{{ item.price }}</text>
-                </view>
-              </view>
-            </view>
-          </view>
-          <view class="flex row card-bottom">
-            <view class="row-label">总价格</view>
-            <view class="flex row-content price">¥<text class="price-value">{{ orderData.orderAmount }}</text></view>
-          </view>
-        </view>
-
-        <view v-if="orderData.process.length" class="card service">
-          <view class="flex card-top">
-            <view class="title">售后信息</view>
-          </view>
-          <view class="card-main">
-            <uv-steps 
-              current="0" 
-              direction="column" 
-              dot
-              activeColor="#10A934"
-              inactiveColor="#C6C6C6"
-            >
-              <uv-steps-item 
-                v-for="(item, index) in orderData.process"
-                :key="item.id"
-              >
-                <template #title>
-                  <view class="flex step-header">
-                    <view :class="['step-title', index == 0 ? 'highlight' : '']">{{ item.title }}</view>
-                    <view class="step-time">{{ item.createTime }}</view>
-                  </view>
-                </template>
-                <template #desc>
-                  <view class="step-desc">{{ item.text }}</view>
-                </template>
-              </uv-steps-item>
-            </uv-steps>
-          </view>
-        </view>
-
-        <view class="card info">
-          <view class="flex card-top">
-            <view class="title">订单信息</view>
-          </view>
-          <view class="card-main">
-            <view class="flex row">
-              <view class="row-label">订单编号</view>
-              <view class="row-content">{{ orderData.orderNo }}</view>
-            </view>
-            <view class="flex row">
-              <view class="row-label">下单时间</view>
-              <view class="row-content">{{ $dayjs(orderData.orderDate).format('YYYY-MM-DD HH:mm') }}</view>
-            </view>
-          </view>
-        </view>
-
-      </template>
+      <orderInfoView :data="detail"></orderInfoView>
 
       <view class="notice">
         <view class="notice-header">下单须知</view>
         <view class="notice-content">
+          <!-- todo: check key -->
 				  <uv-parse :content="configList['order_instructions']"></uv-parse>
         </view>
       </view>
-    </view>
 
-    <view class="flex bottom" v-if="[0, 1, 2, 3, 4].includes(status)">
+    </view>
+  
+		<view class="bottom">
+      <view class="agreement">
+				<uv-checkbox-group
+					v-model="checkboxValue"
+					shape="circle"
+				>
+					<uv-checkbox
+						size="40rpx"
+						icon-size="40rpx"
+						activeColor="#00A9FF"
+						:name="1"
+					></uv-checkbox>
+				</uv-checkbox-group>
+				<view class="desc">
+          我已阅读并同意
+					<!-- todo: 替换配置项key -->
+					<text class="highlight" @click="$refs.modal.open('config_agreement', '退订政策')">《退订政策》</text>
+					<!-- todo: 替换配置项key -->
+					<text class="highlight" @click="$refs.modal.open('config_privacy', '合同范本')">《合同范本》</text>
+					<!-- todo: 替换配置项key -->
+					<text class="highlight" @click="$refs.modal.open('config_privacy', '预订须知')">《预订须知》</text>
+					<!-- todo: 替换配置项key -->
+					<text class="highlight" @click="$refs.modal.open('config_privacy', '安全提示')">《安全提示》</text>
+				</view>
+			</view>
       <view class="flex bar">
-        <button plain class="flex flex-column btn btn-service" open-type="contact">
-          <image class="btn-service-icon" src="@/pages_order/static/order/icon-service.png" mode="widthFix"></image>
+        <button plain class="flex flex-column btn btn-simple" open-type="contact">
+          <image class="icon" src="@/pages_order/static/product/icon-service.png" mode="widthFix"></image>
           <view>联系客服</view>
         </button>
-        <view class="flex cols">
-          <!-- 待支付 -->
-          <template v-if="status == 0">
-            <view class="flex col price">
-              <view class="price-label">合计</view>
-              <text class="price-unit">¥</text><text class="price-value">{{ orderData.orderAmount }}</text>
-            </view>
-            <button class="flex col btn btn-primary" @click="onPay">立即支付</button>
-          </template>
-          <!-- 待发货 -->
-          <template v-else-if="status == 1">
-            <button class="flex col btn" @click="onApplyService">申请售后</button>
-            <!-- 自采检测 -->
-            <template v-if="detectProduct && detectProduct.subscribeType == 0">
-              <button class="flex col btn btn-primary" @click="onDetectModify">修改</button>
-            </template>
-          </template>
-          <!-- 待收货 -->
-          <template v-else-if="status == 2">
-            <button class="flex col btn" @click="onApplyService">申请售后</button>
-            <!-- 检测 subscribeType: 0自采，1上门，2到店，3已取消 -->
-            <template v-if="detectProduct">
-              <!-- 自采检测 -->
-              <template v-if="detectProduct.subscribeType == 0">
-                <button class="flex col btn btn-primary" @click="onDetectSendBack">线上回寄试剂盒</button>
-              </template>
-              <template v-else>
-                <button class="flex col btn btn-primary" @click="onDetectBook">检测预约</button>
-              </template>
-            </template>
-            <!-- 其他商品 -->
-            <template v-else>
-              <button class="flex col btn btn-primary" @click="onConfirmReceipt">确认收货</button>
-            </template>
-          </template>
-          <!-- 待评价 -->
-          <template v-else-if="status == 3">
-            <button class="flex col btn" @click="onApplyService">申请售后</button>
-            <button class="flex col btn btn-primary" @click="onComment">立即评价</button>
-          </template>
-          <!-- 已完成 -->
-          <template v-else-if="status == 4">
-            <button class="flex col btn" @click="onApplyService">申请售后</button>
-          </template>
-        </view>
+        <!-- 已支付 -->
+        <template v-if="detail.status == 1">
+          <button class="col btn" @click="onContactMentor">联系导师</button>
+        </template>
+        <!-- 已完成 -->
+        <template v-else-if="detail.status == 2">
+          <button class="col btn" @click="onApplyService">申请售后</button>
+        </template>
       </view>
     </view>
 
+    <contactMentorPopup ref="contactMentorPopup"></contactMentorPopup>
+		<agreementModal ref="modal" @confirm="onConfirmAgreement"></agreementModal>
+
   </view>
 </template>
 
 <script>
+	import { mapState } from 'vuex'
 
-  // 订单状态 0待支付 1待发货 2待收货 3待评价 4已完成
-  const STATUS_AND_DESC_MAPPING = {
-    0: '待支付',
-    1: '待发货',
-    2: '待收货',
-    3: '待评价',
-    4: '已完成',
-    5: '售后',
-  }
-
-  // 产品类型（0营养剂，1预约，2课程）
-  const TYPE_AND_DESC_MAPPING = {
-    0: '营养剂',
-    1: '检测',
-    2: '课程',
-  }
+  import productCard from '@/pages_order/order/components/productCard.vue'
+  import orderInfoView from '@/pages_order/order/components/orderInfoView.vue'
+  import contactMentorPopup from '@/pages_order/order/components/contactMentorPopup.vue'
+	import agreementModal from '@/pages_order/components/agreementModal.vue'
 
   export default {
+    components: {
+      productCard,
+      orderInfoView,
+      contactMentorPopup,
+      agreementModal,
+    },
     data() {
       return {
-        id: null,
-        addressData: null,
-        orderData: null,
+        detail: {},
       }
     },
     computed: {
-      status() {
-        const { orderStatus, afterSales } = this.orderData || {}
+			...mapState(['configList', 'userInfo', 'orderInfo']),
+      productPackage() {
+        const { time, product } = this.detail
+        const { timeOptions } = product || {}
 
-        if (afterSales) {
-          return 5
-        }
-
-        return orderStatus
-      },
-      statusDesc() {
-        return STATUS_AND_DESC_MAPPING[this.status]
+        return timeOptions?.find?.(item => item.id === time) || {}
       },
-      detectProduct() {
-        const { appletOrderProductList } = this.orderData || {}
+			totalPrice() {
+        const { adults, teenager, child, coupon, couponInfo } = this.detail
 
-        if (appletOrderProductList?.length == 1 && appletOrderProductList?.[0]?.type == 1) { // type: 产品类型（0营养剂，1预约，2课程）
-          return appletOrderProductList[0]
-        }
-        
-        return null
-      },
-    },
-    onShow() {
-      console.log('onShow')
+        const { adultsPrice, teenagerPrice, childPrice } = this.productPackage
 
-      if (!this.id) {
-        return
-      }
+        let total = 0
+        
+        adults && (total += adults * (adultsPrice || 0))
+        teenager && (total += teenager * (teenagerPrice || 0))
+        child && (total += child * (childPrice || 0))
 
-      this.getData()
+        coupon && (total -= (couponInfo?.price || 0))
 
+				return total
+			},
     },
-    onLoad(arg) {
-      this.id = arg.id
-
-      this.getData()
+    onLoad() {
+      // console.log('orderInfo', this.orderInfo)
+      // this.detail = this.orderInfo
+      // todo: check fetch by id?
+      this.fetchOrderDetail()
     },
     onPullDownRefresh() {
-      this.getData()
+      this.fetchOrderDetail()
     },
     methods: {
-      async getData() {
-        try {
-          const result = await this.$fetch('detailOrder', { id: this.id })
-
-          const {
-            customerName,
-            customerPhone,
-            deliveryAddressDetail,
-            ...orderData
-          } = result
-
-          this.addressData = {
-            name: customerName,
-            phone: customerPhone,
-            detail: deliveryAddressDetail,
-          }
-
-          this.orderData = orderData
-
-        } catch (err) {
+      async fetchOrderDetail() {
+          try {
+
+            this.detail = {
+              product: {
+                id: '001',
+                image: new Array(6).fill('/static/image/temp-20.png').join(','),
+                name: '新疆天山行7/9日丨醉美伊犁&吐鲁番双套餐',
+                desc: '每天车程4小时内，含一程高铁丨喀拉峻草原、夏塔古道、昭苏天马、赛里木湖、昭苏油菜花、伊犁薰衣草丨吐鲁番坎儿井&火焰山',
+                tags: ['坝上草原', '自然探索', '户外探索', '亲子游玩'],
+                currentPrice: 688.99,
+                originalPrice: 1200,
+                registered: 4168,
+                timeOptions: [
+                  {
+                    id: '0011',
+                    startDate: '08/25',
+                    endDate: '09/01',
+                    currentPrice: 1200.99,
+                    originalPrice: 2300,
+                    adultsPrice: 2400,
+                    teenagerPrice: 1800,
+                    childPrice: 1200.99,
+                  },
+                  {
+                    id: '0012',
+                    startDate: '09/02',
+                    endDate: '09/11',
+                    currentPrice: 1200.99,
+                    originalPrice: 2300,
+                    adultsPrice: 2400,
+                    teenagerPrice: 1800,
+                    childPrice: 1200.99,
+                  },
+                  {
+                    id: '0013',
+                    startDate: '09/12',
+                    endDate: '09/19',
+                    currentPrice: 1200.99,
+                    originalPrice: 2300,
+                    adultsPrice: 2400,
+                    teenagerPrice: 1800,
+                    childPrice: 1200.99,
+                  },
+                ],
+                itineraryHighlights: `
+                  <p>
+                    <img style="width: 100%;" src="/static/image/temp-31.png" mode="widthFix"/>
+                    <img style="width: 100%;" src="/static/image/temp-32.png" mode="widthFix"/>
+                    <img style="width: 100%;" src="/static/image/temp-33.png" mode="widthFix"/>
+                    <img style="width: 100%;" src="/static/image/temp-34.png" mode="widthFix"/>
+                    <img style="width: 100%;" src="/static/image/temp-35.png" mode="widthFix"/>
+                  </p>
+                `,
+                courseObjectives: `
+                  <p style="font-size: 36rpx;">
+                    课程目标
+                  <p>
+                `,
+                itineraryDetail: `
+                  <p style="font-size: 36rpx;">
+                    详细行程
+                  <p>
+                `,
+              },
+              time: "0012",
+              adults: 2,
+              teenager: 1,
+              child: 1,
+              members: [
+                {
+                  id: "001",
+                  idNo: "430223********9999",
+                  isDefault: false,
+                  isSelected: true,
+                  name: "李梓发",
+                  type: 0,
+                },
+                {
+                  id: "002",
+                  idNo: "430223********9999",
+                  isDefault: false,
+                  isSelected: true,
+                  name: "吴彦谦",
+                  type: 0,
+                },
+                {
+                  id: "003",
+                  idNo: "430223********9999",
+                  isDefault: false,
+                  isSelected: true,
+                  name: "冯云",
+                  type: 1,
+                },
+                {
+                  id: "004",
+                  idNo: "430223********9999",
+                  isDefault: false,
+                  isSelected: true,
+                  name: "冯思钗",
+                  type: 2,
+                },
+              ],
+              coupon: "001",
+              discount: 88,
+              invoice: null,
+              name: "测试",
+              phone: "13345678910",
+              orderNo: 'BH872381728321983929',
+              createTime: '2025-04-28 08:14',
+              mentorPhone: '0731-599327-8899',
+              status: 1,
+            }
 
-        }
+            console.log('orderInfo', this.detail)
 
-        uni.stopPullDownRefresh()
-      },
-      getTypeDesc(type) {
-        return TYPE_AND_DESC_MAPPING[type]
-      },
-      getCoverImg(image) {
-        return image?.split?.(',')?.[0] || ''
-      },
-      onPay() {
-        
-        const {
-          id,
-          title,
-          orderAmount
-        } = this.orderData
+            // todo: check fetch by id?
+            // this.detail = await this.$fetch('queryOrderById', { id: this.id })
 
-        
-        const obj = {
-          id,
-          title,
-          orderAmount,
-        }
+          } catch (err) {
 
-        this.$refs.payPopup.open(obj)
+          }
 
-      },
-      async onConfirmReceipt() {
-        try {
-  
-          await this.$fetch('confirmOrder', { id: this.orderData.id })
-
-					uni.showToast({
-						icon: 'success',
-						title: '确认收货成功',
-					});
-
-          this.getData()
-
-        } catch (err) {
-
-        }
-      },
-      onComment() {
-        this.$utils.navigateTo(`/pages_order/comment/commentWrite?orderId=${this.orderData.id}`)
+          uni.stopPullDownRefresh()
       },
       onApplyService() {
-
-        console.log('orderData', this.orderData)
-
-        const {
-          id,
-          appletOrderProductList,
-        } = this.orderData
-
-        
-        const obj = {
-          id,
-          appletOrderProductList: appletOrderProductList.map(item => ({ ...item, statusDesc: this.statusDesc })),
-        }
-
-        this.$refs.serviceSelectPopup.open(obj)
-      },
-      onDetectModify() {
-        // todo
-      },
-      onDetectSendBack() {
         // todo
       },
-      onDetectBook() {
-        // todo
+      onContactMentor() {
+        this.$refs.contactMentorPopup.open(this.detail.mentorPhone)
       },
     },
   }
@@ -322,331 +256,52 @@
 
 <style scoped lang="scss">
 
-  .page__view {
-    width: 100vw;
-		min-height: 100vh;
-    background-color: $uni-bg-color;
-    position: relative;
-    
-    /deep/ .nav-bar__view {
-      position: fixed;
-      top: 0;
-      left: 0;
-    }
-  }
-
-  .main {
-    padding: calc(var(--status-bar-height) + 144rpx) 32rpx 224rpx 32rpx;
-	}
-
-  .address {
-    padding: 24rpx 32rpx;
-    background: #FFFFFF;
-    border-radius: 24rpx;
-    justify-content: flex-start;
-  }
-
-  .card {
-    margin-top: 40rpx;
-    padding: 32rpx;
-    background: #FAFAFF;
-    border: 2rpx solid #FFFFFF;
-    border-radius: 32rpx;
-    
-    &-top {
-      margin-bottom: 32rpx;
-      justify-content: space-between;
-      
-      .title {
-        font-family: PingFang SC;
-        font-weight: 500;
-        font-size: 36rpx;
-        line-height: 1.4;
-        color: #252545;
-      }
-
-      .status {
-        display: inline-flex;
-        min-width: 120rpx;
-        padding: 6rpx 0;
-        box-sizing: border-box;
-        font-family: PingFang SC;
-        font-weight: 400;
-        font-size: 24rpx;
-        line-height: 1.4;
-        color: #252545;
-        background: #F3F3F3;
-        border-radius: 12rpx;
-
-        &-0 {
-          color: #FF860E;
-          background: #FFF4E9;
-        }
-
-        &-1 {
-          color: #2799E0;
-          background: #EEF7FD;
-        }
-
-        &-2 {
-          color: #7D27E0;
-          background: #F5EEFD;
-        }
-
-        &-5 {
-          color: #E53C29;
-          background: #FDE7E5;
-        }
-      }
-    }
-  
-    .row {
-      justify-content: space-between;
-      font-family: PingFang SC;
-      font-weight: 400;
-      font-size: 28rpx;
-      line-height: 1.4;
-
-      &-label {
-        flex: none;
-        color: #8B8B8B;
-      }
-
-      &-content {
-        color: #393939;
-      }
-    }
-
-    &.detail {
-
-      .product {
-        margin-bottom: 32rpx;
-        column-gap: 24rpx;
-      
-        .img {
-          flex: none;
-          width: 120rpx;
-          height: 120rpx;
-        }
-
-        .info {
-          flex: 1;
-          padding: 24rpx 32rpx;
-          background: #FFFFFF;
-          border-radius: 32rpx;
+  @import '../styles/style.scss';
 
-          .row {
-            margin-bottom: 16rpx;
-            justify-content: flex-start;
-            column-gap: 4rpx;
-          }
-
-          .price {
-            justify-content: flex-start;
-            column-gap: 8rpx;
-            font-family: PingFang SC;
-            font-weight: 500;
-            line-height: 1.4;
-
-            &-label {
-              font-weight: 400;
-              font-size: 26rpx;
-              color: #8B8B8B;
-            }
-
-            &-unit {
-              font-size: 24rpx;
-              color: #7451DE;
-            }
-
-            &-value {
-              font-size: 32rpx;
-              color: #7451DE;
-            }
-          }
-        }
-      }
-
-      .card-bottom {
-        .price {
-          column-gap: 8rpx;
-          font-family: PingFang SC;
-          font-weight: 500;
+  .bottom {
+    .bar {
+      .price {
+        justify-content: flex-start;
+        column-gap: 8rpx;
+        
+        &-label {
           font-size: 24rpx;
-          line-height: 1.4;
-          color: #7451DE;
-
-          &-value {
-            font-size: 32rpx;
-          }
-        }
-      }
-    }
-
-    &.info {
-      .row + .row {
-        margin-top: 32rpx;
-      }
-    }
-
-    &.service {
-
-      .step {
-
-        &-header {
-          justify-content: flex-start;
-          column-gap: 24rpx;
-          padding-left: 24rpx;
+          color: #626262;
         }
 
-        &-title {
-          font-family: PingFang SC;
-          font-weight: 400;
-          font-size: 30rpx;
-          line-height: 1.4;
-          color: #000000;
-
-          &.highlight {
-            font-weight: 500;
-            color: #10A934;
-          }
+        &-unit,
+        &-value {
+          font-weight: 500;
+          color: #FF4800;
         }
 
-        &-time {
-          font-family: PingFang SC;
-          font-weight: 400;
+        &-unit {
           font-size: 24rpx;
-          line-height: 1.4;
-          color: #8B8B8B;
         }
 
-        &-desc {
-          padding: 16rpx 0 16rpx 24rpx;
-          font-family: PingFang SC;
-          font-weight: 400;
-          font-size: 24rpx;
-          line-height: 1.4;
-          color: #777777;
+        &-value {
+          font-size: 40rpx;
         }
-
       }
-    }
-
-  }
 
-  .notice {
-    margin-top: 40rpx;
-    font-family: PingFang SC;
-    font-weight: 400;
-
-    &-header {
-      font-size: 28rpx;
-      line-height: 1.4;
-      color: #393939;
-    }
-
-    &-content {
-      margin-top: 24rpx;
-      font-size: 24rpx;
-      line-height: 1.4;
-      color: #BABABA;
-    }
-  }
-
-  .bottom {
-		position: fixed;
-		left: 0;
-		bottom: 0;
-    z-index: 2;
-    
-		width: 100vw;
-		// height: 200rpx;
-		padding: 24rpx 40rpx;
-		padding-bottom: calc(env(safe-area-inset-bottom) + 24rpx);
-		background: #FFFFFF;
-		box-sizing: border-box;
-    align-items: flex-start;
-
-    .bar {
-      width: 100%;
-      column-gap: 32rpx;
-    }
-
-    .btn {
-      background: transparent;
-      border: none;
-
-      &-service {
+      .btn-simple {
         flex: none;
-        row-gap: 4rpx;
+        width: auto;
         font-family: PingFang SC;
         font-weight: 400;
         font-size: 22rpx;
         line-height: 1.1;
         color: #999999;
+        border: none;
+        border-radius: unset;
 
-        &-icon {
+        .icon {
           width: 52rpx;
           height: auto;
+          margin-bottom: 4rpx;
         }
       }
     }
-
-    .cols {
-      flex: 1;
-      column-gap: 32rpx;
-
-      .col {
-        flex: 1;
-      }
-      
-      .btn {
-        padding: 14rpx 0;
-        box-sizing: border-box;
-        font-family: PingFang SC;
-        font-weight: 500;
-        font-size: 36rpx;
-        line-height: 1.4;
-        color: #252545;
-        border: 2rpx solid #252545;
-        border-radius: 41rpx;
-
-        &-primary {
-          padding: 16rpx 0;
-          color: #FFFFFF;
-          background-image: linear-gradient(to right, #4B348F, #845CFA);
-          border: none;
-        }
-      }
-
-      .price {
-        column-gap: 8rpx;
-        font-family: PingFang SC;
-        font-weight: 400;
-        font-size: 24rpx;
-        line-height: 1.4;
-
-        &-label {
-          color: #626262;
-        }
-
-        &-unit,
-        &-value {
-          font-weight: 500;
-          color: #7451DE;
-
-          .highlight {
-            font-size: 40rpx;
-          }
-        }
-
-        &-value {
-          font-size: 40rpx;
-        }
-      }
-
-    }
-
-	}
-
+  }
+  
 </style>
\ No newline at end of file
diff --git a/pages_order/order/orderList/index.vue b/pages_order/order/orderList/index.vue
index df99326..44eded3 100644
--- a/pages_order/order/orderList/index.vue
+++ b/pages_order/order/orderList/index.vue
@@ -35,14 +35,16 @@
       <view class="card" v-for="item in list" :key="item.id">
         <orderCard 
           :data="item" 
-          @pay="onPay(item)"
           @applyService="onApplyService"
+          @contatcMentor="onContactMentor"
           @statusChange="getData"
         ></orderCard>
       </view>
 
     </view>
 
+    <contactMentorPopup ref="contactMentorPopup" :phone="data.mentorPhone"></contactMentorPopup>
+
   </view>
   
 </template>
@@ -51,11 +53,13 @@
 	import mixinsList from '@/mixins/list.js'
 
   import orderCard from './orderCard.vue'
+  import contactMentorPopup from '@/pages_order/order/components/contactMentorPopup.vue'
 
   export default {
 		mixins: [mixinsList],
     components: {
       orderCard,
+      contactMentorPopup,
     },
     data() {
       return {
@@ -90,25 +94,12 @@
 				}
 				this.getData()
 			},
-      onPay(data) {
-
-        const {
-          id,
-          title,
-          orderAmount
-        } = data
-
-        
-        const obj = {
-          id,
-          title,
-          orderAmount,
-        }
-
-        this.$refs.payPopup.open(obj)
-      },
       onApplyService(obj) {
-        this.$refs.serviceSelectPopup.open(obj)
+        // todo
+        // this.$refs.serviceSelectPopup.open(obj)
+      },
+      onContactMentor(mentorPhone) {
+        this.$refs.contactMentorPopup.open(mentorPhone)
       },
     },
   }
diff --git a/pages_order/order/orderList/orderCard.vue b/pages_order/order/orderList/orderCard.vue
index a0ce7da..f9e91e8 100644
--- a/pages_order/order/orderList/orderCard.vue
+++ b/pages_order/order/orderList/orderCard.vue
@@ -1,73 +1,47 @@
 <template>
   <view class="card" @click="jumpToOrderDetail">
     <view class="flex top">
-      <view class="title">{{ data.title }}</view>
-      <view :class="['flex', 'status', `status-${status}`]">{{ statusDesc }}</view>
+      {{ data.title }}
     </view>
-    <view class="flex main">
-      <image class="img" :src="coverImg" mode="scaleToFill"></image>
-      <view class="info">
-        <view class="flex row">
-          <view class="row-label">客户姓名：</view>
-          <view class="row-content">{{ data.customerName }}</view>
-        </view>
-        <view class="flex row">
-          <view class="row-label">下单时间：</view>
-          <view class="row-content">{{ data.orderDate }}</view>
-        </view>
-        <view class="flex row">
-          <view class="row-label">联系电话：</view>
-          <view class="row-content">{{ data.customerPhone }}</view>
-        </view>
-      </view>
+    <view :class="['tag', `tag-${data.status}`]">
+      {{ statusDesc }}
+    </view>
+    <view class="flex row">
+      <view class="row-label">联系人：</view>
+      <view class="row-content">{{ data.customerName }}</view>
+    </view>
+    <view class="flex row">
+      <view class="row-label">下单时间：</view>
+      <view class="row-content">{{ data.orderDate }}</view>
     </view>
-    <view class="flex bottom">
-      <view class="flex price">
-        <text class="price-label">总价格：</text>
-        <text class="price-unit">¥</text><text class="price-value">{{ data.orderAmount }}</text>
+    <view class="flex row">
+      <view class="row-label">联系电话：</view>
+      <view class="row-content">{{ data.customerPhone }}</view>
+    </view>
+    <view class="bottom">
+      <view class="flex row">
+        <text class="row-label">总价格：</text>
+        <text class="flex row-content price">¥</text><text class="highlight">{{ data.orderAmount }}</text>
       </view>
       <view class="flex btns">
         <!-- 待支付 -->
-        <template v-if="status == 0">
+        <template v-if="data.status == 0">
           <button class="btn" @click.stop="onPay">立即支付</button>
         </template>
-        <!-- 待发货 -->
-        <template v-else-if="status == 1">
-          <button class="btn" @click.stop="onApplyService">申请售后</button>
-          <!-- 自采检测
-          <template v-if="detectProduct && detectProduct.subscribeType == 0">
-            <button class="btn" @click="onDetectModify">修改</button>
-          </template> -->
-        </template>
-        <!-- 待收货 -->
-        <template v-else-if="status == 2">
-          <button class="btn" @click.stop="onApplyService">申请售后</button>
-          <button class="btn" @click.stop="onConfirmReceipt">确认收货</button>
-          <!-- 检测 subscribeType: 0自采，1上门，2到店，3已取消
-          <template v-if="detectProduct">
-            <template v-if="detectProduct.subscribeType == 0">
-              <button class="btn" @click="onDetectSendBack">线上回寄试剂盒</button>
-            </template>
-            <template v-else>
-              <button class="btn" @click="onDetectBook">检测预约</button>
-            </template>
-          </template>
-          其他商品
-          <template v-else>
-            <button class="btn" @click.stop="onConfirmReceipt">确认收货</button>
-          </template> -->
+        <!-- 已支付 -->
+        <template v-else-if="data.status == 1">
+          <button class="btn" @click.stop="onContactMentor">联系导师</button>
         </template>
         <!-- 待评价 -->
-        <template v-else-if="status == 3">
-          <button class="btn" @click.stop="onApplyService">申请售后</button>
+        <template v-else-if="data.status == 2">
           <button class="btn" @click.stop="onComment">立即评价</button>
         </template>
         <!-- 已完成 -->
-        <template v-else-if="status == 4">
+        <template v-else-if="data.status == 3">
           <button class="btn" @click.stop="onApplyService">申请售后</button>
         </template>
         <!-- 售后 -->
-        <template v-else-if="status == 5">
+        <template v-else-if="data.status == 4">
           
         </template>
       </view>
@@ -76,14 +50,12 @@
 </template>
 
 <script>
-  // 订单状态 0待支付 1待发货 2待收货 3待评价 4已完成
   const STATUS_AND_DESC_MAPPING = {
     0: '待支付',
-    1: '待发货',
-    2: '待收货',
-    3: '待评价',
-    4: '已完成',
-    5: '售后',
+    1: '已支付',
+    2: '待评价',
+    3: '已完成',
+    4: '售后',
   }
 
   export default {
@@ -96,182 +68,86 @@
       }
     },
     computed: {
-      status() {
-        const { orderStatus, afterSales } = this.data || {}
-
-        if (afterSales) {
-          return 5
-        }
-
-        return orderStatus
-      },
       statusDesc() {
-        return STATUS_AND_DESC_MAPPING[this.status]
-      },
-      coverImg() {
-        const { appletOrderProductList } = this.data || {}
-
-        let arr = appletOrderProductList?.[0]?.image?.split?.(',')
-
-        return arr?.[0]
+        const { status } = this.data
+        return STATUS_AND_DESC_MAPPING[status]
       },
-      // detectProduct() {
-      //   const { appletOrderProductList } = this.data || {}
-
-      //   if (appletOrderProductList?.length == 1 && appletOrderProductList?.[0]?.type == 1) { // type: 产品类型（0营养剂，1预约，2课程）
-      //     return appletOrderProductList[0]
-      //   }
-        
-      //   return null
-      // },
     },
     methods: {
       onPay() {
-        this.$emit('pay')
+        this.$utils.navigateTo(`/pages_order/order/orderPay/index?id=${this.data.id}`)
       },
-      async onConfirmReceipt() {
-        try {
-  
-          await this.$fetch('confirmOrder', { id: this.data.id })
-
-					uni.showToast({
-						icon: 'success',
-						title: '确认收货成功',
-					});
-
-          this.$emit('statusChange')
-
-        } catch (err) {
-
-        }
+      onContactMentor() {
+        this.$emit('contatcMentor', this.data.mentorPhone)
       },
       onComment() {
         this.$utils.navigateTo(`/pages_order/comment/commentWrite?orderId=${this.data.id}`)
       },
       onApplyService() {
-        
-        const {
-          id,
-          appletOrderProductList,
-        } = this.data
-
-        
+        // todo
         const obj = {
-          id,
-          appletOrderProductList: appletOrderProductList.map(item => ({ ...item, statusDesc: this.statusDesc })),
+          id: this.data.id
         }
-
         this.$emit('applyService', obj)
       },
-      onDetectModify() {
-        // todo
-      },
-      onDetectSendBack() {
-        // todo
-      },
-      onDetectBook() {
-        // todo
-      },
       jumpToOrderDetail() {
-        this.$utils.navigateTo(`/pages_order/order/orderDetail/index?id=${this.data.id}`)
+        if (this.data.status == 0) { // 待支付
+          this.$utils.navigateTo(`/pages_order/order/orderPay/index?id=${this.data.id}`)
+        } else {
+          this.$utils.navigateTo(`/pages_order/order/orderDetail/index?id=${this.data.id}`)
+        }
       },
     },
   }
 </script>
 
 <style scoped lang="scss">
+  @import '../styles/tag.scss';
+
   .card {
+    position: relative;
     width: 100%;
-    padding: 32rpx;
+    padding: 40rpx 32rpx;
     box-sizing: border-box;
-    background: #FAFAFF;
+    background: #FFFFFF;
     border: 2rpx solid #FFFFFF;
+    border-radius: 32rpx;
   }
 
-  .top {
-    justify-content: space-between;
-    
-    .title {
-      font-family: PingFang SC;
-      font-weight: 500;
-      font-size: 36rpx;
-      line-height: 1.4;
-      color: #252545;
-    }
-
-    .status {
-      display: inline-flex;
-      min-width: 120rpx;
-      padding: 6rpx 0;
-      box-sizing: border-box;
-      font-family: PingFang SC;
-      font-weight: 400;
-      font-size: 24rpx;
-      line-height: 1.4;
-      color: #252545;
-      background: #F3F3F3;
-      border-radius: 12rpx;
-
-      &-0 {
-        color: #FF860E;
-        background: #FFF4E9;
-      }
-
-      &-1 {
-        color: #2799E0;
-        background: #EEF7FD;
-      }
-
-      &-2 {
-        color: #7D27E0;
-        background: #F5EEFD;
-      }
+  .tag {
+    position: absolute;
+    top: 0;
+    right: 0;
+  }
 
-      &-5 {
-        color: #E53C29;
-        background: #FDE7E5;
-      }
-    }
+  .top {
+    font-family: PingFang SC;
+    font-weight: 500;
+    font-size: 32rpx;
+    line-height: 1.4;
+    color: #181818;
   }
 
-  .main {
-    margin: 24rpx 0;
-    column-gap: 24rpx;
+  .row {
+    justify-content: flex-start;
+    column-gap: 4rpx;
 
-    .img {
-      flex: none;
-      width: 120rpx;
-      height: 120rpx;
-    }
+    font-family: PingFang SC;
+    font-weight: 400;
+    font-size: 28rpx;
+    line-height: 1.4;
 
-    .info {
-      flex: 1;
-      padding: 24rpx;
-      background: #FFFFFF;
-      border-radius: 32rpx;
+    &-label {
+      color: #8B8B8B;
     }
 
-    .row {
-      justify-content: flex-start;
-      column-gap: 4rpx;
-
-      font-family: PingFang SC;
-      font-weight: 400;
-      font-size: 28rpx;
-      line-height: 1.4;
-
-      &-label {
-        color: #8B8B8B;
-      }
-
-      &-content {
-        color: #393939;
-      }
+    &-content {
+      color: #393939;
     }
+  }
 
-    .row + .row {
-      margin-top: 16rpx;
-    }
+  .row + .row {
+    margin-top: 16rpx;
   }
 
   .bottom {
@@ -280,23 +156,13 @@
     .price {
       column-gap: 8rpx;
       font-family: PingFang SC;
+      font-size: 24rpx;
       font-weight: 500;
       line-height: 1.4;
+      color: #FF4800;
 
-      &-label {
-        font-weight: 400;
-        font-size: 26rpx;
-        color: #8B8B8B;
-      }
-
-      &-unit {
-        font-size: 24rpx;
-        color: #7451DE;
-      }
-
-      &-value {
+      .highlight {
         font-size: 32rpx;
-        color: #7451DE;
       }
     }
 
diff --git a/pages_order/order/orderPay/index.vue b/pages_order/order/orderPay/index.vue
new file mode 100644
index 0000000..dec896a
--- /dev/null
+++ b/pages_order/order/orderPay/index.vue
@@ -0,0 +1,329 @@
+<template>
+  <view class="page__view">
+		<navbar leftClick @leftClick="$utils.navigateBack" >
+      <view class="flex">
+        <view>待支付</view>
+        <view>
+          <view>剩余</view>
+          <!-- todo -->
+          <view>10:00</view>
+        </view>
+        <view>后关闭</view>
+      </view>
+    </navbar>
+
+    <view class="main">
+
+      <productCard :data="detail"></productCard>
+
+      <orderInfoView :data="detail"></orderInfoView>
+
+      <view class="notice">
+        <view class="notice-header">下单须知</view>
+        <view class="notice-content">
+          <!-- todo: check key -->
+				  <uv-parse :content="configList['order_instructions']"></uv-parse>
+        </view>
+      </view>
+
+    </view>
+  
+		<view class="bottom">
+      <view class="agreement">
+				<uv-checkbox-group
+					v-model="checkboxValue"
+					shape="circle"
+				>
+					<uv-checkbox
+						size="40rpx"
+						icon-size="40rpx"
+						activeColor="#00A9FF"
+						:name="1"
+					></uv-checkbox>
+				</uv-checkbox-group>
+				<view class="desc">
+          我已阅读并同意
+					<!-- todo: 替换配置项key -->
+					<text class="highlight" @click="$refs.modal.open('config_agreement', '退订政策')">《退订政策》</text>
+					<!-- todo: 替换配置项key -->
+					<text class="highlight" @click="$refs.modal.open('config_privacy', '合同范本')">《合同范本》</text>
+					<!-- todo: 替换配置项key -->
+					<text class="highlight" @click="$refs.modal.open('config_privacy', '预订须知')">《预订须知》</text>
+					<!-- todo: 替换配置项key -->
+					<text class="highlight" @click="$refs.modal.open('config_privacy', '安全提示')">《安全提示》</text>
+				</view>
+			</view>
+      <view class="flex bar">
+        <button plain class="flex flex-column btn btn-simple" open-type="contact">
+          <image class="icon" src="@/pages_order/static/product/icon-service.png" mode="widthFix"></image>
+          <view>联系客服</view>
+        </button>
+        <view class="col flex price">
+          <view class="price-label">
+            合计
+          </view>
+          <view class="price-unit">¥</view>
+          <view class="price-value">
+            {{ totalPrice }}
+          </view>
+        </view>
+        <button class="col btn btn-primary" @click="onPay">立即支付</button>
+      </view>
+    </view>
+
+		<agreementModal ref="modal" @confirm="onConfirmAgreement"></agreementModal>
+
+  </view>
+</template>
+
+<script>
+	import { mapState } from 'vuex'
+
+  import productCard from '@/pages_order/order/components/productCard.vue'
+  import orderInfoView from '@/pages_order/order/components/orderInfoView.vue'
+	import agreementModal from '@/pages_order/components/agreementModal.vue'
+
+  export default {
+    components: {
+      productCard,
+      orderInfoView,
+      agreementModal,
+    },
+    data() {
+      return {
+        detail: {},
+      }
+    },
+    computed: {
+			...mapState(['configList', 'userInfo', 'orderInfo']),
+      productPackage() {
+        const { time, product } = this.detail
+        const { timeOptions } = product || {}
+
+        return timeOptions?.find?.(item => item.id === time) || {}
+      },
+			totalPrice() {
+        const { adults, teenager, child, coupon, couponInfo } = this.detail
+
+        const { adultsPrice, teenagerPrice, childPrice } = this.productPackage
+
+        let total = 0
+        
+        adults && (total += adults * (adultsPrice || 0))
+        teenager && (total += teenager * (teenagerPrice || 0))
+        child && (total += child * (childPrice || 0))
+
+        coupon && (total -= (couponInfo?.price || 0))
+
+				return total
+			},
+    },
+    onLoad() {
+      // console.log('orderInfo', this.orderInfo)
+      // this.detail = this.orderInfo
+      // todo: check fetch by id?
+      this.fetchOrderDetail()
+    },
+    onPullDownRefresh() {
+      this.fetchOrderDetail()
+    },
+    methods: {
+      async fetchOrderDetail() {
+          try {
+
+            this.detail = {
+              product: {
+                id: '001',
+                image: new Array(6).fill('/static/image/temp-20.png').join(','),
+                name: '新疆天山行7/9日丨醉美伊犁&吐鲁番双套餐',
+                desc: '每天车程4小时内，含一程高铁丨喀拉峻草原、夏塔古道、昭苏天马、赛里木湖、昭苏油菜花、伊犁薰衣草丨吐鲁番坎儿井&火焰山',
+                tags: ['坝上草原', '自然探索', '户外探索', '亲子游玩'],
+                currentPrice: 688.99,
+                originalPrice: 1200,
+                registered: 4168,
+                timeOptions: [
+                  {
+                    id: '0011',
+                    startDate: '08/25',
+                    endDate: '09/01',
+                    currentPrice: 1200.99,
+                    originalPrice: 2300,
+                    adultsPrice: 2400,
+                    teenagerPrice: 1800,
+                    childPrice: 1200.99,
+                  },
+                  {
+                    id: '0012',
+                    startDate: '09/02',
+                    endDate: '09/11',
+                    currentPrice: 1200.99,
+                    originalPrice: 2300,
+                    adultsPrice: 2400,
+                    teenagerPrice: 1800,
+                    childPrice: 1200.99,
+                  },
+                  {
+                    id: '0013',
+                    startDate: '09/12',
+                    endDate: '09/19',
+                    currentPrice: 1200.99,
+                    originalPrice: 2300,
+                    adultsPrice: 2400,
+                    teenagerPrice: 1800,
+                    childPrice: 1200.99,
+                  },
+                ],
+                itineraryHighlights: `
+                  <p>
+                    <img style="width: 100%;" src="/static/image/temp-31.png" mode="widthFix"/>
+                    <img style="width: 100%;" src="/static/image/temp-32.png" mode="widthFix"/>
+                    <img style="width: 100%;" src="/static/image/temp-33.png" mode="widthFix"/>
+                    <img style="width: 100%;" src="/static/image/temp-34.png" mode="widthFix"/>
+                    <img style="width: 100%;" src="/static/image/temp-35.png" mode="widthFix"/>
+                  </p>
+                `,
+                courseObjectives: `
+                  <p style="font-size: 36rpx;">
+                    课程目标
+                  <p>
+                `,
+                itineraryDetail: `
+                  <p style="font-size: 36rpx;">
+                    详细行程
+                  <p>
+                `,
+              },
+              time: "0012",
+              adults: 2,
+              teenager: 1,
+              child: 1,
+              members: [
+                {
+                  id: "001",
+                  idNo: "430223********9999",
+                  isDefault: false,
+                  isSelected: true,
+                  name: "李梓发",
+                  type: 0,
+                },
+                {
+                  id: "002",
+                  idNo: "430223********9999",
+                  isDefault: false,
+                  isSelected: true,
+                  name: "吴彦谦",
+                  type: 0,
+                },
+                {
+                  id: "003",
+                  idNo: "430223********9999",
+                  isDefault: false,
+                  isSelected: true,
+                  name: "冯云",
+                  type: 1,
+                },
+                {
+                  id: "004",
+                  idNo: "430223********9999",
+                  isDefault: false,
+                  isSelected: true,
+                  name: "冯思钗",
+                  type: 2,
+                },
+              ],
+              coupon: "001",
+              discount: 88,
+              invoice: null,
+              name: "测试",
+              phone: "13345678910",
+              orderNo: 'BH872381728321983929',
+              createTime: '2025-04-28 08:14',
+              status: 0,
+            }
+
+            console.log('orderInfo', this.detail)
+
+            // todo: check fetch by id?
+            // this.detail = await this.$fetch('queryOrderById', { id: this.id })
+
+          } catch (err) {
+
+          }
+
+          uni.stopPullDownRefresh()
+      },
+      async onPay() {
+        try {
+     
+          // todo: fetch pay
+          
+          uni.showToast({
+            title: '支付成功',
+            icon: 'none'
+          })
+          
+          setTimeout(() => {
+            // todo: check → jump to order list page ?
+            uni.reLaunch({
+              url: `/pages_order/order/orderList/index`
+            });
+          }, 700)
+        } catch (err) {
+
+        }
+      },
+    },
+  }
+</script>
+
+<style scoped lang="scss">
+
+  @import '../styles/style.scss';
+
+  .bottom {
+    .bar {
+      .price {
+        justify-content: flex-start;
+        column-gap: 8rpx;
+        
+        &-label {
+          font-size: 24rpx;
+          color: #626262;
+        }
+
+        &-unit,
+        &-value {
+          font-weight: 500;
+          color: #FF4800;
+        }
+
+        &-unit {
+          font-size: 24rpx;
+        }
+
+        &-value {
+          font-size: 40rpx;
+        }
+      }
+
+      .btn-simple {
+        flex: none;
+        width: auto;
+        font-family: PingFang SC;
+        font-weight: 400;
+        font-size: 22rpx;
+        line-height: 1.1;
+        color: #999999;
+        border: none;
+        border-radius: unset;
+
+        .icon {
+          width: 52rpx;
+          height: auto;
+          margin-bottom: 4rpx;
+        }
+      }
+    }
+  }
+  
+</style>
\ No newline at end of file
diff --git a/pages_order/order/styles/style.scss b/pages_order/order/styles/style.scss
new file mode 100644
index 0000000..5403631
--- /dev/null
+++ b/pages_order/order/styles/style.scss
@@ -0,0 +1,161 @@
+
+	.page__view {
+		width: 100vw;
+		min-height: 100vh;
+		position: relative;
+
+    /deep/ .nav-bar__view {
+      position: fixed;
+      top: 0;
+      left: 0;
+    }
+  }
+
+  .main {
+    padding: calc(var(--status-bar-height) + 144rpx) 32rpx 326rpx 32rpx;
+  }
+
+  .card {
+    margin-top: 24rpx;
+    padding: 32rpx;
+    font-family: PingFang SC;
+    font-weight: 400;
+    line-height: 1.4;
+    background: #FFFFFF;
+    border: 2rpx solid #FFFFFF;
+    border-radius: 32rpx;
+
+    &-header {
+      font-family: PingFang SC;
+      font-weight: 500;
+      font-size: 36rpx;
+      line-height: 1.4;
+      color: #252545;
+    }
+  }
+  .form {
+    &-item {
+      margin-top: 16rpx;
+      border-bottom: 2rpx solid #EEEEEE;
+
+      &-label {
+        font-family: PingFang SC;
+        font-weight: 400;
+        font-size: 26rpx;
+        line-height: 1.4;
+        color: #181818;
+
+        .icon {
+          margin-right: 8rpx;
+          width: 16rpx;
+          height: auto;
+        }
+      }
+
+      &-content {
+        .row {
+          justify-content: space-between;
+
+          
+          .text {
+            padding: 2rpx 0;
+            font-family: PingFang SC;
+            font-weight: 400;
+            font-size: 32rpx;
+            line-height: 1.4;
+
+            &.placeholder {
+              color: #C6C6C6;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  .notice {
+    margin-top: 40rpx;
+    font-family: PingFang SC;
+    font-weight: 400;
+
+    &-header {
+      font-size: 28rpx;
+      line-height: 1.4;
+      color: #393939;
+    }
+
+    &-content {
+      margin-top: 24rpx;
+      font-size: 24rpx;
+      line-height: 1.4;
+      color: #BABABA;
+    }
+  }
+
+  .bottom {
+		position: fixed;
+		left: 0;
+		bottom: 0;
+
+		width: 100vw;
+		// height: 270rpx;
+		background: #FFFFFF;
+		box-sizing: border-box;
+    
+    .agreement {
+      display: flex;
+      align-items: center;
+      padding: 16rpx 40rpx;
+      background: #E9F8FF;
+      box-sizing: border-box;
+
+      /deep/ .uv-checkbox-group {
+        flex: none;
+      }
+
+      .desc {
+        flex: 1;
+        font-family: PingFang SC;
+        font-size: 24rpx;
+        font-weight: 400;
+        line-height: 40rpx;
+        color: #8B8B8B;
+      }
+
+      .highlight {
+        color: $uni-color;
+      }
+    }
+
+    .bar {
+      padding: 24rpx 40rpx;
+  		padding-bottom: calc(env(safe-area-inset-bottom) + 24rpx);
+      box-sizing: border-box;
+      column-gap: 32rpx;
+
+      .col {
+        flex: 1;
+      }
+
+      .btn {
+        width: 100%;
+        // padding: 14rpx 74rpx;
+        padding: 14rpx 0;
+        font-family: PingFang SC;
+        font-weight: 500;
+        font-size: 36rpx;
+        line-height: 1;
+        color: #252545;
+        border: 2rpx solid #252545;
+        border-radius: 41rpx;
+
+        &-primary {
+          color: #FFFFFF;
+          background: linear-gradient(to right, #21FEEC, #019AF9);
+          border-color: #00A9FF;
+        }
+      }
+
+    }
+
+	}
diff --git a/pages_order/order/styles/tag.scss b/pages_order/order/styles/tag.scss
new file mode 100644
index 0000000..487491c
--- /dev/null
+++ b/pages_order/order/styles/tag.scss
@@ -0,0 +1,23 @@
+
+  .tag {
+    padding: 6rpx 24rpx;
+    font-size: 24rpx;
+    color: #252545;
+    background: #F3F3F3;
+    border-radius: 12rpx;
+
+    &-0 {
+      color: #FF860E;
+      background: #FFF4E9;
+    }
+
+    &-1 {
+      color: #2799E0;
+      background: #EEF7FD;
+    }
+
+    &-4 {
+      color: #E53C29;
+      background: #FDE7E5;
+    }
+  }
\ No newline at end of file
diff --git a/pages_order/traveler/travelerCard.vue b/pages_order/traveler/travelerCard.vue
index 634ca49..73d4bdf 100644
--- a/pages_order/traveler/travelerCard.vue
+++ b/pages_order/traveler/travelerCard.vue
@@ -37,7 +37,7 @@
             ></uv-checkbox>
           </uv-checkbox-group>
         </view>
-        <view>默认地址</view>
+        <view>默认出行人</view>
       </view>
       <button class="flex col btn" @click="onEdit">
         <image class="icon" src="@/pages_order/static/traveler/icon-edit.png" mode="scaleToFill"></image>
diff --git a/pages_order/traveler/travelerPopup.vue b/pages_order/traveler/travelerPopup.vue
index 33de02d..841a506 100644
--- a/pages_order/traveler/travelerPopup.vue
+++ b/pages_order/traveler/travelerPopup.vue
@@ -16,7 +16,7 @@
             <view class="form-item">
               <uv-form-item prop="name" :customStyle="formItemStyle">
                 <view class="form-item-label">
-                  <image class="icon" src="@/pages_order/static/traveler/icon-require.png" mode="widthFix"></image>
+                  <image class="icon" src="@/static/image/icon-require.png" mode="widthFix"></image>
                   姓名
                 </view>
                 <view class="form-item-content">
@@ -27,7 +27,7 @@
             <view class="form-item">
               <uv-form-item prop="idNo" :customStyle="formItemStyle">
                 <view class="form-item-label">
-                  <image class="icon" src="@/pages_order/static/traveler/icon-require.png" mode="widthFix"></image>
+                  <image class="icon" src="@/static/image/icon-require.png" mode="widthFix"></image>
                   身份证号
                 </view>
                 <view class="form-item-content">
@@ -38,7 +38,7 @@
             <view class="form-item">
               <uv-form-item prop="type" :customStyle="formItemStyle">
                 <view class="form-item-label">
-                  <image class="icon" src="@/pages_order/static/traveler/icon-require.png" mode="widthFix"></image>
+                  <image class="icon" src="@/static/image/icon-require.png" mode="widthFix"></image>
                   类型
                 </view>
                 <view class="form-item-content">
@@ -63,7 +63,7 @@
             <view class="form-item">
               <uv-form-item prop="gender" :customStyle="formItemStyle">
                 <view class="form-item-label">
-                  <image class="icon" src="@/pages_order/static/traveler/icon-require.png" mode="widthFix"></image>
+                  <image class="icon" src="@/static/image/icon-require.png" mode="widthFix"></image>
                   性别
                 </view>
                 <view class="form-item-content">
@@ -88,7 +88,7 @@
             <view class="form-item">
               <uv-form-item prop="phone" :customStyle="formItemStyle">
                 <view class="form-item-label">
-                  <image class="icon" src="@/pages_order/static/traveler/icon-require.png" mode="widthFix"></image>
+                  <image class="icon" src="@/static/image/icon-require.png" mode="widthFix"></image>
                   手机号
                 </view>
                 <view class="form-item-content">
@@ -139,7 +139,7 @@
             <view class="form-item">
               <uv-form-item prop="emergencyContact" :customStyle="formItemStyle">
                 <view class="form-item-label">
-                  <image class="icon" src="@/pages_order/static/traveler/icon-require.png" mode="widthFix"></image>
+                  <image class="icon" src="@/static/image/icon-require.png" mode="widthFix"></image>
                   紧急联系人
                 </view>
                 <view class="form-item-content">
@@ -150,7 +150,7 @@
             <view class="form-item">
               <uv-form-item prop="guardiancontact" :customStyle="formItemStyle">
                 <view class="form-item-label">
-                  <image class="icon" src="@/pages_order/static/traveler/icon-require.png" mode="widthFix"></image>
+                  <image class="icon" src="@/static/image/icon-require.png" mode="widthFix"></image>
                   监护人联系方式
                 </view>
                 <view class="form-item-content">
diff --git a/static/image/icon-change.png b/static/image/icon-change.png
new file mode 100644
index 0000000000000000000000000000000000000000..dc1ea8043fbbee1d3b2180a12b9f76dd62069d2b
GIT binary patch
literal 542
zcmeAS@N?(olHy`uVBq!ia0vp^2_VeD1|%QND7OGooCO|{#S9FJK(?X<qw6$7kP61)
zAa^H*b?0PW0y!+{j=qiz3>*8o|0J>k<u-e|IEGX(zP;0!dB{Pe{bRkAqx%VtvuwK@
zt)1Kpn))7blri63Agd_-g6+DsUX$qMUwtt(FTOV~R`7UW_i;(379-G5Fu1c&z)AYL
z*}B>jW-kpF?o0gKFI}%?`%USJ>7HB11r~1mV6SvVL~s9JfkeH-536~Vt_U3CPgFXi
znyV$4*TcalaF9{S!hwao;{k)9j6xH0v0Fxn!ju1V*FW|WuM^`d)SbQT=d_8I2R8hS
zPkMa*YhkJ3p@W~6sNbyZIJ<vIXq~%(Cg%sOo|&o)$G#eAaVFSh$hpX0_j6Nayf@Xq
z_RqFWatAss9rk$0|1T-5<;px<eoEf)CO^#W1%Vf10)(6*H2ggbq^IQjt!<kfs<yN_
zGSetYd5%~4ajWc>Ne9<_$?|WGTw9PQ&a9*Bud!2ezrbw!v}rpRgw5b7cD!ul?^eL(
zv;2jC-b`*U@haiNk?zNDE?D;@Ib-7ibI-hfOfR|=EKqRL_Bkz)sO@uJAW{EHVJZvL
zl@iyMtpV5N1ua^h3w`Qep4aB<pMClnGt{XK)nA!yJkMOZo3ktrB;@Jp=d#Wzp$Pzx
Ct;lKs

literal 0
HcmV?d00001

diff --git a/static/image/icon-phone.png b/static/image/icon-phone.png
new file mode 100644
index 0000000000000000000000000000000000000000..a0100d1190e0e9f1fe33a7d3bb2cb6e247b6e01c
GIT binary patch
literal 1082
zcmV-A1jYM_P)<h;3K|Lk000e1NJLTq002Dz002A)1^@s6)jqOJ00009a7bBm001F4
z001F40Y#QEU;qFB0drDELIAGL9O(c600d`2O+f$vv5yP<VFdsH1J6lBK~#7F?V3As
z+b|G@e>rK=DP2mI>1^MCIzg;1ovALJofAktf$bAWK7msvRpc^Nlp7!?h|6@!t_aRZ
z3b_ClphVB`o59ctAB!K0*DeI~^z`(+a0XCP6vdD)R8FZpQCTh)3xgLxuxKmxipn*W
z;npofWlX|X=r}>5NpMD&?^H73vCky@4v8R}IbHIAS5{>Ii}ZlEXfl3=Qt;5@@g%~@
z=9Dfogd^HNfuHdZ!OZPsGPy)N*U&MQZaPKVF8v69!5h}=^_^|3V<6Vm$J5+u8Ny-1
zk9OkIa)TClE#0IF7buq{Eg8yQGJ*mgmsABqfA05~OXwW2L7d3Q;LjR^8j{WEzLOi-
zYt(ike4NFm8k18yH$)LJo9`fv=?kP|Grkc)D#45-`V?t7ql(X<z#%wzvXew-NY6BM
zHg^f8u{%Q`lIWPFM#6j8v>}+0L>nBDwgfYh=-+6ErRxEO;Ah9bcaTJjFDkil#oRWk
znhEdM-P@nc?jazFP8k<-15P}<WZv-qja}Mqe8wonk6d=7ZRiqd;KmyVWL1{<KT2|r
zVH-n>add@i8~O)vv-mw#COAB_>-nX%eUmaN!MH@Tu`B2pyD}KZ!WCL-E4}KfV8)p)
zis<6!T}=}DBoXeR;}#voNAv<Za_S}899OG&Wkad*oD|Fv4zJJWT{{Hu%7#LptBQ`J
z+u)VYL#x%woDuZrdxZ0jULDdmzM&(8B>OYEaL!D-S(#Bc5AHE`FJ5J24V4G_&H@p5
zd72?lJ(I`YKsUCToI4AB=gId4n~mk+k)dpCzFyFGGAh5gPEg=2nju5H?tX;c+up)$
z&zd*b;-Pk7g&PDCB$^ETB|}`{Pte1{nIDp;=svIWx$vFMQE_PRVN~bScKward>E8r
zpsD$Ofzr#q1VwT&hw?nuQlyD@COFUI;5rN%8gZZ4Un1~qo*^ECaxcI^3VT@Fm^@tA
z<4frwwP+^7E3GmZ42t=D{?K?Iktoit4@F~?7cH9UsPM*pzwh2##J1=N?PO53umfsW
zfFz!-upX~=P+j3IIc3KgNjzP#<#B@!lT<Wg#}EteLaJ!F?`0;rXoiJTIfp*gl#1GA
zD`@W>3hjx%(%zWQ#CWV9dS+iVg|e-9dfzh2?*4$oVIX9ClFr^PY#^ciiIy)shDTER
z`JkdJS`_aT%p65@MPl&=ZAV!tv3an9$_Io`c<fzXCGP5$r#d<zdK=pS99r_Po1|Ia
zpqw1N#a47q^gcFx<ubIzpgbV#(mubZr{{?L1Luxx{-0O6fB*mh07*qoM6N<$f-$`O
AumAu6

literal 0
HcmV?d00001

diff --git a/static/image/icon-plus.png b/static/image/icon-plus.png
new file mode 100644
index 0000000000000000000000000000000000000000..dc9481538e4b07d1f957c1c00864ca21318e2886
GIT binary patch
literal 651
zcmeAS@N?(olHy`uVBq!ia0vp^F(Ayr1|%Q9zZ3zaI14-?iy0UcEkKyjb(&!UP>``W
z$lZxy-8q?;Kn_c~qpu?a!^VE@KZ&di3``21E{-7;jBoGS<_SB>w0$hknRd(kfH^}R
zgL#9pOH&iqwj~`YnygQqTp5G<Kw<^V)1-6WPPIMr#5-_OuaVyuugNz1wN9;5eLZon
z^|XJ<-at!$V8_Y@r)pm9(@U=S6W4Y6%a`A!G4+vK-&ch$TJ?ba?)UJ|3l4vI{^-wt
zbHjai^6&o(V@+FiV(|h$@uc+60(EP49d6YM@cq#I?sm6^t~#H-RIhjFf>q%^O1E+C
zIaDZl@GM83TY+)YY{5G{57Jo7m3I&)bo1QdIhE7&`={?zn>Q=6Vps1ko6;KTWa*{$
zMmI|<N|ryUJg3he@T%+JDfT7zUAF#yJA1w=zZPGe&HTH6L^mbM9)GU-`Q_2;AJ)#|
zKeVzWQulSBj17ye;JGt>Wl2-!#A~?y6+XAb)j7VXuJFUmV|#)mT9h9b_DgH?{WH9)
zaOrNP{@vVa+Z^Y6(ILAQz7Ctc>eHtHwc?kNyBbR-t1l`2acm2p|Mj<tA(z+R+WV-y
z%5?V)zia>YFYCL$X>xD>Hxm4b78+Ms&Oc7w#lDJjUiwcH+pV`hx4tdc;rGi+s;ND?
zQ1SiNK-E=$csusIRegWt#BAnIHD$j085zN`xaym{*uvJRM=?jIfcT!SelF{r5}E+q
Cup%%3

literal 0
HcmV?d00001

diff --git a/pages_order/static/traveler/icon-require.png b/static/image/icon-require.png
similarity index 100%
rename from pages_order/static/traveler/icon-require.png
rename to static/image/icon-require.png
diff --git a/store/store.js b/store/store.js
index 8d89fd2..f03720a 100644
--- a/store/store.js
+++ b/store/store.js
@@ -14,6 +14,7 @@ const store = new Vuex.Store({
 		userInfo : {}, //用户信息
 		travelerList: null,
 		orderInfo: null,
+		couponInfo: null,
 	},
 	getters: {
 		// 角色 true为水洗店 false为酒店 ： 身份判断如果不需要，可以删除
@@ -112,6 +113,9 @@ const store = new Vuex.Store({
 		setOrderInfo(state, data) {
 			state.orderInfo = data
 		},
+		setCouponInfo(state, data) {
+			state.couponInfo = data
+		},
 	},
 	actions: {
 		async collect(state, id) {