适配微服务

manager/src/views/order/after-order/afterSaleOrder.vue

@@ -2,7 +2,13 @@
   <div class="search">
     <Card>
       <Row @keydown.enter.native="handleSearch">
-        <Form ref="searchForm" :model="searchForm" inline :label-width="70" class="search-form">
+        <Form
+          ref="searchForm"
+          :model="searchForm"
+          inline
+          :label-width="70"
+          class="search-form"
+        >
           <Form-item label="订单编号" prop="orderSn">
             <Input
               type="text"
@@ -22,7 +28,12 @@
             />
           </Form-item>
           <Form-item label="售后状态">
-            <Select v-model="searchForm.serviceStatus" placeholder="全部" clearable style="width: 200px">
+            <Select
+              v-model="searchForm.serviceStatus"
+              placeholder="全部"
+              clearable
+              style="width: 200px"
+            >
               <Option value="APPLY">申请售后</Option>
               <Option value="PASS">通过售后</Option>
               <Option value="REFUSE">拒绝售后</Option>
@@ -63,12 +74,23 @@
             />
           </Form-item>
           <Form-item label="售后类型">
-            <Select v-model="searchForm.serviceType" placeholder="全部" clearable style="width: 200px">
+            <Select
+              v-model="searchForm.serviceType"
+              placeholder="全部"
+              clearable
+              style="width: 200px"
+            >
               <Option value="RETURN_MONEY">退款</Option>
               <Option value="RETURN_GOODS">退货</Option>
             </Select>
           </Form-item>
-          <Button @click="handleSearch" type="primary" icon="ios-search" class="search-btn">搜索</Button>
+          <Button
+            @click="handleSearch"
+            type="primary"
+            icon="ios-search"
+            class="search-btn"
+            >搜索</Button
+          >
         </Form>
       </Row>
       <Table
@@ -80,25 +102,36 @@
         class="mt_10"
       >
         <!-- 商品栏目格式化 -->
-        <template slot="goodsSlot" slot-scope="{row}">
-          <div style="margin-top: 5px;height: 80px; display: flex;">
+        <template slot="goodsSlot" slot-scope="{ row }">
+          <div style="margin-top: 5px; height: 80px; display: flex">
             <div style="">
-              <img :src="row.goodsImage" style="height: 60px;margin-top: 3px">
+              <img :src="row.goodsImage" style="height: 60px; margin-top: 3px" />
             </div>
 
-            <div style="margin-left: 13px;">
+            <div style="margin-left: 13px">
               <div class="div-zoom">
-                <a @click="linkTo(row.goodsId,row.skuId)">{{row.goodsName}}</a>
+                <a @click="linkTo(row.goodsId, row.skuId)">{{ row.goodsName }}</a>
               </div>
               <Poptip trigger="hover" title="扫码在手机中查看" transfer>
                 <div slot="content">
-                  <vue-qr :text="wapLinkTo(row.goodsId,row.skuId)"  :margin="0" colorDark="#000" colorLight="#fff" :size="150"></vue-qr>
+                  <vue-qr
+                    :text="wapLinkTo(row.goodsId, row.skuId)"
+                    :margin="0"
+                    colorDark="#000"
+                    colorLight="#fff"
+                    :size="150"
+                  ></vue-qr>
                 </div>
-                <img src="../../../assets/qrcode.svg" class="hover-pointer" width="20" height="20" alt="">
+                <img
+                  src="../../../assets/qrcode.svg"
+                  class="hover-pointer"
+                  width="20"
+                  height="20"
+                  alt=""
+                />
               </Poptip>
             </div>
           </div>
-
         </template>
       </Table>
       <Row type="flex" justify="end" class="mt_10">
@@ -120,220 +153,220 @@
 </template>
 
 <script>
