|
@@ -1,10 +1,24 @@
|
|
|
<template>
|
|
<template>
|
|
|
<div class="home">
|
|
<div class="home">
|
|
|
<van-sticky :offset-top="46">
|
|
<van-sticky :offset-top="46">
|
|
|
- <div class="transaction_record">
|
|
|
|
|
|
|
+ <van-tabs v-model:active="sort" line-width="32" line-height="2" @click-tab="changeTab">
|
|
|
|
|
+ <van-tab :title="item.label" :name="item.value" :key="index" v-for="(item, index) in selectOptions">
|
|
|
|
|
+ </van-tab>
|
|
|
|
|
+ </van-tabs>
|
|
|
|
|
+ <!-- <div class="transaction_record">
|
|
|
<div class="transaction_record_one">交易记录</div>
|
|
<div class="transaction_record_one">交易记录</div>
|
|
|
- <div class="transaction_record_two" @click="changeSort">
|
|
|
|
|
- <div class="transaction_record_two_con">{{ salable === '' ? '全部状态' : salable === 'purchase' ? '买入' : salable === 'sellOut' ? '卖出' : '赠送'}}</div>
|
|
|
|
|
|
|
+ <div class="transaction_record_two" @click="changeSort">
|
|
|
|
|
+ <div class="transaction_record_two_con">
|
|
|
|
|
+ {{
|
|
|
|
|
+ salable === ''
|
|
|
|
|
+ ? '全部状态'
|
|
|
|
|
+ : salable === 'purchase'
|
|
|
|
|
+ ? '买入'
|
|
|
|
|
+ : salable === 'sellOut'
|
|
|
|
|
+ ? '卖出'
|
|
|
|
|
+ : '赠送'
|
|
|
|
|
+ }}
|
|
|
|
|
+ </div>
|
|
|
<img
|
|
<img
|
|
|
:src="require('@assets/icon_shaixuan_sanjiao@3x.png')"
|
|
:src="require('@assets/icon_shaixuan_sanjiao@3x.png')"
|
|
|
alt=""
|
|
alt=""
|
|
@@ -13,37 +27,62 @@
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
|
<van-action-sheet
|
|
<van-action-sheet
|
|
|
- v-model:show="showAction"
|
|
|
|
|
- @select="selectAction"
|
|
|
|
|
- :actions="actions"
|
|
|
|
|
- cancel-text="取消"
|
|
|
|
|
- close-on-click-action
|
|
|
|
|
- />
|
|
|
|
|
|
|
+ v-model:show="showAction"
|
|
|
|
|
+ @select="selectAction"
|
|
|
|
|
+ :actions="actions"
|
|
|
|
|
+ cancel-text="取消"
|
|
|
|
|
+ close-on-click-action
|
|
|
|
|
+ /> -->
|
|
|
</van-sticky>
|
|
</van-sticky>
|
|
|
<van-list v-model:loading="loading" :finished="finished" finished-text="" @load="getData">
|
|
<van-list v-model:loading="loading" :finished="finished" finished-text="" @load="getData">
|
|
|
<template v-for="(item, index) in list" :key="index">
|
|
<template v-for="(item, index) in list" :key="index">
|
|
|
<div class="exchange">
|
|
<div class="exchange">
|
|
|
<div class="exchange_top">
|
|
<div class="exchange_top">
|
|
|
- <div class="text1">{{ item.description }}</div>
|
|
|
|
|
- <div :class="isLogin && item.toUserId == $store.state.userInfo.id ? 'priceone' : 'pricetwo'">
|
|
|
|
|
- {{ isLogin && item.toUserId == $store.state.userInfo.id ? '-' : '+' }}{{ item.price || 0 }}
|
|
|
|
|
|
|
+ <div class="exchange_top_con">
|
|
|
|
|
+ <van-image
|
|
|
|
|
+ width="90"
|
|
|
|
|
+ height="90"
|
|
|
|
|
+ radius="12"
|
|
|
|
|
+ :src="getImg(changeImgs(item.pic))"
|
|
|
|
|
+ fit="cover"
|
|
|
|
|
+ />
|
|
|
|
|
+ <div class="exchange_top_con_content">
|
|
|
|
|
+ <div class="exchange_top_con_content_assetName">{{ item.assetName }}</div>
|
|
|
|
|
+ <!-- <div class="exchange_top_con_content_stock">
|
|
|
|
|
+ <div class="exchange_top_con_content_stock_one">库存</div>
|
|
|
|
|
+ <div class="exchange_top_con_content_stock_two">100/300份</div>
|
|
|
|
|
+ </div> -->
|
|
|
|
|
+ <div class="exchange_top_con_content_price">
|
|
|
|
|
+ ¥ <span>{{ item.price || 0 }}</span>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
</div>
|
|
</div>
|
|
|
|
|
+ <div class="exchange_top_text1">{{ item.description }}</div>
|
|
|
</div>
|
|
</div>
|
|
|
<div class="product">
|
|
<div class="product">
|
|
|
- <van-image width="32" height="32" radius="4" :src="getImg(changeImgs(item.pic))" fit="cover" />
|
|
|
|
|
- <div class="flex1">
|
|
|
|
|
- <div class="text2">{{ item.assetName }}</div>
|
|
|
|
|
- <div class="text2">
|
|
|
|
|
- <span>{{ item.createdAt }}</span>
|
|
|
|
|
- </div>
|
|
|
|
|
|
|
+ <div class="product_con">
|
|
|
|
|
+ <div class="product_con_one">成交时间</div>
|
|
|
|
|
+ <div class="product_con_two">{{ item.createdAt }}</div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="product_con">
|
|
|
|
|
+ <div class="product_con_one">订单编号</div>
|
|
|
|
|
+ <div class="product_con_two">{{ item.id }}</div>
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
|
- <div class="text3">
|
|
|
|
|
- <span>来源:{{ item.fromUser }}</span> <span>去向 :{{ item.toUser }}</span>
|
|
|
|
|
- </div>
|
|
|
|
|
|
|
+ <!-- <div class="text3">
|
|
|
|
|
+ <span>来源:{{ item.fromUser }}</span
|
|
|
|
|
+ > <span>去向 :{{ item.toUser }}</span>
|
|
|
|
|
+ </div> -->
|
|
|
</div>
|
|
</div>
|
|
|
</template>
|
|
</template>
|
|
|
- <van-empty v-if="empty" description="暂无交易历史哦~" :image="require('@assets/storage_room_icon_01.png')" />
|
|
|
|
|
|
|
+ <van-empty
|
|
|
|
|
+ v-if="empty"
|
|
|
|
|
+ description="你还没有相关记录"
|
|
|
|
|
+ :image="require('@assets/collection-record@3x.png')"
|
|
|
|
|
+ class="empty_one"
|
|
|
|
|
+ >
|
|
|
|
|
+ <div class="empty_two">这里将展示你在拉索的数字藏品流转记录</div>
|
|
|
|
|
+ </van-empty>
|
|
|
</van-list>
|
|
</van-list>
|
|
|
</div>
|
|
</div>
|
|
|
<!-- <div class="search">
|
|
<!-- <div class="search">
|
|
@@ -80,8 +119,30 @@ export default {
|
|
|
isBuy: false,
|
|
isBuy: false,
|
|
|
info: {},
|
|
info: {},
|
|
|
showAction: false,
|
|
showAction: false,
|
|
|
- salable: '',
|
|
|
|
|
- operation: ''
|
|
|
|
|
|
|
+ salable: 'whole',
|
|
|
|
|
+ operation: '',
|
|
|
|
|
+ selectOptions: [
|
|
|
|
|
+ {
|
|
|
|
|
+ label: '全部',
|
|
|
|
|
+ value: 'whole'
|
|
|
|
|
+ },
|
|
|
|
|
+ // {
|
|
|
|
|
+ // label: '待付款',
|
|
|
|
|
+ // value: 'pendingPayment'
|
|
|
|
|
+ // },
|
|
|
|
|
+ {
|
|
|
|
|
+ label: '已购买',
|
|
|
|
|
+ value: 'paid'
|
|
|
|
|
+ },
|
|
|
|
|
+ {
|
|
|
|
|
+ label: '已出售',
|
|
|
|
|
+ value: 'cancelled'
|
|
|
|
|
+ },
|
|
|
|
|
+ {
|
|
|
|
|
+ label: '已赠送',
|
|
|
|
|
+ value: 'give'
|
|
|
|
|
+ }
|
|
|
|
|
+ ]
|
|
|
};
|
|
};
|
|
|
},
|
|
},
|
|
|
computed: {
|
|
computed: {
|
|
@@ -113,59 +174,56 @@ export default {
|
|
|
this.showAction = true;
|
|
this.showAction = true;
|
|
|
},
|
|
},
|
|
|
selectAction(action) {
|
|
selectAction(action) {
|
|
|
- if (action.name == '全部状态') {
|
|
|
|
|
|
|
+ if (action.name == '全部状态') {
|
|
|
this.salable = '';
|
|
this.salable = '';
|
|
|
}
|
|
}
|
|
|
if (action.name == '买入') {
|
|
if (action.name == '买入') {
|
|
|
this.salable = 'purchase';
|
|
this.salable = 'purchase';
|
|
|
- this.operation = '买入'
|
|
|
|
|
|
|
+ this.operation = '买入';
|
|
|
}
|
|
}
|
|
|
if (action.name == '卖出') {
|
|
if (action.name == '卖出') {
|
|
|
this.salable = 'sellOut';
|
|
this.salable = 'sellOut';
|
|
|
- this.operation = '卖出'
|
|
|
|
|
|
|
+ this.operation = '卖出';
|
|
|
}
|
|
}
|
|
|
if (action.name == '赠送') {
|
|
if (action.name == '赠送') {
|
|
|
this.salable = 'give';
|
|
this.salable = 'give';
|
|
|
- this.operation = '赠送'
|
|
|
|
|
|
|
+ this.operation = '赠送';
|
|
|
}
|
|
}
|
|
|
this.getData(true);
|
|
this.getData(true);
|
|
|
},
|
|
},
|
|
|
changeBuy() {
|
|
changeBuy() {
|
|
|
this.getData(true);
|
|
this.getData(true);
|
|
|
},
|
|
},
|
|
|
|
|
+ changeTab(e) {
|
|
|
|
|
+ this.salable = e.name;
|
|
|
|
|
+ this.getData(true);
|
|
|
|
|
+ },
|
|
|
beforeData() {
|
|
beforeData() {
|
|
|
- if(this.salable === ''){
|
|
|
|
|
- return {
|
|
|
|
|
- // query: {
|
|
|
|
|
- // toUserId: this.$store.state.userInfo.id
|
|
|
|
|
- // }
|
|
|
|
|
- };
|
|
|
|
|
- }else if(this.salable == 'purchase'){
|
|
|
|
|
|
|
+ if (this.salable === 'whole') {
|
|
|
|
|
+ return;
|
|
|
|
|
+ } else if (this.salable == 'paid') {
|
|
|
return {
|
|
return {
|
|
|
query: {
|
|
query: {
|
|
|
- toUserId: this.$store.state.userInfo.id,
|
|
|
|
|
- operation: this.operation
|
|
|
|
|
|
|
+ toUserId: this.$store.state.userInfo.id
|
|
|
}
|
|
}
|
|
|
};
|
|
};
|
|
|
- }else if(this.salable == 'sellOut'){
|
|
|
|
|
|
|
+ } else if (this.salable == 'cancelled') {
|
|
|
return {
|
|
return {
|
|
|
query: {
|
|
query: {
|
|
|
- fromUserId: this.$store.state.userInfo.id,
|
|
|
|
|
- operation: this.operation
|
|
|
|
|
|
|
+ fromUserId: this.$store.state.userInfo.id
|
|
|
}
|
|
}
|
|
|
};
|
|
};
|
|
|
- }else if(this.salable == 'give'){
|
|
|
|
|
|
|
+ } else if (this.salable == 'give') {
|
|
|
return {
|
|
return {
|
|
|
query: {
|
|
query: {
|
|
|
- // fromUserId: this.$store.state.userInfo.id,
|
|
|
|
|
- operation: this.operation
|
|
|
|
|
|
|
+ fromUserId: this.$store.state.userInfo.id
|
|
|
}
|
|
}
|
|
|
};
|
|
};
|
|
|
}
|
|
}
|
|
|
// if (this.isBuy) {
|
|
// if (this.isBuy) {
|
|
|
// return {
|
|
// return {
|
|
|
// query: {
|
|
// query: {
|
|
|
- // toUserId: this.$store.state.userInfo.id
|
|
|
|
|
|
|
+ // toUserId: this.$store.state.userInfo.id
|
|
|
// }
|
|
// }
|
|
|
// };
|
|
// };
|
|
|
// } else {
|
|
// } else {
|
|
@@ -182,7 +240,7 @@ export default {
|
|
|
|
|
|
|
|
<style lang="less" scoped>
|
|
<style lang="less" scoped>
|
|
|
.home {
|
|
.home {
|
|
|
- background: #15152d;
|
|
|
|
|
|
|
+ background: #191d27;
|
|
|
.transaction_record {
|
|
.transaction_record {
|
|
|
height: 56px;
|
|
height: 56px;
|
|
|
padding: 12px 16px;
|
|
padding: 12px 16px;
|
|
@@ -199,7 +257,7 @@ export default {
|
|
|
line-height: 24px;
|
|
line-height: 24px;
|
|
|
}
|
|
}
|
|
|
.transaction_record_two {
|
|
.transaction_record_two {
|
|
|
- width: 100px;
|
|
|
|
|
|
|
+ width: 100px;
|
|
|
height: 32px;
|
|
height: 32px;
|
|
|
background: #29293f;
|
|
background: #29293f;
|
|
|
border-radius: 4px;
|
|
border-radius: 4px;
|
|
@@ -212,7 +270,7 @@ export default {
|
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
|
font-weight: 400;
|
|
font-weight: 400;
|
|
|
color: #939599;
|
|
color: #939599;
|
|
|
- .transaction_record_two_con{
|
|
|
|
|
|
|
+ .transaction_record_two_con {
|
|
|
width: 52px;
|
|
width: 52px;
|
|
|
text-align: center;
|
|
text-align: center;
|
|
|
}
|
|
}
|
|
@@ -224,48 +282,96 @@ export default {
|
|
|
}
|
|
}
|
|
|
/deep/ .van-list {
|
|
/deep/ .van-list {
|
|
|
width: 100%;
|
|
width: 100%;
|
|
|
- padding: 0px 11px 0px 21px;
|
|
|
|
|
|
|
+ padding: 15px;
|
|
|
box-sizing: border-box;
|
|
box-sizing: border-box;
|
|
|
|
|
+ background: #191d27;
|
|
|
.exchange {
|
|
.exchange {
|
|
|
width: 100%;
|
|
width: 100%;
|
|
|
- padding: 8px 0px;
|
|
|
|
|
|
|
+ padding: 15px;
|
|
|
box-sizing: border-box;
|
|
box-sizing: border-box;
|
|
|
- border-bottom: 1px solid rgba(95, 100, 111, 0.2);
|
|
|
|
|
|
|
+ background: #1e222c;
|
|
|
.exchange_top {
|
|
.exchange_top {
|
|
|
display: flex;
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
justify-content: space-between;
|
|
|
- font-size: 14px;
|
|
|
|
|
- font-family: PingFangSC-Regular, PingFang SC;
|
|
|
|
|
- font-weight: 400;
|
|
|
|
|
- color: #ffffff;
|
|
|
|
|
- line-height: 24px;
|
|
|
|
|
- .priceone {
|
|
|
|
|
- font-size: 16px;
|
|
|
|
|
- font-weight: 500;
|
|
|
|
|
|
|
+ padding-bottom: 10px;
|
|
|
|
|
+ border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
|
|
|
|
+ .exchange_top_con {
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ .exchange_top_con_content {
|
|
|
|
|
+ margin-left: 12px;
|
|
|
|
|
+ padding-top: 18px;
|
|
|
|
|
+ .exchange_top_con_content_assetName {
|
|
|
|
|
+ width: calc(100% + 70px);
|
|
|
|
|
+ font-size: 14px;
|
|
|
|
|
+ font-family: PingFangSC-Regular, PingFang SC;
|
|
|
|
|
+ font-weight: 400;
|
|
|
|
|
+ color: #ffffff;
|
|
|
|
|
+ line-height: 20px;
|
|
|
|
|
+ margin-bottom: 8px;
|
|
|
|
|
+ overflow: hidden;
|
|
|
|
|
+ white-space: nowrap;
|
|
|
|
|
+ text-overflow: ellipsis;
|
|
|
|
|
+ }
|
|
|
|
|
+ .exchange_top_con_content_stock {
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ font-size: 11px;
|
|
|
|
|
+ font-family: PingFangSC-Regular, PingFang SC;
|
|
|
|
|
+ font-weight: 400;
|
|
|
|
|
+ margin-bottom: 8px;
|
|
|
|
|
+ .exchange_top_con_content_stock_one {
|
|
|
|
|
+ width: 34px;
|
|
|
|
|
+ height: 16px;
|
|
|
|
|
+ background: #f9ddb3;
|
|
|
|
|
+ border-radius: 3px 0px 0px 3px;
|
|
|
|
|
+ color: #282d3a;
|
|
|
|
|
+ line-height: 16px;
|
|
|
|
|
+ text-align: center;
|
|
|
|
|
+ }
|
|
|
|
|
+ .exchange_top_con_content_stock_two {
|
|
|
|
|
+ height: 16px;
|
|
|
|
|
+ background: #323743;
|
|
|
|
|
+ border-radius: 0px 3px 3px 0px;
|
|
|
|
|
+ color: #f9ddb3;
|
|
|
|
|
+ line-height: 16px;
|
|
|
|
|
+ padding: 0 6px;
|
|
|
|
|
+ box-sizing: border-box;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ .exchange_top_con_content_price {
|
|
|
|
|
+ font-size: 16px;
|
|
|
|
|
+ font-family: PingFangSC-Semibold, PingFang SC;
|
|
|
|
|
+ font-weight: 600;
|
|
|
|
|
+ color: #ffffff;
|
|
|
|
|
+ line-height: 24px;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
}
|
|
}
|
|
|
- .pricetwo {
|
|
|
|
|
- font-size: 16px;
|
|
|
|
|
- font-weight: 500;
|
|
|
|
|
- color: #ffcb2f;
|
|
|
|
|
|
|
+ .exchange_top_text1 {
|
|
|
|
|
+ font-size: 14px;
|
|
|
|
|
+ font-family: PingFangSC-Regular, PingFang SC;
|
|
|
|
|
+ font-weight: 400;
|
|
|
|
|
+ color: #ffffff;
|
|
|
|
|
+ line-height: 20px;
|
|
|
|
|
+ margin-top: 8px;
|
|
|
|
|
+ opacity: 0.3;
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
.product {
|
|
.product {
|
|
|
- margin-top: 2px;
|
|
|
|
|
- margin-bottom: 6px;
|
|
|
|
|
- display: flex;
|
|
|
|
|
- .flex1 {
|
|
|
|
|
- margin-left: 6px;
|
|
|
|
|
- font-size: 12px;
|
|
|
|
|
|
|
+ .product_con {
|
|
|
|
|
+ margin-top: 14px;
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ justify-content: space-between;
|
|
|
|
|
+ font-size: 14px;
|
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
|
font-weight: 400;
|
|
font-weight: 400;
|
|
|
- color: #939599;
|
|
|
|
|
- .text2 {
|
|
|
|
|
- width: 292px;
|
|
|
|
|
- line-height: 17px;
|
|
|
|
|
- white-space: nowrap;
|
|
|
|
|
- overflow: hidden;
|
|
|
|
|
- text-overflow: ellipsis;
|
|
|
|
|
- }
|
|
|
|
|
|
|
+ line-height: 20px;
|
|
|
|
|
+ }
|
|
|
|
|
+ .product_con_one {
|
|
|
|
|
+ color: #ffffff;
|
|
|
|
|
+ opacity: 0.3;
|
|
|
|
|
+ }
|
|
|
|
|
+ .product_con_two {
|
|
|
|
|
+ color: #ffffff;
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
.text3 {
|
|
.text3 {
|
|
@@ -278,6 +384,38 @@ export default {
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
|
|
+/deep/ .van-tabs__wrap {
|
|
|
|
|
+ height: 36px;
|
|
|
|
|
+ .van-tabs__nav--line {
|
|
|
|
|
+ padding-left: 0 !important;
|
|
|
|
|
+ border-top: none;
|
|
|
|
|
+ background: #191d27;
|
|
|
|
|
+ padding-bottom: 0px;
|
|
|
|
|
+ }
|
|
|
|
|
+ .van-tab {
|
|
|
|
|
+ flex: 1 !important;
|
|
|
|
|
+ margin-right: 0px !important;
|
|
|
|
|
+ }
|
|
|
|
|
+ .van-tabs__line {
|
|
|
|
|
+ bottom: 0;
|
|
|
|
|
+ background: #d8d8d8;
|
|
|
|
|
+ }
|
|
|
|
|
+ .van-tab--active {
|
|
|
|
|
+ font-size: 16px;
|
|
|
|
|
+ font-weight: 500;
|
|
|
|
|
+ color: #ffffff !important;
|
|
|
|
|
+ }
|
|
|
|
|
+}
|
|
|
|
|
+/deep/ .van-empty{
|
|
|
|
|
+ margin-top: 60px;
|
|
|
|
|
+}
|
|
|
|
|
+.empty_two {
|
|
|
|
|
+ font-size: 14px;
|
|
|
|
|
+ font-family: PingFangSC-Regular, PingFang SC;
|
|
|
|
|
+ font-weight: 400;
|
|
|
|
|
+ color: #ffffff;
|
|
|
|
|
+ opacity: 0.3;
|
|
|
|
|
+}
|
|
|
// .exchange {
|
|
// .exchange {
|
|
|
// padding: 14px 16px 15px;
|
|
// padding: 14px 16px 15px;
|
|
|
// position: relative;
|
|
// position: relative;
|