feat: 添加我的寄售单详情页面

src/api/business/consign.js

@@ -66,3 +66,27 @@ export function getSettlementInfo(params) {
     data: params
   })
 }
+
+export function getReturnConsignList(params) {
+  return request({
+    url: '/returnOrderManage/findList',
+    method: 'post',
+    data: params
+  })
+}
+
+export function returnOrderSend(params) {
+  return request({
+    url: '/returnOrderManage/send',
+    method: 'post',
+    data: params
+  })
+}
+
+export function returnOrderDetail(params) {
+  return request({
+    url: '/returnOrderManage/findDetail',
+    method: 'post',
+    data: params
+  })
+}

src/router/index.js

@@ -390,6 +390,30 @@ export const asyncRouterMap = [
           keepAlive: true
         }
       },
+      {
+        path: 'consignBackList',
+        component: () => import('@/views/consign/consignBackList'),
+        name: 'consignBackList',
+        meta: {
+          perms: [],
+          title: '退货列表',
+          icon: 'user',
+          noCache: true,
+          keepAlive: true
+        }
+      },
+      {
+        path: 'consignBackDetail',
+        component: () => import('@/views/consign/consignBackDetail'),
+        name: 'consignBackDetail',
+        meta: {
+          perms: [],
+          title: '寄售单详情',
+          icon: 'form',
+          noCache: true
+        },
+        hidden: true
+      },
       {
         path: 'consignDetail',
         component: () => import('@/views/consign/consignDetail'),

src/views/consign/components/ReturnLogisticDialog.vue

+<template>
+  <el-dialog
+    v-if="logisticDialogShow"
+    :visible.sync="logisticDialogShow"
+    :before-close="handleCancelLogisticDialog"
+    width="600px"
+    height="800px"
+    title="寄出快递">
+    <el-form ref="imageValue" :model="logisticForm" :rules="logisticRules">
+      <el-form-item label="物流公司" label-width="100px" prop="logisticsCode">
+        <el-select v-model="logisticForm.logisticsCode" placeholder="请选择物流公司">
+          <el-option
+            v-for="item in logisticList"
+            :key="item.code"
+            :label="item.name"
+            :value="item.code"/>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="快递单号" label-width="100px" prop="waybill">
+        <el-input
+          v-model="logisticForm.waybill"
+          clearable
+          size="mini"
+          class="filter-item"
+          style="width: 240px;margin-right: 10px"
+          placeholder="请输入快递单号" />
+      </el-form-item>
+    </el-form>
+    <div slot="footer" class="dialog-footer">
+      <el-button @click="handleCancelLogisticDialog">取 消</el-button>
+      <el-button type="primary" @click="handleLogistic">确 定</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import { MessageBox } from 'element-ui'
+import { returnOrderSend } from '@/api/business/consign'
+export default {
+  name: 'ReturnLogisticDialog',
+  props: {
+    logisticDialogShow: {
+      type: Boolean,
+      default: false
+    },
+    returnOrderId: {
+      type: String,
+      default: ''
+    }
+  },
+  data() {
+    return {
+      logisticForm: {
+        logisticsCode: '',
+        waybill: ''
+      },
+      logisticRules: {
+        logisticsCode: [
+          { required: true, message: '请选择物流公司', trigger: 'blur' }
+        ],
+        waybill: [
+          { required: true, message: '请输入快递单号', trigger: 'blur' }
+        ]
+      },
+      logisticList: [
+        {
+          'code': 'JD',
+          'name': '京东快递'
+        },
+        {
+          'code': 'SF',
+          'name': '顺丰快递'
+        },
+        {
+          'code': 'STO',
+          'name': '申通快递'
+        },
+        {
+          'code': 'YTO',
+          'name': '圆通快递'
+        },
+        {
+          'code': 'ZTO',
+          'name': '中通快递'
+        },
+        {
+          'code': 'YUNDA',
+          'name': '韵达快递'
+        }
+      ]
+    }
+  },
+  methods: {
+    handleCancelLogisticDialog() {
+      this.$emit('cancelDialog')
+    },
+    /**
+     * 实物评估
+     */
+    handleLogistic() {
+      const params = { ...this.logisticForm, returnOrderId: this.returnOrderId }
+      this.$refs.imageValue.validate((valid) => {
+        if (valid) {
+          returnOrderSend(params)
+            .then(response => {
+              this.itemContent = {}
+              this.logisticForm = {}
+              this.$notify.success({
+                message: '图文估价成功'
+              })
+              this.$emit('refreshList')
+              this.$emit('cancelDialog')
+            })
+            .catch(response => {
+              MessageBox.alert('业务错误：' + response.data.errmsg, '警告', {
+                confirmButtonText: '确定',
+                type: 'error'
+              })
+            })
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.content {
+  width: 100%;
+  text-align: center;
+}
+
+.image {
+  width: 400px;
+  height: auto;
+}
+
+</style>

src/views/consign/consignBackList.vue

+<template>
+  <div class="page_consignList">
+    <el-tabs v-model="listQuery.state" @tab-click="handleClick">
+      <el-tab-pane v-for="item in tabList" :label="item.label" :name="item.name" :key="item.label" />
+    </el-tabs>
+    <div class="filter-item" style="margin-bottom: 20px">
+      <el-input
+        v-model="listQuery.returnOrderID"
+        clearable
+        size="mini"
+        class="filter-item"
+        style="width: 200px;margin-right: 10px"
+        placeholder="请输入寄售单号进行搜索" />
+      <el-button size="mini" class="filter-item" type="primary" @click="handlerGetList">查询</el-button>
+    </div>
+    <el-table
+      v-loading="listLoading"
+      :data="list"
+      size="small"
+      element-loading-text="正在查询中..."
+      border
+      fit
+      highlight-current-row>
+      <el-table-column align="center" min-width="100px" prop="returnOrderId" label="退货单号" />
+      <el-table-column align="center" label="图片" prop="itemImg">
+        <template slot-scope="scope">
+          <img v-if="scope.row.itemImg" :src="scope.row.itemImg" width="60px" height="60px">
+        </template>
+      </el-table-column>
+
+      <el-table-column align="center" label="名称" prop="itemName" >
+        <template slot-scope="scope" >
+          <Line2Hidden :text="scope.row.itemName" />
+        </template>
+      </el-table-column>
+
+      <el-table-column align="center" label="状态" prop="stateName" />
+      <el-table-column align="center" label="对应寄售单号" prop="saleId" />
+      <el-table-column v-if="listQuery.state === '10'" align="center" label="收货地址" prop="returnAddress" />
+      <el-table-column v-if="listQuery.state === '20'" align="center" label="物流公司" prop="logisticsName" />
+      <el-table-column v-if="listQuery.state === '20'" align="center" label="快递单号" prop="waybill" />
+      <el-table-column v-if="listQuery.state === '30'" align="center" label="签收类型" prop="signedTypeName" />
+      <el-table-column align="center" label="取消寄售时间" prop="cancelTime" />
+      <el-table-column align="center" label="操作" width="300">
+        <template slot-scope="scope">
+          <el-button
+            type="primary"
+            size="mini"
+            @click="handleToDetail(scope.row)">详情
+          </el-button>
+          <div v-if="scope.row.state === 10" style="margin: 0 12px">
+            <el-button
+              :disabled="scope.row.isHasPrice"
+              type="primary"
+              size="mini"
+              @click="handleLogisticDialogShow(scope.row)">寄出快递
+            </el-button>
+          </div>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <Pagination
+      v-show="total>0"
+      :total="total"
+      :page.sync="listQuery.page"
+      :limit.sync="listQuery.size"
+      @pagination="getList" />
+    <!--图文估价-->
+    <ReturnLogisticDialog
+      v-if="logisticDialogShow"
+      :return-order-id="currentReturnOrderId"
+      :logistic-dialog-show="logisticDialogShow"
+      @cancelDialog="logisticDialogShow = false"
+      @refreshList="getList"/>
+  </div>
+</template>
+
+<script>
+import Line2Hidden from '@/components/line2Hidden'
+import Pagination from '@/components/Pagination'
+import { getReturnConsignList } from '@/api/business/consign'
+import IdentifyValueDialog from './components/IdentifyValueDialog'
+import ImageValueDialog from './components/ImageValueDialog'
+import SaleConsignDialog from './components/SaleConsignDialog'
+import FinishSettlementDialog from './components/FinishSettlementDialog'
+import CancelConsignDialog from './components/CancelConsignDialog'
+import NormalCountdown from './components/NormalCountdown'
+import ReturnLogisticDialog from './components/ReturnLogisticDialog'
+
+export default {
+  name: 'ConsignBackList',
+  components: {
+    ReturnLogisticDialog,
+    NormalCountdown,
+    CancelConsignDialog,
+    FinishSettlementDialog,
+    SaleConsignDialog,
+    ImageValueDialog,
+    IdentifyValueDialog,
+    Pagination,
+    Line2Hidden
+  },
+  data() {
+    return {
+      itemKey: 0,
+      tabList: [
+        {
+          label: '待退回',
+          name: '10'
+        }, {
+          label: '已出库',
+          name: '20'
+        }, {
+          label: '完成退货',
+          name: '30'
+        }
+      ],
+      listLoading: true,
+      listQuery: {
+        page: 1,
+        size: 20,
+        returnOrderID: '',
+        state: '10'
+      },
+      list: [],
+      total: 0,
+      // 物流
+      logisticDialogShow: false,
+      currentReturnOrderId: ''
+    }
+  },
+  created() {
+    this.listQuery.state = localStorage.getItem('state') || '10'
+    this.getList()
+  },
+  destroyed() {
+    this.clearAll()
+  },
+  methods: {
+    // 清除所有定时器
+    clearAll() {
+      if (this.list) {
+        this.list.forEach((el) => {
+          clearInterval(el.countDown)
+        })
+      }
+    },
+    handlerGetList() {
+      this.listQuery.page = 1
+      this.getList()
+    },
+    handleClick(tab, event) {
+      this.listQuery.page = 1
+      this.getList()
+    },
+    getList() {
+      localStorage.setItem('state', '')
+      this.listLoading = true
+      getReturnConsignList(this.listQuery).then(response => {
+        this.clearAll()
+        this.list = response.data.data.dataList
+        this.total = response.data.data.total
+        this.listLoading = false
+      }).catch((e) => {
+        this.list = []
+        this.total = 0
+        this.listLoading = false
+      })
+    },
+    /**
+     * 详情
+     */
+    handleToDetail(item) {
+      localStorage.setItem('state', this.listQuery.state)
+      this.$router.push({ path: '/consign/consignBackDetail', query: { returnOrderId: item.returnOrderId }})
+    },
+    /**
+     * 图文评估
+     */
+    handleLogisticDialogShow(item) {
+      this.logisticDialogShow = true
+      this.currentReturnOrderId = item.returnOrderId
+    }
+  }
+}
+</script>
+
+<style scoped>
+/deep/ .cell {
+  display: flex;
+  justify-content: center;
+}
+.page_consignList {
+  padding: 0 20px 20px;
+}
+
+</style>