topnuomi
/
xx-worker-applets
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

完成注册登录页面

This commit is contained in:
TOP糯米 2023-02-27 22:32:53 +08:00
parent 05ae78fa3a
commit 4a20d03c7a
6 changed files with 375 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

76
src/components/auth/agreement.vue Normal file
View File

@ -0,0 +1,76 @@
<template>
<view class="component-auth-agreement">
<view @click="changeState">
<widget-check-box :checked="state" />
</view>
<view class="description">
<text class="text">我已阅读并同意</text>
<text class="link">《服务协议》</text>
<text class="link">《隐私政策》</text>
</view>
</view>
</template>
<script>
import WidgetCheckBox from "@/components/widgets/checkbox";
export default {
name: "component-auth-agreement",
data() {
return {
state: false,
};
},
props: {
agree: {
type: Boolean,
default: false,
},
},
components: {
WidgetCheckBox,
},
created() {
this.state = this.agree;
},
mounted() {},
destroyed() {},
methods: {
changeState() {
this.state = !this.state;
this.$emit("change", this.state);
this.$emit("input", this.state);
},
},
};
</script>
<style lang="less" scoped>
.component-auth-agreement {
width: 100%;
display: flex;
justify-content: center;
align-items: flex-start;
line-height: 40rpx;
.icon-box {
.iconfont {
color: #c7c7c7;
font-size: 40rpx;
}
}
.icon-box.active {
.iconfont {
color: #8194f2;
}
}
.description {
font-size: 22rpx;
margin-left: 10rpx;
.text {
color: #333333;
}
.link {
color: #8194f2;
}
}
}
</style>

10
src/components/layout/layout.vue
View File

