universal-wechat-uniapp-241007/pages_order/renting/rentingDetail.vue

<template>
	<view>

		<view class="leftClick"
		@click="$utils.navigateBack">
			<uv-icon
			size="30rpx"
			color="#fff"
			name="arrow-left"></uv-icon>
		</view>

		<view style="width: 100vw; height: 553rpx;">
			<!-- <image style="width: 100vw; height: 553rpx;"
				src="https://pic1.ajkimg.com/display/anjuke/ea5773-%E8%83%9C%E9%80%B8%E5%9C%B0%E4%BA%A7/3b5e900e0ed231e6154759c8c885b6cc-800x650.jpg?frame=1"
				mode="aspectFill" /> -->
				<uv-swiper
				:list="detail.image && detail.image.split(',')" 
				indicator
				height="553rpx"
				indicatorStyle="bottom: 100rpx;"
				></uv-swiper>
		</view>

		<view
			style="padding: 36rpx; background: #FFF;">

			<view class="t0">{{ detail.money }}元/月</view>
			<view class="t1">{{ detail.title }} {{ detail.home }}</view>
			<!-- <view class="t2">房源编号:HC42012205JC33V</view> -->
			<view class="t2">{{ detail.titleSub }}</view>
			<view class="t2">{{ detail.createTime }}更新 · 浏览 {{ detail.num }}</view>

			<view class="driver"></view>

			<view class="flex-wrap xr">
				<view class="sb-w4 h70">
					<view class="font-a">{{ detail.face }}</view>
					<view class="font-b">朝向</view>
				</view>
				<view class="sb-w4 h70">
					<view class="font-a">{{ detail.crm }}</view>
					<view class="font-b">面积</view>
				</view>
				<view class="sb-w4 h70">
					<view class="font-a">{{ detail.floor }}</view>
					<view class="font-b">楼层</view>
				</view>
				<view class="sb-w4 h70">
					<view class="font-a">{{ detail.decoration }}</view>
					<view class="font-b">装修</view>
				</view>
			</view>

			<view class="driver"></view>

			<view class="line64">
				<view class="flex-sb">
					<view class="w50">
						<span class="font-b">付款：</span>
						<span class="font-c">{{ detail.payment }}</span>
					</view>
					<view class="w50">
						<span class="font-b">电梯：</span>
						<span class="font-c">{{ detail.lift }}</span>
					</view>
				</view>
				<view class="flex-sb">
					<view class="w50">
						<span class="font-b">交付：</span>
						<span class="font-c">{{ detail.deliver }}</span>
					</view>
					<view class="w50">
						<span class="font-b">看房：</span>
						<span class="font-c">{{ detail.showings }}</span>
					</view>
				</view>
				<!-- <view class="flex-sb">
					<view>
						<span class="font-b">投诉：</span>
						<span class="font-c">
							<uni-icons type="phone" size="12" />
							{{ detail.phone }}
						</span>
					</view>
				</view> -->
				<!-- <view class="flex-sb">
				<view>
					<span class="font-b">小区：</span>
					<span class="font-c">
						<uni-icons type="paperplane" size="12" />
						{{ detail.address }}
					</span>
				</view>
			</view> -->
			
			
			<!-- <view 
			style="margin-left: auto;"
			class="d-btn" @click="clickService">
				<span>打电话</span>
			</view> -->
			
			
            <callPhone
            :phone="detail.phone" 
            type="1"
            :phoneTitle="detail.title"
            :pid="detail.id"
            title="联系房东"
            :showModel="true"/>
			
		</view>

	</view>

	<!-- 地图位置信息 -->
	<view style="padding: 20rpx;background-color: #FFF;">
		<mapCard
			v-if="detail.latitude && detail.longitude"
			:address-name="detail.address"
			:latitude="detail.latitude"
			:longitude="detail.longitude"
			:address-detail="detail.title"
			@mapClick="onMapClick"
		/>
	</view>

		<!-- <view class="b-fiexd flex" style="height: 98rpx; z-index: 2;">
			<view style="padding-left: 20rpx;">
				<image src="/static/logo.png" class="radius80 test" />
			</view>
			<view style="padding: 12rpx 20rpx; width: 280rpx;
			display: flex;align-items: center;">
				<view class="font-d">{{ detail.userId }}</view>
			</view>
			<view style="padding: 20rpx" @click="clickShare()">
				<uni-icons type="redo"></uni-icons>
			</view>
			<view class="d-btn" @click="clickService">
				<span>打电话</span>
			</view>
		</view> -->
		
		<commentList
		@getData="getData"
		:list="list"
		:params="params"
		/>

	</view>
