bonus-material-app/src/pages/my/signature.vue

<template>
    <view>
        <div class="img" v-if="imgPath">
            <image :class="{ rotate: isRotate }" :src="imgPath" @click="preview"></image>
        </div>
        <div class="img" v-else>暂无数据</div>
        <div class="tips">
            个人电子签名维护,支持手机拍照、上传图片以及手写签名，推荐使用手写签名
        </div>
        <div class="btns">
            <button class="btn" type="primary" @click="handlePhoto">拍照/上传</button>
            <button class="btn" type="primary" @click="open">手写签名</button>
        </div>
        <miliu-autograph v-model="isCanvas" @complete="complete"></miliu-autograph>
    </view>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import {
    getSign,
    updateSign,
    updateLeaseApplyInfoSign,
    updateSignById,
} from '@/services/signature.js'
import { baseURL } from '@/utils/http'

let isCanvas = ref(false)
let imgPath = ref('')
let isRotate = ref(false)
let actionUrl = `${baseURL}/file/upload`
let signType = ref(0)
const opts = reactive({})

onLoad((opt) => {
    // console.log('🚀 ~ onLoad ~ opt:', opt)
    Object.assign(opts, JSON.parse(opt.params))
    if (opts.isLease) {
        signType.value = opts.leaseSignType
        imgPath.value = opts.leaseSignUrl
    }
    if (opts.isBack) {
        signType.value = opts.backSignType
        imgPath.value = opts.backSignUrl
    }
    if (signType.value == 1) {
        isRotate.value = false
    } else {
        isRotate.value = true
    }
    console.log('🚀 ~ onLoad ~ opts:', opts)
    console.log('🚀 ~ onLoad ~ signType:', signType.value)
})

onMounted(() => {
    if (opts.isLease || opts.isBack) return
    getSignData()
})
// 获取签名
const getSignData = () => {
    getSign()
        .then((res) => {
            imgPath.value = res.data.signUrl
            signType.value = res.data.signType
            if (res.data.signType == 1) {
                isRotate.value = false
            } else {
                isRotate.value = true
            }
        })
        .catch((err) => {
            console.log('🚀 ~ getSignData ~ err:', err)
        })
}

// 签名完成
const complete = (e) => {
    signType.value = 0
    console.log(e) // 返回本地生成的base图片路径
    uploadImg(e)
}

// 打开签名
const open = () => {
    console.log('打开签名')
    isCanvas.value = true
}

// 预览
const preview = () => {
    console.log('预览', imgPath.value)
    // uni.previewImage({
    //     urls: [imgPath.value],
    // })
}
// 拍照/上传
const handlePhoto = () => {
    console.log('拍照/上传')
    uni.chooseImage({
        count: 1,
        sizeType: ['compressed'],
        sourceType: ['album', 'camera'],
        success: (res) => {
            console.log('🚀 ~ handlePhoto ~ res.tempFilePaths[0]:', res)
            // imgPath.value = res.tempFilePaths[0]
            // isRotate.value = false
            signType.value = 1
            uploadImg(res.tempFilePaths[0])
        },
    })
}
// 上传
const uploadImg = (path) => {
    uni.uploadFile({
        url: actionUrl,
        filePath: path,
        name: 'file',
        header: {
            // Authorization: this.token,
        },
        success: async (res) => {
            console.log('🚀 ~ uploadImg ~ res:', res)
            try {
                const signUrl = JSON.parse(res.data).data.url
                if (opts.isLease) {
                    const params = {
                        id: opts.id,
                        leaseSignUrl: signUrl,
                        leaseSignType: signType.value,
                    }
                    console.log('🚀 ~ success: ~ params:', params)
                    const res = await updateLeaseApplyInfoSign(params)
                    console.log('🚀 ~ uploadImg-领料 ~ res:', res)
                    uni.navigateBack()
                } else if (opts.isBack) {
                    const params = {
                        id: opts.id,
                        backSignUrl: signUrl,
                        backSignType: signType.value,
                    }
                    console.log('🚀 ~ success: ~ params:', params)
                    const res = await updateSignById(params)
                    console.log('🚀 ~ uploadImg-退料 ~ res:', res)
                    uni.navigateBack()
                } else {
                    const params = {
                        signUrl: signUrl,
                        signType: signType.value,
                    }
                    const res = await updateSign(params)
                    console.log('🚀 ~ uploadImg-个人中心 ~ res:', res)
                    getSignData()
                }
            } catch (error) {
                console.log('🚀 ~ uploadImg ~ error:', error)
                uni.showToast({
                    title: '上传失败',
                    icon: 'none',
                })
            }
        },
        fail: (err) => {
            console.log('🚀 ~ uploadImg ~ err:', err)
        },
    })
}
</script>

<style lang="scss" scoped>
.img {
    height: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
	background: #fff;
	padding: 20rpx;
	margin: 10rpx;
	border-radius: 20rpx;
}
.rotate {
    transform: rotate(-90deg);
}
.tips {
    padding: 15px;
    font-size: 14px;
    color: #e24f48;
    background-color: #f5f5f5;
    margin-bottom: 20rpx;
	padding: 20rpx;
	margin: 10rpx;
	border-radius: 20rpx;
}
.btns {
    display: flex;
    justify-content: center;
	background: #fff;
	padding: 20rpx;
	margin: 10rpx;
	border-radius: 20rpx;
    .btn {
        width: 40%;
        &:first-child {
            margin-right: 20px;
        }
    }
}
</style>