renshou/card/index/index.vue

<template>
	<view style="padding-bottom: 30rpx;">
		<view class="top-fixed" :style="'height: '+ systems.barHeight + 'rpx;'">
			<view :class="'bgcolor' + (isTop == 1 ? ' opacity' : '')" :style="'height:' + systems.barHeight + 'rpx'">
			</view>
			<view class="top-fixed-c"
				:style="'height: '+ systems.navigationHeight + 'rpx;margin-top:' + systems.ktxStatusHeight + 'rpx;'">
				<navigator url="" hover-class="none" open-type="navigateBack" class="back ddflex"
					:style="'height: '+ systems.navigationHeight + 'rpx;'">
					<image src="/static/pages/images/back_black.png"></image>
				</navigator>
				<view :class="'top-title tover' + (isTop == 1 ? ' top-black':'')"
					:style="'line-height: '+ systems.navigationHeight + 'rpx;'">名片</view>
			</view>
		</view>
		<view :style="'height: '+ systems.barHeight + 'rpx;'"></view>
		<view class="bg">
			<image src="/static/pages/images/userBg.png"></image>
		</view>
		<view class="infos">
			<view class="infos-border">
				<view class="photo">
					<block v-if="cardInfo.avatar">
						<image :src="cardInfo.avatar" mode="aspectFill" class="poster"></image>
						<view class="change ddflex" style="right: 140rpx;background-color:#27D699;"
							@click="userBehavior(3)">
							<image v-if="!cardInfo.isThumbs" style="width: 35rpx;height: 32rpx;"
								src="/card/static/images/dz.png"></image>
							<image v-else style="width: 35rpx;height:32rpx;" src="../../static/images/like_h.png">
							</image>
							<!-- 点赞 -->
						</view>
						<view class="change ddflex" @click="uploadImg()">
							<image src="/card/static/images/change.png"></image>
							<!-- 更换形象图 -->
						</view>
					</block>
					<!-- @click="uploadImg()" -->
					<view class="upload ddflex" v-else
						@click="jumpUrl('/card/create/create?isEdit=true&id=' + cardInfo.id)">
						<image src="../../static/images/jia.png"></image>
						上传专属形象
					</view>
				</view>
				<view class="info dflex">
					<view class="flex">
						<view class="name">
							{{ cardInfo.realName }}
							<text class="job" v-if="cardInfo.job">{{ cardInfo.job }}</text>
							<text class="job">入司10年</text>
						</view>
						<view class="company ddflex" style="margin-top: 20rpx;">
							<image src="/static/pages/images/dzico.png"></image>
							{{ cardInfo.companyName }}
						</view>
						<view class="company ddflex">
							<image src="/static/pages/images/dzico.png"></image>
							服务区域 {{ cardInfo.industryName }}
						</view>
						<view class="company">
							执业证书：02000043090080002013000260
						</view>
						<!-- <view class="industry">
							{{ cardInfo.industryName }}
						</view> -->
					</view>
					<!-- <view class="guanzhu" v-if="cardId" @click="userBehavior(1)">{{cardInfo.follow==1?'我已关注':'+关注'}}</view> -->
					<!-- <view class="logo"><image :src="cardInfo.avatar" mode="aspectFit"></image></view> -->
				</view>
				<!-- <view class="contacts" v-if="cardId">
					<scroll-view scroll-x="true" class="contact">
						<view class="li" @click="goPhone()">
							<view class="lit ddflex">
								<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>
			<view class="btns ddflex" v-if="cardId">
				<view class="share-ta ddflex fflex" style="background: linear-gradient(80deg, #7EBFF1 0%, #458EEE 100%);;"
					@click="saveToPhone()">
					<image src="../../static/pages/images/wx.png"></image>存入通讯录</view>
				<view class="share-ta ddflex fflex" style="background: linear-gradient(84deg, #6FE5BC 0%, #27D699 100%);"
					@click="saveToPhone()">
					<image src="/static/pages/images/dh.png"></image>存入通讯录</view>
				<view class="share-ta ddflex fflex" style="background: linear-gradient(80deg, #FF985A 0%, #FF5700 100%);"
					@click="cardInfo.isSave?'':saveToFolder()">
					<image src="/static/pages/images/share1.png"></image>{{cardInfo.isSave?'已存入名片夹':'存入名片夹'}}</view>
			</view>
			<view class="save-text ddflex">
				<image src="../static/images/wxth.png"></image>保存到通讯录
			</view>
			<view class="btns ddflex" v-if="!cardId">
				<view class="share" @click="jumpUrl('/card/poster/poster?id=' + cardInfo.id)">分享名片</view>
				<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>
			</view>
			<view class="extend-info ddflex">
				<view class="extend-info-item fflex">
					<view class="extend-info-data">1678</view>
					<view class="extend-info-label ddflex">
						<image src="../../static/pages/images/fw_hui.png"></image>
						<view>服务客户</view>
					</view>
				</view>
				<view class="extend-info-item fflex">
					<view class="extend-info-data">1678</view>
					<view class="extend-info-label ddflex">
						<image src="/static/pages/images/cy_hui.png"></image>
						<view>保单件数</view>
					</view>
				</view>
				<view class="extend-info-item fflex">
					<view class="extend-info-data">1678</view>
					<view class="extend-info-label ddflex">
						<image src="/static/pages/images/dz_hui.png"></image>
						<view>点赞量</view>
					</view>
				</view>
			</view>
			<view class="q-hud ddflex">
				<view class="q-hud-c ddflex">
					<view class="q-users ddflex">
						<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.pageUser.total}}人看过
					</view>
					<!-- <image src="../static/images/q_rico.png" class="q-rico"></image> -->
				</view>
				<view class="q-hud-r ddflex">
					<view class="ddflex" @click="userBehavior(3)">
						<image v-if="!cardInfo.isThumbs" style="width: 27rpx;height: 29rpx;margin-right: 10rpx;"
							src="../static/images/dz.png"></image>
						<image v-else style="width: 27rpx;height: 29rpx;margin-right: 10rpx;"
							src="../../static/images/like_h.png"></image>
						<text>{{cardInfo.thumbs}}</text>
					</view>
					<view class="ddflex" v-if="cardId" @click="jumpUrl('/card/poster/poster?id'+cardInfo.id)">
						<image style="width: 29rpx;height: 29rpx;margin-left: 30rpx;margin-right: 10rpx;"
							src="../static/images/share.png"></image>
						<text>分享</text>
					</view>
				</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>
					我的名片数据
				</view>
			</view>
			<view class="card-datas ddflex">
				<view class="li">
					<text>{{ cardInfo.pageUser.total }}</text>
					访问量(次)
				</view>
				<view class="li">
					<text>{{ cardInfo.todayBrowse }}</text>
					今日访问量(次)
				</view>
				<view class="li">
					<text>{{ cardInfo.share }}</text>
					分享名片(次)
				</view>
			</view>
		</view>
		<view class="box videos">
			<view class="tit ddflex">
				<view class="flex ddflex">
					<image src="../static/images/sp_ico.png"></image>
					<view>我的视频</view>
				</view>
				<image v-if="cardInfo.videoId && !cardId" @click="uploadVodChangeHandle()"
					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>
				<view v-else class="not" @click="uploadVodChangeHandle()">
					<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>
	</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 {
				systems: {},
				isTop: 0,
				options: {},
				scene: null,
				cardId: '',
				cardInfo: '',
				cardCount: '',
				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))
			await req.silenceLogin(this.options.userId ? this.options.userId : '', '')
			this.getCardInfo();
		},

		onShareAppMessage() {},
		onShareTimeline() {},

		methods: {
			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/v3/visiting/card/info';
					dataP.id = this.cardId;
				} else {
					url = '/api/v3/visiting/card/userInfo';
					dataP = {};
				}
				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
					}
				});
			},

			// 用户行为
			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) {
						this.cardInfo.isThumbs = !this.cardInfo.isThumbs
					}
					if (type == 1) {
						this.cardInfo.follow = !this.cardInfo.follow
					}
				});
			},

			// 存入名片夹
			saveToFolder() {
				let form = {
					visitingCardId: this.cardInfo.id,
					userId: req.getStorage('userInfo').id
				}
				req.postRequest('/api/v3/visiting/card/folder/saveOrUpdate', form, res => {
					req.msg('已存入名片夹')
					this.cardInfo.isSave = true
				})
			},
			// 存入通讯录
			saveToPhone() {
				uni.addPhoneContact({
					nickName: this.cardInfo.realName,
					firstName: this.cardInfo.realName,
					mobilePhoneNumber: this.cardInfo.phone,
					success: (res) => {
						this.$showModal({
								title: '提示',
								content: '已存入通讯录，请前往手机通讯录查看',
								showCancel: false,
							})
							.then(res => {

							})
							.catch(err => {});
					},
					fail: () => {
						req.msg('存入失败')
					}
				})
			},

			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('邮箱复制成功');
						}
					}
				});
			},

			getPlayInfo(videoId) {
				req.getRequest('/api/v3/vod/playInfo', {
					videoId: videoId
				}, data => {
					this.videoInfo = data
				})
			},
			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/v3/visiting/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();
					},
				})
			},
			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
					}) {
						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(
												','));
										}
									});
								});
							})
						);
						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.video = url;
				} else if (type == 3) {
					dataP.imageMap = url;
				}
				req.postRequest(api.api_addressList_update, dataP, json => {
					if (type == 1) {
						this.cardInfo.pictures = url;
					} else if (type == 2) {
						this.cardInfo.video = 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: req.public.homeWebUrl
					},
					success: ret => {
						console.log(JSON.stringify(ret));
					}
				});
			}
		},
		mounted() {
			const systemInfo = uni.getSystemInfoSync();
			// px转换到rpx的比例
			let pxToRpxScale = 750 / systemInfo.windowWidth;
			let systems = {
				ktxStatusHeight: systemInfo.statusBarHeight * pxToRpxScale, // 状态栏的高度
				navigationHeight: 44 * pxToRpxScale // 导航栏的高度
			};
			systems.barHeight = systems.ktxStatusHeight + systems.navigationHeight;
			this.systems = systems;
		},
		onPageScroll: function(e) {
			if (e.scrollTop > this.systems.barHeight) {
				this.isTop = 1;
			} else {
				this.isTop = 0;
			}
		}
	};
</script>

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