LandSurveyApplet/pages/modify-phone/index.vue

<template>
  <view class="bg-gray-50 p-2">
    <!-- 移除了左右外边距，使用full宽度 -->
    <view class="bg-white rounded-xl shadow-sm p-8">
      <!-- 表单内容 -->
      <view class="space-y-6">
        <!-- 密码输入框 -->
        <view class="flex items-center border-solid border-0 border-b-1 border-gray-200 pb-2">
          <text class="text-gray-700 text-sm w-1/3">密码:</text>
          <view class="flex-1 flex items-center border-b border-gray-200 py-2">
            <input
                :type="showPassword ? 'text' : 'password'"
                v-model="form.password"
                placeholder="请输入密码"
                class="flex-1 bg-transparent outline-none text-gray-900"
            />
            <view class="flex space-x-2">
              <view v-if="form.password" class="w-36 h-36 flex items-center justify-center text-gray-400" @click="togglePasswordVisibility">
                <image :src="showPassword ? '/static/eye-close.png' : '/static/eye.png'" class="w-full h-full" />
              </view>
              <view v-if="form.password" class="w-36 h-36 flex items-center justify-center text-gray-400" @click="clearPassword">
                <image src="/static/clear.png" class="w-full h-full" />
              </view>
            </view>
          </view>
        </view>

        <!-- 手机号输入框 -->
        <view class="flex items-center border-solid border-0 border-b-1 border-gray-200 pb-2">
          <text class="text-gray-700 text-sm w-1/3">手机号:</text>
          <view class="flex-1 flex items-center border-b border-gray-200 py-2">
            <input
                type="number"
                v-model="form.phone"
                placeholder="请输入手机号"
                class="flex-1 bg-transparent outline-none text-gray-900"
            />
            <view v-if="form.phone" class="w-36 h-36 flex items-center justify-center text-gray-400" @click="clearPhone">
              <image src="/static/clear.png" class="w-full h-full" />
            </view>
          </view>
        </view>

        <!-- 图形验证码 -->
        <view class="flex items-center border-solid border-0 border-b-1 border-gray-200 pb-2">
          <text class="text-gray-700 text-sm w-1/3">图形验证码:</text>
          <view class="flex-1 flex items-center border-b border-gray-200 py-2">
            <input
                type="text"
                v-model="form.authCode"
                placeholder="请输入图形验证码"
                class="flex-1 bg-transparent outline-none text-gray-900"
            />
            <!-- 3个元素横向排列的色块验证码 -->
            <view class="flex space-x-1 px-2 py-1 bg-gray-100 rounded">
              <view class="w-10 h-10 bg-green-500 rounded-sm flex items-center justify-center text-white font-bold">3</view>
              <view class="w-10 h-10 bg-blue-500 rounded-sm flex items-center justify-center text-white font-bold">6</view>
              <view class="w-10 h-10 bg-purple-500 rounded-sm flex items-center justify-center text-white font-bold">1</view>
            </view>
          </view>
        </view>

        <!-- 短信验证码 -->
        <view class="flex items-center border-solid border-0 border-b-1 border-gray-200 pb-2">
          <text class="text-gray-700 text-sm w-1/3">短信验证码:</text>
          <view class="flex-1 flex items-center border-b border-gray-200 py-2">
            <input
                type="text"
                v-model="form.smsCode"
                placeholder="请输入短信验证码"
                class="flex-1 bg-transparent outline-none text-gray-900"
            />
            <view class="text-blue-500 text-sm border-0" @click="getSmsCode">
              获取验证码
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 确认按钮在表单外部 - 蓝底白字+加深圆角 -->
    <view class="mt-6 px-8">
      <view
          class="w-full text-center bg-blue-600 text-white py-3 rounded-2xl font-medium shadow-sm hover:bg-blue-700 transition-colors"
          @click="submitForm"
      >
        <text>
          确认
        </text>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'

// 表单数据
const form = ref({
  password: '',
  phone: '',
  authCode: '',
  smsCode: ''
})

// 密码可见性控制
const showPassword = ref(false)

// 验证手机号格式
const validatePhone = (phone) => {
  const phoneRegex = /^1[3-9]\d{9}$/;
  return phoneRegex.test(phone);
}

// 获取短信验证码
const getSmsCode = () => {
  // 首先检查手机号是否为空
  if (!form.value.phone) {
    uni.showToast({
      title: '请输入手机号',
      icon: 'none'
    })
    return
  }

  // 验证手机号格式
  if (!validatePhone(form.value.phone)) {
    uni.showToast({
      title: '请输入正确的手机号',
      icon: 'none'
    })
    return
  }

  // 实际项目中这里调用接口发送验证码
  uni.showToast({
    title: '验证码已发送',
    icon: 'none'
  })
}

// 清除密码
const clearPassword = () => {
  form.value.password = ''
}

// 清除手机号
const clearPhone = () => {
  form.value.phone = ''
}

// 切换密码可见性
const togglePasswordVisibility = () => {
  showPassword.value = !showPassword.value
}

// 提交表单
const submitForm = () => {
  console.log('表单提交数据:', form.value)
  uni.showToast({
    title: '表单已提交',
    icon: 'none'
  })
}
</script>