平台结算记录加查看凭证

src/views/platform/platformRecord.vue

@@ -71,10 +71,12 @@
       <el-table-column prop="actualReceivedAmount" label="实收金额" width="150"></el-table-column>
       <el-table-column prop="receivePaymentDate" label="收款日期" width="200"></el-table-column>
       <el-table-column label="收款凭证" width="100">
-        <template #default="scope">
-          <el-button link type="primary" @click="view">查看凭证（1）</el-button>
-        </template>
-      </el-table-column>
+            <template #default="scope">
+              <el-button link type="primary" v-if="scope.row.fileUrl"
+                @click="view(scope.row)">查看凭证（{{ scope.row.fileUrl.split(',').length }}）</el-button>
+              <span v-else>无凭证</span>
+            </template>
+          </el-table-column>
       <el-table-column prop="createBy" label="结算人" width="200"></el-table-column>
       <el-table-column prop="createTime" label="结算时间" width="200"></el-table-column>
       <el-table-column label="操作" width="200" align="center" fixed="right">
@@ -88,7 +90,13 @@
         layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange($event)"
         @current-change="handleCurrentChange($event)"></el-pagination>
     </div>
+
   </PageMain>
+  <el-dialog v-model="viewCredential" title="查看凭证" width="400">
+    <div class="text-center text-[14px] text-[#999] pb-[20px]">点击图片放大预览</div>
+    <el-image style="width: 100%; height: 300px" :src="CredentialList[0]" :zoom-rate="1.2" :max-scale="7"
+      :min-scale="0.2" :preview-src-list="CredentialList" show-progress :initial-index="4" alt="凭证图片" fit="cover" />
+  </el-dialog>
 </template>
 
 <script setup lang="ts">
@@ -99,7 +107,8 @@ const router = useRouter();
 
 let form = ref({});
 let tableData = ref([]);
-
+const viewCredential = ref(false)//查看凭证弹窗
+const CredentialList = ref([])//凭证图片
 let pages = ref(1);
 let size = ref(10);
 let total = ref(0);
@@ -201,6 +210,11 @@ const viewDetail = (row) => {
     }
   })
 }
+const view = (scope) => {
+  CredentialList.value = scope.fileUrl.split(',')
+  viewCredential.value = true
+}
+
 onMounted(() => {
   initList();
   initOption();