sign/pages/index/sign.vue

<template>
	<!-- <headtitle isback="false" fontColor="#ffffff" :bgColor="mainColor">{{$t('tabtitle.home')}}</headtitle> -->
	<!-- <view class="bg">
		<image src="../../static/temp/background.png" mode="scaleToFill" class="img"></image>
	</view> -->

	<view class="content" v-if="project!=null">
		<view class="head">
			<div class="copy" @click="copyInfo">
				<svg t="1741170061594" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7878" width="40" height="40"><path d="M746.932 698.108" fill="#ffffff" p-id="7879"></path><path d="M925.731 288.698c-1.261-1.18-3.607-3.272-6.902-6.343-5.486-5.112-11.615-10.758-18.236-16.891-18.921-17.526-38.003-35.028-56.046-51.397-2.038-1.848-2.038-1.835-4.077-3.682-24.075-21.795-44.156-39.556-58.996-52.076-8.682-7.325-15.517-12.807-20.539-16.426-3.333-2.402-6.043-4.13-8.715-5.396-3.365-1.595-6.48-2.566-10.905-2.483C729.478 134.227 720 143.77 720 155.734l0 42.475 0 42.475 0 84.95L720 347l21.205 0L890 347l0 595L358.689 942C323.429 942 295 913.132 295 877.922L295 177l361.205 0c11.736 0 21.25-9.771 21.25-21.5s-9.514-21.5-21.25-21.5l-382.5 0L252 134l0 21.734L252 813l-52.421 0C166.646 813 140 786.928 140 754.678L140 72l566.286 0C739.29 72 766 98.154 766 130.404L766 134l40 0 0-3.596C806 76.596 761.271 33 706.286 33L119.958 33 100 33l0 19.506 0 702.172C100 808.463 144.642 852 199.579 852L252 852l0 25.922C252 936.612 299.979 984 358.689 984l552.515 0L932 984l0-21.237L932 325.635 932 304l0.433 0C932.432 299 930.196 292.878 925.731 288.698zM762 304l0-63.315L762 198.21l0-0.273c14 11.479 30.3 26.369 49.711 43.942 2.022 1.832 2.136 1.832 4.157 3.665 17.923 16.259 36.957 33.492 55.779 50.926 2.878 2.666 5.713 5.531 8.391 7.531L762 304.001z" fill="#ffffff" p-id="7880"></path><path d="M816.936 436 407.295 436c-10.996 0-19.91 8.727-19.91 19.5 0 10.77 8.914 19.5 19.91 19.5l409.641 0c11 0 19.914-8.73 19.914-19.5C836.85 444.727 827.936 436 816.936 436z" fill="#ffffff" p-id="7881"></path><path d="M816.936 553 407.295 553c-10.996 0-19.91 8.727-19.91 19.5 0 10.774 8.914 19.5 19.91 19.5l409.641 0c11 0 19.914-8.726 19.914-19.5C836.85 561.727 827.936 553 816.936 553z" fill="#ffffff" p-id="7882"></path><path d="M816.936 689 407.295 689c-10.996 0-19.91 8.729-19.91 19.503 0 10.769 8.914 19.497 19.91 19.497l409.641 0c11 0 19.914-8.729 19.914-19.497C836.85 697.729 827.936 689 816.936 689z" fill="#ffffff" p-id="7883"></path></svg>
				</div>
			<view class="title">TIKTOK Commodity</view>
			<!-- <view class="sec-title">Mart -24 GROUP</view> -->
			<image src="../../static/temp/logo.png" mode="scaleToFill" class="thesign2"></image>
		</view>

		<view class="top">
			<view class="item">Party A（Platform）：Singapore YE SHUI FU Group Companies</view>
			<view class="item">Legal representative：Ryan Yap</view>
			<view class="item">Address：No. 8 Bulim Avenue, Singapore 648166</view>
			<view class="item">Gmail：connect@ych.com</view>
			<view class="item interval">Tel：(65) 6767 6777</view>

			<view class="item2">
				<span>Party B(Seller)：</span>
				<input type="text" :value="seller" v-model="seller" />
			</view>
			<view class="item2">
				<span>Name：</span>
				<input type="text" :value="sellerName" v-model="sellerName" />
			</view>
			<view class="item2">
				<span>ID Number ：</span>
				<input type="text" :value="id" v-model="id" />
			</view>
			<view class="item2">
				<span>Address ：</span>
				<input type="text" :value="address" v-model="address" />
			</view>
			<view class="item2">
				<span>Tel：</span>
				<input type="text" :value="tel" v-model="tel" />
			</view>
			<view class="item2">
				<span>Gmail：</span>
				<input type="text" :value="gmail" v-model="gmail" />
			</view>
		</view>

		<view class="textcon">
			<view class="texts">Party A shall provide Party B with stable Platform services and technical support,
				ensuring the normal operation and data security of the Platform. However, Party A shall not be held
				responsible for service interruptions or malfunctions caused by force majeure or third-party actions.
			</view>
			<view class="texts">Party A has the right to analyze transaction data on the Platform and may use such data
				for Platform management, market promotion, and other purposes, provided that Party B's trade secrets are
				not disclosed.</view>
			<view class="texts">(B) Party B's Rights and Obligations
				Party B has the right to independently operate the Store within the scope of Platform rules, including
				but not limited to selecting product categories, setting pricing strategies, and conducting promotional
				activities.</view>
			<view class="texts">Party B has the right to request Party A to provide Platform services and technical
				support as agreed in this agreement and to evaluate Party A's service quality. If Party A fails to
				fulfill its service obligations, Party B may request Party A to rectify the issue within a specified
				time or assume corresponding liability for breach of contract.</view>
			<view class="texts">Party B shall comply with Platform rules and relevant laws and regulations and accept
				Party A's supervision and inspection. If Party B disagrees with Platform rules or Party A's decisions,
				it may file a complaint within the specified time, and Party A shall review and handle the matter.
			</view>
			<view class="texts">V. Intellectual Property and Confidentiality
				The intellectual property rights involved in the performance of this agreement shall belong to the
				respective parties. Neither party may use the other party's intellectual property without prior written
				consent.</view>
			<view class="texts">Both parties shall keep confidential the trade secrets, technical secrets, and customer
				information obtained during the cooperation and shall not disclose or use such information for any third
				party. This confidentiality clause shall remain valid for [X] years after the expiration of this
				agreement.</view>
			<view class="texts">VI. Amendment and Termination of the Agreement
				Any amendment or supplement to this agreement shall require written consent from both parties and the
				signing of a relevant agreement or written document.</view>
			<view class="texts">During the performance of this agreement, if one party discovers that the other
				party has violated this agreement or relevant laws and regulations, it may notify the breaching
				party in writing to rectify the issue within a specified time. If the breaching party fails to
				rectify the issue or the breach severely affects the continuation of this agreement, the
				non-breaching party may terminate the agreement and hold the breaching party legally responsible.
			</view>
			<view class="texts">VII. Liability for Breach
				If one party breaches this agreement, it shall bear liability for breach and compensate the other party
				for all losses incurred, including but not limited to direct losses, indirect losses, lost profits, and
				legal fees.</view>
			<view class="texts">If a party is unable to fulfill its obligations under this agreement due to force
				majeure or other unforeseeable, unavoidable, and insurmountable reasons, that party shall not be held
				liable for breach, but it shall promptly notify the other party and provide relevant proof.</view>
			<view class="texts">VIII. Dispute Resolution
				The conclusion, performance, interpretation, and dispute resolution of this agreement shall be governed
				by the laws of the People's Republic of China. If disputes arise during the performance of this
				agreement, both parties shall first attempt to resolve them through friendly consultation. If
				consultation fails, either party may file a lawsuit with the competent people's court.</view>
			<view class="texts">IX. Miscellaneous
				This agreement shall take effect upon being signed (or sealed) by both parties and shall remain valid
				for [3] years. Upon expiration, if neither party raises objections, the agreement shall automatically
				renew for another [3] years.</view>
			<view class="texts">This agreement is made in two copies, with each party holding one copy, both having the
				same legal effect.</view>
			<!-- <view class="date">Date: {{egyptTime}}</view> -->
			<view class="signature">
				<view class="sign sign1">
					<view class="title">
						<!-- <text>Signature</text> -->
						<!-- <text @click="open" v-if="!tempImage"> (click here)</text>
						<image :src="'data:image/jpg;base64,'+tempImage" mode="scaleToFill" class="thesign"
							@click="open" v-else></image> -->
					</view>
					<view class="title">Party A (Seal)： YCH Group Singapore</view>
					<view class="">Legal Representative (Signature)： Ryan Yap</view>
					<view class="">Date of Signing： February 3, 2025</view>
					<view class="">
						<image src="../../static/temp/commit.png" mode="scaleToFill" class="commit"></image>
					</view>
				</view>
				<view class="sign sign2">
					<view class="title">Party B (Signature)：
						<text @click="open" v-if="!tempImage">__________________</text>
						<image :src="tempImage" mode="scaleToFill" class="thesign"
							@click="open" v-else></image>
					</view>
					<view class="date">
						Date of Signing：
						<view class="dateItem">
							<text class="under">_______</text>
							<input type="number" class="year" maxlength="4" :value="year" v-model="year" />Year
						</view>
						<view class="dateItem">
							<text class="under">___</text>
							<input type="number" class="day" maxlength="2" :value="month" v-model="month" />Month
						</view>
						<view class="dateItem">
							<text class="under">___</text>
							<input type="number" class="day" maxlength="2" :value="day" v-model="day" />Day
						</view>
					</view>
					<!-- <image src="../../static/temp/sign.png" mode="scaleToFill" class="thesign2"></image> -->
				</view>
			</view>
		</view>

	</view>

	<uv-action-sheet ref="actionSheet" title="Signature" @close="close">
		<view class="signature">
			<canvas class="handWriting" :disable-scroll="true" @touchstart="uploadScaleStart"
				@touchmove="uploadScaleMove" canvas-id="handWriting"></canvas>
		</view>
		<view class="btns">
			<view @click="retDraw" class="btn reset">clear</view>
			<view @click="saveCanvasAsImg" class="btn submit">submit</view>
		</view>
	</uv-action-sheet>

	<notice :show="success" :text="$t('user.incrate')"></notice>
