upp

miniProgram/components/authorize/index.less

@@ -10,11 +10,21 @@
       width: 80rpx;
       height: 80rpx;
       padding: 0;
-
+      position: relative;
       >image {
         width: 100%;
         height: 100%;
       }
+      .avatar-wrapperTxt{
+        color: #444b51;
+        pointer-events: none;
+        position: absolute;
+        top: 50%;
+        transform: translateY(-50%);
+        width: 100%;
+        text-align: center;
+        font-size: 12px;
+      }
     }
 
     >input {

miniProgram/components/authorize/index.wxml

@@ -2,14 +2,17 @@
 <view class="authcon">
   <view class="authbody">
     <button class="avatar-wrapper" open-type="chooseAvatar" bind:chooseavatar="onChooseAvatar">
+      <view class="avatar-wrapperTxt">
+        点击上传头像
+      </view>
       <image mode="aspectFit" class="avatar" src="{{avatarUrl}}"></image>
-    </button> 
+    </button>
     <input type="nickname" bindinput="bindKeyInput" value="{{inputNickName}}" maxlength="20" placeholder="请输入昵称" class="nameinput" />
     <input type="phone" bindinput="bindKeyPhone" value="{{inputPhone}}" maxlength="11" placeholder="请输入手机号" class="nameinput" />
 
     <view class="btn-area">
-      <image bindtap="onCancel" src="{{CDN_URL}}images/btn_cancel.png" mode="widthFix"/>
-      <image bindtap="onComfirm" src="{{CDN_URL}}images/btn_concert.png" mode="widthFix"/>
+      <image bindtap="onCancel" src="{{CDN_URL}}images/btn_cancel.png" mode="widthFix" />
+      <image bindtap="onComfirm" src="{{CDN_URL}}images/btn_concert.png" mode="widthFix" />
     </view>
   </view>
 </view>

miniProgram/components/authorize/index.wxss

@@ -5,21 +5,38 @@
   left: 50%;
   transform: translate(-50%, -50%);
 }
+
 .authcon .authbody .avatar-wrapper {
   width: 80rpx;
   height: 80rpx;
   padding: 0;
+  position: relative;
 }
-.authcon .authbody .avatar-wrapper > image {
+
+.avatar-wrapper .avatar-wrapperTxt {
+  pointer-events: none;
+  position: absolute;
+  top: 50%;
+  left: 0;
+  transform: translateY(-50%);
+  width: 100%;
+  text-align: center;
+  font-size: 12px;
+  color: #444b51;
+}
+
+.authcon .authbody .avatar-wrapper>image {
   width: 100%;
   height: 100%;
 }
-.authcon .authbody > input {
+
+.authcon .authbody>input {
   background: #ffffff;
   margin-top: 20rpx;
   padding: 6rpx 20rpx;
   border-radius: 8rpx;
 }
+
 .authcon .authbody .btn-area {
   display: flex;
   width: 100%;
@@ -27,6 +44,7 @@
   text-align: center;
   margin-top: 20rpx;
 }
-.authcon .authbody .btn-area > image {
+
+.authcon .authbody .btn-area>image {
   width: 48%;
-}
+}

web/package-lock.json

@@ -15,6 +15,7 @@
         "sass-loader": "^13.2.2",
         "vant": "^4.3.2",
         "vue": "^3.2.47",
+        "vue-lazyload": "^1.3.3",
         "vue-router": "^4.1.6"
       },
       "devDependencies": {
@@ -1541,6 +1542,11 @@
         "@vue/shared": "3.2.47"
       }
     },
+    "node_modules/vue-lazyload": {
+      "version": "1.3.5",
+      "resolved": "https://registry.npmmirror.com/vue-lazyload/-/vue-lazyload-1.3.5.tgz",
+      "integrity": "sha512-SCO/LWgCCbjaregHO4wg2buzITBdPBZRlIS104vERGpT88uxXsK26veuzZpgGAXMR8WpkaR+JDqz80OedpaLiA=="
+    },
     "node_modules/vue-router": {
       "version": "4.1.6",
       "resolved": "https://registry.npmmirror.com/vue-router/-/vue-router-4.1.6.tgz",
@@ -2592,6 +2598,11 @@
         "@vue/shared": "3.2.47"
       }
     },
