样式修改

pages/admin/Hetong/Hetong.vue

@@ -1,157 +1,148 @@
 <template>
-	<view class="phone-hetong-page">
-		<view class="phone-navBar-box">
-			<view @click="goUpPage" class="nav-bar-icon"></view>
-			<text class="nav-bar-title">合同</text>
-			<uni-icons class="nav-bar-right-icon bar-ml10" type="list" @click="handleGoLishi" size="30"></uni-icons>
-
-		</view>
-		<template v-if="tId">
-			<view class="pdf-box"> 
-			 <img v-for="item in imgList" mode="aspectFit" :src="`data:image/png;base64,${item}`" 
-			 @click="previewBase64Image(`data:image/png;base64,${item}`)" class="pdf-img" />
-			 <!-- 加载提示 -->
-			 <view class="pdf-tip" v-if="isLoading">
-			 	加载中...
-			 </view>
-			</view>
-		</template>
-		<template v-else>
-			<view class="no-hetong-box">暂无合同</view>
-		</template>
-		<view class="hetong-tip-box" v-if="tId && info.status == 0">
-				  请务必仔细阅读上述内容，确认已完全理解所有条款后，点击【我已阅读】按钮完成签字确认。
-		</view>
-		<button v-if="tId && info.status == 0" type="default" class="phone-green-btn ht-btn"
-			@click="handleQianming">我已阅读</button>
-
-		<uni-popup ref="popupRef" type="bottom" background-color="#fff" :is-mask-click="false" :mask-click="false">
-			<view class="ht-qm-popup">
-				<view class="icon-title-navBar-box">
-					<view @click="goback2" class="nav-bar-icon"></view>
-					<text class="nav-bar-title">签名</text>
-				</view>
-				<writeSign @getBase64="getBase64"></writeSign>
+    <view class="phone-hetong-page">
+      <view class="icon-title-navBar-box">
+        <view @click="goUpPage" class="nav-bar-icon"></view>
+        <text class="nav-bar-title">合同</text>
+      </view>
+
+      <template v-if="tId">
+		  <view class="pdf-box">
+			<img v-for="item in imgList" mode="aspectFit" :src="`data:image/png;base64,${item}`" 
+			@click="previewBase64Image(`data:image/png;base64,${item}`)"  class="pdf-img"/>
+			<!-- 加载提示 -->
+			<view class="pdf-tip" v-if="isLoading">
+				加载中...
 			</view>
-		</uni-popup>
-		
-	</view>
+		  </view>
+      </template>
+	  
+	  <view class="hetong-tip-box" v-if="tId && info.status == 0">
+		  请务必仔细阅读上述内容，确认已完全理解所有条款后，点击【我已阅读】按钮完成签字确认。
+	  </view>
+	  <button @click="handleQianming" v-if="tId && info.status == 0"
+	  class="phone-green-btn ht-btn"  type="default">我已阅读</button>
+	  
+	  <uni-popup ref="popupRef" type="bottom" background-color="#fff" :is-mask-click="false" :mask-click="false">
+	  	<view class="ht-qm-popup">
+	  			<view class="icon-title-navBar-box">
+	  				<view @click="goback2" class="nav-bar-icon"></view>
+	  				<text class="nav-bar-title">签名</text>
+	  			</view>
+	  			<writeSign @getBase64="getBase64"></writeSign>
+	  	</view>
+	  </uni-popup>
+	  
+	  
+    </view>
 </template>
 
 <script setup>
-	import {
-		ref
-	} from "vue";
-	import * as httpApi from "@/api/hetong.js"
-	import {
-		onLoad
-	} from "@dcloudio/uni-app"
-	import writeSign from "@/components/writeSign/index.vue"
-  import {throttleAdvanced} from "@/utils/common.js"
-  import { base64ToPath } from 'image-tools';
-
-	const tId = ref(null)
-	const info = ref({})
-	const popupRef = ref(null)
-	const imgList = ref([])
-	const isLoading = ref(true)
-  const timer1 = ref(null)
-
-	function goUpPage() {
-		uni.navigateBack()
-    clearTimeout(timer1.value);
-    timer1.value = null;
-	}
-	onLoad(({id}) => {
-		tId.value = id;
-		init()
-	})
-
-	function init() {
-		
-		if (!tId.value) {
-			uni.showToast({
-				title: '数据异常，请确认路径是否完整'
-			})
-			return;
-		}
-		
-		httpApi.getHetongInfo({id:tId.value}).then(res => {
-			info.value = res.data;
-			imgList.value = res.data.base64List;
-		}).finally(() => {
-			isLoading.value = false;
-		})
-	}
+import {
+  ref
+} from "vue";
+import * as httpApi from "@/api/hetong.js"
+import {
+  onLoad
+} from "@dcloudio/uni-app"
+import writeSign from "@/components/writeSign/index.vue"
+import {throttleAdvanced} from "@/utils/common.js"
+import {base64ToPath} from "image-tools";
 
