Преглед изворни кода

Merge branch 'redesign‌-260706' of git.huaml.com:zhh/front-end into redesign‌-260706

shizhongqi пре 2 дана
родитељ
комит
43ac752bf1

+ 168 - 169
hdApp/src/admin/goods/manage.vue

@@ -18,21 +18,23 @@
     <view v-if="activeType === 'goods'" class="panel">
       <view class="search-row">
         <button class="admin-button-com middle small-btn blue" @click="changeSearchType">
-          <text>{{ searchTypeLabel }}</text>
-          <zui-svg-icon class="search-type-icon" icon="general-switch" :width="14" :height="14" color="#fff" />
+          <view class="small-btn-inner">
+            <text class="small-btn-text">{{ searchTypeLabel }}</text>
+            <zui-svg-icon class="search-type-icon" icon="general-switch" :width="14" :height="14" color="#fff" />
+          </view>
         </button>
-        <view class="search-box has-search-btn">
+        <view class="search-box">
           <text class="search-icon">⌕</text>
           <input v-model="searchText" class="search-input" placeholder="请输入" confirm-type="search" @confirm="searchGoods" />
-          <button class="admin-button-com middle blue search-btn" @click="searchGoods">搜索</button>
         </view>
+        <button class="admin-button-com middle blue add-btn" @click="addCurrent">添花束</button>
       </view>
 
       <view class="filter-row">
         <view class="filter-tabs">
-          <view class="filter-tab" :class="{ active: priceType === -1 }" @click="switchPriceTab(-1)">全部</view>
-          <view class="filter-tab" :class="{ active: priceType === 0 }" @click="switchPriceTab(0)">无价</view>
-          <view class="filter-tab" :class="{ active: priceType === 1 }" @click="switchPriceTab(1)">有价</view>
+          <button class="filter-chip" :class="{ active: priceType === -1 }" @click="switchPriceTab(-1)">全部</button>
+          <button class="filter-chip" :class="{ active: priceType === 0 }" @click="switchPriceTab(0)">无价</button>
+          <button class="filter-chip" :class="{ active: priceType === 1 }" @click="switchPriceTab(1)">有价</button>
         </view>
         <view class="action-btns">
           <button class="admin-button-com middle blue tool-btn" @click="openFilterPanel"> <zui-svg-icon class="tool-btn-icon" icon="general-filter" :width="14" :height="14" color="#fff" />筛选</button>
@@ -45,22 +47,16 @@
       </view>
 
       <view class="content-area">
-        <scroll-view scroll-y class="category-list">
+        <scroll-view scroll-y scroll-with-animation class="tab-view">
           <view
             v-for="(item, index) in tabbar"
             :key="index"
-            class="category-item"
+            class="tab-bar-item"
             :class="{ active: currentTab === index }"
+            :data-current="index"
             @tap.stop="swichTab(index, item)"
           >
-            <!-- 花束分类图标:与 categoryV2 一致取 img,无图时不占位以免侧栏文字错位 -->
-            <image
-              v-if="getCategoryIconSrc(item)"
-              class="category-icon"
-              :src="getCategoryIconSrc(item)"
-              mode="aspectFill"
-            />
-            <text>{{ item.categoryName || '' }}</text>
+            <text class="tab-bar-text">{{ item.categoryName || '' }}</text>
           </view>
         </scroll-view>
 
@@ -114,57 +110,39 @@
       </view>
     </view>
 
-    <view v-else class="panel">
-      <!-- 已开通批发店:进入花材页仅展示引导,不加载零售端花材列表 -->
-      <view v-if="pfItemLocked" class="pf-item-tip-panel">
-        <view class="pf-item-tip-card">
-          <text class="pf-item-tip-text">请到批发端修改花材</text>
-          <view class="pf-item-tip-actions">
-            <button class="admin-button-com middle default pf-tip-btn" @click="switchType('goods')">返回花束</button>
-            <button class="admin-button-com middle blue pf-tip-btn" @click="goToPfMiniProgram">去批发端</button>
-          </view>
-        </view>
-      </view>
-
-      <block v-else>
+    <view v-else class="panel item-panel">
       <view class="search-row">
-        <button class="admin-button-com middle blue image-class-btn" @click="selectFlowerNumFn">图片分类</button>
+        <button class="admin-button-com middle blue image-class-btn" @click="selectFlowerNumFn">图片筛选</button>
         <view class="search-box">
           <text class="search-icon">⌕</text>
