453530270@qq.com
3 years ago
4 changed files with 266 additions and 17 deletions
@ -0,0 +1,239 @@ |
|||
<template> |
|||
<view class="login"> |
|||
<view class="titzone"> |
|||
<view class="title">你好，欢迎使用</view> |
|||
<view class="subtitle">国家文化专网网络注册登录系统</view> |
|||
</view> |
|||
|
|||
<!-- 表单 --> |
|||
<view class="login-form"> |
|||
<!-- 手机号 --> |
|||
<view class="form-item"> |
|||
<view class="form-item--parts"> |
|||
<view class="gjcode"> |
|||
<select> |
|||
<option class="">+86</option> |
|||
</select> |
|||
</view> |
|||
</view> |
|||
<input class="form-item--input" type="number" v-model="mobile" maxlength="11" placeholder="请输入手机号码" /> |
|||
</view> |
|||
<view class="tips">未注册的手机号验证后自动创建账户</view> |
|||
|
|||
<!-- 登录按钮 --> |
|||
<view class="login-button" @click="handleLogin"> |
|||
<text>登录</text> |
|||
</view> |
|||
</view> |
|||
<view class="tips"> |
|||
登录即表明同意《用户协议》和《隐私政策》 |
|||
</view> |
|||
|
|||
<!-- 密码登录 --> |
|||
<view class="vfcode">密码登录</view> |
|||
|
|||
<!-- logo --> |
|||
<view class="vbottom"> |
|||
<view class="imagezone"> |
|||
<image mode="heightFix" style="height: 72rpx;" src="../../static/wjslogo.png"/>X |
|||
<image mode="heightFix" style="height: 72rpx;" src="../../static/ccde.png"/> |
|||
</view> |
|||
<view class="txtzone"> |
|||
数据集成系统服务商：百链数据科技（深圳）有限公司 |
|||
</view> |
|||
|
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
|
|||
|
|||
export default { |
|||
components: { |
|||
// nothing |
|||
}, |
|||
|
|||
data() { |
|||
return { |
|||
// 数据加载完成 [防止在微信小程序端onLoad和view渲染同步进行] |
|||
isLoad: false, |
|||
// 手机号 |
|||
mobile: '', |
|||
// 密码 |
|||
vpass:"", |
|||
} |
|||
}, |
|||
|
|||
/** |
|||
* 生命周期函数--监听页面加载 |
|||
*/ |
|||
async onLoad(options) { |
|||
console.log('login onLoad') |
|||
// 设置当前是否显示微信小程序授权登录 |
|||
// await this.setShowUserInfo() |
|||
// 数据加载完成 |
|||
this.isLoad = true |
|||
console.log('isLoad', true) |
|||
}, |
|||
|
|||
methods: { |
|||
|
|||
// 点击登录 |
|||
handleLogin() { |
|||
const app = this |
|||
if (!app.isLoading && app.formValidation(SUBMIT_LOGIN)) { |
|||
app.submitLogin() |
|||
} |
|||
}, |
|||
|
|||
/** |
|||
* 设置当前是否显示微信小程序授权登录 |
|||
* - 条件1: 只有微信小程序才显示获取用户信息按钮 |
|||
* - 条件2: 后台设置是否已开启该选项 [后台-客户端-注册设置] |
|||
*/ |
|||
async setShowUserInfo() { |
|||
console.log('setShowUserInfo start') |
|||
const app = this |
|||
// 判断当前客户端是微信小程序, 并且支持getUserProfile接口 |
|||
const isMpWeixin = app.platform === 'MP-WEIXIN' && wx.canIUse('getUserProfile') |
|||
|
|||
// 获取后台设置 |
|||
await SettingModel.item(SettingKeyEnum.REGISTER.value, false) |
|||
.then(setting => { |
|||
app.isMpWeixinAuth = isMpWeixin && setting.isOauthMpweixin |
|||
console.log('setShowUserInfo complete') |
|||
}) |
|||
}, |
|||
|
|||
// 获取到用户信息的回调函数 |
|||
onGetUserInfoSuccess({ oauth, code, userInfo }) { |
|||
// 记录第三方用户信息数据 |
|||
this.partyData = { oauth, code, userInfo } |
|||
// 显示注册页面 |
|||
this.onShowRegister() |
|||
}, |
|||
|
|||
// 显示注册页面 |
|||
onShowRegister() { |
|||
// 是否显示微信小程序授权登录 |
|||
this.isMpWeixinAuth = false |
|||
// 已获取到了第三方用户信息 |
|||
this.isParty = true |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.login{ |
|||
position: relative; |
|||
min-height: 100vh; |
|||
} |
|||
.titzone{ |
|||
padding: 3.2rem; |
|||
font-size: 32rpx; |
|||
|
|||
.title{ |
|||
display: flex; |
|||
font-size: 40rpx; |
|||
font-weight: 600; |
|||
line-height: 1.4; |
|||
} |
|||
.subtitle{ |
|||
line-height: 1.6; |
|||
} |
|||
} |
|||
// 输入框元素 |
|||
.form-item { |
|||
display: flex; |
|||
padding: 18rpx; |
|||
border-bottom: 1rpx solid #f3f1f2; |
|||
margin-bottom: 30rpx; |
|||
height: 126rpx; |
|||
|
|||
&--input { |
|||
font-size: 28rpx; |
|||
letter-spacing: 1rpx; |
|||
flex: 1; |
|||
padding-left: 12rpx; |
|||
height: 100%; |
|||
background-color: #F8F8F8; |
|||
} |
|||
|
|||
&--parts { |
|||
min-width: 100rpx; |
|||
height: 100%; |
|||
} |
|||
// 国家代码选择 |
|||
.gjcode{ |
|||
width: 66rpx; |
|||
height: 100%; |
|||
|
|||
select{ |
|||
font-size: 32rpx; |
|||
border: none; |
|||
padding: 6rpx; |
|||
margin-right: 22rpx; |
|||
height: 100%; |
|||
background-color: #F8F8F8; |
|||
} |
|||
} |
|||
|
|||
} |
|||
|
|||
// 登录按钮 |
|||
.login-button { |
|||
width: 90%; |
|||
|
|||
margin-left: auto; |
|||
margin-right: auto; |
|||
height: 86rpx; |
|||
margin-top: 80rpx; |
|||
background: linear-gradient(to right, #034373, #034373); |
|||
color: #fff; |
|||
|
|||
box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.1); |
|||
letter-spacing: 5rpx; |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
} |
|||
// |
|||
.tips{ |
|||
padding:12rpx; |
|||
color:#999; |
|||
margin-left: 26rpx; |
|||
} |
|||
//vfcode |
|||
.vfcode{ |
|||
margin-left: 32rpx; |
|||
} |
|||
.vbottom{ |
|||
position: absolute; |
|||
width: 100%; |
|||
height: 72rpx; |
|||
// margin-top: 272rpx; |
|||
left: 12rpx; |
|||
bottom: 12%; |
|||
left: 2%; |
|||
|
|||
.imagezone{ |
|||
display: flex; |
|||
line-height: 72rpx; |
|||
padding: 10rpx; |
|||
|
|||
img{ |
|||
margin-left: 32rpx; |
|||
} |
|||
} |
|||
|
|||
.txtzone{ |
|||
margin-top: 12rpx; |
|||
font-size: 26rpx; |
|||
color: #999; |
|||
padding-left: 32rpx; |
|||
} |
|||
|
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue