wzj-boot/mini-app/src/components/user/dialog-registration.wpy

<style lang="less">

.header {
  width: 100%;
  height: 536rpx;
  z-index: -10;


}

</style>
<template>

  <div>
    <van-dialog
      use-slot
      title="新用户注册"
      :show="isShow"
      show-cancel-button
      bind:close="onClose"
      bind:cancel="onClose"
      confirm-button-open-type="getUserInfo"
      bind:getuserinfo="getUserInfo"
      :asyncClose="true"

    >
      <van-field
        label="手机号:"
        title-width="60px"
        value="{{ user.mobile }}"
        center
        clearable
        readonly
        placeholder="请实名授权获取手机号"
        border="{{ false }}"
        use-button-slot
      >
        <van-button slot="button" size="small" plain type="info" open-type="getPhoneNumber"
                    bind:getphonenumber="onGetMobile">授权
        </van-button>
      </van-field>

      <!--      <van-divider customStyle="font-size: 18px; margin: 5px 5px;" />-->

      <!--      <van-field-->
      <!--        label="昵称:"-->
      <!--        title-width="60px"-->
      <!--        value="{{ user.userInfo.nickName }}"-->
      <!--        center-->
      <!--        clearable-->
      <!--        readonly-->
      <!--        placeholder="请点击授权获取您的微信信息"-->
      <!--        border="{{ false }}"-->
      <!--        use-button-slot-->
      <!--      >-->
      <!--        <van-button slot="button" size="small" plain type="info" open-type="getUserInfo"-->
      <!--                    bind:getuserinfo="getUserInfo">获取昵称-->
      <!--        </van-button>-->
      <!--      </van-field>-->

      <view style="margin:10px;">
        <van-checkbox :value="isChecked" shape="square" bind:change="onChangeCheak" checked-color="#AC1630"
                      style="font-size: 14px;color: #AC1630;">
          我同意<span style="color: cornflowerblue;">xxxxx </span>用户协议
        </van-checkbox>
      </view>

    </van-dialog>
  </div>

</template>

<script>
import wepy from '@wepy/core'
import store from '@/store'
import { mapActions, mapState } from '@wepy/x'
import eventHub from '../../common/eventHub'
import xiao4rBase from '../../xiao4rBase'
import userApis from '../../apis/userApis'

wepy.component({
  store,
  props: {},
  hooks: {},


  data: {
    that: this,
    isShow: false,
    model: {},
    isChecked: false,
  },

  computed: mapState(['user']),
  events: {},

  methods: {
    ...mapActions([
      'setUserAction',
      'setUserInfoAction',
      'setMobileAction',
      'setTokenAction'
    ]),

    getUserInfo(event) {
      console.log('getUserInfo:', event.$wx.detail)
      this.setUserInfoAction(event.$wx.detail.userInfo)
      console.log('userInfo:', store.state.user.userInfo)


      if (!this.isChecked) {
        xiao4rBase.showToast('请确认xxxx协议.')
        return false
      }
      if (!this.user.mobile) {
        xiao4rBase.showToast('请授权获取手机号码.')
        return false
      }
      if (!this.user.userInfo) {
        xiao4rBase.showToast('请授权获取用户昵称.')
        return false
      }

      let self = this
      userApis.registrationByMini(this.user).then(r => {
        if (r.code === 200) {
          xiao4rBase.showToast('注册成功!')
          self.isShow = false
          self.setTokenAction(r.token)
        } else {
          xiao4rBase.showToast(r.msg)
        }
      }).catch(e => {
        xiao4rBase.showToast('注册失败!')
      })
    },
    async onGetMobile(e) {
      console.log(e.$wx.detail)
      wx.showLoading({ title: '获取中...', mask: true })
      try {
        let rsp = await userApis.sendMobile({
          openid: xiao4rBase.getOpenid(),
          detail: e.$wx.detail
        })

        console.log(rsp)
        if (rsp.code === 200) {
          this.setMobileAction(rsp.data.mobile)
        } else {
          xiao4rBase.showToast('服务器连接异常.')
        }
      } catch (e) {
        xiao4rBase.showToast('服务器连接异常.')
      } finally {
        wx.hideLoading()
      }
    },
    onChangeCheak(e) {
      this.isChecked = e.$wx.detail
    },
    onClose() {
      this.isShow = false
    }

  },

  ready() {
    // 获取系统信息
    let self = this
    wx.getSystemInfo({
      success(res) {
        self.model = res.model
      }
    })

    console.log(this)
    this.page = this

    eventHub.$on('onShowDialogUserInfo', (...args) => {
      this.isShow = true
    })
  }

})
</script>
<config>
{
navigationBarTitleText: ''
}
</config>