123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135 |
- <template>
- <view>
- <u-navbar :placeholder="true" bgColor="#fff" :autoBack="true" :border="true" title="盲票列表"></u-navbar>
- <view class="ticket-box">
- <view class="flex ticket-box-list">
- <navigator :url="`/pages/ticketBox/detail?boxId=${ item.boxId }`" class="flex ticket-box-list-item"
- hover-class="navigator-hover" v-for="(item, index) in list" :key="index">
- <image :src="item.picUrl" mode="aspectFill"></image>
- <view class="info">
- <view class="title ells-one">{{ item.title }}</view>
- <view class="price">¥{{ $numberFormat(item.salePrice) }}</view>
- </view>
- </navigator>
- <view class="ticket-box-list-item"></view>
- </view>
- <view class="flex empty" v-if="!list.length">
- <u-empty text="数据为空" mode="order" />
- </view>
- </view>
- </view>
- </template>
- <script>
- import env from '../../config/env.js'
- import $http from '@/utils/request.js'
- export default {
- data() {
- return {
- pageNum: 1,
- total: 0,
- list: [],
- };
- },
- onLoad() {
- this.getList()
- },
- methods: {
- getList() {
- uni.showLoading({
- title: '加载中'
- });
- let data = {
- categoryId: '',
- tagId: '',
- type: 'online',
- noToken: true
- }
- $http.post(`/api/v1/mp/user/mall/ticket/list?pageNum=${this.pageNum}&pageSize=20`, data).then(
- res => {
- uni.hideLoading();
- if (res.code == 0) {
- res.rows.forEach(item => {
- let picUrlArr = item.picUrl.split(',')
- item.picUrl = env.filePublic + picUrlArr[0] + '?imageView2/2/w/750'
- })
- this.total = res.total
- this.list = this.list.concat(res.rows)
- }
- }).catch(() => {
- uni.hideLoading();
- })
- },
- },
- onReachBottom() {
- // 判断是否有数据
- if (this.total > this.pageNum * 20) {
- setTimeout(() => {
- ++this.pageNum
- this.getList()
- }, 500)
- } else {
- uni.$u.toast('没有更多数据了')
- }
- },
- }
- </script>
- <style lang="scss">
- .ticket-box {
- margin: 34rpx 0;
- &-list {
- justify-content: space-between;
- padding: 0 34rpx;
- flex-wrap: wrap;
- padding-bottom: 100rpx;
- &-item {
- flex-direction: column;
- box-sizing: border-box;
- padding: 12rpx;
- width: 330rpx;
- border-radius: 22rpx;
- margin-bottom: 34rpx;
- background-color: #FFFFFF;
- image {
- width: 300rpx;
- height: 240rpx;
- border-radius: 22rpx;
- margin-bottom: 34rpx;
- }
- .info {
- width: 100%;
- }
- .title {
- line-height: 36rpx;
- font-size: 36rpx;
- font-weight: bold;
- margin-bottom: 20rpx;
- }
- .price {
- font-size: 26rpx;
- font-weight: bold;
- color: #FF4208;
- line-height: 42rpx;
- margin-bottom: 24rpx;
- }
- }
- &-item:last-child {
- border: none;
- background: none;
- }
- }
- .empty {
- height: 60vh;
- }
- }
- </style>
|