批发、花店附加费重收文字优化

ghsApp/src/pagesOrder/shMethod.vue

@@ -124,12 +124,12 @@
             </view>
           </tui-list-cell>
           <tui-list-cell class="line-cell" :hover="false" v-if="form.unMeet != 2">
-            <view class="tui-title">{{ form.unMeet == 1 ? '包装费' : '运费' }}</view>
+            <view class="tui-title">{{ unMeetFeeLabel }}</view>
             <input type="digit" v-model="form.unMeetFee" @focus="form.unMeetFee = ''" class="tui-input" placeholder="请填写金额" />
           </tui-list-cell>
-          <!-- 附加费重收：按自然日 或 按小时间隔（页面只展示小时） -->
+          <!-- 运费/包装费重收：文案随「不满条件」切换 -->
           <tui-list-cell class="line-cell" :hover="false" v-if="form.unMeet != 2">
-            <view class="tui-title">附加费重收</view>
+            <view class="tui-title">{{ unMeetFeeLabel }}重收</view>
             <view class="btn-group">
               <button
                 class="admin-button-com middle"
@@ -166,8 +166,8 @@
             v-if="form.unMeet != 2"
             style="padding: 0 30upx 20upx;"
           >
-            <text v-if="form.unMeetLockType == 0">按自然日：同一客户当天收过该附加费后，当日不再收取。</text>
-            <text v-else>按时间间隔：收过附加费后，需间隔填写的小时数才会再次收取（支持小数，如 0.5）</text>
+            <text v-if="form.unMeetLockType == 0">按自然日：同一客户当天收过该{{ unMeetFeeLabel }}后，当日不再收取。</text>
+            <text v-else>按时间间隔：收过{{ unMeetFeeLabel }}后，需间隔填写的小时数才会再次收取（支持小数，如 0.5）</text>
           </view>
         </block>
 
