gx

queenwuli

2021-01-28 b83ba3cc4687f21d744e9866e10e30e91229e8a4

 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>