popularize-front/pages_my/collection.vue

<template>
	<view class="invoiceIssuance">
        <view class="head-box"></view>
		<Navbar title="我的收藏" :autoBack="true" :bgColor="bgColor" leftIconSize="18px" height="100rpx" :leftIconColor="leftIconColor" :titleStyle="{color:fontColor}" />
        <view class="content contentPosition_">
            <view class="info cardStyle_" v-for="(item, index) in cardListData" :key="index">
                <view class="left">
                    <image :src="item.image" alt="">
                </view>
                <view class="right">
                    <view class="detailed">
                        <view class="title">{{item.title}}</view>
                        <view class="date">{{item.startTime}}</view>
                        <view class="address">{{item.address}}</view>
                    </view>
                    <view class="data">
                        <view>12/30</view>
                        <button class="mini-btn" size="mini" @click="toDetail(item)">立即报名</button>
                    </view>
                </view>
                <i class="icon"></i>
            </view>
            <!-- <view class="info cardStyle_">
                <view class="left">
                    <image src="https://img0.baidu.com/it/u=4274003247,920124130&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1031" alt="">
                </view>
                <view class="right">
                    <view class="detailed">
                        <view class="title">夏日去撒野旅游计划～</view>
                        <view class="date">2024.10.28 10:00</view>
                        <view class="address">成都市东丽湖露营地32号</view>
                    </view>
                    <view class="data">
                        <view>12/30</view>
                        <button class="mini-btn" size="mini" @click="toDetail(item)">立即报名</button>
                    </view>
                </view>
                <i class="icon"></i>
            </view> -->
        </view>
	</view>
</template>

<script>
    import Navbar from '@/pages/components/Navbar.vue'
    import { globalMixin } from '../pages/mixins/globalMixin';
	export default{
        mixins: [globalMixin],
        components:{
            Navbar
		},
        computed: {
            customStyle1() {
                return {
                    height: '30rpx',
                    color: '#FF4546',
                }
            }
        },
		data() {
			return {
                params:{
					pageNo:1,
					pageSize:10
				},
                totalPage: '',
                cardListData: []
			}
		},
        onReachBottom() {
            if(this.params.pageNo >= this.totalPage) return
			this.params.pageNo ++
			this.collectPageList()
        },
        onLoad() {
            this.collectPageList()
        },
		methods: {
            collectPageList() {
                this.$api('collectPageList',this.params, res=> {
                    if(res.code == 200) {
						this.totalPage = res.result.pages
						this.cardListData = [...this.cardListData,...res.result.records]
					}
                })
            },
            toDetail({ id }) {
				uni.navigateTo({
					url:`/pages_order/huodong-detail?activityId=${id}`
				})
			}
		}
	}
</script>
<style scoped lang="scss">
.invoiceIssuance {
    .content {
        .info {
            position: relative;
            margin: 10rpx 32rpx 36rpx;;
            border-radius: 26rpx;
            .icon {
                position: absolute;
                right: 0;
                top: 0;
                display: block;
                width: 66rpx;
                height: 56rpx;
                background: red;
                background: url('@/static/image/icon.png') no-repeat;
                background-size: 100% 100%;
            }
            .right {
                .data {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    .mini-btn {
                        display: flex;
                        align-items: center;
                        margin: 0;
                        background: linear-gradient(to right, #FE5E5E, #E41522);
                        height: 45rpx;
                        width: 181rpx;
                        color:#fff;
                        border-radius: 60rpx;
                        padding-bottom: 10rpx;
                    }
                }
            }
        }
    }
}

</style>