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; position: absolute; z-index: 1; width: calc(100vw - 72rpx); min-height: 780rpx; border-radius: 20rpx 20rpx 20rpx 20rpx;margin-top: -20rpx;">

			<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>

		</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 class="font-b">新城国际花都</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>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				id : 0,
				detail : {},
			}
		},
		onLoad({id}) {
			this.id = id
		},
		onShow() {
			this.getData()
		},
		methods: {
			clickShare() {
				uni.share({
					provider: 'weixin',
					type: 5,
					success: (res) => {
						console.log(res);
					}
				});
			},
			clickService() {
				uni.makePhoneCall({
					phoneNumber: this.detail.phone,
				});
			},
			getData(){
				let data = {
					id : this.id
				}
				if(uni.getStorageSync('token')){
					data.token = uni.getStorageSync('token')
				}
				this.$api('getRentDetail', data, res => {
					if(res.code == 200){
						this.detail = res.result
					}
				})
			},
		}
	}
</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>