newmyj/pages/user/model/model.vue

<template>
	<view class="content mone" v-if="baseURL">
		<model :modelId='mtype' :templateData='userTemplate' :isShare='isShare' :isLook='isLook' :isDefault='isDefault'
			:share-number='shareNumber'></model>
		<view class="fxmp flex bottom" v-if="type==2">
			<button class="share" type="default" open-type="share">
				分享名片
			</button>
			<view class="nav-model pink" @click="payPhone" v-if="mtype ==5">
				拨打电话
			</view>
			<view class="nav-model" @click="navto('/pages/user/model/model?mtype=' + mtype+'&type=0')"
				v-if="mtype != 3">
				生成我的名片
			</view>
			<template v-else-if="mtype == 3">
				<view class="nav-model" @click="navto('/pages/user/model/modelrz?modelid='+userInfo.show_template_id)"
					v-if=" hasLogin && userInfo.info_audit_status==-2">
					立即认证
				</view>
				<view class="nav-model" @click="navto('/pages/user/model/mymodellist')"
					v-if=" hasLogin && userInfo.info_audit_status==1">
					查看我的名片
				</view>
				<view class="nav-model" v-if=" hasLogin && userInfo.info_audit_status==0">
					资料审核中
				</view>
				<view class="nav-model" v-if=" !hasLogin" @click="toLogin">
					生成我的名片
				</view>
			</template>
		</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 class="nav-model pink"
				@click="navto('/pages/user/model/modelQr?modelid='+mtype+'&avatar='+userTemplate.avatar)">
				生成海报
			</view>
		</view>

		<view style="height:45px;" v-if="type==3"></view>

		<block v-if="type==0">
			<view class="ljrz bottom" v-if="userInfo.work_type_id <=0&&userInfo.info_audit_status != 1"
				@click="navto('/pages/user/model/modelrz?modelid=' + mtype + '&type=2')">
				生成我的名片
			</view>
			<view v-else class="create-model flex bottom">
				<view v-if="systeam!='ios'" class="price-show">
					模板费用：<text class="price-show-text">{{modelInfo.price*1}}</text>
				</view>
				<view class="to-show" @click="preview">
					模板预览
				</view>
				<view v-if="systeam!='ios'" class="by-now" @click="gobuy">
					立即使用
				</view>
			</view>
		</block>
		<view class="yl bottom" v-if="previewShow" @click="outPreview">
			结束预览
		</view>

		<view class="rightIcon">
			<view class="Dz" @click="onDz(1)">
				<uni-icons class="icon" :color="userTemplate.is_like==0?'#FFF':'#FEB8C6'" size='80rpx'
					type="hand-up-filled"></uni-icons>
			</view>
			<view class="ScNum">
				{{userTemplate.like_count||0}}
			</view>
			<view class="Sc" @click="onDz(2)">
				<uni-icons class="icon" :color="userTemplate.is_bookmark==0?'#FFF':'#FEB8C6'" size='80rpx'
					type="star-filled"></uni-icons>
			</view>
			<view class="ScNum">
				{{userTemplate.bookmark_count||0}}
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import {
		getUserCardInfo,
		getCommonUserCardInfo,
		getShowTemplateItem,
		subShowTemplateOrder,
		likeAndBookmark
	} from '@/api/model.js'
	import {
		getUser
	} from '@/api/user.js';
	import {
		saveUrl,
		interceptor
	} from '@/utils/loginUtils.js';
	import model from '@/pages/modelData/index.vue';
	export default {
		components: {
			model
		},
		data() {
			return {
				mtype: 1, //modelid
				shareId: '', //保存分享uid
				// 默认显示数据
				cardInfo: {},
				// 是否显示默认
				isDefault: true,
				shareNumber: 0, //浏览量
				userTemplate: {}, //用户展示数据
				modelInfo: {}, //当前模板信息
				payType: 'wxpay',
				type: 0, //0为商品页面进入1为个人中心进入修改预览2为分享查看预览，3为已购模板进入查看分享
				isShare: false, //是否显示分享按钮
				isLook: 0, //1为平台浏览量2为用户浏览量0为不显示
				previewShow: false, //是否显示预览
				uid: '', //当前载入的显示的用户uid
			}
		},
		onLoad(opt) {
			const that = this;
			// #ifndef MP
			if (opt.spread) {
				// 存储其他邀请人
				uni.setStorageSync('spread', opt.spread);
			}
			// #endif
			// #ifdef MP
			if (opt.spread) {
				// 存储其他邀请人
				uni.setStorageSync('spread_code', opt.spread);
			}
			uni.hideShareMenu();
			if (opt.scene) {
				let arr = opt.scene.split('_')
				this.isLook = 2;
				this.type = 2;
				this.mtype = arr[1]
				this.shareId = arr[0];
				// 存储小程序邀请人
				uni.setStorage({
					key: 'spread_code',
					data: arr[0]
				});
				this.getCommonUserCardInfo(arr[0]);
				this.uid = arr[0];
				return
			}
			// #endif
			// 获取模板id
			this.mtype = +opt.mtype
			// 获取查看类型
			this.type = +opt.type

			// 是否商品购买页进入
			if (this.type === 0) {
				this.isLook = 1;
				if (this.userInfo.uid) {
					this.getCommonUserCardInfo(this.userInfo.uid);
					this.uid = this.userInfo.uid;
				}
				this.getShowTemplateItem();
				return
			} else if (this.type === 1) {
				//个人中心提交数据预览
				this.userTemplate = uni.getStorageSync('modeldata');
				this.isDefault = false;
				uni.setNavigationBarTitle({
					title: '名片预览'
				})
				this.uid = this.userInfo.uid;
				return
			} else
			if (this.type === 2) {
				//分享预览
				this.isLook = 2;
				this.shareId = opt.uid;
				this.getCommonUserCardInfo(opt.uid);
				this.uid = opt.uid;
				return
			} else
			if (this.type === 3) {
				//我的模板页进入预览
				this.isShare = true;
				this.isLook = 2;
				this.shareId = this.userInfo.uid;
				this.getCommonUserCardInfo(this.userInfo.uid);
				this.uid = 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', 'hasLogin']),
			// #ifdef MP
			...mapState(['systeam']),
			// #endif
		},
		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.userTemplate.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 为详细失败信息
					}
				}
			};
			// 判断是否可以邀请
			if (this.userInfo.uid) {
				shareObj.path += '&spread=' + this.userInfo.uid;
			}
			return shareObj;
		},
		// #endif
		onUnload() {
			let pages = getCurrentPages(); //获取加载的页面
			let currentPage = pages[pages.length - 2]; //获取当前页面的对象
			if (currentPage.route == 'pages/public/wxLogin') {
				uni.switchTab({
					url: '/pages/index/index'
				})
			}
		},
		methods: {
			...mapMutations('user', ['setUserInfo']),
			onDz(type) {
				if (type == 1) {
					if (this.userTemplate.is_like == 0) {
						this.userTemplate.is_like = 1;
						this.userTemplate.like_count++;
					} else {
						this.userTemplate.is_like = 0;
						this.userTemplate.like_count--;
					}
				}
				if (type == 2) {
					if (this.userTemplate.is_bookmark == 0) {
						this.userTemplate.is_bookmark = 1;
						this.userTemplate.bookmark_count++;
					} else {
						this.userTemplate.is_bookmark = 0;
						this.userTemplate.bookmark_count--;
					}
				}
				likeAndBookmark({
					uid: this.uid,
					type: type
				}).then((res) => {
					console.log(res)
				}).catch((err) => {
					console.log(err)
				})
			},
			payPhone() {
				uni.makePhoneCall({
					phoneNumber: this.userTemplate.mobile
				})
			},
			toLogin() {
				saveUrl();
				interceptor();
			},
			// 模板预览
			preview() {
				if (!this.userInfo.uid) {
					uni.showModal({
						title: '提示',
						content: '您未登录是否登录查看',
						cancelText: '取消',
						confirmText: '立即登录',
						success: res => {
							if (res.confirm) {
								saveUrl();
								interceptor();
							}
						},
						fail: () => {},
						complete: () => {}
					});
					return
				}
				// 判断是否显示默认数据
				if (this.userTemplate.id) {
					this.isDefault = false;
				} else {
					this.isDefault = true;
				}
				this.previewShow = true;

				// 隐藏浏览数量
				this.isLook = 0;
			},
			// 结束预览
			outPreview() {
				// 显示默认数据
				this.isDefault = true;
				this.previewShow = false;
				if (this.type == 0) {
					this.isLook = 1;
					return
				}
				if (this.type == 3) {
					this.isLook = 2;
					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 = {}
					}
				}).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: () => {}
								});
							},
							fail: (err) => {
								console.log(err)
								// alert('支付失败')
								// uni.navigateTo({
								// 	url: '/pages/order/order?state=0'
								// });
							}
						};
						if (that.payType == 'wxpay') {
							wx.requestPayment(data)
						}
					}

				})
			},
			// 获取模板详情
			getShowTemplateItem() {
				let that = this
				getShowTemplateItem({
					id: that.mtype
				}).then(res => {
					that.modelInfo = res.data;
					if (that.type == 0) {
						uni.setNavigationBarTitle({
							title: that.modelInfo.title
						})
						that.shareNumber = res.data.look_count
					}
				})
			},
			// 加载用户模板数据
			getCommonUserCardInfo(uid) {
				console.log('jr')
				let that = this
				getCommonUserCardInfo({
					uid: uid
				}).then(res => {
					let arr = []
					let basearr = res.data.service_area_all
					basearr.forEach(item => {
						if (item.length == 3) {
							arr.push(item[0].name + item[1].name + item[2].name)
						}
						if (item.length == 2) {
							arr.push(item[0].name + item[1].name + '市辖区')
						}
					})
					res.data.service_area_all = arr
					// 保存用户模板数据
					that.userTemplate = res.data
					// 判断是否从用户个人中心或者分享进入
					if (that.type == 3 || that.type == 2) {
						// 修改为非默认数据
						that.isDefault = false;
						that.shareNumber = res.data.card_look_count;
						uni.setNavigationBarTitle({
							title: this.userTemplate.name + '的分享名片'
						})
					}
				})
			},
			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>
	.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;

		.share {
			width: 50%;
			padding: 0;
			border-radius: 0;
			flex-grow: 1;
			background-color: $base-color;
			color: #fff;
			font-size: 32rpx;
		}

		.nav-model {
			background-color: #FFF;
			color: $base-color;
			width: 50%;

			&.pink {
				color: #FFF;
				background-color: #FEB8C6;
			}
		}
	}

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

			.price-show-text {
				font-size: 48rpx;
				font-weight: 500;
				color: #FC6F6D;
			}
		}

		.to-show,
		.by-now {
			flex-grow: 1;
			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;
	}

	.rightIcon {
		position: fixed;
		right: 10rpx;
		bottom: 300rpx;
		background-color: rgba(0,0,0,0.1);
		padding: 40rpx 10rpx;
		border-radius: 100rpx;
		// border: 1px solid #fa98b6;
		.icon {
			color: #fff;
		}

		.ScNum {
			color: #FFF;
			text-align: center;
		}
	}
</style>