jyy-smart-canteen-h5/pages/mine/me/updatePhone.vue

<template>
	<page-meta :page-font-size="fontValue+'px'" :root-font-size="fontValue+'px'"></page-meta>
  <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> -->
			
			<button class="verify-btn" @click="handleGetVerifyCode">修改</button>
    </view>
  </view>
</template>

<script>
	
	import {
		getUserProfile,
		updateUserProfile
	} from "@/api/system/user"
export default {
  data() {
    return { 
		fontValue:uni.getStorageSync('fontSize') || 8,
		phoneNumber: '',
		countdown: 0,
		userInfo: {}
    }
  },
  computed: {
    isValidPhone() {
      return /^1[3-9]\d{9}$/.test(this.phoneNumber)
    }
  },
	onLoad() {
		this.getUserInfo()
	},
  methods: {
		getUserInfo() {
			this.$store.dispatch('GetInfo').then(res => {
				console.log(res)
				this.userInfo = res.user;
				this.userInfo.postIds = res.postIds||[]
				this.userInfo.roleIds = res.roleIds||[]
			})
		},
		
    goBack() {
      uni.navigateBack()
    },
		
    clearPhoneNumber() {
      this.phoneNumber = ''
    },
		
    handleGetVerifyCode() {
		if (!this.isValidPhone) {
			uni.showToast({ title: '请正确输入手机号', icon: 'none' })
			return
		} 
			// this.userInfo.phonenumber = this.phoneNumber	
			// updateUserProfile(this.userInfo).then(res => {
			// 	uni.showToast({ title: '修改成功', icon: 'success',duration: 2000 });
			// 	setTimeout(() => {
			// 		uni.navigateBack()
			// 	},2000)
			// })

      // 这里添加获取验证码的逻辑
      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: 72rpx;
  background: #FF8126;
  color: #fff;
  font-size: 28rpx;
  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>