2023-5-4

pages.json

@@ -21,6 +21,18 @@
 				"navigationBarTitleText": "邀好友赚佣金"
 			}
 		},
+		// #ifdef H5
+		{
+			"path": "pages/user/model/modeltemplate/index",
+			"style": {
+				"navigationStyle": "custom",
+				"navigationBarTitleText": "模板页",
+				"app-plus": {
+					"titleNView": false
+				}
+			}
+		},
+		//#endif
 		// {
 		// 	"path": "pages/cart/cart",
 		// 	"style": {
@@ -38,7 +50,14 @@
 			}
 		}
 	],
-	"subPackages": [{
+	"subPackages": [
+		{
+		"root": "pages/modelData",
+		"name": "model_index",
+		"pages": [
+		]
+	},
+	{
 		"root": "pages/user",
 		"name": "user",
 		"pages": [

pages/index/index.vue

@@ -23,7 +23,7 @@
 				</navigator>
 			</view>
 			<view class="hot-list">
-				<view class="item" v-for="item in rmList" @click="navTo('/pages/user/model/model?mtype=' + item.id)">
+				<view class="item" v-for="item in rmList" @click="navTo('/pages/user/model/model?mtype=' + item.id+'&type=0')">
 					<view class="hot-image-box">
 						<image class="hot-image" :src="item.img" mode="widthFix"></image>
 					</view>
@@ -61,7 +61,7 @@
 			</view>
 
 			<view class="list-box">
-				<view class="list" v-for="(item,index) in navList.orderList" @click="navTo('/pages/user/model/model?mtype=' + item.id)">
+				<view class="list" v-for="(item,index) in navList.orderList" @click="navTo('/pages/user/model/model?mtype=' + item.id+'&type=0')">
 					<view class="list-image-box">
 						<image class="list-image" :src="item.img" mode="widthFix"></image>
 					</view>

pages/modelData/index.vue

@@ -0,0 +1,47 @@
+<template>
+	<block>
+		<model1 v-if="modelId==3||modelId==1" :cardInfo='templateData' :isShare='isShare' :isLook='isLook'></model1>
+	</block>
+</template>
+
+<script>
+	import model1 from './modeltemplate/model_1.vue';
+	export default {
+		props: {
+			templateData: {
+				type: Object,
+				default: ()=>{
+					return {}
+				}
+			},
+			isShare:{
+				type: Boolean,
+				default:false
+			},
+			//1为模板2为用户
+			isLook:{
+				type: Number,
+				default:0
+			},
+			modelId:{
+				type: Number,
+				default:0
+			},
+		},
+		components: {
+			model1
+		},
+		data() {
+			return {
+				model: 0
+			}
+		},
+		onLoad() {
+			console.log('233');
+			uni.postMessage('打开页面')
+		},
+		onUnload() {
+			uni.postMessage('关闭页面')
+		}
+	}
+</script>

pages/modelData/modeltemplate/model_1.vue

@@ -0,0 +1,684 @@
+<template>
+	<view class="mone">
+		<view class="m-top">
+			<image :src="baseURL + '/resource/icon/model1/top-base.png'" mode="" class="top-bg"></image>
+			<view class="top-user flex">
+				<image :src="cardInfo.avatar" mode="" class="user-logo"></image>
+			</view>
+			<view class="user-name">
+				{{cardInfo.name || '暂无'}}
+			</view>
+			<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 gr">
+			<!-- 个人信息 -->
+			<view class="hua2">
+				<view class="m-card">
+					<image :src="baseURL + '/resource/icon/model1/card-bg.png'" mode="" class="card-bg"></image>
+					<view class="card-tit flex">
+						<image :src="baseURL + '/resource/icon/model1/m1.png'" mode="" class="tit-logo"></image>个人信息
+					</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="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/icon/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/icon/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/icon/model1/card-bg.png'" mode="" class="card-bg"></image>
+						<view class="card-tit flex">
+							<image :src="baseURL + '/resource/icon/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/icon/model1/card-bg.png'" mode="" class="card-bg"></image>
+					<view class="card-tit flex">
+						<image :src="baseURL + '/resource/icon/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/icon/model1/card-bg.png'" mode="" class="card-bg"></image>
+					<view class="card-tit flex">
+						<image :src="baseURL + '/resource/icon/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/icon/model1/card-bg.png'" mode="" class="card-bg"></image>
+				<view class="card-tit flex">
+					<image :src="baseURL + '/resource/icon/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/icon/model1/m-btm.png'" mode="" class="m-btm"></image>
+		</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_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: #f8e1df;
+		padding-bottom: 30rpx;
+		.m-top {
+			width: 750rpx;
+			position: relative;
+			width: 750rpx;
+			height: 370rpx;
+
+			.top-bg {
+				position: relative;
+				width: 750rpx;
+				height: 370rpx;
+			}
+
+			.readme {
+				width: 534rpx;
+				height: 83rpx;
+				position: absolute;
+				top: 172rpx;
+				left: 0;
+				right: 0;
+				margin: auto;
+			}
+
+			.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/icon/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/icon/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/icon/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/icon/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/icon/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/icon/model1/hua3.png') no-repeat;
+			position: absolute;
+			bottom: -110rpx;
+			right: 0;
+			background-size: 100% 100%;
+			transform: rotateY(180deg);
+		}
+	}
+
+
+
+
+
+
+
+</style>

pages/user/model/model.vue

@@ -1,214 +1,124 @@
-<template>
-	<view class="content mone" v-if="baseURL">
-		<view class="m-top">
-			<image :src="baseURL + '/resource/icon/model1/top-base.png'" mode="" class="top-bg"></image>
-			<!-- <image :src="baseURL + '/resource/icon/model1/resume.png'" mode="" class="readme"></image> -->
-			<view class="top-user flex">
-				<image :src="cardInfo.avatar" mode="" class="user-logo"></image>
-				<!-- <image :src="baseURL + '/resource/icon/model1/jpfw.png'" mode="" class="gp"></image> -->
-			</view>
-			<view class="user-name">
-				{{cardInfo.name || '暂无'}}
-			</view>
-			<button :disabled="is_yl" type="default" class="top-btn fx-btn" v-if="(!shareId && modelInfo.is_use== 1 && !is_yl && userInfo.work_type_id >0 && !look) || is_yl" open-type="share">
-				<image :src="baseURL + '/resource/icon/model1/fx.png'" mode=""></image>
+<template>
+	<view class="content mone" v-if="baseURL">
+		<model :modelId='mtype' :templateData='templateData' :isShare='isShare' :isLook='isLook'></model>
+		<view class="bottom_padding" v-if="type!=1">
+
+		</view>
+		<view class="fxmp flex bottom" v-if="type==2">
+			<button class="share" type="default" open-type="share">
+				分享名片
+			</button>
+		</view>
+		<view class="fxmp flex bottom" v-if="type==3">
+			<button class="share" type="default" open-type="share">
+				分享名片
 			</button>
-			<!-- 模板查看次数 -->
-			<view class="top-btn visit mvisit" v-if="look && !is_yl && !shareId">
-				浏览:{{modelInfo.look_count}} 
+			<view class="nav-model " @click="navto('/pages/user/model/modelrz?type=1&modelid=' + mtype)">
+				修改名片
 			</view>
-			<!-- 别人查看次数 -->
-			<view class="top-btn visit" v-if="!shareId && modelInfo.is_use== 1 && !is_yl && userInfo.work_type_id >0 && !look">
-				浏览：{{userInfo.card_look_count}}
+		</view>
+		<block v-if="type==0">
+			<view class="ljrz bottom" v-if="userInfo.work_type_id <=0"
+				@click="navto('/pages/user/model/modelrz?modelid=' + mtype + '&type=2')">
+				生成我的名片
 			</view>
-			<view class="top-btn visit" v-if="shareId">
-				浏览：{{cardInfo.card_look_count}}
-			</view>
-		</view>
-		<view class="m-body gr">
-			<!-- 个人信息 -->
-			<view class="hua2">
-				<view class="m-card">
-					<image :src="baseURL + '/resource/icon/model1/card-bg.png'" mode="" class="card-bg"></image>
-					<view class="card-tit flex">
-						<image :src="baseURL + '/resource/icon/model1/m1.png'" mode="" class="tit-logo"></image>个人信息
-					</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.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/icon/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/icon/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/icon/model1/card-bg.png'" mode="" class="card-bg"></image>
-						<view class="card-tit flex">
-							<image :src="baseURL + '/resource/icon/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/icon/model1/card-bg.png'" mode="" class="card-bg"></image>
-					<view class="card-tit flex">
-						<image :src="baseURL + '/resource/icon/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/icon/model1/card-bg.png'" mode="" class="card-bg"></image>
-					<view class="card-tit flex">
-						<image :src="baseURL + '/resource/icon/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/icon/model1/card-bg.png'" mode="" class="card-bg"></image>
-				<view class="card-tit flex">
-					<image :src="baseURL + '/resource/icon/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/icon/model1/m-btm.png'" mode="" class="m-btm"></image>
-		</view>
-		<view class="create-model-ts">
-		</view>
-		<view class="fxmp flex" v-if="!shareId && modelInfo.is_use== 1 && !is_yl && userInfo.work_type_id >0 && !look">
-			<button class="share" type="default" open-type="share" >
-				<view class="">
-					分享名片
-				</view>
-			</button>
-			<view class="nav-model" @click="navto('/pages/user/model/modelrz?type=1&modelid=' + mtype)">
-				修改名片
-			</view>
-		</view>
-
-		<view class="ljrz" v-if="userInfo.work_type_id <=0" @click="navto('/pages/user/model/modelrz?modelid=' + mtype + '&type=2')">
-			生成我的名片
-		</view>
-		<view class="create-model flex" v-if="!shareId && !is_yl && userInfo.work_type_id >0 && look && islook == 1">
-			<view class="price-show">
-				模板费用：<text>{{modelInfo.price*1}}</text>
-			</view>
-			<view class="to-show" @click="is_yl = true">
-				模板预览
-			</view>
-			<view class="by-now" @click="gobuy">
-				购买使用
-			</view>
-		</view>
-		<view class="yl" v-if="is_yl" @click="jsyl">
-			结束预览
-		</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 {
-		data() {
-			return {
-				mtype: 1,
-				shareId: '',
-				cardInfo: {},
-				modelInfo: {},
-				payType: 'wxpay',
-				is_yl: false,
-				look: true,//不是个人中心过来
-				islook: 1,
-			}
-		},
-		onLoad(opt) {
+			<view v-else class="create-model flex bottom">
+				<view class="price-show">
+					模板费用：<text>{{modelInfo.price*1}}</text>
+				</view>
+				<view class="to-show" @click="preview">
+					模板预览
+				</view>
+				<view class="by-now" @click="gobuy">
+					购买使用
+				</view>
+			</view>
+		</block>
+		<view class="yl bottom" v-if="previewShow" @click="outPreview">
+			结束预览
+		</view>
+	</view>
+</template>
+
+<script>
+	import {
+		mapState,
+		mapMutations
+	} from 'vuex';
+	import {
+		getUserCardInfo,
+		getCommonUserCardInfo,
+		getShowTemplateItem,
+		subShowTemplateOrder
+	} from '@/api/model.js'
+	import {
+		getUser
+	} from '@/api/user.js';
+	import model from '@/pages/modelData/index.vue';
+	export default {
+		components: {
+			model
+		},
+		data() {
+			return {
+				mtype: 1, //modelid
+				shareId: '', //保存分享uid
+				// 默认显示数据
+				cardInfo: {
+					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_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
+				},
+				userTemplate: {}, //用户展示数据
+				templateData: {}, //模板查看数据
+				modelInfo: {}, //当前模板信息
+				payType: 'wxpay',
+				type: 0, //0为商品页面进入1为个人中心进入修改预览2为分享查看预览，3为已购模板进入查看分享
+				isShare: false, //是否显示分享按钮
+				isLook: 0, //1为平台浏览量2为用户浏览量0为不显示
+				previewShow: false, //是否显示预览
+			}
+		},
+		onLoad(opt) {
+
 			// #ifndef MP
 			if (opt.spread) {
 				// 存储其他邀请人
@@ -224,41 +134,71 @@
 					data: opt.scene
 				});
 			}
+			uni.hideShareMenu();
 			// #endif
-			
-			// this.getUserCardInfo()
+
+			// 获取模板id
 			this.mtype = opt.mtype
-			
-			
-			uni.hideShareMenu();
-			if(opt.look && opt.look == 2) {
-				console.log('daozhe')
-				this.islook = opt.look
-				this.cardInfo = uni.getStorageSync('modeldata')
-				this.is_yl = true
-				
-			}else {
-				if (opt.look && opt.look == 1) {
-					uni.showShareMenu();
-					this.look = false
-				}
-				if (opt.uid) {
-					this.shareId = opt.uid
-					this.getCommonUserCardInfo(opt.uid)
-				} else {
-					this.getShowTemplateItem()
-				}
+			// 获取查看类型
+			this.type = +opt.type
+			// 是否首页进入
+			if (this.type === 0) {
+				this.templateData = this.cardInfo;
+				this.isLook = 1;
+				this.getShowTemplateItem();
+				this.getCommonUserCardInfo(this.userInfo.uid);
+				return
 			}
-			
+			//个人中心提交数据预览
+			if (this.type === 1) {
+				this.templateData = uni.getStorageSync('modeldata');
+				return
+			}
+			//分享预览
+			if (this.type === 2) {
+				console.log(opt.type,'opt.type');
+				this.isLook = 2;
+				this.getCommonUserCardInfo(opt.uid);
+				return
+			}
+			//我的模板页进入预览
+			if (this.type === 3) {
+				console.log(opt.type,'opt.type');
+				this.isShare = true;
+				this.isLook = 2;
+				this.shareId = this.userInfo.uid;
+				this.getCommonUserCardInfo(this.userInfo.uid);
+				return
+			}
+			// if(opt.look && opt.look == 2) {
+			// 	this.islook = opt.look
+			// 	this.cardInfo = uni.getStorageSync('modeldata')
+			// 	this.is_yl = true
+
+			// }else {
+			// 	if (opt.look && opt.look == 1) {
+			// 		uni.showShareMenu();
+			// 		this.look = false
+			// 	}
+			// 	if (opt.uid) {
+			// 		this.shareId = opt.uid
+			// 		this.getCommonUserCardInfo(opt.uid)
+			// 	} else {
+			// 		this.getShowTemplateItem()
+			// 	}
+			// }
+
 
 		},
 		computed: {
 			...mapState(['baseURL']),
-			...mapState('user', ['userInfo'])
+			...mapState('user', ['userInfo']),
 		},
 		onShow() {
-			this.getUser()
+
+			// this.getUser()
 		},
+		// #ifdef MP
 		onShareAppMessage(options) {
 			// 设置菜单中的转发按钮触发转发事件时的转发内容
 			let pages = getCurrentPages(); //获取加载的页面
@@ -267,8 +207,8 @@
 			let item = currentPage.options; //如果要获取url中所带的参数可以查看options
 			let shareObj = {}
 			shareObj = {
-				title: this.cardInfo.name + '母婴界数字名片', // 默认是小程序的名称(可以写slogan等)
-				path: url + '?uid=' + this.userInfo.uid + '&mtype=' + this.mtype, // 默认是当前页面，必须是以‘/’开头的完整路径
+				title: this.templateData.name + '母婴界数字名片', // 默认是小程序的名称(可以写slogan等)
+				path: url + '?uid=' + this.shareId + '&mtype=' + this.mtype + '&type=2', // 默认是当前页面，必须是以‘/’开头的完整路径
 				imageUrl: '',
 				success: function(res) {
 					// 转发成功之后的回调
@@ -286,6 +226,7 @@
 			console.log(shareObj)
 			return shareObj;
 		},
+		// #endif
 		onUnload() {
 			let pages = getCurrentPages(); //获取加载的页面
 			let currentPage = pages[pages.length - 2]; //获取当前页面的对象
@@ -295,82 +236,56 @@
 					url: '/pages/index/index'
 				})
 			}
-		},
-		methods: {
+		},
+		methods: {
 			...mapMutations('user', ['setUserInfo']),
-			jsyl() {
-				if(this.islook == 2) {
-					uni.navigateBack()
-				}else {
-					this.is_yl = false
+			// 模板预览
+			preview() {
+				this.templateData = this.userTemplate;
+				this.previewShow = true;
+				// 隐藏浏览数量
+				this.isLook = 0;
+			},
+			// 结束预览
+			outPreview() {
+				this.templateData = this.cardInfo;
+				this.previewShow = false;
+				if (this.type == 0) {
+					this.isLook = 1;
+					return
 				}
-				
-			},
-			navto(url) {
-				uni.navigateTo({
-					url
-				})
-			},
-			getUser() {
-				const that = this;
-				getUser({}).then((e) => {
-					that.setUserInfo(e.data)
-					if (e.data.work_type_id >0 && that.shareId == '') {
-						that.getUserCardInfo()
-					} else {
-						that.cardInfo = {
-							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_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
-						}
-					}
-				}).catch((e) => {})
-			},
-			gobuy() {
-				let that = this
-				subShowTemplateOrder({
-					id: that.mtype,
-					pay_type: that.payType
+				if (this.type == 3) {
+					this.isLook = 2;
+					return
+				}
+			},
+			// 监听web视图反馈
+			changeDate(base) {
+				console.log(base, 'mss');
+			},
+			navto(url) {
+				uni.navigateTo({
+					url
+				})
+			},
+			getUser() {
+				const that = this;
+				getUser({}).then((e) => {
+					that.setUserInfo(e.data)
+					if (e.data.work_type_id > 0 && that.shareId == '') {
+						that.getUserCardInfo()
+					} else {
+						that.cardInfo = {}
+					}
+				}).catch((e) => {})
+			},
+			gobuy() {
+				let that = this
+				subShowTemplateOrder({
+					id: that.mtype,
+					pay_type: that.payType
 				}).then(res => {
-					if(res.data.status == 1) {
+					if (res.data.status == 1) {
 						uni.showModal({
 							title: '提示',
 							content: '支付成功！',
@@ -387,7 +302,7 @@
 							fail: () => {},
 							complete: () => {}
 						});
-					}else {
+					} else {
 						let da = res.data.jsApiParameters;
 						let data = {
 							appId: da.appId,
@@ -435,576 +350,447 @@
 							console.log('到这里')
 							wx.requestPayment(data)
 						}
-					}
-					
-				})
+					}
+
+				})
+			},
+			// 获取模板详情
+			getShowTemplateItem() {
+				let that = this
+				getShowTemplateItem({
+					id: that.mtype
+				}).then(res => {
+					that.modelInfo = res.data;
+					if (that.type == 0) {
+						that.cardInfo.look_count = res.data.look_count
+					}
+				})
 			},
-			// 获取模板详情
-			getShowTemplateItem() {
-				let that = this
-				getShowTemplateItem({
-					id: that.mtype
-				}).then(res => {
-					that.modelInfo = res.data
-				})
-			},
-			getCommonUserCardInfo(uid) {
-				let that = this
-				getCommonUserCardInfo({
-					uid: uid
-				}).then(res => {
-					let arr = []
-					let basearr = res.data.service_area_all
-					basearr.forEach(item => {
-						arr.push(item[0].name + item[1].name + item[2].name)
-					})
-					res.data.service_area_all = arr
-					that.cardInfo = res.data
-				})
-			},
-			getUserCardInfo() {
-				let that = this
-				getUserCardInfo().then(res => {
-					console.log(res)
-					let arr = []
-					let basearr = res.data.service_area_all
-					basearr.forEach(item => {
-						arr.push(item[0].name + item[1].name + item[2].name)
-					})
-					res.data.service_area_all = arr
-					that.cardInfo = res.data
-				})
-			}
-		}
-	}
-</script>
-
-<style lang="scss">
-	.mone {
-		background-color: #f8e1df;
-
-		.m-top {
-			width: 750rpx;
-			position: relative;
-			width: 750rpx;
-			height: 370rpx;
-
-			.top-bg {
-				position: relative;
-				width: 750rpx;
-				height: 370rpx;
-			}
-
-			.readme {
-				width: 534rpx;
-				height: 83rpx;
-				position: absolute;
-				top: 172rpx;
-				left: 0;
-				right: 0;
-				margin: auto;
-			}
-
-			.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;
-				}
+			// 加载用户模板数据
+			getCommonUserCardInfo(uid) {
+				let that = this
+				getCommonUserCardInfo({
+					uid: uid
+				}).then(res => {
+					let arr = []
+					let basearr = res.data.service_area_all
+					basearr.forEach(item => {
+						arr.push(item[0].name + item[1].name + item[2].name)
+					})
+					res.data.service_area_all = arr
+					// 保存用户模板数据
+					that.userTemplate = res.data
+					if (that.type == 3||that.type == 2) {
+						that.templateData = res.data
+					}
+				})
+			},
+			getUserCardInfo() {
+				let that = this
+				getUserCardInfo().then(res => {
+					console.log(res)
+					let arr = []
+					let basearr = res.data.service_area_all
+					basearr.forEach(item => {
+						arr.push(item[0].name + item[1].name + item[2].name)
+					})
+					res.data.service_area_all = arr
+					that.cardInfo = res.data
+				})
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.bottom_padding {
+		height: 45px;
+		width: 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;
+				}
 			}
-			.top-btn {
-				width: 150rpx;
-				height: 48rpx;
-				position: absolute;
-				right: 0;
-				top: 70rpx;
-				line-height: 48rpx;
-				font-size: 24rpx;
+
+			.fw-content {
+				padding-top: 10rpx;
+				padding-left: 18rpx;
+				text-align: justify;
 			}
-			.visit {
-				border-radius: 24rpx 0 0 24rpx;
-				top: 130rpx;
-				border:1px solid #f65486;
-				color: #f65486;
-				padding-left: 24rpx;
+
+		}
+
+		.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;
+				}
 			}
-			.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('https://api.myjie.cn/resource/icon/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('https://api.myjie.cn/resource/icon/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('https://api.myjie.cn/resource/icon/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('https://api.myjie.cn/resource/icon/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('https://api.myjie.cn/resource/icon/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('https://api.myjie.cn/resource/icon/model1/hua3.png') no-repeat;
-			position: absolute;
-			bottom: -110rpx;
-			right: 0;
-			background-size: 100% 100%;
-			transform: rotateY(180deg);
-		}
-	}
-
-	.create-model-ts {
-		width: 750rpx;
-		height: 30rpx;
-	}
-
-	.fxmp {
-		width: 750rpx;
-		.share {
-			width: 50%;
-			padding: 0;
-			border-radius: 0;
-			&::after {
-				border: none;
-			}
-		}
-
-		.nav-model {
-			background-color: #FFF;
-			color: $base-color;
-			width: 50%;
-		}
-	}
-
-
-	.fxmp {
-		position: fixed;
-		width: 750rpx;
-		height: 98rpx;
-		bottom: 0;
-		padding: 0;
-
-		view {
-			background: #f65486;
-			// border-radius: 5rpx;
-			font-size: 30rpx;
-			font-weight: 500;
-			color: #FFFFFF;
-			text-align: center;
-			line-height: 98rpx;
-		}
-	}
-
-	.create-model {
-		position: fixed;
-		width: 750rpx;
-		bottom: 0;
-		// border-radius: 5rpx;
-		font-size: 32rpx;
-		font-weight: 500;
-		text-align: center;
-		line-height: 98rpx;
-
-		.price-show {
-			font-size: 32rpx;
-			font-weight: 500;
-			color: #333333;
-			background-color: #fff;
-			flex-grow: 1;
-
-			text {
-				font-size: 48rpx;
-				font-weight: 500;
-				color: #FC6F6D;
-			}
-		}
-
-		.to-show,
-		.by-now {
-			width: 223rpx;
-			height: 98rpx;
-			background: #fa98b6;
-			flex-shrink: 0;
-			font-size: 34rpx;
-			color: #fff;
-		}
-
-		.by-now {
-			background: #f65486;
-		}
-	}
-
-	.yl {
-		position: fixed;
-		bottom: 0;
-		width: 750rpx;
-		font-size: 32rpx;
-		font-weight: 500;
-		text-align: center;
-		line-height: 98rpx;
-		color: #fff;
-		text-align: center;
-		font-size: 34rpx;
-		background-color: #f65486;
-	}
-
-	.ljrz {
-		position: fixed;
-		width: 750rpx;
-		bottom: 0;
-		font-size: 32rpx;
-		font-weight: 500;
-		text-align: center;
-		line-height: 98rpx;
-		background-color: #f65486;
-		color: #fff;
-	}
-</style>
+
+			.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/icon/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/icon/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/icon/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/icon/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/icon/model1/hua3.png') no-repeat;
+			position: absolute;
+			bottom: -110rpx;
+			right: 0;
+			background-size: 100% 100%;
+			transform: rotateY(180deg);
+		}
+	}
+
+
+	.fxmp {
+		width: 750rpx;
+
+		.share {
+			width: 50%;
+			padding: 0;
+			border-radius: 0;
+			flex-grow: 1;
+			&::after {
+				border: none;
+			}
+		}
+
+		.nav-model {
+			background-color: #FFF;
+			color: $base-color;
+			width: 50%;
+		}
+	}
+
+	.fxmp {
+		position: fixed;
+		width: 750rpx;
+		bottom: 0;
+		padding: 0;
+		background: #f65486;
+		// border-radius: 5rpx;
+		font-size: 30rpx;
+		font-weight: 500;
+		color: #FFFFFF;
+		text-align: center;
+	}
+
+	.create-model {
+		position: fixed;
+		width: 750rpx;
+		bottom: 0;
+		// border-radius: 5rpx;
+		font-size: 32rpx;
+		font-weight: 500;
+		text-align: center;
+
+		.price-show {
+			font-size: 32rpx;
+			font-weight: 500;
+			color: #333333;
+			background-color: #fff;
+			flex-grow: 1;
+
+			text {
+				font-size: 48rpx;
+				font-weight: 500;
+				color: #FC6F6D;
+			}
+		}
+
+		.to-show,
+		.by-now {
+			width: 223rpx;
+			background: #fa98b6;
+			flex-shrink: 0;
+			font-size: 34rpx;
+			color: #fff;
+		}
+
+		.by-now {
+			background: #f65486;
+		}
+	}
+
+	.yl {
+		position: fixed;
+		bottom: 0;
+		width: 750rpx;
+		font-size: 32rpx;
+		font-weight: 500;
+		text-align: center;
+		color: #fff;
+		text-align: center;
+		font-size: 34rpx;
+		background-color: #f65486;
+	}
+
+	.ljrz {
+		position: fixed;
+		width: 750rpx;
+		bottom: 0;
+		font-size: 32rpx;
+		font-weight: 500;
+		text-align: center;
+		background-color: #f65486;
+		color: #fff;
+	}
+
+	.bottom {
+		line-height: 45px;
+		height: 45px;
+	}
+</style>

pages/user/model/modelrz.vue

@@ -85,7 +85,7 @@
 							placeholder-class="placeholder" />
 					</view>
 				</view>
-				<view class="flex listItem">
+				<!-- <view class="flex listItem">
 					<view class="flex titleBox">
 						<text class="title">出生日期</text>
 					</view>
@@ -96,7 +96,7 @@
 							</view>
 						</picker>
 					</view>
-				</view>
+				</view> -->
 				<view class="flex listItem">
 					<view class="flex titleBox">
 						<text class="font-color-red font-size-sm">✲</text><text class="title">职业</text>
@@ -318,7 +318,7 @@
 				this.type = 1;
 				await this.getUserCardInfo()
 			} else if (options.type == 2) {
-				this.type = 2
+				this.type = 0
 			}
 			this.init()
 		},
@@ -455,7 +455,7 @@
 
 
 				uni.navigateTo({
-					url: '/pages/user/model/model?mtype=' + that.modelid + '&look=2'
+					url: '/pages/user/model/model?mtype=' + that.modelid + '&type=1'
 				})
 			},
 			// 获取用户提交数据

