modify

src/component/order.vue

@@ -1,45 +1,47 @@
 <template>
     <view class="bg">
-        <view class="flex-s-between-m-8">
+        <view class="order-top">
-            <view class="flex-c-m-8"> 
+            <view class="header-name"> 
                 <image 
                   :src="groupLeader.avatar" 
                   mode="aspectFill" 
                   class="avatar"
                   @error="handleAvatarError(groupLeader)"
                 />
-                <text style="padding-left: 8px;">{{ groupLeader.nickname }}</text>
+                <view style="padding-left: 8px;">{{ groupLeader.nickname }}</view>
             </view>
             <view>{{ getStatus() }}</view>
         </view>
-        <view class="flex-c-m-8">
+        <view class="flex-s-between-m-8">
-            <image 
+            <view> 
-              v-for="(item,idx) in itemList"
+                <image 
-              :key="idx"
+                  v-for="(item,idx) in itemList"
-              class="item-img-h-50"
+                  :key="idx"
-              :src="item.img" 
+                  class="goods-img"
-              mode="aspectFill" 
+                  :src="item.img" 
-              @error="handleImageError(item)"
+                  mode="aspectFill" 
-            />
+                  @error="handleImageError(item)"
+                />
+            </view>
             <view>共计：￥{{ total }}</view>
         </view>
         <view class="flex-s-between-m-8">
-            <view v-if="type==='pickup'"> 
+            <view v-if="type==='pickup'" class="flex-s-between-m-8-w-400"> 
-                <view class="flex-c-m-8">
+                <view class="flex-c-8">
                     <uni-icons  type="location" size="30"></uni-icons>
                     <view class="text-ellipsis-w-120">{{ groupLeader.address }}</view>
                 </view>
                 <view>自行取货</view>
             </view>
-            <view v-else class="flex-c-m-8">
+            <view v-else class="express-m-8">
                 <uni-icons  type="paperplane-filled" size="30"></uni-icons>
                 <view>快递配送</view>
             </view>
-            <view v-if="pay_status==='pending' && order_status==='open'"> 
+            <view v-if="payStatus==='pending' && orderStatus==='open'" class="flex-c-8"> 
                 <button @click="payHandler">支付</button>
-                <button @click="cancelHandler">取消</button>
+                <button class="btn-l-8" @click="cancelHandler">取消</button>
             </view>
-            <view v-if="pay_status==='success' && express_status==='receiving' && order_status==='open'"> 
+            <view v-if="payStatus==='success' && expressStatus==='receiving' && orderStatus==='open'"> 
                 <button @click="getCodeHandler">获取取货码</button>
             </view>
         </view>
