zhuce
/
lilishop-uniapp
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge branch 'master' of https://gitee.com/beijing_hongye_huicheng/lilishop-uniapp

master
学习很差啦 2022-10-17 14:27:27 +08:00
parent 6b3b61acb5 1a6951b717
commit b8c61fdabd
3 changed files with 820 additions and 824 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

297
pages/passport/login.vue
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 {
import api from "@/config/api.js"; openIdLogin,
import { sendMobile, smsLogin, userLogin } from "@/api/login"; loginCallback
import myVerification from "@/components/verification/verification.vue"; //验证码模块 } from "@/api/connect.js";
import uuid from "@/utils/uuid.modified.js"; // uuid import api from "@/config/api.js";
import verifyCode from "@/components/verify-code/verify-code"; import {
import { getUserInfo } from "@/api/members"; sendMobile,
import { whetherNavigate } from "@/utils/Foundation"; //登录跳转 smsLogin,
import storage from "@/utils/storage.js"; //缓存 userLogin
import wechatH5Login from "./wechatH5Login.vue"; } from "@/api/login";
import { webConnect } from "@/api/connect.js"; import myVerification from "@/components/verification/verification.vue"; //验证码模块
import { md5 } from "@/utils/md5.js"; import uuid from "@/utils/uuid.modified.js"; // uuid
import verifyCode from "@/components/verify-code/verify-code";
import {
getUserInfo
} from "@/api/members";
import {
whetherNavigate
} from "@/utils/Foundation"; //登录跳转
import storage from "@/utils/storage.js"; //缓存
import wechatH5Login from "./wechatH5Login.vue";
import {
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: "登录后更精彩，美好生活即将开始",
}, },
@ -201,7 +144,7 @@ export default {
}, },
showBack: false, showBack: false,
enableFetchCode: false, enableFetchCode: false,
enableUserBtnColor:false, enableUserBtnColor: false,
enablePrivacy: false, //隐私政策 enablePrivacy: false, //隐私政策
mobile: "", //手机号 mobile: "", //手机号
code: "", //验证码 code: "", //验证码
@ -347,15 +290,15 @@ export default {
current(val) { current(val) {
val ? (this.showBack = true) : (this.showBack = false); val ? (this.showBack = true) : (this.showBack = false);
}, },
userData:{ userData: {
handler(val){ handler(val) {
if(this.userData.username && this.userData.password) { if (this.userData.username && this.userData.password) {
this.enableUserBtnColor = true; this.enableUserBtnColor = true;
}else{ } else {
this.enableUserBtnColor = false; this.enableUserBtnColor = false;
} }
}, },
deep:true, deep: true,
}, },
mobile: { mobile: {
@ -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",
}); });
} }
@ -461,7 +404,7 @@ export default {
// #ifdef MP-ALIPAY // #ifdef MP-ALIPAY
scopes: "auth_user", //支付宝小程序需设置授权类型 scopes: "auth_user", //支付宝小程序需设置授权类型
// #endif // #endif
success: function (res) { success: function(res) {
uni.setStorageSync("type", item.code); uni.setStorageSync("type", item.code);
//微信小程序意外的其它方式直接在storage中写入openid //微信小程序意外的其它方式直接在storage中写入openid
// #ifndef MP-WEIXIN // #ifndef MP-WEIXIN
@ -479,7 +422,7 @@ export default {
//获取用户信息 //获取用户信息
uni.getUserInfo({ uni.getUserInfo({
provider: item.appcode, provider: item.appcode,
success: function (infoRes) { success: function(infoRes) {
//写入用户信息 //写入用户信息
uni.setStorageSync("nickname", infoRes.userInfo.nickName); uni.setStorageSync("nickname", infoRes.userInfo.nickName);
uni.setStorageSync("avatar", infoRes.userInfo.avatarUrl); uni.setStorageSync("avatar", infoRes.userInfo.avatarUrl);
@ -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);
} }
@ -644,9 +592,9 @@ export default {
}); });
console.log(val) console.log(val)
}, },
navigateToPrivacys(val){ navigateToPrivacys(val) {
uni.navigateTo({ uni.navigateTo({
url:"/pages/mine/help/tips?type="+ val, url: "/pages/mine/help/tips?type=" + val,
}) })
}, },
// 点击获取验证码 // 点击获取验证码
@ -762,55 +710,65 @@ export default {
} }
}, },
}, },
}; };
</script> </script>
<style> <style>
page { page {
background: #fff; background: #fff;
} }
</style> </style>
<style lang="scss" scoped> <style lang="scss" scoped>
.wrapper { .wrapper {
padding: 0 80rpx; padding: 0 80rpx;
} }
.title {
.title {
padding-top: calc(104rpx); padding-top: calc(104rpx);
font-style: normal; font-style: normal;
line-height: 1; line-height: 1;
font-weight: 500; font-weight: 500;
font-size: 56rpx; font-size: 56rpx;
color: #333; color: #333;
} }
.box-code {
.box-code {
margin-top: 78rpx; margin-top: 78rpx;
} }
.desc,
.desc-light { .desc,
.desc-light {
font-size: 32rpx; font-size: 32rpx;
line-height: 32rpx; line-height: 32rpx;
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;
margin-top: 97rpx; margin-top: 97rpx;
@ -819,17 +777,20 @@ page {
line-height: 80rpx; line-height: 80rpx;
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;
line-height: 80rpx; line-height: 80rpx;
@ -840,18 +801,18 @@ page {
color: #999; color: #999;
margin: 71rpx auto 0 auto; margin: 71rpx auto 0 auto;
} }
.login-list { .login-list {
display: flex; display: flex;
width: 590rpx; width: 590rpx;
position: absolute; position: absolute;
top: 1200rpx; top: 1200rpx;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
} }
.login-item { .login-item {
width: 80rpx; width: 80rpx;
border-radius: 10rpx; border-radius: 10rpx;
height: 80rpx; height: 80rpx;
@ -860,11 +821,11 @@ page {
align-items: center; align-items: center;
margin: 0 20rpx; margin: 0 20rpx;
} }
.user-password-tips { .user-password-tips {
text-align: center; text-align: center;
color: $main-color; color: $main-color;
margin: 20px 0; margin: 20px 0;
} }
</style> </style>

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
}
}

7
project.private.config.json Normal file
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
}
}