wx_oms/contractManagement/list/details.vue

<template>
	<view>
		<view class="header">
			<view :style="{height:styles.top+'px'}"></view>
			<uni-nav-bar @clickLeft='back' :border="false" color='white' backgroundColor="rgba(0,0,0,0)"
				left-icon="back" title="合同详情" />

		</view>
		<view class="list">
			<view class="item" v-for="item,index in infoList" :key="index">
				<text>{{item.title}}</text>
				<text v-if="item.type == 'text'">{{item.value}}</text>
				<text v-if="item.type == 'date'" :style="{ color: dateHandle(item.value) }">{{item.value}}</text>
				<text v-if="item.type == 'selector'">{{item.value}}</text>
				<text v-if="item.type == 'number'">{{ item.value }}</text>
				<template v-if="item.type == 'file'">
					<text v-if="!item.value">暂无</text>
					<template v-else>
						<view v-if="item.value.endsWith('png') || item.value.endsWith('jpg')" class="file"
							@click="seePicture(item.value)">
							<image :src="item.value"></image>
							<text>{{item.value | nameFilters}}</text>
						</view>
						<view v-else class="file-download" @click="seeDocument(item.value)">
							<image src="https://publicxingyou.oss-cn-hangzhou.aliyuncs.com/mp-oil/oms-file.png"></image>
							<image src="https://publicxingyou.oss-cn-hangzhou.aliyuncs.com/mp-oil/eye.png"></image>
						</view>
					</template>
				</template>
			</view>
		</view>
		<uni-popup ref="popup" background-color="#fff">
			<view class="picture-frame">

				<image mode="widthFix" :src="picture"></image>
				<image src="https://publicxingyou.oss-cn-hangzhou.aliyuncs.com/mp-oil/red-close.png"
					@click="closePicture"></image>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import serve from '@/api/contractManagement/list.js'
	export default {
		data() {
			return {
				styles: {},
				infoList: [],
				today: new Date().getTime(),
				picture: ''
			}
		},
		onLoad(option) {
			this.styles = uni.getMenuButtonBoundingClientRect()

			if (option.details) {
				this.infoList = JSON.parse(option.details)
			}
			console.log(this.infoList)
		},
		filters: {
			nameFilters(name) {
				if (!name) return ''
				let arr = name.split('/')
				return arr[arr.length - 1]
			}
		},
		methods: {
			dateHandle(val) {
				let dueTime = new Date(val).getTime()
				return this.today > dueTime ? '#ff0000' : '#333'
			},
			seePicture(img) {
				this.picture = img
				this.$refs.popup.open('center')
			},
			closePicture() {
				this.picture = ''
				this.$refs.popup.close()
			},
			seeDocument(url) {
				uni.downloadFile({
					url: url,
					success: (res) => {
						uni.openDocument({
							filePath: res.tempFilePath,
							success: (_res1) => {
								console.log(_res1)
							},
							fail: (_res2) => {
								console.log('_res2',_res2)
								uni.showToast({
									title: '该文件格式暂不支持在线预览',
									icon: 'none'
								})
							},
						})
					}
				})
			},
			back() {
				uni.navigateBack()
			},
		}
	}
</script>

<style lang="scss">
	page {
		background: #dddddd80;
	}

	.picture-frame {
		position: relative;

		>image {
			&:nth-of-type(1) {
				vertical-align: middle;
				width: 650rpx;
			}

			&:nth-of-type(2) {
				position: absolute;
				top: -80rpx;
				right: 0;
				width: 50rpx;
				height: 50rpx;
			}
		}
	}

	.header {
		position: relative;
		width: 100%;
		height: 350rpx;
		background: url('https://xoi-support.oss-cn-hangzhou.aliyuncs.com/星油admin小程序/sjbj.png') center/100% no-repeat;
	}

	.list {
		position: relative;
		top: -80rpx;
		margin: 0 auto;
		// padding-bottom: 30rpx;
		min-height: calc(100vh - 350rpx);
		width: 96%;
		padding: 20rpx 20rpx 30rpx 30rpx;
		background: #fff;
		border-radius: 15rpx;

		.item {
			margin-bottom: 27rpx;

			>text {
				&:nth-of-type(1) {
					display: inline-block;
					margin-right: 50rpx;
					width: 150rpx;
					color: #999;
				}

				&:nth-of-type(1) {
					vertical-align: top;
				}
			}
		}

		.file {
			display: inline-flex;
			align-items: center;
			padding: 0 10rpx;
			width: 420rpx;
			height: 100rpx;
			background: #99999930;
			border-radius: 10rpx;

			image {
				margin-right: 15rpx;
				width: 80rpx;
				height: 80rpx;
				border-radius: 10rpx;
			}

			text {
				flex: 1;
				font-size: 22rpx;
			}
		}

		.file-download {
			display: inline;

			image {
				&:nth-of-type(1) {
					// margin-right: 15rpx;
					width: 80rpx;
					height: 80rpx;
					border-radius: 10rpx;
				}

				&:nth-of-type(2) {
					position: relative;
					left: -5rpx;
					bottom: -5rpx;
					width: 32rpx;
					height: 32rpx;
				}
			}
		}
	}
</style>