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

<template>
  <view class="page LiJiBaoMing">

    <!-- 表单 -->
    <view class="Form">
      <view class="flex-h">
        <text>姓名</text>
        <view class="flex-item">
          <input type="text" placeholder="请输入" v-model="Name" />
        </view>
      </view>
      <view class="flex-h">
        <text>手机号</text>
        <view class="flex-item">
          <input type="number" placeholder="请输入" v-model="Phone" />
        </view>
      </view>
      <view class="flex-h">
        <text>人数</text>
        <view class="flex-item">
          <input type="number" placeholder="请输入" v-model="Num" />
        </view>
      </view>
    </view>

    <text @tap="ToJoin">提交</text>

  </view>
</template>

<script>
import { getCurrentInstance } from '@tarojs/taro'
import { createNamespacedHelpers } from 'vuex'
const { mapState: mapUserState, mapActions: mapUserActions, mapMutations: mapUserMutations } = createNamespacedHelpers('user')
export default {
  name: 'LiJiBaoMing',
  data () {
    return {
      Name: '',
      Phone: '',
      Num: '',
      CurrnetId: null,
      DataLock: false
    }
  },
  computed: {
    ...mapUserState({
      UserInfo: x => x.UserInfo // 用户信息
    })
  },
  components: {
  },
  created () {
    this.CurrnetId = getCurrentInstance().router.params.id
    let _that = this
    wx.login({
      success (res) {
        _that.MainSignIn({ queryData: { code: res.code } }).then((res) => { // 获取用户信息
          _that.EditUserInfo({ name: 'PersonId', value: res.data.data.person.personId })
          _that.EditUserInfo({ name: 'OpenId', value: res.data.data.person.openId })
          _that.EditUserInfo({ name: 'SessionKey', value: res.data.data.extraInfo.sessionKey })
          if (res.data.data.person.phone !== undefined && res.data.data.person.phone !== null) {
            _that.EditUserInfo({ name: 'Phone', value: res.data.data.person.phone })
          }
          _that.Init()
        })
      }
    })
  },
  methods: {
    ...mapUserActions([
      'GetUserPhone',
      'PostActivityJoin',
      'MainSignIn' // 获取用户信息
    ]),
    ...mapUserMutations([
      'EditUserInfo' // 编辑用户信息
    ]),
    Init () {
    },
    ToJoin () { // 去报名
      if (this.DataLock) return
      this.DataLock = true
      this.PostActivityJoin({
        urlData: { id: this.ActivityInfo.activityId },
        data: { data: { enrollName: this.Name, enrollPhone: this.Phone, enrollNum: this.Num } }
      }).then((res) => {
        this.DataLock = false
        wx.showToast({
          title: '报名成功',
          icon: 'none',
          duration: 2000
        })
      }).catch(() => {
        this.DataLock = false
      })
    }
  }
}
</script>

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