ErectionPlatform/pagesHome/pages/taskDetails/clientInfo.vue

<template>
	<view class="">
		<view class="mt20 row flex-c-sb">
			<text class="title">商户名称</text>
			<text class="info">{{info.balance_name}}</text>
		</view>

		<!-- <view class="row flex-c-sb">
			<text class="title">商户联系电话</text>
			<text class="info">漆彪</text>
		</view> -->

		<view class="row flex-c-sb">
			<text class="title">设计师</text>
			<text class="info">{{info.designer}}</text>
		</view>

		<view class="row flex-c-sb">
			<text class="title">设计师联系电话</text>
			<text class="info">{{info.designer_tel}}</text>
		</view>

		<view class="row flex-c-sb">
			<text class="title">客户</text>
			<text class="info">{{info.name}}</text>
		</view>

		<view class="row flex-c-sb">
			<text class="title">客户联系电话</text>

			<view class="flex" @click="handleCallPhone">
				<text class="mr10 specialInfo">
					{{info.tel||'暂无'}}
				</text>

				<u-icon name="phone-fill" color="#509fff" size="36"></u-icon>
			</view>
		</view>

		<view class="row ">
			<view class="flex-c-sb">
				<text class="title">客户地址</text>

				<view class="flex">
					<text class="mr10 specialInfo">
						导航
					</text>

					<u-icon name="map-fill" color="#509fff" size="36"></u-icon>
				</view>
			</view>

			<view class="text-end mt10">
				{{info.address}}
			</view>
		</view>

		<!-- <view class="row">
			<view class="flex-c-sb">
				<text class="title">所在地</text>

				<text class="info">{{details.info}}</text>
			</view>

			<view class="mt10">
				地址
			</view>
		</view> -->

		<!-- <view class="row flex-c-sb">
			<text class="title">任务类型</text>
			<text class="info">漆彪</text>
		</view> -->

		<view class="row flex-c-sb">
			<text class="title">预约完成时间</text>
			<text class="info">{{info.install_time}}</text>
		</view>

		<view class="row flex-c-sb">
			<text class="title">预计上门服务时间</text>
			<view class="flex-c-c">
				<text class="specialInfo">
					{{info.expect_install_time}}
				</text>

				<u-icon name="arrow-right" color="#509fff" size="30"></u-icon>
			</view>
		</view>

		<view class="row">
			<view class="title">施工图纸</view>
			<view class="info mt10 flex img_container">
				<template v-if="info.files">
					<block v-for="item in info.files">
						<view class="">
							<image :src="item.url" mode=""></image>
						</view>
					</block>
				</template>
			</view>
		</view>

		<view class="row">
			<view class="title">服务特殊要求备注</view>
			<view class="info mt10">
				{{info.remark || '暂无数据'}}
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { ref, reactive, defineProps, computed } from 'vue';
	import type { PropType } from 'vue';

	const props = defineProps({
		/** 页面路由数据 */
		pageInfo: {
			type: Object as PropType<Object>,
			required: true,
		},
		/** 页面数据 */
		info: {
			type: Object as PropType<Object>,
			required: true,
		}
	})

	const pageInfo = computed(() => {
		console.log('props.pageInfo :>> ', props.pageInfo);

		if (props.pageInfo) return props.pageInfo
		else return {}
	})

	const info = computed(() => {
		console.log('props.info :>> ', props.info);

		if (props.info && props.info.detail) return props.info.detail
		else return {}
	})

	/** 打电话 */
	const handleCallPhone = () => {
		uni.makePhoneCall({
			phoneNumber: info.value.tel
		})
	}
</script>

<style scoped lang="scss">
	@import url('@/utils/style/common.scss');

	.row {
		padding: 20upx;
		border-bottom: 4upx solid #eee;
		font-size: 0.9rem;

		.title {
			font-weight: bold;
		}

		.info {
			color: #999;
		}

		.img_container {
			flex-wrap: wrap;

			>view {
				padding: 10upx;
			}

			image {
				width: 200upx;
				height: 200upx;
				border-radius: 10upx;
				background: #acc;
			}
		}

		.specialInfo {
			color: #509fff;
		}
	}
</style>