智慧保安互联网APP
shuishen
2021-08-18 1b1d3e2b3c9e767932bddf2671172235b8fbd16a
components/contacts/contacts.vue
@@ -1,39 +1,56 @@
<template>
   <view class="pColumn" >
      <view class="inPColumn" v-if="fromW == 0">
         <view class="left" @click="chating">
            <view class="top">
               <view class="userImg">
                  <img class="img" :src=Pdata.avatar>
               </view>
               <view class="t-type">{{Pdata.recipientName}}</view>
               <view class="t-id">{{Pdata.postTime}}</view>
   <view class="main">
      <view v-if="fromW == 0">
         <view class="friend-list" @click="chating">
            <view class="head-wrap">
               <image :src=Pdata.avatar class="head" />
               <!-- <view v-if="1 != ''" class="tip">233</view> -->
            </view>
            <view class="bottom">{{Pdata.postMessage}}</view>
            <view class="content-wrap">
               <text class="name">{{Pdata.recipientName}}</text>
               <text class="mess">{{Pdata.postMessage}}</text>
            </view>
            <view class="data-wrap">
               <text class="data">{{Pdata.postTime}}</text>
            </view>
         </view>
      </view>
      <view class="inPColumn" v-if="fromW == 1">
         <view class="left" @click="QZchating">
            <view class="top">
               <view class="userImg">
                  <img class="img" :src=Pdata.avatar>
               </view>
               <view class="t-type">{{Pdata.GroupName}}</view>
               <!-- <view class="t-id">{{Pdata.postTime}}</view> -->
      <view v-if="fromW == 1">
         <view class="friend-list" @click="TXLchating">
            <view class="head-wrap">
               <image :src=Pdata.avatar class="head" />
               <!-- <view v-if="1 != ''" class="tip">233</view> -->
            </view>
            <view class="bottom">{{Pdata.GroupContent}}</view>
            <view class="content-wrap">
               <text class="name">{{Pdata.realName}}</text>
               <text class="mess">电话:{{Pdata.phone}}</text>
            </view>
            <view class="data-wrap">
               <!-- <text class="data">{{Pdata.postTime}}</text> -->
            </view>
         </view>
      </view>
      <view class="inPColumn" v-if="fromW == 2">
         <view class="left" @click="TXLchating">
            <view class="top">
               <view class="userImg">
                  <img class="img" :src=Pdata.avatar>
               </view>
               <view class="t-type">{{Pdata.realName}}</view>
               <!-- <view class="t-id">{{Pdata.postTime}}</view> -->
      <view v-if="fromW == 2">
         <view class="friend-list" @click="QZchating">
            <view class="head-wrap">
               <image :src=Pdata.avatar class="head" />
               <!-- <view v-if="1 != ''" class="tip">233</view> -->
            </view>
            <view class="bottom">电话:{{Pdata.phone}}</view>
            <view class="content-wrap">
               <text class="name">{{Pdata.GroupName}}</text>
               <text class="mess">{{Pdata.GroupContent}}</text>
            </view>
            <view class="data-wrap">
               <!-- <text class="data">{{Pdata.postTime}}</text> -->
            </view>
         </view>
      </view>
   </view>
