crmcard/pages/list/list.vue

<template>
	<view class="listDetail">
		<uni-menubar title="文章详情" />
		<view v-if="info.content" class="detailBox">
			<!-- <view v-html="info.content"></view> -->
			<view class="title">
				{{info.title}}
			</view>
			<view class="crateTime">{{info.update_time}}</view>
			<view class="px-30 mb-20">
				<mp-html :content="info.content" />
				<view style="display: flex;justify-content: space-between; color: #9e9e9e; font-size:24rpx;margin-top: 15px;">
					<view>阅读  {{info.show_views}}</view>
					<view> {{info.track_count}}人分享</view>
				</view>
				<view style="margin-top: 15px;display: flex;justify-content: flex-end;">
					<tm-button :width="107" theme="blue" titl icon="icon-reply" openType="share">分享</tm-button>
				</view>
			</view>
			<view>
				<tm-sheet color="bg-gradient-blue-accent">
					<view class="cardRow">
						<view class="flexLeft">
							<tm-avatar size="120" titl :round="5" :src="cardInfo.picture">
							</tm-avatar>
						</view>
						<view class="flexRight">
							<view class="nameRow">
								<view class="name">{{cardInfo.name}}</view>
								<view @click="goCardDetail(cardInfo.id)">查看名片 <tm-icons color="gray"
										name="icon-angle-right" :size="20"></tm-icons>
								</view>
							</view>
							<view class="post">{{cardInfo.title}}</view>
						</view>
					</view>
					<view style="margin-top: 15px;">
						<view class="span">
							公司：{{cardInfo.company}}
						</view>
						<view class="span">
							微信号：{{cardInfo.wx}}
						</view>
						<view class="span">
							手机号：{{cardInfo.mobile}}
						</view>
					</view>
				</tm-sheet>
			</view>
			<!-- 推荐文章 -->
			<view>
				<view style="font-size: 34rpx;font-weight: 600;" class="px-30">推荐文章</view>
				<view>
					<view class='art-coin'>
						<block v-for="(item,index) in list" :key="index">
							<view class='art-act' @click="goDetail(item.id)">
								<view class="art-act-imgAndTitle">
									<image v-if="item.pic" class='art-act-l' mode='aspectFill' :src='item.pic'></image>
									<view class="art-act-titleAndTime">
										<view class='act-act-rname'>{{ item.title }}</view>
										<view class="art-act-time">{{item.create_time}}</view>
									</view>
								</view>
								<view class='act-art-rinfo'>
									<view class='act-act-rsort'>{{ item.name }}</view>
									<view class='act-act-rbrowsing'>
										<view class='act-act-rlook'>
											{{ item.show_views > 0 ? item.show_views : item.views }}查看
										</view>
										<view class='act-act-rrelay'>{{ item.track_count }}转发</view>
									</view>
								</view>
							</view>
						</block>
					</view>
				</view>
			</view>
			<view style="height: 50px;"></view>
		</view>
		<!-- <tm-empty v-else icon="icon-cry-fill" label="内容消失了~"></tm-empty> -->

	</view>
</template>

<script>
	export default {
		data() {
			return {
				info: {},
				cate_id: "",
				card_id: "",
				cardInfo: {},
				list: []
			}
		},
		onLoad(option) {
			if (option) {
				this.cate_id = option.id
				this.card_id = option.card_id
				if (option.card_id) {
					this.$tm.request.post('card/viewread', {
						card_id: option.card_id
					}).then(res => {
						this.cardInfo = res.data.card
					})
				}
				this.$tm.vx.commit('card/cardId', option.card_id)
				this.getDetail(option.id)
				this.$point.point(1, option.id, option.card_id)
			}
		},
		onShareAppMessage(res) {
			return {
				title: this.info.title,
				path: '/pages/list/list?id=' + this.cate_id + "&card_id=" + this.card_id,
				imageUrl:this.info.pic,
				success: () => {
					this.$point.point(2, this.cate_id, this.card_id)
				}
			}
		},
		computed: {
			userInfo() {
				return this.$tm.vx.state().user.userInfo || {}
			},
		},
		methods: {
			// 获取文章详情
			getDetail(id) {
				let params = {
					id: id
				}
				params.card_id = this.card_id
				this.$tm.request.post('art/detail', params).then(res => {
					this.info = res.data.detail
					this.list = res.data.list
				})
			},
			goCardDetail(card_id) {
				uni.navigateTo({
					url: '/pages/index/detail?card_id=' + card_id
				})
			},
			goDetail(id) {
				uni.navigateTo({
					url: '/pages/list/list?id=' + id + "&card_id=" + uni.getStorageSync('card_id')
				})
			}
		}
	}
