修改首页及样式

This commit is contained in:
xuli3099
2025-08-19 13:27:26 +08:00
parent 5e36cbb244
commit 93e1557cb2
8 changed files with 170 additions and 191 deletions

View File

@@ -4,16 +4,16 @@
<script setup> <script setup>
import { onLaunch } from '@dcloudio/uni-app'; // import { onLaunch } from '@dcloudio/uni-app';
onLaunch((opt) => { // onLaunch((opt) => {
console.log("onLaunch") // console.log("onLaunch")
uni.preloadPage({ url: "/pages/login/login" }); // uni.preloadPage({ url: "/pages/login/login" });
uni.preloadPage({ url: "/pages/home/home" }); // uni.preloadPage({ url: "/pages/home/home" });
uni.preloadPage({ url: "/pages/business/business" }); // uni.preloadPage({ url: "/pages/business/business" });
uni.preloadPage({ url: "/pages/notice/notice" }); // uni.preloadPage({ url: "/pages/notice/notice" });
uni.preloadPage({ url: "/pages/userinfo/userinfo" }); // uni.preloadPage({ url: "/pages/userinfo/userinfo" });
}) // })
</script> </script>

View File

@@ -58,15 +58,15 @@ const handleBack = () => {
margin-left:-375rpx; margin-left:-375rpx;
z-index: 999; z-index: 999;
/* #ifdef APP-PLUS */ /* #ifdef APP-PLUS */
background: url('@/static/images/bg-Blue-header.png') no-repeat; /* background: url('@/static/images/bg-Blue-header.png') no-repeat;
background-size:750rpx 160rpx; background-size:750rpx 160rpx;
height:160rpx; height:160rpx; */
/* #endif */ /* #endif */
/* #ifndef APP-PLUS */ /* #ifndef APP-PLUS */
background: url('@/static/images/bg-Blue-header2.png') no-repeat; /* background: url('@/static/images/bg-Blue-header2.png') no-repeat;
background-size:750rpx 116rpx; background-size:750rpx 116rpx;
height:116rpx; height:116rpx; */
/* #endif */ /* #endif */
} }

View File

