fangtanhua/pages/mine/baobei-info.vue

<template>
	<view class="baobei-info">
		<view class="info-header u-flex-col u-col-center u-row-center">
			<view class="image-box u-flex u-row-between">
				<view class="image u-flex u-row-center" v-for="(item,index) in tabs" :key="index">
					<image src="../../static/images/jindu1.png" v-if="index < status" mode=""></image>
					<image src="../../static/images/jindu.png" v-else mode=""></image>
				</view>
			</view>
			<view class="jindu-box u-flex u-row-between">
				<view class="item-bg" :style="{width:130 * status + 'rpx'}"></view>
				<view class="item" v-for="(item,index) in tabs" :key="index">
					<text :class="index < status ? 'text' : ''">{{item}}</text>
				</view>
			</view>
		</view>
		<u-gap bg-color="#F5F5F5" height="20"></u-gap>
		<view class="" style="padding: 0 24rpx;width: 702rpx;margin: 0 auto;border-radius: 20rpx;background-color: #fff;">
			<view class="broker-title">
				基本信息
			</view>
			<view class="broker-row u-flex">
				<view class="broker-row-left u-flex">
					<text>意向区域</text>
					<!-- <text>*</text> -->
				</view>
				<input type="text" placeholder="请选择您的意向区域" v-model="detail.area_name" class="input-right" :disabled="true">
				<u-icon name="arrow-right" color="#CCCCCC"></u-icon>
			</view>
			<view class="broker-row u-flex">
				<view class="broker-row-left u-flex">
					<text>意向项目</text>
				</view>
				<input type="text" placeholder="请选择您的意向楼盘" v-model="detail.property_name" class="input-right" :disabled="true">
				<u-icon name="arrow-right" color="#CCCCCC"></u-icon>
			</view>
			<view class="broker-row u-flex">
				<view class="broker-row-left u-flex">
					<text>客户姓名</text>
					<!-- <text>*</text> -->
				</view>
				<input type="text" placeholder="请输入" class="input-right" v-model="detail.client_name" :disabled="true">
			</view>
			<view class="broker-row u-flex">
				<view class="broker-row-left u-flex">
					<text>联系方式</text>
					<!-- <text>*</text> -->
				</view>
				<input type="number" placeholder="请输入" class="input-right" v-model="detail.client_phone" :disabled="true">
			</view>
		</view>
		<u-gap bg-color="#F5F5F5" height="20"></u-gap>
		<view class="" style="padding: 0 24rpx;width: 702rpx;margin: 0 auto;border-radius: 20rpx;background-color: #fff;">
			<view class="broker-title">
				其他信息
			</view>
			<view class="broker-row u-flex">
				<view class="broker-row-left u-flex">
					<text>带看人姓名</text>
					<!-- <text>*</text> -->
				</view>
				<input type="text" placeholder="请输入" class="input-right" v-model="detail.report_name" :disabled="true">
			</view>
			<view class="broker-row u-flex">
				<view class="broker-row-left u-flex">
					<text>联系方式</text>
					<!-- <text>*</text> -->
				</view>
				<input type="number" placeholder="请输入" class="input-right" v-model="detail.report_phone" :disabled="true">
			</view>
			<view class="broker-row u-flex">
				<view class="broker-row-left u-flex">
					<text>中介门店</text>
					<!-- <text>*</text> -->
				</view>
				<input type="text" placeholder="请输入" class="input-right" v-model="detail.shop" :disabled="true">
			</view>
			<view class="broker-row u-flex">
				<view class="broker-row-left u-flex">
					<text>预约看房日期</text>
				</view>
				<input type="text" placeholder="请选择看房日期" class="input-right" v-model="detail.time" :disabled="true">
				<u-icon name="arrow-right" color="#CCCCCC"></u-icon>
			</view>
			<view class="broker-row u-flex">
				<view class="broker-row-left u-flex">
					<text>审核状态</text>
				</view>
				<view class="input-right">
					<text style="color: rgba(240, 127, 48, 1);" v-if="detail.status == 1">审核中</text>
					<text style="color: rgba(68, 220, 37, 1);" v-if="detail.status == 2">已通过</text>
					<text style="color: rgba(220, 75, 37, 1);" v-if="detail.status == 3">审核失败</text>
					<text style="color: rgba(204, 204, 204, 1)" v-if="detail.status == 4">已失效</text>
				</view>
			</view>
		</view>
		<u-gap bg-color="#F5F5F5" height="20"></u-gap>
		<view class="" style="padding: 0 24rpx;width: 702rpx;margin: 0 auto;border-radius: 20rpx;background-color: #fff;">
			<view class="broker-title">
				报备流程
			</view>
			<view class="u-flex" style="padding-bottom: 40rpx;">
				<text style="width: 22rpx;height: 22rpx;background: #F07F30;border-radius: 100rpx;margin-right: 24rpx;"></text>
				<view class="u-flex-col u-col-top" style="width: 348rpx;background: #F2F2F2;border-radius: 10rpx;padding: 24rpx;">
					<text style="margin-bottom: 6rpx;font-size: 24rpx;color: rgba(240, 127, 48, 1);" v-if="detail.status == 1">审核中</text>
					<text style="margin-bottom: 6rpx;font-size: 24rpx;color: rgba(68, 220, 37, 1);" v-if="detail.status == 2 && detail.flow_status == 1">报备</text>
					<text style="margin-bottom: 6rpx;font-size: 24rpx;color: rgba(68, 220, 37, 1);" v-if="detail.status == 2 && detail.flow_status == 2">到访</text>
					<text style="margin-bottom: 6rpx;font-size: 24rpx;color: rgba(68, 220, 37, 1);" v-if="detail.status == 2 && detail.flow_status == 3">认购</text>
					<text style="margin-bottom: 6rpx;font-size: 24rpx;color: rgba(68, 220, 37, 1);" v-if="detail.status == 2 && detail.flow_status == 4">签约</text>
					<text style="margin-bottom: 6rpx;font-size: 24rpx;color: rgba(68, 220, 37, 1);" v-if="detail.status == 2 && detail.flow_status == 5">结佣</text>
					<text style="margin-bottom: 6rpx;font-size: 24rpx;color: rgba(220, 75, 37, 1);" v-if="detail.status == 3">审核失败</text>
					<text style="margin-bottom: 6rpx;font-size: 24rpx;color: rgba(204, 204, 204, 1)" v-if="detail.status == 4">已失效</text>
					<text style="font-size: 20rpx;color: #999999;">{{detail.explain}}</text>
				</view>
			</view>
		</view>
		<view style="height: 200rpx;"></view>
		<view class="baobei-info-btn" @click="show = true" v-if="detail.status == 2">
			二维码展示
		</view>
		<u-popup v-model="show" mode="center" background="rgba(0,0,0,0)">
			<view class="code-popup u-flex-col u-col-center">
				<image src="../../static/images/code.png" class="code" mode=""></image>
				<u-icon name="close-circle-fill" size="72" color="#fff" @click="show = false"></u-icon>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import { mapState } from 'vuex'
	export default {
		data() {
			return {
				show: false,
				id: '',
				detail: {},
				tabs: ['报备', '到访', '认购', '签约', '结佣'],
				status: 0
			}
		},
		onLoad(option) {
			this.id = option.id
			this.getdata()
		},
		onShow() {
			uni.setNavigationBarTitle({
				title: this.config.store_title
			})
		},
		computed:{
			...mapState(['config'])
		},
		methods: {
			getdata() {
				this.$u.post('/api/Report/report_detail', {
					id: this.id
				}).then(res => {
					this.detail = res.data
					if(this.detail.status == 2){
						this.status = res.data.flow_status
					}
				})
			}
		}
	}

