NN2023021801/addons/dbapp/pages/index/index.vue

<script>
	import {
		mapState,
		mapActions,
		mapGetters
	} from 'vuex'
	import api from '@/api'
	import notice from '@/pages/index/components/notice.vue'
	import listWaterfall from '@/pages/index/components/listWaterfall.vue'
	import businessCooperation from '@/pages/me/components/businessCooperation.vue'
	import VersionUp from '@/pages/index/components/versionUp.vue'
	export default {
		components: {
			VersionUp,
			notice,
			listWaterfall,
			businessCooperation
		},
		data() {
			return {
				banner: [],
				tasks: [{
						label: '关于福袋',
						icon: 'guanyufudai'
					},
					{
						label: '新手教程',
						icon: 'xinshou_jiaoc'
					},
					{
						label: '在线客服',
						icon: 'zaixian_kefu'
					},
					{
						label: '商务合作',
						icon: 'shangwu_hezuo'
					}
				],
				services: [{
						label: '群聊',
						icon: 'qunliao'
					},
					{
						label: '手机充值',
						icon: 'shouji_chongzhi'
					},
					{
						label: '交电费',
						icon: 'jiaodianfei'
					},
					{
						label: '酒店/民宿',
						icon: 'jiudian'
					},
					{
						label: '美食/外卖',
						icon: 'meishi_waimai'
					},
					{
						label: '电影演出',
						icon: 'dianying'
					},
					{
						label: '飞机/火车',
						icon: 'feiji_hc'
					},
					{
						label: '加油站',
						icon: 'jiayouzhan'
					}
				],
				goods: [],

				showToTop: false
			}
		},
		computed: {
			...mapState({
				user: 'user',
				appConfig: 'appConfig',
				adultWarn: 'adultWarn'
			}),
			...mapGetters({
				isAppVersionUp: 'isAppVersionUp'
			})
		},

		methods: {
			...mapActions({
				refreshAppVersion: 'refreshAppVersion'
			}),
			async getList(page) {
				let res = await api.goodsList({
					...page,
					goods_type: '1'
				})
				//如果是第一页需手动制空列表 追加新数据
				this.goods = page.page === 1 ? res : [...this.goods, ...res]
				return res.length
			},
			taskJump({
				label
			}) {
				switch (label) {
					case '关于福袋':
						this.$jump({
							url: '/pagesUser/webview/webview'
						}, {
							url: this.appConfig.aboutbox_url
						})
						break
					case '新手教程':
						this.$jump({
							url: '/pagesUser/webview/webview'
						}, {
							url: this.appConfig.newhand_url
						})
						break
					case '在线客服':
						this.$jump({
							url: '/pagesUser/webview/webview'
						}, {
							url: this.appConfig.chat_url
						})
						break
					case '商务合作':
						this.$refs.business.show = true
						break
				}
			},
			serviceJump({
				label
			}) {
				switch (label) {
					case '群聊':
						this.$jump({
							url: '/pagesUser/chat/chat'
						})
						break
					default:
						this.$common.toast('功能开发中')
				}
			},
			// 点击回到顶部的按钮回调
			toTopClick() {
				if (!this.showToTop) return
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 300
				})
			}
		},
		async onLoad() {
			this.banner = await api.getBanner(1)
		},
		onShow() {
			this.refreshAppVersion()
		},
		provide() {
			return {
				getList: this.getList
			}
		},
		onPageScroll({
			scrollTop
		}) {
			this.showToTop = scrollTop > 400
		}
	}
</script>

<template>
	<view class="page">
		<view class="statusBarBg">
			<image src="/static/images/home/bg_home_top.png" mode="widthFix" class="bg_top"></image>
			<view class="placeholder"></view>
		</view>

		<view class="main">
			<notice v-if="adultWarn" />

			<scroll ref="mescrollItem" class="scroll" :up-opt="{ toTop: { src: null } }" :style="{
          transform: adultWarn ? 'translateY(107rpx)' : '',
          marginBottom: adultWarn ? '107rpx' : ''
        }">
				<view class="banner w-m">
					<u-swiper :list="banner" height="260rpx" circular :autoplay="true" radius="10px" key-name="img_pic"
						bgColor="transparent" indicator indicatorMode="dot"></u-swiper>
				</view>

				<view class="task w flex flex-around">
					<view class="item" v-for="(t, i) in tasks" :key="i" @click="taskJump(t)">
						<image :src="`/static/images/home/${t.icon}.png`" class="img" mode="widthFix"></image>
						<view class="title">{{ t.label }}</view>
					</view>
				</view>

				<view v-if="user.has_hiddencate === 0" class="service w-m bg-white radius">
					<view class="service_item flex flex-column align-center" v-for="(s, i) in services" :key="i"
						@click="serviceJump(s)">
						<image class="service_item_icon" :src="`/static/images/home/ic_${s.icon}@2x.png`"></image>
						<view class="service_item_label"><text>{{ s.label }}</text></view>
						<image v-if="s.label === '群聊'" class="tag" src="/static/images/home/ic_qunliao_biaoqian@2x.png">
						</image>
					</view>
				</view>

				<list-waterfall class="list" :list="goods" />
			</scroll>
		</view>

		<businessCooperation ref="business" />

		<version-up v-if="isAppVersionUp" />

		<!--    <mescroll-top :option="mescroll.optUp.toTop" @click="toTopClick"></mescroll-top>-->

		<view class="totop" :class="{ show: showToTop }" @click="toTopClick">
			<image class="totop_icon" src="/static/images/common/ic_hui_dingbu@2x.png"></image>
		</view>
	</view>
</template>

<style lang="scss" scoped>
	.page {

		//background-color: #f76883;
		.statusBarBg {
			.placeholder {
				height: 119rpx;
			}

			.bg_top {
				width: 100%;
				position: fixed;
				z-index: 999;
				top: 0;
			}
		}
	}

	.main {
		background-image: url('../../static/images/home/bg_home_bottom.png');
		background-repeat: no-repeat;
		background-size: 100% 332rpx;
		overflow: hidden;
	}

	.scroll {
		transition: transform 0.4s 0.1s ease;
		will-change: transform;
	}

	.task {
		margin-top: 46rpx;

		.item {
			text-align: center;

			.img {
				width: 86rpx;
			}

			.title {
				font-size: 24rpx;
				font-weight: 500;
				color: #232323;
			}
		}
	}

	.service {
		margin-top: 20rpx;
		padding: 18rpx 0 24rpx;
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		grid-row-gap: 20rpx;

		&_item {
			text-align: center;
			position: relative;

			&_icon {
				width: 106rpx;
				height: 96rpx;
			}

			&_label {
				font-size: 24rpx;
				font-weight: 500;
				color: #232323;
			}

			.tag {
				position: absolute;
				left: calc(50% - 10rpx);
				top: -9rpx;
				width: 54rpx;
				height: 24rpx;
			}
		}
	}

	.list {
		margin: 0 25rpx 20rpx;
	}

	.totop {
		position: fixed;
		right: 20rpx;
		bottom: 200rpx;
		opacity: 0;
		// 不接受事件
		pointer-events: none;
		transition: all 0.3s;

		&_icon {
			width: 113rpx;
			height: 113rpx;
		}

		&.show {
			opacity: 1;
			pointer-events: auto;
		}
	}
</style>