feat: page-order;

components/center/orderCard.vue

@@ -1,6 +1,6 @@
 <template>
   <view class="flex card cols">
-    <view class="flex flex-column col" v-for="item in list" :key="item.id">
+    <view class="flex flex-column col" v-for="item in list" :key="item.id" @click="jumpToOrderList(item.index)">
       <view class="icon">
         <image class="icon-img" :src="item.icon" mode="scaleToFill"></image>
         <view class="flex sup" v-if="item.value">{{ item.value }}</view>
@@ -19,13 +19,19 @@
     },
     mounted() {
       this.list = [
-        { id: '001', label: '待支付', value: 2, icon: '/pages_order/static/center/order-1.png' },
-        { id: '002', label: '待发货', value: 2, icon: '/pages_order/static/center/order-2.png' },
-        { id: '003', label: '待收货', value: 0, icon: '/pages_order/static/center/order-3.png' },
-        { id: '004', label: '售后', value: 0, icon: '/pages_order/static/center/order-4.png' },
-        { id: '005', label: '全部', icon: '/pages_order/static/center/order-5.png' },
+        { id: '001', label: '待支付', value: 2, index: 1, icon: '/pages_order/static/center/order-1.png' },
+        { id: '002', label: '待发货', value: 2, index: 2, icon: '/pages_order/static/center/order-2.png' },
+        { id: '003', label: '待收货', value: 0, index: 3, icon: '/pages_order/static/center/order-3.png' },
+        // todo: check
+        { id: '004', label: '售后', value: 0, index: 0, icon: '/pages_order/static/center/order-4.png' },
+        { id: '005', label: '全部', index: 0, icon: '/pages_order/static/center/order-5.png' },
       ]
     },
+    methods: {
+      jumpToOrderList(index) {
+        this.$utils.navigateTo(`/pages_order/order/orderList/index?index=${index}`)
+      }
+    },
   }
 </script>
 

components/product/productCard.vue

@@ -17,7 +17,7 @@
             {{ `¥${data.originalPrice}/份` }}
           </view>
         </view>
-        <button class="btn flex" @click="addToCart(data.id)">
+        <button class="btn flex" @click.stop="onAddCart(data.id)">
           <image class="btn-img" src="@/pages_order/static/report/plus.png" mode="widthFix"></image>
         </button>
       </view>
@@ -44,8 +44,8 @@
       }
     },
     methods: {
-      addToCart(id) {
-        // todo
+      onAddCart(id) {
+				this.$store.commit('addCart', this.data)
       },
       jumpToProductDetail() {
         this.$utils.navigateTo(`/pages_order/product/productDetail?id=${this.data.id}`)

pages.json

@@ -85,6 +85,9 @@
 			{
 				"path": "order/orderList/index"
 			},
+			{
+				"path": "order/orderDetail/index"
+			},
 			{
 				"path": "address/addressList"
 			},
@@ -94,6 +97,9 @@
 			{
 				"path": "comment/commentWrite"
 			},
+			{
+				"path": "service/index"
+			},
 
 
 			{

pages/index/cart copy.vue

@@ -1,260 +0,0 @@
-<template>
-	<view class="page">
-		<navbar/>
-
-		<view class="user">
-			<uv-checkbox-group 
-			shape="circle"
-			v-model="checkboxValue">
-				
-				<uv-swipe-action>
-					<view
-					v-for="(item, index) in list"
-					:key="index">
-						<view style="margin-top: 20rpx;"></view>
-						<uv-swipe-action-item 
-						:options="options">
-							<view class="item">
-								<view class="checkbox">
-									<uv-checkbox
-										:name="item.id"
-										activeColor="#FA5A0A"
-										size="40rpx"
-										icon-size="35rpx"
-									></uv-checkbox>
-								</view>
-								
-								<image 
-								class="image"
-								src="https://img95.699pic.com/photo/50058/1378.jpg_wh860.jpg" 
-								mode=""></image>
-								
-								<view class="info">
-									<view class="title">
-										<view class="">
-											{{ item.title }}
-										</view>
-										<view class="">
-											<uv-number-box v-model="item.num" 
-											@change="valChange"></uv-number-box>
-										</view>
-									</view>
-									<view class="unit">
-										规格：{{ item.unit }}
-										<uv-icon name="arrow-down"></uv-icon>
-									</view>
-									<view class="price">
-										￥<text>{{ item.price }}</text>元
-									</view>
-								</view>
-							</view>
-						</uv-swipe-action-item>
-					</view>
-				</uv-swipe-action>
-			</uv-checkbox-group>
-			
-			<view class="action">
-				<view class="icon">
-					<image src="/static/image/cart/1.png" mode=""></image>
-					<view class="num">
-						{{ checkboxValue.length }}
-					</view>
-				</view>
-				<view class="price">
-					<view class="count">
-						合计
-						<view class="">
-							￥<text>{{ totalPrice }}</text>
-						</view>
-					</view>
-					<view class="text">
-						共{{ checkboxValue.length }}件，已享受更低优惠
-					</view>
-				</view>
-				<view class="btn">
-					去结算
-				</view>
-			</view>
-		</view>
-
-		<tabber select="cart" />
-	</view>
-</template>
-
-<script>
-	import tabber from '@/components/base/tabbar.vue'
-	export default {
-		components: {
-			tabber,
-		},
-		data() {
-			return {
-				value : 0,
-				checkboxValue : [],
-				options: [
-					{
-						text: '删除',
-						style: {
-							backgroundColor: '#FA5A0A'
-						}
-					}, 
-				],
-				list : [
-					{
-						id : 1,
-						title : '桌布租赁',
-						num : 1,
-						price : 299,
-						unit : '120*40*75【桌子尺寸】',
-					},
-					{
-						id : 2,
-						title : '桌布租赁',
-						num : 1,
-						price : 299,
-						unit : '120*40*75【桌子尺寸】',
-					},
-				],
-			}
-		},
-		computed: {
-			totalPrice(){
-				if (!this.checkboxValue.length) {
-					return 0
-				}
-				let price = 0
-				this.list.forEach(n => {
-					if(this.checkboxValue.includes(n.id)){
-						price += n.price * n.num
-					}
-				})
-				return price
-			},
-		},
-		methods: {
-			valChange(){
-				
-			},
-		}
-	}
-</script>
-
-<style scoped lang="scss">
-	.page {
-		padding-bottom: 200rpx;
-		/deep/ .uv-swipe-action{
-			width: 100%;
-		}
-	}
-
-	.user {
-		.item{
-			background-color: #fff;
-			display: flex;
-			padding: 30rpx;
-			.checkbox{
-				display: flex;
-				justify-content: center;
-				align-items: center;
-			}
-			.image{
-				width: 200rpx;
-				height: 200rpx;
-				border-radius: 20rpx;
-			}
-			.info{
-				flex: 1;
-				.title{
-					display: flex;
-					padding: 10rpx 20rpx;
-					justify-content: space-between;
-					
-				}
-				.unit{
-					font-size: 24rpx;
-					padding: 10rpx 20rpx;
-					color: #717171;
-					display: flex;
-					align-items: center;
-				}
-				.price{
-					color: $uni-color;
-					font-size: 28rpx;
-					padding: 10rpx 20rpx;
-					text{
-						font-size: 36rpx;
-						font-weight: 900;
-					}
-				}
-			}
-		}
-		.action{
-			width: 700rpx;
-			position: fixed;
-			bottom: 220rpx;
-			left: 25rpx;
-			background-color: #fff;
-			height: 100rpx;
-			border-radius: 50rpx;
-			box-shadow: 0 0 6rpx 6rpx #00000010;
-			display: flex;
-			justify-content: center;
-			align-items: center;
-			overflow: hidden;
-			z-index: 999;
-			.icon{
-				position: relative;
-				width: 80rpx;
-				height: 80rpx;
-				margin: 0 20rpx;
-				image{
-					width: 80rpx;
-					height: 80rpx;
-				}
-				.num{
-					position: absolute;
-					right: 10rpx;
-					top: 0rpx;
-					background-color: $uni-color;
-					color: #fff;
-					font-size: 18rpx;
-					border-radius: 50%;
-					height: 30rpx;
-					width: 30rpx;
-					display: flex;
-					justify-content: center;
-					align-items: center;
-				}
-			}
-			.price{
-				.count{
-					display: flex;
-					font-size: 26rpx;
-					align-items: center;
-					view{
-						color: $uni-color;
-						margin-left: 10rpx;
-						text{
-							font-size: 32rpx;
-							font-weight: 900;
-						}
-					}
-				}
-				.text{
-					font-size: 20rpx;
-					color: #717171;
-				}
-			}
-			.btn{
-				margin-left: auto;
-				background-color: $uni-color;
-				height: 100%;
-				padding: 0 50rpx;
-				color: #fff;
-				display: flex;
-				justify-content: center;
-				align-items: center;
-			}
-		}
-	}
-</style>

pages/index/cart.vue

@@ -81,7 +81,7 @@
 							<view class="flex row">合计<text class="unit">¥</text><text class="price">{{ totalPrice }}</text></view>
 						</view>
 					</view>
-					<button class="btn">去结算</button>
+					<button :class="['btn', selectedList.length ? '' : 'is-disabled']" :disabled="!selectedList.length" @click="onBuy">去结算</button>
 				</view>
 			</template>
 		</view>
@@ -92,6 +92,7 @@
 </template>
 
 <script>
+	import { mapState } from 'vuex'
 	import mixinsList from '@/mixins/list.js'
 
 	import tabber from '@/components/base/tabbar.vue'
@@ -117,6 +118,8 @@
       }
     },
 		computed: {
+			...mapState(['configList', 'userInfo']),
+
 			// selectedList() {
 			// 	return this.list.filter(item => item.selected)
 			// },
@@ -132,6 +135,7 @@
 			search() {
         // todo
 			},
+			// todo: delete
 			getData() {
 				this.list = [
 					{
@@ -210,6 +214,7 @@
 						checked: false,
 					},
 				]
+
 				this.total = this.list.length
 
 				this.getDataThen && this.getDataThen(this.list, this.total)
@@ -274,7 +279,7 @@
 
 				// todo: check
         this.list[index].price = obj.price
-				
+
         this.list[index].count = obj.count
         this.list[index].countDesc = obj.countDesc
 				// todo
@@ -300,6 +305,9 @@
         })
 
 			},
+			onBuy() {
+				this.$store.commit('createOrder', this.selectedList)
+			},
 		},
 	}
 </script>
