448 lines
9.6 KiB
Vue
448 lines
9.6 KiB
Vue
<template>
|
|
<view class="main">
|
|
<view class="title">
|
|
{{ '会员登录' }}
|
|
</view>
|
|
<u-form :model="loginForm" labelWidth="auto" ref="uForm">
|
|
<view class="view-class pa">
|
|
<!-- <view class="account-s">
|
|
|
|
</view> -->
|
|
<u-form-item label="" prop="username">
|
|
<u-input
|
|
v-model="loginForm.username"
|
|
clearable
|
|
placeholder-class="place-class"
|
|
class="border-color"
|
|
:placeholder="'会员账号'"
|
|
>
|
|
<image
|
|
class="tou"
|
|
slot="prefix"
|
|
src="../../static/images/login/index-icon4.png"
|
|
></image>
|
|
</u-input>
|
|
</u-form-item>
|
|
<!-- <view class="close-s"
|
|
v-if="loginForm.username!=''"
|
|
@click="clearAccount">
|
|
<image src="../../static/images/login/index-icon3.png"></image>
|
|
</view> -->
|
|
</view>
|
|
<view class="view-class">
|
|
<!-- <view class="account-s widths">
|
|
<image src="../../static/images/login/index-icon2.png"></image>
|
|
</view> -->
|
|
<u-form-item label="" prop="password">
|
|
<u-input
|
|
placeholder-style="color:#333"
|
|
:type="password"
|
|
class="border-color"
|
|
v-model="loginForm.password"
|
|
:placeholder="'登录密码'"
|
|
>
|
|
<image
|
|
class="mm"
|
|
slot="prefix"
|
|
src="../../static/images/login/index-icon2.png"
|
|
></image>
|
|
<view slot="suffix">
|
|
<view
|
|
v-if="password == 'text'"
|
|
@click="changeFlagTap('password')"
|
|
>
|
|
<image
|
|
class="eye"
|
|
src="../../static/images/login/icon1.png"
|
|
></image>
|
|
</view>
|
|
<view v-else @click="changeFlagTap('text')">
|
|
<image
|
|
class="eye"
|
|
src="../../static/images/login/icon2.png"
|
|
></image>
|
|
</view>
|
|
</view>
|
|
</u-input>
|
|
</u-form-item>
|
|
</view>
|
|
<view class="view-class">
|
|
<!-- <view class="account-s yzm">
|
|
<image src="../../static/images/login/index-icon1.png"></image>
|
|
</view> -->
|
|
<u-form-item label="" prop="code">
|
|
<u-input
|
|
v-model="loginForm.code"
|
|
placeholder-class="place-class"
|
|
class="border-color"
|
|
:placeholder="'验证码'"
|
|
>
|
|
<image
|
|
class="mm"
|
|
slot="prefix"
|
|
src="../../static/images/login/index-icon1.png"
|
|
></image>
|
|
<img
|
|
:src="codeUrl"
|
|
slot="suffix"
|
|
style="height: 38px"
|
|
@click="getVerifyCode"
|
|
/>
|
|
</u-input>
|
|
</u-form-item>
|
|
</view>
|
|
</u-form>
|
|
<u-button
|
|
type="success"
|
|
shape="circle"
|
|
class="btn"
|
|
:loading="isLoading"
|
|
:loadingText="'登录中'"
|
|
@click="toLogin"
|
|
>{{ '登录' }}</u-button
|
|
>
|
|
<view class="paswwrod_btn" @click="submit">{{ '忘记密码' }}</view>
|
|
|
|
<view class="beian-container">
|
|
<div style="height: 25px"></div>
|
|
<div class="beian-content">
|
|
<a
|
|
class="beian-link jicpb"
|
|
href="https://beian.miit.gov.cn/#/Integrated/index"
|
|
target="_blank"
|
|
title="工信部备案查询"
|
|
>
|
|
京ICP备17001692号-8
|
|
</a>
|
|
<span class="beian-separator">|</span>
|
|
<a
|
|
class="beian-link jgawb"
|
|
href="https://beian.mps.gov.cn/#/query/webSearch?code=11022902000496"
|
|
target="_blank"
|
|
title="公安部备案查询"
|
|
>
|
|
京公网安备11022902000496号
|
|
</a>
|
|
</div>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import * as api from '@/config/login.js'
|
|
import { setToken } from '@/config/auth.js'
|
|
import store from '@/store'
|
|
export default {
|
|
data() {
|
|
return {
|
|
password: 'password',
|
|
index: 0,
|
|
getList: [],
|
|
changeFlag: true,
|
|
isLoading: false,
|
|
loginForm: {
|
|
username: '',
|
|
password: '',
|
|
code: '',
|
|
uuid: '',
|
|
},
|
|
codeUrl: '',
|
|
getLanguageList: [],
|
|
}
|
|
},
|
|
onLoad() {
|
|
this.getVerifyCode()
|
|
this.loginForm.username = uni.getStorageSync('username') || ''
|
|
// this.getLanguage()
|
|
},
|
|
methods: {
|
|
changeFlagTap(text) {
|
|
this.password = text
|
|
},
|
|
submit() {
|
|
uni.navigateTo({
|
|
url: '/pages/forgetPassword/index',
|
|
})
|
|
},
|
|
bindPickerChange(e) {
|
|
this.index = e.detail.value
|
|
},
|
|
clearAccount() {
|
|
this.loginForm.username = ''
|
|
},
|
|
getVerifyCode() {
|
|
api.captchaImage().then(res => {
|
|
this.codeUrl = 'data:image/gif;base64,' + res.img
|
|
this.loginForm.uuid = res.uuid
|
|
})
|
|
},
|
|
toLogin() {
|
|
api.login(this.loginForm).then(res => {
|
|
this.isLoading = false
|
|
if (!res) {
|
|
// uni.showToast({
|
|
// title: res.msg,
|
|
// icon: 'none',
|
|
// duration: 1500,
|
|
// })
|
|
this.getVerifyCode()
|
|
} else if (res.code == 500) {
|
|
this.getVerifyCode()
|
|
} else {
|
|
uni.setStorageSync('username', this.loginForm.username)
|
|
setToken(res.data.access_token)
|
|
this.getUseInfo()
|
|
}
|
|
})
|
|
},
|
|
urlToBase64(url) {
|
|
return new Promise((resolve, reject) => {
|
|
uni.request({
|
|
url: url,
|
|
method: 'GET',
|
|
responseType: 'arraybuffer',
|
|
success: res => {},
|
|
fail: err => {
|
|
reject(err)
|
|
},
|
|
})
|
|
})
|
|
},
|
|
getUseInfo() {
|
|
store.dispatch('GetInfo').then(res => {
|
|
uni.switchTab({ url: '/pages/index/index' })
|
|
// 目前强制跳首页
|
|
// if (res.data.loginType == 1) {
|
|
// uni.redirectTo({ url: '/pages/specialMember/index' })
|
|
// } else {
|
|
// if (res.data.registerFans == 0) {
|
|
// uni.redirectTo({ url: '/pages/shareArea/index?specialArea=7' })
|
|
// } else if (res.data.registerShare == 0) {
|
|
// // uni.redirectTo({ url: '/pages/shareArea/haiNdex?specialArea=21 ' })
|
|
// uni.switchTab({ url: '/pages/index/index' })
|
|
// } else {
|
|
// uni.switchTab({ url: '/pages/index/index' })
|
|
// }
|
|
// }
|
|
})
|
|
// api.getInfo().then((res) => {
|
|
// uni.setStorage('User', res.data)
|
|
|
|
// })
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
page,
|
|
body {
|
|
background-color: #fff !important;
|
|
}
|
|
::placeholder {
|
|
color: #333;
|
|
}
|
|
.style-s {
|
|
height: 68rpx;
|
|
margin-left: 40rpx !important;
|
|
color: #333;
|
|
font-size: 28rpx;
|
|
border: none !important;
|
|
|
|
outline: none;
|
|
-webkit-appearance: button;
|
|
-webkit-appearance: none;
|
|
border-radius: 0;
|
|
background: none;
|
|
border: none;
|
|
}
|
|
.select-text {
|
|
display: flex;
|
|
}
|
|
.selIcon {
|
|
width: 40rpx;
|
|
height: 40rpx;
|
|
}
|
|
.changeLanguages {
|
|
position: absolute;
|
|
right: 30rpx;
|
|
top: 0;
|
|
}
|
|
.paswwrod_btn {
|
|
color: #666666;
|
|
font-size: 26rpx;
|
|
margin: 40rpx auto;
|
|
text-align: center;
|
|
}
|
|
.btn {
|
|
background-color: #005bac;
|
|
border: none;
|
|
height: 92rpx;
|
|
line-height: 92rpx;
|
|
font-size: 36rpx;
|
|
margin: 110rpx auto 0 auto;
|
|
}
|
|
.close-s {
|
|
position: absolute;
|
|
top: 35rpx;
|
|
right: 40rpx;
|
|
image {
|
|
width: 25rpx;
|
|
height: 25rpx;
|
|
}
|
|
}
|
|
.right-s {
|
|
position: absolute;
|
|
top: 35rpx;
|
|
right: 40rpx;
|
|
image {
|
|
width: 45rpx;
|
|
height: 45rpx;
|
|
}
|
|
}
|
|
.place-class {
|
|
color: #333 !important;
|
|
}
|
|
.border-color {
|
|
background: none;
|
|
width: 100%;
|
|
border: none;
|
|
// margin-left: 30rpx;
|
|
}
|
|
.main {
|
|
padding: 20rpx 40rpx;
|
|
}
|
|
.title {
|
|
font-size: 52rpx;
|
|
font-weight: bold;
|
|
margin: 120rpx auto;
|
|
text-align: center;
|
|
}
|
|
.view-class {
|
|
// display: flex;
|
|
background: #f2f2f2;
|
|
border-radius: 46rpx;
|
|
padding: 0 20rpx;
|
|
// position: relative;
|
|
margin-bottom: 30rpx;
|
|
}
|
|
.widths {
|
|
image {
|
|
width: 28rpx !important;
|
|
}
|
|
}
|
|
.yzm {
|
|
image {
|
|
width: 26rpx !important;
|
|
height: 30rpx !important;
|
|
}
|
|
}
|
|
.account-s {
|
|
display: flex;
|
|
align-items: center;
|
|
// line-height: 50%;
|
|
height: 105rpx;
|
|
position: absolute;
|
|
// top: 38rpx;
|
|
image {
|
|
width: 34rpx;
|
|
height: 34rpx;
|
|
}
|
|
}
|
|
.tou {
|
|
width: 34rpx;
|
|
height: 34rpx;
|
|
}
|
|
.mm {
|
|
width: 34rpx !important;
|
|
height: 34rpx !important;
|
|
}
|
|
.eye {
|
|
width: 45rpx !important;
|
|
height: 45rpx !important;
|
|
padding-top: 10px;
|
|
}
|
|
.pa {
|
|
padding: 7px 20rpx;
|
|
}
|
|
|
|
/* 备案容器 */
|
|
.beian-container {
|
|
background-color: #ffffff; /* 深色背景 */
|
|
padding: 16px 0;
|
|
text-align: center;
|
|
font-size: 12px;
|
|
line-height: 1.5;
|
|
margin-top: 20px;
|
|
border-radius: 8px 8px 0 0;
|
|
}
|
|
|
|
/* 备案内容 */
|
|
.beian-content {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
gap: 12px;
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
padding: 0 16px;
|
|
}
|
|
|
|
/* 备案链接 */
|
|
.beian-link {
|
|
color: #749ae3;
|
|
text-decoration: none;
|
|
padding: 4px 8px;
|
|
border-radius: 4px;
|
|
transition: all 0.3s ease;
|
|
display: inline-block;
|
|
}
|
|
|
|
/* 悬停效果 */
|
|
.beian-link:hover {
|
|
color: #fff;
|
|
background-color: rgba(116, 154, 227, 0.2);
|
|
transform: translateY(-1px);
|
|
box-shadow: 0 2px 8px rgba(116, 154, 227, 0.3);
|
|
}
|
|
|
|
/* 分隔符 */
|
|
.beian-separator {
|
|
color: #749ae3;
|
|
opacity: 0.6;
|
|
}
|
|
|
|
/* 响应式设计 */
|
|
@media screen and (max-width: 480px) {
|
|
.beian-content {
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
}
|
|
|
|
.beian-separator {
|
|
display: none;
|
|
}
|
|
|
|
.beian-link {
|
|
font-size: 11px;
|
|
}
|
|
}
|
|
|
|
/* 动画效果 */
|
|
@keyframes fadeIn {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(10px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
.beian-container {
|
|
animation: fadeIn 0.5s ease-out;
|
|
}
|
|
</style>
|