wxapp_shuibei/pages/users/app_login/index.vue

<template>
	<view class="appBox">
		<div class="shading">
			<image :src="logoUrl" v-if="logoUrl" />
			<image src="/static/images/logo2.png" v-else />
		</div>
		<mobileLogin :isUp="isUp" :isShow="isShow" :platform="platform" :isPos="isPos" :appleShow="appleShow" :authKey="authKey" @wechatPhone="wechatPhone"></mobileLogin>
	</view>
</template>

<script setup>
import { ref } from 'vue'
import { useAppStore } from '@/stores/app'
import { onLoad } from '@dcloudio/uni-app'
import { useSendCode } from '@/hooks/useSendCode'
import { useToast } from '@/hooks/useToast'
import Cache from '@/utils/cache'
import {
  registerVerify,
  getCodeApi,
  getUserInfo,
} from "@/api/user"
import mobileLogin from '@/components/login_mobile/index.vue'

const appStore = useAppStore()
const emit = defineEmits(['close', 'wechatPhone'])
const { Toast } = useToast()

const options = ref({})
const keyCode = ref('')
const account = ref('')
const codeNum = ref('')
const isUp = ref(true)
const authKey = ref('')
const logoUrl = ref('')
const isShow = ref(false)
const isPos = ref(false)
const platform = ref('') // 手机平台
const appleShow = ref('') //是否是苹果登录
const userInfo = ref({})

const { sendCode } = useSendCode()

function wechatPhone() {
  Cache.clear('snsapiKey')
  if (options.value.back_url) {
    let url = uni.getStorageSync('snRouter')
    url = url.indexOf('/pages/index/index') != -1 ? '/' : url
    if (url.indexOf('/pages/users/wechat_login/index') !== -1) {
      url = '/'
    }
    if (!url) {
      url = '/pages/index/index'
    }
    isUp.value = false
    uni.showToast({
      title: '登录成功',
      icon: 'none'
    })
    // setTimeout(() => {
    //   location.href = url
    // }, 800)
  } else {
    uni.navigateBack()
  }
}

// 获取验证码
async function code() {
  if (!account.value) return Toast({ title: '请填写手机号码' })
  if (!/^1(3|4|5|7|8|9|6)\d{9}$/i.test(account.value)) return Toast({ title: '请输入正确的手机号码' })
  try {
    const res = await registerVerify(account.value)
    Toast({ title: res.msg })
    sendCode()
  } catch (err) {
    Toast({ title: err })
  }
}

// 获取验证码api
function getCode() {
  getCodeApi().then(res => {
    keyCode.value = res.data.key
  }).catch(res => {
    Toast({ title: res })
  })
}

function close() {
  emit('close', false)
}

// 获取个人用户信息
function getUserInfoFn() {
  getUserInfo().then(res => {
    uni.hideLoading()
    userInfo.value = res.data
    appStore.UPDATE_USERINFO(res.data)
    // #ifdef MP
    Toast({ title: '登录成功', icon: 'success' }, { tab: 3 })
    close()
    // #endif
    // #ifdef H5
    emit('wechatPhone', true)
    // #endif
  })
}

// 页面加载
onLoad((opts) => {
  // uni.getSystemInfo({
  //   success(res) {
  //     platform.value = res.platform
  //   }
  // })
  // options.value = opts
  // if (opts.authKey) authKey.value = opts.authKey
  // if (opts.appleShow) appleShow.value = opts.appleShow
})

</script>
<style>
	page {
		height: 100%;
	}
</style>
<style lang="scss" scoped>
	.appBox {
		background-color: #fff;
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		overflow: hidden;
	}

	.shading {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;




		image {
			width: 180rpx;
			height: 180rpx;
		}
	}

	page {
		background-color: #fff !important;
	}

	.ChangePassword .phone {
		font-size: 32rpx;
		font-weight: bold;
		text-align: center;
		margin-top: 55rpx;
	}

	.ChangePassword .list {
		width: 580rpx;
		margin: 53rpx auto 0 auto;
	}

	.ChangePassword .list .item {
		width: 100%;
		height: 110rpx;
		border-bottom: 2rpx solid #f0f0f0;
	}

	.ChangePassword .list .item input {
		width: 100%;
		height: 100%;
		font-size: 32rpx;
	}

	.ChangePassword .list .item .placeholder {
		color: #b9b9bc;
	}

	.ChangePassword .list .item input.codeIput {
		width: 340rpx;
	}

	.ChangePassword .list .item .code {
		font-size: 32rpx;
		background-color: #fff;
	}

	.ChangePassword .list .item .code.on {
		color: #b9b9bc !important;
	}

	.ChangePassword .confirmBnt {
		font-size: 32rpx;
		width: 580rpx;
		height: 90rpx;
		border-radius: 45rpx;
		color: #fff;
		margin: 92rpx auto 0 auto;
		text-align: center;
		line-height: 90rpx;
	}
</style>