From 2a5181f49b65115558d8f8b17a0d8f2abfc26d90 Mon Sep 17 00:00:00 2001
From: mk <2403457699@qq.com>
Date: Thu, 16 May 2024 18:59:16 +0800
Subject: [PATCH] =?UTF-8?q?=E6=89=BE=E5=88=B0=E4=BA=86=E8=87=AA=E5=AE=9A?=
 =?UTF-8?q?=E4=B9=89=E6=A0=B7=E5=BC=8F=E4=B8=8D=E7=94=9F=E6=95=88=E7=9A=84?=
 =?UTF-8?q?=E9=97=AE=E9=A2=98,=E5=88=97=E8=A1=A8=E5=AE=9E=E7=8E=B0,?=
 =?UTF-8?q?=E5=88=97=E8=A1=A8=E6=A0=B7=E5=BC=8F=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 babel.config.js                |   5 +-
 src/api/index.js               |   4 +-
 src/api/service.js             |  21 ++++-
 src/assets/css/common.less     |  24 ++++--
 src/assets/css/vant-theme.less |   4 +-
 src/views/assistance/card.vue  | 143 ++++++++-------------------------
 src/views/assistance/index.vue |  77 +++++++++++++++---
 7 files changed, 138 insertions(+), 140 deletions(-)

diff --git a/babel.config.js b/babel.config.js
index 0355640..33ddb7a 100644
--- a/babel.config.js
+++ b/babel.config.js
@@ -1,4 +1,5 @@
 // 获取 VUE_APP_ENV 非 NODE_ENV，测试环境依然 console
+
 const IS_PROD = ['production', 'prod'].includes(process.env.VUE_APP_ENV)
 const plugins = [
   [
@@ -6,7 +7,7 @@ const plugins = [
     {
       libraryName: 'vant',
       libraryDirectory: 'es',
-      style: true
+      style: name => `${name}/style/less`
     },
     'vant'
   ]
@@ -17,6 +18,6 @@ if (IS_PROD) {
 }
 
 module.exports = {
-  presets: [['@vue/cli-plugin-babel/preset', {useBuiltIns: 'usage', corejs: 3}]],
+  presets: [['@vue/cli-plugin-babel/preset', { useBuiltIns: 'usage', corejs: 3 }]],
   plugins
 }
diff --git a/src/api/index.js b/src/api/index.js
index c8c57b2..b269942 100644
--- a/src/api/index.js
+++ b/src/api/index.js
@@ -2,7 +2,9 @@ const api = {
   Login: '/auth/login/govH5/loginByPassword',
   UserInfo: '/epmetuser/customerstaff/govH5/detail',
   Customerlist: '/epmetuser/customerstaff/customerlist',
-  ServiceList: '/governance/service/rcvAndProcess/waitingRcvServiceList'
+  ServiceListRcv: '/governance/service/rcvAndProcess/waitingRcvServiceList',
+  ServiceListProcess: '/governance/service/rcvAndProcess/waitingProcessServiceList',
+  ServiceListCompleted: '/governance/service/rcvAndProcess/completedServiceList'
 }
 
 export default api
diff --git a/src/api/service.js b/src/api/service.js
index 14aac96..5373b08 100644
--- a/src/api/service.js
+++ b/src/api/service.js
@@ -1,10 +1,25 @@
 import api from './index'
 import request from '@/utils/request'
-//获取列表
-export function getServiceList(params) {
+
+export function getServiceListRcv(params) {
   return request({
-    url: api.ServiceList,
+    url: api.ServiceListRcv,
     method: 'get',
     params
   })
 }
+export function getServiceListProcess(params) {
+    return request({
+      url: api.ServiceListProcess,
+      method: 'get',
+      params
+    })
+}
+export function getServiceListCompleted(params) {
+    return request({
+      url: api.ServiceListCompleted,
+      method: 'get',
+      params
+    })
+}
+  
diff --git a/src/assets/css/common.less b/src/assets/css/common.less
index 8d427da..5805215 100644
--- a/src/assets/css/common.less
+++ b/src/assets/css/common.less
@@ -26,6 +26,7 @@
   background-color: #fff;
   border-radius: 2px;
   box-shadow: 0 1px 3px rgba(0,0,0,.3);
+  padding: 15px;
   box-sizing: border-box;
   width: auto;
 }
@@ -57,23 +58,30 @@
     justify-content: flex-end;
   }
 }
