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

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

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

        <!-- 活动主要信息 -->
        <view class="MainInfo">
          <text>{{ActivityInfo.name}}</text>
          <view class="Line flex-h">
            <text>活动时间：</text>
            <text class="flex-item">{{ToolClass.DateFormat(new Date(ActivityInfo.startDate).getTime())}} 至 {{ToolClass.DateFormat(new Date(ActivityInfo.endDate).getTime())}}</text>
          </view>
          <view class="Line flex-h">
            <text>活动地址：</text>
            <text class="flex-item">{{ActivityInfo.address}}</text>
          </view>
          <view class="Line flex-h">
            <text>报名截止：</text>
            <text class="flex-item">{{ToolClass.DateFormat(new Date(ActivityInfo.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="ActivityInfo.detail"></rich-text>
          </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">
            <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">提交</text>
          <button open-type="getPhoneNumber" class="GetPhoneBtn" v-if="!DataLock && ShowGetPhoneBtn" @getphonenumber="GetPhoneNumber">授权手机号</button>
        </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">
        <image class="centerLabel" mode="heightFix" src="https://cjgw.oss-cn-hangzhou.aliyuncs.com/ygcxxfb/image/fenxiang.png"></image>
      </view>
      <image mode="heightFix" v-if="IsEnroll" 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" @getphonenumber="GetPhoneNumber">授权手机号</button>
    </view>

  </view>
</template>

<script>
import { getCurrentInstance } from '@tarojs/taro'
import { createNamespacedHelpers } from 'vuex'
const { mapActions: mapIndexActions } = createNamespacedHelpers('index')
const { mapState: mapUserState, mapActions: mapUserActions, mapMutations: mapUserMutations } = createNamespacedHelpers('user')
export default {
  name: 'HuoDongXiangQing',
  data () {
    return {
      ShowGetPhoneBtn: false,
      VoteIndex: null,
      VoteList: [],
      ActivityInfo: null,
      IsVote: false,
      IsEnroll: false,
      CurrnetId: null,
      DataLock: false
    }
  },
  computed: {
    ...mapUserState({
      UserInfo: x => x.UserInfo // 用户信息
    })
  },
  components: {
  },
  onShareAppMessage () {
    return {
      title: this.ActivityInfo.shareTitle,
      path: `/pages/HuiShengHuo/ActivityList/ActivityDetail/index?id=${this.ActivityInfo.activityId}`,
      imageUrl: this.ActivityInfo.shareImg
    }
  },
  created () {
    wx.showShareMenu({
      withShareTicket: true,
      menus: ['shareAppMessage', 'shareTimeline']
    })
    this.CurrnetId = getCurrentInstance().router.params.id
    this.$authed(() => {
      this.Init()
    })
  },
  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.ActivityInfo = res.data.data
        this.IsEnroll = this.ActivityInfo.isEnroll
        if (this.ActivityInfo.isVote) {
          this.VoteList = this.ActivityInfo.voteItemList.slice(0)
        }
        this.IsVote = this.ActivityInfo.isVote
        wx.ShareAppMessage({
          title: this.ActivityInfo.shareTitle,
          imageUrl: this.ActivityInfo.shareImg
        })
      })
    },
    LinkTo (url) {
      wx.switchTab({ url })
    },
    ToJoin () { // 报名
      wx.navigateTo({ url: `./JoinIn/index?id=${this.ActivityInfo.activityId}` })
    },
    ToPostActivityVote () { // 活动投票
      if (this.DataLock || this.VoteIndex === null) return
      this.DataLock = true
      this.PostActivityVote({
        urlData: { id: this.ActivityInfo.activityId },
        data: { data: { itemId: this.VoteList[this.VoteIndex].itemId } }
      }).then(() => {
        this.DataLock = false
        wx.showToast({
          title: '投票成功',
          icon: 'none',
          duration: 2000
        })
      }).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>