smart-app/pages/user/signature/signature.vue

<template>
    <scroll-view scroll-y="false"> 
		<cu-custom bgColor="bg-blue" :isBack="true">
			<block slot="backText">电子签名</block>
			<block slot="content"></block>
			<block slot="right">
				<view class="flex justify-center">
					<button @click="paint"  class="margin-top-ssm cu-btn round line-blue text-white ">手写签名</button>
				</view>
			</block>
		</cu-custom>
		<form class="cu-list menu margin-bottom-xl shadow-lg">
		  <!--  <view class="cu-form-group">
		    	<view class="action text-black">
		    		手写签名
		    	</view>
		    	<view class="grid col-4 grid-square flex-sub cont">
		    		  <button class='cu-btn bg-green shadow' @click="paint">手写签名</button>
		    	</view>
		    </view> -->
			<view class="cu-form-group">
				<view class="action" style="color: #101010;">
					签名上传
				</view>
				<view class="grid col-4 grid-square flex-sub cont margin-top">
					<view class="bg-img" v-for="(item,index) in qmimgList" :key="index" @tap="ChooseImage(2)" :data-url="qmimgList[index]">
					 <image :src="qmimgList[index]" mode="aspectFill"></image>
						<!-- <view class="cu-tag bg-red" @tap.stop="qmDelImg" :data-index="index">
							<text class='cuIcon-close'></text>
						</view> -->
					</view>
					<view class="solids margin-top" @tap="ChooseImage(2)" v-if="qmimgList.length<1">
						<text class='cuIcon-cameraadd'></text>
					</view>
				</view>
			</view>
			<view class="cu-form-group">
				<view class="action " style="color: #101010;">
					签章上传
				</view>
				<view class="grid col-4 grid-square flex-sub cont margin-top">
					<view class="bg-img" v-for="(item,index) in qzimgList" :key="index" @tap="ChooseImage(3)" :data-url="qzimgList[index]">
					 <image :src="qzimgList[index]" mode="aspectFill"></image>
						<!-- <view class="cu-tag bg-red" @tap.stop="qzDelImg" :data-index="index">
							<text class='cuIcon-close'></text>
						</view> -->
					</view>
					<view class="solids margin-top" @tap="ChooseImage(3)" v-if="qzimgList.length<1">
						<text class='cuIcon-cameraadd'></text>
					</view>
				</view>
			</view>
		</form>
		<!-- <view class="cu-modal" :class="modalName=='Image'?'show':''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end">
					<view class="content">请在绿色区域手写签名</view>
					<view class="action" @tap="modalName=''">
						<text class="cuIcon-close text-red"></text>
					</view>
				</view>
				<view class="padding-xl" style="height: 600rpx;">	
					<canvas style="border: 1px solid #39B54A;height: 100%;width: 100%;" canvas-id="mycanvas" @touchmove='move' @touchstart='start($event)' @touchend='end'
					 @touchcancel='cancel' @longtap='tap' disable-scroll='true' @error='error'>
					</canvas>
				</view>
				<view class="cu-bar bg-white justify-end">
					<view class="action">
						<button class="cu-btn line-green text-green" @click="clearClick">清空</button>
						<button class="cu-btn bg-green margin-left" @click="finish">确定</button>
					</view>
				</view>
			</view>
		</view>
	 -->
	</scroll-view>
</template>
<script>
	import config from "../../../core/api.js"
	export default {
		data() {
			return {
				qmimgList:[],
				qzimgList:[],
				userInfo:"",
				modalName:"",
				baseOrPath:true
			};
		},
		onLoad() {
			 
		},
		onShow() {
			var userInfo = uni.getStorageSync("userInfo")
			if(userInfo!=null){
				this.userInfo=userInfo;
				if(userInfo.signature!='null' && userInfo.signature!=null){
					this.qmimgList=[];
					this.qmimgList.push(userInfo.signature)
				}
				if(userInfo.signaturepreview!='null' && userInfo.signaturepreview!=null){
					this.qzimgList=[];
					this.qzimgList.push(userInfo.signaturepreview);
				}			
			}
		},
		methods: {
			changeqz(){
				var that=this;
				var token =uni.getStorageSync("token");
				var url  = config.api;
					uni.uploadFile({
						 url:url+ '/app/updateSignaturepreview',
						 filePath: that.qzimgList[0],			 
						 name: 'file',
						 header:{"Authorization": token},
						 formData:{
									"userId":this.userInfo.id, 						  
								},
						 success: function (uploadFileRes) {
							 var data = JSON.parse(uploadFileRes.data);
							 if(data.result=="1"){
								uni.setStorageSync("userInfo",data.data);
								that.qzimgList=[];
								that.qzimgList.push(data.data.signaturepreview);
								that.userInfo.signaturepreview = data.data.signaturepreview
								that.$prompt.none("更新成功");							  
							} 
						 }     
					});													  
			},
			paint(){
				uni.navigateTo({
					url:"paint/paint"
				})
			},
			ChooseImage(e) {
				var that=this;
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: (res) => {
						 if(e==2){
							that.baseOrPath=true;
							that.qmimgList=[];
							that.qmimgList = res.tempFilePaths;
							that.saveSignature();
						}else if(e==3){
							that.qzimgList=[];
							that.qzimgList = res.tempFilePaths;
							that.changeqz();
						}
						
					}
				});
			},
			qmViewImage(e) {
				uni.previewImage({
					urls: this.qmimgList,
					current: e.currentTarget.dataset.url,
				});
			},
			qmDelImg(e) {
				uni.showModal({
					title: '提示',
					content: '确定要删除吗',
					cancelText: '取消',
					confirmText: '确定',
					success: res => {
						if (res.confirm) {
							this.qmimgList.splice(e.currentTarget.dataset.index, 1)
						}
					}
				})
			},
			qzViewImage(e) {
				uni.previewImage({
					urls: this.qzimgList,
					current: e.currentTarget.dataset.url
				});
			},
			qzDelImg(e) {
				uni.showModal({
					title: '提示',
					content: '确定要删除吗',
					cancelText: '取消',
					confirmText: '确定',
					success: res => {
						if (res.confirm) {
							this.qzimgList.splice(e.currentTarget.dataset.index, 1)
						}
					}
				})
			},
			saveSignature(){
				var that =this;
				var url  = config.api;
				var token =uni.getStorageSync("token");
				uni.uploadFile({
					 url: url+'/app/updateSignature',
					 filePath: that.qmimgList[0],			 
					 name: 'file',
					 header:{"Authorization": token},
					 formData:{
								"userId":this.userInfo.id, 						  
							},
					 success: function (uploadFileRes) {
						 var data = JSON.parse(uploadFileRes.data);
						 if(data.result=="1"){
							uni.setStorageSync("userInfo",data.data);
							that.qmimgList=[];												    
							that.qmimgList.push(data.data.signature);
							that.userInfo.signature =data.data.signature ;
							that.$prompt.none("更新成功");								  
						} 
					 }     
				});												   	
			}
			
		}
	}
</script>

<style>
	.cu-form-group .title {
		min-width: calc(4em + 15px);
	}
	.cont{
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: flex-end;
	}
</style>