HomeLease/pages/changePhone/changePhoneNext.vue

<template>
  <view class="page">
    <view class="phone-box">
      <text>输入短信验证码</text>
      <view class="phone-row">
        <text>已向</text>
        <view class="phone">{{ phone }}</view>
        <text> 发送验证码</text>
      </view>
    </view>

    <view class="code">
      <input class="input-code" placeholder="输入验证码" />
      <text class="get-code" @click="getCode()">重新发送</text>
    </view>

    <view class="ok">提交</view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      phone: '+86 158****1232',
      userInfoSettings: [
        {
          label: '头像',
          value: '', // 实际项目中这里可能是图片URL
          icon: '灰色圆形图标', // 描述性文字，实际可用图片路径替换
          type: 'avatar',
        },
        {
          label: '昵称',
          value: '昵称', // 默认占位文字，实际应为用户昵称
          type: 'nickname',
        },
        {
          label: '手机号',
          value: '158****5964', // 脱敏后的手机号
          type: 'phone',
        },
      ],
    }
  },
  methods: {
    getCode() {
      console.log('code')
    },
  },
}
</script>

<style lang="scss" scoped>
.page {
  display: flex;
  flex-direction: column;

  min-height: 100vh;
  padding: 64rpx 50rpx 0 50rpx;
  background: #ffffff;

  .phone-box {
    margin-bottom: 12rpx;

    text {
      font-size: 30px;
      font-weight: 500;
      color: #3d3d3d;
    }

    .phone-row {
      margin-top: 12rpx;
      display: flex;
      //border: #4cd964 solid 1px;

      text {
        font-size: 18px;
        font-weight: 400;
        color: #3d3d3d;
      }

      .phone {
        font-size: 18px;
        font-weight: 400;
        color: #f15a04;
      }
    }
  }

  .code {
    width: 100%;
    margin-top: 24rpx;
    border-radius: 7px;
    display: flex;
    box-sizing: border-box;
    border: 1px solid #808080;
    align-items: center;

    .input-code {
      width: 460rpx;
      line-height: 98rpx;
      padding-left: 22rpx;
      font-size: 16px;
      font-weight: 500;
      height: 98rpx;
      border-radius: 7px;
    }

    text {
      width: 190rpx;
      border-left: 1px solid #f15a04;
      color: #f15a04;
      text-align: center;
    }
  }

  .ok {
    margin-top: 64rpx;
    text-align: center;
    line-height: 98rpx;
    color: #ffffff;
    font-size: 16px;
    font-weight: 500;
    width: 650rpx;
    height: 98rpx;
    background: #f15a04;
    border-radius: 7px;
    opacity: 0.5;
  }
}
</style>