yj-register/pages/index/index.vue

<template>
    <view class="page">
        <image class="bg" :src="'/static/img/bg1.jpg'"></image>
        <view class="content">

            <view>
                <u--form labelPosition="left" :model="form" :rules="rules"  ref="uForm">
                    <view class="flex-col justify-center inputView">
                        <u-form-item prop="phone" ref="item1">
                            <u-input v-model="form.phone" placeholder="请输入手机号" placeholderStyle="color:#333333" border="none"></u-input>
                        </u-form-item>
                    </view>

                    <view class="flex-col justify-center inputView">
                        <u-form-item prop="captchaCode" ref="item1">
                            <u-input v-model="form.captchaCode" placeholder="请输入验证码" placeholderStyle="color:#333333" border="none"></u-input>
                            <text class="tips" @click="getCode" >{{tips}}</text>
                        </u-form-item>
                    </view>

                    <view class="flex-col justify-center inputView">
                        <u-form-item prop="password" ref="item1">
                            <u-input v-model="form.password" placeholder="请输入您的密码" placeholderStyle="color:#333333" border="none"></u-input>
                        </u-form-item>
                    </view>

                    <view class="flex-col justify-center inputView">
                        <u-form-item prop="password1" ref="item1">
                            <u-input v-model="form.password1" placeholder="请再次输入您的密码" placeholderStyle="color:#333333" border="none"></u-input>
                        </u-form-item>
                    </view>

                    <view class="flex-col justify-center inputView inputView1">
                        <u-form-item prop="inviteCode" ref="item1">
                            <u-input v-model="form.inviteCode" placeholder="请输入邀请码" placeholderStyle="color:#333333" border="none"></u-input>
                        </u-form-item>
                    </view>

                </u--form>
            </view>
            <view class="flex-row justify-center read">
                <view class="icon">
                    <u-icon :name="'/static/img/xuanzhong.png'" size="16" v-if="select" @click="selectRead"></u-icon>
                    <u-icon :name="'/static/img/weixuanzhong.png'"  size="16" v-else  @click="selectRead"></u-icon>
                </view>
                <text :style="{'margin-left':'10rpx'}">
                    我已阅读并同意《要酒用户协议》
                </text>
            </view>
            <view class="zcbtn" @click="register">注册</view>

            <view class="xiazai">
                <text >注册完成：</text>
                <text class="xiazaiText" @click="versionUpgrade">下载安装包</text>
            </view>

        </view>
        <u-code ref="uCode" @change="codeChange" seconds="60" @start="disabled1 = true" @end="disabled1 = false"></u-code>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                disabled1: false,
                tips: '',
                select:false,
                form: {
                    captchaId:'',
                    phone: '',
                    captchaCode: '',
                    password: '',
                    password1: '',
                    inviteCode:''
                },
                rules: {
                    'phone': {
                        type: 'string',
                        required: true,
                        min: 11,
                        max: 11,
                        message: '请输入正确的手机号',
                        trigger: ['blur']
                    },
                    'captchaCode': {
                        type: 'string',
                        min: 4,
                        max: 6,
                        required: true,
                        message: '请输入正确的验证码',
                        trigger: ['blur']
                    },
                    'password': {
                        type: 'string',
                        min: 6,
                        max: 16,
                        required: true,
                        message: '请输入6-16位密码',
                        trigger: ['blur']
                    },
                    'password1': {
                        type: 'string',
                        min: 6,
                        max: 16,
                        required: true,
                        message: '请再次输入6-16位密码',
                        trigger: ['blur']
                    },

                },
            }
        },
        onLoad() {

        },
        methods: {

            versionUpgrade(){
                this.$api.service.versionUpgrade().then(res=>{
                    console.log(res)

                })
            },

            downloadFile(){
                uni.downloadFile({
                    url: 'https://www.example.com/file/test', //仅为示例，并非真实的资源
                    success: (res) => {
                        if (res.statusCode === 200) {
                            console.log('下载成功');
                        }
                    }
                })
            },

            selectRead(){
                this.select = !this.select
            },
            register(){
                if (!this.select){
                    uni.$u.toast('请阅读并同意《要酒用户协议》')
                    return
                }


                this.$refs.uForm.validate().then(r=>{
                    this.$api.service.register(this.form).then(res=>{
                        uni.showToast({
                            icon: 'success',
                            duration: 3000,
                            title: '注册成功！'
                        });
                    })
                })
            },
            getCode() {

				console.log('6666666666666666666666')
				let regExp = new RegExp(this.$phonePattern);
                let b = regExp.test(this.form.phone)
                if (!b) {
                    uni.$u.toast('请输入正确的手机号')
                    return
                }
                if (this.$refs.uCode.canGetCode) {
                    // 模拟向后端请求验证码
                    uni.showLoading({
                        title: '正在获取验证码'
                    })
                    this.$api.service.getSmsCode(this.form).then(res => {
                        this.form.captchaId= res.data.data.id
                        uni.hideLoading();
                        // 这里此提示会被this.start()方法中的提示覆盖
                        uni.$u.toast('验证码已发送');
                        // 通知验证码组件内部开始倒计时
                        this.$refs.uCode.start();
                    })
                } else {
                    uni.$u.toast('倒计时结束后再发送');
                }
            },
            codeChange(text) {
                this.tips = text;
            },
        }
    }
</script>

<style>
    .page {
        width: 100vw;
        height: 100vh;
        position: relative;
    }

    .bg {
        width: 100%;
        height: 100%;
    }

    .content {
        width: 100vw;
        position: absolute;
        bottom: 100rpx;
        left: 0;
    }


    .inputView {
        width: 646rpx;
        min-height: 50rpx;
        background: white;
        margin-top: 20rpx;
        margin-left: 32rpx;
        border-radius: 15rpx;
        overflow: hidden;
        padding: 10rpx 20rpx;
    }
    .inputView1 {
        background-color: rgba(255, 255, 255, 0.5)
    }

    .tips {
        color: #b63a3a;


    }
	.zcbtn{
		background: #fed09e;
		width: 686rpx;
		height: 80rpx;
		border-radius: 40rpx;
		text-align: center;
		color: #bc372b;
		line-height: 80rpx;
		font-size: 36rpx;
        margin-top: 20rpx;
		margin-left: 32rpx;
	}
    .read{
        color: white;
        font-size: 22rpx;
        margin-top: 20rpx;
    }
    .icon{
        margin-top: 5rpx;
    }
    .xiazai{
        width: 686rpx;
        margin-top: 20rpx;
        margin-left: 32rpx;
        font-size: 26rpx;
    }
    .xiazaiText{
        color: #007aff;
    }
</style>