gxwebsoft/aishangjia-uniapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

第一次提交

Browse Source
This commit is contained in:
gxwebsoft
2023-08-04 13:14:48 +08:00
commit 1b923e5cff
1030 changed files with 128016 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

456
pages/login/components/main.vue Executable file
View File

@@ -0,0 +1,456 @@
<template>
<view class="container">
<!-- 页面头部 -->
<view class="header">
<!-- <view class="title">
<text>账号登录</text>
</view> -->
<view class="logo">
<image src="https://file.wsdns.cn/20230801/84480e0c65b044ebb869f8f2754bc0b1.png" mode="widthFix"></image>
</view>
<!-- <view class="sub-title">
<text>未注册的手机号登录后将自动注册</text>
</view> -->
</view>
<!-- 表单 -->
<!-- #ifdef H5 -->
<view class="login-form">
<!-- 手机号 -->
<view class="form-item">
<input class="form-item--input" type="text" v-model="mobile" maxlength="20"
placeholder="请输入登录账号|手机号码|邮箱" />
</view>
<view class="form-item">
<input class="form-item--input" type="password" v-model="password" maxlength="30"
placeholder="请输入登录密码" />
</view>
<!-- 图形验证码 -->
<view class="form-item" style="display: none;">
<input class="form-item--input" type="text" v-model="captchaCode" maxlength="5"
placeholder="请输入图形验证码" />
<view class="form-item--parts">
<view class="captcha" @click="getCaptcha()">
<image class="image" :src="captcha.base64"></image>
</view>
</view>
</view>
<!-- 短信验证码 -->
<view class="form-item" style="display: none;">
<input class="form-item--input" type="number" v-model="smsCode" maxlength="6" placeholder="请输入短信验证码" />
<view class="form-item--parts">
<view class="captcha-sms" @click="handelSmsCaptcha()">
<text v-if="!smsState" class="activate">获取验证码</text>
<text v-else class="un-activate">重新发送({{ times }})秒</text>
</view>
</view>
</view>
<!-- 登录按钮 -->
<view class="login-button" @click="handleLogin">
<text>立即登录 找对象</text>
</view>
<view class="agree">
<view class="item">
<radio value="index" :checked="disabled" @click="onRadio" />已阅读并同意以下协议
<view class="xieyi" @click="$push('pages/article/detail/detail?id=114')">《服务协议》</view>
<view class="xieyi" @click="$push('pages/article/detail/detail?id=115')">《隐私政策》</view>
</view>
</view>
<!-- 企业微信授权登录 -->
<!-- <view class="login-button-ww" @click="onWWLogin">
<image src="@/static/login-wx-work.png"></image>
</view> -->
</view>
<!-- #endif -->
<!-- 微信授权手机号一键登录 -->
<!-- #ifdef MP-WEIXIN -->
<MpWeixinMobile :isParty="isParty" :partyData="partyData" />
<!-- #endif -->
<!-- <div id="ww_login" style="width: 100%; height: 100%"></div> -->
</view>
</template>
<script>
import store from '@/store'
import storage from '@/utils/storage'
import {
ACCESS_TOKEN,
USER_ID,
} from '@/store/mutation-types'
import {
appId,
tenantId
} from '@/config.js'
import {
getCaptcha,
login,
sendSmsCaptcha
} from '@/api/login.js'
import * as Verify from '@/utils/verify'
import http from '@/api'
import MpWeixinMobile from './mp-weixin-mobile'
// 倒计时时长(秒)
const times = 60
// 表单验证场景
const GET_CAPTCHA = 10
const SUBMIT_LOGIN = 20
export default {
components: {
MpWeixinMobile
},
props: {
// 是否存在第三方用户信息
isParty: {
type: Boolean,
default: () => false
},
// 第三方用户信息数据
partyData: {
type: Object
}
},
data() {
return {
// 正在加载
isLoading: false,
// 图形验证码信息
captcha: {},
// 短信验证码发送状态
smsState: false,
// 倒计时
times,
// 手机号
mobile: '',
password: '',
// 图形验证码
captchaCode: '',
// 短信验证码
smsCode: '',
disabled: false
}
},
/**
* 生命周期函数--监听页面加载
*/
created() {
// 获取图形验证码
this.getCaptcha()
},
methods: {
openXieyi(url){
console.log("url: ",url);
this.$navTo(url)
},
// 获取图形验证码
getCaptcha() {
const app = this
getCaptcha()
.then(result => app.captcha = result.data)
},
// 点击发送短信验证码
handelSmsCaptcha() {
const app = this
if (!app.isLoading && !app.smsState && app.formValidation(GET_CAPTCHA)) {
app.sendSmsCaptcha()
}
},
// 表单验证
formValidation(scene = GET_CAPTCHA) {
const app = this
// 验证获取短信验证码
if (scene === GET_CAPTCHA) {
if (!app.validteMobile(app.mobile) || !app.validteCaptchaCode(app.captchaCode)) {
return false
}
}
// 验证提交登录
if (scene === SUBMIT_LOGIN) {
if (!app.validteMobile(app.mobile) || !app.validteSmsCode(app.smsCode)) {
return false
}
}
return true
},
// 验证手机号
validteMobile(str) {
if (Verify.isEmpty(str)) {
this.$toast('请先输入手机号')
return false
}
if (!Verify.isMobile(str)) {
// this.$toast('请输入正确格式的手机号')
// return false
}
return true
},
// 验证图形验证码
validteCaptchaCode(str) {
if (Verify.isEmpty(str)) {
this.$toast('请先输入图形验证码')
return false
}
return true
},
// 验证短信验证码
validteSmsCode(str) {
if (Verify.isEmpty(str)) {
// this.$toast('请先输入短信验证码')
// return false
}
return true
},
onRadio(){
this.disabled = !this.disabled
},
// 请求发送短信验证码接口
sendSmsCaptcha() {
const app = this
app.isLoading = true
sendSmsCaptcha({
phone: app.mobile
})
.then(result => {
// 显示发送成功
app.$toast(result.message)
// 执行定时器
app.timer()
})
.catch(() => app.getCaptcha())
.finally(() => app.isLoading = false)
},
// 执行定时器
timer() {
const app = this
app.smsState = true
const inter = setInterval(() => {
app.times = app.times - 1
if (app.times <= 0) {
app.smsState = false
app.times = times
clearInterval(inter)
}
}, 1000)
},
// 点击登录
handleLogin() {
const app = this
if (!app.isLoading && app.formValidation(SUBMIT_LOGIN)) {
app.submitLogin()
}
},
// 确认登录
submitLogin() {
const app = this
app.isLoading = true
console.log("登录: ", '登录');
store.dispatch('Login', {
username: app.mobile,
password: app.password
})
.then(result => {
// 一键登录成功
app.$toast(result.message)
// 跳转回原页面
setTimeout(() => {
uni.reLaunch({
url: '/pages/index/index',
complete(res) {
console.log(res)
}
})
}, 1000)
// // 显示登录成功
// app.$toast(result.message)
// // 跳转回原页面
// uni.redirectTo({
// url: 'pages/user/user'
// })
// setTimeout(() => {
// app.onNavigateBack(1)
// }, 2000)
})
.catch(err => {
// 跳转回原页面
if (err.result.data.isBack) {
setTimeout(() => app.onNavigateBack(1), 2000)
}
})
.finally(() => app.isLoading = false)
},
/**
* 登录成功-跳转回原页面
*/
onNavigateBack(delta = 1) {
const pages = getCurrentPages()
if (pages.length > 1) {
uni.navigateBack({
delta: Number(delta || 1)
})
} else {
this.$navTo('pages/index/index')
}
},
onWWLogin() {
}
}
}
</script>
<style lang="scss" scoped>
.container {
min-height: 80vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
// 页面头部
.header {
margin-bottom: 5rpx;
.title {
color: #191919;
font-size: 54rpx;
}
.sub-title {
margin-top: 20rpx;
color: #b3b3b3;
font-size: 28rpx;
}
}
// 输入框元素
.form-item {
display: flex;
padding: 18rpx;
border-bottom: 1rpx solid #f3f1f2;
margin-bottom: 30rpx;
height: 96rpx;
&--input {
font-size: 28rpx;
letter-spacing: 1rpx;
flex: 1;
height: 100%;
}
&--parts {
min-width: 100rpx;
height: 100%;
}
// 图形验证码
.captcha {
height: 100%;
.image {
display: block;
width: 192rpx;
height: 100%;
}
}
// 短信验证码
.captcha-sms {
font-size: 28rpx;
line-height: 50rpx;
padding-right: 20rpx;
.activate {
color: $main-bg;
}
.un-activate {
color: #9e9e9e;
}
}
}
.logo {
display: flex;
justify-content: center;
width: 180rpx;
height: 180rpx;
overflow: hidden;
border-radius: 20rpx;
margin: auto;
image {
width: 180rpx;
}
}
// 登录按钮
.login-button {
width: 100%;
height: 86rpx;
margin-top: 80rpx;
background: linear-gradient(#ff0077, #4d0d68);
// background: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20version%3D%221.1%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%221%22%20x1%3D%220%22%20x2%3D%221%22%20y1%3D%220%22%20y2%3D%220%22%20gradientTransform%3D%22matrix(6.123233995736766e-17%2C%201%2C%20-0.024693877551020406%2C%206.123233995736766e-17%2C%200.5%2C%200)%22%3E%3Cstop%20stop-color%3D%22%230a060d%22%20stop-opacity%3D%221%22%20offset%3D%220%22%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D%22%23660061%22%20stop-opacity%3D%221%22%20offset%3D%220.95%22%3E%3C%2Fstop%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22url(%231)%22%3E%3C%2Frect%3E%3C%2Fsvg%3E');
color: $main-text;
border-radius: 80rpx;
box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.1);
letter-spacing: 5rpx;
display: flex;
justify-content: center;
align-items: center;
}
.login-button-ww {
margin-top: 80rpx;
display: flex;
justify-content: center;
image {
height: 96rpx;
}
}
.agree{
text-align: center;
width: 750rpx;
color: rgba(75,13,99,1);
.item{
display: flex;
align-items: center;
justify-content: center;
image{
width: 30rpx;
height: 30rpx;
margin-right: 10rpx;
}
.xieyi{
text-decoration:underline;
}
}
}
</style>