移动端开发

_src/components/panel/sessionItem.vue

@@ -366,6 +366,9 @@ export default {
     &.current {
       background-color: #fff;
     }
+    .time{
+      color: #999999;
+    }
     .info {
       position: relative;
       margin-left: px2rem(28);

_src/pages/h5/App.vue

@@ -26,7 +26,7 @@ export default {
   name: 'App',
   computed: {
     navShow () {
-      return this.$route.name !== 'groupChat' && this.$route.name !== 'pmChat'
+      return this.$route.name !== 'groupChat' && this.$route.name !== 'pmChat' && this.$route.name !== 'invite'
     }
   },
   methods: {

_src/pages/h5/view/chatList.vue

@@ -6,7 +6,7 @@
       <div class="search-tips search-wrap" @click="searchShow = true" v-else>
         <i class="el-icon-search"></i>搜索
       </div>
-      <i class="add-icon"></i>
+      <router-link class="add-icon" to="/invite"></router-link>
     </div>
     <div class="chat-list pub-scroll-box">
       <template v-if="!isSearch">
@@ -105,6 +105,7 @@ export default {
   background: url('../../../assets/more-icon.png');
   width: px2rem(42);
   height: px2rem(42);
+  margin: 0 px2rem(20);
   background-size: 100%;
 }
 .search-tips{

_src/pages/h5/view/chatRoom.vue

@@ -107,7 +107,7 @@
             </div>
 
             <div class="emoji-wrap" v-if="emojiShow">
-              <emoji-list @addEmoji="addEmoji" :emojiShow="emojiShow"></emoji-list>
+              <emoji-list :isMini="true" @addEmoji="addEmoji" :emojiShow="emojiShow"></emoji-list>
             </div>
           </div>
         </div>

_src/pages/h5/view/invite.vue

@@ -0,0 +1,147 @@
+<template>
+  <div class="add-person">
+    <back-bar title="选择联系人">
+      <button class="complete-btn">完成</button>
+    </back-bar>
+    <div class="input-wrap">
+      <i class="el-icon-search"></i>
+      <input type="text" placeholder="搜索">
+    </div>
+    <div>
+      <div
+        class="user-item"
+        v-for="(item, key) in checkList"
+        :key="key"
+        :class="{'checked': item.isChecked}"
+        @click="changeState(item.user_id)"
+      >
+        <i v-if="item.isChoosed" class="el-icon-circle-check is-choosed"></i>
+        <template v-else-if="item.is_admin!=2">
+          <i v-if="item.isChecked" class="el-icon-circle-check"></i>
+          <i v-else class="el-icon-circle-uncheck"></i>
+        </template>
+        <img v-if="item.cover_photo" class="user-avatar" :src="item.cover_photo" alt>
+        <div
+          v-else
+          class="user-avatar"
+          :class="`avatar_bg${item.user_id % 9}`"
+          :data-name="item.nick_name.slice(0,2).toUpperCase()"
+        ></div>
+        <span class="name">{{item.nick_name}}</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+import backBar from '@/components/backBar'
+// import API from '@/api'
+
+export default {
+  name: 'chatList',
+  data () {
+    return {
+      checkList: []
+    }
+  },
+  components: {
+    backBar
+  },
+  computed: {
+    ...mapState({
+      userInfo: state => {
+        return state.userInfo
+      },
+      friendList: state => state.chat.friendList
+    })
+  },
+  methods: {
+    getItemByUid (uid) {
+      if (this.isSearchGroup) {
+        return this.searchGroupList.filter((item, index) => {
+          if (item.user_id == uid) this.curItemIndex = index
+          return item.user_id == uid
+        })[0]
+      } else {
+        return this.checkList.filter((item, index) => {
+          if (item.user_id == uid) this.curItemIndex = index
+          return item.user_id == uid
+        })[0]
+      }
+    },
+    changeState (uid, flag = true) {
+      let item = this.getItemByUid(uid)
+      item['isChecked'] = flag
+    }
+  },
+  async created () {
+    await this.$store.dispatch('getFriendList')
+    this.checkList = this.friendList
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.add-person{
+  background-color: #ffffff;
+}
+.complete-btn{
+  position: absolute;
+  top: px2rem(14);
+  right: px2rem(10);
+  background-color: #279bf3;
+  height: px2rem(58);
+  line-height: px2rem(58);
+  padding: 0 px2rem(26);
+  font-size: px2rem(30);
+  color: #ffffff;
+  border-radius: 4px;
+}
+.input-wrap{
+  background-color: #ffffff;
+  height: px2rem(100);
+  line-height: px2rem(100);
+  position: relative;
+  padding-left: px2rem(80);
+  border-bottom: 1px solid #eeeeee;
+  .el-icon-search{
+    position: absolute;
+    left: 0;
+    top: px2rem(36);
+    width: px2rem(80);
+    height: px2rem(40);
+    text-align: center;
+    bottom: 0;
+    vertical-align: middle;
+    color: #999;
+    font-size: px2rem(40);
+  }
+  input{
+    height: px2rem(70);
+    line-height: px2rem(70);
+    padding-left: px2rem(12);
+    width: 100%;
+    font-size: px2rem(28);
+    outline: none;
+    box-sizing: border-box;
+  }
+}
+.user-item{
+  border-bottom: 1px solid #eeeeee;
+  padding: px2rem(20) 0;
+  .name{
+    display: inline-block;
+    margin-left: px2rem(20);
+    font-size: px2rem(34);
+    color: #333333;
+  }
+}
+.el-icon-circle-uncheck{
+  display: inline-block;
+  vertical-align: middle;
+  width: px2rem(50);
+  height: px2rem(50);
+  margin: 0 px2rem(26);
+}
+</style>

_src/router/index.js

@@ -6,6 +6,7 @@ const chatList = () => import('@/pages/h5/view/chatList.vue')
 const aboutMe = () => import('@/pages/h5/view/aboutMe.vue')
 const editMe = () => import('@/pages/h5/view/editMe.vue')
 const h5ChatRoom = () => import('@/pages/h5/view/chatRoom.vue')
+const invite = () => import('@/pages/h5/view/invite.vue')
 
 // pc
 const pcChatRoom = () => import('@/components/chatRoom/chatRoom.vue')
@@ -53,6 +54,10 @@ const h5Router = new Router({
     path: '/pm/:id',
     name: 'pmChat',
     component: h5ChatRoom
+  }, {
+    path: '/invite',
+    name: 'invite',
+    component: invite
   }
   ]
 })

_src/store/module/group/actions.js

@@ -655,7 +655,6 @@ const actions = {
           update_time_int: data.timestamp,
           timestamp: data.timestamp
         }
-
         if (!isInSession) {
           if (!data.group_id) {
             API.user.getOtherInfo({

_src/style/h5.scss

@@ -136,4 +136,51 @@
     transform:scale(0.5);
     transform-origin: 0 0;
   }
+}
+
+.pub-pop-toolbar {
+  position: absolute;
+  background: #ffffff;
+  border-radius: 5px;
+  overflow: hidden;
+  box-shadow: 1px 1px 50px rgba(212, 180, 180, 0.3);
+  z-index: 11;
+  width: 60px;
+  user-select: none;
+  text-align: center;
+  &.ext-session{
+    width: 100px;
+    text-align: left;
+    li{
+      padding: 0 10px;
+    }
+  }
+  li {
+    line-height: 36px;
+    font-size: 14px;
+    color: #333333;
+    position: relative;
+    cursor: pointer;
+    &.split-line{
+      &:after {
+      content: "";
+      height: 1px;
+      left: 5px;
+      right: 5px;
+      bottom: 0;
+      position: absolute;
+      background: #dfdfdf;
+    }
+    }
+    &:hover {
+      background: #dfdfdf;
+    }
+  }
+}
+
+.el-icon-circle-uncheck {
+  border-radius: 50%;
+  background-color: #ffffff;
+  border: 1px solid #d2cdcd;
+  box-sizing: border-box;
 }