hlm_pl_mall_h5/pages/home/bargain/Bargainlist.vue

<template><page-meta :root-font-size="fontSize+'px'"></page-meta>
    <home-base :show="false"><view style="position: absolute;top:0;right:0;left:0;bottom:0" class="scroll-view-wrapper div container">
        <view class="div common-header-wrap">
            <view class="status-holder"></view>
            <view :style="'height:'+navHeight+'px'"></view>
            <view class="common-header-holder"></view>
            <view class="common-header-fixed">
            <title-header />
            <uni-nav-bar title="砍价活动" class="common-header" left-icon="back" @clickLeft="goBack()">
            </uni-nav-bar>
        </view>
        </view>

        <view class="scroll-view div goodslist-body show-goods-list" style="position:relative">
            <!-- 无限加载滚动列表 -->
            <scroll-view style="position: absolute;top:0;right:0;left:0;bottom:0" class="div goods-list single-column" @scrolltolower="loadMore" scroll-y="true">
                <view class="div goods-item"
                     v-for='(item, index) in bargainList'
                     v-bind:key='index'
                >
                    <view class="div goods-img">
                        <view class="div img-content" style="height: 100px;">
                            <image mode="aspectFit" class="img" :src="item.bargain_goods_image_url" />
                        </view>
                        <!---->
                    </view>
                    <view class="div info-wrap">
                        <view class="div name-wrap">
                            <view class="div goods-name">
                                {{item.bargain_goods_name}}
                            </view>
                            <view class="div progress-wrap">
                                <view class="div progress-content">
                                    <view class="div progress-bar">
                                        <view class="div progress-inner-bar" :style="'width:'+item.order_percent+'%'"></view>
                                    </view>
                                    <!---->
                                </view>
                                <text class="span color-base-text font-size-activity-tag txt lineheight-clear">
                                    <text class="span">已砍{{item.order_count}}件</text>
                                </text>
                            </view>
                        </view>
                        <view class="div lineheight-clear">
                            <view class="div discount-price">
                                <text class="span font-size-tag lineheight-clear txt">
                                    <text class="span">底价：</text>
                                </text>
                                <text class="span unit color-base-text font-size-tag">
                                    <text class="span">&yen;</text>
                                </text>
                                <text class="span price color-base-text font-size-toolbar">
                                    <text class="span">{{item.bargain_floorprice}}</text>
                                </text>
                            </view>
                        </view>
                        <view class="div pro-info">
                            <view class="div view-content delete-price font-size-activity-tag color-tip">
                                <text class="span font-size-tag lineheight-clear txt">
                                    <text class="span">原价：</text>
                                </text>
                                <text class="span unit">
                                    <text class="span">&yen;</text>
                                </text>
                                <text class="span price">
                                    <text class="span">{{item.bargain_goods_price}}</text>
                                </text>
                            </view>
                            <view class="div view-content">
                                <view class="div button-content" @click="goDetail(item)">
                                    去砍价
                                </view>
                            </view>
                        </view>
                    </view>
                </view>
                <view class="div loading-wrapper" v-if="bargainList.length > 0">
                    <view  class="p common-no-more" v-if='!isMore'>没有更多了</view>
                    <uni-load-more status="loading" color='#e93b3d' v-if='isMore'></uni-load-more>
                </view>
                <empty-record v-if='bargainList.length <= 0 && !isMore'></empty-record>
            </scroll-view>
        </view>

    </view></home-base>
</template>

<script>
import {getFontSize} from '@/util/common'
import TitleHeader from '../../TitleHeader'
import { urlencode } from '@/util/common'
import HomeBase from '../HomeBase'
import EmptyRecord from '../../EmptyRecord'
import { getBargainList } from '../../../api/homeBargain'
export default {
  name: 'PintuanList',
  components:{
    TitleHeader,
    HomeBase,
    EmptyRecord
  },
  mounted(){
  // #ifdef  MP-WEIXIN
  this.navHeight = uni.getMenuButtonBoundingClientRect().top
  // #endif
  },
  computed:{
  fontSize(){
    return getFontSize()
  },
  },
  data(){
    return {
      navHeight: 0,
      bargainList: [],
      params: { 'page': 0, 'per_page': 10 },
      loading: false, // 是否加载更多
      isMore: true // 是否有更多
    }
  },
  created () {
  this.loadMore()
  },
  methods:{
    goBack(){uni.navigateBack({delta:1})},
    loadMore () {
      this.loading = true
      this.params.page = ++this.params.page
      if (this.isMore) {
        this.loading = false
        this.getBargainList(true)
      }
    },
    getBargainList () {
      uni.showLoading({ title: '加载中' })
      getBargainList(this.params).then(res => {
        uni.hideLoading()
        if (res.result.hasmore) {
          this.isMore = true
        } else {
          this.isMore = false
        }

        if (this.bargainList) {
          this.bargainList = this.bargainList.concat(res.result.bargain_list)
        } else {
          this.bargainList = res.result.bargain_list
        }
      }).catch(function (error) {
        uni.hideLoading()
        uni.showToast({icon:'none',title: error.message})
      })
    },
    goDetail (item) {
      uni.navigateTo({ url: '/pages/home/goodsdetail/Goodsdetail'+'?'+urlencode( { 'goods_id': item.bargain_goods_id, 'bargain_id': item.bargain_id } )})
    }
  }
}
</script>

