Onlife/components/smarttrading/item.vue

<template>
    <view class="AI-Invest-item" >
        <view class="uni-flex uni-column box" @click="toDetail">
            <view class="uni-flex uni-column">
                <view class="uni-flex uni-row" style="padding: 12px 0;">
                    <view>
                        <image :src="imgs[detail[detail.optionType==='PUT'?'exercisedCoin':'investCoin']]"
                            class="icon-img"></image>
                    </view>
                    <view class="uni-flex-item" style="padding-left: 8px;">
                        <view class="uni-flex uni-row">
                            <view class="uni-flex-item">
                                {{detail[detail.optionType==='PUT'?'exercisedCoin':'investCoin']}}</view>
                            <view class="uni-flex-item" style="color: red; text-align: end;">
                                {{detail.strikePrice||'0.000'}} {{detail[detail.optionType==='PUT'?'exercisedCoin':'investCoin']}}</view>
                        </view>
                        <view class="uni-flex uni-row">
                            <view class="uni-flex-item" style="line-height: 18px;">
                                <view v-if="detail.hasOwnProperty('money')">
                                    <label class="label" style="font-size: 12px;">購買數量&nbsp;:&nbsp;</label>
                                    <label style="color: red;">{{detail.money}}&nbsp;USDT</label>
                                </view>
                                <view v-else>
                                    <view class="uni-flex uni-column" style="font-size: 12px;">
                                        <view class="uni-flex-item">
                                            <label class="label">最大限購&nbsp;:&nbsp;</label>
                                            <label>{{Number(detail.maxAmount).toFixed(3)}}&nbsp;{{detail[detail.optionType==='PUT'?'exercisedCoin':'investCoin']}}</label>
                                        </view>
                                        <view class="uni-flex-item">
                                            <label class="label">最小限購&nbsp;:&nbsp;</label>
                                            <label>{{Number(min[coin])}}&nbsp;{{coin}}</label>
                                        </view>
                                    </view>

                                </view>
                                <view v-if="detail.hasOwnProperty('money')">
                                    <label class="label" style="font-size: 12px;">購買時間&nbsp;:&nbsp;</label>
                                    <label>{{$moment(Number(detail.purchaseTime)).format('YYYY-MM-DD HH:mm:ss')}}</label>
                                </view>
                                <view>
                                    <label class="label"
                                        style="font-size: 12px;">{{detail.hasOwnProperty('money')?'結算':'購買截止'}}時間&nbsp;:&nbsp;</label>
                                    <label>{{toDate()}}</label>
                                </view>
                            </view>
                        </view>
                    </view>
                </view>
                <view>
                    <view class="uni-flex uni-row AI-text">
                        <view>
                            <label style="color:#A4A4A4">投資週期&nbsp;:&nbsp;</label><label
                                style="color: #1ABA84; padding: 0 4px;">{{detail.duration}}&nbsp;天</label>
                        </view>
                        <view class="uni-flex-item" style="text-align: end">
                            <label style="color:#A4A4A4">AI預測年化收益&nbsp;:&nbsp;</label>
                            <label style="color: #1ABA84; padding-left: 4px;">{{(detail.apr*100).toFixed(3)}}%</label>
                        </view>
                    </view>

                </view>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        props: {
            detail: {
                type: Object,
                default: () => {
                    return {}
                }
            },
        },
        name: "item",
        data() {
            return {
                min:{'BNB':'0.2','ETH':'0.01','BTC':'0.001','USDT':100},
                imgs: {
                    BNB: '/static/bnb.png',
                    ETH: '/static/eth.png',
                    BTC: '/static/btc.png'
                },
                coin:'USDT',
            };
        },
        mounted() {
            this.coin = this.detail.optionType === 'PUT' ? 'USDT' : this.detail.investCoin
        },
        methods: {
            toDate() {
                const date = this.detail.hasOwnProperty('money') ? this.detail.settleDate : this.detail.purchaseEndTime
                return this.$moment(Number(date)).format('YYYY-MM-DD')
            },
            toDetail() {
                if(this.detail.hasOwnProperty('money'))return
                uni.setStorageSync(this.detail.id, JSON.stringify(this.detail))
                uni.navigateTo({
                    url: '/pages/smarttrading/buy?id=' + this.detail.id
                })
            },
        }
    }
</script>

<style scoped lang="scss">
    .AI-Invest-item {
        border-bottom: 1rpx solid #999;

        .fb40 {
            flex-basis: 40%;
        }

        .p12 {
            padding: 12px;
        }

        .lh24 {
            line-height: 24px;
        }

        .label {
            color: #A4A4A4;
            padding-right: 8px;
        }

        .box {
            font-size: 14px;

            .icon-img {
                height: 48px;
                width: 48px;
            }

            .AI-text {
                background-color: #E9EAFA;
                border-radius: 6px;
                padding: 8px;
                font-size: 12px;
                margin-bottom: 12px;
            }

            .tag {
                border-radius: 3px;
                padding: 4px 8px;
                background-color: #CACDF3;
                border-radius: 4px;
                margin-right: 8px;
            }

            .up {
                color: #1ABA84;
            }

            .down {
                color: red;
            }

            ::v-deep {
                .u-text {
                    justify-content: flex-end !important;
                }
            }
        }
    }
</style>