mineui

pages.json

@@ -42,6 +42,7 @@
     {
       "path": "pages/mine/mine",
       "style": {
+        "navigationStyle": "custom",
         "navigationBarTitleText": "我的",
         "enablePullDownRefresh": false
       }

pages/mine/mine.vue

@@ -1,79 +1,164 @@
 <template>
-  <view class="container">
-    <view class="user">
-      <view class="userInfo">
-        <image @click="toUserInfo" class="userPhoto" :src="userInfo.avatar"></image>
-        <uni-badge class="message" :text="massageNum" absolute="rightTop" size="small" :max-num="99" :offset="[4, 4]">
-          <image
-            class="icon"
-            :src="'https://file.rongcyl.cn/festatic/bkm/imgv2/mine/massage.png'"
-            mode="widthFix"
-            @click="$navigateTo('/pages/message/message')"
-          ></image>
-        </uni-badge>
-        <view class="info">
-          <view class="name" v-if="hasLogin">
-            {{ userInfo.nickname || '' }}
-          </view>
-          <view class="loginText" @click="toLogin" v-else>点击登录</view>
-          <view class="id">
-            ID:
-            <span v-if="hasLogin">{{ userId || '' }}</span>
-            <image
-              class="copy"
-              :src="'https://file.rongcyl.cn/festatic/bkm/imgv2/mine/copy.png'"
-              mode="widthFix"
-            ></image>
-          </view>
-          <view class="name vip" @click="$navigateTo('/pages/vip/vip')">VIP0</view>
-        </view>
-      </view>
-      <view class="row">
-        <view class="box" @click="$navigateTo('/pages/integralRecord/integralRecord')">
-          <view class="value" style="color: #ff2c43">
-            {{ userInfoDetail.integral || 0 }}
-          </view>
-          <view class="label">积分</view>
-        </view>
-        <view class="box" @click="$navigateTo('/pages/coupon/coupon')">
-          <view class="value">
-            {{ userInfoDetail.couponNum || 0 }}
-          </view>
-          <view class="label">优惠券</view>
-        </view>
-      </view>
-    </view>
-    <view class="menus">
-      <view class="title">
-        <image :src="'https://file.rongcyl.cn/festatic/bkm/imgv2/mine/title.png'" mode=""></image>
-      </view>
-      <view class="menuList">
-        <view class="menu" @click="pageTo('/pages/addressManage/addressManage')">
-          <image :src="'https://file.rongcyl.cn/festatic/bkm/imgv2/mine/menu1.png'"></image>
+  <view style="overflow: scroll; background-color: #232428">
+    <img
+      src="https://file.rongcyl.cn/festatic/bkm/mine/mine_bgt.png"
+      style="width: 100%; height: 658rpx; position: absolute; z-index: 99"
+    />
+    <div style="width: 100%; height: 658rpx; z-index: 100; position: relative">
+      <div
+        :style="{
+          color: '#fff',
+          'margin-top': menuButton.top + 'px',
+          'line-height': menuButton.height + 'px',
+          textAlign: 'center',
+        }"
+      >
+        123
+      </div>
+    </div>
+    <div
+      style="
+        margin-top: -350rpx;
+        height: calc(100vh - 388rpx);
+        width: 100vw;
+        position: relative;
+        z-index: 100;
+        background: url(https://file.rongcyl.cn/festatic/bkm/mine/mine_bg.png) no-repeat;
+        background-size: cover;
+        color: #bbbcc3;
+        padding: 0 30rpx;
+        box-sizing: border-box;
+        padding-top: 100rpx;
+      "
+    >
+      <div class="flex justify-between items-center">
+        <div class="fs14">我的订单</div>
+        <div class="flex items-center">
+          <span class="fs12">查看全部</span>
+          <img
+            class="ml-2 inline-block"
+            src="https://file.rongcyl.cn/festatic/bkm/arrow.png"
+            style="width: 28rpx; height: 28rpx"
+          />
+        </div>
+      </div>
+      <div class="flex justify-around my-5 fs12 text-center">
+        <div>
+          <img src="https://file.rongcyl.cn/festatic/bkm/mine/t1.png" style="width: 100rpx; height: 100rpx" />
+          <div class="mt-1">待发货</div>
+        </div>
+        <div>
+          <img src="https://file.rongcyl.cn/festatic/bkm/mine/t2.png" style="width: 100rpx; height: 100rpx" />
+          <div class="mt-1">待收货</div>
+        </div>
+        <div>
+          <img src="https://file.rongcyl.cn/festatic/bkm/mine/t3.png" style="width: 100rpx; height: 100rpx" />
+          <div class="mt-1">已完成</div>
+        </div>
+        <div>
+          <img src="https://file.rongcyl.cn/festatic/bkm/mine/t4.png" style="width: 100rpx; height: 100rpx" />
+          <div class="mt-1">消费记录</div>
+        </div>
+      </div>
+      <div class="flex justify-between fs14 items-center border-t border-zinc-600" style="height: 92rpx">
+        <div class="flex items-center">
+          <img
+            src="https://file.rongcyl.cn/festatic/bkm/mine/s1.png"
+            class="inline-block mr-2"
+            style="width: 32rpx; height: 32rpx"
+          />
+          <span>常见问题</span>
+        </div>
+        <img
+          src="https://file.rongcyl.cn/festatic/bkm/arrow.png"
+          style="width: 28rpx; height: 28rpx; display: inline-block"
+        />
+      </div>
+      <div class="flex justify-between fs14 items-center border-t border-zinc-600" style="height: 92rpx">
+        <div class="flex items-center">
+          <img
+            src="https://file.rongcyl.cn/festatic/bkm/mine/s2.png"
+            class="inline-block mr-2"
+            style="width: 32rpx; height: 32rpx"
+          />
+          <span>意见反馈</span>
+        </div>
+        <img
+          src="https://file.rongcyl.cn/festatic/bkm/arrow.png"
+          style="width: 28rpx; height: 28rpx; display: inline-block"
+        />
+      </div>
+      <div class="flex justify-between fs14 items-center border-t border-zinc-600" style="height: 92rpx">
+        <div class="flex items-center">
+          <img
+            src="https://file.rongcyl.cn/festatic/bkm/mine/s3.png"
+            class="inline-block mr-2"
+            style="width: 32rpx; height: 32rpx"
+          />
+          <span>加入群组</span>
+        </div>
+        <img
+          src="https://file.rongcyl.cn/festatic/bkm/arrow.png"
+          style="width: 28rpx; height: 28rpx; display: inline-block"
+        />
+      </div>
+      <div class="flex justify-between fs14 items-center border-t border-zinc-600" style="height: 92rpx">
+        <div class="flex items-center">
+          <img
+            src="https://file.rongcyl.cn/festatic/bkm/mine/s4.png"
+            class="inline-block mr-2"
+            style="width: 32rpx; height: 32rpx"
+          />
+          <span>联系客服</span>
+        </div>
+        <img
+          src="https://file.rongcyl.cn/festatic/bkm/arrow.png"
+          style="width: 28rpx; height: 28rpx; display: inline-block"
+        />
+      </div>
+      <div class="flex justify-between fs14 items-center border-t border-zinc-600" style="height: 92rpx">
+        <div class="flex items-center">
+          <img
+            src="https://file.rongcyl.cn/festatic/bkm/mine/s5.png"
+            class="inline-block mr-2"
+            style="width: 32rpx; height: 32rpx"
+          />
           <span>地址管理</span>
-        </view>
-        <view class="menu" @click="pageTo('/pages/consumptionRecords/consumptionRecords')">
-          <image :src="'https://file.rongcyl.cn/festatic/bkm/imgv2/mine/menu2.png'"></image>
-          <span>消费记录</span>
-        </view>
-        <view class="menu" @click="showQRcode">
-          <image :src="'https://file.rongcyl.cn/festatic/bkm/imgv2/mine/menu3.png'"></image>
-          <span>加群交流</span>
-        </view>
-        <view class="menu" @click="$navigateTo('/pages/rule/rule', { type: 0 })">
-          <image :src="'https://file.rongcyl.cn/festatic/bkm/imgv2/mine/menu4.png'"></image>
+        </div>
+        <img
+          src="https://file.rongcyl.cn/festatic/bkm/arrow.png"
+          style="width: 28rpx; height: 28rpx; display: inline-block"
+        />
+      </div>
+      <div class="flex justify-between fs14 items-center border-t border-zinc-600" style="height: 92rpx">
+        <div class="flex items-center">
+          <img
+            src="https://file.rongcyl.cn/festatic/bkm/mine/s6.png"
+            class="inline-block mr-2"
+            style="width: 32rpx; height: 32rpx"
+          />
           <span>游戏规则</span>
-        </view>
-        <view class="menu" @click="$navigateTo('/pages/userAgreement/userAgreement')">
-          <image :src="'https://file.rongcyl.cn/festatic/bkm/imgv2/mine/menu5.png'"></image>
+        </div>
+        <img
+          src="https://file.rongcyl.cn/festatic/bkm/arrow.png"
+          style="width: 28rpx; height: 28rpx; display: inline-block"
+        />
+      </div>
+      <div class="flex justify-between fs14 items-center border-t border-b border-zinc-600" style="height: 92rpx">
+        <div class="flex items-center">
+          <img
+            src="https://file.rongcyl.cn/festatic/bkm/mine/s7.png"
+            class="inline-block mr-2"
+            style="width: 32rpx; height: 32rpx"
+          />
           <span>用户协议</span>
-        </view>
-        <button class="menu btn" open-type="contact">
-          <image :src="'https://file.rongcyl.cn/festatic/bkm/imgv2/mine/menu6.png'"></image>
-          <span>联系客服</span>
-        </button>
-      </view>
-    </view>
+        </div>
+        <img
+          src="https://file.rongcyl.cn/festatic/bkm/arrow.png"
+          style="width: 28rpx; height: 28rpx; display: inline-block"
+        />
+      </div>
+    </div>
     <uni-popup class="popup" ref="popup" type="center">
       <image
         class="qrcodeImg"
@@ -97,8 +182,24 @@ export default {
       hasLogin: false,
       userInfoDetail: {},
       massageNum: 0,
+      safeAreaTop: 0,
+      menuButton: {
+        top: 0,
+        height: 0,
+      },
     }
   },
