debug

README.md

@@ -2,8 +2,6 @@
 
 # 使用 Vue 模仿抖音, 本项目持续更新
 
-### 开源不易，麻烦给个 Star★ 吧(☺️ 右上角点击 ★Star，轻轻松松，一秒钟 🤣)！我会根据大家的关注度和个人时间持续更新代码！
-
 ## 开发进度
  
 页面|进度

src/pages/me/Me.vue

@@ -30,8 +30,8 @@
             <header ref="header" @click="previewImg = require('../../assets/img/header-bg.png')"></header>
             <div class="detail">
               <div class="head">
-                <img src="../../assets/img/icon/avatar/2.png" class="head-image"
-                     @click="previewImg = require('../../assets/img/icon/avatar/2.png')">
+                <img  :src="$imgPreview(userinfo.avatar)" class="head-image"
+                     @click="previewImg = userinfo.avatar">
                 <div class="heat">
                   <div class="text" @click="isShowStarCount = true">
                     <span>获赞</span>
@@ -212,11 +212,11 @@
       <SlideItem style="min-width: 70vw; overflow:auto;">
         <transition name="fade1">
           <div class="ul" v-if="!isMoreFunction">
-            <div class="li" @click="$nav('/my-card')">
+            <div class="li" @click="$no">
               <img src="../../assets/img/icon/newicon/left_menu/shopping.png" alt="">
               <span>我的订单</span>
             </div>
-            <div class="li" @click="$nav('MyCard')">
+            <div class="li" @click="$no">
               <img src="../../assets/img/icon/newicon/left_menu/wallet.png" alt="">
               <span>钱包</span>
             </div>

src/pages/me/MyCard.vue

@@ -8,7 +8,7 @@
     <div class="content">
       <div class="qrcode">
         <img class="qrcode-bg" src="../../assets/img/icon/me/code-bg.png" alt="">
-        <img class="avatar" src="../../assets/img/icon/avatar/7.png" alt="">
+        <img class="avatar" :src="$imgPreview(userinfo.avatar)" alt="">
       </div>
 
       <span class="name">ZZZZZZZZZZ</span>
@@ -42,12 +42,14 @@
 import Share from "../../components/Share";
 import ConfirmDialog from "../../components/dialog/ConfirmDialog";
 import ShareToFriend from "../home/components/ShareToFriend";
+import {mapState} from "vuex";
 
 export default {
   name: "MyCard",
   components: {
     Share,
   },
+
   data() {
     return {
       isSharing: false,
@@ -79,7 +81,9 @@ export default {
   created() {
 
   },
-  computed: {},
+  computed: {
+    ...mapState(['userinfo'])
+  },
   methods: {
     delayShowDialog(cb) {
       setTimeout(() => {

src/pages/me/MyMusic.vue

@@ -14,7 +14,8 @@
         <GuessMusic :list="guessMusic"/>
       </SlideItem>
       <SlideItem style="overflow: auto;">
-        <div class="my-collect">
+        <Loading style="left: 150%;" v-if="loading"/>
+        <div v-else class="my-collect">
           <div class="wrapper">
             <div class="play-all">
               <div class="left">
@@ -98,8 +99,6 @@
         </div>
       </SlideItem>
     </SlideRowList>
-
-
     <transition name="my-collect-dialog">
       <div class="my-collect-dialog" v-show="isShowCollectDialog">
         <div class="dialog-header">
@@ -114,15 +113,13 @@
 </template>
 <script>
 import {mapState} from "vuex";
-import globalMethods from "../../utils/global-methods";
-import {nextTick} from "vue";
-import gaobaiqiqiu from '../../assets/data/lyrics/gaobaiqiqiu.lrc'
 import Switches from "../message/components/swtich/switches";
 import SlideItemMusic from "./components/SlideItemMusic";
 import IndicatorLight from "../../components/slide/IndicatorLight";
 import FromBottomDialog from "../../components/dialog/FromBottomDialog";
 import GuessMusic from "./components/GuessMusic";
 import CollectMusic from "./components/CollectMusic";
+import Loading from "../../components/Loading";
 
 //TODO 两个page页面的播放冲突未做
 export default {
@@ -133,10 +130,12 @@ export default {
     SlideItemMusic,
     IndicatorLight,
     GuessMusic,
-    CollectMusic
+    CollectMusic,
+    Loading
   },
   data() {
     return {
+      loading: false,
       slideIndex: 1,
       currentMusic: {
         name: '告白气球',
@@ -159,7 +158,7 @@ export default {
       isCollect: false,
 
       page2SlideIndex: -1,
-      page2IsPlay: false
+      page2IsPlay: false,
     }
   },
   computed: {

src/pages/me/userinfo/EditUserInfo.vue

@@ -11,7 +11,7 @@
     <div class="userinfo">
       <div class="change-avatar">
         <div class="avatar-ctn" @click="showAvatarDialog">
-          <img class="avatar" src="../../../assets/img/icon/avatar/6.png" alt="">
+          <img class="avatar" :src="$imgPreview(userinfo.avatar)" alt="">
           <img class="change" src="../../../assets/img/icon/me/camera-light.png" alt="">
         </div>
         <span>点击更换头像</span>
@@ -67,7 +67,12 @@
         </div>
       </div>
     </div>
-
+    <transition name="fade">
+      <div class="preview-img" v-if="previewImg" @click="previewImg = ''">
+        <img class="resource" :src="previewImg" alt="">
+        <img class="download" src="../../../assets/img/icon/components/video/download.png" alt="" @click.stop="$no">
+      </div>
+    </transition>
   </div>
 </template>
 
@@ -89,8 +94,9 @@ export default {
         {id: 1, name: '拍一张'},
         {id: 2, name: '从相册选择'},
         {id: 3, name: '查看大图'},
-        {id: 4, name: '查看大图'},
-      ]
+        {id: 4, name: '取消'},
+      ],
+      previewImg: '',
     }
   },
   computed: {
@@ -113,7 +119,14 @@ export default {
     },
     showAvatarDialog() {
       this.$showSelectDialog(this.avatarList, e => {
-        console.log(e)
+        switch (e.id) {
+          case 1:
+          case 2:
+            return this.$no()
+          case 3:
+            this.previewImg = this.userinfo.avatar
+            break
+        }
       })
     },
     showBirthdayDialog() {
@@ -169,6 +182,33 @@ export default {
   }
 }
 
+.preview-img {
+  z-index: 9;
+  position: fixed;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  top: 0;
+  background: black;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  .resource {
+    width: 100vw;
+    max-height: 100vw;
+  }
+
+  .download {
+    position: absolute;
+    bottom: 2rem;
+    right: 2rem;
+    padding: .3rem;
+    background: @second-btn-color-tran;
+    width: 2rem;
+  }
+}
+
 .userinfo {
   padding-top: 6rem;
   color: white;

src/store/index.js

@@ -22,7 +22,7 @@ const store = Vuex.createStore({
       "unique_id_modify_time": "1630393144",
       "unique_id": "10040050",
       "favoriting_count": 143,
-      "avatar": require('../assets/img/icon/avatar/1.png'),
+      "avatar": require('../assets/img/icon/avatar/2.png'),
       "city": "成都",
       "province": '四川',
       "country": "中国",