newmyj/pages/user/model/model.vue

<template>
	<view class="content" :class="mtype==1?'mone':'mbase'" 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 type="default" class="fx-btn">
				<image :src="baseURL + '/resource/icon/model1/fx.png'" mode=""></image>
			</button> -->
		</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.replace('每','')}}
									</view>
									<view class=" gzt-price-b">
										<text>{{cardInfo.service_max_price}}</text>元/{{cardInfo.service_time_type_title.replace('每','')}}
									</view>
								</view>
								<image :src="baseURL + '/resource/icon/model1/yrz.png'" mode="" class="rz"></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>
		<button type="default" class="fxmp" open-type="share" v-if="!shareId && modelInfo.is_use== 1">
			<view class="">
				分享名片
			</view>
		</button>
		<view class="create-model flex" v-if="!shareId && modelInfo.is_use== 0">
			<view class="price-show">
				模板费用：<text>{{modelInfo.price*1}}</text>
			</view>
			<view class="to-show">
				模板预览
			</view>
			<view class="by-now" @click="gobuy">
				购买使用
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import {
		getUserCardInfo,
		getCommonUserCardInfo,
		getShowTemplateItem
	} from '@/api/model.js'
	export default {
		data() {
			return {
				mtype: 1,
				shareId: '',
				cardInfo: {},
				modelInfo: {}
			}
		},
		computed: {
			...mapState(['baseURL']),
			...mapState('user',['userInfo'])
		},
		onLoad(opt) {
			// this.getUserCardInfo()
			opt.mtype = opt.mtype
			if(opt.uid) {
				this.shareId = opt.uid
				this.getCommonUserCardInfo(opt.uid)
			}else {
				this.getUserCardInfo()
				this.getShowTemplateItem()
			}
			
		},
		onShow() {
			
		},
		onShareAppMessage(options) {
			// 设置菜单中的转发按钮触发转发事件时的转发内容
			let pages = getCurrentPages(); //获取加载的页面
			let currentPage = pages[pages.length - 1]; //获取当前页面的对象
			let url = currentPage.route; //当前页面url
			let item = currentPage.options; //如果要获取url中所带的参数可以查看options
			let shareObj = {}
			shareObj = {
				title: '母婴界', // 默认是小程序的名称(可以写slogan等)
				path: url + '?uid=' + this.userInfo.uid + '&mtype=' + this.mtype, // 默认是当前页面，必须是以‘/’开头的完整路径
				imageUrl: '',
				success: function(res) {
					// 转发成功之后的回调
					if (res.errMsg == 'shareAppMessage:ok') {}
				},
				fail: function() {
					// 转发失败之后的回调
					if (res.errMsg == 'shareAppMessage:fail cancel') {
						// 用户取消转发
					} else if (res.errMsg == 'shareAppMessage:fail') {
						// 转发失败，其中 detail message 为详细失败信息
					}
				}
			};
			console.log(shareObj)
			return shareObj;
		},
		methods: {
			gobuy() {
				let that = this
				subShowTemplateOrder({
					id: that.mtype,
					pay_type: 'wxpay'
				}).then(res => {
					
				})
			},
			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 {
				width: 150rpx;
				height: 48rpx;
				padding: 0;

				&::after {
					border: none;
				}

				position: absolute;
				top: 70rpx;
				right: 0;
				border-radius: 24rpx 0 0 24rpx;

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

	.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;
			}


		}

		.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 {
		padding: 0;

		&::after {
			border: none;
		}
	}

	
	.fxmp {
		position: fixed;
		width: 750rpx;
		height: 78rpx;
		bottom: 0;
		padding: 0;

		view {
			background: #f65486;
			border-radius: 5rpx;
			font-size: 30rpx;
			font-weight: 500;
			color: #FFFFFF;
			text-align: center;
			line-height: 78rpx;
		}
	}
	.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;
		}
	}
</style>