<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.split(',')[0]" 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>
							 |