diff --git a/src/api/environmentPhoto.js b/src/api/environmentPhoto.js
new file mode 100644
index 00000000..d30f30e7
--- /dev/null
+++ b/src/api/environmentPhoto.js
@@ -0,0 +1,10 @@
+import request from '@/utils/http'
+
+export function getBeforeDispatchImage(data) {
+  return request({
+    url: '/supplierAppV2/dispatchApp/order/getBeforeDispatchImage',
+    method: 'POST',
+    contentType: 'application/json',
+    data
+  })
+}
diff --git a/src/router/index.js b/src/router/index.js
index d846dc1d..09db5986 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -172,6 +172,14 @@ const routes = [
             title: '损伤照片'
         }
     },
+    {
+        path: '/environmentPhotos',
+        name: 'environmentPhotoList',
+        component: () => import('@/views/environmentPhoto/environmentPhotoList.vue'),
+        meta: {
+            title: '环境照片'
+        }
+    },
     {
         path: "/vehicleManage",
         name: 'vehicleManage',
diff --git a/src/views/environmentPhoto/environmentPhotoList.vue b/src/views/environmentPhoto/environmentPhotoList.vue
new file mode 100644
index 00000000..8f1ea8e8
--- /dev/null
+++ b/src/views/environmentPhoto/environmentPhotoList.vue
@@ -0,0 +1,118 @@
+<template>
+  <div class="wrap environment-photo-wrap">
+    <div v-if="loaded && photoList.length === 0" class="empty-tip">暂无环境照片</div>
+    <div v-for="(item, index) in photoList" :key="index" class="photo-item">
+      <div class="media-wrap">
+        <video
+          v-if="item.tag && item.tag.includes('video')"
+          :src="item.imageUrl"
+          controls
+          playsinline
+          class="media"
+        />
+        <img
+          v-else-if="item.tag && item.tag.includes('img')"
+          :src="item.imageUrl"
+          class="media"
+          @click="previewImage(index)"
+        />
+      </div>
+      <p v-if="item.title" class="photo-name">{{ item.title }}</p>
+    </div>
+  </div>
+</template>
+
+<script>
+import { Toast, ImagePreview } from 'vant'
+import { getBeforeDispatchImage } from '@/api/environmentPhoto'
+
+export default {
+  name: 'EnvironmentPhotoList',
+  data() {
+    return {
+      photoList: [],
+      loaded: false
+    }
+  },
+  async mounted() {
+    await this.fetchPhotos()
+  },
+  methods: {
+    async fetchPhotos() {
+      const userOrderId = this.$route.query.userOrderId
+      if (!userOrderId) {
+        Toast('缺少必要参数')
+        this.loaded = true
+        return
+      }
+      Toast.loading({
+        message: '加载中...',
+        forbidClick: true,
+        duration: 0
+      })
+      try {
+        const res = await getBeforeDispatchImage({ userOrderId: Number(userOrderId) })
+        this.photoList = Array.isArray(res.data) ? res.data : []
+      } finally {
+        Toast.clear()
+        this.loaded = true
+      }
+    },
+    previewImage(index) {
+      const urls = this.photoList
+        .filter(item => item.tag && item.tag.includes('img'))
+        .map(item => item.imageUrl)
+      ImagePreview({ images: urls, startPosition: index })
+    }
+  }
+}
+</script>
+
+<style scoped>.wrap {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: #F4F5F7;
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
+.environment-photo-wrap {
+  padding: 12px;
+}
+.empty-tip {
+  text-align: center;
+  color: #999;
+  margin-top: 60px;
+  font-size: 14px;
+}
+.photo-item {
+  background: #fff;
+  border-radius: 6px;
+  margin-bottom: 12px;
+  overflow: hidden;
+}
+.media-wrap {
+  position: relative;
+  width: 100%;
+  padding-top: 56.25%;
+}
+.photo-item img,
+.photo-item video {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: block;
+  object-fit: cover;
+}
+.photo-name {
+  font-size: 13px;
+  color: #333;
+  padding: 8px 10px;
+  margin: 0;
+}
+</style>
diff --git a/src/views/index/workOrderDetail.vue b/src/views/index/workOrderDetail.vue
index 18b5eedf..bf3fc41a 100644
--- a/src/views/index/workOrderDetail.vue
+++ b/src/views/index/workOrderDetail.vue
@@ -96,6 +96,7 @@
         <div class="item" v-if="queryType == 9 || queryType ==11  || queryType ==12 || queryType ==5">
           <span class="leftTitle fontColor">工单照片:</span><span class="rightContent">
            <span  class="driverPoiBtn" @click="checkPhoto">查看照片</span>
+           <span  class="driverPoiBtn" v-if="orderDetailInfo.beforeDispatchImages && orderDetailInfo.beforeDispatchImages.length > 0" @click="environmentPhoto">环境照片</span>
           </span>
         </div>
       </div>
@@ -235,6 +236,12 @@ export default {
         window.android.sendMessage("orderPhoto,"+this.userOrderId+","+this.orderCode+","+this.taskOrderId+","+isAllowImage);
       }
     },
+    environmentPhoto() {
+      this.$router.push({
+        path: '/environmentPhotos',
+        query: { userOrderId: this.userOrderId }
+      })
+    },
     initMap() {
       this.map = new AMap.Map('container',{
         zoom:14,//级别(缩放比例 3-20 )