xinelu-applet-ui/pagesC/protocol/protocol.vue

<template>
	<view class="app">
		<view class="agreement-title-box">
			家庭医生签约服务协议书
		</view>
		<view class="agreement-content-container">
			<view class="agreement-content_parta-box">
				<h4>甲方：</h4>
				<h4 class="box-line">{{list.orgName}}</h4>
			</view>
			<view class="agreement-content_parta-box">
				<h4>乙方：</h4>
				<h4 class="box-line">{{list.residentName}}</h4>
			</view>
			<scroll-view class="scroll-view" scroll-x="true">
				<view class="itemdata">
					<uni-table border stripe emptyText="暂无更多数据">
						<uni-tr>
							<uni-th>姓名</uni-th>
							<uni-th>性别</uni-th>
							<uni-th>年龄</uni-th>
							<uni-th>身份证号</uni-th>
							<uni-th>现住址</uni-th>
							<uni-th>手机号码</uni-th>
							<uni-th>选择签约基础服务包 </uni-th>
							<uni-th>选择签约个性服务包</uni-th>
						</uni-tr>
						<uni-tr>
							<uni-td>{{list.residentName}}</uni-td>
							<uni-td>{{Number(list.gender) === 1? '男' : '女'}}</uni-td>
							<uni-td>{{list.age?list.age:''}}</uni-td>
							<uni-td>{{list.identity?list.identity:''}}</uni-td>
							<uni-td>{{list.address?list.address:''}}</uni-td>
							<uni-td>{{list.phone?list.phone:''}}</uni-td>
							<uni-td>{{list.BasePackage?list.BasePackage:''}} </uni-td>
							<uni-td>{{list.PersonalityPack?list.PersonalityPack:''}}</uni-td>
						</uni-tr>
					</uni-table>
				</view>
			</scroll-view>
			<view>
				<p style='padding-top: 30rpx;line-height: 46rpx;'>甲乙双方本着平等、尊重和自愿的原则，签订此协议，接受以下条款的约定</p>
				<p style='padding: 30rpx 0;line-height: 46rpx;'>甲乙双方共同确定
					<text class="box-line">{{list.teamName}}</text>为乙方的家庭医生服务团队
				</p>
				<scroll-view class="scroll-view" scroll-x="true">
					<view class="itemdata">
						<uni-table border stripe emptyText="暂无更多数据">
							<uni-tr>
								<uni-th>家庭医生服务团队成员</uni-th>
								<uni-th>姓名</uni-th>
								<uni-th>职称</uni-th>
								<uni-th>固定电话</uni-th>
								<uni-th>联系电话</uni-th>
							</uni-tr>
							<uni-tr v-for="(member, index) in list.DoctorList" :index="index" :key="index">
								<uni-td v-if="member.teamLeader">
									团队长
								</uni-td>
								<uni-td v-else>
									{{member.teamMemberType=='0'?'全科医生':''}}
									{{member.teamMemberType=='1'?'专科医生':''}}
									{{member.teamMemberType=='2'?'社区护士':''}}
									{{member.teamMemberType=='3'?'公共卫生人员':''}}
								</uni-td>
								<uni-td>{{member.realname?member.realname:''}}</uni-td>
								<uni-td>
									{{member.profTitle=='0'?'初级':''}}
									{{member.profTitle=='1'?'中级':''}}
									{{member.profTitle=='2'?'高级':''}}
									{{member.profTitle=='99'?'其他':''}}
								</uni-td>
								<uni-td>{{member.landline?member.landline:''}}</uni-td>
								<uni-td>{{member.mobilePhone?member.mobilePhone:''}}</uni-td>
							</uni-tr>
						</uni-table>
					</view>
				</scroll-view>
				<u-parse style="margin-top: 30rpx;" :html="content"></u-parse>
				<h4 style='padding-top: 30rpx;font-weight: 600;'>三、服务收费</h4>
				<p style='padding-top: 30rpx;line-height: 46rpx;'>1. 根据自愿选择的原则，乙方选择<text
						class="box-line">{{list.BasePackage?list.BasePackage:''}}{{list.PersonalityPack?list.PersonalityPack:''}}</text>由甲方提供相应服务，服务费为<text
						class="box-line">{{list.packSignCost}}</text>元/年</p>
				<p style='padding-top: 30rpx;line-height: 46rpx;'>2.服务过程中，根据医生判断及患者临时需求增加的服务内容，按照国家相关规定和当地物价部门规定收费。
				</p>
				<p style='padding-top: 30rpx;line-height: 46rpx;'>3.乙方应于<text class="box-line">{{list.signTime}}</text>
					前将签约服务费缴纳至甲方机构指定科室，不得由签约团队成员代收。
				</p>
				<h4 style='padding-top: 30rpx;font-weight: 600;'>四、其他约定服务：<text class="box-line">{{' '}}</text></h4>
				<h4 style='padding-top: 30rpx;font-weight: 600;'>
					五、保密条款：签约居民授权其所签约的家庭医生及其团队成员可调阅其电子健康档案和在其他医疗机构的诊疗记录信息。甲方有义务对签约居民的电子健康档案和在其他医疗机构的诊
					疗记录信息予以保密。除法律法规规定外，未经签约居民允许，不得泄露给第三方。
				</h4>
				<h4 style='padding-top:30rpx;font-weight: 600;'>六、本协议未尽事宜，经双方协商一致，签订补充协议，补充协议具有同等效力。</h4>
				<h4 style='padding-top: 30rpx;font-weight: 600;'>
					七、本协议解释权归甲方。协议一式两份，甲、乙双方各执一份，自双方签字之日起生效，
					<text class="box-line">{{list.signTime}}{{' —— '}}{{list.signDeadline}}</text>有效期<text
						class="box-line">{{list.signYears}}</text>年
				</h4>
			</view>
		</view>
		<view class="agreement-execute_container-img">
			<view class="parta-execute_box">
				<view class="textparta">甲方(团队长)签字</br><text style="padding-left: 15rpx;">或(单位盖章)</text></view>
				<image :src="doctorBase64" mode="aspectFill" style="width: 280rpx; height: 200rpx;"></image>
			</view>
			<view class="parta-execute_box">
				<view class="textparta">乙方(居民)签字</br><text style="padding-left: 8rpx;">或拍照</text></view>
				<image :src="meimage" mode="widthFix" style="width: 180rpx; height: 180rpx;"></image>
			</view>
			<view class="parta-execute_box">
				<view class="textparta">机构公章</view>
				<image :src="orgBase64" mode="widthFix" style="width: 180rpx; height: 180rpx;"></image>
			</view>
		</view>
		<u-mask :show="signatureshow" @click="signatureshow = false">
			<view style="position:absolute;bottom:0;height:900rpx;width:100%;background-color: #fff;"
				v-if='signatureshow'>
				<signature @userSignaturePictureUrl='userSignaturePicture' @click.native.stop
					style='background-color: #F4F5F7;width: 100%;height: 900rpx;'></signature>
			</view>
		</u-mask>
		<uni-fab ref="fab" horizontal="left" vertical="bottom" :content="fabContent" @trigger="fabTrigger" />
	</view>