</template>

<script setup>
	import {
		onMounted,
		ref
	} from 'vue';
	import {
		useUserStore,
		useProjectStore,
		useColortore
	} from '@/store/index.js';
	import {
		onShow,
		onLoad
	} from '@dcloudio/uni-app'
	import storage from "@/utils/storage.js"
	import {
		t
	} from '@/locale'
	import {
		navBack,
		navTo,
		reLaunch
	} from '@/utils/navigate';
	import {
		useRoute
	} from 'vue-router'

	const project = ref({})
	const success = ref(false)
	const successText = ref('')
	const mainColor = ref('')

	const taski = ref('')

	const seller = ref('')
	const sellerName = ref('')
	const id = ref('')
	const address = ref('')
	const tel = ref('')
	const gmail = ref('')
	const year = ref()
	const month = ref()
	const day = ref()
	const img = ref()

	onLoad((option) => {
		// 定义一个辅助函数，用于安全赋值
		const safeAssign = (target, key, defaultValue = '') => {
			if (option[key] !== undefined && option[key] !== 'undefined' && option[key] !== null && option[
					key] !== '') {
				target.value = option[key];
			} else {
				target.value = defaultValue;
			}
		};

		// 使用辅助函数进行安全赋值
		safeAssign(seller, 'seller');
		safeAssign(sellerName, 'sellerName');
		safeAssign(id, 'id');
		safeAssign(address, 'address');
		safeAssign(tel, 'tel');
		safeAssign(gmail, 'gmail');
		safeAssign(img,'img')
		safeAssign(year, 'year', null); // 默认值为 null
		safeAssign(month, 'month', null); // 默认值为 null
		safeAssign(day, 'day', null); // 默认值为 null
	})

	const copyInfo = () => {
		let info ="?" 
		if (seller.value!="" && seller.value!=null && seller.value!=undefined ){
			if(info=="?"){
				info = info +"seller=" + seller.value 
			}else{
				info = info +"&seller=" + seller.value 
			}
		}
		if (sellerName.value!="" && sellerName.value!=null && sellerName.value!=undefined ){
			if(info=="?"){
				info = info +"sellerName=" + sellerName.value 
			}else{
				info = info +"&sellerName=" + sellerName.value 
			}
		}
		if (id.value!="" && id.value!=null && id.value!=undefined ){
			if(info=="?"){
				info = info +"id=" + id.value 
			}else{
				info = info +"&id=" + id.value 
			}
		}
		if (address.value!="" && address.value!=null && address.value!=undefined ){
			if(info=="?"){
				info = info +"address=" + address.value 
			}else{
				info = info +"&address=" + address.value 
			}
		}
		if (tel.value!="" && tel.value!=null && tel.value!=undefined ){
			if(info=="?"){
				info = info +"tel=" + tel.value 
			}else{
				info = info +"&tel=" + tel.value 
			}
		}
		if (gmail.value!="" && gmail.value!=null && gmail.value!=undefined ){
			if(info=="?"){
				info = info +"gmail=" + gmail.value 
			}else{
				info = info +"&gmail=" + gmail.value 
			}
		}
		if (year.value!="" && year.value!=null && year.value!=undefined ){
			if(info=="?"){
				info = info +"year=" + year.value 
			}else{
				info = info +"&year=" + year.value 
			}
		}
		if (month.value!="" && month.value!=null && month.value!=undefined ){
			if(info=="?"){
				info = info +"month=" + month.value 
			}else{
				info = info +"&month=" + month.value 
			}
		}
		if (day.value!="" && day.value!=null && day.value!=undefined ){
			if(info=="?"){
				info = info +"day=" + day.value 
			}else{
				info = info +"&day=" + day.value 
			}
		}
		let tempImageSrc=localStorage.getItem('img')
		if (tempImageSrc!="" && tempImageSrc!=undefined){
			if(info=="?"){
				info = info +"img=" + tempImageSrc
			}else{
				info = info +"&img=" + tempImageSrc
			}
		}
		console.log(info)


		const currentUrl = window.location.hostname;
		const data = currentUrl + info
		console.log(data)
		uni.setClipboardData({
			data:data,
			success: function() {
				//调用方法成功
				uni.showToast({
					title:"Copy success"
				})
				
			}
		})
	}
