You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
123 lines
2.8 KiB
123 lines
2.8 KiB
<template>
|
|
<view class="dis_col_evenly">
|
|
<headerTopsTips></headerTopsTips>
|
|
<uni-nav-bar left-icon="left" title="签名" backgroundColor="#e6eafa" @clickLeft="handlegoback" />
|
|
<view style="width: 100% ;height: calc(100vh - 150px);">
|
|
<l-signature ref="signatureRef" :penColor="penColor" :penSize="penSize"></l-signature>
|
|
</view>
|
|
<view class="btn_list">
|
|
<button @click="onClick('clear')" class="btn_item">清空</button>
|
|
<button @click="onClick('undo')" class="btn_item">撤消</button>
|
|
<button @click="onClick('save')" class="btn_item">保存</button>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import headerTopsTips from '@/pages/components/header_tops_tips.vue'
|
|
import {
|
|
ref,
|
|
toRefs,
|
|
defineProps,
|
|
defineEmits
|
|
} from 'vue'
|
|
import {
|
|
baseUrl,
|
|
apiPath
|
|
} from '@/sheep/config';
|
|
const props = defineProps({
|
|
|
|
})
|
|
const emit = defineEmits(['active', 'ride_id'])
|
|
const all_props = toRefs(props)
|
|
const isactive = ref(0)
|
|
const penColor = 'red'
|
|
const penSize = 5
|
|
const signatureRef = ref(null)
|
|
//
|
|
function onClick(type) {
|
|
if (type == 'save') {
|
|
signatureRef.value.canvasToTempFilePath({
|
|
success: (res) => {
|
|
// 是否为空画板 无签名
|
|
// console.log(res, '路径')
|
|
// 生成图片的临时路径
|
|
uni.uploadFile({
|
|
url: `${baseUrl + apiPath}/infra/file/upload`,
|
|
filePath: res.tempFilePath,
|
|
name: 'file',
|
|
method: 'post',
|
|
header: {
|
|
'tenant-id': 1,
|
|
'Authorization': uni.getStorageSync('token')
|
|
},
|
|
success: (response) => {
|
|
const data_inter = JSON.parse(response.data)
|
|
// console.log(data_inter, '上传成功')
|
|
if (data_inter.code == 0) {
|
|
uni.setStorageSync('signature', data_inter.data)
|
|
uni.showModal({
|
|
title: '签名成功',
|
|
content: '签名成功，点击确认返回上一级',
|
|
success: (res) => {
|
|
setTimeout(() => {
|
|
handlegoback()
|
|
// uni.switchTab({
|
|
// url:'/pages/subpackages/mapnvue'
|
|
// })
|
|
}, 1000)
|
|
}
|
|
});
|
|
} else {
|
|
uni.showToast({
|
|
icon: 'error',
|
|
'title': "上传失败"
|
|
})
|
|
}
|
|
}
|
|
})
|
|
}
|
|
})
|
|
} else if (type == 'undo') {
|
|
signatureRef.value.undo()
|
|
} else if (type == 'clear') {
|
|
signatureRef.value.clear()
|
|
}
|
|
}
|
|
//
|
|
function handlegoback() {
|
|
uni.setStorageSync('signature_back', 'reset')
|
|
uni.navigateBack()
|
|
}
|
|
//
|
|
function handle_resu(){
|
|
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.dis_col_evenly {
|
|
width: 100%;
|
|
height: 100vh;
|
|
}
|
|
|
|
.t_1 {
|
|
font-weight: 600;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.btn_list {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-evenly;
|
|
|
|
.btn_item {
|
|
padding: 0 5px;
|
|
background: #000;
|
|
color: #fff;
|
|
width: 80px;
|
|
line-height: 40px;
|
|
font-size: 13px;
|
|
}
|
|
}
|
|
</style> |