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_">
			<uv-sticky offsetTop="220rpx" :bgColor="bgColor">
				<uv-tabs :scrollable="false" @click="tabs" :list="tabList" lineWidth="40" :current="tabCurrent"
					:lineColor="`url(${lineBg}) 100% 100%`"
					:activeStyle="{color: '#FD5C5C', fontWeight: 'bold',transform: 'scale(1.05)'}"
					:inactiveStyle="{color: '#999', transform: 'scale(1)'}"
					itemStyle="padding-left: 15px; padding-right: 15px; height: 44px;"></uv-tabs>
			</uv-sticky>
			<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 {
				lineBg: require('@/static/image/cart/tabIcon.png'),
				tabCurrent:0,
				params: {
					pageNo: 1,
					pageSize: 10,
					type:0
				},
				totalPage: '',
				cardListData: [],
				tabList: [
					{
						id: 0,
						name: '旅行'
					},
					{
						id: 1,
						name: '活动'
					},
				],
			}
		},
		onReachBottom() {
			if (this.params.pageNo >= this.totalPage) return
			this.params.pageNo++
			this.collectPageList()
		},
		onLoad() {
			this.collectPageList()
		},
		methods: {
			tabs(e) {
				this.tabCurrent = e.index
				this.cardListData = []
				this.params.pageNo = 1
				this.collectPageList()
			},
			collectPageList() {
				this.params.type = this.tabCurrent
				this.$api('collectPageList', this.params, res => {
					if (res.code == 200) {
						this.totalPage = res.result.pages
						this.cardListData = [...this.cardListData, ...res.result.records]
					}
				})
			},
			toDetail(item) {
				if(item.type == 0) {//活动
					uni.navigateTo({
						url: `/pages_order/huodong-detail?activityId=${item.activityOrderId}`
					})
				}else{//旅行
					uni.navigateTo({
						url: `/pages_order/lvyou-detail?travelId=${item.activityOrderId}`
					})
				}
				
			}
		}
	}
</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>