✨ feat: 陪伴用户页面API联调

 <!--
  * @Date: 2022-09-21 14:51:44
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2022-10-25 18:29:15
+ * @LastEditTime: 2022-10-26 15:52:42
  * @FilePath: /swx/src/pages/my/index.vue
  * @Description: 我的页面
 -->
@@ -84,13 +84,17 @@ import { hostListAPI } from '@/api/Host/index'
 import Toast from '@/components/vant-weapp/toast/toast';
 
 const host_id = ref('');
+const join_hosts = ref([])
 onMounted(async () => {
   // 获取主办方列表信息
-  const { code, data } = await hostListAPI();
+  const { code, data } = await hostListAPI({ is_join: 1 });
   if (code) {
     if (data.my_hosts.length) {
       host_id.value = data.my_hosts[0]?.id
     }
+    if (data.join_hosts.length) {
+      join_hosts.value = data.join_hosts
+    }
   }
 })
 
@@ -111,11 +115,16 @@ const createActivity = () => {
   })
 }
 // 陪伴的用户
-const followUser = () => {
-  Taro.navigateTo({
-    url: '../myFollowUser/index'
-  })
+const followUser = async () => {
+  if (join_hosts.value.length) {
+    Taro.navigateTo({
+      url: '../myFollowUser/index?host_id=' + join_hosts.value[0]['id']
+    })
+  } else {
+    Toast('您还加入过义工')
+  }
 }
+
 // 我的主办方
 const myProject = () => {
   Taro.navigateTo({
@@ -154,13 +163,13 @@ export default {
       })
       this.activity_list = data.activity_list;
       this.nickname = data.user.nickname;
-      this.avatar = data.user.avatar ? data.user.avatar : 'https://jdc.jd.com/img/200';
+      this.avatar = data.user.avatar ? data.user.avatar : 'http://gyzs.onwall.cn/tou%402x.png';
     }
   },
   methods: {
     formatDate (date) {
       return dayjs(date).format('YYYY-MM-DD HH:mm')
-    }
+    },
   }
 };
 </script>

 <!--
  * @Date: 2022-09-19 14:11:06
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2022-10-08 15:21:37
+ * @LastEditTime: 2022-10-26 15:49:57
  * @FilePath: /swx/src/pages/myFollowUser/index.vue
- * @Description: 文件描述
+ * @Description: 陪伴的用户页面
 -->
 <template>
   <div class="my-create-activity-page">
-    <view style="width: 100%; background-image: url(http://gyzs.onwall.cn/userinfo_bg-top%402x.png); background-size: contain; background-repeat: no-repeat;">
+    <view id="page-header" style="width: 100%; background-image: url(http://gyzs.onwall.cn/userinfo_bg-top%402x.png); background-size: contain; background-repeat: no-repeat;">
       <view style="height: 4rem; padding: 1rem;">
         <van-row>
           <van-col span="18">
             <view style="position: relative;">
-              <AtAvatar circle size="large" image='https://jdc.jd.com/img/200' style="display: inline-block;"></AtAvatar>
+              <AtAvatar circle size="large" :image='icon_company' style="display: inline-block;"></AtAvatar>
               <view style="display: inline-block; position: absolute; top: 30%; left: 28%;">
-                <text style="font-size: 1.05rem;">周三读书会（主办方）</text>
-                <van-icon :name="icon_vip" size="1rem" color="" class="vip-icon" />
+                <text style="font-size: 1.05rem;">{{ host_name }}</text>
+                <!-- <van-icon :name="icon_vip" size="1rem" color="" class="vip-icon" /> -->
               </view>
             </view>
           </van-col>
           <van-col span="6">
-            <view @tap="editInfo()" style="background-color: #DABE73; color: white; padding: 0.5rem 0; border-radius: 1rem; text-align: center; font-size: 0.85rem;margin-top: 1rem;">切换主办方</view>
+            <view @tap="show_host_popup=true" style="background-color: #DABE73; color: white; padding: 0.5rem 0; border-radius: 1rem; text-align: center; font-size: 0.85rem;margin-top: 1rem;">切换主办方</view>
           </van-col>
         </van-row>
       </view>
@@ -32,25 +32,25 @@
         </view>
         <view class="header-info">
           <view class="activity">
-            <view><text style="font-size: 1.25rem;">5</text>人</view>
+            <view><text style="font-size: 1.25rem;">{{ new_count }}</text>人</view>
             <view>
               <text style="font-size: 0.9rem; color: #999999;">新用户</text>
             </view>
           </view>
           <view class="job">