-.m-top12{
-  margin-top: 12px;
-  &-left{
+.m{
+  &-left12{
     margin-left: 12px;
   }
-  &-right{
+  &-left18{
+    margin-left: 18px;
+  }
+  &-right12{
     margin-right: 12px;
   }
-}
-.m-top5{
-  margin-top: 5px;
+  &-right7{
+    margin-right: 7px;
+  }
+  &-top12{
+    margin-top: 12px;
+  }
+  &-top5{
+    margin-top: 5px;
+  }
   &-bottom{
     margin-bottom: 5px;
   }
 }
 
-
 .font-size13{
   font-size: 13px;
 }
diff --git a/src/assets/css/vant-theme.less b/src/assets/css/vant-theme.less
index 25374ca..39dc417 100644
--- a/src/assets/css/vant-theme.less
+++ b/src/assets/css/vant-theme.less
@@ -91,7 +91,7 @@
 @button-mini-height: 22px;
 @button-mini-min-width: 50px;
 @button-mini-font-size: @font-size-xs;
-@button-small-height: 30px;
+@button-small-height: 28px;
 @button-small-font-size: @font-size-sm;
 @button-small-min-width: 60px;
 @button-normal-font-size: @font-size-md;
@@ -536,7 +536,7 @@
 @tab-font-size: @font-size-md;
 
 // Tabs
-@tabs-default-color: @red;
+@tabs-default-color: @blue;
 @tabs-line-height: 44px;
 @tabs-card-height: 30px;
 @tabs-nav-background-color: @white;
diff --git a/src/views/assistance/card.vue b/src/views/assistance/card.vue
index ff9adcf..c89b360 100644
--- a/src/views/assistance/card.vue
+++ b/src/views/assistance/card.vue
@@ -1,123 +1,32 @@
 <template>
     <div class=''>
-        <div class="card rounded-corner">
-            <div class="m-top12 flex">
-                <van-tag type="primary" class="m-top12 m-top12-left">个性服务</van-tag>
-                <van-tag type="warning" class="m-top12 m-top12-left">共性需求</van-tag>
-                <div class="m-top12 m-top12-left opacity5 font-size13">
-                    公益事业类-社区困难群体生活帮扶
+        <div class="card rounded-corner m-top12" v-for="(item, index) in tableData">
+            <div class="flex">
+                <van-tag type="primary">个性服务</van-tag>
+                <van-tag type="warning">共性需求</van-tag>
+                <div class="  opacity5 m-left12 font-size13">
+                    {{ item.categoryName }}
                 </div>
             </div>
-            <div class="m-top5 m-top12-left">
-                <img src="@/assets/images/icon/address.png" class="small_img">
-                张玉宝 13636520003<br>
-                <div style="margin-left: 21px;" class="opacity5 font-size13 m-top5">重庆南路15号1号楼1单元101
-                </div>
-            </div>
-            <div class="m-top5 m-top12-left">
-                <img src="@/assets/images/icon/time.png" class="small_img">
-                2024-05-0215:00
-            </div>
-            <div class="m-top5 m-top12-left">
-                <div class="flex flex-center3">
-                    <img src="@/assets/images/icon/content.png" style="vertical-align: top;" class="small_img">
-                    <div>社区86岁独居老人，上下楼不方便，需要上门进行送餐服务。</div>
-                </div>
-            </div>
-            <hr class="m-top12-left  m-top12-right opacity5">
-            <div class="flex flex-fend m-top12-right">
-                <van-button size="small" type="info" class="rounded-corner m-top5-bottom"
-                    style="width: 60px;">接单</van-button>
-            </div>
-        </div>
-        <div class="card rounded-corner">
-            <div class="m-top12 flex">
-                <van-tag type="primary" class="m-top12 m-top12-left">个性服务</van-tag>
-                <van-tag type="warning" class="m-top12 m-top12-left">共性需求</van-tag>
-                <div class="m-top12 m-top12-left opacity5 font-size13">
-                    公益事业类-社区困难群体生活帮扶
-                </div>
+            <div class="m-top5 flex flex-center">
+                <img src="@/assets/images/icon/address.png" class="small_img m-right7">
+                {{ item.serviceTargetName }} {{ item.serviceTargetMobile }}<br>
             </div>
-            <div class="m-top5 m-top12-left">
-                <img src="@/assets/images/icon/address.png" class="small_img">
-                张玉宝 13636520003<br>
-                <div style="margin-left: 21px;" class="opacity5 font-size13 m-top5">重庆南路15号1号楼1单元101
+            <div class="opacity5 font-size13 m-top5" style="margin-left: 29px;">{{ item.serviceTargetAddresses }}
                 </div>
+            <div class="m-top5  flex flex-center">
+                <img src="@/assets/images/icon/time.png" class="small_img m-right7">
+                {{ item.serviceTimeStart }}
             </div>
-            <div class="m-top5 m-top12-left">
-                <img src="@/assets/images/icon/time.png" class="small_img">
-                2024-05-0215:00
-            </div>
-            <div class="m-top5 m-top12-left">
+            <div class="m-top5 ">
                 <div class="flex flex-center3">
-                    <img src="@/assets/images/icon/content.png" style="vertical-align: top;" class="small_img">
-                    <div>社区86岁独居老人，上下楼不方便，需要上门进行送餐服务。</div>
+                    <img src="@/assets/images/icon/content.png" style="vertical-align: top;" class="small_img m-right7">
+                    <div>{{ item.summary }}</div>
                 </div>
             </div>
-            <hr class="m-top12-left  m-top12-right opacity5">
+            <hr class="  m-top12-right opacity5">
             <div class="flex flex-fend m-top12-right">
-                <van-button size="small" type="info" class="rounded-corner m-top5-bottom"
-                    style="width: 60px;">接单</van-button>
-            </div>
-        </div>
-        <div class="card rounded-corner">
-            <div class="m-top12 flex">
-                <van-tag type="primary" class="m-top12 m-top12-left">个性服务</van-tag>
-                <van-tag type="warning" class="m-top12 m-top12-left">共性需求</van-tag>
-                <div class="m-top12 m-top12-left opacity5 font-size13">
-                    公益事业类-社区困难群体生活帮扶
-                </div>
-            </div>
-            <div class="m-top5 m-top12-left">
-                <img src="@/assets/images/icon/address.png" class="small_img">
-                张玉宝 13636520003<br>
-                <div style="margin-left: 21px;" class="opacity5 font-size13 m-top5">重庆南路15号1号楼1单元101
-                </div>
-            </div>
-            <div class="m-top5 m-top12-left">
-                <img src="@/assets/images/icon/time.png" class="small_img">
-                2024-05-0215:00
-            </div>
-            <div class="m-top5 m-top12-left">
-                <div class="flex flex-center3">
-                    <img src="@/assets/images/icon/content.png" style="vertical-align: top;" class="small_img">
-                    <div>社区86岁独居老人，上下楼不方便，需要上门进行送餐服务。</div>
-                </div>
-            </div>
-            <hr class="m-top12-left  m-top12-right opacity5">
-            <div class="flex flex-fend m-top12-right">
-                <van-button size="small" type="info" class="rounded-corner m-top5-bottom"
-                    style="width: 60px;">接单</van-button>
-            </div>
-        </div>
-        <div class="card rounded-corner">
-            <div class="m-top12 flex">
-                <van-tag type="primary" class="m-top12 m-top12-left">个性服务</van-tag>
-                <van-tag type="warning" class="m-top12 m-top12-left">共性需求</van-tag>
-                <div class="m-top12 m-top12-left opacity5 font-size13">
-                    公益事业类-社区困难群体生活帮扶
-                </div>
-            </div>
-            <div class="m-top5 m-top12-left">
-                <img src="@/assets/images/icon/address.png" class="small_img">
-                张玉宝 13636520003<br>
-                <div style="margin-left: 21px;" class="opacity5 font-size13 m-top5">重庆南路15号1号楼1单元101
-                </div>
-            </div>
-            <div class="m-top5 m-top12-left">
-                <img src="@/assets/images/icon/time.png" class="small_img">
-                2024-05-0215:00
-            </div>
-            <div class="m-top5 m-top12-left">
-                <div class="flex flex-center3">
-                    <img src="@/assets/images/icon/content.png" style="vertical-align: top;" class="small_img">
-                    <div>社区86岁独居老人，上下楼不方便，需要上门进行送餐服务。</div>
-                </div>
-            </div>
-            <hr class="m-top12-left  m-top12-right opacity5">
-            <div class="flex flex-fend m-top12-right">
-                <van-button size="small" type="info" class="rounded-corner m-top5-bottom"
-                    style="width: 60px;">接单</van-button>
+                <van-button size="small" type="info" class="rounded-corner m-top5-bottom">接单</van-button>
             </div>
         </div>
     </div>
@@ -126,7 +35,14 @@
 <script>
 export default {
     data() {
-        return {};
+        return {
+        };
+    },
+    props: {
+        tableData: {
+            type: Array,
+            default: () => []
+        }
     },
     created() { },
     methods: {},
@@ -136,4 +52,9 @@ export default {
 }
 </script>
 
-<style lang='less'></style>
+<style lang='less'>
+/deep/ .van-tabs__content{
+    padding: 0 10px;
+    box-sizing: border-box;
+}
+</style>
diff --git a/src/views/assistance/index.vue b/src/views/assistance/index.vue
index c87463a..7cdf7fd 100644
--- a/src/views/assistance/index.vue
+++ b/src/views/assistance/index.vue
@@ -1,11 +1,13 @@
 <template>
     <div class='pages' ref="scroll">
         <div class="scroll-box" ref="scroll-content">
-            <van-tabs :active="active" sticky>
+            <van-tabs :active="active" sticky @change="hadelChangeTab">
                 <van-tab title="待接单">
-                    <card></card>
+                    <card :tableData="list"></card>
+                </van-tab>
+                <van-tab title="待处理">
+                    <card :tableData="list"></card>
                 </van-tab>
-                <van-tab title="待处理">内容 2</van-tab>
                 <van-tab title="已完成">内容 3</van-tab>
             </van-tabs>
         </div>
@@ -14,7 +16,7 @@
 <script>
 import card from './card.vue'
 import throttle from 'lodash/debounce'
-import { getServiceList } from '@/api/service'
+import { getServiceListRcv, getServiceListProcess , getServiceListCompleted} from '@/api/service'
 export default {
     data() {
         return {
@@ -24,11 +26,12 @@ export default {
             pageNo: 1,
             pageSize: 10,
             list: [],
-            total:0
+            total: 0,
+            requestFlag:false
         };
     },
     created() {
-        this.getTableList()
+        this.getServiceListRcv()
     },
     mounted() {
         this.clientHeight = document.documentElement.clientHeight; //可视高度
@@ -37,30 +40,78 @@ export default {
             this.scroll = this.$refs.scroll;
             this.scroll.addEventListener('scroll', this.bottomScroll); //监听底部加载  		
         })
-
     },
     methods: {
+        hadelChangeTab(e){
+            this.list = [];
+            this.pageNo = 1;
+            this.active = e
+            this.getTableData('tab')
+        },
         //滚动加载
         bottomScroll: throttle(function () {
             let scrollTop = this.scroll.scrollTop; //滚动条距离顶部的高度
             let scrollHeight = this.scroll.scrollHeight; //滚动条的高度
             let clientHeight = this.scroll.clientHeight; //可视区域的高度
             if (scrollTop + clientHeight >= scrollHeight) {
-                console.log('到底了');
                 this.pageNo++;
-                this.getTableList();
+                this.getTableData()
             }
         }, 500),
-        getTableList(){
-            getServiceList({
+
+        getTableData(tab){
+            if ((this.active === 0 && this.requestFlag) || (tab && this.active === 0)) {
+                    this.getServiceListRcv();
+                } else if ((this.active === 1 && this.requestFlag) || (tab && this.active === 1)) {
+                    this.getServiceListProcess();
+                }else if((this.active === 2 && this.requestFlag ) || (tab && this.active === 2)){
+                    this.getServiceListCompleted()
+                }
+                if(!this.requestFlag){
+                    this.$toast({
+                        message: '没有更多数据了',
+                        duration: 1000
+                    })
+                }
+        },
+        //获取待接单
+        getServiceListRcv() {
+            getServiceListRcv({
                 pageNo: this.pageNo,
                 pageSize: this.pageSize
             }).then(res => {
                 console.log(res);
                 this.total = res.total;
-                this.list = this.list.concat(...this.list,...res.list);
-            }).catch(err=>{
+                // this.requestFlag = res.list.length === this.pageSize;
+                this.list = res.data.list;
+                console.log(this.list,'see');
+            }).catch(err => {
+
+            })
+        },
+        // 获取待处理
+        getServiceListProcess() {
+            getServiceListProcess({
+                pageNo: this.pageNo,
+                pageSize: this.pageSize
+            }).then(res => {
+                this.total = res.total;
+                // this.requestFlag = res.length === this.pageSize;
+                this.list = res.data.list;
 
+            }).catch(err => {
+            })
+        },
+        // 获取已完成
+        getServiceListCompleted(){
+            getServiceListCompleted({
+                pageNo: this.pageNo,
+                pageSize: this.pageSize
+            }).then(res => {
+                this.total = res.total;
+                this.requestFlag = res.length === this.pageSize;
+                this.list = this.list.concat(...this.list, ...res.list);
+            }).catch(err => {
             })
         }
     },