@@ -495,6 +503,10 @@
 				line-height: 1;
 				background-image: linear-gradient(to right, #4B348F, #845CFA);
 				border-radius: 41rpx;
+
+				&.is-disabled {
+					opacity: 0.5;
+				}
 			}
 		}
 	}

pages_order/address/addressView.vue

@@ -3,12 +3,18 @@
     <template v-if="data">
       <view class="flex user">
         <view>{{ data.name }}</view>
-        <view>{{ data.phone }}</view>
+        <view class="flex">
+          <text>{{ data.phone }}</text>
+          <button v-if="enableCopy" class="btn btn-copy" @click="$utils.copyText(data.phone)">复制</button>
+        </view>
         <view class="tag" v-if="data.default">默认</view>
       </view>
       <view class="flex address">
         <image v-if="showIcon" class="icon" src="@/pages_order/static/address/icon-address.png" mode="scaleToFill"></image>
-        <view>{{ `${data.area.join('')}${data.address}` }}</view>
+        <view>
+          <text class="text">{{ displayAddress }}</text>
+          <button v-if="enableCopy" class="btn btn-copy" @click="$utils.copyText(displayAddress)">复制</button>
+        </view>
       </view>
     </template>
     <template v-else>
@@ -29,13 +35,38 @@
       showIcon: {
         type: Boolean,
         default: false,
-      }
+      },
+      enableCopy: {
+        type: Boolean,
+        default: false,
+      },
+    },
+    computed: {
+      displayAddress() {
+        if (!this.data) {
+          return ''
+        }
+        const { area, address } = this.data
+
+        return `${area.join('')}${address}`
+      },
     },
   }
 </script>
 
 <style scoped lang="scss">
 
+  .btn {
+    &-copy {
+      display: inline-flex;
+      font-family: PingFang SC;
+      font-weight: 400;
+      font-size: 28rpx;
+      line-height: 1.4;
+      color: #7451DE;
+    }
+  }
+
   .user {
     justify-content: flex-start;
     column-gap: 24rpx;
@@ -57,6 +88,10 @@
       border: 2rpx solid #7451DE;
       border-radius: 8rpx;
     }
+
+    .btn-copy {
+      margin-left: 24rpx;
+    }
   }
 
   .address {
@@ -70,10 +105,19 @@
     color: #9B9B9B;
 
     .icon {
+      flex: none;
       margin: 3px 8rpx 0 0;
       width: 32rpx;
       height: 32rpx;
     }
+
+    .text {
+      margin-right: 8rpx;
+    }
+
+    .btn-copy {
+      vertical-align: text-bottom;
+    }
   }
 
 </style>

pages_order/comment/commentWrite.vue

@@ -1,7 +1,7 @@
 <template>
   <view class="page__view">
 
-		<navbar :title="title" leftClick @leftClick="$utils.navigateBack" color="#191919" bgColor="#FFFFFF" />
+		<navbar :title="title" leftClick @leftClick="$utils.navigateBack" color="#191919" bgColor="#F3F2F7" />
 
     <view class="main form">
 
@@ -129,7 +129,11 @@
 
           // todo
           
-          this.$utils.redirectTo(`/pages_order/comment/commentRecords?creator=${userInfo.id}`)
+          setTimeout(() => {
+            this.$utils.navigateBack()
+          }, 800)
+          
+          // this.$utils.redirectTo(`/pages_order/comment/commentRecords?creator=${userInfo.id}`)
 
         } catch (err) {
           console.log('onSubmit err', err)

pages_order/components/formInput.vue

@@ -1,5 +1,7 @@
 <template>
   <uv-input 
+    :type="type"
+    :inputAlign="inputAlign"
     :value="value" 
     @input="$emit('input', $event)" 
     :placeholder="placeholder"
@@ -26,6 +28,14 @@
         type: String,
 				default: '请输入'
 			},