-            <text style="font-size: 1.25rem;">24</text>人
+            <text style="font-size: 1.25rem;">{{ no_partner_note_count }}</text>人
             <view>
               <text style="font-size: 0.9rem; color: #999999;">待陪伴</text>
             </view>
           </view>
           <view class="job">
-            <text style="font-size: 1.25rem;">24</text>人
+            <text style="font-size: 1.25rem;">{{ member_count }}</text>人
             <view>
               <text style="font-size: 0.9rem; color: #999999;">用户总数</text>
             </view>
           </view>
           <view class="sign">
-            <view><text style="font-size: 1.25rem;">233</text>次</view>
+            <view><text style="font-size: 1.25rem;">{{ note_count }}</text>次</view>
             <view>
               <text style="font-size: 0.9rem; color: #999999;">跟踪总数</text>
             </view>
@@ -59,82 +59,72 @@
       </view>
     </view>
     <view class="list-wrapper" style="margin: 1rem;">
-      <view style="background-color: white; border-radius: 0.65rem; padding: 1rem;overflow: auto; margin-bottom: 1px;">
+      <view id="navbar-page" style="background-color: white; border-radius: 0.65rem; padding: 1rem;overflow: auto; margin-bottom: 1px;">
         <view style="display: inline-block; margin-right: 1rem; line-height: 60rpx;">
           <view @tap="toggleColum('activity')" :class="[activated === 1 ? 'bg-gradient' : 'inactivate']" style="font-size: 1rem;">全部用户</view>
         </view>
         <view style="display: inline-block; line-height: 60rpx; position: relative;">
           <view @tap="toggleColum('join')" :class="[activated === 2 ? 'bg-gradient' : 'inactivate']">待陪伴</view>
-          <view style="position: absolute; right: -1rem; top: 0; color: white; background-color: red; border-radius: 0.58rem; width: 1rem; height: 1rem; font-size: 0.8rem; line-height: 1rem; text-align: center;">2</view>
+          <view v-if="no_partner_note_count" style="position: absolute; right: -1rem; top: 0; color: white; background-color: red; border-radius: 0.58rem; width: 1rem; height: 1rem; font-size: 0.8rem; line-height: 1rem; text-align: center;">{{ no_partner_note_count }}</view>
         </view>
       </view>
-      <view>
-        <view v-for="(item, index) in activityList" :key="index" class="list-item">
-          <van-row>
-            <van-col span="6">
-              <view @tap="goToUserInfo()" class="avatar" :style="{ backgroundImage: `url(${item.avatar})`, position: 'relative' }">
-                <view style="position: absolute; right: -0.5rem; top: -0.5rem; background-color: #FCEAE7; border-radius: 0.58rem; width: 1.2rem; height: 1.2rem; font-size: 0.7rem; line-height: 1.2rem; text-align: center; color: #E21A1A;">新</view>
-              </view>
-            </van-col>
-            <van-col span="18">
-              <view class="content">
-                <view class="title">{{ item.name }}</view>
-                <!-- <view class="phone" @tap="onPhoneClick(item.phone)">
-                  <van-icon :name="icon_tel" color="" size="1.25rem" style="vertical-align: sub;" />
-                  {{ item.phone }}
-                </view> -->
-                <view style="color: #999999;">时间描述</view>
-                <view style="color: #999999;" class="van-ellipsis">对比上次净妙这次参与活动明显的能够融入进</view>
-              </view>
-            </van-col>
-          </van-row>
+      <scroll-view :scroll-y="true" :style="scrollStyle" @scrolltolower="onScrollToLower">
+        <view>
+          <view v-for="(item, index) in member_list" :key="index" class="list-item">
+            <van-row>
+              <van-col span="6">
+                <view @tap="goToUserInfo(item.id)" class="avatar" :style="{ backgroundImage: `url(${item.avatar ? item.avatar : 'http://gyzs.onwall.cn/tou%402x.png'})`, position: 'relative' }">
+                  <view v-if="item.is_new" style="position: absolute; right: -0.5rem; top: -0.5rem; background-color: #FCEAE7; border-radius: 0.58rem; width: 1.2rem; height: 1.2rem; font-size: 0.7rem; line-height: 1.2rem; text-align: center; color: #E21A1A;">新</view>
+                </view>
+              </van-col>
+              <van-col span="18">
+                <view class="content">
+                  <view class="title">{{ item.name }}</view>
+                  <view v-if="activated === 2" class="phone" @tap="onPhoneClick(item.phone)">
+                    <van-icon :name="icon_tel" color="" size="1.25rem" style="vertical-align: sub;" />
+                    {{ item.phone }}
+                  </view>
+                  <view v-if="activated === 1 && item.last_partner_note">
+                    <view style="color: #999999;">{{ formatDate(item.last_partner_note.created_time) }}</view>
+                    <view style="color: #999999;" class="van-ellipsis">{{ item.last_partner_note.note }}</view>
+                  </view>
+                </view>
+              </van-col>
+            </van-row>
+          </view>
         </view>
