guoxue-mp/components/Login.vue

<template>
  <u-popup :show="show" close-on-click-overlay @close="refuse" round="10" :safe-area-inset-bottom="false">
    <view class="p-50 text-black">
      <template v-if="mode === 'wechat'">
        <view class="flex flex-col justify-start items-start">
          <!--                <u-icon name="/static/logo.png" width="100" height="52"/>-->
          <text class="text-30 font-bold mt-20">为了提供更优质的服务,需要获取</text>
        </view>
        <view class="my-25">
          <u-text text="您的身份信息" size="16" bold margin="60rpx 0"/>
        </view>
        <view class="mt-20 text-25">
          <checkbox-group @change="changeCheck">
            <view class="flex justify-start items-center">
              <checkbox value="check" :checked="check"/>
              <view>
                <text>我已阅读并同意</text>
                <text style="color: #00004F" @click="showAgree('USER_PROTOCOL')">
                  《用户协议》
                </text>
                <text style="color: #00004F" @click="showAgree('SECRET_PROTOCOL')">
                  《隐私协议》
                </text>
              </view>
            </view>
          </checkbox-group>
        </view>
        <view class="mt-25 flex justify-between">
          <view class="w-40p">
            <u-button type="info" @click="refuse" :custom-style="{backgroundColor: '#F2F2F2'}">拒绝</u-button>
          </view>
          <view class="w-40p">
            <u-button @getphonenumber="auth" open-type="getPhoneNumber"
                      :custom-style="agreeStyle"
                      :disabled="!check || disabled">允许
            </u-button>
          </view>
        </view>
      </template>
      <template v-else>
        <u-form label-width="140rpx">
          <u-form-item borderBottom label="手机号">
            <u-input v-model="phone" placeholder="请输入手机号"/>
          </u-form-item>
          <u-form-item borderBottom label="密码">
            <u-input v-model="pwd" type="password" placeholder="请输入密码"/>
          </u-form-item>
        </u-form>
        <view class="mt-20 text-25">
          <checkbox-group @change="changeCheck">
            <view class="flex justify-start items-center">
              <checkbox value="check" :checked="check"/>
              <view>
                <text>我已阅读并同意</text>
                <text style="color: #00004F" @click="showAgree('USER_PROTOCOL')">
                  《用户协议》
                </text>
                <text style="color: #00004F" @click="showAgree('SECRET_PROTOCOL')">
                  《隐私协议》
                </text>
              </view>
            </view>
          </checkbox-group>
        </view>
        <view class="mt-25 flex justify-between">
          <view class="w-40p">
            <u-button type="info" @click="refuse" :custom-style="{backgroundColor: '#F2F2F2'}">关闭</u-button>
          </view>
          <view class="w-40p">
            <u-button @click="loginByPhone" :custom-style="agreeStyle"
                      :disabled="!check || disabled || !phone || !pwd">登录
            </u-button>
          </view>
        </view>
      </template>
      <view class="flex mt-25 justify-center text-25" style="color: #00004F" @click="mode = 'phone'"
            v-if="mode === 'wechat'">手机号登录
      </view>
      <view class="flex mt-25 justify-center text-25" style="color: #00004F" @click="mode = 'wechat'" v-else>一键授权登录
      </view>
    </view>
    <u-popup mode="center" :show="showAgreePopup" closeable @close="showAgreePopup = false" round="10"
             :custom-style="{height: '80%', width: '80%'}" closeOnClickOverlay>
      <view class="p-30 overflow-y">
        <u-parse :content="content"/>
      </view>
    </u-popup>
  </u-popup>
</template>

<script>
import {loginByPhoneForTestReq, loginByPhoneReq, loginReq} from "@/api/user";
import {setUserInfo} from "@/util/user";
import {articleInfoReq, sysSettingInfoReq} from "@/api/common";

export default {
  name: "Login",
  props: {
    isIndex: {
      type: Boolean,
      default: false
    },
    isHide: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      show: false,
      check: false,
      code: null,
      phoneData: null,
      agreeStyle: {
        backgroundColor: this.check ? '#00C655' : '#F2F2F2',
        border: this.check ? '#00C655' : '#F2F2F2',
        color: this.check ? '#FFFFFF' : '#828282',
      },
      showAgreePopup: false,
      content: '',
      phone: '',
      pwd: '',
      mode: 'wechat',
      disabled: false
    }
  },
  methods: {
    changeCheck({detail}) {
      const {value} = detail
      this.check = value.length > 0
      this.agreeStyle = {
        backgroundColor: this.check ? '#00C655' : '#F2F2F2',
        border: this.check ? '#00C655' : '#F2F2F2',
        color: this.check ? '#FFFFFF' : '#828282',
      }
    },
    open() {
      this.disabled = false
      this.show = true
    },
    hide() {
      this.show = false
    },
    async loginByPhone(){
      this.disabled = true
      const {data} = await loginByPhoneForTestReq({phone: this.phone, phoneLoginCode: this.pwd})
      console.log(data)
      this.setInfo(data)
      this.done()
      this.disabled = false
    },
    wxLogin() {
      return new Promise(resolve => {
        uni.login({
          success: (loginRes) => {
            this.code = loginRes.code
            resolve()
          }
        })
      })
    },
    auth(phoneE) {
      //获取手机号
      this.phoneData = phoneE.detail
      this.doLogin()
    },
    async doLogin() {
      await this.wxLogin()
      this.disabled = true
      const phoneCode = this.phoneData.code
      const {data} = await loginByPhoneReq({
        phoneCode,
        code: this.code,
      })
      console.log(data)
      this.setInfo(data)
      this.done()
      this.disabled = false
    },
    setInfo(res) {
      setUserInfo({
        username: res.user.nickname,
        header: res.user.avatar,
        phone: res.phone || res.user.phone,
        token: res.access_token,
        uid: res.user.userId,
      });
    },
    done() {
      this.show = false
      this.$emit('done')
    },
    refuse() {
      this.show = false
      if (!this.isHide) uni.switchTab({url: '/pages/index/index'})
    },
    async showAgree(enumKey) {
      const {data} = await articleInfoReq(9852)
      this.content = data.content
      this.showAgreePopup = true
    }
  },
}
</script>