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_" 
			@click="toDetail(item)"
			v-for="(item, index) in cardListData" :key="index">
				<view class="left">
					<image :src="
					item[typeKey[item.type]].image &&
					item[typeKey[item.type]].image.split(',')[0]" alt="">
				</view>
				<view class="right">
					<view class="detailed">
						<view class="title">{{item[typeKey[item.type]].title}}</view>
						<view class="date">{{item[typeKey[item.type]].startTime}}</view>
						<view class="address">{{item[typeKey[item.type]].address}}</view>
					</view>
					<view class="data">
						<view>{{item[typeKey[item.type]].num}}/{{item[typeKey[item.type]].sum}}</view>
						<view class="btn-box" v-if="item[typeKey[item.type]].state == 0">立即报名</view>
						<view class="btn-box btn-box2"  v-if="item[typeKey[item.type]].state == 1">已结束</view>
					</view>
				</view>
				<i class="icon" @click.stop="collect(item)"></i>
			</view>
			<uv-load-more :status="status" fontSize="24rpx" dashed line />
			<!-- <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'),
				status:"loading",
				tabCurrent:0,
				params: {
					pageNo: 1,
					pageSize: 10,
					type:0,
				},
				totalPage: '',
				cardListData: [],
				tabList: [
					{
						id: 0,
						name: '活动'
					},
					{
						id: 1,
						name: '旅行'
					},
				],
				typeKey : ['activityObject', 'travelObject'],
			}
		},
		onReachBottom() {
			if (this.params.pageNo >= this.totalPage) return
			this.params.pageNo++
			this.collectPageList()
		},
		onLoad() {
			this.collectPageList()
		},
		onPullDownRefresh() {
			this.params.pageNo = 1
			this.cardListData = []
			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 => {
					uni.stopPullDownRefresh()
					if (res.code == 200) {
						this.totalPage = res.result.pages
						this.cardListData = [...this.cardListData, ...res.result.records]
						if(this.params.pageNo >= this.totalPage) {
							this.status = "nomore"
						}else {
							this.status = "loadmore"
						}
					}
				})
			},
			toDetail(item) {
				if(item.type == 0) {//活动
					uni.navigateTo({
						url: `/pages_order/huodong-detail?activityId=${item.activityObject.id}`
					})
				}else{//旅行
					uni.navigateTo({
						url: `/pages_order/lvyou-detail?travelId=${item.travelObject.id}`
					})
				}
			},
			collect(item){
				uni.showModal({
					title: '确认取消收藏吗？',
					success : res => {
						if(!res.confirm) return
						this.$api('collect', {
							id : item[this.typeKey[item.type]].id,
							type : item.type,
						}, res => {
							if(res.code == 200){
								this.cardListData = []
								this.params.pageNo = 1
								this.collectPageList()
								uni.showToast({
									title: res.message,
									icon: 'none'
								})
							}
						})
					}
				})
			},
		}
	}
</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;
						}
						
						.btn-box {
							width: 180rpx;
							height: 54rpx;
							background: url('@/static/image/member/btn-2.png') no-repeat;
							background-size: 100% 100%;
							font-weight: 500;
							font-size: 23rpx;
							color: #FFFFFF;
							text-align: center;
							line-height: 54rpx;
						}
						.btn-box2 {
							background: #34312E;
							color: #AFAFAF;
							border-radius: 60rpx;
						}
					}
				}
			}
		}
	}
</style>