jje_uniapp/myPages/transactionRecordDetail/index.vue

<template>
    <view class="content-wrap">
        <view class="title-info">
            <view v-if="tranRecords.tradeNoType == '1'" class="name skyblue">
                <text>消费</text>
            </view>
            <view v-if="tranRecords.tradeNoType == '2'" class="name orange">
                <text>充值</text>
            </view>
            <view v-if="tranRecords.tradeNoType == '3'" class="name pink">
                <text>退款</text>
            </view>
            <view class="text">
                <text>{{tranRecords.remark}}</text>
            </view>
            <view class="money">
                <text v-if="tranRecords.tradeNoType == '2'">+</text>
                <text v-else>-</text>{{tranRecords.amount}}
            </view>
        </view>
        <view class="custom-line"></view>

        <view class="transaction-detail">
            <view class="td-v">
                <view class="td-name">
                    <text>当前状态</text>
                </view>
                <view class="td-text">
                    <text>已完成</text>
                </view>
            </view>
            <view class="td-v">
                <view class="td-name">
                    <text>交易时间</text>
                </view>
                <view class="td-text">
                    <text>{{tranRecords.createTime}}</text>
                </view>
            </view>
            <view class="td-v">
                <view class="td-name">
                    <text>支付方式</text>
                </view>
                <view class="td-text">
                    <text v-if="tranRecords.paymentModeDesc">{{tranRecords.paymentModeDesc}}</text>
                    <text v-else>微信支付</text>
                </view>
            </view>
            <view class="td-v">
                <view class="td-name">
                    <text>交易单号</text>
                </view>
                <view class="td-text">
                    <text>{{tranRecords.transactionNo}}</text>
                </view>
            </view>
            <view class="td-v">
                <view class="td-name">
                    <text>储值单号</text>
                </view>
                <view class="td-text">
                    <text>{{tranRecords.tradeNo}}</text>
                </view>
            </view>
            <view class="td-v">
                <view class="td-name">
                    <text>账户余额</text>
                </view>
                <view class="td-text">
                    ￥<text v-if="tranRecords.afterBalance">{{tranRecords.afterBalance}}</text>
                    <text v-else>0</text>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                tranRecords: {}
            }
        },
        onLoad(option) {
            this.tranRecords = JSON.parse(option.item);
        },
        methods: {
        }
    }
</script>

<style scoped lang="scss">
    page,body{
    }
    .content-wrap{
        background: #fff;
        .title-info{
            text-align: center;
            padding-top: 30px ;
            font-family: PingFangSC-Regular, PingFang SC;
            .name{
                margin: 0 auto;
                width: 70px;
                height: 70px;
                color: #fff;
                border-radius: 35px;
                display: flex;
                justify-content: center;
                align-items: center;
                // background: hotpink;
                font-size: 16px;
            }
            .orange{
                background: #93D21A;
            }
            .skyblue{
                background: #ED569F;
            }
            .pink{
                background: #FFAF36;
            }
            .text{
                font-size: 14px;
                font-weight: 400;
                color: #666666;
                line-height: 22px;
            }
            .money{
                line-height: 26px;
                padding-bottom: 8px;
                font-size: 18px;
                font-weight: 600;
                color: #333333;
            }

        }
        .transaction-detail{
            margin:16px;
            padding-bottom: 16px;
            font-size: 14px;
            line-height: 26px;
            font-weight: 500;
            .td-v{
                display: flex;
                justify-content: space-between;
                .td-name{
                    color: #999999 ;
                    padding-right: 14px;
                    font-weight: 500;
                }
                .td-value{
                    color: #333333;
                }
            }
        }
    }
    .td-text{
        font-size: 26rpx;
    }
</style>