gx

queenwuli

2021-01-11 1d1e327a1cbf8bd822078a9f71894f25ddcee437

 hive-app/pages/workbench/followRecords/index.vue

New file
@@ -0,0 +1,170 @@
<template>
   <!-- 跟进记录 -->
   <view>
      <view>
         <h-tabs
            class="tab"
            :tabData="tabs" 
            :config="{
               color: '#abb1cc',
               activeColor: '#518EFF',
               underLineColor: '#518EFF',
               underLineHeight: 6,
               fontSize: '28',
               underLineWidth: 60,
            }"
            @tabClick="tabClick($event)"
         />
      </view>
      <view class="content-row font-14" v-for="item in 2">
         <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>
            </view>
         </view>
         <view class="mt-10">
            <text>截图服务了杨姐,她的面部比较干燥暗沉色斑较多,约下次来做一个面部护理</text>
         </view>
         <view class="mt-10 flex" :start="num">
            <image v-for="(item,index) in imgList" @click="previewImg(index)" class="content-img mr-10" :src="item"></image>
         </view>
         <view class="flex align-center justify-between mt-5">
            <text>客户:杨依依</text>
            <view class="flex align-center">
               <text class="iconfont iconzhong mr-5"></text>
               <text>2020-12-31 12:34</text>
            </view>
         </view>
         <view class="mt-5">
            <text>订单:面部护理等</text>
         </view>
         <view class="right mt-5">
            <text class="iconfont iconxin"></text>
            <text class="iconfont iconliuyan1 ml-20" @click="showMessage"></text>
         </view>
         <view class="content-row-notes flex align-center blue">
            <text class="iconfont iconxin mr-10"></text>
            <text>李贝,拉拉</text>
         </view>
         <view class="content-row-notes flex align-center blue">
            <text>李贝: 好的,继续跟进</text>
         </view>
      </view>
      <fillter :isShow="isShowFilter" @change="changeFilter"></fillter>
      <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>
   </view>
</template>

<script>
   import HTabs from "@/components/liuyuno-tabs/liuyuno-tabs.vue";
   import fillter from './filter'
   export default {
      components: {
          HTabs,
         fillter
      },
      data() {
        return {
          tabs:[
            {
               state: 1,
               name: '全部'
            },
            {
               state: 2,
               name: '我发出的'
            },
            {
               state: 3,
               name: '我的团队'
            }
         ],
         imgList:[
            '../../../static/images/banner.jpg',
            '../../../static/images/product.jpg'
         ],
         messageShow:false,
         isShowFilter: false,
         num:0
        }  
      },
      methods:{
         // 预览图片
         previewImg(index) {
            // let imgArr=[]
            // imgArr.push(image)
            //预览图片
            uni.previewImage({
               urls: this.imgList,
               indicator:'default',
               loop:true
            })
         },
         onNavigationBarButtonTap(e){
            if(e.index==0){
               uni.navigateTo({
                  url:"./addRecord"
               })
            }
            if(e.width && e.index==1){
               this.isShowFilter = !this.isShowFilter;
            }
         },
         showMessage(){
            this.messageShow=!this.messageShow
         },
      }
   }
</script>

<style>
   page{
      background: #F6F6F8;
   }
   .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: 20px;
      background: #F6F6F8;
      padding: 5px;
      margin-top: 10px;
   }
   .message-row{
      display: flex;
      align-items: center;
      background: #F6F6F8;
      padding: 10px;
   }
   .message-input{
      flex: 1;
      font-size: 14px;
      background: #FFFFFF;
      height: 30px;
      margin-right: 5px;
   }
   .message-btn{
      margin: 0;
      line-height: 30px;
      border-radius: 0;
   }
</style>