newmyj/pages/modelData/modeltemplate/model_2.vue

<template>
	<view class="mone">
		<view class="m-top">
			<image :src="baseURL + '/resource/icon/model2/tli.png'" mode="" class="top-left-img"></image>
			<!-- <button type="default" class="top-btn fx-btn" v-if="isShare" open-type="share">
				<image :src="baseURL + '/resource/icon/model1/fx.png'" mode=""></image>
			</button> -->
			<view class="top-btn visit mvisit padding-r-10" v-if="isLook==1||isLook==2">
				浏览:{{shareNumber}}
			</view>
			
		</view>
		<view class="m-body ">
			<!-- 个人信息 -->
			<view class="hua3">
			<view class="hua2 ">
				<view class="m-card m-card-t "  >
					<!-- 用户名称 -->
					<view class="u-name">
						{{cardInfo.name || '暂无'}}
					</view>
					<!-- 编号 -->
					<view class="u-bh flex ">
						<image :src="baseURL + '/resource/icon/model2/bh.png'" mode=""></image>编号:{{cardInfo.no || "myj23031421"}}
					</view>
					<!-- 头像 -->
					<view class="user-img">
						<image :src="baseURL + '/resource/icon/model2/txk.png'" mode="" class="base-bg"></image>
						<image :src="cardInfo.avatar" mode=""  class="user-av"></image>
					</view>
					<!-- 职业 -->
					<view class="zy-wrap" v-if="cardInfo.user_work_type_title">
						<view class="zy">
							职业:{{cardInfo.user_work_type_title || '暂无'}}
						</view>
						
					</view>
					<view class="card-content card-content-t">
						<view class="user-info-t flex">
			
							<view class="info-item-b">
								年龄：{{cardInfo.age|| '暂无'}}
							</view>
							<view class="info-item-b">
								属相： {{cardInfo.twelve|| '暂无'}}
							</view>
							<view class="info-item-b">
								从业：{{(cardInfo.work_year + '年')|| '暂无'}}
							</view>
							<view class="info-item-b">
								星座：{{cardInfo.constellation.replace('座','') || '暂无'}}
							</view>
							<!-- <view class="info-item-b">
								职业： {{cardInfo.user_work_type_title || '暂无'}}
							</view> -->
							<view class="info-item-b">
								籍贯：{{cardInfo.ancestral_place || '暂无'}}
							</view>
							<view class="info-item-b">
								民族：{{cardInfo.minority || '暂无'}}
							</view>
							<view class="info-item-b">
								学历：{{cardInfo.education || '暂无'}}
							</view>
							<view class="info-item-b">
								服务次数：{{cardInfo.service_count || '0'}}
							</view>
						</view>
						<view class="user-info flex">
							<view class="info-item-q flex" style="align-items: flex-start;">
								<text style="flex-shrink: 0;">服务地区：</text>
								<view class="fwdz flex" v-if="cardInfo.is_china == 1">
									<view v-for="(fwitem,fwindex) in cardInfo.service_area_all">
										{{fwitem}}{{fwindex ==(cardInfo.service_area_all.length -1) ?'': '、'  }}
									</view>
								</view>
								<view class="fwdz flex" v-if="cardInfo.is_china == 0">
									<view>
										海外
									</view>
								</view>
							</view>
							<view class="info-item-q flex" style="align-items: flex-start;height: 110rpx;">
								<text style="flex-shrink: 0;">服务价格： </text>
								<view class="gzt">
									<image :src="baseURL + '/resource/icon/model2/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/icon/model1/yrz.png'" mode="" class="rz"
									v-if="cardInfo.is_type_audit == 1"></image>
							</view>
						</view>
					</view>
					<!-- <view class="" style="height: 40rpx;"></view> -->
			
				</view>
			</view>	
			</view>
			
			<!-- 自我评价 -->
			<view class="hua4">
				<view class="">
					<view class="m-card">
						<view class="card-tit flex">
							<image :src="baseURL + '/resource/icon/model2/zwpj.png'" mode="" class=""></image>
						</view>
						<view class="card-content">
							<rich-text :nodes="cardInfo.service_intro_content"></rich-text>
						</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">
					<view class="card-tit flex">
						<image :src="baseURL + '/resource/icon/model2/wdzs.png'" mode="" class=""></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">
					<view class="card-tit flex">
						<image :src="baseURL + '/resource/icon/model2/fwnr.png'" mode="" class=""></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="hua7" v-if="cardInfo.service_imgs && cardInfo.service_imgs.length > 0">
				<view class="hua8">
					<view class="m-card" >
						<view class="card-tit flex">
							<image :src="baseURL + '/resource/icon/model2/fwzp.png'" mode="" class=""></image>
						</view>
						<view class="img-list flex">
							<image :src="siitem" mode="" v-for="siitem in cardInfo.service_imgs"></image>
						</view>
					</view>
				</view>
			</view>
		</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/zlm.png',
					age: '48',
					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: '    从事母婴护理行业十多年了，做培训讲师8年多，热爱本职工作。长沙民政职业技术学院家政服务管理系毕业，中职教师资格证，高级育婴师，高级保育员，高级养老护理，syb创业培训讲师，并进入湖南省家政服务专家师资库，蒙氏早教高级教师，高级催乳师，高级产后恢复师等。',
					service_intro_imgs: ['https://api.myjie.cn/resource/user/user2/zwpj1.png',
						'https://api.myjie.cn/resource/user/user2/zwpj2.png',
						'https://api.myjie.cn/resource/user/user2/zwpj3.png',
						'https://api.myjie.cn/resource/user/user2/zwpj4.png',
						'https://api.myjie.cn/resource/user/user2/zwpj5.png',
						'https://api.myjie.cn/resource/user/user2/zwpj6.png'
					],
					service_audit_imgs: ['https://api.myjie.cn/resource/user/user2/zs1.png',
						'https://api.myjie.cn/resource/user/user2/zs2.png',
						'https://api.myjie.cn/resource/user/user2/zs3.png',
						'https://api.myjie.cn/resource/user/user2/zs4.png',
						'https://api.myjie.cn/resource/user/user2/zs5.png',
						'https://api.myjie.cn/resource/user/user2/zs6.png'
					],
					service_project_ar: [{
							title: '婴幼儿睡眠管理',
							content: '如：日夜颠倒、睡眠不规律、乳头混淆、奶睡、抱睡等问题，帮助宝爸宝妈规律孩子作息、解决婴幼儿喂养困扰，培养良好的生活、学习习惯。'
						}, {
							title: '特色月子餐',
							content: '套用客户的一句话“养眼、养心更养胃”！家常菜、面食、点心、甜品、靓汤、五谷杂粮粥、婴幼儿花样辅食等。'
						},
						{
							title: '早产儿特殊护理',
							content: '包括早产儿基础护理、安全喂养方法、追赶性生长、消化与免疫系统等技能，根据宝宝具体情况给予早产儿家长的科学入户指导。'
						},
						{
							title: '0-6岁早期教育',
							content: '在婴孩最敏感最能接受的时期进行事半功倍的适时教育，针对不同年龄段的孩子，开发婴幼儿潜能的教育，为孩子多元化和健康人格打下良好基础。'
						}
					],
					service_imgs: [
						'https://api.myjie.cn/resource/user/user2/fw1.png',
						'https://api.myjie.cn/resource/user/user2/fw2.png',
						'https://api.myjie.cn/resource/user/user2/fw3.png',
						'https://api.myjie.cn/resource/user/user2/fw4.png',
						'https://api.myjie.cn/resource/user/user2/fw5.png',
						'https://api.myjie.cn/resource/user/user2/fw6.png',
						'https://api.myjie.cn/resource/user/user2/fw7.png',
						'https://api.myjie.cn/resource/user/user2/fw8.png'
					],
					is_type_audit: 1,
					service_count: 0,
					is_china: 1
				}
			}
		},
		computed: {
			...mapState(['baseURL']),
			cardInfo() {
				console.log("进入");
				if (this.isDefault) {
					return this.defaults
				} else {
					return this.templateDetail
				}
			}
		},
	}
