You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
312 lines
7.5 KiB
312 lines
7.5 KiB
<template name="KeHu">
|
|
<view class="main_background">
|
|
<view class="top">
|
|
<image class="top_banner" src="../../static/images/kehu/bg_2.png">
|
|
<view class="button_add_new" @click="onClickAddNew">
|
|
<text class="button_text">新增 +</text>
|
|
</view>
|
|
</image>
|
|
</view>
|
|
<u-gap height="40rpx"></u-gap>
|
|
<u-tabs
|
|
:list="tabs"
|
|
:scrollable="false"
|
|
lineColor="#D49B4B"
|
|
:activeStyle="{
|
|
color:'#333333',
|
|
fontSize:'32rpx',
|
|
fontWeight:'bold',
|
|
lineHeight:'45rpx',
|
|
transform: 'scale(1.05)'
|
|
}"
|
|
:inactiveStyle="{
|
|
color:'#999999',
|
|
fontSize:'30rpx',
|
|
lineHeight:'42rpx',
|
|
fontWeight:'400',
|
|
trasform: 'scale(1)'
|
|
}"
|
|
:current="currentTabIndex"
|
|
@click="onChangeTabIndex"
|
|
>
|
|
</u-tabs>
|
|
<u-gap height="24rpx"/>
|
|
<u-line color="#E2E2E2" length="702rpx" customStyle="position: relative;left: 24rpx;border: 1px solid #E2E2E2;" :hairline="true" margin="0 0 0 0"></u-line>
|
|
<view
|
|
class="tab_title_box"
|
|
>
|
|
<text class="tab_title_text"
|
|
v-for="(item,index) in infoTitles" :key="index"
|
|
>{{item}}</text>
|
|
</view>
|
|
<u-line color="#E2E2E2" length="702rpx" customStyle="position: relative;left: 24rpx;border: 1px solid #E2E2E2;" :hairline="true" margin="0 0 0 0"></u-line>
|
|
<u-list
|
|
height="900rpx"
|
|
:enableFlex="true"
|
|
:key="currentTabIndex"
|
|
preLoadScreen=10
|
|
@scrolltolower='listScrollToBottom'
|
|
|
|
>
|
|
<!--customStyle="background-color: #0081FF;"-->
|
|
<u-list-item
|
|
v-for="(item,index) in getCustomerToShow()" :key="index"
|
|
>
|
|
<view class="inner_tab_box_border">
|
|
<view
|
|
class="inner_tab_box"
|
|
>
|
|
<text class="inner_text_normal">{{item.name}}</text>
|
|
<text class="inner_text_normal">{{item.demand}}</text>
|
|
<text class="inner_text_normal">{{item.industry}}</text>
|
|
<text class="inner_text_normal">{{item.city}}</text>
|
|
<text v-if="item.status > 2" class="inner_text_normal">{{getStatusName(item.status).str}}</text>
|
|
<text v-else-if="item.status == 2" class="inner_text_green">{{getStatusName(item.status).str}}</text>
|
|
<text v-else-if="item.status == 1" class="inner_text_orange">{{getStatusName(item.status).str}}</text>
|
|
</view>
|
|
<u-line color="#E2E2E2" length="702rpx" customStyle="position: relative;border: 1px solid #E2E2E2;" :hairline="true" margin="0 0 0 0"></u-line>
|
|
</view>
|
|
|
|
</u-list-item>
|
|
</u-list>
|
|
<u-gap height="80rpx"/>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import config from "@/components/KeHu/KeHu.cofig.js"
|
|
let tabs = config.tabs;
|
|
let currentTabIndex = 0;
|
|
let infoTitles = config.infoTitles;
|
|
let statusDefines = config.statusDefines;
|
|
///客户端数据管理器
|
|
var customermanager = getApp().globalData.customermanager;
|
|
export default {
|
|
name:"KeHu",
|
|
created(){
|
|
this.onChangeTabIndex({index:0});
|
|
var Define = getApp().globalData.Define;
|
|
var key = Define.FireKeys.AddNewCustomerSuccess;
|
|
this.$fire.on(key,result=>{
|
|
///把所有数据清理一遍
|
|
this.customermanager.allCustom.clear();
|
|
this.customermanager.waitCustom.clear();
|
|
//重新获取数据
|
|
this.customermanager.allCustom.getNextPage();
|
|
this.customermanager.waitCustom.getNextPage();
|
|
});
|
|
},
|
|
destroyed(){
|
|
var key = getApp().globalData.Define.FireKeys.AddNewCustomerSuccess;
|
|
this.$fire.off(key);
|
|
},
|
|
data() {
|
|
return {
|
|
customermanager,
|
|
tabs,
|
|
currentTabIndex,
|
|
infoTitles,
|
|
statusDefines,
|
|
};
|
|
},
|
|
methods:{
|
|
///获取列表的key
|
|
getListKey(){
|
|
var index = this.currentTabIndex;
|
|
return index +'_'+ this.specialKey;
|
|
},
|
|
///点击了新增按钮
|
|
onClickAddNew(){
|
|
//console.log("你要新增吗？");
|
|
uni.navigateTo({
|
|
url:"/pages/AddNewCustomer/AddNewCustomer",
|
|
})
|
|
},
|
|
/**
|
|
* 根据当前选中的标签，获取需要显示的客户的数据
|
|
*/
|
|
getCustomerToShow(){
|
|
var index = this.currentTabIndex;
|
|
//根据选择的tab，设置需要显示什么内容
|
|
var group = this.customermanager.getTargetGroupByIndex(index);
|
|
return group.customerinfo;
|
|
},
|
|
onChangeTabIndex(item){
|
|
var index = item.index;
|
|
this.currentTabIndex = index;
|
|
var group = this.customermanager.getTargetGroupByIndex(index);
|
|
if(group.allCount == 0){
|
|
///没有数据，就那一次
|
|
group.getNextPage();
|
|
}
|
|
},
|
|
getStatusName(index){
|
|
let len = this.statusDefines.length;
|
|
if(index >= len || index < 0){
|
|
return {str:"错误",color:"#ff0000"};
|
|
}
|
|
return this.statusDefines[index];
|
|
},
|
|
|
|
///当列表滑动到最下方时触发
|
|
listScrollToBottom(){
|
|
console.log("end of the custom list");
|
|
var group = this.customermanager.getTargetGroupByIndex(this.currentTabIndex);
|
|
group.getNextPage();
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.main_background{
|
|
opacity: 1;
|
|
overflow: scroll;
|
|
touch-action: auto;
|
|
flex-direction: column;
|
|
display: flex;
|
|
margin: 0 auto;
|
|
left: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
right: 0;
|
|
}
|
|
|
|
.top{
|
|
width: 750rpx;
|
|
height: 295rpx;
|
|
position: relative;
|
|
}
|
|
.top_banner{
|
|
position: relative;
|
|
left: 0;
|
|
top: 0;
|
|
width: 750rpx;
|
|
height: 295rpx;
|
|
}
|
|
.button_add_new{
|
|
width: 134rpx;
|
|
height: 54rpx;
|
|
background: #FFFFFF;
|
|
border: 1rpx solid #D49B4B;
|
|
opacity: 1;
|
|
border-radius: 28rpx;
|
|
position: absolute;
|
|
top: 266rpx;
|
|
right: 24rpx;
|
|
display: flex;
|
|
justify-content: center;
|
|
text-align: center;
|
|
}
|
|
.button_text{
|
|
height: 40rpx;
|
|
font-size: 28rpx;
|
|
font-weight: 400;
|
|
color: #D49B4B;
|
|
opacity: 1;
|
|
}
|
|
|
|
.tab_title_box{
|
|
width: 702rpx;
|
|
height: 100rpx;
|
|
//background-color: #1CBBB4;
|
|
position: relative;
|
|
left: 24rpx;
|
|
right: 24rpx;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
flex-wrap: nowrap;
|
|
}
|
|
|
|
|
|
.tab_title_text{
|
|
width: 168rpx;
|
|
//height: 100rpx;
|
|
font-size: 28rpx;
|
|
font-weight: 400;
|
|
color: #333333;
|
|
opacity: 1;
|
|
text-align: center;
|
|
text-overflow: ellipsis;
|
|
//white-space: nowrap;
|
|
overflow: hidden;
|
|
}
|
|
|
|
///列表里面一行的外框，因为需要加一个下划线
|
|
.inner_tab_box_border{
|
|
width: 702rpx;
|
|
height: 100rpx;
|
|
position: relative;
|
|
left: 24rpx;
|
|
right: 24rpx;
|
|
//background-color: #366092;
|
|
}
|
|
|
|
.inner_tab_box{
|
|
width: 702rpx;
|
|
height: 100rpx;
|
|
//background-color: #1CBBB4;
|
|
position: relative;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
flex-wrap: nowrap;
|
|
}
|
|
|
|
.inner_text_normal{
|
|
width: 168rpx;
|
|
max-height: 100rpx;
|
|
font-size: 24rpx;
|
|
font-weight: 400;
|
|
color: #333333;
|
|
opacity: 1;
|
|
text-align: center;
|
|
///为了限制当前只显示两行数据，显示多了会导致看到的东西有点奇怪
|
|
display: -webkit-box;
|
|
-webkit-box-orient: vertical;
|
|
-webkit-line-clamp: 2;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
}
|
|
///跟进中，绿色
|
|
.inner_text_green{
|
|
width: 168rpx;
|
|
max-height: 100rpx;
|
|
font-size: 24rpx;
|
|
font-weight: 400;
|
|
color: #41CF41;
|
|
opacity: 1;
|
|
text-align: center;
|
|
///为了限制当前只显示两行数据，显示多了会导致看到的东西有点奇怪
|
|
display: -webkit-box;
|
|
-webkit-box-orient: vertical;
|
|
-webkit-line-clamp: 2;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
}
|
|
///橘色
|
|
.inner_text_orange{
|
|
width: 168rpx;
|
|
max-height: 100rpx;
|
|
font-size: 24rpx;
|
|
font-weight: 400;
|
|
color: #D49B4B;
|
|
opacity: 1;
|
|
text-align: center;
|
|
///为了限制当前只显示两行数据，显示多了会导致看到的东西有点奇怪
|
|
display: -webkit-box;
|
|
-webkit-box-orient: vertical;
|
|
-webkit-line-clamp: 2;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.list{
|
|
width: 750rpx;
|
|
background-color: #39B54A;
|
|
//top: 500rpx;
|
|
}
|
|
</style>
|
|
|