jdrh_xcx/jyzPage/jyz/personjl.vue

<template>
	<view class="contaienr">
	
		<view class="bg">
			<image class="bgimg" src="../../static/jf/bj_blue@2x.png"></image>
		</view>	 
			 
		<view class="content">
			<view class="topbox">
				<view class="con">
					<view class="icon_con">
						<image class="img" src="../../static/jf/icon_people_blue_24@2x.png"></image>
					</view>
					
					<view class="info_con">
						<view class="title">{{dataList.gmfmc}}</view>
						<view class="stit">{{dataList.gmfzjh}}</view>
					</view>
				</view>
			</view>
			
			<view class="cell_item" style="margin-top: 24rpx;">
				<view class="title">购买方信息</view>
				<view style="margin: 12rpx 0;height: 1rpx;background: #E7E7E7;"></view>
				<view class="description">
					<view class="name">购买方名称</view> <view class="other">{{dataList.gmfmc}}</view>
					<view class="name">购买方证件号</view> <view class="other">{{dataList.gmfzjh}}</view>
					<view class="name">购买方电话</view> <view class="other">{{dataList.gmflxdh}}</view>
				</view>
			</view>
			
			<view class="cell_item" style="margin-top: 24rpx;">
				<view class="title">购买记录</view>
				<view style="margin: 12rpx 0;height: 1rpx;background: #E7E7E7;"></view>
				<view class="description">
					<view class="name">汽油型号</view> <view class="other">{{dataList.gmqyxh}}</view>
					<view class="name">汽油升数</view> <view class="other">{{dataList.gmss}}</view>
					<view class="name">购买用途</view> <view class="other">{{dataList.gmyt}}</view>
					<view class="name">购买时间</view> <view class="other">{{dataList.createTime}}</view>
					<view class="name">是否合规购油</view> <view class="other">{{dataList.sfhggy==1?'是':'否'}}</view>
					<view class="name">派出所文件</view> <view class="other">
						 <view class="album">
							<view class="album__content">
								<u-album :urls="[dataList.jyzzp]" keyName="src2"></u-album>
							</view>
						</view>
					</view>
				</view>
			</view>
			
		</view>
	</view>
</template>

<script>
	import { jyzSellDetail } from "@/api/jfsc.js"
	export default{
		data(){
			return{
				dataList:{},
				urls1: [{
					src2: 'https://cdn.uviewui.com/uview/album/1.jpg',
				}]
			}
		},
		onLoad(option) {
			uni.showLoading({
				title: '加载中'
			});
			jyzSellDetail(option.id).then(res=>{
				this.dataList = res.data
			}).finally(()=>{
				uni.hideLoading()
			})
		},
		methods:{
		
			back(){
				uni.navigateBack({
					delta: 1
				  });
			},
			goPage(url){
				uni.navigateTo({
					url:url
				})
			}
		}
	}
</script>

<style lang="scss">
	/deep/ .uni-navbar__content{
		border-bottom: none !important;
	}
	.contaienr{
		box-sizing: border-box;
		background: #F8F8F8;
		position: relative;
		min-height: 100vh;
		
		.cell_item{
			background: #FFFFFF;
			box-shadow: 0rpx 2rpx 16rpx 0rpx rgba(0,0,0,0.08);
			border-radius: 16rpx;
			padding: 24rpx;
			box-sizing: border-box;
			background: #FFF;
			position: relative;
			.description{
				display: grid;
				grid-template-columns: 33.3% 66.66%;
				view{
					padding: 6rpx 0;
				}
				.name{
					height: 40rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 28rpx;
					color: #999999;
					line-height: 40rpx;
					text-align: left;
					font-style: normal;
				}
				.other{
					min-height: 40rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 28rpx;
					color: #111111;
					line-height: 40rpx;
					text-align: left;
					font-style: normal;
				}
			}
			.title{
				height: 44rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				font-size: 32rpx;
				color: #111111;
				line-height: 44rpx;
				text-align: left;
				font-style: normal;
			}
		}
		.bg{
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			.bgimg{
				width: 100%;
			}
		}
		.content{
			padding: 0 24rpx;
			background: #F8F8F8;
		}
		.topbox{
			height: 192rpx;
			position: relative;
			width: 100%;
			.con{
				height: 144rpx;
				background: linear-gradient( 180deg, #F0F5FF 0%, #FFFFFF 100%);
				box-shadow: 0rpx 2rpx 16rpx 0rpx rgba(0,0,0,0.08);
				border-radius: 16rpx;
				border: 2rpx solid #FFFFFF;
				display: grid;
				grid-template-columns: 130rpx calc(100% - 130rpx);
				position: absolute;
				width: 100%;
				left:0;
				bottom: 0;
				.img{
					width: 96rpx;
					height: 96rpx;
					margin-top: 24rpx;
				}
				.icon_con{
					text-align: center;
				}
				.info_con{
					.title{
						height: 44rpx;
						font-family: PingFangSC, PingFang SC;
						font-weight: 500;
						font-size: 32rpx;
						color: #111111;
						line-height: 44rpx;
						text-align: left;
						font-style: normal;
						margin-top: 33rpx;
						white-space: nowrap; /* 确保文本在一行内显示 */
						  overflow: hidden; /* 隐藏溢出的内容 */
						  text-overflow: ellipsis; /* 使用省略号表示文本溢出 */
					}
					.stit{
						height: 34rpx;
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 24rpx;
						color: #111111;
						line-height: 34rpx;
						text-align: left;
						font-style: normal;
						white-space: nowrap; /* 确保文本在一行内显示 */
						  overflow: hidden; /* 隐藏溢出的内容 */
						  text-overflow: ellipsis; /* 使用省略号表示文本溢出 */
					}
				}
			}
		}
	}
</style>