提交 8a026383 authored 作者: lidongxu's avatar lidongxu

feat(mobile/pages/../storelist.vue): 新增:勤策移动端-售点稽核-终端门店列表页面样式准备

上级 d43a1d72
......@@ -26,9 +26,7 @@ watch(
);
function getKeepAliveName(routes) {
console.log('routes', routes)
routes.forEach((item) => {
console.log('1', item)
if (!item.meta?.noCache && item.name) { // 是否缓存
cachedViews.push(item.name)
}
......
<template>
<!-- 门店列表 -->
<div>
门店列表
<div class="search-container">
<!-- 头部区域 -->
<div class="header-wrap">
<span>终端</span>
<!-- 搜索区域 -->
<van-search v-model="searchVal"
placeholder="请输入勤策终端编码/名称"
@search="handleSearch"
@clear="handleClear"
class="search-bar">
<template #action>
<van-button round
type="primary"
size="small"
@click="handleSearch">
搜索
</van-button>
</template>
</van-search>
<van-tag type="primary"
round
size="medium">记录</van-tag>
</div>
<!-- 结果列表 -->
<van-list v-model:loading="loading"
:finished="finished"
finished-text="没有更多结果了"
class="result-list">
<van-cell-group inset>
<van-cell v-for="(item, index) in resultList"
:key="index"
class="result-item">
<template #title>
<div class="item-title">{{ item.name }}{{ item.code }}</div>
</template>
<template #label>
<div class="item-company">{{ item.company }}</div>
<div class="item-address">{{ item.address }}</div>
</template>
</van-cell>
</van-cell-group>
</van-list>
<!-- 无结果提示 -->
<van-empty v-if="showEmpty"
description="未找到匹配的结果"
class="empty-tip" />
</div>
</template>
<script setup>
// 模拟数据
const mockData = [
{
name: '世纪港湾广缘超市',
code: 'POS00052306',
company: '秦皇岛洪朗森商贸有限公司',
address: '河北省秦皇岛市海港区北环路街道秦皇东大街辅路'
},
{
name: '711浦东南路地铁站店',
code: 'POS00048465',
company: '上海星甲商贸有限公司',
address: '上海市浦东新区浦东南路浦东金融广场'
},
{
name: '嘉兴大桥瑞洲',
code: 'POS00052360',
company: '嘉兴凯鸣商贸有限公司',
address: '浙江省湖州市吴兴区康山街道兴业路'
}
];
// 响应式数据
const searchVal = ref('');
const resultList = ref(mockData);
const loading = ref(false);
const finished = ref(true);
const showEmpty = ref(false);
// 监听结果列表变化,控制空状态显示
watch(resultList, (newVal) => {
showEmpty.value = newVal.length === 0 && searchVal.value.trim() !== '';
});
// 搜索处理
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;
};
</script>
<style scoped></style>
\ No newline at end of file
<style lang="scss"
scoped>
// 基础样式设置
$base-width: 375px;
$base-font-size: 16px;
.search-container {
width: $base-width;
margin: 0 auto;
font-size: $base-font-size;
box-sizing: border-box;
padding-bottom: 20px;
background-color: #f5f5f5;
min-height: 100vh;
.header-wrap {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 20px;
border-bottom: 2px solid #e5e5e5;
span{
font-size: 14px;
}
.search-bar {
padding: 10px;
height: auto !important;
background-color: transparent;
::v-deep(.van-search__content){
background-color: white;
.van-cell{
height: auto;
}
}
}
}
.result-list {
background-color: transparent;
padding: 0 20px;
margin-top: 10px;
.van-cell-group {
margin: 0;
background-color: transparent;
.result-item {
background-color: white;
margin-bottom: 10px;
.item-title {
font-weight: 600;
color: #333;
margin-bottom: 4px;
}
.item-company {
font-size: 14px;
color: #a6a4a4;
margin-bottom: 2px;
}
.item-address {
font-size: 13px;
color: #a6a4a4;
line-height: 1.4;
}
}
}
}
.empty-tip {
margin-top: 40px;
padding: 0 12px;
}
}
</style>
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论