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>
							<view>
								<view>{{altHandle(item.value)}}</view>
								<text>点击在线预览</text>
							</view>
							<!-- <image src="https://publicxingyou.oss-cn-hangzhou.aliyuncs.com/mp-oil/eye.png"></image> -->
						</view>
					</template>
				</template>
				<view v-if="item.type === 'filelist'" style="padding-left: 205rpx;">
					<text v-if="!item.value.length">暂无</text>
					<template v-else>
						<template v-for="(_item, _index) in item.value">
							<view :key="_index" v-if="_item.endsWith('png') || _item.endsWith('jpg')" class="file"
								style="margin-bottom:10rpx" @click="seePicture(_item)">
								<image :src="_item"></image>
								<text>{{_item | nameFilters}}</text>
							</view>
							<view :key="_index" v-else class="file-download special" @click="seeDocument(_item)">
								<image src="https://publicxingyou.oss-cn-hangzhou.aliyuncs.com/mp-oil/oms-file.png">
								</image>
								<view>
									<view>{{altHandle(_item)}}</view>
									<text>点击在线预览</text>
								</view>
								<!-- <image src="https://publicxingyou.oss-cn-hangzhou.aliyuncs.com/mp-oil/eye.png"></image> -->
							</view>
						</template>

					</template>
				</view>
				<view v-if="item.type === 'table'">
					<uni-table v-for="_item,_index in item.value" :key="_index" border stripe emptyText="暂无更多数据">
						<!-- 表头行 -->
						<uni-tr>
							<uni-th width="150" align="center">标题</uni-th>
							<uni-th align="center">内容</uni-th>
						</uni-tr>
						<!-- 表格数据行 -->
						<uni-tr v-for="__item,__index in _item" :key="__index">
							<uni-td>{{__item.title}}</uni-td>
							<uni-td>{{phoneHandle(__item.value)}}</uni-td>
						</uni-tr>
					</uni-table>
				</view>
			</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(decodeURIComponent(option.details))
			}
			console.log(this.infoList)
		},
		filters: {
			nameFilters(name) {
				if (!name) return ''
				let arr = name.split('/')
				return arr[arr.length - 1]
			}
		},
		methods: {
			phoneHandle(value) {
				if (value.includes('+86')) {
					return JSON.parse(value).number
				}
				return value
			},
			altHandle(item) {
				let arr = item.split('/')
				return arr[arr.length - 1]
			},
			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">
	::v-deep {
		.uni-table-scroll {
			margin-top: 20rpx;
		}
	}
	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;
		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: 35rpx;
					width: 170rpx;
					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 {
			margin-bottom: 10rpx;
			display: inline-flex;

			>image {
				width: 80rpx;
				height: 80rpx;
				border-radius: 10rpx;
			}

			>view {
				flex: 1;
				margin-left: 10rpx;
				padding-top: 7rpx;

				>view {

					width: 300rpx;
					font-size: 22rpx;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}

				>text {
					margin-top: 30rpx;
					font-size: 22rpx;
					color: #999;
				}
			}
		}
	}
</style>