cbz/pages/tabbar/shop/shop.vue

<template>
	<view class="content">
		<u-navbar title=" " height="44px" :bgColor="bgColor" :placeholder="true">
			<view class="navbar_left hflex acenter"  @click="changeCity" slot="left">
				<view class="city">{{city}}</view>
				<u-icon name="arrow-down-fill" color="#000" size="10"></u-icon>
			</view>
		</u-navbar>
		<view class="search">
			<u-input v-model="serach_value" type="text" :border="true" placeholder="热搜榜单" shape="circle"
				prefixIcon="search" prefixIconStyle="font-size: 22px;color: #909399" @focus="search">
				<template slot="suffix">
					<view @click="search">搜索</view>
				</template>
			</u-input>
		</view>
		<view class="swiper">
			<u-swiper :indicator="true" indicatorActiveColor="#506dff" height="160" :list="bannerList" radius="20rpx" @click="toBanner"></u-swiper>
		</view>
		<view class="grid">
			 <u-grid :border="false" @click="clickBase" col="4">
				<u-grid-item v-for="(baseListItem,baseListIndex) in baseList" :key="baseListIndex">
					<image :src="baseListItem.cover" mode="aspectFill" class="grid_icon"></image>
					<text class="grid_text">{{baseListItem.name}}</text>
				</u-grid-item>
			 </u-grid>
		</view>
		<view class="list hflex acenter fwrap">
			<block v-for="(item,index) in pageList" :key="index">
				<view class="list_item" @click="toDetail(item.id)">
					<image :src="item.img" mode="aspectFill" class="item_img"></image>
					<view style="box-sizing: border-box;padding: 12rpx 10rpx 0;">
						<view class="item_name">{{item.name}}</view>
						<view class="hflex acenter " style="padding-top: 12rpx;">
							<view class="item_type">{{item.material}}</view>
							<view class="item_type">{{item.parts}}</view>
						</view>
						<view class="item_price">￥{{item.price}}</view>
					</view>
				</view>
			</block>
		</view>
		<view class="suspension">
			<view @click="toCart" class="img_box">
				<u-badge numberType="overflow" max="99" :value="cart_num"></u-badge>
				<image src="/static/images/shop/cart.png" class="susp_icon"></image>
			</view>
			<view @click="toCenter">
				<image src="/static/images/shop/center.png" class="susp_icon"></image>
			</view>
		</view>
	</view>
</template>

<script>
	import $api from '@/static/js/api.js'
	var that = ''
	export default {
		data() {
			return {
				cart_num: 12,
				bgColor: 'rgb(255,255,255,0)',
				city: '北京市',
				serach_value: '',
				bannerList: [
					"/static/images/index/class_img1.png",
					"/static/images/index/class_img1.png"
				],
				baseList: [],
				pageList: [
					{
						id: 1,
						img: '/static/images/index/class_img4.png',
						name: '王思聪同款王思聪同款豪华游艇大型钓鱼船户外海上滑梯水豪华游艇大型钓鱼船户外海上滑梯水',
						material: '玻璃钢',
						parts: '氧气罐',
						price: '9928.00',
					},
					{
						id: 1,
						img: '/static/images/index/class_img4.png',
						name: '王思聪同款王思聪同款豪华游艇大型钓鱼船户外海上滑梯水豪华游艇大型钓鱼船户外海上滑梯水',
						material: '玻璃钢',
						parts: '氧气罐',
						price: '9928.00',
					},
					{
						id: 1,
						img: '/static/images/index/class_img4.png',
						name: '王思聪同款王思聪同款豪华游艇大型钓鱼船户外海上滑梯水豪华游艇大型钓鱼船户外海上滑梯水',
						material: '玻璃钢',
						parts: '氧气罐',
						price: '9928.00',
					},
					{
						id: 1,
						img: '/static/images/index/class_img4.png',
						name: '王思聪同款王思聪同款豪华游艇大型钓鱼船户外海上滑梯水豪华游艇大型钓鱼船户外海上滑梯水',
						material: '玻璃钢',
						parts: '氧气罐',
						price: '9928.00',
					},
					{
						id: 1,
						img: '/static/images/index/class_img4.png',
						name: '王思聪同款王思聪同款豪华游艇大型钓鱼船户外海上滑梯水豪华游艇大型钓鱼船户外海上滑梯水',
						material: '玻璃钢',
						parts: '氧气罐',
						price: '9928.00',
					},
					{
						id: 1,
						img: '/static/images/index/class_img4.png',
						name: '王思聪同款王思聪同款豪华游艇大型钓鱼船户外海上滑梯水豪华游艇大型钓鱼船户外海上滑梯水',
						material: '玻璃钢',
						parts: '氧气罐',
						price: '9928.00',
					},
					
				]
			}
		},
		onLoad() {
			that = this
			var city = uni.getStorageSync('city')
			if(city) {
				that.city = city
			}
			that.getCate()
		},
		onPageScroll(e) {
			if(e.scrollTop != 0) {
				that.bgColor = "#fff"
			} else {
				that.bgColor = 'rgba(255,255,255,0)'
			}
		},
		methods: {
			// 获取分类数据
			getCate() {
				$api.req({
					url: '/data/api.Goods/getCate'
				}, function(res) {
					if(res.code == 1) {
						console.log('分类接口',res);
						that.baseList = res.data
					}
				})
			},
			// banner图跳转
			toBanner() {
				
			},
			// 点击base
			clickBase(e) {
				var url = '/page_shop/pages/base/base?name='+ that.baseList[e].name + '&data=' + JSON.stringify(that.baseList[e].sub)
				$api.jump(url)
			},
			// 商品详情
			toDetail(id) {
				$api.jump('/page_shop/pages/good/detail?id=' + id)
			},
			// 去购物车
			toCart() {
				$api.jump('/page_shop/pages/mine/cart')
			},
			// 去个人中心
			toCenter() {
				$api.jump('/page_shop/pages/mine/mine')
			},
			search() {
				$api.jump('/page_shop/pages/mine/search')
			}
		},
	}
