cbz/pages/tabbar/shop/shop.vue

<template>
	<view class="content">
		<view class="" style="position: relative;">
			<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" @click="search" :style="scrollHeight > 0 ? 'background: #fff' : ''">
				<u-input v-model="serach_value" type="text" :border="true" placeholder="热搜榜单" shape="circle"
					prefixIcon="search" prefixIconStyle="font-size: 22px;color: #909399" bgColor="#fff">
					<template slot="suffix">
						<view @click.stop="search">搜索</view>
					</template>
				</u-input>
			</view>
		</view>
		<view class="swiper">
			<u-swiper :indicator="true" indicatorActiveColor="#506dff" height="160" :list="bannerList" keyName="img" 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 text_hide">{{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.cover[0]" mode="aspectFill" class="item_img"></image>
					<view style="box-sizing: border-box;padding: 12rpx 10rpx 0;">
						<view class="item_name text_hide">{{item.name}}</view>
						<!-- <view class="hflex acenter " style="padding-top: 12rpx;" v-if="item.items.length !== 0">
							<view class="item_type">{{item.items[0].goods_spec}}</view>
							<view class="item_type">{{item.parts}}</view>
						</view>
						<view class="hflex acenter " style="padding-top: 12rpx;" v-else>
							<view class="item_type"></view>
							<view class="item_type">{{item.parts}}</view>
						</view> -->
						<view class="item_price">￥{{item.price_selling}}</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="https://ship.shipcc.cn/common/cart.png" class="susp_icon"></image>
			</view>
			<view @click="toCenter">
				<image src="https://ship.shipcc.cn/common/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: 0,
				bgColor: 'rgb(255,255,255,0)',
				city: '北京市',
				serach_value: '',
				bannerList: [
				],
				baseList: [],
				pageList: [
				],
				page: 1,
				limit: 10,
				total: 1,
				token: '',
				scrollHeight: 0
			}
		},
		onLoad() {
			that = this
			var city = uni.getStorageSync('city')
			
			
			if(city) {
				that.city = city
			}
			
			
			that.getBanner()
		},
		onShow() {
			that.token = uni.getStorageSync("token")
			if(that.token) {
				that.getNum()
			}
			that.page = 1
			that.pageList = []
			that.getCate()
			that.getList()
			
		},
		onPullDownRefresh() {
			that.page = 1
			that.pageList = []
			that.getCate()
			that.getList()
			var token = uni.getStorageSync("token")
			if(token) {
				that.getNum()
			}
		},
		onPageScroll(e) {
			that.scrollHeight = e.scrollTop
			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
					}
				})
			},
			getList() {
				$api.req({
					url: '/data/api.Goods/getGoods',
					data: {
						page: that.page
					}
				}, function(res) {
					if(res.code == 1) {
						if(that.page == 1) {
							that.pageList = res.data.list
						} else {
							that.pageList = that.pageList.concat(res.data.list)
						}
						for(var i=0;i<that.pageList.length;i++) {
							if(typeof(that.pageList[i].cover) == 'string') {
								that.pageList[i].cover = that.pageList[i].cover.split('|')
							}
						}
						that.total = res.data.page.total
						that.limit = res.data.page.limit
					} else if(res.code == 401) {
						$api.info("去登录")
						setTimeout(()=> {
							$api.jump('/pages/login/password_login')
						},1000)
					}
					uni.stopPullDownRefresh();
				})
			},
			getNum() {
				$api.req({
					url: '/data/api.Goods/cart_number'
				}, function(res) {
					if(res.code == 1) {
						that.cart_num = res.data
					}
				})
			},
			getBanner() {
				$api.req({
					url: '/data/api.Data/getSlider',
					data: {
						keys: 'mall_banner  '
					}
				}, function(res) {
					if(res.code == 1) {
						that.bannerList = res.data
					}
				})
			},
			// banner图跳转
			toBanner(e) {
				var url = that.bannerList[e].url
				if(url == '#') {
					return
				}
				$api.jump('/pages/user/web_view?src=' +url)
			},
			// 点击base
			clickBase(e) {
				if(!that.token) {
					$api.jump('/pages/login/password_login')
				} else {
					if(!that.baseList[e].sub) {
						var url = '/page_shop/pages/base/base?name='+ that.baseList[e].name + '&id=' + that.baseList[e].id
					} else {
						var url = '/page_shop/pages/base/base?name='+ that.baseList[e].name + '&id=' + that.baseList[e].id + '&data=' + JSON.stringify(that.baseList[e].sub)
					}
					
					$api.jump(url)
				}
			},
			// 商品详情
			toDetail(id) {
				if(!that.token) {
					$api.jump('/pages/login/password_login')
				} else {
					$api.jump('/page_shop/pages/good/detail?id=' + id)
				}
			},	
			// 去购物车
			toCart() {
				console.log(that.token);
				if(!that.token) {
					$api.jump('/pages/login/password_login')
				} else {
					$api.jump('/page_shop/pages/mine/cart')
				}
			},
			// 去个人中心
			toCenter() {
				if(!that.token) {
					$api.jump('/pages/login/password_login')
				} else {
					$api.jump('/page_shop/pages/mine/mine')
				}
			},
			search() {
				$api.jump('/page_shop/pages/mine/search?value=' + that.serach_value)
			},
			onReachBottom() {
				if (Number(that.page) * Number(that.limit) >= Number(that.total)) {
					$api.info("没有更多了")
				} else {
					that.page++
					that.getList()
				}
				
			}
		},
	}
</script>

<style lang="scss" scoped>
	.content::v-deep {
		background: url('https://ship.shipcc.cn/common/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 {
			position: fixed;
			
			z-index: 999;
			// background: #fff;
			width: 100%;
			height: 88rpx;
			box-sizing: border-box;
			padding: 0 42rpx 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: 108rpx;
			height: 320rpx;
			padding: 0 30rpx;
			box-sizing: border-box;
		}
		.grid {
			margin: 20rpx auto 0;
			background: #FFFFFF;
			border-radius: 10px;
			width: 690rpx;
			
			box-sizing: border-box;
			padding: 14rpx 0;
			.u-grid-item {
				margin: 14rpx 0;
			}
			.grid_icon {
				width: 96rpx;
				height: 96rpx;
				border-radius: 12rpx;
			}
			.grid_text {
				max-width: 96rpx;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
				font-size: 24rpx;
				font-weight: 400;
				color: #222222;
				line-height: 34rpx;
				padding-top: 12rpx;
				text-align: center;
			}
		}
		.list {
			width: 690rpx;
			margin: 20rpx auto;
			.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 {
					width: max-content;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
					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>