211 lines
4.5 KiB
Vue
211 lines
4.5 KiB
Vue
<template>
|
||
<view class="contentStyle" style="">
|
||
<view class="status-bar"></view>
|
||
<uni-nav-bar title="联系物业" backgroundColor="transparent" :border="false" left-icon="left" @clickLeft="goBack">
|
||
</uni-nav-bar>
|
||
|
||
|
||
<!-- 表单区域 -->
|
||
<scroll-view class="page" scroll-y="true">
|
||
<view v-if="dataList.length === 0" class="empty-state">
|
||
<uni-icons type="info" size="60" 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)">
|
||
<text class="phone-label">值班电话：</text>
|
||
<text class="phone-num">{{phoneItems.phoneNum}}</text>
|
||
<!-- <text class="phone-icon"></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 statusBarHeight = ref(20)
|
||
const dataList = ref([])
|
||
|
||
// ====方法=====
|
||
function callPhone(phone) {
|
||
uni.makePhoneCall({
|
||
phoneNumber: phone.replace(/-/g, ""),
|
||
fail: (err) => {
|
||
console.log('用户取消拨号', err)
|
||
}
|
||
});
|
||
}
|
||
function goBack() {
|
||
uni.switchTab({
|
||
url: '/pages/serviceIndex/serviceIndex',
|
||
});
|
||
}
|
||
|
||
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://47.104.199.163:9090/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: 100vh;
|
||
/* 关键：占满屏幕高度 */
|
||
/* background: linear-gradient(to left bottom, #e2efff 0%, #f9f9f9 50%); */
|
||
}
|
||
/* 空状态 */
|
||
.empty-state {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 100rpx 0;
|
||
color: #ccc;
|
||
}
|
||
|
||
.empty-text {
|
||
font-size: 32rpx;
|
||
color: #999;
|
||
margin-top: 20rpx;
|
||
margin-bottom: 10rpx;
|
||
}
|
||
.page {
|
||
flex: 1;
|
||
overflow-y: auto;
|
||
padding: 0px 40rpx;
|
||
box-sizing: border-box;
|
||
/* background-color: #fff; */
|
||
}
|
||
|
||
/* 卡片容器 */
|
||
.property-card {
|
||
padding: 30rpx;
|
||
/* margin: 0px 40rpx 40rpx 40rpx; */
|
||
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;
|
||
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: 24rpx;
|
||
}
|
||
|
||
/* 电话行 */
|
||
.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;
|
||
}
|
||
.status-bar{
|
||
width: 100vw;
|
||
height: 46px;
|
||
}
|
||
</style> |