完成注册登录页面

src/components/auth/agreement.vue

@@ -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>

src/components/layout/layout.vue

@@ -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() {

src/components/widgets/checkbox.vue

@@ -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>

src/pages.json

@@ -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": {

src/pages/auth/auth.vue

@@ -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>