b2894lxlx/jjx-wap-sign-only
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

20261008

Browse Source
This commit is contained in:
b2894lxlx
2026-10-08 18:36:23 +08:00
commit 8a1da677e4
904 changed files with 111327 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/login/login.vue
+251
View File
@@ -0,0 +1,251 @@
<template> <!-- 登录 -->
<view class="wrap pos-r h-100 flex flex-col justify-start items-center" style="background-color: #5199CF">
<u-image src="/static/img/login.jpg" width="750rpx" height="470rpx" mode=""></u-image>
<view class="layout-login card" style="z-index: 10">
<view class="login-title">会员登录</view>
<view class="login-type flex justify-between m-top-30">
<view :class="['type', {red : tabIndex == 1}]" @click="handTab(1)">账号密码登录</view>
<!-- <view :class="['type', {red : tabIndex == 2}]" @click="handTab(2)">短信验证登录</view>-->
</view>
<view class="login-form">
<view class="m-top-30">
<u--input
v-model="form.username"
placeholder="请输入手机号"
prefixIcon="account"
prefixIconStyle="font-size: 26px;color: #909399"
></u--input>
</view>
<view class="m-top-30" v-if="tabIndex == 1">
<u--input
v-model="form.password"
placeholder="请输入密码"
prefixIcon="lock"
type="password"
prefixIconStyle="font-size: 26px;color: #909399"
></u--input>
</view>
<view class="m-top-30" v-if="tabIndex == 2">
<u--input
v-model="form.smsCode"
placeholder="请输入验证码"
prefixIcon="email"
prefixIconStyle="font-size: 26px;color: #909399"
>
<template slot="suffix">
<u-code
ref="uCode"
@change="codeChange"
seconds="20"
changeText="X秒重新获取"
></u-code>
<u-button
@tap="getCode"
:text="tips"
type="success"
size="mini"
color="#db1c2c"
></u-button>
</template>
</u--input>
</view>
<!-- <view class="m-top-30">-->
<!-- <drag-verify ref="dragVerify" :width="280" :isPassing.sync="isPassing"-->
<!-- text="请按住滑块拖动" successText="验证通过"-->
<!-- handlerIcon="el-icon-d-arrow-right" successIcon="el-icon-circle-check">-->
<!-- <i v-show="!isPassing" slot="textBefore" class="el-icon-lock"></i>-->
<!-- </drag-verify>-->
<!-- </view>-->
<view class="m-top-30">
<u-button color="#db1c2c" text="立即登录" @click="handleSubmit"></u-button>
</view>
<view class="flex justify-between m-top-20">
<view class="fg" @click="registerLink">免费注册新账号</view>
<view class="fg" @click="forgetLink">找回密码</view>
</view>
<!-- <view class="m-top-30 p-top-20">-->
<!-- <u-divider text="第三方登录"></u-divider>-->
<!-- </view>-->
<!-- <view class="flex justify-center align-center">-->
<!-- <u-icon name="weixin-circle-fill" color="#05BC04" size="38" @click="wechatLogin"></u-icon>-->
<!-- &lt;!&ndash; <view style="width: 50rpx;"></view>&ndash;&gt;-->
<!-- &lt;!&ndash; <u-icon name="qq-circle-fill" color="#2286EA" size="38"></u-icon>&ndash;&gt;-->
<!-- </view>-->
</view>
</view>
</view>
</template>
<script>
import dragVerify from 'vue-drag-verify2'
export default {
components: {dragVerify},
data() {
return {
tabIndex: 1,
tips: '',
isPassing: false,
form: {
mobile: '',
password: '',
smsCode: '',
username: ''
},
}
},
methods: {
registerLink() {
uni.$u.route('/pages/login/register')
},
forgetLink() {
uni.$u.route('/pages/login/forget')
},
handTab(index) {
this.tabIndex = index
},
codeChange(text) {
this.tips = text;
},
getCode() {
if (this.$refs.uCode.canGetCode) {
// 模拟向后端请求验证码
uni.showLoading({
title: '正在获取验证码'
})
setTimeout(() => {
uni.hideLoading();
// 这里此提示会被this.start()方法中的提示覆盖
uni.$u.toast('验证码已发送');
// 通知验证码组件内部开始倒计时
this.$refs.uCode.start();
}, 2000);
} else {
uni.$u.toast('倒计时结束后再发送');
}
},
handleSubmit() {
// if (!this.isPassing) return this.$message.error('请先完成滑块验证')
let data = {}
const {
username,
password,
mobile,
smsCode
} = this.form
if (this.tabIndex === 1) {
data = {
username,
password,
}
vk.userCenter.login({
loading: false,
data,
success: (data) => {
this.loginSuccess()
}
})
} else {
vk.userCenter.loginBySms({
loading: false,
data: {
mobile: mobile,
code: smsCode,
},
success: (data) => {
this.loginSuccess()
}
}).catch(() => {
// this.$refs.dragVerify.reset()
})
}
},
loginSuccess() {
uni.reLaunch({
url: '/pages/public/sign'
})
},
wechatLogin(){
const redirect_uri = 'https://m.jinjiuxinzg.cn/pages/login/wechat'
const state = `jjx_2`
let url = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx950c88b951cadd52'
url += '&redirect_uri=' + encodeURIComponent(redirect_uri)
url += `&response_type=code&scope=snsapi_userinfo&state=${state}#wechat_redirect`
window.location.href = url
}
},
onLoad() {
},
}
</script>
<style lang="scss">
.login-img {
width: 100%;
height: 330rpx;
}
.layout-login {
margin: 40rpx 30rpx;
padding: 30rpx 30rpx 50rpx;
width: 80%;
.login-title {
font-size: 44rpx;
font-weight: 500;
line-height: 60rpx;
text-align: center;
color: #101010;
}
.login-type {
font-size: 24rpx;
line-height: 36rpx;
color: #8e8e8e;
}
.login-role .role {
position: relative;
margin: 0 50rpx;
padding-left: 60rpx;
font-size: 30rpx;
line-height: 40rpx;
color: #666666;
&:before {
position: absolute;
left: 0;
top: 50%;
z-index: 9;
content: '';
transform: translateY(-50%);
width: 36rpx;
height: 36rpx;
padding: 10rpx;
border: 1px solid #f2f2f2;
border-radius: 50%;
box-sizing: border-box;
background-clip: content-box;
background-color: #ffffff;
}
}
.login-role .active {
color: #A92924;
&:before {
border-color: #A92924;
background-color: #A92924;
}
}
.fg {
font-size: 28rpx;
line-height: 40rpx;
color: #666666;
}
}
</style>