hb/pages/modelData/modeltemplate/model_1.vue

<template>
	<view class="mone">
		<view class="m-top">
			<view class="top-user flex">
				<image :src="cardInfo.avatar" mode="" class="user-logo"></image>
			</view>
			<view class="user-name">
				{{cardInfo.name || '暂无'}}
			</view>
			<view class="u-zy">
				<view class="">
					职业:{{cardInfo.user_work_type_title || '暂无'}}
				</view>
			</view>
			<!-- <button type="default" class="top-btn fx-btn" v-if="isShare" open-type="share">
				<image :src="baseURL + '/resource/model/model1/fx.png'" mode=""></image>
			</button> -->
			<view class="top-btn visit mvisit padding-r-10" v-if="isLook==1||isLook==2">
				浏览:{{shareNumber}}
			</view>
			<image :src="baseURL + '/resource/model/model1/hua7.png'" mode="" class="top-bg"></image>
			
		</view>
		<view class="m-body gr">
			<!-- 个人信息 -->
			<view class="hua2">
				<view class="m-card">
					<image :src="baseURL + '/resource/model/model1/card-bg.png'" mode="" class="card-bg"></image>
					<view class=" flex">
						<view class="card-tit flex" style="flex-shrink: 0;">
							<image :src="baseURL + '/resource/model/model1/m1.png'" mode="" class="tit-logo"></image>个人信息
						</view>
						<view class="u-bh flex">
							<image :src="baseURL + '/resource/model/model1/bh.png'" mode=""></image>编号:{{cardInfo.no|| "未申请"}}
						</view>
					</view>
					
					<view class="card-content">

						<view class="user-info flex">
							<view class="info-item-b">
								年<text class="qianger"></text>龄： {{cardInfo.age|| '暂无'}}
							</view>
							<view class="info-item-b">
								属<text class="qianger"></text>相： {{cardInfo.twelve|| '暂无'}}
							</view>
							<view class="info-item-b">
								从<text class="qianger"></text>业： {{(cardInfo.work_year + '年')|| '暂无'}}
							</view>
							<view class="info-item-b">
								星<text class="qianger"></text>座： {{cardInfo.constellation || '暂无'}}
							</view>
							<!-- <view class="info-item-b">
								职<text class="qianger"></text>业： {{cardInfo.user_work_type_title || '暂无'}}
							</view> -->
							<view class="info-item-b">
								籍<text class="qianger"></text>贯： {{cardInfo.ancestral_place || '暂无'}}
							</view>
							<view class="info-item-b">
								民<text class="qianger"></text>族： {{cardInfo.minority || '暂无'}}
							</view>
							<view class="info-item-b">
								学<text class="qianger"></text>历： {{cardInfo.education || '暂无'}}
							</view>
							<!-- <view class="info-item-b">
								综 <text class="laner"></text> 合<text class="laner"></text>分： 50
							</view> -->
							<view class="info-item-q flex" style="align-items: flex-start;">
								<text style="flex-shrink: 0;">服务地区：</text>
								<view class="fwdz flex">
									<view v-for="(fwitem,fwindex) in cardInfo.service_area_all">
										{{fwitem}}{{fwindex ==(cardInfo.service_area_all.length -1) ?'': '、'  }}
									</view>
								</view>
							</view>
							<view class="info-item-q flex" style="align-items: flex-start;">
								<text style="flex-shrink: 0;">服务价格： </text>
								<view class="gzt">
									<image :src="baseURL + '/resource/model/model1/tiao.png'" mode=""></image>
									<view class="gzt-price">
										<text>{{cardInfo.service_min_price}}</text>元/{{ cardInfo.service_time_type_title && cardInfo.service_time_type_title.replace('每','')}}
									</view>
									<view class=" gzt-price-b">
										<text>{{cardInfo.service_max_price}}</text>元/{{cardInfo.service_time_type_title && cardInfo.service_time_type_title.replace('每','')}}
									</view>
								</view>
								<image :src="baseURL + '/resource/model/model1/yrz.png'" mode="" class="rz"
									v-if="cardInfo.is_type_audit == 1"></image>
							</view>
						</view>
					</view>
					<view class="" style="height: 80rpx;"></view>

				</view>
			</view>
			<!-- 自我评价 -->
			<view class="hua4">
				<view class="hua3">
					<view class="m-card">
						<image :src="baseURL + '/resource/model/model1/card-bg.png'" mode="" class="card-bg"></image>
						<view class="card-tit flex">
							<image :src="baseURL + '/resource/model/model1/m2.png'" mode="" class="tit-logo"></image>自我展示
						</view>
						<view class="card-content">
							{{cardInfo.service_intro_content}}
						</view>
						<view class="img-list flex" style="padding-top: 0;">
							<image :src="siiitem" mode="" v-for="siiitem in cardInfo.service_intro_imgs"></image>
						</view>
					</view>
				</view>
			</view>
			<!-- 我的证书 -->
			<view class="hua5" v-if="cardInfo.service_audit_imgs && cardInfo.service_audit_imgs.length > 0">
				<view class="m-card">
					<image :src="baseURL + '/resource/model/model1/card-bg.png'" mode="" class="card-bg"></image>
					<view class="card-tit flex">
						<image :src="baseURL + '/resource/model/model1/m3.png'" mode="" class="tit-logo"></image>我的证书
					</view>
					<view class="img-list flex">
						<image :src="saiitem" mode="" v-for="saiitem in cardInfo.service_audit_imgs"></image>
					</view>
				</view>
			</view>
			<!-- 服务内容 -->
			<view class="hua6">
				<view class="m-card">
					<image :src="baseURL + '/resource/model/model1/card-bg.png'" mode="" class="card-bg"></image>
					<view class="card-tit flex">
						<image :src="baseURL + '/resource/model/model1/m4.png'" mode="" class="tit-logo"></image>服务内容
					</view>
					<view class="card-content">
						<view class="fw" v-for="spaitem in cardInfo.service_project_ar">
							<view class="fw-tit">
								<text class="yg"></text>{{spaitem.title}}
							</view>
							<view class="fw-content">
								{{spaitem.content}}
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 服务照片 -->
			<view class="m-card" v-if="cardInfo.service_imgs && cardInfo.service_imgs.length > 0">
				<image :src="baseURL + '/resource/model/model1/card-bg.png'" mode="" class="card-bg"></image>
				<view class="card-tit flex">
					<image :src="baseURL + '/resource/model/model1/m5.png'" mode="" class="tit-logo"></image>服务照片
				</view>
				<view class="img-list flex">
					<image :src="siitem" mode="" v-for="siitem in cardInfo.service_imgs"></image>
				</view>
			</view>
			<!-- 底部图片 -->
			<image :src="baseURL + '/resource/model/model1/m-btm.png'" mode="" class="m-btm"></image>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
	} from 'vuex';
	export default {
		props: {
			// 浏览数量
			shareNumber: {
				type: Number,
				default:0
			},
			// 是否显示默认数据
			isDefault: {
				type: Boolean,
				default: true
			},
			isShare: {
				type: Boolean,
				default: false
			},
			//1为模板2为用户
			isLook: {
				type: Number,
				default: 0
			},
			templateDetail: {
				type: Object,
				default: () => {
					return {}
				}
			},
		},
		data() {
			return {
				defaults: {
					user_work_type_title: '母婴护理师',
					name: '詹继红',
					avatar: 'https://api.myjie.cn/resource/user/user1/zjh.png',
					age: '49',
					twelve: '牛',
					work_year: '10',
					constellation: '巨蟹座',
					ancestral_place: '湖北',
					minority: '汉族',
					education: '大学',
					service_area_all: ['上海市'],
					service_min_price: 16800,
					service_max_price: 19800,
					service_time_type_title: '每月',
					service_intro_content: '高级育婴师证|高级催乳师证|早产儿护理师母婴护理证|金牌月嫂证|产后恢复师证|公共营养师证|月子药膳调理师证|国际宝宝睡眠咨询师证|普通话二级甲等|中央广播电视大学学历|学前教育专业，深耕幼教十年，技能全面，性格活泼，有亲和力，做事干净利落，有很强的责任心。对宝宝有爱心，体贴新手妈妈。专业技能熟练。应急能力强。让家人放心、产妇舒心的坐好月子。',
					service_intro_imgs: ['https://api.myjie.cn/resource/user/user1/pj1.png',
						'https://api.myjie.cn/resource/user/user1/pj2.png',
						'https://api.myjie.cn/resource/user/user1/pj3.png',
						'https://api.myjie.cn/resource/user/user1/pj4.png'
					],
					service_audit_imgs: ['https://api.myjie.cn/resource/user/user1/zs1.png',
						'https://api.myjie.cn/resource/user/user1/zs2.png',
						'https://api.myjie.cn/resource/user/user1/zs3.png',
						'https://api.myjie.cn/resource/user/user1/zs4.png'
					],
					service_project_ar: [{
							title: '婴幼儿睡眠管理',
							content: '如：日夜颠倒、睡眠不规律、乳头混淆、奶睡、抱睡等问题，帮助宝爸宝妈规律孩子作息、解决婴幼儿喂养困扰，培养良好的生活、学习习惯。'
						}, {
							title: '特色月子餐',
							content: '套用客户的一句话“养眼、养心更养胃”！家常菜、面食、点心、甜品、靓汤、五谷杂粮粥、婴幼儿花样辅食等。'
						},
						{
							title: '早产儿特殊护理',
							content: '包括早产儿基础护理、安全喂养方法、追赶性生长、消化与免疫系统等技能，根据宝宝具体情况给予早产儿家长的科学入户指导。'
						},
						{
							title: '0-6岁早期教育',
							content: '在婴孩最敏感最能接受的时期进行事半功倍的适时教育，针对不同年龄段的孩子，开发婴幼儿潜能的教育，为孩子多元化和健康人格打下良好基础。'
						}
					],
					service_imgs: [
						'https://api.myjie.cn/resource/user/user1/fw1.png',
						'https://api.myjie.cn/resource/user/user1/fw2.png',
						'https://api.myjie.cn/resource/user/user1/fw3.png',
						'https://api.myjie.cn/resource/user/user1/fw4.png'
					],
					is_type_audit: 1
				}
			}
		},
		computed: {
			...mapState(['baseURL']),
			cardInfo() {
				if (this.isDefault) {
					return this.defaults
				} else {
					return this.templateDetail
				}
			}
		},
	}
