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/consignBackDetail.vue

+<template>
+  <div class="page_consignDetail">
+    <div class="consign_top">
+      <div>退货单号：</div>
+      <div>{{ returnOrderId }}</div>
+      <el-button
+        type="text"
+        style="margin-left: 10px;">{{ returnDetail.stateName || '' }}
+      </el-button>
+      <div style="margin-right: auto"/>
+      <div v-if="returnDetail.state === 10" style="margin-right: 12px">
+        <el-button
+          type="primary"
+          size="mini"
+          @click="imageValueDialogShow = true">寄出快递
+        </el-button>
+      </div>
+    </div>
+    <div class="consign_content">
+      <el-card class="box-card" style="width: 55%; height: calc(100vh - 180px)">
+        <div slot="header" class="clearfix">
+          <span style="font-weight: bold">退货单信息</span>
+        </div>
+        <div class="consign_content_item" style="height: calc(100vh - 240px)">
+          <div style="font-weight: bold">货品信息</div>
+          <div class="consign_content_item__text">{{ `货品名称：${consignDetail.name || '-'}` }}</div>
+          <div class="consign_content_item__image">
+            <div style="width: 120px">藏品图片/视频：</div>
+            <div class="image_content">
+              <div v-if="consignDetail.videosImageUrl" class="image_content_video" @click="showVideoDialog = true">
+                <img :src="consignDetail.videosImageUrl" class="image_content_video_item">
+                <img
+                  class="image_content_video_icon"
+                  src="https://cdn.wanwudezhi.com/static/web-static/image/10651432d8c28651da81753c260d81b3_120x120.png">
+              </div>
+              <div
+                v-for="(item, index) in consignDetail.imageList"
+                :key="item + index"
+                class="select_item"
+                @click="handleShowLargeDialog(item)">
+                <img :src="item" class="image_content_item">
+              </div>
+            </div>
+          </div>
+          <div class="consign_content_item__text">{{ `对应寄售单号：${returnDetail.consignSaledId || '-'}` }}</div>
+          <div class="consign_content_item__text">{{ returnDetail.cancelTypeName || '-' }}</div>
+          <div class="consign_content_item__text">{{ `${returnDetail.remark || '-'}` }}</div>
+
+          <el-divider />
+          <div v-if="userVo && (userVo.nickname || userVo.phone)" style="font-weight: bold">退货信息信息</div>
+          <div v-if="userVo.nickname" class="consign_content_item__text">{{ `昵称：${userVo.nickname || '-'}` }}</div>
+          <div v-if="userVo.phone" class="consign_content_item__text">{{ `手机号：${userVo.phone || '-'}` }}</div>
+          <div v-if="userVo.address" class="consign_content_item__text">{{ `收货地址：${userVo.address || '-'}` }}</div>
+          <el-divider />
+          <div v-if="payInfo && (payInfo.name || payInfo.phone || payInfo.settleAmount)" style="font-weight: bold">转账信息</div>
+          <div v-if="payInfo && (payInfo.name || payInfo.phone || payInfo.settleAmount)" class="consign_content_item__text">{{ `向${payInfo.name || '-'}（手机号：${payInfo.phone || '-'}）转账${payInfo.settleAmount || '-'}元` }}</div>
+          <div v-if="payInfo && payInfo.imageList && payInfo.imageList.length > 0" class="consign_content_item__image">
+            <div style="width: 60px">凭证:</div>
+            <div class="image_content">
+              <div
+                v-for="(item, index) in payInfo.imageList"
+                :key="item + index"
+                class="select_item"
+                @click="handleShowLargeDialog(item)">
+                <img :src="item" class="image_content_item">
+              </div>
+            </div>
+          </div>
+        </div>
+      </el-card>
+      <el-card class="box-card" style="width: 45%;height: calc(100vh - 180px);margin-left: 20px">
+        <div slot="header" class="clearfix">
+          <span style="font-weight: bold">寄售单时间线</span>
+        </div>
+        <div class="consign_step" style="height: calc(100vh - 240px)">
+          <el-steps :active="1" direction="vertical" >
+            <el-step
+              v-for="(item, indexNumber) in consignSaleRecordVoList"
+              :key="indexNumber"
+              :title="item.typeName"
+              :description="(item.content ? item.content + '\n' : '' ) + (item.remark ? item.remark + '\n' : '' ) + item.createTime" />
+          </el-steps>
+        </div>
+      </el-card>
+    </div>
+    <CheckLargeImageDialog
+      :show-large-dialog="showLargeDialog"
+      :image-url="imageUrl"
+      @closeLargeDialog="showLargeDialog = false"
+    />
+    <CheckVideoDialog
+      :show-video-dialog="showVideoDialog"
+      :video-url="consignDetail.videosUrl"
+      @closeLargeDialog="showVideoDialog = false" />
+  </div>
+</template>
+
+<script>
+import { returnOrderDetail } from '@/api/business/consign'
+import CheckLargeImageDialog from '../goods/components/CheckLargeImageDialog'
+import CheckVideoDialog from '../goods/components/CheckVideoDialog'
+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'
+
+export default {
+  name: 'ConsignBackDetail',
+  components: { NormalCountdown, CancelConsignDialog, FinishSettlementDialog, SaleConsignDialog, ImageValueDialog, IdentifyValueDialog, CheckVideoDialog, CheckLargeImageDialog },
+  data() {
+    return {
+      returnOrderId: '',
+      returnDetail: {},
+      consignDetail: {},
+      userVo: {},
+      payInfo: {},
+      isHasPrice: false,
+      consignSaleRecordVoList: [],
+      imageValueForm: {
+        imgValuation: '',
+        remark: ''
+      },
+      // 图文估价
+      imageValueDialogShow: false,
+
+      // 实物估价
+      identifyValueDialogShow: false,
+
+      // 货品售出
+      finishDialogShow: false,
+      // 寄售凭证
+      finishSettlementDialogShow: false,
+      // 取消
+      cancelConsignDialogShow: false,
+
+      imageUrl: '',
+      showLargeDialog: false,
+      showVideoDialog: false,
+      videoUrl: ''
+
+    }
+  },
+
+  created() {
+    if (this.$route.query.returnOrderId == null) {
+      return
+    }
+    this.returnOrderId = this.$route.query.returnOrderId
+    this.timeStr = this.$route.query.timeStr
+    const loading = this.$loading({
+      lock: true,
+      text: 'Loading',
+      spinner: 'el-icon-loading',
+      background: 'rgba(0, 0, 0, 0.7)'
+    })
+    this.handleGetDetail(loading)
+  },
+  methods: {
+    handleGetDetail(loading) {
+      returnOrderDetail({ returnOrderId: this.returnOrderId })
+        .then(response => {
+          if (loading) {
+            loading.close()
+          }
+          this.consignDetail = response.data.data.itemVo
+          this.returnDetail = response.data.data
+          this.userVo = response.data.data.userVo
+          this.payInfo = response.data.data.payInfo
+          if (response.data.data.payInfo && response.data.data.payInfo.credential) {
+            this.payInfo.imageList = response.data.data.payInfo.credential.split(';')
+          }
+          if (this.consignDetail.images) {
+            this.consignDetail.imageList = this.consignDetail.images.split(';') || []
+          }
+          if (this.consignDetail.videos) {
+            const list = this.consignDetail.videos.split(',')
+            if (list && list.length > 1) {
+              this.consignDetail.videosUrl = list[0]
+              this.consignDetail.videosImageUrl = list[1]
+            }
+          }
+
+          if (this.consignDetail.categoryNames && this.consignDetail.categoryNames.length > 0) {
+            let categoryStr = ''
+            this.consignDetail.categoryNames.map((item, index) => {
+              const tip = this.consignDetail.categoryNames.length !== index + 1 ? '/' : ''
+              categoryStr = categoryStr.concat(item + tip)
+            })
+            this.consignDetail.categoryNamesStr = categoryStr
+          }
+          if (response.data.data.returnOrderRecordVoList) {
+            this.consignSaleRecordVoList = response.data.data.returnOrderRecordVoList.reverse()
+          }
+          this.$nextTick(() => {
+            var x = document.querySelectorAll('.el-step__icon-inner')
+            x.forEach((item, index) => {
+              item.innerHTML = x.length - index
+            })
+          })
+        })
+        .catch(response => {
+          if (loading) {
+            loading.close()
+          }
+        })
+    },
+    handleShowLargeDialog(imageUrl) {
+      this.imageUrl = imageUrl
+      this.showLargeDialog = true
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+/deep/ .el-step__description {
+  white-space: pre-wrap;
+  padding-bottom: 30px;
+}
+
+.page_consignDetail {
+  padding: 0 20px 20px;
+
+  .consign_top {
+    display: flex;
+    flex-direction: row;
+    height: 60px;
+    align-items: center;
+  }
+
+  .consign_content {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: row;
+
+    .consign_content_item__text {
+      margin-top: 14px;
+      font-size:15px;
+    }
+
+    .consign_content_item__image {
+      margin-top: 10px;
+      display: flex;
+      flex-direction: row;
+
+      .image_content {
+        display: flex;
+        flex-direction: row;
+
+        .image_content_video {
+          position: relative;
+
+          .image_content_video_item {
+            width: 90px;
+            height: 90px;
+            object-fit: cover;
+            margin-right: 10px;
+          }
+
+          .image_content_video_icon {
+            width: 25px;
+            height: 25px;
+            position: absolute;
+            top: 5px;
+            left: 5px;
+          }
+        }
+
+        .image_content_item {
+          width: 90px;
+          height: 90px;
+          object-fit: cover;
+          margin-right: 10px;
+        }
+
+      }
+
+    }
+  }
+  .consign_content_item {
+    overflow: auto;
+    padding-bottom: 80px;
+  }
+  .consign_step {
+    overflow: 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>