vue注册页面

<template>
  <div>
    <van-nav-bar title="用户注册" left-arrow  @click-left="dot"/>
    <!-- 页面的主体css样式 -->
    <div id="login">
      <van-form>
        <p class="login-head">新用户注册</p>
        <van-field placeholder="手机号" class="inp" v-model="mobile" right-icon="graphic" />
        <!-- 密码框 -->
        <van-field
          placeholder="密码"
          class="inp"
          v-model="pwd"
          :type="hidePwd ?'password':'text'"
          :right-icon="hidePwd ?'closed-eye':'eye-o'"
          @click-right-icon="hidePwd = !hidePwd"
        />
        <!-- 确认密码框 -->
        <van-field
          placeholder="确认密码"
          class="inp"
          v-model="confirm_pwd"
          :type="hidePwd1 ?'password':'text'"
          :right-icon="hidePwd1 ?'closed-eye':'eye-o'"
          @click-right-icon="hidePwd1 = !hidePwd1"
        />

        <van-field placeholder="用户名" class="inp" v-model="nick" right-icon="user-o" />
        <van-field placeholder="图形验证码" class="inp" v-model="picCode">
          <template #right-icon>
            <van-image :src="imgUrl" @click="createImgCode" />
          </template>
        </van-field>
        <!-- 城市信息 -->
        <van-field
          placeholder="城市"
          class="inp"
          v-model="area"
          right-icon="location-o"
          @click="areaShow=true"
        />
        <!-- 城市列表，底部弹出层 -->
        <van-popup v-model<