|
@@ -1,190 +1,196 @@
|
|
|
-<template>
|
|
|
- <view>
|
|
|
- <!-- #ifdef MP-ALIPAY -->
|
|
|
- <!-- <u-navbar :placeholder="true" bgColor="#fff" :autoBack="true" :border="true" title="盲票列表" leftIconSize="0"> -->
|
|
|
- <u-navbar :placeholder="true" bgColor="#fff" :autoBack="true" :border="true" title="商品列表" leftIconSize="0">
|
|
|
- </u-navbar>
|
|
|
- <!-- #endif -->
|
|
|
- <!-- #ifdef MP-WEIXIN -->
|
|
|
- <u-navbar :placeholder="true" bgColor="#fff" :autoBack="true" :border="true" title="商品列表"></u-navbar>
|
|
|
- <!-- #endif -->
|
|
|
- <!-- #ifndef MP-WEIXIN || MP-ALIPAY -->
|
|
|
- <view v-if="pagesNum > 1">
|
|
|
- <u-navbar :placeholder="true" bgColor="#fff" :autoBack="true" :border="true" title="商品列表" />
|
|
|
- </view>
|
|
|
- <view v-else>
|
|
|
- <u-navbar leftIconSize="0" :placeholder="true" bgColor="#fff" :border="true" title="商品列表">
|
|
|
- <view class="nav-left flex" slot="left" @click="$toIndex()">
|
|
|
- <u-icon name="arrow-left" size="20" color="#333"></u-icon>
|
|
|
- </view>
|
|
|
- </u-navbar>
|
|
|
- </view>
|
|
|
- <!-- #endif -->
|
|
|
- <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"> -->
|
|
|
- <navigator :url="JSON.parse(item.refType).value === 'goods' ? `/packagePrize/goods/index?id=${ item.refId }&boxId=${ item.boxId }`:JSON.parse(item.refType).value === 'coin' ?`/packagePrize/goods/index?id=424&boxId=${ item.boxId }`:`/packagePrize/goods/index?id=425&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">
|
|
|
- <!-- #ifdef MP-ALIPAY -->
|
|
|
- <view class="titletwo">{{ item.title }}</view>
|
|
|
- <!-- #endif -->
|
|
|
- <!-- #ifndef MP-ALIPAY -->
|
|
|
- <view class="titletwo">{{ item.title }}</view>
|
|
|
- <!-- #endif -->
|
|
|
-
|
|
|
- <view class="price">¥{{ $numberFormat(item.salePrice) }}</view>
|
|
|
- </view>
|
|
|
- </navigator>
|
|
|
- <view style="width: 100%;">
|
|
|
- <u-loadmore :line="true" v-if="list.length>8" :status="status" :loading-text="'努力加载中'"
|
|
|
- :nomore-text="'已经到底了'" />
|
|
|
- </view>
|
|
|
- </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>
|
|
|
- </view>
|
|
|
-</template>
|
|
|
-
|
|
|
-<script>
|
|
|
- import env from '../../config/env.js'
|
|
|
- import $http from '@/utils/request.js'
|
|
|
- export default {
|
|
|
- data() {
|
|
|
- return {
|
|
|
- status: 'nomore', //上拉刷新状态
|
|
|
- pageNum: 1,
|
|
|
- total: 0,
|
|
|
- list: [],
|
|
|
- ids: [],
|
|
|
- pagesNum: '',
|
|
|
- };
|
|
|
- },
|
|
|
- onShow() {
|
|
|
- this.pagesNum = getCurrentPages().length
|
|
|
- },
|
|
|
- onLoad(options) {
|
|
|
- if (options.ids) {
|
|
|
- this.ids = JSON.parse(options.ids)
|
|
|
- }
|
|
|
- this.getList()
|
|
|
- },
|
|
|
- methods: {
|
|
|
- getList() {
|
|
|
- let data = {
|
|
|
- categoryId: '',
|
|
|
- tagId: '',
|
|
|
- type: 'online',
|
|
|
- noToken: true,
|
|
|
- boxIds: this.ids,
|
|
|
- salePriceSort: 1,
|
|
|
- }
|
|
|
- $http.post(`/api/v1/mp/user/mall/ticket/goods/list?pageNum=${this.pageNum}&pageSize=20`, data).then(
|
|
|
- res => {
|
|
|
- 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(() => {
|
|
|
- })
|
|
|
- },
|
|
|
- },
|
|
|
-
|
|
|
- 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">
|
|
|
- .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%;
|
|
|
- }
|
|
|
-
|
|
|
- .titletwo {
|
|
|
- width: 100%;
|
|
|
- line-height: 40rpx;
|
|
|
- height: 40rpx;
|
|
|
- font-size: 36rpx;
|
|
|
- font-weight: bold;
|
|
|
- white-space: nowrap;
|
|
|
- overflow: hidden;
|
|
|
- text-overflow: ellipsis;
|
|
|
- }
|
|
|
-
|
|
|
- .price {
|
|
|
- font-size: 26rpx;
|
|
|
- font-weight: bold;
|
|
|
- margin-top: 20rpx;
|
|
|
- color: #FF4208;
|
|
|
- line-height: 42rpx;
|
|
|
- margin-bottom: 24rpx;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- .empty {
|
|
|
- height: 50vh;
|
|
|
-
|
|
|
- .center {
|
|
|
- text-align: center;
|
|
|
-
|
|
|
- &-img {
|
|
|
- width: 228rpx;
|
|
|
- height: 320rpx;
|
|
|
- }
|
|
|
-
|
|
|
- &-font {
|
|
|
- font-size: 30rpx;
|
|
|
- font-weight: 400;
|
|
|
- color: #999999;
|
|
|
- margin-bottom: 250rpx;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-</style>
|
|
|
+<template>
|
|
|
+ <view>
|
|
|
+ <!-- #ifdef MP-ALIPAY -->
|
|
|
+ <!-- <u-navbar :placeholder="true" bgColor="#fff" :autoBack="true" :border="true" title="盲票列表" leftIconSize="0"> -->
|
|
|
+ <u-navbar :placeholder="true" bgColor="#fff" :autoBack="true" :border="true" title="商品列表" leftIconSize="0">
|
|
|
+ </u-navbar>
|
|
|
+ <!-- #endif -->
|
|
|
+ <!-- #ifdef MP-WEIXIN -->
|
|
|
+ <u-navbar :placeholder="true" bgColor="#fff" :autoBack="true" :border="true" title="商品列表"></u-navbar>
|
|
|
+ <!-- #endif -->
|
|
|
+ <!-- #ifndef MP-WEIXIN || MP-ALIPAY -->
|
|
|
+ <view v-if="pagesNum > 1">
|
|
|
+ <u-navbar :placeholder="true" bgColor="#fff" :autoBack="true" :border="true" title="商品列表" />
|
|
|
+ </view>
|
|
|
+ <view v-else>
|
|
|
+ <u-navbar leftIconSize="0" :placeholder="true" bgColor="#fff" :border="true" title="商品列表">
|
|
|
+ <view class="nav-left flex" slot="left" @click="$toIndex()">
|
|
|
+ <u-icon name="arrow-left" size="20" color="#333"></u-icon>
|
|
|
+ </view>
|
|
|
+ </u-navbar>
|
|
|
+ </view>
|
|
|
+ <!-- #endif -->
|
|
|
+ <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"> -->
|
|
|
+ <navigator @click="couponStorage(item)"
|
|
|
+ :url="JSON.parse(item.refType).value === 'goods' ? `/packagePrize/goods/index?id=${ item.refId }&boxId=${ item.boxId }`:JSON.parse(item.refType).value === 'coin' ?`/packagePrize/goods/index?id=424&boxId=${ item.boxId }`:`/packagePrize/goods/index?id=425&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">
|
|
|
+ <!-- #ifdef MP-ALIPAY -->
|
|
|
+ <view class="titletwo">{{ item.title }}</view>
|
|
|
+ <!-- #endif -->
|
|
|
+ <!-- #ifndef MP-ALIPAY -->
|
|
|
+ <view class="titletwo">{{ item.title }}</view>
|
|
|
+ <!-- #endif -->
|
|
|
+
|
|
|
+ <view class="price">¥{{ $numberFormat(item.salePrice) }}</view>
|
|
|
+ </view>
|
|
|
+ </navigator>
|
|
|
+ <view style="width: 100%;">
|
|
|
+ <u-loadmore :line="true" v-if="list.length>8" :status="status" :loading-text="'努力加载中'"
|
|
|
+ :nomore-text="'已经到底了'" />
|
|
|
+ </view>
|
|
|
+ </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>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import env from '../../config/env.js'
|
|
|
+ import $http from '@/utils/request.js'
|
|
|
+ export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ status: 'nomore', //上拉刷新状态
|
|
|
+ pageNum: 1,
|
|
|
+ total: 0,
|
|
|
+ list: [],
|
|
|
+ ids: [],
|
|
|
+ pagesNum: '',
|
|
|
+ };
|
|
|
+ },
|
|
|
+ onShow() {
|
|
|
+ this.pagesNum = getCurrentPages().length
|
|
|
+ },
|
|
|
+ onLoad(options) {
|
|
|
+ if (options.ids) {
|
|
|
+ this.ids = JSON.parse(options.ids)
|
|
|
+ }
|
|
|
+ this.getList()
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ getList() {
|
|
|
+ let data = {
|
|
|
+ categoryId: '',
|
|
|
+ tagId: '',
|
|
|
+ type: 'online',
|
|
|
+ noToken: true,
|
|
|
+ boxIds: this.ids,
|
|
|
+ salePriceSort: 1,
|
|
|
+ }
|
|
|
+ $http.post(`/api/v1/mp/user/mall/ticket/goods/list?pageNum=${this.pageNum}&pageSize=20`, data).then(
|
|
|
+ res => {
|
|
|
+ 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(() => {})
|
|
|
+ },
|
|
|
+ couponStorage(item) {
|
|
|
+ if (item.refType && JSON.parse(item.refType).value === 'coupon' || JSON.parse(item.refType).value === 'coupon_pkg') {
|
|
|
+ if (item.couponDetail) {
|
|
|
+ uni.setStorageSync('couponDetail', item.couponDetail);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ 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>
|
|
|
+ .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%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .titletwo {
|
|
|
+ width: 100%;
|
|
|
+ line-height: 40rpx;
|
|
|
+ height: 40rpx;
|
|
|
+ font-size: 36rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ white-space: nowrap;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ }
|
|
|
+
|
|
|
+ .price {
|
|
|
+ font-size: 26rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ margin-top: 20rpx;
|
|
|
+ color: #FF4208;
|
|
|
+ line-height: 42rpx;
|
|
|
+ margin-bottom: 24rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .empty {
|
|
|
+ height: 50vh;
|
|
|
+
|
|
|
+ .center {
|
|
|
+ text-align: center;
|
|
|
+
|
|
|
+ &-img {
|
|
|
+ width: 228rpx;
|
|
|
+ height: 320rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ &-font {
|
|
|
+ font-size: 30rpx;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #999999;
|
|
|
+ margin-bottom: 250rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|