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

<template>
	<uni-popup ref="popup" :mask-click="false" background-color="white">
		<input placeholder="联系人姓名" v-model="newContact.name" />
		<input placeholder="联系方式" v-model="newContact.phone" />
		<button @click="addContact">保存</button>
		<button @click="close">取消</button>
	</uni-popup>
	<uni-popup ref="popup1" :mask-click="false" background-color="white">
		<input placeholder="联系人姓名" v-model="newContact.name" />
		<input placeholder="联系方式" v-model="newContact.phone" />
		<button @click="saveModifiedContact">保存</button>
		<button @click="close1">取消</button>
	</uni-popup>
	<view class="flex-col page">
		<view class="flex-col">
			<view class="flex-row justify-center items-center relative group">
				<text class="text">联系人信息</text>
				<image class="image pos"
					src="https://ide.code.fun/api/image?token=673329a3c471750012deb1ec&name=888e11f2c452b3d64f79a5136a779376.png" />
			</view>
			<view class="mt-16 flex-col">
				<view class="flex-row justify-between items-center list-item mt-5"
					v-for="(item, index) in filteredContacts" :key="index">
					<view class="flex-row items-center">
						<text class="font ml-9">{{item.name}}</text>
						<text class="font_2 ml-9">{{item.phone}} -{{item.id}}</text>
					</view>
					<view class="flex-row group_2">
						<image class="image_2"
							src="https://carbon2.obs.cn-north-4.myhuaweicloud.com:443/feiyi%2Ftest%2F0%2FEclWfXMx-bj.png"
							@click="editContact(item,index)" />
						<image class="ml-12 image_2"
							src="https://carbon2.obs.cn-north-4.myhuaweicloud.com:443/feiyi%2Ftest%2F0%2FzgFMedLP-sc.png"
							@click="deleteContact(item,index)" />
					</view>
				</view>
			</view>
		</view>
		<view class="flex-col justify-start items-center section mt-431" @click="open">
			<view class="flex-col justify-start items-center text-wrapper"><text class="text_2">添加新联系人</text></view>
		</view>
	</view>
</template>

<script setup>
import {
	ref,
	onMounted,
	watch,
	set
} from 'vue';
import {
	baseUrl
} from '../../../api/request';
onMounted(() => {
	getContacts()
})
const contacts = ref([{}])
//获取联系人列表
const getContacts = async () => {
	const res = await uni.request({
		url: baseUrl + '/contacts/list',
		method: 'POST',
		header: {
			cookie : wx.getStorageSync('cookie')
		}
	})
	console.log(res)
	if (res.data.code === 1) {
		filteredContacts.value = res.data.data
	} else {
		uni.showToast({
			icon: 'error',
			title: '获取失败'
		})
	}
}



const newContact = ref({
	ame: '',
	phone: '',
	isDefault:0
})

const searchText = ref('')
const filteredContacts = ref([])

onMounted(() => {
	filteredContacts.value = contacts.value
})

	watch(searchText, () => {
		if (searchText.value === '') {
			filteredContacts.value = contacts.value;
		} else {
			filteredContacts.value = contacts.value.filter(contact => {
				return contact.name.includes(searchText.value) || contact.phone.includes(
					searchText.value);
			})
		}
	})
//添加联系人
const addContact = async ()=> {
	popup.value.close()
	const res = await uni.request({
		url:baseUrl + '/contacts/add',
		method:'POST',
		header: {
			 cookie : wx.getStorageSync('cookie')
		},
		data:{
			name:newContact.value.name,
			phone:newContact.value.phone,
			isDefault:0
		}})
		console.log(res,添加)
		if (res.data.code === 1){
			console.log('添加成功')
		}else{
			uni.showToast({
				icon: 'error',
				title: '添加失败'
			})
		}
		getContacts()
}
//删除联系人
const deleteContact = async(item,index) => {
	const res = await uni.request({
		url:baseUrl + '/contacts/delete',
		method:'POST',
		header: {
			 cookie : wx.getStorageSync('cookie')
		},
		data:{
			id:item.value[index].id,
		}
		})
		console.log(item.value[index].id)
		console.log(res,'1111111111111')
		if(res.data.code === 1){
			console.log('删除成功')
		}else{
			uni.showToast({
				icon: 'error',
				title: '删除失败'
			})
		}
		getContacts()
}
const indexToModify = ref(null)
const editContact = (index) => {
	popup1.value.open('center')
	indexToModify.value = index
	const contactToModify = contacts.value[index]
	newContact.value = {
		name: contactToModify.name,
		phone: contactToModify.phone
	}
}
const saveModifiedContact = () => {
	if (indexToModify.value !== null) {
	    const Index = indexToModify.value
		const contact = contacts.value[Index]
		contact.name = newContact.value.name;
		contact.phone = newContact.value.phone;
		newContact.value = {
			name: '',
			phone: ''
		}
		popup1.value.close()
		filteredContacts.value = contacts.value
	}
}
const popup = ref(null)
const popup1 = ref(null)
const open = () => {
popup.value.open('center')
}
const open1 = () => {
	popup1.value.open('center')
}
const close = () => {
popup.value.close();
}
const close1 = () => {
	popup1.value.close();
}
</script>

<style lang="scss" scoped>
	.mt-5 {
		margin-top: 9.38rpx;
	}

	.ml-9 {
		margin-left: 16.88rpx;
	}

	.mt-431 {
		margin-top: 808.13rpx;
	}

	.page {
		padding-top: 18.75rpx;
		background-color: #f5f5dc;
		border-radius: 28.13rpx 28.13rpx 0rpx 0rpx;
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
		height: 100%;
	}

	.group {
		padding: 11.25rpx 24.38rpx 7.5rpx;
	}

	.text {
		color: #323232;
		font-size: 37.5rpx;
		font-family: Open Sans;
		line-height: 35.21rpx;
	}

	.image {
		width: 52.5rpx;
		height: 52.5rpx;
	}

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

	.list-item {
		padding: 52.5rpx 15rpx;
		background-color: #fffef8;
		border-bottom: solid 1.88rpx #c8c8c8;
	}

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

	.image_3 {
		width: 33.75rpx;
		height: 33.75rpx;
	}

	.font {
		font-size: 30rpx;
		font-family: Open Sans;
		line-height: 27.19rpx;
		color: #323232;
	}

	.font_2 {
		font-size: 30rpx;
		font-family: Open Sans;
		line-height: 22.05rpx;
		color: #323232;
	}

	.group_2 {
		margin-right: 11.25rpx;
	}

	.image_2 {
		width: 39.38rpx;
		height: 39.38rpx;
	}

	.section {
		margin-left: 16.88rpx;
		padding: 22.5rpx 0 15rpx;
		background-color: #fffef8;
	}

	.text-wrapper {
		padding: 30rpx 0;
		background-color: #fbb612;
		border-radius: 75rpx;
		width: 639.38rpx;
	}

	.text_2 {
		color: #ffffff;
		font-size: 33.75rpx;
		font-family: Open Sans;
		line-height: 31.22rpx;
	}

	@import url(/common/css/global.css)
</style>