<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>
|
