You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
583 lines
12 KiB
583 lines
12 KiB
<script setup>
|
|
import { onLoad } from "@dcloudio/uni-app";
|
|
import { ref } from "vue";
|
|
import {
|
|
getMyAreaApi,
|
|
getUserByXcxAPPOpenIdApi,
|
|
getUserTreatyApi,
|
|
loginApi,
|
|
xcxWxLoginApi,
|
|
} from "@/libs/api";
|
|
import { gotoBack, validates } from "@/libs/utils";
|
|
import config from "@/libs/utils/config";
|
|
import { encryptData } from "@/libs/utils/crypto";
|
|
|
|
// const appData = getApp().globalData;
|
|
/**
|
|
* 判断小程序的API，回调，参数，组件等是否在当前版本可用
|
|
*/
|
|
const canIUseGetUserProfile = ref(false);
|
|
/**
|
|
* 判断登录状态
|
|
*/
|
|
const loginDisabled = ref(false);
|
|
/**
|
|
* 用户头像
|
|
*/
|
|
const avatarUrl = ref();
|
|
/**
|
|
* 用户名称
|
|
*/
|
|
const nickName = ref();
|
|
/**
|
|
* 用户性别
|
|
*/
|
|
const gender = ref();
|
|
/**
|
|
* 微信管理的openid
|
|
*/
|
|
const openid = ref("");
|
|
|
|
/**
|
|
* 手机号码
|
|
*/
|
|
const username = ref("");
|
|
/**
|
|
* 密码
|
|
*/
|
|
const password = ref("");
|
|
/**
|
|
* 显示密码
|
|
*/
|
|
const showPassword = ref(false);
|
|
/**
|
|
* 阅读协议
|
|
*/
|
|
const readed = ref(false);
|
|
/**
|
|
* 判断是否是ios系统
|
|
*/
|
|
const isIos = ref(false);
|
|
|
|
/**
|
|
* 授权登录
|
|
*/
|
|
function onGetUserProfile() {
|
|
loginDisabled.value = true;
|
|
|
|
// #ifdef MP-WEIXIN
|
|
uni.getUserProfile({
|
|
desc: "用于完善用户资料", // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
|
|
success(res) {
|
|
uni.showToast({
|
|
title: JSON.stringify(res),
|
|
icon: "none",
|
|
});
|
|
|
|
avatarUrl.value = res.userInfo.avatarUrl;
|
|
nickName.value = res.userInfo.nickName;
|
|
gender.value = res.userInfo.gender;
|
|
wxLogin();
|
|
},
|
|
fail(err) {
|
|
uni.showToast({
|
|
title: JSON.stringify(err),
|
|
icon: "none",
|
|
});
|
|
console.log(err);
|
|
},
|
|
});
|
|
// #endif
|
|
|
|
// #ifdef APP-PLUS||H5
|
|
uni.showToast({
|
|
title: "app login",
|
|
icon: "none",
|
|
});
|
|
// #endif
|
|
}
|
|
|
|
/**
|
|
* 微信用户登录
|
|
*/
|
|
function wxLogin() {
|
|
uni.login({
|
|
async success(res) {
|
|
const res2 = await xcxWxLoginApi({ code: res.code });
|
|
if (res2.code === "0") {
|
|
openid.value = res2.data.openid;
|
|
uni.setStorageSync("openid", openid.value);
|
|
// FIXME: 这里的session_key 是无效的，询问一下
|
|
// uni.setStorageSync("session", res2.data.session_key);
|
|
|
|
getUserByXcxAPPOpenId({ openid: openid.value });
|
|
}
|
|
else {
|
|
loginDisabled.value = false;
|
|
}
|
|
},
|
|
|
|
});
|
|
}
|
|
|
|
/**
|
|
* 根据用户openid获取session
|
|
*/
|
|
async function getUserByXcxAPPOpenId(data) {
|
|
// appData.header = {
|
|
// "content-type": "",
|
|
// "header": "",
|
|
// "version": "2.0",
|
|
// };
|
|
uni.showLoading({ title: "登录中..." });
|
|
const res = await getUserByXcxAPPOpenIdApi(data);
|
|
|
|
if (res.code === "0") {
|
|
uni.hideLoading();
|
|
// uni.setStorageSync("X-Header-Token", res.header.session);
|
|
// appData.header.session = res.header.session;
|
|
// appData.header["X-Header-Token"] = res.header.session;
|
|
// uni.setStorageSync("session", res.header.session);
|
|
getMyArea();
|
|
}
|
|
else {
|
|
uni.hideLoading();
|
|
updateUserInfo(res);
|
|
}
|
|
}
|
|
|
|
async function getMyArea() {
|
|
const res = await getMyAreaApi({ warehouseid: "", isEnabled: 1 });
|
|
if (res.code === "0") {
|
|
// const list = res.data.list.sort((pre, cur) => Number(cur) - Number(pre));
|
|
// each 就是找到有isLastDefaultAddr，没有就那第一个 isDefault 最大值
|
|
res.data.list = res.data.list.sort((a, b) => Number(b.isDefault) - Number(a.isDefault));
|
|
const each = res.data.list.find(each => each.isLastDefaultAddr) || res.data.list[0];
|
|
uni.setStorageSync("warehousId", each.warehousId);
|
|
uni.setStorageSync("addressId", each.addrId);
|
|
// selectAddress.value = list[0];
|
|
}
|
|
const pages = getCurrentPages();
|
|
const beforePage = pages[pages.length - 2];
|
|
uni.navigateBack({
|
|
success() {
|
|
beforePage.onLoad(); // 执行前一个页面的onLoad方法
|
|
},
|
|
});
|
|
}
|
|
|
|
/**
|
|
* 手机号登录
|
|
*/
|
|
async function onPhoneLogin() {
|
|
const isPass = validates([
|
|
() => username.value === "" && "请输入手机号",
|
|
() => password.value === "" && "请输入密码",
|
|
() => !readed.value && "请先阅读并同意服务协议和隐私协议",
|
|
]);
|
|
|
|
if (!isPass)
|
|
return;
|
|
|
|
uni.showLoading({ title: "登录中...", mask: true });
|
|
const res = await loginApi({
|
|
username: username.value,
|
|
password: password.value,
|
|
});
|
|
|
|
if (!validates(() => res.code !== "0" && res.message)) {
|
|
return;
|
|
}
|
|
|
|
// TODO: 密码和账号随便填，都给我一个 code === '0', 后续询问一下
|
|
uni.setStorageSync("session", res.data);
|
|
const setPhone = encryptData(username.value, config.SECRET_KEY);
|
|
uni.setStorageSync("phone", setPhone);
|
|
const setPassword = encryptData(password.value, config.SECRET_KEY);
|
|
uni.setStorageSync("password", setPassword);
|
|
gotoBack();
|
|
|
|
uni.hideLoading();
|
|
}
|
|
function onWechatLogin() {}
|
|
function onRegister() {}
|
|
function onAppleLogin() {}
|
|
|
|
function updateUserInfo() {}
|
|
|
|
function onBackHome() {
|
|
uni.switchTab({
|
|
url: "/pages/home/home",
|
|
});
|
|
}
|
|
|
|
/**
|
|
* 忘记密码
|
|
*/
|
|
function onForgetPassword() { }
|
|
|
|
/**
|
|
* 打开用户协议
|
|
*/
|
|
async function onOpenUserAgreement() {
|
|
const res = await getUserTreatyApi();
|
|
if (res.code !== "0")
|
|
return;
|
|
uni.navigateTo({
|
|
url: "/pages/agreement/agreement",
|
|
success(res2) {
|
|
res2.eventChannel.emit("html", {
|
|
html: res.data.serviceAgreement,
|
|
title: "用户协议",
|
|
});
|
|
},
|
|
});
|
|
}
|
|
|
|
/**
|
|
* 打开隐私协议
|
|
*/
|
|
async function onOpenPrivacyAgreement() {
|
|
const res = await getUserTreatyApi();
|
|
if (res.code !== "0")
|
|
return;
|
|
uni.navigateTo({
|
|
url: "/pages/agreement/agreement",
|
|
success(res2) {
|
|
res2.eventChannel.emit("html", {
|
|
html: res.data.privacyAgreement,
|
|
title: "隐私协议",
|
|
});
|
|
},
|
|
});
|
|
}
|
|
|
|
onLoad(() => {
|
|
if (uni.getUserProfile) {
|
|
canIUseGetUserProfile.value = true;
|
|
}
|
|
|
|
isIos.value = uni.getAppBaseInfo().uniPlatform === "ios";
|
|
|
|
// uni.getSystemInfo({
|
|
// success(res) {
|
|
// isIos.value = res.platform === "ios";
|
|
// },
|
|
// });
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<view>
|
|
<uv-navbar
|
|
title-style="color: #fff;"
|
|
title="登录账号"
|
|
bg-color="#06CA64"
|
|
left-icon-color="#fff"
|
|
@left-click="onBackHome"
|
|
/>
|
|
|
|
<!-- #ifdef MP-WEIXIN -->
|
|
<view style="padding-top: 44px;">
|
|
<view class="header">
|
|
<image src="/static/logo.png" />
|
|
</view>
|
|
<view class="content">
|
|
<view>申请获取以下权限</view>
|
|
<text>获得你的公开信息(昵称，头像等)</text>
|
|
</view>
|
|
<button
|
|
class="bottom"
|
|
type="primary"
|
|
:disabled="loginDisabled"
|
|
@tap="onGetUserProfile"
|
|
>
|
|
授权登录
|
|
</button>
|
|
<button
|
|
class="bottom buttom-two"
|
|
type="info"
|
|
lang="zh_CN"
|
|
@tap="onBackHome"
|
|
>
|
|
取消登录
|
|
</button>
|
|
</view>
|
|
<!-- #endif -->
|
|
|
|
<!-- #ifdef APP-PLUS||H5 -->
|
|
<view class="main">
|
|
<view class="title">
|
|
登录账号
|
|
</view>
|
|
|
|
<view class="middle">
|
|
<view class="phone">
|
|
手机号
|
|
</view>
|
|
<input v-model="username" placeholder="请输入">
|
|
<view class="passowordForget">
|
|
<text class="password">
|
|
密码
|
|
</text>
|
|
<text class="forget" @tap="onForgetPassword">
|
|
忘记密码?
|
|
</text>
|
|
</view>
|
|
|
|
<view class="flex">
|
|
<input
|
|
v-model="password"
|
|
:type="showPassword ? '' : 'password'"
|
|
placeholder="请输入"
|
|
>
|
|
|
|
<uv-icon
|
|
size="35rpx"
|
|
:name="showPassword ? 'eye-off' : 'eye-fill'"
|
|
@tap="showPassword = !showPassword"
|
|
/>
|
|
</view>
|
|
<!-- <input
|
|
v-model="password"
|
|
placeholder="请输入"
|
|
type="password"
|
|
:password="showPassword"
|
|
:class="[!showPassword ? 'uni-eye-active' : '']"
|
|
@tap="showPassword = !showPassword"
|
|
> -->
|
|
|
|
<view class="agreement">
|
|
<uv-checkbox-group
|
|
active-color="#06CA64"
|
|
>
|
|
<uv-checkbox
|
|
v-model="readed"
|
|
shape="circle"
|
|
size="24"
|
|
icon-size="20"
|
|
@change="e => readed = e"
|
|
/>
|
|
</uv-checkbox-group>
|
|
<view>
|
|
我已阅读并同意<text class="href" @tap="onOpenUserAgreement">
|
|
《菜大王用户服务协议》
|
|
</text>和<text
|
|
class="href"
|
|
@tap="onOpenPrivacyAgreement"
|
|
>
|
|
《菜大王隐私协议》
|
|
</text>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="login-box">
|
|
<button class="login-btn" @tap="onPhoneLogin">
|
|
登录
|
|
</button>
|
|
<view class="no-account">
|
|
<text>
|
|
还没有账号？<text class="register" @tap="onRegister">
|
|
去注册
|
|
</text>
|
|
</text>
|
|
</view>
|
|
|
|
<view class="other-login">
|
|
<uv-icon
|
|
class="wechat"
|
|
name="weixin-fill"
|
|
size="35"
|
|
color="#fff"
|
|
@tap="onWechatLogin"
|
|
/>
|
|
|
|
<uv-icon
|
|
v-if="isIos"
|
|
name="apple-fill"
|
|
class="apple"
|
|
size="35"
|
|
color="#fff"
|
|
@tap="onAppleLogin"
|
|
/>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- #endif -->
|
|
</view>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
/* pages/login/login.wxss */
|
|
page {
|
|
background: #ffffff;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: flex-start;
|
|
/* padding:30rpx; */
|
|
}
|
|
.section{
|
|
margin-bottom: 40rpx;
|
|
}
|
|
.section__title{
|
|
margin-bottom:20rpx;
|
|
}
|
|
input {
|
|
border-bottom:solid 1px #f6f6f6;
|
|
width:90%;
|
|
z-index: 1;
|
|
}
|
|
.header {
|
|
margin: 90rpx 0 90rpx 0rpx;
|
|
border-bottom: 1px solid #ccc;
|
|
text-align: center;
|
|
/* width: 650rpx; */
|
|
height: 300rpx;
|
|
line-height: 450rpx;
|
|
}
|
|
|
|
.header image {
|
|
width: 200rpx;
|
|
height: 200rpx;
|
|
}
|
|
|
|
.content {
|
|
margin-left: 50rpx;
|
|
margin-bottom: 90rpx;
|
|
}
|
|
|
|
.content text {
|
|
display: block;
|
|
color: #9d9d9d;
|
|
margin-top: 40rpx;
|
|
}
|
|
|
|
.bottom {
|
|
border-radius: 80rpx;
|
|
margin: 70rpx 50rpx;
|
|
font-size: 35rpx;
|
|
background: #06CA64 !important;
|
|
}
|
|
.buttom-two{
|
|
background: #F0F0F0 !important;
|
|
color: #666666;
|
|
}
|
|
.buttom-two::after{
|
|
border: none;
|
|
}
|
|
.code_button{
|
|
width:200rpx;
|
|
font-size: $text-base;
|
|
line-height: 40rpx;
|
|
height:auto;
|
|
padding: 6rpx;
|
|
float: right;
|
|
margin-top: -56rpx;
|
|
}
|
|
.modal_input input{
|
|
width: 100%;
|
|
padding: 32rpx 0 4rpx 0;
|
|
border-bottom: solid 1px #d9d9d9;
|
|
line-height: 48rpx;
|
|
}
|
|
.nav {
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
.icon-back {
|
|
color: black;
|
|
font-size: 50rpx;
|
|
font-size: bold;
|
|
position: absolute;
|
|
left: 10rpx;
|
|
}
|
|
}
|
|
.main {
|
|
padding: 44px 50rpx 0;
|
|
// font-size: $text-base;
|
|
font-size: $text-base;
|
|
.title {
|
|
font-size: $text-9xl;
|
|
// font-size: 60rpx;
|
|
padding-top: 100rpx;
|
|
padding-bottom: 40rpx;
|
|
}
|
|
.middle {
|
|
padding: 0 10rpx;
|
|
.phone {
|
|
padding: 20rpx 0rpx;
|
|
}
|
|
.passowordForget {
|
|
padding: 70rpx 0rpx 20rpx;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
.forget {
|
|
color:#06CA64
|
|
}
|
|
}
|
|
|
|
.agreement {
|
|
padding: 30rpx 5rpx 80rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10rpx;
|
|
font-size: $text-lg;
|
|
// font-size: 28rpx;
|
|
input {
|
|
// width: 90%;
|
|
margin: 0 auto;
|
|
padding: 15rpx 5rpx;
|
|
}
|
|
.href {
|
|
color: #1b0eab;
|
|
}
|
|
}
|
|
|
|
}
|
|
.login-box {
|
|
margin-top: 20rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
flex-direction: column;
|
|
.login-btn {
|
|
width: 100%;
|
|
z-index: 10 !important;
|
|
border-radius: 100px;
|
|
border: none;
|
|
background-color: #06CA64;
|
|
color: white;
|
|
font-size: $text-base;
|
|
}
|
|
.no-account {
|
|
font-size: $text-base;
|
|
margin-top: 20rpx;
|
|
.register {
|
|
color: #06CA64;
|
|
}
|
|
}
|
|
.other-login {
|
|
display: flex;
|
|
gap: 150rpx;
|
|
margin: 0 auto;
|
|
margin-top: 180rpx;
|
|
.apple {
|
|
height: 90rpx;
|
|
width: 90rpx;
|
|
background:black;
|
|
border-radius: 10%;
|
|
justify-content: center;
|
|
}
|
|
.wechat {
|
|
height: 90rpx;
|
|
width: 90rpx;
|
|
background:#3aa24b;
|
|
border-radius: 10%;
|
|
justify-content: center;
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
</style>
|