431 lines
12 KiB
Vue
431 lines
12 KiB
Vue
|
<template>
|
|||
|
|
<view class="con-body">
|
|||
|
|
<view class="con-bg">
|
|||
|
|
<!-- 下拉刷新 -->
|
|||
|
|
<mescroll-uni ref="mescrollRef" @init="mescrollInit"
|
|||
|
|
:down="downOption" @down="downCallback"
|
|||
|
|
:fixed="false" class="scroll-h" :style="{ paddingTop: navBarPaddingTop + 'px' }"
|
|||
|
|
>
|
|||
|
|
<!-- #ifdef H5 -->
|
|||
|
|
<view style="height:50rpx"></view>
|
|||
|
|
<!-- #endif -->
|
|||
|
|
<!-- 搜索 -->
|
|||
|
|
<view class="search search-sao" >
|
|||
|
|
<uni-search-bar class="custom-search" radius="28"
|
|||
|
|
placeholder="请输入您想查询的内容或服务"
|
|||
|
|
clearButton="auto" cancelButton="none"
|
|||
|
|
bgColor="#6FA2F8" textColor="#ffffff"
|
|||
|
|
@confirm="handleSearch"
|
|||
|
|
/>
|
|||
|
|
<uni-icons custom-prefix="iconfont" color="#ffffff" type="icon-phonesaoyisao" size="20"></uni-icons>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 待办内容 -->
|
|||
|
|
<view class="backlog-bg">
|
|||
|
|
<view class="backlog-b-item">
|
|||
|
|
<view class="font-number">{{ backBlogObj.count1 }}</view>
|
|||
|
|
<view class="font-title">待办</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="backlog-b-item">
|
|||
|
|
<view class="font-number">{{ backBlogObj.count2 }}</view>
|
|||
|
|
<view class="font-title">待审查</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="backlog-b-item">
|
|||
|
|
<view class="font-number">{{ backBlogObj.count3 }}</view>
|
|||
|
|
<view class="font-title">待巡检</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="backlog-b-item">
|
|||
|
|
<view class="font-number">{{ backBlogObj.count4 }}</view>
|
|||
|
|
<view class="font-title">待发货</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 跑马灯滚动 -->
|
|||
|
|
<view class="notice-bg">
|
|||
|
|
<img :src="'static/images/icon-notice@2x.png'" class="notice-icon" />
|
|||
|
|
<view class="notice-list">
|
|||
|
|
<!-- :interval="4000" -->
|
|||
|
|
<swiper class="swiper-con"
|
|||
|
|
:vertical="true"
|
|||
|
|
:autoplay="true"
|
|||
|
|
:duration="500"
|
|||
|
|
:circular="true"
|
|||
|
|
:disable-touch="true"
|
|||
|
|
:display-multiple-items="1"
|
|||
|
|
>
|
|||
|
|
<swiper-item v-for="(item, index) in extendedList" :key="index" >
|
|||
|
|
<view class="swiper-item">
|
|||
|
|
{{ item }}
|
|||
|
|
</view>
|
|||
|
|
</swiper-item>
|
|||
|
|
</swiper>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 日程提醒 -->
|
|||
|
|
<view class="white-bg mar-top" v-if="stepList.length>0">
|
|||
|
|
<view class="w-b-title">日程提醒
|
|||
|
|
<view class="yellow-bg">
|
|||
|
|
<i :class="{iconfont:true,'icon-phoneshizhong':true}"></i>
|
|||
|
|
<view class="text-black">{{ weekStr }}</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="section-line">
|
|||
|
|
<customSteps :steps="stepList" :modelValue="stepList"></customSteps>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 销售任务完成情况 -->
|
|||
|
|
<view class="white-bg mar-top">
|
|||
|
|
<view class="w-b-title">销售任务完成情况
|
|||
|
|
<view class="yellow-bg">
|
|||
|
|
<picker @change="bindPickerChange" :value="activeIndex" :range="salesList" @click="clickPicker" @cancel="bindPickerCancel">
|
|||
|
|
<view class="uni-input">{{salesList[activeIndex]}}</view>
|
|||
|
|
</picker>
|
|||
|
|
<i :class="{iconfont:true,'icon-down':salesFlag,'icon-up':!salesFlag}" class="picker-icon"></i>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="progress-bg">
|
|||
|
|
<progress :percent="percentNum" stroke-width="10" activeColor="#41E1B1" backgroundColor="#F0F0F0" />
|
|||
|
|
<view class="percent" :style="{left:percentNum+'%'}">
|
|||
|
|
<view class="percent-num">{{ percentNum }}%</view>
|
|||
|
|
<i class="iconfont icon-down"></i>
|
|||
|
|
</view>
|
|||
|
|
<view class="percent-con">
|
|||
|
|
<view class="p-first">
|
|||
|
|
<view>实际销售额</view>
|
|||
|
|
<view class="font-money">{{totalSales}}</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="p-last">
|
|||
|
|
<view>目标销售额</view>
|
|||
|
|
<view class="font-money">{{ targetSales }}</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 常用服务 -->
|
|||
|
|
<view class="white-bg">
|
|||
|
|
<view class="w-b-title">常用服务</view>
|
|||
|
|
<view class="logo-list">
|
|||
|
|
<view v-for="(item,index) in commonServiceList" class="l-l-item" :key="index">
|
|||
|
|
<img :src="item.imgSrc" />
|
|||
|
|
<text class="font-gray">{{ item.name }}</text>
|
|||
|
|
</view>
|
|||
|
|
<!-- <view class="l-l-item" @click="handleAddCommonSercice">
|
|||
|
|
<img :src="'static/images/business/icon-add.png'">
|
|||
|
|
<text class="font-gray">添加</text>
|
|||
|
|
</view> -->
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 新闻公告 -->
|
|||
|
|
<view class="white-bg">
|
|||
|
|
<view class="w-b-title">新闻公告
|
|||
|
|
<text>更多新闻</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="news-list">
|
|||
|
|
<view v-for="(item,index) in newsList" class="news-item" :key="index">
|
|||
|
|
<view class="n-i-title">{{ item.name }}
|
|||
|
|
<view class="n-i-date">{{ formatDateStr(item.date) }}</view>
|
|||
|
|
</view>
|
|||
|
|
<img :src="item.imgSrc" v-if="item.imgSrc" />
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 底部加高度来避免tabbar遮挡 -->
|
|||
|
|
<view class="bottom-height"></view>
|
|||
|
|
</mescroll-uni>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script setup>
|
|||
|
|
import { ref,onMounted,computed } from 'vue'
|
|||
|
|
import MescrollUni from 'mescroll-uni/mescroll-uni.vue';
|
|||
|
|
import customSteps from '@/components/customSteps.vue'
|
|||
|
|
import { getNavBarPaddingTop} from '@/utils/system.js'
|
|||
|
|
import { backBlogCount,swiperList,stepData,salesTask,commonServices,newsQueryList } from '@/api/home.js';
|
|||
|
|
import { getWeekStr,formatTimestamp } from '@/utils/datetime.js'
|
|||
|
|
import { formatMoney } from '@/utils/formatter.js'
|
|||
|
|
|
|||
|
|
// 下拉刷新
|
|||
|
|
const mescrollRef = ref(null);
|
|||
|
|
const mescrollInit = (mescroll) => {
|
|||
|
|
mescrollRef.value = mescroll;
|
|||
|
|
};
|
|||
|
|
const downOption = ref({
|
|||
|
|
auto: true,
|
|||
|
|
textInOffset: '下拉刷新',
|
|||
|
|
textOutOffset: '释放更新',
|
|||
|
|
textLoading: '刷新中...'
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 下拉刷新
|
|||
|
|
const downCallback = async (mescroll) => {
|
|||
|
|
try {
|
|||
|
|
setTimeout(async ()=>{
|
|||
|
|
// mescroll.resetUpScroll();
|
|||
|
|
},500);
|
|||
|
|
} catch (error) {
|
|||
|
|
mescroll.endErr();
|
|||
|
|
} finally {
|
|||
|
|
setTimeout(async ()=>{
|
|||
|
|
mescroll.endSuccess();
|
|||
|
|
},500);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 获取导航栏高度用于内容区域padding
|
|||
|
|
const navBarPaddingTop = ref(0);
|
|||
|
|
onMounted(() => {
|
|||
|
|
navBarPaddingTop.value = getNavBarPaddingTop()*2;
|
|||
|
|
})
|
|||
|
|
// 查询搜索跳转
|
|||
|
|
let handleSearch = ()=>{
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// tabar 增加消息数量
|
|||
|
|
try {
|
|||
|
|
wx.setTabBarBadge({
|
|||
|
|
index: 2, // TabBar的索引，从0开始计数
|
|||
|
|
text: '3' // 徽章的文本
|
|||
|
|
});
|
|||
|
|
} catch (error) {
|
|||
|
|
console.error('设置TabBar Badge失败:', error);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
let backBlogObj = ref({})
|
|||
|
|
// 获取待办数据
|
|||
|
|
let getBackBlogCount = async () =>{
|
|||
|
|
backBlogObj.value = await backBlogCount();
|
|||
|
|
}
|
|||
|
|
getBackBlogCount();
|
|||
|
|
|
|||
|
|
// 跑马灯处理
|
|||
|
|
let extendedList = ref([]);// ;
|
|||
|
|
const getSwiperList = async () => {
|
|||
|
|
extendedList.value = await swiperList();
|
|||
|
|
}
|
|||
|
|
getSwiperList();
|
|||
|
|
|
|||
|
|
// 日程提醒
|
|||
|
|
let weekStr = ref(null) //'2025-09-19 星期三'
|
|||
|
|
let stepList = ref([]);
|
|||
|
|
const getStepData = async ()=>{
|
|||
|
|
let res = await stepData({});
|
|||
|
|
weekStr.value = getWeekStr(res.date);
|
|||
|
|
stepList.value = res.list;
|
|||
|
|
}
|
|||
|
|
getStepData();
|
|||
|
|
|
|||
|
|
// 销售任务完成情况
|
|||
|
|
let salesList = ref([]);
|
|||
|
|
let salesFlag = ref(true);
|
|||
|
|
let activeIndex = ref(0);
|
|||
|
|
const bindPickerChange = (e)=>{
|
|||
|
|
// console.log('picker发送选择改变，携带值为', e.detail.value)
|
|||
|
|
activeIndex.value = e.detail.value;
|
|||
|
|
salesFlag.value = true;
|
|||
|
|
}
|
|||
|
|
const bindPickerCancel= (e)=>{
|
|||
|
|
salesFlag.value = true;
|
|||
|
|
}
|
|||
|
|
const clickPicker= (e)=>{
|
|||
|
|
salesFlag.value = false;
|
|||
|
|
}
|
|||
|
|
let percentNum = ref(0);
|
|||
|
|
let totalSales = ref(0)
|
|||
|
|
let targetSales = ref(0)
|
|||
|
|
const getSalesTask = async ()=>{
|
|||
|
|
let res = await salesTask({});
|
|||
|
|
salesList.value = res.salesList;
|
|||
|
|
percentNum.value = res.percentNum;
|
|||
|
|
totalSales.value = formatMoney(res.totalSales);
|
|||
|
|
targetSales.value = formatMoney(res.targetSales);
|
|||
|
|
}
|
|||
|
|
getSalesTask();
|
|||
|
|
|
|||
|
|
// 常用服务
|
|||
|
|
let commonServiceList = ref([])
|
|||
|
|
const getCommonServices = async ()=>{
|
|||
|
|
let res = await commonServices({});
|
|||
|
|
commonServiceList.value = res.list
|
|||
|
|
}
|
|||
|
|
getCommonServices();
|
|||
|
|
// 添加常用服务
|
|||
|
|
const handleAddCommonSercice = ()=>{
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 新闻公告
|
|||
|
|
let newsList = ref([])
|
|||
|
|
const getNewsList = async()=>{
|
|||
|
|
let res = await newsQueryList({});
|
|||
|
|
newsList.value = res.list;
|
|||
|
|
}
|
|||
|
|
getNewsList();
|
|||
|
|
const formatDateStr =(times)=>{
|
|||
|
|
return formatTimestamp(times)
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style scope>
|
|||
|
|
.scroll-h{
|
|||
|
|
/* #ifdef APP-PLUS */
|
|||
|
|
height:calc(100vh - 30px) !important;
|
|||
|
|
/* #endif */
|
|||
|
|
/* #ifndef APP-PLUS */
|
|||
|
|
height: calc(100vh - 30px) !important;
|
|||
|
|
/* #endif */
|
|||
|
|
}
|
|||
|
|
:deep(.mescroll-upwarp){
|
|||
|
|
display:none
|
|||
|
|
}
|
|||
|
|
.search-sao{
|
|||
|
|
display: flex;
|
|||
|
|
padding-top:10rpx;
|
|||
|
|
}
|
|||
|
|
.search-sao .custom-search{
|
|||
|
|
width:612rpx;
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
.search-sao :deep(.custom-search.uni-searchbar){
|
|||
|
|
padding-bottom: 15rpx !important;
|
|||
|
|
}
|
|||
|
|
.search-sao .icon-phonesaoyisao{
|
|||
|
|
margin:15rpx 30rpx 10rpx auto;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.backlog-bg{
|
|||
|
|
background:url('@/static/images/bg-main@2x.png') no-repeat;
|
|||
|
|
background-size:730rpx 205rpx;
|
|||
|
|
/* width:730rpx; */
|
|||
|
|
width:690rpx;
|
|||
|
|
height:205rpx;
|
|||
|
|
margin:0 auto;
|
|||
|
|
display: flex;
|
|||
|
|
padding:0 20rpx;
|
|||
|
|
}
|
|||
|
|
.backlog-b-item{
|
|||
|
|
width:25%;
|
|||
|
|
color:#579FF9;
|
|||
|
|
border-right:1px solid #EAEAEA;
|
|||
|
|
height:100rpx;
|
|||
|
|
margin-top:40rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.backlog-b-item .font-number{
|
|||
|
|
font-size: 60rpx;
|
|||
|
|
font-weight: bold;
|
|||
|
|
text-align: center;
|
|||
|
|
}
|
|||
|
|
.backlog-b-item .font-title{
|
|||
|
|
font-size:28rpx;
|
|||
|
|
text-align: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.notice-bg{
|
|||
|
|
background:url('@/static/images/bg-notice@2x.png') no-repeat;
|
|||
|
|
background-size:750rpx 90rpx;
|
|||
|
|
width:690rpx;
|
|||
|
|
height: 90rpx;
|
|||
|
|
margin-top:10rpx;
|
|||
|
|
padding:0 30rpx;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
}
|
|||
|
|
.notice-bg .notice-icon{
|
|||
|
|
width:46rpx;
|
|||
|
|
height:40rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.notice-list{
|
|||
|
|
width:100%;
|
|||
|
|
position: relative;
|
|||
|
|
height: 90rpx;
|
|||
|
|
overflow: hidden;
|
|||
|
|
}
|
|||
|
|
.notice-list .swiper-con{
|
|||
|
|
width:640rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.notice-list .swiper-con .swiper-item {
|
|||
|
|
height: 90rpx;
|
|||
|
|
line-height: 90rpx;
|
|||
|
|
padding: 0 20rpx;
|
|||
|
|
white-space: nowrap;
|
|||
|
|
overflow: hidden;
|
|||
|
|
text-overflow: ellipsis;
|
|||
|
|
color:#fff;
|
|||
|
|
font-size:30rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.progress-bg{
|
|||
|
|
position: relative;
|
|||
|
|
width:528rpx;
|
|||
|
|
margin:120rpx auto 0;
|
|||
|
|
}
|
|||
|
|
.progress-bg :deep(.uni-progress .uni-progress-bar){
|
|||
|
|
border-radius: 5px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.progress-bg :deep(.uni-progress .uni-progress-inner-bar){
|
|||
|
|
border-radius: 5px 0 0 5px;
|
|||
|
|
}
|
|||
|
|
.progress-bg .percent{
|
|||
|
|
position: absolute;
|
|||
|
|
top:0;
|
|||
|
|
color:#FF687A;
|
|||
|
|
font-size:60rpx;
|
|||
|
|
font-weight: bold;
|
|||
|
|
}
|
|||
|
|
.progress-bg .percent .icon-down{
|
|||
|
|
position: absolute;
|
|||
|
|
bottom:0rpx;
|
|||
|
|
left:-20rpx;
|
|||
|
|
color:#FF687A;
|
|||
|
|
font-size:40rpx;
|
|||
|
|
}
|
|||
|
|
.progress-bg .percent .percent-num{
|
|||
|
|
position: absolute;
|
|||
|
|
left:-60rpx;
|
|||
|
|
bottom:30rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.progress-bg .percent-con{
|
|||
|
|
display: flex;
|
|||
|
|
width:528rpx;
|
|||
|
|
color:#333;
|
|||
|
|
font-size:28rpx;
|
|||
|
|
margin:20rpx 0 10rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.progress-bg .percent-con .p-last{
|
|||
|
|
margin-left: auto;
|
|||
|
|
text-align: right;
|
|||
|
|
}
|
|||
|
|
.progress-bg .percent-con .font-money{
|
|||
|
|
font-weight: bold;
|
|||
|
|
margin-top:10rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.white-bg .logo-list{
|
|||
|
|
gap:50rpx;
|
|||
|
|
padding:0 20rpx;
|
|||
|
|
/* margin-bottom: -50rpx; */
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.white-bg .logo-list .l-l-item{
|
|||
|
|
width:160rpx;
|
|||
|
|
margin-bottom:0rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.white-bg .logo-list .l-l-item img{
|
|||
|
|
width:110rpx;
|
|||
|
|
height:110rpx;
|
|||
|
|
}
|
|||
|
|
</style>
|