123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220 |
- <template>
- <view class="">
- <view :class="[attrs.queueing === 1 ? 'row-list':'column-list']" :style="$getStyle(styles.boxStyle)">
- <template v-for="item in goodsList">
- <view class="list-item-box" :style="getStyle(attrs)">
- <view class="list-item" :style="$getStyle(styles.goodsItem)">
- <image :mode="attrs.mode" :src="item.cover" :style="$getStyle(styles.goodsImage)"></image>
- <view class="item-details" :style="$getStyle(styles.goodsDetails)">
- <view class="">
- <view class="two-row" :style="$getStyle(styles.goodsTitle)">
- {{item.title}}
- </view>
- <view v-if="attrs.showSubhead" class="two-row" :style="$getStyle(styles.subheadTitle)">
- {{item.title}}
- </view>
- </view>
- <view class="goods-price" :style="$getStyle(styles.goodsPrice)">
- <view class="" :style="$getStyle(styles.price)">
- <text :style="$getStyle(styles.PriceTag)">¥</text>
- <text>{{item.min_sale_price}}</text>
- </view>
- <view class="original-price" :style="$getStyle(styles.originalPrice)">
- <text>¥</text>
- <text>{{item.max_market_price}}</text>
- </view>
- </view>
- </view>
- </view>
- </view>
- </template>
- </view>
- <u-loadmore :status="loadStatus" />
- </view>
- </template>
- <script>
- import Mixin from "./../Mixin.js"
- import {
- getGoodsListApi
- } from "./../api_list.js"
- export default {
- name: "SlyGoodsList",
- mixins: [Mixin],
- data() {
- return {
- page: 0,
- limit: 6,
- reachBottom: true,
- loadStatus: 'loadmore', // loading / nomore
- goodsList: []
- }
- },
- computed: {
- getStyle: () => {
- return (attrs) => {
- const styleObj = {};
- switch (attrs?.queueing) {
- case 1:
- const n = uni.upx2px(attrs?.gap || 0) + 'px'
- styleObj.padding = n
- break;
- case 2:
- const b = uni.upx2px(attrs?.gap || 0) + 'px'
- styleObj.paddingBottom = b
- break;
- };
- return styleObj
- }
- },
- },
- created() {
- this.getGoodsList()
- },
- methods: {
- onReachBottom() {
- if (this.loadStatus !== 'loadmore') return
- this.getGoodsList()
- },
- getGoodsList() {
- if (this.loadStatus === 'loading') return;
- this.loadStatus = 'loading'
- if (this.page < 1) {
- this.page = 0
- this.goodsList = []
- };
- this.page++;
- getGoodsListApi({
- page: this.page,
- limit: this.limit
- }).then(res => {
- const {
- page
- } = res;
- this.goodsList = this.goodsList.concat(page.list)
- if (this.page >= page.totalPage) {
- this.loadStatus = 'nomore'
- } else {
- this.loadStatus = 'loadmore'
- }
- }).catch(err => {
- if (this.page > 1) {
- this.page--;
- this.loadStatus = 'loadmore'
- } else {
- this.page = 0;
- this.loadStatus = 'nomore'
- }
- })
- }
- }
- }
- </script>
- <style lang="scss" scoped>
- @import url("../common.scss");
- .list-item-box {
- background-color: transparent;
- .list-item {
- overflow: hidden;
- image {
- flex-shrink: 0;
- }
- .original-price {
- text-decoration: line-through;
- padding-left: 8rpx;
- }
- }
- }
- .row-list {
- display: flex;
- justify-content: space-between;
- flex-wrap: wrap;
- align-items: stretch;
- .list-item-box {
- width: 50%;
- .list-item {
- width: 100%;
- }
- &:nth-child(odd) {
- padding-left: 0 !important;
- }
- &:nth-child(even) {
- padding-right: 0 !important;
- }
- &:nth-child(1),
- &:nth-child(2) {
- padding-top: 0 !important;
- }
- }
- .list-item {
- max-width: 100%;
- min-height: 100%;
- image {
- width: 100% !important;
- // margin: 0 auto;
- }
- .item-details {
- width: 100%;
- // text-align: left;
- display: flex;
- flex-direction: column;
- justify-content: space-between;
- // align-content: space-between;
- // justify-content: space-between;
- .goods-price {
- display: flex;
- align-items: flex-end;
- }
- }
- }
- }
- .column-list {
- .list-item {
- width: 100%;
- display: flex;
- align-items: stretch;
- image {
- max-width: 40%;
- height: auto !important;
- }
- .item-details {
- flex: 1;
- display: flex;
- flex-direction: column;
- justify-content: space-between;
- .goods-price {
- display: flex;
- align-items: flex-end;
- }
- }
- }
- }
- </style>
|