LocalLivingServicesUniapp/pages/order/serviceOrder/photo.vue

<template>
	<view class="photo">
		<view class="top">
		</view>
		<view class="head">
			<span class="cuIcon-back" @click="back"></span>
			<view class="case">
				
				{{businessType==3?'车辆照片':'现场照片'}}
			</view>
		</view>
		<view class="content">
			<view class="img" v-for="(item,index) in imgList" :key="index">
				<image :src="item.imgUrl" mode=""></image>
					<!-- <span v-if="item.imgType == 1 &&businessType != 4">正前方</span>
					<span v-if="item.imgType == 4 &&businessType != 4">车辆后侧</span>
					<span v-if="item.imgType == 2  &&businessType != 4">车辆左侧</span>
					<span v-if="item.imgType == 3  &&businessType != 4">车辆右侧</span>
					<span v-if="item.imgType == 6  &&businessType != 4">驾驶室</span>
					<span v-if="item.imgType == 5  &&businessType != 4">左前方45度全车照</span>
					<span v-if="item.imgType == 7  &&businessType != 4">后排座</span>
					<span v-if="item.imgType == 8  &&businessType != 4">服务前</span>
					<span v-if="item.imgType == 9  &&businessType != 4">服务中</span>
					<span v-if="item.imgType == 10  &&businessType != 4">服务后</span> -->
			</view>
		</view>
		<view class="btn">
			<view class="back" @click="back">
				返回
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				taskId: '',
				businessType: '',
				imgList: [{
						url: '/static/blue.png',
						address: '正前方'
					},
					{
						url: '/static/blue.png',
						address: '车辆后侧'
					},
					{
						url: '/static/blue.png',
						address: '车辆左侧'
					},
					{
						url: '/static/blue.png',
						address: '正前方'
					},
					{
						url: '/static/blue.png',
						address: '正前方'
					},
					{
						url: '/static/blue.png',
						address: '正前方'
					},
					{
						url: '/static/blue.png',
						address: '正前方'
					}
				]
			}
		},
		methods: {
			//返回
			back() {
				uni.navigateBack({
					delta: 1
				});
			},
			//查看照片
			getImg() {
				let data = {
					taskId: this.taskId,
					businessType: Number(this.businessType)
				}
				this.$http.get("/ts/merchant/selectImg?taskId=" + this.taskId + '&businessType=' + Number(this.businessType))
					.then(res => {
						
						if (res.data.code == 200) {
							// this.isSuccess = true
							this.imgList = res.data.result
console.log(this.imgList)
						}
					})
			}
		},
		onLoad(options) {
			this.taskId = options.taskId
			this.businessType = options.businessType
			console.log(options.businessType)
		},
		onShow() {
			this.getImg()
		}
	}
</script>

<style lang="scss" scoped>
	.photo {
		width: 100vw;
		height: 100vh;
		background: #F8F8FA;
		display: flex;
		flex-direction: column;
		// justify-content: space-between;
		// overflow-y: auto;

		/*#ifdef APP-PLUS*/
		.top {
			width: 100%;
			height: var(--status-bar-height);
			background: #FFFFFF;
		}

		/*#endif*/
		.head {
			width: 100%;
			height: 112rpx;
			padding: 20rpx;
			display: flex;
			align-items: center;
			background: #FFFFFF;
			position: relative;

			.cuIcon-back {
				font-size: 40rpx;
				margin-right: 40rpx;
			}

			.case {
				position: absolute;
				left: 50%;
				transform: translateX(-50%);
				font-size: 36rpx;
				font-weight: 600;
			}
		}

		.content {
			// flex: 1;
			overflow-y: auto;
			padding: 24rpx 28rpx;
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;

			// gap: 24rpx;
			.img {
				width: 320rpx;
				height: 194rpx;
				border-radius: 4rpx;
				overflow: hidden;
				position: relative;
				margin-bottom: 33rpx;
				display: flex;

				image {
					width: 100%;
					height: 100%;
				}

				.tag {}

				span {
					position: absolute;
					display: block;
					padding: 2px 4px;
					height: 34rpx;
					background: #2D88F4;
					border-radius: 0px 4rpx 4rpx 0px;
					font-size: 20rpx;
					color: #FFFFFF;
					z-index: 999999;
				}
			}
		}

		.btn {
			position: fixed;
			bottom: 0;
			width: 100%;
			height: 112rpx;
			background: #FFFFFF;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-top: 10rpx;
			font-size: 28rpx;
			padding: 24rpx 16rpx;

			.back {
				width: 100%;
				height: 100%;
				background: linear-gradient(90deg, #77B6FF 0%, #449AFF 100%);
				border-radius: 53rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 28rpx;
				color: #FFFFFF;
			}
		}
	}
</style>