</script>

<style lang="scss" scoped>
	.mone {
		background-color: #f8e1df;
		padding-bottom: 30rpx;

		.m-top {
			width: 750rpx;
			position: relative;
			width: 750rpx;
			height: 450rpx;

			.top-bg {
				position: absolute;
				width: 207rpx;
				height: 123rpx;
				bottom: 11rpx;
				left:32rpx;
			}

			.readme {
				width: 534rpx;
				height: 83rpx;
				position: absolute;
				top: 172rpx;
				left: 0;
				right: 0;
				margin: auto;
			}
			.u-zy {
				position: absolute;
				top: 375rpx;
				left: 0;
				right: 0;
				margin: auto;
				display: flex;
				justify-content: center;
				view {
					display: inline-block;
					padding: 8rpx 8rpx 8rpx 16rpx;
					border: 1px solid #F46C85;
					border-radius: 10rpx;
					font-size: 26rpx;
					font-weight: 500;
					color: #F46C85;
				}
			}
			.top-user {
				width: 222rpx;
				height: 222rpx;
				background: #FEFEFE;
				box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(50, 50, 52, 0.06);
				border-radius: 50%;
				position: absolute;
				left: 0;
				right: 0;
				top: 80rpx;
				justify-content: center;
				align-items: center;
				margin: auto;

				.user-logo {
					width: 200rpx;
					height: 200rpx;
					border-radius: 50%;
					background-color: #fff;
				}

				.gp {
					width: 133rpx;
					height: 38rpx;
					position: absolute;
					bottom: 0;
					left: 0;
					right: 0;
					margin: auto;
				}
			}

			.user-name {
				width: 750rpx;
				font-size: 38rpx;
				font-weight: bold;
				color: #000000;
				text-align: center;
				position: absolute;
				top: 318rpx;
			}

			.fx-btn {

				padding: 0;

				&::after {
					border: none;
				}




				border-radius: 24rpx 0 0 24rpx;

				image {
					width: 150rpx;
					height: 48rpx;
					display: block;
				}
			}

			.top-btn {
				height: 48rpx;
				position: absolute;
				right: 0;
				top: 70rpx;
				line-height: 48rpx;
				font-size: 24rpx;
			}

			.visit {
				border-radius: 24rpx 0 0 24rpx;
				top: 130rpx;
				border: 1px solid #f65486;
				color: #f65486;
				padding-left: 24rpx;
			}

			.mvisit {
				top: 70rpx;
			}
		}
	}

	.m-body {

		width: 705rpx;
		margin: auto;
		margin-top: 20rpx;
		background-color: #fff;
		border-left: 8rpx solid #efa0ab;
		border-right: 8rpx solid #efa0ab;
		padding: 45rpx 0;
	}

	.gr {
		position: relative;

		&::before {
			content: '';
			position: absolute;
			// left: 75px;
			right: 0;
			top: -30rpx;
			width: 120px;
			height: 174px;
			background: url($base-url + '/resource/model/model1/hua1.png') no-repeat;
			background-size: 100% 100%;
		}
	}

	.m-card {
		width: 640rpx;
		background: #fcf4f1;
		border-radius: 20rpx;
		position: relative;
		// min-height: 270rpx;
		margin: 0 auto 46rpx;

		.card-tit {
			width: 219rpx;
			height: 57rpx;
			background: #F46C85;
			border-radius: 20rpx 28rpx 29rpx 0rpx;
			justify-content: flex-start;
			align-items: center;
			padding: 0 20rpx;
			font-size: 32rpx;
			font-weight: bold;
			color: #FFFFFF;

			.tit-logo {
				width: 32rpx;
				height: 32rpx;
				margin-right: 18rpx;
			}
		}

		.card-bg {
			width: 100%;
			height: 270rpx;
			position: absolute;
			bottom: 0rpx;
		}

		.card-content {
			padding: 25rpx 35rpx;
			font-size: 26rpx;
			font-weight: 500;
			color: #2C2E35;
			position: relative;
		}

		.img-list {
			justify-content: space-between;
			flex-wrap: wrap;
			margin: auto;
			padding: 30rpx 30rpx 0;
			position: relative;

			image {
				width: 270rpx;
				height: 270rpx;
				background-color: #fff;
				margin-bottom: 30rpx;
				box-shadow: 0px 0px 20rpx 0px rgba(50, 50, 52, 0.6);
			}


		}

		.fw {
			font-size: 26rpx;
			font-weight: 500;
			color: #2C2E35;
			padding: 10rpx 0;

			.fw-tit {
				color: #F46C85;
				display: flex;
				align-items: center;

				.yg {
					background-color: #F46C85;
					display: inline-block;
					width: 10rpx;
					height: 10rpx;
					border-radius: 50%;
					margin-right: 10rpx;
				}
			}

			.fw-content {
				padding-top: 10rpx;
				padding-left: 18rpx;
				text-align: justify;
			}

		}

		.user-info {
			flex-wrap: wrap;
			font-size: 26rpx;
			font-weight: 500;
			color: #000000;
			position: relative;

			.info-item-b,
			.info-item-q {
				padding: 10rpx 0;
				color: #000000;
				position: relative;

				padding-left: 20rpx;

				&::before {
					display: inline-block;
					content: '';
					width: 10rpx;
					height: 10rpx;
					border-radius: 50%;
					background-color: #F46C85;
					position: absolute;
					top: 22rpx;
					left: 0;
				}

				.qianger {
					width: 2em;
					display: inline-block;
				}

				.laner {
					width: 0.5em;
					display: inline-block;
				}
			}

			.info-item-b {
				width: 50%;
			}

			.info-item-q {
				width: 100%;
				display: flex;
				align-items: flex-start;
				justify-content: start;

				.fwdz {
					flex-direction: column;
					align-items: flex-start;
				}

				.gzt {
					width: 312rpx;
					height: 24rpx;
					padding-top: 10rpx;
					position: relative;

					image {
						width: 312rpx;
						height: 24rpx;
						position: relative;
					}

					.gzt-price,
					.gzt-price-b {
						width: 200rpx;
						text-align: center;
						position: absolute;
						padding-top: 20rpx;

						&::after {
							content: '';
							width: 0px;
							height: 0rpx;
							// background: #FEB8C6;
							border: 14rpx solid;
							border-color: transparent transparent #FEB8C6;
							// border-top:transparent;
							// border-left: transparent;
							// border-right: transparent;
							position: absolute;
							top: -14rpx;
							left: 0;
							right: 0;
							margin: auto;
						}

						text {
							color: #F46C85;
						}
					}

					.gzt-price {
						left: -100rpx;
					}

					.gzt-price-b {
						right: -100rpx;
					}
				}

				.rz {
					margin-top: 10rpx;
					margin-left: 10rpx;
					width: 87rpx;
					height: 26rpx;
				}
			}
		}
	}

	.m-btm {
		width: 660rpx;
		height: 384rpx;
	}

	.hua2 {
		position: relative;

		&::before {
			content: '';
			width: 199rpx;
			height: 298rpx;
			background: url($base-url + '/resource/model/model1/hua2.png') no-repeat;
			position: absolute;
			bottom: -100rpx;
			right: 0;
			background-size: 100% 100%;
		}
	}

	.hua3 {
		position: relative;

		&::before {
			content: '';
			width: 192rpx;
			height: 223rpx;
			background: url($base-url + '/resource/model/model1/hua3.png') no-repeat;
			position: absolute;
			top: 0;
			bottom: 0;
			left: 0;
			margin: auto;
			background-size: 100% 100%;
		}
	}

	.hua4 {
		position: relative;

		&::before {
			content: '';
			width: 128rpx;
			height: 145rpx;
			background: url($base-url + '/resource/model/model1/hua4.png') no-repeat;
			position: absolute;
			bottom: -70rpx;
			right: 0;
			background-size: 100% 100%;
		}
	}

	.hua5 {
		position: relative;

		&::before {
			content: '';
			width: 199rpx;
			height: 298rpx;
			background: url($base-url + '/resource/model/model1/hua2.png') no-repeat;
			position: absolute;
			bottom: -100rpx;
			left: 0;
			background-size: 100% 100%;
			transform: rotateY(180deg);
		}
	}

	.hua6 {
		position: relative;

		&::before {
			content: '';
			width: 192rpx;
			height: 223rpx;
			background: url($base-url + '/resource/model/model1/hua3.png') no-repeat;
			position: absolute;
			bottom: -110rpx;
			right: 0;
			background-size: 100% 100%;
			transform: rotateY(180deg);
		}
	}
	.u-bh {
		justify-content: flex-start;
		padding-right: 10rpx;
		image {
			width: 26rpx;
			height: 26rpx;
			margin-right: 10rpx;
		}
		font-size: 28rpx;
		font-weight: bold;
		color: #F46C85;
		
	}
</style>