+      type: {
+        type: String,
+				default: 'text'
+			},
+      inputAlign: {
+        type: String,
+				default: 'left'
+			},
     },
 		data() {
       return {

pages_order/components/formTextarea.vue

@@ -3,7 +3,7 @@
     :value="value" 
     @input="$emit('input', $event)" 
     :placeholder="placeholder"
-    height="230rpx"
+    :height="height"
     border="none"
     :customStyle="{
       backgroundColor: 'transparent',
@@ -30,6 +30,10 @@
         type: String,
 				default: '请输入'
 			},
+      height: {
+        type: String,
+				default: '230rpx'
+      },
     },
 		data() {
       return {

pages_order/components/formUpload.vue

@@ -74,9 +74,6 @@
         deep: true,
       },
     },
-    mounted() {
-      console.log('form upload mounted')
-    },
     methods: {
 			deleteFile(e){
         console.log('deleteFile', e)

pages_order/order/orderConfirm/index.vue

@@ -0,0 +1,353 @@
+<template>
+  <view class="page__view">
+		<navbar title="确认订单" leftClick @leftClick="$utils.navigateBack" color="#191919" bgColor="#F3F2F7" />
+
+    <view class="main">
+
+      <view class="flex address" @click="jumpToSelectAddress">
+        <addressView :data="addressData" :showIcon="true"></addressView>
+        <uv-icon name="arrow-right" color="#C6C6C6" size="32rpx"></uv-icon>
+      </view>
+
+      <view class="card" v-for="item in payOrderProduct" :key="item.id">
+        <productCard :data="item"></productCard>
+      </view>
+
+      <view class="order" v-if="orderData">
+        <view class="order-header">
+          订单信息
+        </view>
+        <view class="flex row">
+          <view class="row-label">订单编号</view>
+          <view class="row-content">{{ orderData.number }}</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>
+      </view>
+      
+      <view class="notice">
+        <view class="notice-header">下单须知</view>
+        <view class="notice-content">
+					<!-- todo: 替换配置项key -->
+				  <uv-parse :content="configList['config_agreement']"></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="#7451DE"
+						: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>
+				</view>
+			</view>
+      <view class="flex bar">
+        <view class="flex col price">
+          <view class="price-label">合计</view>
+          <view class="price-unit">¥</view><view class="price-value">{{ totalPrice }}</view>
+        </view>
+        <button class="col btn" @click="onPay">立即支付</button>
+      </view>
+    </view>
+
+		<agreementModal ref="modal" @confirm="onConfirmAgreement"></agreementModal>
+
+    <payPopup ref="payPopup" @submitted="onPaySuccess"></payPopup>
+
+  </view>
+</template>
+
+<script>
+	import { mapState } from 'vuex'
+
+  import addressView from '@/pages_order/address/addressView.vue'
+  import productCard from './productCard.vue'
+	import agreementModal from '@/pages_order/components/agreementModal.vue'
+  import payPopup from '@/pages_order/order/payPopup.vue'
+
+  export default {
+    components: {
+      addressView,
+      productCard,
+      agreementModal,
+      payPopup,
+    },
+    data() {
+      return {
+        addressData: null,
+        orderData: null,
+        checkboxValue : []
+      }
+    },
+    computed: {
+			...mapState(['configList', 'userInfo', 'payOrderProduct', 'addressInfo']),
+			totalPrice() {
+				return this.payOrderProduct.reduce((price, item) => {
+					// return price + item.price * (item.count || 1)
+					return price + item.price
+				}, 0)
+			},
+    },
+    onShow() {
+      console.log('onShow')
+      console.log('address', this.addressInfo)
+
+      this.addressData = this.addressInfo || {
+        id: '001',
+        name: '郑文锦',
+        phone: '18108341643',
+        area: ['海南省', '海口市', '秀英区'],
+        address: '秀英街道5单元183室',
+        default: true,
+      }
+    },
+    onLoad() {
+      console.log('onLoad')
+      console.log('payOrderProduct', this.payOrderProduct)
+
+      this.orderData = {
+        id: '001',
+        number: 'BH872381728321983929',
+        createTime: '2025-04-28 08:14',
+      }
+
+      console.log('orderData', this.orderData)
+
+    },
+    onUnload() {
+      this.$store.commit('setAddressInfo', null)
+    },
+    methods: {
+      jumpToSelectAddress() {
+        this.$utils.navigateTo('/pages_order/address/addressList')
+      },
+      onConfirmAgreement(confirm) {
+        if (confirm) {
+          this.checkboxValue = [1]
+        } else {
+          this.checkboxValue = []
+        }
+      },
+      onPay() {
+        if(!this.checkboxValue.length){
+          return uni.showToast({
+            title: '请先同意《用户协议》《隐私协议》《消费者告知》',
+            icon:'none'
+          })
+        }
+
+        const  { id } = this.orderData
+
+        const obj = {
+          title: '营养套餐消费',
+          orderId: id,
+          amount: this.totalPrice,
+        }
+
+        this.$refs.payPopup.open(obj)
+      },
+      onPaySuccess() {
+        uni.reLaunch({
+          url: '/pages/order/orderList/index'
+        })
+      },
+    },
+  }
+</script>
+
+<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;
+
+    padding: 24rpx 32rpx;
+    background: #FFFFFF;
+    border-radius: 24rpx;
+  }
+
+  .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;
+      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.3;
+      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;
+      }
+
+      .highlight {
+        color: $uni-color;
+      }
+    }
+
+    .bar {
+      padding: 24rpx 40rpx;
+      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;
+      }
+
+    }
+
+	}
+
+</style>

pages_order/order/orderConfirm/productCard.vue

