init

pages/store/list.vue

@@ -0,0 +1,113 @@
+<template>
+	<view class="content">
+		<!-- 分类 -->
+		<u-sticky bgColor="#fff" zIndex="99">
+			<u-tabs :list="classify" lineColor="#34CE98" @click="onTabs" style="background-color: #FFFFFF;"></u-tabs>
+		</u-sticky>
+		<!-- 分类商品 -->
+		<block v-if="goodsArr.length >= 1">
+			<oct-goods
+				:lists="goodsArr"
+				color="#e6576b"
+				@onGoods="$Router.push({ name: 'StoreGoods', params: {id: $event.goods_id}})"
+			/>
+			<!-- 加载更多 -->
+			<view class="pages-load">
+				<u-loadmore :status="status" />
+			</view>
+		</block>
+		<block v-else>
+			<view class="vertical pages-empty">
+				<u-empty
+					icon="http://cdn.uviewui.com/uview/empty/data.png"
+					textColor="#999"
+					text="暂无数据"
+				>
+				</u-empty>
+			</view>
+		</block>
+	</view>
+</template>
+
+<script>
+	import { lists, classify } from "@/apis/interfaces/store"
+	export default {
+		data() {
+			return {
+				goodsArr: [],
+				classify: [
+					{ name: "全部", category_id: "" }
+				],
+				cid		: "",
+				page	: 1
+			};
+		},
+		mounted(){
+			uni.setNavigationBarTitle({
+				title: this.$Route.query.title
+			})
+			this.getLists()
+			this.getClassify()
+		},
+		methods:{
+			// 商品列表
+			getLists() {
+				lists({
+					category_id	: this.$Route.query.id,
+					category_cid: this.cid,
+					page		: this.page
+				}).then(res => {
+					if(res.page.current === 1){
+						this.goodsArr = []
+					}
+					this.goodsArr = this.goodsArr.concat(res.data)
+					this.status = res.page.has_more ? 'loadmore' : 'nomore'
+					uni.stopPullDownRefresh()
+				})
+			},
+			// 获取二级分类
+			getClassify(){
+				classify(this.$Route.query.id).then(res => {
+					this.classify = this.classify.concat(res)
+				})
+			},
+			// 二级分类筛选
+			onTabs(e){
+				this.goodsArr = []
+				this.cid	  = e.category_id
+				this.getLists()
+			},
+			
+		},
+		onPullDownRefresh() {
+			this.page = 1
+			this.getLists()
+		},
+		onReachBottom() {
+			if(this.status === 'loadmore'){
+				this.page += 1
+				this.status = 'loading'
+				this.getLists()
+			}
+		},
+		onNavigationBarButtonTap() {
+			this.$Router.push({name: 'StoreSearch'})
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.content{
+		background: $window-color;
+		min-height: 100vh;
+	}
+	
+	.pages-empty{
+		height: 70vh;
+	}
+	
+	// 加载分页
+	.pages-load{
+		padding-bottom: $padding;
+	}
+</style>