yichael_intomovie/pages/my/index.vue

<template>
    <view class="content-page-wrap flex-column">
        <top-main title="我的" back></top-main>
        <view class="middle-main">
		
            <image src="@/static/img/my-bg.svg" class="my-bg"></image>
            <view class="flex-column">
                <view class="vip-box" @click="goVip">
                    <image src="@/static/img/vip-bg.svg"></image>
                    <view class="flex vip-time">
                        <view class="flex text">
                            VIP剩余
                            <h2>
                                {{ 366 }}
                            </h2>
                            天
                        </view>
                        <u-icon
                            name="arrow-right"
                            color="#FFD9AD"
                            size="12"
                        ></u-icon>
                    </view>
                </view>
                <view class="inlet-box flex-column">
                    <view class="flex">
                        <view class="top-but" @click="goRecord">
                            <view>钱包明细</view>
                            <view class="icon flex-center"
                                ><img src="@/static/img/icon-detail.svg"
                            /></view>
                        </view>
                        <view class="top-but" style="margin-left: 32rpx">
                            <view>NFT挖矿</view>
                            <view class="icon flex-center"
                                ><img src="@/static/img/icon-dig.svg"
                            /></view>
                        </view>
                    </view>
                    <view class="flex">
                        <view class="bottom-left-but flex-left justify-around">
                            <view>老K社区</view>
                            <u-icon
                                name="arrow-right"
                                color="#000E08"
                                size="18"
                                bold
                            ></u-icon>
                        </view>
                        <view
                            class="bottom-right-but flex-left justify-around"
                            style="margin-left: 26rpx"
                        >
                            <view>变更</view>
                            <view class="icon flex-center"
                                ><img src="@/static/img/icon-change.svg"
                            /></view>
                        </view>
                    </view>
                </view>
            </view>
        </view>
        <view class="video-box">
            <view class="top-content flex justify-between">
                <h4>观看历史</h4>
                <view class="flex-left right-but" @click="goHistory">
                    <text>更多</text>
                    <u-icon
                        name="arrow-right"
                        color="#717171"
                        size="14"
                        bold
                    ></u-icon>
                </view>
            </view>
            <view class="flex-left">
                <view
                    class="card-row"
                    v-for="(item, index) in historyData"
                    :key="index"
                    @click="goPlayVideo(item)"
                >
                    <view class="card-img">
                        <u-image
                            :src="item.videoPoster"
                            radius="8rpx"
                            width="120rpx"
                            height="180rpx"
                        ></u-image>
                        <text>{{ secondsToTime(item.duration) }}</text>
                    </view>
                    <view class="card-name">
                        {{ item.videoName }}
                    </view>
                </view>
            </view>
        </view>
        <view class="video-box" style="margin-top: 40rpx">
            <view class="top-content flex justify-between">
                <h4>我的收藏</h4>
                <view class="flex-left right-but" @click="goCollect">
                    <text>更多</text>
                    <u-icon
                        name="arrow-right"
                        color="#717171"
                        size="14"
                        bold
                    ></u-icon>
                </view>
            </view>
            <view class="flex-left">
                <view
                    class="card-row"
                    v-for="(item, index) in collectData"
                    :key="index"
                    @click="goPlayVideo(item)"
                >
                    <view class="card-img">
                        <u-image
                            :src="item.videoPoster"
                            radius="8rpx"
                            width="120rpx"
                            height="180rpx"
                        ></u-image>
                        <!-- <text>{{ item.playTime }}</text> -->
                    </view>
                    <view class="card-name">
                        {{ item.videoName }}
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>