@@ -0,0 +1,169 @@
+<template>
+  <view class="flex card" @click="jumpToProductDetail">
+    <view class="img-box">
+      <image class="img" :src="data.url" mode="aspectFit"></image>
+    </view>
+    <view class="info">
+      <view class="title">{{ data.name }}</view>
+      <view class="desc">{{ data.desc }}</view>
+      <view class="flex price-box">
+        <view class="flex price">¥<text class="highlight">{{ data.price.toFixed(2) }}</text></view>
+      </view>
+      <view class="flex tool">
+        <view class="flex count">
+          规格：<text class="highlight">{{ data.countDesc || data.count }}</text>
+        </view>
+      </view>
+    </view>
+    
+    <view v-if="data.customized" class="sup customized">
+      定制组合
+    </view>
+    <view v-else-if="data.free" class="sup free">
+      自定组合
+    </view>
+
+  </view>
+</template>
+
+<script>
+  export default {
+    props: {
+      data: {
+        type: Object,
+        default() {
+          return {}
+        }
+      },
+    },
+    data() {
+      return {
+      }
+    },
+    methods: {
+      jumpToProductDetail() {
+        console.log(this.data.id, 'jumpToProductDetail')
+        this.$utils.navigateTo(`/pages_order/product/productDetail?id=${this.data.id}`)
+      },
+    },
+  }
+</script>
+
+<style scoped lang="scss">
+.card {
+  position: relative;
+  height: 240rpx;
+  padding: 0 32rpx;
+  background-image: linear-gradient(#FAFAFF, #F3F3F3);
+  border: 2rpx solid #FFFFFF;
+  border-radius: 32rpx;
+  box-sizing: border-box;
+  column-gap: 24rpx;
+  overflow: hidden;
+
+  /deep/ .uv-checkbox__label-wra {
+    padding: 0;
+  }
+}
+
+.img {
+  &-box {
+    width: 144rpx;
+    height: 144rpx;
+    border-radius: 16rpx;
+    overflow: hidden;
+  }
+
+  width: 100%;
+  height: 100%;
+}
+
+.info {
+  flex: 1;
+  font-family: PingFang SC;
+  font-weight: 400;
+  line-height: 1.4;
+  font-size: 26rpx;
+  color: #8B8B8B;
+
+  .title {
+    font-weight: 600;
+    font-size: 28rpx;
+    color: #000000;
+  }
+
+  .desc {
+    margin-top: 8rpx;
+    line-height: 1.5;
+  }
+
+  .price {
+    &-box {
+      margin-top: 8rpx;
+      justify-content: flex-start;
+      column-gap: 20rpx;
+    }
+
+    font-weight: 600;
+    font-size: 24rpx;
+    color: #7451DE;
+
+    .highlight {
+      margin: 0 8rpx;
+      font-size: 32rpx;
+    }
+
+    &-origin {
+      font-size: 28rpx;
+      line-height: 1;
+      text-decoration: line-through;
+    }
+  }
+
+  .tool {
+    margin-top: 8rpx;
+    justify-content: space-between;
+
+    .count {
+      .highlight {
+        margin: 0 8rpx;
+        color: #252545;
+      }
+    }
+
+    .btn {
+      padding: 8rpx 40rpx;
+      font-family: PingFang SC;
+      font-weight: 600;
+      font-size: 28rpx;
+      line-height: 1.5;
+      color: #FFFFFF;
+      background: #7451DE;
+      border-radius: 30rpx;
+    }
+  }
+}
+
+.sup {
+  position: absolute;
+  top: 28rpx;
+  right: -60rpx;
+  padding: 5rpx 52rpx;
+  font-family: PingFang SC;
+  font-weight: 400;
+  font-size: 28rpx;
+  line-height: 1.5;
+  white-space: nowrap;
+  transform: rotate(45deg);
+  
+  &.customized {
+    color: #FFFFFF;
+    background: #252545;
+  }
+
+  &.free {
+    color: #252545;
+    background: #D7D7FF;
+  }
+}
+</style>

pages_order/order/orderDetail/index.vue

@@ -0,0 +1,647 @@
+<template>
+  <view class="page__view">
+		
+    <navbar title="订单详情" leftClick @leftClick="$utils.navigateBack" color="#191919" bgColor="#FFFFFF" />
+
+    <view class="main">
+
+      <view class="flex address" v-if="addressData">
+        <addressView :data="addressData" :showIcon="true" :enableCopy="true"></addressView>
+      </view>
+
+      <template v-if="orderData">
+
+        <view class="card detail">
+          <view class="flex card-top">
+            <view class="title">订单详情</view>
+            <view :class="['flex', 'status', `status-${orderData.status}`]">{{ statusDesc }}</view>
+          </view>
+          <view class="card-main">
+            <view class="flex product" v-for="item in orderData.productList" :key="item.id">
+              <image class="img" :src="item.url" mode="scaleToFill"></image>
+              <view class="info">
+                <view class="row">{{ item.name }}</view>
+                <view class="flex row">
+                  <view class="row-label">产品类型：</view>
+                  <view class="row-content">{{ item.type }}</view>
+                </view>
+                <view class="flex row">
+                  <view class="row-label">产品内容：</view>
+                  <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.toFixed(2) }}</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.amount.toFixed(2) }}</text></view>
+          </view>
+        </view>
+
+        <view v-if="orderData.status == 5" 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.serviceRecords"
+                :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.desc }}</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.number }}</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>
+          </view>
+        </view>
+
+      </template>
+
+      <view class="notice">
+        <view class="notice-header">下单须知</view>
+        <view class="notice-content">
+					<!-- todo: 替换配置项key -->
+				  <uv-parse :content="configList['config_agreement']"></uv-parse>
+        </view>
+      </view>
+    </view>
+
+    <view class="flex bottom" v-if="orderData && [0,1,2,3,4].includes(orderData.status)">
+      <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>
+        <view>联系客服</view>
+      </button>
+      <view class="flex cols">
+        <!-- 待支付 -->
+        <template v-if="orderData.status == 0">
+          <view class="flex col price">
+            <view class="price-label">合计</view>
+            <text class="price-unit">¥</text><text class="price-value">{{ orderData.amount.toFixed(2) }}</text>
+          </view>
+          <button class="flex col btn btn-primary" @click="onPay">立即支付</button>
+        </template>
+        <!-- 待发货 -->
+        <template v-else-if="orderData.status == 1">
+          <button class="flex col btn" @click="onApplyService">申请售后</button>
+        </template>
+        <!-- 待收货 -->
+        <template v-else-if="orderData.status == 2">
+          <button class="flex col btn" @click="onApplyService">申请售后</button>
+          <button class="flex col btn btn-primary" @click="onConfirmReceipt">确认收货</button>
+        </template>
+        <!-- 待评价 -->
+        <template v-else-if="orderData.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="orderData.status == 4">
+          <button class="flex col btn" @click="onApplyService">申请售后</button>
+        </template>
+      </view>
+    </view>
+
+    <payPopup ref="payPopup"></payPopup>
+    <serviceSelectPopup ref="serviceSelectPopup"></serviceSelectPopup>
+
+  </view>
+</template>
+
+<script>
+  import addressView from '@/pages_order/address/addressView.vue'
+  import payPopup from '@/pages_order/order/payPopup.vue'
+  import serviceSelectPopup from '@/pages_order/service/serviceSelectPopup.vue'
+
+  const STATUS_AND_DESC_MAPPING = {
+    0: '待支付',
+    1: '待发货',
+    2: '待收货',
+    3: '待评价',
+    4: '已完成',
+    5: '售后',
+  }
+
+  export default {
+    components: {
+      addressView,
+      payPopup,
+      serviceSelectPopup,
+    },
+    data() {
+      return {
+        id: null,
+        addressData: null,
+        orderData: null,
+      }
+    },
+    computed: {
+      statusDesc() {
+        return STATUS_AND_DESC_MAPPING[this.orderData?.status]
+      },
+    },
+    onShow() {
+      console.log('onShow')
+
+      if (!this.id) {
+        return
+      }
+
+      this.fetchOrderDetail()
+
+    },
+    onLoad(arg) {
+      console.log('onLoad')
+      this.id = arg.id
+
+      this.fetchOrderDetail()
+    },
+    methods: {
+      async fetchOrderDetail() {
+        console.log('fetch data')
+        // todo: fetch data by id
+        
+        this.addressData = {
+          id: '001',
+          name: '郑文锦',
+          phone: '18108341643',
+          area: ['海南省', '海口市', '秀英区'],
+          address: '秀英街道5单元183室',
+          // id: '006',
+          // name: '何炜',
+          // phone: '18108341643',
+          // area: ['新疆维吾尔自治区', '乌鲁木齐市', '沙依巴克区'],
+          // address: '新疆维吾尔自治区乌鲁木齐市沙依巴克区仓房沟片区街道4单元50室',
+        }
+        
+        this.orderData = {
+          id: '001',
+          url: '/pages_order/static/index/recommend-pic.png', 
+          title: '月度装定制营养包',
+          amount: 688,
+          productList: [
+            {
+              id: '0011',
+              url: '/pages_order/static/index/medicine-1.png', 
+              name: '月度装定制营养包',
+              type: '保健品',
+              content: '控糖精华萃 x30颗、膳食纤维 ×30颗',
+              price: 688.00,
+              count: 1,
+              countDesc: '1月装',
+              customized: true,
+            },
+            {
+              id: '0012',
+              url: '/pages_order/static/index/medicine-2.png', 
+              name: '月度装定制营养包',
+              type: '保健品',
+              content: '控糖精华萃 x30颗、膳食纤维 ×30颗',
+              price: 688.00,
+              count: 1,
+              countDesc: '1月装',
+              free: true,
+            },
+            {
+              id: '0013',
+              url: '/pages_order/static/index/medicine-3.png', 
+              name: '月度装定制营养包',
+              type: '保健品',
+              content: '控糖精华萃 x30颗、膳食纤维 ×30颗',
+              price: 688.00,
+              count: 1,
+              countDesc: '1月装',
+              free: true,
+            },
+          ],
+          serviceRecords: [
+            {
+              id: '003',
+              title: '退款成功',
+              desc: '平台已为您退款，具体到账时间请查询支付账户',
+              createTime: '2025-04-20 12:00',
+            },
+            {
+              id: '002',
+              title: '等待审核',
+              desc: '您的服务单已申请成功，待售后审核',
+              createTime: '2025-04-20 12:00',
+            },
+            {
+              id: '001',
+              title: '提交申请',
+              desc: '包装破损',
+              createTime: '2025-04-20 12:00',
+            },
+          ],
+          userName: '周小艺',
+          phone: '15558661691',
+          number: 'BH872381728321983929',
+          createTime: '2025-04-28 08:14',
+          status: 5,
+        }
+
+        console.log('addressData', this.addressData)
+        console.log('orderData', this.orderData)
+      },
+      onPay() {
+        
+        const {
+          id,
+          title,
+          amount
+        } = this.orderData
+
+        
+        const obj = {
+          title,
+          orderId: id,
+          amount,
+        }
+
+        this.$refs.payPopup.open(obj)
+
+      },
+      onConfirmReceipt() {
+        // todo: fetch confirm
+
+        this.fetchOrderDetail()
+      },
+      onComment() {
+        this.$utils.navigateTo(`/pages_order/comment/commentWrite?id=${this.orderData.id}`)
+      },
+      onApplyService() {
+
+        const {
+          id,
+          productList,
+        } = this.orderData
+
+        
+        const obj = {
+          id,
+          productList,
+        }
+
+        this.$refs.serviceSelectPopup.open(obj)
+      },
+    },
+  }
+</script>
+
+<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;
+
+          .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;
+          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;
+        }
+
+        &-title {
+          font-family: PingFang SC;
+          font-weight: 400;
+          font-size: 30rpx;
+          line-height: 1.4;
+          color: #000000;
+
+          &.highlight {
+            font-weight: 500;
+            color: #10A934;
+          }
+        }
+
+        &-time {
+          font-family: PingFang SC;
+          font-weight: 400;
+          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;
+        }
+
+      }
+    }
+
+  }
+
+  .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;
+    
+    column-gap: 32rpx;
+		width: 100vw;
+		height: 200rpx;
+		padding: 24rpx 40rpx;
+		background: #FFFFFF;
+		box-sizing: border-box;
+
+    .btn {
+      background: transparent;
+      border: none;
+
+      &-service {
+        flex: none;
+        row-gap: 4rpx;
+        font-family: PingFang SC;
+        font-weight: 400;
+        font-size: 22rpx;
+        line-height: 1.1;
+        color: #999999;
+
+        &-icon {
+          width: 52rpx;
+          height: auto;
+        }
+      }
+    }
+
+    .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>

