crmcard/pages/index/index.vue

<template>
	<view class="pageIndex">
		<uni-menubar title="我的名片" />
		<view class="pure_top"></view>
		<template v-if="user.uid">
			<template v-if='user.card_id>0'>
				<view>
					<tm-sheet :shadow="25">
						<view class="visitor-box text-size-s">
							<view class="visitor-items">
								<view>
									<image class="visitor-user-avatar" :src="userInfo.picture"></image>
								</view>
								<view class="visitor-items-user">
									<view class="text-weight-b">{{userInfo.name}}({{userInfo.title}})</view>
									<view class="visitor-items-content">{{userInfo.industry}}</view>
									<view class="visitor-items-content">{{userInfo.company}}</view>
								</view>
							</view>
							<view>
								<image :src="ewm" style="width: 80rpx;height: 80rpx;" mode="" @click="previewImage"></image>
							</view>
						</view>
						<view class="my-20 visitor-items-userInfo">
							<tm-icons class="mr-20" name="icon-phone"></tm-icons>{{userInfo.mobile}}
						</view>
						<view class="visitor-items-userInfo">
							<tm-icons class="mr-20" name="icon-mail"></tm-icons>{{userInfo.email}}
						</view>
						<view class="my-20 visitor-items-userInfo">
							<tm-icons class="mr-20" name="icon-aliwangwang"></tm-icons>{{userInfo.wx}}
						</view>
						<view 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="mx-32 my-50">
						<tm-row>
							<tm-col :grid="4">
								<tm-badges :offset="[-10,-15]" :dot="false" :label="userInfo.views"></tm-badges>
								<view>
									<tm-icons name="icon-eye"></tm-icons>
									<text class="pl-10"> 人气 </text>
								</view>
							</tm-col>
							<tm-col :grid="4">
								<tm-badges v-if="userInfo.collected" :offset="[-10,-15]" :dot="false" :label="userInfo.collected"></tm-badges>
								<view>
									<tm-icons name="icon-collection"></tm-icons>
									<text class="pl-10"> 收藏 </text>
								</view>
							</tm-col>
							<tm-col :grid="4">
								<tm-badges v-if="userInfo.recommend" :offset="[-10,-15]" :dot="false" :label="userInfo.recommend"></tm-badges>
								<view>
									<tm-icons name="icon-like"></tm-icons>
									<text class="pl-10"> 点赞 </text>
								</view>
							</tm-col>
						</tm-row>
					</view>
					<view class="my-20 mx-32">
						<tm-button openType="share" :theme="`bg-gradient-${$tm.vx.state().tmVuetify.color}-accent`" :round="24" block>发名片
						</tm-button>
					</view>
					<view class="my-20 mx-32"> 
						<tm-button @click="goDetail()" :text="true" :round="24" block>预览名片
						</tm-button>
					</view>
					<tm-sheet :shadow="25">
						<view class="px-32 mb-20 text-weight-b text-overflow-2 text-size-g"
							style="width: 100%; box-sizing: border-box;">
							我的
						</view>
						<tm-grid :grid="4" @change="change" :list="list"></tm-grid>
					</tm-sheet>
					<view class="px-32 mb-20 text-weight-b text-overflow-2 text-size-g"
						style="width: 100%; box-sizing: border-box;">
						最近访客
					</view>
					<view v-if="visitorList.length>0">
						<tm-sheet :shadow="4" v-for="(item,index) in visitorList" :key="index">
							<view class="visitor-box text-size-s">
								<view class="visitor-items">
									<view>
										<tm-avatar size="120" :src="item.avatar"></tm-avatar>
									</view>
									<view class="visitor-items-user">
										<view class="text-weight-b">{{item.nickname?item.nickname:'游客'}}</view>
										<view class="visitor-items-content">{{item.label}}</view>
									</view>
								</view>
								<view>
									<tm-menu @change="menuListClick(item,$event)" direction="top" black
										tip-direction="right" :list="['发起聊天','查看轨迹']">
										<tm-icons name="icon-gengduo" color="darkgray"></tm-icons>
									</tm-menu>
								</view>
							</view>
						</tm-sheet>
						<view style="height: 50rpx;"></view>
					</view>
					<view v-else>
						<tm-sheet>
							<tm-empty icon="icon-cry-fill" label="您还没有访客"></tm-empty>
						</tm-sheet>
					</view>

				</view>
				<!-- <tm-shareSheet @change="onclick" :actions="shareList" v-model="shareShow"></tm-shareSheet> -->
			</template>

			<view class="mt-50" v-else>
				<view style="height: 200rpx;"></view>
				<view style="display: flex;justify-content: space-around;">
					<tm-button @click="register" :font-size="24" :round="24" theme="bg-gradient-blue-accent" size="g">
						立即注册
					</tm-button>
				</view>
			</view>
		</template>


		<l-painter ref="painter" style="position:fixed;top:-100000000px" />
		<uni-tabBar v-if='user.card_id>0'/>
		<uni-suspension v-if='user.card_id>0' />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				shareShow: false,
				shareList: [
					[{
							name: "发名片",
							icon: "icon-terminal",
							type: "share"
						},
						{
							name: "扫一扫",
							icon: "icon-scan",
							type: "scan"
						},

					]
				],
				value: '',
				list: [],
				poster: {},
				urlImg: "",
				userInfo: {},
				ewm:''
			}
		},

		computed: {
			user() {
				return this.$tm.vx.state().user.userInfo || {}
			},
			visitorList() {
				return this.$tm.vx.state().track.trackList || []
			}
		},
		onShareAppMessage(res) {
			return {
				title: '您好，这是我的名片，请惠存',
				path: '/pages/index/detail?card_id=' + this.user.card_id,
				imageUrl: this.urlImg
			}
		},
		onLoad() {
			uni.$on('onTrack', function(data) {
				that.visitorList = data.data
			})
		},
		onPullDownRefresh() {
			this.$tm.request.get('card/read').then(res => {
				if (res.data.card_id) {
					this.userInfo = res.data
					this.showCard()
					this.$tm.request.post('index/common').then(res => {
						this.list = res.data.index_grid
					})
				}
			})
		},
		async onShow() {
			await this.$tm.request.get('card/read').then(res => {
				if (res.data.card_id) {
					this.userInfo = res.data
					this.$tm.request.post('index/common').then(res => {
						this.list = res.data.index_grid
						this.showCard(res.data.share_thumb)
					})
					this.$tm.request.post('card/qr', {
						page: "/pages/index/index",
						scene: "card_id=" + res.data.card_id
					}).then(res => {
						this.ewm = res.data
					})
				}
			})
		},
		methods: {
			register() {
				uni.navigateTo({
					url: '/subpages/pages/card/addCard'
				})
			},
			menuListClick(item, e) {
				if (e.index === 0) {
					uni.navigateTo({
						url: "/subpages/pages/card/cardChat?t_uid=" + item.uid + '&name=' + item.nickname +
							'&card_id=' + this.userInfo.card_id
					})
				} else if (e.index === 1) {
					uni.navigateTo({
						url: "/subpages/pages/radar/drawPage?id=" + item.uid
					})
				}
			},
			showCard(share_thumb) {
				this.poster = {
					css: {
						width: '500rpx',
						height: '400rpx',
						background: share_thumb.bg
					},
					views: [{
							src: this.userInfo.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.userInfo.name,
									type: "text",
									css: {
										display: "block",
										color: share_thumb.fontColor,
										fontSize: "28rpx",
										fontWeight: "bold"
									}
								},
								{
									text: this.userInfo.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.userInfo.mobile,
											type: "text",
											css: {
												display: "block",
												paddingBottom: "10rpx",
												fontWeight: "bold"
											}
										},
										{
											text: "微信:" + this.userInfo.wx,
											type: "text",
											css: {
												display: "block",
												paddingBottom: "10rpx",
												fontWeight: "bold"
											}
										},
										{
											text: "地址:" + this.userInfo.cityAdress + this.userInfo.address,
											type: "text",
											css: {
												display: "block",
												paddingBottom: "10rpx",
												fontWeight: "bold"
											},
										},
										{
											text: "邮箱:" + this.userInfo.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);
					},
				});
			},
			onclick(e) {
				if (e.data.type === 'scan') {
					uni.scanCode({
						scanType: ['barCode'],
					});
				}
			},
			goDetail() {
				uni.navigateTo({
					url: '/pages/cardList/cardDetail?card_id=' + uni.getStorageSync('card_id')
				});

			},
			change(e) {
				uni.navigateTo({
					url: e.data.page
				});
			},
			previewImage() {
				uni.previewImage({
					urls: [this.ewm],
					longPressActions: {
						itemList: ['发送给朋友', '保存图片', '收藏'],
						success: function(data) {
							
						},
						fail: function(err) {
							
						}
					}
				});
			}
		}
	}
</script>

<style lang="scss">
	.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%;
			}
		}


	}

	.tm-menu .tm-menu-block.center {
		left: calc(50% - 280rpx) !important;
	}
</style>