newmyj/pages/user/model/model.vue

<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="nav-model " @click="navto('/pages/user/model/modelrz?type=1&modelid=' + mtype)">
				修改名片
			</view>
		</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 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_imgs: ['https://api.myjie.cn/resource/icon/base/pj1.png',
						'https://api.myjie.cn/resource/icon/base/pj2.png',
						'https://api.myjie.cn/resource/icon/base/pj3.png',
						'https://api.myjie.cn/resource/icon/base/pj4.png'
					],
					service_project_ar: [{
							title: '婴幼儿睡眠管理',
							content: '如：日夜颠倒、睡眠不规律、乳头混淆、奶睡、抱睡等问题，帮助宝爸宝妈规律孩子作息、解决婴幼儿喂养困扰，培养良好的生活、学习习惯。'
						}, {
							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) {
				// 存储其他邀请人
				uni.setStorageSync('spread', opt.spread);
			}

			// #endif
			// #ifdef MP
			if (opt.scene) {
				// 存储小程序邀请人
				uni.setStorage({
					key: 'spread_code',
					data: opt.scene
				});
			}
			uni.hideShareMenu();
			// #endif

			// 获取模板id
			this.mtype = opt.mtype
			// 获取查看类型
			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']),
		},
		onShow() {

			// this.getUser()
		},
		// #ifdef MP
		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.templateData.name + '母婴界数字名片', // 默认是小程序的名称(可以写slogan等)
				path: url + '?uid=' + this.shareId + '&mtype=' + this.mtype + '&type=2', // 默认是当前页面，必须是以‘/’开头的完整路径
				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;
		},
		// #endif
		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']),
			// 模板预览
			preview() {
				this.templateData = this.userTemplate.id ? this.userTemplate : this.cardInfo;
				this.previewShow = true;
				// 隐藏浏览数量
				this.isLook = 0;
			},
			// 结束预览
			outPreview() {
				this.templateData = this.cardInfo;
				this.previewShow = false;
				if (this.type == 0) {
					this.isLook = 1;
					return
				}
				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) {
						uni.showModal({
							title: '提示',
							content: '支付成功！',
							cancelText: '关闭',
							confirmText: '查看模板',
							success: res => {
								if (res.confirm) {
									uni.reLaunch({
										url: '/pages/user/model/model?mtype=' +
											that.mtype,
									});
								}
							},
							fail: () => {},
							complete: () => {}
						});
					} else {
						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;
					if (that.type == 0) {
						that.cardInfo.look_count = res.data.look_count
					}
				})
			},
			// 加载用户模板数据
			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;
				}
			}

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


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