-      </view>
+      </scroll-view>
     </view>
     <view style="height: 2rem;"></view>
   </div>
 
+  <!-- 切换主办方弹出框 -->
+  <van-popup :show="show_host_popup" position="bottom" custom-style="height: 50%;" :lock-scroll="true">
+    <van-picker :show-toolbar="true" title="" confirm-button-text="确定" :columns="host_columns"
+      toolbar-class="picker-toolbar" @confirm="onHostConfirm" @cancel="onHostCancel" />
+  </van-popup>
+
+  <van-toast id="van-toast" />
+
 </template>
 
 <script setup>
 import { ref } from "vue";
-import icon_vip from '@/images/icon/vip@2x.png'
-import Taro from '@tarojs/taro'
-import { AtAvatar } from 'taro-ui-vue3'
-import "taro-ui-vue3/dist/style/components/avatar.scss"
-import icon_tel from '@/images/icon/tel@2x.png'
-
-const activityList = ref([{
-  avatar: 'https://img.yzcdn.cn/vant/cat.jpeg',
-  name: '净妙',
-  phone: '18789800786',
-  status: '1',
-}, {
-  avatar: 'https://img.yzcdn.cn/vant/cat.jpeg',
-  name: '人在路途',
-  phone: '18789800786',
-  status: '2',
-}, {
-  avatar: 'https://img.yzcdn.cn/vant/cat.jpeg',
-  name: '寒潭秋月心如洗',
-  phone: '18789800786',
-  status: '3',
-}, {
-  avatar: 'https://img.yzcdn.cn/vant/cat.jpeg',
-  name: '净妙',
-  phone: '18789800786',
-  status: '1',
-}, {
-  avatar: 'https://img.yzcdn.cn/vant/cat.jpeg',
-  name: '人在路途',
-  phone: '18789800786',
-  status: '2',
-}, {
-  avatar: 'https://img.yzcdn.cn/vant/cat.jpeg',
-  name: '寒潭秋月心如洗',
-  phone: '18789800786',
-  status: '3',
-}])
+import icon_vip from '@/images/icon/vip@2x.png';
+import Taro from '@tarojs/taro';
+import { AtAvatar } from 'taro-ui-vue3';
+import "taro-ui-vue3/dist/style/components/avatar.scss";
+import icon_tel from '@/images/icon/tel@2x.png';
+import icon_company from '@/images/icon/zhubanfang@2x.png';
+import Toast from '@/components/vant-weapp/toast/toast';
+import { $ } from '@tarojs/extend'
+import mixin from '@/utils/mixin';
+import { getCurrentPageParam } from "@/utils/weapp";
+import { hostListAPI } from '@/api/Host/index'
+import * as dayjs from 'dayjs'
+const formatDate = (date) => {
+  return dayjs(date).format('YYYY-MM-DD HH:mm')
+}
 
 const onPhoneClick = (number) => {
   Taro.makePhoneCall({
@@ -142,57 +132,150 @@ const onPhoneClick = (number) => {
   })
 }
 
-const activated = ref(1);
-const toggleColum = (type) => {
-  if (type === 'activity') {
-    activityList.value = [{
-      avatar: 'https://img.yzcdn.cn/vant/cat.jpeg',
-      name: '净妙',
-      phone: '18789800786',
-      status: '1',
-    }, {
-      avatar: 'https://img.yzcdn.cn/vant/cat.jpeg',
-      name: '人在路途',
-      phone: '18789800786',
-      status: '2',
-    }, {
-      avatar: 'https://img.yzcdn.cn/vant/cat.jpeg',
-      name: '寒潭秋月心如洗',
-      phone: '18789800786',
-      status: '3',
-    }, {
-      avatar: 'https://img.yzcdn.cn/vant/cat.jpeg',
-      name: '净妙',
-      phone: '18789800786',
-      status: '1',
-    }, {
-      avatar: 'https://img.yzcdn.cn/vant/cat.jpeg',
-      name: '人在路途',
-      phone: '18789800786',
-      status: '2',
-    }, {
-      avatar: 'https://img.yzcdn.cn/vant/cat.jpeg',
-      name: '寒潭秋月心如洗',
-      phone: '18789800786',
-      status: '3',
-    }];
-    activated.value = 1
-  } else {
-    activityList.value = [];
-    activated.value = 2
-  }
-}
-
-const goToUserInfo = () => {
+const goToUserInfo = (member_id) => {
   Taro.navigateTo({
-    url: '../userInfo/index'
+    url: '../userInfo/index?member_id=' + member_id
   })
 }
 </script>
 
 <script>
 import "./index.less";
+import { traceMemberAPI } from '@/api/Member/index'
+
 export default {
-  name: "demoPage",
+  name: "myFollowUserPage",
+  mixins: [mixin.init],
+  async onShow () {
+    // 获取主办方列表信息
+    const host = await hostListAPI({ is_join: 1 });
+    if (host.code) {
+      host.data.join_hosts.forEach(item => {
+        if (item.id == getCurrentPageParam().host_id) {
+          this.host_id = item.id;
+          this.host_name = item.name;
+        }
+        item.text = item.name;
+        item.key = item.id;
+      });
+      this.host_columns = host.data.join_hosts;
+    }
+    // 获取我陪伴的用户列表
+    const params = {
+      host_id: getCurrentPageParam().host_id,
+      is_partner_note: this.activated === 1 ? '' : 0,
+      search: this.search,
+      page: this.page,
+      limit: this.limit
+    }
+    const { code, data } = await traceMemberAPI(params);
+    if (code) {
+      this.member_list = data.member_list;
+      this.new_count = data.new_count;
+      this.no_partner_note_count = data.no_partner_note_count;
+      this.member_count = data.member_count;
+      this.note_count = data.note_count;
+      this.page = this.page + 1;
+      this.flag = true;
+    }
+  },
+  onHide () { // 离开当前页面
+    this.page = 0;
+    this.flag = true;
+  },
+  mounted () {
+    // 设置滚动列表可视高度
+    const windowHeight = wx.getSystemInfoSync().windowHeight;
+    setTimeout(async () => {
+      const headerHeight = await $('#page-header').height();
+      const navHeight = await $('#navbar-page').height();
+      this.scrollStyle = {
+        height: windowHeight - headerHeight - navHeight - 50 + 'px'
+      }
+    }, 500);
+  },
+  data() {
+    return {
+      member_list: [],
+      activated: 1,
+      flag: true,
+      page: 0,
+      limit: 10,
+      scrollStyle: { height: '1000rpx' },
+      search: '',
+      new_count: 0,
+      no_partner_note_count: 0,
+      member_count: 0,
+      note_count: 0,
+      show_host_popup: false,
+      host_columns: [],
+      host_id: '',
+      host_name: '',
+    };
+  },
+  methods: {
+    formatDate (date) {
+      return dayjs(date).format('YYYY-MM-DD HH:mm')
+    },
+    onScrollToLower () {
+      if(!this.flag){
+        return
+      }
+      this.flag = false;
+      this.getList();
+    },
+    async getList () {
+      // 获取我陪伴的用户列表
+      const params = {
+        host_id: this.host_id,
+        is_partner_note: this.activated === 1 ? '' : 0,
+        search: this.search,
+        page: this.page,
+        limit: this.limit
+      }
+      const { code, data } = await traceMemberAPI(params);
+      if (code) {
+        if (data.member_list.length) {
+          this.member_list = this.member_list.concat(data.member_list);
+          this.new_count = data.new_count;
+          this.no_partner_note_count = data.no_partner_note_count;
+          this.member_count = data.member_count;
+          this.note_count = data.note_count;
+          this.page = this.page + 1;
+          this.flag = true;
+        } else {
+          Toast('没有数据')
+        }
+      }
+    },
+    onHostConfirm (event) {
+      const { picker, value, index } = event.detail;
+      this.show_host_popup = false;
+      this.host_id = value.key;
+      this.host_name = value.text;
+      // 缓存主办方ID
+      // wx.setStorageSync('chang_host_id', value.key);
+      // 查询数据
+      this.member_list = [];
+      this.flag = true;
+      this.page = 0;
+      this.getList();
+    },
+    onHostCancel (event) {
+      this.show_host_popup = false;
+    },
+    toggleColum (type) {
+      if (type === 'activity') { // 全部用户
+        this.activated = 1;
+      } else { // 待陪伴
+        this.activated = 2;
+      }
+      // 重置条件
+      this.page = 0;
+      this.member_list = [];
+      this.flag = false;
+      this.getList();
+    },
+  },
 };
 </script>