-  async function previewBase64Image(base64Data) {
-      try {
-        // 关键步骤：将 Base64 字符串转换为本地临时路径
-        // 此处以使用 image-tools 的 base64ToPath 为例
-        const localPath = await base64ToPath(base64Data);
-        // 调用 UniApp 的图片预览 API
-        uni.previewImage({
-          urls: [localPath], // 注意：urls 参数需要是数组，即使只预览一张图
-          current: 0, // 当前显示图片在 urls 数组中的索引
-        });
-      } catch (error) {
-        // 如果出现错误（如转换失败），隐藏加载提示并告知用户
-        console.error('预览失败:', error);
-        uni.showToast({
-          title: '预览失败',
-          icon: 'none'
-        });
-      }
-  }
+const tId = ref(null)
 
-	function handleGoLishi() {
-		uni.redirectTo({
-			url: '/pages/admin/Hetong/HetongList'
-		})
-	}
+const info = ref({})
+const show = ref(false)
+const popupRef = ref(null)
+const imgList = ref([])
+const isLoading = ref(true)
+const timer1 = ref(null)
 
-	function handleQianming() {
-		popupRef.value.open()
-	}
+onLoad((options) => {
+  tId.value = options.id;
+  init();
+})
+
+function handleQianming() {
+  popupRef.value.open()
+}
+
+function init() {
+  httpApi.getHetongInfo({id: tId.value}).then(res => {
+	info.value = res.data;
+  imgList.value = res.data.base64List;
+  }).finally(() => {
+	  isLoading.value = false;
+  })
+}
 
-  const  handleQM = throttleAdvanced((img) => {
+async function previewBase64Image(base64Data) {
+  try {
+    // 关键步骤：将 Base64 字符串转换为本地临时路径
+    // 此处以使用 image-tools 的 base64ToPath 为例
+    const localPath = await base64ToPath(base64Data);
+    // 调用 UniApp 的图片预览 API
+    uni.previewImage({
+      urls: [localPath], // 注意：urls 参数需要是数组，即使只预览一张图
+      current: 0, // 当前显示图片在 urls 数组中的索引
+    });
+  } catch (error) {
+    // 如果出现错误（如转换失败），隐藏加载提示并告知用户
+    console.error('预览失败:', error);
     uni.showToast({
-      title: "签名提交中...",
-      mask: true,
-    })
-
-    httpApi.getHetongQianming({
-      id: info.value.id,
-      yifangBase64: img.replace(/^data:image\/\w+;base64,/, ''), // 当前接口，只有唯一yifangBase64 + id
-    }).then(res => {
-      if (res.data) {
-        uni.showToast({
-          title: "签名成功",
-          duration: 2000,
-          mask: true,
-          success() {
-            timer1.value = setTimeout(() => uni.navigateBack(),2000)
-          }
-        })
-      }
-    })
+      title: '预览失败',
+      icon: 'none'
+    });
+  }
+}
+
+function goUpPage() {
+  uni.navigateBack()
+  clearTimeout(timer1.value);
+  timer1.value = null;
+}
+
+const  handleQM = throttleAdvanced((img) => {
+  uni.showToast({
+    title: "签名提交中...",
+    mask: true,
   })
 
-	function getBase64(img) {
-		if (!img) {
-			uni.showToast({
-				title: '签名异常'
-			})
-			return;
-		}
-    handleQM(img)
-	}
+  httpApi.getHetongQianming({
+    id: tId.value,
+    yifangBase64: img.replace(/^data:image\/\w+;base64,/,'')
+  }).then(res => {
+    if (res.data) {
+      uni.showToast({
+        title: "签名成功",
+        duration: 2000,
+        mask: true,
+        success() {
+          timer1.value =  setTimeout(() => goUpPage(),2000)
+        }
+      })
+    }
+  })
+})
 
