dev/dcp-app-gate/pages/information/components/rankTop.vue

<template>
	<view class="rankTop">
		<u-navbar :back-text="i18n('Back')" :back-text-style="backStyle" back-icon-color="#fff" title-color="#fff"
			:title="i18n('ClickRank')" :background="background">
		</u-navbar>
		<view class="rank-list-box">
			<!-- <view>
				<image class="topImg" v-if="topImg" :src="websiteUrl + topImg" mode=""></image>
			</view> -->
			<view class="rank-list" v-for="(list,index) in hitsList" v-if="informationMap[list]"
				:key="informationMap[list].baseEntityId" @tap="toRankDetail"
				:data-key="informationMap[list].baseEntityId">
				<view class="order">
					<text class="order-text">{{ index+1 }}</text>
				</view>
				<view class="cont" :style="{width: informationMap[list].pictureUrl? '420rpx': '628rpx'}">
					<view>
						<text class="cont-title u-line-2">{{informationMap[list]?informationMap[list].title:''}}</text>
					</view>
					<view class="cont-sm">
						<text class="cont-text">{{informationMap[list]?informationMap[list].auther:''}}</text>
						<text
							class="time">{{ formatDate(informationMap[list]?informationMap[list].publishDate:'') }}</text>
					</view>
				</view>
				<view class="cont-img" v-if="informationMap[list].pictureUrl ">
					<img class="img" :src="informationMap[list]?websiteUrl + informationMap[list].pictureUrl:''"
						mode="" />
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				background: {
					backgroundImage: 'linear-gradient(270deg, #4BC0E2 0%, #538BE7 100%)',
				},
				backStyle: {
					color: '#fff'
				},
				hitsList: [],
				topImg: '',
				topClickList: {},
				informationMap: {},
			}
		},
		onLoad() {
			uni.setNavigationBarTitle({
				title: this.$i18n.locale == 'zh' ? '点击排行' : 'Click ranking'
			});
		},
		onShow() {
			this.getHitsList();
		},
		methods: {
			i18n(data) {
				return this.$t('common.' + data);
			},
			async getHitsList() { //点击排行
				let that = this;
				let list = {
					pageSize: 3,
					language: getApp().$i18n.locale.toUpperCase(),
					businessType: "information",
				}
				const res = await getApp().$myRequest({
					url: '/cms/cmsInformationClicks/topClickList',
					data: {
						...list
					}
				});
				// console.log(res);
				that.topClickList = res.data.topClickList;
				that.hitsList = that.topClickList[1];
				that.informationMap = res.data.informationMap;
			},
			toRankDetail(e) { //去点击详情
				let key = e.currentTarget.dataset.key;
				uni.navigateTo({
					url: './rankDetail?key=' + key
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.rankTop {
		padding: 0 30upx;
		background-color: #FFFFFF;

		.topImg {
			width: 100%;
			height: 300upx;
			margin-top: 20upx;
		}

		.rank-list {
			padding: 30upx 0;
			border-bottom-width: 1px;
			border-bottom-style: solid;
			border-bottom-color: #f1f1f1;
			/* #ifndef APP-PLUS-NVUE */
			display: flex;
			/* #endif */
			flex-direction: row;
			justify-content: space-between;
		}

		.rank-list:last-child {
			border-bottom: none;
		}

		.order-text {
			display: inline-block;
			width: 40upx;
			height: 40upx;
			line-height: 40upx;
			text-align: center;
			color: #FFFFFF;
			border-radius: 8upx;
			background-color: #53a6ff;
			margin-top: 4upx;
			font-size: 26upx;
		}

		.rank-list:nth-child(1) .order-text {
			background-color: #f66600;
		}

		.rank-list:nth-child(2) .order-text {
			background-color: #ff995f;
		}

		.rank-list:nth-child(3) .order-text {
			background-color: #ffcd5d;
		}

		.cont-title {
			height: 92upx;
			color: #333333;
			font-size: 32upx;
			font-weight: 700;
			text-align: left;
			lines: 2;
			text-overflow: ellipsis;
			overflow: hidden;
			display: -webkit-box;
			-webkit-line-clamp: 2;
			-webkit-box-orient: vertical;
		}

		.cont-sm {
			margin-top: 16upx;
			flex-direction: row;
		}

		.cont-text {
			font-size: 28upx;
			color: #999999;
		}

		.time {
			margin-left: 30upx;
			font-size: 28upx;
			color: #999999;
		}

		.img {
			width: 185upx;
			height: 140upx;
		}

	}
</style>