<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 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="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">
|
<image v-for="(item,index) in imgList" @click="previewImg(item.imgurl)" class="content-img mr-10" :src="item.imgurl"></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>
|
<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 DateTimePicker from '../../../components/bory-dateTimePicker/bory-dateTimePicker.vue'
|
export default {
|
components: {
|
HTabs,
|
DateTimePicker
|
},
|
data() {
|
return {
|
tabs:[
|
{
|
state: 1,
|
name: '全部'
|
},
|
{
|
state: 2,
|
name: '我发出的'
|
},
|
{
|
state: 3,
|
name: '我的团队'
|
}
|
],
|
imgList:[
|
{'imgurl':'../../../static/images/banner.jpg'},
|
{'imgurl':'../../../static/images/product.jpg'}
|
],
|
isShow:false,
|
messageShow:false,
|
}
|
},
|
methods:{
|
// 预览图片
|
previewImg(image) {
|
let imgArr=[]
|
imgArr[0]=image
|
//预览图片
|
uni.previewImage({
|
urls: imgArr
|
})
|
},
|
onNavigationBarButtonTap(e){
|
if(e.index==0){
|
uni.navigateTo({
|
url:"./addRecord"
|
})
|
}
|
if(e.width && e.index==1){
|
this.isShow=!this.isShow
|
}
|
},
|
showTime () {
|
this.$refs['date-time'].show();
|
},
|
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;
|
}
|
.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;
|
}
|
.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>
|
