no message

api/user.js

@@ -50,3 +50,11 @@ export function profileApi(data) {
     data: data,
   })
 }
+// 获取vip列表
+export function vipRuleApi(data) {
+  return request({
+    url: '/wx/account/vipRule',
+    method: 'get',
+    data: data,
+  })
+}

pages.json

@@ -231,7 +231,16 @@
         "enablePullDownRefresh": false
       }
     }
-  ],
+      ,{
+            "path" : "pages/vip/vip",
+            "style" :                                                                                    
+            {
+                "navigationBarTitleText": "",
+                "enablePullDownRefresh": false
+            }
+            
+        }
+    ],
   "globalStyle": {
     "navigationBarTextStyle": "black",
     "navigationBarTitleText": "uni-app",

pages/mine/mine.vue

@@ -25,6 +25,7 @@
               mode="widthFix"
             ></image>
           </view>
+          <view class="name vip" @click="$navigateTo('/pages/vip/vip')">VIP0</view>
         </view>
       </view>
       <view class="row">

pages/vip/vip.vue

@@ -0,0 +1,150 @@
+<template>
+  <view class="container">
+    <view class="vipBox">
+      <view class="userInfo">
+        <image class="userPhoto" :src="userInfo.avatar"></image>
+        <view class="name">
+          {{ userInfo.nickname }}
+        </view>
+      </view>
+      <view class="vip">
+        <view class="vipLive">
+          <span class="color1">VIP</span>
+          <span class="color1" style="margin-left: 5px">{{ userInfo.userLevel }}</span>
+        </view>
+        <view class="tip" style="font-size: 10px; margin: 5px 0">
+          离升级还有{{ userInfo.nextLevelLeftAmount || 0 }}元 ({{ userInfo.consumeAmount || 0 }}/{{
+            userInfo.nextLevelAmount || 0
+          }})
+        </view>
+        <view class="progress">
+          <view class="progressActive" :style="'width:' + progressWidth + '%'"></view>
+        </view>
+      </view>
+    </view>
+    <view class="title">权益说明</view>
+    <view class="vipBox" style="display: flex; align-items: center" v-for="(item, index) in vipRule" :key="index">
+      <view class="left vipLive">
+        <span class="color1">VIP</span>
+        <span class="color1" style="margin-left: 5px">{{ item.vipLevel }}</span>
+      </view>
+      <view class="right">
+        <view class="row">获得条件：累计消费{{ item.minAmount }}元</view>
+        <view class="row" style="color: #969696">权益说明：达标获得{{ item.rewardOneIntegral }}积分奖励</view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+import { userInfoApi, vipRuleApi } from '@/api/user.js'
+export default {
+  data() {
+    return {
+      userInfo: {},
+      vipRule: [],
+    }
+  },
+  onShow() {
+    this.getUserInfo()
+    this.getVipRule()
+  },
+  computed: {
+    progressWidth() {
+      let num = 0
+      let consumeAmount = this.userInfo.consumeAmount || 0
+      let nextLevelAmount = this.userInfo.nextLevelAmount || 0
+      num = (consumeAmount / nextLevelAmount) * 100
+      num = num.toFixed(0)
+      return num
+    },
+  },
+  methods: {
+    getUserInfo() {
+      userInfoApi().then(res => {
+        this.userInfo = res.data
+      })
+    },
+    getVipRule() {
+      vipRuleApi().then(res => {
+        this.vipRule = res.data
+      })
+    },
+  },
+}
+</script>
+
+<style scoped lang="scss">
+.container {
+  background: linear-gradient(#ff8b45 0%, #ff9859 36%, #ffb9a9 100%);
+  overflow: auto;
+
+  .color1 {
+    background: linear-gradient(116deg, #fef5e4 0%, #f89eb2 62%, #aa91da 100%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+  }
+
+  .vipBox {
+    margin: 15px;
+    // background: #272833;
+    background: linear-gradient(160deg, #fef5e4 0%, #272833 36%, #717171 100%);
+    border-radius: 10px;
+    color: #fef7e4;
+    padding: 15px;
+
+    .right {
+      margin-left: 10px;
+      font-size: 12px;
+
+      .row {
+        margin: 5px 0;
+      }
+    }
+    .userInfo {
+      display: flex;
+      align-items: center;
+      margin-bottom: 10px;
+
+      .userPhoto {
+        width: 12vw;
+        height: 12vw;
+        border-radius: 50%;
+        position: relative;
+        background: #dedede;
+      }
+
+      .name {
+        margin-left: 10px;
+        font-weight: 600;
+        font-size: 14px;
+      }
+    }
+    .vipLive {
+      font-size: 20px;
+      font-weight: 600;
+    }
+    .vip {
+      .progress {
+        margin: 5px 0;
+        width: 100%;
+        height: 6px;
+        background: #fff;
+        border-radius: 3px;
+      }
+
+      .progressActive {
+        width: 0%;
+        height: 100%;
+        border-radius: 3px;
+        background: linear-gradient(116deg, #fef5e4 0%, #f89eb2 62%, #aa91da 100%);
+      }
+    }
+  }
+  .title {
+    margin: 20px 15px 10px 15px;
+    font-weight: 600;
+    color: #fff;
+  }
+}
+</style>