null/pages/mang/mang.vue

<template>
	<view class="page">
		<navbar-line :bgColor="bgColor" :hasPlacer="false">
			<view class="header-loc  align-center" @tap="navTo('/pages/address/address')">
				<image src="/static/mang-loc.png" class="image_19" mode="aspectFill" />
				<text class="text_43">沂蒙云谷·创意孵化中心</text>
			</view>
		</navbar-line>
		<view class="p-header"><image src="/static/mang-bg.png" mode="aspectFill" class="img"></image></view>
		<view class="align-center p-ads">
			<image src="/static/mang-sear.png" class="image_20" mode="aspectFill" />

			<view class="group_20"><zetank-notice colors="#55aaff" :noticeList="ads" :interval="3000"></zetank-notice></view>
		</view>
		<view class="p-entry">
			<view class="flex-col items-center grid-item" v-for="(item,i) in cats" :key="i">
				<image
					:src="item.cate_logo"
					class="image"
					mode="aspectFill"
				/>
				<text class="text">{{item.cate_name}}</text>
			</view>
		</view>
	
	    <view class="p-tabs align-center justify-between">
			  <view class="flex-col text-wrapper" :class="{active: i === tabCurrentIndex}" 
			   v-for="(item,i) in tabs" :key="i"  @tap="tapTab(i)"
			  >
				   <image
					  src="/static/mang-tabbg.png"
					  class="image_8"
				   />
				  <text class="text_9">{{item.name}}</text>
			  </view>
		</view>
		
		<view class="p-list">
			<view class="flex-row section_2 view_6" v-for="(item,idx) in tabs[tabCurrentIndex].list" :key="idx" @tap="navTo('/pages/mang/detail')">
			  <image
			    :src="item.goods_img"
			    class="group_11"
				mode="aspectFill"
			  />
			  <view class="flex-col text_21 view_7">
			    <text class="text_25 clamp">{{item.goods_name}}</text>
				<view class="stars align-center">
					 <image
					  src="/static/mang_star.png"
					  class="image_14"
					  v-for="(item,idx) in item.rank"
					  :key="idx"
					/>	
				</view>
			    <text class="text_26">随机搭配</text>
			    <view class="flex-row group_16">
			      <view class="group_17">
			        <text class="text_27">￥</text>
			        <text class="text_28">{{item.shop_price}}</text>
			      </view>
			      <text class="text_29">￥{{item.market_price}}</text>
			    </view>
			  </view>
			  <text class="text_30" v-if="item.distance">{{item.distance}}</text>
			  <view class="flex-col text-wrapper_2"><text class="text_23 text_31 clamp">仅剩{{item.num}}份</text></view>
			</view>
		</view>
		
	
	</view>
</template>

<script>
import navbarLine from '@/components/navbar-line.vue';
import zetankNotice from './components/zetank-notice.vue';
export default {
	components: {
		navbarLine,
		zetankNotice
	},
	data() {
		return {
			ads: [],
			bgColor:'transparent',
			cats:[
				{img:'/static/mang-all.png',name:'全部'},
			],
			tabCurrentIndex: 0,
			tabs:[
				{name:'智能排序',type:1,loadingType: 'more', list: [], page: 1,loaded:false},
				{name:'距离最近',type:2,loadingType: 'more', list: [], page: 1,loaded:false},
				{name:'评分最高',type:3,loadingType: 'more', list: [], page: 1,loaded:false},
			],
			pageSize: 20,
		};
	},
	onPageScroll(e) {
		// console.log('---',e);
		let scrollTop = e.scrollTop;
		if(scrollTop > this.CustomBar - 10){
			this.bgColor = "#ffffff";
		}else{
			this.bgColor = "transparent";
		}
	},
	onShow() {
		this.getList('refresh')
		this.getCats();
		this.getAds();
	},
	onPullDownRefresh() {
		this.getList('refresh')
		this.getCats();
		this.getAds();
	},
	onReachBottom() {
		this.getList()
	},
	methods:{
		getAds(){
			this.ads=[{ title: '1已帮助减少2486g数量的食品浪费' }, { title: '2已帮助减少2486g数量的食品浪费' }]
		},
		async getCats(){
			let res = await this.$request('goods.catelist')
			let cats =res.data || [];
			this.cats = cats.slice(0,7);
			this.cats.push({cate_logo:'/static/mang-all.png',cate_name:'全部'})
		},
		async getList(source){
			//这里是将订单挂载到tab列表下
			let index = this.tabCurrentIndex;
			let navItem = this.tabs[index];
			if (source === 'refresh') {
				if(navItem.loadingType == 'loading'){
					return;
				}
				navItem.loadingType = 'more';
				navItem.page=1;
				navItem.list=[];
				navItem.loaded=false;
			}
			if (navItem.loadingType === 'loading' || navItem.loadingType == 'noMore') {
				//防止重复加载
				return;
			}
			navItem.loadingType = 'loading';
			let res = await this.$request('goods.list',{
				sort_type:navItem.type,
				page: navItem.page,
				limit: this.pageSize
			});
			uni.stopPullDownRefresh();
			let result = res.data.row || [];
			if ( this.pageSize > result.length) {
				navItem.loadingType = 'noMore';
			} else {
				navItem.loadingType = 'more';
			}
			// 页数加一
			navItem.page++;
			navItem.loaded = true;
			if(source === 'refresh'){
				navItem.page=2;
				navItem.list = result;
				return;
			}
			result.forEach(item => {
				navItem.list.push(item);
			});
		},
		tapTab(idx){
			if(idx === this.tabCurrentIndex){
				return;
			}
			this.tabCurrentIndex = idx;
			this.getList('refresh');
		},
		
		
	}
};
</script>

