forked from angelo/web-retail-h5
357 lines
8.5 KiB
Vue
357 lines
8.5 KiB
Vue
<!--
|
||
* @Descripttion:
|
||
* @version:
|
||
* @Author: 王三华
|
||
* @Date: 2023-05-18 14:42:53
|
||
-->
|
||
<template>
|
||
<view class="main">
|
||
<view class="changeLanguages"
|
||
v-if="getLanguageList.length>0">
|
||
<picker :range="getLanguageList"
|
||
:value="index"
|
||
range-key="label"
|
||
@change="bindPickerChange">
|
||
<view class="select-text">
|
||
<view class="texts">{{ getLanguageList[index].label }}</view>
|
||
<view class="">
|
||
<image class="selIcon"
|
||
src="../../static/images/drop-666.png"></image>
|
||
</view>
|
||
</view>
|
||
</picker>
|
||
</view>
|
||
<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>
|
||
</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
|
||
})
|
||
},
|
||
getLanguage() {
|
||
api.getLanguages().then((res) => {
|
||
this.getLanguageList = res.data
|
||
})
|
||
},
|
||
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, res.data.expires_in / 24 / 60)
|
||
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: #fb3024;
|
||
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;
|
||
}
|
||
</style> |