pages_order/order/orderList/index.vue

@@ -0,0 +1,453 @@
+<template>
+	<view class="page__view">
+
+		<navbar title="订单管理" leftClick @leftClick="$utils.navigateBack" color="#191919" bgColor="#FFFFFF" />
+
+		<view class="main">
+
+      
+      <view class="tabs">
+        <uv-tabs 
+          :list="tabs" 
+          :current="current"
+          :scrollable="false" 
+          lineColor="#7451DE"
+          lineWidth="48rpx"
+          lineHeight="4rpx"
+          :activeStyle="{
+            'font-family': 'PingFang SC',
+            'font-weight': 500,
+            'font-size': '32rpx',
+            'line-height': 1.4,
+            'color': '#7451DE',
+          }" 
+          :inactiveStyle="{
+            'font-family': 'PingFang SC',
+            'font-weight': 400,
+            'font-size': '32rpx',
+            'line-height': 1.4,
+            'color': '#181818',
+          }" 
+          @click="clickTabs"
+        ></uv-tabs>
+      </view>
+
+      <view class="card" v-for="item in list" :key="item.id">
+        <orderCard 
+          :data="item" 
+          @pay="onPay(item)"
+          @applyService="onApplyService(item)"
+          @statusChange="getData"
+        ></orderCard>
+      </view>
+
+    </view>
+
+    <payPopup ref="payPopup" @submitted="getData"></payPopup>
+    <serviceSelectPopup ref="serviceSelectPopup"></serviceSelectPopup>
+
+  </view>
+  
+</template>
+
+<script>
+	import mixinsList from '@/mixins/list.js'
+
+  import orderCard from './orderCard.vue'
+  import payPopup from '@/pages_order/order/payPopup.vue'
+  import serviceSelectPopup from '@/pages_order/service/serviceSelectPopup.vue'
+
+  export default {
+		mixins: [mixinsList],
+    components: {
+      orderCard,
+      payPopup,
+      serviceSelectPopup,
+    },
+    data() {
+      return {
+        tabs: [
+          { name: '全部' },
+          { name: '待支付' },
+          { name: '待发货' },
+          { name: '待收货' },
+          { name: '待评价' },
+        ],
+        // todo
+				mixinsListApi: '',
+        current: 0,
+      }
+    },
+    onShow() {
+      console.log('onShow')
+    },
+    onLoad(arg) {
+      this.clickTabs({ index: arg.index || 0 })
+    },
+    methods: {
+			//点击tab栏
+			clickTabs({ index }) {
+        console.log('clickTabs')
+        this.current = index
+
+				if (index == 0) {
+					delete this.queryParams.status
+				} else {
+					this.queryParams.status = index - 1
+				}
+				this.getData()
+			},
+      // todo: delete
+			getData() {
+        console.log('getData')
+				this.list = [
+          {
+						id: '001',
+						url: '/pages_order/static/index/recommend-pic.png', 
+						title: '月度装定制营养包',
+						amount: 688,
+            productList: [
+              {
+                id: '0011',
+    						url: '/pages_order/static/index/medicine-1.png', 
+                name: '月度装定制营养包',
+                type: '保健品',
+                content: '控糖精华萃 x30颗、膳食纤维 ×30颗',
+                price: 688.00,
+                count: 1,
+                countDesc: '1月装',
+                customized: true,
+              },
+              {
+                id: '0012',
+    						url: '/pages_order/static/index/medicine-2.png', 
+                name: '月度装定制营养包',
+                type: '保健品',
+                content: '控糖精华萃 x30颗、膳食纤维 ×30颗',
+                price: 688.00,
+                count: 1,
+                countDesc: '1月装',
+                free: true,
+              },
+              {
+                id: '0013',
+    						url: '/pages_order/static/index/medicine-3.png', 
+                name: '月度装定制营养包',
+                type: '保健品',
+                content: '控糖精华萃 x30颗、膳食纤维 ×30颗',
+                price: 688.00,
+                count: 1,
+                countDesc: '1月装',
+                free: true,
+              },
+            ],
+            userName: '周小艺',
+            phone: '15558661691',
+            createTime: '2025-04-28 08:14',
+            status: 4,
+          },
+          {
+						id: '002',
+						url: '/pages_order/static/index/recommend-pic.png', 
+						title: '月度装定制营养包',
+						amount: 688,
+            productList: [
+              {
+                id: '0011',
+    						url: '/pages_order/static/index/medicine-1.png', 
+                name: '月度装定制营养包',
+                type: '保健品',
+                content: '控糖精华萃 x30颗、膳食纤维 ×30颗',
+                price: 688.00,
+                count: 1,
+                countDesc: '1月装',
+                customized: true,
+              },
+              {
+                id: '0012',
+    						url: '/pages_order/static/index/medicine-2.png', 
+                name: '月度装定制营养包',
+                type: '保健品',
+                content: '控糖精华萃 x30颗、膳食纤维 ×30颗',
+                price: 688.00,
+                count: 1,
+                countDesc: '1月装',
+                free: true,
+              },
+              {
+                id: '0013',
+    						url: '/pages_order/static/index/medicine-3.png', 
+                name: '月度装定制营养包',
+                type: '保健品',
+                content: '控糖精华萃 x30颗、膳食纤维 ×30颗',
+                price: 688.00,
+                count: 1,
+                countDesc: '1月装',
+                free: true,
+              },
+            ],
+            userName: '周小艺',
+            phone: '15558661691',
+            createTime: '2025-04-28 08:14',
+            status: 3,
+          },
+          {
+						id: '003',
+						url: '/pages_order/static/index/recommend-pic.png', 
+						title: '月度装定制营养包',
+						amount: 688,
+            productList: [
+              {
+                id: '0011',
+    						url: '/pages_order/static/index/medicine-1.png', 
+                name: '月度装定制营养包',
+                type: '保健品',
+                content: '控糖精华萃 x30颗、膳食纤维 ×30颗',
+                price: 688.00,
+                count: 1,
+                countDesc: '1月装',
+                customized: true,
+              },
+              {
+                id: '0012',
+    						url: '/pages_order/static/index/medicine-2.png', 
+                name: '月度装定制营养包',
+                type: '保健品',
+                content: '控糖精华萃 x30颗、膳食纤维 ×30颗',
+                price: 688.00,
+                count: 1,
+                countDesc: '1月装',
+                free: true,
+              },
+              {
+                id: '0013',
+    						url: '/pages_order/static/index/medicine-3.png', 
+                name: '月度装定制营养包',
+                type: '保健品',
+                content: '控糖精华萃 x30颗、膳食纤维 ×30颗',
+                price: 688.00,
+                count: 1,
+                countDesc: '1月装',
+                free: true,
+              },
+            ],
+            userName: '周小艺',
+            phone: '15558661691',
+            createTime: '2025-04-28 08:14',
+            status: 0,
+          },
+          {
+						id: '004',
+						url: '/pages_order/static/index/recommend-pic.png', 
+						title: '月度装定制营养包',
+						amount: 688,
+            productList: [
+              {
+                id: '0011',
+    						url: '/pages_order/static/index/medicine-1.png', 
+                name: '月度装定制营养包',
+                type: '保健品',
+                content: '控糖精华萃 x30颗、膳食纤维 ×30颗',
+                price: 688.00,
+                count: 1,
+                countDesc: '1月装',
+                customized: true,
+              },
+              {
+                id: '0012',
+    						url: '/pages_order/static/index/medicine-2.png', 
+                name: '月度装定制营养包',
+                type: '保健品',
+                content: '控糖精华萃 x30颗、膳食纤维 ×30颗',
+                price: 688.00,
+                count: 1,
+                countDesc: '1月装',
+                free: true,
+              },
+              {
+                id: '0013',
+    						url: '/pages_order/static/index/medicine-3.png', 
+                name: '月度装定制营养包',
+                type: '保健品',
+                content: '控糖精华萃 x30颗、膳食纤维 ×30颗',
+                price: 688.00,
+                count: 1,
+                countDesc: '1月装',
+                free: true,
+              },
+            ],
+            userName: '周小艺',
+            phone: '15558661691',
+            createTime: '2025-04-28 08:14',
+            status: 1,
+          },
+          {
+						id: '005',
+						url: '/pages_order/static/index/recommend-pic.png', 
+						title: '月度装定制营养包',
+						amount: 688,
+            productList: [
+              {
+                id: '0011',
+    						url: '/pages_order/static/index/medicine-1.png', 
+                name: '月度装定制营养包',
+                type: '保健品',
+                content: '控糖精华萃 x30颗、膳食纤维 ×30颗',
+                price: 688.00,
+                count: 1,
+                countDesc: '1月装',
+                customized: true,
+              },
+              {
+                id: '0012',
+    						url: '/pages_order/static/index/medicine-2.png', 
+                name: '月度装定制营养包',
+                type: '保健品',
+                content: '控糖精华萃 x30颗、膳食纤维 ×30颗',
+                price: 688.00,
+                count: 1,
+                countDesc: '1月装',
+                free: true,
+              },
+              {
+                id: '0013',
+    						url: '/pages_order/static/index/medicine-3.png', 
+                name: '月度装定制营养包',
+                type: '保健品',
+                content: '控糖精华萃 x30颗、膳食纤维 ×30颗',
+                price: 688.00,
+                count: 1,
+                countDesc: '1月装',
+                free: true,
+              },
+            ],
+            userName: '周小艺',
+            phone: '15558661691',
+            createTime: '2025-04-28 08:14',
+            status: 2,
+          },
+          {
+						id: '006',
+						url: '/pages_order/static/index/recommend-pic.png', 
+						title: '月度装定制营养包',
+						amount: 688,
+            productList: [
+              {
+                id: '0011',
+    						url: '/pages_order/static/index/medicine-1.png', 
+                name: '月度装定制营养包',
+                type: '保健品',
+                content: '控糖精华萃 x30颗、膳食纤维 ×30颗',
+                price: 688.00,
+                count: 1,
+                countDesc: '1月装',
+                customized: true,
+              },
+              {
+                id: '0012',
+    						url: '/pages_order/static/index/medicine-2.png', 
+                name: '月度装定制营养包',
+                type: '保健品',
+                content: '控糖精华萃 x30颗、膳食纤维 ×30颗',
+                price: 688.00,
+                count: 1,
+                countDesc: '1月装',
+                free: true,
+              },
+              {
+                id: '0013',
+    						url: '/pages_order/static/index/medicine-3.png', 
+                name: '月度装定制营养包',
+                type: '保健品',
+                content: '控糖精华萃 x30颗、膳食纤维 ×30颗',
+                price: 688.00,
+                count: 1,
+                countDesc: '1月装',
+                free: true,
+              },
+            ],
+            userName: '周小艺',
+            phone: '15558661691',
+            createTime: '2025-04-28 08:14',
+            status: 5,
+          },
+        ]
+				this.total = this.list.length
+			},
+      onPay(data) {
+
+        const {
+          id,
+          title,
+          amount
+        } = data
+
+        
+        const obj = {
+          title,
+          orderId: id,
+          amount,
+        }
+
+        this.$refs.payPopup.open(obj)
+      },
+      onApplyService(data) {
+
+        const {
+          id,
+          productList,
+        } = data
+
+        
+        const obj = {
+          id,
+          productList,
+        }
+
+        this.$refs.serviceSelectPopup.open(obj)
+      },
+    },
+  }
+</script>
+
+<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) + 244rpx) 32rpx 40rpx 32rpx;
+
+    .tabs {
+      position: fixed;
+      top: calc(var(--status-bar-height) + 120rpx);
+      left: 0;
+      width: 100%;
+      height: 84rpx;
+      background: #FFFFFF;
+      z-index: 1;
+
+      /deep/ .uv-tabs__wrapper__nav__line {
+        border-radius: 2rpx;
+        bottom: 0;
+      }
+
+    }
+	}
+
+  .card {
+    & + & {
+      margin-top: 40rpx;
+    }
+  }
+
+</style>