-          <input v-model="globalPy" class="search-input" placeholder="请输入/搜索商品名称" confirm-type="search" @confirm="searchItem" />
+          <input v-model="globalPy" class="search-input" placeholder="请输入" confirm-type="search" @confirm="searchItem" />
         </view>
-        <button class="admin-button-com middle blue search-btn" @click="searchItem">搜索</button>
+        <!-- 锁定时仍展示,由蒙板挡住点击,与下方花材列表一致 -->
+        <button class="admin-button-com middle blue add-btn" @click="addCurrent">添花材</button>
       </view>
 
       <view class="filter-row">
-        <view class="filter-tabs item-filter-tabs">
-          <view class="filter-tab" :class="{ active: globalLookStock === 0 }" @click="changeHasStock(0)">全部</view>
-          <view class="filter-tab" :class="{ active: globalLookStock === 1 }" @click="changeHasStock(1)">有库存</view>
-          <view class="filter-tab" :class="{ active: globalLookStock === 2 }" @click="changeHasStock(2)">没库存</view>
+        <view class="filter-tabs">
+          <button class="filter-chip" :class="{ active: globalLookStock === 0 }" @click="changeHasStock(0)">全部</button>
+          <button class="filter-chip" :class="{ active: globalLookStock === 1 }" @click="changeHasStock(1)">有库存</button>
+          <button class="filter-chip" :class="{ active: globalLookStock === 2 }" @click="changeHasStock(2)">没库存</button>
         </view>
         <view class="action-btns">
-          <button class="admin-button-com middle blue tool-btn tool-btn--wide" @click="selectFlowerNumFn"><zui-svg-icon class="tool-btn-icon" icon="general-filter" :width="14" :height="14" color="#fff" />筛选</button>
           <button class="admin-button-com middle blue tool-btn" @click="refreshItem"><zui-svg-icon class="tool-btn-icon" icon="general-refresh" :width="14" :height="14" color="#fff" />刷新</button>
         </view>
       </view>
 
       <view class="content-area scroll-middle_bx">
-        <scroll-view scroll-y scroll-with-animation class="category-list tab-view">
+        <scroll-view scroll-y scroll-with-animation class="tab-view">
           <view
             v-for="(item, index) in globalClassData"
             :key="index"
-            class="category-item tab-bar-item"
+            class="tab-bar-item"
             :class="{ active: globalClassIndex === index }"
+            :data-current="index"
             @tap.stop="globalSwitchClass(index, item)"
           >
-            <!-- 花材分类图标:优先 smallCover,其次 cover,与分类管理页展示字段对齐 -->
-            <image
-              v-if="getCategoryIconSrc(item)"
-              class="category-icon"
-              :src="getCategoryIconSrc(item)"
-              mode="aspectFill"
-            />
-            <text>{{ item.name || '' }}</text>
+            <text class="tab-bar-text">{{ item.name || '' }}</text>
           </view>
         </scroll-view>
 
@@ -267,14 +245,23 @@
           <app-wrapper-empty v-else title="暂无花材" :is-empty="$util.isEmpty(globalItemData)" />
         </scroll-view>
       </view>
-      </block>
-    </view>
 
-    <button
-      v-if="!(activeType === 'item' && pfItemLocked)"
-      class="admin-button-com big blue footer-btn"
-      @click="addCurrent"
-    >{{ activeType === 'goods' ? '新增花束' : '新增花材' }}</button>
+      <!-- 已开通批发店:底下仍展示花材,中间蒙板引导去批发端维护 -->
+      <view
+        v-if="pfItemLocked"
+        class="pf-item-tip-mask"
+        @touchmove.stop.prevent
+        @click.stop
+      >
+        <view class="pf-item-tip-card" @click.stop>
+          <text class="pf-item-tip-text">请到批发端修改</text>
+          <view class="pf-item-tip-actions">
+            <button class="admin-button-com middle default pf-tip-btn" @click="switchType('goods')">返回花束栏</button>
+            <button class="admin-button-com middle blue pf-tip-btn" @click="goToPfMiniProgram">去批发端</button>
+          </view>
+        </view>
+      </view>
+    </view>
 
     <view v-if="showFilterPanel" class="filter-overlay" @click="closeFilterPanel">
       <view class="filter-panel" @click.stop>
@@ -319,7 +306,7 @@
       </view>
     </view>
 
-    <!-- 花材引导已改为页内居中提示(pfItemLocked),不再使用弹框 -->
+    <!-- 花材引导:pfItemLocked 时蒙板盖在列表上,不再使用弹框 -->
 
     <modal-module :show="printLabelShow" @click="dialogInputConfirm" :maskClosable="true" title="数量" padding="30rpx 30rpx">
       <template v-slot:content>
