Dining_Hall/pages/mine/me/updatePhone.vue

<template>
  <view class="container">
    <!-- 顶部导航栏 -->
<!--    <view class="header">-->
<!--      <view class="back-icon" @click="goBack">-->
<!--        <image class="icon" :src="require('@/static/images/icons/back.png')" mode="aspectFit"></image>-->
<!--      </view>-->
<!--    </view>-->

    <!-- 主要内容区域 -->
    <view class="content">
      <view class="title-section">
        <text class="title">输入新的手机号</text>
        <text class="subtitle">换绑手机号后，将使用新的手机号登录</text>
      </view>

      <!-- 手机号输入框 -->
      <view class="input-wrapper">
        <input
          type="number"
          v-model="phoneNumber"
          placeholder="请输入手机号"
          maxlength="11"
          class="phone-input"
        />
        <view class="clear-icon" v-if="phoneNumber" @click="clearPhoneNumber">
          <image class="icon" :src="require('@/static/images/my/cancel.png')" mode="aspectFit"></image>
        </view>
      </view>

      <!-- 获取验证码按钮 -->
      <button
        class="verify-btn"
        :disabled="!isValidPhone"
        @click="handleGetVerifyCode"
      >
        获取短信验证码
      </button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      phoneNumber: '',
      countdown: 0
    }
  },
  computed: {
    isValidPhone() {
      return /^1[3-9]\d{9}$/.test(this.phoneNumber)
    }
  },
  methods: {
    goBack() {
      uni.navigateBack()
    },
    clearPhoneNumber() {
      this.phoneNumber = ''
    },
    handleGetVerifyCode() {
      if (!this.isValidPhone) return

      // 这里添加获取验证码的逻辑
      uni.navigateTo({
        url: `/pages/mine/me/phoneCode?phone=${this.phoneNumber}`
      })
    }
  }
}
</script>

<style lang="scss">
.container {
  min-height: 100vh;
  background-color: #fff;
}

.header {
  padding: 44px 32rpx 0;
  height: 88rpx;
  display: flex;
  align-items: center;

  .back-icon {
    padding: 20rpx;
    margin-left: -20rpx;

    .icon {
      width: 40rpx;
      height: 40rpx;
    }
  }
}

.content {
  padding: 32rpx;
}

.title-section {
  margin-bottom: 48rpx;

  .title {
    font-size: 40rpx;
    font-weight: 500;
    color: #333;
    margin-bottom: 16rpx;
    display: block;
  }

  .subtitle {
    font-size: 28rpx;
    color: #999;
  }
}

.input-wrapper {
  position: relative;
  margin-bottom: 48rpx;

  .phone-input {
    width: 100%;
    height: 96rpx;
    background: #F5F5F5;
    border-radius: 48rpx;
    padding: 0 88rpx 0 48rpx;
    font-size: 32rpx;
    color: #333;

    &::placeholder {
      color: #999;
    }
  }

  .clear-icon {
    position: absolute;
    right: 32rpx;
    top: 50%;
    transform: translateY(-50%);
    padding: 16rpx;

    .icon {
      width: 32rpx;
      height: 32rpx;
    }
  }
}

.verify-btn {
  width: 100%;
  height: 88rpx;
  background: #FF8126;
  color: #fff;
  font-size: 32rpx;
  font-weight: 500;
  border-radius: 44rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;

  &:disabled {
    opacity: 0.5;
  }

  &:active {
    opacity: 0.9;
  }
}
</style>