dvcp_v2_wxcp_app/src/project/fengdu/AppVote/AppVote.vue

<template>
  <section class="AppVote">
    <AiGroup noBorder description class="mar-b32">
      <u-parse :html="detail.preface"/>
    </AiGroup>
    <div class="voteItem" flex @click="handleDetail(row.id)" v-for="row in list" :key="row.id">
      <div class="fill">
        <b class="mar-b16" v-text="row.videoName"/>
        <div class="color-999 line3" v-text="row.videoIntroduction"/>
      </div>
      <div class="thumb">
        <img :src="row.imageFileUrl"/>
        <span v-text="`${row.voteNumber}票`"/>
      </div>
    </div>
    <AiGroup noBorder description>
      <u-parse :html="detail.ending"/>
    </AiGroup>
    <u-gap height="160"/>
    <weixin-login :autoShow="!user.token" :visible.sync="wxLogin" content="投票需要您授权您的微信信息" @login="getList"/>
  </section>
</template>

<script>
import {mapState} from "vuex"
import WeixinLogin from "./component/weixinLogin";

export default {
  name: "AppVote",
  components: {WeixinLogin},
  appName: "“微视频”大赛",
  data() {
    return {
      detail: {},
      list: [],
      wxLogin: 0,
      current: 1,
      total: 0
    }
  },
  computed: {
    ...mapState(['user']),
  },
  methods: {
    getDetail(retry = false) {
      this.$http.post("/app/appvideovoteconfig/queryDetailByCorpId", null, {
        withoutToken: !this.user.token || retry
      }).then(res => {
        if (res?.data) {
          this.detail = res.data
        }
      }).catch(() => !retry && this.getList(true))
    },
    getList() {
      const {current, total, list} = this
      if (current == 1 || list.length < total) {
        current == 1 && (this.list = [])
        this.$http.post("/app/appvideoinfo/list", null, {
          withoutToken: true,
          params: {current}
        }).then(res => {
          if (res?.data) {
            this.list = [this.list, res.data.records].flat().filter(Boolean)
            this.total = res.data.total
          }
        })
      }
    },
    handleDetail(id) {
      if (!this.user.token) this.wxLogin++
      else uni.navigateTo({url: './voteDetail?id=' + id})
    }
  },
  onShow() {
    this.getDetail()
    this.getList()
  },
  onReachBottom() {
    this.current++
    this.getList()
  }
}
</script>

<style lang="scss" scoped>
.AppVote {
  min-height: 100vh;
  background: #fff;

  .AiGroup {
    width: 100%;
    padding-right: 32px;
    box-sizing: border-box;
  }

  .voteItem {
    height: 240px;
    border: 1px solid #CCCCCC;
    border-radius: 16px;
    margin: 0 32px 24px;
    padding: 24px;
    box-sizing: border-box;
    font-family: PingFangSC;
    align-items: flex-start;

    b {
      font-size: 34px;
      color: #333333;
      display: block;
      line-height: 48px;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
    }

    .line3 {
      display: -webkit-box;
      overflow: hidden;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
    }

    .thumb {
      position: relative;
      flex-shrink: 0;
      margin-left: 24px;
      width: 192px;
      height: 192px;
      border-radius: 8px;
      overflow: hidden;
      background-repeat: no-repeat;
      background-size: 100%;
      background-color: #eee;

      & > span {
        position: absolute;
        right: 0;
        top: 0;
        padding: 0 8px;
        line-height: 44px;
        background: #FF883C;
        color: #fff;
        z-index: 2;
      }

      & > img {
        width: 100%;
        height: 100%;
      }
    }
  }
}
</style>