✨ feat(mine):我的静态页面

src/pages/tabbar/mine/index.vue

@@ -4,16 +4,257 @@
  * @Description: 
 -->
 <template>
-  <view class="my"> 222222222222222</view>
+  <view class="mine">
+    <!-- 状态栏占位 -->
+    <view class="mine__nav" :style="{ height: statusBarHeight + 'px' }" />
+
+    <view class="mine__person">
+      <view class="mine__person--icon">
+        <u-icon name="setting" color="#fff" size="22" />
+        <u-icon name="chat" color="#fff" size="22" />
+      </view>
+      <view class="mine__person--info">
+        <image
+          src="@/static/QR57a.jpg"
+          style="width: 140rpx; height: 140rpx; border-radius: 50%"
+        />
+
+        <view class="userName">
+          <view> yizhiyang的鲜花店(云岩区店)</view>
+          <text> +8618285564342</text>
+        </view>
+        <view class="status">
+          <view style="margin-right: 6rpx">营业状态</view>
+          <u-icon name="play-right-fill" color="#fff" size="12" />
+        </view>
+      </view>
+    </view>
+
+    <view class="mine__main">
+      <view class="mine__main--purse">
+        <view class="wallet">
+          <view class="wallet--title">我的钱包</view>
+          <view class="wallet--more">
+            <text>查看钱包余额</text>
+            <u-icon name="arrow-right" color="#333" size="14" />
+          </view>
+        </view>
+        <view class="walletInfo">
+          <view v-for="index in 4" :key="index">
+            <view class="text-title">借钱(元)</view>
+            <view class="text-data">
+              30
+              <text style="font-size: 24rpx; margin-left: 5rpx">万</text>
+            </view>
+            <view class="text-info">最高可用</view>
+          </view>
+        </view>
+        <view class="shortcut">
+          <view style="display: flex">
+            <view>快捷支付</view>
+            <view style="margin: 0 20rpx">|</view>
+            <view>一银升级银行卡用于麦付</view>
+          </view>
+          <u-icon name="arrow-right" color="#fff" size="14" />
+        </view>
+      </view>
+      <view class="mine__main--setting">
+        <template v-for="item in list1" :key="item.id">
+          <u-cell size="large" :border="false" :title="item.name" isLink url="">
+            <image
+              slot="icon"
+              src="@/static/tools.jpg"
+              style="width: 60rpx; height: 60rpx"
+            />
+          </u-cell>
+        </template>
+      </view>
+
+      <view class="mine__main--setting">
+        <template v-for="item in list2" :key="item.id">
+          <u-cell size="large" :border="false" :title="item.name" isLink url="">
+            <image
+              slot="icon"
+              src="@/static/tools.jpg"
+              style="width: 60rpx; height: 60rpx"
+            />
+          </u-cell>
+        </template>
+      </view>
+    </view>
+  </view>
 </template>
 
 <script>
-export default {};
+export default {
+  data() {
+    return {
+      statusBarHeight: 0,
+      list1: [
+        {
+          id: '1',
+          name: '门店环境',
+          url: '',
+        },
+        {
+          id: '2',
+          name: '资质信息',
+          url: '',
+        },
+        {
+          id: '3',
+          name: '我要开店',
+          url: '',
+        },
+      ],
+
+      list2: [
+        {
+          id: '1',
+          name: '帮助中心',
+          url: '',
+        },
+        {
+          id: '2',
+          name: '设置',
+          url: '',
+        },
+      ],
+    };
+  },
+  methods: {
+    //计算导航栏总高度
+    getHeight() {
+      // 获取系统信息
+      const systemInfo = wx.getSystemInfoSync();
+      // 胶囊按钮位置信息
+      const menuButtonInfo = wx.getMenuButtonBoundingClientRect();
+      // 导航栏高度 = 状态栏到胶囊的间距（胶囊距上距离-状态栏高度） * 2 + 胶囊高度 + 状态栏高度
+      this.statusBarHeight =
+        (menuButtonInfo.top - systemInfo.statusBarHeight) * 2 +
+        menuButtonInfo.height +
+        systemInfo.statusBarHeight;
+    },
+  },
+
+  onLoad() {
+    this.getHeight();
+  },
+};
 </script>
 
 <style lang="scss" scoped>
-.my {
-  background-color: $uni-bg-color-primary;
-  height: 200px;
+.mine {
+  min-height: 100vh;
+  box-sizing: border-box;
+  background-color: $uni-bg-color-page;
+
+  &__nav {
+    background-color: $uni-bg-color-primary;
+  }
+
+  &__person {
+    height: 230rpx;
+    padding: $uni-bg-padding-sm;
+    background-color: $uni-bg-color-primary;
+    position: relative;
+    &--icon {
+      display: flex;
+      justify-content: space-between;
+    }
+    &--info {
+      color: #fff;
+      display: flex;
+      margin-top: 20rpx;
+
+      .userName {
+        width: 400rpx;
+        font-size: 34rpx;
+        margin: 10rpx 0 0 16rpx;
+
+        > text {
+          font-size: 26rpx;
+        }
+      }
+      .status {
+        display: flex;
+        position: absolute;
+        bottom: 80rpx;
+        padding-left: 20rpx;
+        right: 0;
+        width: 150rpx;
+        height: 60rpx;
+        font-size: 25rpx;
+        align-items: center;
+        justify-content: center;
+        box-sizing: border-box;
+        border-radius: 30rpx 0 0 30rpx;
+        background-color: rgba(255, 255, 255, 0.3);
+      }
+    }
+  }
+  &__main {
+    padding: $uni-bg-padding-sm;
+    &--purse {
+      background-color: $uni-bg-color;
+      padding: $uni-bg-padding-sm;
+      border-radius: $uni-border-radius-base;
+      .wallet {
+        display: flex;
+        justify-content: space-between;
+        font-size: 28rpx;
+
+        &--title {
+          color: #000;
+          font-size: 36rpx;
+          font-weight: 700;
+        }
+        &--more {
+          color: #333;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+        }
+      }
+
+      .walletInfo {
+        margin: 40rpx 0;
+        color: #333;
+        display: flex;
+        text-align: center;
+        justify-content: space-around;
+      }
+      .shortcut {
+        height: 70rpx;
+        padding: 0 20rpx;
+        color: #fff;
+        font-size: 28rpx;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        background-color: $uni-bg-color-primary;
+        border-radius: $uni-border-radius-sm;
+      }
+    }
+    &--setting {
+      margin: 20rpx 0;
+      background-color: $uni-bg-color;
+      padding: $uni-bg-padding-sm;
+      border-radius: $uni-border-radius-base;
+    }
+  }
+}
+.text-title {
+  font-size: 34rpx;
+}
+
+.text-data {
+  font-size: 40rpx;
+  margin: 15rpx 0;
+  font-weight: 700;
+}
+
+.text-info {
+  font-size: 24rpx;
 }
 </style>

src/pages/tabbar/store/index.vue

@@ -38,7 +38,13 @@
 
     <view class="shop__note" style="background-color: #fff">
       <u-cell-group>
-        <u-cell title="规制中心" isLink url=""></u-cell>
+        <u-cell
+          size="large"
+          :border="false"
+          title="规制中心"
+          isLink
+          url=""
+        ></u-cell>
       </u-cell-group>
     </view>
 
@@ -140,7 +146,7 @@ export default {
 }
 
 .shop {
-  height: 100vh;
+  min-height: 100vh;
   background-color: $uni-bg-color-page;
   padding: $uni-bg-padding-sm;
   &__data {