yichael_intomovie/pages/my/viewHistorys.vue

<template>
    <z-paging
        class="content-page-wrap flex-column"
        ref="paging"
        v-model="videoList"
        @query="gteHistoryData"
        :refresher-enabled="false"
    >
        <template #top>
            <view
                class="head-title flex-left justify-between"
                style="padding: 32rpx 32rpx 0 32rpx"
            >
                <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>
        </template>
        <view class="flex-row flex-wrap">
            <view
                v-for="(item, index) in videoList"
                class="videoCardMain flex-column"
                @click="goPlayVideo(item)"
            >
                <view class="videoCardImgBox">
                    <image
                        class="videoCardImg"
                        :src="item.videoPoster"
                        mode="aspectFill"
                    ></image>
                    <text class="video-state">{{
                        secondsToTime(item.duration)
                    }}</text>
                </view>
                <view class="videoCardName line_1">
                    {{ item.videoName }}
                </view>
            </view>
        </view>
    </z-paging>
</template>

<script>
import $req from "@/service/serviceConfig";
export default {
    data() {
        return {
            videoList: [],
        };
    },
    onShow() {
        let vm = this;
        vm.gteHistoryData();
    },
    methods: {
        // 获取历史数据
        gteHistoryData(pageNo = 1) {
            let vm = this;
            uni.showLoading({
                title: "加载中",
            });
            let query = {
                page: pageNo,
                size: 10,
            };
            $req.request({ alias: "view-records-page", query })
                .then((res) => {
                    if (res.code == 0) {
                        uni.hideLoading();
                        vm.$refs.paging.complete(res.data.rows);
                    }
                })
                .catch(() => {
                    uni.hideLoading();
                    vm.$refs.paging.complete(false);
                });
        },
        goPlayVideo(row) {
            uni.navigateTo({
                url: `/pages/play/play?url=${row.url}`,
            });
        },
        goBack() {
            uni.navigateBack();
        },
        // 秒转换为时分秒
        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>