vue-insagent-app/pages/tools/poster/poster.vue

<template>
	<view>
		<public-module></public-module>
		<service-widget @btnClick="btn_click"></service-widget>
		<view class="" style="position: fixed;width: 100%;z-index: 99;">
			<u-tabs :is-scroll="false" :list="list" :current="current" @change="change"></u-tabs>
		</view>
		<view class="" style="padding-top: 100rpx;box-sizing: border-box;">
			<view v-if="current==0" class="order">
				<view class="order1" v-for="(item,index) in list1" :key="index" @click="queryImg(item.url)">
					<image :src="item.url" mode=""></image>
					<text>{{item.originalfilename}}</text>
				</view>
			</view>
			<view v-if="current==1" class="order">
				<view class="order1" v-for="(item,index) in list2" :key="index" @click="queryImg(item.url)">
					<image :src="item.url" mode=""></image>
					<text>{{item.originalfilename}}</text>
				</view>
			</view>

			<view v-if="current==2" class="order">
				<view class="order1" v-for="(item,index) in list3" :key="index" @click="queryImg(item.url)">
					<image :src="item.url" mode=""></image>
					<text>{{item.originalfilename}}</text>
				</view>
			</view>
			<view v-if="current==3" class="order">
				<view class="order1" v-for="(item,index) in list4" :key="index" @click="queryImg(item.url)">
					<image :src="item.url" mode=""></image>
					<text>{{item.originalfilename}}</text>
				</view>
			</view>
			<view v-if="current==4" class="order">
				<view class="order1" v-for="(item,index) in list5" :key="index" @click="queryImg(item.url)">
					<image :src="item.url" mode=""></image>
					<text>{{item.originalfilename}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
					name: '保险'
				}, {
					name: '产品',
				}, {
					name: '节气'
				}, {
					name: '节日'
				}, {
					name: '增员',
				}],
				current: 0,
				dirId1: "P0001",
				dirId2: "P0002",
				dirId3: "P0003",
				dirId4: "P0004",
				dirId5: "P0005",
				dirId6: "P0006",
				list1: [],
				list2: [],
				list3: [],
				list4: [],
				list5: [],
				list6: [],
			}
		},
		async onLoad() {
			this.$http.get('/sysMenuRecord/add?type=1&menuType=6')
			let res1 = await this.$http.post('/sysPoster/posterListApp', {
				type: 'P0002'
			});
			res1.data.content.forEach(ele => {
				ele.url = this.$base.baseUrl + ele.url
			});
			this.list1 = res1.data.content;
			let res2 = await this.$http.post('/sysPoster/posterListApp', {
				type: 'P0003'
			});
			res2.data.content.forEach(ele => {
				ele.url = this.$base.baseUrl + ele.url
			});
			this.list2 = res2.data.content;
			let res3 = await this.$http.post('/sysPoster/posterListApp', {
				type: 'P0004'
			});
			res3.data.content.forEach(ele => {
				ele.url = this.$base.baseUrl + ele.url
			});
			this.list3 = res3.data.content;
			let res4 = await this.$http.post('/sysPoster/posterListApp', {
				type: 'P0005'
			});
			res4.data.content.forEach(ele => {
				ele.url = this.$base.baseUrl + ele.url
			});
			this.list4 = res4.data.content;
			let res5 = await this.$http.post('/sysPoster/posterListApp', {
				type: 'P0006'
			});
			res5.data.content.forEach(ele => {
				ele.url = this.$base.baseUrl + ele.url
			});
			this.list5 = res5.data.content;

		},
		methods: {
			btn_click() {
				uni.navigateTo({
					url: '/pages/chat/chat'
				})
			},
			change(index) {
				console.log(index)
				this.current = index;
			},
			queryImg(img) {
				uni.navigateTo({
					url: '/pages/tools/poster/poster-detail?img=' + img
				})

			}
		}
	}
</script>
<style>
	.tabs {
		border-bottom: 2rpx solid #F0EFF4;
		position: fixed;
		z-index: 999;
	}

	.order {
		width: 100%;
		height: auto;
		padding: 26rpx;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
	}


	.order1 {
		width: 48%;
		text-align: center;
		margin-bottom: 20px;
	}

	.order1>text {
		font-weight: bold;
	}

	image {
		width: 100%;
		height: 600rpx;
		border-radius: 20rpx;
	}
</style>