<template>
|
<!-- 跟进记录 -->
|
<view class="container">
|
<view>
|
<h-tabs
|
class="tab"
|
:tabData="tabs"
|
:config="{
|
color: '#abb1cc',
|
activeColor: '#518EFF',
|
underLineColor: '#518EFF',
|
underLineHeight: 6,
|
fontSize: '28',
|
underLineWidth: 60,
|
}"
|
@tabClick="changeType"
|
/>
|
</view>
|
<view class="content-row font-14" v-for="item in list">
|
<view class="flex align-center">
|
<image class="header-img" src="../../../static/images/default-avatar.png"></image>
|
<view class="flex flex-v ml-10">
|
<text>{{item.staffName}}</text>
|
<text class="gray font-12">{{item.createTime}}</text>
|
</view>
|
</view>
|
<view class="mt-10">
|
<text>{{item.content}}</text>
|
</view>
|
<view class="mt-10 mb-10 flex" :start="imgIndex">
|
<image v-for="(op,index) in item.albums" @click="previewImg(item.albums,index)" class="content-img mr-10" :src="op.img"></image>
|
</view>
|
<view class="flex align-center justify-between mt-5 gray font-13">
|
<navigator :url="'../../member/detail?id='+item.vipId" hover-class="none" style="padding-right: 50px;">客户: {{item.vipName}}</navigator>
|
<view class="flex align-center" v-if="item.nextNotifyTime">
|
<text class="iconfont iconzhong mr-5"></text>
|
<text>{{item.nextNotifyTime}}</text>
|
</view>
|
</view>
|
<view class="flex align-center justify-between mt-5 gray font-13">
|
<text style="padding-right: 50px;" @click="toOrder(item)">订单: {{item.orderAbstract}}</text>
|
</view>
|
<view class="right mt-5">
|
<text class="iconfont" :class="item.zans && item.zans.indexOf(userInfo.id)>-1?'blue iconlove-b':'iconlove-b1'" @click="thumbsUp(item)"></text>
|
<text class="iconfont iconliuyan1 ml-15" @click.stop="showComment(item.id)"></text>
|
</view>
|
<view class="content-row-notes flex align-center blue" v-if="item.zanUsers && item.zanUsers.length">
|
<text class="iconfont iconlove-b1 mr-10"></text>
|
<text v-for="(op, i) in item.zanUsers">{{op.suName}}<text v-if="i!=item.zanUsers.length-1">,</text></text>
|
</view>
|
<view class="content-row-notes blue" v-if="item.followupComments && item.followupComments.length">
|
<view v-for="op in item.followupComments">{{op.createBy}}: {{op.content}}</view>
|
</view>
|
</view>
|
<view v-if="list.length">
|
<uni-load-more :status="loadStatus" color="#a5abaf"></uni-load-more>
|
</view>
|
<no-record :isShow="!list.length" txt="暂无跟进记录"></no-record>
|
<uni-popup ref="commentEl" type="bottom" :isShowMask="false">
|
<view class="message-row">
|
<input type="text" v-model="comment" :focus="true" class="message-input" placeholder="评论" placeholder-class="placeholder"/>
|
<button class="blue-btn message-btn" :disabled="!comment" @click="addFollowupComment">发送</button>
|
</view>
|
</uni-popup>
|
<fillter :isShow="isShowFilter" :staffList="staffList" :vipList="vipList" @reset="resetFilter" @change="changeFilter"></fillter>
|
</view>
|
</template>
|
|
<script>
|
import HTabs from "@/components/liuyuno-tabs/liuyuno-tabs.vue";
|
import fillter from './filter'
|
import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
|
import uniPopup from '../../../components/uni-popup/uni-popup'
|
export default {
|
components: {
|
uniPopup,
|
HTabs,
|
fillter,
|
uniLoadMore
|
},
|
data() {
|
return {
|
tabs:[
|
{
|
state: 1,
|
name: '全部'
|
},
|
{
|
state: 2,
|
name: '我发出的'
|
},
|
{
|
state: 3,
|
name: '我的团队'
|
}
|
],
|
type: 1,
|
list: [],
|
imgIndex: 0,
|
isShowFilter: false,
|
pageNum: 0,
|
loadStatus: 'more',
|
userInfo: {},
|
comment: '',
|
follId: '',
|
staffList: [],
|
vipList: [],
|
startTime: '',
|
endTime: ''
|
}
|
},
|
onNavigationBarButtonTap(e){
|
if(e.width && e.index==0){
|
uni.navigateTo({
|
url:"./addRecord"
|
})
|
this.isShowFilter = false;
|
}
|
if(e.index==1){
|
this.isShowFilter = !this.isShowFilter;
|
}
|
},
|
onLoad(options) {
|
if(options.selectInfo){
|
this.vipList.push(JSON.parse(options.selectInfo))
|
}
|
this.getUserInfo()
|
|
// 判断权限
|
// #ifdef APP-PLUS
|
if(!this.$utils.hasPermission('gjjl.add')){
|
let webView = this.$mp.page.$getAppWebview();
|
webView.setTitleNViewButtonStyle(0, {
|
width: 0,
|
});
|
}
|
// #endif
|
},
|
onShow() {
|
this.reloadList(true)
|
},
|
onPullDownRefresh(){
|
this.reload();
|
let timer = setTimeout(function () {
|
uni.stopPullDownRefresh();
|
clearTimeout(timer);
|
timer = null;
|
}, 800);
|
},
|
onReachBottom(){
|
this.loadList()
|
},
|
methods:{
|
getUserInfo(){
|
let roleInfo = this.$httpUtils.getRoleInfo();
|
if(roleInfo){
|
this.userInfo = roleInfo;
|
}
|
},
|
// 重新加载数据， 重置分页参数
|
reload(){
|
this.pageNum = 0;
|
this.loadStatus = 'more';
|
this.loadList(true)
|
},
|
// 重新加载数据， 不重置分页参数
|
reloadList(isNeedAdd){
|
if(!this.list.length){
|
this.loadList();
|
return;
|
}
|
let staffIds = this.staffList.map((item) => {
|
return item.id;
|
});
|
let vipIds = this.vipList.map((item) => {
|
return item.id;
|
});
|
this.$httpUtils.request('/api/followup/findFollowup', {
|
startTime: this.startTime,
|
endTime: this.endTime,
|
limit: isNeedAdd?this.list.length+1:this.list.length,
|
offset: 0,
|
queryType: this.type,
|
staffIds: staffIds,
|
vipIds: vipIds
|
}, 'POST').then((res) => {
|
console.log(res.rows)
|
if(res.status == 200){
|
this.list = res.rows
|
}
|
})
|
},
|
loadList(isRest){
|
if(this.loadStatus!=='more'){
|
return;
|
}
|
let staffIds = this.staffList.map((item) => {
|
return item.id;
|
});
|
let vipIds = this.vipList.map((item) => {
|
return item.id;
|
});
|
this.$httpUtils.request('/api/followup/findFollowup', {
|
startTime: this.startTime,
|
endTime: this.endTime,
|
limit: 10,
|
offset: this.pageNum,
|
queryType: this.type,
|
staffIds: staffIds,
|
vipIds: vipIds
|
}, 'POST').then((res) => {
|
if(res.status == 200){
|
let result = res.rows;
|
if(result.length < 10){
|
this.loadStatus = 'noMore';
|
} else {
|
this.pageNum = this.pageNum + 10;
|
this.loadStatus = 'more';
|
}
|
if(isRest){
|
this.list = result
|
}else{
|
this.list = this.list.concat(result);
|
}
|
}
|
})
|
},
|
changeType(index){
|
this.type = index+1;
|
this.reload()
|
},
|
// 预览图片
|
previewImg(imgList, index) {
|
if(!imgList.length){
|
return;
|
}
|
this.imgIndex = index;
|
imgList = imgList.map((item) => {
|
return item.img;
|
});
|
uni.previewImage({
|
urls: imgList,
|
indicator: 'default',
|
loop:true
|
})
|
},
|
// 点赞
|
thumbsUp(item){
|
this.$httpUtils.request('/api/followup/zanFollowup/'+item.id).then((res) => {
|
if(res.status == 200){
|
this.reloadList()
|
}
|
})
|
},
|
// 评论
|
addFollowupComment(){
|
if(this.isRequesting){
|
return;
|
}
|
this.isRequesting = true;
|
this.$httpUtils.request('/api/followup/addFollowupComment', {
|
follId: this.follId,
|
content: this.comment
|
}, 'POST').then((res) => {
|
if(res.status == 200){
|
this.reloadList();
|
this.$refs.commentEl.close();
|
this.comment = '';
|
}else{
|
this.$toast.info(res.info)
|
}
|
this.isRequesting = false;
|
}).catch((err) => {
|
this.isRequesting = false;
|
})
|
},
|
showComment(id){
|
this.follId = id;
|
this.$refs.commentEl.open();
|
},
|
setData(selectItem){
|
let pages = getCurrentPages();
|
let prevPage = pages[ pages.length - 1 ];
|
if(prevPage.route.indexOf('selectCustomer') > -1){
|
this.vipList = selectItem;
|
}else{
|
this.staffList = selectItem;
|
}
|
},
|
// 重置筛选条件
|
resetFilter(){
|
this.startTime = '';
|
this.endTime = '';
|
this.staffList = [];
|
this.vipList = [];
|
this.reload();
|
},
|
changeFilter(data){
|
this.startTime = data.startTime;
|
this.endTime = data.endTime;
|
this.reload();
|
},
|
toOrder(item){
|
if(item.orderId){
|
uni.navigateTo({
|
url: '../orderDetail?orderId='+item.orderId
|
})
|
}
|
if(item.serviceId){
|
uni.navigateTo({
|
url: '../serviceOrderDetail?id='+item.serviceId
|
})
|
}
|
}
|
}
|
}
|
</script>
|
|
<style>
|
page{
|
background: #F6F6F8;
|
height: 100%;
|
}
|
.container{
|
height: 100%;
|
}
|
.tab{
|
background: #FFFFFF;
|
}
|
.header-img{
|
width: 45px;
|
height: 45px;
|
border-radius: 50%;
|
}
|
.content-row{
|
background: #FFFFFF;
|
padding: 10px;
|
margin-top: 10px;
|
}
|
.content-img{
|
width: 80px;
|
height: 80px;
|
}
|
.content-row-notes{
|
line-height: 22px;
|
background: #F6F6F8;
|
padding: 5px;
|
margin-top: 5px;
|
font-size: 13px;
|
}
|
.message-row{
|
position: fixed;
|
bottom: 0;
|
left: 0;
|
right: 0;
|
display: flex;
|
align-items: center;
|
background: #eee;
|
padding: 10px;
|
margin-bottom: var(–safe-area-inset-bottom);
|
}
|
.message-input{
|
flex: 1;
|
font-size: 14px;
|
background: #FFFFFF;
|
height: 30px;
|
margin-right: 5px;
|
padding-left: 5px;
|
padding-right: 5px;
|
}
|
.message-btn{
|
margin: 0;
|
line-height: 30px;
|
border-radius: 2px;
|
font-size: 14px;
|
}
|
</style>
|