pages/user/model/mymodellist.vue

@@ -2,7 +2,7 @@
 	<view class="indexBox">
 		<view class="hot-list-box">
 			<view class="list-box">
-				<view class="list" @click="navTo('/pages/user/model/model?mtype=' + item.show_template_id + '&look=1')"
+				<view class="list" @click="navTo('/pages/user/model/model?mtype=' + item.show_template_id + '&type=3')"
 					v-for="(item,index) in navList.orderList">
 					<view class="list-image-box">
 						<image class="list-image" :src="item.img" mode="widthFix"></image>

pages/userhome/user.vue

@@ -251,9 +251,13 @@
 					this.navTo('/pages/user/model/modelrz?modelid='+this.user.show_template_id)
 				} else {
 					if (this.user.show_template_id) {
-						this.navTo('/pages/user/model/model?mtype=' + this.user.show_template_id+'&look=1')
+						this.navTo('/pages/user/model/model?mtype=' + this.user.show_template_id+'&type=3')
 					}else{
-						this.navTo('/pages/user/model/model')
+						uni.showModal({
+							title: '错误',
+							content: '您未购买模板请先购买',
+							showCancel: false,
+						});
 					}
 				}
 			},

uni.scss

@@ -44,4 +44,5 @@ $box-shadow: 0rpx 0rpx 10rpx 10rpx #f3f3f3;
 // 圆角
 $border-radius-sm: 15rpx;
 // 渐变背景颜色
-$bg-green-gradual: linear-gradient(#F65486, #71d094);
+$bg-green-gradual: linear-gradient(#F65486, #71d094);
+$base-url:'https://api.myjie.cn';