feat:UI优化&添加交换单发货弹窗

src/views/goods/infoSet.vue

@@ -27,9 +27,7 @@
               <template slot="append">元</template>
             </el-input>
           </el-form-item>
-          <el-form-item label="详细介绍：" prop="detail">
-            <el-input v-model="goodsParams.detail" :rows="2" type="textarea" placeholder="请输入藏品描述"/>
-          </el-form-item>
+          <el-form-item label="详细介绍：" prop="detail"/>
           <el-form-item label="交易日期：" prop="bidTime">
             <el-date-picker
               v-model="goodsParams.bidTime"

src/views/order/ChangeOrderDetailnew.vue

 <template>
   <div class="page_transferDetail">
-    <div v-if="itemContent && itemContent.distributionOrderId" class="detail_button">
-    </div>
+    <div v-if="itemContent && itemContent.distributionOrderId" class="detail_button"/>
     <el-card class="box-card" style="margin:16px">
       <div v-if="itemContent && itemContent.exchangeApplyOrderId" class="detail_button">
-      <el-button
-        v-if="(itemContent.state=== 1)"
-        type="primary"
-        size="mini"
-        @click="handlePass()">通过
-      </el-button>
-      <el-button
-        v-if="(itemContent.state=== 1)"
-        type="danger"
-        size="mini"
-        @click="handleNoPass()">不通过
-      </el-button>
-    </div>
+        <el-button
+          v-if="(itemContent.state=== 1)"
+          type="primary"
+          size="mini"
+          @click="handlePass()">通过
+        </el-button>
+        <el-button
+          v-if="(itemContent.state=== 1)"
+          type="danger"
+          size="mini"
+          @click="handleNoPass()">不通过
+        </el-button>
+      </div>
       <div class="title">
         <div class="title_content">交换单信息</div>
         <el-button v-if="itemContent.transferStateName" type="warning" plain size="mini">{{ itemContent.transferStateName }}</el-button>
@@ -45,13 +44,13 @@
         <el-button v-if="itemContent.transferStateName" type="warning" plain size="mini">{{ itemContent.transferStateName }}</el-button>
       </div>
       <div v-if="itemContent && itemContent.userCommitOrderInfo.distributionOrderId" class="detail_button">
-      <el-button
-        v-if="(itemContent.userCommitOrderInfo.state === 10)"
-        type="primary"
-        size="mini"
-        @click="handleSend(3)">去发货
-      </el-button> 
-    </div>
+        <el-button
+          v-if="(itemContent.userCommitOrderInfo.state === 10)"
+          type="primary"
+          size="mini"
+          @click="handleSend(3)">去发货
+        </el-button>
+      </div>
       <div class="user_info flex">
         <el-form ref="addInviteRef" label-width="120px" style="width: 30%">
           <el-form-item label="用户ID：">
@@ -95,7 +94,7 @@
             <div>{{ itemContent && itemContent.userCommitOrderInfo.itemVoList[0].officialEstimatedPrice || '-' }}</div>
           </el-form-item>
         </el-form>
-        
+
       </div>
       <div class="user_info flex" >
         <el-form ref="addInviteRef" label-width="120px" >
@@ -103,31 +102,30 @@
             <div>{{ itemContent && itemContent.userCommitOrderInfo.itemVoList[0].description || '-' }}</div>
           </el-form-item>
 
-          <el-form-item label="商品图片/视频：">       
-          </el-form-item>
+          <el-form-item label="商品图片/视频："/>
         </el-form>
       </div>
     </el-card>
-    
+
     <el-card class="box-card" style="margin: 16px">
       <div class="title">
         <div class="title_content">受理者用户相关信息</div>
         <el-button v-if="itemContent.transferStateName" type="warning" plain size="mini">{{ itemContent.transferStateName }}</el-button>
       </div>
       <div v-if="itemContent && itemContent.receiveTargetOrderInfo.distributionOrderId" class="detail_button">