</template>

<script>
	import {
		getContent
	} from '@/api/pagesC/contractsigningprotocol/index.js'
	import baseurl from '@/api/baseurl.js'
	import signature from '../signature/signature.vue'
	import {
		getSignProtocol
	} from '@/api/pagesC/contractsigningprotocol/index.js'
	export default {
		name: "protocol",
		components: {
			signature
		},
		props: ["list"],
		data() {
			return {
				content: '',
				orgBase64: '',
				doctorBase64: '',
				meimage: '',
				signatureshow: false,
				fabContent: [{
					iconPath: require('@/pagesC/images/signature-unselected.png'),
					selectedIconPath: require('@/pagesC/images/signature-selected.png'),
					text: '居民签字',
					active: true
				}, {
					iconPath: require('@/pagesC/images/camera-unselected.png'),
					selectedIconPath: require('@/pagesC/images/camera.png'),
					text: '居民拍照',
					active: true
				}],
			};
		},
		created() {
			getContent(this.list.userNo, '1').then(res => {
				this.content = res.data.content
				this.orgBase64 = res.data.orgBase64
				this.doctorBase64 = res.data.doctorBase64
			})
		},
		methods: {
			fabTrigger(e) {
				if (e.index === 0) {
					this.signatureshow = true
				} else if (e.index === 1) {
					this.openCamera()
				}
			},
			openCamera() {
				let that = this
				that.meimage = ''
				uni.chooseImage({
					sizeType: ['compressed'],
					sourceType: ['camera'],
					success: function(res) {
						that.meimage = res.tempFilePaths[0]
						uni.saveImageToPhotosAlbum({
							filePath: that.meimage,
							success: (resp) => {
								uni.uploadFile({
									url: baseurl +
										'/applet/sign/apply/residentSignatureUpload',
									filePath: that.meimage,
									name: 'file',
									header: {
										region: uni.getStorageSync('region'),
									},
									timeout: 60000,
									success(respp) {
										that.signatureshow = false
										that.$emit('residentAutographPathlist', {
											residentAutographPath: JSON.parse(respp
												.data).imgUrl,
											image: that.meimage
										})
									}
								})
							}
						})
					}
				})
			},
			// //签名
			userSignaturePicture(data) {
				let that = this
				that.meimage = data
				uni.uploadFile({
					url: baseurl + '/applet/sign/apply/residentSignatureUpload',
					filePath: data,
					name: 'file',
					header: {
						region: uni.getStorageSync('region'),
					},
					timeout: 60000,
					success(res) {
						that.signatureshow = false
						that.$emit('residentAutographPathlist', {
							residentAutographPath: JSON.parse(res.data).imgUrl,
							image: data
						})
					}
				})
			},
		},
	}
</script>

<style lang="scss">
	.app {
		width: 98%;
		margin: 10rpx auto;
		background-color: #fff;
	}

	.scroll-view {
		width: 100%;
		white-space: nowrap; //scroll-view元素

		.itemdata {
			width: 105%;

			display: inline-block; //子元素
		}

	}


	.agreement-title-box {
		padding-top: 20rpx;
		margin: 0 0 30rpx;
		font-size: 40rpx;
		font-weight: 600;
		text-align: center;
	}

	.agreement-content-container {
		margin: 10rpx 10rpx;
		font-size: 16px;
		color: #333333;
		padding-bottom: 100rpx;
	}

	.agreement-content_parta-box {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: flex-start;
		margin-bottom: 20rpx;
	}

	.box-line {
		display: inline-block;
		padding: 0 20rpx;
		text-align: center;
		border-bottom: 1px #808080 solid;
	}

	.agreement-execute_container-img {
		display: flex;
		flex-wrap: wrap;
		padding-bottom: 200rpx;

		.parta-execute_box {
			width: 50%;

			.textparta {
				display: inline-block;
				width: 100%;
				text-align: center;
			}

			image {
				display: block;
				margin: 30rpx auto;
			}
		}
	}
</style>