<script>
import $req from "@/service/serviceConfig";
import topMain from "@/components/topMain";
export default {
    components: {
        topMain,
    },
    data() {
        return {
            historyData: [],
            collectData: [],
        };
    },
    onShow() {
        let vm = this;
        vm.gteHistoryData();
        vm.gteCollectData();
    },
    methods: {
        // 播放视频
        goPlayVideo(row) {
            uni.navigateTo({
                url: `/pages/play/play?url=${row.url}`,
            });
        },
        // 前往历记录列表
        goHistory() {
            uni.navigateTo({
                url: `/pages/my/viewHistorys`,
            });
        },
        // 前往收藏列表
        goCollect() {
            uni.navigateTo({
                url: `/pages/my/myCollect`,
            });
        },
        // 获取历史数据
        gteHistoryData() {
            let vm = this;
            let query = {
                page: 1,
                size: 4,
            };
            uni.showLoading({
                title: "加载中",
            });
            $req.request({ alias: "view-records-page", query })
                .then((res) => {
                    uni.hideLoading();
                    if (res.code == 0) {
                        vm.historyData = res.data.rows;
                    }
                })
                .catch(() => {});
        },
        // 获取收藏数据
        gteCollectData() {
            let vm = this;
            let query = {
                page: 1,
                size: 4,
            };
            uni.showLoading({
                title: "加载中",
            });
            $req.request({ alias: "favorite-page", query })
                .then((res) => {
                    uni.hideLoading();
                    if (res.code == 0) {
                        vm.collectData = res.data.rows;
                    }
                })
                .catch(() => {});
        },
        goVip() {
            uni.navigateTo({
                url: "/pages/my/vip",
            });
        },
        goRecord() {
            uni.navigateTo({
                url: "/pages/my/record",
            });
        },
        // 秒转换为时分秒
        secondsToTime(seconds) {
            const hours = Math.floor(seconds / 3600)
                .toString()
                .padStart(2, "0");
            const minutes = Math.floor((seconds % 3600) / 60)
                .toString()
                .padStart(2, "0");
            const remainingSeconds = (seconds % 60).toString().padStart(2, "0");
            return hours + ":" + minutes + ":" + remainingSeconds;
        },
    },
};
</script>
<style lang="less" scoped>
.content-page-wrap {
    overflow-x: hidden;
    padding: 32rpx;
    .middle-main {
        padding: 28rpx 28rpx 42rpx 28rpx;
        .vip-box {
            position: relative;
            display: flex;
            align-items: center;
            height: 72rpx;
            margin-top: 46rpx;
            image {
                height: 100%;
                width: 100%;
            }
            .vip-time {
                position: absolute;
                top: 0;
                right: 0px;
                left: 50px;
                display: flex;
                justify-content: center;
                line-height: 80rpx;
                color: #e5a670;
                font-size: 26rpx;
                width: 100%;
                .text {
                    margin-right: 80rpx;
                    h2 {
                        color: #ffd9ad;
                        margin: 0 20rpx;
                    }
                }
            }
        }
        .inlet-box {
            margin-top: 40rpx;
            color: #000;
            font-size: 28rpx;
            font-weight: bold;

            .top-but {
                flex: 1;
                height: 216rpx;
                background-color: #e4f2e9;
                border-radius: 30rpx;
                display: flex;
                align-items: center;
                justify-content: space-evenly;
                flex-direction: column;
                margin-bottom: 26rpx;
                .icon {
                    width: 148rpx;
                    height: 56rpx;
                    background-color: #6ae199;
                    border-radius: 62rpx;
                }
            }
            .bottom-left-but {
                flex: 1;
                height: 100rpx;
                background-color: #e4f2e9;
                border-radius: 30rpx;
            }
            .bottom-right-but {
                width: 214rpx;
                height: 100rpx;
                background-color: #e4f2e9;
                border-radius: 30rpx;
                .icon {
                    width: 48rpx;
                    height: 42rpx;
                    background: #6ae199;
                    border-radius: 62rpx;
                }
            }
        }
    }
    .my-bg {
        position: absolute;
        top: 140rpx;
        right: 0;
        width: 328rpx;
        height: 219.84rpx;
    }
    .video-box {
        width: 100%;
        // height: 344rpx;
        border-radius: 20rpx;
        border: 2rpx solid #e6aa76;
        padding: 48rpx 36rpx;
        .top-content {
            margin-bottom: 40rpx;
            .right-but {
                color: #717171;
                font-size: 24rpx;
                text {
                    margin-right: 10rpx;
                }
            }
        }
        .card-row:first-child {
            margin-left: 0;
        }
        .card-row {
            width: 21.5%;
            margin-left: 32rpx;
            .card-img {
                position: relative;
                width: 100%;
                // height: 240rpx;
                text {
                    font-size: 20rpx;
                    color: #fff;
                    position: absolute;
                    right: 8rpx;
                    bottom: 8rpx;
                }
            }
            .card-name {
                color: #000;
                font-size: 24rpx;
                margin-top: 24rpx;
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 1;
                -webkit-box-orient: vertical;
            }
        }
    }
}
</style>