raingad-uniapp-5.5.4/pages/contacts/friend.vue

<template>
	<view>
		<cu-custom bgColor="bg-gradual-blue" :isBack="true">
			<template #backText></template>
			<template #content>新邀请</template>
			<template #right>
				<view class="f-20 ml-10 mr-10" @tap="searchFriend()">
					<text class="cuIcon-add"></text>
				</view>
			</template>
		</cu-custom>
		<uni-segmented-control :current="current" :values="items" @clickItem="onClickItem" styleType="text"></uni-segmented-control>
		<view class="cu-list menu">
			<view class="cu-item" v-if="!params.is_mine" v-for="(x,index) in list" :key="index">
				<view class='cu-avatar md radius mr-15' :style="[{backgroundImage:'url('+x.create_user_info.avatar+')'}]">
				</view>
				<view class=" padding-tb-sm" style="width: 460rpx;white-space: pre-wrap;line-break: anywhere;" @tap='openDetails(x.create_user_info.user_id)'>
					<view class="text-grey"  v-if="!params.is_mine">
						<text class="text-blue">{{x.create_user_info.realname}} </text> 申请添加您为好友
					</view>
					<view class="text-gray text-sm lh-15x">{{x.remark}}</view>
				</view>
				<view class="action ml-10">
					<text class="text-red" v-if="x.status==0">已拒绝</text>
					<text class="text-blue" v-if="x.status==1" @tap="sendMsg(x.create_user_info.user_id)">发消息</text>
					<button class="cu-btn round sm bg-green"  v-if="x.status==2" @tap="optApply(x)">
						操作
					</button>
				</view>
			</view>
			<view class="cu-item"  v-if="params.is_mine" v-for="(x,index) in list" :key="index">
				<view class='cu-avatar md radius mr-15' :style="[{backgroundImage:'url('+x.user_id_info.avatar+')'}]">
				</view>
				<view class="content" @tap='openDetails(x.user_id_info.user_id)'>
					<view class="text-grey">
						请求添加<text class="text-blue"> {{x.user_id_info.realname}} </text> 为好友
					</view>
				</view>
				<view class="action ml-10">
					<text class="text-red" v-if="x.status==0">已拒绝</text>
					<text class="text-blue" v-if="x.status==1"  @tap="sendMsg(x.user_id_info.user_id)">发消息</text>
					<text  class="text-orange" v-if="x.status==2">待同意</text>
				</view>
			</view>
			<view class="m-10" v-if="list.length">
				<uni-pagination :current="params.page" :total="total" :pageSize="params.limit"  @change="changePage"/>
			</view>
			
			<Empty v-if="!list.length" noDatatext="暂无群聊" textcolor="#999" ></Empty>
		</view>
		
		<uni-popup ref="inputDialog" type="dialog" background-color="#fff" :mask-click="false">
			<view style="width: 600rpx;">
				<view @click="close" style="text-align: right;margin-right: 10px;margin-top: 10px;">X</view>
				<view style="padding: 20rpx 40rpx 60rpx 40rpx;text-align: center;">
					<view>
						<view style="text-align: center;font-size: 16px;">提示</view>
						<view style="margin-top: 10px;font-size: 16px;">你确定同意该好友的请求吗</view>
					</view>
				</view>
				<view class="Dialogbox">
					<view class="Dialogreject" @click="reject">拒绝</view>
					<view class="Dialogaccept" @click="accept">接受</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import { storeToRefs } from 'pinia';
	import { useMsgStore } from '@/store/message';
	import pinia from '@/store/index'
	const msgStore = useMsgStore(pinia)
	const {contacts} = storeToRefs(msgStore);
	/**
	 * 初始的引导页
	 */
	export default {
		name  : "group",
		data() {
			return {
				items: ['我收到的', '我发起的'],
				current: 0,
				list: [],
				total:0,
				friend_id:0,
				params: {
					page: 1,
					limit: 10,
					is_mine:0
				}
			};
		},
		created() {
		},
		mounted(){
			this.getList();
		},
		methods: {
			close(){
				this.$refs.inputDialog.close()
			},
			getList(){
				this.$api.friendApi.applyList(this.params).then((res)=>{
					if(res.code==0){
						this.list = res.data;
						this.total = res.count;
					}
				})
			},
			changePage(e){
				this.params.page=e.current;
				this.getList();
			},
			onClickItem(e) {
				this.params.is_mine = e.currentIndex;
				this.current = e.currentIndex;
				this.params.page = 1;
				this.getList();
			},
			sendMsg(id){
				uni.navigateTo({
					url:"/pages/message/chat?id="+id
				})
			},
			openDetails(id){
				uni.navigateTo({
					url:"/pages/contacts/detail?id="+id
				})
			},
			searchFriend(){
				uni.navigateTo({
					url:"/pages/contacts/search"
				})
			},
			accept(){
				this.$api.friendApi.acceptApply({friend_id:this.friend_id,status:1}).then((e)=>{
					if(e.code==0){
						uni.showToast({
							title:'添加好友成功',
							icon:'none'
						})
						msgStore.sysUnread--;
						this.getList();
						this.$refs.inputDialog.close()
					}
				})
			},
			reject(){
				this.$api.friendApi.acceptApply({friend_id:this.friend_id,status:0}).then((e)=>{
					if(e.code==0){
						uni.showToast({
							title:'已拒绝',
							icon:'none'
						})
						msgStore.sysUnread--;
						this.getList();
						this.$refs.inputDialog.close()
					}
				})
			},
			optApply(x){
				this.$refs.inputDialog.open();
				this.friend_id = x.friend_id;
				// uni.showModal({
				// 	title: '提示',
				// 	content:"你确定同意该好友的请求吗",
				// 	cancelText:"拒绝",
				// 	cancelColor:'#e54d42',
				// 	confirmText:"接受",
				// 	success: (res)=>{
				// 		let status=0;
				// 		if (res.confirm) {
				// 			status=1
				// 		}
				// 		this.$api.friendApi.acceptApply({friend_id:x.friend_id,status:status}).then((e)=>{
				// 			if(e.code==0){
				// 				uni.showToast({
				// 					title:'添加好友成功',
				// 					icon:'none'
				// 				})
				// 				msgStore.sysUnread--;
				// 				this.getList();
				// 			}
				// 		})
				// 	}
				// })
			}
			
		}
	}
</script>

<style scoped lang="less">
::v-deep .uni-popup__wrapper{
	border-radius: 10px;
}
.Dialogbox{
	display: flex;
	margin-top: 40rpx;
	justify-content: space-around;
}
.Dialogreject{
	color: #fff;
	width: 50%;
	text-align: center;
	padding: 30rpx 0rpx;
	background-color: red;
}
.Dialogaccept{
	color: #fff;
	width: 50%;
	text-align: center;
	padding: 30rpx 0rpx;
	background-color: #39b54a;
}
</style>