订单搜索

src/pages/order/order.vue

 <template>
   <view class="container">
-    <Header title="全部订单"></Header>
-    <view class="tabs">
-      <wd-tabs v-model="tab" animated :lineWidth="38" :lineHeight="3" @change="handleChange">
+    <!--    顶部搜索框-->
+    <view class="top">
+      <wd-icon
+        class="icon"
+        name="thin-arrow-left"
+        color="#000"
+        size="32rpx"
+        @click="handleBack"
+      ></wd-icon>
+      <view class="searchBox">
+        <view class="search">
+          <wd-icon name="search" size="30rpx" color="#999"></wd-icon>
+          <input
+            type="text"
+            :value="catalog.keyword"
+            class="text"
+            placeholder="搜索我的订单"
+            placeholder-style="font-size:28rpx;"
+            @confirm="handleSearch"
+            @input="handleInput"
+            confirm-type="搜索"
+          />
+        </view>
+        <wd-icon
+          name="error-fill"
+          size="30rpx"
+          color="#999"
+          v-if="catalog.keyword"
+          @tap="handleClear"
+        ></wd-icon>
+      </view>
+    </view>
+    <view class="tabs" v-if="orderDic">
+      <wd-tabs v-model="tab" animated :lineWidth="38" :lineHeight="3" @change="handleChange" sticky>
         <block v-for="item in tabs" :key="item.value">
           <wd-tab :title="`${item.name}`" :name="item.value">
             <view class="content" v-if="dataList.length > 0">
               <view class="box" v-for="(item, index) in dataList" :key="index">
-                <view class="header" @click="toShopDetail(item)">
+                <view class="header" @click="handleDetail(item)">
                   <view class="left">
-                    <image src="@/static/order/shop.png" />
+                    <text
+                      class="icon"
+                      :style="{ 'background-color': iconList[item.orderType].color }"
+                    >
+                      {{ iconList[item.orderType].text }}
+                    </text>
+                    <!-- <image src="@/static/order/shop.png" /> -->
                     <view class="title">{{ item.shopName }}</view>
                   </view>
                   <view class="right">
-                    <span class="status">{{ stateList[item.status].label }}</span>
+                    <span class="status">{{ stateList[item.orderType][item.status].label }}</span>
                     <wd-count-down
                       :time="item.countDown"
                       :format="format"
@@ -23,7 +60,7 @@
                   </view>
                 </view>
 
-                <view class="info" @click="handleDetail(item.orderNumber)">
+                <view class="info" @click="handleDetail(item)">
                   <image mode="aspectFill" :src="fileDomain + item.orderItems[0].pic" />
                   <view class="info-box">
                     <view class="text">下单时间：{{ item.createTime.slice(0, 16) }}</view>
@@ -122,7 +159,7 @@
 </template>
 
 <script setup>
