Initial commit

pages/contact/index/components/ContactMenus.vue

@@ -0,0 +1,151 @@
+<template>
+  <view class="">
+    <view class="menu_list">
+      <view
+        @click="menuClick(item)"
+        v-for="item in getMenus"
+        :key="item.idx"
+        class="menu_list_item"
+      >
+        <image class="menu_icon" :src="item.icon" mode=""></image>
+        <view class="item_content">
+          <text class="title">
+            {{ item.title }}
+          </text>
+          <view class="icon">
+            <u-icon name="arrow-right" color="#999" size="18" />
+          </view>
+        </view>
+      </view>
+    </view>
+    <view class="menu_list">
+      <view
+        @click="menuClick(item)"
+        v-for="item in getFriendsMenus"
+        :key="item.idx"
+        class="menu_list_item"
+      >
+        <image class="menu_icon" :src="item.icon" mode=""></image>
+        <view class="item_content">
+          <text class="title">
+            {{ item.title }}
+          </text>
+          <view class="icon">
+            <u-icon name="arrow-right" color="#999" size="18" />
+          </view>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+import { mapGetters } from "vuex";
+import { ContactMenuTypes } from "@/constant";
+
+export default {
+  name: "",
+  props: {},
+  data() {
+    return {};
+  },
+  computed: {
+    getMenus() {
+      return [
+        {
+          idx: 0,
+          type: ContactMenuTypes.NewFriend,
+          title: "新的好友",
+          icon: require("static/images/contact_new_friend.png"),
+        },
+        {
+          idx: 1,
+          type: ContactMenuTypes.NewGroup,
+          title: "新的群组",
+          icon: require("static/images/contact_new_group.png"),
+        },
+      ];
+    },
+    getFriendsMenus() {
+      return [
+        {
+          idx: 2,
+          type: ContactMenuTypes.MyFriend,
+          title: "我的好友",
+          icon: require("static/images/contact_my_friend.png"),
+          badge: 0,
+        },
+        {
+          idx: 3,
+          type: ContactMenuTypes.MyGroup,
+          title: "我的群组",
+          icon: require("static/images/contact_my_group.png"),
+          badge: 0,
+        },
+      ];
+    },
+  },
+  methods: {
+    menuClick({ type }) {
+      switch (type) {
+        case ContactMenuTypes.NewFriend:
+        case ContactMenuTypes.NewGroup:
+          uni.navigateTo({
+            url: `/pages/contact/applicationList/index?applicationType=${type}`,
+          });
+          break;
+        case ContactMenuTypes.MyFriend:
+          uni.navigateTo({
+            url: "/pages/contact/friendList/index",
+          });
+          break;
+        case ContactMenuTypes.MyGroup:
+          uni.navigateTo({
+            url: "/pages/contact/groupList/index",
+          });
+          break;
+        default:
+          break;
+      }
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.menu_list {
+  margin-bottom: 24rpx;
+  background-color: #fff;
+
+  &_item {
+    @include vCenterBox();
+    margin: 0 44rpx;
+    padding: 24rpx 0;
+    color: #0c1c33;
+
+    .menu_icon {
+      width: 42px;
+      min-width: 42px;
+      height: 42px;
+      min-height: 42px;
+    }
+
+    .item_content {
+      @include btwBox();
+      margin-left: 24rpx;
+      width: 100%;
+      position: relative;
+
+      .icon {
+        display: flex;
+
+        .u-badge {
+          width: fit-content;
+          padding: 8rpx 12rpx;
+          line-height: 18rpx;
+        }
+      }
+    }
+  }
+}
+</style>

pages/contact/index/index.vue

@@ -0,0 +1,87 @@
+<template>
+  <view class="contact_container">
+    <custom-nav-bar>
+      <view class="contact_title" slot="left">
+        <text>通讯录</text>
+      </view>
+      <view class="contact_action" slot="more">
+        <view @click="contactAddClick" class="search_icon">
+          <image src="@/static/images/common_add.png" alt="" srcset="" />
+        </view>
+      </view>
+    </custom-nav-bar>
+
+    <contact-menus />
+  </view>
+</template>
+
+<script>
+import CustomNavBar from "@/components/CustomNavBar/index.vue";
+import ContactMenus from "./components/ContactMenus.vue";
+import UserItem from "@/components/UserItem/index.vue";
+export default {
+  components: {
+    CustomNavBar,
+    ContactMenus,
+    UserItem,
+  },
+  data() {
+    return {
+      frequentContacts: [],
+    };
+  },
+  methods: {
+    contactAddClick() {
+      uni.navigateTo({
+        url: "/pages/contact/contactAdd/index",
+      });
+    },
+    userClick(item) {
+      uni.navigateTo({
+        url: `/pages/common/userCard/index?sourceID=${item.userID}`,
+      });
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.contact_container {
+  @include colBox(false);
+  height: 100vh;
+  background-color: #f6f6f6;
+
+  .contact_title {
+    padding-left: 44rpx;
+    font-size: 40rpx;
+    font-weight: 600;
+    color: #0c1c33;
+  }
+
+  .contact_action {
+    padding-right: 36rpx;
+    display: flex;
+
+    .search_icon {
+      margin: 0 16rpx;
+
+      image {
+        width: 56rpx;
+        height: 56rpx;
+      }
+    }
+  }
+
+  .list_title {
+    font-size: 24rpx;
+    color: #999;
+    margin-left: 44rpx;
+  }
+
+  .user_list {
+    flex: 1;
+    margin-top: 24rpx;
+    background-color: #fff;
+  }
+}
+</style>