123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226 |
- <template>
- <view class="step3">
- <view class="login-form">
- <view class="title">填写资料</view>
- <view class="input-item">
- <label for="">
- <text>中国(+86)</text>
- </label>
- <input type="number" placeholder="请输入手机号" v-model="form.mobile">
- </view>
- <view class="input-item">
- <label for="">
- <text>验证码</text>
- </label>
- <input type="number" placeholder="" maxlength="6" v-model="form.code">
- <button class="send-vcode" @tap="sendSms()" :disabled="!sendable">{{sendable?'获取验证码':countdown+'秒'}}</button>
- </view>
- <view class="input-item">
- <label for="">
- <text>密码</text>
- </label>
- <input type="password" placeholder="请输入密码" v-model="form.password">
- </view>
- <view class="button-item" style="margin-top: 80upx;">
- <button class="confirm" @tap="register()">注册</button>
- </view>
- <view class="agreement">
- <view>
- <text>注册代表您已同意</text>
- <navigator url="/pages/user/simple-article?title=用户协议" open-type="navigate" style="display: inline;">
- <text class="warning">《省心直供APP协议》</text>
- </navigator>
- <navigator url="/pages/user/simple-article?title=用户协议" open-type="navigate" style="display: inline;">
- <text class="warning">《隐私协议》</text>
- </navigator>
- </view>
- </view>
- </view>
- </view>
- </template>
- <script>
- let timeInterval = null;
- const time = 120
- export default {
- data() {
- return {
- sendable: true,
- countdown: time,
- form: {
- username: "",
- mobile: "",
- code: "",
- password: "",
- user_type: 3,
- invite_code: "",
- }
- }
- },
- methods: {
- register() {
- if (this.$verified.mobile(this.form.mobile) &&
- this.$verified.required(this.form.code, "请输入手机验证码") &&
- this.$verified.required(this.form.password, "请输入密码")) {
- this.form.username = this.form.mobile;
- this.$http.post({
- url: "/user/register",
- data: this.form,
- success(res) {
- uni.showToast({
- title: res.data.msg,
- icon: "none",
- success: () => {
- setTimeout(() => {
- uni.navigateBack({
- delta: 999,
- animationType:'none'
- })
- uni.navigateTo({
- url: '/pages/user/login'
- })
- }, 1500)
- }
- })
- }
- })
- }
- },
- sendSms() {
- if (this.sendable && this.$verified.mobile(this.form.mobile)) {
- this.sendable = false;
- this.$http.get({
- url: '/sms/send',
- data: {
- mobile: this.form.mobile,
- event: "register"
- },
- success: (res) => {
- uni.showToast({
- title: res.data.msg,
- icon: "none"
- })
- timeInterval = setInterval(() => {
- if (this.countdown-- === 0) {
- clearInterval(timeInterval)
- this.countdown = time;
- this.sendable = true;
- }
- }, 1000)
- },
- fail: () => {
- this.sendable = true;
- }
- })
- }
- },
- },
- onLoad: function(option) {
- this.form.invite_code = option.invite_code;
- this.form.user_type = option.user_type;
- }
- }
- </script>
- <style lang="scss" scoped>
- .step3 {
- background: $primary-color;
- height: 100vh;
- width: 750rpx;
- overflow: hidden;
- }
- .login-form {
- margin: auto;
- width: 600upx;
- height: 700upx;
- background-color: white;
- border-radius: 20rpx;
- padding: 72upx;
- padding-top: 40upx;
- box-sizing: border-box;
- position: relative;
- z-index: 2;
- margin-top: 200upx;
- &::after {
- content: "";
- background: url(../../static/images/login/box-bottom.png) no-repeat;
- background-size: contain;
- width: 564upx;
- height: 30upx;
- display: block;
- position: absolute;
- bottom: -30upx;
- left: 18upx;
- z-index: -1;
- }
- .title {
- font-size: 30upx;
- color: #999999;
- font-weight: bold;
- text-align: center;
- margin-bottom: 80upx;
- }
- }
- .input-item {
- display: flex;
- position: relative;
- margin-bottom: 30upx;
- border-bottom: 2upx solid $primary-color;
- align-items: center;
- label {
- width: 158upx;
- font-size: 30upx;
- color: #999999;
- }
- input {
- flex-grow: 1;
- padding: 10upx 5upx;
- font-size: 30upx;
- }
- }
- .confirm {
- height: 80upx;
- border: 2upx solid $primary-color;
- line-height: 80upx;
- margin: 30upx 0;
- font-size: 32upx;
- background: $primary-color;
- color: white;
- &::after {
- border: none;
- }
- }
- .send-vcode {
- background: $primary-color;
- color: white;
- font-size: 24upx;
- position: absolute;
- padding: 5upx 0;
- width: 160upx;
- line-height: normal;
- right: 0upx;
- top: 10upx;
- }
- .agreement {
- font-size: 22upx;
- .warning {
- color: $primary-color;
- font-weight: bold;
- }
- }
- </style>
|