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

<template>
	<!-- 添加联系人页面 -->
<view class="flex-row relative page" :style="{ backgroundImage: 'url(' + bkgUrl + ')' }">
  <text class="text pos_2">{{ templateString }}</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">姓名&emsp;&emsp;</text>
      <input class="section_1 ml-20" placeholder="请输入姓名" v-model="contactParam.name"/>
    </view>
    <view class="flex-row items-center group_1">
      <text class="font_2">手机号码</text>
      <input class="view_2 ml-20" placeholder="输入手机号码" type="tel" maxlength="11" v-model="contactParam.phone"/>
    </view>
    <view class="flex-row justify-between items-center group_2">
			<text class="font_2 text_5">设为默认联系人</text>
			<radio-group>
				<radio @click="changeState" class="radius" color="#E79EA1" :checked="checked"/>
			</radio-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';
import { JudgeIsNullity } from '../../../common/globalFunction';
onLoad(() => {
	getFonts()
})
const bkgUrl = ref(mineUrl + '/component/bkg.png')
const isUpdate = ref(false)
const templateString = ref('')
const checked = ref(false)
const contactParam = ref({})


const changeState = () => {
	console.log(checked.value)
	checked.value = !checked.value
}

const contactInfoHandler = (val) => {
	if (val === null) {
		templateString.value = '添加联系人'
		checked.value = false
		contactParam.value = {}
		isUpdate.value = false
	} else {
		templateString.value = '编辑联系人'
		contactParam.value = JSON.parse(JSON.stringify(val))
		console.log(contactParam.value)
		checked.value = val.isDefault === 0 ? false : true
		isUpdate.value = true
	} 
	console.log(isUpdate.value)
}



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

onUnmounted(() => {
	emitter.off('contactInfo', contactInfoHandler)
})

//发送添加新增联系人的请求
const newContact = async ()  => {
	const values =  Object.values(contactParam.value);
	// 使用some()方法来检查是否有任何值为空
	if (values.some(value => value === null || value === undefined || value === '')) {
		await uni.showToast({
			icon: 'error',
			title: "字段不能为空"
		})
		return;
	}
	contactParam.value.isDefault = checked.value ? 1 : 0
	console.log(contactParam.value)
	if(isUpdate.value) {
		const res = await uni.request({
			url: baseUrl + '/contacts/update',
			method: 'POST',
			header: {
				'cookie': wx.getStorageSync('cookie')
			},
			data: { ...contactParam.value }
		})
		sucRes(res.data.code)
	} else {
		const res = await uni.request({
			url: baseUrl + '/contacts/add',
			method: 'POST',
			header: {
				'cookie': wx.getStorageSync('cookie')
			},
			data: { ...contactParam.value }
		})
		sucRes(res.data.code)
	}
}
const sucRes =(res)=>{  //请求成功执行的方法
	if(res === 1) {
		if (isUpdate.value) {
			emitter.emit('updateContactObj', contactParam.value)
		}
		emitter.emit('updateInfo')
		emitter.emit('closeContactPop')
	} 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: FangZhengFonts;
  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: FangZhengFonts;
  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: FangZhengFonts;
  line-height: 32.83rpx;
}
.radius {
	transform: scale(0.7);
	width: 37.5rpx;
	height: 37.5rpx;
}
	@import url(../../../common/css/global.css);
</style>