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

<template>
	<view class="shop-index">
		<uv-sticky bgColor="#fff">
			<uv-tabs :list="navList" @click="changeNav" :scrollable="false"></uv-tabs>
		</uv-sticky>
		<uv-swiper keyName="image" :list="topicList" height="200" radius="0" imgMode="scaleToFill"></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 class="gl-item" @click="$navigateTo('/subPages/shopPage/good/good?id='+item.id)">
							<view class="gl-img">
								<uv-image width="170rpx" height="170rpx" :src="item.img">
								</uv-image>
							</view>
							<view>
								<view class="gl-name">{{item.name}}</view>
								<view class="gl-descript">{{item.descript}}</view>
								<view class="gl-price">￥{{formatPrice(item.price)}}</view>
							</view>
						</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
					@click="$navigateTo('/subPages/shopPage/good/good?id='+item.id)">
					<template #body>
						<view class="gl-item">
							<view class="gl-img">
								<uv-image width="170rpx" height="170rpx" :src="item.img">
								</uv-image>
							</view>
							<view>
								<view class="gl-name">{{item.name}}</view>
								<view class="gl-descript">{{item.descript}}</view>
								<view class="gl-price">￥{{formatPrice(item.price)}}</view>
							</view>
						</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>
</template>

<script>
	import {
		getCategoryList,
		getTopicList,
		getSearchHot,
		getSearchNew,
		getCartCount
	} from '@/request/api/shop.js'
	export default {
		data() {
			return {
				navList: [],
				newList: [],
				hotList: [],
				topicList: [],
				cartCount: 0
			}
		},
		onShow() {
			this.init()
		},
		methods: {
			async init() {
				if (uni.getStorageSync('shopMobileToken')) this.getCartCount();
				let navData = await getCategoryList();
				if (navData.state) {
					let navList = navData.data;
					navList.splice(0, 0, {
						name: '推荐',
						id: '0'
					})
					this.navList = navList;
				}
				this.queryGoods();
				this.queryTopic();
			},
			async getCartCount() {
				let countData = await getCartCount();
				if (countData.state) this.cartCount = countData.data;
			},
			changeNav(index) {

			},
			async queryGoods() {
				let hotData = await getSearchHot();
				if (hotData.state) this.hotList = hotData.data.map(node => {
					node['img'] = this.shopImage(node.pic);
					return node;
				});
				let newData = await getSearchNew();
				if (newData.state) this.newList = newData.data.map(node => {
					node['img'] = this.shopImage(node.pic);
					return node;
				});
			},
			async queryTopic() {
				const baseApi = this.baseApi;
				let topicData = await getTopicList();
				if (topicData.state) this.topicList = topicData.data.map(node => {
					node['image'] = this.shopImage(node.article.img);
					return node;
				});
			},
			toTopic(id) {
				this.$u.route({
					url: '/pages/topic/detail',
					params: {
						id: id
					}
				})
			},
			formatPrice(price) {
				return (price / 100).toFixed(2);
			}
		}

	}
</script>

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

		.tabs {
			background: #fff;
		}
	}

	.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;
		}
	}

	.gl-body {
		background: #fff;
	}

	.gl-title {
		padding: 20rpx;
	}

	.gl-item {
		width: 100%;
		display: flex;
		align-items: center;
	}

	.gl-img {
		width: 170rpx;
		height: 170rpx;
		margin-right: 30rpx;
	}

	.gl-name {
		font-size: 32rpx;
		font-weight: bold;
	}

	.gl-descript {
		font-size: 24rpx;
	}

	.gl-price {
		font-size: 32rpx;
		color: #FA3534;
		margin-top: 20rpx;
	}
</style>