合并部分页面

pages/market/index.vue

@@ -0,0 +1,153 @@
+<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 == 'asc' ? '@/static/icons/market_icon_low.png': '@/static/icons/market_icon_high.png')"
+				/>
+			</view>
+		</view>
+		<view class="lists">
+			<view class="item" v-for="(item, index) in marketArray" :key="index" @click="onDetails(item)">
+				<image class="cover" :src="item.goods.cover" mode="aspectFill"></image>
+				<view class="content">
+					<view class="title nowrap">数字权证<text>{{item.surplus}}/{{item.stock}}</text></view>
+					<view class="text nowrap">锚定商品：{{item.goods.goods_name}}</view>
+					<view class="text nowrap">提供企业：{{item.company.name}}</view>
+					<view class="text nowrap">转让用户：{{item.user.nickname}}</view>
+				</view>
+				<view class="price">￥{{item.price}}/个</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	import { markets } from '@/apis/interfaces/market'
+	export default {
+		data() {
+			return {
+				tabIndex	: 0,
+				marketType	: 'asc',
+				marketArray : [],
+				page		: {}
+			};
+		},
+		onShow() {
+			this.getMarkets()
+		},
+		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 == 'asc' ? 'desc': 'asc'
+				this.tabIndex = index
+				this.getMarkets()
+			},
+			// 获取转让市场
+			getMarkets(){
+				markets({
+					sort: this.tabIndex == 1 ? this.marketType : ''
+				}).then(res => {
+					this.marketArray = res.data
+					this.page		 = res.page
+				})
+			},
+			// 转让商品详情
+			onDetails(e){
+				this.$Router.push({name: 'marketDetails', params: {marketId: e.market_id}})
+				console.log(e)
+			}
+		},
+		onNavigationBarButtonTap(){
+			this.$Router.push({name: "marketLogs"})
+		}
+	}
+</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: 70rpx $padding $padding;
+		.item{
+			min-height: 168rpx;
+			position: relative;
+			background: white;
+			border-radius: $radius/2;
+			margin-top: $margin;
+			padding: $padding;
+			.cover{
+				position: absolute;
+				left: $padding;
+				top: $padding;
+				width: 168rpx;
+				height: 168rpx;
+			}
+			.content{
+				padding-left: calc(168rpx + #{$padding});
+				.title{
+					position: relative;
+					font-size: $title-size-lg;
+					color: $text-color;
+					font-weight: bold;
+					line-height: 52rpx;
+					padding-right: 60rpx;
+					text{
+						position: absolute;
+						right: 0;
+						top: 0;
+						width: 60rpx;
+						text-align: right;
+						font-weight: normal;
+					}
+				}
+				.text{
+					font-size: $title-size-sm;
+					color: $text-gray;
+					height: 40rpx;
+					line-height: 40rpx;
+				}
+			}
+			.price{
+				margin-top: $margin - 10;
+				padding-top: $padding - 10;
+				font-size: $title-size-m;
+				text-align: right;
+				border-top: solid 1rpx $border-color;
+				font-weight: bold;
+				color: $text-price;
+			}
+		}
+	}
+</style>