jiangchengfeiyi-xiaochengxu/pages/mine/Contact/testContact.vue

<template>
	<view class="flex-col page" :style="{ backgroundImage: 'url(' + bkgUrl + ')' }">
		<view class="flex-col section">
			<view class="flex-col justify-start items-center text-wrapper"><text class="text">联系人列表</text></view>
			<view class="mt-10 flex-col list">
				<view class="flex-row justify-center items-center relative mt-10 list-item" v-for="(item, index) in ContactArr"
					:key="index">
					<view class="flex-row items-baseline pos_2">
						<text class="font">{{ item.name }}</text>
						<text class="ml-10 font_2">{{ item.phone }}</text>
					</view>
					<view class="flex-col justify-start items-center text-wrapper_2" v-if="item.isDefault == 1"><text
							class="text_2">默认</text></view>
					<view class="flex-row pos">
						<image class="image"
							:src="mineUrl + '/Contact/edit.png'"
							@click="editContact(item)"
							/>
						<image class="ml-12 image"
							:src="mineUrl + '/Contact/delete.png'"
							@click="showModal(item.id)" />
					</view>
				</view>
			</view>
		</view>
		<view class="flex-col justify-start items-center relative section_2">
			<view class="flex-col justify-start items-center text-wrapper_3" @click="loadPop()"><text
					class="font text_3">新增联系人</text></view>
		</view>
	</view>
	<uni-popup ref="popup" background-color="#fff" :mask-click="false">
		<view class="popup-content">
			<contactPopVue></contactPopVue>
		</view>
	</uni-popup>
</template>

<script setup>
	import { ref, onMounted, nextTick, onUnmounted } from 'vue'
	import { baseUrl } from '../../../api/request'
	import { onShow, onLoad } from "@dcloudio/uni-app";
	import { getFonts } from '../../../common/globalFont';
	import emitter from '../../../utils/emitter';
	import contactPopVue from '../component/contactPop.vue'; //导入联系人弹窗
	import { mineUrl } from '../../../common/globalImagesUrl';
	const bkgUrl = ref(mineUrl + '/Contact/bkg.png')
	onLoad(() => {
		getFonts()
	})
	
	const ContactArr = ref() //联系人数组
	const popup = ref(null) //弹窗对象
	const closeContactPopHandler = () => {
		close()
	}
	
	const updateInfoHandler = () => {
		getContactInfo()
	}
	
	onMounted(() => {
		getFonts()
		getContactInfo() //获取联系人信息
		emitter.on('closeContactPop', closeContactPopHandler)
		emitter.on('updateInfo', updateInfoHandler)
	})
	
	onUnmounted(() => {
		emitter.off('closeContactPop', closeContactPopHandler)
		emitter.off('updateInfo', updateInfoHandler)
	})
	
	onShow(()=>{
		getContactInfo() //获取联系人信息
	})
	const getContactInfo = async () => {
		const res = await uni.request({
			url: baseUrl + '/contacts/list',
			method: 'POST',
			header: {
				cookie: wx.getStorageSync('cookie')
			}
		})
		// console.log('联系人信息---->', res.data.data);
		if (res.data.code === 1) {
			ContactArr.value = res.data.data
		} else {
			uni.showToast({
				icon: 'error',
				title: "服务错误"
			})
		}
	}
	const deleteContact = async (cid) => {  //删除联系人
		const res = await uni.request({
			url: baseUrl + '/contacts/delete',
			method: 'POST',
			header: {
				cookie: wx.getStorageSync('cookie')
			},
			data: { id: cid }
		})
		if (res.data.code === 1) {
			getContactInfo()
		}
	}
	const showModal = (cid) => { //提示弹窗
		uni.showModal({
			title: '提示',
			content: '是否删除该联系人',
			success: (e) => {
				if (e.confirm) {
					deleteContact(cid)
				} else if (e.cancel)
					return;
			}
		})
	}
	const loadPop =() => {  //联系人弹窗
		popup.value.open('bottom')  //从底部弹出
	}
	//编辑联系人方法
	const editContact =(value)=>{
		console.log('联系人信息--->',value);
		emitter.emit('contactInfo',value)   //把联系人信息传入组件中
		loadPop()  //弹出联系人弹窗
	}
	const close =()=> {
		nextTick(()=>{
			if(popup.value) {
				popup.value.close()
			}
		})
	}

</script>

<style lang="scss" scoped>
	.page {
		height: 100vh;
		width: 100%;
		background-size: 100% 100%;
		overflow-y: auto;
		overflow-x: hidden;
	}

	.section {
		padding-bottom: 20rpx;
		
		background-repeat: no-repeat;
	}

	.text-wrapper {
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		padding: 22.5rpx 0;
		background-color: #ffffff;
		z-index: 1;
	}

	.text {
		color: #000000;
		font-size: 37.5rpx;
		font-family: FZSongKeBenXiuKaiS-R-GB;
		line-height: 36.47rpx;
	}

	.list {
		padding: 0 18.75rpx;
		margin-bottom: 100rpx;
	}

	.list-item {
		padding: 45.75rpx 18.75rpx 45.75rpx 26.25rpx;
		background-color: #ffffff;
		border-radius: 9.38rpx;
		height: 90rpx;
	}

	.list-item:first-child {
		margin-top: 40px;
	}

	.pos_2 {
		position: absolute;
		left: 25.11rpx;
		top: 50%;
		transform: translateY(-50%);
	}

	.font {
		font-size: 30rpx;
		font-family: FZSongKeBenXiuKaiS-R-GB;
		line-height: 25.89rpx;
		color: #323232;
	}

	.font_2 {
		font-size: 30rpx;
		font-family: FZSongKeBenXiuKaiS-R-GB;
		line-height: 20.04rpx;
		color: #323232;
	}

	.text-wrapper_2 {
		padding-bottom: 7.5rpx;
		background-color: #fbdedf;
		border-radius: 9.38rpx;
		width: 71.06rpx;
	}

	.text_2 {
		color: #c35c5d;
		font-size: 22.5rpx;
		font-family: FZSongKeBenXiuKaiS-R-GB;
		line-height: 18.71rpx;
		margin-top: 8rpx;
	}

	.pos {
		position: absolute;
		right: 18.28rpx;
		top: 50%;
		transform: translateY(-50%);
	}

	.image {
		border-radius: 9.38rpx;
		width: 41.25rpx;
		height: 39.38rpx;
	}

	.section_2 {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		// margin-top: -35.63rpx;
		padding: 16.88rpx 0;
		background-color: #ffffff;
	}

	.text-wrapper_3 {
		padding: 26.25rpx 0;
		background-color: #fbdedf;
		border-radius: 46.88rpx;
		width: 639.23rpx;
	}

	.text_3 {
		color: #c35c5d;
		line-height: 29.18rpx;
	}
	.popup-content {
		height: 500rpx;
	}
	@import url(../../../common/css/global.css);
</style>