crmcard/pages/cardList/cardDetail.vue

<template>
	<view class="cardDetail">
		<uni-menubar :title="cardInfo.name" />
		<view class="pure_top"></view>
		<template>
			<tm-sheet :shadow="25">
				<view class="visitor-box text-size-s">
					<view class="visitor-items">
						<view>
							<image class="visitor-user-avatar" :src="cardInfo.picture"></image>
							<!-- <image class="visitor-user-avatar"></image> -->
						</view>
						<view class="visitor-items-user">
							<view class="text-weight-b">{{cardInfo.name}}</view>
							<view class="visitor-items-content">{{cardInfo.industry}}</view>
							<view class="visitor-items-content">{{cardInfo.company}}</view>
						</view>
					</view>
					<view>
						<image :src="ewm" style="width: 80rpx;height: 80rpx;" mode="" @click="previewImage"></image>
					</view>
				</view>
				<view @click="mobileClick(cardInfo.mobile)" class="my-20 visitor-items-userInfo">
					<tm-icons class="mr-20" name="icon-phone"></tm-icons>{{cardInfo.mobile}}
				</view>
				<view @click="copyWx(cardInfo.wx)" class="my-20 visitor-items-userInfo">
					<tm-icons class="mr-20" name="icon-aliwangwang"></tm-icons>{{cardInfo.wx}}
				</view>
				<view @click="copyEmail(cardInfo.email)" class="my-20 visitor-items-userInfo">
					<tm-icons class="mr-20" name="icon-mail"></tm-icons>{{cardInfo.email}}
				</view>
				<view @click="openAddress" class="my-20 visitor-items-userInfo">
					<tm-icons class="mr-20" name="icon-position-fill"></tm-icons>
					{{cardInfo.cityAdress || ''}}{{cardInfo.address}}
				</view>
			</tm-sheet>
			<view class="mx-50 mt-40">
				<tm-button openType="share" theme="bg-gradient-blue-accent" :round="24" block>介绍ta给朋友
				</tm-button>
			</view>
			<view class="mx-50 mt-30">
				<tm-button @click="keepClick" :text="true" :round="24" block>保存到通讯录
				</tm-button>
			</view>
			<tm-sheet :shadow="25" :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="25" :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 pa-24 d-inline-block">
					{{introduce}}
				</text>
			</tm-sheet>
			<tm-sheet @click="openAddress" :shadow="25" :padding="[0, 20]">
				<view class="mx-32 pt-15 text-weight-b text-overflow-2 text-size-g">
					详细地址
				</view>
				<view class="my-20 pa-20">
					<tm-icons class="mx-10" name="icon-position-fill"></tm-icons>
					{{cardInfo.cityAdress || ''}}{{cardInfo.address}}
				</view>
				<view class="my-20 pa-20">
					<map :markers="covers" :latitude="cardInfo.latitude" :longitude="cardInfo.longitude"
						style="width: 100%;height: 300rpx;"></map>
				</view>

			</tm-sheet>
			<tm-sheet @click="openAddress" :shadow="25" :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" />
		<!-- <uni-suspension></uni-suspension> -->
		<view v-if="userID != card_id" class="suspension">
			<tm-button @click="goChat" :width="90" :height="90" fab :icon-size="50" icon="icon-aliwangwang"
				theme="blue"></tm-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				cardInfo: {},
				grid: [],
				poster: {},
				urlImg: "",
				card_id: '',
				introduce: '',
				count_str: '',
				covers: [],
				userID: uni.getStorageSync('card_id'),
				ewm: ''
			}
		},
		onShareAppMessage(res) {
			return {
				title: '您好，这是我的名片，请惠存',
				path: '/pages/index/detail?card_id=' + this.card_id,
				imageUrl: this.urlImg,
				success: () => {
					this.$point.point(9, '', this.card_id)
				}
			}
		},
		onLoad(option) {
			if (option) {
				this.card_id = option.card_id
				this.$tm.request.post('card/viewread', {
					card_id: option.card_id
				}).then(res => {
					if (res.data) {
						this.cardInfo = res.data.card
						this.grid = res.data.grid
						this.count_str = res.data.count_str
						this.covers = [{
							id: 1,
							latitude: this.cardInfo.latitude,
							longitude: this.cardInfo.longitude,
							iconPath: '/static/location.png'
						}]
						this.introduce = res.data.introduce
						this.$tm.request.post('index/common').then(res => {
							this.showCard(res.data.share_thumb)
						})
						this.$tm.request.post('card/qr', {
							page: "/pages/index/index",
							uid: this.cardInfo.uid,
							scene: "card_id=" + this.card_id
						}).then(res => {
							this.ewm = res.data
						})
					}
				})
				// this.$point.ponit()
			}
		},
		methods: {
			showCard(share_thumb) {
				this.poster = {
					css: {
						width: '500rpx',
						height: '400rpx',
						background: share_thumb.bg
					},
					views: [{
							src: this.cardInfo.picture,
							type: "image",
							css: {
								objectFit: "cover",
								marginLeft: "20rpx",
								marginTop: "40rpx",
								width: "100rpx",
								border: "2rpx solid #fff",
								boxSizing: "border-box",
								height: "100rpx",
								borderRadius: "50%"
							}
						},
						{
							type: "view",
							css: {
								paddingLeft: "10rpx",
								display: "inline-block",
								marginTop: "50rpx",
								marginLeft: "20rpx",
							},
							views: [{
									text: this.cardInfo.name,
									type: "text",
									css: {
										display: "block",
										color: share_thumb.fontColor,
										fontSize: "28rpx",
										fontWeight: "bold"
									}
								},
								{
									text: this.cardInfo.company,
									type: "text",
									css: {
										color: share_thumb.fontColor,
										fontSize: "24rpx",
										marginTop: "10rpx",
									},
								}
							],
						},
						{
							css: {
								marginLeft: "20rpx",
								padding: "12rpx",
								boxSizing: "border-box",
								width: "500rpx",
								height: "400rpx"
							},
							views: [{
								views: [{
									type: "view",
									css: {
										width: "460rpx",
										color: share_thumb.fontColor,
										display: "inline-block",
										fontSize: "24rpx",
									},
									views: [{
											text: "电话:" + this.cardInfo.mobile,
											type: "text",
											css: {
												display: "block",
												paddingBottom: "10rpx",
												fontWeight: "bold"
											}
										},
										{
											text: "微信:" + this.cardInfo.wx,
											type: "text",
											css: {
												display: "block",
												paddingBottom: "10rpx",
												fontWeight: "bold"
											}
										},
										{
											text: "地址:" + this.cardInfo.cityAdress + this
												.cardInfo.address,
											type: "text",
											css: {
												display: "block",
												paddingBottom: "10rpx",
												fontWeight: "bold"
											},
										},
										{
											text: "邮箱:" + this.cardInfo.email,
											type: "text",
											css: {
												display: "block",
												paddingBottom: "10rpx",
												fontWeight: "bold"
											},
										}
									],
								}, ],
								type: "view"
							}],
							type: "view"
						}
					]
				}
				// 渲染
				this.$refs.painter.render(this.poster);
				// 生成图片
				this.$refs.painter.canvasToTempFilePathSync({
					fileType: "jpg",
					// 如果返回的是base64是无法使用 saveImageToPhotosAlbum，需要设置 pathType为url
					pathType: 'url',
					quality: 1,
					success: (res) => {
						this.urlImg = res.tempFilePath
						// console.log(res.tempFilePath);
					},
				});
			},
			goChat() {
				let {
					id,
					name,
					uid
				} = this.cardInfo
				uni.navigateTo({
					url: "/subpages/pages/card/cardChat?t_uid=" + uid + '&name=' + name + '&card_id=' + id
				})
			},
			openAddress() {
				let that = this
				let latitude = that.cardInfo.latitude * 1
				let longitude = that.cardInfo.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.cardInfo.id)
			},
			copyEmail(text) {
				uni.setClipboardData({
					data: text
				});
			},
			keepClick() {
				let that = this
				uni.addPhoneContact({
					firstName: that.cardInfo.name,
					mobilePhoneNumber: that.cardInfo.mobile
				});
				this.$point.point(10, '', this.card_id)
			},
			change(e) {
				if (e.data.appid) {
					uni.navigateToMiniProgram({
						appId: e.data.appid,
						path: e.data.page
					})
				} else {
					uni.navigateTo({
						url: e.data.page
					})
				}

			},
			previewImage() {
				uni.previewImage({
					urls: [this.ewm],
					longPressActions: {
						itemList: ['发送给朋友', '保存图片', '收藏'],
						success: function(data) {
							
						},
						fail: function(err) {
							
						}
					}
				});
			}
		}
	}
</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;
				}
			}

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

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


	}
</style>