zx_flk_app/pages/loginRegister/register.vue

<template>
    <view class="register-page">
        <ZxInput
            v-model="form.email"
            :placeholder="$t('请输入邮箱账号')"
        />
        <ZxInput
            v-model="form.passwd"
            :placeholder="$t('请输入密码')"
            isPassword
        />
        <ZxInput
            v-model="form.second_passwd"
            :placeholder="$t('请再次输入密码')"
            isPassword
        />
        <view 
          :class="['agreement-row', checkShakeObj.agreemen && 'shake']" 
          @tap="isCheckAgreement = !isCheckAgreement"
        >
          <view :class="['checkbox', isCheckAgreement && 'is-checked']"/>
          {{ $t('已阅读并同意') }}
          <text class="text" @tap.stop="handleAgreementLink('270')">《{{$t('用户协议')}}》</text>
          {{ $t('和') }}<text class="text" @tap.stop="handleAgreementLink('102')">《{{$t('隐私政策')}}》</text>
        </view>
        <view :class="['zx-form-btn', isSubmt && 'is-submit']" @tap="submit">
            {{ $t('立即注册') }}
        </view>
        <NoticeDialog
            :title="$t('注册邮件已发送')"
            :btnText="$t('我知道了')"
            :text="noticeText"
            v-model="isSendSucceed"
        />
    </view>
</template>

<script>
import { emailRegex } from '@/common/constant'
import NoticeDialog from '@/component/comPopup/Notice.vue'
import ZxInput from './components/ZxInput.vue'
const config = require('@/common/config.js');
const http = require('@/common/http.js');
export default {
    components: {
        NoticeDialog,
        ZxInput
    },
    data() {
        return {
            isCheckAgreement: false,
            isSendSucceed: false,
            form: {},
            emailFocus: false,
            checkShakeObj: {
                agreemen: false
            }
        }
    },
    computed: {
        noticeText({ email }) {
            return `我们向 <span style="color: #0A59F7;">${email}</span> 发送了一封注册邮件，请您登录邮箱点击链接完成注册。`
        },
        isSubmt({ form }) {
            return form.email && form.passwd && form.second_passwd
        }
    },
    methods: {
        handleAgreementLink(id) {
            uni.navigateTo({
                url: `/pages/contract/contract?contract_id=${id}`
            })
        },
        _applyCheck(field, message) {
            this.checkShakeObj[field] = true;
            setTimeout(() => {
            this.checkShakeObj[field] = false;
            }, 500)
            uni.showToast({ title: message, icon: 'none' })
        },
        submit() {
            if (!this.isCheckAgreement) {
                this._applyCheck('agreemen', this.$t('请勾选用户协议和隐私政策'))
                return
            }
            if (!emailRegex.test(this.form.email)) {
                uni.showToast({ title: this.$t('请输入有效的邮箱地址'), icon: 'none' })
                return
            }
            if (this.form.passwd !== this.form.second_passwd) {
                uni.showToast({ title: this.$t('两次输入的密码不一致'), icon: 'none' })
                return
            }
            http.postApi(config.API_REGISTER_EMAIL, {
                ...this.form
            }, res => {
                const { msg: title } = res.body
                if (res.succeed) {
                    uni.showToast({ title, icon: 'none' })
                    this.isSendSucceed = true
                } else {
                    uni.showToast({ title, icon: 'none' })
                }
            })
        }
    }
}
</script>

<style lang="scss" scoped>
@import "@/libs/css/layout.scss";

.register-page {
    width: 100%;
    background: #F1F3F4;
    min-height: 100vh;
    padding: 32rpx;
    .agreement-row {
        margin: 2rpx 0 64rpx;
        display: flex;
        align-items: center;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 28rpx;
        color: #060809;
        &.shake {
            animation: shake 0.2s ease-in-out 0s 6;
        }

        .checkbox {
            width: 32rpx;
            height: 32rpx;
            margin-right: 16rpx;
            background: url('https://qiniu.bms16.com/Fh5aqDCxGKxEEVfxIQD9u6Ym9OLk');
            background-size: 100%;
            &.is-checked {
                background: url('https://qiniu.bms16.com/FhAi08ilxiBqUhFezVF9H9ff2VMm');
                background-size: 100%;
            }
        }

        .text {
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 28rpx;
            color: #0A59F7;
            &:active {
                opacity: .6;
            }
        }
    }
  
}
</style>