mudi-app/components/lease_list_item.vue

<template>
	<view class="lease_cart">
		<view class="title" v-if="buy && btn">
			<view class="date">
				{{info.appointmentTime ? info.appointmentTime : ''}}
			</view>
			<view class="status" v-if="info.returnVisitStatus === 'N' ">
				待处理
			</view>
			<view class="status over" v-else-if="info.returnVisitStatus === 2 || info.returnVisitStatus === 6">
				已签约
			</view>
				<view class="status over" v-else-if="info.returnVisitStatus === 'Y' ">
				已完成
			</view>
			<view class="status clear" v-if="info.returnVisitStatus === '-' ">
				已取消
			</view>
		</view>
		<view class="cart">
			<view class="">
				<u-image :src="info.pagodaMainImg" :width="width" :height="height" mode="scaleToFill" border-radius="12rpx">
				</u-image>
			</view>
			<view class="center">
				<view class="name">
					{{info.pagodaName}}
				</view>
				<view class="positon">
					{{info.graveNum}}墓穴 | {{info.floor}}层
				</view>
				<!-- 	<view class="link">
					链上查看
				</view> -->
				<view class="location">
					<view class="icon">

					</view>
					<view class="text">
						{{info.address}}
					</view>
				</view>
				<view class="subscribe" v-if="buy && btn">
					<view class="btn" v-if="info.returnVisitStatus === 'N'">
						<view class="relation" @click.stop="toPhone">
							联系
						</view>
						<view class="cancel" @click.stop="cancel">
							取消
						</view>
					</view>
					<view class="btn floot" v-else-if="info.returnVisitStatus === 2">
						<view class="btn_two">
							002号墓穴
						</view>
					</view>
					<view class="btn " v-else-if="info.returnVisitStatus === 'Y' ">
						<view class="cancel over">
							已完成
						</view>
					</view>
					<view class="btn floot"  v-else-if="info.returnVisitStatus === ' '">
						<view class="btn_two">
							002号墓穴
						</view>
					</view>
				</view>

				<view class="buy" v-else-if="btn">
					<view class="btn" v-if="info.status === 1|| info.status === 5">
						<view class="lease" @click="lease">
							我要出租
						</view>
						<view class="resell" @click="resell">
							我要转卖
						</view>
					</view>
					<view class="btn" v-if="info.status === 2|| info.status === 6">
						<view class="halfway">
							转卖中
						</view>
					</view>
					<view class="btn" v-if="info.status === 3|| info.status === 7">
						<view class="leaseHalfway">
							出租中
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			width: {
				type: String,
				default: "100%"
			},
			height: {
				type: String,
				default: "100%"
			},
			info: {
				type: Object,
				default: () => {
					return {
						imgUrl: "../../static/banner.png",
						name: '云凌藏隐陵园002号神塔',
						position: '72墓穴｜5层',
						link: ''
					}
				}
			},
			buy: {
				type: Boolean,
				default: true
			},
			btn: {
				type: Boolean,
				default: true
			}
		},
		methods: {
			lease() {
				this.$emit('lease')
			},
			resell() {
				this.$emit('resell')
			},
			toPhone(){
				// 电话
				this.$emit('toPhone')
			},
			cancel(){
				// 取消预约
				this.$emit('cancel')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.lease_cart {
		padding: 0 36rpx;
	}

	.title {
		display: flex;
		/* 元素平均分配 */
		justify-content: space-between;
		margin-bottom: 24rpx;
		font-size: 30rpx;
		color: #303133;
		font-weight: 500;

		.status {
			color: #5173B9;
			font-size: 24rpx;
		}

		.over {
			color: #1DA83D;
		}

		.clear {
			color: #DCDFE6;
		}
	}

	.cart {
		display: flex;

		.center {
			height: 100%;
			margin-left: 24rpx;
			flex: 1;
		}

		.name {
			color: #303133;
			font-size: 28rpx;
			line-height: 32rpx;
		}

		.positon {
			color: #909399;
			font-size: 24rpx;
			margin-top: 10rpx;
		}

		.link {
			margin-top: 12rpx;
			width: 114rpx;
			height: 44rpx;
			background-color: #edf5ff;
			color: #509EFA;
			font-size: 20rpx;
			text-align: center;
			line-height: 44rpx;
			border-radius: 8rpx;
		}

		.location {
			color: #909399;
			display: flex;
			flex: 1;
			margin-top: 8rpx;

			.icon {
				width: 24rpx;
				height: 24rpx;
				background-image: url(../static/pos.png);
				background-size: 100% 100%;
				transform: translateY(8rpx);
				margin-right: 10rpx;
			}

			.text {
				overflow: hidden;
				/*文本超出隐藏*/
				text-overflow: ellipsis;
				/*文本超出显示省略号*/
				white-space: nowrap;
				/*超出的空白区域不换行*/
				width: 90%;
			}
		}
		
	
		.btn {
			margin-top: 32rpx;
			display: flex;
			align-items: center;

			.relation {
				margin-left: 182rpx;
				color: #FFFFFF;
			}

			.cancel,
			.relation,
			.btn_two {
				width: 96rpx;
				height: 50rpx;
				background: #5173B9;
				opacity: 1;
				border-radius: 8rpx;
				font-size: 24rpx;
				text-align: center;
				line-height: 50rpx;
			}

			.cancel {
				background: #FFFFFF;
				border: 2rpx solid #EDEFF2;
				margin-left: 24rpx;
			}

			.btn_two {
				width: 164rpx;
				height: 50rpx;
				background: #E67D29;
				border-radius: 8rpx;
				color: #FFFFFF;
				// margin-left: 234rpx;

				font-size: 24rpx;
			}


			.over {
				margin-left: 278rpx;
				width: 120rpx;
			}

			.lease {
				width: 144rpx;
				height: 50rpx;
				background: #5173B9;
				opacity: 1;
				border-radius: 8rpx;
				margin-right: 24rpx;
				margin-left: 86rpx;
				line-height: 50rpx;
				text-align: center;
				color: #FFFFFF;
			}

			.resell {
				width: 144rpx;
				height: 50rpx;
				background: #E67D29;
				opacity: 1;
				line-height: 50rpx;
				text-align: center;
				border-radius: 8rpx;
				color: #FFFFFF;
			}

			.halfway {
				color: #5173B9;
				margin-left: 326rpx;
			}

			.leaseHalfway {
				color: #1DA83D;
				margin-left: 326rpx;
			}
			
		}
		.floot {
			display: flex;
			justify-content: flex-end;
		}
	}
</style>