+    "vue-lazyload": {
+      "version": "1.3.5",
+      "resolved": "https://registry.npmmirror.com/vue-lazyload/-/vue-lazyload-1.3.5.tgz",
+      "integrity": "sha512-SCO/LWgCCbjaregHO4wg2buzITBdPBZRlIS104vERGpT88uxXsK26veuzZpgGAXMR8WpkaR+JDqz80OedpaLiA=="
+    },
     "vue-router": {
       "version": "4.1.6",
       "resolved": "https://registry.npmmirror.com/vue-router/-/vue-router-4.1.6.tgz",

web/src/App.vue

@@ -17,8 +17,11 @@
   <template v-if="!$route.meta.outoflist">
     <Vmenu @clickIntro="isShowIntro = true" />
     <div @click="isShowIntegralDetail = true" class="integral-area">
-      <img :src="`${config.cdn_url}images/icon_integral.png`" alt="" />
-      <span>积分：{{ point }}</span>
+      <div class="userName">{{ userInfo.nickName }}</div>
+      <div class="userPoint">
+        <img :src="`${config.cdn_url}images/icon_integral.png`" alt="" />
+        <span>积分：{{ point }}</span>
+      </div>
     </div>
   </template>
 
@@ -141,21 +144,33 @@ body {
   .integral-area {
     position: absolute;
     right: 0;
-    bottom: 40px;
+    bottom: 20px;
     background: linear-gradient(
       270deg,
       rgba(171, 164, 142, 1),
       rgba(171, 164, 142, 0)
     );
-    display: flex;
-    align-items: center;
     padding: 0 20px 0 50px;
     z-index: 9;
-
-    > span {
+    .userName {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      color: #fff;
+      text-align: center;
+      max-width: 200px;
+      margin-top: 6px;
+    }
+    .userPoint {
+      display: flex;
+      align-items: center;
+      justify-content: center;
       color: #fff;
-      margin-left: 10px;
-      font-size: 14px;
+
+      > span {
+        margin-left: 10px;
+        font-size: 14px;
+      }
     }
   }
 

web/src/main.js

@@ -1,15 +1,25 @@
-import { createApp } from 'vue'
+import {
+  createApp
+} from 'vue'
 import App from './App.vue'
 import router from './router'
-import { setup } from '@/utils/componentHelper'
+import {
+  setup
+} from '@/utils/componentHelper'
 import http from '@/api/http.js'
-import Dialog, { Toast, Alert,Loading, DialogContent } from '@/plugin/dialog/index.js'
+import Dialog, {
+  Toast,
+  Alert,
+  Loading,
+  DialogContent
+} from '@/plugin/dialog/index.js'
 import '@/plugin/dialog/dialog.scss'
 import 'vant/lib/index.css';
 
 
+
 const components = setup(
-  Dialog, Toast, Alert, DialogContent,Loading
+  Dialog, Toast, Alert, DialogContent, Loading
 )
 
 
@@ -18,7 +28,18 @@ const CompoentsPlugin = (app) => {
 }
 
 const app = createApp(App)
+
+// 图片懒加载
+import {
+  Lazyload
+} from 'vant';
+app.use(Lazyload, {
+  loading: 'https://culture.4dage.com/hn_museum_game/images/default.png',
+  error: 'https://culture.4dage.com/hn_museum_game/images/default.png',
+  attempt: 1
+});
+
 app.config.globalProperties.config = config
 app.config.globalProperties.$Dialog = Dialog
 app.config.globalProperties.$http = http
-app.use(router).use(CompoentsPlugin).mount('#app');
+app.use(router).use(CompoentsPlugin).mount('#app');

web/src/views/Integral.vue

@@ -9,7 +9,7 @@
           广场
         </div>
       </div>
-      <ul>
+      <ul class="listBox">
         <li
           @click="onClickItem(item)"
           :class="{ active: item.id == active.id }"
@@ -17,9 +17,9 @@
           :key="item.id"
         >
           <div class="avatar">
-            <img :src="item.avatarUrl" alt="" />
+            <img v-lazy="item.avatarUrl" alt="" />
           </div>
-          <span>{{ item.nickName }}</span>
+          <span>{{ item.nickName ? item.nickName : "-" }}</span>
 
           <div class="like">
             <img
@@ -61,8 +61,12 @@ const current = ref({
 });
 
 const getList = async () => {
-  let result = (await http.get(`cms/model/getSort/${type.value}`)).data;
+  let result = (await http.get(`cms/model/getSort/${type.value}`))
+    .data;
   list.value = result.data;
+  // 回到顶部
+  const dom = document.querySelector(".listBox");
+  if (dom) dom.scrollTop = 0;
 };
 
 let ifrDom = document.querySelector("#ifr");
@@ -172,7 +176,7 @@ watch(
 
     > ul {
       margin-top: 10px;
-      height: calc(100% - 50px);
+      height: calc(100% - 100px);
       overflow-y: auto;
       overflow-x: hidden;
 

web/yarn.lock

@@ -799,6 +799,11 @@
   optionalDependencies:
     "fsevents" "~2.3.2"
 
+"vue-lazyload@^1.3.3":
+  "integrity" "sha512-SCO/LWgCCbjaregHO4wg2buzITBdPBZRlIS104vERGpT88uxXsK26veuzZpgGAXMR8WpkaR+JDqz80OedpaLiA=="
+  "resolved" "https://registry.npmmirror.com/vue-lazyload/-/vue-lazyload-1.3.5.tgz"
+  "version" "1.3.5"
+
 "vue-router@^4.1.6":
   "integrity" "sha512-DYWYwsG6xNPmLq/FmZn8Ip+qrhFEzA14EI12MsMgVxvHFDYvlr4NXpVF5hrRH1wVcDP8fGi5F4rxuJSl8/r+EQ=="
   "resolved" "https://registry.npmmirror.com/vue-router/-/vue-router-4.1.6.tgz"