newmyj/pages/user/model/model.vue

<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 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 && 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">
			<button class="share" type="default" open-type="share"
				v-if="!shareId && modelInfo.is_use== 1 && !is_yl && userInfo.work_type_id >0 && !look">
				<view class="">
					分享名片
				</view>
			</button>
			<view class="nav-model" @click="navto('/pages/user/model/modelrz?type=1')">
				修改名片
			</view>
		</view>

		<view class="ljrz" v-if="userInfo.work_type_id <=0" @click="navto('/pages/user/model/modelrz')">
			立即认证
		</view>
		<view class="create-model flex" v-if="!shareId && !is_yl && userInfo.work_type_id >0 && look">
			<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="is_yl = false">
			结束预览
		</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,
			}
		},
		computed: {
			...mapState(['baseURL']),
			...mapState('user', ['userInfo'])
		},
		onLoad(opt) {
			// this.getUserCardInfo()
			this.mtype = opt.mtype
			uni.hideShareMenu();
			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()
			}

		},
		onShow() {
			this.getUser()
		},
		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: this.cardInfo.name + '分享您一份名片', // 默认是小程序的名称(可以写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;
		},
		onUnload() {
			let pages = getCurrentPages(); //获取加载的页面
			let currentPage = pages[pages.length - 2]; //获取当前页面的对象
			// console.log(currentPage.route)
			if (currentPage.route == 'pages/public/wxLogin') {
				uni.switchTab({
					url: '/pages/index/index'
				})
			}
		},
		methods: {
			...mapMutations('user', ['setUserInfo']),
			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
				}).then(res => {
					let da = res.data.jsApiParameters;
					let data = {
						appId: da.appId,
						// #ifdef H5
						timestamp: da.timeStamp,
						// #endif
						// #ifdef MP
						timeStamp: da.timeStamp + '',
						// #endif
						nonceStr: da.nonceStr,
						package: da.package,
						signType: da.signType,
						paySign: da.paySign,
						success: function(res) {
							// obj.paySuccessTo();
							// alert('支付成功')
							uni.showModal({
								title: '提示',
								content: '支付成功！',
								cancelText: '关闭',
								confirmText: '查看模板',
								success: res => {
									if (res.confirm) {
										uni.reLaunch({
											url: '/pages/user/model/model?mtype=' +
												that.mtype,
										});
									}
								},
								fail: () => {},
								complete: () => {}
							});
							console.log('支付成功')
						},
						fail: (err) => {
							console.log(err)
							// alert('支付失败')
							// uni.navigateTo({
							// 	url: '/pages/order/order?state=0'
							// });
						}
					};
					console.log(data, 'timeStamp')
					if (that.payType == 'wxpay') {
						console.log('到这里')
						wx.requestPayment(data)
					}
				})
			},
			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;
				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: 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;
		}
	}

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