地址替换

zengh

2022-06-21 4efeb31d5b4921d7e851c256009486ad86bc70e2

 pages/groupChat/groupChat.vue

@@ -3,54 +3,95 @@
   <view class="work">
      <!-- 自定义顶部导航栏 -->
      <!-- <navBarTop :title="'聊天室'"></navBarTop> -->
		
      <view style="height:205rpx;"></view>
      <view class="tab" style="position: fixed;top: 0;width: 100%;height: 205rpx;z-index: 100;">
         <u-navbar style="position: relative;left: -20rpx;" :is-fixed="false" :border-bottom="false" :is-back="false" title="好友"
            :background="{ background: '#0BB9C8' }" title-color="#fff">
            <image slot="right" src="/static/images/home/message.png" class="message-icon" mode="widthFix"></image>
         </u-navbar>

      <u-navbar style="position: relative;" :is-fixed="false" :border-bottom="false" :is-back="false" title="好友"
         :background="{ background: '#0BB9C8' }" title-color="#fff">
         <u-icon @click="addFriend" slot="right" class="message-icon" mode="widthFix" name="plus" color="#fff">
         </u-icon>
      </u-navbar>

      <view class="tab">
         <u-tabs :list="list" :is-scroll="false" :current="current" active-color="#14B9C8" inactive-color="#595959"
            height="100" @change="change" style="background-color:rgba(255,255,255,0.8)"></u-tabs>
            height="100" @change="change"></u-tabs>
      </view>
      <swiper id="swiperBox" :style="{ height: swiperHeight + 'px' }" :current="current" @change="tabsChange">

      <swiper id="swiperBoxPeo" :style="{ height: swiperHeight + 'px' }" :current="current" @change="tabsChange">

         <swiper-item class="swiper-item" v-for="(item, indexs) in list" :key="indexs">
            <view v-if="indexs == 0" class="main">
               <div>
                  <div class="m-main">
                     <!-- <view class="inTitle">{{Task}}</view> -->
                     <view class="inTmain">
                        <contacts v-for="(item,index) in dataListP" :key="index" :Pdata="item" :fromW="indexs"
                           @refreshTask="refreshTask"></contacts>
                     </view>

            <scroll-view scroll-y :scroll-top="scrollTop" style="width: 100%;height: 100%;"
               :refresher-enabled="refresherFlag" :refresher-threshold="threshold" :refresher-triggered="triggered"
               @refresherrefresh="refreshing" @refresherrestore="refresherrestore">

               <view v-if="indexs == 0" class="main">

                  <div>
                     <div class="m-main">
                        <!-- <view class="inTitle">{{Task}}</view> -->
                        <view class="inTmain">
                           <contacts v-for="(item,index) in dataListP" :key="index" :Pdata="item"
                              :fromW="indexs" @refreshTask="refreshTask"></contacts>
                        </view>
                     </div>
                  </div>
               </div>
            </view>
            <view v-if="indexs == 1" class="main">
               <div>
                  <div class="m-main">
                     <!-- <view class="inTitle">{{Task}}</view> -->
                     <view class="inTmain">
                        <contacts v-for="(item,index) in dataListQZ" :key="index" :Pdata="item" :fromW="indexs"
                           @refreshTask="refreshTask"></contacts>
                     </view>
               </view>
               <view v-if="indexs == 1" class="main">
                  <div>
                     <div class="m-main">
                        <!-- <view class="inTitle">{{Task}}</view> -->
                        <view class="applys" @click="toFriendRequest">
                           <view class="head-wrap">
                              <image src="../../static/apply.png" class="head" />
                              <view v-if=false class="tip">233</view>
                           </view>
                           <view class="content-wrap">
                              <text class="name">好友申请</text>
                              <text class="mess">若人生只如初见</text>
                           </view>
                           <view class="data-wrap">
                              <text class="data"></text>
                           </view>
                        </view>
                        <view class="inTmain">
                           <contacts v-for="(item,index) in dataListTXL" :key="index" :Pdata="item"
                              :fromW="indexs" @refreshTask="refreshTask"></contacts>
                        </view>
                     </div>
                  </div>
               </div>
            </view>
            <view v-if="indexs == 2" class="main">
               <div>
                  <div class="m-main">
                     <!-- <view class="inTitle">{{Task}}</view> -->
                     <view class="inTmain">
                        <contacts v-for="(item,index) in dataListTXL" :key="index" :Pdata="item" :fromW="indexs"
                           @refreshTask="refreshTask"></contacts>
                     </view>
               </view>
               <view v-if="indexs == 2" class="main">
                  <div>
                     <div class="m-main">

                        <view class="applys" @click="newGroup">
                           <view class="head-wraps">
                              <image src="../../static/qunzhu.png" class="head" />
                              <view v-if=false class="tip">233</view>
                           </view>
                           <view class="content-wrap">
                              <text class="name">群组创建</text>
                              <text class="mess">何事秋风悲画扇</text>
                           </view>
                           <view class="data-wrap">
                              <text class="data"></text>
                           </view>
                        </view>

                        <!-- <view class="inTitle">{{Task}}</view> -->
                        <view class="inTmain">
                           <contacts v-for="(item,index) in dataListQZ" :key="index" :Pdata="item"
                              :fromW="indexs" @refreshTask="refreshTask"></contacts>
                        </view>
                     </div>
                  </div>
               </div>
            </view>
               </view>

            </scroll-view>

         </swiper-item>

      </swiper>
		

   </view>
