wx-miniapp/src/pages/HuiShengHuo/ActivityList/ActivityDetail/index.vue

<template>
  <view class="page HuoDongXiangQing flex-v">

    <view class="flex-item">
      <view v-if="ActivityDetail !== null">

        <!-- 活动主要信息 -->
        <view class="MainInfo">
          <text>{{ActivityDetail.name}}</text>
          <view class="SubInfo flex-h">
            <view class="flex-item">
              <text class="iconfont iconxianshi"></text>
              <text>{{ActivityDetail.pv || ''}}</text>
            </view>
            <view class="Time">
              <text class="iconfont iconshijian"></text>
              <text>{{ToolClass.DateFormat(new Date(ActivityDetail.createDate).getTime())}}</text>
            </view>
          </view>
          <view class="Line flex-h">
            <text>活动时间：</text>
            <text class="flex-item">{{ToolClass.DateFormat(new Date(ActivityDetail.startDate).getTime())}} 至 {{ToolClass.DateFormat(new Date(ActivityDetail.endDate).getTime())}}</text>
          </view>
          <view class="Line flex-h">
            <text>活动地址：</text>
            <text class="flex-item">{{ActivityDetail.address}}</text>
          </view>
          <view class="Line flex-h" v-if="IsEnroll">
            <text>报名截止：</text>
            <text class="flex-item">{{ToolClass.DateFormat(new Date(ActivityDetail.enrollEnd).getTime())}}</text>
          </view>
        </view>

        <!-- 活动详情 -->
        <view class="DetailContainer">
          <image mode="heightFix" src="https://cjgw.oss-cn-hangzhou.aliyuncs.com/ygcxxfb/image/huodongxiangqing.png"></image>
          <view class="Text">
            <!-- <rich-text :nodes="ActivityDetail.detail"></rich-text> -->
            <Markdown :value="ActivityDetail.detail" />
          </view>
        </view>

        <!-- 投票 -->
        <view class="VoteContainer" v-if="IsVote">
          <image mode="heightFix" src="https://cjgw.oss-cn-hangzhou.aliyuncs.com/ygcxxfb/image/toupiao.png"></image>
          <view class="List" v-if="!ShowVoteRes">
            <view v-for="(item, index) in VoteList" :key="index" class="flex-h" @tap="VoteIndex = index">
              <text class="iconfont iconweigouxuan" v-if="VoteIndex !== index"></text>
              <text class="iconfont icongouxuan" v-else></text>
              <view class="flex-item">
                <text>{{item.name}}</text>
              </view>
            </view>
          </view>
          <text @tap="ToPostActivityVote" v-if="!ShowVoteRes && (ActivityDetail.status - 0 !== 2)">提交</text>
          <button open-type="getPhoneNumber" class="GetPhoneBtn" v-if="!DataLock && ShowGetPhoneBtn &&　!ShowVoteRes && (ActivityDetail.status - 0 !== 2)" @getphonenumber="GetPhoneNumber">授权手机号</button>
          <view class="ResList" v-if="ShowVoteRes">
            <view v-for="(item, index) in VoteResList" :key="index">
              <view class="Text flex-h">
                <text class="flex-item">{{item.name}}({{item.num}}/{{item.total}})</text>
                <text>{{item.selfVoted ? '我投过的' : ''}}</text>
              </view>
              <view class="Line">
                <view>
                  <view :style="{width: `${item.pec}%`}"></view>
                </view>
              </view>
            </view>
          </view>
        </view>

      </view>
    </view>

    <!-- 底部栏 -->
    <view class="Bottom flex-h">
      <view class="flex-item" @tap="LinkTo('../../index')">
        <image class="centerLabel" mode="heightFix" src="https://cjgw.oss-cn-hangzhou.aliyuncs.com/ygcxxfb/image/huishenghuo.png"></image>
      </view>
      <view class="flex-item" @tap="ToShare">
        <image class="centerLabel" mode="heightFix" src="https://cjgw.oss-cn-hangzhou.aliyuncs.com/ygcxxfb/image/fenxiang.png"></image>
      </view>
      <button open-type="share" class="ShareBottomBtn" :class="{'active': IsEnroll}">分享</button>
      <image mode="heightFix" v-if="IsEnroll && !HasEnroll && (ActivityDetail.status - 0 !== 2)" src="https://cjgw.oss-cn-hangzhou.aliyuncs.com/ygcxxfb/image/lijibaomingbtn.png" @tap="ToJoin"></image>
      <button open-type="getPhoneNumber" class="GetPhoneBottomBtn" v-if="!DataLock && ShowGetPhoneBtn && IsEnroll && !HasEnroll && (ActivityDetail.status - 0 !== 2)" @getphonenumber="GetPhoneNumber">授权手机号</button>
      <text v-if="IsEnroll && HasEnroll && (ActivityDetail.status - 0 !== 2)">已报名</text>
      <text v-if="!(ActivityDetail.status - 0 !== 2)">已过期</text>
    </view>

    <!-- 授权头像获取弹窗 -->
    <GetUserIcon></GetUserIcon>

  </view>
</template>

