newmyj/pages/modelData/modeltemplate/model_5.vue

<template>
	<view class="mone">
		<view class="topBox">

			<image :src="`${baseURL}/resource/user/user5/text3.png`" mode="scaleToFill" class="leftTipImg">
			</image>
			<view class="nameBox">
				<text class="username">{{cardInfo.name || '暂无'}}</text>
			</view>
			<image :src="cardInfo.avatar" mode="scaleToFill" class="avatar"></image>
			<view class="noBox">
				<text class="noText">执</text>
				<text class="noText">业</text>
				<text class="noText">编</text>
				<text class="noText">编</text>
				<text class="noText">：</text>
				<text class="noText trText" v-for="ls in no">{{ls}}</text>
			</view>
			<image :src="`${baseURL}/resource/user/user5/img1.png`" mode="scaleToFill" class="topBottomImg"></image>
		</view>
		<view class="contentBox">
			<view class="titleImg">
				<image class="titleImg1" :src="`${baseURL}/resource/user/user5/text4.png`" mode="scaleToFill"></image>
			</view>
			<view class="content">
				<view class="userName">
					<text class="list-item">姓名： {{cardInfo.name||'暂无'}}</text>
				</view>
				<view class="center-data flex">
					<view class="item">
						<text class="list-item">
							籍贯： {{cardInfo.ancestral_place|| '暂无'}}
						</text>
						<text class="list-item">
							民族： {{cardInfo.minority || '暂无'}}
						</text>
						<text class="list-item">
							学历： {{cardInfo.education || '暂无'}}
						</text>
						<text class="list-item">
							年龄： {{cardInfo.age || '暂无'}}
						</text>
						<text class="list-item">
							星座： {{cardInfo.constellation || '暂无'}}
						</text>
					</view>
					<view class="item">
						<text class="list-item">
							身高：{{cardInfo.height*1+'厘米'|| '暂无'}}
						</text>
						<text class="list-item">
							体重：{{cardInfo.weight*1+'kg' || '暂无'}}
						</text>
						<text class="list-item">
							属相： {{cardInfo.twelve || '暂无'}}
						</text>
						<text class="list-item">
							服务年限： {{(cardInfo.work_year + '年') || '0'}}
						</text>
						<text class="list-item">
							服务次数： {{cardInfo.service_count || '0'}}
						</text>
					</view>
				</view>
			</view>
			<view class="position-relative">
				<view class="typeTitleImg flex-center">
					<image :src="`${baseURL}/resource/user/user5/text1.png`" mode="scaleToFill" class="typeImage">
					</image>
				</view>
				<view class="flex-center padding-v-20 padding-c-20">
					<view class="areaList" v-if="cardInfo.is_china == 1">
						<text  class="blue-text" :key='fwindex' v-for="(fwitem,fwindex) in cardInfo.service_area_all">
							{{fwitem}}{{fwindex ==(cardInfo.service_area_all.length -1) ?'': ''  }}
						</text>
					</view>
					<text  class="blue-text" v-if="cardInfo.is_china == 0">
						海外
					</text>
					<text class="blue-text" v-if="cardInfo.is_china == 2">
						全国
					</text>
				</view>
				<view class="typeTitleImg flex-center">
					<image :src="`${baseURL}/resource/user/user5/text2.png`" mode="scaleToFill" class="typeImage">
					</image>
				</view>
				<view class="flex-center  padding-v-20 padding-c-20">
					<text class="blue-text">
						{{cardInfo.service_min_price}}元/{{ cardInfo.service_time_type_title && cardInfo.service_time_type_title.replace('每','')}}——{{cardInfo.service_max_price}}元/{{cardInfo.service_time_type_title && cardInfo.service_time_type_title.replace('每','')}}	
					</text>
				</view>
				<image :src="`${baseURL}/resource/user/user5/img2.png`" mode="scaleToFill" class="typeLeftLogo"></image>
			</view>
		</view>
		<view class="footerBox">
			<image :src="`${baseURL}/resource/user/user5/text5.png`" mode="scaleToFill" class="footerTitle"></image>
			<view class="text margin-t-20">
				<rich-text class="richtext" :nodes="cardInfo.service_intro_content"></rich-text>
			</view>
		</view>
		<view class="imageList">
			<image v-for="ls in cardInfo.service_intro_imgs" :src="ls" mode="scaleToFill" class="imageItem"></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/user5/model5.png',
					age: '50',
					twelve: '牛',
					work_year: '16',
					constellation: '巨蟹座',
					ancestral_place: '黑龙江',
					minority: '汉族',
					education: '大专',
					service_area_all: ['全国'],
					service_min_price: 29800,
					service_max_price: 49800,
					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,
					service_count: 121,
					is_china: 2
				}
			}
		},
		computed: {
			...mapState(['baseURL']),
			cardInfo() {
				if (this.isDefault) {
					return this.defaults
				} else {
					return this.templateDetail
				}
			},
			no() {
				const ar = this.cardInfo.no.split('');
				console.log(ar, 'ar')
				if (ar.length > 0) {
					return ar
				} else {
					return []
				}
			}
		},
	}
