个人信息回显

src/store/index.ts

@@ -4,8 +4,44 @@ import { createStore } from 'vuex'
 export default createStore({
   state: {
     userinfo:{
-      username: "username",
+      accesstoken: "",
-      head: ""
+      api_token: "",
+      birthday: "",
+      country: "",
+      cover: "",
+      created_at: "",
+      currency: 2,
+      deleted_at: null,
+      desc: "",
+      email: "",
+      img: "",
+      interest: "",
+      language: "中文",
+      live: "",
+      livetime: "",
+      login_type: 0,
+      memberid: 0,
+      mobile: "",
+      money: "",
+      msg: "",
+      mtongue: "",
+      name: "",
+      password: "",
+      position: 0,
+      publish: 0,
+      score: "",
+      status: true,
+      tlanguage: "",
+      type: 0,
+      uid: "",
+      updated_at: "",
+      video: "",
+      willsay: [{
+        "name": "请选择",
+        "level": 0
+      }],
+      zoneStr: "中途岛GMT-11:00",
+      zoneid: 0
     },
     islogin: false
   },

src/views/mine/Archives.vue

@@ -49,9 +49,9 @@
                         <div class="label">我还会说</div>
                         <div class="speak-array">
                             <div class="lang-items">
-                                <div class="speak-item" v-for="(lang, index) in formData.speakLang" :key="index">
+                                <div class="speak-item" v-for="(lang, indexs) in userinfo.willsay" :key="indexs">
                                     <a-select
-                                        v-model:value="lang.lang"
+                                        v-model:value="lang.name"
                                         style="width: 171px"
                                         size="small"
                                         ref="select"
@@ -64,9 +64,10 @@
                                     <div class="proficiency">
                                         <div class="p-title">熟练度</div>
                                         <div class="value">
-                                            <a-rate v-model:value="lang.proficiency" style="fontSize: 15px">
+                                            <!-- <a-rate v-model:value="lang.proficiency" style="fontSize: 15px">
-                                                <template v-slot:character><SmileOutlined /></template>
+                                                <template v-slot:character><img src="" style="width: 10px;height: 10px;background-color: #0f0;"/>{{}}</template>
-                                            </a-rate>
+                                            </a-rate> -->
+                                            <img @click="setlevel(indexs, i)" v-for="i in 5" :key="i" :src="lang.level >= i ? smilet : smile" alt="" />
                                         </div>
                                     </div>
                                 </div>
@@ -116,7 +117,7 @@
                 <div class="main-container">
                     <div class="input-box mailbox">
                         <div class="label">邮箱</div>
-                        <a-input size="small" v-model:value="userinfo.mail" placeholder="请输入邮箱" />
+                        <a-input size="small" v-model:value="userinfo.email" placeholder="请输入邮箱" />
                     </div>
                     <div class="input-box phone-box">
                         <div class="label">手机号</div>
@@ -259,16 +260,17 @@
 
 <script lang="ts">
 import { computed, defineComponent, reactive, Ref, ref } from "vue";
-import { UserOutlined, SmileOutlined, PlaySquareOutlined } from '@ant-design/icons-vue';
+import { UserOutlined, PlaySquareOutlined } from '@ant-design/icons-vue';
 import NavBottom from '@/components/NavBottom.vue';
 import { uploadflie } from "@/utils/vod"
 import store from '@/store';
+import smile from "@/static/images/smile.png"
+import smilet from "@/static/images/smilet.png"
 
 export default defineComponent({
     name: "Archives",
     components: {
         UserOutlined,
-        SmileOutlined,
         PlaySquareOutlined,
         NavBottom
     },
@@ -281,25 +283,9 @@ export default defineComponent({
             lang: '请选择',
             proficiency: 0,
         }];
-        const formBasic = {
-            name: 'Lorem Sum',
-            country: '美国',
-            address: '',
-            teachingLang: '英语',
-            speakLang: otherSpeak,
-            nativeLang: '英语',
-            shortVideo: '',
-            introduce: '',
-            mail: '',
-            phone: '136 **** 6111',
-            password: '***********',
-            timeZone: '北京 GMT +08:00',
-            currency: '人民币',
-            language: '中文',
-        }
         const userinfo = computed(() => store.state.userinfo)
         // 表单数据
-        const formData = reactive(formBasic);
+        const formData = reactive(store.state.userinfo);
         
         const modalNode = () => document.getElementsByClassName('modal-container')[0]
         /**
@@ -314,9 +300,9 @@ export default defineComponent({
          * @return { void }
          */
         function addSpeakLang (): void {
-            formData.speakLang.push({
+            store.state.userinfo.willsay.push({
-                lang: '请选择',
+                name: '请选择',
-                proficiency: 0,
+                level: 4
             });
         }
         // 验证码
@@ -441,7 +427,11 @@ export default defineComponent({
             });
             console.log(res)
         }
-        // uploadflie()
+        // uploadflie()3.
+
+        function setlevel(index: number, level: number){
+            store.state.userinfo.willsay[index].level = level
+        }
         return {
             modalNode,
             formData,
@@ -464,7 +454,10 @@ export default defineComponent({
             updateUserPassword,
             submitInfo,
             userinfo,
-            uploads
+            uploads,
+            smile,
+            smilet,
+            setlevel
         }
     }
 });
@@ -566,6 +559,14 @@ export default defineComponent({
                                         color: #808080;
                                         margin-right: 14px;
                                     }
+                                    .value{
+                                        display: flex;
+                                        >img{
+                                            width: 15px;
+                                            height: 15px;
+                                            margin-right: 6px;
+                                        }
+                                    }
                                 }
                             }
                         }