feat: ✨ 集成顺丰平台，发货，查询物流，打印面单

manager/src/views/sys/setting-manage/setting/LOGISTICS_SETTING.vue

@@ -5,6 +5,7 @@
         <RadioGroup v-model="formValidate.type" type="button">
           <Radio label="KDNIAO">快递鸟</Radio>
           <Radio label="KUAIDI100">快递100</Radio>
+          <Radio label="SHUNFENG">顺丰</Radio>
         </RadioGroup>
       </FormItem>
       <FormItem v-if="formValidate.type === 'KDNIAO'" label="快递鸟 商户ID" prop="kdniaoEbusinessID">
@@ -20,6 +21,24 @@
       <FormItem v-if="formValidate.type === 'KUAIDI100'" label="快递100 Key" prop="kuaidi100Key">
         <Input class="label-appkey" v-model="formValidate.kuaidi100Key" />
       </FormItem>
+      <div v-if="formValidate.type === 'SHUNFENG'">
+        <FormItem label="顾客编码" prop="clientCode">
+          <Input v-model="formValidate.clientCode" />
+        </FormItem>
+        <FormItem label="校验码" prop="checkWord">
+          <Input v-model="formValidate.checkWord" />
+        </FormItem>
+        <FormItem label="请求地址" prop="callUrl">
+          <Input class="label-appkey" v-model="formValidate.callUrl" />
+        </FormItem>
+
+        <FormItem label="打印模板" prop="templateCode">
+          <Input class="label-appkey" v-model="formValidate.templateCode" />
+        </FormItem>
+        <FormItem label="月结号" prop="monthlyCardNo">
+          <Input class="label-appkey" v-model="formValidate.monthlyCardNo" />
+        </FormItem>
+      </div>
       <div class="label-btns">
         <Button type="primary" @click="submit('formValidate')">保存</Button>
       </div>
@@ -38,7 +57,8 @@ export default {
         kdniaoEbusinessID: "",
         kdniaoAppKey: "",
         kuaidi100Customer: "",
-        kuaidi100Key: "" ,},
+        kuaidi100Key: "",
+      },
     };
   },
   props: ["res", 'type'],
@@ -83,15 +103,17 @@ export default {
 
 <style lang="scss" scoped>
 @import "./style.scss";
+
 .label-item {
   display: flex;
 }
+
 /deep/ .ivu-input {
   width: 300px !important;
   margin: 0 10px;
 }
+
 .ivu-input-wrapper {
   width: 300px;
   margin-right: 10px;
-}
+}</style>
-</style>

seller/src/api/logistics.js

@@ -4,6 +4,7 @@ import {
   postRequest,
   putRequest,
   deleteRequest,
+  getRequestHasHeader,
   importRequest,
   getRequestWithNoToken
 } from "@/libs/axios";
@@ -35,4 +36,13 @@ export const getCheckedOn = params =>{
   return getRequest(`/other/logistics/getCheckedFaceSheet`,params);
 }
 
+//获取物流设置
+export const getLogisticsSetting = () =>{
+  return getRequest(`/other/logistics/setting`);
+}
+
+export const getShunFengFaceSheet = (url,headers) =>{
+  return getRequestHasHeader(`${url}`,null,headers);
+}
+
 

seller/src/api/order.js

@@ -81,6 +81,11 @@ export const orderDelivery = (sn, params) => {
   return postRequest(`/order/order/${sn}/delivery`, params);
 };
 
