popularize-front/pages_my/collection.vue

<template>
    <view class="invoiceIssuance">
        <view class="head-box"></view>
        <Navbar :title="$t('pages_my.collection.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 class="title">{{ $ot(item[typeKey[item.type]], typeKey2[item.type], 'title') }}</view>
                        <view class="date">{{ item[typeKey[item.type]].startTime }}</view>
                        <view class="address">{{ $ot(item[typeKey[item.type]], typeKey2[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">{{ $t('pages_my.collection.sign_up_now') }}</view><!-- 立即报名 -->
                        <view class="btn-box btn-box2" v-if="item[typeKey[item.type]].state == 1">{{ $t('pages_my.collection.ended') }}</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: this.$t('pages_my.collection.tabs.activity') // 活动
                },
                {
                    id: 1,
                    name: this.$t('pages_my.collection.tabs.travel') // 旅行
                },
            ],
            typeKey: ['activityObject', 'travelObject'],
            typeKey2: ['active', 'travel'],
        }
    },
    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: this.$t('pages_my.collection.confirm_cancel_collection'), // 确认取消收藏吗？
                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>