170 lines
3.8 KiB
Vue
170 lines
3.8 KiB
Vue
<template>
|
||
<view class="NumberWeight">
|
||
<!-- 有订单列表 -->
|
||
<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>
|
||
</view>
|
||
<!-- 没有订单列表 -->
|
||
<no-list v-if="lists.length === 0" name="no-order" txt="暂无数据~" />
|
||
<u-toast ref="uToast" />
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { marketsMag, marketsCancel } from '@/apis/interfaces/market';
|
||
export default {
|
||
data() {
|
||
return {
|
||
lists: [],
|
||
page: 1,
|
||
total: 0
|
||
};
|
||
},
|
||
onLoad() {
|
||
this.getList();
|
||
},
|
||
onReachBottom() {
|
||
if (this.total > this.lists.length) {
|
||
this.page = this.page + 1;
|
||
this.getList();
|
||
} else {
|
||
this.$refs.uToast.show({
|
||
title: '吼吼吼~我是有底的~',
|
||
type: 'error',
|
||
icon: false,
|
||
duration: 3000
|
||
});
|
||
}
|
||
},
|
||
methods: {
|
||
getList() {
|
||
let data = {
|
||
perPage: 10,
|
||
page: this.page
|
||
};
|
||
marketsMag(data)
|
||
.then(res => {
|
||
console.log(res.markets.data);
|
||
this.lists = this.lists.concat(res.markets.data);
|
||
this.total = res.markets.page.total;
|
||
})
|
||
.catch(err => {
|
||
this.$refs.uToast.show({
|
||
title: err.message,
|
||
type: 'error',
|
||
icon: false,
|
||
duration: 3000
|
||
});
|
||
});
|
||
},
|
||
// 取消转让
|
||
removeGoods(id, index) {
|
||
marketsCancel(id).then(res => {
|
||
uni.showToast({
|
||
icon : 'none',
|
||
title: res
|
||
})
|
||
let statusObj = this.lists[index]
|
||
statusObj.status = {
|
||
value: 2,
|
||
text : '已取消',
|
||
}
|
||
this.$set(this.lists, index, statusObj)
|
||
}).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;
|
||
// 订单列表
|
||
.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>
|