crmcard/pages/index/detail.vue

<template>
	<view class="detail">
		<uni-menubar :title="userInfo.name" />
		<view class="pure_top"></view>
		<template v-if="userInfo.name">
			<tm-sheet :shadow="24">
				<view class="visitor-box text-size-s">
					<view class="visitor-items">
						<view>
							<image class="visitor-user-avatar" :src="userInfo.picture"></image>
							<!-- <image class="visitor-user-avatar"></image> -->
						</view>
						<view class="visitor-items-user">
							<view class="text-weight-b">{{userInfo.name}}</view>
							<view class="visitor-items-content">{{userInfo.industry}}</view>
							<view class="visitor-items-content">{{userInfo.company}}</view>
						</view>
					</view>
				</view>
				<view @click="mobileClick(userInfo.mobile)" class="my-20 visitor-items-userInfo">
					<tm-icons class="mr-20" name="icon-phone"></tm-icons>{{userInfo.mobile}}
				</view>
				<view @click="copyWx(userInfo.wx)" class="my-20 visitor-items-userInfo">
					<tm-icons class="mr-20" name="icon-aliwangwang"></tm-icons>{{userInfo.wx}}
				</view>
				<view @click="copyEmail(userInfo.email)" class="visitor-items-userInfo">
					<tm-icons class="mr-20" name="icon-mail"></tm-icons>{{userInfo.email}}
				</view>
				<view @click="openAddress" class="my-20 visitor-items-userInfo">
					<tm-icons class="mr-20" name="icon-position-fill"></tm-icons>
					{{userInfo.cityAdress || ''}}{{userInfo.address}}
				</view>
			</tm-sheet>
			<view class="my-20 mx-40">
				<tm-button openType="share" theme="bg-gradient-blue-accent" :round="24" block>介绍ta给朋友
				</tm-button>
			</view>
			<view class="my-20 mx-32">
				<tm-button @click="keepClick" theme="transparent" :round="24" block>保存到通讯录
				</tm-button>
			</view>
			<tm-sheet :shadow="24" :padding="[0, 0]">
				<!-- <view class="gray text-size-s text-align-right" style="padding:20rpx 46rpx;">
					{{count_str}}
				</view> -->
				<tm-grid :grid="4" @change="change" :list="grid"></tm-grid>
			</tm-sheet>
			<!-- 			<tm-sheet>
				<tm-empty icon="icon-cry-fill" label="还没有访客哦"></tm-empty>
			</tm-sheet> -->
			<tm-sheet :shadow="24" :padding="[0, 0]">
				<view class="mx-32 pt-15 text-weight-b text-overflow-2 text-size-g">
					企业介绍
				</view>
				<text decode user-select space class="text-size-s gray pa-24 d-inline-block">
					{{introduce}}
				</text>
			</tm-sheet>
			<tm-sheet @click="openAddress" :shadow="24" :padding="[0, 0]">
				<view class="mx-32 pt-15 text-weight-b text-overflow-2 text-size-g">
					详细地址
				</view>
				<view class="my-20 visitor-items-userInfo">
					<tm-icons class="mx-10" name="icon-position-fill"></tm-icons>{{userInfo.cityAdress || ''}}{{userInfo.address}}
				</view>
				<map :markers="covers" :latitude="userInfo.latitude" :longitude="userInfo.longitude"
					style="width: 100%;height: 300rpx;"></map>
			</tm-sheet>
			<tm-sheet @click="openAddress" :shadow="24" :padding="[0, 0]">
				<view class="mx-32 pt-15 text-weight-b text-overflow-2 text-size-g">
					我的动态
				</view>
				<tm-empty icon="icon-cry-fill" label="还没有动态"></tm-empty>
			</tm-sheet>
		</template>
		<view class="safe-height"></view>
		<l-painter ref="painter" style="position:absolute;top:-1000rpx" />
		<view v-if="" class="suspension">
			<tm-button v-if="user.nickname=='游客'" :open-type="user.nickname=='游客'?'getUserInfo':''"
				@getUserInfo='getUserInfo' :width="90" :height="90" fab :icon-size="50" icon="icon-aliwangwang"></tm-button>
				<tm-button v-else @click="goChat" :width="90" :height="90" fab :icon-size="50" icon="icon-aliwangwang"></tm-button>
		</view >

	</view>
</template>