@@ -63,11 +65,11 @@ interface Goods {
 
 interface Props {
     id: String
-    order_status: 'open' | 'cancel' | 'close' | 'finish'
+    orderStatus: 'open' | 'cancel' | 'close' | 'finish'
     total:String
     type:'express' | 'pickup'
-    pay_status: 'pending' | 'failure' | 'success' | 'refunding' | 'refunded'
+    payStatus: 'pending' | 'failure' | 'success' | 'refunding' | 'refunded'
-    express_status: 'init' | 'pending' | 'receiving' | 'received' | 'merchant_receiving' | 'merchant_received'
+    expressStatus: 'init' | 'pending' | 'receiving' | 'received' | 'merchant_receiving' | 'merchant_received'
     groupLeader:GroupLeader
     itemList:Goods[]
 }
@@ -100,17 +102,17 @@ function getCodeHandler(id) {
 }
 
 function getStatus() {
-    if (props.order_status === 'cancel') {
+    if (props.orderStatus === 'cancel') {
         return '订单取消'
-    } else if (props.order_status === 'finish') {
+    } else if (props.orderStatus === 'finish') {
        return '订单完成'; 
-    }  else if (props.order_status === 'open') {
+    }  else if (props.orderStatus === 'open') {
         // 订单中间状态 判断支付状态
-        if (props.pay_status === 'pending') {
+        if (props.payStatus === 'pending') {
             return '待支付'
-        } else if (props.pay_status === 'success') {
+        } else if (props.payStatus === 'success') {
             // 支付完成判断物流状态
-            switch (props.express_status) {
+            switch (props.expressStatus) {
                 case 'init':
                     return '待发货';
                 case 'pending':
@@ -120,13 +122,13 @@ function getStatus() {
                 case 'received':
                     return '已收货';
             }
-        } else if (props.pay_status === 'refunding') {
+        } else if (props.payStatus === 'refunding') {
             return '退款中'
         }
-    } else if (props.order_status === 'close') {
+    } else if (props.orderStatus === 'close') {
-        if (props.pay_status === 'failure') {
+        if (props.payStatus === 'failure') {
             return '支付失败'
-        } else if (props.pay_status === 'refunded') {
+        } else if (props.payStatus === 'refunded') {
             return '已退款'
         }
     }
@@ -149,13 +151,54 @@ function getStatus() {
     margin: 8px;
 }
 
-.flex-c-m-8 {
+.flex-s-between-m-8-w-400 {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width:400rpx;
+    margin: 8px;
+}
+
+.flex-s-between-m-8-w-200 {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width:260rpx;
+    margin: 8px;
+}
+
+.flex-c-8 {
   display: flex;
   align-items: center;
   margin-left: 8rpx;
   margin-right: 8rpx;
-  margin-top: 20rpx;
+}
-  margin-bottom: 10rpx;
+
+.header-name {
+    display: flex;
+    align-items: center; 
+    width: 150rpx;
+}
+
+.order-top {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding-top:20rpx;
+    margin-left: 20rpx;    
+    margin-right: 20rpx;    
+}
+
+.express-m-8 {
+  display: flex;
+  align-items: center;
+  width:160rpx;
+  margin-left: 8rpx;
+  margin-right: 8rpx;
+}
+
+.btn-l-8 {
+   margin-left: 8rpx; 
 }
 
 .avatar {
@@ -164,4 +207,10 @@ function getStatus() {
   border-radius: 50%;
 }
 
+.goods-img {
+    margin: 8rpx;
+    width: 100rpx;
+    height: 100rpx;
+}
+
 </style>

src/main.js

@@ -2,12 +2,16 @@ import {
 	createSSRApp
 } from "vue";
 import App from "./App.vue";
-import GroupOrderComponent from "./component/grouporder.vue";
 import { setupInterceptors } from "@/utils/interceptors";
+import GroupOrderComponent from "./component/grouporder.vue";
+import OrderComponent from "@/component/order.vue";
+
 export function createApp() {
 	const app = createSSRApp(App);
 	app.use(setupInterceptors)
 	app.component('GroupOrderComponent',GroupOrderComponent)
+	app.component('OrderComponent',OrderComponent)
+	
 	return {
 		app,
 	};

src/pages/order/index.vue

@@ -8,11 +8,26 @@
         {{item.name}}
         </button> 
       </view>
-      
+      <scroll-view class="scroll-V" scroll-y>
+        <OrderComponent v-for="item in data" :key="item.id" 
+        :id="item.id"
+        :type="item.type"
+        :orderStatus="item.order_status"
+        :total="item.total"
+        :payStatus = "item.pay_status"
+        :itemList="item.item_list"
+        :groupLeader = "item.group_leader"
+        :expressStatus = "item.express_status"
+        @pay="paySubmit"
+        @cancel="cancelHandler"
+        @getClaimGoodsCode="getClaimGoodsCodeHandler"
+        ></OrderComponent>
+      </scroll-view>
     </view>
 </template>
 
 <script>
+
 export default {
   data() {
     return {
@@ -36,6 +51,194 @@ export default {
           name:"售后"
         }
       ],
+      data:[
+        {
+          id:1,
+          order_status:'open',
+          total:'64',
+          type:'express',
+          pay_status:'pending',
+          express_status:'init',
+          group_leader:{
+            id:1,
+            avatar:"aaa",
+            nickname:'测试1',
+            address:'自提点地址1'
+          },
+          item_list:[
+            {
+              id:1,
+              img:"b",
+              price:"10"
+            },
+            {
+              id:2,
+              img:"b",
+              price:"30"
+            },
+            {
+              id:2,
+              img:"b",
+              price:"24"
+            }
+          ]
+        },
+        {
+          id:2,
+          order_status:'open',
+          total:'64',
+          type:'pickup',
+          pay_status:'success',
+          express_status:'receiving',
+          group_leader:{
+            id:1,
+            avatar:"aaa",
+            nickname:'测试1',
+            address:'自提点地址1'
+          },
+          item_list:[
+            {
+              id:1,
+              img:"b",
+              price:"10"
+            },
+            {
+              id:2,
+              img:"b",
+              price:"30"
+            },
+            {
+              id:2,
+              img:"b",
+              price:"24"
+            }
+          ]
+        },
+        {
+          id:3,
+          order_status:'cancel',
+          total:'64',
+          type:'pickup',
+          pay_status:'pending',
+          express_status:'init',
+          group_leader:{
+            id:1,
+            avatar:"aaa",
+            nickname:'测试1',
+            address:'自提点地址1'
+          },
+          item_list:[
+            {
+              id:1,
+              img:"b",
+              price:"10"
+            },
+            {
+              id:2,
+              img:"b",
+              price:"30"
+            },
+            {
+              id:2,
+              img:"b",
+              price:"24"
+            }
+          ]
+        },
+        {
+          id:4,
+          order_status:'close',
+          total:'64',
+          type:'pickup',
+          pay_status:'refunding',
+          express_status:'init',
+          group_leader:{
+            id:1,
+            avatar:"aaa",
+            nickname:'测试1',
+            address:'自提点地址1'
+          },
+          item_list:[
+            {
+              id:1,
+              img:"b",
+              price:"10"
+            },
+            {
+              id:2,
+              img:"b",
+              price:"30"
+            },
+            {
+              id:2,
+              img:"b",
+              price:"24"
+            }
+          ]
+        },
+        {
+          id:5,
+          order_status:'close',
+          total:'64',
+          type:'express',
+          pay_status:'refunded',
+          express_status:'init',
+          group_leader:{
+            id:1,
+            avatar:"aaa",
+            nickname:'测试1',
+            address:'自提点地址1'
+          },
+          item_list:[
+            {
+              id:1,
+              img:"b",
+              price:"10"
+            },
+            {
+              id:2,
+              img:"b",
+              price:"30"
+            },
+            {
+              id:2,
+              img:"b",
+              price:"24"
+            }
+          ]
+        },
+        {
+          id:6,
+          order_status:'finish',
+          total:'64',
+          type:'express',
+          pay_status:'success',
+          express_status:'received',
+          group_leader:{
+            id:1,
+            avatar:"aaa",
+            nickname:'测试1',
+            address:'自提点地址1'
+          },
+          item_list:[
+            {
+              id:1,
+              img:"b",
+              price:"10"
+            },
+            {
+              id:2,
+              img:"b",
+              price:"30"
+            },
+            {
+              id:2,
+              img:"b",
+              price:"24"
+            }
+          ]
+        },
+      ]
     }
   },
   onLoad() {
@@ -46,6 +249,15 @@ export default {
   methods: {
     changeCategory(id) {
       this.selectId = id
+    },
+    paySubmit(id) {
+      console.log('pay clicked',id)
+    },
+    cancelHandler(id) {
+      console.log('cancel clicked',id)
+    },
+    getClaimGoodsCodeHandler(id) {
+      console.log('getClaimGoodsCode clicked',id)
     }
   },
 }
@@ -75,4 +287,10 @@ export default {
 	line-height: 60rpx;
 	font-size: 24rpx;
 }
+
+.scroll-V {
+  position: fixed;
+  top:150rpx;
+  height:80vh;
+}
 </style>