H5_module/card/index/index.vue

<template>
	<view>
		<view class="photo">
			<block v-if="cardInfo.imageMap">
				<image :src="cardInfo.imageMap" mode="aspectFill" class="poster"></image>
				<view class="change ddflex" @click="uploadImg()">
					<image src="../static/images/sc_ico.png"></image>
					更换形象图
				</view>
			</block>
			<view class="upload ddflex" v-else @click="uploadImg()">
				<image src="../static/images/jia.png"></image>
				上传专属形象
			</view>
		</view>
		<view class="infos">
			<view class="info ddflex">
				<view class="flex">
					<view class="company">{{ cardInfo.companyName }}</view>
					<view class="name">{{ cardInfo.realName }}</view>
					<view class="job">{{ cardInfo.job }}</view>
				</view>
				<view class="logo">
					<image :src="cardInfo.avatar" mode="aspectFit"></image>
				</view>
				<!-- <view class="logo"><image src="../static/images/wap_logo.png" mode="aspectFit"></image></view> -->
			</view>
			<view class="btns ddflex" v-if="cardId">
				<button open-type="share" hover-class="none" class="share-ta">分享名片</button>
				<view class="save" @tap="addContact()">保存到通讯录</view>
			</view>
			<view class="contacts" v-if="cardId || isShowContacts">
				<scroll-view scroll-x="true" class="contact">
					<view class="li" @click="goPhone()">
						<view class="lit dflex">
							<image src="../static/images/phone.png"></image>
							拨打电话
						</view>
						<view class="num">{{ cardInfo.phone }}</view>
					</view>
					<view class="li" @click="copy(cardInfo.wechat, 1)">
						<view class="lit ddflex">
							<image src="../static/images/wechat.png"></image>
							复制微信
						</view>
						<view class="num">{{ cardInfo.wechat }}</view>
					</view>
					<view class="li" @click="copy(cardInfo.email, 2)">
						<view class="lit ddflex">
							<image src="../static/images/message.png"></image>
							复制邮箱
						</view>
						<view class="num">{{ cardInfo.email }}</view>
					</view>
				</scroll-view>
			</view>
			<view :class="'zhan ddflex' + (isShowContacts ? ' zhan-romate' : '')" v-if="!cardId"
				@click="showContacts()">
				{{ isShowContacts ? '收起' : '展开全部名片信息' }}
				<image src="../static/images/bico1.png" class="bico"></image>
			</view>
			<block v-if="!cardId">
				<button open-type="share" hover-class="none" class="share">发名片</button>
				<view class="opt ddflex">
					<view class="li" @click="jumpUrl('/card/create/create?isEdit=true&id=' + cardInfo.id)">
						<image src="../static/images/edit.png"></image>
						<view>编辑名片</view>
					</view>
					<!-- <view class="li">
						<image src="../static/images/fx_ico.png"></image>
						<view>分享图像名片</view>
					</view> -->
					<view class="li" @click="jumpUrl('/card/poster/poster?id=' + cardInfo.id)">
						<image src="../static/images/code.png"></image>
						<view>名片码</view>
					</view>
				</view>
			</block>
			<view class="datas ddflex">
				<view class="users ddflex fflex">
					<!-- <view class="q-users ddflex" v-if="cardInfo.pageUser.list.length > 0">
						<image :src="item.avatar" mode="aspectFill" v-for="(item, index) in cardInfo.pageUser.list" v-if="index<3" :key="index"></image>
					</view> -->
					<view class="fflex">{{ cardInfo.person }}人看过</view>
				</view>
				<view class="zan ddflex" @click="userBehavior(3)">
					<image :src="'../static/images/'+(cardInfo.isThumbs ? 'like_h.png':'zan_ico.png')"></image>
					{{ cardInfo.thumbs }}
				</view>
				<!-- <view class="renqi ddflex">
					<image src="../static/images/rqico.png"></image>
					{{ cardInfo.viewsNo }}
				</view> -->
			</view>
		</view>
		<view class="box brief">
			<view class="tit ddflex">
				<view class="flex ddflex">
					<image src="../static/images/jj_ico.png"></image>
					<view>个人简介</view>
				</view>
				<image v-if="!cardId" src="../static/images/bj_ico.png" class="edit"
					@tap="jumpUrl('/card/editDesc/editDesc?id=' + cardInfo.id)"></image>
			</view>
			<view class="bri"><rich-text :nodes="cardInfo.brief ? cardInfo.brief : '一句话介绍自己'"></rich-text></view>
		</view>
		<view class="box" v-if="!cardId">
			<view class="tit ddflex">
				<image src="../static/images/sj_ico.png"></image>
				<view>
					名片数据
					<text>（人次）</text>
				</view>
			</view>
			<view class="card-datas ddflex">
				<view class="li">
					<text>{{ cardInfo.todayBrowse }}</text>
					今日访问
				</view>
				<view class="li">
					<text>{{ cardInfo.browse }}</text>
					访问总量
				</view>
				<view class="li">
					<text>{{ cardInfo.share }}</text>
					名片分享
				</view>
			</view>
		</view>
		<view class="box videos" v-if="!cardId">
			<view class="tit ddflex">
				<view class="flex ddflex">
					<image src="../static/images/sp_ico.png"></image>
					<view>我的视频</view>
				</view>
				<!-- <image v-if="cardInfo.videoId" @click="uploadVodChangeHandle()" src="../static/images/bj_ico.png" class="edit"></image> -->
				<image v-if="cardInfo.videoId" @click="uploadVideo()" src="../static/images/bj_ico.png" class="edit">
				</image>
			</view>
			<view class="video">
				<!-- <video v-if="cardInfo.videoId" controls="true" class="video-sp" :src="videoInfo.playUrl"></video> -->
				<video v-if="cardInfo.videoId" controls="true" class="video-sp" :src="cardInfo.videoId"></video>
				<view v-else class="not" @click="uploadVideo()" v-else>
					<image src="../static/images/add_ico1.png"></image>
					<view>点击添加个人介绍视频</view>
				</view>
			</view>
		</view>
		<block v-else>
			<view class="box videos" v-if="cardInfo.videoId">
				<view class="tit ddflex">
					<view class="flex ddflex">
						<image src="../static/images/sp_ico.png"></image>
						<view>我的视频</view>
					</view>
				</view>
				<view class="video">
					<video controls="true" class="video-sp" :src="cardInfo.videoId"></video>
					<!-- <video controls="true" class="video-sp" :src="videoInfo.playUrl"></video> -->
				</view>
			</view>
		</block>
		<view class="box pic">
			<view class="tit ddflex">
				<view class="flex ddflex">
					<image src="../static/images/tp_ico.png"></image>
					<view>风采展示</view>
				</view>
				<!-- <image v-if="cardInfo.pictures && !cardId" @click="uploadImgs()" src="../static/images/bj_ico.png" class="edit"></image> -->
				<image v-if="cardInfo.pictures && !cardId" @click="jumpUrl('/card/imgList/index?id='+cardInfo.id)"
					src="../static/images/bj_ico.png" class="edit"></image>
			</view>
			<view class="picture">
				<view class="pics" v-if="cardInfo.pictures">
					<image v-for="(item, index) in getImgList(cardInfo.pictures)" :key="index" :src="item"
						mode="widthFix" @tap="previewImg(getImgList(cardInfo.pictures), index)"></image>
				</view>
				<view class="not" v-else @click="jumpUrl('/card/imgList/index?id='+cardInfo.id)">
					<!-- @click="uploadImgs()" -->
					<image src="../static/images/add_ico1.png"></image>
					<view>点击添加图片</view>
				</view>
			</view>
		</view>
		<view class="also" v-if="cardId" @click="jumpUrl('/card/create/create')">我也要创建电子名片</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');
	import VODUpload from '@/utils/aliyun-upload-sdk-1.0.1.min.js'
	export default {
		data() {
			return {
				options: '',
				scene: null,
				cardId: '',
				cardInfo: '',
				cardCount: '',
				isShowContacts: true,
				zhiPicUrls: [],

				isFirst: true, //页面加载第一次调用

				uploader: '',
				isStart: false,
				videoInfo: '',
				fileName: '', //视频名称
			};
		},
		onLoad(options) {
			this.options = options
			this.cardId = options.cardId;
			if (options.scene)
				this.scene = options.scene
		},

		async onShow() {
			if (this.scene) {
				await this.loadCodeParams();
			}
			console.log('req.isLogins(false)', req.isLogins(false))
			
			// #ifdef H5
			req.isLogins(true)
			// #endif
			
			// #ifdef APP
			await req.silenceLogin(this.options.userId ? this.options.userId : '', '')
			// #endif
			
			await this.getCardInfo();
		},

		onShareAppMessage: function() {
			this.saveShareBehavior()
			return this.onShareMessage();
		},
		onShareTimeline() {
			this.saveShareBehavior()
			return {
				title: this.getShareTitle(),
				imageUrl: this.cardInfo.imageMap ? this.cardInfo.imageMap : this.cardInfo.avatar,
				query: this.getSharePath()
			};
		},

		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: {
			saveShareBehavior() {
				let params = {
					behavior: 6,
					type: 23,
					bindId: this.cardInfo.id
				}
				req.saveBehavior(params, res => {})
			},
			
			onShareMessage(){
				
				return {
					title: this.getShareTitle(),
					imageUrl: this.cardInfo.imageMap ? this.cardInfo.imageMap : this.cardInfo.avatar,
					path: this.getSharePath()
				};
			},
			
			addContact: function() {
				var that = this;
				wx.showActionSheet({
					itemList: ['添加联系人'],
					success: function(res) {
						// 添加到手机通讯录
						uni.addPhoneContact({
							firstName: that.cardInfo.realName, //联系人姓名
							mobilePhoneNumber: that.cardInfo.phone, //联系人手机号
							organization: that.cardInfo.companyName, //公司
							weChatNumber: that.cardInfo.wechat, //微信
							email: that.cardInfo.email, //电子邮件
						})
					}
				})
			},
			getSharePath() {
				let path = '/card/index/index?cardId=' + this.cardInfo.id + '&appId=' + req.getStorage('appId');
				return path;
			},
			getShareTitle() {
				let title = this.cardInfo.realName;
				return (req.excludeSpecial(req.getStorage('userInfo').nickName) ? req.excludeSpecial(req.getStorage(
					'userInfo').nickName) : '') + '分享了一张' + title + '的名片';
			},
			loadCodeParams() {
				let _ts = this;
				return new Promise((resolve, reject) => {
					if (!_ts.scene) {
						resolve();
						return false;
					}
					req.getRequest(
						'/api/code/params', {
							scene: _ts.scene
						},
						data => {
							this.options.userId = data.userId
							this.cardId = data.scene
							resolve();
						}
					);
				});
			},
			getImgList(url) {
				var list = [];
				if (url) {
					list = url.split(',');
				}
				return list;
			},

			jumpUrl(url) {
				uni.navigateTo({
					url: url
				});
			},

			getCardInfo() {
				var url = '';
				var dataP = {};
				if (this.cardId) {
					url = api.card_info;
					dataP.id = this.cardId;
				} else {
					url = api.card_userInfo;
					dataP = {};
				}
				return new Promise((resolve, reject) => {
					req.getRequest(url, dataP, data => {
						this.cardInfo = data;
						// if(this.cardInfo.videoId){
						// 	this.getPlayInfo(this.cardInfo.videoId);
						// }
						console.log('isFirst')
						if (this.cardId && this.cardInfo.userId == req.getStorage('userInfo').id) {
							this.cardId = null
							this.getCardInfo()
						} else {
							if (this.cardInfo.userId == req.getStorage('userInfo').id) {

							} else {
								// 用户浏览
								if (this.isFirst) {
									this.userBehavior(4)
								}
							}
							this.isFirst = false
						}
						resolve()
					});
				})
			},

			getPlayInfo(videoId) {
				req.getRequest('/api/v3/vod/playInfo', {
					videoId: videoId
				}, data => {
					this.videoInfo = data
				})
			},
			// 用户行为
			userBehavior(type) {
				var dataP = {};
				dataP.type =
					23 //、产品 2、活动 3、未知 4、内容 5、课程 6、老师 7、素材 8、题目 9、资料领取 10、招聘职位 12、用户须知 13、素材 15、医院科室 16、海报 20、医生 21 新闻 23名片
				dataP.behavior = type; //1、关注 2、收藏 3、点赞 4、浏览 5、确认 6、分享
				dataP.bindId = this.cardInfo.id;
				req.postRequestLoding('/api/v3/behavior/save', dataP, data => {
					if (type == 3) {
						if (!this.cardInfo.isThumbs) this.cardInfo.thumbs++;
						else this.cardInfo.thumbs--
						this.cardInfo.isThumbs = !this.cardInfo.isThumbs
					}
					if (type == 1) {
						this.cardInfo.follow = !this.cardInfo.follow
					}
				});
			},
			showContacts() {
				this.isShowContacts = !this.isShowContacts;
			},

			goPhone() {
				uni.makePhoneCall({
					phoneNumber: this.cardInfo.phone
				}); // 传参带入号码即可
			},

			copy(valueText, type) {
				uni.setClipboardData({
					data: valueText,
					success: function(res) {
						if (type == 1) {
							req.msg('微信号复制成功');
						} else if (type == 2) {
							req.msg('邮箱复制成功');
						}
					}
				});
			},

			createUploader() {
				let self = this;
				return new VODUpload({
					timeout: 60000,
					partSize: 1048576,
					parallel: 5,
					retryCount: 3,
					retryDuration: 2,
					region: this.regionId,
					userId: this.accountId,
					// 开始上传
					onUploadstarted: function(uploadInfo) {
						uni.showLoading({
							title: '视频上传中'
						})
						console.log('uploadInfo==', uploadInfo)
						if (!uploadInfo.videoId) {
							req.getRequest('/api/v3/vod/uploadAuth?fileName=' + self.fileName, {}, res => {
								var data = res;
								self.uploader.setUploadAuthAndAddress(uploadInfo, data.uploadAuth, data
									.uploadAddress, data.videoId)
							})
							self.isStart = true;
						} else {
							req.getRequest('/api/v3/vod/refreshUploadAuth?videoId=' + uploadInfo.videoId, {},
								res => {
									var data = res;
									self.uploader.setUploadAuthAndAddress(uploadInfo, data.uploadAuth, data
										.uploadAddress, data.videoId)
								})
						}
					},
					// 文件上传成功
					onUploadSucceed: function(uploadInfo) {
						// req.msg("视频上传成功");
						let dataP = {
							id: self.cardInfo.id,
							videoId: uploadInfo.videoId,
							videoInfo: JSON.stringify(uploadInfo)
						}
						req.postRequest(api.card_saveOrUpdate, dataP, res => {
							self.getPlayInfo(uploadInfo.videoId);
							setTimeout(() => {
								self.isStart = false;
							}, 1000);
							uni.hideLoading()
						})
					},
					// 文件上传失败
					onUploadFailed: function(uploadInfo, code, message) {
						req.msg("文件上传失败");
					},
					// 取消文件上传
					onUploadCanceled: function(uploadInfo, code, message) {
						req.msg("文件已暂停上传");
					},
					// 文件上传进度，单位：字节, 可以在这个函数中拿到上传进度并显示在页面上
					onUploadProgress: function(uploadInfo, totalSize, progress) {
						var progressPercent = Math.ceil(progress * 100);
						// self.$set(self.uploader, 'authProgress', progressPercent);
					},
					// 上传凭证超时
					onUploadTokenExpired: function(uploadInfo) {
						req.getRequest('/api/v3/vod/refreshUploadAuth?videoId=' + uploadInfo.videoId, {},
							res => {
								var data = res;
								self.uploader.resumeUploadWithAuth(data.uploadAuth)
							})
					}
				})
			},
			uploadVodChangeHandle: function(e) {
				let self = this;
				uni.chooseVideo({
					count: 1, //上传视频的个数
					mediaType: ['video'], //限制上传的类型为video
					sourceType: ['album', 'camera'], //视频选择来源
					maxDuration: 58, //拍摄限制时间
					camera: 'back', //采用后置摄像头
					success: function(res) {
						//获取临时存放的视频资源
						// let tempFilePath=res.tempFiles[0]
						console.log('视频文件==', res)
						var file = {
							url: res.tempFilePath,
							coverUrl: res.thumbTempFilePath
						};
						self.fileName = res.tempFilePath.substring(res.tempFilePath.lastIndexOf('/') + 1)
						// if (self.uploader) {
						// 	self.uploader.stopUpload();
						// 	self.authProgress = 0;
						// }
						var userData = '{"Vod":{}}';
						self.uploader = self.createUploader();
						self.uploader.addFile(file, null, null, null, userData);
						self.uploader.startUpload();
					},
				})
			},

			uploadVideo() {
				let that = this;
				uni.chooseVideo({
					sourceType: ['camera', 'album'],
					success(res) {
						uni.showLoading({
							title: '上传中'
						})
						req.uploadFile(api.upload, res.tempFilePath, res => {
							that.updateCard(2, res.src);
							uni.hideLoading();
						});
					}
				});
			},
			uploadImg() {
				let that = this;
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'],
					sourceType: ['album', 'camera'],
					success: function({
						tempFilePaths
					}) {
						var promise = Promise.all(
							tempFilePaths.map(tempFilePath => {
								return new Promise(function(resolve, reject) {
									req.uploadFile(api.upload, tempFilePath, res => {
										that.imageMap = res.src;
										//上传完成，则更新保存
										that.updateCard(3, that.imageMap);
									});
								});
							})
						);
						promise
							.then(function(results) {
								console.log(results);
							})
							.catch(function(err) {
								console.log(err);
							});
					}
				});
			},

			uploadImgs() {
				let that = this;
				uni.chooseImage({
					count: 9,
					sizeType: ['original', 'compressed'],
					sourceType: ['album', 'camera'],
					success: function({
						tempFilePaths
					}) {
						uni.showLoading({
							title: '上传中'
						});
						var promise = Promise.all(
							tempFilePaths.map(tempFilePath => {
								return new Promise(function(resolve, reject) {
									req.uploadFile(api.upload, tempFilePath, res => {
										let picUrls = that.zhiPicUrls;
										that.zhiPicUrls = picUrls.concat(res.src);
										if (tempFilePaths.length == that.zhiPicUrls
											.length) {
											//上传完成，则更新保存
											that.updateCard(1, that.zhiPicUrls.join(
												','));
										}
										uni.hideLoading();
									});
								});
							})
						);
						promise
							.then(function(results) {
								console.log(results);
							})
							.catch(function(err) {
								console.log(err);
							});
					}
				});
			},

			//预览图片
			previewImg(picUrls, index) {
				//预览合同图片
				var src = picUrls[index];
				let imgs = picUrls;
				uni.previewImage({
					current: src, // 当前显示图片的http链接
					urls: imgs
				});
			},

			cleanimages(index) {
				// 删除图片
				let arr = this.zhiPicUrls;
				arr.splice(index, 1);
				this.zhiPicUrls = arr;
			},

			/**
			 * @param {Object} type 1图片 2、视频
			 * @param {Object} url 资源地址
			 */
			updateCard(type, url) {
				var dataP = {};
				dataP.id = this.cardInfo.id;
				if (type == 1) {
					dataP.pictures = url;
				} else if (type == 2) {
					dataP.videoId = url;
				} else if (type == 3) {
					dataP.imageMap = url;
				}
				req.postRequest(api.card_saveOrUpdate, dataP, json => {
					if (type == 1) {
						this.cardInfo.pictures = url;
						this.zhiPicUrls = [];
					} else if (type == 2) {
						this.cardInfo.videoId = url;
					} else if (type == 3) {
						this.cardInfo.imageMap = url;
					}
				});
			},

			toWxShare() {
				req.getWXOriginalId(data => {
					if (data) {
						this.wxShare(data);
					} else {
						this.$showModal({
							title: '提示',
							content: '未配置微信小程序',
							cancelText: '取消',
							confirmText: '设置开通'
						}).then(res => {
							// 点击确认的操作
							// tha.copy(content);
						});
					}
				});
			},

			wxShare(originalId) {
				//分享H5
				// uni.share({
				// 	provider: 'weixin',
				// 	scene: 'WXSceneSession',
				// 	type: 0,
				// 	href: req.env[req.env.NODE_ENV].h5BaseUrl + '/share/card/index?cardId=' + this.cardInfo.id,
				// 	title: this.cardInfo.nickName + ' - 电子名片',
				// 	summary: this.cardInfo.title + ' ' + this.cardInfo.position.name + ' ' + this.cardInfo.message,
				// 	imageUrl: this.cardInfo.avatar,
				// 	success: function(res) {
				// 		console.log('success:' + JSON.stringify(res));
				// 	},
				// 	fail: function(err) {
				// 		console.log('fail:' + JSON.stringify(err));
				// 	}
				// });

				uni.share({
					provider: 'weixin',
					scene: 'WXSceneSession',
					type: 5,
					imageUrl: this.cardInfo.avatar + '?x-oss-process=style/w375',
					title: this.cardInfo.nickName + ' - 电子名片',
					summary: this.cardInfo.title + ' ' + this.cardInfo.position.name + ' ' + this.cardInfo.message,
					miniProgram: {
						id: originalId,
						path: '/share/card/index?cardId=' + this.cardInfo.id,
						type: req.env[req.env.NODE_ENV].typeMiniProgram,
						webUrl: 'http://www.zhiqiyun.com'
					},
					success: ret => {
						console.log(JSON.stringify(ret));
					}
				});
			}
		}
	};
</script>

<style>
	@import './index.css';
</style>