feat: 更新

src/pages/profile/order/order-detail/index.vue

@@ -21,7 +21,7 @@
         </view>
 
         <view v-if="true" class="yiwancheng">
-          <text class="title">订单已完成</text>
+          <text class="title">订单已提交</text>
           <!-- <text class="title">订单进行中</text> -->
           <view style="width: 85px">
             <up-button size="small" color="#fd9a00" text="致电商家"></up-button>
@@ -111,12 +111,16 @@
 </template>
 
 <script setup>
-import { onMounted, reactive } from "vue";
+import { getOrderDetail } from "@/api/food";
 
 const cartItems = ref([]);
 const deliveryOrderDto = ref({});
 
-onMounted(async () => {
+onLoad(async (option) => {
+  if (option.id) {
+    const { data }  = await getOrderDetail({id: option.id})
+    return
+  }
   cartItems.value = await JSON.parse(uni.getStorageSync('cartItems') || '[]');
   deliveryOrderDto.value = await JSON.parse(uni.getStorageSync('deliveryOrderDto') || '{}');
 })

src/pages/profile/order/order-list/comps/Cell.vue

@@ -8,11 +8,11 @@
         height="36px"
         radius="10px"
       ></up-image>
-      <text class="name">美味的水果餐厅</text>
+      <text class="name">{{ itemData.shopName }}</text>
       <text class="status">已付款</text>
     </view>
     <up-line></up-line>
-    <view class="content">
+    <view class="content" @click="onDetail">
       <up-image
         class="img"
         src="https://www.xiaoyaotravel.com/api/admin/app/tourismProject/download?id=1843658873626431488&fieldName=tourismUrl&asImage=true&filename=b3cc4250ec214f9fa9c6828abd6ecf88.jpg"
@@ -20,10 +20,10 @@
         height="70px"
         radius="10px"
       ></up-image>
-      <text class="name">黄焖鸡+米饭+鹌鹑蛋黄焖鸡+米饭+鹌鹑蛋</text>
+      <text class="name ellipsis-text">{{ name }}</text>
       <view class="right">
-        <text>￥1.50</text>
-        <text>共18件</text>
+        <text>￥{{ itemData.payAmount }}</text>
+        <text>共{{ foodSum }}件</text>
       </view>
     </view>
     <view class="actions">
@@ -34,7 +34,29 @@
   </view>
 </template>
 
-<script setup></script>
+<script setup>
+const props = defineProps({
+  itemData: {
+    type: Object,
+    default: () => {},
+  },
+})
+
+const name = computed(() => {
+  const foodArray = props.itemData.itemList.map((item) => item.foodName)
+  return foodArray.join('+');
+})
+
+const foodSum = computed(() => {
+  return props.itemData.itemList.reduce((sum, item) => sum + item.number, 0)
+})
+
+const onDetail = () => {
+  uni.navigateTo({
+    url: `/pages/profile/order/order-detail/index?id=${props.itemData.id}`
+  });
+}
+</script>
 
 <style lang="scss" scoped>
 .cell {
@@ -97,5 +119,13 @@
     display: flex;
     justify-content: flex-end;
   }
+
+  .ellipsis-text {
+    display: -webkit-box;
+    text-overflow: ellipsis;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    -webkit-line-clamp: 3;
+  }
 }
 </style>

src/pages/profile/order/order-list/index.vue

@@ -22,9 +22,10 @@
       </view>
     </up-sticky>
 
-    <view class="list">
-      <Cell v-for="item in 5" :key="item"></Cell>
+    <view v-if="list.length" class="list">
+      <Cell v-for="item in list" :item-data="item" :key="item.id"></Cell>
     </view>
+    <Empty v-else-if="!list.length && !loading" />
   </view>
 </template>
 
@@ -33,21 +34,41 @@ import { reactive } from "vue";
 import Cell from "./comps/Cell.vue";
 import { getOrderList } from "@/api/food";
 
-
 const tabList = reactive([
-  {
-    name: "全部订单",
-  },
-  {
-    name: "待付款",
-  },
-  {
-    name: "已完成",
-  },
+  // {
+  //   name: "全部订单",
+  // },
+  // {
+  //   name: "待付款",
+  // },
+  // {
+  //   name: "已完成",
+  // },
 ]);
 
-onLoad(() => {
-  getOrderList({pageNum: 1, pageSize: 10})
+const list = ref([]);
+const loading = ref(true);
+const finished = ref(false);
+const searchQuery = reactive({
+  pageNum: 1,
+  pageSize: 10,
+});
+
+async function getList() {
+  const { data } = await getOrderList(searchQuery);
+  list.value = data.dataList;
+  if (list.value.length >= data.totalCount) {
+    finished.value = true;
+  }
+}
+
+function loadMore() {
+  searchQuery.pageNum++;
+  getList();
+}
+
+onLoad(async () => {
+  getList()
 })
 
 </script>