@ -9,14 +9,12 @@
backgroundColor: headerBackgroundColor,
}"
>
<!-- 首页选择地址 -->
<block v-if="btnType === 'city'">
<view class="page-index-btn change-city" :style="{ height: header.height + 'px' }" @click="changeCity">
<text class="iconfont icon-31dingwei"></text>
<text class="city">成都市</text>
</view>
</block>
<!-- 正常返回按钮 -->
<block v-if="btnType === 'back'">
<view class="page-index-btn back" :style="{ height: header.height + 'px' }" @click="onClick">
<text class="iconfont icon-fanhui"></text>
@ -76,6 +74,10 @@ export default {
type: String,
default: "dark",
},
hasPaddingTop: {
type: Boolean,
default: true,
},
},
computed: {
...mapState({
@ -92,7 +94,9 @@ export default {
this.header.pt = 0;
this.header.height = this.$utils.rpx2px(headerHeight * 2);
// #endif
this.bodyPt = this.header.pt + this.header.height;
if (this.hasPaddingTop) {
this.bodyPt = this.header.pt + this.header.height;
}
},
methods: {
onClick() {

44
src/components/widgets/checkbox.vue Normal file
View File

@ -0,0 +1,44 @@
<template>
<view class="component-widget-checkbox" :class="{ active: checked }" :style="{ fontSize: utils.rpx2px(size) + 'px' }">
<text class="iconfont" :class="[checked ? 'icon-xuanzeyixuanze' : 'icon-xuanzeweixuanze']"></text>
</view>
</template>
<script>
export default {
name: "component-widget-checkbox",
data() {
return {
utils: this.$utils,
};
},
props: {
size: {
type: Number,
default: 40,
},
checked: {
type: Boolean,
default: false,
},
},
components: {},
created() {},
mounted() {},
destroyed() {},
methods: {},
};
</script>
<style lang="less" scoped>
.component-widget-checkbox {
.iconfont {
color: #c7c7c7;
}
}
.component-widget-checkbox.active {
.iconfont {
color: #8194f2;
}
}
</style>

12
src/pages.json
View File

@ -1,5 +1,11 @@
{
"pages": [
{
"path": "pages/auth/auth",
"style": {
"navigationBarTitleText": "登录"
}
},
{
"path": "pages/index/index",
"style": {
@ -7,12 +13,6 @@
"enablePullDownRefresh": true
}
},
{
"path": "pages/auth/auth",
"style": {
"navigationBarTitleText": "登录"
}
},
{
"path": "pages/order/order",
"style": {

246
src/pages/auth/auth.vue
View File

@ -1,24 +1,262 @@
<template>
<app-layout title="登录"> </app-layout>
<app-layout btnType="unset" headerBackgroundColor="unset" :hasPaddingTop="false">
<view class="auth-container">
<view class="page-background-image">
<image class="background-image" :src="backgroundImage" mode="aspectFill" />
</view>
<view class="auth-form">
<view class="select-group">
<view class="select-item" :class="{ active: tabIndex == 0 }" @click="tabIndex = 0">
<text>账号登录</text>
</view>
<view class="select-item" :class="{ active: tabIndex == 1 }" @click="tabIndex = 1">
<text>免费注册</text>
</view>
</view>
<view class="tab-group">
<view class="tab-item" v-show="tabIndex == 0">
<view class="input-item">
<input
class="input"
type="number"
v-model="mobile"
placeholder="请输入手机号"
placeholder-class="placeholder-style-3"
/>
</view>
<view class="input-item">
<input
class="input"
type="password"
v-model="password"
placeholder="请输入6位以上密码 "
placeholder-class="placeholder-style-3"
/>
</view>
<view class="helper">
<text class="forget-password" @click="forgetPassword">忘记密码？</text>
</view>
<view class="form-save-btn" @click="login">
<text>登录</text>
</view>
<view class="bottom-link">
<text>没有账号？</text>
<text class="link" @click="tabIndex = 1">免费注册</text>
</view>
</view>
<view class="tab-item" v-show="tabIndex == 1">
<view class="input-item">
<input
class="input"
type="number"
v-model="mobile"
placeholder="请输入手机号"
placeholder-class="placeholder-style-3"
/>
</view>
<view class="input-item">
<input
class="input"
type="number"
v-model="mobile"
placeholder="请输入验证码"
placeholder-class="placeholder-style-3"
/>
<view class="get-code" @click="getVerifyCode">
<text class="text active" v-if="canUse">获取验证码</text>
<text class="text" v-else>{{ sec }}s后重新获取</text>
</view>
</view>
<view class="input-item">
<input
class="input"
type="password"
v-model="password"
placeholder="请输入6位以上密码 "
placeholder-class="placeholder-style-3"
/>
</view>
<view class="helper">
<app-agreement v-model="isAgree" />
</view>
<view class="form-save-btn" @click="register">
<text>同意协议并注册</text>
</view>
<view class="bottom-link">
<text>已有账号？</text>
<text class="link" @click="tabIndex = 0">立即登录</text>
</view>
</view>
</view>
</view>
</view>
</app-layout>
</template>
<script>
import AppLayout from "@/components/layout/layout";
import AppAgreement from "@/components/auth/agreement";
export default {
name: "auth",
data() {
return {};
return {
backgroundImage: require("@/static/temp/auth/1.png"),
canUse: true,
sec: 0,
timeTask: null,
tabIndex: 0,
mobile: "",
password: "",
isAgree: false,
};
},
components: {
AppLayout,
AppAgreement,
},
onLoad() {},
onShow() {},
onReady() {},
onReachBottom() {},
onPullDownRefresh() {},
methods: {},
methods: {
forgetPassword() {
this.$utils.toast("正在开发中");
},
getVerifyCode() {
if (this.canUse) {
if (true) {
this.parseTime(10);
}
} else {
this.$utils.toast("请稍后再试");
}
},
parseTime(sec) {
const that = this;
this.canUse = false;
this.sec = sec;
that.timeTask = setInterval(() => {
that.sec -= 1;
if (that.sec <= 0) {
that.canUse = true;
that.sec = 0;
clearInterval(that.timeTask);
}
}, 1000);
},
login() {},
register() {
if (!this.isAgree) {
this.$utils.toast("请先阅读并同意《服务协议》《隐私政策》");
return;
}
},
},
};
</script>
<style lang="less" scoped></style>
<style lang="less" scoped>
.auth-container {
position: relative;
width: 100%;
padding-bottom: 30rpx;
}
.page-background-image {
width: 100%;
line-height: 0;
.background-image {
width: 100%;
height: 590rpx;
}
}
.auth-form {
position: relative;
width: 710rpx;
background: #ffffff;
margin: -225rpx auto 0 auto;
box-sizing: border-box;
padding: 46rpx 30rpx 150rpx 30rpx;
}
.select-group {
width: 100%;
display: flex;
justify-content: space-around;
.select-item {
padding: 18rpx 28rpx;
font-size: 36rpx;
line-height: 36rpx;
color: #666666;
}
.select-item.active {
color: #7286f1;
font-weight: bold;
border-bottom: 7rpx solid #7286f1;
}
}
.tab-group {
width: 100%;
.tab-item {
width: 100%;
}
.input-item {
position: relative;
width: 100%;
margin-top: 45rpx;
border-bottom: 2rpx solid #d2d1d1;
.input {
width: 100%;
font-size: 32rpx;
color: #666666;
padding: 30rpx 0;
line-height: 32rpx;
}
}
.helper {
width: 100%;
margin-top: 50rpx;
text-align: right;
.forget-password {
display: inline-block;
font-size: 28rpx;
color: #666666;
line-height: 28rpx;
}
}
.bottom-link {
width: 100%;
text-align: center;
font-size: 30rpx;
color: #000000;
.link {
color: #8b9beb;
padding-left: 18rpx;
}
}
.get-code {
position: absolute;
top: 0;
right: 0;
display: inline-block;
padding: 30rpx 0;
.text {
font-size: 32rpx;
color: #999999;
}
.text.active {
color: #ffa800;
}
}
.form-save-btn {
width: 570rpx;
height: 98rpx;
background: #8b9beb;
border-radius: 49rpx;
font-size: 36rpx;
color: #ffffff;
line-height: 98rpx;
text-align: center;
margin: 160rpx auto 160rpx auto;
}
}
</style>

BIN
src/static/temp/auth/1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 158 KiB