|
@@ -0,0 +1,163 @@
|
|
|
+<template>
|
|
|
+ <view class="content">
|
|
|
+ <view class="main" v-if="info">
|
|
|
+ <view class="main-top flex">
|
|
|
+ <view class="main-icon"><image :src="info.imgs" mode=""></image></view>
|
|
|
+ <view class="main-top-info">
|
|
|
+ <view class="main-title clamp">{{ info.name }}</view>
|
|
|
+ <view class="main-btype">認購幣種:{{ info.coinname.toLocaleUpperCase() }}</view>
|
|
|
+ <view class="main-time">開始時間:{{ info.starttime }}</view>
|
|
|
+ <view class="main-time">結束時間:{{ info.finishtime }}</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="xian"><u-line-progress active-color="#2979ff" :percent="((info.num * 1 - info.sellnum * 1) / (info.num * 1)) * 100"></u-line-progress></view>
|
|
|
+ <view class="main-bottom flex">
|
|
|
+ <view class="main-bottom-item first">
|
|
|
+ <view class="main-bottom-item-font">發行總量</view>
|
|
|
+ <view class="main-bottom-item-num">{{ info.num }}</view>
|
|
|
+ </view>
|
|
|
+ <view class="main-bottom-item">
|
|
|
+ <view class="main-bottom-item-font">認購單價</view>
|
|
|
+ <view class="main-bottom-item-num">{{ info.price }} {{ info.buycoin.toLocaleUpperCase() }}</view>
|
|
|
+ </view>
|
|
|
+ <view class="main-bottom-item">
|
|
|
+ <view class="main-bottom-item-font">鎖倉時間</view>
|
|
|
+ <view class="main-bottom-item-num">{{ info.lockday }}天</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="main-bottom flex">
|
|
|
+ <view class="main-bottom-item first">
|
|
|
+ <view class="main-bottom-item-font">參與數量</view>
|
|
|
+ <view class="main-bottom-item-num">{{ info.sellnum }}</view>
|
|
|
+ </view>
|
|
|
+ <view class="main-bottom-item">
|
|
|
+ <view class="main-bottom-item-font">認購上線</view>
|
|
|
+ <view class="main-bottom-item-num">{{ info.allmax }}{{ info.buycoin.toLocaleUpperCase() }}</view>
|
|
|
+ </view>
|
|
|
+ <view class="main-bottom-item">
|
|
|
+ <view class="main-bottom-item-font">單次最低</view>
|
|
|
+ <view class="main-bottom-item-num">{{ info.min }}{{ info.buycoin.toLocaleUpperCase() }}</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="sr-input flex">
|
|
|
+ <input placeholder="請輸入提幣數量" type="number" v-model="num" />
|
|
|
+ <view class="main-type" v-if="info">{{ info.coinname.toLocaleUpperCase() }}</view>
|
|
|
+ </view>
|
|
|
+ <view class="sr-input flex"></view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import { details } from '@/api/wallet.js';
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ id: '',
|
|
|
+ info: '',
|
|
|
+ money: ''
|
|
|
+ };
|
|
|
+ },
|
|
|
+ onLoad(opt) {
|
|
|
+ this.id = opt.id;
|
|
|
+ this.loadData();
|
|
|
+ },
|
|
|
+ onShow() {},
|
|
|
+ methods: {
|
|
|
+ loadData() {
|
|
|
+ details({ id: this.id }).then(({ data }) => {
|
|
|
+ this.info = data.info;
|
|
|
+ this.money = data.money;
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss">
|
|
|
+page,
|
|
|
+.content {
|
|
|
+ min-height: 100%;
|
|
|
+ height: auto;
|
|
|
+}
|
|
|
+.main {
|
|
|
+ background: #fff;
|
|
|
+ margin-top: 20rpx;
|
|
|
+ padding: 16rpx 20rpx 24rpx;
|
|
|
+ .main-top {
|
|
|
+ justify-content: flex-start;
|
|
|
+ align-items: center;
|
|
|
+ .main-icon {
|
|
|
+ width: 250rpx;
|
|
|
+ height: 250rpx;
|
|
|
+ image {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .main-top-info {
|
|
|
+ margin-left: 10rpx;
|
|
|
+ .main-title {
|
|
|
+ font-size: 32rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #707a8a;
|
|
|
+ }
|
|
|
+ .main-btype {
|
|
|
+ margin-top: 6rpx;
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #707a8a;
|
|
|
+ }
|
|
|
+ .main-time {
|
|
|
+ margin-top: 6rpx;
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #707a8a;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .xian {
|
|
|
+ margin-top: 20rpx;
|
|
|
+ }
|
|
|
+ .main-bottom {
|
|
|
+ padding: 28rpx 16rpx;
|
|
|
+ .first {
|
|
|
+ align-items: flex-start !important;
|
|
|
+ }
|
|
|
+ .main-bottom-item {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ .main-bottom-item-font {
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #707a8a;
|
|
|
+ }
|
|
|
+ .main-bottom-item-num {
|
|
|
+ margin-top: 10rpx;
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #707a8a;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .sr-input {
|
|
|
+ margin-top: 20rpx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ width: 100%;
|
|
|
+ height: 80rpx;
|
|
|
+ line-height: 80rpx;
|
|
|
+ background: #f5f5f5;
|
|
|
+ border-radius: 20rpx;
|
|
|
+ padding: 0rpx 30rpx;
|
|
|
+ input {
|
|
|
+ width: 292rpx;
|
|
|
+ font-size: 28rpx;
|
|
|
+ padding-left: 30rpx;
|
|
|
+ background: #f5f5f5;
|
|
|
+ }
|
|
|
+ .main-type {
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #707a8a;
|
|
|
+ margin-right: 20rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|