</script>

<style lang="scss" scoped>
	.mone {
		background-image: url('https://api.myjie.cn/resource/user/user5/bg1.png');
		background-repeat: no-repeat;
		background-size: 750rpx 2650rpx;
		background-color: rgb(5, 0, 0);
		width: 750rpx;
		min-height: 2650rpx;
		padding-bottom: 30rpx;
		position: relative;
	}

	.topBox {
		position: relative;
		height: 1159rpx;

		.leftTipImg {
			position: absolute;
			top: 350rpx;
			left: 89rpx;
			width: 26rpx;
			height: 322rpx;
		}

		.nameBox {
			display: flex;
			justify-content: center;
			align-items: center;
			position: absolute;
			top: 350rpx;
			left: 136rpx;
			width: 1em;
			height: 322rpx;

			.username {
				font-family: STLiti;
				font-weight: 400;
				font-size: 56rpx;
				line-height: 47rpx;
				background-image: linear-gradient(to bottom, #B8937B 0%, #FFF9ED 50%, #CBA892 100%);
				background-clip: text;
				color: rgba(0, 0, 0, 0);
				width: 1em;
			}
		}

		.avatar {
			position: absolute;
			left: 200rpx;
			top: 211rpx;
			width: 377rpx;
			height: 860rpx;
		}

		.noBox {
			position: absolute;
			top: 500rpx;
			right: 40rpx;
			width: 21rpx;
			display: flex;
			flex-direction: column;

			.noText {
				text-align: center;
				font-size: 21rpx;
				line-height: 1;
				font-weight: 400;
				color: #0DF6F3;

				&.trText {
					transform: rotate(90deg);
				}
			}
		}

		.topBottomImg {
			position: absolute;
			bottom: 0;
			left: 0;
			width: 750rpx;
			height: 313rpx;
		}
	}

	.contentBox {
		padding: 60rpx 25rpx 0 25rpx;

		.content {
			padding: 20rpx 60rpx 40rpx 60rpx;
		}

		.titleImg {
			.titleImg1 {
				width: 447rpx;
				height: 51rpx;
			}
		}

		.list-item {
			font-family: Adobe Heiti Std;
			font-weight: normal;
			font-size: 29rpx;
			color: #CBA892;
			line-height: 49rpx;
		}

		.center-data {

			.item {
				display: flex;
				flex-direction: column;
			}
		}

		.typeImage {
			width: 189rpx;
			height: 42rpx;
		}

		.typeLeftLogo {
			width: 78rpx;
			height: 95rpx;
			position: absolute;
			left: 0;
			bottom: 50rpx;
		}
		.areaList{
			display: flex;
			flex-wrap: wrap;
			justify-content: space-around;
		}
		.blue-text{
			flex-grow: 1;
			font-size: 29rpx;
			text-align: center;
			color: #0DF6F3;
			line-height: 60rpx;
		}
	}
	.footerBox{
		display: flex;
		flex-direction: column;
		padding: 25rpx;
		.footerTitle{
			width: 448rpx;
			height: 51rpx;
		}
		.richtext{
			color: #CBA892;
		}
	}
	.imageList{
		.imageItem{
			width: 750rpx;
			height: 1000rpx;
		}
	}
</style>