96 lines
1.8 KiB
Vue
96 lines
1.8 KiB
Vue
<script setup>
|
|
/**
|
|
* 选择好友
|
|
*/
|
|
import {
|
|
useStore,
|
|
} from 'vuex'
|
|
import {
|
|
ref,
|
|
computed,
|
|
reactive,
|
|
onMounted,
|
|
inject,
|
|
getCurrentInstance,
|
|
watch,
|
|
} from 'vue'
|
|
// 工具库
|
|
import util from '@/common/js/util.js'
|
|
// 腾讯云聊天
|
|
import TencentCloudChat from '@tencentcloud/chat';
|
|
//
|
|
import api from '@/api/index.js'
|
|
//
|
|
const props = defineProps({
|
|
// 列表数据
|
|
list: {
|
|
type: Array,
|
|
},
|
|
})
|
|
|
|
const {
|
|
proxy
|
|
} = getCurrentInstance();
|
|
|
|
// 已选择的视频id
|
|
const ids = defineModel('ids')
|
|
//
|
|
const store = useStore()
|
|
const userinfo = computed(() => {
|
|
let result = store.state.userinfo
|
|
return result
|
|
})
|
|
|
|
/**
|
|
* 点击用户
|
|
* @param {Object} item 当前用户信息
|
|
*/
|
|
function handleUser(item) {
|
|
console.log('handleUser', item)
|
|
const findIndex = ids.value.findIndex(node => node == item.userID)
|
|
if (findIndex >= 0) ids.value.splice(findIndex, 1)
|
|
else ids.value.push(item.userID)
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<view class="firendBox pr">
|
|
<view class="list bfff">
|
|
<view class="li" v-for="(item, index) in list" :key="index" @click="handleUser(item)">
|
|
<view class="item rows ptb20 pl30 pr50">
|
|
<image class="wh80 avatar cir" :src="item.profile.avatar" mode="aspectFill" />
|
|
<view class="name thd f1 ml20 c333 f32">{{item.remark || item.profile.nick}}</view>
|
|
<uni-icons type="circle-filled" size="40rpx" color="#20D200" v-if="ids.includes(item.userID)" />
|
|
<uni-icons type="circle" size="40rpx" color="#ccc" v-else />
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="mtb20 nomore">到底啦~</view>
|
|
</view>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
// 朋友列表
|
|
.firendBox {
|
|
height: 100%;
|
|
|
|
.scroll {
|
|
height: 100%;
|
|
}
|
|
|
|
// 列表项
|
|
.li {
|
|
.letter {
|
|
background-color: #eee;
|
|
}
|
|
}
|
|
|
|
// 子集
|
|
.child {
|
|
.item+.item {
|
|
border-top: 2rpx solid #eee;
|
|
}
|
|
}
|
|
}
|
|
</style> |