+  created() {
+    const { top, height } = wx.getMenuButtonBoundingClientRect()
+    this.menuButton.top = top
+    this.menuButton.height = height
+    wx.getSystemInfo({
+      success: res => {
+        console.log(res.safeArea)
+        this.safeAreaTop = res.safeArea.top + 'px'
+      },
+    })
+  },
   onShow() {
     // this.userInfo = wx.getStorageSync('userInfo');
     this.userId = wx.getStorageSync('userId')
@@ -164,131 +265,7 @@ export default {
     border: none;
   }
 }
-.container {
-  background: #9ec8f9;
-  padding: 0 10px;
-  overflow: scroll;
-}
-
-.user {
-  background: #fff;
-  border-radius: 10px;
-  padding: 0 10px;
-  position: relative;
-  margin-top: 10vw;
-
-  .userInfo {
-    display: flex;
-
-    .message {
-      position: absolute;
-      right: 10px;
-      top: 8px;
-      .icon {
-        width: 30px;
-      }
-    }
-    .userPhoto {
-      width: 74px;
-      height: 74px;
-      border-radius: 50%;
-      border: solid 3px #6bafff;
-      position: relative;
-      top: -20px;
-      background: #dedede;
-    }
-
-    .info {
-      padding: 10px;
-
-      .name {
-        font-weight: 600;
-      }
-
-      .loginText {
-        font-weight: 600;
-      }
-
-      .id {
-        margin-top: 5px;
-        font-size: 13px;
-        display: flex;
-        align-items: center;
-
-        .copy {
-          width: 14px;
-          margin-left: 5px;
-        }
-      }
-    }
-  }
-
-  .row {
-    display: flex;
-    justify-content: space-around;
-
-    .box {
-      display: flex;
-      flex-direction: column;
-      text-align: center;
-      padding: 20px 10px;
-
-      .label {
-        margin-top: 5px;
-        font-size: 15px;
-      }
-
-      .value {
-        font-size: 20px;
-        font-weight: 600;
-      }
-    }
-  }
-}
-
-.menus {
-  margin-top: 20px;
-  background: #fff;
-  border-radius: 10px;
 
-  // padding: 0 10px;
-  .title {
-    position: relative;
-    left: -10px;
-    top: -10px;
-    width: calc(100% + 10px);
-    height: 55px;
-
-    image {
-      width: 100%;
-      height: 100%;
-    }
-  }
-
-  .menuList {
-    display: grid;
-    grid-template-columns: 1fr 1fr 1fr;
-    padding: 20px 20px 0 20px;
-
-    .menu {
-      margin-bottom: 30px;
-      display: flex;
-      flex-direction: column;
-      justify-content: center;
-      align-items: center;
-
-      image {
-        width: 36px;
-        height: 36px;
-      }
-
-      span {
-        margin-top: 10px;
-        font-size: 14px;
-      }
-    }
-  }
-}
 .qrcodeImg {
   width: 70vw;
   border-radius: 5px;