@@ -2,12 +2,11 @@
<view class="con-body"> <view class="con-body">
<view class="con-bg"> <view class="con-bg">
<!-- 头部 --> <!-- 头部 -->
<customHeader ref="customHeaderRef" :title="'业务中心'" <customHeader ref="customHeaderRef" :title="!searchShow?'业务中心':'搜索'"
:leftFlag="false" :rightFlag="false" v-if="!searchShow" :leftFlag="!searchShow?false:true"
></customHeader> :rightFlag="false"
<customHeader v-else ref="customHeaderRef" :title="'搜索'" @back="handleBack"
:leftFlag="true" :rightFlag="false" :searchType="searchShow?1:undefined"
@back="handleBack" :searchType="1"
></customHeader> ></customHeader>
<!-- 高度来避免头部遮挡 --> <!-- 高度来避免头部遮挡 -->
<view class="top-height"></view> <view class="top-height"></view>
@@ -68,7 +67,7 @@
<script setup> <script setup>
import { ref,onMounted } from 'vue' import { ref,onMounted } from 'vue'
import { onLoad,onShow } from '@dcloudio/uni-app'; import { onLoad,onHide } from '@dcloudio/uni-app';
import customHeader from '@/components/customHeader.vue'; import customHeader from '@/components/customHeader.vue';
import customSearch from '@/components/customSearch.vue' import customSearch from '@/components/customSearch.vue'
import MescrollUni from 'mescroll-uni/mescroll-uni.vue'; import MescrollUni from 'mescroll-uni/mescroll-uni.vue';
@@ -99,6 +98,10 @@ let searchShow = ref(false);
let searchText = ref(undefined); let searchText = ref(undefined);
let searchTypeObj = ref({typeId:2}); let searchTypeObj = ref({typeId:2});
onHide(()=>{
searchShow.value=false;
})
// 搜索返回操作 // 搜索返回操作
const handleBack=()=>{ const handleBack=()=>{
searchShow.value=false; searchShow.value=false;
@@ -173,7 +176,7 @@ let handleJump=(url)=>{
<style scope> <style scope>
.scroll-h{ .scroll-h{
/* #ifdef APP-PLUS */ /* #ifdef APP-PLUS */
height: calc(100vh - 120px) !important; height: calc(100vh - 130px) !important;
/* #endif */ /* #endif */
/* #ifndef APP-PLUS */ /* #ifndef APP-PLUS */
height: calc(100vh - 140px) !important; height: calc(100vh - 140px) !important;

View File

@@ -1,14 +1,17 @@
<template> <template>
<view class="con-body"> <view class="con-body">
<view class="con-bg"> <view class="con-bg">
<!-- 头部 -->
<customHeader ref="customHeaderRef" :title="'首页'"
:leftFlag="false" :rightFlag="false"
></customHeader>
<!-- 高度来避免头部遮挡 -->
<view class="top-height"></view>
<!-- 下拉刷新 --> <!-- 下拉刷新 -->
<mescroll-uni ref="mescrollRef" @init="mescrollInit" <mescroll-uni ref="mescrollRef" @init="mescrollInit"
:down="downOption" @down="downCallback" :down="downOption" @down="downCallback"
:fixed="false" class="scroll-h" :style="{ paddingTop: navBarPaddingTop + 'px' }" :fixed="false" class="scroll-h"
> >
<!-- #ifdef H5 -->
<view style="height:50rpx"></view>
<!-- #endif -->
<!-- #ifdef APP-PLUS --> <!-- #ifdef APP-PLUS -->
<!-- 删除设备ID--测试用 --> <!-- 删除设备ID--测试用 -->
<view class="del-cache" @click="handleDelete"> <view class="del-cache" @click="handleDelete">
@@ -16,141 +19,122 @@
</view> </view>
<!-- #endif --> <!-- #endif -->
<!-- 搜索 @confirm="handleSearch" --> <!-- 待办内容 -->
<customSearch v-if="searchShow" <view class="backlog-bg">
:searchKeywords="searchText" <view class="backlog-b-item">
:searchType="searchTypeObj" <view class="font-number">{{ backBlogObj.count1 }}</view>
@confirm="handleSearchConfirm" <view class="font-title">待办</view>
></customSearch> </view>
<view class="search search-sao" v-else> <view class="backlog-b-item">
<uni-search-bar class="custom-search" radius="28" <view class="font-number">{{ backBlogObj.count2 }}</view>
placeholder="请输入您想查询的内容或服务" <view class="font-title">待审查</view>
clearButton="auto" cancelButton="none" </view>
bgColor="#6FA2F8" textColor="#ffffff" <view class="backlog-b-item">
@focus="handleSearchFocus" <view class="font-number">{{ backBlogObj.count3 }}</view>
v-model="searchText" <view class="font-title">待巡检</view>
/> </view>
<uni-icons custom-prefix="iconfont" color="#ffffff" type="icon-phonesaoyisao" size="20"></uni-icons> <view class="backlog-b-item">
<view class="font-number">{{ backBlogObj.count4 }}</view>
<view class="font-title">待发货</view>
</view>
</view> </view>
<block v-if="!searchShow"> <!-- 跑马灯滚动 -->
<!-- 待办内容 --> <view class="notice-bg">
<view class="backlog-bg"> <img :src="'static/images/icon-notice@2x.png'" class="notice-icon" />
<view class="backlog-b-item"> <view class="notice-list">
<view class="font-number">{{ backBlogObj.count1 }}</view> <!-- :interval="4000" -->
<view class="font-title">待办</view> <swiper class="swiper-con"
</view> :vertical="true"
<view class="backlog-b-item"> :autoplay="true"
<view class="font-number">{{ backBlogObj.count2 }}</view> :duration="500"
<view class="font-title">待审查</view> :circular="true"
</view> :disable-touch="true"
<view class="backlog-b-item"> :display-multiple-items="1"
<view class="font-number">{{ backBlogObj.count3 }}</view> >
<view class="font-title">待巡检</view> <swiper-item v-for="(item, index) in extendedList" :key="index" >
</view> <view class="swiper-item">
<view class="backlog-b-item"> {{ 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>
<view class="p-last"> </swiper-item>
<view>目标销售额</view> </swiper>
<view class="font-money">{{ targetSales }}</view> </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>
<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> </view>
</view>
<!-- 常用服务 --> <!-- 常用服务 -->
<view class="white-bg" v-if="commonServiceList.length>0"> <view class="white-bg" v-if="commonServiceList.length>0">
<view class="w-b-title">常用服务</view> <view class="w-b-title">常用服务</view>
<view class="logo-list"> <view class="logo-list">
<view v-for="(item,index) in commonServiceList" class="l-l-item" :key="index" @click="handleJump(item.bizUrl)"> <view v-for="(item,index) in commonServiceList" class="l-l-item" :key="index" @click="handleJump(item.bizUrl)">
<img :src="'static/images/business/'+item.icon+'.png'" /> <img :src="'static/images/business/'+item.icon+'.png'" />
<text class="font-gray">{{ item.bizName }}</text> <text class="font-gray">{{ item.bizName }}</text>
</view> </view>
<!-- <view class="l-l-item" @click="handleAddCommonSercice"> <!-- <view class="l-l-item" @click="handleAddCommonSercice">
<img :src="'static/images/business/icon-add.png'"> <img :src="'static/images/business/icon-add.png'">
<text class="font-gray">添加</text> <text class="font-gray">添加</text>
</view> --> </view> -->
</view> </view>
</view> </view>
<!-- 新闻公告 --> <!-- 新闻公告 -->
<view class="white-bg"> <view class="white-bg">
<view class="w-b-title">新闻公告 <view class="w-b-title">新闻公告
<text>更多新闻</text> <text>更多新闻</text>
</view> </view>
<view class="news-list"> <view class="news-list">
<view v-for="(item,index) in newsList" class="news-item" :key="index"> <view v-for="(item,index) in newsList" class="news-item" :key="index">
<view class="n-i-title">{{ item.name }} <view class="n-i-title">{{ item.name }}
<view class="n-i-date">{{ formatDateStr(item.date) }}</view> <view class="n-i-date">{{ formatDateStr(item.date) }}</view>
</view> </view>
<img :src="item.imgSrc" v-if="item.imgSrc" /> <img :src="item.imgSrc" v-if="item.imgSrc" />
</view> </view>
</view> </view>
</view> </view>
<!-- 底部加高度来避免tabbar遮挡 --> <!-- 底部加高度来避免tabbar遮挡 -->
<view class="bottom-height"></view> <view class="bottom-height"></view>
</block>
</mescroll-uni> </mescroll-uni>
</view> </view>
</view> </view>
@@ -159,6 +143,7 @@
<script setup> <script setup>
import { ref,onMounted,computed } from 'vue'; import { ref,onMounted,computed } from 'vue';
import { onLoad } from '@dcloudio/uni-app'; import { onLoad } from '@dcloudio/uni-app';
import customHeader from '@/components/customHeader.vue'
import MescrollUni from 'mescroll-uni/mescroll-uni.vue'; import MescrollUni from 'mescroll-uni/mescroll-uni.vue';
import customSteps from '@/components/customSteps.vue' import customSteps from '@/components/customSteps.vue'
import customSearch from '@/components/customSearch.vue' import customSearch from '@/components/customSearch.vue'
@@ -204,7 +189,7 @@ onLoad(async(opt) => {
// 初始化调用方法 // 初始化调用方法
const initLoad =()=>{ const initLoad =()=>{
try { try {
showLoading("加载中...") showLoading("加载中...");
getBackBlogCount(); getBackBlogCount();
getSwiperList(); getSwiperList();
getStepData(); getStepData();
@@ -251,24 +236,6 @@ onMounted(() => {
navBarPaddingTop.value = getNavBarPaddingTop()*2; navBarPaddingTop.value = getNavBarPaddingTop()*2;
}) })
// 搜索处理
let searchShow = ref(false);
let searchTypeObj = ref({typeId:1});
let searchText = ref(undefined);
// 获取input 焦点跳转
const handleSearchFocus=()=>{
searchShow.value = true;
}
// 搜索完返回处理
const handleSearchConfirm = (param1,param2)=>{
// console.log(param1,param2)
searchText.value=param2.value;;
searchShow.value=false;
}
let backBlogObj = ref({ let backBlogObj = ref({
count1:0, count1:0,
count2:0, count2:0,
@@ -409,10 +376,10 @@ const formatDateStr =(times)=>{
.scroll-h{ .scroll-h{
/* #ifdef APP-PLUS */ /* #ifdef APP-PLUS */
height:calc(100vh - 30px) !important; height:calc(100vh - 78px) !important;
/* #endif */ /* #endif */
/* #ifndef APP-PLUS */ /* #ifndef APP-PLUS */
height: calc(100vh - 30px) !important; height: calc(100vh - 80px) !important;
/* #endif */ /* #endif */
} }
:deep(.mescroll-upwarp){ :deep(.mescroll-upwarp){

View File

@@ -45,9 +45,9 @@ let versionData = ref({}); //版本参数
onLoad(async(opt) => { onLoad(async(opt) => {
console.log("onLoad"); console.log("onLoad");
uni.preloadPage({url: "/pages/login/login"}); // uni.preloadPage({url: "/pages/login/login"});
uni.preloadPage({url: "/pages/deviceAuth/deviceAuth"}); // uni.preloadPage({url: "/pages/deviceAuth/deviceAuth"});
uni.preloadPage({url: "/pages/home/home"}); // uni.preloadPage({url: "/pages/home/home"});
// #ifdef APP-PLUS // #ifdef APP-PLUS
// 查询版本接口 // 查询版本接口

View File

@@ -2,17 +2,18 @@
<view class="con-body"> <view class="con-body">
<view class="con-bg"> <view class="con-bg">
<!-- 头部 --> <!-- 头部 -->
<customHeader ref="customHeaderRef" :title="'消息'" :leftFlag="false" :rightFlag="true" v-if="!searchShow"> <customHeader ref="customHeaderRef" :title="!searchShow?'消息':'搜索'"
<template #right> :leftFlag="!searchShow?false:true"
:rightFlag="true"
@back="handleBack" :searchType="searchShow?1:undefined"
>
<template #right v-if="!searchShow">
<view class="head-right" @click="handleRead"> <view class="head-right" @click="handleRead">
<img :src="'static/images/icon-clean@2x.png'" />清除未读 <img :src="'static/images/icon-clean@2x.png'" />清除未读
</view> </view>
</template> </template>
</customHeader> </customHeader>
<customHeader v-else ref="customHeaderRef" :title="'搜索'"
:leftFlag="true" :rightFlag="false"
@back="handleBack" :searchType="1"
></customHeader>
<!-- 高度来避免头部遮挡 --> <!-- 高度来避免头部遮挡 -->
<view class="top-height"></view> <view class="top-height"></view>
@@ -54,7 +55,7 @@
<script setup> <script setup>
import { ref, onMounted,computed } from 'vue' import { ref, onMounted,computed } from 'vue'
import { onLoad } from '@dcloudio/uni-app'; import { onLoad,onHide } from '@dcloudio/uni-app';
import customHeader from '@/components/customHeader.vue' import customHeader from '@/components/customHeader.vue'
import customSearch from '@/components/customSearch.vue' import customSearch from '@/components/customSearch.vue'
import MescrollUni from 'mescroll-uni/mescroll-uni.vue'; import MescrollUni from 'mescroll-uni/mescroll-uni.vue';
@@ -85,6 +86,9 @@ let noticeTypeList=ref([
]); ]);
let notictTypeCheck = ref({});//选中类型 let notictTypeCheck = ref({});//选中类型
onHide(()=>{
searchShow.value=false;
})
// 搜索返回操作 // 搜索返回操作
const handleBack=()=>{ const handleBack=()=>{

View File

@@ -213,7 +213,7 @@ onMounted(() => {
<style scoped> <style scoped>
.scroll-h{ .scroll-h{
/* #ifdef APP-PLUS */ /* #ifdef APP-PLUS */
height:calc(100vh - 30px) !important; height:calc(100vh - 50px) !important;
/* #endif */ /* #endif */
/* #ifndef APP-PLUS */ /* #ifndef APP-PLUS */
height: calc(100vh - 30px) !important; height: calc(100vh - 30px) !important;

View File

@@ -5,7 +5,8 @@ page {
height: 100%; height: 100%;
padding: 0; padding: 0;
margin: 0; margin: 0;
background-color: #F5F5F5; background-color: #307AF5;
/* background-color: #F5F5F5; */
color: #333; color: #333;
} }
@@ -19,26 +20,30 @@ page {
width: 100%; width: 100%;
margin: 0; margin: 0;
padding: 0; padding: 0;
background-color: #F5F5F5;
} }
.con-bg { .con-bg {
position: absolute; position: absolute;
top: 0; top: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
/* #ifdef APP-PLUS */ /* #ifdef APP-PLUS */
background: url('@/static/images/bg-Blue.png') no-repeat; background-color: #F5F5F5;
background-size: 100vw 761rpx; background-image: url('@/static/images/bg-Blue.png');
width: 100vw; background-repeat: no-repeat;
height: 761rpx; background-size: 750rpx 761rpx;
width: 750rpx;
/* height: 761rpx; */
left: 0; left: 0;
/* #endif */ /* #endif */
/* #ifndef APP-PLUS */ /* #ifndef APP-PLUS */
background: url('@/static/images/bg-Blue.png') no-repeat; background-color: #F5F5F5;
background-image: url('@/static/images/bg-Blue.png');
background-repeat: no-repeat;
background-size: 750rpx 761rpx; background-size: 750rpx 761rpx;
width: 750rpx; width: 750rpx;
height: 761rpx; /* height: 761rpx; */
left: 50%; left: 50%;
margin-left: -375rpx; margin-left: -375rpx;
/* #endif */ /* #endif */
@@ -187,7 +192,7 @@ page {
/* width:690rpx; */ /* width:690rpx; */
width:630rpx; width:630rpx;
height:56rpx; height:56rpx;
margin:0 auto 30rpx; margin:10rpx auto 30rpx;
padding:0 30rpx; padding:0 30rpx;
display: flex; display: flex;
color:#fff; color:#fff;