<style lang="scss">
page {
	background-color: #F7FEFA;
}
.header-loc {
	position: absolute;
	width: 100%;
	padding: 0 30rpx;
	top: 50%;
	transform: translateY(-50%);
	.image_19 {
		width: 26rpx;
		height: 28rpx;
	}
	.text_43 {
		margin-left: 12rpx;
		color: #333333;
		font-size: 28rpx;
		font-family: PingFang;
		letter-spacing: 1.12rpx;
	}
}
.p-header {
	.img {
		width: 750rpx;
		height: 532rpx;
	}
}
.p-ads {
	margin: -32rpx auto 0;
	width: 690rpx;
	height: 72rpx;
	padding: 0 22rpx;
	background-image: url('/static/mang-ads.png');
	background-size: 100% 100%;
	background-repeat: no-repeat;
	position: relative;
	z-index: 2;
	.image_20 {
		width: 35rpx;
		height: 35rpx;
	}
	.group_20 {
		width: 100%;
	}
}
.p-entry {
	width: 690rpx;
	background: #FFFFFF;
	box-shadow: 0rpx 6rpx 10rpx 0rpx rgba(42,42,42,0.08);
	
	margin: 30rpx auto 0;
	padding: 9.5rpx 12rpx 20.5rpx;
	background-color: #ffffff;
	box-shadow: 0px 6rpx 10rpx #2a2a2a14;
	border-radius: 20rpx;
	height: 350rpx;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	.grid-item {
		padding: 17rpx 4rpx;
	}
	.image {
		width: 96rpx;
		height: 96rpx;
	}
	.text {
		margin-top: 7rpx;
		color: #333333;
		font-size: 24rpx;
		font-family: PingFang;
		line-height: 23rpx;
		letter-spacing: 1.44rpx;
	}
}
.p-tabs{
	margin-left: 30rpx;
	width: 530rpx;
	.text-wrapper {
		height: 85rpx;
		position: relative;
		&.active{
			.image_8{
				display: block;
			}
			.text_9{
			  color: #333333;
			}
		}
	  .image_8{
		  width: 36rpx;
		  height: 36rpx;
		  display: none;
		  position: absolute;
		  z-index: 2;
		  right: -14rpx;
		  top:40%;
		  transform: translateY(-50%);
	  }
		.text_9 {
		  color: #999999;
		  font-size: 30rpx;
		  font-family: PingFang;
		  letter-spacing: 1.2rpx;
		  line-height: 85rpx;
		}	  
	}

}
.p-list{
	.section_2 {
	  width: 690rpx;
	  margin:0 auto 24rpx;
	  padding: 24rpx 14rpx 24rpx 24rpx;
	  background-color: #ffffff;
	  box-shadow: 0px 6rpx 10rpx #2a2a2a14;
	  border-radius: 20rpx;
	  position: relative;
	  .text-wrapper_2 {
	    padding: 8rpx 0 16rpx;
	    background-image: url('/static/mang-listbg.png');
	    background-size: 100% 100%;
	    background-repeat: no-repeat;
	    position: absolute;
	    right: -10rpx;
	    top: 26rpx;
		width: 120rpx;
	  }
	  .text_23 {
	    margin-left: 12rpx;
	    margin-right: 6rpx;
	    color: #ffffff;
	    font-size: 24rpx;
	    font-family: PingFang;
		max-width: 120rpx;
	  }
	  // .text_31 {
	  //   margin-left: 12rpx;
	  //   margin-right: 6rpx;
	  // }
	}
	.view_6 {
	  padding: 24rpx 18rpx 24rpx 24rpx;
	}
	.group_11 {
	  flex-shrink: 0;
	  width: 200rpx;
	  height: 200rpx;
	  border-radius: 20rpx;
	}
	.text_21 {
	  margin-top: 100rpx;
	  color: #999999;
	  font-size: 24rpx;
	  font-family: PingFang;
	  line-height: 18rpx;
	}
	.view_7 {
	  margin-top: initial;
	  color: initial;
	  font-size: initial;
	  font-family: initial;
	  line-height: initial;
	  margin-left: 19rpx;
	  flex: 1 1 auto;
	  align-self: center;
	}
	.text_25 {
	  color: #333333;
	  font-size: 30rpx;
	  font-family: PingFang;
	  max-width: 360rpx;
	}
	.stars{
		 margin-top: 12rpx;
		.image_14 {
		  width: 28rpx;
		  height: 28rpx;
		  margin-right: 4rpx;
		}
	}
	
	.text_26 {
	  margin-top: 20rpx;
	  align-self: flex-start;
	  color: #999999;
	  font-size: 24rpx;
	  font-family: PingFang;
	  line-height: 23rpx;
	}
	.group_16 {
	  margin-top: 37rpx;
	  padding: 0 2rpx;
	}
	.group_17 {
	  line-height: 28rpx;
	  height: 29rpx;
	}
	.text_27 {
	  color: #ff3e3e;
	  font-size: 24rpx;
	  font-family: PingFang;
	  line-height: 19rpx;
	}
	.text_28 {
	  color: #ff3e3e;
	  font-size: 36rpx;
	  font-family: PingFang;
	  line-height: 28rpx;
	}
	.text_29 {
	  margin-left: 10rpx;
	  margin-top: 9rpx;
	  color: #999999;
	  font-size: 24rpx;
	  font-family: PingFang;
	  line-height: 20rpx;
	  text-decoration: line-through;
	}
	.text_30 {
	  z-index: 2;
	  position: absolute;
	  top: 130rpx;
	  right: 20rpx;
	  color: #999999;
	  font-size: 24rpx;
	  font-family: PingFang;
	}
}
</style>