-      <el-button
-        v-if="(itemContent.userCommitOrderInfo.state === 10)"
-        type="primary"
-        size="mini"
-        @click="handleSend(1)">去发货
-      </el-button>
-      <el-button
-        v-if="(itemContent.transferState === 15)"
-        type="primary"
-        size="mini"
-        @click="handleSend(2)">退回藏品
-      </el-button>
-    </div>
+        <el-button
+          v-if="(itemContent.receiveTargetOrderInfo.state === 10)"
+          type="primary"
+          size="mini"
+          @click="handleSend(1)">去发货
+        </el-button>
+        <el-button
+          v-if="(itemContent.transferState === 15)"
+          type="primary"
+          size="mini"
+          @click="handleSend(2)">退回藏品
+        </el-button>
+      </div>
       <div class="user_info flex">
         <el-form ref="addInviteRef" label-width="120px" style="width: 30%">
           <el-form-item label="用户ID：">
@@ -171,7 +169,7 @@
             <div>{{ itemContent && itemContent.receiveTargetOrderInfo.itemVoList[0].officialEstimatedPrice || '-' }}</div>
           </el-form-item>
         </el-form>
-        
+
       </div>
       <div class="user_info flex" >
         <el-form ref="addInviteRef" label-width="120px" >
@@ -196,10 +194,10 @@
       @refreshItem="handleRefreshItem"
       @cancelDialog="showNoPassIdentifyDialog = false"
     />
-    <ReturnLogisticIdentifyDialog
+    <ExchangeLogisticIdentifyDialog
       v-if="logisticDialogShow"
       :logistic-dialog-show="logisticDialogShow"
-      :distribution-order-id="itemContent.distributionOrderId"
+      :distribution-order-id="distributionOrderId"
       :identify-order-id="itemContent.identifyOrderId"
       :type="logisticType"
       @cancelDialog="handleCancelLogisticDialog"
@@ -212,10 +210,12 @@
 import Line2Hidden from '@/components/line2Hidden'
 import NoPassIdentifyDialog from './components/NoPassIdentifyDialog'
 import ReturnLogisticIdentifyDialog from './components/ReturnLogisticIdentifyDialog'
