first
This commit is contained in:
234
pageShopLogin/login.vue
Normal file
234
pageShopLogin/login.vue
Normal file
@@ -0,0 +1,234 @@
|
||||
<template>
|
||||
<view class="login-wrapper">
|
||||
|
||||
|
||||
<view class="login-top">
|
||||
<text>欢迎回来，请登录</text>
|
||||
<image style="width: 320rpx; height: 76rpx" />
|
||||
</view>
|
||||
<view class="login-bottom jeepay-form">
|
||||
|
||||
<!-- 不需要label, 需要修改： label-width="0" -->
|
||||
<uni-forms ref="loginFormRef" label-width="0" :model="vdata.formData" :rules="rules">
|
||||
|
||||
<view >
|
||||
<uni-forms-item name="username">
|
||||
<uni-easyinput class='jeepay-easyinput' placeholder="请输入登录名/手机号"
|
||||
v-model="vdata.formData.username" :clearable="false">
|
||||
<template #prefixIcon>
|
||||
<image src="@/static/login/icon-user.svg" class="input-icon" />
|
||||
</template>
|
||||
</uni-easyinput>
|
||||
</uni-forms-item>
|
||||
|
||||
<uni-forms-item name="password">
|
||||
<uni-easyinput class='jeepay-easyinput' :type="vdata.isShowPwd ? 'text' : 'password'"
|
||||
v-model="vdata.formData.password" :clearable="false" placeholder="请输入登录密码">
|
||||
<template #prefixIcon>
|
||||
<image src="@/static/login/icon-pw.svg" class="input-icon" />
|
||||
</template>
|
||||
<template #suffixIcon>
|
||||
<view class='show-tips' @tap="vdata.isShowPwd = !vdata.isShowPwd ">
|
||||
{{ vdata.isShowPwd ? '隐藏' : '显示' }}</view>
|
||||
</template>
|
||||
</uni-easyinput>
|
||||
</uni-forms-item>
|
||||
|
||||
<uni-forms-item v-if="vdata.isShowSafetyCode" name="safetyCode">
|
||||
<uni-easyinput v-model="vdata.formData.safetyCode" type="number" class='jeepay-easyinput'
|
||||
placeholder="请输入安全码" :maxlength="6" :clearable="false">
|
||||
<template #prefixIcon>
|
||||
<image src="@/static/login/icon-pw.svg" class="input-icon" />
|
||||
</template>
|
||||
</uni-easyinput>
|
||||
</uni-forms-item>
|
||||
|
||||
</view>
|
||||
|
||||
|
||||
</uni-forms>
|
||||
|
||||
|
||||
<Button @tap="loginFunc">登录</Button>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script setup>
|
||||
|
||||
import {
|
||||
login
|
||||
} from '@/http/businessApiManger.js';
|
||||
import {
|
||||
ref,
|
||||
reactive,
|
||||
onMounted
|
||||
} from 'vue';
|
||||
import storageManage from '@/commons/utils/storageManage.js'
|
||||
import formUtil from '@/commons/utils/formUtil.js'
|
||||
import go from '@/commons/utils/go.js'
|
||||
const loginFormRef = ref()
|
||||
const envChangeTipsRef = ref()
|
||||
const refAgr = ref()
|
||||
// #ifdef MP-WEIXIN
|
||||
// 控制 音乐播放 和暂停
|
||||
import {
|
||||
getPushStatus
|
||||
} from "@/commons/utils/pushmsg/wxTextToSpeach.js"
|
||||
// #endif
|
||||
const rules = {
|
||||
username: {
|
||||
rules: [formUtil.rules.requiredInputShowToast('用户名')],
|
||||
},
|
||||
password: {
|
||||
rules: [formUtil.rules.requiredInputShowToast('密码')],
|
||||
}
|
||||
}
|
||||
|
||||
const vdata = reactive({
|
||||
isShowPwd: false, // 是否显示密码
|
||||
formData: {
|
||||
username: '', // 账密登录： 用户名
|
||||
password: '', // 账密登录： 密码
|
||||
},
|
||||
|
||||
})
|
||||
|
||||
// uni.request({
|
||||
// url:'/shopApi'+'/login/wx/merchant/login',
|
||||
// method:'POST',
|
||||
// data:{
|
||||
// username: '1',
|
||||
// password: '1',
|
||||
// }
|
||||
// }).then(res=>{
|
||||
// console.log(res);
|
||||
// })
|
||||
|
||||
|
||||
function loginFunc() {
|
||||
|
||||
// 表单验证
|
||||
formUtil.validate(loginFormRef.value).then(() => {
|
||||
|
||||
login(vdata.formData).then((res) => {
|
||||
console.log(res);
|
||||
useStorage.set('token', res.data.token);
|
||||
useStorage.set('userInfo', res.data.user);
|
||||
uni.showToast({
|
||||
title: '登录成功',
|
||||
icon: 'success'
|
||||
});
|
||||
setTimeout(() => {
|
||||
uni.redirectTo({
|
||||
url: '/pages/index/index'
|
||||
});
|
||||
}, 1000);
|
||||
})
|
||||
})
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.login-wrapper {
|
||||
min-height: 100vh;
|
||||
background-color: $v-color-bgrey;
|
||||
|
||||
.login-top {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 376rpx;
|
||||
padding: 176rpx 70rpx 0;
|
||||
box-sizing: border-box;
|
||||
background: url("/static/indexImg/user-bg.svg") center center no-repeat;
|
||||
background-size: cover;
|
||||
|
||||
text:first-child {
|
||||
margin-bottom: 30rpx;
|
||||
font-size: 38rpx;
|
||||
font-weight: 500;
|
||||
color: rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
|
||||
text:last-child {
|
||||
font-size: 50rpx;
|
||||
font-weight: 600;
|
||||
color: #48C0FF;
|
||||
}
|
||||
}
|
||||
|
||||
.login-bottom {
|
||||
height: calc(100vh - 376rpx);
|
||||
padding: 50rpx;
|
||||
box-sizing: border-box;
|
||||
border-radius: 60rpx 60rpx 0 0;
|
||||
background-color: #fff;
|
||||
|
||||
.show-tips {
|
||||
color: rgba(88, 132, 204, 1);
|
||||
font-weight: 400;
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
.agreement-policy {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 30rpx;
|
||||
margin-top: 10rpx;
|
||||
margin-bottom: 50rpx;
|
||||
font-size: 26rpx;
|
||||
color: #8C8C8C;
|
||||
|
||||
.select-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.select-img {
|
||||
width: 46rpx;
|
||||
height: 46rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.agreement,
|
||||
.policy {
|
||||
color: #1D79FD;
|
||||
}
|
||||
}
|
||||
|
||||
.register-box {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 0 30rpx;
|
||||
margin-top: 50rpx;
|
||||
font-size: 26rpx;
|
||||
font-weight: 400;
|
||||
|
||||
.register {
|
||||
text:last-child {
|
||||
color: #1D79FD;
|
||||
}
|
||||
}
|
||||
|
||||
.forget {
|
||||
color: #1D79FD;
|
||||
}
|
||||
}
|
||||
|
||||
.swidth-login {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-top: 212rpx;
|
||||
font-size: 30rpx;
|
||||
font-weight: 400;
|
||||
color: rgba(77, 77, 77, 1);
|
||||
|
||||
image {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user