@@ -55,7 +72,7 @@
            this.bmainb = '0';
            //#endif
         },
         chating(){
         chating() {
            //发起聊天
            var datas = this.Pdata;
            //alert(datas.name)
@@ -63,20 +80,21 @@
               url: '/pages/groupChat/chating?chatID=' + datas.recipientId.toString()
            });
         },
         QZchating(){
         QZchating() {
            //发起聊天
            var datas = this.Pdata;
            //alert(datas.name)
            uni.navigateTo({
                url: '/pages/groupChat/chatingQZ?chatID=' + datas.id.toString()
               url: '/pages/groupChat/chatingQZ?chatID=' + datas.id.toString()
            });
         },
         TXLchating(){
         TXLchating() {
            //发起聊天
            var datas = this.Pdata;
            //alert(datas.name)
            uni.navigateTo({
               url: '/pages/groupChat/chating?chatID=' + datas.id.toString() + '&data=' + JSON.stringify(datas)
               url: '/pages/groupChat/chating?chatID=' + datas.friendid.toString() + '&data=' + JSON.stringify(
                  datas)
            });
         },
         onClose() { //触摸遮罩事件
@@ -93,144 +111,93 @@
</script>
<style lang="scss" scoped>
   /* components/pColumn/pColumn.wxss */
   .pColumn,
   .inPColumn,
   .left,
   .right,
   .top {
      display: flex;
   .top-bar {
      background-color: rgba(255, 255, 255, .96);
      // background-color: #42B983;
      box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, .1);
   }
   .userImg {
      // border: 1px solid #007AFF;
   .main {
      // margin-top: 108rpx;
      // padding: 0 32upx ;
      .img {
         width: 100rpx;
         height: 100rpx;
         border-radius: 100rpx;
         // border: 1px solid #007AFF;
      }
   }
   .pColumn {
      width: 100%;
      align-items: center;
      justify-content: center;
      padding-top: 0.5rem;
      .inPColumn {
         margin: 0.2rem 0 0.4rem 0;
         width: 95%;
         height: 4rem;
         border-bottom: 1px rgb(207, 207, 207) solid;
      .friend-list,
      .apply {
         display: flex;
         // margin: 40rpx 0;
         // padding: 20rpx 0;
         height: 130rpx;
         // padding: 16upx 0;
         align-items: center;
         justify-content: space-between;
         border-bottom: 1px solid rgba(0, 0, 0, .1);
         .left {
            width: 80%;
            /* border: 1px rgb(114, 250, 159) solid; */
            flex-direction: column;
         &:active {
            background-color: rgba(243,244,246,1);
         }
            .top {
               .t-type {
                  padding-left: 0.7rem;
                  font-size: 1.1rem;
                  color: #000000;
               }
         .head-wrap {
            position: relative;
               .t-id {
                  color: #8b8b8b;
                  font-size: 0.8rem;
                  line-height: 1.6rem;
                  position: absolute;
                  right: 1.2rem;
               }
            image {
               width: 96rpx;
               height: 96rpx;
               border-radius: 20upx;
               // background-color: rgba(255,228,49,1);
            }
            .bottom {
               color: #8b8b8b;
               font-size: 0.9rem;
               position: relative;
               bottom: 1rem;
               left: 4rem;
            .tip {
               position: absolute;
               top: -6rpx;
               left: 68rpx;
               height: 36rpx;
               min-width: 20rpx;
               min-height: 20rpx;
               background-color: rgba(255,93,91,1);
               border-radius: 18rpx;
               padding: 0 6rpx;
               font-size: 24upx;
               color: rgba(255,228,49,1);
               line-height: 36rpx;
               text-align: center;
            }
         }
         .right {
            width: 20%;
            /* border: 1px rgb(143, 114, 250) solid; */
            justify-content: space-around;
         .content-wrap {
            margin-left: 32rpx;
            flex: 1;
            /* align-items: center; */
            .butPopup {
               z-index: 4;
               position: fixed;
               top: 0;
               left: 0;
               width: 100%;
               height: 100%;
               background-color: rgba($color: #000000, $alpha: 0.5);
            .name {
               display: block;
               color: rgba(39,40,50,1);
               font-size: 36rpx;
               font-weight: 400;
               line-height: 50rpx;
            }
               .b-main {
                  position: absolute;
                  z-index: 2;
                  // bottom: 3rem;//小程序不兼容
                  width: 100%;
                  // border: 1px solid #007AFF;
                  border-radius: 1.5rem;
                  background-color: #fff;
            .mess {
               display: block;
               color: rgba(39,40,50,.6);
               font-size: 28upx;
               line-height: 40rpx;
               display: -webkit-box;
               -webkit-box-orient: vertical;
               -webkit-line-clamp: 1;
               overflow: hidden;
            }
         }
                  // height: 20rem;
                  .b-m-title {
                     display: flex;
                     align-items: center;
                     justify-content: center;
                     width: 100%;
                     height: 2.8rem;
                  }
         .data-wrap {
                  .b-m-Y,
                  .b-m-N {
                     color: #fff;
                     border-radius: 0;
                  }
            justify-content: right;
                  .b-m-Y {
                     background-color: #07C160 !important;
                  }
                  .b-m-Y-hove {
                     background-color: #048c44 !important;
                  }
                  .b-m-N {
                     background-color: #FF976A !important;
                  }
                  .b-m-N-hove {
                     background-color: #e1855d !important;
                  }
               }
            .data {
               font-size: 24upx;
               color: rgba(39,40,50,0.4);
               line-height: 50rpx;
            }
         }
      }
   }
   // .buttitle {
   //    display: flex;
   //    align-items: center;
   //    justify-content: center;
   //    width: 100%;
   //    height: 2.8rem;
   // }
   // .popups {
   //    width: 100%;
   //    padding-bottom: 0 !important;
   //    /* border: 1px solid seagreen; */
   // }
</style>