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

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