<script>
import GetUserIcon from '../../../../components/GetUserIcon/index'
import { getCurrentInstance } from '@tarojs/taro'
import { createNamespacedHelpers } from 'vuex'
const { mapState: mapIndexState, mapActions: mapIndexActions } = createNamespacedHelpers('index')
const { mapState: mapUserState, mapActions: mapUserActions, mapMutations: mapUserMutations } = createNamespacedHelpers('user')
export default {
  name: 'HuoDongXiangQing',
  data () {
    return {
      From: null,
      HasEnroll: false,
      ShowVoteRes: false,
      VoteResList: [],
      ShowGetPhoneBtn: false,
      VoteIndex: null,
      VoteList: [],
      IsVote: false,
      IsEnroll: false,
      CurrnetId: null,
      DataLock: false
    }
  },
  computed: {
    ...mapUserState({
      UserInfo: x => x.UserInfo // 用户信息
    }),
    ...mapIndexState({
      ActivityDetail: x => x.ActivityDetail // 活动详情
    })
  },
  components: {
    GetUserIcon
  },
  onShareAppMessage () {
    return {
      title: this.ActivityDetail.shareTitle,
      path: `/pages/HuiShengHuo/ActivityList/ActivityDetail/index?id=${this.ActivityDetail.activityId}&from=life`,
      imageUrl: this.ActivityDetail.shareImg
    }
  },
  created () {
    this.CurrnetId = getCurrentInstance().router.params.id
    this.From = getCurrentInstance().router.params.from
    let _that = this
    wx.setNavigationBarTitle({
      title: _that.From === 'love' ? '荟 · 爱心' : '荟 · 生活'
    })
    this.$authed(() => {
      this.Init()
    })
  },
  mounted () {
  },
  methods: {
    ...mapUserActions([ // 活动投票
      'PostActivityVote',
      'GetUserPhone',
      'PostActivityJoin',
      'MainSignIn' // 获取用户信息
    ]),
    ...mapUserMutations([
      'EditUserInfo' // 编辑用户信息
    ]),
    ...mapIndexActions([
      'GetActivityDetail' // 获取活动详情
    ]),
    Init () {
      this.ShowGetPhoneBtn = this.UserInfo === null || this.UserInfo.Phone === undefined || this.UserInfo.Phone === null
      this.GetActivityDetail({ urlData: { id: this.CurrnetId } }).then((res) => {
        this.IsEnroll = this.ActivityDetail.isEnroll
        if (this.IsEnroll) {
          this.HasEnroll = this.ActivityDetail.isSelfEnrolled
        }
        if (this.ActivityDetail.isVote) {
          this.VoteList = this.ActivityDetail.voteItemList.slice(0)
          this.CreateVoteResList()
          this.ShowVoteRes = !!this.ActivityDetail.selfVoted
        }
        this.IsVote = this.ActivityDetail.isVote
      })
    },
    CreateVoteResList () { // 计算投票结果
      this.VoteResList = []
      let VoteTotal = 0
      this.VoteList.map((item) => {
        VoteTotal += item.voteNum - 0
      })
      this.VoteList.map((item) => {
        this.VoteResList.push({ name: item.name, pec: Math.floor((item.voteNum / VoteTotal) * 100), total: VoteTotal, num: item.voteNum, selfVoted: this.ActivityDetail.selfVoted === item.itemId })
      })
    },
    ToShare () {
      wx.showShareMenu({
        withShareTicket: true,
        menus: ['shareAppMessage', 'shareTimeline']
      })
    },
    LinkTo (url) {
      wx.switchTab({ url })
    },
    ToJoin () { // 报名
      wx.navigateTo({ url: `./JoinIn/index?id=${this.ActivityDetail.activityId}` })
    },
    ToPostActivityVote () { // 活动投票
      if (this.DataLock || this.VoteIndex === null) return
      this.DataLock = true
      this.PostActivityVote({
        urlData: { id: this.ActivityDetail.activityId },
        data: { data: { itemId: this.VoteList[this.VoteIndex].itemId } }
      }).then(() => {
        this.DataLock = false
        wx.showToast({
          title: '投票成功',
          icon: 'none',
          duration: 2000
        })
        this.ActivityDetail.selfVoted = this.VoteList[this.VoteIndex].itemId
        this.CreateVoteResList()
        this.ShowVoteRes = true
      }).catch(() => {
        this.DataLock = false
      })
    },
    GetPhoneNumber (e) {
      if (this.DataLock) return
      this.DataLock = true
      this.GetUserPhone({
        urlData: { personId: this.UserInfo.PersonId },
        data: { data: { sessionKey: this.UserInfo.SessionKey, encryptedData: e.detail.encryptedData, iv: e.detail.iv } }
      }).then((res) => {
        this.ShowGetPhoneBtn = false
        this.EditUserInfo({ name: 'OpenId', value: res.data.data.openId })
        this.EditUserInfo({ name: 'Phone', value: res.data.data.phone })
        this.DataLock = false
      }).catch(() => {
        this.DataLock = false
      })
    }
  }
}
</script>

<style lang="scss">
@import "page.scss";
</style>