基建工程、顶管工程 附件显示逻辑

pages/TopPipeWork/TopPipeWork.vue

@@ -15,7 +15,7 @@
 					</view>
 					<view v-else class="uni-list-cell-db" style="margin-top: 10;" @click="pickerShow('gcmc',0)">
 						<span style="color: black;">{{projectName.name}}</span>
-							<image src="../../static/images/icon_right.png"
+						<image src="../../static/images/icon_right.png"
 							style=" position: absolute; width: 15px;height: 15px;"></image>
 					</view>
 				</view>
@@ -74,23 +74,26 @@
 
 			<view class="uni-list">
 				<view class="align-items" style="margin-bottom: 20px;">
-					<!-- 	<view class="container" style="color: gainsboro;">*请上传文件</view> -->
 					<view class="" style="display: flex; flex-wrap: wrap;margin-top: 10px; margin-left: 10px;">
-						<!-- <image src="/static/images/chooseimg.png" mode=""
-								style="width: 100rpx; height: 100rpx; margin: 0 12rpx;; " @click="chooseFile()"></image> -->
 						<view v-for="(item,index) in fileArr" :key="index" style="position: relative;">
-							<view style="width: 100rpx; height: 100rpx; margin: 0 12rpx;"
-								@click="chooseModel(item.picUrl,item.fileName)">
-								{{item.fileName}}
-								<!-- <image :src="item" mode="" style="width: 100rpx; height: 100rpx; margin: 0 12rpx;">
-									</image> -->
 
+							<view
+								v-if="item.picUrl.substring(item.picUrl.length - 3) == 'png' || item.picUrl.substring(item.picUrl.length - 3) == 'jpg'||item.picUrl.substring(item.picUrl.length-3)=='jpeg' ">
+								<image v-if="fileImageArr.concat(item.picUrl)" :src="item.picUrl" mode=""
+									style="width: 100rpx; height: 100rpx; margin: 0 12rpx;"
+									@click="showPhotoFile(fileImageArr.indexOf(item.picUrl))">
+								</image>
+							</view>
+							<view v-else-if="item.picUrl.substring(item.picUrl.length - 3) == 'mp4'">
+								<video :src="item.picUrl"
+									style="width: 100rpx; height: 100rpx; margin: 0 12rpx;"></video>
 							</view>
 
-							<!-- <view @click="removeFile(index)"
-									style="position: absolute; top: 0; right: 14rpx; border-radius: 50%;">
-									<uni-icons type="close" color="darkgray" size="18"></uni-icons>
-								</view> -->
+
+							<view v-else style="width: 100rpx; height: 100rpx; margin: 0 12rpx;"
+								@click="chooseModel(item.picUrl,item.fileName)">
+								{{item.fileName}}
+							</view>
 						</view>
 					</view>
 				</view>
@@ -124,8 +127,8 @@
 						</view>
 						<view @click="openDatetimePicker()">
 							<span style="color: black;">{{time}}</span>
-								<image src="../../static/images/icon_right.png"
-							style=" position: absolute; width: 15px;height: 15px;"></image>
+							<image src="../../static/images/icon_right.png"
+								style=" position: absolute; width: 15px;height: 15px;"></image>
 						</view>
 					</view>
 					<view class="container">
@@ -205,8 +208,8 @@
 						</view>
 						<view @click="remove(index)"
 							style="position: absolute; top: 0; right: 14rpx; border-radius: 50%;">
-							<image src="../../../static/images/icon_close.png"
-								style=" width: 15px; height: 15px;"></image>
+							<image src="../../../static/images/icon_close.png" style=" width: 15px; height: 15px;">
+							</image>
 						</view>
 					</view>
 				</view>
@@ -277,6 +280,7 @@
 				objValue: '', //上一页面传过来的值  新增接口用
 				openDict: false,
 				selectList: [],
+				fileImageArr: [],
 				dictOptions: [],
 				imgArr: [],
 				fileArr: [],
@@ -353,7 +357,13 @@
 			closeDatetimePicker() {
 				this.$refs.myPicker.hide();
 			},