pages_order/order/orderList/orderCard.vue

@@ -0,0 +1,245 @@
+<template>
+  <view class="card" @click="jumpToOrderDetail">
+    <view class="flex top">
+      <view class="title">{{ data.title }}</view>
+      <view :class="['flex', 'status', `status-${data.status}`]">{{ statusDesc }}</view>
+    </view>
+    <view class="flex main">
+      <image class="img" :src="data.url" mode="scaleToFill"></image>
+      <view class="info">
+        <view class="flex row">
+          <view class="row-label">客户姓名：</view>
+          <view class="row-content">{{ data.userName }}</view>
+        </view>
+        <view class="flex row">
+          <view class="row-label">下单时间：</view>
+          <view class="row-content">{{ data.createTime }}</view>
+        </view>
+        <view class="flex row">
+          <view class="row-label">联系电话：</view>
+          <view class="row-content">{{ data.phone }}</view>
+        </view>
+      </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.amount.toFixed(2) }}</text>
+      </view>
+      <view class="flex btns">
+        <!-- 待支付 -->
+        <template v-if="data.status == 0">
+          <button class="btn" @click="onPay">立即支付</button>
+        </template>
+        <!-- 待发货 -->
+        <template v-else-if="data.status == 1">
+          <button class="btn" @click="onApplyService">申请售后</button>
+        </template>
+        <!-- 待收货 -->
+        <template v-else-if="data.status == 2">
+          <button class="btn" @click="onApplyService">申请售后</button>
+          <button class="btn" @click="onConfirmReceipt">确认收货</button>
+        </template>
+        <!-- 待评价 -->
+        <template v-else-if="data.status == 3">
+          <button class="btn" @click="onApplyService">申请售后</button>
+          <button class="btn" @click="onComment">立即评价</button>
+        </template>
+        <!-- 已完成 -->
+        <template v-else-if="data.status == 4">
+          <button class="btn" @click="onApplyService">申请售后</button>
+        </template>
+        <!-- 售后 -->
+        <template v-else-if="data.status == 5">
+          
+        </template>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+  const STATUS_AND_DESC_MAPPING = {
+    0: '待支付',
+    1: '待发货',
+    2: '待收货',
+    3: '待评价',
+    4: '已完成',
+    5: '售后',
+  }
+
+  export default {
+    props: {
+      data: {
+        type: Object,
+        default() {
+          return {}
+        }
+      }
+    },
+    computed: {
+      statusDesc() {
+        return STATUS_AND_DESC_MAPPING[this.data.status]
+      },
+    },
+    methods: {
+      onPay() {
+        this.$emit('pay')
+      },
+      onConfirmReceipt() {
+        // todo: fetch confirm
+
+        this.$emit('statusChange')
+      },
+      onComment() {
+        this.$utils.navigateTo(`/pages_order/comment/commentWrite?id=${this.data.id}`)
+      },
+      onApplyService() {
+        this.$emit('applyService')
+      },
+      jumpToOrderDetail() {
+        this.$utils.navigateTo(`/pages_order/order/orderDetail/index?id=${this.data.id}`)
+      },
+    },
+  }
+</script>
+
+<style scoped lang="scss">
+  .card {
+    width: 100%;
+    padding: 32rpx;
+    box-sizing: border-box;
+    background: #FAFAFF;
+    border: 2rpx solid #FFFFFF;
+  }
+
+  .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;
+      }
+
+      &-5 {
+        color: #E53C29;
+        background: #FDE7E5;
+      }
+    }
+  }
+
+  .main {
+    margin: 24rpx 0;
+    column-gap: 24rpx;
+
+    .img {
+      flex: none;
+      width: 120rpx;
+      height: 120rpx;
+    }
+
+    .info {
+      flex: 1;
+      padding: 24rpx;
+      background: #FFFFFF;
+      border-radius: 32rpx;
+    }
+
+    .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;
+      }
+    }
+
+    .row + .row {
+      margin-top: 16rpx;
+    }
+  }
+
+  .bottom {
+    justify-content: space-between;
+
+    .price {
+      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;
+      }
+    }
+
+    .btns {
+      flex: 1;
+      justify-content: flex-end;
+      column-gap: 16rpx;
+    }
+
+    .btn {
+      padding: 10rpx 22rpx;
+      font-family: PingFang SC;
+      font-weight: 400;
+      font-size: 28rpx;
+      line-height: 1.4;
+      color: #393939;
+      border: 2rpx solid #252545;
+      border-radius: 32rpx;
+    }
+  }
+</style>

