feat: 超时取消，封装picker组件

guzijian
1 parent 20917ce1
Showing 18 changed files with 286 additions and 293 deletions
garbage-removal/src/apis/order.js
garbage-removal/src/components/my-piker/index.vue
garbage-removal/src/pages.json
garbage-removal/src/pages/home/clean/company-detail/index.vue
garbage-removal/src/pages/home/clean/index.vue
garbage-removal/src/pages/home/index.vue
garbage-removal/src/pages/home/search/index.vue
garbage-removal/src/pages/login/index.vue
garbage-removal/src/pages/order/driver-home/detail/index.vue
garbage-removal/src/pages/order/driver-home/swiper-list-item/index.vue
garbage-removal/src/pages/order/handler-home/transport-detail/index.vue
garbage-removal/src/pages/order/other-home/detail/index.vue
garbage-removal/src/pages/order/other-home/swiper-list-item/index.vue
garbage-removal/src/pages/order/other-home/user-message/index.vue
garbage-removal/src/static/image/freecompress-swiper-1.png
garbage-removal/src/static/image/freecompress-swiper-2.jpg
garbage-removal/src/uview-plus/components/u-picker-column/u-picker-column.vue
garbage-removal/src/uview-plus/components/u-picker/u-picker.vue
@@ -106,6 +106,11 @@ export async function queryOrderMessageCount() {
 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);
 }
+
+export async function successOrder(data) {
+  return await request.put(`/order/update`,data);
+}
+<template>
+  <view style="width: 100%;">
+    <view @click="openUnit" style="width: 100%;" hover-class="hoverClickStyle">
+      {{ parentValue }}
+    </view>
+    <!-- 弹框 -->
+    <u-popup :show="visible" :round="10" mode="bottom" :closeable="true" @close="closeUnit" @open="openUnit">
+      <view style="height: 700rpx">
+        <h4 style="text-align: center; margin-top: 56rpx; letter-spacing: 5rpx">{{ title }}</h4>
+        <picker-view :indicator-style="'height: 50px;'" :value="unitValue" @change="bindPickerChange"
+          class="picker-view">
+          <picker-view-column>
+            <view class="item" v-for="(item, index) in array" :key="index">{{ item }}</view>
+          </picker-view-column>
+        </picker-view>
+      </view>
+    </u-popup>
+  </view>
+</template>
+<script setup>
+import { ref } from 'vue';
+const emit = defineEmits(['change'])
+const props = defineProps({
+  parentValue: {
+    type: String,
+    required: true,
+  },
+  title: {
+    type: String,
+    default: '请选择',
+  },
+  array: {
+    type: Array,
+    default: [],
+  },
+})
+const visible = ref(false)
+const index = ref(0);
+// 摆设 不能没有
+const unitValue = ref([])
+const closeUnit = () => {
+  visible.value = false
+}
+const openUnit = () => {
+  visible.value = true
+  console.log('open');
+}
+const bindPickerChange = (e) => {
+  console.log('picker发送选择改变，携带值为', e.detail.value)
+  index.value = e.detail.value
+  emit('change', props.array[index.value])
+}
+</script>
+<style lang="scss" scoped>
+.picker-view {
+  width: 750rpx;
+  height: 600rpx;
+  margin-top: 20rpx;
+}
+
+.item {
+  line-height: 100rpx;
+  text-align: center;
+}
+
+.hoverClickStyle {
+  @include handleClick;
+}
+</style>
@@ -158,13 +158,6 @@
 				"navigationBarBackgroundColor":"#19a97c",
 				"enablePullDownRefresh": false
 			}
