|
|
@@ -24,22 +24,8 @@
|
|
|
<block v-if="!$util.isEmpty(list.data)">
|
|
|
<view class="list_item" v-for="(item, index) in list.data" :key="index">
|
|
|
|
|
|
- <!-- 右上角更多操作菜单（正常状态下显示） -->
|
|
|
- <view class="more-menu-wrap" v-if="tabs[tabIndex].delStatus === 0">
|
|
|
- <view class="more-trigger" @click.stop="toggleMenu(item)">
|
|
|
- <text class="more-dots">•••</text>
|
|
|
- </view>
|
|
|
- <!-- 下拉菜单内容 -->
|
|
|
- <view class="more-dropdown" v-if="activeMenuId === item.id">
|
|
|
- <view class="dropdown-item" @click.stop="handleDeleteFromMenu(item)">
|
|
|
- <text class="dropdown-icon">🗑</text>
|
|
|
- <text class="dropdown-text">删除供货商</text>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
-
|
|
|
- <!-- 主体内容区 -->
|
|
|
- <view class="item-header">
|
|
|
+ <!-- 第一行：名称、修改、地区 以及 右上角更多操作菜单 -->
|
|
|
+ <view class="item-top-row">
|
|
|
<!-- 供货商信息 -->
|
|
|
<view class="title-section" @click.stop="nameModify(item)">
|
|
|
<!-- 地区标签 -->
|
|
|
@@ -53,6 +39,23 @@
|
|
|
<text class="edit-icon">✎</text>
|
|
|
</view>
|
|
|
|
|
|
+ <!-- 更多操作菜单 -->
|
|
|
+ <view class="more-menu-wrap" v-if="tabs[tabIndex].delStatus === 0">
|
|
|
+ <view class="more-trigger" @click.stop="toggleMenu(item)">
|
|
|
+ <text class="more-dots">•••</text>
|
|
|
+ </view>
|
|
|
+ <!-- 下拉菜单内容 -->
|
|
|
+ <view class="more-dropdown" v-if="activeMenuId === item.id">
|
|
|
+ <view class="dropdown-item" @click.stop="handleDeleteFromMenu(item)">
|
|
|
+ <text class="dropdown-icon">🗑</text>
|
|
|
+ <text class="dropdown-text">删除供货商</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 第二行：核心操作按钮 -->
|
|
|
+ <view class="item-action-row">
|
|
|
<!-- 操作按钮区（正常状态） -->
|
|
|
<view class="action-buttons" v-if="tabs[tabIndex].delStatus === 0">
|
|
|
<view class="action-btn search-btn" @click.stop="goToSearchDebt(item)">搜索</view>
|
|
|
@@ -412,103 +415,18 @@ export default {
|
|
|
border-radius: 16upx;
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
- padding: 44upx 24upx 24upx; // 顶部预留出充裕空间，增加与下方按钮的绝对间距
|
|
|
+ padding: 30upx 24upx; // 恢复清爽自然的四周 padding
|
|
|
box-shadow: 0 4upx 16upx rgba(0, 0, 0, 0.03);
|
|
|
position: relative;
|
|
|
|
|
|
- // ========== 右上角更多操作菜单 ==========
|
|
|
- .more-menu-wrap {
|
|
|
- position: absolute;
|
|
|
- top: 8upx;
|
|
|
- right: 12upx;
|
|
|
- z-index: 100;
|
|
|
-
|
|
|
- .more-trigger {
|
|
|
- padding: 8upx 16upx; // 缩小点击热区并精准定位
|
|
|
- cursor: pointer;
|
|
|
-
|
|
|
- .more-dots {
|
|
|
- font-size: 26upx; // 缩小更多图标尺寸
|
|
|
- color: #b8b8b8; // 更加温和低调的颜色
|
|
|
- font-weight: bold;
|
|
|
- line-height: 1;
|
|
|
- letter-spacing: 2upx;
|
|
|
- }
|
|
|
-
|
|
|
- &:active {
|
|
|
- opacity: 0.6;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .more-dropdown {
|
|
|
- position: absolute;
|
|
|
- top: 52upx; // 配合缩小的触发器微调高度
|
|
|
- right: 16upx;
|
|
|
- background-color: #ffffff;
|
|
|
- box-shadow: 0 4upx 24upx rgba(0, 0, 0, 0.12);
|
|
|
- border-radius: 12upx;
|
|
|
- padding: 8upx 0;
|
|
|
- min-width: 220upx;
|
|
|
- border: 1upx solid #ebeef5;
|
|
|
- z-index: 101;
|
|
|
-
|
|
|
- &::before {
|
|
|
- content: "";
|
|
|
- position: absolute;
|
|
|
- top: -10upx;
|
|
|
- right: 16upx;
|
|
|
- border-left: 10upx solid transparent;
|
|
|
- border-right: 10upx solid transparent;
|
|
|
- border-bottom: 10upx solid #ffffff;
|
|
|
- }
|
|
|
-
|
|
|
- &::after {
|
|
|
- content: "";
|
|
|
- position: absolute;
|
|
|
- top: -12upx;
|
|
|
- right: 16upx;
|
|
|
- border-left: 11upx solid transparent;
|
|
|
- border-right: 11upx solid transparent;
|
|
|
- border-bottom: 11upx solid #ebeef5;
|
|
|
- z-index: -1;
|
|
|
- }
|
|
|
-
|
|
|
- .dropdown-item {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- padding: 20upx 24upx;
|
|
|
- cursor: pointer;
|
|
|
- transition: background-color 0.2s ease;
|
|
|
-
|
|
|
- &:active {
|
|
|
- background-color: #ffeef0;
|
|
|
-
|
|
|
- .dropdown-text, .dropdown-icon {
|
|
|
- color: #ff4d4f;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .dropdown-icon {
|
|
|
- font-size: 26upx;
|
|
|
- color: #999;
|
|
|
- margin-right: 12upx;
|
|
|
- }
|
|
|
-
|
|
|
- .dropdown-text {
|
|
|
- font-size: 26upx;
|
|
|
- color: #555;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- // ========== 头部信息和核心按钮 ==========
|
|
|
- .item-header {
|
|
|
+ // ========== 第一行：信息与更多菜单 ==========
|
|
|
+ .item-top-row {
|
|
|
display: flex;
|
|
|
flex-direction: row;
|
|
|
align-items: center;
|
|
|
justify-content: space-between;
|
|
|
- margin-top: 24upx; // 显著增加与右上角更多触发器的垂直距离，防止误触
|
|
|
+ width: 100%;
|
|
|
+ position: relative;
|
|
|
|
|
|
// 供货商信息
|
|
|
.title-section {
|
|
|
@@ -517,14 +435,14 @@ export default {
|
|
|
flex-direction: row;
|
|
|
align-items: center;
|
|
|
flex-wrap: wrap;
|
|
|
- padding-right: 10upx;
|
|
|
+ padding-right: 20upx;
|
|
|
|
|
|
.store-title {
|
|
|
font-size: 30upx;
|
|
|
font-weight: bold;
|
|
|
color: #222;
|
|
|
cursor: pointer;
|
|
|
- max-width: 280upx;
|
|
|
+ max-width: 320upx; // 拓宽名字的最大显示宽度
|
|
|
word-break: break-word;
|
|
|
white-space: normal;
|
|
|
}
|
|
|
@@ -544,8 +462,7 @@ export default {
|
|
|
font-weight: bold;
|
|
|
display: inline-block;
|
|
|
cursor: pointer;
|
|
|
- margin-top: 4upx;
|
|
|
- margin-right: 12upx; // 移至名字前方后，增加右侧与名字的间隔
|
|
|
+ margin-right: 12upx; // 增加右侧与名字的间隔
|
|
|
|
|
|
&.badge-local {
|
|
|
background-color: rgba(51, 133, 255, 0.1);
|
|
|
@@ -559,6 +476,109 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
|
|
|
+ // 更多操作菜单
|
|
|
+ .more-menu-wrap {
|
|
|
+ position: relative; // 移出绝对定位，融入 Flex 布局实现自适应完美对齐
|
|
|
+ z-index: 100;
|
|
|
+
|
|
|
+ .more-trigger {
|
|
|
+ width: 44upx;
|
|
|
+ height: 44upx;
|
|
|
+ border-radius: 50%;
|
|
|
+ background-color: #f5f7f9;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ cursor: pointer;
|
|
|
+ transition: all 0.2s ease;
|
|
|
+
|
|
|
+ .more-dots {
|
|
|
+ font-size: 20upx; // 微缩三点尺寸
|
|
|
+ color: #b8b8b8; // 温和的颜色
|
|
|
+ font-weight: bold;
|
|
|
+ line-height: 1;
|
|
|
+ letter-spacing: 2upx;
|
|
|
+ margin-top: -6upx; // 纠正三点居中高度
|
|
|
+ }
|
|
|
+
|
|
|
+ &:active {
|
|
|
+ background-color: #eef1f6;
|
|
|
+ transform: scale(0.92);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .more-dropdown {
|
|
|
+ position: absolute;
|
|
|
+ top: 56upx;
|
|
|
+ right: 0;
|
|
|
+ background-color: #ffffff;
|
|
|
+ box-shadow: 0 4upx 24upx rgba(0, 0, 0, 0.12);
|
|
|
+ border-radius: 12upx;
|
|
|
+ padding: 8upx 0;
|
|
|
+ min-width: 220upx;
|
|
|
+ border: 1upx solid #ebeef5;
|
|
|
+ z-index: 101;
|
|
|
+
|
|
|
+ &::before {
|
|
|
+ content: "";
|
|
|
+ position: absolute;
|
|
|
+ top: -10upx;
|
|
|
+ right: 16upx;
|
|
|
+ border-left: 10upx solid transparent;
|
|
|
+ border-right: 10upx solid transparent;
|
|
|
+ border-bottom: 10upx solid #ffffff;
|
|
|
+ }
|
|
|
+
|
|
|
+ &::after {
|
|
|
+ content: "";
|
|
|
+ position: absolute;
|
|
|
+ top: -12upx;
|
|
|
+ right: 16upx;
|
|
|
+ border-left: 11upx solid transparent;
|
|
|
+ border-right: 11upx solid transparent;
|
|
|
+ border-bottom: 11upx solid #ebeef5;
|
|
|
+ z-index: -1;
|
|
|
+ }
|
|
|
+
|
|
|
+ .dropdown-item {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ padding: 20upx 24upx;
|
|
|
+ cursor: pointer;
|
|
|
+ transition: background-color 0.2s ease;
|
|
|
+
|
|
|
+ &:active {
|
|
|
+ background-color: #ffeef0;
|
|
|
+
|
|
|
+ .dropdown-text, .dropdown-icon {
|
|
|
+ color: #ff4d4f;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .dropdown-icon {
|
|
|
+ font-size: 26upx;
|
|
|
+ color: #999;
|
|
|
+ margin-right: 12upx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .dropdown-text {
|
|
|
+ font-size: 26upx;
|
|
|
+ color: #555;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // ========== 第二行：核心操作按钮行 ==========
|
|
|
+ .item-action-row {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: flex-end; // 按钮整体靠右对齐
|
|
|
+ margin-top: 24upx; // 增加了和第一行（名称行）的垂直间距，绝不重叠和误触
|
|
|
+ width: 100%;
|
|
|
+
|
|
|
// 核心操作按钮
|
|
|
.action-buttons {
|
|
|
display: flex;
|
|
|
@@ -572,9 +592,9 @@ export default {
|
|
|
font-size: 26upx; // 放大字号
|
|
|
color: white;
|
|
|
border-radius: 30upx;
|
|
|
- padding: 12upx 30upx; // 放大内边距
|
|
|
+ padding: 12upx 34upx; // 宽裕舒适的按钮内边距
|
|
|
cursor: pointer;
|
|
|
- margin-left: 16upx; // 增加按钮间距
|
|
|
+ margin-left: 50upx; // 增加按钮间距，设为 20upx（搜索按钮离采购远 20upx）
|
|
|
font-weight: bold; // 加粗字重
|
|
|
transition: all 0.2s ease;
|
|
|
|
