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
    this.$authed(() => {
      this.Init()
    })
  },
  methods: {
    ...mapUserActions([
      'GetUserPhone',
      'PostActivityJoin',
      'MainSignIn' // 获取用户信息
    ]),
    ...mapUserMutations([
      'EditUserInfo' // 编辑用户信息
    ]),
    Init () {
    },
    ToJoin () { // 去报名
      if (this.DataLock) return
      this.DataLock = true
      this.PostActivityJoin({
        urlData: { id: this.CurrnetId },
        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>