<style scoped lang='scss'>
    .scroll-view-wrapper{display: flex;flex-direction: column;}
    .scroll-view{flex:1}
    .goods-list.single-column .pro-info .button-content {width: 70px;line-height: 2.3;font-size:$fontSize;border-radius: 20px;text-align: center;color: #fff;background: $primaryGradualColor;}
    .font-size-activity-tag {font-size:$h6!important;}
    .font-size-tag {font-size:$fontSize!important;}
    .font-size-toolbar {font-size:$h2!important;}
    .color-tip { color: #909399!important; }
    .color-base-text {color: #ff4544!important;}
    .img-content >img{width: 100%;height: 100%;}
    .goods-list.single-column .goods-item {padding: 13px;background: #fff;margin: 10px 15px;border-radius: 5px;display: -webkit-box;display: -webkit-flex;display: flex;position: relative}
    .goods-list.single-column .goods-item .goods-img {width: 100px;height: 100px;overflow: hidden;border-radius: 5px;margin-right: 10px}
    .goods-list.single-column .goods-item .goods-img .img-content {width: 100%;height: 100%}
    .goods-list.single-column .goods-item .goods-tag {color: #fff;line-height: 1;padding: 4px 6px;position: absolute;border-top-left-radius: 5px;border-bottom-right-radius: 5px;top: 13px;left: 13px;font-size:$fontSize}
    .goods-list.single-column .goods-item .info-wrap {-webkit-box-flex: 1;-webkit-flex: 1;flex: 1;display: -webkit-box;display: -webkit-flex;display: flex;-webkit-box-orient: vertical;-webkit-box-direction: normal;-webkit-flex-direction: column;flex-direction: column}
    .goods-list.single-column .goods-item .name-wrap {-webkit-box-flex: 1;-webkit-flex: 1;flex: 1}
    .goods-list.single-column .goods-item .goods-name {font-size:$subFontSize;line-height: 1.3;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;height: 34px}
    .goods-list.single-column .goods-item .progress-wrap {display: -webkit-box;display: -webkit-flex;display: flex;margin-top: 5px;align-items: center;}
    .goods-list.single-column .goods-item .progress-wrap .progress-content {-webkit-box-flex: 1;-webkit-flex: 1;flex: 1}
    .goods-list.single-column .goods-item .progress-wrap .progress-content .progress-bar{background-color: rgb(255, 199, 199); height: 3px;}
    .goods-list.single-column .goods-item .progress-wrap .progress-content .progress-bar .progress-inner-bar{background-color: rgb(255, 69, 68);height:100%}
    .goods-list.single-column .goods-item .progress-wrap .txt {margin: 0 50px 0 10px}
    .goods-list.single-column .goods-item .discount-price {display: inline-block;font-weight: 700;line-height: 1;margin-top: 8px}
    .goods-list.single-column .goods-item .discount-price .unit {margin-right: 3px}
    .goods-list.single-column .goods-item .discount-price .txt {font-weight: 400}
    .goods-list.single-column .goods-item .pro-info {position: relative;margin-top: 8px}
    .goods-list.single-column .goods-item .pro-info .delete-price {-webkit-box-flex: 1;-webkit-flex: 1;flex: 1;display: -webkit-box;display: -webkit-flex;display: flex;-webkit-box-align: end;-webkit-align-items: flex-end;align-items: flex-end}
    .goods-list.single-column .goods-item .pro-info .delete-price .unit {margin-right: 3px;text-decoration: line-through}
    .goods-list.single-column .goods-item .pro-info .delete-price .price {text-decoration: line-through}
    .goods-list.single-column .goods-item .pro-info .view-content {line-height: 1}
    .goods-list.single-column .goods-item .pro-info .view-content:nth-child(2) {position: absolute;right: 0;bottom: 0}
    .goods-list.single-column .goods-item .member-price-tag {display: inline-block;width: 30px;line-height: 1;margin-left: 3px}
    .goods-list.single-column .goods-item .member-price-tag .img-content {width: 100%}
</style>