zdsz_WeChatApplet/pages/chart/details.vue

<template>
	<view class="main_s">
		<view class="title_s">
			<view class="main-list-icon"></view>
			<view>服务类型</view>
			<view>{{list.serviceTypeName ? list.serviceTypeName : ''}}</view>
		</view>
		<view class="title_s">
			<view class="main-list-icon"></view>
			<view>职工</view>
			<view>{{list.userName ? list.userName : ''}}</view>
		</view>
		<view class="title_s">
			<view class="main-list-icon"></view>
			<view>房屋</view>
			<view>{{list.house ? list.house : ''}}</view>
		</view>
		<view class="title_s">
			<view class="main-list-icon"></view>
			<view>管子类型</view>
			<view>{{list.pipeType ? list.pipeType : ''}}</view>
		</view>
		<view class="title_s">
			<view class="main-list-icon"></view>
			<view>管子长度</view>
			<view>{{list.pipeLength ? list.pipeLength : ''}}</view>
		</view>
		<view class="title_s">
			<view class="main-list-icon"></view>
			<view>自闭阀类型</view>
			<view>{{list.valveType ? list.valveType : ''}}</view>
		</view>
		<view class="title_s">
			<view class="main-list-icon"></view>
			<view>订单时间</view>
			<view>{{list.time ? list.time : ''}}</view>
		</view>
		<view class="title_s">
			<view class="main-list-icon"></view>
			<view>订单状态</view>
			<view>{{list.orderStatus ? list.orderStatus : ''}}</view>
		</view>
		<view class="title_s">
			<view class="main-list-icon"></view>
			<view>审核状态</view>
			<view>{{list.examineStatus ? list.examineStatus : ''}}</view>
		</view>
		<view class="title_img">
			<view>上传</view>
			<view class="item-img">
				<!-- <image v-for="img in list.picUrl" :src="img" @tap="preAvatar(img)"></image> -->
				<view v-for="(item,index) in list.picUrl" :key="index">
					<view v-if="item.substring(item.length - 3) == 'png' || item.substring(item.length - 3) == 'jpg' ">
						<image :src="item" mode=""
							style="margin: 0 12rpx;" @tap="preAvatar(item)">
						</image>
					</view>
					<view v-else>
						<video :src="item"
							style="margin: 0 12rpx;"
							></video>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import service from '@/api/index.js'
	export default {
		data() {
			return {
				id: undefined,
				list:{}
			}
		},
		onLoad(e) {
			this.id = e.id;
			console.log(e.id)
			this.getFn();
		},
		methods:{
			getFn(){
				service.getById({id:this.id}).then(res =>{
					console.log("eee", res)
					this.list = res;
				})
			},
			// 预览图片
			preAvatar(url) {
				console.log('url', url)
				wx.previewImage({
					current: url, // 当前显示图片的 http 链接
					urls: [url] ,// 需要预览的图片 http 链接列表
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.main_s{
		background: #F9F9F9;
		min-height: 100vh;
		padding: 30rpx 30rpx 0rpx 30rpx;
	}
	.title_s{
		display: flex;
		justify-content: space-between;
		width: 100%;
		height: 102rpx;
		line-height: 102rpx;
		padding: 0rpx 20rpx 0rpx 66rpx;
		background: #FFFFFF;
		border-radius: 8px;
		position: relative;
		margin-bottom: 30rpx;
		font-size: 40rpx;
		font-weight: 600;
	}
	.title_img{
		font-size: 40rpx;
		font-weight: 600;
	}
	.main-list-icon{
		position: absolute;
		top: 43rpx;
		left: 30rpx;
		width: 16rpx;
		height: 16rpx;
		background: #3857F3;
		border-radius: 2rpx;
	}
</style>