<script>
	export default {
		data() {
			return {
				userInfo: {},
				grid: [],
				poster: {
					css: {
						background: "linear-gradient(,#aaffff 0%, #0000ff 100%)"
					},
					views: [{
							src: "",
							type: "image",
							css: {
								objectFit: "cover",
								marginLeft: "40rpx",
								marginTop: "40rpx",
								width: "150rpx",
								border: "2rpx solid #fff",
								boxSizing: "border-box",
								height: "150rpx",
								borderRadius: "50%"
							}
						},
						{
							type: "view",
							css: {
								paddingLeft: "20rpx",
								display: "inline-block",
								marginTop: "60rpx",
								marginLeft: "20rpx",
							},
							views: [{
									text: "",
									type: "text",
									css: {
										display: "block",
										color: "#fff",
										fontSize: "32rpx",
										fontWeight: "bold"
									}
								},
								{
									text: "",
									type: "text",
									css: {
										color: "rgba(255,255,255,.7)",
										fontSize: "24rpx",
										marginTop: "20rpx",
									},
								}
							],
						},
						{
							css: {
								marginLeft: "40rpx",
								padding: "32rpx",
								boxSizing: "border-box",
								width: "670rpx",
							},
							views: [{
								views: [{
									type: "view",
									css: {
										width: "478rpx",
										color: "#fff",
										display: "inline-block",
										fontSize: "28rpx",
									},
									views: [{
											text: "",
											type: "text",
											css: {
												display: "block",
												paddingBottom: "10rpx",
												fontWeight: "bold"
											}
										},
										{
											text: "",
											type: "text",
											css: {
												display: "block",
												paddingBottom: "10rpx",

												fontWeight: "bold"
											},
										},
										{
											text: "",
											type: "text",
											css: {
												display: "block",
												paddingBottom: "10rpx",

												fontWeight: "bold"
											},
										}
									],
								}, ],
								type: "view"
							}],
							type: "view"
						}
					]
				},
				urlImg: "",
				card_id: '',
				introduce: '',
				count_str: '',
				covers: []
			}
		},
		computed: {
			user() {
				return this.$tm.vx.state().user.userInfo || {}
			}
		},
		onShareAppMessage(res) {
			return {
				title: '您好，这是我的名片，请惠存',
				path: '/pages/index/detail?card_id=' + this.card_id,
				imageUrl: this.urlImg,
				success: () => {
					this.$point.point(9, '', this.card_id)
				}
			}
		},
		async onLoad(option) {
			if (option) {
				this.card_id = option.card_id
				this.$tm.vx.commit('card/cardId', option.card_id)
				this.$tm.request.post('card/viewread', {
					card_id: option.card_id
				}).then(res => {
					if (res.data) {
						this.userInfo = res.data.card
						this.grid = res.data.grid
						this.count_str = res.data.count_str
						this.covers = [{
							id: 1,
							latitude: this.userInfo.latitude,
							longitude: this.userInfo.longitude,
							iconPath: '/static/location.png'
						}]
						this.introduce = res.data.introduce
						this.poster.views[0].src = this.userInfo.picture
						this.poster.views[1].views[0].text = this.userInfo.name
						this.poster.views[1].views[1].text = this.userInfo.company
						this.poster.views[2].views[0].views[0].views[0].text = "电话:" + this.userInfo.mobile
						this.poster.views[2].views[0].views[0].views[1].text = "地址:" + this.userInfo.address
						this.poster.views[2].views[0].views[0].views[2].text = "邮箱:" + this.userInfo.email
						// 渲染
						this.$refs.painter.render(this.poster);
						// 生成图片
						this.$refs.painter.canvasToTempFilePathSync({
							fileType: "jpg",
							// 如果返回的是base64是无法使用 saveImageToPhotosAlbum，需要设置 pathType为url
							pathType: 'url',
							quality: 1,
							success: (res) => {
								this.shareShow = true
								this.urlImg = res.tempFilePath
								// console.log(res.tempFilePath);
							},
						});
					}
				})
				// this.$point.ponit()
			}
		},
		methods: {
			getUserInfo(e) {
				if (e) {
					this.upData(e.userInfo.nickName, e.userInfo.avatarUrl)
				}
			},
			upData(name, avatar) {
				this.$tm.request.post('user/update', {
					nickname: name,
					avatar: avatar
				}).then(res => {
					this.$tm.vx.commit('user/setUserInfo', res.data)
					this.$tm.request.post('card/viewread', {
						card_id: this.card_id
					}).then(res => {
						let {
							id,
							name,
							uid
						} = res.data.card
						this.chatClick(uid, name, id)
					})
				})
			},
			chatClick(id, name, card_id) {
				uni.navigateTo({
					url: "/subpages/pages/card/cardChat?t_uid=" + id + '&name=' + name + '&card_id=' + card_id
				})
			},
			goChat(){
				let {
					id,
					name,
					uid
				} = this.userInfo
				this.chatClick(uid, name, id)
			},
			openAddress() {
				let that = this
				let latitude = that.userInfo.latitude * 1
				let longitude = that.userInfo.longitude * 1
				uni.openLocation({
					latitude: latitude,
					longitude: longitude,
					success: function() {
						that.$point.point(15, '', that.card_id)
					}
				})

			},
			mobileClick(phone) {
				uni.makePhoneCall({
					phoneNumber: phone
				});
				this.$point.point(8, '', this.card_id)

			},
			copyWx(text, ) {
				uni.setClipboardData({
					data: text
				});
				this.$point.point(14, '', this.userInfo.id)
			},
			copyEmail(text) {
				uni.setClipboardData({
					data: text
				});
			},
			keepClick() {
				let that = this
				uni.addPhoneContact({
					firstName: that.userInfo.name,
					mobilePhoneNumber: that.userInfo.mobile
				});
				this.$point.point(10, '', this.card_id)
			},
			change(e) {
				if(this.user.nickname == '游客'){
					uni.getUserProfile({
						desc: '用于完善会员资料', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
						success: (res) => {
							this.$tm.request.post('user/update', {
								nickname: res.userInfo.nickName,
								avatar: res.userInfo.avatarUrl
							}).then(res => {
								this.$tm.request.get('user/read').then(res=>{
									this.$tm.vx.commit('user/setUserInfo', res.data)
									uni.navigateTo({
										url: e.data.page
									})
								})

							})
						}
					})
				}else{
					console.log(e);
					uni.navigateTo({
						url: e.data.page
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.suspension {
		position: fixed;
		bottom: 200rpx;
		right: 50rpx;
	}
	.visitor-box {
		display: flex;
		justify-content: space-between;
		align-items: center;

		.visitor-items {
			display: flex;
			align-items: flex-start;

			.visitor-items-user {
				padding-left: 20rpx;
				font-size: 28rpx;

				.visitor-items-content {
					margin-top: 10rpx;
					color: #999999;
				}
			}

			.visitor-user-avatar {
				width: 140rpx;
				height: 140rpx;
				border-radius: 50%;
			}

			.visitor-items-avatar {
				width: 90rpx;
				height: 90rpx;
				border-radius: 50%;
			}
		}


	}
</style>