model2

pages/modelData/index.vue

@@ -1,11 +1,13 @@
 <template>
 	<block>
-		<model1 v-if="modelId==3||modelId==1" :cardInfo='templateData' :isShare='isShare' :isLook='isLook'></model1>
+		<model1 v-if="modelId==3||modelId==1" :cardInfo='templateData' :isShare='isShare' :isLook='isLook'></model1>
+		<model2 v-if="modelId==2" :cardInfo='templateData' :isShare='isShare' :isLook='isLook'></model2>
 	</block>
 </template>
 
 <script>
-	import model1 from './modeltemplate/model_1.vue';
+	import model1 from './modeltemplate/model_1.vue';
+	import model2 from './modeltemplate/model_2.vue'
 	export default {
 		props: {
 			templateData: {
@@ -29,7 +31,8 @@
 			},
 		},
 		components: {
-			model1
+			model1,
+			model2
 		},
 		data() {
 			return {

pages/modelData/modeltemplate/model_2.vue

@@ -0,0 +1,716 @@
+<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">
+				浏览:{{cardInfo.look_count}}
+			</view>
+			<!-- 别人查看次数 -->
+			<view class="top-btn visit padding-r-10" v-else-if="isLook==2">
+				浏览：{{cardInfo.card_look_count}}
+			</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>
+						<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">
+									<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;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">
+							{{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">
+					<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,
+		mapMutations
+	} from 'vuex';
+	import {
+		getUserCardInfo,
+		getCommonUserCardInfo,
+		getShowTemplateItem,
+		subShowTemplateOrder
+	} from '@/api/model.js'
+	import {
+		getUser
+	} from '@/api/user.js';
+	export default {
+		props: {
+			isShare: {
+				type: Boolean,
+				default: false
+			},
+			//1为模板2为用户
+			isLook: {
+				type: Number,
+				default: 0
+			},
+			cardInfo: {
+				type: Object,
+				default: () => {
+					return {
+						name: '佚名',
+						avatar: 'https://api.myjie.cn/resource/icon/base/f.png',
+						age: '41',
+						twelve: '鼠',
+						work_year: '10',
+						constellation: '处女座',
+						ancestral_place: '浙江',
+						minority: '汉族',
+						education: '本科',
+						service_area_all: ['浙江省台州市路桥区'],
+						service_min_price: 100,
+						service_max_price: 200,
+						service_time_type_title: '每小时',
+						service_intro_content: '高级育婴师证|高级催乳师证|早产儿护理师母婴护理证|金牌月嫂证|产后恢复师证|公共营养师证|月子药膳调理师证|国际宝宝睡眠咨询师证|普通话二级甲等|中央广播电视大学学历|学前教育专业，深耕幼教十年，技能全面，性格活泼，有亲和力，做事干净利落，有很强的责任心。对宝宝有爱心，体贴新手妈妈。专业技能熟练。应急能力强。让家人放心、产妇舒心的坐好月子。',
+						service_intro_imgs: ['https://api.myjie.cn/resource/icon/base/pj1.png',
+							'https://api.myjie.cn/resource/icon/base/pj2.png',
+							'https://api.myjie.cn/resource/icon/base/pj3.png',
+							'https://api.myjie.cn/resource/icon/base/pj4.png'
+						],
+						service_imgs: ['https://api.myjie.cn/resource/icon/base/pj1.png',
+							'https://api.myjie.cn/resource/icon/base/pj2.png',
+							'https://api.myjie.cn/resource/icon/base/pj3.png',
+							'https://api.myjie.cn/resource/icon/base/pj4.png'
+						],
+						service_audit_imgs: ['https://api.myjie.cn/resource/icon/base/zs1.png',
+							'https://api.myjie.cn/resource/icon/base/zs2.png',
+							'https://api.myjie.cn/resource/icon/base/zs3.png',
+							'https://api.myjie.cn/resource/icon/base/zs4.png'
+						],
+						service_project_ar: [{
+								title: '婴幼儿睡眠管理',
+								content: '如：日夜颠倒、睡眠不规律、乳头混淆、奶睡、抱睡等问题，帮助宝爸宝妈规律孩子作息、解决婴幼儿喂养困扰，培养良好的生活、学习习惯。'
+							}, {
+								title: '特色月子餐',
+								content: '套用客户的一句话“养眼、养心更养胃”！家常菜、面食、点心、甜品、靓汤、五谷杂粮粥、婴幼儿花样辅食等。'
+							},
+							{
+								title: '早产儿特殊护理',
+								content: '包括早产儿基础护理、安全喂养方法、追赶性生长、消化与免疫系统等技能，根据宝宝具体情况给予早产儿家长的科学入户指导。'
+							},
+							{
+								title: '0-6岁早期教育',
+								content: '在婴孩最敏感最能接受的时期进行事半功倍的适时教育，针对不同年龄段的孩子，开发婴幼儿潜能的教育，为孩子多元化和健康人格打下良好基础。'
+							}
+						],
+						is_type_audit: 1
+					}
+				}
+			},
+		},
+		data() {
+			return {}
+		},
+		computed: {
+			...mapState(['baseURL']),
+			...mapState('user', ['userInfo'])
+		},
+		onShow() {
+			// this.getUser()
+		},
+		onUnload() {
+			let pages = getCurrentPages(); //获取加载的页面
+			let currentPage = pages[pages.length - 2]; //获取当前页面的对象
+			if (currentPage.route == 'pages/public/wxLogin') {
+				uni.switchTab({
+					url: '/pages/index/index'
+				})
+			}
+		},
+		methods: {}
+	}
+</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;
+
+			&::after {
+				content: '';
+				width: 60rpx;
+				height: 10rpx;
+				background: #FE9E32;
+				border-radius: 5rpx;
+				position: absolute;
+				bottom: -20rpx;
+				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;
+			}
+
+		}
+
+
+	}
+	.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>

pages/user/model/model.vue

@@ -89,6 +89,11 @@
 						'https://api.myjie.cn/resource/icon/base/zs3.png',
 						'https://api.myjie.cn/resource/icon/base/zs4.png'
 					],
+					service_imgs: ['https://api.myjie.cn/resource/icon/base/pj1.png',
+						'https://api.myjie.cn/resource/icon/base/pj2.png',
+						'https://api.myjie.cn/resource/icon/base/pj3.png',
+						'https://api.myjie.cn/resource/icon/base/pj4.png'
+					],
 					service_project_ar: [{
 							title: '婴幼儿睡眠管理',
 							content: '如：日夜颠倒、睡眠不规律、乳头混淆、奶睡、抱睡等问题，帮助宝爸宝妈规律孩子作息、解决婴幼儿喂养困扰，培养良好的生活、学习习惯。'
@@ -241,7 +246,7 @@
 			...mapMutations('user', ['setUserInfo']),
 			// 模板预览
 			preview() {
-				this.templateData = this.userTemplate;
+				this.templateData = this.userTemplate.id ? this.userTemplate : this.cardInfo;
 				this.previewShow = true;
 				// 隐藏浏览数量
 				this.isLook = 0;