+			showPhotoFile(index) {
+				uni.previewImage({
+					current: index,
+					urls: this.fileImageArr,
+				})
 
+			},
 			showPhoto(index) {
 				uni.previewImage({
 					current: index,
@@ -617,6 +627,7 @@
 					this.open = true;
 					getTopPipeNameList().then(response => {
 						this.selectList = response.data;
+						
 					});
 
 				} else if (e == 'cz') { //材质
@@ -645,6 +656,7 @@
 
 				if (this.type == 'gcmc') {
 					this.projectName = item;
+					this.fileImageArr = [];
 					uni.showLoading({
 						title: '加载中'
 					})
@@ -659,6 +671,15 @@
 						this.fileArr = res.data.pics;
 						this.enginId = res.data.enginId;
 						this.id = res.data.id;
+						this.fileArr.forEach((list, index) => {
+							if (list.picUrl.substring(list.picUrl.length - 3) == 'png' || list.picUrl
+								.substring(list.picUrl.length - 3) == 'jpg' || list.picUrl.substring(list
+									.picUrl.length - 3) == 'jpeg') {
+								this.fileImageArr.push(list.picUrl)
+							}
+						
+						
+						});
 
 
 

pages/infrastructure/infrastructure.vue

@@ -77,23 +77,26 @@
 
 			<view class="uni-list">
 				<view class="align-items" style="margin-bottom: 20px;">
-					<!-- 	<view class="container" style="color: gainsboro;">*请上传文件</view> -->
 					<view class="" style="display: flex; flex-wrap: wrap;margin-top: 10px; margin-left: 10px;">
-						<!-- <image src="/static/images/chooseimg.png" mode=""
-									style="width: 100rpx; height: 100rpx; margin: 0 12rpx;; " @click="chooseFile()"></image> -->
 						<view v-for="(item,index) in fileArr" :key="index" style="position: relative;">
-							<view style="width: 100rpx; height: 100rpx; margin: 0 12rpx;"
-								@click="chooseModel(item.picUrl,item.fileName)">
-								{{item.fileName}}
-								<!-- <image :src="item" mode="" style="width: 100rpx; height: 100rpx; margin: 0 12rpx;">
-										</image> -->
 
+							<view
+								v-if="item.picUrl.substring(item.picUrl.length - 3) == 'png' || item.picUrl.substring(item.picUrl.length - 3) == 'jpg'||item.picUrl.substring(item.picUrl.length-3)=='jpeg' ">
+								<image v-if="fileImageArr.concat(item.picUrl)" :src="item.picUrl" mode=""
+									style="width: 100rpx; height: 100rpx; margin: 0 12rpx;"
+									@click="showPhotoFile(fileImageArr.indexOf(item.picUrl))">
+								</image>
+							</view>
+							<view v-else-if="item.picUrl.substring(item.picUrl.length - 3) == 'mp4'">
+								<video :src="item.picUrl"
+									style="width: 100rpx; height: 100rpx; margin: 0 12rpx;"></video>
 							</view>
 
-							<!-- <view @click="removeFile(index)"
-										style="position: absolute; top: 0; right: 14rpx; border-radius: 50%;">
-										<uni-icons type="close" color="darkgray" size="18"></uni-icons>
-									</view> -->
+
+							<view v-else style="width: 100rpx; height: 100rpx; margin: 0 12rpx;"
+								@click="chooseModel(item.picUrl,item.fileName)">
+								{{item.fileName}}
+							</view>
 						</view>
 					</view>
 				</view>
@@ -125,7 +128,7 @@
 						<view>
 							施工时间
 						</view>
-						<view  @click="openDatetimePicker()">
+						<view @click="openDatetimePicker()">
 							<span style="color: black;">{{time}}</span>
 							<image src="../../static/images/icon_right.png"
 								style=" position: absolute; width: 15px;height: 15px;"></image>
@@ -142,8 +145,7 @@
 								材 质
 							</view>
 							<view v-if="isNew==false">
-								<view v-if="this.isEmpty(this.materialValue.id)" 
-									@click="pickerShow('cz')">
+								<view v-if="this.isEmpty(this.materialValue.id)" @click="pickerShow('cz')">
 									<span style="color: darkgray;">请选择材质</span>
 									<image src="../../static/images/icon_right.png"
 										style=" position: absolute; width: 15px;height: 15px;"></image>
@@ -168,13 +170,12 @@
 								规 格
 							</view>
 							<view v-if="isNew==false">
-								<view v-if="this.isEmpty(this.specificationValue.id)"
-									@click="pickerShow('gg')">
+								<view v-if="this.isEmpty(this.specificationValue.id)" @click="pickerShow('gg')">
 									<span style="color: darkgray;">请选择规格</span>
 									<image src="../../static/images/icon_right.png"
 										style=" position: absolute; width: 15px;height: 15px;"></image>
 								</view>
-								<view v-else class="uni-list-cell-db"  @click="pickerShow('gg')">
+								<view v-else class="uni-list-cell-db" @click="pickerShow('gg')">
 									<span style="color: black;">{{specificationValue.name}}</span>
 									<image src="../../static/images/icon_right.png"
 										style=" position: absolute; width: 15px;height: 15px;"></image>
@@ -215,8 +216,8 @@
 						</view>
 						<view @click="remove(index)"
 							style="position: absolute; top: 0; right: 14rpx; border-radius: 50%;">
-							<image src="../../../static/images/icon_close.png"
-								style=" width: 15px; height: 15px;"></image>
+							<image src="../../../static/images/icon_close.png" style=" width: 15px; height: 15px;">
+							</image>
 						</view>
 					</view>
 				</view>
@@ -285,6 +286,7 @@
 				dictOptions: [],
 				imgArr: [],
 				fileArr: [],
+				fileImageArr: [],
 				loading: false,
 				specificationValue: {}, //规格
 				materialValue: {}, //材质
@@ -365,6 +367,13 @@
 			closeDatetimePicker() {
 				this.$refs.myPicker.hide();
 			},
+			showPhotoFile(index) {
+				uni.previewImage({
+					current: index,
+					urls: this.fileImageArr,
+				})
+
+			},
 			showPhoto(index) {
 				uni.previewImage({
 					current: index,
@@ -656,6 +665,7 @@
 
 				if (this.type == 'gcmc') {
 					this.projectName = item;
+					this.fileImageArr = [];
 					uni.showLoading({
 						title: '加载中'
 					})
@@ -672,6 +682,15 @@
 						this.gcnrValue = res.data.enginContent; //工程内容
 						this.fileArr = res.data.pics;
 						this.id = res.data.id;
+						this.fileArr.forEach((list, index) => {
+							if (list.picUrl.substring(list.picUrl.length - 3) == 'png' || list.picUrl
+								.substring(list.picUrl.length - 3) == 'jpg' || list.picUrl.substring(list
+									.picUrl.length - 3) == 'jpeg') {
+								this.fileImageArr.push(list.picUrl)
+							}
+
+
+						});