</template>

<script>
	import mixinsList from '@/mixins/list.js'
	import commentList from '../components/list/comment/commentList.vue'
	import mapCard from '@/components/base/mapCard.vue'
	export default {
		mixins: [mixinsList],
		components : {
			commentList,
			mapCard,
		},
		data() {
			return {
				id : 0,
				detail : {},
				collectionFlag : false,
				mixinsListApi : 'getCommentPage',
				params : {
					type : '1',
					orderId : '',
					name : '',
				},
			}
		},
		onLoad(options) {
			this.id = options.id
			
			
			this.queryParams.type = this.params.type
			this.queryParams.orderId = options.id
			
			this.params.orderId = options.id
			
			// 设置分享路径
			this.share.path = '/pages_order/renting/rentingDetail?id=' + this.id
		},
		onPullDownRefresh() {
			this.getDetail()
		},
		onShow() {
			this.getDetail()
		},
		methods: {
			// 地图点击事件
			onMapClick(data) {
				console.log('地图点击事件:', data);
			},
			clickShare() {
				uni.share({
					provider: 'weixin',
					type: 5,
					success: (res) => {
						console.log(res);
					}
				});
			},
			clickService() {
				uni.makePhoneCall({
					phoneNumber: this.detail.phone,
				});
			},
			getDetail(){
				let data = {
					id : this.id
				}
				
				this.$api('getRentDetail', data, res => {
					if(res.code == 200){
						
						this.params.name = res.result.title
						
						this.detail = res.result
						
						// 设置分享信息
						this.share.title = res.result.title
						this.share.imageUrl = this.$utils.getImageOne(res.result.image)
					}
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	.leftClick{
		position: absolute;
		top: calc(var(--status-bar-height) + 20rpx);
		left: 20rpx;
		background-color: #00000033;
		padding: 20rpx;
		border-radius: 50%;
		z-index: 99;
	}
	
	.t0 {
		font-weight: 1000;
		font-size: 32rpx;
		color: #FF0000;
		line-height: 64rpx;
	}

	.t1 {
		font-weight: bold;
		font-size: 36rpx;
		color: #3D3D3D;
		line-height: 64rpx;
	}

	.t2 {
		font-weight: 400;
		font-size: 24rpx;
		color: #ADADAD;
		line-height: 42rpx;
	}

	.driver {
		width: 100%;
		height: 2rpx;
		background-color: #D5D5D5;
		opacity: .4;
		margin: 20rpx auto;
	}

	.xr {
		padding: 10rpx 0 20rpx;
	}

	.font-a {
		font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
		font-weight: 400;
		font-size: 30rpx;
		color: #3D3D3D;
		line-height: 46rpx;
		text-align: center;
	}

	.font-b {
		font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
		font-weight: 400;
		font-size: 24rpx;
		color: #ADADAD;
		line-height: 46rpx;
	}

	.font-d {
		font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
		font-weight: 800;
		font-size: 28rpx;
		color: #333;
		line-height: 32rpx;
	}

	.font-c {
		font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
		font-weight: 400;
		font-size: 24rpx;
		color: #333;
		line-height: 46rpx;
	}


	.d-btn {
		width: 200rpx;
		height: 72rpx;
		line-height: 72rpx;
		background: #4255E4;
		border-radius: 36rpx 36rpx 36rpx 36rpx;

		font-weight: 400;
		font-size: 28rpx;
		color: #FFFFFF;
		text-align: center;

		margin: 12rpx;
	}
</style>