uni-app 124转发功能实现（四）

本篇文章主要讲的是处理留言的发送

下图是我测试的截图

pages/chat/chat-list/chat-list.vue

<template>
  <view class="page">
    <!-- 导航栏 -->
    <free-nav-bar title="选择" showBack :showRight="true">
      <free-main-button :name="muliSelect ? '发送 ('+selectCount+')' : '多选'" slot="right" @click="handlenNav">
      </free-main-button>
    </free-nav-bar>
    <!-- 搜索框 -->
    <view class="p-3 bg-light position-fixed left-0 right-0" :style="'top:'+top+'px;'" style="z-index: 2;">
      <input type="text" value="" v-model="keyword" placeholder="搜索" class="bg-white rounded"
        placeholder-class="text-center" style="height: 80rpx;" />
    </view>
    <view style="height:140rpx;"></view>

    <free-list-item v-for="(item,index) in allList" :key="index" :title="item.name"
      :cover="item.avatar || '/static/images/userpic.png'" showRight :showRightIcon="false"
      @click="selectItem(item)">
      <view v-if="muliSelect" slot="right" class="border rounded-circle flex align-center"
        style="width: 40rpx;height: 40rpx;">
        <view v-if="item.checked" class="main-bg-color rounded-circle" style="width: 39rpx;height: 39rpx;">
        </view>
      </view>
    </free-list-item>

    <view style="height:100rpx;" class="flex align-center justify-center"
      v-if="keyword !== '' && searchList.length === 0">
      <text class="font text-light-muted">暂无搜索结果</text>
    </view>
    <free-confirm ref="confirm" title="发送给:">
      <scroll-view v-if="selectCount > 0" scroll-x="true" :show-scrollbar='false'>
        <view class="flex">
          <view class="mr-1" v-for="(item,index) in selectList" :key="index">
            <free-avatar :src="item.avatar" size="60"></free-avatar>
          </view>
        </view>
      </scroll-view>
      <view class="flex" v-else>
        <free-avatar :src="sendItem.avatar" size="60"></free-avatar>
        <text class="font text-muted ml-2">{{sendItem.name}}</text>
      </view>
      <view class="my-3 bg-light rounded p-2">
        <text class="font text-light-muted">{{message}}</text>
      </view>
      <input type="text" value="" class="border-bottom font-md" style="height: 60rpx;" placeholder="给朋友留言" v-model="content" />
    </free-confirm>
  </view>
</template>

<script>
  import freeNavBar from '@/components/free-ui/free-nav-bar.vue';
  import freeMainButton from '@/components/free-ui/free-main-button.vue';
  import freeListItem from '@/components/free-ui/free-list-item.vue';
  import freeConfirm from '@/components/free-ui/free-confirm.vue';
  import freeAvatar from '@/components/free-ui/free-avatar.vue';
  import {
    mapState
  } from 'vuex';
  export default {
    components: {
      freeNavBar,
      freeMainButton,
      freeListItem,
      freeConfirm,
      freeAvatar
    },
    data() {
      return {
        keyword: '',
        muliSelect: false,
        top: 0,
        list: [],
        detail: {},
        sendItem: {},
        content:''
      }
    },
    computed: {
      ...mapState({
        chatList: state => state.user.chatList,
        chat: state => state.user.chat,
      }),
      // 最终列表
      allList() {
        return this.keyword === '' ? this.list : this.searchList;
      },
      // 搜索结果列表
      searchList() {
        if (this.keyword === '') {
          return [];
        }
        return this.list.filter(item => {
          return item.name.indexOf(this.keyword) !== -1;
        })
      },
      // 选中列表
      selectList() {
        return this.list.filter(item => item.checked)
      },
      // 选中数量
      selectCount() {
        return this.selectList.length;
      },
      message() {
        let obj = {
          image: '[图片]',
          video: '[视频]',
          audio: '[语音]',
          card: '[名片]',
          emoticon: '[表情]'
        };
        return this.detail.type === 'text' ? this.detail.data : obj[this.detail.type];
      }
    },
    methods: {
      // 点击导航栏 (群发)
      handlenNav() {
        if (!this.muliSelect) {
          return this.muliSelect = true;
        }
        // 发送
        if (this.selectCount === 0) {
          return uni.showToast({
            title: '请先选择',
            icon: 'none'
          });
        }
        this.$refs.confirm.show((close) => {
          this.selectList.forEach(item => {
            this.send(item)
            
            if (this.content) {
              this.send(item, this.content, 'text')
            }
          });
          close();
          uni.reLaunch({
            url: "../../tabbar/index/index"
          })
        });
      },
      // 选中、取消选中
      selectItem(item) {
        // 选中、取消选中
        if (this.muliSelect) {
          // 选中
          if (!item.checked && (this.selectCount === 9)) {
            // 限制选中数量
            return uni.showToast({
              title: '最多选中9个',
              icon: 'none'
            })
          }
          
          // 取消选中
          return item.checked = !item.checked;
        }
        // 发送
        this.sendItem = item;
        this.$refs.confirm.show((close) => {
          this.send(item);
          
          if (this.content) {
            this.send(item, this.content, 'text')
          }
          
          close();
          uni.reLaunch({
            url: "../../tabbar/index/index"
          })
        });
      },
      send(item,data=false,type = false) {
        let message = this.chat.formatSendData({
          to_id: item.id,
          to_name: item.name,
          to_avatar: item.avatar,
          data:data || this.detail.data,
          type:type || this.detail.type,
          chat_type:item.chat_type,
          options: this.detail.opitons
        });
        this.chat.send(message);
        uni.$emit('updateHistory',false);
        
      }
    },
    onLoad(e) {
      let res = uni.getSystemInfoSync();
      this.top = res.statusBarHeight + uni.upx2px(90);
      this.list = this.chatList.map(item => {
        return {
          ...item,
          checked: false
        }
      })

      if (e.params) {
        this.detail = JSON.parse(decodeURIComponent(e.params))
      }
    }
  }
</script>

<style>

</style>

感谢大家观看，我们下次见