-	function goback2() {
-		popupRef.value.close()
+function getBase64(img) {
+	if (!img) {
+		uni.showToast({
+			title: '签名异常'
+		})
+		return;
 	}
+  console.log(22222)
+  handleQM(img)
+
+}
+
+
+function goback2() {
+	popupRef.value.close()
+}
+
 </script>
 
-<style>
+<style scoped>
 
 </style>

pages/admin/Hetong/HetongInfo.vue

@@ -1,10 +1,11 @@
 <template>
-    <view class="phone-hetong-page">
-      <view class="icon-title-navBar-box">
-        <view @click="goUpPage" class="nav-bar-icon"></view>
-        <text class="nav-bar-title">合同</text>
-      </view>
+	<view class="phone-hetong-page">
+		<view class="icon-title-navBar-box">
+			<view @click="goUpPage" class="nav-bar-icon"></view>
+			<text class="nav-bar-title">合同</text>
+		</view>
 
+<<<<<<< HEAD
       <template v-if="tId">
 		  <view class="pdf-box">
 			<img v-for="item in imgList" mode="aspectFit" :src="`data:image/png;base64,${item}`" 
@@ -34,113 +35,151 @@
 	  
 	  
     </view>
+=======
+		<template v-if="tId">
+			<view class="pdf-box">
+				<view class="pdf-box">
+					<image v-for="item in imgList" mode="aspectFit" :src="`data:image/png;base64,${item}`"
+						@click="previewBase64Image(`data:image/png;base64,${item}`)"></image>
+				</view>
+			</view>
+		</template>
+
+		<view class="hetong-tip-box" v-if="info.status == 0">
+			请务必仔细阅读上述内容，确认已完全理解所有条款后，点击【我已阅读】按钮完成签字确认。
+		</view>
+		<button @click="handleQianming" v-if="info.status == 0" class="phone-green-btn ht-btn"
+			type="default">我已阅读</button>
+
+		<uni-popup ref="popupRef" type="bottom" background-color="#fff" :is-mask-click="false" :mask-click="false">
+			<view class="ht-qm-popup">
+				<view class="icon-title-navBar-box">
+					<view @click="goback2" class="nav-bar-icon"></view>
+					<text class="nav-bar-title">签名</text>
+				</view>
+				<writeSign @getBase64="getBase64"></writeSign>
+			</view>
+		</uni-popup>
+
+		<!-- 加载提示 -->
+		<view class="loading-overlay" v-if="isLoading">
+			<view class="loading-spinner"></view>
+			<text class="loading-text">加载中...</text>
+		</view>
+	</view>
+>>>>>>> e3e8c285562878f43ea9ee7922f22069748c83fd
 </template>
 
 <script setup>
-import {
-  ref
-} from "vue";
-import * as httpApi from "@/api/hetong.js"
-import {
-  onLoad
-} from "@dcloudio/uni-app"
-import writeSign from "@/components/writeSign/index.vue"
-import {throttleAdvanced} from "@/utils/common.js"
-import {base64ToPath} from "image-tools";
-
-const tId = ref(null)
-
-const info = ref({})
-const show = ref(false)
-const popupRef = ref(null)
-const imgList = ref([])
-const isLoading = ref(true)
-const timer1 = ref(null)
-
-onLoad((options) => {
-  tId.value = options.id;
-  init();
-})
-
-function handleQianming() {
-  popupRef.value.open()
-}
-
-function init() {
-  httpApi.getHetongInfo({id: tId.value}).then(res => {
-	info.value = res.data;
-  imgList.value = res.data.base64List;
-  }).finally(() => {
-	  isLoading.value = false;
-  })
-}
-
-async function previewBase64Image(base64Data) {
-  try {
-    // 关键步骤：将 Base64 字符串转换为本地临时路径
-    // 此处以使用 image-tools 的 base64ToPath 为例
-    const localPath = await base64ToPath(base64Data);
-    // 调用 UniApp 的图片预览 API
-    uni.previewImage({
-      urls: [localPath], // 注意：urls 参数需要是数组，即使只预览一张图
-      current: 0, // 当前显示图片在 urls 数组中的索引
-    });
-  } catch (error) {
-    // 如果出现错误（如转换失败），隐藏加载提示并告知用户
-    console.error('预览失败:', error);
-    uni.showToast({
-      title: '预览失败',
-      icon: 'none'
-    });
-  }
-}
-
-function goUpPage() {
-  uni.navigateBack()
-  clearTimeout(timer1.value);
-  timer1.value = null;
-}
-
-const  handleQM = throttleAdvanced((img) => {
-  uni.showToast({
-    title: "签名提交中...",
-    mask: true,
-  })
-
-  httpApi.getHetongQianming({
-    id: tId.value,
-    yifangBase64: img.replace(/^data:image\/\w+;base64,/,'')
-  }).then(res => {
-    if (res.data) {
-      uni.showToast({
-        title: "签名成功",
-        duration: 2000,
-        mask: true,
-        success() {
-          timer1.value =  setTimeout(() => goUpPage(),2000)
-        }
-      })
-    }
-  })
-})
-
-function getBase64(img) {
-	if (!img) {
-		uni.showToast({
-			title: '签名异常'
+	import {
+		ref
+	} from "vue";
+	import * as httpApi from "@/api/hetong.js"
+	import {
+		onLoad
+	} from "@dcloudio/uni-app"
+	import writeSign from "@/components/writeSign/index.vue"
+	import {
+		throttleAdvanced
+	} from "@/utils/common.js"
+	import {
+		base64ToPath
+	} from "image-tools";
+
+	const tId = ref(null)
+
+	const info = ref({})
+	const show = ref(false)
+	const popupRef = ref(null)
+	const imgList = ref([])
+	const isLoading = ref(true)
+	const timer1 = ref(null)
+
+	onLoad((options) => {
+		tId.value = options.id;
+		init();
+	})
+
+	function handleQianming() {
+		popupRef.value.open()
+	}
+
+	function init() {
+		httpApi.getHetongInfo({
+			id: tId.value
+		}).then(res => {
+			info.value = res.data;
+			imgList.value = res.data.base64List;
+		}).finally(() => {
+			isLoading.value = false;
 		})
-		return;
 	}
-  console.log(22222)
-  handleQM(img)
 
-}
+	async function previewBase64Image(base64Data) {
+		try {
+			// 关键步骤：将 Base64 字符串转换为本地临时路径
+			// 此处以使用 image-tools 的 base64ToPath 为例
+			const localPath = await base64ToPath(base64Data);
+			// 调用 UniApp 的图片预览 API
+			uni.previewImage({
+				urls: [localPath], // 注意：urls 参数需要是数组，即使只预览一张图
+				current: 0, // 当前显示图片在 urls 数组中的索引
+			});
+		} catch (error) {
+			// 如果出现错误（如转换失败），隐藏加载提示并告知用户
+			console.error('预览失败:', error);
+			uni.showToast({
+				title: '预览失败',
+				icon: 'none'
+			});
+		}
+	}
 
+	function goUpPage() {
+		uni.navigateBack()
+		clearTimeout(timer1.value);
+		timer1.value = null;
+	}
 
-function goback2() {
-	popupRef.value.close()
-}
+	const handleQM = throttleAdvanced((img) => {
+		uni.showToast({
+			title: "签名提交中...",
+			mask: true,
+		})
+
+		httpApi.getHetongQianming({
+			id: tId.value,
+			yifangBase64: img.replace(/^data:image\/\w+;base64,/, '')
+		}).then(res => {
+			if (res.data) {
+				uni.showToast({
+					title: "签名成功",
+					duration: 2000,
+					mask: true,
+					success() {
+						timer1.value = setTimeout(() => goUpPage(), 2000)
+					}
+				})
+			}
+		})
+	})
+
+	function getBase64(img) {
+		if (!img) {
+			uni.showToast({
+				title: '签名异常'
+			})
+			return;
+		}
+		console.log(22222)
+		handleQM(img)
 
+	}
+
+
+	function goback2() {
+		popupRef.value.close()
+	}
 </script>
 
 <style scoped>