Skip to content

杨炀 / ztx_wx_admin

Go to a project
Toggle navigation
Toggle navigation pinning
8e4243b3 by 杨炀
Options

Merge commit '636d78e7'

2 parents 0983d505 636d78e7
Inline Side-by-side
Showing 2 changed files with 400 additions and 136 deletions
common/login.js
......@@ -256,7 +256,15 @@ function getInfo() {
app.globalData.userInfo = user
})
}
// 团队会员用户注册接口
function groupMemberRegister(data) {
return request({
url: '/groupMemberRegister',
method: 'post',
params: data
})
}
export {
getNowOpenId,
......@@ -271,5 +279,6 @@ export {
getSmsCode,
h5Login,
h5LoginAuto,
loginByPhone
loginByPhone,
groupMemberRegister
}
......
pages/index/register.vue
<template>
<view>
<view class="page-bg">
<image class="ren1" src="@/static/login/ren1.png"/>
<!-- 登录 -->
<view class="retop">
<image class="logotop" src="@/static/login/logo@2x.png"></image>
<view class="loginbox">
<template>
<view>
<view class="page-bg">
<image class="ren1" src="@/static/login/ren1.png" />
<!-- 登录 -->
<view class="retop">
<image class="logotop" src="@/static/login/logo@2x.png"></image>
<view class="loginbox">
<view class="formbox">
<view class="nav active">团体会员注册</view>
<form>
<view class="round-input-item">
<image class="icon" src="@/static/login/tag01@2x.png"></image>
<uni-easyinput v-model="registerForm.telNo" placeholder="请输入手机号" />
</view>
<view class="round-input-item">
<image class="icon" src="@/static/login/tag02@2x.png"></image>
<uni-easyinput v-model="registerForm.password" placeholder="密码" />
</view>
<view class="round-input-item">
<image class="icon" src="@/static/login/tag02@2x.png"></image>
<uni-easyinput v-model="registerForm.password2" placeholder="确认密码" />
</view>
<view class="round-input-item">
<image class="icon" src="@/static/login/tag02@2x.png"></image>
<uni-easyinput placeholder="图形验证码" v-model="registerForm.captcha" />
<image :src="codeUrl" @click="getCode" />
</view>
<view class="round-input-item">
<image class="icon" src="@/static/login/tag04@2x.png"></image>
<uni-easyinput placeholder="短信验证码" v-model="registerForm.code" />
<text v-if="!countDown.start" @click="getCaptchaSms">获取验证码</text>
<uni-countdown v-if="countDown.start" color="#014A9F" :show-day="false"
:show-hour="false" :show-min="false" @timeup="timeup" :start="countDown.start"
:second="countDown.second"></uni-countdown>
</view>
</form>
<view class="center-item">
<button @click="register" class="btn-red">注册会员</button>
</view>
<view class="center-item" @click="goLogin">
<text class="text-red">已有账号，去登录</text>
</view>
</view>
</view>
</view>
<image class="ren2" src="@/static/login/ren2.png" />
<view class="fixedagree">
<!-- <image @click="changeAgree(agree)" v-if="agree" src="@/static/login/xz_dwn@2x.png"></image>
<image v-else src="@/static/login/xz2@2x.png"></image>
<view>登录即代表您同意<text>《用户协议》</text><text>《隐私策略》</text></view> -->
</view>
</view>
</view>
</template>
<script setup>
import {
ref,
onMounted
} from 'vue'
import {
getCodeImg,
getSmsCode,
groupMemberRegister
} from '@/common/login.js'
const agree = ref(false)
const codeUrl = ref(null)
const registerForm = ref({
telNo: null,
password: null,
password2: null,
code: null,
uuid: null,
captcha: null
})
const countDown = ref({
start: false,
second: 60
})
<view class="formbox">
<view class="nav active">团体会员注册</view>
<form>
<view class="round-input-item">
<image class="icon" src="@/static/login/tag01@2x.png"></image>
<input placeholder="请输入手机号"/>
</view>
<view class="round-input-item">
<image class="icon" src="@/static/login/tag02@2x.png"></image>
<input placeholder="密码"/>
</view>
<view class="round-input-item">
<image class="icon" src="@/static/login/tag02@2x.png"></image>
<input placeholder="确认密码"/>
</view>
<view class="round-input-item">
<image class="icon" src="@/static/login/tag02@2x.png"></image>
<input placeholder="图形验证码"/>
<image/>
</view>
<view class="round-input-item">
<image class="icon" src="@/static/login/tag04@2x.png"></image>
<input placeholder="短信验证码"/>
<text>获取验证码</text>
</view>
</form>
<view class="center-item">
<button @click="login" class="btn-red">注册会员</button>
</view>
<view class="center-item" @click="goLogin">
<text class="text-red">已有账号，去登录</text>
</view>
</view>
</view>
</view>
<image class="ren2" src="@/static/login/ren2.png"/>
<view class="fixedagree">
<image @click="changeAgree(agree)" v-if="agree" src="@/static/login/xz_dwn@2x.png"></image>
<image v-else src="@/static/login/xz2@2x.png"></image>
<view>登录即代表您同意<text>《用户协议》</text><text>《隐私策略》</text></view>
</view>
</view>
</view>
</template>
<script setup>
import { ref } from 'vue'
const agree = ref(false)
function changeAgree(item){
item = !item
}
function login(){
let path = '/pages/index/index';
uni.navigateTo({
url: path
});
}
function goLogin(){
let path = '/pages/index/login';
uni.navigateTo({
url: path
});
}
</script>
<style scoped lang="scss">
.logotop{width: 510rpx;height: 215rpx;margin:5vh auto 40rpx;display: block;}
.ren1{width: 300rpx;height: 560rpx;position: absolute;right: 0;top: 0;}
.ren2{width: 456rpx;height:600rpx;position: relative;top: 20rpx;}
.retop{position: relative;z-index: 1;}
.page-bg{background: url('@/static/login/bg.png') no-repeat center;
background-size: cover;
height: 100vh;overflow: hidden;position: relative;
}
.loginbox{
.loginNav{width: 700rpx;margin:0 auto -53rpx;height: 133rpx;overflow: hidden;position: relative;
view{text-align: center;height: 133rpx;box-sizing: border-box;padding: 26rpx 0 0;}
.n1{background: url('@/static/login/tab1.png') no-repeat top left;background-size:contain;opacity: 0.7;
width: 407rpx;position: absolute;left: 0;}
.n2{background: url('@/static/login/tab2.png') no-repeat top right;background-size:contain;opacity: 0.7;
width: 399rpx;position: absolute;right: 0;}
.active{color: #AD181F;opacity: 1;
&::after{content: '';position: absolute;width: 25rpx;height: 4rpx;background: #AD181F;border-radius: 2rpx;
left: 0;right: 0;margin: auto;bottom: 50rpx;
}
}
}
}
.formbox{background: #fff;width: 700rpx;padding: 50rpx;margin: auto;border-radius: 20rpx;}
.flex-item{display: flex;justify-content: space-between;margin:30rpx 0;
font-size: 28rpx;
image{width: 30rpx;height: 30rpx;margin-right:16rpx;}
}
.member{color: #4C5359;display: flex;align-items: center;}
.center-item{text-align: center;margin: 30rpx 0 0;font-size: 30rpx;
.btn-red{border-radius: 40rpx;width: 600rpx;line-height: 80rpx;font-size: 36rpx;}
}
.btn-red{background: #AD181F;color: #fff;}
.text-red{color: #AD181F;}
.round-input-item{overflow: hidden;background: RGBA(247, 247, 248, 1);border-radius: 40rpx;
padding: 0 0 0 30rpx;
height: 80rpx;margin-bottom: 30rpx;display: flex;align-items: center;
image{width: 180rpx;height: 80rpx;
&.icon{width: 30rpx;height: 30rpx;margin-right:16rpx;}
}
input{border-left: 1rpx solid RGBA(214, 216, 219, 1);padding: 0 0 0 20rpx;font-size: 30rpx;
}
input::-webkit-input-placeholder{color:RGBA(158, 166, 174, 1);font-size: 30rpx;}
input::placeholder{color:RGBA(158, 166, 174, 1);font-size: 30rpx;}
input::-moz-placeholder{color:RGBA(158, 166, 174, 1);font-size: 30rpx;}
text{font-size: 28rpx;color: #014A9F;}
}
.fixedagree{position: fixed;bottom: 5vh;color: rgba(255, 255, 255, 0.7);display: flex;
font-size: 24rpx;width: 100vw;justify-content: center;
image{width: 40rpx;height: 40rpx;margin-right: 20rpx;}
}
</style>
onMounted(() => {
getCode()
})
function changeAgree(item) {
item = !item
}
function register() {
if (!registerForm.value.telNo) {
uni.showToast({
title: '手机号不能为空',
icon: 'none'
})
return
}
if (!registerForm.value.password || !registerForm.value.password2) {
uni.showToast({
title: '密码不能为空',
icon: 'none'
})
return
}
if (registerForm.value.password != registerForm.value.password2) {
uni.showToast({
title: '两次密码不一致，请重新输入',
icon: 'none'
})
return
}
if (!form.value.code) {
uni.showToast({
title: '验证码不能为空',
icon: 'none'
})
return
}
groupMemberRegister(registerForm.value)
.then((res) => {
uni.showToast({
title: `恭喜你，您的账号 ${registerForm.value.telNo} 注册成功！`
})
registerForm.value = {}
setTimeout(goLogin, 2000)
})
}
function goLogin() {
let path = '/pages/index/login';
uni.navigateTo({
url: path
});
}
function getCode() {
getCodeImg().then((res) => {
codeUrl.value = 'data:image/gif;base64,' + res.data.img
registerForm.value.uuid = res.data.uuid
})
}
// 发送短信验证码
function getCaptchaSms() {
if (!registerForm.value.telNo) {
uni.showToast({
title: '手机号不能为空',
icon: 'none'
})
return
}
if (!registerForm.value.captcha) {
uni.showToast({
title: '图形验证码不能为空',
icon: 'none'
})
return
}
getSmsCode({
uuid: registerForm.value.uuid,
telNo: registerForm.value.telNo,
code: registerForm.value.captcha
}).then(res => {
uni.showToast({
title: '短信验证码下发成功',
icon: 'none'
})
countDown.value.start = true
}).catch(getCode)
}
function timeup() {
countDown.value.start = false
countDown.value.second = 60
getCode()
}
</script>
<style scoped lang="scss">
.logotop {
width: 510rpx;
height: 215rpx;
margin: 5vh auto 40rpx;
display: block;
}
.ren1 {
width: 300rpx;
height: 560rpx;
position: absolute;
right: 0;
top: 0;
}
.ren2 {
width: 456rpx;
height: 600rpx;
position: relative;
top: 20rpx;
}
.retop {
position: relative;
z-index: 1;
}
.page-bg {
background: url('@/static/login/bg.png') no-repeat center;
background-size: cover;
height: 100vh;
overflow: hidden;
position: relative;
}
.loginbox {
.loginNav {
width: 700rpx;
margin: 0 auto -53rpx;
height: 133rpx;
overflow: hidden;
position: relative;
view {
text-align: center;
height: 133rpx;
box-sizing: border-box;
padding: 26rpx 0 0;
}
.n1 {
background: url('@/static/login/tab1.png') no-repeat top left;
background-size: contain;
opacity: 0.7;
width: 407rpx;
position: absolute;
left: 0;
}
.n2 {
background: url('@/static/login/tab2.png') no-repeat top right;
background-size: contain;
opacity: 0.7;
width: 399rpx;
position: absolute;
right: 0;
}
.active {
color: #AD181F;
opacity: 1;
&::after {
content: '';
position: absolute;
width: 25rpx;
height: 4rpx;
background: #AD181F;
border-radius: 2rpx;
left: 0;
right: 0;
margin: auto;
bottom: 50rpx;
}
}
}
}
.formbox {
background: #fff;
width: 700rpx;
padding: 50rpx;
margin: auto;
border-radius: 20rpx;
}
.flex-item {
display: flex;
justify-content: space-between;
margin: 30rpx 0;
font-size: 28rpx;
image {
width: 30rpx;
height: 30rpx;
margin-right: 16rpx;
}
}
.member {
color: #4C5359;
display: flex;
align-items: center;
}
.center-item {
text-align: center;
margin: 30rpx 0 0;
font-size: 30rpx;
.btn-red {
border-radius: 40rpx;
width: 600rpx;
line-height: 80rpx;
font-size: 36rpx;
}
}
.btn-red {
background: #AD181F;
color: #fff;
}
.text-red {
color: #AD181F;
}
.round-input-item {
overflow: hidden;
background: RGBA(247, 247, 248, 1);
border-radius: 40rpx;
padding: 0 0 0 30rpx;
height: 80rpx;
margin-bottom: 30rpx;
display: flex;
align-items: center;
image {
width: 180rpx;
height: 80rpx;
&.icon {
width: 30rpx;
height: 30rpx;
margin-right: 16rpx;
}
}
input {
border-left: 1rpx solid RGBA(214, 216, 219, 1);
padding: 0 0 0 20rpx;
font-size: 30rpx;
}
input::-webkit-input-placeholder {
color: RGBA(158, 166, 174, 1);
font-size: 30rpx;
}
input::placeholder {
color: RGBA(158, 166, 174, 1);
font-size: 30rpx;
}
input::-moz-placeholder {
color: RGBA(158, 166, 174, 1);
font-size: 30rpx;
}
text {
font-size: 28rpx;
color: #014A9F;
}
}
.fixedagree {
position: fixed;
bottom: 5vh;
color: rgba(255, 255, 255, 0.7);
display: flex;
font-size: 24rpx;
width: 100vw;
justify-content: center;
image {
width: 40rpx;
height: 40rpx;
margin-right: 20rpx;
}
}
</style>
\ No newline at end of file
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!