yichael_intomovie/pages/my/record.vue

<template>
    <view class="content-page-wrap flex-column">
        <!-- <top-main title="消费明细" back></top-main> -->
        <view class="head-title flex-left justify-between">
            <view style="width: 94rpx">
                <u-icon
                    name="arrow-left"
                    color="#000E08"
                    size="42rpx"
                    @click="goBack"
                    bold
                ></u-icon>
            </view>
            <view>消费明细</view>
            <view style="width: 94rpx"> </view>
        </view>
        <view style="margin: 0 20rpx">
            <view class="top-content">
                <h4>消费明细</h4>
            </view>
            <view class="video-box">
                <view
                    class="card-row flex-column"
                    v-for="(item, index) in expendRecordData"
                    :key="index"
                >
                    <view class="card-text">
                        <view>
                            {{ item.money }}
                        </view>
                        <view>
                            {{ item.vip }}
                        </view>
                        <view>
                            {{ item.date }}
                        </view>
                    </view>
                </view>
            </view>
            <view class="top-content">
                <h4>节点收益明细</h4>
            </view>
            <view class="video-box">
                <view
                    class="card-row flex-column"
                    v-for="(item, index) in nodeExpendRecordData"
                    :key="index"
                >
                    <view class="card-text">
                        <view style="color: #1dbc46">
                            {{ item.money }}
                        </view>
                        <view>
                            {{ item.source }}
                        </view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
import topMain from "@/components/topMain";
export default {
    components: {
        topMain,
    },
    data() {
        return {
            expendRecordData: [
                {
                    money: "-5tox",
                    vip: "月卡",
                    date: "2024.6.6 20:30",
                },
                {
                    money: "-5tox",
                    vip: "月卡",
                    date: "2024.6.6 20:30",
                },
                {
                    money: "-5tox",
                    vip: "月卡",
                    date: "2024.6.6 20:30",
                },
                {
                    money: "-5tox",
                    vip: "月卡",
                    date: "2024.6.6 20:30",
                },
            ],
            nodeExpendRecordData: [
                {
                    money: "+1",
                    source: "城市节点收益",
                },
                {
                    money: "+0.25",
                    source: "区县奖励收益",
                },
            ],
        };
    },
    methods: {
        goBack() {
            uni.navigateBack();
        },
    },
};
</script>
<style lang="less" scoped>
.content-page-wrap {
    overflow-x: hidden;
    padding: 32rpx;
    .top-content {
        margin: 62rpx 20rpx 40rpx;
    }
    .video-box {
        width: 100%;
        border-radius: 20rpx;
        border: 2rpx solid #e6aa76;
        padding: 48rpx 36rpx;
        .card-row:last-child {
            border-bottom: none;
        }
        .card-row {
            display: flex;
            flex: 1;
            border-bottom: 2rpx solid #f1f1f1;
            padding: 30rpx 0;
            .card-text {
                padding: 0 52rpx;
                display: flex;
                justify-content: space-between;
                flex: 1;
                color: #000;
                font-size: 26rpx;
                font-weight: bold;
            }
        }
    }
}
</style>