+// 订单发货
+export const orderShunFengDelivery = (sn) => {
+  return postRequest(`/order/order/${sn}/shunfeng/delivery`);
+};
+
 // 获取商家选中的物流公司
 export const getLogisticsChecked = () => {
   return getRequest(`/other/logistics/getChecked`);

seller/src/libs/axios.js

@@ -188,6 +188,38 @@ export const getRequest = (url, params, resBlob) => {
   return service(data);
 };
 
+export const getRequestHasHeader = (url, params, headers) => {
+  let accessToken = getStore("accessToken");
+  let data = {
+    method: "get",
+    url: `${url}`,
+    params: params,
+    transformRequest: headers
+      ? undefined
+      : [
+          function(data) {
+            let ret = "";
+            for (let it in data) {
+              ret +=
+                encodeURIComponent(it) +
+                "=" +
+                encodeURIComponent(data[it]) +
+                "&";
+            }
+            ret = ret.substring(0, ret.length - 1);
+            return ret;
+          }
+        ],
+    headers: {
+      "Content-Type": "application/x-www-form-urlencoded",
+      accessToken: accessToken,
+      ...headers
+    },
+    responseType: "blob"
+  };
+  return service(data);
+};
+
 export const postRequest = (url, params, headers) => {
   let accessToken = getStore("accessToken");
   return service({

seller/src/views/order/order/orderDetail.vue

@@ -2,33 +2,18 @@
   <div class="search">
     <Card style="height: 60px">
       <div>
-        <Button
+        <Button v-if="allowOperation.editPrice" @click="modifyPrice" type="primary">调整价格</Button>
-          v-if="allowOperation.editPrice"
+        <Button v-if="allowOperation.editConsignee" @click="editAddress" type="primary">修改收货地址</Button>
-          @click="modifyPrice"
+        <Button v-if="allowOperation.showLogistics" @click="logistics" type="primary">查看物流</Button>
-          type="primary"
-          >调整价格</Button
-        >
-        <Button
-          v-if="allowOperation.editConsignee"
-          @click="editAddress"
-          type="primary"
-          >修改收货地址</Button
-        >
-        <Button
-          v-if="allowOperation.showLogistics"
-          @click="logistics"
-          type="primary"
-          >查看物流</Button
-        >
         <Button @click="orderLogModal = true" type="primary">订单日志</Button>
         <Button @click="printOrder" type="primary" ghost style="float:right;">打印发货单</Button>
-        <Button v-if="allowOperation.take" @click="orderTake" type="primary"
+        <Button v-if="allowOperation.take" @click="orderTake" type="primary">订单核销</Button>
-          >订单核销</Button
+        <Button v-if="allowOperation.ship" @click="orderDeliver" type="primary">发货</Button>
-        >
+
-        <Button v-if="allowOperation.ship" @click="orderDeliver" type="primary"
+        <Button @click="sfPrint" type="primary" ghost
-          >发货</Button
+          v-if="allowOperation.showLogistics && logisticsType == 'SHUNFENG'">下载面单</Button>
-        >
+        <Button @click="Toprint" type="primary" ghost
-        <Button  @click="Toprint" type="primary" ghost v-if="allowOperation.ship">打印电子面单</Button>
+          v-if="allowOperation.ship && logisticsType != 'SHUNFENG'">打印电子面单</Button>
       </div>
     </Card>
 
@@ -99,8 +84,7 @@
           <div class="div-item">
             <div class="div-item-left">发票金额：</div>
             <div class="div-item-right">
-                <span v-if="orderInfo.receipt.receiptPrice">￥</span
+              <span v-if="orderInfo.receipt.receiptPrice">￥</span>{{
-                >{{
                 orderInfo.receipt.receiptPrice
                 ? orderInfo.receipt.receiptPrice
                 : "暂无" | unitPrice
@@ -160,21 +144,12 @@
     </Card>
 
     <Card class="mt_10">
-      <Table
+      <Table :loading="loading" border :columns="columns" :data="data" ref="table">
-        :loading="loading"
-        border
-        :columns="columns"
-        :data="data"
-        ref="table"
-      >
         <!-- 商品栏目格式化 -->
         <template slot="goodsSlot" slot-scope="{ row }">
           <div style="margin-top: 5px; height: 80px; display: flex">
             <div style="">
-              <img
+              <img :src="row.image" style="height: 60px; margin-top: 1px; width: 60px" />
-                :src="row.image"
-                style="height: 60px; margin-top: 1px; width: 60px"
-              />
             </div>
 
             <div style="margin-left: 13px">
@@ -184,35 +159,16 @@
                 }}</a>
               </div>
               <span v-for="(item, key) in JSON.parse(row.specs)" :key="key">
-                <span
+                <span v-show="key != 'images'" style="font-size: 12px; color: #999999">
-                  v-show="key != 'images'"
-                  style="font-size: 12px; color: #999999"
-                >
                   {{ key }} : {{ item }}
                 </span>
               </span>
-              <Poptip
+              <Poptip trigger="hover" style="display: block" title="扫码在手机中查看" transfer>
-                trigger="hover"
-                style="display: block"
-                title="扫码在手机中查看"
-                transfer
-              >
                 <div slot="content">
-                  <vue-qr
+                  <vue-qr :text="wapLinkTo(row.goodsId, row.skuId)" :margin="0" colorDark="#000" colorLight="#fff"
-                    :text="wapLinkTo(row.goodsId, row.skuId)"
+                    :size="150"></vue-qr>
-                    :margin="0"
-                    colorDark="#000"
-                    colorLight="#fff"
-                    :size="150"
-                  ></vue-qr>
                 </div>
-                <img
+                <img src="../../../assets/qrcode.svg" class="hover-pointer" width="20" height="20" alt="" />
-                  src="../../../assets/qrcode.svg"
-                  class="hover-pointer"
-                  width="20"
-                  height="20"
-                  alt=""
-                />
               </Poptip>
             </div>
           </div>
@@ -235,10 +191,12 @@
             <span class="label">优惠券金额：</span>
             <span class="txt"> {{ orderInfo.order.priceDetailDTO.couponPrice | unitPrice('￥') }} </span>
           </li>
-          <li v-if="orderInfo.order.priceDetailDTO.discountPriceDetail != undefined && orderInfo.order.priceDetailDTO.discountPriceDetail && orderInfo.order.priceDetailDTO.discountPriceDetail != null && orderInfo.order.priceDetailDTO.discountPriceDetail != ''">      
+          <li
+            v-if="orderInfo.order.priceDetailDTO.discountPriceDetail != undefined && orderInfo.order.priceDetailDTO.discountPriceDetail && orderInfo.order.priceDetailDTO.discountPriceDetail != null && orderInfo.order.priceDetailDTO.discountPriceDetail != ''">
             <div class="label">
               <Poptip trigger="hover" placement="left" width="200">
-                <Icon v-if="typeList.length > 0"  type="ios-alert-outline" size="17" @click="getOrderPrice" color="#cc0000"/>
+                <Icon v-if="typeList.length > 0" type="ios-alert-outline" size="17" @click="getOrderPrice"
+                  color="#cc0000" />
                 <template #content>
                   <div class="api" style="text-align:left;">
                     <table>
@@ -287,9 +245,7 @@
           </li>
           <li>
             <span class="label">应付金额：</span>
-            <span class="txt flowPrice"
+            <span class="txt flowPrice">¥{{ orderInfo.order.flowPrice | unitPrice }}</span>
-              >¥{{ orderInfo.order.flowPrice | unitPrice }}</span
-            >
             <!-- <template v-if="orderInfo.order.priceDetailDTO.discountPriceDetail != undefined && orderInfo.order.priceDetailDTO.discountPriceDetail && orderInfo.order.priceDetailDTO.discountPriceDetail != null && orderInfo.order.priceDetailDTO.discountPriceDetail != ''">
                 <Space style="height:20px;float: right;text-align: center;margin-left:30px;margin-right:53px;">
                       <Button type="primary" ghost size="small" @click="getOrderPrice()">优惠详情</Button>
@@ -305,22 +261,12 @@
         <span>修改金额</span>
       </p>
       <div>
-        <Form
+        <Form ref="modifyPriceForm" :model="modifyPriceForm" label-position="left" :label-width="100"
-          ref="modifyPriceForm"
+          :rules="modifyPriceValidate">
-          :model="modifyPriceForm"
-          label-position="left"
-          :label-width="100"
-          :rules="modifyPriceValidate"
-        >
           <FormItem label="订单金额" prop="orderPrice">
-            <InputNumber
+            <InputNumber style="width: 100%" v-model="modifyPriceForm.orderPrice" size="large" :min="0.01" :max="99999">
-              style="width: 100%"
+              <span slot="append">元</span>
-              v-model="modifyPriceForm.orderPrice"
+            </InputNumber>
-              size="large"
-              :min="0.01"
-              :max="99999"
-              ><span slot="append">元</span></InputNumber
-            >
           </FormItem>
         </Form>
       </div>
@@ -336,55 +282,22 @@
         <span>修改收件信息</span>
       </p>
       <div>
-        <Form
+        <Form ref="addressForm" :model="addressForm" label-position="left" :label-width="100" :rules="addressRule">
-          ref="addressForm"
-          :model="addressForm"
-          label-position="left"
-          :label-width="100"
-          :rules="addressRule"
-        >
           <FormItem label="收件人" prop="consigneeName">
-            <Input
+            <Input v-model="addressForm.consigneeName" size="large" maxlength="20"></Input>
-              v-model="addressForm.consigneeName"
-              size="large"
-              maxlength="20"
-            ></Input>
           </FormItem>
           <FormItem label="联系方式" prop="consigneeMobile">
-            <Input
+            <Input v-model="addressForm.consigneeMobile" size="large" maxlength="11"></Input>
-              v-model="addressForm.consigneeMobile"
-              size="large"
-              maxlength="11"
-            ></Input>
           </FormItem>
           <FormItem label="地址信息" prop="consigneeAddressPath">
-            <Input
+            <Input v-model="addressForm.consigneeAddressPath" disabled style="width: 325px" v-if="showRegion == false" />
-              v-model="addressForm.consigneeAddressPath"
+            <Button v-if="showRegion == false" size="small" @click="regionClick" :loading="submitLoading" type="primary"
-              disabled
+              style="margin-left: 8px">修改
-              style="width: 325px"
-              v-if="showRegion == false"
-            />
-            <Button
-              v-if="showRegion == false"
-              size="small"
-              @click="regionClick"
-              :loading="submitLoading"
-              type="primary"
-              style="margin-left: 8px"
-              >修改
             </Button>
-            <region
+            <region style="width: 400px" @selected="selectedRegion" v-if="showRegion == true" />
-              style="width: 400px"
-              @selected="selectedRegion"
-              v-if="showRegion == true"
-            />
           </FormItem>
           <FormItem label="详细地址" prop="consigneeDetail">
-            <Input
+            <Input v-model="addressForm.consigneeDetail" size="large" maxlength="11"></Input>
-              v-model="addressForm.consigneeDetail"
-              size="large"
-              maxlength="11"
-            ></Input>
           </FormItem>
         </Form>
       </div>
@@ -400,19 +313,10 @@
         <span>订单核销</span>
       </p>
       <div>
-        <Form
+        <Form ref="orderTakeForm" :model="orderTakeForm" label-position="left" :label-width="100"
-          ref="orderTakeForm"
+          :rules="orderTakeValidate">
-          :model="orderTakeForm"
-          label-position="left"
-          :label-width="100"
-          :rules="orderTakeValidate"
-        >
           <FormItem label="核销码" prop="qrCode">
-            <Input
+            <Input v-model="orderTakeForm.qrCode" size="large" maxlength="10"></Input>
-              v-model="orderTakeForm.qrCode"
-              size="large"
-              maxlength="10"
-            ></Input>
           </FormItem>
         </Form>
       </div>
@@ -427,13 +331,7 @@
         <span>订单日志</span>
       </p>
       <div class="order-log-div">
-        <Table
+        <Table :loading="loading" border :columns="orderLogColumns" :data="orderLogData" ref="table"></Table>
-          :loading="loading"
-          border
-          :columns="orderLogColumns"
-          :data="orderLogData"
-          ref="table"
-        ></Table>
       </div>
 
       <div slot="footer" style="text-align: right">
@@ -469,8 +367,8 @@
         <div class="div-express-log">
           <ul class="express-log">
             <li v-for="(item, index) in logisticsInfo.traces" :key="index">
-              <span class="time">{{ item.AcceptTime }}</span>
+              <span class="time">{{ item.AcceptTime || item.acceptTime }}</span>
-              <span class="detail">{{ item.AcceptStation }}</span>
+              <span class="detail">{{ item.AcceptStation || item.remark }}</span>
             </li>
           </ul>
         </div>
@@ -488,49 +386,23 @@
       <div>
         <Form :model="faceSheetForm" ref="faceSheetForm" v-if="facesheetFlag" :rules="faceSheetFormValidate">
           <FormItem label="物流公司" prop="logisticsId" style="position: relative" :label-width="90">
-            <Select
+            <Select v-model="faceSheetForm.logisticsId" placeholder="请选择" style="width: 250px">
-              v-model="faceSheetForm.logisticsId"
+              <Option v-for="(item, i) in checkedLogistics" :key="i" :value="item.logisticsId">{{ item.name }}
-              placeholder="请选择"
-              style="width: 250px"
-            >
-              <Option
-                v-for="(item, i) in checkedLogistics"
-                :key="i"
-                :value="item.logisticsId"
-              >{{ item.name }}
               </Option>
             </Select>
           </FormItem>
         </Form>
-        <Form
+        <Form v-else ref="orderDeliveryForm" :model="orderDeliveryForm" :label-width="90"
-          v-else
+          :rules="orderDeliverFormValidate" style="position: relative">
-          ref="orderDeliveryForm"
-          :model="orderDeliveryForm"
-          :label-width="90"
-          :rules="orderDeliverFormValidate"
-          style="position: relative"
-        >
-
           <FormItem label="物流公司" prop="logisticsId">
-            <Select
+            <Select v-model="orderDeliveryForm.logisticsId" placeholder="请选择" style="width: 250px">
-              v-model="orderDeliveryForm.logisticsId"
+              <Option v-for="(item, i) in checkedLogistics" :key="i" :value="item.logisticsId">{{ item.name }}
-              placeholder="请选择"
-              style="width: 250px"
-            >
-              <Option
-                v-for="(item, i) in checkedLogistics"
-                :key="i"
-                :value="item.logisticsId"
-              >{{ item.name }}
               </Option>
             </Select>
           </FormItem>
           <!-- v-if="showOrder" -->
           <FormItem label="物流单号" prop="logisticsNo">
-            <Input
+            <Input v-model="orderDeliveryForm.logisticsNo" style="width: 250px" />
-              v-model="orderDeliveryForm.logisticsNo"
-              style="width: 250px"
-            />
           </FormItem>
         </Form>
       </div>
@@ -544,7 +416,9 @@
     <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>
+        <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">
@@ -558,13 +432,15 @@
             <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-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>
+            <p class="lineH30 f14">收货地址：{{ orderInfo.order.consigneeAddressPath }}{{ orderInfo.order.consigneeDetail }}
+            </p>
             </Col>
           </Row>
           <Row>
@@ -624,6 +500,7 @@ export default {
       submitLoading: false, // 添加或编辑提交状态
       region: [], //地区
       regionId: [], //地区id
+      logisticsType: 'KUAIDINIAO', //物流类型
       showRegion: false,
       someJSONdata: '',
       faceSheetForm: {
@@ -937,12 +814,60 @@ export default {
     //订单发货
     orderDeliver() {
       this.facesheetFlag = false
+      if (this.logisticsType == 'SHUNFENG') {
+        this.$Modal.confirm({
+          title: "确认发货",
+          content: "您确认使用顺丰发货 " + this.sn + " 订单?",
+          loading: true,
+          onOk: () => {
+            API_Order.orderShunFengDelivery(this.sn).then((res) => {
+              if (res.success) {
+                this.$Modal.remove();
+                this.$Message.success("订单发货成功");
+                this.getDataDetail()
+              }
+            })
+          }
+        })
+      } else {
         API_Order.getLogisticsChecked().then((res) => {
           if (res.success) {
             this.checkedLogistics = res.result;
             this.orderDeliverModal = true;
           }
         });
+      }
+    },
+    //顺丰打印面单
+    sfPrint() {
+      API_Order.getOrderFaceSheet(this.sn, this.faceSheetForm).then(res => {
+        if (res.success) {
+          let headers = {
+            'X-Auth-token': res.result.token
+          }
+          API_Logistics.getShunFengFaceSheet(res.result.url, headers).then(res => {
+            const blob = new Blob([res], {
+              type: "application/pdf;charset=utf-8",
+            });
+            console.log("出发blob");
+            //对于<a>标签，只有 Firefox 和 Chrome（内核） 支持 download 属性
+            //IE10以上支持blob但是依然不支持download
+            if ("download" in document.createElement("a")) {
+              //支持a标签download的浏览器
+              const link = document.createElement("a"); //创建a标签
+              link.download = this.orderInfo.order.sn + ".pdf"; //a标签添加属性
+              link.style.display = "none";
+              link.href = URL.createObjectURL(blob);
+              document.body.appendChild(link);
+              link.click(); //执行下载
+              URL.revokeObjectURL(link.href); //释放url
+              document.body.removeChild(link); //释放标签
+            } else {
+              navigator.msSaveBlob(blob, fileName);
+            }
+          })
+        }
+      })
     },
     Toprints() {
       if (this.form.logisticsId != null && this.form.logisticsId != '') {
@@ -956,7 +881,7 @@ export default {
           if (valid) {
             API_Order.getOrderFaceSheet(this.sn, this.faceSheetForm).then(res => {
               if (res.success) {
-                this.someJSONdata = res.result;
+                this.someJSONdata = res.result.printTemplate;
                 this.Toprints();
               }
             })
@@ -1014,10 +939,20 @@ export default {
         }
       });
     },
+
+    getLogisticsSetting() {
+      API_Logistics.getLogisticsSetting().then(res => {
+        if (res.success) {
+          this.logisticsType = res.result;
+        }
+      })
+    },
+
   },
   mounted() {
     this.sn = this.$route.query.sn;
     this.getDataDetail();
+    this.getLogisticsSetting();
   },
   // 如果是从详情页返回列表页，修改列表页keepAlive为true，确保不刷新页面
   beforeRouteLeave(to, from, next) {
@@ -1034,6 +969,7 @@ export default {
 .lineH30 {
   line-height: 30px;
 }
+
 .order-log-div {
   line-height: 30px;
   height: 500px;
@@ -1044,6 +980,7 @@ dl dt {
   width: 100px;
   text-align: right;
 }
+
 .div-express-log {
   max-height: 300px;
   border: solid 1px #e7e7e7;
@@ -1057,16 +994,19 @@ dl dt {
   margin: 5px;
   padding: 10px;
   list-style-type: none;
+
   .time {
     width: 30%;
     display: inline-block;
     float: left;
   }
+
   .detail {
     width: 60%;
     margin-left: 30px;
     display: inline-block;
   }
+
   li {
     line-height: 30px;
   }
@@ -1159,19 +1099,23 @@ dl dt {
     }
   }
 }
+
 .theme_color {
   color: $theme_color;
 }
+
 .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;
@@ -1179,6 +1123,7 @@ dl dt {
   padding: 10px;
   overflow: hidden;
   color: #333;
+
   .printgooditem {
     border-bottom: 1px solid #e8eaec;
     display: flex;
@@ -1187,34 +1132,42 @@ dl dt {
     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{
+
+  html,
+  body {
     height: inherit;
   }
 }