zh_order_food_xcx/pages-buy/group-shop.vue

<template>
	<view class="flex-common-css">
		<Nav :leftShow='false' :customNav='true' :bgckgroundBox='scrollTopNum>30?"#fff":"transparent"' class="nav-box">
			<template>
				<view slot="custom" class="align-items-center" @click="leftClick">
					<view class="nav-left-box text-align-center" v-show="scrollTopNum<30">
						<uni-icons color="#fff" type="left" size="15"></uni-icons>
					</view>
					<uni-icons class="mr-30" color="#000" type="left" size="15" v-show="scrollTopNum>30"></uni-icons>
					<view class="fs-34 fw-600 fc-3" v-show="scrollTopNum>30">
						团购商家
					</view>
				</view>
			</template>
		</Nav>
		<scroll-view :scroll-y="true" class="scroll-view-box" @scroll='scroll' @scrolltolower="scrolltolower">
			<view class="uni-margin-wrap">
				<swiper class="swiper" :circular='true' :autoplay="true" :interval="3000" :duration="500">
					<swiper-item>
						<view class="swiper-item bgc-B3DDFB">A</view>
					</swiper-item>
					<swiper-item>
						<view class="swiper-item bgc-3">B</view>
					</swiper-item>
					<swiper-item>
						<view class="swiper-item fc-65420c">C</view>
					</swiper-item>
				</swiper>
			</view>
			<view class="shop-box p-24 box-border-box bgc-f">
				<view class="fs-38 fw-600 fc-3 letter-spacing-6">
					{{shopInfo.shop_name || ''}}
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import {
		groupShopInfo,
		groupLists
	} from '@/api/group.js'
	import tools from '@/service/tools';
	export default {
		components: {},
		data() {
			return {
				scrollTopNum: 0, //当前滚动条高度
				fromData: {
					operate_id: '',
					lat: '',
					lon: '',
					shop_id: ''
				},
				shopInfo: {}
			};
		},
		onLoad(data) {
			if (data) {
				this.fromData.shop_id = data.shop_id
				this.groupShopInfo()
			}
		},
		mounted() {},
		methods: {
			leftClick() {
				tools.leftClick()
			},
			scroll(e) {
				this.scrollTopNum = e.detail.scrollTop
			},
			scrolltolower() {
				console.log('触底');
			},
			groupShopInfo(fromData) {
				this.fromData.operate_id = uni.getStorageSync('operate_id');
				this.fromData.lon = uni.getStorageSync('lon');
				this.fromData.lat = uni.getStorageSync('lat');
				groupShopInfo(this.fromData).then((res) => {
					if (res.code === 1) {
						this.shopInfo = res.data
					}
				})
			}
		},
	}
</script>

<style lang="scss" scoped>
	.scroll-view-box {
		width: 100%;
		height: 100vh;
		position: fixed;
		overflow: auto;
	}

	.nav-box {
		transition: all 0.3s ease-in-out;
	}

	.uni-margin-wrap {
		width: 100%;
		// position: absolute;
		// left: 0;
		// top: 0;
	}

	.swiper {
		height: 400rpx;
	}

	.swiper-item {
		display: block;
		height: 400rpx;
		line-height: 400rpx;
		text-align: center;
	}

	.nav-left-box {
		width: 50rpx;
		height: 50rpx;
		line-height: 50rpx;
		background: #9A9A9A;
		border-radius: 18rpx;
	}

	.shop-box {
		width: 100%;
		// height: 100vh;
		position: relative;
		top: -10rpx;
		border-radius: 15rpx 15rpx 0 0;
	}
</style>