成品页面

登录

<template>
  <div>
    <van-image
        width="100%"
        height="300px"
        fit="contain"
        src="http://hytx.zghyjjy.com/images/logo.jpg"
    />
    <van-form @submit="onSubmit">
      <van-cell-group inset>
        <van-field
            v-model="account"
            name="用户名"
            label="用户名"
            placeholder="用户名"
            :rules="[{ required: true, message: '请填写用户名' }]"
        />
        <van-field
            v-model="password"
            type="password"
            name="密码"
            label="密码"
            placeholder="密码"
            :rules="[{ required: true, message: '请填写密码' }]"
        />
      </van-cell-group>
      <div style="margin: 16px;">
        <van-button round block type="primary" native-type="submit" @click="onSubmit">
          登录
        </van-button>
        <div style="display: flex; justify-content: center; align-items: center; margin-top: 10px;cursor: pointer; ">
          <div>忘记密码</div>
          <div style="width: 20px"></div>
          <div @click="$router.push('register')">立即注册</div>
        </div>
      </div>
    </van-form>

  </div>
</template>

<script>
import { showToast,showSuccessToast,showFailToast  } from 'vant';

export default {
  name: "Login",
  data() {
    return {
      account: '',
      password: '',
    };
  },
  methods: {
    onSubmit() {
      showToast('登录成功')
    },
  }
}

</script>

<style scoped>

</style>

注册

<template>
  <div>
    <van-form>
      <van-field name="uploader" label="上传头像">
        <template #input>
          <van-uploader v-model="uploader" />
        </template>
      </van-field>
      <van-cell-group>
        <van-field
            v-model="phone"
            required
            label="手机号"
            placeholder="请输入手机号"
            :rules="[
                         { required: true },
                         { pattern: /^1[3-9]\d{9}$/, message: '手机号码格式错误！' },
        ]"
        />
        <van-field
            v-model="sms"
            center
            clearable
            label="短信验证码"
            placeholder="请输入短信验证码"
        >
          <template #button>
            <van-button size="small" type="primary">发送验证码</van-button>
          </template>
        </van-field>
        <van-field
            v-model="password"
            required
            type="password"
            label="密码"
            placeholder="请输入密码"
        />
        <van-field
            v-model="password1"
            required
            type="password"
            label="确认密码"
            placeholder="请再次输入密码"
        />
      </van-cell-group>
    </van-form>
    <div style="margin: 16px">
      <van-button round block type="primary"  @click="onsubmit">注册</van-button>
    </div>
  </div>
</template>

<script>
import { showToast,showSuccessToast,showFailToast  } from 'vant';

export default {
  data() {
    return {
      phone:'',
      sms:'',
      password:'',
      password1:'',
      uploader: [{ url: 'https://img01.yzcdn.cn/vant/leaf.jpg' }],
      value: '',
      columns: ["城中区", "鱼峰区", "柳南区", "柳北区", "柳江区"],
      showPicker: false,
    };
  },
  methods: {
    onsubmit(){
      showSuccessToast('注册成功');
    }
  },
};
</script>

<style scoped>

</style>