</template>

@@ -59,9 +100,10 @@
   import axios from '../../static/lib/axios.js'
   import contacts from '../../components/contacts/contacts.vue'
   import navBarTop from '../../components/nav-bar-top/nav-bar-top.vue';
   export default{
   export default {
      components: {
         navBarTop,contacts
         navBarTop,
         contacts
      },
      data() {
         return {
@@ -69,10 +111,10 @@
                  name: '正在聊天'
               },
               {
                  name: '群组'
                  name: '好友'
               },
               {
                  name: '通讯录'
                  name: '群组'
               }
            ],
            swiperHeight: 0,
@@ -81,7 +123,7 @@
            show: true,
            dataListP: [],
            dataListQZ: [],
            dataListTXL:[],
            dataListTXL: [],
            fromW: '',
            onTop: false, //是否吸顶
            rect: '', //页面滚动距离
@@ -89,33 +131,66 @@
            titleTop: '', //
            hello: false,
            userName: '',
            scrollTop: 0,
            threshold: 50,
            triggered: false,
            isRefreshing: false, // 是否在刷新中
            refresherFlag: true,
         }
      },
      activated(){
            this.beginObj();
            this.getdataList(0);
          },
         onReady() {
            let that = this;
            uni.getSystemInfo({
               success(e) {
                  console.log(e);
                  let {
                     windowWidth,
                     windowHeight,
                     safeArea
                  } = e;
                  const query = uni.createSelectorQuery().in(that);
                  query
                     .select('#swiperBox')
                     .boundingClientRect(data => {
                        that.swiperHeight = safeArea.bottom - data.top;
                     })
                     .exec();
               }
            });
         },
      activated() {
         this.beginObj();
         this.getdataList(0);
      },
      onReady() {
         let that = this;
         uni.getSystemInfo({
            success(e) {
               console.log(e);
               let {
                  windowWidth,
                  windowHeight,
                  safeArea
               } = e;
               const query = uni.createSelectorQuery().in(that);
               query
                  .select('#swiperBoxPeo')
                  .boundingClientRect(data => {

                     that.swiperHeight = (safeArea.bottom - data.top);

                  })
                  .exec();
            }
         });
      },
      methods: {

			
         refreshing() {
				
            if (this.isRefreshing) {
               return;
            }
            this.isRefreshing = true;
            //界面下拉触发，triggered可能不是true，要设为true
            if (!this.triggered) {
               this.triggered = true;
            }
				
            this.dataListP = [];
            this.dataListQZ = [];
            this.dataListTXL = [];
				
            this.getdataList()
         },

         refresherrestore() {
		
			
				
         },

         change(index) {
            this.current = index;
         },
@@ -137,75 +212,115 @@
         },
         getdataList() {
            var that = this;
            if(this.current == 0){
            if (this.current == 0) {
               uni.request({
                  url:"http://223.82.109.183:2082/api/chat-records/getChatListPage",
                  method:"get",
                  data:{
                  url: this.$store.state.piAPI + "/chat-records/getChatListPage",
                  method: "get",
                  data: {
                     senderId: WxStorage.get("ids")
                  },
                  success:(res)=> {
                  success: (res) => {
                     var resdata = res.data.data;
                     for (var i = 0; i < resdata.length; i++) {
                        if(resdata[i].avatar == null || resdata[i].avatar == ""){
                           resdata[i].avatar = "http://s16s652780.51mypc.cn/img/bg/img-logo.png";
                        if (resdata[i].avatar == null || resdata[i].avatar == "") {
                           resdata[i].avatar = "https://gimg2.baidu.com/image_search/src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fimages%2F20191109%2F1d3d4d82715444c4b8284f65e3feed10.jpeg&refer=http%3A%2F%2F5b0988e595225.cdn.sohucs.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1632484198&t=1f4086a5894cbf83b311fa37c276405c";
                        }
                     }
                     that.dataListP = resdata;
                     that.swiperHeight = resdata.length * 85;

                     that.scrollTop = 0;

                     setTimeout(() => {
                        that.triggered = false; //触发onRestore，并关闭刷新图标 正常应该放在请求成功得接口里
                        that.isRefreshing = false;
                     }, 1000)

                  }
               });
            }else if(this.current == 1){
            } else if (this.current == 1) {
               uni.request({
                  url:"http://223.82.109.183:2082/api/chatgroup/selectList",
                  method:"POST",
                  data:{
                     senderId: WxStorage.get("ids")
                  url: this.$store.state.piAPI + "/friend/page?current=1&size=9999",
                  method: "get",
                  data: {
                     applicant: WxStorage.get("ids")
                  },
                  success:(res)=> {
                     var resdata = res.data.data;	
                  success: (res) => {
                     var resdata = res.data.data.records;
                     for (var i = 0; i < resdata.length; i++) {
                        if(resdata[i].avatar == null || resdata[i].avatar == ""){
                           resdata[i].avatar = "http://s16s652780.51mypc.cn/img/bg/qunz.png";

                        if (resdata[i].avatar == null || resdata[i].avatar == "") {
                           resdata[i].avatar = "https://gimg2.baidu.com/image_search/src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fimages%2F20191109%2F1d3d4d82715444c4b8284f65e3feed10.jpeg&refer=http%3A%2F%2F5b0988e595225.cdn.sohucs.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1632484198&t=1f4086a5894cbf83b311fa37c276405c";
                        }
                     }

                     that.dataListTXL = resdata;

                     that.scrollTop = 0;
							
                     setTimeout(() => {
                        that.triggered = false; //触发onRestore，并关闭刷新图标 正常应该放在请求成功得接口里
                        that.isRefreshing = false;
                     }, 1000)

                  }
               })
            } else if (this.current == 2) {

               uni.request({
                  url: this.$store.state.piAPI + "/chatgroup/selectList",
                  method: "GET",
                  data: {
                     id: WxStorage.get("ids")
                  },
                  contentType: "application/x-www-form-urlencoded",
                  success: (res) => {
                     var resdata = res.data.data;
                     for (var i = 0; i < resdata.length; i++) {
                        if (resdata[i].avatar == null || resdata[i].avatar == "") {
                           resdata[i].avatar = "../../static/images/people.png";
                        }
                     }
                     that.dataListQZ = resdata;
                     that.swiperHeight = resdata.length * 85;

                     that.scrollTop = 0;
							
                     setTimeout(() => {
                        that.triggered = false; //触发onRestore，并关闭刷新图标 正常应该放在请求成功得接口里
                        that.isRefreshing = false;
                     }, 1000)

                  }
               })
            }else if(this.current == 2){
               uni.request({
                  url:"http://223.82.109.183:2082/api/blade-user/pages?current=1&size=9999",
                  method:"get",
                  data:{
                     senderId: WxStorage.get("ids")
                  },
                  success:(res)=> {
                     var resdata = res.data.data.records;
                     for (var i = 0; i < resdata.length; i++) {
					
                        if(resdata[i].avatar == null || resdata[i].avatar == ""){
                           resdata[i].avatar = "http://s16s652780.51mypc.cn/img/bg/img-logo.png";
                        }
                     }
                     that.dataListTXL = resdata;
                     that.swiperHeight = resdata.length * 85;
                  }
               })
               });
            }
         },
         refreshTask() {
            this.getdataList(1);
         },
			
         toFriendRequest() {
            uni.navigateTo({
               url: '/pages/groupChat/friendrequest?'
            });
         },
         addFriend() {
            uni.navigateTo({
               url: '/pages/groupChat/addFriend?'
            });
         },
         newGroup() {
            uni.navigateTo({
               url: '/pages/groupChat/newGroup/newGroup?'
            });
         }
      },
      mounted() {
			

      },
      onShow() {
         this.beginObj();
         this.getdataList(0);
			
      },
      onPageScroll(e) {
         // console.log(e.scrollTop, 'pingmu')
         this.rect = e.scrollTop
      },
      watch: {
@@ -220,18 +335,18 @@
      onLoad: function(options) {
         this.userName = options.login;
         // if(options.txlType == 2){
            this.current = 2;
         // this.current = 0;
         // }
			

      }
   }
</script>

<style lang="scss">
<style lang="scss" scoped>
   .work {
      width: 100%;
      height: 100%;
      padding: 0rem 2.5% 3rem 2.5%;
      padding: 0;
      box-sizing: border-box;

      .hello {
@@ -269,8 +384,8 @@
      }

      .main {
         margin-top: 0.625rem;
			
         margin-top: 0.225rem;

         .m-title {
            width: 100%;
            height: 2rem;
@@ -307,18 +422,139 @@
               padding-bottom: 0.5rem;
               box-sizing: border-box;
            }
				

         }

         .m-main {
            box-sizing: border-box;

            .main {
               padding: 0 16px;
            }
         }
      }
   }

   .message-icon {
      width: 32rpx;
      height: auto;
      font-size: 28px;
      margin-right: 27rpx;
   }
	

   .top-bar {
      background-color: rgba(255, 255, 255, .96);
      // background-color: #42B983;
      box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, .1);
   }

   .applys {
      display: flex;
      // margin: 40rpx 0;
      margin: 16rpx 32rpx !important;
      height: 130rpx;
      align-items: center;
      border-bottom: 1px solid rgba(0, 0, 0, .1);

      &:active {
         background-color: rgba(243, 244, 246, 1);
      }

      .head-wrap {
         position: relative;


         image {
            width: 96rpx;
            height: 96rpx;
            border-radius: 20upx;
            background-color: rgba(255, 228, 49, 1);
         }

         .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;
         }
      }

      .head-wraps {
         position: relative;


         image {
            width: 96rpx;
            height: 96rpx;
            border-radius: 20upx;
            background-color: rgba(85, 170, 255, 1.0);
         }

         .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;
         }
      }

      .content-wrap {
         margin-left: 32rpx;
         flex: 1;

         .name {
            display: block;
            color: rgba(39, 40, 50, 1);
            font-size: 36rpx;
            font-weight: 400;
            line-height: 50rpx;
         }

         .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;
         }
      }

      .data-wrap {

         justify-content: right;

         .data {
            font-size: 24upx;
            color: rgba(39, 40, 50, 0.4);
            line-height: 50rpx;
         }
      }
   }

   .swiper-item {
      overflow-y: auto !important;
   }

   .tab {
      margin-bottom: 10rpx;
   }
</style>