|
|
@@ -0,0 +1,221 @@
|
|
|
+<template>
|
|
|
+ <view>
|
|
|
+ <!-- #ifdef MP-ALIPAY -->
|
|
|
+ <u-navbar :title="storeName" :border="true" bgColor="#fff" leftIconSize="0" />
|
|
|
+ <!-- #endif -->
|
|
|
+ <!-- #ifndef MP-ALIPAY -->
|
|
|
+ <u-navbar :title="storeName" :border="true" leftIconSize="0" bgColor="#fff" />
|
|
|
+ <!-- #endif -->
|
|
|
+
|
|
|
+ <view class="list">
|
|
|
+ <view class="list-item" v-for="(item, index) in list" :key="index">
|
|
|
+ <image :src="item.picUrl" mode="aspectFit"></image>
|
|
|
+ <view class="list-item-content flex">
|
|
|
+ <view class="top">
|
|
|
+ <view class="top-title">{{ item.title }}</view>
|
|
|
+ <view class="top-num">序列号：{{ item.serialNo }}</view>
|
|
|
+ <view class="top-price" v-if="item.status != '2'">面值：￥{{ $numberFormat(item.facePrice) }}</view>
|
|
|
+ </view>
|
|
|
+ <view class="bottom flex">
|
|
|
+ <view class="bottom-price">面值：<text>￥{{ $numberFormat(item.facePrice) }}</text></view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <u-loadmore :line="true" v-if="list.length > 5" :status="status" :loading-text="'努力加载中'" :nomore-text="'已经到底了'" />
|
|
|
+ </view>
|
|
|
+ <view class="flex empty" v-if="!list.length">
|
|
|
+ <view class="center">
|
|
|
+ <image class="center-img" src="https://mp-public-1310078123.cos.ap-shanghai.myqcloud.com/v2/nodata_3.png" mode="scaleToFill"></image>
|
|
|
+ <view class="center-font">暂无盲票</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import $http from '@/utils/request.js'
|
|
|
+ export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ storeName: '哈哈',
|
|
|
+ channelId: '',
|
|
|
+ status: 'nomore',//上拉刷新状态
|
|
|
+ pageNum: 1,
|
|
|
+ total: 0,
|
|
|
+ list: [],
|
|
|
+ pagesNum: '',
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ onLoad(options) {
|
|
|
+ // 当前页面参数
|
|
|
+ this.channelId = options.channelId
|
|
|
+ },
|
|
|
+ onShow() {
|
|
|
+ // 获取页面数据
|
|
|
+ this.pageList()
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ // 获取页面数据
|
|
|
+ getList() {
|
|
|
+ $http.post(`/api/v1/mp/user/ticket/list/underChannel?pageNum=${this.pageNum}&pageSize=20`,{
|
|
|
+ channelId: this.channelId
|
|
|
+ }).then(res => {
|
|
|
+ console.log('res',res);
|
|
|
+ return
|
|
|
+ if (res.code == 0) {
|
|
|
+ res.rows.forEach(item => {
|
|
|
+ item.picUrl = env.filePublic + item.picUrl.split(',')[0] + '?imageView2/2/w/170'
|
|
|
+ })
|
|
|
+ this.total = res.total
|
|
|
+ this.list = this.list.concat(res.rows)
|
|
|
+ }
|
|
|
+ }).catch(() => {
|
|
|
+ })
|
|
|
+ },
|
|
|
+ pageList() {
|
|
|
+ this.pageNum = 1
|
|
|
+ this.list = []
|
|
|
+ this.getList()
|
|
|
+ },
|
|
|
+ },
|
|
|
+ onReachBottom() {
|
|
|
+ if(this.total < this.pageNum * 20) return ;
|
|
|
+ this.status = 'loading';
|
|
|
+ ++this.pageNum
|
|
|
+ if(this.total < this.pageNum * 20) this.status = 'nomore';
|
|
|
+ else this.status = 'loading';
|
|
|
+ this.getList()
|
|
|
+ },
|
|
|
+ }
|
|
|
+</script>
|
|
|
+<style lang="scss" scoped>
|
|
|
+ // 状态
|
|
|
+ .state {
|
|
|
+ display: flex;
|
|
|
+ position: fixed;
|
|
|
+ background-color: #FFFFFF;
|
|
|
+ width: 100%;
|
|
|
+ z-index: 10;
|
|
|
+ box-shadow: 0 5rpx 5rpx #ececec;
|
|
|
+ }
|
|
|
+ // 列表
|
|
|
+ .list {
|
|
|
+ padding: 120rpx 0 100rpx;
|
|
|
+ margin: 0 20rpx 0;
|
|
|
+
|
|
|
+ &-item {
|
|
|
+ display: flex;
|
|
|
+ background: #FFFFFF;
|
|
|
+ border-radius: 11px;
|
|
|
+ padding: 34rpx 10rpx;
|
|
|
+ margin-bottom: 34rpx;
|
|
|
+
|
|
|
+ image {
|
|
|
+ width: 200rpx;
|
|
|
+ height: 270rpx;
|
|
|
+ border-radius: 22rpx;
|
|
|
+ margin-right: 15rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ &-content {
|
|
|
+ flex: 1;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: space-between;
|
|
|
+ padding: 16rpx 0;
|
|
|
+
|
|
|
+
|
|
|
+ .top {
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+
|
|
|
+ &-title {
|
|
|
+ font-size: 36rpx;
|
|
|
+ line-height: 36rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ margin-bottom: 46rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ &-num {
|
|
|
+ font-size: 26rpx;
|
|
|
+ line-height: 26rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ &-price {
|
|
|
+ margin-top: 30rpx;
|
|
|
+ font-size: 26rpx;
|
|
|
+ line-height: 26rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .bottom {
|
|
|
+ width: 100%;
|
|
|
+ justify-content: space-between;
|
|
|
+
|
|
|
+ &-price {
|
|
|
+ height: 26rpx;
|
|
|
+ overflow: hidden;
|
|
|
+ font-size: 26rpx;
|
|
|
+ line-height: 26rpx;
|
|
|
+
|
|
|
+ text {
|
|
|
+ color: #F9822C ;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ &-pricetwo {
|
|
|
+ view {
|
|
|
+ display: inline-block;
|
|
|
+ height: 26rpx;
|
|
|
+ font-size: 26rpx;
|
|
|
+ line-height: 26rpx;
|
|
|
+ vertical-align: top;
|
|
|
+ }
|
|
|
+ text {
|
|
|
+ display: inline-block;
|
|
|
+ color: #F9822C ;
|
|
|
+ width: 350rpx;
|
|
|
+ height: 26rpx;
|
|
|
+ font-size: 26rpx;
|
|
|
+ line-height: 26rpx;
|
|
|
+ white-space: nowrap;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ &-btn {
|
|
|
+ width: 220rpx;
|
|
|
+ height: 72rpx;
|
|
|
+ line-height: 72rpx;
|
|
|
+ text-align: center;
|
|
|
+ background: #F9822C;
|
|
|
+ border-radius: 36rpx;
|
|
|
+ color: #FFFFFF;
|
|
|
+ font-size: 30rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .empty {
|
|
|
+ height: 60vh;
|
|
|
+
|
|
|
+ .center {
|
|
|
+ text-align: center;
|
|
|
+
|
|
|
+ &-img {
|
|
|
+ width: 228rpx;
|
|
|
+ height: 320rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ &-font {
|
|
|
+ font-size: 30rpx;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #999999;
|
|
|
+ margin-bottom: 250rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|
