推广小程序前端代码
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

135 lines
4.4 KiB

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