修改首页及样式
This commit is contained in:
xuli3099
@@ -2,12 +2,11 @@
|
||||
<view class="con-body">
|
||||
<view class="con-bg">
|
||||
<!-- 头部 -->
|
||||
<customHeader ref="customHeaderRef" :title="'业务中心'"
|
||||
:leftFlag="false" :rightFlag="false" v-if="!searchShow"
|
||||
></customHeader>
|
||||
<customHeader v-else ref="customHeaderRef" :title="'搜索'"
|
||||
:leftFlag="true" :rightFlag="false"
|
||||
@back="handleBack" :searchType="1"
|
||||
<customHeader ref="customHeaderRef" :title="!searchShow?'业务中心':'搜索'"
|
||||
:leftFlag="!searchShow?false:true"
|
||||
:rightFlag="false"
|
||||
@back="handleBack"
|
||||
:searchType="searchShow?1:undefined"
|
||||
></customHeader>
|
||||
<!-- 高度来避免头部遮挡 -->
|
||||
<view class="top-height"></view>
|
||||
@@ -68,7 +67,7 @@
|
||||
|
||||
<script setup>
|
||||
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 customSearch from '@/components/customSearch.vue'
|
||||
import MescrollUni from 'mescroll-uni/mescroll-uni.vue';
|
||||
@@ -99,6 +98,10 @@ let searchShow = ref(false);
|
||||
let searchText = ref(undefined);
|
||||
let searchTypeObj = ref({typeId:2});
|
||||
|
||||
onHide(()=>{
|
||||
searchShow.value=false;
|
||||
})
|
||||
|
||||
// 搜索返回操作
|
||||
const handleBack=()=>{
|
||||
searchShow.value=false;
|
||||
@@ -173,7 +176,7 @@ let handleJump=(url)=>{
|
||||
<style scope>
|
||||
.scroll-h{
|
||||
/* #ifdef APP-PLUS */
|
||||
height: calc(100vh - 120px) !important;
|
||||
height: calc(100vh - 130px) !important;
|
||||
/* #endif */
|
||||
/* #ifndef APP-PLUS */
|
||||
height: calc(100vh - 140px) !important;
|
||||
|
||||
@@ -1,14 +1,17 @@
|
||||
<template>
|
||||
<view class="con-body">
|
||||
<view class="con-bg">
|
||||
<!-- 头部 -->
|
||||
<customHeader ref="customHeaderRef" :title="'首页'"
|
||||
:leftFlag="false" :rightFlag="false"
|
||||
></customHeader>
|
||||
<!-- 高度来避免头部遮挡 -->
|
||||
<view class="top-height"></view>
|
||||
<!-- 下拉刷新 -->
|
||||
<mescroll-uni ref="mescrollRef" @init="mescrollInit"
|
||||
: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 -->
|
||||
<!-- 删除设备ID--测试用 -->
|
||||
<view class="del-cache" @click="handleDelete">
|
||||
@@ -16,141 +19,122 @@
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
|
||||
<!-- 搜索 @confirm="handleSearch" -->
|
||||
<customSearch v-if="searchShow"
|
||||
:searchKeywords="searchText"
|
||||
:searchType="searchTypeObj"
|
||||
@confirm="handleSearchConfirm"
|
||||
></customSearch>
|
||||
<view class="search search-sao" v-else>
|
||||
<uni-search-bar class="custom-search" radius="28"
|
||||
placeholder="请输入您想查询的内容或服务"
|
||||
clearButton="auto" cancelButton="none"
|
||||
bgColor="#6FA2F8" textColor="#ffffff"
|
||||
@focus="handleSearchFocus"
|
||||
v-model="searchText"
|
||||
/>
|
||||
<uni-icons custom-prefix="iconfont" color="#ffffff" type="icon-phonesaoyisao" size="20"></uni-icons>
|
||||
<!-- 待办内容 -->
|
||||
<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>
|
||||
|
||||
<block v-if="!searchShow">
|
||||
<!-- 待办内容 -->
|
||||
<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 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>
|
||||
<view class="p-last">
|
||||
<view>目标销售额</view>
|
||||
<view class="font-money">{{ targetSales }}</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" v-if="commonServiceList.length>0">
|
||||
<view class="w-b-title">常用服务</view>
|
||||
<view class="logo-list">
|
||||
<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'" />
|
||||
<text class="font-gray">{{ item.bizName }}</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" v-if="commonServiceList.length>0">
|
||||
<view class="w-b-title">常用服务</view>
|
||||
<view class="logo-list">
|
||||
<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'" />
|
||||
<text class="font-gray">{{ item.bizName }}</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>
|
||||
<!-- 新闻公告 -->
|
||||
<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>
|
||||
</block>
|
||||
<!-- 底部加高度来避免tabbar遮挡 -->
|
||||
<view class="bottom-height"></view>
|
||||
</mescroll-uni>
|
||||
</view>
|
||||
</view>
|
||||
@@ -159,6 +143,7 @@
|
||||
<script setup>
|
||||
import { ref,onMounted,computed } from 'vue';
|
||||
import { onLoad } from '@dcloudio/uni-app';
|
||||
import customHeader from '@/components/customHeader.vue'
|
||||
import MescrollUni from 'mescroll-uni/mescroll-uni.vue';
|
||||
import customSteps from '@/components/customSteps.vue'
|
||||
import customSearch from '@/components/customSearch.vue'
|
||||
@@ -204,7 +189,7 @@ onLoad(async(opt) => {
|
||||
// 初始化调用方法
|
||||
const initLoad =()=>{
|
||||
try {
|
||||
showLoading("加载中...")
|
||||
showLoading("加载中...");
|
||||
getBackBlogCount();
|
||||
getSwiperList();
|
||||
getStepData();
|
||||
@@ -251,24 +236,6 @@ onMounted(() => {
|
||||
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({
|
||||
count1:0,
|
||||
count2:0,
|
||||
@@ -409,10 +376,10 @@ const formatDateStr =(times)=>{
|
||||
|
||||
.scroll-h{
|
||||
/* #ifdef APP-PLUS */
|
||||
height:calc(100vh - 30px) !important;
|
||||
height:calc(100vh - 78px) !important;
|
||||
/* #endif */
|
||||
/* #ifndef APP-PLUS */
|
||||
height: calc(100vh - 30px) !important;
|
||||
height: calc(100vh - 80px) !important;
|
||||
/* #endif */
|
||||
}
|
||||
:deep(.mescroll-upwarp){
|
||||
|
||||
@@ -45,9 +45,9 @@ let versionData = ref({}); //版本参数
|
||||
onLoad(async(opt) => {
|
||||
console.log("onLoad");
|
||||
|
||||
uni.preloadPage({url: "/pages/login/login"});
|
||||
uni.preloadPage({url: "/pages/deviceAuth/deviceAuth"});
|
||||
uni.preloadPage({url: "/pages/home/home"});
|
||||
// uni.preloadPage({url: "/pages/login/login"});
|
||||
// uni.preloadPage({url: "/pages/deviceAuth/deviceAuth"});
|
||||
// uni.preloadPage({url: "/pages/home/home"});
|
||||
|
||||
// #ifdef APP-PLUS
|
||||
// 查询版本接口
|
||||
|
||||
@@ -2,17 +2,18 @@
|
||||
<view class="con-body">
|
||||
<view class="con-bg">
|
||||
<!-- 头部 -->
|
||||
<customHeader ref="customHeaderRef" :title="'消息'" :leftFlag="false" :rightFlag="true" v-if="!searchShow">
|
||||
<template #right>
|
||||
<customHeader ref="customHeaderRef" :title="!searchShow?'消息':'搜索'"
|
||||
:leftFlag="!searchShow?false:true"
|
||||
:rightFlag="true"
|
||||
@back="handleBack" :searchType="searchShow?1:undefined"
|
||||
>
|
||||
<template #right v-if="!searchShow">
|
||||
<view class="head-right" @click="handleRead">
|
||||
<img :src="'static/images/icon-clean@2x.png'" />清除未读
|
||||
</view>
|
||||
</template>
|
||||
</customHeader>
|
||||
<customHeader v-else ref="customHeaderRef" :title="'搜索'"
|
||||
:leftFlag="true" :rightFlag="false"
|
||||
@back="handleBack" :searchType="1"
|
||||
></customHeader>
|
||||
|
||||
<!-- 高度来避免头部遮挡 -->
|
||||
<view class="top-height"></view>
|
||||
|
||||
@@ -54,7 +55,7 @@
|
||||
|
||||
<script setup>
|
||||
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 customSearch from '@/components/customSearch.vue'
|
||||
import MescrollUni from 'mescroll-uni/mescroll-uni.vue';
|
||||
@@ -85,6 +86,9 @@ let noticeTypeList=ref([
|
||||
]);
|
||||
let notictTypeCheck = ref({});//选中类型
|
||||
|
||||
onHide(()=>{
|
||||
searchShow.value=false;
|
||||
})
|
||||
|
||||
// 搜索返回操作
|
||||
const handleBack=()=>{
|
||||
|
||||
@@ -213,7 +213,7 @@ onMounted(() => {
|
||||
<style scoped>
|
||||
.scroll-h{
|
||||
/* #ifdef APP-PLUS */
|
||||
height:calc(100vh - 30px) !important;
|
||||
height:calc(100vh - 50px) !important;
|
||||
/* #endif */
|
||||
/* #ifndef APP-PLUS */
|
||||
height: calc(100vh - 30px) !important;
|
||||
|
||||
Reference in New Issue
Block a user