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.
293 lines
6.8 KiB
293 lines
6.8 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="980rpx" :enableFlex="true">
|
|
<u-list-item
|
|
v-for="(item,index) in datasOfShowing" :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.needs}}</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 == 1" class="inner_text_green">{{getStatusName(item.status).str}}</text>
|
|
<text v-else-if="item.status == 0" 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 kehus = config.kehus;
|
|
let currentTabIndex = 0;
|
|
let datasOfShowing = kehus;
|
|
let infoTitles = config.infoTitles;
|
|
let statusDefines = config.statusDefines;
|
|
export default {
|
|
name:"KeHu",
|
|
data() {
|
|
return {
|
|
kehus,
|
|
tabs,
|
|
currentTabIndex,
|
|
datasOfShowing,
|
|
infoTitles,
|
|
statusDefines,
|
|
};
|
|
},
|
|
methods:{
|
|
onClickAddNew(){
|
|
//console.log("你要新增吗？");
|
|
uni.navigateTo({
|
|
url:"/pages/AddNewCustomer/AddNewCustomer",
|
|
})
|
|
},
|
|
onChangeTabIndex(item){
|
|
var index = item.index;
|
|
this.currentTabIndex = index;
|
|
//根据选择的tab，设置需要显示什么内容
|
|
if(index == 0){
|
|
//显示所有的客户
|
|
this.datasOfShowing = this.kehus;
|
|
return;
|
|
}
|
|
if(index == 1){
|
|
//获取已经成交的
|
|
this.datasOfShowing = this.getCustomerByStatus(2);
|
|
return;
|
|
}
|
|
if(index == 2){
|
|
//跟进中
|
|
this.datasOfShowing = this.getCustomerByStatus(1);
|
|
return;
|
|
}
|
|
if(index == 3){
|
|
this.datasOfShowing = this.getCustomerByStatus(0);
|
|
return;
|
|
}
|
|
},
|
|
getStatusName(index){
|
|
let len = this.statusDefines.length;
|
|
if(index >= len || index < 0){
|
|
return {str:"错误",color:"#ff0000"};
|
|
}
|
|
return this.statusDefines[index];
|
|
},
|
|
///根据传递过来的状态，返回所有当前状态的用户，当前只是测试方法，因为客户可能会非常的多，需要找服务器要下一页数据
|
|
getCustomerByStatus(status){
|
|
var result = [];
|
|
for(var i = 0; i<this.kehus.length; i++){
|
|
let info = this.kehus[i];
|
|
if(info.status == status){
|
|
result.push(info);
|
|
}
|
|
}
|
|
return result;
|
|
}
|
|
|
|
}
|
|
}
|
|
</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>
|
|
|