myBusi.html
7.77 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
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>我的商机</title>
<link rel="stylesheet" href="css/myBusi.css">
</head>
<body>
<div id="app" v-cloak>
<div class="app-container" data-name="我的商机" data-node-id="355:428">
<!-- 标签页统计 -->
<div class="tab-stats" data-node-id="355:513">
<div class="active-indicator" data-node-id="355:514"></div>
<div class="tab-texts" data-node-id="355:515">
<div
class="tab-text"
:class="{ active: activeTab === 'all' }"
@click="switchTab('all')"
data-node-id="355:516"
>全部商机{{ totalCount }}</div>
<div
class="tab-text"
:class="{ active: activeTab === 'pending' }"
@click="switchTab('pending')"
data-node-id="355:517"
>待跟进{{ pendingCount }}</div>
<div
class="tab-text"
:class="{ active: activeTab === 'follow-up' }"
@click="switchTab('follow-up')"
data-node-id="355:518"
>跟进中{{ followUpCount }}</div>
<div
class="tab-text"
:class="{ active: activeTab === 'completed' }"
@click="switchTab('completed')"
data-node-id="355:519"
>已完结{{ completedCount }}</div>
</div>
</div>
<!-- 搜索区域 -->
<div class="search-section">
<div class="search-bar" data-name="矩形" data-node-id="355:503">
<div class="search-input-container" data-node-id="355:504">
<img class="search-icon" src="images/search-icon.svg" alt="搜索图标">
<input
class="search-input"
type="text"
placeholder="输入用户账号"
v-model="searchKeyword"
data-node-id="355:510"
>
</div>
</div>
</div>
<!-- 筛选标签 -->
<div class="filter-tags" data-node-id="355:533">
<div
v-for="tag in filterTags"
:key="tag.id"
:class="['filter-tag', { active: tag.selected }]"
:data-node-id="tag.nodeId"
@click="selectFilterTag(tag.id)"
>
{{ tag.name }}
</div>
</div>
<!-- 商机列表 -->
<div class="business-list">
<div
v-for="(business, index) in filteredBusinessList"
:key="business.id"
class="business-card"
:data-node-id="business.nodeId"
@click="viewBusinessDetail(business)">
<div class="card-content">
<!-- 顶部编号和状态 -->
<div class="card-header" data-node-id="355:432">
<div class="business-number" data-node-id="355:433">
<div class="number-text" data-node-id="355:434">#{{ business.orderNumber }}</div>
</div>
<div :class="['status-badge', business.statusClass]" data-node-id="355:435">
<span>{{ business.statusText }}</span>
</div>
</div>
<!-- 商机详情 -->
<div class="business-details" data-node-id="355:436">
<!-- 地址 -->
<div class="detail-row" data-node-id="355:437">
<img class="detail-icon" src="images/location-icon.svg" alt="地址图标">
<div class="detail-text" data-node-id="355:441">
<span>{{ business.address }}</span>
</div>
</div>
<!-- 联系方式 -->
<div class="detail-row contact-row" data-node-id="355:443">
<img class="detail-icon" src="images/user-icon.svg" alt="地址图标">
<div class="detail-text" data-node-id="355:446">
<span>{{ business.contactPhone }}</span>
</div>
</div>
<!-- 商机标签 -->
<div class="detail-row" data-node-id="355:448">
<img class="detail-icon" src="images/tag-icon.svg" alt="地址图标">
<div class="business-tags" data-node-id="355:452">
<div
v-for="tag in business.tags"
:key="tag.id"
class="business-tag"
:data-node-id="tag.nodeId"
>
{{ tag.name }}
</div>
</div>
</div>
<!-- 处理人信息 -->
<div class="processor-info" data-name="Container" data-node-id="355:457">
<span>处理人：{{ business.processor }}</span>
</div>
<!-- 时间信息 -->
<div class="time-info" data-name="Container" data-node-id="355:459">
<div class="submit-time" data-name="Container" data-node-id="355:460">
<span>提交：{{ business.submitTime }}</span>
</div>
<div class="update-time">
<span>更新：{{ business.updateTime }}</span>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 底部导航 -->
<div class="bottom-nav" data-name="tab" data-node-id="355:520">
<div
class="nav-item collect-business"
data-name="收集商机"
data-node-id="355:523"
@click="navigateToCollect">
<img class="nav-icon" src="images/collect-icon.svg" alt="收集商机">
<span class="nav-text" data-node-id="355:528">收集商机</span>
</div>
<div
class="nav-item all-business active"
data-name="全部商机"
data-node-id="355:529">
<img class="nav-icon" src="images/business-icon.svg" alt="收集商机">
<span class="nav-text" data-node-id="355:532">全部商机</span>
</div>
</div>
</div>
</div>
<!-- 引入Vue.js -->
<script src="js/vue.min.js"></script>
<script src="js/util.js"></script>
<script src="js/myBusi.js"></script>
</body>
</html>