crmcard/pages/my/index.vue

<template>
	<view class="myIndex">
		<uni-menubar title="我的名片" />
		<view class="pure_top blue">

		</view>
		<!-- 顶部自定义导航栏 -->
		<tm-sheet v-if="card.id">
			<view class="visitor-box text-size-s">
				<view class="visitor-items">
					<view>
						<image class="visitor-user-avatar" :src="card.picture"></image>
					</view>
					<view class="visitor-items-user">
						<view class="text-weight-b">
							<text class="mr-20">{{card.name}} </text>
							<!-- <tm-button theme="orange" plan  icon="icon-integral" size="s"></tm-button> -->
						</view>
						<view class="visitor-items-content">{{card.industry}}</view>
						<view class="visitor-items-content">{{card.company}}</view>
						<view class="visitor-items-content">
							<text style="font-size: 24rpx;">会员：{{getVip(user.vip_last_time)}}</text>
						</view>
					</view>
				</view>
				<view>
					<!-- <tm-icons name="icon-menu" color="darkgray"></tm-icons> -->
					<tm-icons color="orange" :size="50" name="icon-integral"></tm-icons>
				</view>
			</view>
			<view class="recent-items">
				<view>
					<view>{{card.views}}</view>
					<view class="recent-items-title">最近访客</view>
				</view>
				<view>
					<view>{{card.view_count}}</view>
					<view class="recent-items-title">最近查看</view>
				</view>
				<view>
					<view>{{card.recommend}}</view>
					<view class="recent-items-title">给我点赞</view>
				</view>
			</view>
		</tm-sheet>
		<tm-sheet v-else>
			<view
				style="display: flex; margin-top: 20rpx; height: 200rpx; align-items: center;  justify-content: space-around;">
				<!-- <tm-button @click="register" :font-size="24" :round="24" theme="bg-gradient-blue-accent" size="g">立即注册
				</tm-button> -->
			</view>
		</tm-sheet>
		<!-- 主题内容 -->
		<!-- 		<tm-sheet>
			<tm-grid :grid="4" @change="change" color="blue" :list="list"></tm-grid>
		</tm-sheet> -->
		<uni-tabBar />
		<view class="mx-32 text-weight-b  text-size-g">
			其他服务
		</view>
		<view>
			<tm-sheet :margin="[0,0]">
				<tm-grouplist :margin="[0,0]" :round="0" :shadow="0" :border-bottom="false">
					<!-- <tm-listitem :left-icon-size="40" title="使用指引" left-icon="tmicon-yiwen2x" show-left-icon></tm-listitem> -->
					<tm-listitem left-icon-color="blue" :left-icon-size="40" title="建议与反馈" left-icon="icon-new-releases" show-left-icon>
						<template v-slot:rightIcon>
							<view>
								<tm-button theme="grey" titl icon="icon-angle-right" :width="20" :height="20" open-type="feedback"></tm-button>
							</view>
						</template>
					</tm-listitem>
					<tm-listitem left-icon-color="blue" :left-icon-size="40" title="联系客服" left-icon="icon-headset-fill"
						show-left-icon>
						<template v-slot:rightIcon>
							<view>
								<tm-button theme="grey" titl icon="icon-angle-right" :width="20" :height="20" open-type="contact"></tm-button>
							</view>
						</template>

					</tm-listitem>
					<tm-listitem left-icon-color="blue"  :left-icon-size="40" title="设置"  left-icon="icon-cog-fill"
						show-left-icon>
						<template v-slot:rightIcon>
							<tm-button theme="grey" titl icon="icon-angle-right" :width="20" :height="20" open-type="openSetting"></tm-button>
						</template>
					</tm-listitem>
					<!-- <tm-listitem :left-icon-size="40" title="关于" left-icon="tmicon-guanyuwomen" show-left-icon></tm-listitem> -->
				</tm-grouplist>
			</tm-sheet>
		</view>

		<uni-suspension v-if='userInfo.card_id' />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				card:{},
				vipLastTime: ""
			}
		},
		onLoad() {
			if (this.userInfo) {
				this.getVip()
			}
		},
		onShow() {
			this.$tm.request.get('card/read').then(res => {
				this.card = res.data
			})
		},
		computed: {
			user() {
				return this.$tm.vx.state().user.userInfo || {}
			}
		},
		methods: {
			getVip(val) {
				let date = new Date();
				date.setTime(val * 1000);
				let y = date.getFullYear()
				let m = date.getMonth() + 1
				let mm = m < 10 ? '0' + m : m
				let d = date.getDate()
				let dd = d < 10 ? '0' + d : d
				let h = date.getHours();
				let hh = h < 10 ? ("0" + h) : h;
				let M = date.getMinutes();
				let MM = M < 10 ? ("0" + M) : M;
				let S = date.getSeconds();
				let ss = S < 10 ? ("0" + S) : S;
				return `${y}-${mm}-${dd} ${hh}:${MM}:${ss}`
			}
		}
	}
</script>

<style lang="scss" scoped>
	.visitor-box {
		display: flex;
		justify-content: space-between;

		.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: 160rpx;
				height: 160rpx;
				border-radius: 50%;
			}

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


	}

	.recent-items {
		padding-top: 20rpx;
		display: flex;
		align-items: center;
		justify-content: space-around;
		text-align: center;
		font-weight: 600;

		.recent-items-title {
			font-weight: 400;
			color: #4a5260;
		}
	}
</style>