✨ feat(message):消息静态页面

src/pages/tabbar/extend/index.vue

@@ -6,4 +6,4 @@
 export default {};
 </script>
 
-<style lang="less" scoped></style>
+<style lang="scss" scoped></style>

src/pages/tabbar/message/index.vue

@@ -1,9 +1,178 @@
+<!--
+ * @Author: yizhiyang
+ * @Date: 2023-11-30 09:40:24
+ * @Description: 
+-->
 <template>
-  <div>消息</div>
+  <view class="message">
+    <view class="message__like">
+      <view v-for="item in list" :key="item.id">
+        <image
+          slot="icon"
+          src="@/static/tools.jpg"
+          style="width: 80rpx; height: 80rpx"
+        />
+        <view class="message__like--text">{{ item.name }}</view>
+      </view>
+    </view>
+
+    <view class="message__note" v-for="value in systemList" :key="value.id">
+      <image
+        slot="icon"
+        src="@/static/tools.jpg"
+        style="width: 80rpx; height: 80rpx"
+      />
+      <view class="message__note--info">
+        <view class="">
+          <view class="systemTitle">{{ value.name }}</view>
+          <view class="textInfo">{{ value.info }}</view>
+        </view>
+        <view class="message__note--flex">
+          <view class="textInfo">{{ value.time }}</view>
+          <view style="width: 40rpx; height: 40rpx">
+            <u-badge
+              numberType="ellipsis"
+              type="primary"
+              :value="value.num"
+              shape="circle"
+            ></u-badge>
+          </view>
+        </view>
+      </view>
+    </view>
+
+    <view class="message__note" v-for="value in systemList1" :key="value.id">
+      <image
+        slot="icon"
+        src="@/static/QR57a.jpg"
+        style="width: 80rpx; height: 80rpx"
+      />
+      <view class="message__note--info">
+        <view class="">
+          <view class="systemTitle">{{ value.name }}</view>
+          <view class="textInfo">{{ value.info }}</view>
+        </view>
+        <view class="message__note--flex">
+          <view class="textInfo">{{ value.time }}</view>
+          <view style="width: 40rpx; height: 40rpx">
+            <u-badge
+              numberType="ellipsis"
+              type="primary"
+              :value="value.num"
+              shape="circle"
+            ></u-badge>
+          </view>
+        </view>
+      </view>
+    </view>
+  </view>
 </template>
 
 <script>
-export default {};
+export default {
+  data() {
+    return {
+      list: [
+        {
+          id: '1',
+          name: '新的赞',
+        },
+        {
+          id: '2',
+          name: '评论',
+        },
+        {
+          id: '3',
+          name: '好友',
+        },
+      ],
+      systemList: [
+        {
+          id: '1',
+          name: '系统通知',
+          info: '您修改的店铺LOGO审核未通过',
+          time: '23小时',
+          num: '99+',
+        },
+        {
+          id: '2',
+          name: '订单通知',
+          info: '附近暂无配送员接单，订单已关闭。',
+          time: '刚刚',
+          num: '9',
+        },
+        {
+          id: '1',
+          name: '活动通知',
+          info: '您修改的店铺LOGO审核未通过。',
+          time: '10-26',
+          num: '23',
+        },
+      ],
+
+      systemList1: [
+        {
+          id: '1',
+          name: 'yizhiyang',
+          info: '在吗？？',
+          time: '23小时',
+          num: '2',
+        },
+        {
+          id: '2',
+          name: '易只烊',
+          info: '请问这个怎么烊？？？',
+          time: '刚刚',
+          num: '9',
+        },
+      ],
+    };
+  },
+};
 </script>
 
-<style lang="sass" scoped></style>
+<style lang="scss" scoped>
+.message {
+  min-height: 100vh;
+  background-color: $uni-bg-color;
+  padding: $uni-bg-padding-sm;
+  &__like {
+    text-align: center;
+    color: #333;
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
+    padding: 30rpx;
+    &--text {
+      margin-top: 10rpx;
+    }
+  }
+  &__note {
+    display: flex;
+    padding: 20rpx;
+    &--info {
+      flex: 1;
+      margin-left: 20rpx;
+      padding-bottom: 18rpx;
+      display: flex;
+      justify-content: space-between;
+      border-bottom: 2rpx solid #eeeded;
+    }
+    &--flex {
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+      align-items: center;
+    }
+
+    .textInfo {
+      font-size: 24rpx;
+      color: #666;
+    }
+    .systemTitle {
+      font-size: 36rpx;
+      margin-bottom: 10rpx;
+    }
+  }
+}
+</style>

src/pages/tabbar/order/index.vue

@@ -1,9 +1,65 @@
+<!--
+ * @Author: yizhiyang
+ * @Date: 2023-11-30 09:40:24
+ * @Description: 
+-->
 <template>
-  <div>订单</div>
+  <view>
+    <view style="background-color: #fff; padding: 15rpx">
+      <u-tabs
+        :list="list1"
+        lineWidth="30"
+        lineColor="$uni-bg-color-primary"
+        :activeStyle="{
+          color: '#000',
+          fontWeight: 'bold',
+          fontSize: '32rpx',
+          transform: 'scale(1.05)',
+          marginBottom: '15rpx',
+        }"
+        :inactiveStyle="{
+          color: '#333',
+          fontSize: '30rpx',
+          transform: 'scale(1)',
+          marginBottom: '15rpx',
+        }"
+        itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;"
+      ></u-tabs>
+    </view>
+    <view class="order">11111111</view>
+  </view>
 </template>
 
 <script>
-export default {};
+export default {
+  data() {
+    return {
+      list1: [
+        {
+          name: '全部',
+        },
+        {
+          name: '进行中',
+        },
+        {
+          name: '预约中',
+        },
+        {
+          name: '退款',
+        },
+        {
+          name: '已完成',
+        },
+      ],
+    };
+  },
+};
 </script>
 
-<style lang="sass" scoped></style>
+<style lang="scss" scoped>
+.order {
+  min-height: 100vh;
+  background-color: $uni-bg-color-page;
+  padding: $uni-bg-padding-sm;
+}
+</style>