feat: 自定义标题栏，新增载重

guzijian
1 parent eca2e4d3
Showing 13 changed files with 453 additions and 138 deletions
garbage-removal/src/apis/order.js
garbage-removal/src/pages.json
garbage-removal/src/pages/home/clean/index.vue
garbage-removal/src/pages/order/driver-home/index.vue
garbage-removal/src/pages/order/handler-home/index.vue
garbage-removal/src/pages/order/handler-home/scan-detail/index.vue
garbage-removal/src/pages/order/handler-home/swiper-list-item/index.vue
garbage-removal/src/pages/order/handler-home/transport-detail/index.vue
garbage-removal/src/pages/order/index.vue
garbage-removal/src/pages/order/other-home/index.vue
garbage-removal/src/pages/order/other-home/user-message/index.vue
garbage-removal/src/pages/wode/choose/index.vue
garbage-removal/src/pages/wode/index.vue
@@ -98,3 +98,14 @@ export async function scanDetail(askId) {
 export async function createHandlerQrCode(orderId) {
   return await request.get(`/order/handler/qrCode/${orderId}`);
 }
+
+export async function queryOrderMessageCount() {
+  return await request.get(`/order/query/message/count`);
+}
+
+export async function queryOrderMessageList(pageNo,pageSize) {
+  return await request.get(`/order/query/message/list/${pageNo}/${pageSize}`);
+}
+export async function readMessage(data) {
+  return await request.put(`/order/read/message`,data);
+}
@@ -118,6 +118,14 @@
 				"navigationBarBackgroundColor": "#19a97c",
 				"enablePullDownRefresh": false
 			}
+		},{
+			"path": "pages/order/other-home/user-message/index",
+			"style": {
+				"navigationBarTitleText": "消息列表",
+				"navigationBarTextStyle": "white",
+				"navigationBarBackgroundColor": "#19a97c",
+				"enablePullDownRefresh": false
+			}
 		},
 		{
 			"path": "pages/home/clean/company-detail/index",
@@ -160,9 +168,8 @@
 		},{
 			"path": "pages/order/index",
 			"style": {
-				"navigationBarTitleText": "订单详情",
-				"navigationBarTextStyle":"white",
-				"navigationBarBackgroundColor":"#19a97c",
+				"navigationBarTitleText": "",
+				"navigationStyle":"custom",
 				"enablePullDownRefresh": false
 			}
 		},{
@@ -70,15 +70,6 @@
                 type="text" placeholder-class="line" readonly />
             </view>
           </view>
-          <!-- <view v-if="paramFrom.carType" class="company-clean-container-car-main-content-type">
-            <view class="company-clean-container-car-main-content-type-price-area">
-              <text style="color: red;">*</text>协商车辆:
-            </view>
-            <view class="company-clean-container-car-main-content-number-button">
-              <u-number-box :min="0" :max="9999" integer buttonSize="46" :inputWidth="100"
-                v-model="garCarInfoList[paramFrom.carType].garOrderCarNumber"></u-number-box>
-            </view>
-          </view> -->
           <view class="company-clean-container-car-main-content">
             <view v-if="paramFrom.carType" class="company-clean-container-car-main-content-type">
               <view class="company-clean-container-car-main-content-type-price-area">
@@ -117,7 +108,7 @@
         </view>
         <view class="company-clean-container-site-image-info-img">
           <u-upload width="200" height="150" :fileList="fileList" @afterRead="afterRead" :deletable="deletable"
-            @delete="deletePic" name="3" multiple :maxCount="10" :previewFullImage="true"></u-upload>
+            @delete="deletePic" name="10" multiple :maxCount="10" :previewFullImage="true"></u-upload>
         </view>
         <view class="company-in-car-store-box">
           <view class="company-in-car-store-box-content"
 <template>
-  <z-paging-swiper>
-    <template v-slot:top>
-      <u-tabs lineWidth="40" lineColor="#ffffff" lineHeight="6"
-        :activeStyle="{ 'color': '#ffffff', 'font-weight': 'bolder' }" :inactiveStyle="{ color: '#ffffff' }"
-        ref="uTabsElement" :list="list" :current="current" @change="tabsChange" :scrollable="false"></u-tabs>
-    </template>
-    <swiper class="swiper" :current="swiperCurrent" @translation="translation" @animationfinish="animationfinish">
-      <swiper-item class="swiper-item" v-for="(item, index) in list" :key="index">
-        <swiper-list-item :tabIndex="index" :currentIndex="swiperCurrent"></swiper-list-item>
-      </swiper-item>
-    </swiper>
-  </z-paging-swiper>
+  <view class="order-container">
+    <z-paging-swiper>
+      <template v-slot:top>
+        <view class="header-box" :style="{
+          'height': lightHeight, 'line-height': lightHeight,
+          'padding-top': topMargin
+        }">
+          <view class="header-box-title">
+            {{ title }}
+          </view>
+        </view>
+        <u-tabs lineWidth="40" lineColor="#ffffff" lineHeight="6"
+          :activeStyle="{ 'color': '#ffffff', 'font-weight': 'bolder' }" :inactiveStyle="{ color: '#ffffff' }"
+          ref="uTabsElement" :list="list" :current="current" @change="tabsChange" :scrollable="false"></u-tabs>
+      </template>
+      <swiper class="swiper" :current="swiperCurrent" @translation="translation" @animationfinish="animationfinish">
+        <swiper-item class="swiper-item" v-for="(item, index) in list" :key="index">
+          <swiper-list-item :tabIndex="index" :currentIndex="swiperCurrent"></swiper-list-item>
+        </swiper-item>
+      </swiper>
+    </z-paging-swiper>
+  </view>
 </template>
 <script setup>
