rongzidanbao-ui/work/components/business/gtpjg.vue

<template>
	<view>
		<view v-if="datalist&&datalist.length">
			<view class="time" v-for="(lite,lidx) in datalist" :key="lidx">
				<view class="time_t"  @click="getLook(lidx)" :class="lite.check?'act':''">
					<view>{{lite.conferenceTime}}</view>
					<image :src="timeup" class="timeup"></image>
				 </view>
				 <view v-if="lite.check">
					<view class="timebox" v-for="(ite,idx) in lite.children" :key="idx">
						<view class="list">
							<image :src="timel" class="timel"></image>
							<view class="listr">
								<view class="listrx flext">
									<view class="ltit">贷款申请编号：</view>
									<view class="ltxt">{{ite.loanApplicationNumber}}</view>
								</view>
								<view class="listrx flext">
									<view class="ltit">贷款公司名称：</view>
									<view class="ltxt">{{ite.loanApplicationName}}</view>
								</view>
								<view class="listrx flext">
									<view class="ltit">参会时间：</view>
									<view class="ltxt">{{ite.conferenceTime}}</view>
								</view>
								<view class="listrx flext">
									<view class="ltit">投票人员：</view>
									<view class="ltxt">{{ite.realName}}</view>
								</view>
								<view class="listrx flext">
									<view class="ltit">投票结果：</view>
									<view class="ltxt" v-if="ite.votingResult">{{ite.votingResult=='Y'?'同意':'不同意'}}</view>
								</view>
								<view class="listrx flext">
									<view class="ltit">担保额度：</view>
									<view class="ltxt" v-if="ite.lineGuarantee">{{ite.lineGuarantee}}万元</view>
								</view>
								<view class="listrx flext">
									<view class="ltit">担保期限：</view>
									<view class="ltxt" v-if="ite.guaranteePeriod">{{ite.guaranteePeriod}}月</view>
								</view>
								<view class="listrx flext">
									<view class="ltit">意见：</view>
									<view class="ltxt">{{ite.argument}}</view>
								</view>
							</view>
						</view>
					</view> 
				 </view>
			</view>
		</view>
		<block v-else>
			<no-data notxt='暂无投票信息'></no-data>
		</block>
	</view>
</template>

<script>
	import { checkPermi, checkRole } from "@/utils/permission"; // 权限判断函数
	import { selectValue } from '@/utils/common.js';
	import noData from "@/components/nodata/nodata.vue"
	import config from '@/config'
	const baseUrl = config.baseUrl
  export default {
	props:{
		shjdlist: {
			type: Array,
			default () {
				return []
			}
		},
		datalist:{
			type: Array,
			default () {
				return []
			}
		},

	},
	components:{
		noData
	},
	data(){
		return{
			timel:require("@/work/static/images/timel.png"),
			timeup:require("@/work/static/images/timeup.png"),
			baseUrl:'',
		}
	},
	mounted: function() {
		this.baseUrl=baseUrl;
	},
	methods:{
		checkPermi, checkRole,
		// 展开
		getLook(idx){
			this.datalist[idx].check=!this.datalist[idx].check
		},
		
		// getPreview(url){
		// 	this.$emit('getPreview',url)
		// },
	},
	
  }
</script>

<style lang="scss" scoped>
// 时间轴
.time{padding: 0 20rpx;
	.time_t{padding: 24rpx 0;display: flex;align-items: center;
		view{font-weight: bold;color: #4775EA;font-size: 32rpx;}
		text{margin-left:12rpx;}
		.timeup{width: 26rpx;height: 24rpx;margin-left: 30rpx;transition: all 0.3s; }
		&.act .timeup{transform: rotate(-180deg);}
	}
	// .timebox{display: none;}
	.list{display: flex;align-items: flex-start;padding-left: 10rpx;padding-bottom: 36rpx;position: relative;
	
		&::before{width: 2rpx;content: "";position: absolute;top: 44rpx;bottom: 14rpx;left: 26rpx;
background: #DADADA;}
		.timel{width: 32rpx;height: 32rpx;margin-right: 20rpx;position: relative;flex: 0 0 auto;}
		.listr{flex:1;
			.listrt{line-height: 32rpx;font-size: 30rpx;font-weight: bold;color: #161616;margin-bottom: 16rpx;display: flex;align-items: center;
				.type{height: 30rpx;border-radius: 10rpx;margin-left: 20rpx;font-size: 24rpx;color: #FFFFFF;padding:2rpx 8rpx;
					&.bg1{background: #AABCE9;}
					&.bg2{background: #8CD5B3;}
				}
			}
			.listrx{padding: 6rpx 0;
				.ltit{flex:0 0 auto;font-size: 30rpx;color: #AAAAAA;}
				.ltxt{font-weight: 500;color: #161616;flex:1;font-size: 30rpx;}
			}
		}
	}
	&.act .timebox{display: block;}
	
	// &.quse_txt:last-child ul:before{display: none;}
}
</style>