pages_order/order/payPopup.vue

@@ -0,0 +1,261 @@
+<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="main">
+          <view class="section flex flex-column info">
+            <view class="info-title">{{ orderData.title }}</view>
+            <view class="flex info-amount">¥<text class="highlight">{{ orderData.amount }}</text></view>
+          </view>
+          <view class="section flex payment">
+            <view class="flex">
+              <image class="payment-icon" src="@/pages_order/static/order/icon-wx.png" mode="widthFix"></image>
+              <view class="payment-text">微信</view>
+            </view>
+            <view>
+              <uv-radio-group 
+                :value="1" 
+                shape="circle"
+                size="36rpx"
+                iconSize="36rpx"
+                activeColor="#7451DE"
+              >
+                <uv-radio :name="1"></uv-radio>
+              </uv-radio-group>
+            </view>
+          </view>
+          <view class="section agreement">
+            <uv-checkbox-group
+              v-model="checkboxValue"
+              shape="circle"
+            >
+              <uv-checkbox
+                size="36rpx"
+                icon-size="36rpx"
+                activeColor="#7451DE"
+                :name="1"
+              ></uv-checkbox>
+            </uv-checkbox-group>
+            <view class="desc">
+              我已阅读并同意
+              <!-- todo: 替换配置项key -->
+              <text class="highlight" @click="$refs.modal.open('config_privacy', '应用内支付用户协议')">《应用内支付用户协议》</text>
+              <!-- todo: 替换配置项key -->
+              <text class="highlight" @click="$refs.modal.open('config_agreement', '支付与隐私的声明')">《支付与隐私的声明》</text>
+            </view>
+          </view>
+        </view>
+        <view class="flex footer">
+          <button class="flex btn btn-cancel" @click="onCancel">暂不支付</button>
+          <button class="flex btn btn-pay" @click="onPay">支付</button>
+        </view>
+      </view>
+		</uv-popup>
+
+		<agreementModal ref="modal" @confirm="onConfirmAgreement"></agreementModal>
+    
+  </view>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        orderData: {}
+      }
+    },
+    methods: {
+      open(data) {
+
+        const {
+          title,
+          orderId,
+          amount,
+        } = data
+
+        this.orderData = {
+          title,
+          orderId,
+          amount,
+        }
+
+        this.$refs.popup.open()
+
+        console.log('orderData', this.orderData)
+      },
+      close() {
+        this.$refs.popup.close()
+      },
+      onCancel() {
+        // todo: jump to order list page?
+        this.close()
+      },
+      onConfirmAgreement(confirm) {
+        if (confirm) {
+          this.checkboxValue = [1]
+        } else {
+          this.checkboxValue = []
+        }
+      },
+      onPay() {
+        // todo: pay
+
+        // todo: jump to order list page
+        this.$emit('submitted')
+      },
+    },
+  }
+</script>
+
+<style lang="scss" scoped>
+
+  .popup__view {
+    width: 100vw;
+    display: flex;
+    flex-direction: column;
+    box-sizing: border-box;
+    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;
+    }
+
+  }
+
+  .main {
+    padding: 64rpx 40rpx;
+  }
+
+  .section {
+    margin-top: 24rpx;
+  }
+
+  .info {
+    row-gap: 8rpx;
+
+    &-title {
+      font-family: PingFang SC;
+      font-weight: 400;
+      font-size: 28rpx;
+      line-height: 1.4;
+      color: #000000;
+    }
+
+    &-amount {
+      font-family: PingFang SC;
+      font-weight: 500;
+      font-size: 24rpx;
+      line-height: 1.4;
+      color: #7451DE;
+
+      .highlight {
+        font-size: 64rpx;
+        margin-left: 8rpx;
+      }
+    }
+  }
+
+  .payment {
+    justify-content: space-between;
+    box-sizing: border-box;
+    padding: 24rpx 32rpx;
+    background: #FAFAFF;
+    box-shadow: -4rpx -4rpx 20rpx 0 #FFFFFFC4,
+                4rpx 4rpx 20rpx 0 #AAAACC1F,
+                2rpx 2rpx 4rpx 0 #AAAACC40,
+                -2rpx -2rpx 4rpx 0 #FFFFFF;
+    border-radius: 32rpx;
+
+    &-icon {
+      width: 56rpx;
+      height: auto;
+    }
+    &-text {
+      margin-left: 16rpx;
+      font-family: PingFang SC;
+      font-weight: 400;
+      font-size: 28rpx;
+      line-height: 1.5;
+      color: #252545;
+    }
+  }
+  
+  .agreement {
+    margin-top: 24rpx;
+    display: flex;
+
+    .desc {
+      font-family: PingFang SC;
+      font-size: 24rpx;
+      font-weight: 400;
+      line-height: 1.4;
+      color: #8B8B8B;
+    }
+
+    .highlight {
+      color: $uni-color;
+    }
+  }
+
+  .footer {
+    width: 100%;
+    // todo：check
+    // height: 214rpx;
+    padding: 32rpx 40rpx;
+    box-sizing: border-box;
+    border-top: 2rpx solid #F1F1F1;
+    column-gap: 32rpx;
+
+    .btn {
+      flex: 1;
+      font-family: PingFang SC;
+      font-weight: 500;
+      font-size: 36rpx;
+      line-height: 1.4;
+      border-radius: 41rpx;
+
+      &-cancel {
+        padding: 14rpx 0;
+        color: #252545;
+        border: 2rpx solid #252545;
+      }
+
+      &-pay {
+        padding: 16rpx 0;
+        color: #FFFFFF;
+        background-image: linear-gradient(to right, #4B348F, #845CFA);
+      }
+    }
+  }
+
+</style>

pages_order/product/productDetail.vue

@@ -62,7 +62,7 @@
         <image class="icon" src="@/pages_order/static/product/comment.png" mode="widthFix"></image>
         <view>评价</view>
       </button>
-      <button class="flex btn btn-palin">加入购物车</button>
+      <button class="flex btn btn-palin" @click="onAddCart">加入购物车</button>
       <button class="flex btn btn-primary" @click="onBuy">立即购买</button>
     </view>
 
@@ -210,6 +210,9 @@
 
         this.onBuy()
       },
