|
|
- <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>
|