You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
338 lines
9.4 KiB
338 lines
9.4 KiB
<template>
|
|
<view class="main">
|
|
<!-- nav -->
|
|
|
|
<!-- #ifdef APP-PLUS -->
|
|
<view class="nav-head">
|
|
<!-- #endif -->
|
|
<!-- #ifdef H5 -->
|
|
<view class="nav-head-H5">
|
|
<!-- #endif -->
|
|
<view class="navItem" @click="pageState = 'product',getInfo('product')"
|
|
:class="{ select: pageState === 'product' }">
|
|
{{ i18n.Product }}
|
|
</view>
|
|
<view class="navItem" @click="pageState = 'pending',getInfo('pending')"
|
|
:class="{ select: pageState === 'pending' }">
|
|
{{ i18n.Pending }}
|
|
</view>
|
|
<view class="navItem" @click="pageState = 'complete',getInfo('complete')"
|
|
:class="{ select: pageState === 'complete' }">
|
|
{{ i18n.Complete }}
|
|
</view>
|
|
</view>
|
|
|
|
<!-- #ifdef APP-PLUS -->
|
|
<view class="cardList">
|
|
<!-- #endif -->
|
|
<!-- #ifdef H5 -->
|
|
<view class="cardListH5">
|
|
<!-- #endif -->
|
|
|
|
<view class="card" v-for="(item, index) in info" :key="index" @click="gotoDetails(item,index)"
|
|
v-if="pageState === 'product'">
|
|
<!-- 卡片条件渲染 -->
|
|
<!-- product -->
|
|
<card-header v-if="pageState === 'product'" :iconName="baseURL+'/coins/'+item.coinCode+'.png'"
|
|
:title="item.fullName"
|
|
:rightName="item.status=='open'?'Subscribe':item.status=='close'?'Ended':'Coming soon'"
|
|
:hasBtn="true" :btnColor="item.status=='open'?'#00E8A2':item.status=='close'?'#A1A0A8':'#F2FE8D'">
|
|
</card-header>
|
|
<view class="dataBody" v-if="pageState === 'product'">
|
|
<key-value-row :keyName="i18n.STLTotalCirculation" :value="item.issueAmount"></key-value-row>
|
|
<key-value-row :keyName="i18n.PrivateSalePrice" :value="item.initalPrice+item.coinCode">
|
|
</key-value-row>
|
|
<key-value-row :keyName="i18n.ICOTime" :value="item.timestr"></key-value-row>
|
|
</view>
|
|
</view>
|
|
<view class="card" v-for="(item, index) in userInfoObj" :key="index" v-if="pageState === 'pending'">
|
|
<!-- pending -->
|
|
<card-header v-if="pageState === 'pending'" :iconName="baseURL+'/coins/'+item.coinSymbol+'.png'"
|
|
:title="item.orderNo" :rightName="item.status" :fontColor="item.status=='undone'?'#A1A0A8':item.status=='cancel'?'#F4506A':'#00E8A2'">
|
|
</card-header>
|
|
<view class="dataBody" v-if="pageState === 'pending'">
|
|
<key-value-row :keyName="i18n.Price" :value="item.pendingPrice"></key-value-row>
|
|
<key-value-row :keyName="i18n.Quantity" :value="item.pendingAmount"></key-value-row>
|
|
<key-value-row :keyName="i18n.USDT" :value="parseInt(item.usdtPrice,16)"></key-value-row>
|
|
<key-value-row :keyName="i18n.Time" :value="item.addTimeStr"></key-value-row>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="card" v-for="(item, index) in userInfoObj" :key="index" v-if="pageState === 'complete'">
|
|
<!-- complete -->
|
|
<card-header v-if="pageState === 'complete'" :iconName="baseURL+'/coins/'+item.coinSymbol+'.png'"
|
|
:title="item.orderNo" :rightName="item.status" :fontColor="item.status=='undone'?'#A1A0A8':item.status=='cancel'?'#F4506A':'#00E8A2'">
|
|
</card-header>
|
|
<view class="dataBody" v-if="pageState === 'complete'">
|
|
<key-value-row :keyName="i18n.Price" :value="item.pendingPrice"></key-value-row>
|
|
<key-value-row :keyName="i18n.Quantity" :value="item.pendingAmount"></key-value-row>
|
|
<key-value-row :keyName="i18n.ConfirmAmount" :value="item.tradeAmount" :leftColor="'#F2FE8D'"
|
|
:rightColor="'#F2FE8D'"></key-value-row>
|
|
<key-value-row :keyName="i18n.USDT" :value="parseInt(item.usdtPrice,16)"></key-value-row>
|
|
<key-value-row :keyName="i18n.CheckTheNumberoOfUSDT" :value="item.realAmount" :leftColor="'#F2FE8D'"
|
|
:rightColor="'#F2FE8D'">
|
|
</key-value-row>
|
|
<key-value-row :keyName="i18n.Time" :value="item.addTimeStr"></key-value-row>
|
|
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<u-empty :text="i18n.Dataisempty" mode="data" v-if="info.length==0&&pageState=='product'"></u-empty>
|
|
<u-loadmore :status="loadStatus" :loading-text="loadingText" :loadmore-text="loadmoreText"
|
|
:nomore-text="nomoreText" v-if="info.length&&pageState=='product'" height="80" />
|
|
|
|
<!-- 申购记录的为空提示 -->
|
|
<u-empty :text="i18n.Dataisempty" mode="data" v-if="userInfoObj.length==0" v-show="pageState=='pending'||pageState=='complete'"></u-empty>
|
|
<u-loadmore :status="loadStatus2" :loading-text="loadingText2" :loadmore-text="loadmoreText2"
|
|
:nomore-text="nomoreText2" v-if="userInfoObj.length" height="80" />
|
|
|
|
<!-- tabBar -->
|
|
<tab-bar :selectActive="4"></tab-bar>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import CardHeader from '../../components/cardHeader/cardHeader.vue';
|
|
import KeyValueRow from '../../components/KeyValueRow/KeyValueRow.vue';
|
|
import api from '@/utils/api'
|
|
import constant from '@/utils/constant.js';
|
|
export default {
|
|
components: {
|
|
KeyValueRow,
|
|
CardHeader
|
|
},
|
|
name: 'subscription',
|
|
data() {
|
|
return {
|
|
baseURL: '',
|
|
userInfoObj: [],
|
|
isLoadMore: false, //是否加载中
|
|
loadStatus: 'loadmore',
|
|
loadingText: this.$t("login").toload,
|
|
loadmoreText: this.$t("login").pullup,
|
|
nomoreText: this.$t("login").Nomore,
|
|
info: [],
|
|
pageState: 'product', // 当前页签状态
|
|
form: {
|
|
pageNumber: 1,
|
|
pageSize: 20,
|
|
status: '',
|
|
},
|
|
// 用户申购记录的
|
|
isLoadMore2: false, //是否加载中
|
|
loadStatus2: 'loadmore',
|
|
loadingText2: this.$t("login").toload,
|
|
loadmoreText2: this.$t("login").pullup,
|
|
nomoreText2: this.$t("login").Nomore,
|
|
}
|
|
},
|
|
onLoad() {},
|
|
onShow() {
|
|
this.baseURL = constant.BASE_URL
|
|
this.getGoods();
|
|
},
|
|
onHide() {},
|
|
computed: {
|
|
i18n() {
|
|
return this.$t('subscription')
|
|
}
|
|
},
|
|
methods: {
|
|
//看是获取用户申购记录还是申购列表 product 是获取申购列表 其它两个是获取记录
|
|
getInfo(e) {
|
|
this.info=[];
|
|
this.userInfoObj=[]
|
|
if (e == 'product') {
|
|
this.getGoods()
|
|
}
|
|
if (e == 'pending') {
|
|
this.form.status = 'undone'
|
|
this.getList()
|
|
}
|
|
if (e == 'complete') {
|
|
this.form.status = 'complete'
|
|
this.getList()
|
|
}
|
|
},
|
|
//用户申购记录
|
|
getList() {
|
|
this.isLoadMore2 = true
|
|
api.subscriptionRecord(this.form).then(res => {
|
|
if (res.content.length) {
|
|
if (this.form.pageNumber > 1) {
|
|
this.userInfoObj = this.userInfoObj.concat(res.content)
|
|
for (var i = 0; i < this.userInfoObj.length; i++) {
|
|
if (this.userInfoObj[i].addTime) {
|
|
this.userInfoObj[i].timestr = this.$index.formatyymmddhhmmss(this.userInfoObj[
|
|
i].addTime)
|
|
}
|
|
}
|
|
} else {
|
|
this.userInfoObj = res.content
|
|
for (var i = 0; i < this.userInfoObj.length; i++) {
|
|
if (this.userInfoObj[i].addTime) {
|
|
this.userInfoObj[i].timestr = this.$index.formatyymmddhhmmss(this.userInfoObj[
|
|
i].addTime)
|
|
}
|
|
}
|
|
}
|
|
if (this.userInfoObj.length >= Number(res.totalElements)) { // 判断接口返回数据量小于请求数据量，则表示此为最后一页
|
|
this.isLoadMore2 = true
|
|
this.loadStatus2 = 'nomore'
|
|
} else {
|
|
this.isLoadMore2 = false
|
|
}
|
|
} else {
|
|
this.isLoadMore2 = true
|
|
this.loadStatus2 = 'nomore'
|
|
// this.userInfoObj = []
|
|
}
|
|
this.$forceUpdate()
|
|
})
|
|
},
|
|
|
|
//申购币列表
|
|
getGoods() {
|
|
api.subscriptionList().then(res => {
|
|
this.info = res;
|
|
this.isLoadMore = true
|
|
this.loadStatus = 'nomore'
|
|
for (var i = 0; i < this.info.length; i++) {
|
|
if (this.info[i].startDate) {
|
|
this.info[i].timestr = this.$index.formatyymmddhhmmss(this.info[
|
|
i].startDate)
|
|
}
|
|
}
|
|
})
|
|
},
|
|
gotoDetails(i, index) {
|
|
if (this.pageState !== 'product') return
|
|
if (i.status == 'close') {
|
|
uni.$u.toast(this.$t("subscription").Subcompleted)
|
|
return;
|
|
}
|
|
if (i.status == 'unstart') {
|
|
uni.$u.toast(this.$t("subscription").Substarted)
|
|
return;
|
|
}
|
|
uni.navigateTo({
|
|
url: `/pages/subscription/details?id=${i.coinCode}`
|
|
});
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
/deep/ .cardHeader .button {
|
|
width: 160rpx;
|
|
}
|
|
|
|
.main {
|
|
padding-bottom: 198rpx; // 避免底部TabBar盖住内容
|
|
|
|
.nav-head {
|
|
overflow: hidden;
|
|
position: fixed;
|
|
top: 0rpx;
|
|
height: 80rpx;
|
|
font-size: 24rpx;
|
|
color: #fff;
|
|
display: flex;
|
|
justify-content: space-around;
|
|
align-items: center;
|
|
z-index: 8;
|
|
background-color: #15141F;
|
|
padding: 94rpx 48rpx 0;
|
|
|
|
|
|
.navItem {
|
|
width: 218rpx;
|
|
height: 80rpx;
|
|
line-height: 80rpx;
|
|
text-align: center;
|
|
color: #0b7e60;
|
|
font-size: 28rpx;
|
|
border-bottom: 10rpx solid #0b7e60;
|
|
}
|
|
|
|
.select {
|
|
color: #00E8A2;
|
|
border-bottom: 10rpx solid #00E8A2;
|
|
}
|
|
|
|
}
|
|
|
|
.nav-head-H5{
|
|
overflow: hidden;
|
|
position: fixed;
|
|
top: 0rpx;
|
|
height: 80rpx;
|
|
font-size: 24rpx;
|
|
color: #fff;
|
|
display: flex;
|
|
justify-content: space-around;
|
|
align-items: center;
|
|
z-index: 8;
|
|
background-color: #15141F;
|
|
padding: 34rpx 48rpx 0;
|
|
|
|
|
|
.navItem {
|
|
width: 218rpx;
|
|
height: 80rpx;
|
|
line-height: 80rpx;
|
|
text-align: center;
|
|
color: #0b7e60;
|
|
font-size: 28rpx;
|
|
border-bottom: 10rpx solid #0b7e60;
|
|
}
|
|
|
|
.select {
|
|
color: #00E8A2;
|
|
border-bottom: 10rpx solid #00E8A2;
|
|
}
|
|
|
|
}
|
|
|
|
|
|
.cardList {
|
|
margin-top: 212rpx;
|
|
|
|
.card {
|
|
background: #211F32;
|
|
border-radius: 32rpx;
|
|
margin: 32rpx;
|
|
|
|
|
|
|
|
.dataBody {
|
|
box-sizing: border-box;
|
|
padding: 32rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.cardListH5{
|
|
margin-top: 142rpx;
|
|
|
|
.card {
|
|
background: #211F32;
|
|
border-radius: 32rpx;
|
|
margin: 32rpx;
|
|
|
|
|
|
|
|
.dataBody {
|
|
box-sizing: border-box;
|
|
padding: 32rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
|
|
}
|
|
</style>
|
|
|