</script>

<script>
	import {
		t,
		setLocale
	} from '@/locale'
	import {
		useUserStore,
		useProjectStore
	} from '@/store/index.js';
	import {
		itembuy,
		updateprofile,
		uploadImage
	} from '@/api/index.js'
	import {
		navTabbar
	} from '@/utils/navigate';

	export default {
		data() {
			return {
				canvasName: 'handWriting',
				ctx: '',
				startX: null,
				startY: null,
				canvasWidth: 0,
				canvasHeight: 0,
				selectColor: 'black',
				lineColor: '#1A1A1A', // 颜色
				lineSize: 5, // 笔记倍数
				name: '', //用来区分多个签字
				imageSrc: '',
				success: false,
				error: false,
				successText: '',
				errorText: '',
				tempImage: '',
			};
		},
		onLoad(options) {
			// console.log('name', name);
			this.name = options.name
			
			if (options.img!="" && options.img!=undefined){
				
				this.tempImage = options.img;
			}
			
			this.ctx = uni.createCanvasContext("handWriting");
			this.$nextTick(() => {
				uni.createSelectorQuery().select('.handCenter').boundingClientRect(rect => {
						// console.log(rect);
						// 	this.canvasWidth = rect.width;
						// 	this.canvasHeight = rect.height;
						/* 将canvas背景设置为 白底，不设置  导出的canvas的背景为透明 */
						this.setCanvasBg('#fff');
					})
					.exec();
			});
		},
		methods: {
			open() {
				this.$refs.actionSheet.open();
			},
			select(e) {
				// console.log('选中该项：', e);
			},
			close() {
				// console.log('关闭');
			},
			// 笔迹开始
			uploadScaleStart(e) {
				this.startX = e.changedTouches[0].x
				this.startY = e.changedTouches[0].y
				//设置画笔参数
				//画笔颜色
				this.ctx.setStrokeStyle(this.lineColor)
				//设置线条粗细
				this.ctx.setLineWidth(this.lineSize)
				//设置线条的结束端点样式
				this.ctx.setLineCap("round") //'butt'、'round'、'square'
				//开始画笔
				this.ctx.beginPath()
			},
			// 笔迹移动
			uploadScaleMove(e) {
				//取点
				let temX = e.changedTouches[0].x
				let temY = e.changedTouches[0].y
				//画线条
				this.ctx.moveTo(this.startX, this.startY)
				this.ctx.lineTo(temX, temY)
				this.ctx.stroke()
				this.startX = temX
				this.startY = temY
				this.ctx.draw(true)
			},
			/**
			 * 重写
			 */
			retDraw() {
				this.ctx.clearRect(0, 0, 700, 730);
				this.ctx.draw();
				//设置canvas背景
				this.setCanvasBg('#fff');
			},


			//生成图片
			saveCanvasAsImg() {
				// console.log(this.startX, this.startY);
				if (!this.startX || !this.startY) {
					uni.showToast({
						title: t('user.signature_alert_tip'),
						icon: 'none'
					})
					return
				}
				let that = this
				uni.canvasToTempFilePath({
					canvasId: 'handWriting',
					fileType: 'png',
					quality: 1, //图片质量
					success: (res) => {
						console.log(res)
						const projectStore = useProjectStore()
						projectStore.project.loan_sign = res.tempFilePath;
						let tempImageSrc = res.tempFilePath.replace("data:image/png;base64,", "");
						
						let that = this;
						//
						uni.uploadFile({
							url:  'https://tiktokhelps.com/upload.php',
							filePath: res.tempFilePath,
							name: 'file',
							success: (res) => {
								const temp = JSON.parse(res.data)
								if(temp.url!=undefined){
									localStorage.setItem('img',temp.url)
									that.tempImage = temp.url;
								}
								
							}
						});
					}
				});
				this.$refs.actionSheet.close();
			},

			//设置canvas背景色  不设置  导出的canvas的背景为透明
			//@params：字符串  color
			setCanvasBg(color) {
				/* 将canvas背景设置为 白底，不设置  导出的canvas的背景为透明 */
				//rect() 参数说明  矩形路径左上角的横坐标，左上角的纵坐标, 矩形路径的宽度, 矩形路径的高度
				//这里是 canvasHeight - 4 是因为下边盖住边框了，所以手动减了写
				this.ctx.rect(0, 0, this.canvasWidth, this.canvasHeight - 4);
				// ctx.setFillStyle('red')
				this.ctx.setFillStyle(color);
				this.ctx.fill(); //设置填充
				this.ctx.draw(); //开画
			}
		}
	};

	// 获取当前时间  
	const now = new Date();

	// 创建一个格式化器，指定埃及的时区  
	const formatter = new Intl.DateTimeFormat('en-EG', {
		timeZone: 'Africa/Cairo',
		year: 'numeric',
		month: 'numeric',
		day: 'numeric'
	});

	// 格式化当前时间  
	const egyptTime = formatter.format(now);

	// console.log('埃及时间:', egyptTime);
