flying-monkey/pages/project/details.vue

<template>
	<view class="content">
		<statusNav returnColor="#c2c2c2" navBarTitle="项目详情"></statusNav>
		<container-subgroup-two>
			<view slot="content" style="margin: -30rpx;">
				<view class="head-top">
					<view class="details-head">
						<view class="swiper-head">
							<swiper class="swiper" @change="changeAutoplay" :autoplay="autoplay" :interval="interval" circular>
								<swiper-item v-for="(item,index) in projectObj.completed_img" :key="index">
									<view class="swiper-item uni-bg-red">
										<image class="img" :src="item" mode="aspectFill"></image>
									</view>
								</swiper-item>
							</swiper>
							<view class="indication-point fon24 disjcac">{{index}}/{{projectObj.completed_img.length}}</view>
						</view>
						<view class="title">{{projectObj.project_name}}</view>
						<view class="code">{{projectObj.project_number}}</view>
						<view class="address">
							<image class="img" src="../../static/iocn/im.png" mode=""></image>
							<view class="text">{{projectObj.address}}</view>
						</view>
					</view>
					<view class="last-date">
						<view class="last-date-content">
							<image class="icon" src="../../static/iocn/gzzt.png" mode=""></image>
							<view class="text">最近一次维保时间：{{projectObj.downtime}}</view>
						</view>
					</view>
				</view>
				<view class="project-message-title">
					<view class="icon"></view>
					<view class="text">项目概况</view>
				</view>
				<view class="project-message-content">
					<view class="li" v-if="projectObj.product_brand">
						<view class="title-one">
							<text>品</text>
							<text>牌：</text>
						</view>
						<view class="text">{{projectObj.product_brand}}</view>
					</view>
					<view class="li" v-if="projectObj.product_model">
						<view class="title-one">
							<text>型</text>
							<text>号：</text>
						</view>
						<view class="text">{{projectObj.product_model}}</view>
					</view>
					<view class="li" v-if="projectObj.product_size">
						<view class="title-one">
							<text>尺</text>
							<text>寸：</text>
						</view>
						<view class="text">{{projectObj.product_size}}</view>
					</view>
					<view class="li">
						<view class="title">安装位置：</view>
						<view class="text">xx综合楼2楼会议室403</view>
					</view>
					<view class="li">
						<view class="title">竣工日期：</view>
						<view class="text">2022/01/08</view>
					</view>
				</view>
				<view class="record-nav">
					<view class="li" @click="recordNav(index)" :class="item.state?'on':''"
						v-for="(item,index) in recordState">
						{{item.title}}
					</view>
				</view>
				<view class="record-content">
					<view class="title">维保追踪</view>
					<view class="list">
						<view class="li pad-z40 fon27 col9" :class="index==0 ? 'activeTrack' : ''" v-for="(item,index) in recordList" :key="index">
							<view class="disac fw line-h60">
								<view class="text">{{item.time_line}}</view>
								<!-- <view class="date">2020-05-15 16:00</view> -->
							</view>
						</view>
						<pitera v-if="recordList.length==0" :textStr="nomoreText"></pitera>
					</view>
				</view>
			</view>
		</container-subgroup-two>
	</view>
</template>

<script>
	import statusNav from "../../components/status-nav.vue"
	import containerSubgroupTwo from '@/components/containers/container-subgroup-two.vue';
	import pitera from '@/components/nothing/pitera.vue';
	export default {
		components: {
			statusNav,
			containerSubgroupTwo,
			pitera
		},
		data() {
			return {
				autoplay: true,
				interval: 3000,
				index: 1,
				projectId: "",
				recordState: [{
						title: '维保记录',
						state: true
					},
					{
						title: '保养记录',
						state: false
					},
					{
						title: '巡检记录',
						state: false
					},
				],
				projectObj:'',
				typeId:1,//记录类型 1：维修记录 2:保养记录 3: 巡检记录  
				list_rows:200,
				page:1,
				recordList:[],//记录列表
				nomoreText:''
			}
		},
		onLoad(op) {
			this.projectId = op.id
			this.getData(this.projectId);
			this.getRecord();
		},
		methods: {
			// 查询维保记录、保养记录、巡检记录
			getRecord(){
				let params = {
					project_id: this.projectId,  
					type_id: this.typeId, //记录类型 1：维修记录 2:保养记录 3: 巡检记录  
					list_rows: this.list_rows,
					page:this.page
				}
				this.$requst.get('/universal/api.project/recording',params).then(res=>{
					if(res.code) {
						/**
						 * {
						 * 	 time_line:''
						 * }
						 */
						this.recordList = res.data.data;
					} else {
						this.nomoreText = res.msg;
					}
				})
			},
			changeAutoplay(data) {
				this.index = data.detail.current - 0 + 1
			},
			getData(id) {
				this.$requst.get('/universal/api.project/project_info', {
					project_id: id,
				}).then(res => {
					if (res.code) {
						this.projectObj = res.data;
						console.log(this.projectObj);
					} else {

					}
				})
			},
			recordNav(index) {
				if(index==0) this.typeId = 1;
				if(index==1) this.typeId = 2;
				if(index==2) this.typeId = 3;
				for (var i = 0; i < this.recordState.length; i++) {
					this.recordState[i].state = false
				}
				this.recordState[index].state = true
				this.getRecord();
			}
		}
	}
</script>

