weapp-v1/pages/hot/hot.vue

<template>
	<view v-if="show">
		<view v-if="url" class="yuan" @click="getImg">
			预览大图
		</view>
		<scroll-view class="scroll-view_H" scroll-x="true" >
			<image src="https://api.jiuweiyun.cn/public/uploads/hotList-bg.png" mode="heightFix" style="height: 100vh; overflow-y: hidden;" class="bg">
				<view class="box-text">
					大卫博士卖货学位争霸赛第{{ userServerInfo.season | numToZh}}季
				</view>
				<view class="nav">
					<view class="box-fix">
						<view class="fix-item" v-for="(item,index) in list" :key="index">
							<image :src="item" mode="widthFix" style="width: 160rpx;" @click="getID(index+3)"></image>
						</view>
					</view>
					<view class="right">
						<view class="right-box" v-for="(item,index) in headerList" :key="index">
							<view class="right-text">学霸</view>
							<view class="right-image">
								<image :src="item" mode="widthFix" style="width: 160rpx;" @click="getID(index)"></image>
							</view>
						</view>
					</view>
				</view>
		</scroll-view>
	</view>
</template>
<script>
	import { GetWall } from "@/api.js"
	export default {
		data() {
			return {
				url: false,
				show: false,
				urlData: '',
				imgs: [],
				headerList: [],
				list: [],
				lists: [],
			}
		},
		onShow() {
			this.toGetWall()
		},
		computed: {
			userServerInfo() {
				return this.$store.state.userServerInfo
			}
		},
		methods: {
			// 判断荣誉榜单
			toGetWall() {
				this.$ajax.get(`${GetWall}`).then(([, { data: res }]) => {
					if(res.code === 200) {
						this.show = true
						this.list = res.data.honor_list
						this.headerList = res.data.honor_list_top
						if (res.data.url) {
							this.url = true
							this.urlData = res.data.url
						}
					} else {
						uni.showModal({
						    title: '提示',
						    content: res.msg || '暂未生成',
							showCancel: false,
						    success: function (res) {
						        if (res.confirm) {
						            uni.navigateBack({
						            	delta: 1
						            })
						        } 
						    }
						})
					}
				})
			},
			// 预览整张图片
			getImg() {
				// this.imgs = [this.urlData]
				uni.previewImage({ urls: [this.urlData] })
				// uni.previewImage({
				// 	urls: this.imgs,
				// })
			},
			// 预览单张图片
			getID(i) {
				this.imgs = this.headerList.concat(this.list)
				uni.previewImage({
					urls: this.imgs,
					current: this.imgs[i],
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		height: 100%;
	}
	.yuan {
		position: fixed;
		top: 85rpx;
		left: 30rpx;
		z-index: 5;
		width: 228rpx;
		height: 79rpx;
		background: linear-gradient(92deg, #FF580E 0%, #FFBB18 100%);
		border-radius: 5rpx;
		text-align: center;
		line-height: 79rpx;
		color: #fff;
		font-size: 38rpx;
	}
	.scroll-view_H {
		height: 100vh;
	}
	.bgk {
		width:100%;
		min-height:100%;
		background-size:100% 100%;
	}
	.bg{
		width:4236rpx!important;
		max-width: none!important;
	}

	.yulan {
		background-color: #F0AD4E;
		width: 150rpx;
		height: 50rpx;
	}
	.nav {
		position: absolute;
		height: 100vh;
		left: 109rpx;
		top: 8%;
		display: flex;
		align-items: center;
	}
	.box {
		position: relative;
		&-text {
			position: absolute;
			width: 960rpx;
			top: 12%;
			left: 1748rpx;
			color: #997CEF;
			font-size: 46rpx;
			// font-weight: bold;
		}
		// width: 3542rpx;
		// height: 1594rpx;
		&-fix {
			width: 3825rpx;
			// width: 146rpx;
			// height: 176rpx;
			// background-color: #808080;
			display: flex;
			flex-wrap:wrap;
			.fix-item {
				width: 159rpx;
				height: 190rpx;
				background-color: #808080;
				margin-right: 32rpx;
				margin-bottom: 0.5%;
			}
		}
	}
	.right {
		display: flex;
		flex-direction: column;
		&-box {
			display: flex;
			align-items: center;
			margin-bottom: 65rpx;
		}
		&-text {
			width: 30rpx;
			color: #D90D18;
			font-size: 36rpx;
			white-space:pre-wrap;
			font-weight: bold;
			margin-right: 20rpx;
		}
		&-image {
			width: 146rpx;
			height: 176rpx;
			background-color: #808080;
		}
	}
</style>