jiangchengfeiyi-xiaochengxu/pages/mine/component/contactPop.vue

<template>
	<!-- 添加联系人页面 -->
<view class="flex-row relative page" :style="{ backgroundImage: 'url(' + bkgUrl + ')' }">
  <text class="text pos_2">添加联系人</text>
  <image class="image pos" :src="mineUrl + '/component/cha.png'" @click="closePop()"/>
  <view class="flex-col section_2 pos_3">
    <view class="flex-row items-center group">
      <text class="font_2 text_2">姓名</text>
      <input class="section_1 ml-44" placeholder="请输入姓名" v-model="contactParam.name"/>
    </view>
    <view class="flex-row items-center group_1">
      <text class="font_2">手机号码</text>
      <input class="view_2 ml-13" placeholder="输入手机号码" v-model="contactParam.phone"/>
    </view>
    <view class="flex-row justify-between items-center group_2">
			<checkbox-group @change="defaultAddress">
			<text class="font_2 text_5" style="margin-right: 400rpx;">设为默认联系人</text>
			<checkbox class="round red radius" value="1"  :checked="checked"/>
			</checkbox-group>
    </view>
  </view>
  <view class="flex-col justify-start items-center text-wrapper_2 pos_4" @click="newContact"><text class="text_6">保存联系人</text></view>
</view>
</template>

<script setup>
import {ref , onMounted, onUnmounted} from 'vue'
import { testUrl , baseUrl , suiUrl } from '../../../api/request';
import { onLoad, onShow } from '@dcloudio/uni-app';
import { getFonts } from '../../../common/globalFont';
import emitter from '../../../utils/emitter';
import { mineUrl } from '../../../common/globalImagesUrl';
const bkgUrl = ref(mineUrl + '/component/bkg.png')
onLoad(() => {
	getFonts()
})

const contactParam = ref({
	name: "",
	phone: "",
	isDefault: 0
})
const checked = ref(false)  //是否选中

const contactInfoHandler = (val) => {
	console.log('当前编辑的联系人信息',val);
	if(val != null) {
		contactParam.value.id = val.id
		contactParam.value.name = val.name
		contactParam.value.phone = val.phone
		contactParam.value.isDefault = val.isDefault
		val.isDefault ? checked.value = true : checked.value = false
	} 
}



onMounted(()=>{
	emitter.on('contactInfo', contactInfoHandler)
	defaultAddress()
})

onUnmounted(() => {
	emitter.off('contactInfo', contactInfoHandler)
})
//勾选默认联系人的选项
const defaultAddress =(event)=>{
	event.detail.value[0] ? contactParam.value.isDefault = 1 : contactParam.value.isDefault = 0
	event.detail.value[0] ? checked.value = true : checked.value = false
	console.log('event--->',event);
}
//发送添加新增联系人的请求
const newContact = async ()  =>{
	// console.log('按钮联系人信息--->',contactParam.value);
	if(contactParam.value.id === "") 
		delete contactParam.value.id
	const values =  Object.values(contactParam.value);
	// 使用some()方法来检查是否有任何值为空
	if (values.some(value => value === null || value === undefined || value === '')) {
		await uni.showToast({
			icon: 'error',
			title: "字段不能为空"
		})
		return;
	}
	// console.log(contactParam.value);
	if(contactParam.value.id != undefined) {
		const res = await uni.request({
			url: baseUrl + '/contacts/update',
			method: 'POST',
			header: {
				'cookie': wx.getStorageSync('cookie')
			},
			data: { ...contactParam.value }
		})
		// console.log('res1==>',res.data);
		sucRes(res.data.code)
	} else {
		const res = await uni.request({
			url: baseUrl + '/contacts/add',
			method: 'POST',
			header: {
				'cookie': wx.getStorageSync('cookie')
			},
			data: {
				name: contactParam.value.name,
				phone: contactParam.value.phone,
				isDefault: contactParam.value.isDefault
			}
		})
		// console.log('res2==>',res.data);
		sucRes(res.data.code)
	}
}
const sucRes =(res)=>{  //请求成功执行的方法
	if(res === 1) {
		closePop()
		emitter.emit('updateInfo')
	} else {
		uni.showToast({
			icon: 'error',
			title: '新增联系人失败'
		})
		return;
	}
}
const closePop = () =>{  //关闭弹窗方法
	contactParam.value.name = ""
	contactParam.value.phone = ""
	contactParam.value.isDefault = 0
 	emitter.emit('closeContactPop')
}

</script>

<style lang="scss" scoped>
.ml-13 {
  margin-left: 24.38rpx;
}
.page {
  padding: 18.75rpx 24.38rpx 30rpx 31.88rpx;
  background-color: #ffffff;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  height: 100vh;
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
}
.text {
  color: #323232;
  font-size: 37.5rpx;
  font-family: FZSongKeBenXiuKaiS-R-GB;
  line-height: 36.47rpx;
}
.pos_2 {
  position: absolute;
  right: 274.86rpx;
  top: 28.5rpx;
}
.image {
  width: 52.5rpx;
  height: 52.5rpx;
}
.pos {
  position: absolute;
  right: 24.38rpx;
  top: 18.75rpx;
}
.section_2 {
  padding: 12.19rpx 16.88rpx 0;
  background-color: #ffffff;
  border-radius: 9.38rpx;
}
.pos_3 {
  position: absolute;
  left: 31.88rpx;
  right: 31.88rpx;
  top: 101.25rpx;
}
.group {
  padding: 14.06rpx 4.58rpx 12.19rpx;
  border-bottom: solid 1.88rpx #efefef;
}
.font_2 {
  font-size: 26.25rpx;
  font-family: FZSongKeBenXiuKaiS-R-GB;
  line-height: 24.62rpx;
  color: #323232;
}
.text_2 {
  line-height: 23.17rpx;
}
.section_1 {
  flex: 1 1 0;
  margin-right: 34.8rpx;
}
.group_1 {
  padding: 14.06rpx 4.26rpx 12.19rpx;
  border-bottom: solid 1.88rpx #efefef;
}
.view_2 {
  flex: 1 1 0;
  margin-right: 35.12rpx;
}
.group_2 {
  padding: 15.47rpx 5.29rpx 22.03rpx;
}
.text_5 {
  line-height: 25.54rpx;
}
.image_2 {
  margin-right: 17.63rpx;
  width: 33.75rpx;
  height: 33.75rpx;
}
.text-wrapper_2 {
  padding: 26.03rpx 0 29.27rpx;
  background-color: #ffb6b9;
  border-radius: 75rpx;
  width: 639.38rpx;
}
.pos_4 {
  position: absolute;
  left: 50%;
  top: 370.63rpx;
  transform: translateX(-50%);
}
.text_6 {
  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;
}
	@import url(../../../common/css/global.css);
</style>