-  import * as API_Order from "@/api/order";
-  import vueQr from 'vue-qr'
-  export default {
-    name: "orderList",
-    components: {
-         "vue-qr":vueQr
-    },
-    data() {
-      return {
-        loading: true, // 表单加载状态
-        searchForm: {
-          // 搜索框初始化对象
-          pageNumber: 1, // 当前页数
-          pageSize: 10, // 页面大小
-          sort: "createTime", // 默认排序字段
-          order: "desc", // 默认排序方式
-          startDate: "", // 起始时间
-          endDate: "", // 终止时间
-          orderSn: "",
-          memberName: "",
-          serviceStatus: "",
-          storeName:"",
-          sn: "",
-
+import * as API_Order from "@/api/order";
+import vueQr from "vue-qr";
+export default {
+  components: {
+    "vue-qr": vueQr,
+  },
+  name: "after-sale-order",
+  data() {
+    return {
+      loading: true, // 表单加载状态
+      searchForm: {
+        // 搜索框初始化对象
+        pageNumber: 1, // 当前页数
+        pageSize: 10, // 页面大小
+        sort: "createTime", // 默认排序字段
+        order: "desc", // 默认排序方式
+        startDate: "", // 起始时间
+        endDate: "", // 终止时间
+        orderSn: "",
+        memberName: "",
+        serviceStatus: "",
+        storeName: "",
+        sn: "",
+      },
+      selectDate: null, // 选择时间段
+      form: {
+        // 添加或编辑表单对象初始化数据
+        sn: "",
+        storeName: "",
+        startTime: "",
+        endTime: "",
+        billPrice: "",
+      },
+      columns: [
+        {
+          title: "售后服务单号",
+          key: "sn",
+          minWidth: 140,
+          tooltip: true,
         },
-        selectDate: null, // 选择时间段
-        form: {
-          // 添加或编辑表单对象初始化数据
-          sn: "",
-          storeName: "",
-          startTime: "",
-          endTime: "",
-          billPrice: "",
+        {
+          title: "订单编号",
+          key: "orderSn",
+          minWidth: 120,
+          tooltip: true,
         },
-        columns: [
-          {
-            title: "售后服务单号",
-            key: "sn",
-            minWidth: 140,
-            tooltip: true
-          },
-          {
-            title: "订单编号",
-            key: "orderSn",
-            minWidth: 120,
-            tooltip: true
-          },
-          {
-            title: "商品",
-            key: "goodsName",
-            minWidth: 300,
-            tooltip: true,
-            slot: "goodsSlot",
-          },
-          {
-            title: "会员名称",
-            key: "memberName",
-            width: 140,
-          },
-          {
-            title: "商家名称",
-            key: "storeName",
-            minWidth: 100,
-            tooltip: true
-          },
-          {
-            title: "售后金额",
-            key: "applyRefundPrice",
-            width: 110,
-            render: (h, params) => {
-              if(params.row.applyRefundPrice == null){
-                return h(
-                  "div",
-                  this.$options.filters.unitPrice(0, "￥")
-                );
-              }else{
-                return h(
-                  "div",
-                  this.$options.filters.unitPrice(params.row.applyRefundPrice, "￥")
-                );
-              }
-
-            },
-          },
-          {
-            title: "售后类型",
-            key: "serviceType",
-            width: 100,
-            render: (h, params) => {
-              if (params.row.serviceType == "RETURN_MONEY") {
-                return h('div', [h('tag', {props: {color: "blue"}}, '退款'),]);
-              } else if (params.row.serviceType == "RETURN_GOODS") {
-                return h('div', [h('tag', {props: {color: "volcano"}}, '退货'),]);
-              } else if (params.row.serviceType == "EXCHANGE_GOODS") {
-                return h('div', [h('tag', {props: {color: "green"}}, '换货'),]);
-              }
+        {
+          title: "商品",
+          key: "goodsName",
+          minWidth: 300,
+          tooltip: true,
+          slot: "goodsSlot",
+        },
+        {
+          title: "会员名称",
+          key: "memberName",
+          width: 140,
+        },
+        {
+          title: "商家名称",
+          key: "storeName",
+          minWidth: 100,
+          tooltip: true,
+        },
+        {
+          title: "售后金额",
+          key: "applyRefundPrice",
+          width: 110,
+          render: (h, params) => {
+            if (params.row.applyRefundPrice == null) {
+              return h("div", this.$options.filters.unitPrice(0, "￥"));
+            } else {
+              return h(
+                "div",
+                this.$options.filters.unitPrice(params.row.applyRefundPrice, "￥")
+              );
             }
           },
-
-          {
-            title: "售后状态",
-            key: "serviceStatus",
-            width: 200,
-            render: (h, params) => {
-              if (params.row.serviceStatus == "APPLY") {
-                return h('div', [h('tag', {props: {color: "blue"}}, '申请中'),]);
-              } else if (params.row.serviceStatus == "PASS") {
-                return h('div', [h('tag', {props: {color: "cyan"}}, '通过售后'),]);
-              } else if (params.row.serviceStatus == "REFUSE") {
-                return h('div', [h('tag', {props: {color: "volcano"}}, '拒绝售后'),]);
-              } else if (params.row.serviceStatus == "BUYER_RETURN") {
-                return h('div', [h('tag', {props: {color: "orange"}}, '买家退货，待卖家收货'),]);
-              } else if (params.row.serviceStatus == "SELLER_CONFIRM") {
-                return h('div', [h('tag', {props: {color: "gold"}}, '卖家确认收货'),]);
-              } else if (params.row.serviceStatus == "SELLER_TERMINATION") {
-                return h('div', [h('tag', {props: {color: "lime"}}, '卖家终止售后'),]);
-              } else if (params.row.serviceStatus == "BUYER_CANCEL") {
-                return h('div', [h('tag', {props: {color: "purple"}}, '买家取消售后'),]);
-              } else if (params.row.serviceStatus == "COMPLETE") {
-                return h('div', [h('tag', {props: {color: "green"}}, '完成售后'),]);
-              }else if (params.row.serviceStatus == "WAIT_REFUND") {
-                return h('div', [h('tag', {props: {color: "geekblue"}}, '待平台退款'),]);
-              }
+        },
+        {
+          title: "售后类型",
+          key: "serviceType",
+          width: 100,
+          render: (h, params) => {
+            if (params.row.serviceType == "RETURN_MONEY") {
+              return h("div", [h("tag", { props: { color: "blue" } }, "退款")]);
+            } else if (params.row.serviceType == "RETURN_GOODS") {
+              return h("div", [h("tag", { props: { color: "volcano" } }, "退货")]);
+            } else if (params.row.serviceType == "EXCHANGE_GOODS") {
+              return h("div", [h("tag", { props: { color: "green" } }, "换货")]);
             }
           },
+        },
 
-          {
-            title: "操作",
-            key: "action",
-            fixed: "right",
-            align: "center",
-            width: 100,
-            render: (h, params) => {
+        {
+          title: "售后状态",
+          key: "serviceStatus",
+          width: 150,
+          render: (h, params) => {
+            if (params.row.serviceStatus == "APPLY") {
+              return h("div", [h("tag", { props: { color: "blue" } }, "申请中")]);
+            } else if (params.row.serviceStatus == "PASS") {
+              return h("div", [h("tag", { props: { color: "cyan" } }, "通过售后")]);
+            } else if (params.row.serviceStatus == "REFUSE") {
+              return h("div", [h("tag", { props: { color: "volcano" } }, "拒绝售后")]);
+            } else if (params.row.serviceStatus == "BUYER_RETURN") {
               return h("div", [
-                h(
-                  "Button",
-                  {
-                    props: {
-                      type: "info",
-                      size: "small",
-                    },
-                    style: {
-                      marginRight: "5px",
-                    },
-                    on: {
-                      click: () => {
-                        this.detail(params.row);
-                      },
+                h("tag", { props: { color: "orange" } }, "买家退货，待卖家收货"),
+              ]);
+            } else if (params.row.serviceStatus == "SELLER_CONFIRM") {
+              return h("div", [h("tag", { props: { color: "gold" } }, "卖家确认收货")]);
+            } else if (params.row.serviceStatus == "SELLER_TERMINATION") {
+              return h("div", [h("tag", { props: { color: "lime" } }, "卖家终止售后")]);
+            } else if (params.row.serviceStatus == "BUYER_CANCEL") {
+              return h("div", [h("tag", { props: { color: "purple" } }, "买家取消售后")]);
+            } else if (params.row.serviceStatus == "COMPLETE") {
+              return h("div", [h("tag", { props: { color: "green" } }, "完成售后")]);
+            } else if (params.row.serviceStatus == "WAIT_REFUND") {
+              return h("div", [h("tag", { props: { color: "geekblue" } }, "待平台退款")]);
+            }
+          },
+        },
+        {
+          title: "申请时间",
+          key: "createTime",
+          width: 180,
+        },
+        {
+          title: "操作",
+          key: "action",
+          fixed: "right",
+          align: "center",
+          width: 100,
+          render: (h, params) => {
+            return h("div", [
+              h(
+                "Button",
+                {
+                  props: {
+                    type: "info",
+                    size: "small",
+                  },
+                  style: {
+                    marginRight: "5px",
+                  },
+                  on: {
+                    click: () => {
+                      this.detail(params.row);
                     },
                   },
-                  "查看"
-                ),
-              ]);
-            },
+                },
+                "查看"
+              ),
+            ]);
           },
-        ],
-        data: [], // 表单数据
-        total: 0, // 表单数据总数
-      };
+        },
+      ],
+      data: [], // 表单数据
+      total: 0, // 表单数据总数
+    };
+  },
+  methods: {
+    // 初始化数据
+    init() {
+      this.getDataList();
     },
-    methods: {
-      // 初始化数据
-      init() {
-        this.getDataList();
-      },
-      // 分页 改变页码
-      changePage(v) {
-        this.searchForm.pageNumber = v;
-        this.getDataList();
-      },
-      // 分页 改变页数
-      changePageSize(v) {
-        this.searchForm.pageNumber = 1;
-        this.searchForm.pageSize = v;
-        this.getDataList();
-      },
-      // 搜索
-      handleSearch() {
-        this.searchForm.pageNumber = 1;
-        this.searchForm.pageSize = 10;
-        this.getDataList();
-      },
-      // 开始结束时间分别赋值
-      selectDateRange(v) {
-        if (v) {
-          this.searchForm.startDate = v[0];
-          this.searchForm.endDate = v[1];
-        }
-      },
-      // 获取列表数据
-      getDataList() {
-        this.loading = true;
-        API_Order.getAfterSaleOrderPage(this.searchForm).then((res) => {
-          this.loading = false;
-          if (res.success) {
-            this.data = res.result.records;
-            this.total = res.result.total;
-          }
-        });
-        this.total = this.data.length;
+    // 分页 改变页码
+    changePage(v) {
+      this.searchForm.pageNumber = v;
+      this.getDataList();
+    },
+    // 分页 改变页数
+    changePageSize(v) {
+      this.searchForm.pageNumber = 1;
+      this.searchForm.pageSize = v;
+      this.getDataList();
+    },
+    // 搜索
+    handleSearch() {
+      this.searchForm.pageNumber = 1;
+      this.searchForm.pageSize = 10;
+      this.getDataList();
+    },
+    // 开始结束时间分别赋值
+    selectDateRange(v) {
+      if (v) {
+        this.searchForm.startDate = v[0];
+        this.searchForm.endDate = v[1];
+      }
+    },
+    // 获取列表数据
+    getDataList() {
+      this.loading = true;
+      API_Order.getAfterSaleOrderPage(this.searchForm).then((res) => {
         this.loading = false;
-      },
-      // 跳转订单详情
-      detail(v) {
-        let sn = v.sn;
-        this.$router.push({
-          name: "after-order-detail",
-          query: {sn: sn},
-        });
-
-      },
+        if (res.success) {
+          this.data = res.result.records;
+          this.total = res.result.total;
+        }
+      });
+      this.total = this.data.length;
+      this.loading = false;
     },
-    mounted() {
-      this.init();
+    // 跳转订单详情
+    detail(v) {
+      let sn = v.sn;
+      this.$router.push({
+        name: "after-order-detail",
+        query: { sn: sn },
+      });
     },
-  };
+  },
+  mounted() {
+    this.init();
+  },
+};
 </script>

manager/src/views/order/after-order/afterSaleOrderDetail.vue

@@ -7,56 +7,54 @@
             <h3>退货申请</h3>
             <dl>
               <dt>退货状态</dt>
-              <dd>{{afterSaleInfo.serviceName}}</dd>
+              <dd>{{ afterSaleInfo.serviceName }}</dd>
             </dl>
             <dl>
               <dt>退货退款编号</dt>
-              <dd>{{afterSaleInfo.sn}}</dd>
+              <dd>{{ afterSaleInfo.sn }}</dd>
             </dl>
             <dl>
               <dt>退货退款原因</dt>
-              <dd>{{afterSaleInfo.reason}}</dd>
+              <dd>{{ afterSaleInfo.reason }}</dd>
             </dl>
             <dl>
               <dt>申请退款金额</dt>
-              <dd>￥{{afterSaleInfo.applyRefundPrice | unitPrice}}</dd>
+              <dd>￥{{ afterSaleInfo.applyRefundPrice | unitPrice }}</dd>
             </dl>
             <dl v-if="afterSaleInfo.actualRefundPrice">
               <dt>实际退款金额</dt>
-              <dd>￥{{afterSaleInfo.actualRefundPrice | unitPrice}}</dd>
+              <dd>￥{{ afterSaleInfo.actualRefundPrice | unitPrice }}</dd>
             </dl>
             <dl v-if="afterSaleInfo.refundPoint">
               <dt>退还积分</dt>
-              <dd>{{afterSaleInfo.refundPoint}}</dd>
+              <dd>{{ afterSaleInfo.refundPoint }}</dd>
             </dl>
             <dl>
               <dt>退货数量</dt>
-              <dd>{{afterSaleInfo.num}}</dd>
+              <dd>{{ afterSaleInfo.num }}</dd>
             </dl>
             <dl>
               <dt>问题描述</dt>
-              <dd>{{afterSaleInfo.problemDesc}}</dd>
+              <dd>{{ afterSaleInfo.problemDesc }}</dd>
             </dl>
             <dl>
               <dt>凭证</dt>
-              <dd v-if="afterSaleImage == ''">
-                暂无凭证
-              </dd>
+              <dd v-if="afterSaleImage == ''">暂无凭证</dd>
               <dd v-else>
                 <div class="div-img" v-for="(item, index) in afterSaleImage" :key="index">
-                  <img class="complain-img" :src=item>
+                  <img class="complain-img" :src="item" />
                 </div>
               </dd>
             </dl>
           </div>
 
-          <div class="div-form-default" v-if="afterSaleInfo.serviceStatus=='APPLY'">
+          <div class="div-form-default" v-if="afterSaleInfo.serviceStatus == 'APPLY'">
             <h3>处理意见</h3>
             <dl>
               <dt>商家</dt>
               <dd>
                 <div class="div-content">
-                  {{afterSaleInfo.storeName}}
+                  {{ afterSaleInfo.storeName }}
                 </div>
               </dd>
             </dl>
@@ -64,7 +62,11 @@
               <dt>是否同意</dt>
               <dd>
                 <div class="div-content">
-                  <RadioGroup type="button" button-style="solid" v-model="params.serviceStatus">
+                  <RadioGroup
+                    type="button"
+                    button-style="solid"
+                    v-model="params.serviceStatus"
+                  >
                     <Radio label="PASS">
                       <span>同意</span>
                     </Radio>
@@ -77,37 +79,49 @@
             </dl>
             <dl>
               <dt>申请退款金额</dt>
-              <dd>{{ afterSaleInfo.applyRefundPrice | unitPrice('￥') }}</dd>
+              <dd>{{ afterSaleInfo.applyRefundPrice | unitPrice("￥") }}</dd>
             </dl>
             <dl>
               <dt>实际退款金额</dt>
               <dd>
-                <Input v-model="params.actualRefundPrice" style="width:260px" />
+                <Input v-model="params.actualRefundPrice" style="width: 260px" />
               </dd>
             </dl>
             <dl>
               <dt>备注信息</dt>
               <dd>
-                <Input v-model="params.remark" type="textarea" maxlength="200" :rows="4" clearable style="width:260px" />
+                <Input
+                  v-model="params.remark"
+                  type="textarea"
+                  maxlength="200"
+                  :rows="4"
+                  clearable
+                  style="width: 260px"
+                />
               </dd>
             </dl>
             <dl>
               <dd>
-                <div style="text-align: right;width: 45%;margin-top: 10px">
-                  <Button type="primary" :loading="submitLoading" @click="handleSubmit" style="margin-left: 5px">
+                <div style="text-align: right; width: 45%; margin-top: 10px">
+                  <Button
+                    type="primary"
+                    :loading="submitLoading"
+                    @click="handleSubmit"
+                    style="margin-left: 5px"
+                  >
                     确定
                   </Button>
                 </div>
               </dd>
             </dl>
           </div>
-          <div class="div-form-default" v-if="afterSaleInfo.serviceStatus !='APPLY'">
+          <div class="div-form-default" v-if="afterSaleInfo.serviceStatus != 'APPLY'">
             <h3>商家处理</h3>
             <dl>
               <dt>商家</dt>
               <dd>
                 <div class="div-content">
-                  {{afterSaleInfo.storeName}}
+                  {{ afterSaleInfo.storeName }}
                 </div>
               </dd>
             </dl>
@@ -128,139 +142,176 @@
             <dl>
               <dt>备注信息</dt>
               <dd>
-                {{afterSaleInfo.auditRemark || '暂无备注信息'}}
+                {{ afterSaleInfo.auditRemark || "暂无备注信息" }}
               </dd>
             </dl>
           </div>
         </div>
-        <div class="div-flow-center">
-
-        </div>
+        <div class="div-flow-center"></div>
         <div class="div-flow-right">
           <div class="div-form-default">
             <h3>相关商品交易信息</h3>
             <dl>
               <dt>
-                <img :src="afterSaleInfo.goodsImage" height="60px">
+                <img :src="afterSaleInfo.goodsImage" height="60px" />
               </dt>
               <dd>
                 <div class="div-zoom">
-                  <a @click="linkTo(afterSaleInfo.goodsId,afterSaleInfo.skuId)">{{afterSaleInfo.goodsName}}</a>
+                  <a @click="linkTo(afterSaleInfo.goodsId, afterSaleInfo.skuId)">{{
+                    afterSaleInfo.goodsName
+                  }}</a>
                   <Poptip trigger="hover" title="扫码在手机中查看" transfer>
                     <div slot="content">
-                      <vue-qr :text="wapLinkTo(afterSaleInfo.goodsId,afterSaleInfo.skuId)"  :margin="0" colorDark="#000" colorLight="#fff" :size="150"></vue-qr>
+                      <vue-qr
+                        :text="wapLinkTo(afterSaleInfo.goodsId, afterSaleInfo.skuId)"
+                        :margin="0"
+                        colorDark="#000"
+                        colorLight="#fff"
+                        :size="150"
+                      ></vue-qr>
                     </div>
-                    <img src="../../../assets/qrcode.svg" style="vertical-align:middle" class="hover-pointer ml_10" width="20" height="20" alt="">
+                    <img
+                      src="../../../assets/qrcode.svg"
+                      style="vertical-align: middle"
+                      class="hover-pointer ml_10"
+                      width="20"
+                      height="20"
+                      alt=""
+                    />
                   </Poptip>
                 </div>
-                <div style="color:#999;font-size:10px">数量：x{{afterSaleInfo.num}}</div>
-                
+                <div style="color: #999; font-size: 10px">
+                  数量：x{{ afterSaleInfo.num }}
+                </div>
               </dd>
             </dl>
-
           </div>
           <div class="div-form-default">
             <h3>订单相关信息</h3>
             <dl>
-              <dt>
-                订单编号
-              </dt>
+              <dt>订单编号</dt>
               <dd>
-                {{afterSaleInfo.orderSn}}
+                {{ afterSaleInfo.orderSn }}
               </dd>
             </dl>
             <dl v-if="afterSaleInfo.bankDepositName">
               <dt>银行开户行</dt>
               <dd>
-                {{afterSaleInfo.bankDepositName}}
+                {{ afterSaleInfo.bankDepositName }}
               </dd>
             </dl>
             <dl v-if="afterSaleInfo.bankAccountName">
               <dt>银行开户名</dt>
               <dd>
-                {{afterSaleInfo.bankAccountName}}
+                {{ afterSaleInfo.bankAccountName }}
               </dd>
             </dl>
             <dl v-if="afterSaleInfo.bankAccountNumber">
               <dt>银行卡号</dt>
               <dd>
-                {{afterSaleInfo.bankAccountNumber}}
+                {{ afterSaleInfo.bankAccountNumber }}
               </dd>
             </dl>
-
           </div>
-          <div class="div-form-default" v-if="afterSaleInfo.afterSaleAllowOperationVO && afterSaleInfo.afterSaleAllowOperationVO.refund">
+          <div
+            class="div-form-default"
+            v-if="
+              afterSaleInfo.afterSaleAllowOperationVO &&
+              afterSaleInfo.afterSaleAllowOperationVO.refund
+            "
+          >
             <h3>平台退款</h3>
             <dl>
               <dt>银行开户行</dt>
               <dd>
-                {{afterSaleInfo.bankDepositName}}
+                {{ afterSaleInfo.bankDepositName }}
               </dd>
             </dl>
             <dl>
               <dt>银行开户名</dt>
               <dd>
-                {{afterSaleInfo.bankAccountName}}
+                {{ afterSaleInfo.bankAccountName }}
               </dd>
             </dl>
             <dl>
               <dt>银行卡号</dt>
               <dd>
-                {{afterSaleInfo.bankAccountNumber}}
+                {{ afterSaleInfo.bankAccountNumber }}
               </dd>
             </dl>
             <dl>
               <dt>备注信息</dt>
               <dd>
-                <Input v-model="refundPriceForm.remark" type="textarea" maxlength="200" :rows="4" clearable style="width:260px" />
+                <Input
+                  v-model="refundPriceForm.remark"
+                  type="textarea"
+                  maxlength="200"
+                  :rows="4"
+                  clearable
+                  style="width: 260px"
+                />
               </dd>
             </dl>
             <dl>
               <dt>操作</dt>
               <dd>
-                <Button type="primary" :loading="submitLoading" @click="refundPriceSubmit" style="margin-left: 5px">
+                <Button
+                  type="primary"
+                  :loading="submitLoading"
+                  @click="refundPriceSubmit"
+                  style="margin-left: 5px"
+                >
                   退款
                 </Button>
               </dd>
             </dl>
           </div>
-          <div class="div-form-default" v-if="afterSaleInfo.showDelivery && afterSaleInfo.serviceType ==='RETURN_GOODS'">
+          <div
+            class="div-form-default"
+            v-if="
+              afterSaleInfo.showDelivery && afterSaleInfo.serviceType === 'RETURN_GOODS'
+            "
+          >
             <h3>物流信息</h3>
             <dl>
               <dt>收货商家</dt>
-              <dd>{{afterSaleInfo.storeName}}</dd>
+              <dd>{{ afterSaleInfo.storeName }}</dd>
             </dl>
             <dl>
               <dt>收货商家手机</dt>
-              <dd>{{storeMsg.salesConsigneeMobile}}</dd>
+              <dd>{{ storeMsg.salesConsigneeMobile }}</dd>
             </dl>
             <dl>
               <dt>收货地址</dt>
-              <dd>{{storeMsg.salesConsigneeAddressPath}} {{storeMsg.salesConsigneeDetail}}</dd>
+              <dd>
+                {{ storeMsg.salesConsigneeAddressPath }}
+                {{ storeMsg.salesConsigneeDetail }}
+              </dd>
             </dl>
             <dl>
               <dt>物流公司</dt>
-              <dd>{{afterSaleInfo.mlogisticsName}}</dd>
+              <dd>{{ afterSaleInfo.mlogisticsName }}</dd>
             </dl>
             <dl>
-              <dt>
-                物流单号
-              </dt>
+              <dt>物流单号</dt>
               <dd>
-                {{afterSaleInfo.mlogisticsNo}}
+                {{ afterSaleInfo.mlogisticsNo }}
               </dd>
             </dl>
             <dl>
               <dt>操作</dt>
               <dd>
-                <Button type="info" :loading="submitLoading" @click="logisticsSeller()" style="margin-left: 5px">
+                <Button
+                  type="info"
+                  :loading="submitLoading"
+                  @click="logisticsSeller()"
+                  style="margin-left: 5px"
+                >
                   查询物流
                 </Button>
               </dd>
             </dl>
-
           </div>
-          
         </div>
       </div>
     </Card>
@@ -273,33 +324,32 @@
         <dl>
           <dt>售后单号：</dt>
           <dd>
-            <div class="text-box">{{sn}}</div>
+            <div class="text-box">{{ sn }}</div>
           </dd>
         </dl>
         <dl>
           <dt>物流公司：</dt>
           <dd>
-            <div class="text-box">{{afterSaleInfo.mlogisticsName}}</div>
+            <div class="text-box">{{ afterSaleInfo.mlogisticsName }}</div>
           </dd>
         </dl>
         <dl>
           <dt>快递单号：</dt>
           <dd>
-            <div class="text-box">{{afterSaleInfo.mlogisticsNo}}</div>
+            <div class="text-box">{{ afterSaleInfo.mlogisticsNo }}</div>
           </dd>
         </dl>
         <div class="div-express-log">
           <ul class="express-log">
             <template v-if="Object.keys(logisticsInfo).length">
-              <li v-for="(item,index) in logisticsInfo.traces" :key="index">
-                <span class="time">{{item.AcceptTime}}</span>
-                <span class="detail">{{item.AcceptStation}}</span>
+              <li v-for="(item, index) in logisticsInfo.traces" :key="index">
+                <span class="time">{{ item.AcceptTime }}</span>
+                <span class="detail">{{ item.AcceptStation }}</span>
               </li>
             </template>
             <template v-else>
-              <li style="text-align:center;">暂无物流信息</li>
+              <li style="text-align: center">暂无物流信息</li>
             </template>
-            
           </ul>
         </div>
       </div>
@@ -312,14 +362,17 @@
 
 <script>
 import * as API_Order from "@/api/order";
-
+import vueQr from "vue-qr";
 export default {
+  components: {
+    "vue-qr": vueQr,
+  },
   name: "orderDetail",
   data() {
     return {
       sn: "", // 订单号
       logisticsModal: false, //查询物流模态框
-      
+
       logisticsInfo: {}, //物流信息
       afterSaleInfo: {}, // 售后信息
       afterSaleImage: [], //会员申诉图片
@@ -334,44 +387,45 @@ export default {
       refundPriceForm: {
         remark: "",
       },
-      afterSaleStatusList: [ // 售后状态列表
+      afterSaleStatusList: [
+        // 售后状态列表
         {
-          name: '申请中',
-          status: 'APPLY'
+          name: "申请中",
+          status: "APPLY",
         },
         {
-          name: '通过',
-          status: 'PASS'
+          name: "通过",
+          status: "PASS",
         },
         {
-          name: '拒绝',
-          status: 'REFUSE'
+          name: "拒绝",
+          status: "REFUSE",
         },
         {
-          name: '买家退货，待卖家收货',
-          status: 'BUYER_RETURN'
+          name: "买家退货，待卖家收货",
+          status: "BUYER_RETURN",
         },
         {
-          name: '卖家确认收货',
-          status: 'SELLER_CONFIRM'
+          name: "卖家确认收货",
+          status: "SELLER_CONFIRM",
         },
         {
-          name: '卖家终止售后',
-          status: 'SELLER_TERMINATION'
+          name: "卖家终止售后",
+          status: "SELLER_TERMINATION",
         },
         {
-          name: '买家取消售后',
-          status: 'BUYER_CANCEL'
+          name: "买家取消售后",
+          status: "BUYER_CANCEL",
         },
         {
-          name: '完成售后',
-          status: 'COMPLETE'
+          name: "完成售后",
+          status: "COMPLETE",
         },
         {
-          name: '等待平台退款',
-          status: 'WAIT_REFUND'
-        }
-      ]
+          name: "等待平台退款",
+          status: "WAIT_REFUND",
+        },
+      ],
     };
   },
   methods: {
@@ -382,13 +436,19 @@ export default {
         this.loading = false;
         if (res.success) {
           this.afterSaleInfo = res.result;
-          this.afterSaleInfo.showDelivery = this.showDelivery(this.afterSaleInfo.serviceStatus)
-          this.afterSaleInfo.serviceName = this.filterOrderStatus(this.afterSaleInfo.serviceStatus)
+          this.afterSaleInfo.showDelivery = this.showDelivery(
+            this.afterSaleInfo.serviceStatus
+          );
+          this.afterSaleInfo.serviceName = this.filterOrderStatus(
+            this.afterSaleInfo.serviceStatus
+          );
           this.afterSaleImage = (res.result.afterSaleImage || "").split(",");
           //退货地址去掉逗号
           if (this.afterSaleInfo.mconsigneeAddressPath)
-            this.afterSaleInfo.mconsigneeAddressPath =
-              this.afterSaleInfo.mconsigneeAddressPath.replaceAll(",", " ");
+            this.afterSaleInfo.mconsigneeAddressPath = this.afterSaleInfo.mconsigneeAddressPath.replaceAll(
+              ",",
+              " "
+            );
 
           this.$set(
             this.params,
@@ -397,15 +457,17 @@ export default {
           );
           // 如果显示物流信息，展示商家地址
           if (this.afterSaleInfo.showDelivery) {
-            API_Order.storeAddress(this.sn).then(resu => {
-              if(resu.success) {
-                const obj = resu.result
-                obj.salesConsigneeAddressPath = obj.salesConsigneeAddressPath.replaceAll(',', '')
+            API_Order.storeAddress(this.sn).then((resu) => {
+              if (resu.success) {
+                const obj = resu.result;
+                obj.salesConsigneeAddressPath = obj.salesConsigneeAddressPath.replaceAll(
+                  ",",
+                  ""
+                );
                 this.storeMsg = obj;
               }
-            })
+            });
           }
-          
         }
       });
     },
@@ -462,21 +524,24 @@ export default {
         }
       });
     },
-    filterOrderStatus (status) { // 获取订单状态中文
-      const ob = this.afterSaleStatusList.filter(e => { return e.status === status });
-      return ob[0].name
+    filterOrderStatus(status) {
+      // 获取订单状态中文
+      const ob = this.afterSaleStatusList.filter((e) => {
+        return e.status === status;
+      });
+      return ob[0].name;
     },
     // 根据订单状态判断是否显示物流信息
-    showDelivery (status) {
+    showDelivery(status) {
       let flag = false;
-      this.afterSaleStatusList.forEach((e,index) => {
+      this.afterSaleStatusList.forEach((e, index) => {
         // 订单为买家退货，待卖家收货之后的状态，并且不是买家取消售后，展示物流信息
-        if(e.status === status && index>=3 && index !==6) {
-          flag = true
+        if (e.status === status && index >= 3 && index !== 6) {
+          flag = true;
         }
-      })
-      return flag
-    }
+      });
+      return flag;
+    },
   },
   mounted() {
     this.sn = this.$route.query.sn;
@@ -484,7 +549,7 @@ export default {
   },
 };
 </script>
-<style lang="scss" >
+<style lang="scss">
 .ivu-col {
   width: 100% !important;
 }