ufutx_love_mp/src/pages/dynamic/voteDetail.wpy

<style lang="less" scoped>
@import url(../../styles/theme.less);
page {
  background-color: #ffffff;
}

.wrapper {
  margin: 0 30rpx;
  padding-top: 30rpx;

  ._icon {
    width: 36rpx;
    height: auto;
    margin-right: 16rpx;
  }

  .sb_title {
    margin-left: 52rpx;
  }

  .vote_item, .vote_item_a {
    width: 640rpx;
    padding: 0 20rpx;
    height: 80rpx;
    line-height: 80rpx;
    border-radius: 16rpx;
    border: 2rpx solid #FF95B1;
    margin: 20rpx auto;
    color: #FF678F;
    position: relative;
    z-index: 2;
  }

  .bg_plan, .bg_plan_a {
    position: absolute;
    left: 0;
    top: 0;
    border-radius: 12rpx;
    height: 76rpx;
    background: #FFF1F5;
    z-index: -1;
  }

  .bg_plan_a {
    background: #EEF5FF;
  }

  @keyframes move {
    from {
      width: 0rpx;
    }
    to {
      width: 420rpx;
    }
  }

  ._active {
    background: #FAFBFE;
    color: #63A5FF;
    border: none;
  }
}

.ui-like-box{
  width: 100vw;
  padding-right: 30rpx;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-top: 50rpx;
  padding-bottom: 24rpx;

  .ui-like-icon-box{
    display: inline-flex;
    align-items: center;
    height: 30rpx;
    font-size: 24rpx;
    color: #666666;
    position: relative;
    margin-right: 50rpx;

    .ui-like-icon{
      width: 30rpx;
      height: 30rpx;
      margin-right: 8rpx;
      display: block;
    }

    .ui-like-icon-v2{
      width: 32rpx;
      height: 32rpx;
      margin-right: 6rpx;
      margin-top: -8rpx;
      display: block;
    }

    .ui-img2_gif {
      position: relative;
      left: 6rpx;
      top: -10rpx;
      width: 64rpx;
      height: 64rpx;
      margin-left: -20rpx;
    }
  }
}

.ui-line{
  height: 2rpx;
  background: #f5f5f5;
}
</style>
<template>
  <view class="ui-voteDetail"></view>
  <!--投票信息-->
  <view class="wrapper">
    <view class="f-fc">
      <image src="https://image.fulllinkai.com/202206/28/7fd07d9687390a58d25ac92b55d9a9dd.png" mode="widthFix" class="_icon"></image>
      <view class="font_32 color333 bold">{{ detail.votes.title }}</view>
    </view>
    <view class="sb_title color999">{{ detail.content || '如题'}}</view>
    <block v-for="(item,index) in detail.options" :key="index">
      <view class="text-right ui-ml-40">
        <view v-if="!detail.is_vote" class="vote_item text-center" @tap="selectFn(item)">{{ item.title }}</view>
        <view v-else class="vote_item_a f-fbc ellipsis_1 {{item.checked == 1 ? '' : '_active'}}">
          <view  class="ellipsis_1">{{ item.title }}</view>
          <view>{{ item.count }}（ {{ item.rate }} %）</view>
          <view class="{{item.checked ==1 ? 'bg_plan' : 'bg_plan_a'}}" style="width: {{detail.is_vote ? item.rate : item.rate}}%;"></view>
        </view>
      </view>
    </block>
    <view class="~color666 ~font_28 ui-like-box">
      <view class="ui-like-icon-box">
        <image lazy-load="true" class="ui-like-icon" src="https://images.ufutx.com/202102/04/ab432de170b4e8ca1a1a59e34af9aa25.png"></image>
        {{ detail.comment_count }}
      </view>
      <view class="ui-like-icon-box ~ui-mr-40" @tap.stop="upvote">
        <image v-if="detail.is_like == false" lazy-load="true" class="ui-like-icon-v2" src="https://images.ufutx.com/202106/10/a97c7c76f3aaf7065e7f7a5fe2abc081.png"></image>
        <image v-else class="ui-img2_gif" src="{{detail.is_like ? gifurl : 'https://images.ufutx.com/202106/07/b227f3ecf9cbd080fb814450b667b5ce.gif'}}"></image>
        {{  detail.like_count  }}
      </view>
    </view>
    <view class="ui-line"></view>
  </view>
  <!--评论数据-->
  <dynamicDiscuss :list="list" :detail="detail" @getList="getList" @changLiker="changLiker" :type="'vote'"></dynamicDiscuss>