-import { requestSigned, requestIdentify,exchangeApplyOrderDetail,exchangeApplyOrderIdentify } from '@/api/business/order'
+import { requestSigned, exchangeApplyOrderDetail, exchangeApplyOrderIdentify } from '@/api/business/order'
+import ExchangeLogisticIdentifyDialog from './components/ExchangeLogisticIdentifyDialog'
+import ExchangeItemListView from './components/exchangeItemListView'
 export default {
   name: 'ChangeOrderDetailnew',
-  components: { ReturnLogisticIdentifyDialog, NoPassIdentifyDialog, Line2Hidden },
+  components: { ExchangeItemListView, ExchangeLogisticIdentifyDialog, ReturnLogisticIdentifyDialog, NoPassIdentifyDialog, Line2Hidden },
   data() {
     return {
       itemContent: {},
@@ -256,27 +256,27 @@ export default {
         }
         this.list = [model]
         this.itemContent.images = response.data.data.images ? response.data.data.images.split(';') : []
-            const imageList = []
-            if (this.itemContent.videos) {
-              const videoList = this.itemContent.videos.split(',')
-              if (videoList.length === 2) {
-                imageList.push({
-                  url: videoList[1],
-                  type: 1,
-                  videoUrl: videoList[0]
-                })
-              }
-            }
-            if (this.itemContent.images && this.itemContent.images.length > 0) {
-              for (var i = 0; i < this.itemContent.images.length; i++) {
-                imageList.push({
-                  url: this.itemContent.images[i],
-                  videoUrl: '',
-                  type: 2
-                })
-              }
-            }
-            this.itemContent.imagelist = imageList      
+        const imageList = []
+        if (this.itemContent.videos) {
+          const videoList = this.itemContent.videos.split(',')
+          if (videoList.length === 2) {
+            imageList.push({
+              url: videoList[1],
+              type: 1,
+              videoUrl: videoList[0]
+            })
+          }
+        }
+        if (this.itemContent.images && this.itemContent.images.length > 0) {
+          for (var i = 0; i < this.itemContent.images.length; i++) {
+            imageList.push({
+              url: this.itemContent.images[i],
+              videoUrl: '',
+              type: 2
+            })
+          }
+        }
+        this.itemContent.imagelist = imageList
       }).catch((e) => {
         console.log('===报错=', e)
         this.$message.error(e.data && e.data.errmsg || '请求失败， 请重试')
@@ -334,7 +334,7 @@ export default {
     /**
      * 不通过
      */
-     handleNoPass() {
+    handleNoPass() {
       this.$confirm('该藏品确定通过平台鉴定？', '平台鉴定结果', {
         confirmButtonText: '确定',
         cancelButtonText: '取消',
@@ -367,6 +367,14 @@ export default {
      * @param row type: 1平台发货 2退回藏品
      */
     handleSend(type) {
+      if (type === 3) {
+        this.distributionOrderId = this.itemContent && this.itemContent.userCommitOrderInfo && this.itemContent.userCommitOrderInfo.distributionOrderId
+      } else if (type === 2) {
+        this.distributionOrderId = this.itemContent && this.itemContent.receiveTargetOrderInfo && this.itemContent.receiveTargetOrderInfo.distributionOrderId
+      }
+      if (!this.distributionOrderId) {
+        return
+      }
       this.logisticDialogShow = true
       this.logisticType = type
     },
@@ -389,11 +397,11 @@ export default {
     handleCancelNoPassDialog() {
       this.handleGetDetail()
     },
-        /**
+    /**
      * 展示大图
      * @param imageUrl
      */
-     handleShowLargeDialog(type, imageUrl, videoUrl) {
+    handleShowLargeDialog(type, imageUrl, videoUrl) {
       if (type === 1) {
         this.videosUrl = videoUrl
         this.showVideoDialog = true
@@ -402,7 +410,6 @@ export default {
         this.showLargeDialog = true
       }
     }
-    
   }
 }
 </script>

src/views/order/UserChangeOrderView.vue

@@ -2,7 +2,12 @@
   <div class="page_consignList">
     <div class="filter-container">
       <div class="button_left">
-        <el-input v-model="listQuery.exchangeApplyOrderId" clearable class="filter-item" style="width: 200px;" placeholder="请输入交换编号"/>
+        <el-input
+          v-model="listQuery.exchangeApplyOrderId"
+          clearable
+          class="filter-item"
+          style="width: 200px;"
+          placeholder="请输入交换编号" />
         <el-input
           v-model="listQuery.distributionOrderId"
           clearable
@@ -15,11 +20,27 @@
             :key="item.label"
             :label="item.label"
             :value="item.value"
-            size="mini"/>
+            size="mini" />
         </el-select>
-        <el-input v-model="listQuery.itemName" clearable class="filter-item" style="width: 200px;" placeholder="请输入申请方藏品名称"/>
-        <el-input v-model="listQuery.sellerName" clearable class="filter-item" style="width: 200px;" placeholder="请输入受理方藏家名称"/>
-        <el-button class="filter-item" type="primary" icon="el-icon-search" style="margin-left: 12px" @click="handleFilter">查找</el-button>
+        <el-input
+          v-model="listQuery.itemName"
+          clearable
+          class="filter-item"
+          style="width: 200px;"
+          placeholder="请输入申请方藏品名称" />
+        <el-input
+          v-model="listQuery.sellerName"
+          clearable
+          class="filter-item"
+          style="width: 200px;"
+          placeholder="请输入受理方藏家名称" />
+        <el-button
+          class="filter-item"
+          type="primary"
+          icon="el-icon-search"
+          style="margin-left: 12px"
+          @click="handleFilter">查找
+        </el-button>
         <el-button class="filter-item" @click="resetSearchForm">重置</el-button>
       </div>
     </div>
@@ -51,10 +72,10 @@
           </div>
         </template>
       </el-table-column>
-  
+
       <el-table-column align="center" label="申请方藏品名称" min-width="200px" prop="userExchangeItemName">
         <template slot-scope="scope">
-          <div class="user_self" @click="handleToDetailuser(scope.row)">{{ scope.row.userItemList[0].name}}</div>
+          <div class="user_self" @click="handleToDetailuser(scope.row)">{{ scope.row.userItemList[0].name }}</div>
         </template>
       </el-table-column>
       <el-table-column align="center" label="受理方藏品图片" min-width="120px" prop="homePageImage">
@@ -71,7 +92,7 @@
       </el-table-column>
       <el-table-column align="center" label="受理方藏品标题" min-width="200px" prop="name">
         <template slot-scope="scope">
-          <div class="user_self" @click="handleToDetail(scope.row)">{{ scope.row.targetItemList[0].name}}</div>
+          <div class="user_self" @click="handleToDetail(scope.row)">{{ scope.row.targetItemList[0].name }}</div>
         </template>
       </el-table-column>
       <!-- <el-table-column align="center" label="受理方藏品估价" prop="userExchangeItemOfficalPrice" /> -->
@@ -79,8 +100,8 @@
       <el-table-column align="center" label="订单状态" prop="stateName" />
       <!-- <el-table-column align="center" label="用户寄出物流公司" prop="fromLogisticsName">
       </el-table-column> -->
-       <!--  中转单状态 (12, "待平台收货"), (13, "平台鉴定中"), (14, "待平台发货"), (15, "待平台退回"), (16, "平台已发货"), (17, "退回待收货"), (18, "退回已收货"),-->
-       <el-table-column align="center" label="操作" width="200">
+      <!--  中转单状态 (12, "待平台收货"), (13, "平台鉴定中"), (14, "待平台发货"), (15, "待平台退回"), (16, "平台已发货"), (17, "退回待收货"), (18, "退回已收货"),-->
+      <el-table-column align="center" label="操作" width="200" fixed="right">
         <template slot-scope="scope">
           <el-button
             type="primary"
@@ -129,7 +150,7 @@ export default {
       listLoading: true,
       listQuery: {
         page: 1,
-        limit: 20,
+        limit: 20
       },
       list: [],
       total: 0,
@@ -155,7 +176,7 @@ export default {
     resetSearchForm() {
       this.listQuery = {
         page: 1,
-        limit: 20,
+        limit: 20
       }
       this.getList()
     },
@@ -173,10 +194,10 @@ export default {
       this.getList()
     },
     handleToDetail(item) {
-      this.$router.push({ path: '/sale/itemDetail', query: { id: item.targetItemList[0].itemId}})
+      this.$router.push({ path: '/sale/itemDetail', query: { id: item.targetItemList[0].itemId }})
     },
     handleToDetailuser(item) {
-      this.$router.push({ path: '/sale/itemDetail', query: { id: item.userItemList[0].itemId}})
+      this.$router.push({ path: '/sale/itemDetail', query: { id: item.userItemList[0].itemId }})
     },
     /**
      * 详情
@@ -190,7 +211,10 @@ export default {
      * @param item
      */
     handleToOrderDetailnew(item) {
-      this.$router.push({ path: '/order/ChangeOrderDetailnew', query: { exchangeApplyOrderId: item.exchangeApplyOrderId }})
+      this.$router.push({
+        path: '/order/ChangeOrderDetailnew',
+        query: { exchangeApplyOrderId: item.exchangeApplyOrderId }
+      })
     },
     getList() {
       this.listLoading = true
@@ -221,23 +245,27 @@ export default {
 
 .page_consignList {
   padding: 20px;
+
   .filter-container {
     display: flex;
     flex-direction: row;
     justify-content: space-between;
   }
 }
+
 .image_preview {
-    width: 60px;
-    height: 60px;
-    align-content: center;
-    justify-content: center;
-  }
-  .user_self {
-    color: #409EFF;
-  }
-  .table-td-thumb {
-    width: 60px;
-    height: 60px;
-  }
+  width: 60px;
+  height: 60px;
+  align-content: center;
+  justify-content: center;
+}
+
+.user_self {
+  color: #409EFF;
+}
+
+.table-td-thumb {
+  width: 60px;
+  height: 60px;
+}
 </style>

src/views/order/components/ExchangeLogisticIdentifyDialog.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="outLogisticsCode">
+        <el-select v-model="logisticForm.logisticsCode" placeholder="请选择物流公司" style="width: 240px;margin-right: 10px;margin-bottom: 10px">
+          <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="outWaybill">
+        <el-input
+          v-model="logisticForm.waybill"
+          clearable
+          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 { requestIdentifyDelivery, requestIdentifySendBack, requestLogisticsList, requestDelivery } from '@/api/business/order'
+export default {
+  name: 'ExchangeLogisticIdentifyDialog',
+  props: {
+    logisticDialogShow: {
+      type: Boolean,
+      default: false
+    },
+    distributionOrderId: {
+      type: String,
+      default: ''
+    },
+    identifyOrderId: {
+      type: String,
+      default: ''
+    },
+    type: {
+      type: Number,
+      default: 1
+    }
+  },
+  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': 'YD',
+          'name': '韵达快递'
+        }
+      ]
+    }
+  },
+  created() {
+    this.getLogisticsList()
+  },
+  methods: {
+    handleCancelLogisticDialog() {
+      this.$emit('cancelDialog')
+    },
+    /**
+     * 获取物流公司列表
+     */
+    getLogisticsList() {
+      requestLogisticsList().then((response) => {
+        console.log('==response===', response)
+        this.logisticList = response.data.data
+      }).catch((err) => {
+        console.log('==err===', err)
+      })
+    },
+    /**
+     * 实物评估
+     */
+    handleLogistic() {
+      const params = { ...this.logisticForm, distributionOrderId: this.distributionOrderId, identifyOrderId: this.identifyOrderId }
+      this.$refs.imageValue.validate((valid) => {
+        if (valid) {
+          if (this.type === 1) {
+            requestIdentifyDelivery(params)
+              .then(response => {
+                this.itemContent = {}
+                this.logisticForm = {}
+                this.$notify.success({
+                  message: '发货成功'
+                })
+                this.$emit('refreshDelivery')
+              })
+              .catch(response => {
+                MessageBox.alert('业务错误：' + response.data.errmsg, '警告', {
+                  confirmButtonText: '确定',
+                  type: 'error'
+                })
+              })
+          } if (this.type === 3) {
+            requestDelivery(params)
+              .then(response => {
+                this.itemContent = {}
+                this.logisticForm = {}
+                this.$notify.success({
+                  message: '发货成功'
+                })
+                this.$emit('refreshDelivery')
+              })
+              .catch(response => {
+                MessageBox.alert('业务错误：' + response.data.errmsg, '警告', {
+                  confirmButtonText: '确定',
+                  type: 'error'
+                })
+              })
+          } else {
+            requestIdentifySendBack(params)
+              .then(response => {
+                this.itemContent = {}
+                this.logisticForm = {}
+                this.$notify.success({
+                  message: '退回成功'
+                })
+                this.$emit('refreshSendBack')
+              })
+              .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/order/components/exchangeItemListView.vue

+<template>
+  <div/>
+
+</template>
+
+<script>
+export default {
+  name: 'ExchangeItemListView',
+  props: {
+    itemList: {
+      type: Array,
+      default: () => {
+        return []
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>