添加修改用户信息UI

src/pages.json

@@ -6,6 +6,9 @@
     {
       "path": "pages/point-book"
     },
+    {
+      "path": "pages/edit-profile"
+    },
     {
       "path": "pages/sign-in"
     },

src/pages/edit-profile.vue

@@ -0,0 +1,102 @@
+<script setup>
+import { ref, onMounted, reactive } from "vue";
+import { onLoad } from "@dcloudio/uni-app";
+import Container from "@/components/Container.vue";
+
+const type = ref("");
+const formData = reactive({
+  name: "",
+  email: "",
+  code: "",
+  password: "",
+  confirmPassword: "",
+});
+
+onLoad((options) => {
+  type.value = options.type;
+});
+</script>
+
+<template>
+  <Container
+    :bgType="2"
+    bgColor="#F5F5F5"
+    :whiteBackArrow="false"
+    :title="`Edit ${type}`"
+  >
+    <view v-if="type === 'Name'" class="input-view input-row">
+      <input
+        v-model="formData.name"
+        placeholder="name"
+        placeholder-style="color:#999;"
+      />
+      <text>{{ formData.name.length }}/30</text>
+    </view>
+    <view v-else-if="type === 'Email'" class="input-view">
+      <view class="input-row">
+        <input
+          v-model="formData.email"
+          placeholder="email"
+          placeholder-style="color:#999;"
+        />
+      </view>
+      <view class="input-row">
+        <input
+          v-model="formData.code"
+          placeholder="verification code"
+          placeholder-style="color:#999;"
+        />
+        <button hover-class="none">get verification code</button>
+      </view>
+    </view>
+    <view v-else-if="type === 'Password'" class="input-view">
+      <view class="input-row">
+        <input
+          v-model="formData.password"
+          placeholder="password"
+          placeholder-style="color:#999;"
+        />
+      </view>
+      <view class="input-row">
+        <input
+          v-model="formData.confirmPassword"
+          placeholder="Confirm your password"
+          placeholder-style="color:#999;"
+        />
+      </view>
+    </view>
+  </Container>
+</template>
+
+<style scoped lang="scss">
+.container {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+}
+.input-view {
+  padding: 0 30rpx;
+  border-radius: 25rpx;
+  color: $uni-text-color-grey;
+  background: $uni-bg-color;
+  margin-top: 25rpx;
+  width: calc(100% - 100rpx);
+}
+.input-view > view:not(:first-child) {
+  border-top: 1rpx solid #e3e3e3;
+}
+.input-row {
+  display: flex;
+  align-items: center;
+  font-size: 26rpx;
+}
+.input-row > input {
+  padding: 30rpx 0;
+  flex: 1;
+}
+.input-row > button {
+  color: $uni-link-color;
+  font-size: 26rpx;
+  line-height: 36rpx;
+}
+</style>

src/pages/point-book-profile.vue

@@ -9,9 +9,9 @@ const { user } = storeToRefs(store);
 
 const editAvatar = ref(false);
 
-const toEditPage = () => {
+const toEditPage = (type) => {
   uni.navigateTo({
-    url: "/pages/point-book-edit",
+    url: "/pages/edit-profile?type=" + type,
   });
 };
 </script>
@@ -26,17 +26,17 @@ const toEditPage = () => {
     </view>
     <view class="body">
       <view>
-        <button hover-class="none">
+        <button hover-class="none" @click="toEditPage('Name')">
           <image src="../static/user-yellow.png" mode="widthFix" />
           <text>Name</text>
           <image src="../static/back-grey.png" mode="widthFix" />
         </button>
-        <button hover-class="none">
+        <button hover-class="none" @click="toEditPage('Email')">
           <image src="../static/email-yellow.png" mode="widthFix" />
           <text>Email</text>
           <image src="../static/back-grey.png" mode="widthFix" />
         </button>
-        <button hover-class="none">
+        <button hover-class="none" @click="toEditPage('Password')">
           <image src="../static/password-yellow.png" mode="widthFix" />
           <text>Password</text>
           <image src="../static/back-grey.png" mode="widthFix" />
@@ -158,7 +158,7 @@ const toEditPage = () => {
   top: 0;
   right: 0;
   width: 100vw;
-  background: rgba(0, 0, 0, 0.7);
+  background: rgba(0, 0, 0, 0.8);
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -175,7 +175,7 @@ const toEditPage = () => {
   margin-top: 100rpx;
   width: calc(100% - 150rpx);
   padding: 0 40rpx;
-  background: #585858;
+  background: #404040;
 }
 .edit-avatar > view > button {
   display: flex;

src/pages/point-book.vue

@@ -13,7 +13,7 @@ const store = useStore();
 const { updateUser } = store;
 const { user } = storeToRefs(store);
 
-const activeTab = ref(0);
+const activeTab = ref(2);
 const heat = ref(0);
 
 const isIOS = computed(() => {