268 lines
7.7 KiB
Vue
268 lines
7.7 KiB
Vue
<template>
|
|
<view>
|
|
<up-navbar title="登录" :autoBack="false" placeholder bgColor="rgba(0,0,0,0)">
|
|
<template #left>
|
|
<up-icon v-if="!showWeixin" name="arrow-left" @click="navBack" size="20"></up-icon>
|
|
<view v-else></view>
|
|
</template>
|
|
</up-navbar>
|
|
<view class="login-box">
|
|
<image class="logo" src="https://lihai001.oss-cn-chengdu.aliyuncs.com/def/35adb202404271727457954.png"></image>
|
|
<view class="tips">欢迎登录惠农批发</view>
|
|
<block v-if="showWeixin">
|
|
<up-transition :show="showWeixin">
|
|
<view class="btn">
|
|
<up-button @click="weixinLogin" color="#20B128" size="large"><up-icon name="weixin-fill" color="#fff"
|
|
size="28"></up-icon>微信快捷登录</up-button>
|
|
</view>
|
|
<view class="btn">
|
|
<up-button color="#ECFFEE" @click="showWeixin=false" size="large"><text
|
|
style="color: #20B128;">使用短信验证登录</text></up-button>
|
|
</view>
|
|
</up-transition>
|
|
</block>
|
|
<block v-else>
|
|
<up-transition :show="!showWeixin">
|
|
<view class="form">
|
|
<view class="input">
|
|
<up-input :customStyle="{height: '100%'}" v-model="loginForm.phone" placeholderClass="place" border="none"
|
|
placeholder="请输入手机号" type="number">
|
|
<template #prefix>
|
|
<image style="height: 40rpx;width: 40rpx;margin-top: 6rpx;"
|
|
src="https://lihai001.oss-cn-chengdu.aliyuncs.com/def/48491202404281006484208.png"></image>
|
|
</template>
|
|
</up-input>
|
|
</view>
|
|
<view class="input">
|
|
<up-input :customStyle="{height: '100%'}" v-model="loginForm.code" :maxlength="4" placeholderClass="place"
|
|
border="none" placeholder="请输入验证码" type="number">
|
|
<template #prefix>
|
|
<image style="height: 40rpx;width: 40rpx;margin-top: 6rpx;"
|
|
src="https://lihai001.oss-cn-chengdu.aliyuncs.com/def/3a42f202404281007454918.png"></image>
|
|
</template>
|
|
<template #suffix>
|
|
<up-code :seconds="seconds" ref="uCodeRef" @change="codeChange"></up-code>
|
|
<view style="color: #20B128;" @click="getCode">{{tips}}</view>
|
|
</template>
|
|
</up-input>
|
|
</view>
|
|
</view>
|
|
<view class="btn">
|
|
<up-button color="#20B128" size="large" @click="codeLogin">登录</up-button>
|
|
</view>
|
|
</up-transition>
|
|
</block>
|
|
<view class="agreement">
|
|
<image v-if="!isAgree" @click="isAgree=true" src="@/static/icon/n-check.png"></image>
|
|
<image v-else @click="isAgree=false" src="@/static/icon/check.png"></image>
|
|
<view>
|
|
我已同意<text>《用户协议》</text>与<text>《隐私政策》</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<bindPhone :show="showBind" @close="showBind = false" @change="getPhoneNumber" />
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { onBackPress } from "@dcloudio/uni-app"
|
|
import { ref } from "vue"
|
|
import { userLoginApi, userLoginWeixinApi, getMobileByMnpApi } from "@/api/user.js";
|
|
import useUserStore from "@/store/user.js"
|
|
import bindPhone from "@/components/bindPhone.vue"
|
|
|
|
|
|
|
|
const navToIndex = () => {
|
|
if (!userStore.userInfo.supplier) uni.reLaunch({
|
|
url: '/pages/index/index'
|
|
})
|
|
else uni.$u.toast('功能开发中')
|
|
}
|
|
|
|
const userStore = useUserStore(); //使用pinia进行状态管理
|
|
if (userStore.userInfo && userStore.userInfo.mobile) {
|
|
navToIndex();
|
|
} else {
|
|
userStore.setToken('');
|
|
userStore.setUserInfo({});
|
|
}
|
|
|
|
const showWeixin = ref(true); //是否显示微信登录
|
|
const isAgree = ref(false); //是否同意协议
|
|
|
|
const weixinLogin = () => {
|
|
if (!isAgree.value) return uni.$u.toast('请先阅读并同意协议');
|
|
uni.showLoading({
|
|
title: '登录中'
|
|
})
|
|
uni.login({
|
|
provider: 'weixin',
|
|
success: (res) => {
|
|
userLoginWeixinApi({
|
|
code: res.code
|
|
}).then(res => {
|
|
uni.hideLoading();
|
|
userStore.setToken(res.data.token);
|
|
userStore.setUserInfo(res.data);
|
|
if (!res.data.mobile) { //未绑定手机号
|
|
return showBind.value = true;
|
|
}
|
|
navToIndex();
|
|
})
|
|
},
|
|
fail: (err) => {
|
|
console.log(err);
|
|
uni.$u.toast('登录失败');
|
|
}
|
|
})
|
|
}
|
|
|
|
const showBind = ref(false); //是否显示绑定手机号弹窗
|
|
const getPhoneNumber = (e) => {
|
|
console.log("===", e);
|
|
if (e.detail?.errMsg == 'getPhoneNumber:ok') {
|
|
getMobileByMnpApi({
|
|
code: e.detail.code
|
|
}).then(res => {
|
|
navToIndex();
|
|
})
|
|
} else {
|
|
console.log("用户拒绝授权");
|
|
return uni.$u.toast('您拒绝了授权');
|
|
}
|
|
}
|
|
|
|
const loginForm = ref({
|
|
phone: '15366662222',
|
|
code: ''
|
|
})
|
|
const isPhone = () => { //检验手机号是否正确
|
|
loginForm.value.phone = loginForm.value.phone.replace(/\s*/g, ""); //去除空格
|
|
return !/^1[3456789]\d{9}$/.test(loginForm.value.phone);
|
|
}
|
|
const codeLogin = () => {
|
|
if (!isAgree.value) return uni.$u.toast('请先阅读并同意协议');
|
|
// 验证码登录
|
|
if (isPhone()) return uni.$u.toast('请输入正确的手机号码');
|
|
console.log('登录');
|
|
userLoginApi({
|
|
account: '17811111111',
|
|
password: '1111',
|
|
terminal: 3,
|
|
scene: 1
|
|
}).then(res => {
|
|
console.log(res);
|
|
})
|
|
}
|
|
|
|
const tips = ref('');
|
|
const seconds = ref(60);
|
|
const uCodeRef = ref(null);
|
|
|
|
const codeChange = (text) => {
|
|
tips.value = text;
|
|
};
|
|
|
|
const getCode = () => {
|
|
if (!isAgree.value) return uni.$u.toast('请先阅读并同意协议');
|
|
if (uCodeRef.value.canGetCode) {
|
|
if (isPhone()) return uni.$u.toast('请输入正确的手机号码');
|
|
// 模拟向后端请求验证码
|
|
uni.showLoading({
|
|
title: '正在获取验证码',
|
|
});
|
|
setTimeout(() => {
|
|
uni.hideLoading();
|
|
// 这里此提示会被start()方法中的提示覆盖
|
|
uni.$u.toast('验证码已发送');
|
|
// 通知验证码组件内部开始倒计时
|
|
uCodeRef.value.start();
|
|
}, 2000);
|
|
} else {
|
|
uni.$u.toast('倒计时结束后再发送');
|
|
}
|
|
};
|
|
|
|
// 微信小程序无法拦截原生返回按钮，所以使用自定义导航拦截返回
|
|
const navBack = () => {
|
|
if (showWeixin.value == false) {
|
|
showWeixin.value = true;
|
|
return true;
|
|
} else uni.navigateBack();
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
page {
|
|
background-color: #fff;
|
|
}
|
|
|
|
.login-box {
|
|
width: 700rpx;
|
|
height: 80vh;
|
|
margin: 0 auto;
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
padding-top: 10vh;
|
|
position: relative;
|
|
|
|
.logo {
|
|
height: 152rpx;
|
|
width: 152rpx;
|
|
}
|
|
|
|
.tips {
|
|
color: #444444;
|
|
font-size: 28rpx;
|
|
margin: 30rpx 0;
|
|
}
|
|
|
|
.btn {
|
|
width: 600rpx;
|
|
margin-top: 40rpx;
|
|
font-size: 32rpx !important;
|
|
}
|
|
|
|
.form {
|
|
.input {
|
|
background-color: #ECFFEE;
|
|
width: 600rpx;
|
|
height: 90rpx;
|
|
box-sizing: border-box;
|
|
padding: 0 20rpx;
|
|
margin-bottom: 40rpx;
|
|
|
|
.place {
|
|
color: #333;
|
|
}
|
|
|
|
.customStyle {
|
|
color: red;
|
|
}
|
|
}
|
|
}
|
|
|
|
.agreement {
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: center;
|
|
color: #444;
|
|
|
|
image {
|
|
width: 40rpx;
|
|
height: 40rpx;
|
|
margin-right: 10rpx;
|
|
}
|
|
|
|
text {
|
|
color: #20B128;
|
|
}
|
|
}
|
|
}
|
|
</style> |