@@ -377,6 +377,13 @@ export default {
     };
   },
   computed: {
+    /**
+     * 不满条件对应的费用文案：收运费→运费，收包装费→包装费
+     * 用于金额标题、重收标题与说明提示
+     */
+    unMeetFeeLabel() {
+      return Number(this.form.unMeet) === 1 ? "包装费" : "运费";
+    },
     // 动态计算并按顺序值由小到大列出所有配送方式别名
     sortedMethodsText() {
       // 过滤掉已禁用的配送方式（status === 0）
@@ -803,7 +810,7 @@ export default {
   margin: 0 10upx;
 }
 
-/* 附加费重收说明 */
+/* 运费/包装费重收说明 */
 .section-tip {
   font-size: 24upx;
   color: #999999;

hdApp/src/admin/goods/categoryV2.vue

@@ -1,10 +1,10 @@
 <!--
   商品分类列表页（新版）
-  用途：花束/花材分类列表展示；花束编辑跳转 category-edit，花材在本页弹窗编辑；分类广告见独立页 category-ad
+  用途：花束/花材分类列表 + 分类广告三表编辑；花束编辑跳转 category-edit，花材在本页弹窗编辑；分类广告用组件不跳新页
 -->
 <template>
   <view class="page-container">
-    <!-- Tabs：花束 / 花材；分类广告已独立为 category-ad 页 -->
+    <!-- Tabs：花束 / 花材 / 分类广告（广告在本页组件内编辑） -->
     <view class="tabs">
       <view class="tab-item" :class="{active: currentTab === 0}" @click="switchTab(0)">
         <text>花束分类</text>
@@ -14,10 +14,18 @@
         <text>花材分类</text>
         <view class="tab-line" v-if="currentTab === 1"></view>
       </view>
+      <view class="tab-item" :class="{active: currentTab === 2}" @click="switchTab(2)">
+        <text>分类广告</text>
+        <view class="tab-line" v-if="currentTab === 2"></view>
+      </view>
     </view>
 
+    <!-- 分类广告：3 个广告位表格，组件内完成设置 -->
+    <category-ad-setting v-if="currentTab === 2" ref="categoryAdSetting" />
+
     <!-- 列表头部 -->
     <view
+      v-if="currentTab !== 2"
       class="list-header"
       :class="{ 'layout-item-class': currentTab === 1 }"
     >
@@ -29,6 +37,7 @@
 
     <!-- 分类列表：不用 scroll-view，避免小程序内点击事件被拦截 -->
     <view
+      v-if="currentTab !== 2"
       class="list-container"
       :class="{ 'layout-item-class': currentTab === 1 }"
     >
@@ -36,11 +45,17 @@
         <view
           class="list-item"
           :class="{'is-disabled': item.status != 1}"
-          v-for="(item, index) in filteredList"
-          :key="item.id || index"
+          v-for="item in filteredList"
+          :key="item.listKey"
         >
           <view class="col-name item-name">
-            <image :src="item.img" mode="aspectFit" class="cat-img"></image>
+            <!-- 花束分类名称只展示文字，去掉封面图标，避免挤占操作列 -->
+            <image
+              v-if="currentTab === 1 && item.img"
+              :src="item.img"
+              mode="aspectFit"
+              class="cat-img"
+            ></image>
             <text class="cat-text">{{ item.categoryName }}</text>
           </view>
 
@@ -55,10 +70,8 @@
             :data-pic-text-id="item.picTextId"
             @click.stop="selectPicText"
           >
+            <!-- 图文列只保留文字状态，去掉图标，整块可点 -->
             <view class="pic-tag" :class="item.picTextId > 0 ? 'is-set' : 'no-set'">
-              <view class="pic-icon-box">
-                <view class="pic-icon-inner"></view>
-              </view>
               <text>{{ item.picTextId > 0 ? '已设置' : '未设置' }}</text>
             </view>
           </view>
@@ -75,8 +88,8 @@
       </block>
     </view>
 
-    <!-- 底部操作栏 -->
-    <view class="bottom-toolbar">
+    <!-- 底部操作栏：分类广告 Tab 用组件自己的预览/保存栏 -->
+    <view class="bottom-toolbar" v-if="currentTab !== 2">
       <button
         class="toolbar-btn outline-btn"
         hover-class="none"
@@ -229,6 +242,7 @@
 <script>
 import AppWrapperEmpty from '@/components/app-wrapper-empty';
 import htzImageUpload from '@/components/htz-image-upload/htz-image-upload.vue';
+import CategoryAdSetting from '@/admin/goods/components/category-ad-setting.vue';
 import { mapGetters } from 'vuex';
 import { categoryListInfo, categoryDelB } from '@/api/goods';
 import { getAllItemClass, delClass, addClass, updateClass } from '@/api/item-class';
@@ -238,7 +252,8 @@ export default {
   name: 'categoryV2',
   components: {
     AppWrapperEmpty,
-    htzImageUpload
+    htzImageUpload,
+    CategoryAdSetting
   },
   data() {
     return {
@@ -278,10 +293,14 @@ export default {
     },
     /** 当前 Tab 对应分类列表，字段统一后供模板渲染 */
     filteredList() {
-      const source = this.currentTab === 1 ? this.itemClassList : this.bouquetList;
-      const list = (source || []).map((item) => (
-        this.currentTab === 1 ? this.normalizeItemClassRow(item) : this.normalizeBouquetRow(item)
-      ));
+      const tab = this.currentTab;
+      const source = tab === 1 ? this.itemClassList : this.bouquetList;
+      const list = (source || []).map((item, index) => {
+        const row = tab === 1 ? this.normalizeItemClassRow(item) : this.normalizeBouquetRow(item);
+        // 小程序 wx:key 只能绑 item 上的字段，表达式 item.id || index 编不出 wx:key
+        row.listKey = `${tab}-${row.id || index}`;
+        return row;
+      });
       return list.slice().sort((a, b) => {
         const aDisabled = a.status == 1 ? 0 : 1;
         const bDisabled = b.status == 1 ? 0 : 1;
@@ -304,13 +323,9 @@ export default {
   },
   onLoad(options) {
     if (options && options.tab !== undefined) {
-      // 仅保留花束(0)/花材(1)；旧链 tab=2（分类广告）改走独立页
-      const tab = parseInt(options.tab) || 0;
-      this.currentTab = tab === 1 ? 1 : 0;
-      if (parseInt(options.tab) === 2) {
-        uni.redirectTo({ url: '/admin/goods/category-ad' });
-        return;
-      }
+      // 0花束 1花材 2分类广告；广告在本页组件编辑，不再跳独立页
+      const tab = parseInt(options.tab, 10) || 0;
+      this.currentTab = tab === 1 || tab === 2 ? tab : 0;
     }
     this.uploadHeaders.token = uni.getStorageSync('token') || '';
     this.init();
@@ -324,13 +339,24 @@ export default {
     init() {
       this.loadCurrentTabList();
     },
-    /** 按当前 Tab 拉取对应表数据 */
+    /** 按当前 Tab 拉取对应表数据；广告 Tab 走组件 reload */
     loadCurrentTabList() {
+      if (this.currentTab === 2) {
+        return this.reloadCategoryAd();
+      }
       if (this.currentTab === 1) {
         return this.loadItemClassList();
       }
       return this.loadBouquetList();
     },
+    /** 下拉刷新时重拉广告；首次切 Tab 时组件尚未挂上，由组件 mounted 自行加载 */
+    reloadCategoryAd() {
+      const panel = this.$refs.categoryAdSetting;
+      if (panel && panel.reload) {
+        return panel.reload();
+      }
+      return Promise.resolve();
+    },
     /** 花束分类：xhCategory */
     loadBouquetList() {
       this.listLoading = true;
@@ -656,19 +682,19 @@ export default {
   }
 }
 
-.col-name { flex: 3; min-width: 0; text-align: left !important; }
-.col-num { flex: 1.5; flex-shrink: 0; }
-.col-pic { flex: 2; flex-shrink: 0; }
-.col-action { flex: 2; flex-shrink: 0; }
+.col-name { flex: 2.6; min-width: 0; text-align: left !important; }
+.col-num { flex: 1.4; flex-shrink: 0; }
+.col-pic { flex: 1.6; flex-shrink: 0; }
+.col-action { flex: 2.8; flex-shrink: 0; }
 
-/* 花材分类无商品数量、图文列，加宽名称与操作区 */
+/* 花材分类无商品数量、图文列，加宽名称与操作区便于点按 */
 .layout-item-class {
   .col-name {
-    flex: 4;
+    flex: 3.6;
   }
 
   .col-action {
-    flex: 2.2;
+    flex: 3;
   }
 }
 
@@ -714,14 +740,6 @@ export default {
         &.no-set,
         &.is-set {
           color: #d0d0d0;
-
-          .pic-icon-box {
-            border-color: #ddd;
-
-            .pic-icon-inner {
-              background: #ddd;
-            }
-          }
         }
       }
     }
@@ -771,40 +789,19 @@ export default {
       .pic-tag {
         display: flex;
         align-items: center;
-        font-size: 22upx;
-        padding: 4upx 10upx;
-        border-radius: 6upx;
+        justify-content: center;
+        min-height: 64upx;
+        padding: 8upx 12upx;
+        border-radius: 8upx;
+        font-size: 28upx;
+        font-weight: 600;
 
         &.no-set {
           color: #999;
-          .pic-icon-box {
-            border: 2upx solid #ccc;
-            .pic-icon-inner { background: #ccc; }
-          }
         }
 
         &.is-set {
           color: #52c41a;
-          .pic-icon-box {
-            border: 2upx solid #52c41a;
-            .pic-icon-inner { background: #52c41a; }
-          }
-        }
-
-        .pic-icon-box {
-          width: 24upx;
-          height: 20upx;
-          border-radius: 4upx;
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          margin-right: 8upx;
-
-          .pic-icon-inner {
-            width: 12upx;
-            height: 10upx;
-            clip-path: polygon(0 100%, 40% 40%, 60% 70%, 80% 20%, 100% 100%);
-          }
         }
       }
     }
@@ -813,7 +810,7 @@ export default {
       display: flex;
       justify-content: center;
       align-items: center;
-      font-size: 26upx;
+      font-size: 32upx;
       white-space: nowrap;
 
       .action-btn {
@@ -821,16 +818,16 @@ export default {
         align-items: center;
         justify-content: center;
         width: auto;
-        min-width: 0;
+        min-width: 72upx;
         height: auto;
-        min-height: 0;
-        padding: 0;
+        min-height: 72upx;
+        padding: 12upx 10upx;
         margin: 0;
         background: transparent;
         border: none;
         line-height: 1.4;
-        font-size: 26upx;
-        font-weight: normal;
+        font-size: 32upx;
+        font-weight: 600;
       }
 
       .action-btn::after {
@@ -842,7 +839,7 @@ export default {
       }
       .action-divider {
         color: #eee;
-        margin: 0 16upx;
+        margin: 0 8upx;
       }
       .delete-btn {
         color: #FF3B30;

hdApp/src/admin/home/psMethod.vue

@@ -153,12 +153,12 @@
             </view>
           </tui-list-cell>
           <tui-list-cell class="line-cell" :hover="false" v-if="form.unMeet != 1">
-            <view class="tui-title">{{ form.unMeet == 2 ? '包装费' : '运费' }}</view>
+            <view class="tui-title">{{ unMeetFeeLabel }}</view>
             <input type="digit" v-model="form.unMeetFee" @focus="form.unMeetFee = ''" class="tui-input" placeholder="请填写金额" />
           </tui-list-cell>
-          <!-- 附加费重收：自然日锁一天 或 按小时间隔冷却后再收 -->
+          <!-- 运费/包装费重收：文案随「不满条件」切换（hd：0运费 2包装费 1不能买） -->
           <tui-list-cell class="line-cell" :hover="false" v-if="form.unMeet != 1">
-            <view class="tui-title">附加费重收</view>
+            <view class="tui-title">{{ unMeetFeeLabel }}重收</view>
             <view class="btn-group">
               <button
                 class="admin-button-com middle"
@@ -195,8 +195,8 @@
             v-if="form.unMeet != 1"
             style="padding: 0 30upx 20upx;"
           >
-            <text v-if="form.unMeetLockType == 0">按自然日：同一客户当天收过该附加费后，当日不再收取。</text>
-            <text v-else>按时间间隔：收过附加费后，需间隔填写的小时数才会再次收取（支持小数，如 0.5）</text>
+            <text v-if="form.unMeetLockType == 0">按自然日：同一客户当天收过该{{ unMeetFeeLabel }}后，当日不再收取。</text>
+            <text v-else>按时间间隔：收过{{ unMeetFeeLabel }}后，需间隔填写的小时数才会再次收取（支持小数，如 0.5）</text>
           </view>
         </block>
 
@@ -442,6 +442,13 @@ export default {
     };
   },
   computed: {
+    /**
+     * 不满条件对应的费用文案（hd：0 收运费，2 收包装费，1 不能买）
+     * 用于金额标题、重收标题与说明提示
+     */
+    unMeetFeeLabel() {
+      return Number(this.form.unMeet) === 2 ? "包装费" : "运费";
+    },
     // 动态计算并按顺序值由小到大列出所有配送方式别名
     sortedMethodsText() {
       // 过滤掉已禁用的配送方式（status === 0）