学习很差啦 2022-10-17 14:27:27 +08:00
commit b8c61fdabd
3 changed files with 820 additions and 824 deletions

View File

@ -12,143 +12,68 @@
<!-- 手机号 --> <!-- 手机号 -->
<div v-show="!enableUserPwdBox"> <div v-show="!enableUserPwdBox">
<div v-show="current == 0"> <div v-show="current == 0">
<u-input <u-input :custom-style="inputStyle" :placeholder-style="placeholderStyle" placeholder="请输入手机号 (11位)"
:custom-style="inputStyle" class="mobile" focus v-model="mobile" type="number" maxlength="11" />
:placeholder-style="placeholderStyle" <div :class="!enableFetchCode ? 'disable' : 'fetch'" @click="fetchCode" class="btn">
placeholder="请输入手机号 (11位)"
class="mobile"
focus
v-model="mobile"
type="number"
maxlength="11"
/>
<div
:class="!enableFetchCode ? 'disable' : 'fetch'"
@click="fetchCode"
class="btn"
>
获取验证码 获取验证码
</div> </div>
</div> </div>
<!-- 输入验证码 --> <!-- 输入验证码 -->
<div v-show="current == 1" class="box-code"> <div v-show="current == 1" class="box-code">
<verifyCode <verifyCode type="bottom" @confirm="submit" boxActiveColor="#D8D8D8" v-model="code" isFocus
type="bottom" boxNormalColor="#D8D8D8" cursorColor="#D8D8D8" />
@confirm="submit"
boxActiveColor="#D8D8D8"
v-model="code"
isFocus
boxNormalColor="#D8D8D8"
cursorColor="#D8D8D8"
/>
<div class="fetch-btn"> <div class="fetch-btn">
<u-verification-code <u-verification-code change-text="x" end-text="" unique-key="page-login"
change-text="验证码已发送x" :seconds="seconds" @end="end" @start="start" ref="uCode" @change="codeChange">
end-text="重新获取验证码" </u-verification-code>
unique-key="page-login"
:seconds="seconds"
@end="end"
@start="start"
ref="uCode"
@change="codeChange"
></u-verification-code>
<span @tap="fetchCode" :style="{ color: codeColor }"> <span @tap="fetchCode" :style="{ color: codeColor }">
{{ tips }}</span {{ tips }}</span>
>
</div> </div>
</div> </div>
</div> </div>
<!-- 帐号密码登录 --> <!-- 帐号密码登录 -->
<div v-show="enableUserPwdBox"> <div v-show="enableUserPwdBox">
<u-input <u-input :custom-style="inputStyle" :placeholder-style="placeholderStyle" placeholder="请输入用户名"
:custom-style="inputStyle" class="mobile" focus v-model="userData.username" />
:placeholder-style="placeholderStyle" <u-input :custom-style="inputStyle" :placeholder-style="placeholderStyle" placeholder="请输入密码"
placeholder="请输入用户名" class="mobile" focus v-model="userData.password" type="password" />
class="mobile"
focus
v-model="userData.username"
/>
<u-input
:custom-style="inputStyle"
:placeholder-style="placeholderStyle"
placeholder="请输入密码"
class="mobile"
focus
v-model="userData.password"
type="password"
/>
<div <div :class="!enableUserBtnColor ? 'disable' : 'fetch'" @click="passwordLogin" class="btn">
:class="!enableUserBtnColor ? 'disable' : 'fetch'"
@click="passwordLogin"
class="btn"
>
帐号密码登录 帐号密码登录
</div> </div>
</div> </div>
<div class="flex" v-show="current != 1"> <div class="flex" v-show="current != 1">
<u-checkbox-group :icon-size="24" width="45rpx"> <u-checkbox-group :icon-size="24" width="45rpx">
<u-checkbox <u-checkbox shape="circle" v-model="enablePrivacy" active-color="#FF5E00"></u-checkbox>
shape="circle"
v-model="enablePrivacy"
active-color="#FF5E00"
></u-checkbox>
</u-checkbox-group> </u-checkbox-group>
<div class="tips"> <div class="tips">
未注册的手机号验证后将自动创建用户账号登录即代表您已同意<span 未注册的手机号验证后将自动创建用户账号登录即代表您已同意<span @click="navigateToPrivacy('privacy')"></span>
@click="navigateToPrivacy('privacy')"
>隐私协议</span>
<span @click="navigateToPrivacys('user')"> <span @click="navigateToPrivacys('user')">
用户协议 用户协议
</span> </span>
</div> </div>
</div> </div>
<div <div v-if="current != 1" class="user-password-tips" @click="enableUserPwdBox = !enableUserPwdBox">
v-if="current != 1"
class="user-password-tips"
@click="enableUserPwdBox = !enableUserPwdBox"
>
{{ !enableUserPwdBox ? "帐号密码" : "手机号" }}登录 {{ !enableUserPwdBox ? "帐号密码" : "手机号" }}登录
</div> </div>
<!-- 循环出当前可使用的第三方登录模式 --> <!-- 循环出当前可使用的第三方登录模式 -->
<div class="flex login-list"> <div class="flex login-list">
<div <div v-if="item.code" :style="{ background: item.color }" class="login-item"
v-if="item.code" v-for="(item, index) in loginList" :key="index">
:style="{ background: item.color }" <u-icon v-if="item.title != 'APPLE'" color="#fff" size="42" :name="item.icon"
class="login-item" @click="navigateLogin(item)">
v-for="(item, index) in loginList"
:key="index"
>
<u-icon
v-if="item.title != 'APPLE'"
color="#fff"
size="42"
:name="item.icon"
@click="navigateLogin(item)"
>
</u-icon> </u-icon>
<u-image <u-image v-else src="/static/appleidButton@2x.png" :lazy-load="false" @click="navigateLogin(item)"
v-else width="80" height="80" />
src="/static/appleidButton@2x.png"
:lazy-load="false"
@click="navigateLogin(item)"
width="80"
height="80"
/>
</div> </div>
</div> </div>
<myVerification <myVerification v-if="codeFlag" @send="verification" class="verification" ref="verification"
v-if="codeFlag" business="LOGIN" />
@send="verification"
class="verification"
ref="verification"
business="LOGIN"
/>
</div> </div>
<view v-else> <view v-else>
<wechatH5Login /> <wechatH5Login />
@ -157,21 +82,40 @@
</template> </template>
<script> <script>
import { openIdLogin, loginCallback } from "@/api/connect.js"; import {
openIdLogin,
loginCallback
} from "@/api/connect.js";
import api from "@/config/api.js"; import api from "@/config/api.js";
import { sendMobile, smsLogin, userLogin } from "@/api/login"; import {
sendMobile,
smsLogin,
userLogin
} from "@/api/login";
import myVerification from "@/components/verification/verification.vue"; // import myVerification from "@/components/verification/verification.vue"; //
import uuid from "@/utils/uuid.modified.js"; // uuid import uuid from "@/utils/uuid.modified.js"; // uuid
import verifyCode from "@/components/verify-code/verify-code"; import verifyCode from "@/components/verify-code/verify-code";
import { getUserInfo } from "@/api/members"; import {
import { whetherNavigate } from "@/utils/Foundation"; // getUserInfo
} from "@/api/members";
import {
whetherNavigate
} from "@/utils/Foundation"; //
import storage from "@/utils/storage.js"; // import storage from "@/utils/storage.js"; //
import wechatH5Login from "./wechatH5Login.vue"; import wechatH5Login from "./wechatH5Login.vue";
import { webConnect } from "@/api/connect.js"; import {
import { md5 } from "@/utils/md5.js"; webConnect
} from "@/api/connect.js";
import {
md5
} from "@/utils/md5.js";
export default { export default {
components: { myVerification, verifyCode, wechatH5Login }, components: {
myVerification,
verifyCode,
wechatH5Login
},
data() { data() {
return { return {
@ -185,8 +129,7 @@ export default {
codeColor: "#999", // codeColor: "#999", //
lightColor: this.$lightColor, lightColor: this.$lightColor,
seconds: 60, // seconds: 60, //
loginTitleWay: [ loginTitleWay: [{
{
title: "欢迎登录", title: "欢迎登录",
desc: "登录后更精彩,美好生活即将开始", desc: "登录后更精彩,美好生活即将开始",
}, },
@ -422,11 +365,11 @@ export default {
storage.setUserInfo(user.data.result); storage.setUserInfo(user.data.result);
storage.setHasLogin(true); storage.setHasLogin(true);
}); });
getCurrentPages().length > 1 getCurrentPages().length > 1 ?
? uni.navigateBack({ uni.navigateBack({
delta: getCurrentPages().length - 2, delta: getCurrentPages().length - 2,
}) }) :
: uni.switchTab({ uni.switchTab({
url: "/pages/tabbar/home/index", url: "/pages/tabbar/home/index",
}); });
} }
@ -536,7 +479,9 @@ export default {
*/ */
storage.setUserInfo(user.data.result); storage.setUserInfo(user.data.result);
storage.setHasLogin(true); storage.setHasLogin(true);
uni.switchTab({
url: "/pages/tabbar/home/index",
});
/** /**
* 计算出当前router路径 * 计算出当前router路径
* 1.如果跳转的链接为登录页面或跳转的链接为空页面则会重新跳转到首页 * 1.如果跳转的链接为登录页面或跳转的链接为空页面则会重新跳转到首页
@ -591,7 +536,10 @@ export default {
/** /**
* 执行登录 * 执行登录
*/ */
smsLogin({ mobile: this.mobile, code: this.code }, this.clientType).then( smsLogin({
mobile: this.mobile,
code: this.code
}, this.clientType).then(
(res) => { (res) => {
this.getUserInfoMethods(res); this.getUserInfoMethods(res);
} }
@ -773,6 +721,7 @@ page {
.wrapper { .wrapper {
padding: 0 80rpx; padding: 0 80rpx;
} }
.title { .title {
padding-top: calc(104rpx); padding-top: calc(104rpx);
font-style: normal; font-style: normal;
@ -781,9 +730,11 @@ page {
font-size: 56rpx; font-size: 56rpx;
color: #333; color: #333;
} }
.box-code { .box-code {
margin-top: 78rpx; margin-top: 78rpx;
} }
.desc, .desc,
.desc-light { .desc-light {
font-size: 32rpx; font-size: 32rpx;
@ -791,25 +742,32 @@ page {
color: #333333; color: #333333;
margin-top: 40rpx; margin-top: 40rpx;
} }
.desc { .desc {
color: #333; color: #333;
} }
.desc-light { .desc-light {
color: #999999; color: #999999;
>span { >span {
color: #333; color: #333;
margin-left: 8rpx; margin-left: 8rpx;
} }
} }
.mobile { .mobile {
margin-top: 80rpx; margin-top: 80rpx;
} }
.disable { .disable {
background: linear-gradient(90deg, #ffdcba 2.21%, #ffcfb2 99.86%); background: linear-gradient(90deg, #ffdcba 2.21%, #ffcfb2 99.86%);
} }
.fetch { .fetch {
background: linear-gradient(57.72deg, #ff8a19 18.14%, #ff5e00 98.44%); background: linear-gradient(57.72deg, #ff8a19 18.14%, #ff5e00 98.44%);
} }
.btn { .btn {
border-radius: 100px; border-radius: 100px;
width: 590rpx; width: 590rpx;
@ -820,15 +778,18 @@ page {
text-align: center; text-align: center;
color: #ffffff; color: #ffffff;
} }
.tips { .tips {
font-size: 12px; font-size: 12px;
line-height: 20px; line-height: 20px;
margin-top: 32rpx; margin-top: 32rpx;
width: 546rpx; width: 546rpx;
>span { >span {
color: $light-color; color: $light-color;
} }
} }
.fetch-btn { .fetch-btn {
width: 370rpx; width: 370rpx;
height: 80rpx; height: 80rpx;

28
project.config.json Normal file
View File

@ -0,0 +1,28 @@
{
"appid": "wx98ebde1da5b340d4",
"compileType": "miniprogram",
"libVersion": "2.27.0",
"packOptions": {
"ignore": [],
"include": []
},
"setting": {
"coverView": true,
"es6": true,
"postcss": true,
"minified": true,
"enhance": true,
"showShadowRootInWxmlPanel": true,
"packNpmRelationList": [],
"babelSetting": {
"ignore": [],
"disablePlugins": [],
"outputPath": ""
}
},
"condition": {},
"editorSetting": {
"tabIndent": "insertSpaces",
"tabSize": 2
}
}

View File

@ -0,0 +1,7 @@
{
"description": "项目私有配置文件。此文件中的内容将覆盖 project.config.json 中的相同字段。项目的改动优先同步到此文件中。详见文档https://developers.weixin.qq.com/miniprogram/dev/devtools/projectconfig.html",
"projectname": "lilishop-uniapp",
"setting": {
"compileHotReLoad": true
}
}