mdapp/pages/user/contract/edit.vue

<template>
	
	<view class="page">
		<view class="form">
			<u-form :model="form" ref="uForm">
				<u-form-item label-width="150" label="标题" prop="contract_name">
					<u-input placeholder="请输入您的合同标题" v-model="form.contract_name" type="text"></u-input>
				</u-form-item>
				

				<u-form-item label-width="150" label="金额" prop="contract_amount">
					<u-input placeholder="请输入合同金额" v-model="form.contract_amount" type="text"></u-input>
					<template v-slot:right>
						万元
					</template>
				</u-form-item>

				<u-form-item label-width="150" label="到期日期" prop="info1" @click.native="openinfo1Popoup">
					<view class="scoped-input-floor" @click.native="openinfo1Popoup"></view>
					<u-input placeholder="请选择到期日期" v-model="form.end_at" disabled type="text"></u-input>
				</u-form-item>


				<u-form-item label-position="top" label-width="150" label="电子合同PDF" prop="contract_pdf">
					<view class="scoped-more-img">
						<view class="si-op" v-if="form.contract_pdf" @click="linkWebView">
							<u-image src="/static/icon_bg_pdf.png" mode="heightFix" height="150rpx" class="img"></u-image>
							<u-image src="/static/icon_g_close.png" class="i" height="40rpx" @click="delPdf()"></u-image>
						</view>
						<view class="si-op" @click="uploadPDF" v-else>
							<u-image src="/static/icon_upload_pdf.png" mode="heightFix" height="150rpx" class="img"></u-image>
						</view>
					</view>
				</u-form-item>
				<!-- <view class="sp-op">
					<u-image src="/static/icon_upload_pdf.png" mode="heightFix" height="150rpx" class="img"></u-image>
				</view> -->

			</u-form>
			<u-gap height="60"></u-gap>
			<u-button type="primary" @click="submitHandle">提交</u-button>
		</view>
		
		<!-- mask -->
		<u-mask :show="maskShow" @click="maskShow = false">
			<view class="warp">
				<!-- <u-image src="https://zdcdn.2bwin.cn/uploads/20220513/90abe6fe85d6c17f6bdc069955fbb878.png" mode="widthFix" width="400rpx" border-radius="20rpx"></u-image> -->
				<u-gap></u-gap>
				<u-button size="medium" type="primary" @click="maskShow = false">确定</u-button>
			</view>
		</u-mask>
		<!-- utoast -->
		<u-toast ref="uToast" />
		<u-select mode="single-column" :list="groupTypeSelectList" v-model="groupTypeSelectShow" @confirm="groupTypeSelectConfirm"></u-select>



		<u-calendar v-model="info1Show" mode="date" :max-date="'2099-5-20'" @change="info1Change"></u-calendar>

	</view>