</script>

<style lang="scss" scoped>
	.content::v-deep {
		background: url('/static/images/shop/shop_bg.png') #F5F5F5 no-repeat;
		background-size: 100%;
		padding: 0 30rpx;
		position: relative;
		.navbar_left {
			
			.city {
				color: #222222;
				font-size: 32rpx;
				margin-right: 16rpx;
			}
		}
		.search {
			// background: #fff;
			width: 100%;
			height: 88rpx;
			box-sizing: border-box;
			padding: 12rpx 0;
			.u-input {
				background-color: #fff;
				height: 64rpx;
				padding: 0 0 0 18rpx !important;
				border: 1rpx solid #506Dff;
				margin-bottom: 12rpx;
			}
			.u-input__content__subfix-icon {
				width: 128rpx;
				height: 64rpx;
				background-color: #506Dff;
				border-radius: 32rpx;
				color: #fff;
				font-size: 28rpx;
				text-align: center;
				line-height: 64rpx;
			}
		}
		.swiper {
			width: 100%;
			margin-top: 20rpx;
			height: 320rpx;
		}
		.grid {
			background: #FFFFFF;
			border-radius: 10px;
			width: 100%;
			box-sizing: border-box;
			padding: 14rpx 40rpx;
			.u-grid-item {
				margin: 14rpx 0;
			}
			.grid_icon {
				width: 76rpx;
				height: 76rpx;
				border-radius: 12rpx;
			}
			.grid_text {
				font-size: 24rpx;
				font-weight: 400;
				color: #222222;
				line-height: 34rpx;
				padding-top: 12rpx;
			}
		}
		.list {
			width: 100%;
			margin-top: 20rpx;
			.list_item {
				width: 334rpx;
				background: #FFFFFF;
				border-radius: 20rpx;
				box-sizing: border-box;
				padding: 0 0 22rpx;
				margin: 0 22rpx 20rpx 0;
				.item_img {
					width: 334rpx;
					height: 280rpx;
					border-radius: 20rpx 20rpx 0px 0px;
				}
				.item_name {
					width: 100%;
					text-overflow: ellipsis;
					overflow: hidden;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					box-orient: vertical;
					line-clamp: 2;
					-webkit-line-clamp: 2;
					font-size: 28rpx;
					font-weight: 400;
					color: #222222;
					line-height: 40rpx;
				}
				.item_type {
					
					height: 28rpx;
					background: #F5F5F5;
					border-radius: 4rpx; 
					font-size: 20rpx;
					font-weight: 400;
					color: #999999;
					line-height: 28rpx;
					padding: 0 14rpx;
					margin-right: 12rpx;
				}
				.item_price {
					padding-top: 12rpx;
					font-size: 28rpx;
					font-weight: bold;
					color: #FF4747;
					line-height: 32rpx;
				}
			}
			.list_item:nth-child(2n+2) {
				margin: 0 0 20rpx;
			}
		}
		.suspension {
			position: fixed;
			bottom: 22rpx;
			right: 14rpx;
			.susp_icon {
				width: 132rpx;
				height: 132rpx;
				margin-top: 8rpx;
			}
			.img_box {
				position: relative;
				.u-badge {
					position: absolute;
					right: 16rpx;
					top: 18rpx;
					font-size: 20rpx !important;
					font-weight: 400;
					color: #FFFFFF !important;
					line-height: 24rpx !important;
					width: 28rpx;
					height: 28rpx;
					background: #FF4747;
					box-shadow: 0px 4rpx 8rpx 0px rgba(255,71,71,0.4);
				}
			}
			
		}
	}
</style>