完善我的信息页面

@@ -14,6 +14,7 @@ declare module '@vue/runtime-core' {
     NavBar: typeof import('./src/components/navBar.vue')['default']
     NutActionSheet: typeof import('@nutui/nutui-taro')['ActionSheet']
     NutAvatar: typeof import('@nutui/nutui-taro')['Avatar']
+    NutAvatarCropper: typeof import('@nutui/nutui-taro')['AvatarCropper']
     NutButton: typeof import('@nutui/nutui-taro')['Button']
     NutCalendar: typeof import('@nutui/nutui-taro')['Calendar']
     NutCol: typeof import('@nutui/nutui-taro')['Col']

 <!--
  * @Date: 2023-12-13 11:13:13
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2023-12-18 16:20:57
+ * @LastEditTime: 2023-12-19 10:12:17
  * @FilePath: /meihuaApp/src/pages/my/index.vue
  * @Description: 文件描述
 -->
@@ -10,7 +10,7 @@
     <view id="avator" style="position: relative; display: flex; align-items: center; background-color: #3A2013; color: #FFF; padding: 40rpx 0 40rpx 25rpx;">
       <view style="flex: 6; display: flex; align-items: center;">
         <nut-avatar size="60" style="border: 1px solid #fff;">
-          <img src="https://img12.360buyimg.com/imagetools/jfs/t1/196430/38/8105/14329/60c806a4Ed506298a/e6de9fb7b8490f38.png" />
+          <img style="border-radius: 50%;" src="https://img.yzcdn.cn/vant/cat.jpeg" />
         </nut-avatar>
         <text style="margin-left: 30rpx;">阿忆妞妞</text>
       </view>

-.red {
-  color: red;
+.nut-input {
+  border-radius: 50rpx;
 }

 <!--
  * @Date: 2022-09-19 14:11:06
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2022-09-30 10:00:57
- * @FilePath: /swx/src/pages/demo/index.vue
+ * @LastEditTime: 2023-12-19 10:29:32
+ * @FilePath: /meihuaApp/src/pages/myInfo/index.vue
  * @Description: 文件描述
 -->
 <template>
-  <div class="red">{{ str }}</div>
+  <view>
+    <view style="display: flex; align-items: center; justify-content: center; flex-direction: column; margin-top: 50rpx; margin-bottom: 50rpx; position: relative;">
+        <nut-avatar size="100">
+          <img :src="imageUrl" style="border-radius: 50%;" @tap="uploadImg"/>
+        </nut-avatar>
+        <view style="position: absolute; right: calc(50% - 50rpx); bottom: 10rpx; width: 100rpx; height: 40rpx; color: #FFF; display: flex; align-items: center; justify-content: center;font-size: 28rpx;">编辑</view>
+    </view>
+    <view style="margin: 30rpx 40rpx;">
+      <nut-row type="flex" justify="center" align="center">
+        <nut-col span="4">姓名</nut-col>
+        <nut-col span="20">
+          <view style="border: 1px solid #F1EBDF; width: 90%; border-radius: 50rpx; padding: 5rpx 0;">
+            <nut-input v-model="username" placeholder="请输入姓名" :border="false" />
+          </view>
+        </nut-col>
+      </nut-row>
+    </view>
+    <view style="margin: 30rpx 40rpx;">
+      <nut-row type="flex" justify="center" align="center">
+        <nut-col span="4">电话</nut-col>
+        <nut-col span="20">
+          <view style="border: 1px solid #F1EBDF; width: 90%; border-radius: 50rpx; padding: 5rpx 0;">
+            <nut-input v-model="tel" placeholder="请输入电话" :border="false" type="number" />
+          </view>
+        </nut-col>
+      </nut-row>
+    </view>
+    <view style="margin: 50rpx 40rpx;">
+      <nut-button @tap="save" block color="#6A4925" size="large"><text style="font-size: 33rpx; font-weight: bold;">保&nbsp;存</text></nut-button>
+    </view>
+  </view>
 </template>
 
 <script setup>
 import Taro from '@tarojs/taro'
 import { ref } from "vue";
+
+const username = ref('');
+const tel = ref('');
+
+const imageUrl = ref(
+  'https://img.yzcdn.cn/vant/cat.jpeg'
+);
+const cutImage = (url) => {
+  console.warn(url);
+  imageUrl.value = url;
+};
+
+const uploadImg = () => {
+  Taro.chooseImage({
+    count: 1,
+    success: (res) => {
+      console.warn(res);
+      const tempFilePaths = res.tempFilePaths[0];
+      console.warn(tempFilePaths);
+      imageUrl.value = tempFilePaths;
+    }
+  })
+}
+
+const save = () => {
+  console.warn(username.value, tel.value);
+  Taro.showToast({
+    title: '保存成功',
+    icon:'success',
+    duration: 2000
+  });
+}
 </script>
 
 <script>
 import "./index.less";
 export default {
-  name: "demoPage",
+  name: "myInfoPage",
 };
 </script>