增加打印发货单功能，隐藏配送信息，删除腾讯云智能客服

manager/src/views/order/order/orderDetail.vue

@@ -21,6 +21,7 @@
             >收款</Button
           >
           <Button @click="orderLog" type="info" ghost>订单日志</Button>
+          <Button @click="printOrder" type="primary" ghost style="float:right;">打印发货单</Button>
         </div>
       </Card>
       <Card class="mt_10 clearfix">
@@ -444,6 +445,60 @@
         <Button @click="handelCancel">取消</Button>
       </div>
     </Modal>
+    <Modal v-model="printModal" width="530" @on-cancel="printCancel" >
+      <p slot="header" style="line-height:26px;height:26px;">
+        <span style="float: left;">打印发货单</span>
+        <Button size="small" style="margin-right:35px;float: right;padding-bottom: 2px;" @click="printHiddenInfo"><template v-if="printHiddenFlag">显示</template><template v-else>隐藏</template>敏感信息</Button>
+      </p>
+      <div style="max-height:500px;overflow-y:auto;overflow-x:hidden;">
+        <div id="printInfo">
+          <Row v-if="orderInfo.order.remark !== ''">
+            <Col span="24">
+                <p class="lineH30 f14">备注：{{ orderInfo.order.remark }}</p>
+              </Col>
+          </Row>
+          <Row>
+              <Col span="12">
+                <p class="lineH30 f14">收件人：{{ orderInfo.order.consigneeName }}</p>
+              </Col>
+              <Col span="12" v-if="orderInfo.order.consigneeMobile">
+                <p class="lineH30 f14" v-if="printHiddenFlag">手机号：{{ orderInfo.order.consigneeMobile.replace(/^(.{3})(?:\d+)(.{4})$/, "$1****$2")  }}</p>
+                <p class="lineH30 f14" v-else>手机号：{{ orderInfo.order.consigneeMobile  }}</p>
+              </Col>
+          </Row>
+          <Row>
+              <Col span="24">
+                <p class="lineH30 f14">收货地址：{{ orderInfo.order.consigneeAddressPath }}{{ orderInfo.order.consigneeDetail }}</p>
+              </Col>
+          </Row>
+          <Row>
+              <Col span="24">
+                <p class="printgoodtitle">商品信息</p>
+                <div class="printgoodinfo">
+                  <div v-for="(item,index) in orderInfo.orderItems" :key="index" class="printgooditem">
+                    <div class="printgoodname">
+                      <p>{{item.goodsName}}</p>
+                      <div class="printgoodguid">
+                        <span v-for="(itemchild, keychild) in JSON.parse(item.specs)" :key="keychild">
+                          <span class="printgoodguiditem" v-if="keychild != 'images'">
+                            {{ keychild }} : {{ itemchild }}
+                          </span>
+                        </span>
+                      </div>
+                    </div>
+                    <span class="printgoodnumber">数量：{{item.num}}</span>
+                  </div>
+                </div>
+              </Col>
+          </Row>
+        </div>
+      </div>
+      
+      <div slot="footer" style="text-align: right">
+        <Button @click="printModal = false">关闭</Button>
+        <Button type="primary" v-print="printInfoObj">打印发货单</Button>
+      </div>
+    </Modal>
   </div>
 </template>
 
@@ -460,6 +515,12 @@ export default {
   },
   data() {
     return {
+      printHiddenFlag:false,//隐藏信息
+      printInfoObj:{
+        id: "printInfo",//要打印的id名 无#号
+        popTitle:'&nbsp;',//页眉标题 默认浏览器标题 空字符串时显示undefined 使用html语言
+        extraHead:'',//头部文字 默认空
+      },
       loading: false, //加载表格
       submitLoading: false, // 添加或编辑提交状态
       addr: "", //地区
@@ -513,6 +574,7 @@ export default {
         reason: [{ required: true, message: "取消原因不能为空", trigger: "blur" }],
       },
       addressModal: false, //弹出修改收件信息框
+      printModal:false,
       //收件地址表单
       addressForm: {
         consigneeName: "",
@@ -722,6 +784,16 @@ export default {
     handelCancel() {
       this.orderLogModal = false;
     },
+    //打印发货单
+    printOrder(){
+      this.printModal = true;
+    },
+    printHiddenInfo(){
+      this.printHiddenFlag = !this.printHiddenFlag;
+    },
+    printCancel(){
+      // this.printHiddenFlag = false;
+    },
     //弹出修改收货地址框
     editAddress() {
       this.addressModal = true;
@@ -762,6 +834,9 @@ export default {
 };
 </script>
 <style lang="scss">
+.lineH30{
+  line-height: 30px;
+}
 .order-log-div {
   line-height: 30px;
   overflow-y: scroll;
@@ -857,4 +932,60 @@ export default {
     }
   }
 }
+.f14{
+  font-size: 14px;
+  color: #333;
+}
+.printgoodtitle{
+  font-size: 14px;
+  line-height: 1.5;
+  margin-top: 15px;
+  color: #333;
+}
+.printgoodinfo{
+  // font-size: 14px;
+  // background: #f2f2f2;
+  // border-bottom:2px solid #333 ;
+  padding: 10px;
+  overflow: hidden;
+  color: #333;
+  .printgooditem{
+    border-bottom: 1px solid #e8eaec;
+    display: flex;
+    align-items: flex-start;
+    overflow: hidden;
+    line-height: 30px;
+    margin-bottom: 10px;
+    padding-bottom: 10px;
+    .printgoodname{
+      flex: 1;
+      overflow: hidden;
+      .printgoodguid{
+        font-size: 12px;
+        color:#999999;
+        line-height:1.5;
+        .printgoodguiditem{
+          margin-right: 10px;
+        }
+      }
+    }
+    .printgoodprice{
+      width: 135px;
+      margin-left: 15px;
+    }
+    .printgoodnumber{
+      width: 85px;
+      margin-left: 15px;
+    }
+  }
+}
+@media print {
+  @page{
+    size:  auto;
+    margin: 3mm;
+  }
+  html,body{
+    height:inherit;
+  }
+}
 </style>