同步版本

pages/goods/lists.vue

@@ -0,0 +1,83 @@
+<template>
+	<view>
+		<view class="tabs">
+			<view class="tabs-item" :class="{'show': tabIndex == 0}" @click="onTabs" data-index="0">最新</view>
+			<view class="tabs-item" :class="{'show': tabIndex == 1}" @click="onTabs" data-index="1">
+				价格
+				<image
+					class="icon"
+					mode="widthFix" :src="require(marketType == 'low' ? '@/static/icons/market_icon_low.png': '@/static/icons/market_icon_high.png')"
+				/>
+			</view>
+		</view>
+		<view class="lists">
+			<goods-list :list="goods" priceType="CNY" @on-goods="onGoods" />
+		</view>
+	</view>
+</template>
+
+<script>
+	import { list } from '@/apis/interfaces/goods'
+	import goodsList from '@/components/goods-list/goods-list'
+	export default {
+		data() {
+			return {
+				tabIndex	: 0,
+				marketType	: 'low',
+				goods		: []
+			};
+		},
+		created() {
+			list().then(res=>{
+				this.goods = res.data
+				this.pages = res.page
+			})
+		},
+		methods:{
+			onTabs(e){
+				let index = e.target.dataset.index
+				if(index == 0 && index == this.tabIndex) return	
+				if(index == 1 && index == this.tabIndex) this.marketType = this.marketType == 'low' ? 'high': 'low'
+				this.tabIndex = index
+			},
+			
+			onGoods(e){
+				this.$Router.push({name: 'goodsDetails', params: {id: e.goods_id}})
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.tabs{
+		position: fixed;
+		top: 0;
+		left: 0;
+		z-index: 9;
+		width: 100%;
+		display: flex;
+		justify-content: space-around;
+		background: white;
+		height: 70rpx;
+		line-height: 70rpx;
+		text-align: center;
+		.tabs-item{
+			font-size: $title-size-m;
+			color: $text-gray;
+			.icon{
+				width: 32rpx;
+				height: 32rpx;
+				vertical-align: middle;
+				margin-left: $margin / 3;
+				margin-bottom: 4rpx;
+			}
+			&.show{
+				color: $text-price;
+			}
+		}
+	}
+	// 列表
+	.lists{
+		padding-top: 70rpx;
+	}
+</style>