公司小程序
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

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