自用vue模板 - 搜索+列表+数量展示
发布时间
阅读量：
阅读量
效果图
功能
列表页
搜索+列表+各列表数量展示
列出数量，计算各自的总页数
显示列表#0
swiper切换显示 + 触底加载下一页数据
代码
<template>
<view>
<!-- 自定义导航栏 占位空间 -->
<view class="navigationStyleCustomHeight alwaysOnTopBox0 bgColorWhite"></view>
<!-- 自定义导航栏 -->
<view class="rowSpaceBetween box" style="background-color: #fff; height: 50px;">
<view class="">
<text class="opacity0">占位字符</text>
</view>
<view class="fontSize16 weightBold" style="line-height: 50px;">
商品管理
</view>
<view class="opacity80" style="font-size: 12px; line-height: 50px;" @click="goPage('product_add_category')">
新增商品
</view>
</view>
<!-- 搜索条 -->
<view class="bgColorWhite">
<uni-search-bar clearButton="none" @confirm="searchAction" @focus="focusAction" v-model="searchValue" @cancel="cancelAction" placeholder="搜索商品信息"></uni-search-bar>
</view>
<!-- 搜索模式 -->
<view class="" v-show="mode == 'search'">
<!-- 空列表提示 -->
<notice-found-nothing v-show="!list_search.length"></notice-found-nothing>
<!-- 搜索结果集 -->
<view>
<!-- 卡片 -->
<view class="bgColorWhite marginTop5" v-for="(item, index) in list_search" :key="'list-s-' + index">
One
</view>
</view>
</view>
<!-- 列表模式 -->
<view class="" v-show="mode == 'list'">
<view class="alwaysOnTopBox2 bgColorWhite">
<view class="TopTabs rowSpaceEvenly">
<view class="oneTab" :class="{'active': curTab == 0}" @click="curTab = 0">
<view class="">
<text class="box-text">待办</text>
<text class="fontSize12"> {{rowsTotal[0]?'('+rowsTotal[0]+')':''}}</text>
</view>
</view>
<view class="oneTab" :class="{'active': curTab == 1}" @click="curTab = 1">
<view class="">
<text class="box-text">已接单</text>
<text class="fontSize12"> {{rowsTotal[1]?'('+rowsTotal[1]+')':''}}</text>
</view>
</view>
<view class="oneTab" :class="{'active': curTab == 2}" @click="curTab = 2">
<view class="">
<text class="box-text">待送达</text>
<text class="fontSize12"> {{rowsTotal[2]?'('+rowsTotal[2]+')':''}}</text>
</view>
</view>
<view class="oneTab" :class="{'active': curTab == 3}" @click="curTab = 3">
<view class="">
<text class="box-text">已完成</text>
<text class="fontSize12"> {{rowsTotal[3]?'('+rowsTotal[3]+')':''}}</text>
</view>
</view>
</view>
</view>
<!-- 待办 -->
<swiper class="swiper" :indicator-dots="false" :autoplay="false" @change="swiperChanged" :current="curTab" :style="{'height': height}">
<swiper-item>
<view class="oneDom-0">
<!-- 空列表提示 -->
<notice-empty v-show="!lists[0].length"></notice-empty>
<!-- 卡片 -->
<view class="bgColorWhite marginTop5" v-for="(item, index) in lists[0]" :key="'list-0-' + index">
one
</view>
</view>
</swiper-item>
<!-- 已接单 -->
<swiper-item>
<view class="oneDom-1">
<!-- 空列表提示 -->
<notice-empty v-show="!lists[1].length"></notice-empty>
<!-- 一个订单 -->
<view class="bgColorWhite marginTop5" v-for="(item, index) in lists[1]" :key="'list-1-' + index">
one
</view>
</view>
</swiper-item>
<!-- 待送达 -->
<swiper-item>
<view class="oneDom-2">
<!-- 空列表提示 -->
<notice-empty v-show="!lists[2].length"></notice-empty>
<!-- 卡片 -->
<view class="bgColorWhite marginTop5" v-for="(item, index) in lists[2]" :key="'list-2-' + index">
one
</view>
</view>
</swiper-item>
<!-- 已完成 -->
<swiper-item>
<view class="oneDom-3">
<!-- 空列表提示 -->
<notice-empty v-show="!lists[3].length"></notice-empty>
<!-- 卡片 -->
<view class="bgColorWhite marginTop5" v-for="(item, index) in lists[3]" :key="'list-3-' + index">
one
</view>
</view>
</swiper-item>
</swiper>
</view>
<!-- 占位 - 因为被下面的提示挡住了 -->
<view style="height: 70px;" v-if="!isWithFactoryInfo"></view>
<!-- 厂家信息提示填写 -->
<view class="alwaysAtBottomFullRow myNoticeBar">
<!-- window-bottom是tabbar高度 -->
<view style="padding-bottom: var(--window-bottom);" @click="goPage('new_account')" v-if="!isWithFactoryInfo">
<uni-notice-bar single scrollable showIcon :speed="30" color="#2979FF" background-color="#EAF2FF" text="系统检测到您的用户信息未填写完成，将无法使用部分功能。 为方便您下一步操作，请将信息填写完全。 填写资料 >>"></uni-notice-bar>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
api: this.$store.getters.getApi,
token: this.$store.getters.getToken,
// 是否已有厂家信息
isWithFactoryInfo: this.$store.getters.getIsWithFactoryInfo,
// 模式 list search
mode: 'list',
// 显示中的列表下标
curTab: 0,
// 预设的swiper高度， 80%屏幕高度
height: '80vh',
// 每页数量
pageSize: 10,
// 列表数据
lists: [
[],
[],
[],
[]
],
// 当前页码 - 4个队列
pageNums: [
0, 0, 0, 0
],
// 各列表的记录数量
rowsTotal: [
null, null, null, null
],
// 各列表的总页数
pageNumsTotal: [
null, null, null, null
],
// 搜索关键词
searchValue: '',
// 搜索结果集
list_search: [],
}
},
onShow() {
// 检查登录情况
let is_logined = this.check_login()
if (is_logined) {
console.log('[Logined]')
// 重新获取列表
this.rebuild_lists()
}
},
// 触底触发
onReachBottom() {
// 加载更多列表结果
this.load_more_page()
},
methods: {
// 获取图片地址
get_img_src(url) {
let res = ''
if (/^[\ /]+/.test(url)) {
// 斜杠开头
res = this.$store.getters.getApi + '/factory' + url
} else {
res = this.$store.getters.getApi + '/factory/profile/' + url
}
// console.log(res)
return res
},
swiperChanged(e) {
this.curTab = e.detail.current
// 如果列表是空, 且服务器有数据时, 获取当前列表的下一页数据
if (this.pageNums[this.curTab] == 0 && this.pageNumsTotal[this.curTab] !== 0) {
this.load_more_page()
}
this.setH()
},
// 检查登录情况
check_login() {
if (this.token == '') {
// 未登录
uni.reLaunch({
url: '/pages/login/login'
})
return false
} else {
return true
}
},
goPage(name) {
uni.navigateTo({
url: '/pages/' + name + '/' + name
})
},
// 设置高度
setH() {
console.log('setH()')
setTimeout(() => {
// 节点查询
const query = uni.createSelectorQuery().in(this)
// 开始
query.select('.oneDom-' + this.curTab).boundingClientRect(data => {
// 获取DOM的高度， 单位是像素
let h = data.height
h = Math.max(500, h)
// 补上单位
h += 'px'
// 实际高度赋值给swiper
this.height = h
console.log('【动态设置高度】', h, '【列表】 #' + this.curTab)
}).exec()
}, 300)
},
// 重置列表
rebuild_lists() {
// 清空
this.pageNums = [
0, 0, 0, 0
]
this.pageNumsTotal = [
null, null, null, null
]
this.rowsTotal = [
null, null, null, null
]
this.lists = [
[],
[],
[],
[]
]
this.list_search = []
this.searchValue = ''
// 开始请求 (为了标签页的数量显示效果)
this.init_pagination()
},
// 搜索框聚焦
focusAction() {
this.mode = 'search'
},
// 搜索框取消
cancelAction() {
this.mode = 'list'
},
// 搜索框开始搜索
searchAction() {
console.log('搜索框开始搜索', this.searchValue)
let kw = this.searchValue
if (kw == '') {
// 清空
this.list_search = []
return
}
// 开始搜索
let d = {
searchValue: this.searchValue
}
let u = this.api + '/factory/order/getFactoryBy'
console.log('[提交数据]', JSON.stringify(d))
console.log('[提交地址]', u)
uni.showLoading()
uni.request({
url: u,
method: 'GET',
dataType: 'JSON',
header: {
'Authorization': this.token
},
data: d,
success: (res) => {
uni.hideLoading()
console.log(JSON.stringify(res))
if (res.statusCode != 200) {
uni.showToast({
icon: 'none',
title: res.errMsg
})
return
}
if (res.data.code != 200) {
uni.showToast({
icon: 'none',
title: res.data.msg
})
return
}
// 成功
this.list_search = res.data.rows
this.$forceUpdate()
},
fail: (e) => {
uni.hideLoading()
console.log(JSON.stringify(e))
uni.showToast({
icon: 'none',
title: '请求失败'
})
}
})
},
// 信息提示
showError(e) {
uni.showToast({
icon: 'none',
title: e
})
},
// 获取分页情况
init_pagination() {
let d = {
}
let u = this.api + '/factory/order/count'
console.log('[提交数据]', JSON.stringify(d))
console.log('[提交地址]', u)
uni.showLoading()
uni.request({
url: u,
method: 'GET',
dataType: 'JSON',
header: {
'Authorization': this.token
},
data: d,
success: (res) => {
uni.hideLoading()
console.log(JSON.stringify(res))
if (res.statusCode != 200) {
uni.showToast({
icon: 'none',
title: res.errMsg
})
return
}
if (!res.data.hasOwnProperty('status0')) {
uni.showToast({
icon: 'none',
title: '无法获取分页信息'
})
return
}
// 成功
// 状态码 与 列表下标 的关系
let statusCode = [
1, // 下标0, 未接单
2, // 下标1, 已接单,待配送
3, // 下标2, 已配送,待送达
0, // 下标3, 已送达
]
for (let indexList in statusCode) {
let k = 'status' + statusCode[indexList]
if (!res.data.hasOwnProperty(k)) {
// 没有此状态
console.log('没有此状态:' + k)
uni.showToast({
icon: 'error',
title: '获取数量失败'
})
return
}
// 某列表的总数
let v = res.data[k]
// 更新当前列表的总记录数
if (this.rowsTotal[indexList] === null) {
this.rowsTotal[indexList] = v
}
// 更新最大页码
if (this.pageNumsTotal[indexList] === null) {
let totlePages = Math.ceil(this.rowsTotal[indexList] / this.pageSize)
console.log('[总数据行数]', this.rowsTotal[indexList])
console.log('[每页容量]', this.pageSize)
console.log('[总页数]', totlePages)
let maxPN = Math.max(0, totlePages)
this.pageNumsTotal[indexList] = maxPN
}
}
// 更新页数完毕
// 请求获取第一个列表的首页数据
// this.curTab = 0
this.$forceUpdate()
setTimeout(() => {
this.load_more_page()
}, 300)
},
fail: (e) => {
uni.hideLoading()
console.log(JSON.stringify(e))
uni.showToast({
icon: 'none',
title: '请求失败'
})
}
})
},
// 触底 刷新列表
load_more_page(indexList = null) {
// 搜索模式 取消
if (this.mode == 'search') {
return
}
// 列表下标
if (indexList === null) {
indexList = this.curTab
}
// 判断是否最后一页
if (this.pageNumsTotal[indexList] !== null && this.pageNums[indexList] >= this.pageNumsTotal[indexList]) {
this.showError('已是最后一页')
return
}
// 状态（0-已送达 1-待处理 2-已接订单 3-待送达 4-异常）
let status = 0
switch (indexList) {
case 0:
status = 1
break;
case 1:
status = 2
break;
case 2:
status = 3
break;
case 3:
status = 0
break;
}
// 根据显示的列表下标获取不同的更多分页信息
let d = {
pageSize: this.pageSize,
pageNum: this.pageNums[indexList] + 1,
status: status
}
let u = this.api + '/factory/order/list'
console.log('[提交数据]', JSON.stringify(d))
console.log('[提交地址]', u)
uni.showLoading()
uni.request({
url: u,
method: 'GET',
dataType: 'JSON',
header: {
'Authorization': this.token
},
data: d,
success: (res) => {
setTimeout(() => {
uni.hideLoading()
}, 400)
console.log(JSON.stringify(res))
if (res.statusCode != 200) {
uni.showToast({
icon: 'none',
title: res.errMsg
})
return
}
if (res.data.code != 200) {
uni.showToast({
icon: 'none',
title: res.data.msg
})
// 未登录
if (res.data.msg.indexOf('认证失败') !== -1 || res.data.msg.indexOf('登录') !== -1) {
setTimeout(() => {
uni.reLaunch({
url: '/pages/login/login'
})
}, 1500)
}
return
}
// 成功 - 列表合并
this.lists[indexList] = this.lists[indexList].concat(res.data.rows)
// 更新当前页码
let cur_length_in_cur_page = res.data.rows.length
if (cur_length_in_cur_page) {
// 如果有数据，就更新到下一页
this.pageNums[indexList] = Math.min(this.pageNumsTotal[indexList], this.pageNums[
indexList] + 1)
}
// console.log(JSON.stringify(this.lists))
let checkData = {
'总记录数': this.rowsTotal,
'最大页码': this.pageNumsTotal,
'当前页码': this.pageNums
}
console.log(JSON.stringify(checkData))
// 刷新
if (cur_length_in_cur_page) {
this.$forceUpdate()
}
// 高度自适应
this.setH()
},
fail: (e) => {
uni.hideLoading()
console.log(JSON.stringify(e))
uni.showToast({
icon: 'none',
title: '请求失败'
})
}
})
},
// 跳转详情页
goDetail(id = null) {
console.log('[goDetail]', id)
uni.navigateTo({
url: '/pages/order_details/order_details?id=' + id
})
}
// 函数结束
}
}
</script>
<style scoped>
.myNoticeBar /deep/ .uni-noticebar {
margin-bottom: unset;
}
</style>
<style>
.oneTab {
color: black;
padding-top: 10px;
padding-bottom: 10px;
position: relative;
color: #7a7a7a;
}
.oneTab:after {
content: '';
position: absolute;
left: 30%;
bottom: 0;
width: 40%;
border-bottom: 1px solid transparent;
}
/* */
.oneTab.active {
color: rgba(255, 141, 26, 1);
}
.oneTab.active:after {
border-bottom: 2px solid rgba(255, 141, 26, 1);
}
</style>全部评论 (0)
还没有任何评论哟~