From 656d923bdea06f3208c30762b10d5814e762f419 Mon Sep 17 00:00:00 2001
From: WindowBird <13870814+windows-bird@user.noreply.gitee.com>
Date: Sat, 16 Aug 2025 12:03:51 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=89=E5=85=A8=E9=AA=8C=E8=AF=81-=E6=9B=B4?=
 =?UTF-8?q?=E6=8D=A2=E6=89=8B=E6=9C=BA=E5=8F=B7-=E4=B8=89=E4=B8=AA?=
 =?UTF-8?q?=E7=95=8C=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages.json                            |  24 +++--
 pages/changePhone/changePhone.vue     | 145 ++++++++++++++++++++++++++
 pages/changePhone/changePhoneNext.vue | 132 +++++++++++++++++++++++
 3 files changed, 293 insertions(+), 8 deletions(-)
 create mode 100644 pages/changePhone/changePhone.vue
 create mode 100644 pages/changePhone/changePhoneNext.vue

diff --git a/pages.json b/pages.json
index 498e99f..102143a 100644
--- a/pages.json
+++ b/pages.json
@@ -31,15 +31,25 @@
       "path": "pages/set/set",
       "style": {
         "navigationBarTitleText": "设置"
-	
       }
     },
     {
-    	"path" : "pages/securityVerification/securityVerification",
-    	"style" : 
-    	{
-    		  "navigationBarTitleText": "安全验证"
-    	}
+      "path": "pages/securityVerification/securityVerification",
+      "style": {
+        "navigationBarTitleText": "安全验证"
+      }
+    },
+    {
+      "path": "pages/changePhone/changePhone",
+      "style": {
+        "navigationBarTitleText": "更换手机号"
+      }
+    },
+    {
+      "path": "pages/changePhone/changePhoneNext",
+      "style": {
+        "navigationBarTitleText": ""
+      }
     }
   ],
   "tabBar": {
@@ -71,8 +81,6 @@
     "navigationBarTextStyle": "black",
     "navigationBarTitleText": "设备租赁",
     "navigationBarBackgroundColor": "#fff"
-	
-
   },
   "uniIdRouter": {},
   "mp-weixin": {
diff --git a/pages/changePhone/changePhone.vue b/pages/changePhone/changePhone.vue
new file mode 100644
index 0000000..1944b07
--- /dev/null
+++ b/pages/changePhone/changePhone.vue
@@ -0,0 +1,145 @@
+<template>
+  <view class="page">
+    <vue class="phone-box">
+      <text>当前绑定的手机号码为</text>
+      <view class="phone">{{ phone }}</view>
+    </vue>
+    <view class="new-phone">
+      <text class="country-code-selector">+86</text>
+      <input class="input-phone" placeholder="输入新的手机号" />
+    </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;
+  align-items: center;
+  min-height: 100vh;
+  padding: 64rpx 50rpx 0 50rpx;
+  background: #ffffff;
+
+  .phone-box {
+    margin-bottom: 64rpx;
+    display: flex;
+
+    text {
+      font-size: 18px;
+      font-weight: 400;
+      color: #3d3d3d;
+    }
+
+    .phone {
+      font-size: 18px;
+      font-weight: 800;
+      color: #3d3d3d;
+    }
+  }
+
+  .new-phone {
+    width: 100%;
+    border-radius: 7px;
+    display: flex;
+    box-sizing: border-box;
+    border: 1px solid #808080;
+    align-items: center;
+
+    text {
+      width: 104rpx;
+      border-right: 1px solid #f15a04;
+      color: #f15a04;
+      text-align: center;
+    }
+
+    .input-phone {
+      line-height: 98rpx;
+      padding-left: 22rpx;
+      font-size: 16px;
+      font-weight: 500;
+      height: 98rpx;
+      border-radius: 7px;
+    }
+  }
+
+  .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>
diff --git a/pages/changePhone/changePhoneNext.vue b/pages/changePhone/changePhoneNext.vue
new file mode 100644
index 0000000..4387e0f
--- /dev/null
+++ b/pages/changePhone/changePhoneNext.vue
@@ -0,0 +1,132 @@
+<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>