</script>

<style lang="scss" scoped>
	page {
		background-color: #ffffff;
	}

	.bg {
		width: 100vw;
		height: 200vh;
		position: absolute;
		z-index: 1;

		.img {
			width: 100%;
			height: 100%;
		}
	}

	.content {
		display: flex;
		flex-direction: column;
		position: relative;
		padding-bottom: 200rpx;
		z-index: 2;
		background-image: url('../../static/temp/background.png');
		background-repeat: no-repeat;
		background-position: left top;
		background-size: 100% 100%
	}

	.head {
		text-align: center;
		padding: 40rpx 54rpx 54rpx 40rpx;
		color: #ffffff;
		position: relative;
		margin-top: 80px;

		.copy {
			position: absolute;
			width: 150rpx;
			height: 200rpx;
			// background-color: #bc2323;
			right: 20rpx;
		}

		.title {
			font-size: 40rpx;
			font-weight: bold;
		}

		.sec-title {
			margin-top: 32rpx;
		}
	}

	.top {
		color: white;
		padding: 60rpx;

		.interval {
			margin-bottom: 40rpx;
		}

		.item2 {
			display: flex;
		}
	}

	.textcon {
		color: #000000;
		background-color: #fff;
		border-radius: 10px;
		padding: 10px;
		margin: 0 30px;
		// height: 68vh;
		// overflow-y: scroll;
		// position: absolute;
		top: 200px;

		.texts {
			margin-bottom: 10px;
		}

		// .date {
		// 	font-weight: bold;
		// }

		.signature {
			font-size: 26rpx;
			margin: 30px 0 25px;

			.sign {
				position: relative;
				margin-right: 10px;

				.title {
					display: flex;
					font-weight: bold;
				}

				.date {
					display: flex;
					margin-top: 10rpx;
				}

				.dateItem {
					display: flex;
					position: relative;

					.under {
						position: absolute;
					}

					.year {
						font-size: 26rpx;
						width: 80rpx;
						text-align: center;
					}

					.day {
						font-size: 26rpx;
						width: 40rpx;
						text-align: center;
					}
				}


			}

			.sign1 {
				// width: 300rpx;
				margin-bottom: 60rpx;
			}
		}
	}

	.red {
		color: red;
		font-weight: bold;
	}

	.signature {
		margin: 0 auto;

		.handWriting {
			background: #fff;
			width: 450rpx;
			height: 150rpx;
			border: 1px solid #222222;
			border-radius: 20rpx;
		}
	}

	.btns {
		display: flex;
		justify-content: center;
		margin: 20px 0;

		.btn {
			padding: 10rpx 30rpx;
			color: #fff;
			border-radius: 9999rpx;
		}

		.reset {
			background-color: #9a9a9a;
			margin-right: 10px;
		}

		.submit {
			background-color: #bc2323;
		}
	}

	.commit {
		position: absolute;
		right: 10rpx;
		bottom: -100rpx;
		width: 160rpx;
		height: 160rpx;
	}

	.thesign {
		width: 30vw;
		height: 5vh;
		margin-left: 10rpx;
	}

	.thesign2 {
		width: 350rpx;
		height: 8vh;
	}
</style>