From b83ba3cc4687f21d744e9866e10e30e91229e8a4 Mon Sep 17 00:00:00 2001
From: queenwuli <942534046@qq.com>
Date: Thu, 28 Jan 2021 16:23:30 +0800
Subject: [PATCH] gx
---
hive-app/pages/workbench/followRecords/index.vue | 387 +++++++++++++++++++++++++++++++++++++-----------------
1 files changed, 263 insertions(+), 124 deletions(-)
diff --git a/hive-app/pages/workbench/followRecords/index.vue b/hive-app/pages/workbench/followRecords/index.vue
index 298fed6..7ccfec3 100644
--- a/hive-app/pages/workbench/followRecords/index.vue
+++ b/hive-app/pages/workbench/followRecords/index.vue
@@ -1,6 +1,6 @@
<template>
<!-- 跟进记录 -->
- <view>
+ <view class="container">
<view>
<h-tabs
class="tab"
@@ -13,103 +13,70 @@
fontSize: '28',
underLineWidth: 60,
}"
- @tabClick="tabClick($event)"
+ @tabClick="changeType"
/>
</view>
- <view v-if="isShow" class="filter-content font-14">
- <view class="filter-content-time">
- <text>开始时间</text>
- <view class="gray flex align-center" @click="showTime()">
- <text>请选择</text>
- <text class="iconfont iconarrow-backimg"></text>
- </view>
- <date-time-picker ref='date-time' type='datetime' @change='dateTimeChange'></date-time-picker>
- </view>
- <view class="filter-content-time">
- <text>结束时间</text>
- <view class="gray flex align-center" @click="showTime()">
- <text>请选择</text>
- <text class="iconfont iconarrow-backimg"></text>
- </view>
- <date-time-picker ref='date-time' type='datetime' @change='dateTimeChange'></date-time-picker>
- </view>
- <view class="filter-content-row">
- <view>
- <text>客户</text>
- </view>
- <view class="img-box">
- <image class="header-img mr-20" src="../../../static/images/default-avatar.png"></image>
- <navigator url="../../member/selectCustomer" hover-class="none">
- <text class="iconfont iconjia gray-outline-btn-circle ml-5"></text>
- </navigator>
- </view>
- </view>
- <view class="filter-content-row">
- <view>
- <text>员工</text>
- </view>
- <view class="img-box">
- <image class="header-img mr-20" src="../../../static/images/default-avatar.png"></image>
- <navigator url="../../manager/selectEmployee" hover-class="none">
- <text class="iconfont iconjia gray-outline-btn-circle ml-5"></text>
- </navigator>
- </view>
- </view>
- <view class="flex sticky-footer">
- <button class="white-btn flex-1">重置</button>
- <button class="blue-btn flex-1 ml-10">确定</button>
- </view>
- </view>
- <view v-else class="content-row font-14" v-for="item in 2">
+ <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>杨明</text>
- <text>2020-12 12:34</text>
+ <text>{{item.staffName}}</text>
+ <text class="gray font-12">{{item.createTime}}</text>
</view>
</view>
<view class="mt-10">
- <text>截图服务了杨姐,她的面部比较干燥暗沉色斑较多,约下次来做一个面部护理</text>
+ <text>{{item.content}}</text>
</view>
- <view class="mt-10 flex">
- <image v-for="(item,index) in imgList" @click="previewImg(item.imgurl)" class="content-img mr-10" :src="item.imgurl"></image>
+ <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">
- <text>客户:杨依依</text>
- <view class="flex align-center">
+ <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>2020-12-31 12:34</text>
+ <text>{{item.nextNotifyTime}}</text>
</view>
</view>
- <view class="mt-5">
- <text>订单:面部护理等</text>
+ <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 iconxin"></text>
- <text class="iconfont iconliuyan1 ml-20" @click="showMessage"></text>
+ <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">
- <text class="iconfont iconxin mr-10"></text>
- <text>李贝,拉拉</text>
+ <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 flex align-center blue">
- <text>李贝: 好的,继续跟进</text>
+ <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-show="messageShow" class="message-row">
- <input type="text" cursor-spacing="10" :focus="messageShow" class="message-input" placeholder="评论" placeholder-class="placeholder"/>
- <button class="green-btn message-btn">发送</button>
+ <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 DateTimePicker from '../../../components/bory-dateTimePicker/bory-dateTimePicker.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,
- DateTimePicker
+ fillter,
+ uniLoadMore
},
data() {
return {
@@ -127,40 +94,224 @@
name: '我的团队'
}
],
- imgList:[
- {'imgurl':'../../../static/images/banner.jpg'},
- {'imgurl':'../../../static/images/product.jpg'}
- ],
- isShow:false,
- messageShow:false,
+ 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:{
- // 预览图片
- previewImg(image) {
- let imgArr=[]
- imgArr[0]=image
- //预览图片
- uni.previewImage({
- urls: imgArr
+ 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
+ }
})
},
- onNavigationBarButtonTap(e){
- if(e.index==0){
+ 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:"./addRecord"
+ url: '../orderDetail?orderId='+item.orderId
})
}
- if(e.width && e.index==1){
- this.isShow=!this.isShow
+ if(item.serviceId){
+ uni.navigateTo({
+ url: '../serviceOrderDetail?id='+item.serviceId
+ })
}
- },
- showTime () {
- this.$refs['date-time'].show();
- },
- showMessage(){
- this.messageShow=!this.messageShow
- },
+ }
}
}
</script>
@@ -168,6 +319,10 @@
<style>
page{
background: #F6F6F8;
+ height: 100%;
+ }
+ .container{
+ height: 100%;
}
.tab{
background: #FFFFFF;
@@ -187,41 +342,22 @@
height: 80px;
}
.content-row-notes{
- line-height: 20px;
+ line-height: 22px;
background: #F6F6F8;
padding: 5px;
- margin-top: 10px;
- }
- .filter-content{
- position: fixed;
- left: 0;
- right: 0;
- height: 100%;
- background: #FFFFFF;
- padding: 0px 10px;
- }
- .filter-content-time{
- display: flex;
- align-items: center;
- justify-content: space-between;
- border-bottom: 1px solid #EDEAF4;
- padding: 10px 0;
- }
- .filter-content-row{
- padding: 10px 0;
- border-bottom: 1px solid #EDEAF4;
- }
- .img-box{
- display: flex;
- align-items: center;
- padding: 0 10px;
- margin-top: 10px;
+ margin-top: 5px;
+ font-size: 13px;
}
.message-row{
+ position: fixed;
+ bottom: 0;
+ left: 0;
+ right: 0;
display: flex;
align-items: center;
- background: #F6F6F8;
+ background: #eee;
padding: 10px;
+ margin-bottom: var(–safe-area-inset-bottom);
}
.message-input{
flex: 1;
@@ -229,10 +365,13 @@
background: #FFFFFF;
height: 30px;
margin-right: 5px;
+ padding-left: 5px;
+ padding-right: 5px;
}
.message-btn{
margin: 0;
line-height: 30px;
- border-radius: 0;
+ border-radius: 2px;
+ font-size: 14px;
}
</style>
--
Gitblit v1.9.1