<template> <view> <u--form :model="inputForm" labelWidth="100px" class="u-form" labelPosition="left" ref="inputForm"> <u-form-item label="旧签名" borderBottom prop="signPic"> <u--image :showLoading="true" :src="BASE_URL + inputForm.signPic " width="100px" height="40px"></u--image> </u-form-item> <u-form-item label="上传签字图片" borderBottom prop="signPic"> <u-upload :fileList="fileList" @afterRead="afterRead" @delete="deletePic" :maxCount="1"></u-upload> </u-form-item> <u--text size="10" type="warning" text="有签名图片,请上传,无,请点击下面签字生成"></u--text> <u-form-item label="签字" borderBottom prop="signPic"> <signInput ref="sign" canvasId="twoDrowCanvas" canvasIds="twoRotateCanvas" :header="header" :action="action" @signToUrl="signToUrl"> </signInput> </u-form-item> <view class="padding-xl"> <u-button type="primary" @click="formSubmit" text="提交"></u-button> </view> </u--form> </view> </template> <script> import userService from "@/api/sys/userService" import * as $auth from "@/common/auth.js" import BASE_URL from '@/config.js' import signInput from "@/components/am-sign-input/am-sign-input.vue" export default { components: { signInput }, data() { return { action: this.BASE_URL + '/gwfile/upload?uploadPath=sign', //上传服务器的地址 header: { "token": $auth.getUserToken() }, //图片上传携带头部信息 loading: false, inputForm: this.$auth.getUserInfo(), fileList: [], } }, methods: { /** * @param {Object} e * 签名完成回调 */ signToUrl(e) { this.inputForm.signPic = e.data if (e.error_code && e.error_code === '201') { uni.showToast({ title: e.msg, icon: 'none' }) return } }, // 删除图片 deletePic(event) { this.fileList.splice(event.index, 1) }, // 新增图片 async afterRead(event) { // 当设置 multiple 为 true 时, file 为数组格式,否则为对象格式 let lists = [].concat(event.file) let fileListLen = this.fileList.length lists.map((item) => { this.fileList.push({ ...item, status: 'uploading', message: '上传中' }) }) for (let i = 0; i < lists.length; i++) { const result = await this.uploadFilePromise(lists[i]) let item = this.fileList[fileListLen] this.fileList.splice(fileListLen, 1, Object.assign(item, { status: 'success', message: '', url: result })) console.log("result", result); fileListLen++ } }, uploadFilePromise(url) { return new Promise((resolve, reject) => { let a = uni.uploadFile({ url: this.BASE_URL + '/gwfile/upload?uploadPath=signature', filePath: url.url, name: 'file', header: { "token": $auth.getUserToken() }, formData: url, success: (res) => { setTimeout(() => { resolve(res.data) }, 1000) } }); }) }, formSubmit: function(e) { //定义表单规则 // this.$refs.inputForm.validate().then(res => { uni.showLoading() let files = [] if (this.fileList.length > 0) { this.fileList.forEach(item => { files.push(item.url) }) this.inputForm.signPic = files.join(","); } userService.saveInfo(this.inputForm).then((data) => { uni.showToast({ title: data, icon: "success", complete: function(res) { uni.redirectTo({ url: '/pages/index/index' }) } }); }) } } } </script> <style> .btn-logout { margin-top: 100upx; width: 80%; border-radius: 50upx; font-size: 16px; color: #fff; background: linear-gradient(to right, #365fff, #36bbff); } .btn-logout-hover { background: linear-gradient(to right, #365fdd, #36bbfa); } .cu-form-group .title { min-width: calc(4em + 40px); } </style>