feat:项目中心和个人中心

src/pages/personal-center/bind-phone/index.vue

@@ -0,0 +1,74 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { BOUND_PHONE_MASKED } from '@/constants/bind-phone'
+import CodeInput from '@/pages/Login/user-register/components/CodeInput.vue'
+import { navigateBackWithFallback } from '@/utils/navigate-back'
+
+const boundPhone = BOUND_PHONE_MASKED
+const code = ref('')
+
+function handleBack() {
+  navigateBackWithFallback('/pages/personal-center/account-security/index')
+}
+
+function handleSubmit() {
+  if (!code.value.trim()) {
+    uni.showToast({ title: '请输入验证码', icon: 'none' })
+    return
+  }
+
+  uni.navigateTo({ url: '/pages/personal-center/bind-phone-new/index' })
+}
+</script>
+
+<template>
+  <view class="bind-phone">
+    <view class="bind-phone__navbar">
+      <view
+        class="bind-phone__back"
+        @tap="handleBack"
+      >
+        <image
+          class="bind-phone__back-icon"
+          src="/static/icons/icon-back.svg"
+          mode="aspectFit"
+        />
+      </view>
+      <text class="bind-phone__navbar-title">
+        绑定手机号
+      </text>
+      <view class="bind-phone__navbar-placeholder" />
+    </view>
+
+    <view class="bind-phone__content">
+      <view class="bind-phone__field">
+        <text class="bind-phone__label">
+          已绑定手机号
+        </text>
+        <view class="bind-phone__phone">
+          <text class="bind-phone__phone-text">
+            {{ boundPhone }}
+          </text>
+        </view>
+      </view>
+
+      <view class="bind-phone__field">
+        <text class="bind-phone__label">
+          验证码
+        </text>
+        <CodeInput v-model="code" />
+      </view>
+
+      <view
+        class="bind-phone__submit"
+        @tap="handleSubmit"
+      >
+        验证并换绑
+      </view>
+    </view>
+  </view>
+</template>
+
+<style scoped lang="scss">
+@import './index.scss';
+</style>