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

<template>
  <section class="voteDetail">
    <AiItem top-label :label="detail.videoName" :border="false" labelBold>
      <u-parse class="mar-b8" :html="detail.videoIntroduction"/>
      <video :src="detail.videoFileUrl" :poster="detail.imageFileUrl"/>
    </AiItem>
    <AiBottomBtn background="#fff">
      <div flex class="pad-l32 pad-r16 pad-b16 pad-t16">
        <AiHighlight class="fill color-999" content="当前票数：@v" :value="detail.voteNumber" color="#FF6900"/>
        <div class="text circle mar-l16" :class="{disabled:canotVote}" @click="handleVote">投票</div>
      </div>
    </AiBottomBtn>
  </section>
</template>

<script>
import {mapState, mapActions} from "vuex"

export default {
  name: "voteDetail",
  appName: "投票详情",
  computed: {
    ...mapState(['user']),
    wxCode: v => v.$route.query.code,
    canotVote: v => v.detail.isVote == '0' && v.user.token
  },
  data() {
    return {
      detail: {}
    }
  },
  methods: {
    ...mapActions(['getWechatToken', 'getCode']),
    getDetail() {
      const {id} = this.$route.query
      this.$http.post("/app/appvideoinfo/queryDetailById", null, {params: {id}, withoutToken: true}).then(res => {
        if (res?.data) {
          this.detail = res.data
          document.title = this.detail.videoName
        }
      })
    },
    handleVote() {
      if (!this.user.token) {//未登录,获取openId和token
        this.$http.get("/app/appdvcpconfig/getMpAppid", {withoutToken: true}).then(res => {
          if (res?.code == 0 && res?.data) {
            this.getCode({scope: "snsapi_userinfo", appid: res.data})
          }
        })
      } else {//已登录,直接投票
        if (!this.canotVote) {
          const {id} = this.$route.query
          this.$http.post("/app/appvideovoteinfo/voteByVideoId", null, {
            params: {id}
          }).then(res => {
            if (res?.code == 0) {
              this.$u.toast("投票成功!")
              this.getDetail()
            }
          })
        }
      }
    },
  },
  onShow() {
    this.getDetail()
    if (!!this.wxCode) {
      this.getWechatToken({module: "AppVote", code: this.wxCode}).then(this.handleVote)
    }
  }
}
</script>

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

  ::v-deep.disabled {
    filter: grayscale(100%);
  }

  ::v-deep video {
    width: 100%;
  }
}
</style>