增加搜索模板
This commit is contained in:
xuli3099
@@ -17,132 +17,140 @@
|
||||
<!-- #endif -->
|
||||
|
||||
<!-- 搜索 @confirm="handleSearch" -->
|
||||
<view class="search search-sao" >
|
||||
<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="handleFocus"
|
||||
@focus="handleSearchFocus"
|
||||
v-model="searchText"
|
||||
/>
|
||||
<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>
|
||||
<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="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 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="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="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="p-last">
|
||||
<view>目标销售额</view>
|
||||
<view class="font-money">{{ targetSales }}</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 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>
|
||||
<!-- 底部加高度来避免tabbar遮挡 -->
|
||||
<view class="bottom-height"></view>
|
||||
</block>
|
||||
</mescroll-uni>
|
||||
</view>
|
||||
</view>
|
||||
@@ -153,6 +161,7 @@ import { ref,onMounted,computed } from 'vue';
|
||||
import { onLoad } from '@dcloudio/uni-app';
|
||||
import MescrollUni from 'mescroll-uni/mescroll-uni.vue';
|
||||
import customSteps from '@/components/customSteps.vue'
|
||||
import customSearch from '@/components/customSearch.vue'
|
||||
import { getNavBarPaddingTop} from '@/utils/system.js'
|
||||
// ,swiperList,stepData,salesTask,commonServices,newsQueryList
|
||||
import { messageNotifyCount,messageFlowCount,getUserFavorite} from '@/api/home.js';
|
||||
@@ -242,13 +251,21 @@ onMounted(() => {
|
||||
navBarPaddingTop.value = getNavBarPaddingTop()*2;
|
||||
})
|
||||
|
||||
// 获取input 焦点跳转
|
||||
let handleFocus=()=>{
|
||||
uni.navigateTo({url:'/pages/search/search?type=1'})
|
||||
}
|
||||
// 查询搜索跳转
|
||||
let handleSearch = ()=>{
|
||||
// 搜索处理
|
||||
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;
|
||||
}
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user