realty/virgo.wzfrontend/workark_wx/pages/shop/shop.vue

<template>
	<view class="shop-index">
		<uv-swiper keyName="image" :list="topicList" height="200" indicator indicatorMode="line" circular radius="0"
			imgMode="scaleToFill" v-if="topicList.length > 0">
		</uv-swiper>
		<view v-if="hotList.length>0">
			<view class="gl-title">热门推荐</view>
			<uv-list>
				<uv-list-item v-for="(item,index) in hotList" :key="item.id" border>
					<template #body>
						<view style="width: 100%;">
							<good-item :item="item"></good-item>
						</view>
					</template>
				</uv-list-item>
			</uv-list>
		</view>
		<view v-if="newList.length>0">
			<view class="gl-title">新品推荐</view>
			<uv-list>
				<uv-list-item v-for="(item,index) in newList" :key="item.id" border>
					<template #body>
						<view style="width: 100%;">
							<good-item :item="item"></good-item>
						</view>
					</template>
				</uv-list-item>
			</uv-list>
		</view>
		<view class="shop-cart">
			<view class="cartbox" @click="$navigateTo('/subPages/shopPage/cart/cart')">
				<uv-badge :value="cartCount" type="error" :offset="[0,0]" max="99" numberType="overflow" absolute
					:customStyle="{
						zIndex:99
					}">
				</uv-badge>
				<uv-icon name="shopping-cart" size="30"></uv-icon>
			</view>
		</view>
		<view class="shop-cart tab">
			<view class="cartbox" @click="$navigateTo('/subPages/shopPage/menu/menu')">
				<text>分类</text>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getTopicList,
		getSearchHot,
		getSearchNew,
		getCartCount
	} from '@/request/api/shop.js'
	import goodItem from '@/components/common/goodItem.vue';
	export default {
		components: {
			goodItem
		},
		data() {
			return {
				newList: [],
				hotList: [],
				topicList: [],
				cartCount: 0
			}
		},
		onShow() {
			this.init();
		},
		methods: {
			async init() {
				this.cartCount = 0;
				if (uni.getStorageSync('shopMobileToken')) this.getCartCount();
				this.queryTopic();
				this.queryGoodsHot();
				this.queryGoodsHotNew();
			},
			async getCartCount() {
				let countData = await getCartCount();
				if (countData.state) this.cartCount = countData.data;
			},
			async queryGoodsHot() {
				let hotData = await getSearchHot();
				if (hotData.state) this.hotList = hotData.data;
			},
			async queryGoodsHotNew() {
				let newData = await getSearchNew();
				if (newData.state) this.newList = newData.data;
			},
			async queryTopic() {
				const baseApi = this.baseApi;
				let topicData = await getTopicList();
				if (topicData.state) this.topicList = topicData.data.map(node => this.shopImage(node.article.img));
			}
		}

	}
</script>

<style lang="scss" scoped>
	.shop-index {
		padding-bottom: 40rpx;

		.tabs {
			background: #fff;
		}
	}

	.gl-title {
		padding: 20rpx;
	}

	.shop-cart {
		position: fixed;
		bottom: 80rpx;
		right: 30rpx;
		width: 100rpx;
		height: 100rpx;

		.cartbox {
			width: 100%;
			height: 100%;
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			box-shadow: 0px 2px 10px rgba(3, 3, 3, 0.1);
			background-color: #ffffff;
		}

		&.tab {
			bottom: 200rpx;
		}
	}
</style>