+      onAddCart(id) {
+				this.$store.commit('addCart', this.detail)
+      },
       onBuy() {
 
         const { count, options } = this.detail
@@ -223,7 +226,7 @@
 
         this.$refs.agreementPopup.open()
 
-        // this.jumpToCreateOrder()
+				this.$store.commit('createOrder', [this.detail])
       },
     },
   }

pages_order/report/nutritionProgram/index.vue

@@ -51,7 +51,7 @@
           class="flex btn btn-settle" 
           :class="[selectedCount ? '' : 'is-disabled']"
           :disabled="!selectedCount"
-          @click="onSettle"
+          @click="onBuy"
         >
           <text>结算</text>
           <text v-if="selectedCount">{{ `(${selectedCount}种)` }}</text>
@@ -176,21 +176,24 @@
     },
     methods: {
       onSelect(stepIdx, childIdx, selected) {
-        console.log('onSelect', stepIdx, childIdx, selected)
-
         this.list[stepIdx].children[childIdx].selected = selected
+      },
+      getSelectedList() {
+        return this.list.reduce((arr, step) => {
+          const selectedArr = step.children.filter(product => product.selected)
 
-        // todo
+          return arr.concat(selectedArr)
+        }, [])
       },
       onAddCart() {
-        console.log('onAddCart')
+        const selectedList = this.getSelectedList()
 
-        // todo
+				this.$store.commit('addCart', selectedList)
       },
-      onSettle() {
-        console.log('onSettle')
+      onBuy() {
+        const selectedList = this.getSelectedList()
 
-        // todo
+				this.$store.commit('createOrder', selectedList)
       },
     },
   }
@@ -284,6 +287,14 @@
   }
 }
 
+.tips {
+  font-family: PingFang SC;
+  font-weight: 400;
+  font-size: 18rpx;
+  line-height: 1.4;
+  color: #989898;
+}
+
 .card {
   & + & {
     margin-top: 32rpx;

store/store.js

@@ -11,7 +11,9 @@ const store = new Vuex.Store({
 		configList: {}, //配置列表
 		shop : false,//身份判断如果不需要，可以删除
 		userInfo : {}, //用户信息
-		payOrderProduct: [], //支付订单中的商品
+		payOrderProduct: [], //支付订单中的商品applyServiceProduct
+		applyServiceProduct: [], // 售后服务商品
+		addressInfo: null,
 	},
 	getters: {
 		// 角色 true为水洗店 false为酒店 ： 身份判断如果不需要，可以删除
@@ -104,10 +106,32 @@ const store = new Vuex.Store({
 				}
 			})
 		},
+		addCart(state, data) {
+			// todo: fetch
+
+			console.log('addCart', data)
+
+		},
+		setAddressInfo(state, data) {
+			state.addressInfo = data
+		},
 		// 设置支付订单中的商品
 		setPayOrderProduct(state, data) {
 			state.payOrderProduct = data
 		},
+		createOrder(state, data) {
+			
+			state.payOrderProduct = data
+
+			// todo: create order
+
+			uni.navigateTo({
+				url: '/pages_order/order/orderConfirm/index'
+			})
+		},
+		setApplyServiceProduct(state, data) {
+			state.applyServiceProduct = data
+		},
 	},
 	actions: {},
 })