feat: 工作台列表调试

api/api.js

@@ -43,6 +43,12 @@ class Api {
         let url = `${config.host}/worker/order_dispatch/orderConfirm`;
         return fetch.request('postFrom', url, data, true)
     }
+
+    // 工作台列表
+    static workbenchOrderList(data) {
+        let url = `${config.host}/worker/order_dispatch/workbenchOrderList`;
+        return fetch.request('GET', url, data, true)
+    }
 }
 
 export default Api

pages.json

@@ -1,5 +1,13 @@
 {
 	"pages": [
+		{
+			"path" : "pages/workbench/workbench",
+			"style" :
+			{
+				"navigationBarTitleText" : "",
+				"navigationStyle": "custom"
+			}
+		},
 		{
 			"path" : "pages/index/index",
 			"style" :
@@ -24,14 +32,6 @@
 				"navigationStyle": "custom"
 			}
 		},
-		{
-			"path" : "pages/workbench/workbench",
-			"style" :
-			{
-				"navigationBarTitleText" : "",
-				"navigationStyle": "custom"
-			}
-		},
 		{
 			"path" : "pages/order/order-info",
 			"style" :

pages/workbench/workbench.vue

@@ -3,101 +3,67 @@
     <view class="fixed-top">
       <me-top title="工作台"></me-top>
       <view class="filter flex-sb line-after">
-        <view v-for="(item, index) in filterType" :key="index" class="filter-item flex-c" @click="filter(item.id)">
+        <view v-for="(item, type) in filterType" :key="type" class="filter-item flex-c" @click="filter(type)">
-          <view :class="['title', 'flex-c', data.filterIndex == item.id ? 'title-active' : '']">{{item.name}}({{item.num}})</view>
+          <view :class="['title', 'flex-c', data.type == type ? 'title-active' : '']">{{item.name}}({{item.num}})</view>
-          <view class="select-style" v-if="data.filterIndex == item.id"></view>
+          <view class="select-style" v-if="data.type == type"></view>
         </view>
       </view>
     </view>
 
     <me-empty-space :height="listMarginTop"></me-empty-space>
     <view class="list">
-      <view class="order-item">
+      <view class="order-item" v-for="(item, index) in data.list" :key="index">
         <view class="top flex-sb">
-          <view class="type flex-l">日常保洁</view>
+          <view class="type flex-l">{{item.order_info.item_title}}</view>
-          <view class="price flex-r">平台已收款</view>
+          <view class="price flex-r important-color" v-if="item.order_info.receive_type === 1">上门报价</view>
+          <view class="price flex-r" v-else>平台已收款</view>
         </view>
         <view class="content flex-sb">
           <view class="left">
             <view class="address-name flex-l">
-              金城花园(天府二街)
+              {{item.order_info.address}}
             </view>
             <view class="address">
-              广东省茂名市茂南区金城路26号大院附近
+              {{helpers.removeCommas(item.order_info.area.merge_name)}}
             </view>
-            <view class="time-ctr flex-l">
+            <view class="time-ctr flex-l" v-if="item.order_info.plan_time !== null">
               <me-icon type="icon-time" color="var(--themeColor)" size="40rpx"></me-icon>
-              <text class="time">周日 10月08日 12:30</text>
+              <text class="time">{{helpers.formatDate(item.order_info.plan_time)}}</text>
             </view>
           </view>
           <view class="right">
             <view class="icon-ctr flex-c">
               <me-icon type="icon-navigation" color="var(--descriptionColor)" size="60rpx"></me-icon>
             </view>
-            <view class="distance flex-c">8.34公里</view>
+            <view class="distance flex-c" v-if="item.order_info.lng == 0 || item.order_info.lat == 0">未知距离</view>
+            <view class="distance flex-c" v-else>{{formatDistance(item.order_info.lat, item.order_info.lng)}}</view>
           </view>
         </view>
         <view class="user flex-sb">
           <view class="left">
             <view class="user-name flex-l">
               <me-icon type="icon-user" color="var(--descriptionColor)" size="36rpx"></me-icon>
-              <view class="name">安子辰</view>
+              <view class="name">{{ item.order_info.customer }}</view>
             </view>
-            <view class="phone flex-l">18950807422</view>
+            <view class="phone flex-l">{{ item.order_info.tel }}</view>
           </view>
           <view class="right flex-c">
-            <view class="icon-ctr flex-c" hover-class="auto-mask-layer-radius8" hover-stay-time="100">
+            <view @click="call(item.order_info.tel)" class="icon-ctr flex-c" hover-class="auto-mask-layer-radius8" hover-stay-time="100">
               <me-icon type="icon-call" color="var(--themeColor)" size="80rpx"></me-icon>
             </view>
           </view>
         </view>
-        <view class="status-ctr flex-sb">
+        <view class="operate-ctr flex-sb">
-          <view class="title flex-l">当前工单状态</view>
+          <view class="status-ctr flex-l">
-          <view class="status flex-c">待联系客户</view>
+            <me-icon type="icon-progress-2-line" color="#E18F00" size="40rpx"></me-icon>
-        </view>
+            <text class="text">待联系客户</text>
-      </view>
+          </view>
-      <view class="order-item">
+          <view class="operate flex-r">
-        <view class="top flex-sb">
+            <view class="btn flex-c" hover-class="auto-mask-layer-radius8" hover-start-time="0" hover-stay-time="50">
-          <view class="type flex-l">日常保洁</view>
+              <me-icon type="icon-arrow-up-line" color="#FFFFFF" size="40rpx"></me-icon>
-          <view class="price flex-r important-color">上门报价</view>
+              <text>上报异常</text>
-        </view>
-        <view class="content flex-sb">
-          <view class="left">
-            <view class="address-name flex-l">
-              金城花园(天府二街)
-            </view>
-            <view class="address">
-              广东省茂名市茂南区金城路26号大院附近
-            </view>
-            <view class="time-ctr flex-l">
-              <me-icon type="icon-time" color="var(--themeColor)" size="40rpx"></me-icon>
-              <text class="time">周日 10月08日 12:30</text>
             </view>
           </view>
-          <view class="right">
-            <view class="icon-ctr flex-c">
-              <me-icon type="icon-navigation" color="var(--descriptionColor)" size="60rpx"></me-icon>
-            </view>
-            <view class="distance flex-c">8.34公里</view>
-          </view>
-        </view>
-        <view class="user flex-sb">
-          <view class="left">
-            <view class="user-name flex-l">
-              <me-icon type="icon-user" color="var(--descriptionColor)" size="36rpx"></me-icon>
-              <view class="name">安子辰</view>
-            </view>
-            <view class="phone flex-l">18950807422</view>
-          </view>
-          <view class="right flex-c">
-            <view class="icon-ctr flex-c" hover-class="auto-mask-layer-radius8" hover-stay-time="100">
-              <me-icon type="icon-call" color="var(--themeColor)" size="80rpx"></me-icon>
-            </view>
-          </view>
-        </view>
-        <view class="status-ctr flex-sb">
-          <view class="title flex-l">当前工单状态</view>
-          <view class="status flex-c">待联系客户</view>
         </view>
       </view>
     </view>
@@ -112,40 +78,102 @@ import MeIcon from "../../components/me-icon/me-icon";
 import MeButton from "../../components/me-button/me-button";
 import MeEmptySpace from "../../components/me-empty-space/me-empty-space.vue";
 import MeTop from "../../components/me-top/me-top.vue";
-const data = reactive({
+import api from "../../api/api";
-  globalData: {},
+import helpers from "../../utils/helpers";
-  filterIndex: 1
+
-})
+/**
+ * 拨打电话
+ * @param tel
+ */
+const call = (tel) => {
+  uni.makePhoneCall({
+    phoneNumber: tel
+  });
+}
+
 onLoad(() => {
-  data.globalData = inject('globalData')
+  init()
 })
 
+const userLocation = reactive({
+  lng: null,
+  lat: null,
+})
+
+//初始化
+const init = () => {
+  //获取师傅当前位置
+  uni.getLocation({
+    type: 'gcj02',
+    success(res) {
+      userLocation.lng = res.longitude
+      userLocation.lat = res.latitude
+      data.page = 1
+      getList()
+    },
+    fail(err) {
+      uni.showToast({
+        title: '请授权位置权限',
+        icon: "error"
+      })
+    }
+  });
+}
+
+const data = reactive({
+  type: 'ongoing',
+  page: 1,
+  page_size: 10,
+  last_page: 0,
+  is_show_skeleton: true,
+  list: []
+})
+const getList = () => {
+  let params = {
+    page: data.page,
+    page_size: data.page_size,
+    workbench_type: data.type,
+  }
+  api.workbenchOrderList(params).then(res => {
+    data.last_page = res.last_page
+    if (data.page === 1) {
+      data.list = res.data;
+    } else {
+      data.list = data.list.concat(helpers.deepObj(res.data))
+    }
+    data.is_show_skeleton = false
+  }).catch(() => {})
+}
+
 const listMarginTop = computed(() => {
-  return (data.globalData.statusBarH + (data.globalData.customBarH - data.globalData.statusBarH) + 50) * 2
+  let globalData = inject('globalData')
+  return (globalData.statusBarH + (globalData.customBarH - globalData.statusBarH) + 50) * 2
 })
 
-const filterType = reactive([
+const filterType = reactive({
-  {
+  'ongoing': {
-    id: 1,
     name: '进行中',
     num: 2,
-  }, {
+  },
+  'today': {
     id: 2,
     name: '今日',
     num: 2,
-  }, {
+  },
+  'tomorrow': {
     id: 3,
     name: '明日',
     num: 0,
-  }, {
+  },
+  'all': {
     id: 4,
     name: '全部',
     num: 724,
   },
-])
+})
 
-const filter = (index) => {
+const filter = (type) => {
-  data.filterIndex = index
+  data.type = type
 }
 </script>
 

static/css/common.scss

@@ -373,17 +373,30 @@ swiper .wx-swiper-dots .wx-swiper-dot{
       }
     }
   }
-  .status-ctr {
+  .operate-ctr {
     width: 100%;
     height: 80rpx;
     font-size: 28rpx;
     margin-top: 20rpx;
-    .status {
+    .status-ctr,.operate {
-      height: 60rpx;
+      width: 50%;
-      background: rgba(225,143,0,0.1);
+    }
-      border-radius: 8rpx;
+    .status-ctr {
-      padding: 0 16rpx;
+      .text {
-      color: #E18F00;
+        margin-left: 8rpx;
+        font-size: 30rpx;
+        color: #E18F00;
+      }
+    }
+    .operate {
+      .btn {
+        width: 186rpx;
+        height: 76rpx;
+        background: #E18F00;
+        border-radius: 16rpx;
+        font-size: 28rpx;
+        color: #FFFFFF;
+      }
     }
   }
 }