|
@@ -0,0 +1,151 @@
|
|
|
+<template>
|
|
|
+ <mobile-frame :frameStyle="frameStyle" @toPath="toPath">
|
|
|
+ <view class="main">
|
|
|
+ <view class="one">
|
|
|
+ <uni-forms ref="form" :modelValue="form" :rules="rules" label-width="auto">
|
|
|
+ <uni-forms-item label="手机号" name="phone">
|
|
|
+ <uni-easyinput type="text" v-model="form.phone" placeholder="请输入您的手机号" />
|
|
|
+ </uni-forms-item>
|
|
|
+ <uni-forms-item label="验证码" name="code" class="local">
|
|
|
+ <uni-easyinput type="text" v-model="form.code" placeholder="验证码图片点击可更改" />
|
|
|
+ <button class="localicon" type="primary" size="mini">发送验证码</button>
|
|
|
+ </uni-forms-item>
|
|
|
+ <uni-forms-item label="手机验证码" name="num" class="local">
|
|
|
+ <uni-easyinput type="text" v-model="form.num" placeholder="请输入您的手机验证码" />
|
|
|
+ <button class="localicon" type="primary" size="mini">发送验证码</button>
|
|
|
+ </uni-forms-item>
|
|
|
+ </uni-forms>
|
|
|
+ <view class="btn">
|
|
|
+ <button type="primary" @click="onSubmit('form')" size="small">立即绑定</button>
|
|
|
+ </view>
|
|
|
+ <view class="Tips">提示:为了您的账号安全,请及时绑定手机号</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </mobile-frame>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ frameStyle: {
|
|
|
+ useBar: false
|
|
|
+ },
|
|
|
+ form: {},
|
|
|
+ rules: {
|
|
|
+ phone: {
|
|
|
+ rules: [{
|
|
|
+ required: true,
|
|
|
+ errorMessage: '请输入手机号',
|
|
|
+ }]
|
|
|
+ },
|
|
|
+ code: {
|
|
|
+ rules: [{
|
|
|
+ required: true,
|
|
|
+ errorMessage: '请输入验证码',
|
|
|
+ }]
|
|
|
+ },
|
|
|
+ num: {
|
|
|
+ rules: [{
|
|
|
+ required: true,
|
|
|
+ errorMessage: '请输入手机验证码',
|
|
|
+ }]
|
|
|
+ },
|
|
|
+ },
|
|
|
+ };
|
|
|
+ },
|
|
|
+ onLoad: function(e) {
|
|
|
+ console.log(e);
|
|
|
+ },
|
|
|
+ onShow: function() {},
|
|
|
+ methods: {
|
|
|
+ toPath(e) {
|
|
|
+ if (e && e.route) uni.redirectTo({
|
|
|
+ url: `/${e.route}`
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 提交保存
|
|
|
+ onSubmit() {
|
|
|
+ const that = this;
|
|
|
+ let data = that.form;
|
|
|
+ this.$refs.form.validate().then(async (res) => {
|
|
|
+ let arr;
|
|
|
+ console.log(data);
|
|
|
+ // if (data._id) {
|
|
|
+ // arr = await that.$api(``, 'POST', data)
|
|
|
+ // } else {
|
|
|
+ // arr = await that.$api(``, 'POST', data)
|
|
|
+ // }
|
|
|
+ // if (arr.errcode == '0') {
|
|
|
+ // uni.showToast({
|
|
|
+ // title: `维护信息成功`,
|
|
|
+ // icon: 'success',
|
|
|
+ // duration: 2000
|
|
|
+ // });
|
|
|
+ // that.back()
|
|
|
+ // } else {
|
|
|
+ // uni.showToast({
|
|
|
+ // title: arr.errmsg,
|
|
|
+ // icon: 'error',
|
|
|
+ // duration: 2000
|
|
|
+ // })
|
|
|
+ // }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss">
|
|
|
+ .main {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ width: 100vw;
|
|
|
+ height: 100vh;
|
|
|
+
|
|
|
+ .one {
|
|
|
+ padding: 2vw;
|
|
|
+
|
|
|
+ .uni-input {
|
|
|
+ border: #f1f1ff 1px solid;
|
|
|
+ padding: 2vw 2vw;
|
|
|
+ border-radius: 1vw;
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ .btn {
|
|
|
+ text-align: center;
|
|
|
+
|
|
|
+ button {
|
|
|
+ margin: 0 2vw 2vw 2vw;
|
|
|
+ background-color: var(--ff0Color);
|
|
|
+ color: var(--fffColor);
|
|
|
+ }
|
|
|
+
|
|
|
+ .name {
|
|
|
+ color: var(--f85Color);
|
|
|
+ font-size: var(--font14Size);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .Tips {
|
|
|
+ font-size: var(--font12Size);
|
|
|
+ color: var(--f85Color);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .uni-forms-item {
|
|
|
+ margin-bottom: 6vw !important;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ .localicon {
|
|
|
+ position: absolute;
|
|
|
+ right: 0;
|
|
|
+ top: 5px;
|
|
|
+ }
|
|
|
+</style>
|