H5_module/topic/teacherDet/teacherDet.vue

<template>
	<view v-if="detaile">
		<!-- <view class="info ddflex">
			<image :src="detaile.headUrl" mode="aspectFill"></image>
			<view class="fflex">
				<view class="tit">{{detaile.realName}}</view>
				<view class="rec-tag ddflex" v-if="detaile.userExtend && detaile.userExtend.label">
					<text class="ddflex" v-for="(it,idx) in detaile.userExtend.label.split(',')" :key="idx">{{it}}</text>
				</view>
				<view class="tea-bri" v-if="detaile.userExtend && detaile.userExtend.projects">{{detaile.userExtend.projects}}</view>
			</view>
		</view>
		<view class="content">
			<view class="viewMore">
				<mp-html :content="detaile.userExtend.brief" :lazy-load="true" @imgtap="choose"></mp-html>
			</view>
		</view> -->
		<image :src="detaile.headUrl" mode="aspectFill" class="zj-bg"></image>
		<view class="content-box">
			<view class="zj-name ddflex">
				<text class="fflex">{{detaile.realName}}</text>
				<image @click="showPop" class="qr" src="../static/images/qrcode.png" v-if="detaile.wechatQrcode"></image>
			</view>
			<view class="zj-label">{{detaile.userExtend.label}}</view>
			<view class="title" v-if="detaile.userExtend.brief">专家简介</view>
			<view class="zj-brief" v-if="detaile.userExtend.brief">
				<mp-html :content="detaile.userExtend.brief" :lazy-load="true" @imgtap="choose"></mp-html>
			</view>
			<view class="title" v-if="detaile.userExtend.projects">擅长项目</view>
			<view class="zj-brief" v-if="detaile.userExtend.projects">
				<mp-html :content="detaile.userExtend.projects" :lazy-load="true" @imgtap="choose"></mp-html>
			</view>
		</view>
		<view class="ceng" v-if="isShowPop" @click="hidePop"></view>
		<view class="popup" :style="'bottom:' + sBottom +';'">
			<image src="../static/images/cancel.png" class="cancel" @click="hidePop()"></image>
			<image :src="detaile.wechatQrcode" class="code" show-menu-by-longpress="true"></image>
			<view class="tip">请{{detaile.wechatNumber ? '复制微信号或' : ''}}长按识别或保存二维码去微信添加</view>
			<view class="pop-btn dflex">
				<view @click="copy(detaile.wechatNumber)" v-if="detaile.wechatNumber">复制微信号</view>
				<view @click="saveImg()">保存二维码</view>
			</view>
			<!-- <image src="../../static/images/close.png" class="close" @click="hidePop"></image> -->
		</view>
		<!-- #ifdef H5 -->
		<wx-share ref="wxshare" />
		<!-- #endif -->
	</view>
</template>

<script>
const app = getApp();
const req = require('../../utils/request.js');
const api = require('../../utils/api.js');
const util = require('../../utils/util.js');
import mpHtml from "../../components/mp-html/components/mp-html/mp-html";
export default {
	components: {
		mpHtml,
	},
	data() {
		return {
			detaile: '',
			viewMore: false,
			config: {},
			isShowPop: false,
			sBottom: '-100%'
		};
	},

	onLoad: async function(options) {
		if(options.appId) req.setStorage('appId',options.appId);
		uni.showShareMenu({
			withShareTicket: true,
			menus: ['shareAppMessage', 'shareTimeline']
		});
		this.id = options.id;
		await this.getDetail();
		// await this.monitor();
	},
	onShow(){
		this.config =  JSON.parse(req.getStorage('configRes'))
		// this.getBrowse();
	},

	onShareAppMessage: function() {
		return this.onShareMessage();
	},
	onShareTimeline() {
		return {
			title: this.detail.realName,
			image: this.detaile.headUrl,
			query: '/topic/teacherDet/teacherDet?id=' + this.detaile.id
		};
	},
	
	onReady() {
		// #ifdef H5
		var that = this;
		//初始化分享内容
		setTimeout(function() {
			var shareContent = that.onShareMessage();
			if (shareContent) {
				shareContent.path = window.location.origin + shareContent.path;
			}
			console.log('分享内容》》》》》', shareContent);
			that.$refs.wxshare.init(shareContent);
		}, 4 * 1000);
		// #endif
	},
	methods: {
		onShareMessage(){
			let path = '';
			let isSolution = '';
			// #ifndef H5
			isSolution = req.env[req.env.NODE_ENV].isSolution;
			// #endif
			// #ifdef H5
			isSolution = false;
			// #endif
			let userInfo = req.getStorage('userInfo');
			if(isSolution){
				path = '/share/home/index?appId='+req.getStorage('appId')+'&userId='+userInfo.id;
			}else{
				path = '/topic/teacherDet/teacherDet?id=' + this.detaile.id + '&appId=' + req.getStorage('appId');
			}
			return {
				title: this.detaile.realName,
				imageUrl:this.detaile.headUrl,
				path: path
			};
		},
		
		showPop(){
			this.isShowPop = true;
			this.sBottom = 0;
		},
		hidePop(){
			this.isShowPop = false;
			this.sBottom = '-100%';
		},
		copy(content){
			uni.setClipboardData({
				//准备复制的数据
				data: content,
				success: function (res) {
					req.msg('复制成功')
				}
			})
		},
		saveImg() {
			let that = this;
			let codeUrl = this.detaile.wechatQrcode;
			uni.saveImageToPhotosAlbum({
			  filePath: codeUrl,
			  success(res) {
				uni.showToast({
				  title: '图片保存成功',
				  icon: 'none',
				  success() {
				  },
				  fail() {
					uni.showToast({
					  title: '图片保存失败'
					});
				  }
				})
			  }
			})
		},
		choose: function () {
		  let freshen = false;
		  this.$emit('freshen', {
		    detail: freshen
		  });
		},
		getDateTimeStamp(dateStr){
		 return util.getDateDiff(Date.parse(dateStr.replace(/-/gi,"/")));
		},
		splitLabel(label){
			if(!label){
				return false;
			}else{
				if (label.indexOf("，") > 0){
					return label.split('，');
				}else{
					return label.split(',');
				}
			}
		},
		getDetail() {
			let that = this;
			let apiUrl = '/api/v3/sysUser/info';
			return new Promise((resolve,reject)=>{
				req.getRequest(apiUrl,{ id: that.id },async res => {
					that.detaile = res;
					resolve();
				},true);
			})
		},
		getBrowse(){
			let params={
				bindId: this.id,
				type: 2
			}
			req.postRequest('/api/browse', params, data => {});
		},
	}
};
</script>

<style>
	@import "./teacherDet.css";
</style>