FE-lab-xcx/pages_basics/views/signature/signature.vue

<!-- 电子签名 -->
<template>
	<view id="signature">
		<view class="signature_li">
			<view class="signature_li_t">示例:</view>
			<view class="signature_li_b">
				<img src="@/pages_basics/images/img_dzqm_sl.png">
			</view>
		</view>
		<view class="tip">请上传白字黑子正楷签名</view>
		<view class="signature_li">
			<view class="signature_li_t">上传签名:</view>
			<view class="signature_li_b">
				<view class="signature_li_b_c" @click="selectImage"><span v-if="!signatureData">点击上传签名</span></view>
				<img class=".signature_li_img2" :src="signatureData">
			</view>
			<view class="clear_signature" @tap="signatureDele()">
				<img class="clear_signature_img" src="@/pages_basics/images/icon_sczl_sc.png" />
				<text>清除</text>
			</view>
			<view class="upload_tip">请严格按照示例上传正楷签名并置于框内</view>
		</view>
		<view class="signature_li">
			<view class="signature_li_t" style="margin-top: 20rpx;">已上传的签名:</view>
			<image class="signature_li_img" :src="alreadyImg"></image>

		</view>
		<view class="save_btn" @click="saveFun()">保存</view>
	</view>

</template>

<script>
	import {
		config
	} from '@/api/request/config.js'
	import {
		updateSignature
	} from '@/pages_basics/api/index.js'
	export default {

		data() {
			return {
				baseUrl: config.base_url,
				signatureData: '',
				alreadyImg: '',

			}
		},
		onLoad(option) {
			//首次进入获取上个页面传过来的签名
			this.alreadyImg = this.baseUrl + option.item;
			console.log(this.alreadyImg)
		},
		onShow() {
			//用户点击上传签名
			if (uni.getStorageSync('signatureData')) {
				this.signatureData = uni.getStorageSync('signatureData');
				uni.removeStorageSync('signatureData');
			}
		},
		methods: {
			//清除签名
			async signatureDele() {
				let _this = this;
				this.signatureData = '';
				this.alreadyImg = '';
			},
			//保存按钮
			async saveFun() {
				let _this = this;

				if (!this.signatureData) {

					uni.showToast({
						title: '请先选择签名上传并保存查看',
						icon: "none",
						mask: true,
						duration: 2000
					});
					return
				}
				var arr = this.signatureData.split(',')
				let obj = {
					signature: arr[1]
				}
				const {
					data
				} = await updateSignature(obj);
				if (data.code == 200) {
					uni.showToast({
						title: '上传成功',
						icon: "none",
						mask: true,
						duration: 2000
					});
					setTimeout(function() {
						uni.navigateBack()
					}, 2000);
					// uni.switchTab({
					//      url: '/pages/mine'
					//  });

				}

			},
			// 头像上传
			selectImage() {
				let self = this;
				wx.chooseImage({
					count: 1,
					sizeType: ["original", "compressed"],
					sourceType: ["album", "camera"],
					success: function(res) {
						console.log("res1", res)
						let tempFilePaths = res.tempFilePaths[0];
						self.uploadImg(tempFilePaths);
					}
				});
			},
			async uploadImg(tempFilePaths) {
				var self = this;
				uni.showLoading({
					title: '上传中',
					mask: true
				});
				uni.uploadFile({
					url: config.base_url + '/system/file/upload', //仅为示例，非真实的接口地址
					header: {
						'Authorization': uni.getStorageSync('token')
					},
					filePath: tempFilePaths,
					name: 'file',
					formData: {
						'user': 'test'
					},
					success: (uploadFileRes) => {
						let res = JSON.parse(uploadFileRes.data);
						if (res.code == 200) {
							uni.navigateTo({
								url: '/pages_basics/views/signature/signatureImg?src=' + config
									.base_url + res.data.url, //电子签名-图片处理
							});
						} else {
							uni.showToast({
								title: res.msg,
								icon: "none",
								mask: true,
								duration: 2000
							});
						}
					},
					fail: err => {},
					complete: () => {
						uni.hideLoading()
					}
				});
			},
		},
	}
</script>

<style lang="stylus" scoped>
	#signature {
		width: 710rpx;
		height: auto;
		background: #FFFFFF;
		border-radius: 20rpx;
		margin: 20rpx 20rpx 0;
		padding: 28rpx 20rpx 94rpx;
		box-sizing: border-box;

		.tip {
			width: 100%;
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #999999;
			line-height: 24rpx;
			margin: 24rpx 0 42rpx 0;
			text-align: center;
		}

		.signature_li {
			.signature_li_t {
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #333333;
				line-height: 28rpx;

			}

			.signature_li_b {
				position: relative;
				margin-top: 28rpx;
				width: 668rpx;
				height: 250rpx;
				background: #FFFFFF;
				border: 1px solid #E0E0E0;
				border-radius: 10rpx;
				text-align: center;

				>img {
					display: inline-block;
					width: 192rpx;
					height: 60rpx;
					margin-top: 90rpx;
				}

				.signature_li_b_c {
					font-size: 26rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #0183FA;
					line-height: 250rpx;
					cursor: pointer;
					position: relative;
					z-index: 200;
				}

				.signature_li_img2 {
					position: absolute;
					left: 0;
					top: 0;
					z-index: 100;
					width: 668rpx;
					height: 250rpx;
					margin: 0;
				}

			}

			.signature_li_img {
				margin-top: 28rpx;
				width: 668rpx;
				height: 250rpx;
				background: #FFFFFF;
				border: 1px solid #E0E0E0;
				border-radius: 10rpx;
				text-align: center;
			}

			.upload_tip {
				width: 100%;
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #999999;
				line-height: 24rpx;
				margin: 24rpx 0 42rpx 0;
				text-align: center;
			}

			.clear_signature {
				height: 30rpx;
				margin: 20rpx 0;
				display: flex;
				justify-content: flex-end;

				.clear_signature_img {
					width: 30rpx;
					height: 30rpx;
					margin-right: 10rpx;
				}

				>text {
					font-size: 26rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #A2A2A2;
					line-height: 30rpx;
				}
			}
		}

		/* 保存按钮*/
		.save_btn {
			width: 650rpx;
			height: 100rpx;
			background: #0183FA;
			border-radius: 20px;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
			line-height: 100rpx;
			text-align: center;
			margin-top: 44rpx;
		}
	}
</style>