v3-lab-xcx/pages_basics/signature/signature.vue

<!-- 电子签名 -->
<template>
	<view id="signature">
		<view class="signature_li">
			<view class="signature_li_t">示例:</view>
			<view class="signature_li_b">
				<img src="@/page_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="@/images/basicsModules/icon_fjgk_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 { logout,studentinfoFacemy,simpleInfo,getSafeWarnList,getMyPointsLogInfo,updateSignature} from '@/api/apiDemo/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+'/base/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: '/page_basics/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>