</template>

<script>
import wepy from '@wepy/core'
import https from '../../mixins/https'
import base from '../../mixins/base'
import {service} from '../../config'
import {commentTimeHandle} from '../../mixins/plugins'

wepy.page({
  config: {},
  mixins: [https, base],

  data: {
    id: '',
    detail: {},
    gifurl: 'https://images.ufutx.com/202106/11/d40b92e053a693f30eb197bf6374af95.gif',
    list: [] // 评论列表数据
  },
  methods: {
    getDetail() {
      let vm = this
      vm.$get({url: `${service.host}/vote/${vm.id}`}).then(({code, data}) => {
        if (code === 0) {
          let result = data
          result.commenter_count = result.comment_count
          result.like_count = result.liker_count
          result.is_like = result.is_liker
          result.create_time = commentTimeHandle(result.votes.create_time)
          result.id = result.votes.id
          for (let index in data.option) {
            data.option[index].rate = vm.getPercentage(data.option[index].rate)
          }
          vm.detail = result
        }
        wx.hideLoading()
      }).catch(err => {
        wx.hideLoading()
        console.log(err)
      })
    },
    // 获取评论列表
    getList() {
      let vm = this
      vm.$showLoading('加载中...')
      vm.$get({url: `${service.host}/vote/${vm.id}/comment/list`}).then(({code, data}) => {
        if (code === 0) {
          data.forEach((item) => {
            item.created_at = commentTimeHandle(item.created_at)
            item.comment = item.comment.split('?')[0]
            item.likeGif = 'https://images.ufutx.com/202106/07/b227f3ecf9cbd080fb814450b667b5ce.gif'
          })
          vm.list = data
          console.log(vm.list, '////')
        }
        wx.hideLoading()
      }).catch(err => {
        wx.hideLoading()
        console.log(err)
      })
    },
    selectFn(e) {
      let vm = this
      vm.$showLoading('投票中...')
      vm.$post({url: `${service.host}/vote/${e.id}/push`}).then(({code, data}) => {
        if (code == 0) {
          vm.$showToast('已投票')
          for (let index in data.option) {
            vm.detail.option[index].rate = vm.getPercentage(data.option[index].rate)
            vm.detail.option[index].checked = data.option[index].checked
            vm.detail.option[index].count = data.option[index].count
          }
        }
        wx.hideLoading()
      }).catch(() => {
        wx.hideLoading()
      })
    },
    // 点赞
    upvote() {
      let vm = this
      let nowTime = new Date()
      vm.$post({url: `${service.host}/vote/${vm.id}/like`}).then(({code}) => {
        wx.hideLoading()
        if (code == 0) {
          vm.detail.is_like = !vm.detail.is_like
          vm.detail.like_count = vm.detail.like_count + (vm.detail.is_like ? 1 : -1)
          if (vm.detail.is_like) {
            vm.gifurl = `${vm.gifurl}?${nowTime}`
          }
        }
      }).catch(() => {
        wx.hideLoading()
      })
    },
    // 评论点赞回调
    changLiker(index) {
      let vm = this
      let nowTime = new Date()
      vm.list[index].is_liker = !vm.list[index].is_liker
      vm.list[index].liker_count = vm.list[index].liker_count + (vm.list[index].is_liker ? 1 : -1)
      vm.list[index].likeGif = `${vm.list[index].likeGif}?${nowTime}`
    },
    // 计算投票百分比
    getPercentage(val) {
      return Math.round((val) * 10000) / 100
    }
  },
  onShow() {
  },
  onLoad(e) {
    let vm = this
    vm.id = e.id
    vm.getDetail()
    vm.getList()
  }
})
</script>
<config>
{
navigationBarTitleText: '投票详情',
backgroundColorTop: '#ffffff',
backgroundColorBottom: '#ffffff',
usingComponents: {
dynamicDiscuss: '~@/components/dynamicDiscuss',
}
}
</config>