</script>

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

		.m-top {
			width: 750rpx;
			position: relative;
			width: 750rpx;
			height: 150rpx;
			background-color: #fffbed;
			.top-left-img {
				position: absolute;
				top: 0;
				left: 0;
				width: 280rpx;
				height: 248rpx;
			}
			.top-bg {
				position: relative;
				width: 750rpx;
				height: 370rpx;
			}

			.readme {
				width: 534rpx;
				height: 83rpx;
				position: absolute;
				top: 172rpx;
				left: 0;
				right: 0;
				margin: auto;
			}

			.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: 750rpx;
		margin: auto;
		margin-top: 20rpx;

		padding: 45rpx 0;
	}

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

		padding-left: 20rpx;
		&::before {
			display: inline-block;
			content: '';
			width: 15rpx;
			height: 15rpx;
			background: linear-gradient(225deg, #FE9E32, #FDE37D);
			border-radius: 50%;
			position: absolute;
			top: 22rpx;
			left: 0;
		}

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

		.laner {
			width: 0.5em;
			display: inline-block;
		}
	}
	.m-card-t {
		border: none !important;
		background: transparent !important;
	}
	.m-card {
		width: 640rpx;
		background: rgba(255, 255, 255, 0.6);
		border-radius: 20rpx;
		position: relative;
		// min-height: 270rpx;
		border: 4px solid #fff;
		margin: 0 auto 46rpx;
		.user-img {
			position: absolute;
			right: -20rpx;
			top: -49rpx;
			width: 318rpx;
			height: 366rpx;
			.base-bg {
				width: 100%;
				height: 100%;
			}
			.user-av {
				width: 272rpx;
				height: 272rpx;
				position: absolute;
				bottom: 17rpx;
				left: 12rpx;
			}
		}
		.zy-wrap {
			position: absolute;
			right: 0;
			top: 330rpx;
			width: 300rpx;
			// background-color: #fea540;
			display: flex;
			justify-content: center;
			font-size: 26rpx;
			.zy {
				display: inline-block;
				margin: auto;
				border: 1px solid #fea540;
				border-radius: 10rpx;
				padding: 8rpx 16rpx;
				color: #fea540;
				margin: auto;
			}
			
		}
		.card-tit {
			justify-content: center;
			padding-top: 55rpx;
			position: relative;
			padding-bottom: 30rpx;
			&::after {
				content: '';
				width: 60rpx;
				height: 10rpx;
				background: #FE9E32;
				border-radius: 5rpx;
				position: absolute;
				bottom: 10rpx;
				left: 0;
				right: 0;
				margin: auto;
			}

			image {
				width: 213rpx;
				height: 47rpx;
			}
		}

		.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;
		}
		.card-content-t {
			padding: 0;
		}

		.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: #FE9E32;
				display: flex;
				align-items: center;

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

			.fw-content {
				padding-top: 10rpx;
				padding-left: 18rpx;
				text-align: justify;
				word-wrap: break-word;
				white-space: pre-line;
			}

		}


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



		.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;
						border: 14rpx solid;
						border-color: transparent transparent #FE9E32;
						position: absolute;
						top: -14rpx;
						left: 0;
						right: 0;
						margin: auto;
					}

					text {
						color:#FE9E32;
					}
				}

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

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

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

		&::before {
			content: '';
			width: 370rpx;
			height: 629rpx;
			border-radius: 20rpx 314rpx 315rpx 20rpx;
			background: radial-gradient(ellipse at 0 50%, #e0f2f8,#f8f9ef, transparent);
			// background: url($base-url + '/resource/icon/model1/hua2.png') no-repeat;
			position: absolute;
			bottom: -315rpx;
			left: 0;
			background-size: 100% 100%;
		}
	}

	.hua3 {
		position: relative;

		&::before {
			content: '';
			width: 360rpx;
			height: 629rpx;
			background: radial-gradient(ellipse at 100% 50%, #FFE4E9,#fff4f5, transparent);
			position: absolute;
			bottom: -400rpx;
			right: 0;
			margin: auto;
			background-size: 100% 100%;
		}
	}

	.hua4 {
		position: relative;

		&::before {
			content: '';
			width: 272rpx;
			height: 621rpx;
			background: radial-gradient(ellipse at 100% 50%, #e0f2f8,#f8f9ef, transparent);
			position: absolute;
			bottom: -310rpx;
			right: 0;
			background-size: 100% 100%;
		}
	}

	.hua5 {
		position: relative;

		&::before {
			content: '';
			width: 199rpx;
			height: 298rpx;
			background: radial-gradient(ellipse at 100% 50%, #FFE4E9,#fff4f5, transparent);
			position: absolute;
			bottom: -100rpx;
			left: 0;
			background-size: 100% 100%;
			transform: rotateY(180deg);
		}
	}

	.hua6 {
		position: relative;

		&::before {
			content: '';
			width: 313rpx;
			height: 629rpx;
			position: absolute;
			background: radial-gradient(ellipse at 0 50%, #FFE4E9,#fff4f5, transparent);
			bottom: -315rpx;
			right: 0;
			background-size: 100% 100%;
			transform: rotateY(180deg);
		}
	}
	.hua7 {
		position: relative;
		&::before {
			content: '';
			width: 344rpx;
			height: 286rpx;
			position: absolute;
			background: url($base-url + '/resource/icon/model2/hua8.png') no-repeat;
			bottom: -143rpx;
			right: 0;
			background-size: 100% 100%;
		}
	}
	.hua8 {
		position: relative;
		&::before {
			content: '';
			width: 367rpx;
			height: 372rpx;
			position: absolute;
			border-radius: 20rpx 150rpx 150rpx 20rpx;
			background: radial-gradient(ellipse at 0% 50%, #FFE4E9,#fff7f2, transparent);
			bottom: -143rpx;
			left: 0;
			background-size: 100% 100%;
		}
	}
	.u-name {
		font-size: 73rpx;
		font-weight: 400;
		color: #202E4F;
	}
	.u-bh {
		justify-content: flex-start;
		image {
			width: 26rpx;
			height: 26rpx;
			margin-right: 10rpx;
		}
		font-size: 28rpx;
		font-weight: bold;
		color: #202e4f;
		
	}
</style>