ufutx-love-h5-public/src/components/mallList/mallList_two.vue

<template>
  <div class="mallList">
    <van-pull-refresh
      v-model="refreshing"
      @refresh="onRefresh"
      :loosing-text="$t('loosing_text')"
      :loading-text="$t('loading_text')"
    >
      <van-list v-model="loading" :finished="finished" @load="getList">
        <div :style="quoteText == 'mySignUp' ? '' : 'padding-bottom: 110px'">
          <div class="text-center" style="padding: 170px 0" v-if="!emptyData">
            <img
              class="emptyDataIcon"
              src="https://image.fulllinkai.com/202108/23/939c529ca16a91e3ee3b22bef2fe92ca.png"
              alt=""
            />
            <div class="color9 font14" style="margin-top: 14px">{{ $t('Temporarily_no_data') }}</div>
          </div>
          <div v-else>
            <div class="moreCourseBox">
              <div
                class="courseBox"
                v-for="(item, index) in list"
                :key="index"
                @click="goToUrlId(`mallDetail`, item.id)"
              >
                <div v-if="quoteText == 'mySignUp'" class="m_tips f-fcc">60{{ $t('minute') }}</div>
                <div class="f-fs">
                  <van-image radius="8" width="108" height="108" fit="cover" :src="item.icon" />
                  <div class="m_lst_ri">
                    <div>
                      <div class="f-fbc">
                        <div
                          class="font14 color3 bold ellipsis_2 mall-title"
                        >
                          <div class="group-icon backCover" v-if="item.is_group"></div>
                          {{ item.title }}
                        </div>
                      </div>
                      <div
                        class="font12 color9 ellipsis_1"
                        style="max-width: 190px;margin-top: 4px;word-wrap: break-word;word-break: break-all"
                      >
                        {{ item.sub_title }}
                      </div>
                    </div>
                    <div class="f-fbc">
                      <div class="coursePrice bold font18">
                        <span v-if="item.price != 0">￥</span>
                        <span>{{ item.price == 0? $t('free') : item.price }}</span>
                      </div>
                      <div class="signUp f-fcc font13 colorff">{{ $t('Buy_now') }}</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="bottomLine font12 color6 text-center" v-if="noMoreData">
              - {{ $t('I_have_a_line_in_the_sand') }} -
            </div>
            <div style="height: 50px;"></div>
          </div>
        </div>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
import { $toastClear, $toastLoading } from '@/config/toast'
import service from '@/utils/request'

export default {
  computed: {},
  components: {},
  props: {
    url: {
      type: String,
      default: null
    },
    quoteText: {
      type: String,
      default: null
    }
  },
  data() {
    return {
      list: [],
      page: 1,
      loading: false,
      finished: false,
      refreshing: false,
      emptyData: true,
      noMoreData: false
    }
  },
  watch: {},
  methods: {
    getList() {
      const vm = this
      $toastLoading(vm.$i18n.t('loading_text'))
      service
        .get(`${vm.url}?page=${vm.page}`)
        .then(data => {
          const dataV = vm.page === 1 ? [] : vm.list
          dataV.push(...data.data)
          vm.list = dataV
          vm.refreshing = false
          if (vm.list.length !== 0) {
            vm.emptyData = true
          } else {
            vm.emptyData = false
          }
          if (vm.list.length < 15 || data.data.length < 15) {
            vm.finished = true
            vm.noMoreData = true
            if (vm.list.length === 0) {
              vm.noMoreData = false
            }
            $toastClear()
            return
          } else {
            $toastClear()
          }
          vm.loading = false
          vm.page++
          setTimeout(() => {
            vm.loading = true
            $toastClear()
          }, 500)
        })
        .catch(error => {
          console.log(error)
        })
    },
    onRefresh() {
      this.page = 1
      this.loading = true
      this.finished = false
      this.getList()
    },
    goToUrlId(url, id) {
      this.$router.push({
        name: url,
        params: { id: id }
      })
    }
  },
  created() {},
  mounted() {
    const ScrollTop = document.getElementById('app')
    ScrollTop.scrollTop = 0
  }
}
</script>
<style lang="scss" scoped>
.mallList {
  height: calc(100vh - 44px) !important;
}
.van-tab__pane {
  width: 100vw;
  background: #ffffff;
}
.emptyDataIcon {
  width: 135px;
  height: 100px;
  display: block;
  margin: 0 auto;
}
.moreCourseBox {
  margin: 0 15px;
  .courseBox {
    padding: 17px 15px 17px 20px;
    margin: 15px 0;
    background: #ffffff;
    box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    .m_tips {
      position: absolute;
      left: 0;
      top: 0;
      background: #f2f3ff;
      border-radius: 8px 0px 8px 0px;
      font-size: 11px;
      color: #707ffa;
      line-height: 16px;
      width: 50px;
      height: 20px;
    }
    .m_lst_ri {
      flex: 1;
      height: auto;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      margin-left: 12px;
      .mall-title{
        max-width: 190px;
        word-wrap: break-word;
        word-break: break-all;
      }
      .group-icon{
        float: left;
        margin-top: 2px;
        margin-right: 4px;
        width: 32px;
        height: 16px;
        background-image: url("https://image.fulllinkai.com/202211/15/631d937276380af19ec646cf7563a64a.png");
      }
      .signUp {
        background: linear-gradient(90deg, #8c9bff 0%, #707ffa 100%);
        border-radius: 100px;
        padding: 5px 14px;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .signUp.sel {
        background: linear-gradient(90deg, #ffc67a 0%, #ffb14a 100%);
      }
    }
    .coursePic {
      flex: none;
      width: 142px;
      height: 80px;
      margin-right: 10px;
      border-radius: 8px;
      position: relative;
      .preferential {
        position: absolute;
        top: 0;
        left: 0;
        background: #ffac4a;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0 5px;
        height: 17px;
        border-radius: 8px 0;
      }
    }
    .coursePrice {
      color: #ffac4a;
      max-width: 80px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      .originalPrice {
        text-decoration: line-through;
        margin-left: 5px;
        position: relative;
        top: -1px;
      }
    }
    .joinButton,
    .joinCourseV2 {
      position: absolute;
      right: 15px;
      bottom: 20px;
      width: 78px;
      height: 28px;
      border-radius: 15px;
      border: 1px solid #ffac4a;
    }
    .joinCourseV2 {
      border: 1px solid #c2c2c2;
    }
  }
}
.bottomLine {
  padding-top: 20px;
}
</style>
<style lang="scss">
.van-tab__pane {
  width: 100%;
  min-height: 100%;
  background: #ffffff;
}
</style>