+import { onLoad } from '@dcloudio/uni-app';
 import { ref } from 'vue';
 import swiperListItem from './swiper-list-item/index.vue';
 const list = ref([{ name: '待清运' }, { name: '清运中' }, { name: '全部' }, { name: '已完成' }])
 const current = ref(0);
 const swiperCurrent = ref(0)
 const uTabsElement = ref()
+const topMargin = ref()
+const lightHeight = ref()
+const title = ref('订单列表')
 const tabsChange = (el) => {
   swiperCurrent.value = Number(el.index)
 }
@@ -29,10 +43,46 @@ const animationfinish = (e) =&gt; {
 const translation = (e) => {
   uTabsElement.value.setDx(e.detail.dx)
 }
+onLoad(() => {
+  try {
+    const { height, top } = uni.getMenuButtonBoundingClientRect();
+    topMargin.value = top + 'px';
+    lightHeight.value = height + 'px';
+  } catch (error) {
+    topMargin.value = '60rpx';
+    lightHeight.value = '80rpx'
+    console.log('There is no menu because the current app is not a small program');
+  }
+})
 </script>
 <style lang="scss" scoped>
-.swiper {
+.order-container {
   height: 100%;
-  background: linear-gradient(to bottom, #19a97c, $u-bg-color, $u-bg-color, $u-bg-color, $u-bg-color, $u-bg-color, $u-bg-color);
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  background: #19a97c;
+  box-sizing: border-box;
+
+  .header-box {
+    width: 100%;
+    color: white;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    /* 分散对齐，自动调整间距 */
+
+    .header-box-title {
+      font-size: 35rpx;
+      font-weight: bold;
+      text-align: center;
+    }
+
+  }
+
+  .swiper {
+    height: 100%;
+    background: linear-gradient(to bottom, #19a97c, $u-bg-color, $u-bg-color, $u-bg-color, $u-bg-color, $u-bg-color, $u-bg-color);
+  }
 }
 </style>
 <template>
-  <z-paging-swiper>
-    <template v-slot:top>
-      <u-tabs lineWidth="40" lineColor="#ffffff" lineHeight="6"
-        :activeStyle="{ 'color': '#ffffff', 'font-weight': 'bolder' }" :inactiveStyle="{ color: '#ffffff' }"
-        ref="uTabsElement" :list="list" :current="current" @change="tabsChange" :scrollable="false"></u-tabs>
-    </template>
-    <swiper class="swiper" :current="swiperCurrent" @translation="translation" @animationfinish="animationfinish">
-      <swiper-item class="swiper-item" v-for="(item, index) in list" :key="index">
-        <swiper-list-item :tabIndex="index" :currentIndex="swiperCurrent"></swiper-list-item>
-      </swiper-item>
-    </swiper>
-  </z-paging-swiper>
+  <view class="order-container">
+    <z-paging-swiper>
+      <template v-slot:top>
+        <view class="header-box" :style="{
+          'height': lightHeight, 'line-height': lightHeight,
+          'padding-top': topMargin
+        }
+          ">
+          <view class="header-box-title">
+            {{ title }}
+          </view>
+        </view>
+        <u-tabs lineWidth="40" lineColor="#ffffff" lineHeight="6"
+          :activeStyle="{ 'color': '#ffffff', 'font-weight': 'bolder' }" :inactiveStyle="{ color: '#ffffff' }"
+          ref="uTabsElement" :list="list" :current="current" @change="tabsChange" :scrollable="false"></u-tabs>
+      </template>
+      <swiper class="swiper" :current="swiperCurrent" @translation="translation" @animationfinish="animationfinish">
+        <swiper-item class="swiper-item" v-for="( item, index ) in  list " :key="index">
+          <swiper-list-item :tabIndex="index" :currentIndex="swiperCurrent"></swiper-list-item>
+        </swiper-item>
+      </swiper>
+    </z-paging-swiper>
+
+  </view>
   <view class="scan-box">
     <view class="scan-btn">
       <view class="scan-icon">
@@ -22,74 +34,104 @@
 <script setup>
 import { checkCode } from '@/apis/order.js';
+import { onLoad } from '@dcloudio/uni-app';
 import { ref } from 'vue';
 import swiperListItem from './swiper-list-item/index.vue';
 const list = ref([{ name: '处理中' }, { name: '已完成' }])
 const current = ref(0);
 const swiperCurrent = ref(0);
 const uTabsElement = ref();
-uni.setNavigationBarTitle({
-  title: "处置场所"
-})
+const title = ref('处置场所');
+const topMargin = ref();
+const lightHeight = ref();
 const tabsChange = (el) => {
   swiperCurrent.value = Number(el.index)
 }
+
 const animationfinish = (e) => {
   current.value = e.detail.current
   swiperCurrent.value = e.detail.current
 }
+
 const translation = (e) => {
   uTabsElement.value.setDx(e.detail.dx)
 }
+
 const handleScan = () => {
-  // 调用uniapi开启二维码扫描
-  // 允许从相机和相册扫码
-  checkCode("1789622015702335490,1730466747975798786,956117").then(res => {
-    console.log(res);
-    if (res.data.code == 200) {
-      uni.$u.route({
-        url: `pages/order/handler-home/scan-detail/index`,
-        params: {
-          data: encodeURIComponent(JSON.stringify(res.data.data))
+  uni.scanCode({
+    success: function (res) {
+      console.log('条码类型：' + res.scanType);
+      console.log('条码内容：' + res.result);
+      try {
+        if (res.scanType == "QR_CODE") {
+          checkCode(res.result).then(res => {
+            console.log(res);
+            if (res.data.code == 200) {
+              uni.$u.route({
+                url: `pages/order/handler-home/scan-detail/index`,
+                params: {
+                  data: encodeURIComponent(JSON.stringify(res.data.data))
+                }
+              })
+              return
+            }
+            uni.$u.toast(res.data.msg);
+          })
         }
-      })
-      return
+      } catch (error) {
+        uni.$u.toast("无法确认当前二维码趟次，请扫描正在进行的运输趟次");
+      }
     }
-    uni.$u.toast(res.data.msg);
-  })
-  // uni.scanCode({
-  //   success: function (res) {
-  //     console.log('条码类型：' + res.scanType);
-  //     console.log('条码内容：' + res.result);
-  //     try {
-  //       if (res.scanType == "QR_CODE") {
-  //         checkCode(res.result).then(res => {
-  //           console.log(res);
-  //           if (res.data.code == 200) {
-  //             uni.$u.route({
-  //               url: `pages/order/handler-home/scan-detail/index`,
-  //               params: {
-  //                 data: encodeURIComponent(JSON.stringify(res.data.data))
-  //               }
-  //             })
-  //             return
-  //           }
-  //           uni.$u.toast(res.data.msg);
-  //         })
-  //       }
-  //     } catch (error) {
-  //       uni.$u.toast("无法确认当前二维码趟次，请扫描正在进行的运输趟次");
-  //     }
-
-  //   }
-  // });
-
+  });
 }
+
+
+onLoad(() => {
+  try {
+    const { height, top } = uni.getMenuButtonBoundingClientRect();
+    topMargin.value = top + 'px';
+    lightHeight.value = height + 'px';
+  } catch (error) {
+    topMargin.value = '60rpx';
+    lightHeight.value = '60rpx'
+    console.log('There is no menu because the current app is not a small program');
+  }
+})
 </script>
 <style lang="scss" scoped>
-.swiper {
+.order-container {
+  width: 100%;
   height: 100%;
-  background: linear-gradient(to bottom, #19a97c, $u-bg-color, $u-bg-color, $u-bg-color, $u-bg-color, $u-bg-color, $u-bg-color);
+  background: #19a97c;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+
+  .header-box {
+    width: 100%;
+    color: white;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    .header-box-title {
+      font-size: 35rpx;
+      font-weight: bold;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+
+  }
+
+
+  .swiper {
+    height: 100%;
+    // height: 300px;
+    background: linear-gradient(to bottom, #19a97c, $u-bg-color, $u-bg-color, $u-bg-color, $u-bg-color, $u-bg-color, $u-bg-color);
+  }
+
+
 }
 .scan-box {
@@ -58,19 +58,27 @@
           {{ details.garHandlerCarCode }}
         </view>
       </view>
+      <view class="scan-car-num">
+        <view class="scan-car-num-label">
+          车辆载重
+        </view>
+        <view class="scan-car-num-content">
+          <up-input placeholder="单位吨 1.5 标识1.5吨" border="surround" v-model="details.garCarryingWeight"
+            @change="handlerInputChange"></up-input>
+        </view>
+      </view>
       <view class="scan-upload-fill-image-box">
         <view class="scan-upload-fill-image-label">
           <view>
             全景照片
           </view>
           <view v-if="isDeletable">
-            {{ fileList.length }}/3
+            {{ fileList.length }}/{{ maxCount }}
           </view>
         </view>
-        <view class="scan-upload-fill-image-btn">
-          <u-upload :deletable="isDeletable" :fileList="fileList" @afterRead="afterRead" @delete="deletePic" name="3"
-            multiple :maxCount="isDeletable ? 3 : fileList.length" :previewFullImage="true" width="200"
-            height="150"></u-upload>
+        <view class="scan-upload-fill-image-btn" v-if="maxCount">
+          <u-upload width="200" height="150" :deletable="isDeletable" :fileList="fileList" @afterRead="afterRead"
+            @delete="deletePic" name="3" multiple :maxCount="maxCount" :previewFullImage="true"></u-upload>
         </view>
       </view>
     </view>
@@ -86,10 +94,11 @@
 import { uploadFilePromise } from '@/apis/common.js';
 import { askTransport, scanDetail } from '@/apis/order.js';
 import { onLoad } from '@dcloudio/uni-app';
-import { ref } from 'vue';
-const details = ref({})
-const fileList = ref([])
-const isDeletable = ref(false)
+import { computed, ref } from 'vue';
+const details = ref({});
+const fileList = ref([]);
+const isDeletable = ref(false);
+const maxCount = computed(() => isDeletable.value ? 3 : fileList.value.length);
 // 删除图片
 const deletePic = (event) => {
   fileList.value.splice(event.index, 1);
@@ -121,7 +130,9 @@ const afterRead = async (event) =&gt; {
     fileListLen++;
   }
 };
-
+const handlerInputChange = (val) => {
+  console.log(val);
+}
 const handlerSubmit = async () => {
   // 校验参数
   let params = {
@@ -140,9 +151,9 @@ const handlerSubmit = async () =&gt; {
       uni.$u.toast("当前趟次记录失败")
     })
     // 返回上级
-    // uni.navigateBack({
-    //   delta: 1
-    // })
+    uni.navigateBack({
+      delta: 1
+    });
   }
 }
@@ -170,21 +181,21 @@ const validateImage = (fillImageList) =&gt; {
     for (let index = 0; index < fillImageList.length; index++) {
       const str = fillImageList[index];
       if (!str.startsWith("/profile/upload")) {
-        uni.$u.toast("请等待图片上传~")
+        uni.$u.toast("请等待图片上传~");
         return false;
       }
     }
     return true;
   }
-  uni.$u.toast("请上传图片~")
+  uni.$u.toast("请上传图片~");
   return false;
 }
 onLoad((options) => {
   if (options.data) {
-    details.value = JSON.parse(decodeURIComponent(options.data))
-    isDeletable.value = true
-    isNew.value = true
+    details.value = JSON.parse(decodeURIComponent(options.data));
+    isDeletable.value = true;
+    isNew.value = true;
   }
   if (options.garAskId) {
     // TODO query
@@ -285,9 +296,7 @@ $l-h-8: 80rpx;
         justify-content: space-between;
       }
-      .scan-upload-fill-image-btn {
-        u-upload {}
-      }
+      .scan-upload-fill-image-btn {}
     }
   }
 <template>
   <view class="content-container">
-    <z-paging ref="paging" :fixed="false" v-model="dataList" :auto="false" @query="queryList">
+    <z-paging ref="paging" :fixed="false" v-model="dataList" height="100%" :auto="false" @query="queryList">
       <empty-view slot:empty></empty-view>
       <view class="page-box">
         <view class="order" v-for="(item, index) in  dataList" :key="index">
@@ -53,9 +53,18 @@
               <up-image :show-loading="true" :src="item.fillImage" width="80rpx" height="80rpx"></up-image>
             </view>
             <view style="display: flex;align-items: center;width: 100%;justify-content: center;">
-              <text style=" transform: rotateY(180deg);">
-                <up-icon name="car-fill" size="40" color="#19a97c"></up-icon></text>
-              <text style="margin-left:15rpx;font-size: 25rpx;">{{ item.garHandlerCarCode }}</text>
+              <view style="display: flex;justify-content: center;align-items: center;font-size: 25rpx;">
+                <view style="margin-right: 4rpx;">
+                  载重
+                </view>
+                <view>{{ item.garCarryingWeight }}</view>
+              </view>
+            </view>
+            <view style="display: flex;align-items: center;width: 100%;justify-content: center;">
+              <view style=" transform: rotateY(180deg);">
+                <up-icon name="car-fill" size="40" color="#19a97c"></up-icon>
+              </view>
+              <view style="margin-left:15rpx;font-size: 25rpx;">{{ item.garHandlerCarCode }}</view>
             </view>
             <view style="display: flex; align-items: center;width: 150rpx; justify-content: flex-end;"
               @click="goTransportDetail(item)">
@@ -16,6 +16,11 @@ const userType = computed(() =&gt; mainStore.userType)
 console.log(userType.value);
 </script>
 <style lang="scss" scoped>
+.container {
+  width: 100%;
+  height: 100%;
+}
+
 ::v-deep .u-tabs__wrapper__scroll-view {
   background-color: #19a97c;
 }
 <template>
-  <z-paging-swiper>
-    <template v-slot:top>
-      <u-tabs lineWidth="40" lineColor="#ffffff" lineHeight="6"
-        :activeStyle="{ 'color': '#ffffff', 'font-weight': 'bolder' }" :inactiveStyle="{ color: '#ffffff' }"
-        ref="uTabsElement" :list="list" :current="current" @change="tabsChange" :scrollable="false"></u-tabs>
-    </template>
-    <swiper class="swiper" :current="swiperCurrent" @translation="translation" @animationfinish="animationfinish">
-      <swiper-item class="swiper-item" v-for="(item, index) in list" :key="index">
-        <swiper-list-item :tabIndex="index" :currentIndex="swiperCurrent"></swiper-list-item>
-      </swiper-item>
-    </swiper>
-  </z-paging-swiper>
+  <view class="order-container">
+    <z-paging-swiper>
+      <template v-slot:top>
+        <view class="header-box" :style="{
+          'height': lightHeight, 'line-height': lightHeight,
+          'padding-top': topMargin
+        }
+          ">
+          <view class="header-box-left-message" v-if="userType == '用户'" @click="handlerMessageClick">
+            <u-icon name="bell-fill" size="32" color="#ffffff" @click="goBack"></u-icon>
+            <up-badge :type="type" max="99" :value="messageCount"></up-badge>
+          </view>
+          <view class="header-box-left-message" v-else>
+            &nbsp;
+          </view>
+          <view class="header-box-title">
+            {{ title }}
+          </view>
+        </view>
+        <u-tabs lineWidth=" 40" lineColor="#ffffff" lineHeight="6"
+          :activeStyle="{ 'color': '#ffffff', 'font-weight': 'bolder' }" :inactiveStyle="{ color: '#ffffff' }"
+          ref="uTabsElement" :list="list" :current="current" @change="tabsChange" :scrollable="false"></u-tabs>
+      </template>
+      <swiper class="swiper" :current="swiperCurrent" @translation="translation" @animationfinish="animationfinish">
+        <swiper-item class="swiper-item" v-for="( item, index ) in  list " :key="index">
+          <swiper-list-item :tabIndex="index" :currentIndex="swiperCurrent"></swiper-list-item>
+        </swiper-item>
+      </swiper>
+    </z-paging-swiper>
+  </view>
+
 </template>
 <script setup>
-import { ref } from 'vue';
+import { queryOrderMessageCount } from '@/apis/order.js';
+import { useMainStore } from '@/stores/index.js';
+import { onLoad, onShow } from '@dcloudio/uni-app';
+import { computed, ref } from 'vue';
 import swiperListItem from './swiper-list-item/index.vue';
+const store = useMainStore();
 const list = ref([{ name: '待清运' }, { name: '清运中' }, { name: '全部' }, { name: '已完成' }])
 const current = ref(0);
+const userType = computed(() => store.userType)
 const swiperCurrent = ref(0)
 const uTabsElement = ref()
+const topMargin = ref()
+const lightHeight = ref()
+const messageCount = ref(0)
+const title = ref("订单列表")
 const tabsChange = (el) => {
   swiperCurrent.value = Number(el.index)
 }
@@ -29,10 +57,67 @@ const animationfinish = (e) =&gt; {
 const translation = (e) => {
   uTabsElement.value.setDx(e.detail.dx)
 }
+const handlerMessageClick = () => {
+  uni.$u.route("pages/order/other-home/user-message/index")
+}
+onLoad(() => {
+  try {
+    const { height, top } = uni.getMenuButtonBoundingClientRect();
+    topMargin.value = top + "px";
+    lightHeight.value = height + 'px';
+  } catch (error) {
+    topMargin.value = "60rpx";
+    lightHeight.value = "60rpx"
+    console.log("There is no menu because the current app is not a small program");
+  }
+})
+onShow(() => {
+  if (userType.value == '用户') {
+    queryOrderMessageCount().then(res => {
+      messageCount.value = res.data.data
+    })
+  }
+})
 </script>
 <style lang="scss" scoped>
-.swiper {
+.order-container {
   height: 100%;
-  background: linear-gradient(to bottom, #19a97c, $u-bg-color, $u-bg-color, $u-bg-color, $u-bg-color, $u-bg-color, $u-bg-color);
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  background: #19a97c;
+  box-sizing: border-box;
+
+  .header-box {
+    width: 100%;
+    color: white;
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    /* 分散对齐，自动调整间距 */
+
+    .header-box-left-message {
+      width: 150rpx;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+
+    .header-box-title {
+      font-size: 35rpx;
+      font-weight: bold;
+      width: 600rpx;
+      text-align: center;
+      // 向左偏移75rpx
+      margin-left: -75rpx;
+
+    }
+
+  }
+
+  .swiper {
+    height: 100%;
+    background: linear-gradient(to bottom, #19a97c, $u-bg-color, $u-bg-color, $u-bg-color, $u-bg-color, $u-bg-color, $u-bg-color);
+  }
 }
 </style>
+<template>
+  <view class="message-container">
+    <view class="message-header-box" v-if="messageList.length">
+      <view class="message-header-box-btn">
+        <u-button color="#19a97c" size="mini" @click="handlerReadAllClick">全部删除</u-button>
+      </view>
+    </view>
+    <z-paging ref="paging" v-model="messageList" :fixed="false" @query="queryList">
+      <empty-view slot:empty></empty-view>
+      <view class="message-list-item" v-for="(item, index) in messageList" :key="item.id">
+        <view class="message-list-item-main">
+          <view class="message-list-item-main-content">
+            {{ item.garContent }}
+          </view>
+          <u-icon name="close-circle" @click="handlerReadClick(item.garId)" color="red"></u-icon>
+        </view>
+      </view>
+    </z-paging>
+  </view>
+</template>
+
+<script setup>
+import { queryOrderMessageList, readMessage } from '@/apis/order.js';
+import { onLoad } from '@dcloudio/uni-app';
+import { ref } from 'vue';
+const paging = ref(null)
+const messageList = ref([])
+const handlerReadClick = (msgId) => {
+  if (msgId) {
+    // 提示确认删除
+    uni.showModal({
+      title: '提示',
+      content: '确定删除吗？',
+      success: function (res) {
+        if (res.confirm) {
+          readMessage([msgId]).then(res => {
+            paging.value.reload();
+          })
+        } else if (res.cancel) {
+          console.log('用户点击取消');
+        }
+      }
+    })
+  }
+}
+
+const handlerReadAllClick = () => {
+  // 提示确认删除
+  uni.showModal({
+    title: '提示',
+    content: '确定删除吗？',
+    success: function (res) {
+      if (res.confirm) {
+        let msgIds = messageList.value.map(item => item.garId);
+        readMessage(msgIds).then(res => {
+          paging.value.reload();
+        })
+      } else if (res.cancel) {
+        console.log('用户点击取消');
+      }
+    }
+  })
+}
+const initMessageList = () => {
+  setTimeout(() => {
+    paging.value.reload();
+  }, 0);
+}
+
+const queryList = (pageNo, pageSize) => {
+
+  // 查询公司信息
+  queryOrderMessageList(pageNo, pageSize).then(res => {
+    paging.value.complete(res.data.data.list);
+  })
+}
+onLoad(() => {
+  initMessageList();
+})
+</script>
+
+<style lang="scss" scoped>
+.message-container {
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  background: linear-gradient(to bottom, #19a97c, $u-bg-color, $u-bg-color, $u-bg-color, $u-bg-color, $u-bg-color, $u-bg-color);
+
+  .message-list-item {
+    line-height: 80rpx;
+    padding: 20rpx;
+    box-sizing: border-box;
+
+
+    .message-list-item-main {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+
+      .message-list-item-main-content {}
+    }
+  }
+
+  .message-header-box {
+    box-sizing: border-box;
+    height: 80rpx;
+    width: 100%;
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    right: 40rpx;
+
+    .message-header-box-btn {}
+  }
+}
+</style>
@@ -13,9 +13,6 @@
               <view v-if="item.company" class="choose-tyep-item-text-right-compay">
                 {{ item.company }}
               </view>
-              <view class="choose-tyep-item-text-right-info">
-                {{ item.info }}
-              </view>
               <view class="choose-type-item-text-right-label">
                 {{ item.label }}
               </view>
@@ -236,18 +233,13 @@ onLoad((options) =&gt; {
             justify-content: space-around;
             color: white;
-            .choose-tyep-item-text-right-info {
-              font-size: 28rpx;
-            }
-
             .choose-tyep-item-text-right-compay {
               font-weight: bolder;
-              line-height: 35rpx;
               font-size: 32rpx;
             }
             .choose-type-item-text-right-label {
-              font-size: 23rpx;
+              font-size: 30rpx;
               padding: 8rpx 15rpx;
               border-radius: 5rpx;
               color: $u-info-dark;
@@ -80,17 +80,15 @@ const handleLoginOut = () =&gt; {
 </script>
 <style lang="scss" scoped>
-page {
-  background-color: #19a97c;
-}
+page {}
 .wode-container {
   height: 100%;
   box-sizing: border-box;
-  background: linear-gradient(to bottom, #19a97c, $u-bg-color, $u-bg-color, $u-bg-color, $u-bg-color, $u-bg-color, $u-bg-color);
+  background: linear-gradient(to bottom, #19a97c, #22cf98, $u-bg-color, $u-bg-color, $u-bg-color, $u-bg-color, $u-bg-color);
+  padding-top: 100rpx;
   .head-top-box {
-    margin-top: 100rpx;
     display: flex;
     align-items: center;