jiangchengfeiyi-xiaochengxu/pages/order/component/contactsComponent.vue

<template>
	<!-- 订单的联系人选择页面 -->
<view class="flex-col page" :style="{ backgroundImage: 'url(' + bkgUrl + ')' }">
  <view class="flex-row justify-between self-end group">
    <text class="text">联系人信息</text>
    <image
      class="image"
      :src="orderUrl + '/component/cha.png'"
			@click="closeWindow()"
    />
  </view>
  <view class="flex-col self-stretch mt-22">
		<radio-group @change="radioChange">
    <view
      class="flex-row justify-between items-center section list-item mt-8"
      v-for="(item, index) in ContactArr"
      :key="item.id"
    >
      <view class="flex-row items-center">
				<radio color="#E79EA1" :value="index"></radio>
        <text class="font ml-9">{{ item.name }}</text>
        <text class="font_2 ml-9">{{ item.phone }}</text>
      </view>
      <view class="flex-row group_2">
        <image
          class="image_2"
          :src="orderUrl + '/component/edit.png'"
					@click="editContact(item)"
        />
        <image
          class="image_2 ml-12"
          :src="orderUrl + '/component/delete.png'"
					@click="showModal(item.id)"
        />
      </view>
    </view>
		</radio-group>
  </view>
  <view class="flex-col justify-start items-center self-stretch text-wrapper mt-22" @click="loadPop()">
    <text class="text_2">添加联系人</text>
  </view>
</view>
<uni-popup ref="popup" background-color="#fff">
		<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 emitter from '../../../utils/emitter';
	import { getFonts } from '../../../common/globalFont';
	import contactPopVue from '../../mine/component/contactPop.vue'; //导入联系人弹窗
	import { orderUrl } from '../../../common/globalImagesUrl';
	const ContactArr = ref([]) //联系人数组
	const popup = ref(null) //弹窗对象
	const selectedContact = ref() //在订单确认页面已经选择的联系人信息
	const current = ref(0) //当前数组位置
	
	const bkgUrl = ref(orderUrl + '/component/bkg.png')
	
	const closeContactPopHandler = () => {
		closeContactPop()
	}
	
	const updateInfoHandler = () => {
		getContactInfo()
	}
	
 	onMounted( async () => {
		getContactInfo() //获取联系人信息
		emitter.on('closeContactPop', closeContactPopHandler)
		emitter.on('updateInfo', updateInfoHandler)
	})
	
	onUnmounted(() => {
		emitter.off('closeContactPop', closeContactPopHandler)
		emitter.off('updateInfo', updateInfoHandler)
	})
	
	
	

	onLoad(()=>{
		getFonts()
		getContactInfo()
	})
	const getContactInfo = async () => {
		const res = await uni.request({
			url: baseUrl + '/contacts/list',
			method: 'POST',
			header: {
				cookie: wx.getStorageSync('cookie')
			}
		})
		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()
			emitter.emit('delContactById', cid)
		}
	}
	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 radioChange = ( event ) => {
		// console.log('选中---->',event);
		const index = event.detail.value
		const temp = ContactArr.value[index]
		emitter.emit('contactsNowInfo',temp)  //传出联系人信息
		emitter.emit('close')
	}
	//关闭弹窗---这是非弹窗页面编写
	const closeContactPop = () => {
		nextTick(() => {
			if (popup.value) {
				popup.value.close()
			}
		})
	}
	const closeWindow =()=> {  //关闭新增/更新联系人弹窗
		emitter.emit('close')
	}
	
	
	
</script>

<style lang="scss" scoped>
.ml-9 {
  margin-left: 16.88rpx;
}
.page {
  padding: 24.75rpx 12.84rpx 33.75rpx 13.13rpx;
  background-color: #fff;
  border-radius: 28.13rpx 28.13rpx 0rpx 0rpx;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  height: 100vh;
}
.group {
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
  // margin-right: 17.16rpx;
  width: 100%;
	background-color: white;
	z-index: 1;
	padding: 20rpx 20rpx 20rpx 270rpx;
}
.text {
  margin-bottom: 2.53rpx;
  color: #323232;
  font-size: 37.5rpx;
  font-family: FZSongKeBenXiuKaiS-R-GB;
  line-height: 36.47rpx;
}
.image {
  width: 37.5rpx;
  height: 37.5rpx;
}
.section {
  padding: 54.38rpx 16.22rpx 52.5rpx;
  background-color: #ffffff;
  border-radius: 26.25rpx;
  border-bottom: solid 1.88rpx #c8c8c8;
}
.list-item:first-child {
  margin-top: 14px;
}
.list-item:last-child {
	margin-bottom: 700rpx;
}
.image_3 {
  width: 31.88rpx;
  height: 33.75rpx;
}
.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;
}
.group_2 {
  margin-right: 11.12rpx;
}
.image_2 {
  width: 37.5rpx;
  height: 39.38rpx;
}
.text-wrapper {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 20px;
  margin-left: 39.38rpx;
  margin-right: 45.28rpx;
  padding: 26.03rpx 0 29.27rpx;
  background-color: #ffb6b9;
  border-radius: 75rpx;
}
.text_2 {
  color: #ffffff;
  font-size: 33.75rpx;
  font-family: FZSongKeBenXiuKaiS-R-GB;
  line-height: 32.83rpx;
}
.radius {
	transform: scale(0.7);
	width: 37.5rpx;
	height: 37.5rpx;
}
	.popup-content {
		height: 500rpx;
	}
@import url(../../../common/css/global.css);
</style>