-		},
-		{
-			"path": "pages/home/search/index",
-			"style": {
-				"navigationBarTitleText": "公司搜索",
-				"enablePullDownRefresh": false
-			}
 		},{
 			"path": "pages/order/index",
 			"style": {
@@ -3,8 +3,9 @@
     <view class="company-content-box">
       <view class="company-content-header">
         <view class="company-content-left">
-          <image class="company-content-left-image"
-            :src="headerData.carParkPanorama ? headerData.carParkPanorama : 'https://ijry.github.io/uview-plus/h5/assets/logo-8d54bbeb.png'" />
+          <up-image :show-loading="true"
+            :src="headerData.companyLogo ? headerData.companyLogo : '../../../../static/image/freecompress-swiper-2.jpg'"
+            width="150rpx" height="150rpx"></up-image>
         </view>
         <view class="company-content-right">
           <view class="company-content-right-name">
@@ -84,8 +85,9 @@
         </view>
       </view>
       <view class="company-bottom-button-right">
-        <u-button icon="car-fill" :custom-style="customStyle" @click="handleCleanGarbage(companyInfo, tel, userAddress)"
-          type="success" :hairline="true" size="normal" shape="circle" text="垃圾清运"></u-button>
+        <u-button v-if="userType == '用户'" icon="car-fill" :custom-style="customStyle"
+          @click="handleCleanGarbage(companyInfo, tel, userAddress)" type="success" :hairline="true" size="normal"
+          shape="circle" text="垃圾清运"></u-button>
       </view>
     </view>
   </view>
@@ -94,8 +96,11 @@
 <script setup>
 import { queryCarList } from '@/apis/carinfo.js';
 import { queryEnterpriseById } from '@/apis/company.js';
+import { useMainStore } from "@/stores/index.js";
 import { onLoad } from '@dcloudio/uni-app';
-import { ref } from 'vue';
+import { computed, ref } from 'vue';
+const mainStore = useMainStore()
+const userType = computed(() => mainStore.userType)
 const baseDataList = ref([{ label: '法人' }, { label: '负责人' }, { label: '业务联系电话' }, { label: '道路运输许可证' }, { label: '核准有效期' }, { label: '注册地址' }]);
 const customStyle = ref({
   fontSize: '30rpx',
@@ -108,7 +113,7 @@ const userAddress = ref()
 const headerData = ref({
   name: "",
   registrationArea: "",
-  carParkPanorama: ""
+  companyLogo: ""
 })
 const serverData = ref([
   {
@@ -185,7 +190,7 @@ const initData = (baseData) =&gt; {
   baseDataList.value[5].value = baseData.officeAddress
   headerData.value.name = baseData.name;
   headerData.value.registrationArea = baseData.registrationArea;
-  headerData.value.carParkPanorama = baseData.carParkPanorama;
+  headerData.value.companyLogo = baseData.companyLogo;
 }
 </script>
 <template>
   <view class="mask-box">
     <liu-delivery-time :isMask="true" :change="changeTime" ref="chooseTime" title="请选择预约时间"></liu-delivery-time>
-    <u-picker closeOnClickOverlay :show="carTypeShowFlag" :columns="candidates" :itemHeight="100"
-      @confirm="handlePickerCarInfoConfirm" @cancel="handleCarInfoClick(false)"
-      @close="handleCarInfoClick(false)"></u-picker>
     <u-picker closeOnClickOverlay :show="garbageTypeShowFlag" :columns="garbageTypeList" :itemHeight="100"
       @confirm="handlePickerGarbageTypeConfirm" @close="handleGarbageTypeClick(false)"
       @cancel="handleGarbageTypeClick(false)"></u-picker>
-    <!-- <u-popup :zIndex="10074" closeOnClickOverlay :show="carPopupShowFlag" :round="10" @close="handlePopupClick(false)"
-      @open="handlePopupClick(true)">
-      <view class="company-clean-container-car-popup">
-        <view class="company-clean-container-car-popup-content">
-          <view class="company-clean-container-car-popup-content-title">
-            <view style="text-align: center;">
-              车辆类型
-            </view>
-          </view>
-          <view class="company-clean-container-car-popup-content-box">
-            <view class="company-clean-container-car-popup-content-box-item" v-for="(item, index) in garCarInfoList"
-              :key="index">
-              <view class="company-clean-container-car-popup-content-box-item-text">
-                {{ item.garOrderCarType }}
-              </view>
-              <view class="company-clean-container-car-popup-content-box-item-number" hover-class="hoverClickStyle">
-                <u-number-box :min="0" :max="9999" integer buttonSize="46" :inputWidth="100"
-                  v-model="garCarInfoList[item.garOrderCarType].garOrderCarNumber" :disabledInput="true"></u-number-box>
-              </view>
-            </view>
-          </view>
-        </view>
-        <view class="company-clean-container-car-popup-button-safe">
-          &nbsp;
-        </view>
-      </view>
-    </u-popup> -->
   </view>
   <view class="company-clean-container">
     <view class="company-clean-container-box">
@@ -56,7 +26,23 @@
       </view>
       <view class="company-clean-container-car-main">
         <view class="company-clean-container-car-main-content">
-          <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">
+              <text style="color: red;">*</text>车辆信息:
+            </view>
+            <view style=" width:100%;display:flex; color:#909399; align-items: center;">
+              <myPiker :parentValue="paramFrom.carType" @change="handlePickerCarInfoConfirm"
+                :modelValue="paramFrom.carType" :array="candidates" :title="'车辆信息'">
+              </myPiker>
+            </view>
+          </view>
+          <view class="company-clean-container-car-main-content-img">
+            <image class="company-clean-container-car-main-content-img" :src="carFront" />
+          </view>
+          <view class="company-clean-container-car-main-content-remark" style="margin: 20rpx 0;  font-size: 23rpx;">
+            {{ garCarTransportInfo }}
+          </view>
+          <view class=" company-clean-container-car-main-content">
             <view class="company-clean-container-car-popup">
               <!-- 主要内容 -->
               <view class="company-clean-container-car-popup-content">
@@ -82,22 +68,22 @@
               </view>
             </view>
           </view>
-
           <view 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 hover-class="hoverClickStyle" @click.stop="handleGarbageTypeClick(true)">
-              <u--input color="#909399" border="none" style="pointer-events:none" :modelValue="paramFrom.garbageType"
-                type="text" placeholder-class="line" readonly />
+            <view style=" width:100%;display:flex; color:#909399; align-items: center;">
+              <myPiker :parentValue="paramFrom.garbageType" :title="'垃圾类型'" @change="handlePickerGarbageTypeConfirm"
+                :array="garbageTypeList">
+              </myPiker>
             </view>
           </view>
           <view 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 style="width:100%;display: flex;justify-content: center;align-items: center; ">
-              <view style="display: flex;">
+            <view style="width:100%;display: flex;justify-content: flex-start;align-items: center; ">
+              <view style="display: flex; align-items: center;">
                 <up-radio-group shape="square" size="30" v-model="paramFrom.garInCarStore" placement="row"
                   @change="handleInCarClick">
                   <up-radio activeColor="#19a97c" labelSize="30"
@@ -118,23 +104,6 @@
               提示：需要进入车库需要写车辆限高，部门车库限高2.3m，如果装修垃圾在车库，要考虑车辆是否能进入。
             </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>
-            <!-- <scrollText :candidates="candidates" /> -->
-            <view style="display:flex; align-items: center;" hover-class="hoverClickStyle"
-              @click.stop="handleCarInfoClick(true)">
-              <u--input color="#909399" border="none" style="pointer-events:none" :modelValue="paramFrom.carType"
-                type="text" placeholder-class="line" readonly />
-            </view>
-          </view>
-          <view class="company-clean-container-car-main-content-img">
-            <image class="company-clean-container-car-main-content-img" :src="carFront" />
-          </view>
-          <view class="company-clean-container-car-main-content-remark">
-            {{ garCarTransportInfo }}
-          </view>
           <view class="company-clean-container-car-main-content-prompt">
             温馨提示：垃圾类型不符合，企业有权拒绝清运。
           </view>
@@ -195,6 +164,7 @@ import { queryCarList } from &#39;@/apis/carinfo.js&#39;;
 import { uploadFilePromise } from '@/apis/common.js';
 import { saveOrder } from '@/apis/order.js';
 import liuDeliveryTime from "@/components/liu-delivery-time/liu-delivery-time.vue";
+import myPiker from '@/components/my-piker/index.vue';
 import garbageUrl from '@/static/image/garbage.png';
 import { useMainStore } from '@/stores/index.js';
 import { onLoad } from '@dcloudio/uni-app';
@@ -260,14 +230,14 @@ const garCarNumberCount = computed(() =&gt; {
   console.log(count);
   return count;
 })
-const garbageTypeList = ref([["装修垃圾", "建筑垃圾"]])
+const garbageTypeList = ref(["装修垃圾", "建筑垃圾"])
 const paramFrom = ref({
   carNumber: 0,
   remark: "",
   sureReadFlag: [],
   carType: "",
-  garbageType: ["装修垃圾"],
-  garInCarStore: false
+  garbageType: "装修垃圾",
+  garInCarStore: false,
 })
 const dayTime = ref()
@@ -334,22 +304,22 @@ const initOptions = async (options) =&gt; {
   }
   queryCarList({ companyId: companyObj.value.id }).then(res => {
     // 设置车辆类型
-    candidates.value = [[...new Set(res.data.rows
+    candidates.value = [...new Set(res.data.rows
       .filter(item => item.containerVolume)
       .map(item => {
         garCarLabelInfoList.value[item.containerVolume + "方车"] = item
         return item.containerVolume + "方车"
       }))
-    ]];
+    ];
     // 设置初始车辆数量
-    candidates.value[0].forEach((item, index) => {
+    candidates.value.forEach((item, index) => {
       garCarInfoList.value[item] = {
         garOrderCarNumber: 0,
         garOrderCarType: item
       }
     })
     // 设置默认车辆
-    paramFrom.value.carType = candidates.value[0][0];
+    paramFrom.value.carType = candidates.value[0];
     garCarLabelInfoNow.value = garCarLabelInfoList.value[paramFrom.value.carType]
   })
 }
@@ -411,11 +381,12 @@ const afterRead = async (event) =&gt; {
 const handlePickerGarbageTypeConfirm = (e) => {
-  paramFrom.value.garbageType = e.value
+  paramFrom.value.garbageType = e
   garbageTypeShowFlag.value = false
 }
 const handlePickerCarInfoConfirm = (e) => {
-  paramFrom.value.carType = e.value
+  console.log(e);
+  paramFrom.value.carType = e
   garCarLabelInfoNow.value = garCarLabelInfoList.value[paramFrom.value.carType]
   carTypeShowFlag.value = false
   console.log(garCarLabelInfoNow.value);
@@ -450,7 +421,7 @@ const handleOderSure = () =&gt; {
     /**
      * 垃圾类型
      */
-    garOrderTrashType: paramFrom.value.garbageType[0],
+    garOrderTrashType: paramFrom.value.garbageType,
     /**
      * 订单人电话
@@ -527,6 +498,11 @@ const handleOderSure = () =&gt; {
  */
 const validateParams = (params) => {
+  if (params.garInCarStore && !params.garRemark) {
+    jumpPrompt('请输入限高')
+    return false;
+  }
+
   if (!paramFrom.value.sureReadFlag[0]) {
     jumpPrompt('请勾选"本人已确认信息真实有效，并将上诉信息告知市容环境卫生主管部门"')
     return false;
@@ -736,6 +712,7 @@ $custom-bottom-height: 200rpx;
             align-items: center;
             color: $u-info;
             white-space: nowrap;
+            width: 100%;
           }
         }
@@ -25,7 +25,7 @@
         </view>
       </view>
       <view class="company-container">
-        <view class="company-list-box" v-if="addressInfo">
+        <view class="company-list-box" v-if="addressInfo && userType == '用户'">
           <view class="company-list-header">
             <view class="company-list-header-left">
               <u-dropdown active-color="#19a97c">
@@ -37,12 +37,6 @@
                   :title="dropdownOptions[2][sortValue].label" :options="dropdownOptions[2]"></u-dropdown-item>
               </u-dropdown>
             </view>
-            <view class="company-list-header-right" @tap.stop="handleSearchClick">
-              <view
-                style="display: inline-block; width: 100%;pointer-events: none;margin: 10rpx 0rpx; box-sizing: border-box;">
-                <u-search :searchIconSize="40" :disabled="true" :placeholder="'搜索'" :showAction="false"></u-search>
-              </view>
-            </view>
           </view>
           <view class="company-list-content">
             <view class="company-list-content-box">
@@ -84,7 +78,7 @@
                             </view>
                             <view class="company-list-item-main-right-price-number">
                               <view class="company-list-item-main-right-price">
-                                报价:<text style="color: #fd5d00;">￥400起&nbsp;&nbsp;</text>
+                                报价:<text style="color: #fd5d00;">￥{{ item.offer }}起&nbsp;&nbsp;</text>
                               </view>
                               <view class="company-list-item-main-right-number">
                                 清运数：<text class="company-list-item-main-right-number-text">{{ item.cleanNumber }}</text>
@@ -107,9 +101,6 @@
                           </view>
                         </view>
                       </view>
-                      <!-- <view class="company-list-item-main-right-remark">
-                        {{ item.remark }}
-                      </view> -->
                     </view>
                   </view>
                   <view class="company-list-item-bottom">
@@ -121,7 +112,7 @@
         </view>
         <view class="company-empty" v-else @click="handleCleanClick">
           <view class="empty-text-title">
-            请先添加地址
+            {{ prompt }}
           </view>
           <view class="empty-text-content">
             房屋装饰装修过程中产生的砖瓦、木材、熟料等废弃物
@@ -140,8 +131,14 @@
 <script setup>
 import { queryAddress } from '@/apis/address.js';
 import { queryEnterpriseList } from '@/apis/company.js';
+import swiperImage1 from '@/static/image/freecompress-swiper-1.png';
+import swiperImage2 from '@/static/image/freecompress-swiper-2.jpg';
+import { useMainStore } from "@/stores/index.js";
 import { onLoad, onShow } from '@dcloudio/uni-app';
-import { ref } from 'vue';
+import { computed, ref } from 'vue';
+const mainStore = useMainStore()
+const userType = computed(() => mainStore.userType)
+const prompt = computed(() => userType.value == '用户' ? "请先添加地址" : '非用户无法下单')
 // 定义最大积分
 let maxScore = 5
 const maxStar = ref([])
@@ -150,9 +147,9 @@ const topMargin = ref(null);//状态栏高度
 const musicheadHeight = ref();
 const paging = ref(null)
 const swiperImageList = ref([{
-  image: 'https://tse2-mm.cn.bing.net/th/id/OIP-C.o6VdtT8EY8mHjzoX7qAlrQAAAA?w=261&h=180&c=7&r=0&o=5&dpr=1.5&pid=1.7'
+  image: swiperImage1
 }, {
-  image: 'https://tse3-mm.cn.bing.net/th/id/OIP-C.LwNUQLX3A3PIJ0Rzm4ATOwHaEQ?w=304&h=180&c=7&r=0&o=5&dpr=1.5&pid=1.7',
+  image: swiperImage2
 }])
 const userAddress = ref({})
@@ -310,19 +307,21 @@ const handleCleanClick = () =&gt; {
     });
   } else {
     // 用户已登录但是没有清运地址的情况
-    uni.showModal({
-      title: '',
-      content: '请先添加清运地址',
-      success: function (res) {
-        if (res.confirm) {
-          uni.$u.route({
-            url: `pages/home/address/index`,
-          })
-        } else if (res.cancel) {
-          console.log('用户点击取消');
+    if (userType.value == '用户') {
+      uni.showModal({
+        title: '',
+        content: prompt.value,
+        success: function (res) {
+          if (res.confirm) {
+            uni.$u.route({
+              url: `pages/home/address/index`,
+            })
+          } else if (res.cancel) {
+            console.log('用户点击取消');
+          }
         }
-      }
-    });
+      });
+    }
   }
   return
-<template>
-  <view class="search-container">
-    <view class="search-box">
-      <u-search placeholder="请输入" :searchIconSize="40" :disabled="true" @click="handleSearchClick"
-        :showAction="false"></u-search>
-    </view>
-  </view>
-</template>
-
-<script setup>
-
-</script>
-
-<style lang="scss" scoped></style>
@@ -44,7 +44,7 @@ import { userLogin } from &quot;@/apis/user.js&quot;;
 export default {
 	data() {
 		return {
-			tel: '18966667777',
+			tel: '13222222222',
 			agree: []
 		}
 	},
@@ -120,12 +120,6 @@
           处理信息
         </view>
         <view v-if="putDownImages.length || putOnImages.length" style="width: 100%;">
-          <!-- <view class="order-detail-container-header-item">
-            <text class="order-detail-container-header-title">负责人：</text>
-            <view class="order-detail-container-header-content">
-              {{ dataGram.garOrderHandleName }}
-            </view>
-          </view> -->
           <view class="order-detail-container-header-item">
             <text class="order-detail-container-header-title">服务电话：</text>
             <view class="order-detail-container-header-content">
@@ -189,9 +183,6 @@
         </view>
       </view>
     </view>
-    <u-action-sheet :closeOnClickOverlay="true" :closeOnClickAction="false" @actionSheetClose="handleClose"
-      @submitFunction="submitFunction" @select="selectClick" :actions="list" round="15" title="取消订单" :show="cancelShow">
-    </u-action-sheet>
   </view>
   <view v-if="showUQRcode" class="mask-container" @click="showUQRcode = false">
     <uqrcode :h5SaveIsDownload="true" ref="qrCodeRef" canvas-id="qrcode" :value="qrCodeText"
@@ -223,35 +214,6 @@ const cancelShow = ref(false)
 const currentCancelName = ref("")
 const qrCodeRef = ref()
 const qrCodeText = ref()
-const list = computed(() => {
-  let reason = [
-    {
-      name: '订单信息填写有误',
-    },
-    {
-      name: '线下协商有问题',
-    },
-    {
-      name: '不需要清运了',
-    },
-    {
-      name: '其他',
-    },
-    {
-      name: '提交',
-    }
-  ]
-  if (userType.value === '用户') {
-    reason.unshift({
-      name: '长时间无人接单',
-    })
-  } else {
-    reason.unshift({
-      name: '无修改权限'
-    })
-  }
-  return reason
-})
 // 创建二维码
 const createQrCodeLocal = (orderId) => {
@@ -345,35 +307,6 @@ const handlerJumpOtherApp = (latitude, longitude, garCoordinate) =&gt; {
   })
 }
-/**
- * 提交取消订单
- */
-const submitFunction = (otherReason) => {
-  let reason = otherReason
-  if (currentCancelName.value != "其他") {
-    reason = currentCancelName.value
-  }
-  if (!reason) {
-    uni.$u.toast("请提供取消订单的原因")
-    return
-  }
-  let params = {
-    garOrderId: orderId.value,
-    garCancelFlag: 1,
-    garReason: reason
-  }
-  updateOrder(params).then(res => {
-    if (res.data.success) {
-      cancelShow.value = false
-      uni.$u.toast(res.data.data)
-      uni.$u.route({
-        type: "reLaunch",
-        url: `pages/order/index`,
-      })
-    }
-  })
-}
-
 const handleEvaluate = (orderId, userType) => {
   uni.$u.route(`pages/order/other-home/evaluate/index?orderId=${orderId}&userType=${userType}`)
 }
@@ -400,16 +333,11 @@ const handleOrder = (orderId) =&gt; {
 const driverHandleOrder = (orderId) => {
   updateOrder({ garOrderId: orderId, handleType: 0 }).then(res => {
     if (res.data.success) {
-      if (res.data.data === "订单已经被别人接受啦") {
-        uni.$u.toast(res.data.data)
-        uni.$u.route({
-          type: "reLaunch",
-          url: `pages/order/index`,
-        })
-      } else {
-        uni.$u.toast(res.data.data)
-        handleOrderDetail(orderId)
-      }
+      uni.$u.toast(res.data.data)
+      uni.$u.route({
+        type: "reLaunch",
+        url: `pages/order/index`,
+      })
     }
   })
 }
@@ -15,7 +15,7 @@
                 style="font-size: small;color: #f56c6c;">订单已经完成了。</text> -->
               <view v-if="item.garOrderHandlerStatus === 0 && item.garCancelFlag === 0" class="right">待清运 </view>
               <view v-if="item.garOrderHandlerStatus === 1 && item.garCancelFlag === 0" class="right">清运中 </view>
-              <view v-if="item.garOrderHandlerStatus === 3 && userType === '清运车辆驾驶员'" class="right">已完成 </view>
+              <view v-if="item.garOrderHandlerStatus === 3" class="right">已完成 </view>
             </view>
           </view>
           <view class="item" @click="handleClick(item.garOrderId)">
@@ -28,18 +28,9 @@
               <view class="delivery-time">预约时间 {{ item.garOrderAgreementTime }}</view>
             </view>
           </view>
-          <view class="bottom"
-            v-if="item.garOrderHandlerStatus === 0 && item.garCancelFlag === 0 && userType != '清运车辆驾驶员'">
-            <view class="more">
-              <!-- <u-icon name="more-dot-fill" color="rgb(203,203,203)"></u-icon> -->
-            </view>
-          </view>
         </view>
       </view>
     </z-paging>
-    <u-action-sheet :closeOnClickOverlay="true" :closeOnClickAction="false" @actionSheetClose="handleClose"
-      @submitFunction="submitFunction" @select="selectClick" :actions="list" round="15" title="取消订单" :show="cancelShow">
-    </u-action-sheet>
   </view>
 </template>
@@ -62,40 +53,9 @@ const userType = computed(() =&gt; store.userType)
 const currentCancelOrderId = ref("");
 const currentCancelName = ref("");
 const cancelShow = ref(false)
-const list = ref([
-  {
-    name: '长时间无人接单',
-  },
-  {
-    name: '订单信息填写有误',
-  },
-  {
-    name: '线下协商有问题',
-  },
-  {
-    name: '不需要清运了',
-  },
-  {
-    name: '其他',
-  },
-  {
-    name: '提交',
-  }
-])
 const dataList = ref([]);
 const paging = ref(null);
 const firstLoaded = ref(false)
-/**
- * 取消订单
- * @param {string} orderId
- */
-const handleCancelOrder = (orderId) => {
-  currentCancelOrderId.value = orderId
-  cancelShow.value = true
-}
-const handleClose = (e) => {
-  cancelShow.value = false
-}
 /**
  * 跳转公司详情
@@ -100,17 +100,16 @@
       <view class="space-box">{{ spaceStr }}</view>
     </view>
     <!-- 占位符 -->
-    <view class="order-detail-bottom">
+    <view class="order-detail-bottom" v-if="dataGram.garOrderDisposalStatus === 1">
       <view class="order-detail-bottom-box">
-        <view class=" order-detail-bottom-left">
-        </view>
+        <u-button @click="handlerOrderSuccess(orderId)" shape="square" color="#19a97c" text="完成订单"></u-button>
       </view>
     </view>
   </view>
 </template>
 <script setup>
-import { queryOrderTransportDetail } from '@/apis/order.js';
+import { queryOrderTransportDetail, successOrder } from '@/apis/order.js';
 import zStatic from '@/components/z-paging/js/z-paging-static';
 import { onLoad, onShow } from '@dcloudio/uni-app';
 import { ref } from 'vue';
@@ -132,6 +131,27 @@ const goTransportDetail = (val) =&gt; {
   })
 }
+const handlerOrderSuccess = (orderId) => {
+  // 提示
+  uni.showModal({
+    title: '提示',
+    content: '是否确认完成订单？',
+    success: function (res) {
+      if (res.confirm) {
+        // 确认
+        handlerOrderSuccessIn(orderId)
+      }
+    }
+  })
+}
+const handlerOrderSuccessIn = (orderId) => {
+  successOrder({ garOrderId: orderId }).then(res => {
+    //返回上一个页面
+    uni.navigateBack({
+      delta: 1
+    })
+  })
+}
 const handleOrderDetail = (orderId) => {
   queryOrderTransportDetail(orderId).then(res => {
     dataGram.value = res.data.data;
@@ -340,4 +360,47 @@ $custom-bottom-height: 200rpx;
   align-items: center;
   justify-content: center;
 }
+
+.order-detail-bottom {
+  position: absolute;
+  width: 100%;
+  // height: 100%;
+  bottom: 0;
+  left: 0;
+
+  .movableAreaDetail {
+    pointer-events: none;
+    position: fixed;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: calc(100% - $custom-bottom-height);
+    z-index: 999;
+
+    .movableView {
+      pointer-events: auto;
+      min-height: 60rpx;
+      min-width: 60rpx;
+
+      .order-detail-call-box-container {
+        min-height: 60rpx;
+        min-width: 60rpx;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background-color: #19a97c;
+        border-radius: 100%;
+      }
+    }
+  }
+
+  .order-detail-bottom-box {
+    height: $custom-bottom-height;
+    padding: 50rpx;
+    box-sizing: border-box;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+}
 </style>
@@ -193,7 +193,8 @@
         <view class=" order-detail-bottom-left">
           <u-button v-if="dataGram.garOrderHandlerStatus === 0 && userType == '运输企业负责人' && dataGram.garCancelFlag === 0"
             @click="handleOderCancelClick()" shape="square" color="#19a97c" text="取消订单"></u-button>
-          <u-button v-if="dataGram.garOrderScanHandlerFlag === 0 && userType == '用户' && dataGram.garCancelFlag === 0"
+          <u-button
+            v-if="dataGram.garOrderScanHandlerFlag === 0 && userType == '用户' && dataGram.garOrderHandlerStatus != 3"
             @click="handlerUpdateOrderClick()" shape="square" color="#19a97c" text="修改车辆信息"></u-button>
           <u-button v-if="dataGram.garOrderHandlerStatus === 1 && userType == '运输企业负责人'"
             @click="handleOrderDispatchClick(orderId)" shape="square" color="#19a97c" text="分配驾驶员"></u-button>
@@ -292,10 +293,6 @@ const list = computed(() =&gt; {
     reason.unshift({
       name: '长时间无人接单',
     })
-  } else {
-    reason.unshift({
-      name: '无修改权限'
-    })
   }
   return reason
 })
@@ -17,6 +17,8 @@
             </view>
             <view v-if="item.garEvaluateFlag === 0 && userType === '用户'" class="right">待评价
             </view>
+            <view v-if="item.garTimeOutFlag === 1" class="right" style="color: red;">超时取消
+            </view>
             <view v-if="item.garHandlerEvaluateFlag === 0 && userType === '运输企业负责人'" class="right">待评价
             </view>
             <view v-if="item.garEvaluateFlag === 1 && userType === '用户'" class="right">已评价
@@ -88,26 +90,31 @@ const userType = computed(() =&gt; store.userType)
 const currentCancelOrderId = ref("");
 const currentCancelName = ref("");
 const cancelShow = ref(false)
-const list = ref([
-  {
-    name: '长时间无人接单',
-  },
-  {
-    name: '订单信息填写有误',
-  },
-  {
-    name: '线下协商有问题',
-  },
-  {
-    name: '不需要清运了',
-  },
-  {
-    name: '其他',
-  },
-  {
-    name: '提交',
+const list = computed(() => {
+  let reason = [
+    {
+      name: '订单信息填写有误',
+    },
+    {
+      name: '线下协商有问题',
+    },
+    {
+      name: '不需要清运了',
+    },
+    {
+      name: '其他',
+    },
+    {
+      name: '提交',
+    }
+  ]
+  if (userType.value === '用户') {
+    reason.unshift({
+      name: '长时间无人接单',
+    })
   }
-])
+  return reason
+})
 const dataList = ref([]);
 const paging = ref(null);
 const firstLoaded = ref(false)
@@ -5,12 +5,12 @@
         <u-button color="#19a97c" size="mini" @click="handlerReadAllClick">全部删除</u-button>
       </view>
     </view>
-    <z-paging ref="paging" v-model="messageList" :fixed="false" @query="queryList">
+    <z-paging ref="paging" v-model="messageList" :scrollable="false" :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 }}
+            <text selectable='true'>{{ item.garContent }}</text>
           </view>
           <u-icon name="close-circle" @click="handlerReadClick(item.garId)" color="red"></u-icon>
         </view>
@@ -83,14 +83,18 @@ onLoad(() =&gt; {
 .message-container {
   width: 100%;
   height: 100%;
+  background-color: white;
   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;
+    margin: 20rpx 0;
     padding: 20rpx;
     box-sizing: border-box;
-
+    color: $u-tips-color;
+    font-size: 23rpx;
+    line-height: 30rpx;
+    padding: 15rpx;
+    word-break: break-all;
     .message-list-item-main {
       display: flex;
@@ -7,23 +7,23 @@
 </template>
 <script>
-	import props from './props.js';
-	import mpMixin from '../../libs/mixin/mpMixin.js';
-	import mixin from '../../libs/mixin/mixin.js';
-	/**
-	 * PickerColumn 
-	 * @description 
-	 * @tutorial url
-	 * @property {String}
-	 * @event {Function}
-	 * @example
-	 */
-	export default {
-		name: 'u-picker-column',
-		mixins: [mpMixin, mixin, props],
-	}
+import mixin from '../../libs/mixin/mixin.js';
+import mpMixin from '../../libs/mixin/mpMixin.js';
+import props from './props.js';
+/**
+ * PickerColumn
+ * @description
+ * @tutorial url
+ * @property {String}
+ * @event {Function}
+ * @example
+ */
+export default {
+	name: 'u-picker-column',
+	mixins: [mpMixin, mixin, props],
+}
 </script>
 <style lang="scss" scoped>
-	@import "../../libs/css/components.scss";
+@import "../../libs/css/components.scss";
 </style>
@@ -5,15 +5,15 @@
 				:confirmText="confirmText" :title="title" @cancel="cancel" @confirm="confirm"></u-toolbar>
 			<picker-view class="u-picker__view" :indicatorStyle="`height: ${$u.addUnit(itemHeight)}`" :value="innerIndex"
 				:immediateChange="immediateChange" :style="{
-					height: `${$u.addUnit(visibleItemCount * itemHeight)}`
-				}" @change="changeHandler">
+		height: `${$u.addUnit(visibleItemCount * itemHeight)}`
+	}" @change="changeHandler">
 				<picker-view-column v-for="(item, index) in innerColumns" :key="index" class="u-picker__view__column">
 					<text v-if="$u.test.array(item)" class="u-picker__view__column__item u-line-1" v-for="(item1, index1) in item"
 						:key="index1" :style="{
-							height: $u.addUnit(itemHeight),
-							lineHeight: $u.addUnit(itemHeight),
-							fontWeight: index1 === innerIndex[index] ? 'bold' : 'normal'
-						}">{{ getItemText(item1) }}</text>
+		height: $u.addUnit(itemHeight),
+		lineHeight: $u.addUnit(itemHeight),
+		fontWeight: index1 === innerIndex[index] ? 'bold' : 'normal'
+	}">{{ getItemText(item1) }}</text>
 				</picker-view-column>
 			</picker-view>
 			<view v-if="loading" class="u-picker--loading">