</template>
<script>
var that;
export default {
	data() {
		return {
			groupTypeSelectShow: false,
			groupTypeSelectList: [],
			maskShow: false,
			form: {
				contract_name: null,
				start_at: '',
				end_at: '',
				contract_amount: '',
				contract_pdf: '',
			},
			cObj: {},
			submitButtonDisabled: false,
			rules: {
				contract_name: [
					{
						required: true,
						message: '合同名称不得为空',
						trigger: ['change', 'blur']
					},
				],
				contract_amount: [
					{
						required: true,
						message: '合同金额不得为空',
						trigger: ['change', 'blur']
					},
				],
				contract_pdf: [
					{
						required: true,
						message: 'pdf合同不得为空',
						trigger: ['change', 'blur']
					}
				],
			},
			info1Show: false,
			submitModalShow: false,
			curId: '',
			contractCurPdf: '',
		};
	},
	onLoad(params) {
		if (params.id) {
			this.curId = params.id
			uni.setNavigationBarTitle({
				title: '编辑电子合同'
			})
			this.getData()
		} else {
			uni.setNavigationBarTitle({
				title: '添加电子合同'
			})
		}
	},
	// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
	onReady() {
		this.$refs.uForm.setRules(this.rules);
	},
	methods: {
		openinfo1Popoup () {
			this.info1Show = true
		},
		info1Change (e) {
			this.form.end_at = e.result || ''
		},
		linkWebView () {
			let params = {
				id: this.curId,
				url: this.contractCurPdf,
				tname: this.form.contract_name
			}
			uni.setStorageSync('MD_contractObj', params)
			uni.navigateTo({
				url: `/pages/user/contract/dtl?id=${this.curId}`
			})
		},
		getData () {
			uni.api.base.apicontractdetail({
				id: this.curId
			}).then(res => {
				// console.log(res)
				const cObj = res || {}
				if (cObj.id) {
					this.contractCurPdf = cObj.contract_pdf_pub
					let f = {
						contract_name: cObj.contract_name,
						start_at: cObj.start_at,
						end_at: cObj.end_at,
						contract_amount: cObj.contract_amount,
						contract_pdf: cObj.contract_pdf,
					}
					this.form = {...f}
					this.cObj = {...cObj}
				}
			})
		},

		delPdf () {
			this.form.contract_pdf = ''
		},

		// 上传 PDF 文件
		uploadPDF() {
			const that = this
			uni.showLoading({
				mask: true,
				title: '加载中..'
			})
			// 选择文件
			wx.chooseMessageFile({
				count: 1, // 一次只能选择一个文件
				type: 'file', // 文件类型
				success: (res) => {
					const filePath = res.tempFiles[0].path; // 获取文件路径
					const fileName = res.tempFiles[0].name; // 获取文件名
					// pathToBase64(filePath).then(hh => {
					// 	console.log(hh)
					// })
					console.log(filePath)
					// 上传文件
					let token = uni.getStorageSync('MD_token') || ''
					uni.uploadFile({
						url: uni.baseUrl + 'api/upload/cloudpiv',
						filePath,
						name: 'upload',
						formData: {
							'token': token
						},
						success: (f) => {
							const cData = JSON.parse(f.data)
							if (cData.errno === 0) {
								// console.log(cData.data)
								that.form.contract_pdf = cData.data ? cData.data.url : ''
								// console.log(that.form)
								// that.form.contract_pdf = cData.data ? cData.data.url : ''
								that.contractCurPdf = cData.data.pub_url
								uni.hideLoading()
							} else {
								uni.$msg(cData.errmsg || `未知错误-${cData.errno}`)
								uni.hideLoading()
							}
						},
						fail: (err) => {
							console.error('上传失败', err);
							// 处理上传失败后的逻辑
							uni.showToast({
								title: '上传失败',
								icon: 'none',
							});
							uni.hideLoading()
						},
					});
				},
				fail: (err) => {
					console.error('选择文件失败', err);
					uni.showToast({
						title: '选择文件失败'+ err.errMsg,
						icon: 'none',
					});
					uni.hideLoading()
				},
			});
		},


		submitHandle() {
			const that = this
			// if (this.form.group_type == 3) {
			// 	uni.$msg('请选择认证的角色')
			// 	return
			// }
			this.$refs.uForm.validate(valid => {
				if (valid) {
					let params = {
						...that.form
					}
					let apiStr = 'apicontractadd'
					if (this.curId) {
						params.id = this.curId
						apiStr = 'apicontractedit'
					}
					uni.api.base[apiStr](params).then(res => {
						uni.$msgConfirm('操作成功', () => {
							uni.reLaunch({
								url: '/pages/user/contract/list'
							})
						}, () => {
							uni.reLaunch({
								url: '/pages/user/contract/list'
							})
						})
					})
				}
			});
		},
		
		pageTo(path) {
			if (path === 'dev') {
				uni.$msg('开发中~')
				return
			}
			uni.navigateTo({
				url: path
			})
		},

		// 以下是工具函数
		// 格式化日期的月份或天数的显示（小于10，在前面增加0）
		getFormatDate(value) {
			if (value == undefined || value == '') {
				return '';
			}
			var str = value;
			if (parseInt(value) < 10) {
				str = '0' + value;
			}
			return str;
		}
	}
};
</script>
<style lang="scss">
.page {
	background-color: #ffffff;
}

.form {
	border-radius: 10rpx;
	padding: 0 40rpx;
}

.popup-body {
	.tips-title {
		font-size: $u-p;
		margin-bottom: 20rpx;
	}

	.tips-content {
		font-size: $u-p2;
		color: $u-tips-color;
		margin-bottom: 60rpx;
	}
}

.id_card {
	color: #606266;
	width: 100%;
	height: 350rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background-color: #f4f5f6;
	font-size: $u-p2;
	border-radius: 10rpx;

	image {
		border-radius: 10rpx;
	}
}

.footer {
	position: relative;
	text-align: center;
	font-size: $u-p2;
	left: 0;
	bottom: 20rpx;
	.agreement {
		color: $u-theme-color;
	}
}

.slot-content {
	font-size: 28rpx;
	color: $u-content-color;
	padding: 20rpx;
}

.warp {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 100%;
}







.scoped-more-img {
	padding-top: 30rpx;
	.si-op {
		display: inline-block;
		vertical-align: middle;
		width: 150rpx;
		height: 150rpx;
		margin-right: 30rpx;
		margin-bottom: 30rpx;
		position: relative;
		border: 1PX solid #f2f2f2;
		.img {
			width: 150rpx;
			height: 150rpx;
		}
		.i {
			position: absolute;
			top: -20rpx;
			right: -20rpx;
			width: 40rpx;
			height: 40rpx;
			z-index: 9;
		}
	}
}	
	
	
.scoped-input-floor {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: transparent;
	z-index: 9;
}	

</style>