@@ -527,7 +514,7 @@ export default {
       this.getAppIdList = res.data
     })
     this.getCategoryData()
-    // 深链直接进花材时走同一套切换逻辑(已开通批发店则页内引导)
+    // 深链直接进花材时走同一套切换逻辑(已开通批发店则列表+蒙板引导)
     if (options && options.type === "item") {
       this.switchType("item")
     }
@@ -543,29 +530,20 @@ export default {
     }
   },
   methods: {
-    /**
-     * 解析侧栏分类图标地址。
-     * 花束分类用 img;花材分类优先 smallCover,其次 cover。
-     * @param {Object} item 分类项
-     * @returns {string} 图标完整地址,无图返回空字符串(模板不渲染 image)
-     */
-    getCategoryIconSrc(item) {
-      if (!item) return ""
-      return item.img || item.smallCover || item.cover || ""
-    },
     /**
      * 切换花束 / 花材面板。
-     * 已开通花材批发店(pfShopId>0)时仍进入花材页,但锁定为页内引导(不加载零售花材)
-     * 未开通时切换并按需懒加载花材数据。
+     * 已开通花材批发店(pfShopId>0)时仍进入花材页并加载列表,再用蒙板引导去批发端;
+     * 未开通时正常切换并按需懒加载花材数据。
      * @param {string} type goods | item
      */
     switchType(type) {
       if (type === this.activeType) return
       if (type === "item") {
         this.activeType = "item"
-        // 零售店已绑定批发店:花材应在批发端维护,页内提示并引导跳转销花宝
+        // 零售店已绑定批发店:底下照常展示花材,蒙板提示去批发端维护
         if (Number(this.getMyShopInfo && this.getMyShopInfo.pfShopId) > 0) {
           this.pfItemLocked = true
+          this.ensureItemLoaded()
           return
         }
         this.pfItemLocked = false
@@ -1311,25 +1289,34 @@ page {
   flex-direction: column;
 }
 
-/* 已开通批发店时的花材页内引导:居中卡片,替代原弹框 */
-.pf-item-tip-panel {
-  flex: 1;
+.item-panel {
+  position: relative;
+}
+
+/* 批发店锁定:半透明蒙板盖住花材操作区;卡片宽度缩 1/4,高度(内边距/字号)保持原样 */
+.pf-item-tip-mask {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  z-index: 20;
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 40upx 48upx;
   box-sizing: border-box;
-  background: #f5f6f8;
+  background: rgba(0, 0, 0, 0.45);
 }
 
 .pf-item-tip-card {
-  width: 100%;
-  max-width: 620upx;
+  width: 75%;
+  max-width: 465upx;
   background: #fff;
   border-radius: 16upx;
-  padding: 56upx 40upx 40upx;
+  padding: 56upx 30upx 40upx;
   box-sizing: border-box;
-  box-shadow: 0 4upx 24upx rgba(0, 0, 0, 0.06);
+  box-shadow: 0 8upx 32upx rgba(0, 0, 0, 0.12);
 }
 
 .pf-item-tip-text {
@@ -1365,26 +1352,43 @@ page {
 
 .small-btn,
 .image-class-btn,
-.search-btn,
 .tool-btn {
   box-sizing: border-box;
   white-space: nowrap;
 }
 
-/* 名称/编号合并按钮:文字+切换图标同一行,宽度随内容伸缩 */
+/* 名称/编号合并按钮:内层 flex,保证文字与切换图标垂直居中 */
 .admin-button-com.middle.small-btn {
   width: auto;
   min-width: 120upx;
   height: 68upx;
   padding: 0 16upx;
+  line-height: 1;
   display: inline-flex;
   align-items: center;
   justify-content: center;
+  box-sizing: border-box;
+}
+
+.small-btn-inner {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+}
+
+.small-btn-text {
+  line-height: 1;
+  font-size: 26upx;
 }
 
 .search-type-icon {
   flex-shrink: 0;
   margin-left: 6upx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
 .image-class-btn {
@@ -1392,12 +1396,14 @@ page {
   font-size: 24upx;
 }
 
+/* 搜索框:图标与输入文字垂直居中 */
 .search-box {
   flex: 1;
-  height: 64upx;
+  height: 68upx;
   border: 2upx solid #e2e2e2;
   border-radius: 34upx;
   display: flex;
+  flex-direction: row;
   align-items: center;
   padding: 0 24upx;
   box-sizing: border-box;
@@ -1405,39 +1411,42 @@ page {
   margin-left: 8upx;
 }
 
-/* 内嵌搜索按钮时收紧右侧内边距,让按钮贴在圆角框内 */
-.search-box.has-search-btn {
-  padding-right: 6upx;
-}
-
 .search-icon {
-  font-size: 42upx;
+  font-size: 32upx;
+  line-height: 1;
   color: #8d8d8d;
   margin-right: 12upx;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  height: 100%;
 }
 
 .search-input {
   flex: 1;
-  height: 60upx;
+  height: 64upx;
+  line-height: 64upx;
   font-size: 26upx;
   color: #333;
+  padding: 0;
+  margin: 0;
+  background: transparent;
 }
 
-.search-btn {
-  width: 108upx;
-}
-
-/* 花束搜索框内的搜索按钮:压低高度以免撑破圆角输入框 */
-.search-box .search-btn {
-  height: 54upx;
-  padding-top: 0;
-  padding-bottom: 0;
+/* 搜索行右侧:添花束 / 添花材 — 高度对齐左侧按钮,与搜索框间隔 10upx */
+.admin-button-com.middle.add-btn {
+  width: auto;
+  min-width: 120upx;
+  height: 68upx;
+  line-height: 68upx;
+  padding: 0 18upx;
+  margin: 0 0 0 10upx;
   flex-shrink: 0;
+  font-size: 26upx;
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  font-size: 24upx;
-  border-radius: 26upx;
+  box-sizing: border-box;
 }
 
 .filter-row {
@@ -1451,44 +1460,49 @@ page {
 .filter-tabs {
   display: flex;
   align-items: center;
+  flex: 1;
+  min-width: 0;
+  margin-right: 16upx;
 }
 
-.filter-tab + .filter-tab {
-  margin-left: 50upx;
-}
-
-.item-filter-tabs .filter-tab + .filter-tab {
-  margin-left: 42upx;
+/* 左侧状态筛选:描边浅色按钮,与右侧实心绿按钮区分;高度与 tool-btn 一致 */
+.filter-chip {
+  height: 68upx;
+  padding: 0 18upx;
+  margin: 0;
+  font-size: 24upx;
+  line-height: 1;
+  color: #666;
+  background: #f5f6f8;
+  border: 2upx solid #e5e7eb;
+  border-radius: 8upx;
+  box-sizing: border-box;
+  white-space: nowrap;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
 }
 
-.filter-tab {
-  height: 56upx;
-  line-height: 56upx;
-  font-size: 26upx;
-  color: #111;
-  font-weight: 600;
-  position: relative;
-  white-space: nowrap;
+.filter-chip::after {
+  border: none;
 }
 
-.filter-tab.active {
-  color: #22a500;
+.filter-chip + .filter-chip {
+  margin-left: 12upx;
 }
 
-.filter-tab.active::after {
-  content: "";
-  position: absolute;
-  left: 0;
-  right: 0;
-  bottom: -4upx;
-  height: 4upx;
-  background: #22a500;
-  border-radius: 4upx;
+.filter-chip.active {
+  color: #09C567;
+  background: #eefaf3;
+  border-color: #09C567;
+  font-weight: 600;
 }
 
 .action-btns {
   display: flex;
   align-items: center;
+  flex-shrink: 0;
 }
 
 .action-btns > * + * {
@@ -1538,53 +1552,51 @@ page {
   overflow: hidden;
 }
 
-.category-list {
-  width: 202upx;
-  height: 100%;
-  flex-shrink: 0;
-  background: #fff;
-}
-
+/* 左侧分类栏:对齐 admin/item/list2.vue 的 tab-view */
 .tab-view {
+  width: 170upx;
+  height: 100%;
   flex-shrink: 0;
+  background-color: #f0f2f6;
 }
 
-.category-item {
+.tab-bar-item {
   position: relative;
-  min-height: 92upx;
-  padding: 18upx 10upx 18upx 30upx;
+  width: 170upx;
+  height: 90upx;
   box-sizing: border-box;
   display: flex;
   align-items: center;
-  color: #111;
-  font-size: 24upx;
-  font-weight: 600;
+  justify-content: center;
+  font-size: 26upx;
+  color: #444;
+  font-weight: 400;
 }
 
-.category-item.active {
-  color: #189b00;
+.tab-bar-item:last-child {
+  margin-bottom: 110upx;
+}
+
+.tab-bar-text {
+  text-align: center;
+  width: 100%;
+  padding: 0 8upx;
+  box-sizing: border-box;
 }
 
-.category-item.active::before {
+.tab-bar-item.active {
+  position: relative;
+  color: $mainColor;
+  font-size: 26upx;
+  background: #fff;
+}
+
+.tab-bar-item.active::before {
   content: "";
   position: absolute;
+  border-left: 8upx solid $mainColor;
+  height: 100%;
   left: 0;
-  top: 10upx;
-  bottom: 10upx;
-  width: 6upx;
-  border-radius: 6upx;
-  background: #ff5b22;
-}
-
-.category-icon {
-  width: 42upx;
-  height: 42upx;
-  border-radius: 10upx;
-  flex-shrink: 0;
-  margin-right: 12upx;
-  background: #f5f5f5;
-  display: block;
-  overflow: hidden;
 }
 
 .list-box {
@@ -1890,19 +1902,6 @@ page {
   font-weight: normal;
 }
 
-.footer-btn {
-  flex-shrink: 0;
-  margin: 14upx 18upx calc(14upx + env(safe-area-inset-bottom));
-  padding: 0;
-  height: 68upx;
-  line-height: 68upx;
-  border-radius: 6upx;
-  text-align: center;
-  color: #fff;
-  font-size: 30upx;
-  background: #09C567;
-}
-
 .bottom-space {
   height: 36upx;
 }

+ 1 - 1
hdApp/src/pagesPurchase/addCg.vue

@@ -3,7 +3,7 @@
 	<view class="billing_box_bg">
 		<view class="input-wrap" >
 			<view style="padding:0upx 0upx 0upx 0upx;margin-right:15upx;" >
-				<button class="admin-button-com middle blue" @click="selectFlowerNumFn()">图片分类</button>
+				<button class="admin-button-com middle blue" @click="selectFlowerNumFn()">图片筛选</button>
 			</view>
 			<view class="search-bar">
 				<app-search-module ref="globalSearchRef" v-model="globalPy" placeholder="这里搜索" @input="globalSearch" />

+ 1 - 1
hdApp/src/pagesPurchase/bookProduct.vue

@@ -19,7 +19,7 @@
 		</view>
 		<view class="input-wrap" >
 			<view style="padding:0upx 0upx 0upx 0upx;margin-right:10upx;" >
-				<button class="admin-button-com middle blue" @click="selectFlowerNumFn()">图片分类</button>
+				<button class="admin-button-com middle blue" @click="selectFlowerNumFn()">图片筛选</button>
 			</view>
 			<view class="search-bar">
 				<app-search-module v-model="py" placeholder="最少输二到三字搜索" @input="goSearchFn" />

+ 1 - 1
hdApp/src/pagesPurchase/bookProduct2.vue

@@ -19,7 +19,7 @@
 		</view>
 		<view class="input-wrap" >
 			<view style="padding:0upx 0upx 0upx 0upx;margin-right:10upx;" >
-				<button class="admin-button-com middle blue" @click="selectFlowerNumFn()">图片分类</button>
+				<button class="admin-button-com middle blue" @click="selectFlowerNumFn()">图片筛选</button>
 			</view>
 			<view class="search-bar">
 				<app-search-module v-model="py" placeholder="这里搜索" @input="goSearchFn" />

+ 1 - 1
hdApp/src/pagesPurchase/ghsProduct.vue

@@ -38,7 +38,7 @@
 
 		<view class="input-wrap" >
 			<view class="header-action-wrap header-action-wrap--left">
-				<button class="admin-button-com blue header-action-btn" @click="selectFlowerNumFn()">图片分类</button>
+				<button class="admin-button-com blue header-action-btn" @click="selectFlowerNumFn()">图片筛选</button>
 			</view>
 			<view class="search-bar">
 				<app-search-module v-model="py" placeholder="最少输二到三字搜索" placeholder-color="red" @input="goSearchFn" />

+ 1 - 1
hdApp/src/pagesPurchase/ghsProduct2.vue

@@ -20,7 +20,7 @@
 
 		<view class="input-wrap" >
 			<view style="padding:0upx 0upx 0upx 0upx;margin-right:10upx;" >
-				<button class="admin-button-com middle blue" @click="selectFlowerNumFn()">图片分类</button>
+				<button class="admin-button-com middle blue" @click="selectFlowerNumFn()">图片筛选</button>
 			</view>
 			<view class="search-bar">
 				<app-search-module v-model="py" placeholder="这里搜索" @input="goSearchFn" />