mudi-app/pages/user/pagodaInfo/pagodaInfo.vue

<template>
	<view class="leaseInfo">
		<u-navbar title="神塔详情详情" :title-bold="true"></u-navbar>
		<view class="content">
			<view class="top">
				<TopItem width="280rpx" height="210rpx" :info="info" :btn="false"></TopItem>
			</view>

			<view class="order">
				<view class="info">
					<view class="title">
						订单信息
					</view>
					<view class="item">
						<text class="text">合同编号：</text>P06023400
					</view>
					<view class="item">
						<text class="text"> 合同签注时间：</text> 2021-05-26
					</view>
					<view class="item">
						<text class="text"> 租赁年限：</text>20年
					</view>
					<view class="item">
						<text class="text"> 租赁到期时间：</text> 2041-05-26
					</view>

					<view class="item pdf">
						<text class="text"> 合同文件：</text>
						<view class="link" @click="toLink">
							<text class="link">链上查看</text>
							<u-icon name="arrow-right" size="24" style="margin-left: 12rpx;"></u-icon>
						</view>
					</view>

					<view class="item authority">
						<view class="text">
							使用权证：
						</view>
						<view class="img">
							<u-image width="100%" height="500rpx" src="../../../static/authority.png"
								border-radius="12rpx" style="margin-top: 24rpx;"></u-image>
						</view>
					</view>
				</view>
			</view>

			<view class="location" v-if="isLocation">
				<view class="title">
					神塔墓穴
				</view>
				<view class="list">
					<view class="item" :class="{active: (index + 1) % 2 === 0}" v-for="(item, index) in 99" :key="index">
						{{item}}
					</view>
				</view>
			</view>

			<view class="kong" v-if="!isLocation">

			</view>
			<view class="bottom" v-if="isPagoda && !isLocation">
				<view class="lease" @click="sublease()">
					我要出租
				</view>
				<view class="pagoda" @click="sell()">
					我要转卖
				</view>
			</view>
			<view class="bottom number" v-else-if="!isPagoda && !isLocation">
				发起转卖时间：2021-06-04 13:45
			</view>
			
			<u-modal v-model="show" v-show="show" confirm-color="#BFC2CC" :class="{active: isSubmit}" @cancel="show =false"
				@confirm="confirm" :show-cancel-button="true" :show-title="false">
				<view class="title">
					{{title}}
				</view>
				<view class="input">
					<u-input v-model="phone" :focus="true" placeholder="请输入联系电话" :border="true" />
				</view>
			</u-modal>
		</view>
	</view>
</template>

<script>
	import TopItem from '../../../components/lease_list_item'
	export default {
		data() {
			return {
				info: {
					imgUrl: "../../../static/banner.png",
					name: '云凌藏隐陵园009号神塔',
					position: '72墓穴｜5层',
					location: '深圳市南山区桃源街道莫屋村24…',
					status: 2,
					serial: '合同编号：P06023400'
				},
				isPagoda: true,
				isLocation: false,
				show: false,
				phone: '',
				title: '',
				
			}
		},
		methods: {
			toLink() {
				uni.navigateTo({
					url: '../../mian/linkInfo/linkInfo'
				})
			},
			sublease() {
				this.title = '转租'
				this.show = true
			},
			sell() {
				this.title = '转卖'
				this.show = true
			}
		},
		components: {
			TopItem
		},
		onLoad(data) {
			console.log(data)
			if (data?.type === '2') {
				this.isPagoda = false
			}
			if (data?.type === '3') {
				this.isLocation = true
			}
		},
		computed: {
			isSubmit() {
				return this.phone !== ''
			}
		}
	}
</script>

<style scoped lang="scss">
	.leaseInfo {
		background-color: #f5f7fa;
	}

	.top {
		height: 306rpx;
		display: flex;
		align-items: center;
		margin-bottom: 24rpx;
		background-color: #FFFFFF;
	}

	.order {
		margin-bottom: 200rpx;
	}

	.order,
	.prove {
		background-color: #FFFFFF;
		padding: 46rpx 36rpx;
		margin-bottom: 24rpx;

		.title {
			display: flex;
			width: 100%;
			margin-bottom: 24rpx;
			font-size: 32rpx;
			color: #303133;
			font-weight: 600;
		}

		.item {
			width: 100%;
			margin-bottom: 14rpx;

			.text {
				color: #909399;
			}

			font-size: 28rpx;
			font-family: SF Pro;
			line-height: 36rpx;
			color: #303133;
			word-break:break-all;
		}

		.pdf {
			display: flex;
			justify-content: space-between;

			.link {
				color: #5173B9;
			}
		}

		.img {
			margin-bottom: 48rpx;
		}
	}

	.kong {
		height: 130rpx;
	}

	.bottom {
		position: fixed;
		left: 0;
		bottom: 0;
		height: 128rpx;
		background-color: #FFFFFF;
		z-index: 2;
		display: flex;
		align-items: center;
		width: 100%;

		.lease,
		.pagoda {
			width: 256rpx;
			height: 88rpx;
			background: #5173B9;
			font-size: 28rpx;
			opacity: 1;
			color: #FFFFFF;
			text-align: center;
			line-height: 88rpx;
			border-radius: 12rpx;
			margin-left: 84rpx;
		}

		.pagoda {
			background: #E67D29;
			margin-left: 72rpx;
		}
	}

	.number {
		font-size: 28rpx;
		font-family: SF Pro;
		font-weight: 500;
		line-height: 32rpx;
		color: #5173B9;
		opacity: 1;
		text-align: center;
		justify-content: center;
	}

	.location {
		padding: 48rpx 36rpx;
		padding-right: 0;
		background-color: #FFFFFF;

		.title {
			margin-bottom: 24rpx;
			font-size: 32rpx;
			font-weight: 500;
		}
		.list {
			display: flex;
			flex-wrap: wrap;
		}
		.item {
			width: 96rpx;
			height: 60rpx;
			line-height: 60rpx;
			text-align: center;
			background: #E67D29;
			opacity: 1;
			border-radius: 8rpx;
			color: #FFFFFF;
			margin-right: 20rpx;
			margin-bottom: 20rpx;
		}
		
		.active {
			background: #D3D6E0;
		}
	}
	
	.title {
		height: 140rpx;
		line-height: 140rpx;
		border-radius: 24rpx;
		text-align: center;
		font-size: 32rpx;
		font-weight: 500;
	}
	
	.input {
		margin-bottom: 48rpx;
		padding: 0 36rpx;
	}

</style>