154 lines
3.5 KiB
Vue
154 lines
3.5 KiB
Vue
<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: $mian-color;
|
||
}
|
||
}
|
||
}
|
||
// 列表
|
||
.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>
|