168 lines
4.4 KiB
Vue
168 lines
4.4 KiB
Vue
<template>
|
|
<view class="register">
|
|
<view class="content">
|
|
<!-- 头部logo -->
|
|
<view class="header">
|
|
<image :src="logoImage"></image>
|
|
</view>
|
|
<view class="header-title-yuledui-tuiguangren">
|
|
<text>余乐兑商家登录</text>
|
|
</view>
|
|
<!-- 主体 -->
|
|
<view class="main">
|
|
<wInput v-model="phoneData" type="text" maxlength="11" placeholder="手机号"></wInput>
|
|
<wInput v-if="type=='password'" v-model="password" type="password" placeholder="密码"></wInput>
|
|
<wInput v-if="type=='code'" v-model="verCode" type="number" maxlength="6" placeholder="验证码" isShowCode
|
|
ref="runCode" @setCode="getVerCode()"></wInput>
|
|
</view>
|
|
|
|
<wButton class="wbutton" text="登 录" :rotate="isRotate" @click.native="startReg()"></wButton>
|
|
|
|
<!-- 底部信息 -->
|
|
<view class="footer">
|
|
<text @tap="isShowAgree" class="cuIcon" style="font-size:28rpx;"
|
|
:class="showAgree?'cuIcon-radiobox':'cuIcon-round'">同意</text>
|
|
<!-- 协议地址 -->
|
|
<navigator
|
|
url="../web_view/web_view?title=服务协议&url=https%3A//yld.angyakeji.com/html/article/merch_user_agree.html"
|
|
open-type="navigate">《服务协议》</navigator>
|
|
<navigator
|
|
url="../web_view/web_view?title=隐私协议&url=https%3A//yld.angyakeji.com/html/article/merch_service.html"
|
|
open-type="navigate">《隐私协议》</navigator>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import wInput from '../../components/watch-login/watch-input.vue' //input
|
|
import wButton from '../../components/watch-login/watch-button.vue' //button
|
|
export default {
|
|
data() {
|
|
return {
|
|
//logo图片 base64
|
|
logoImage: 'http://yuledui.oss-cn-qingdao.aliyuncs.com/img/logo/merch.png',
|
|
phoneData: '', // 用户/电话
|
|
passData: '', //密码
|
|
verCode: "", //验证码
|
|
showAgree: false, //协议是否选择
|
|
isRotate: false, //是否加载旋转,
|
|
password: '', //登录密码
|
|
type: 'password', //登录模式 code:验证码登录 password 密码登录
|
|
}
|
|
},
|
|
components: {
|
|
wInput,
|
|
wButton,
|
|
},
|
|
methods: {
|
|
change2PasswordLogin() {
|
|
if (this.type == 'code') {
|
|
this.type = 'password'
|
|
this.verCode = ''
|
|
uni.showToast({
|
|
title: '当前密码登录',
|
|
icon: 'none',
|
|
mask: false
|
|
})
|
|
} else {
|
|
this.type = 'code'
|
|
this.password = ''
|
|
uni.showToast({
|
|
title: '当前验证码登录',
|
|
icon: 'none',
|
|
mask: false
|
|
})
|
|
}
|
|
},
|
|
isShowAgree() {
|
|
//是否选择协议
|
|
this.showAgree = !this.showAgree;
|
|
},
|
|
getVerCode() {
|
|
//获取验证码
|
|
if (this.phoneData.length != 11) {
|
|
uni.showToast({
|
|
icon: 'none',
|
|
position: 'bottom',
|
|
title: '手机号不正确'
|
|
})
|
|
return false;
|
|
}
|
|
// 发送验证码
|
|
getApp().globalData.util.request({
|
|
s: 'Merch.User.getSMSCode',
|
|
mobile: this.phoneData
|
|
}).then(res => {
|
|
this.$refs.runCode.$emit('runCode'); //触发倒计时（一般用于请求成功验证码后调用）
|
|
uni.showToast({
|
|
icon: 'none',
|
|
position: 'bottom',
|
|
title: '验证码发送成功'
|
|
});
|
|
|
|
setTimeout(function() {
|
|
this.$refs.runCode.$emit('runCode', 0); //假装模拟下需要 终止倒计时
|
|
}, 1000 * 60)
|
|
});
|
|
},
|
|
startReg() {
|
|
if (!this.showAgree) {
|
|
uni.showModal({
|
|
title: '提示',
|
|
content: '请先阅读并勾选同意服务协议与隐私政策',
|
|
showCancel: true,
|
|
success: ({
|
|
confirm,
|
|
cancel
|
|
}) => {}
|
|
})
|
|
return
|
|
}
|
|
if (this.isRotate) {
|
|
//判断是否加载中，避免重复点击请求
|
|
return false;
|
|
}
|
|
if (this.phoneData.length != 11) {
|
|
uni.showToast({
|
|
icon: 'none',
|
|
position: 'bottom',
|
|
title: '手机号不正确'
|
|
});
|
|
return false;
|
|
}
|
|
if (this.verCode.length != 6 && this.type == 'code') {
|
|
uni.showToast({
|
|
icon: 'none',
|
|
position: 'bottom',
|
|
title: '验证码不正确'
|
|
});
|
|
return false;
|
|
}
|
|
if (!this.password && this.type == 'password') {
|
|
uni.showToast({
|
|
icon: 'none',
|
|
position: 'bottom',
|
|
title: '请输入密码'
|
|
});
|
|
return false;
|
|
}
|
|
|
|
uni.showToast({
|
|
icon: 'success',
|
|
position: 'bottom',
|
|
title: '登录成功',
|
|
duration: 1000
|
|
});
|
|
uni.switchTab({
|
|
url: "/pages/first/index",
|
|
})
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
@import url("../../components/watch-login/css/icon.css");
|
|
@import url("./css/main.css");
|
|
</style> |