hlm_pl_mall_h5/pages/member/friend/FriendList.vue

<template><page-meta :root-font-size="fontSize+'px'"></page-meta>
    <member-base :show="false"><view style="position: absolute;top:0;right:0;left:0;bottom:0" class="scroll-view-wrapper div container member-friend-list">
        <view class="div common-header-wrap">
            <view class="status-holder"></view>
            <view :style="'height:'+navHeight+'px'"></view>
            <view class="common-header-holder"></view>
            <view class="common-header-fixed">
            <title-header />
            <uni-nav-bar title="好友列表" class="common-header" left-icon="back" @clickLeft="goBack()">
            </uni-nav-bar>
        </view>
        </view>
        <view class="scroll-view div" style="position:relative">
        <scroll-view style="position: absolute;top:0;right:0;left:0;bottom:0" class="div" @scrolltolower="loadMore" scroll-y="true">
            <uni-swipe-action class="div" v-if="friend_list">
                <uni-swipe-action-item class="goods-item"  v-for="(item, index) in friend_list" v-bind:key="item.u_id" :right-options="rightOptions" @click="rightBottom($event,item.u_id)">
                    <view class="div" @click="goChat(item.u_id,item.u_name)">
                        <view class="div p-img">
                            <image mode="aspectFit" class="img collection-img" v-bind:src="item.avatar"/>
                        </view>
                        <view class="div flex-right">
                            <text class="span title ml-10">{{ item.u_name }}</text>
                        </view>
                    </view>
                </uni-swipe-action-item>
            </uni-swipe-action>
            <empty-record v-if="friend_list && friend_list.length===0"></empty-record>
        </scroll-view>
        </view>
		<view class='common-add-btn-wrapper'><view class="div common-btn common-add-btn"  @click="search">添加好友</view></view>
        <uni-popup background-color="#fff" ref="searchVisible" type="right" >
            <view :style="'width:'+screenWidth+'px'" class="scroll-view-wrapper common-popup-wrapper">
            <view class="div common-header-wrap">
                <view :style="'height:'+navHeight+'px'"></view>
                <view class="common-header-holder"></view>
                <view class="common-header-fixed">
                <title-header />
                <uni-nav-bar title="添加好友" class="common-header" left-icon="back" @clickLeft="hidePopup('searchVisible')">
                </uni-nav-bar>
            </view>
            </view>
            <view class="div common-popup-content">
                <scroll-view style="position: absolute;top:0;right:0;left:0;bottom:0" class="scroll-view div" @scrolltolower="loadMore2" scroll-y="true">
                    <view class="div" v-if="friend_list2">
                        <view class="div goods-item mt-5"  v-for="(item, index) in friend_list2" v-bind:key="item.u_id">
                            <view class="div">
                                <view class="div p-img">
                                    <image mode="aspectFit" class="img collection-img" v-bind:src="item.avatar"/>
                                </view>
                                <view class="div flex-right">
                                    <text class="span title ml-10">{{ item.u_name }}</text>
                                </view>
                                <view class="div common-btn ds-button-small button" @click="rightBottom2(item.u_id)">添加</view>
                            </view>
                        </view>
                    </view>
                    <empty-record v-if="friend_list2 && friend_list2.length===0"></empty-record>
                </scroll-view>
            </view>
        </view>
        </uni-popup>
    </view>
<uni-popup background-color="#fff" ref="confirm" type="dialog">
    <uni-popup-dialog :mode="dialog.mode" :title="dialog.title" :content="dialog.content" :placeholder="dialog.content" @confirm="confirmDialog" @close="closeDialog"></uni-popup-dialog>
</uni-popup>
</member-base>
</template>

<script>
import {getFontSize} from '@/util/common'
import TitleHeader from '../../TitleHeader'
import { urlencode } from '@/util/common'
import MemberBase from '../MemberBase'
import EmptyRecord from '../../EmptyRecord'
import { mapState, mapActions } from 'vuex'
import { getFriendList, delFriend, searchFriend, addFriend } from '../../../api/memberFriend'
export default {
  data(){
    return {
      navHeight: 0,
      rightOptions:[{text:'删除',style:{backgroundColor:'#dd524d'}}],
      dialog:{},
      screenWidth:0,
      keyword: '',
      friend_list2: false,
      friend_list: false,
      params: { 'page': 0, 'per_page': 10 },
      loading: false, // 是否加载更多
      isMore: true, // 是否有更多
      params2: { 'page': 0, 'per_page': 10 },
      loading2: false, // 是否加载更多
      isMore2: true // 是否有更多
    }
  },
  components:{
    TitleHeader,
    MemberBase,
    EmptyRecord: EmptyRecord
  },
  created () {
    this.fetchConfig({}).then(
      response => {
      },
      error => {
        uni.showToast({icon:'none',title: error.message})
      }
    )
    this.loadMore()
    this.loadMore2()
  },
  computed:{
    fontSize(){
      return getFontSize()
    },
    ...mapState({
      config: state => state.config.config
    })
  },
  watch: {

  },

  mounted(){

    // #ifdef  MP-WEIXIN

    this.navHeight = uni.getMenuButtonBoundingClientRect().top

    // #endif

    this.screenWidth=uni.getSystemInfoSync().screenWidth

  },
  methods:{
    closeDialog(){
    },
    confirmDialog(value){
      switch(this.dialog.condition){
        case 1:
        this.keyword = value
        this.reload2()
        this.showPopup('searchVisible')
          break
        case 2:
          this.delFriend(this.dialog.data)
      }
    },
    showPopup(id){
      this.$refs[id].open()
    },
    hidePopup(id){
      this.$refs[id].close()
    },
    goBack(){uni.navigateBack({delta:1})},
    ...mapActions({
      fetchConfig: 'fetchConfig'
    }),
    goChat (user_id,user_name) {
      if (this.config.instant_message_open !== '1' || !this.config.instant_message_gateway_url) {
        uni.showToast({icon:'none',title: '未开启即时聊天'})
      } else {
        uni.navigateTo({ url: '/pages/member/chat/ChatInfo'+'?'+urlencode( { t_id: user_id,t_name:user_name } )})
      }
    },
    search () {
      this.dialog={condition:1,mode:'input',content:'请输入用户名'}
      this.$refs.confirm.open()
    },
    rightBottom (e,userId) {
      this.dialog={condition:2,title:'确认删除',content:'是否要删除该好友？',data:userId}
      this.$refs.confirm.open()
    },
    rightBottom2 (userId) {
      addFriend(userId).then(res => {
        uni.showToast({icon:'none',title: res.message})
        this.reload()
        this.hidePopup('searchVisible')
      }).catch(function (error) {
        uni.showToast({icon:'none',title: error.message})
      })
    },
    delFriend (userId) {
      delFriend(userId).then(res => {
        this.reload()
      }).catch(function (error) {
        uni.showToast({icon:'none',title: error.message})
      })
    },
    loadMore () {
      this.loading = true
      this.params.page = ++this.params.page
      if (this.isMore) {
        this.loading = false
        this.getFriendList(true)
      }
    },

    getFriendList () {
      uni.showLoading({ title: '加载中' })

      getFriendList(this.params).then(res => {
        uni.hideLoading()
        if (res.result.hasmore) {
          this.isMore = true
        } else {
          this.isMore = false
        }

        let temp = res.result.friend_list
        if (temp) {
          if (!this.friend_list) {
            this.friend_list = temp
          } else {
            this.friend_list.concat(temp)
          }
        }
      }).catch(function (error) {
        uni.hideLoading()
        uni.showToast({icon:'none',title: error.message})
      })
    },
    reload () {
      this.params = { 'page': 0, 'per_page': 10 }
      this.friend_list = false
      this.loading = false
      this.isMore = true
      this.loadMore()
    },
    reload2 () {
      this.params2 = { 'page': 0, 'per_page': 10 }
      this.friend_list2 = false
      this.loading2 = false
      this.isMore2 = true
      this.loadMore2()
    },

    loadMore2 () {
      this.loading2 = true
      this.params2.page = ++this.params2.page
      if (this.isMore2) {
        this.loading2 = false
        this.getFriendList2(true)
      }
    },

    getFriendList2 () {
      uni.showLoading({ title: '加载中' })

      searchFriend(this.params2, this.keyword).then(res => {
        uni.hideLoading()
        if (res.result.hasmore) {
          this.isMore2 = true
        } else {
          this.isMore2 = false
        }

        let temp = res.result.member_list
        if (temp) {
          if (!this.friend_list2) {
            this.friend_list2 = temp
          } else {
            this.friend_list2 = this.friend_list2.concat(temp)
          }
        }
      }).catch(function (error) {
        uni.hideLoading()
        uni.showToast({icon:'none',title: error.message})
      })
    }

  }

}
</script>
<style lang="scss" scoped>
.scroll-view-wrapper{display: flex;flex-direction: column;}
.scroll-view{flex:1}
.common-header{
        .btn{background: #000;color: #fff;box-shadow: 0px 2px 4px #d2d2d2;}
    }
    .goods-item{height:3rem;width:100%;border-bottom: 3px solid #f5f5f5;}
    .goods-item .p-img{float:left;padding:0.25rem 0;margin-left:0.5rem;}
    .goods-item .p-img .img{width:2.5rem;height:2.5rem;border-radius:50%}
    .flex-right {float:left;}
    .flex-right .span{line-height:3rem;display:block;float:left;font-size:$subFontSize;}
    .button{float:right;margin-right:.5rem;margin-top:.7rem;display:flex;align-items:center;justify-content:center;}
</style>

<!--Cell Swipe样式覆盖 -->
<style lang="scss">
.member-friend-list{
    .goods-item .mint-cell-swipe-button {
        width: 4.5rem;
        font-size:$subFontSize;
        display: flex !important;
        justify-content: center;
        align-items: center;
        box-sizing: border-box;
    }
    .goods-item .mint-cell-wrapper {
        padding: 0;
    }
    .goods-item .mint-cell-wrapper .mint-cell-value {
        width: 100%;
        border-bottom: 1px solid rgba(232, 234, 237, 1);
    }
}
</style>