204 lines
4.6 KiB
Vue
204 lines
4.6 KiB
Vue
<template>
|
||
<view class="NumberWeight">
|
||
<view class="header-tabs">
|
||
<view class="tabs-item" :class="{'show' : status === ''}" @click="onTabs('')">全部</view>
|
||
<view class="tabs-item" :class="{'show' : status === 1}" @click="onTabs(1)">转让中</view>
|
||
<view class="tabs-item" :class="{'show' : status === 2}" @click="onTabs(2)">已取消</view>
|
||
</view>
|
||
<!-- 有订单列表 -->
|
||
<view v-if="lists.length > 0">
|
||
<block v-for="(item, index) in lists" :key="index">
|
||
<view class="order-item">
|
||
<view class="order-info">
|
||
<image class="order-cover" :src="item.goods.cover" mode="aspectFill"></image>
|
||
<view class="title">数字权证<text>{{item.surplus}}/{{item.stock}}</text></view>
|
||
<view class="text">锚定商品：{{item.goods.goods_name}}</view>
|
||
<view class="text">交易哈希：{{item.hash}}</view>
|
||
<view class="text">发布时间：{{item.created_at}}</view>
|
||
</view>
|
||
<view class="order-tool">
|
||
<view class="price">{{item.price}}/个</view>
|
||
<view class="order-btn" v-if="item.status.value === 1" @click="removeGoods(item.market_id, index)">取消转让</view>
|
||
<view class="order-status" v-if="item.status.value === 2">{{item.status.text}}</view>
|
||
</view>
|
||
</view>
|
||
</block>
|
||
<uni-load-more :status="pageMore"></uni-load-more>
|
||
</view>
|
||
<!-- 没有订单列表 -->
|
||
<no-list v-if="lists.length === 0" name="no-order" txt="暂无数据~" />
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { marketsMag, marketsCancel } from '@/apis/interfaces/market';
|
||
export default {
|
||
data() {
|
||
return {
|
||
lists : [],
|
||
page : 1,
|
||
status : '',
|
||
total : 0,
|
||
pageMore: 'more'
|
||
};
|
||
},
|
||
onLoad() {
|
||
this.getList();
|
||
},
|
||
onReachBottom() {
|
||
if (this.pageMore) {
|
||
this.page = this.page + 1;
|
||
this.getList();
|
||
}
|
||
},
|
||
methods: {
|
||
onTabs(status){
|
||
this.status = status
|
||
this.page = 1
|
||
this.getList()
|
||
},
|
||
getList() {
|
||
if(this.page === 1){
|
||
this.lists = []
|
||
}
|
||
marketsMag({
|
||
status : this.status,
|
||
page : this.page
|
||
}).then(res => {
|
||
this.lists = this.lists.concat(res.markets.data);
|
||
this.total = res.markets.page.current;
|
||
this.pageMore = res.markets.page.has_more ? 'more' : 'noMore';
|
||
}).catch(err => {
|
||
uni.showToast({
|
||
title: err.message,
|
||
icon : 'none'
|
||
})
|
||
});
|
||
},
|
||
// 取消转让
|
||
removeGoods(id, index) {
|
||
marketsCancel(id).then(res => {
|
||
uni.showToast({
|
||
icon : 'none',
|
||
title: res
|
||
})
|
||
|
||
if(this.status === ''){
|
||
let statusObj = this.lists[index]
|
||
statusObj.status = {
|
||
value: 2,
|
||
text : '已取消',
|
||
}
|
||
this.$set(this.lists, index, statusObj)
|
||
return
|
||
}
|
||
|
||
if(this.status === 1 || this.status === 2){
|
||
this.lists.splice(index, 1)
|
||
}
|
||
}).catch(err => {
|
||
uni.showToast({
|
||
icon : 'none',
|
||
title: err.message
|
||
})
|
||
})
|
||
}
|
||
},
|
||
onNavigationBarButtonTap(){
|
||
this.$Router.push({name: "marketLogs", params: {type: 'my'}})
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.NumberWeight {
|
||
box-sizing: border-box;
|
||
padding-top: 90rpx;
|
||
.header-tabs{
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
line-height: 90rpx;
|
||
font-size: $title-size-lg;
|
||
height: 90rpx;
|
||
z-index: 99;
|
||
display: flex;
|
||
justify-content: space-around;
|
||
background: white;
|
||
.tabs-item{
|
||
color: $text-gray;
|
||
width: 33.33%;
|
||
text-align: center;
|
||
&.show{
|
||
color: $mian-color;
|
||
font-weight: bold;
|
||
}
|
||
}
|
||
}
|
||
// 订单列表
|
||
.order-item {
|
||
background-color: white;
|
||
margin: $margin;
|
||
border-radius: $radius;
|
||
padding: $padding;
|
||
.order-info{
|
||
position: relative;
|
||
padding-left: 188rpx;
|
||
min-height: 168rpx;
|
||
.order-cover{
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
height: 168rpx;
|
||
width: 168rpx;
|
||
}
|
||
.title{
|
||
font-weight: bold;
|
||
font-size: $title-size-lg;
|
||
color: $text-color;
|
||
line-height: 48rpx;
|
||
height: 48rpx;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
text{
|
||
font-size: 80%;
|
||
font-weight: normal;
|
||
}
|
||
}
|
||
.text{
|
||
line-height: 40rpx;
|
||
height: 40rpx;
|
||
font-size: $title-size-sm;
|
||
color: $text-gray;
|
||
@extend .nowrap;
|
||
}
|
||
}
|
||
.order-tool{
|
||
margin-top: $margin - 10;
|
||
padding-top: $padding - 10;
|
||
border-top: solid 1rpx $border-color;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
.price{
|
||
color: $text-price;
|
||
font-weight: bold;
|
||
font-size: $title-size-m;
|
||
line-height: 50rpx;
|
||
}
|
||
.order-btn{
|
||
background: $mian-color;
|
||
color: white;
|
||
padding: 0 $padding;
|
||
line-height: 50rpx;
|
||
border-radius: 25rpx;
|
||
font-size: $title-size-m;
|
||
}
|
||
.order-status{
|
||
color: $text-gray-m;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|