|
|
@@ -1,148 +1,153 @@
|
|
|
<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>
|
|
|
-
|
|
|
- <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 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>
|
|
|
- </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>
|
|
|
+ <view class="hetong-tip-box" v-if="info.status == 0">
|
|
|
+ 请务必仔细阅读上述内容，确认已完全理解所有条款后，点击【我已阅读】按钮完成签字确认。
|
|
|
+ </view>
|
|
|
+ <button v-if="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>
|
|
|
+ </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 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,
|
|
|
- })
|
|
|
+ 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(id)
|
|
|
+ })
|
|
|
+
|
|
|
+ function init(id) {
|
|
|
+ if (!id) {
|
|
|
+ uni.showToast({
|
|
|
+ title: '数据异常，请确认路径是否完整'
|
|
|
+ })
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ httpApi.getHetongInfo({id}).then(res => {
|
|
|
+ info.value = res.data;
|
|
|
+ imgList.value = res.data.base64List;
|
|
|
+ }).finally(() => {
|
|
|
+ isLoading.value = false;
|
|
|
+ })
|
|
|
+ }
|
|
|
|
|
|
- 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)
|
|
|
- }
|
|
|
- })
|
|
|
- }
|
|
|
- })
|
|
|
-})
|
|
|
+ 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 getBase64(img) {
|
|
|
- if (!img) {
|
|
|
- uni.showToast({
|
|
|
- title: '签名异常'
|
|
|
+ function handleGoLishi() {
|
|
|
+ uni.redirectTo({
|
|
|
+ url: '/pages/admin/Hetong/HetongList'
|
|
|
})
|
|
|
- return;
|
|
|
}
|
|
|
- console.log(22222)
|
|
|
- handleQM(img)
|
|
|
|
|
|
-}
|
|
|
+ function handleQianming() {
|
|
|
+ popupRef.value.open()
|
|
|
+ }
|
|
|
|
|
|
+ const handleQM = throttleAdvanced((img) => {
|
|
|
+ uni.showToast({
|
|
|
+ title: "签名提交中...",
|
|
|
+ mask: true,
|
|
|
+ })
|
|
|
+
|
|
|
+ httpApi.getHetongQianming({
|
|
|
+ id: tId.value,
|
|
|
+ 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)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ })
|
|
|
+ })
|
|
|
|
|
|
-function goback2() {
|
|
|
- popupRef.value.close()
|
|
|
-}
|
|
|
+ function getBase64(img) {
|
|
|
+ if (!img) {
|
|
|
+ uni.showToast({
|
|
|
+ title: '签名异常'
|
|
|
+ })
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ handleQM(img)
|
|
|
+ }
|
|
|
|
|
|
+ function goback2() {
|
|
|
+ popupRef.value.close()
|
|
|
+ }
|
|
|
</script>
|
|
|
|
|
|
-<style scoped>
|
|
|
+<style>
|
|
|
|
|
|
</style>
|
tanxue