|
@@ -0,0 +1,259 @@
|
|
|
+<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>
|
|
|
+
|