</script>

<style lang="scss">
	page{
		background-color: rgba(245, 245, 245, 1);
	}
	.code-popup {
		.code {
			width: 564rpx;
			height: 564rpx;
			border-radius: 20rpx;
			margin-bottom: 60rpx;
		}
	}

	.baobei-info {
		.info-header {
			width: 702rpx;
			height: 180rpx;
			background: #FFFFFF;
			border-radius: 20rpx;
			margin: 20rpx auto;
		
			.jindu-box {
				border-radius: 20rpx;
				overflow: hidden;
				position: relative;
				z-index: 1;
				background-color: rgba(229, 229, 229, 1);
		
				.item-bg {
					background-color: rgba(31, 126, 255, 1);
					border-radius: 20rpx;
					height: 54rpx;
					position: absolute;
					top: 0;
					left: 0;
					z-index: -1;
				}
		
				.item {
					width: 130rpx;
		
					// position: relative;
					// z-index: 1;
					// border-radius: 20rpx;
					// overflow: hidden;
					text {
						display: inline-block;
						width: 130rpx;
						line-height: 54rpx;
						font-size: 24rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #999999;
						text-align: center;
					}
		
					.text {
						color: #fff;
					}
				}
			}
		
			.image-box {
				margin-bottom: 6rpx;
		
				.image {
					width: 130rpx;
		
					image {
						width: 67rpx;
						height: 64rpx;
					}
				}
			}
		}
		.baobei-info-btn {
			width: 702rpx;
			line-height: 82rpx;
			background: #1F7EFF;
			border-radius: 8rpx;
			position: fixed;
			bottom: 50rpx;
			left: 24rpx;
			text-align: center;
			font-size: 28rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
			z-index: 100;
		}

		.broker-row {
			height: 82rpx;
			border-bottom: 2rpx solid #F5F5F5;

			.input-right {
				flex: 1;
				font-size: 24rpx;
			}

			.broker-row-left {
				width: 252rpx;

				text:first-child {
					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #999999;
				}

				text:nth-child(2) {
					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #F83838;
				}
			}
		}

		.broker-title {
			padding: 24rpx 0;
			font-size: 28rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #333333;
		}
	}

</style>