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'}" @click="openAgreement">
                    我已阅读并同意《要酒用户协议》
                </text>
            </view>
            <view class="zcbtn" @click="register">注册</view>

            <view class="xiazai">
                <text >注册完成：</text>
<!--                <text class="xiazaiText" @click="versionUpgrade">下载安装包</text>-->
                <uni-link :href="apkUrl" fontSize="18" text="下载安装包"></uni-link>
            </view>

        </view>
        <u-code ref="uCode" @change="codeChange" seconds="60" @start="disabled1 = true" @end="disabled1 = false"></u-code>
        <uni-popup ref="popup" type="center" :animation="false">
    `       <view class="agree">
                 <rich-text v-html="agreement"></rich-text>
            </view>
        </uni-popup>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                agreement:'',
                apkUrl:'',
                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(e) {
            if (e.inviteCode){
                console.log(e.inviteCode)
                this.form.inviteCode= e.inviteCode
            }
            this.versionUpgrade()
        },
        methods: {

            openAgreement(){
                // this.$refs.popup.open()
            },

            versionUpgrade(){
                this.$api.service.versionUpgrade().then(res=>{
                    this.apkUrl = res.data.data.apkUrl
                    // uni.downloadFile({
                    //     url: res.data.data.apkUrl, //仅为示例，并非真实的资源
                    //     success: (res1) => {
                    //
                    //         console.log('下载返回：',res1)
                    //         console.log('下载成功');
                    //
                    //
                    //     }
                    // })
                    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 scoped lang="scss">
    @import './index.rpx.scss';
</style>