</script>
<style scoped lang="scss">
	.listDetail {
		background-color: #fff;
	}

	.title {
		font-size: 38rpx;
		font-weight: 600;
		padding: 20px;
	}

	.crateTime {
		padding-left: 20px;
		color: #9E9E9E;
		margin-bottom: 20px;
	}

	.cardRow {
		display: flex;
		flex-direction: row;

		// justify-content: center;
		// align-items: center;
		.flexLeft {
			margin-right: 15px;
		}

		.flexRight {
			flex: 1;

			.nameRow {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;
				font-size: 22rpx;
				// color: #9E9E9E;

				.name {
					// color: #000;
					font-size: 34rpx;
					// font-weight: bold;
				}
			}

			.post {
				font-size: 32rpx;
				// color: #9E9E9E;
				margin-top: 20rpx;
			}
		}
	}

	.span {
		// color: #2196F3;
		font-size: 28rpx;
		margin-top: 10rpx;
	}

	.art-act {
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		margin: 1rem 20rpx 0 20rpx;
		box-shadow: 0px 1px 5px #EEEEEE;
		border-radius: 5px;
		background: #fff;
	}

	/* .art-act:last-child{
	  border-bottom: 0;
	} */
	.art-act-time {
		font-size: 24rpx;
		color: #aaa;
		margin-top: 3vw;
	}

	.art-act-imgAndTitle {
		display: flex;
		flex-direction: row-reverse;
		align-items: center;
		justify-content: space-between;
		padding: 3vw 0;
		margin: 0 3vw;
		border-bottom: 1px solid #eee;
	}

	.art-act-titleAndTime {
		display: flex;
		flex-direction: column;
		flex: 1;
		justify-content: space-between;
	}

	.art-act-l {
		width: 250rpx;
		height: 150rpx;
		margin-left: 3vw;
	}

	.act-act-rname {
		font-size: 30rpx;
		font-weight: 530;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
		word-break: break-all;
		flex: 1;
	}

	.act-art-rinfo {
		display: flex;
		flex-direction: row-reverse;
		align-items: center;
		justify-content: space-between;
		font-size: 26rpx;
		color: #888888;
		padding: 4vw 0;
		margin: 0 3vw;
	}

	.act-act-rsort {
		/*color: #fff;
	  padding: 6rpx 20rpx;
	  background: #00a1e9;
	  border-radius: 2px;*/
	}

	.act-act-rbrowsing {
		display: flex;
		align-items: center;
	}

	.act-act-rrelay {
		margin-left: 20rpx;
	}

	/*底部tabbar*/
	.blank {
		height: 126rpx;
	}

	.art-tabbar {
		width: 100%;
		height: 120rpx;
		position: fixed;
		bottom: 0;
		z-index: 99;
		display: flex;
		justify-content: center;
	}

	.art-tabbar view {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		border: 1px solid #eeeeee;
		position: absolute;
		top: -34rpx;
		background-color: #ffffff;
	}

	.art-bar {
		position: fixed;
		display: flex;
		align-items: center;
		width: 100%;
		bottom: 0;
		border-top: 1px solid #eeeeee;
		z-index: 100;
		background-color: #ffffff;
	}

	.art-bar-act {
		flex: 1;
		display: flex;
		flex-flow: column;
		align-items: center;
		height: 120rpx;
		justify-content: flex-end;
	}

	/* .art-tabbar-on{
	  color:#55b537;
	} */
	.art-bar-act text {
		font-size: 50rpx;
		line-height: 50rpx;
	}

	.art-bar-act view {
		font-size: 24rpx;
		margin: 10rpx 0;
	}

	.art-bar-among {
		flex: 1;
		height: 120rpx;
		display: flex;
		justify-content: center;
		position: relative;
	}

	.art-bar-pic {
		position: absolute;
		font-size: 100rpx;
		top: -30rpx;
		line-height: 100rpx;
		/* border:1px solid #eeeeee; */
		border-radius: 50%;
		background-color: #ffffff;
	}

	.art-bar-tit {
		font-size: 24rpx;
		position: absolute;
		bottom: 10rpx;
	}

	.art-bar-act image {
		width: 50rpx;
	}

	.art-bar-among image {
		position: absolute;
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		background-color: #ffffff;
		top: -26rpx;
	}
</style>