update vue3

pages/mine/info/edit.vue

@@ -20,75 +20,72 @@
   </view>
 </template>
 
-<script>
+<script setup>
   import { getUserProfile } from "@/api/system/user"
   import { updateUserProfile } from "@/api/system/user"
+  import { ref , getCurrentInstance } from "vue"
+  import { onReady } from  "@dcloudio/uni-app"
 
-  export default {
-    data() {
-      return {
-        user: {
-          nickName: "",
-          phonenumber: "",
-          email: "",
-          sex: ""
-        },
-        sexs: [{
-          text: '男',
-          value: "0"
-        }, {
-          text: '女',
-          value: "1"
-        }],
-        rules: {
-          nickName: {
-            rules: [{
-              required: true,
-              errorMessage: '用户昵称不能为空'
-            }]
-          },
-          phonenumber: {
-            rules: [{
-              required: true,
-              errorMessage: '手机号码不能为空'
-            }, {
-              pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
-              errorMessage: '请输入正确的手机号码'
-            }]
-          },
-          email: {
-            rules: [{
-              required: true,
-              errorMessage: '邮箱地址不能为空'
-            }, {
-              format: 'email',
-              errorMessage: '请输入正确的邮箱地址'
-            }]
-          }
-        }
-      }
+  const { proxy } = getCurrentInstance()
+  const user = ref({
+    nickName: "",
+    phonenumber: "",
+    email: "",
+    sex: ""
+  })
+  const sexs = [{
+    text: '男',
+    value: "0"
+  }, {
+    text: '女',
+    value: "1"
+  }]
+  const rules = ref({
+    nickName: {
+      rules: [{
+        required: true,
+        errorMessage: '用户昵称不能为空'
+      }]
     },
-    onLoad() {
-      this.getUser()
+    phonenumber: {
+      rules: [{
+        required: true,
+        errorMessage: '手机号码不能为空'
+      }, {
+        pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
+        errorMessage: '请输入正确的手机号码'
+      }]
     },
-    onReady() {
-      this.$refs.form.setRules(this.rules)
-    },
-    methods: {
-      getUser() {
-        getUserProfile().then(response => {
-          this.user = response.data
-        })
-      },
-      submit(ref) {
-        this.$refs.form.validate().then(res => {
-          updateUserProfile(this.user).then(response => {
-            this.$modal.msgSuccess("修改成功")
-          })
-        })
-      }
+    email: {
+      rules: [{
+        required: true,
+        errorMessage: '邮箱地址不能为空'
+      }, {
+        format: 'email',
+        errorMessage: '请输入正确的邮箱地址'
+      }]
     }
+  })
+
+  function getUser() {
+    getUserProfile().then(response => {
+      user.value = response.data
+    })
   }
+
+  function submit(ref) {
+    proxy.$refs.form.validate().then(res => {
+      updateUserProfile(user.value).then(response => {
+        proxy.$modal.msgSuccess("修改成功")
+      })
+    })
+  }
+
+  onReady(() => {
+    proxy.$refs.form.setRules(rules.value)
+  })
+
+  getUser()
 </script>
 
 <style lang="scss" scoped>

pages/mine/info/index.vue

@@ -11,30 +11,23 @@
   </view>
 </template>
 
-<script>
+<script setup>
   import { getUserProfile } from "@/api/system/user"
+  import { ref, reactive } from "vue"
 
-  export default {
-    data() {
-      return {
-        user: {},
-        roleGroup: "",
-        postGroup: ""
-      }
-    },
-    onLoad() {
-      this.getUser()
-    },
-    methods: {
-      getUser() {
-        getUserProfile().then(response => {
-          this.user = response.data
-          this.roleGroup = response.roleGroup
-          this.postGroup = response.postGroup
-        })
-      }
-    }
+  const user = ref({})
+  const roleGroup = ref("")
+  const postGroup = ref("")
+
+  function getUser() {
+    getUserProfile().then(response => {
+      user.value = response.data
+      roleGroup.value = response.roleGroup
+      postGroup.value = response.postGroup
+    })
   }
+
+  getUser()
 </script>
 
 <style lang="scss">