property-resident-side/property-uniapp-project/pageSubPack/service-list/contactProperty.vue

<template>
	<view class="contentStyle">
		<!-- 表单区域 -->
		<scroll-view class="page" scroll-y="true">
			<view v-if="dataList.length === 0" class="empty-state">
				<uni-icons type="info" size="30" color="#ccc"></uni-icons>
				<text class="empty-text">
					暂无数据
				</text>
			</view>
			<view class="property-card" v-for="item,index in dataList" :key="index">
				<view class="topBox">
					<image class="avatar" :src="item.src" mode="aspectFill"></image>
					<view class="info-content">
						<view class="property-name">{{item.propertyName}}</view>
						<view class="property-address">{{item.propertyAddress}}</view>
					</view>
				</view>
				<view class="phone-item" v-for="phoneItems,phoneIndex in item.phoneList" :key="phoneIndex" @click="callPhone(phoneItems.phoneNum)" @longpress="copyPhone(phoneItems.phoneNum)">
					<text class="phone-label">值班电话：</text>
					<text class="phone-num">{{phoneItems.phoneNum}}</text>
					<uni-icons type="phone" size="16" color="#2F77FD"></uni-icons>
				</view>
			</view>

		</scroll-view>
	</view>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { getManagePhoneData } from '../api/apiSub.js'

	const dataList = ref([])

	function callPhone(phone) {
		if (!phone || !phone.trim()) {
			uni.showToast({ title: '电话号码为空', icon: 'none' });
			return;
		}
		const cleanPhone = phone.replace(/\D/g, '');
		if (!/^1[3-9]\d{9}$/.test(cleanPhone) && !/^0\d{2,3}\d{7,8}$/.test(cleanPhone)) {
			uni.showToast({ title: '电话号码格式有误', icon: 'none' });
			return;
		}
		uni.makePhoneCall({
			phoneNumber: cleanPhone,
			fail: (err) => {
				console.log('拨号失败或用户取消', err);
				uni.showToast({ title: '拨号失败，请长按复制号码', icon: 'none' });
			}
		});
	}

	function copyPhone(phone) {
		if (!phone || !phone.trim()) {
			uni.showToast({ title: '电话号码为空', icon: 'none' });
			return;
		}
		uni.setClipboardData({
			data: phone.replace(/\D/g, ''),
			success: () => {
				uni.showToast({ title: '号码已复制', icon: 'none' });
			},
			fail: () => {
				uni.showToast({ title: '复制失败', icon: 'none' });
			}
		});
	}

	onMounted(() => {
		const villageId = uni.getStorageSync('currentVillageId')
		if (!villageId) {
			uni.showToast({ title: '请先选择小区', icon: 'none' })
			return
		}
		uni.showLoading({ title: '加载中...' })
		getManagePhoneData({ villageId }).then(res => {
			uni.hideLoading()
			if (res.code === 200 && res.data) {
				const d = res.data
				dataList.value = [{
					src: d.villageImageUrl || 'http://wuye.ckdzkj.com/images/propertyImgs/community1.png',
					propertyName: d.villageName || '',
					propertyAddress: d.address || '',
					phoneList: d.managePhone ? [{ phoneNum: d.managePhone }] : []
				}]
			} else {
				uni.showToast({ title: res.msg || '获取失败', icon: 'none' })
			}
		}).catch(() => {
			uni.hideLoading()
			uni.showToast({ title: '获取失败', icon: 'none' })
		})
	})
</script>

<style lang="scss">
	page {
		background: #f9f9f9;
	}
</style>

<style scoped>
	.contentStyle {
		display: flex;
		flex-direction: column;
		height: 100%;
	}

	.page {
		flex: 1;
		overflow-y: auto;
		padding: 20px 40rpx;
		box-sizing: border-box;
	}

	/* 空状态 */
	.empty-state {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 100rpx 0;
		color: #ccc;
	}

	.empty-text {
		font-size: 28rpx;
		color: #999;
		margin-top: 20rpx;
		margin-bottom: 10rpx;
	}

	/* 卡片容器 */
	.property-card {
		padding: 30rpx;
		background: #ffffff;
		border-radius: 16rpx;
		box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
	}

	.topBox {
		display: flex;
		align-items: flex-start;
		margin-bottom: 20rpx;
	}

	/* 头像 */
	.avatar {
		width: 60px;
		height: 60px;
		border-radius: 8rpx;
		margin-right: 24rpx;
		margin-top: 20rpx;
		flex-shrink: 0;
	}

	/* 信息内容区 */
	.info-content {
		flex: 1;
		display: flex;
		flex-direction: column;
		gap: 12rpx;
	}

	.property-name {
		font-size: 32rpx;
		font-weight: 600;
		color: #333333;
		line-height: 35px;
	}

	.property-address {
		font-size: 28rpx;
		color: #666666;
		line-height: 35rpx;
		
	}

	.phone-item {
		display: flex;
		align-items: center;
		gap: 8rpx;
		line-height: 60rpx;
	}

	.phone-label {
		font-size: 28rpx;
		color: #999999;
	}

	.phone-num {
		font-size: 28rpx;
		color: #666666;
	}

	.phone-icon {
		font-size: 24rpx;
		color: #409eff !important;
		margin-left: 8rpx;
	}
</style>