indexStore.vue
2.84 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
<template>
<view class="inspection">
<view class="store-search">
<uv-input :placeholder="t('app.common.search')" prefixIcon="search" prefixIconStyle="font-size: 46rpx;color: #333333" border="none"
placeholderStyle="color:#90949D;font-size:26rpx" clearable
style="background-color: #fff;height: 68rpx;flex: none;margin-top: 16rpx;padding: 0 24rpx;"
@input="handleSearch"></uv-input>
</view>
<!-- 门店列表 -->
<view class="store-list" v-if="showMallList.length>0">
<StoreItem v-for="sItem in showMallList" :key="sItem.id" :item="sItem" style="margin-bottom: 16rpx;"></StoreItem>
</view>
<view class="p-empty" style="margin-top: 280rpx;" v-else>
<image class="p-empty-img" src="/static/common/empty.png" mode=""></image>
<text class="p-empty-text">{{ t('maintenance.monitor.project.empty.text') }}</text>
</view>
</view>
</template>
<script setup>
import {
computed,
ref
} from 'vue';
import {
onLoad
} from '@dcloudio/uni-app';
import {
doMonitorGroupApi
} from '@/api';
import {
getStageObj
} from '@/utils'
import StoreItem from './components/StoreItem.vue'
import {
t
} from '@/plugins/index.js'
function getFormatMall(dataList, targetMallList) {
if (dataList.malls && dataList.malls.length > 0) {
const targetData = dataList.malls.map(item => {
return {
...item,
isFold: false,
}
})
targetMallList.push(...targetData)
}
if (dataList.subGroups && dataList.subGroups.length > 0) {
dataList.subGroups.forEach(item => {
getFormatMall(item, targetMallList)
})
}
}
const mallList = ref([])
function getMallList() {
const accountId = getStageObj('account')?.id
if (accountId) {
const params = {
accountId,
}
doMonitorGroupApi(params).then(res => {
if (res.code === 200) {
const targetList = []
getFormatMall(res.data, targetList)
mallList.value = targetList
}
})
}
}
// 搜索功能
const keyword = ref('')
function handleSearch(value) {
keyword.value = value
}
const showMallList = computed(() => {
if (keyword.value) {
return mallList.value.filter(item => {
if (item.name.includes(keyword.value)) {
return true
} else {
return false
}
})
} else {
return mallList.value
}
})
onLoad((options) => {
getMallList()
})
</script>
<style lang="scss">
.inspection {
position: relative;
.store-search {
position: sticky;
left: 0;
top: 0;
width: 750rpx;
height: 100rpx;
background-color: #f2f3f6;
z-index: 100;
padding: 0 20rpx;
}
.i-content {
padding: 0 20rpx;
}
}
.store-list{
padding: 0 20rpx;
}
</style>