<style>
	page {
		background-color: #F7F7F7;
	}

	.content {
		padding: 16rpx 0;
	}

	.swiper {
		width: 100%;
		height: 500rpx;
	}

	.swiper .img {
		height: 500rpx;
		width: 100%;
	}

	.head-top {
		position: relative;
		z-index: 1;
		margin-top: 10rpx;
		/* box-shadow: 0rpx 5rpx 5rpx rgba(0, 0, 0, 0.1); */
	}

	.details-head {
		width: 725rpx;
		margin: auto;
		padding: 24rpx 12rpx;
		box-sizing: border-box;
		height: 682rpx;
		background-color: #FFFFFF;

		border-radius: 20rpx;
	}

	.swiper-head {
		position: relative;
	}

	.indication-point {
		width: 102rpx;
		height: 46rpx;
		border-radius: 26rpx 0 0 0;
		position: absolute;
		right: 0px;
		bottom: 0rpx;
		color: #fff;
		background-color: #e64545;
	}

	.details-head .title {
		font-size: 28rpx;
		padding: 13rpx 0rpx;
	}

	.details-head .code {
		font-size: 24rpx;
		padding: 0rpx 0rpx 13rpx 0rpx;
		color: #ff8800;
	}

	.address {

		display: flex;
		align-items: center;
	}

	.address .img {
		width: 18rpx;
		margin-right: 14rpx;
		height: 24rpx;
	}

	.address .text {
		font-size: 24rpx;
		color: #666666;
	}

	.last-date {
		width: 100%;
		padding: 10rpx 13rpx 10rpx;
		/* border-bottom: 6rpx solid #E7E7E7; */
	}

	.last-date-content {
		width: 100%;
		height: 57rpx;
		display: flex;
		padding-left: 20rpx;
		align-items: center;
		border-radius: 10rpx;

		background: linear-gradient(to right, #FFEBEB, #F7F7F7);
	}

	.last-date-content .icon {
		width: 30rpx;
		height: 30rpx;
		margin-right: 20rpx;
	}

	.last-date-content .text {
		font-size: 22rpx;
		color: #333333;
	}

	.project-message-title {
		display: flex;
		padding: 0 33rpx;
		padding-top: 23rpx;

		align-items: center;
		border-bottom: 2rpx solid #ebebeb;
		border-top: 6rpx solid rgba(231,231,231,.6);
		margin-top: 2rpx;
		background-color: #FFFFFF;
		padding-bottom: 21rpx;
	}

	.project-message-title .icon {
		width: 8rpx;
		height: 27rpx;
		margin-right: 15rpx;
		border-radius: 50rpx;
		background: linear-gradient(#00A2e9, #bbe6f9);
	}

	.project-message-title .text {
		font-size: 26rpx
	}

	.project-message-content {
		display: flex;
		padding: 30rpx 25rpx 0rpx;
		background-color: #FFFFFF;
		border-bottom: 2rpx solid rgba(231,231,231,.6);
		position: relative;
		z-index: 2;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.project-message-content .title-one {
		color: #4d4c4c;
		font-size: 24rpx;
		font-weight: bold;
		width: 93rpx;
		display: flex;
		justify-content: space-between;

	}

	.project-message-content .li {
		display: flex;
		margin-bottom: 31rpx;
	}

	.project-message-content .title {
		color: #4d4c4c;
		font-weight: bold;
		font-size: 24rpx
	}

	.project-message-content .text {
		color: #4d4c4c;
		font-size: 24rpx
	}

	.record-nav {
		padding: 51rpx 50rpx 33rpx;
		display: flex;
		margin-top: 4rpx;
		justify-content: space-between;
		background-color: #FFFFFF;
		border-bottom: 4rpx solid #D5D4D4;
	}

	.record-nav .li {
		font-size: 24rpx;
		width: 128rpx;
		text-align: center;
		font-weight: bold;
		position: relative;
	}

	.record-nav .on {
		color: #00b1ff;
	}

	.record-nav .on::after {
		content: "";
		width: 100%;
		height: 4rpx;
		position: absolute;
		background-color: #00B1FF;
		top: 65rpx;
		left: 0rpx;
	}

	.record-content {
		padding: 0 52rpx;

		padding-top: 33rpx;
		padding-bottom: 40rpx;
		background-color: #FFFFFF;
	}

	.record-content .title {
		color: #333333;
		margin-left: 12rpx;
		font-size: 30rpx;
		margin-bottom: 40rpx;    
	}

	.record-content .list .li {
		position: relative;
		display: flex;
		align-items: center;
		padding-top: 20rpx;
		border-left: 2rpx solid #999999;
	}
	.record-content .list .li::before {
		content: '';
		display: block;
		position: absolute;
		left: -8rpx;
		width: 14rpx;
		height: 14rpx;
		background-color: #999999;
		border-radius: 100%;
	}
	.record-content .list .activeTrack {
		color: #0084ff;
		padding-top: 0rpx;
	}
	.record-content .list .activeTrack::before {
		background-color: rgba(0,132,255,.5);
		top: -4rpx;
		width: 22rpx;
		height: 22rpx;
		left: -12rpx;
		z-index: 1;
	}
	.record-content .list .activeTrack::after {
		content: '';
		display: block;
		position: absolute;
		top: 0;
		left: -8rpx;
		width: 14rpx;
		height: 14rpx;
		background-color: #999999;
		border-radius: 100%;
	}
	.record-content .list .activeTrack .line-h60 {
		margin-top: -26rpx;
		margin-bottom: 20rpx;
	}
	.record-content .list .date {
		margin-left: 20rpx;
	}
</style>