xinelu-applet-ui/pagesB/mysigning/mysigning.vue

<template>
	<view class="app">
		<view class="title">
			<image src="../../static/pagesB/jibenxinxi.png" mode=""></image>
			<view class="text">
				基本信息
			</view>
		</view>
		<view class="name">
			<view class="text">
				{{list.residentName}}
			</view>
			<view class="card" v-for='item in list.crowdsName'>
				{{item}}
			</view>
		</view>
		<view class="item">
			{{list.gender=='2'?'女':''}}{{list.gender=='1'?'男':''}}&nbsp;&nbsp;&nbsp; 65岁
		</view>
		<view class="item">
			{{list.phone}}
		</view>
		<view class="item">
			{{list.identity}}
		</view>
		<view class="item">
			{{list.address}}
		</view>
		<view class="border">
		</view>
		<view class="title">
			<image src="../../static/pagesB/qianyuexinxi.png" mode=""></image>
			<view class="text">
				签约信息
			</view>
		</view>
		<view class="item">
			年限：{{list.signTime}}-{{list.signDeadline}}
		</view>
		<view class="item">
			机构：{{list.orgName}}
		</view>
		<view class="item flexitem">
			<view class="left">
				医生：{{list.userName}}
			</view>
			<view class="right" @tap="goseekadvicefrom">
				<image src="../../static/pagesB/zixun.png" mode=""></image>
				<text>
					咨询
				</text>
			</view>
		</view>
		<view class="lookbtn" @tap='gomyfamilydoctorteam'>
			查看我的家庭医生团队
		</view>
		<view class="border">
		</view>
		<view class="title">
			<image src="../../static/pagesB/wodefuwubao.png" mode=""></image>
			<view class="text">
				我的服务包
			</view>
		</view>
		<view class="item" v-for='item in list.packagesName'>
			{{item}}
		</view>
		<view class="lookbtn" @tap='goperformancedetails'>
			查看履约详情
		</view>
		<view class="border">
		</view>
		<view class="btns">
			<view class="leftbtn">
				申请解约
			</view>
			<view class="rightbtn" @tap='gocontractsigningprotocol'>
				查看签约协议
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: {},
			};
		},
		methods: {
			// 签约信息
			detailinfo(url1, url2) {
				detail(this.identity, this.region).then(res => {
					// detail('372424194703207523', '1').then(res => {
					if (res.code == 200) {
						uni.navigateTo({
							url: url2 + `?item=${JSON.stringify(res.data)}`
						})
					} else {
						this.$refs.uToast.show({
							title: '未签约，请先签约',
							type: 'error',
							duration: '1000',
							url: url1
						})
					}
				})
			},
			//我的家庭医生团队
			gomyfamilydoctorteam() {
				uni.navigateTo({
					url: '/pagesB/myfamilydoctorteam/myfamilydoctorteam'
				})
			},
			// 履约详情
			goperformancedetails() {
				uni.navigateTo({
					url: "/pagesB/performancedetails/performancedetails"
				})
			},
			//签约协议
			gocontractsigningprotocol() {
				uni.navigateTo({
					url: "/pagesB/contractsigningprotocol/contractsigningprotocol"
				})
			},
			//咨询
			goseekadvicefrom() {
				uni.navigateTo({
					url: `/pagesC/seekadvicefrom/seekadvicefrom?title=咨询医生`
				})
			},
		},
		onLoad(options) {
			this.list = JSON.parse(options.item)
			this.list.crowdsName = this.list.crowdsName.split(',')
			this.list.packagesName = this.list.packagesName.split(',')
		}
	}
</script>

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

	.app {
		width: 96%;
		margin: 20rpx auto;
		background-color: #fff;
		padding-bottom: 50rpx;
		font-size: 31rpx;

		.btns {
			width: 100%;
			display: flex;
			justify-content: space-evenly;
			padding-bottom: 100rpx;

			.leftbtn,
			.rightbtn {
				width: 290rpx;
				height: 62rpx;
				background: #FFFFFF;
				border: 1px solid #26A888;
				border-radius: 5rpx;
				text-align: center;
				font-weight: 500;
				color: #26A888;
				line-height: 62rpx;
			}

			.rightbtn {
				color: #fff;
				background: #26A888;
			}
		}

		.lookbtn {
			margin: 50rpx auto 0;
			width: 497rpx;
			height: 62rpx;
			background: #FFFFFF;
			border: 1px solid #26A888;
			border-radius: 5rpx;
			font-weight: 500;
			color: #26A888;
			text-align: center;
			line-height: 62rpx;
		}

		.border {
			width: 94%;
			height: 2rpx;
			margin: 60rpx auto 30rpx;
			background: #E6E6E6;
		}

		.item {
			width: 100%;
			padding: 30rpx 50rpx 0 50rpx;
			font-size: 30rpx;
			font-weight: 400;
			color: #333333;
			word-break: break-all;
		}

		.flexitem {
			display: flex;
			justify-content: space-between;

			.right {
				display: flex;
				align-items: flex-end;

				image {
					width: 30rpx;
					height: 30rpx;
				}

				text {
					padding-left: 10rpx;
				}
			}
		}

		.name {
			width: 100%;
			font-size: 38rpx;
			font-weight: 500;
			color: #333333;
			padding: 60rpx 50rpx 0 50rpx;
			display: flex;
			align-items: flex-end;

			.text {
				margin-right: 40rpx;
			}

			.card {
				font-size: 18rpx;
				font-weight: 400;
				color: #FFA115;
				padding: 0 15rpx;
				height: 35rpx;
				line-height: 35rpx;
				background: #FFFFFF;
				border: 1px solid #FFA115;
				border-radius: 5rpx;
				margin-right: 14rpx;
				text-align: center;
			}
		}

		.title {
			width: 100%;
			padding: 20rpx 0 0 30rpx;
			display: flex;
			align-items: flex-end;

			.text {
				font-size: 28rpx;
				font-weight: 500;
				color: #000000;
				padding-left: 20rpx;
			}

			image {
				width: 35rpx;
				height: 35rpx;
			}
		}
	}
</style>