<!-- 工作台 -->
|
<template>
|
<view class="work">
|
<!-- 自定义顶部导航栏 -->
|
<!-- <navBarTop :title="'聊天室'"></navBarTop> -->
|
<view class="tab">
|
<u-tabs :list="list" :is-scroll="false" :current="current" active-color="#103289" inactive-color="#595959"
|
height="100" @change="change"></u-tabs>
|
</view>
|
<swiper id="swiperBox" :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>
|
</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>
|
</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>
|
</div>
|
</div>
|
</view>
|
</swiper-item>
|
</swiper>
|
|
</view>
|
</template>
|
|
<script>
|
import WxStorage from "../../static/lib/wxStorage.js"
|
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{
|
components: {
|
navBarTop,contacts
|
},
|
data() {
|
return {
|
list: [{
|
name: '正在聊天'
|
},
|
{
|
name: '群组'
|
},
|
// {
|
// name: '通讯录'
|
// }
|
],
|
swiperHeight: 0,
|
zhanwei: '', //因为小程序中底部和顶部栏占位置，uniapp中不占位置
|
current: 0,
|
show: true,
|
dataListP: [],
|
dataListQZ: [],
|
dataListTXL:[],
|
fromW: '',
|
onTop: false, //是否吸顶
|
rect: '', //页面滚动距离
|
menutop: '', //组件距离顶部的距离
|
titleTop: '', //
|
hello: false,
|
userName: '',
|
}
|
},
|
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();
|
}
|
});
|
},
|
methods: {
|
change(index) {
|
this.current = index;
|
},
|
tabsChange(e) {
|
this.current = e.detail.current;
|
this.getdataList();
|
},
|
beginObj() {
|
this.titleTop = '2.6rem';
|
this.zhanwei = '3rem';
|
//#ifdef MP-WEIXIN
|
console.log('uni-app小程序中')
|
this.titleTop = '0';
|
this.zhanwei = '0';
|
//#endif
|
},
|
onClick(e) {
|
console.log(e, 777878)
|
},
|
getdataList() {
|
var that = this;
|
if(this.current == 0){
|
uni.request({
|
url:that.$store.state.piAPI + "/chat-records/getChatListPage",
|
method:"get",
|
data:{
|
senderId: WxStorage.get("ids")
|
},
|
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://106.225.193.35:83/img/bg/img-logo.png";
|
}
|
}
|
that.dataListP = resdata;
|
that.swiperHeight = resdata.length * 85;
|
}
|
});
|
}else if(this.current == 1){
|
uni.request({
|
url:that.$store.state.piAPI + "/chatgroup/selectList",
|
method:"POST",
|
data:{
|
senderId: WxStorage.get("ids")
|
},
|
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://106.225.193.35:83/img/bg/qunz.png";
|
}
|
}
|
that.dataListQZ = resdata;
|
that.swiperHeight = resdata.length * 85;
|
}
|
})
|
}else if(this.current == 2){
|
uni.request({
|
url:that.$store.state.piAPI + "//blade-user/pagetxl?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://106.225.193.35:83/img/bg/img-logo.png";
|
}
|
}
|
that.dataListTXL = resdata;
|
that.swiperHeight = resdata.length * 85;
|
}
|
})
|
}
|
},
|
refreshTask() {
|
this.getdataList(1);
|
},
|
|
},
|
mounted() {
|
this.beginObj();
|
this.getdataList(0);
|
|
},
|
onPageScroll(e) {
|
// console.log(e.scrollTop, 'pingmu')
|
this.rect = e.scrollTop
|
},
|
watch: {
|
rect() {
|
if (this.rect >= this.menutop) {
|
this.onTop = true
|
} else {
|
this.onTop = false
|
}
|
}
|
},
|
onLoad: function(options) {
|
this.userName = options.login;
|
if(options.txlType == 2){
|
this.current = 2;
|
}
|
|
}
|
}
|
</script>
|
|
<style lang="scss">
|
.work {
|
width: 100%;
|
height: 100%;
|
padding: 0rem 2.5% 3rem 2.5%;
|
box-sizing: border-box;
|
|
.hello {
|
position: absolute;
|
top: 0;
|
left: 25%;
|
width: 50%;
|
height: 2rem;
|
border-radius: 20rem;
|
color: #fff;
|
background-color: rgba($color: #000000, $alpha: 0.5);
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
}
|
|
.center {
|
padding-top: 0.5rem;
|
display: flex;
|
align-items: center;
|
justify-content: space-around;
|
|
.left,
|
.right {
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
flex-direction: column;
|
|
image {
|
width: 4rem;
|
height: 4rem;
|
}
|
}
|
}
|
|
.main {
|
margin-top: 0.625rem;
|
|
.m-title {
|
width: 100%;
|
height: 2rem;
|
display: flex;
|
align-items: center;
|
justify-content: space-around;
|
padding-top: 0.8rem;
|
padding-bottom: 0.5rem;
|
// border: 1px solid #B3E19D;
|
box-sizing: border-box;
|
|
.m-t {
|
padding-bottom: 0.5rem;
|
box-sizing: border-box;
|
}
|
}
|
|
.m-titletop {
|
width: 95%;
|
height: 2.2rem;
|
display: flex;
|
align-items: center;
|
justify-content: space-around;
|
padding-top: 0.8rem;
|
padding-bottom: 0.5rem;
|
// border: 1px solid #B3E19D;
|
box-sizing: border-box;
|
position: fixed;
|
background-color: #fff;
|
z-index: 3;
|
border-bottom: 1px solid rgba($color: #000000, $alpha: 0.3);
|
|
.m-t {
|
padding-bottom: 0.5rem;
|
box-sizing: border-box;
|
}
|
|
}
|
|
.m-main {
|
box-sizing: border-box;
|
}
|
}
|
}
|
</style>
|