-import Header from './components/Header/index.vue';
+// import Header from './components/Header/index.vue';
 import Payment from './components/Payment/index.vue';
 import {
   getOrderList,
@@ -132,19 +169,32 @@ import {
   getOrderDetail,
 } from '@/api/order';
 import { getOrderDic } from '@/utils/orderDic';
+import { orderStatus, signIn } from '@/utils/signIn';
+
+import testJson from '@/static/json/test.json';
+import { getTokenUser } from '@/api/index';
+import { getToken } from '@/utils/auth';
 const fileDomain = import.meta.env.VITE_APP_IMG_URL;
 
-const stateList = ref();
-onLoad((options) => {
-  const orderDic = getOrderDic();
-  stateList.value = orderDic.reduce((obj, item) => {
-    obj[item.baseStatus] = item;
-    return obj;
-  }, {});
+const stateList = ref({});
+const orderDic = ref();
+onLoad(async (options) => {
+  // await signIn();
+  if (!getToken()) await signIn2();
+  if (!getOrderDic()) await orderStatus();
+  orderDic.value = getOrderDic();
+  orderDic.value.baseOrder[0].value = 'all';
+  for (const key in orderDic.value) {
+    const data = orderDic.value[key].reduce((obj, item) => {
+      obj[item.baseStatus] = item;
+      return obj;
+    }, {});
+    stateList.value[key] = data;
+  }
   if (options.status) {
     tab.value = options.status;
   }
-  getList();
+  await getList();
 });
 
 const tabs = ref([
@@ -164,10 +214,10 @@ const tabs = ref([
     name: '待评价',
     value: 'not_eval',
   },
-  {
-    name: '已完成',
-    value: 'complete',
-  },
+  // {
+  //   name: '已完成',
+  //   value: 'complete',
+  // },
   {
     name: '退款/售后',
     value: 'after_sales',
@@ -175,6 +225,21 @@ const tabs = ref([
 ]);
 const tab = ref('all');
 
+const iconList = ref({
+  logistics: {
+    color: '#FF0909',
+    text: '物流',
+  },
+  store: {
+    color: '#FF4C0D',
+    text: '到店',
+  },
+  takeaway: {
+    color: '#FFB023',
+    text: '外卖',
+  },
+});
+
 onShow(() => {
   if (pendingPaymentOrder.value) {
     // 查询订单状态决定是否支付
@@ -292,6 +357,26 @@ const initDataList = () => {
   });
 };
 
+/**
+ * 搜索订单
+ */
+const handleSearch = (e) => {
+  catalog.keyword = e.detail.value;
+  initDataList().then(() => {
+    getList();
+  });
+};
+
+const handleInput = (e) => {
+  catalog.keyword = e.detail.value;
+};
+
+const handleClear = () => {
+  catalog.keyword = '';
+  initDataList().then(() => {
+    getList();
+  });
+};
 /**
  * 删除订单
  * @param {*} orderNumber
@@ -415,11 +500,16 @@ const onFinish = async (orderNumber) => {
   });
 };
 
-const handleDetail = (id) => {
+const handleDetail = (item) => {
   // 清空查询待付款状态
   pendingPaymentOrder.value = null;
+  if (item.orderType === 'logistics') {
+    uni.navigateTo({
+      url: `pages/assistingAgriculture/order/detail?orderNumber=${item.orderNumber}`,
+    });
+  }
   uni.navigateTo({
-    url: `/pages/order/detail?orderNumber=${id}`,
+    url: `/pages/order/detail?orderNumber=${item.orderNumber}`,
   });
 };
 
@@ -489,6 +579,25 @@ const toShopDetail = (item) => {
     url: `/pages/shop/shop?shopId=${item.shopId}`,
   });
 };
+
+// 登录
+const signIn2 = () => {
+  xma.showLoading({
+    title: '加载中',
+    mask: true,
+  });
+  return getTokenUser(testJson).then((res) => {
+    const token = res.data.access_token;
+    const userInfo = res.data.user_info;
+    xma.setStorageSync('Authorization', token);
+    xma.setStorageSync('userInfo', userInfo);
+    console.log('登录...');
+  });
+};
+
+const handleBack = () => {
+  uni.navigateBack();
+};
 </script>
 
 <style scoped lang="scss">
@@ -501,9 +610,9 @@ page {
   margin: 0 auto;
 
   .tabs {
-    padding-top: 88rpx;
+    padding-top: 108rpx;
 
-    .wd-tabs {
+    &:deep(.wd-tabs) {
       background-color: #f5f5f5;
     }
 
@@ -518,12 +627,52 @@ page {
   }
 }
 
+.top {
+  height: 108rpx;
+  position: fixed;
+  width: 100%;
+  z-index: 999;
+  display: flex;
+  background-color: #f5f5f5;
+  margin: 0 auto;
+  align-items: center;
+  padding: 0 30rpx;
+  gap: 14rpx;
+
+  .searchBox {
+    width: 492rpx;
+    height: 66rpx;
+    background: #f3f3f3;
+    border-radius: 33rpx;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0rpx 28rpx;
+
+    background-color: #fff;
+
+    .search {
+      gap: 10rpx;
+      display: flex;
+      align-items: center;
+      .text {
+        margin-left: 10rpx;
+        font-family:
+          PingFang SC,
+          PingFang SC;
+        font-weight: 500;
+        font-size: 28rpx;
+      }
+    }
+  }
+}
+
 .content {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  padding: 20rpx;
+  padding: 10rpx 20rpx 20rpx;
   gap: 24rpx;
 
   .box {
@@ -544,7 +693,7 @@ page {
       .left {
         display: flex;
         align-items: center;
-        gap: 6rpx;
+        gap: 12rpx;
         font-weight: bold;
 
         image {
@@ -552,6 +701,15 @@ page {
           width: 38rpx;
         }
 
+        .icon {
+          font-family: PingFang SC;
+          font-weight: 500;
+          font-size: 24rpx;
+          color: #ffffff;
+          border-radius: 8rpx;
+          padding: 2rpx 8rpx;
+        }
+
         .title {
           color: #333;
           font-size: 32rpx;