打印标签

hdApp/src/admin/goods/list.vue

@@ -147,6 +147,40 @@
       </view>
     </view>
 
+    <!-- 打标签弹框 -->
+    <view v-if="showPrintModal" class="print-modal-overlay" @click="closePrintModal">
+      <view class="print-modal-content" @click.stop>
+        <view class="print-modal-header">
+          <text class="print-modal-title">打印标签</text>
+          <text class="print-modal-close" @click="closePrintModal">×</text>
+        </view>
+        
+        <view class="print-modal-body">
+          <view class="print-modal-item">
+            <text class="print-modal-label">商品名称：</text>
+            <text class="print-modal-value">{{ currentPrintItem.name }}</text>
+          </view>
+          
+          <view class="print-modal-item">
+            <text class="print-modal-label">打印数量：</text>
+            <input 
+              v-model.number="printQuantity" 
+              type="number" 
+              class="print-modal-input" 
+              placeholder="请输入打印数量"
+              min="1"
+              @focus="clearInput"
+            />
+          </view>
+        </view>
+        
+        <view class="print-modal-footer">
+          <button class="print-modal-btn cancel-btn" @click="closePrintModal">取消</button>
+          <button class="print-modal-btn confirm-btn" @click="confirmPrint">打印</button>
+        </view>
+      </view>
+    </view>
+
   </view>
 </template>
 <script>
@@ -176,6 +210,10 @@ export default {
       priceType:-1,// 0 没价，1 有价 
       // 新增筛选相关数据
       showFilterPanel: false,
+      // 打标签弹框相关数据
+      showPrintModal: false,
+      currentPrintItem: {},
+      printQuantity: '',
       // 价格筛选已移至顶部标签页
       stockOptions: [
         { label: '有库存', value: 1 },
@@ -272,25 +310,41 @@ export default {
       this.getGoodsList();
     },
 
-    // 保留原有方法以保持兼容性（暂时保留）
-		// 兼容保留：旧筛选弹窗相关方法已不再使用
-		printLabel(item){
-			let that=this;
-			let doList = ['打1个标签', '打2个标签','打5个标签', '打10个标签']
-			let doNum = [1,2,5,10,20]
-			uni.showActionSheet({
-				itemList: doList,
-				success: function (respond) {
-					let index = respond.tapIndex
-          let currentNum = Number(doNum[index])
-          print({id:item.id,num:currentNum}).then(res=>{
-            if(res.code == 1){
-              that.$msg(res.msg)
-            }
-          })
-				}
-			})
-		},
+    // 打标签弹框相关方法
+    printLabel(item){
+      this.currentPrintItem = item;
+      this.printQuantity = '';
+      this.showPrintModal = true;
+    },
+
+    closePrintModal(){
+      this.showPrintModal = false;
+      this.currentPrintItem = {};
+      this.printQuantity = '';
+    },
+
+    confirmPrint(){
+      if (!this.printQuantity || this.printQuantity <= 0) {
+        this.$msg('请输入有效的打印数量');
+        return;
+      }
+      
+      let that = this;
+      print({id: this.currentPrintItem.id, num: this.printQuantity}).then(res => {
+        if(res.code == 1){
+          that.$msg(res.msg);
+          that.closePrintModal();
+        } else {
+          that.$msg(res.msg || '打印失败');
+        }
+      }).catch(err => {
+        that.$msg('打印请求失败');
+      });
+    },
+
+    clearInput(){
+      this.printQuantity = '';
+    },
     getStockChange(item){
       this.$util.pageTo({url: "/admin/goods/stockChange?id="+item.id+'&name='+item.name})
     },
@@ -765,4 +819,154 @@ page {
     color: #fff;
   }
 }
+
+/* 打标签弹框样式 */
+.print-modal-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+  z-index: 10000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.print-modal-content {
+  background-color: #fff;
+  border-radius: 20upx;
+  width: 80%;
+  max-width: 600upx;
+  animation: scaleIn 0.3s ease-out;
+  box-shadow: 0 8upx 24upx rgba(0, 0, 0, 0.15);
+}
+
+@keyframes scaleIn {
+  from {
+    opacity: 0;
+    transform: scale(0.8);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+.print-modal-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 24upx 24upx;
+  border-bottom: 1upx solid #f0f0f0;
+}
+
+.print-modal-title {
+  font-size: 32upx;
+  font-weight: 600;
+  color: #333;
+}
+
+.print-modal-close {
+  font-size: 40upx;
+  color: #999;
+  font-weight: 300;
+  line-height: 1;
+  cursor: pointer;
+  transition: color 0.3s ease;
+  
+  &:active {
+    color: #333;
+  }
+}
+
+.print-modal-body {
+  padding: 30upx 24upx;
+}
+
+.print-modal-item {
+  display: flex;
+  align-items: center;
+  margin-bottom: 24upx;
+  
+  &:last-child {
+    margin-bottom: 0;
+  }
+}
+
+.print-modal-label {
+  font-size: 28upx;
+  color: #666;
+  font-weight: 500;
+  min-width: 140upx;
+}
+
+.print-modal-value {
+  font-size: 28upx;
+  color: #333;
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.print-modal-input {
+  flex: 1;
+  padding: 0;
+  height: 80upx;
+  border: 2upx solid #e0e0e0;
+  border-radius: 8upx;
+  font-size: 36upx;
+  color: #333;
+  background-color: #fafafa;
+  transition: border-color 0.3s ease;
+  text-align: center;
+  line-height: 80upx;
+  
+  &::placeholder {
+    text-align: center;
+    color: #ccc;
+  }
+  
+  &:focus {
+    border-color: #09C567;
+    background-color: #fff;
+  }
+}
+
+.print-modal-footer {
+  display: flex;
+  gap: 16upx;
+  padding: 24upx 24upx;
+  border-top: 1upx solid #f0f0f0;
+}
+
+.print-modal-btn {
+  flex: 1;
+  padding: 16upx 0;
+  border-radius: 12upx;
+  font-size: 28upx;
+  border: none;
+  font-weight: 600;
+  transition: all 0.3s ease;
+  
+  &.cancel-btn {
+    background-color: #f5f5f5;
+    color: #666;
+    
+    &:active {
+      background-color: #e8e8e8;
+    }
+  }
+  
+  &.confirm-btn {
+    background-color: #09C567;
+    color: #fff;
+    
+    &:active {
+      background-color: #07A850;
+    }
+  }
+}
 </style>