419 lines
8.6 KiB
Vue
419 lines
8.6 KiB
Vue
<template>
|
|
<uv-navbar leftIcon="" :safeAreaInsetTop="true" :fixed="false" bgColor="#09b4f1">
|
|
<!-- <view class="slot-wrap "> -->
|
|
<template v-slot:center>
|
|
<uv-search placeholder="请输入搜索客户名称" v-model="keyword" bgColor="#ffffff" :showAction="false" :customStyle="customStyle" @focus="onSearch"></uv-search>
|
|
</template>
|
|
|
|
<!-- </view> -->
|
|
</uv-navbar>
|
|
|
|
<view class="container">
|
|
<!-- 浮动顶部导航 -->
|
|
|
|
<view class="top" style="background-color: #09b4f1;">
|
|
<view class="statusBar" :is-back="false" style="height: 30rpx;" ></view>
|
|
</view>
|
|
<!-- 待办 -->
|
|
<view class="notice">
|
|
<uv-grid :col="4" :border="false">
|
|
<uv-grid-item v-for="(item,index) in toolIcons" :key="index" @click="gopage(item.url)">
|
|
<uv-icon :name="item.icon" :size="30"></uv-icon>
|
|
<text class="p-1 font-size-sm">{{item.name}}</text>
|
|
</uv-grid-item>
|
|
</uv-grid>
|
|
</view>
|
|
<!-- 工具项 -->
|
|
<view class="region mt-3">
|
|
<view class="title flex">
|
|
<text>常用功能</text>
|
|
</view>
|
|
<uv-grid :col="4" :border="false" @click="onGrid" >
|
|
<uv-grid-item v-for="(item, index) in toolIcons2" :key="index" :customStyle="customStyle2" @click="item.name == '客户' ? gopage2(item.url) : gopage(item.url)">
|
|
<uv-icon :name="item.icon" :size="30" ></uv-icon>
|
|
<text class="p-1 font-size-sm">{{ item.name }}</text>
|
|
</uv-grid-item>
|
|
</uv-grid>
|
|
</view>
|
|
|
|
<view class="region mt-3" style="margin-top: 20rpx;">
|
|
<view class="title flex">
|
|
<text>数据简报</text>
|
|
</view>
|
|
<uv-grid :col="3" :border="false" @click="onGrid" >
|
|
<uv-grid-item v-for="(item, index) in toolIcons3" :key="index" :customStyle="customStyle2">
|
|
<text class="p-1 font-size-sm">{{ item.name }}</text>
|
|
<text class="p-1 font-size-sm">{{ item.count }}</text>
|
|
</uv-grid-item>
|
|
</uv-grid>
|
|
</view>
|
|
|
|
|
|
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import {ref,computed} from 'vue'
|
|
import { onLoad,onShow} from '@dcloudio/uni-app'
|
|
import { useMainStore } from '@/store/store'
|
|
import { storeToRefs } from 'pinia'
|
|
import {
|
|
indexCount
|
|
} from '@/api/index'
|
|
const main = useMainStore()
|
|
const statusBarHeight = ref(0)
|
|
statusBarHeight.value = uni.getSystemInfoSync().statusBarHeight
|
|
const customStyle = computed(() =>{
|
|
return {
|
|
paddingLeft:'20rpx',
|
|
paddingRight:'180rpx'
|
|
}
|
|
})
|
|
const customStyle2 = computed(() =>{
|
|
return {
|
|
paddingBottom:'40rpx',
|
|
// paddingRight:'180rpx'
|
|
}
|
|
})
|
|
const toolIcons = ref([
|
|
{
|
|
name: '公海客户',
|
|
icon: '/static/images/index002.png',
|
|
url: '/pages/components/pages/customer/open',
|
|
},
|
|
{
|
|
name: '线索',
|
|
icon: '/static/images/index003.png',
|
|
url: '/pages/components/pages/clues/index',
|
|
},
|
|
{
|
|
name: '跟进记录',
|
|
icon: '/static/images/index004.png',
|
|
url: '/pages/components/pages/record/index',
|
|
},
|
|
{
|
|
name: '合同',
|
|
icon: '/static/images/index006.png',
|
|
url: '/pages/components/pages/contract/index',
|
|
}
|
|
])
|
|
|
|
const toolIcons2 = ref([
|
|
{
|
|
name: '客户',
|
|
icon: '/static/images/1.png',
|
|
url: '/pages/customer/index',
|
|
},
|
|
{
|
|
name: '商机',
|
|
icon: '/static/images/2.png',
|
|
url: '/pages/components/pages/business/index',
|
|
},
|
|
{
|
|
name: '线索池',
|
|
icon: '/static/images/3.png',
|
|
url: '/pages/components/pages/clues/open',
|
|
},
|
|
{
|
|
name: '联系人',
|
|
icon: '/static/images/4.png',
|
|
url: '/pages/components/pages/contacts/index',
|
|
},
|
|
{
|
|
name: '回款',
|
|
icon: '/static/images/5.png',
|
|
url: '/pages/components/pages/receivables/index',
|
|
},
|
|
{
|
|
name: '查重',
|
|
icon: '/static/images/6.png',
|
|
url: '/pages/components/pages/customer/repeat',
|
|
},
|
|
{
|
|
name: '发票',
|
|
icon: '/static/images/7.png',
|
|
url: '/pages/components/pages/invoice/index',
|
|
},
|
|
{
|
|
name: '产品',
|
|
icon: '/static/images/8.png',
|
|
url: '/pages/components/pages/product/index',
|
|
},
|
|
])
|
|
|
|
const countData = ref({})
|
|
|
|
const toolIcons3 = ref([
|
|
{
|
|
name: '新增商机',
|
|
count: 0,
|
|
},
|
|
{
|
|
name: '新增线索',
|
|
count: 0,
|
|
},
|
|
{
|
|
name: '新增客户',
|
|
count: 0,
|
|
},
|
|
{
|
|
name: '新增跟进',
|
|
count: 0,
|
|
},
|
|
{
|
|
name: '新增合同',
|
|
count: 0,
|
|
},
|
|
{
|
|
name: '合同金额',
|
|
count: 0,
|
|
},
|
|
{
|
|
name: '回款金额',
|
|
count: 0,
|
|
},
|
|
{
|
|
name: '新增联系人',
|
|
count: 0,
|
|
},
|
|
{
|
|
name: '客户成交量',
|
|
count: 0,
|
|
},
|
|
{
|
|
name: '客户未成交量',
|
|
count: 0,
|
|
},
|
|
{
|
|
name: '商机成交量',
|
|
count: 0,
|
|
},
|
|
{
|
|
name: '商机未成交量',
|
|
count: 0,
|
|
}
|
|
])
|
|
|
|
|
|
|
|
onShow(()=>{
|
|
getData()
|
|
})
|
|
|
|
const getData = async() => {
|
|
let data = await indexCount()
|
|
let brieCount= data.brieCountVO
|
|
toolIcons3.value[0].count = brieCount.count01
|
|
toolIcons3.value[1].count = brieCount.count02
|
|
toolIcons3.value[2].count = brieCount.count03
|
|
toolIcons3.value[3].count = brieCount.count04
|
|
toolIcons3.value[4].count = brieCount.count05
|
|
toolIcons3.value[5].count = brieCount.count06
|
|
toolIcons3.value[6].count = brieCount.count07
|
|
toolIcons3.value[7].count = brieCount.count08
|
|
toolIcons3.value[8].count = brieCount.count09
|
|
toolIcons3.value[9].count = brieCount.count10
|
|
toolIcons3.value[10].count = brieCount.count11
|
|
toolIcons3.value[11].count = brieCount.count12
|
|
main.SET_INDEX_COUNT(data)
|
|
let count = data.contractCheckCount + data.invoiceCheckCount + data.receivablesCheckCount + data.followBusinessCount + data.followCluesCount + data.followCustomerCount
|
|
//let str = count > 0 ? count + '' : ''
|
|
if(count > 0){
|
|
uni.setTabBarBadge({
|
|
index: 2,
|
|
text: count + ''
|
|
})
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
const onSearch = () => {
|
|
gopage2('/pages/customer/index')
|
|
}
|
|
|
|
const gopage = (url) => {
|
|
uni.navigateTo({
|
|
url
|
|
})
|
|
}
|
|
|
|
const gopage2 = (url) =>{
|
|
uni.switchTab({
|
|
url
|
|
})
|
|
|
|
}
|
|
|
|
|
|
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.container {
|
|
background-color: #F7F7F7 !important;
|
|
padding-bottom: 50px;
|
|
min-height: 100vh;
|
|
}
|
|
.status_bar {
|
|
height: var(--status-bar-height);
|
|
width: 100%;
|
|
}
|
|
.top {
|
|
height: 110rpx;
|
|
/* #ifdef H5 */
|
|
height: 360rpx;
|
|
/* #endif */
|
|
color: #fff;
|
|
// background-image: linear-gradient(#FF7E69, #FE644A);
|
|
}
|
|
|
|
.share {
|
|
border: 1px solid #fff;
|
|
border-radius: 5px;
|
|
padding: 15rpx 30rpx;
|
|
}
|
|
.notice {
|
|
margin: -56px 8px 10px 8px;
|
|
left: 0;
|
|
right: 0;
|
|
background-color: #fff;
|
|
border-radius: 10px;
|
|
padding: 15px 0px;
|
|
.title {
|
|
padding: 20rpx;
|
|
font-size: 30rpx;
|
|
font-weight: 500;
|
|
justify-content: space-between;
|
|
}
|
|
}
|
|
.region {
|
|
background-color: #fff;
|
|
border-radius: 12px;
|
|
margin: 0 10px;
|
|
padding: 8px 5px;
|
|
.title {
|
|
padding: 28rpx 20rpx;
|
|
font-size: 30rpx;
|
|
font-weight: 500;
|
|
justify-content: space-between;
|
|
}
|
|
.plus {
|
|
background-color: #FFF0ED;
|
|
border-radius: 10rpx;
|
|
padding: 15rpx;
|
|
}
|
|
.nape {
|
|
width: 48%;
|
|
border-radius: 8px;
|
|
background-color: #FBFBFB;
|
|
padding: 30rpx 20rpx 30rpx 35rpx;
|
|
margin-bottom: 15rpx;
|
|
&:nth-child(2n+1){
|
|
margin-right: 4%;
|
|
}
|
|
}
|
|
}
|
|
.item-padding {
|
|
padding: 45rpx 0;
|
|
}
|
|
.gray {
|
|
color: #BFBFBF;
|
|
}
|
|
.slot-wrap {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 0 30rpx;
|
|
}
|
|
.statusBar {
|
|
position: relative;
|
|
}
|
|
.arrow-icon {
|
|
position: absolute;
|
|
bottom: 16px;
|
|
left: 10px;
|
|
}
|
|
// /deep/ .u-avatar {
|
|
// display: block !important;
|
|
// }
|
|
// 图表样式
|
|
/* 请根据需求修改图表容器尺寸，如果父容器没有高度图表则会显示异常 */
|
|
.charts-box{
|
|
.charts {
|
|
width: 100%;
|
|
height:300px;
|
|
}
|
|
.introduce {
|
|
justify-content: space-between;
|
|
padding: 45rpx 12px;
|
|
.text {
|
|
font-size: 30rpx;
|
|
font-weight: 500;
|
|
}
|
|
.screen {
|
|
font-size: 30rpx;
|
|
font-weight: 500;
|
|
background-color: #fff;
|
|
padding: 10rpx 32rpx;
|
|
border-radius: 60rpx;
|
|
}
|
|
}
|
|
.target {
|
|
margin-top: -60rpx;
|
|
justify-content: space-around;
|
|
.text {
|
|
background-color: #D7D7D7;
|
|
font-size: 25rpx;
|
|
padding: 10rpx 20rpx;
|
|
border-radius: 20rpx;
|
|
}
|
|
}
|
|
}
|
|
// /deep/.left-icon .u-size-mini {
|
|
// display: block;
|
|
// }
|
|
// /deep/ .u-model__footer__button {
|
|
// height: auto !important;
|
|
// line-height: inherit !important;
|
|
// }
|
|
// /deep/ .u-border-top:after {
|
|
// border-top-width: 0;
|
|
// }
|
|
.privacy_block {
|
|
padding: 15px 20px;
|
|
font-size: 14px;
|
|
line-height: 24px;
|
|
text-align: justify;
|
|
}
|
|
.disagree-btn {
|
|
border-radius: 100px;
|
|
color: #323233;
|
|
background-color: #fff;
|
|
padding: 0 12px;
|
|
font-size: 14px;
|
|
height: 40px;
|
|
width: 100%;
|
|
border: none;
|
|
}
|
|
|
|
.agree-btn {
|
|
border-radius: 100px;
|
|
color: white;
|
|
background-color: #F15A24;
|
|
border-color: #F15A24 !important;
|
|
border-width: 1px !important;
|
|
border-style: solid !important;
|
|
padding: 0 12px;
|
|
font-size: 14px;
|
|
height: 40px;
|
|
width: 100%;
|
|
}
|
|
.disagree-btn::after, .agree-btn::after {
|
|
border: none;
|
|
}
|
|
.modal_btn {
|
|
padding: 0 30px 15px;
|
|
}
|
|
</style> |