提交 b50700ee authored 作者: lidongxu's avatar lidongxu

refactor(backtoup): 删除:PC 端的返回顶部的右下角按钮(只在移动端使用 van-back-top)

上级 a0f4564e
...@@ -9,7 +9,6 @@ ...@@ -9,7 +9,6 @@
<template v-else> <template v-else>
<router-view /> <router-view />
</template> </template>
<back-to-up />
</template> </template>
<script setup> <script setup>
......
...@@ -16,6 +16,7 @@ export * from './jimu/design' ...@@ -16,6 +16,7 @@ export * from './jimu/design'
export * from './jimu/ext' export * from './jimu/ext'
export * from './jimu/list' export * from './jimu/list'
export * from './jimu/manager' export * from './jimu/manager'
export * from './mobile/audit_activity/sales_point_inspection'
export * from './mobile/cp_activity/examine/index' export * from './mobile/cp_activity/examine/index'
export * from './other/logistics' export * from './other/logistics'
export * from './other/version' export * from './other/version'
......
import request from '@/utils/request';
// 终端门店列表
export function getTerminalStoreListAPI(params) {
return request({
url: '/operation/qc/store',
params
})
}
<template>
<div class="back-to-top"
v-show="y > 300"
@click="y = 0">
<el-icon>
<Top />
</el-icon>
</div>
</template>
<script setup>
import { useWindowScroll } from '@vueuse/core'
const { x, y } = useWindowScroll({
behavior: 'smooth'
})
</script>
<style scoped
lang="scss">
.back-to-top {
position: fixed;
bottom: 80px;
right: 24px;
z-index: 999;
width: 46px;
height: 46px;
border-radius: 50%;
background-color: var(--main-color);
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
cursor: pointer;
transition: all 0.5s;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
i {
font-size: 28px;
font-weight: 900;
color: white;
}
}
</style>
\ No newline at end of file
...@@ -55,8 +55,6 @@ import GroupLegend from '@/components/ECharts/GroupLegend' ...@@ -55,8 +55,6 @@ import GroupLegend from '@/components/ECharts/GroupLegend'
import NoData from '@/components/NoData' import NoData from '@/components/NoData'
// 树形类目 // 树形类目
import CategoryTree from '@/components/CategoryTree' import CategoryTree from '@/components/CategoryTree'
// 返回头部
import BackToUp from '@/components/BackToUp'
// 自定义 toolTip // 自定义 toolTip
import XLToolTip from '@/components/XLToolTip' import XLToolTip from '@/components/XLToolTip'
// 自定义 select // 自定义 select
...@@ -99,7 +97,6 @@ app.component('LevitatedSphere', LevitatedSphere) ...@@ -99,7 +97,6 @@ app.component('LevitatedSphere', LevitatedSphere)
app.component('GroupLegend', GroupLegend) app.component('GroupLegend', GroupLegend)
app.component('NoData', NoData) app.component('NoData', NoData)
app.component('CategoryTree', CategoryTree) app.component('CategoryTree', CategoryTree)
app.component('BackToUp', BackToUp)
app.component('XlToolTip', XLToolTip) app.component('XlToolTip', XLToolTip)
app.component('XlSelect', XlSelect) app.component('XlSelect', XlSelect)
app.component('OpenDialog', OpenDialog) app.component('OpenDialog', OpenDialog)
......
...@@ -6,4 +6,5 @@ export const isMobile = () => { ...@@ -6,4 +6,5 @@ export const isMobile = () => {
return true; return true;
} }
} }
return false;
} }
...@@ -4,50 +4,45 @@ ...@@ -4,50 +4,45 @@
@click-left="router.back()"> @click-left="router.back()">
<template #right> <template #right>
<van-tag type="primary" <van-tag type="primary"
round round
size="medium" size="medium"
@click="router.push({ path: '/taskList' })">稽查记录</van-tag> @click="router.push({ path: '/taskList' })">稽查记录</van-tag>
</template> </template>
</van-nav-bar> </van-nav-bar>
<!-- 头部区域 --> <!-- 头部区域 -->
<div class="header-wrap"> <div class="header-wrap">
<span>终端门店列表</span> <span>终端门店列表</span>
<!-- 搜索区域 --> <!-- 搜索区域 -->
<van-search v-model="searchVal" <van-search v-model="query.name"
placeholder="请输入勤策终端编码/名称" placeholder="请输入勤策终端编码/名称"
@search="handleSearch" @update:model-value="getTerminalStoreListFn"
@clear="handleClear" class="search-bar" />
class="search-bar">
<template #action>
<van-button round
type="primary"
size="small"
@click="handleSearch">
搜索
</van-button>
</template>
</van-search>
</div> </div>
<!-- 结果列表 --> <!-- 结果列表 -->
<van-list v-model:loading="loading" <van-pull-refresh v-model="refreshLoading"
:finished="finished" :pull-distance="100"
finished-text="没有更多结果了" success-text="刷新成功"
class="result-list"> @refresh="onRefresh">
<van-cell-group inset> <van-list v-model:loading="loading"
<van-cell v-for="(item, index) in resultList" :finished="finished"
:key="index" @load="loadMore"
class="result-item" class="result-list">
@click="handleClickStore(item)"> <van-cell-group inset>
<template #title> <van-cell v-for="(item, index) in resultList"
<div class="item-title">{{ item.name }}{{ item.code }}</div> :key="index"
</template> class="result-item"
<template #label> @click="handleClickStore(item)">
<div class="item-company">{{ item.company }}</div> <template #title>
<div class="item-address">{{ item.address }}</div> <div class="item-title">{{ item.storeName }}{{ item.storeCode }}</div>
</template> </template>
</van-cell> <template #label>
</van-cell-group> <div class="item-company">{{ item.dealersName }}</div>
</van-list> <div class="item-address">{{ item.storeAddr }}</div>
</template>
</van-cell>
</van-cell-group>
</van-list>
</van-pull-refresh>
<!-- 无结果提示 --> <!-- 无结果提示 -->
<van-empty v-if="showEmpty" <van-empty v-if="showEmpty"
...@@ -60,42 +55,50 @@ ...@@ -60,42 +55,50 @@
</template> </template>
<script setup> <script setup>
// 模拟数据 import { getTerminalStoreListAPI } from '@/api'
const mockData = [
{ const router = useRouter();
name: '世纪港湾广缘超市',
code: 'POS00052306',
company: '秦皇岛洪朗森商贸有限公司',
address: '河北省秦皇岛市海港区北环路街道秦皇东大街辅路'
},
{
name: '711浦东南路地铁站店',
code: 'POS00048465',
company: '上海星甲商贸有限公司',
address: '上海市浦东新区浦东南路浦东金融广场'
},
{
name: '嘉兴大桥瑞洲',
code: 'POS00052360',
company: '嘉兴凯鸣商贸有限公司',
address: '浙江省湖州市吴兴区康山街道兴业路'
}
];
// 响应式数据 /*************** 终端门店列表 *******************/
const searchVal = ref(''); const query = reactive({
const resultList = ref(mockData); name: '',
pageNum: 1,
pageSize: 10
})
const resultList = ref([]);
const loading = ref(false); const loading = ref(false);
const refreshLoading = ref(false);
const finished = ref(true); const finished = ref(true);
const showEmpty = ref(false); const showEmpty = ref(false); // 无数据显示图状态
const router = useRouter();
// 监听结果列表变化,控制空状态显示 // 监听搜索结果列表变化,控制搜索空结果状态显示图
watch(resultList, (newVal) => { watch(resultList, (newVal) => {
showEmpty.value = newVal.length === 0 && searchVal.value.trim() !== ''; showEmpty.value = newVal.length === 0 && query.name.trim() !== '';
}); });
const getTerminalStoreListFn = async () => {
const res = await getTerminalStoreListAPI(query)
resultList.value = [...resultList.value, ...res.data.rows]
finished.value = res.data.total === resultList.value.length
loading.value = false
refreshLoading.value = false
}
getTerminalStoreListFn()
const onRefresh = () => {
resultList.value = []
query.pageNum = 1
refreshLoading.value = true
getTerminalStoreListFn()
}
const loadMore = () => {
loading.value = true
query.pageNum++
getTerminalStoreListFn()
}
/*******新增终端********/ /*******新增终端********/
const addNewTerminal = () => { const addNewTerminal = () => {
router.push({ router.push({
...@@ -103,36 +106,6 @@ const addNewTerminal = () => { ...@@ -103,36 +106,6 @@ const addNewTerminal = () => {
}) })
} }
// 搜索处理
const handleSearch = () => {
if (!searchVal.value.trim()) {
resultList.value = mockData;
showEmpty.value = false;
return;
}
// 模拟加载状态
loading.value = true;
// 模拟接口请求延迟
setTimeout(() => {
const filtered = mockData.filter(item => {
const matchStr = `${item.name}${item.code}${item.company}${item.address}`;
return matchStr.includes(searchVal.value);
});
resultList.value = filtered;
loading.value = false;
finished.value = true;
}, 500);
};
// 清除搜索
const handleClear = () => {
resultList.value = mockData;
showEmpty.value = false;
};
// 门店点击 // 门店点击
const handleClickStore = (item) => { const handleClickStore = (item) => {
...@@ -174,7 +147,9 @@ const handleClickStore = (item) => { ...@@ -174,7 +147,9 @@ const handleClickStore = (item) => {
} }
.search-bar { .search-bar {
flex: 1;
padding: 10px; padding: 10px;
padding-right: 0;
height: auto !important; height: auto !important;
background-color: transparent; background-color: transparent;
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论