Style(我的):背景图适配不同手机

pages/user/User/index.vue

@@ -6,12 +6,23 @@
     >
       <view class="my-hearder">
         <view class="my-header-bg">
-          <rich-text :nodes="myHeaderBgHtml" />
+          <image
+            v-if="statusBarHeight <= 20"
+            :src="webUrl + '/page/my/bg.png'"
+            mode="widthFix"
+            class="bg"
+          />
+          <image
+            v-else
+            :src="webUrl + '/page/my/bg-big.png'"
+            mode="widthFix"
+            class="bg"
+          />
         </view>
         <view class="my-header-body">
           <view
             :style="{
-              'padding-top': statusBarHeight
+              'padding-top': statusBarHeight + 'px'
             }"
             class="title"
           >
@@ -190,8 +201,12 @@
           </view>
         </view>
         <!-- 我的服务结束 -->
-        <view v-if="bannerHtml" class="banner-wrap">
+        <view v-if="bannerBgUrl" class="banner-wrap">
-          <rich-text :nodes="bannerHtml" />
+          <image
+            :src="bannerBgUrl"
+            mode="widthFix"
+            class="bg"
+          />
         </view>
       </view>
     </view>
@@ -225,39 +240,35 @@
 </template>
 
 <script>
-import {mapGetters, mapMutations} from "vuex";
+import {mapGetters, mapMutations} from "vuex"
 import {
   getSpreadImg,
   getUserInfo,
   getUserLevelInfo,
   noticeList,
   getUserCenterBanner
-} from "@/api/user";
+} from "@/api/user"
-import {isWeixin} from "@/utils";
+import {isWeixin} from "@/utils"
-import cookie from "@/utils/store/cookie";
+import cookie from "@/utils/store/cookie"
-
-const NAME = "User";
-var that;
 export default {
-  name: NAME,
+  name: 'UserPage',
-  props: {},
+  data() {
-  data: function () {
     return {
-      statusBarHeight: uni.getSystemInfoSync().statusBarHeight  + 'px',
+      statusBarHeight: uni.getSystemInfoSync().statusBarHeight,
       webUrl: this.$VUE_APP_RESOURCES_URL,
       isWeixin: false,
-      isInnOwer: false,//是否是客栈主
+      isInnOwer: false,// 是否是客栈主
       userLevelInfo: null,
       unreadMsgList: [],
       orderStatusNum: {
-        "completeCount": 0,
+        'completeCount': 0,
-        "evaluatedCount": 0,
+        'evaluatedCount': 0,
-        "orderCount": 0,
+        'orderCount': 0,
-        "receivedCount": 0,
+        'receivedCount': 0,
-        "refundCount": 0,
+        'refundCount': 0,
-        "sumPrice": 0,
+        'sumPrice': 0,
-        "unpaidCount": 0,
+        'unpaidCount': 0,
-        "unshippedCount": 0
+        'unshippedCount': 0
       },
       spreadPoster: {},
       toolList: [
@@ -316,53 +327,49 @@ export default {
           allowEnter: true
         }
       ],
-      myHeaderBgHtml: `<img src="${this.$VUE_APP_RESOURCES_URL}/page/my/bg.png" style="diaplay: block;max-width: 100%">`,
+      bannerBgUrl: ''
-      bannerHtml: ''
+    }
-    };
   },
-  computed: mapGetters(["userInfo"]),
+  computed: mapGetters(['userInfo']),
   watch: {
     userInfo(newVal) {
-      this.$set(this, 'orderStatusNum', newVal.orderStatusNum);
+      this.$set(this, 'orderStatusNum', newVal.orderStatusNum)
     }
   },
   onShow() {
     if (this.$store.getters.token) {
       uni.showLoading({
-        title: "加载中"
+        title: '加载中'
-      });
+      })
-      this.$store.dispatch("getUser", true);
+      this.$store.dispatch('getUser', true)
-      //获取用户等级信息
+      // 获取用户等级信息
-      this.getUserLevelInfo();
+      this.getUserLevelInfo()
-      // this.User();
+      this.isWeixin = isWeixin()
-      // this.MenuUser();
+      this.getUnreadMsgList()
-      this.isWeixin = isWeixin();
-      this.getUnreadMsgList();
     } else {
-      cookie.set("redirect", "/pages/user/User/index");
+      cookie.set('redirect', '/pages/user/User/index')
-
       uni.reLaunch({
-        url: "/pages/authorization/index"
+        url: '/pages/authorization/index'
       })
     }
   },
   onHide() {
-    this.updateAuthorizationPage(false);
+    this.updateAuthorizationPage(false)
   },
   methods: {
-    ...mapMutations(["updateAuthorizationPage"]),
+    ...mapMutations(['updateAuthorizationPage']),
     goRoomLogs() {
       uni.navigateTo({
-        url: "/pkg_common/views/roomLogs"
+        url: '/pkg_common/views/roomLogs'
       })
     },
     force2Decimal(v) {
-      return this.$force2Decimal(v);
+      return this.$force2Decimal(v)
     },
     innTagClick() {
       // 跳转到客栈主页
       this.$yrouter.push({
-        path: "/pagesInn/inn/innHome",
+        path: '/pagesInn/inn/innHome',
         query: {
           id: this.userInfo.hotel.id,
           isMyInn: true
@@ -370,105 +377,94 @@ export default {
       })
     },
     getSpreadPoster() {
-      var that = this;
+      const _this = this
       if (!this.spreadPoster.wap_poster) {
-        uni.showLoading();
+        uni.showLoading()
         getSpreadImg({}).then(res => {
-          uni.hideLoading();
+          uni.hideLoading()
-          that.spreadPoster = res.data[0];
+          _this.spreadPoster = res.data[0]
-          that.$refs.popup.open();
+          _this.$refs.popup.open()
         }, err => {
-            uni.hideLoading();
+            uni.hideLoading()
             uni.showToast({
               title: err.msg || err.response.data.msg || err.response.data.message,
-              icon: "none",
+              icon: 'none',
               duration: 2000
-            });
+            })
           }
-        );
+        )
       } else {
-        that.$refs.popup.open();
+        _this.$refs.popup.open()
       }
     },
     goReturnList() {
-      this.$yrouter.push("/pages/order/ReturnList/index");
+      this.$yrouter.push('/pages/order/ReturnList/index')
     },
     goMyOrder(type) {
       this.$yrouter.push({
-        path: "/pages/order/MyOrder/index",
+        path: '/pages/order/MyOrder/index',
         query: {
           type
         }
-      });
+      })
     },
     goUserAccount() {
       this.$yrouter.push({
-        path: "/pages/user/UserAccount/index"
+        path: '/pages/user/UserAccount/index'
-      });
+      })
     },
     goPersonalData() {
-      this.$yrouter.push("/pkg_user/views/personalData");
+      this.$yrouter.push('/pkg_user/views/personalData')
     },
     // 获取用户等级信息
     getUserLevelInfo: function () {
-      var that = this;
+      const _this = this
       getUserLevelInfo().then((res) => {
         if (res.data) {
-          that.userLevelInfo = res.data;
+          _this.userLevelInfo = res.data
         }
-        uni.hideLoading();
+        uni.hideLoading()
       }).catch(err => {
-        uni.hideLoading();
+        uni.hideLoading()
       }).finally(() => {
-        uni.hideLoading();
+        uni.hideLoading()
-      });
+      })
       // 海报
       getUserCenterBanner().then(res => {
         const { success, data } = res
         if (success) {
           if (data.userCenterBanner) {
-            this.bannerHtml = `<img src="${data.userCenterBanner}" style="display: block;max-width: 100%;" />`
+            this.bannerBgUrl = data.userCenterBanner
           }
         }
       })
     },
     User: function () {
-      let that = this;
+      const _this = this
-      debugger
       getUserInfo().then(res => {
-
         if (res.data) {
-          //that.user = res.data;
+          _this.$set(_this, 'orderStatusNum', res.data.orderStatusNum);
-          that.$set(that, 'orderStatusNum', res.data.orderStatusNum);
+          _this.$forceUpdate();
-          that.$forceUpdate();
           console.log('orderStatusNum:' + JSON.stringify(res.data.orderStatusNum));
         }
-
+      })
-      });
     },
     getUnreadMsgList: function () {
-      var params = {
+      const _this = this;
+      noticeList({
         limit: 99999,
         page: 1,
         readFlag: 'RF0'
-      }
+      }).then(res => {
-      // mescroll.endByPage(0, 0);
+        _this.unreadMsgList = res.data
-      // return;
+      }).catch(err => {
-      let that = this;
+        uni.showToast({
-      noticeList(params)
+          title: err + '',
-          .then(res => {
+          icon: 'none',
-
+          mask: false,
-            that.unreadMsgList = res.data;
+          duration: 1500
-
+        })
-          })
+      })
-          .catch(err => {
-            uni.showToast({
-              title: err + '',
-              icon: 'none',
-              mask: false,
-              duration: 1500
-            });
-          })
     },
     toolItemClickHandle(item) {
       const url = item.url
@@ -484,7 +480,7 @@ export default {
       uni.navigateTo({ url })
     }
   }
-};
+}
 </script>
 
 <style lang="less">
@@ -578,15 +574,23 @@ export default {
   }
   .banner-wrap {
     padding: 30rpx 0 0 0;
+    .bg {
+      width: 100%;
+    }
   }
 }
 .user-page {
+  width: 100%;
   background-color: #fff;
+  overflow-x: hidden;
   .my-hearder {
     position: relative;
     .my-header-bg {
       position: relative;
       z-index: 2;
+      .bg {
+        width: 100%;
+      }
     }
     .my-header-body {
       position: absolute;
@@ -606,7 +610,7 @@ export default {
       display: flex;
       justify-content: space-between;
       align-items: center;
-      padding: 60rpx;
+      padding: 50rpx 60rpx 60rpx 60rpx;
       color: #fff;
       .name-cont {
         .txt {
@@ -643,6 +647,7 @@ export default {
       }
       .avatar-cont {
         .img {
+          display: block;
           width: 78px;
           height: 78px;
           border-radius: 50%;