add

babel.config.js

@@ -1,5 +1,6 @@
 module.exports = {
   presets: [
     '@vue/app'
-  ]
+  ],
+  plugins: ["@babel/plugin-proposal-optional-chaining"]
 }

package.json

@@ -94,6 +94,7 @@
   },
   "devDependencies": {
     "@babel/core": "7.0.0",
+    "@babel/plugin-proposal-optional-chaining": "^7.21.0",
     "@babel/register": "7.0.0",
     "@vue/cli-plugin-babel": "3.5.3",
     "@vue/cli-plugin-eslint": "^3.9.1",

src/api/order.js

@@ -15,6 +15,24 @@ import request from './request'
 export function orderListApi(data) {
   return request.get('order/lst', data)
 }
+/**
+ * @description 退款订单 -- 详情
+ */
+export function refundorderDetailApi(id) {
+  return request.get(`order/refund/detail/${id}`)
+}
+/**
+ * @description 退款订单 -- 记录from
+ */
+export function refundorderLogApi(id) {
+  return request.get(`order/refund/log/${id}`)
+}
+/**
+ * @description 退款订单 -- 审核from
+ */
+export function refundorderStatusApi(id) {
+  return request.get(`order/refund/status/${id}/form`)
+}
 /**
  * @description 开启退款
  */

src/views/accounts/transferRecord/index.vue

@@ -160,7 +160,7 @@
         <el-table-column prop="mer_money" label="商户余额（元）" min-width="120"/>
         <el-table-column label="操作" min-width="180" fixed="right">
           <template slot-scope="scope">
-            <el-button v-if="scope.row.status == 0" type="text" size="small" @click="transferDetail(scope.row.financial_id)">审核</el-button>
+            <el-button v-if="scope.row.status == 0" type="text" size="small" @click="transferDetail(scope.row.financial_id)">{{ getStatusName(scope.row.status) }}</el-button>
             <el-button v-if="scope.row.status == 1 && scope.row.financial_status != 1" type="text" size="small" @click="transferDetail(scope.row.financial_id,1)">转账</el-button>
             <el-button v-if="scope.row.status == 1 && scope.row.financial_status == 1" type="text" size="small" @click="transferDetail(scope.row.financial_id,0)">转账信息</el-button>
             <el-button type="text" size="small" @click="transferMark(scope.row.financial_id)">备注</el-button>
@@ -339,6 +339,16 @@ export default {
     this.getHeaderData();
   },
   methods: {
+    getStatusName(val){
+      switch (val) {
+        case 0:
+          return '初始审核';
+        case 10:
+            return '第二步审核';
+        case 11:
+            return '最终审核';
+      }
+    },
     /**重置 */
     searchReset(){
       this.timeVal = []

src/views/merchant/list/handle/merDetails.vue

@@ -170,7 +170,6 @@ export default {
           if(!res.data.financial_bank){
             this.merData.financial_bank = financial_bank;
           }
-          console.log(this.merData);
           if(!this.isEdit)this.$refs.merInfo.onOperateLog(this.merId);
         })
         .catch((res) => {
@@ -179,7 +178,12 @@ export default {
     },
     initData(){
       this.merData = {
-        is_trader:0
+        is_trader:0,
+        financial_bank:{
+          name:'',
+          bank:'',
+          bank_code:'',
+        }
       }
       this.isEdit = false;
       this.isAdd = true;

src/views/merchant/list/handle/merEditForm.vue

@@ -129,6 +129,17 @@
                 />
               </el-form-item>
             </el-col>
+            <el-col :span="12">
+              <el-form-item label="每日提现额度：" prop="exchange_limit">
+                <el-input
+                  size="small"
+                  oninput ="value=value.replace(/[^\d]/g,'')"
+                  v-model="merData.exchange_limit"
+                  placeholder="请输入每日提现额度"
+                  class="selWidth"
+                />
+              </el-form-item>
+            </el-col>
           </el-row>
           <div class="title">银行卡信息</div>
           <el-row v-if="merData.financial_bank">
@@ -158,6 +169,7 @@
               <el-form-item label="开户银行卡号：" prop="financial_bank.bank_code">
                 <el-input
                   size="small"
+                  oninput ="value=value.replace(/[^\d]/g,'')"
                   v-model="merData.financial_bank.bank_code"
                   placeholder="请输入开户银行卡号"
                   class="selWidth"

src/views/merchant/list/handle/merInfo.vue

@@ -50,13 +50,38 @@
               <div>更新时间：</div>
               <div class="value">{{merData.update_time}}</div>
             </li>
+            <li class="item">
+              <div>每日提现额度：</div>
+              <div class="value">{{merData.exchange_limit}}</div>
+            </li>
             <li class="item">
               <div>备注：</div>
               <div class="value">{{merData.mark}}</div>
             </li>
             <li class="item" style="align-content: center;">
               <div>营业执照：</div>
-              <el-image style="width: 60px;height: 60px;" :src="merData.ext.company_image[0]" :preview-src-list="merData.ext.company_image" />
+              <el-image v-for="(item,index) in companyImage" :key="index" style="width: 60px;height: 60px;" :src="item" :preview-src-list="companyImage" />
+            </li>
+          </ul>
+          <div class="title" style="margin-top: 10px;">银行卡信息</div>
+          <ul class="list">
+            <li class="item">
+              <div>名称：</div>
+              <div class="value">
+                {{merData.financial_bank&&merData.financial_bank.name}}
+              </div>
+            </li>
+            <li class="item">
+              <div>开户银行：</div>
+              <div class="value">
+                {{merData.financial_bank&&merData.financial_bank.bank}}
+              </div>
+            </li>
+            <li class="item">
+              <div>开户卡号：</div>
+              <div class="value">
+                {{merData.financial_bank&&merData.financial_bank.bank_code}}
+              </div>
             </li>
           </ul>
         </div>
@@ -318,6 +343,11 @@ export default {
   },
   filters: {
   },
+  computed: {
+    companyImage(){
+      return this.merData.ext?.company_image
+    }
+  },
   methods: {
     lookImg(item) {
       this.imageUrl = item;

src/views/merchant/list/index.vue

@@ -106,6 +106,16 @@
       >
         <el-table-column prop="mer_id" label="ID" min-width="60" />
         <el-table-column prop="mer_name" label="商户名称" min-width="150" />
+        <el-table-column prop="is_huimei" label="是否惠美乡村" min-width="100">
+          <template slot-scope="scope">
+            <span>{{scope.row.is_huimei == 1 ? '是' : '否'}}</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="is_soldier" label="是否军人" min-width="80">
+          <template slot-scope="scope">
+            <span>{{scope.row.is_soldier == 1 ? '是' : '否'}}</span>
+          </template>
+        </el-table-column>
         <el-table-column prop="real_name" label="商户姓名" min-width="150" />
         <el-table-column prop="status" label="推荐" min-width="100">
           <template slot-scope="scope">

src/views/order/refund/index.vue

@@ -153,6 +153,8 @@
               size="small"
               @click="onOrderDetail(scope.row.order.order_sn)"
             >订单详情</el-button>
+            <el-button v-if="scope.row.status === 0" type="text" size="small" @click="onOrderStatus(scope.row.refund_order_id)">退款</el-button>
+            <el-button type="text" size="small" @click="onRefundOrderDetail(scope.row.refund_order_id)">退款单详情</el-button>
           </template>
         </el-table-column>
       </el-table>
@@ -170,6 +172,8 @@
     </el-card>
     <!--导出订单列表-->
     <file-list ref="exportList" />
+     <!--详情-->
+     <details-from ref="orderDetail" :order-datalist="orderDatalist" @get-logistics="openLogistics" />
   </div>
 </template>
 
@@ -186,15 +190,18 @@
 import {
   refundorderListApi,
   orderUpdateApi,
+  refundorderStatusApi,
+  refundorderDetailApi,
   orderDeliveryApi, exportRefundOrderApi
 } from "@/api/order";
 import createWorkBook from '@/utils/newToExcel.js';
+import detailsFrom from './refundDetail'
 import { fromList } from "@/libs/constants.js";
 import fileList from '@/components/exportFile/fileList'
 import { roterPre } from "@/settings";
 import timeOptions from '@/utils/timeOptions';
 export default {
-  components: { fileList },
+  components: { fileList,detailsFrom },
   name: "OrderRefund",
   data() {
     return {
@@ -232,6 +239,9 @@ export default {
       dialogVisible: false,
       cardLists: [],
       orderDatalist: null,
+      orderDetails: {},
+      result: [],
+      dialogLogistics:false
     };
   },
   mounted() {
@@ -252,6 +262,45 @@ export default {
     this.getList('');
   },
   methods: {
+     // 退款
+    onOrderStatus(id) {
+      this.$modalForm(refundorderStatusApi(id)).then(() => this.getList(''))
+    },
+        // 详情
+    onRefundOrderDetail(id) {
+      this.orderId = id
+      this.$refs.orderDetail.dialogVisible = true
+      this.loading = true
+      refundorderDetailApi(id)
+        .then(res => {
+          this.orderDatalist = res.data
+          this.loading = false
+          this.$refs.orderDetail.onOrderLog(id)
+        })
+        .catch(({ message }) => {
+          this.loading = false
+          this.$message.error(message)
+        })
+    },
+    openLogistics(row) {
+      this.orderDetails = row
+      this.getOrderData(row.refund_order_id)
+      this.dialogLogistics = true
+    },
+    handleClose() {
+      this.dialogLogistics = false
+      this.dialogConfirm = false
+    },
+        // 获取订单物流信息
+    getOrderData(id) {
+      refundorderExpressApi(id)
+        .then(async res => {
+          this.result = res.data
+        })
+        .catch(res => {
+          this.$message.error(res.message)
+        })
+    },
     /**重置 */
     searchReset(){
       this.timeVal = []

src/views/order/refund/refundDetail.vue

@@ -0,0 +1,192 @@
+<template>
+  <el-dialog
+    v-if="orderDatalist"
+    v-loading="loading"
+    title="退款单信息"
+    :visible.sync="dialogVisible"
+    width="700px"
+  >
+    <div class="description">
+      <div class="title">用户信息</div>
+      <div class="acea-row">
+        <div class="description-term">用户昵称：{{ orderDatalist.user.nickname }}</div>
+        <div class="description-term">退货人：{{ orderDatalist.order.real_name }}</div>
+        <div class="description-term">联系电话：{{ orderDatalist.order.user_phone }}</div>
+        <div class="description-term">退货地址：{{ orderDatalist.order.user_address }}</div>
+        <div class="description-term">备注：{{ orderDatalist.mark }}</div>
+      </div>
+      <el-divider />
+      <div class="title">{{orderDatalist.refund_type == 1 ? '退款信息' : '退回商品信息'}}</div>
+      <div class="acea-row">
+        <div class="description-term">订单编号：{{ orderDatalist.order.order_sn }}</div>
+        <div class="description-term">订单状态：{{ orderDatalist.status | orderRefundFilter }}</div>
+        <div class="description-term100">退款单号：{{ orderDatalist.refund_order_sn }}</div>
+        <div class="description-term100">退款商品名称：
+            <div class="product_name">
+                <div v-for="(item,index) in orderDatalist.refundProduct" :key="index">
+                    <span v-if="item.product && item.product.cart_info && item.product.cart_info.product">{{item.product.cart_info.product.store_name}}</span>
+                 </div>
+            </div>           
+        </div>
+        <div class="description-term">退款发起方：{{ orderDatalist.create_user }}</div>
+        <div class="description-term">退款商品件数：{{ orderDatalist.refund_num }}件</div>
+        <div class="description-term">退款总金额：{{ orderDatalist.refund_price }}元</div>
+        <div v-if="orderDatalist.delivery_id" class="description-term">退货快递单号：{{ orderDatalist.delivery_id }}</div>
+        <div class="description-term">创建时间：{{ orderDatalist.create_time }}</div>
+        <div class="description-term">商家备注：{{ orderDatalist.mer_mark }}</div>
+        <div class="description-term100">退款凭证：
+          <div class="product_name" style="margin-left: 70px;">
+            <div class="demo-image__preview">
+            <el-image
+              v-for="(item,index) in orderDatalist.pics"
+              :key="index"
+              :src="item"
+              class="mr5"
+              :preview-src-list="[item]"
+            />
+          </div>
+          </div>  
+        </div>
+      </div>
+      <el-divider />
+      <div class="title">订单记录</div>
+      <el-table v-loading="LogLoading" border :data="tableDataLog.data" style="width: 100%">
+        <el-table-column prop="order_id" align="center" label="退款单ID" min-width="80" />
+        <el-table-column prop="change_message" label="操作记录" align="center" min-width="280" />
+        <el-table-column prop="change_time" label="操作时间" align="center" min-width="280" />
+      </el-table>
+      <div class="block">
+        <el-pagination
+          :page-size="tableFromLog.limit"
+          :current-page="tableFromLog.page"
+          layout="prev, pager, next, jumper"
+          :total="tableDataLog.total"
+          @size-change="handleSizeChangeLog"
+          @current-change="pageChangeLog"
+        />
+      </div>
+      <el-divider />
+      <div v-if="(orderDatalist.status == 2 || orderDatalist.status == 3) && orderDatalist.refund_type == 2">
+        <div class="title">退货物流信息</div>
+        <div class="acea-row">
+          <div class="description-term">
+            快递公司：{{ orderDatalist.delivery_type }}
+            <el-button size="small" type="text" style="margin-left: 10px;" @click="getLoginstics">物流查询</el-button>
+          </div>
+          <div class="description-term">快递单号：{{ orderDatalist.delivery_id }}</div>
+          
+        </div>
+      </div>
+    </div>
+  </el-dialog>
+</template>
+<script>
+// +----------------------------------------------------------------------
+// | CRMEB [ CRMEB赋能开发者，助力企业发展 ]
+// +----------------------------------------------------------------------
+// | Copyright (c) 2016~2024 https://www.crmeb.com All rights reserved.
+// +----------------------------------------------------------------------
+// | Licensed CRMEB并不是自由软件，未经许可不能去掉CRMEB相关版权
+// +----------------------------------------------------------------------
+// | Author: CRMEB Team <admin@crmeb.com>
+// +----------------------------------------------------------------------
+import {
+  refundorderLogApi
+} from '@/api/order'
+export default {
+  name: 'OrderDetail',
+  props: {
+    orderDatalist: {
+      type: Object,
+      default: null
+    }
+  },
+  data() {
+    return {
+      dialogVisible: false,
+      LogLoading: false,
+      // orderDatalist: null,
+      loading: false,
+      listLoading: true,
+      order_id: '',
+      tableDataLog: {
+        data: [],
+        total: 0,
+      },
+      tableFromLog: {
+        page: 1,
+        limit: 5
+      },
+    }
+  },
+  mounted() {
+      
+   
+  },
+  methods: {
+    // 订单记录
+    onOrderLog(id) {
+      this.LogLoading = true
+      this.order_id = id;
+      refundorderLogApi(id, this.tableFromLog)
+        .then(res => {
+          this.tableDataLog.data = res.data.list
+          this.tableDataLog.total = res.data.count
+          this.LogLoading = false
+        })
+        .catch(res => {
+          this.$message.error(res.message)
+          this.LogLoading = false
+        })
+    },
+    /**查看物流 */
+    getLoginstics(){
+        this.$emit('get-logistics',this.orderDatalist)
+    },
+    pageChangeLog(page) {
+      this.tableFromLog.page = page
+      this.onOrderLog(this.order_id)
+    },
+    handleSizeChangeLog(val) {
+      this.tableFromLog.limit = val
+      this.onOrderLog(this.order_id)
+    },
+  }
+}
+</script>
+
+<style scoped lang="scss">
+  .title{
+    margin-bottom: 16px;
+    color: #17233d;
+    font-weight: 500;
+    font-size: 14px;
+  }
+  .description{
+    &-term {
+      display: table-cell;
+      padding-bottom: 10px;
+      line-height: 20px;
+      width: 50%;
+      font-size: 12px;
+    }
+  }
+ .description-term100{
+    display: table-cell;
+    padding-bottom: 10px;
+    line-height: 20px;
+    width: 100%;
+    font-size: 12px;
+ }
+ .product_name{
+     margin-left: 90px;
+     position: relative;
+     top: -20px;
+ }
+ .demo-image__preview {
+  .el-image,img{
+    width: 40px;
+    height: 40px;
+  }
+ }
+</style>

src/views/product/productExamine/index.vue

@@ -135,6 +135,7 @@
             <span>{{ scope.row.merchant ? scope.row.merchant.mer_name : '' }}</span>
           </template>
         </el-table-column>
+        <el-table-column prop="remark" label="商品备注" min-width="100" />
         <el-table-column label="是否惠美乡村产品" min-width="100">
           <template slot-scope="scope">
             <span>{{ scope.row.is_soldier ? '是' : '否' }}</span>

src/views/product/productExamine/info.vue

@@ -103,7 +103,7 @@
                 <el-image
                 style="width: 60px; height: 60px;"
                 :src="item.url"
-                :preview-src-list="qualification.businessList"
+                :preview-src-list="[item.url]"
               />
               </div>
             </div>
@@ -121,7 +121,7 @@
                 <el-image
                 style="width: 60px; height: 60px;"
                 :src="item.url"
-                :preview-src-list="qualification.trademarkList"
+                :preview-src-list="[item.url]"
               />
               </div>
             </div>
@@ -139,7 +139,7 @@
                 <el-image
                 style="width: 60px; height: 60px;"
                 :src="item.url"
-                :preview-src-list="qualification.authorizedList"
+                :preview-src-list="[item.url]"
               />
               </div>
             </div>
@@ -157,7 +157,7 @@
                 <el-image
                 style="width: 60px; height: 60px;"
                 :src="item.url"
-                :preview-src-list="qualification.commodityList"
+                :preview-src-list="[item.url]"
               />
               </div>
             </div>
@@ -175,7 +175,7 @@
                 <el-image
                 style="width: 60px; height: 60px;"
                 :src="item.url"
-                :preview-src-list="qualification.otherList"
+                :preview-src-list="[item.url]"
               />
               </div>
             </div>
@@ -196,7 +196,7 @@
                 <el-image
                 style="width: 60px; height: 60px;"
                 :src="item.url"
-                :preview-src-list="qualification.importBusinessList"
+                :preview-src-list="[item.url]"
               />
               </div>
             </div>
@@ -214,7 +214,7 @@
                 <el-image
                 style="width: 60px; height: 60px;"
                 :src="item.url"
-                :preview-src-list="qualification.importAuthorizedList"
+                :preview-src-list="[item.url]"
               />
               </div>
             </div>
@@ -232,7 +232,7 @@
                 <el-image
                 style="width: 60px; height: 60px;"
                 :src="item.url"
-                :preview-src-list="qualification.customsList"
+                :preview-src-list="[item.url]"
               />
               </div>
             </div>
@@ -250,7 +250,7 @@
                 <el-image
                 style="width: 60px; height: 60px;"
                 :src="item.url"
-                :preview-src-list="qualification.packingList"
+                :preview-src-list="[item.url]"
               />
               </div>
             </div>
@@ -268,7 +268,7 @@
                 <el-image
                 style="width: 60px; height: 60px;"
                 :src="item.url"
-                :preview-src-list="qualification.importOtherList"
+                :preview-src-list="[item.url]"
               />
               </div>
             </div>

src/views/product/productExamine/proDetails.vue

@@ -48,11 +48,23 @@
               <ul class="list">
                 <li class="item item100">
                   <div class="item-title">封面图：</div>
-                  <img :src="productData.image" style="width:40px;height:40px;margin-right:12px;"/>
+                  <!-- <img :src="productData.image" style="width:40px;height:40px;margin-right:12px;"/> -->
+                  <el-image
+                  style="width: 60px; height: 60px"
+                  :src="productData.image"
+                  :preview-src-list="[productData.image]"
+                />
                 </li>
                 <li class="item item100">
                   <div class="item-title">轮播图：</div>
-                  <img v-for="(pic,idx) in productData.slider_image" :key="idx" :src="pic" style="width:40px;height:40px;margin-right:12px;"/>
+                  <el-image
+                  v-for="(pic,idx) in productData.slider_image"
+                  style="width: 60px; height: 60px"
+                  :key="idx"
+                  :src="pic"
+                  :preview-src-list="productData.slider_image"
+                />
+                  <!-- <img v-for="(pic,idx) in productData.slider_image" :key="idx" :src="pic" style="width:40px;height:40px;margin-right:12px;"/> -->
                 </li>  
               </ul>
               <li class="item item100">
@@ -144,6 +156,7 @@
                           <el-image
                             style="width: 60px; height: 60px"
                             :src="scope.row.image"
+                            :preview-src-list="[scope.row.image]"
                           />
                         </div>
                       </template>
@@ -485,6 +498,200 @@
               </div>
             </div> 
           </el-tab-pane>
+          <el-tab-pane label="资质信息" name="aptitude">
+        <span class="sp">商品名称：
+          <el-radio-group v-model="qualification.commodity_type">
+            <el-radio :label="0" class="radio" :disabled="qualification.commodity_type==1">国产</el-radio>
+            <el-radio :label="1" :disabled="qualification.commodity_type==0">进口</el-radio>
+          </el-radio-group>
+        </span>
+      <div v-if="qualification.commodity_type == 0">
+        <span class="sp">生产企业名称：{{ qualification.production_name }}</span>
+        <span class="upload">
+          <div class="upload_left">生产营业执照：</div>
+          <div class="upload_right">
+            <div
+              v-for="(item,index) in qualification.businessList"
+              :key="index"
+            >
+              <a class="txt" v-if="getType(item)" :href="item.url" target="downloadFile" download>{{ item.name }}</a> 
+              <div class="pictrue" v-else>
+                <el-image
+                style="width: 60px; height: 60px;"
+                :src="item.url"
+                :preview-src-list="[item.url]"
+              />
+              </div>
+            </div>
+          </div>
+        </span>
+        <span class="upload">
+          <div class="upload_left">商标注册证：</div>
+          <div class="upload_right">
+            <div
+              v-for="(item,index) in qualification.trademarkList"
+              :key="index"
+            >
+              <a class="txt" v-if="getType(item)" :href="item.url" target="downloadFile" download>{{ item.name }}</a> 
+              <div class="pictrue" v-else>
+                <el-image
+                style="width: 60px; height: 60px;"
+                :src="item.url"
+                :preview-src-list="[item.url]"
+              />
+              </div>
+            </div>
+          </div>
+        </span>
+        <span class="upload">
+          <div class="upload_left">销售授权及其他：</div>
+          <div class="upload_right">
+            <div
+              v-for="(item,index) in qualification.authorizedList"
+              :key="index"
+            >
+              <a class="txt" v-if="getType(item)" :href="item.url" target="downloadFile" download>{{ item.name }}</a> 
+              <div class="pictrue" v-else>
+                <el-image
+                style="width: 60px; height: 60px;"
+                :src="item.url"
+                :preview-src-list="[item.url]"
+              />
+              </div>
+            </div>
+          </div>
+        </span>
+        <span class="upload">
+          <div class="upload_left">商品检测报告：</div>
+          <div class="upload_right">
+            <div
+              v-for="(item,index) in qualification.commodityList"
+              :key="index"
+            >
+              <a class="txt" v-if="getType(item)" :href="item.url" target="downloadFile" download>{{ item.name }}</a> 
+              <div class="pictrue" v-else>
+                <el-image
+                style="width: 60px; height: 60px;"
+                :src="item.url"
+                :preview-src-list="[item.url]"
+              />
+              </div>
+            </div>
+          </div>
+        </span>
+        <span class="upload">
+          <div class="upload_left">其他资质：</div>
+          <div class="upload_right">
+            <div
+              v-for="(item,index) in qualification.otherList"
+              :key="index"
+            >
+              <a class="txt" v-if="getType(item)" :href="item.url" target="downloadFile" download>{{ item.name }}</a> 
+              <div class="pictrue" v-else>
+                <el-image
+                style="width: 60px; height: 60px;"
+                :src="item.url"
+                :preview-src-list="[item.url]"
+              />
+              </div>
+            </div>
+          </div>
+        </span>
+      </div>
+      <div v-if="qualification.commodity_type == 1">
+        <span class="sp">进口/企业境内总代企业名称: {{ qualification.import_name }}</span>
+        <span class="upload">
+          <div class="upload_left">生产营业执照：</div>
+          <div class="upload_right">
+            <div
+              v-for="(item,index) in qualification.importBusinessList"
+              :key="index"
+            >
+              <a class="txt" v-if="getType(item)" :href="item.url" target="downloadFile" download>{{ item.name }}</a> 
+              <div class="pictrue" v-else>
+                <el-image
+                style="width: 60px; height: 60px;"
+                :src="item.url"
+                :preview-src-list="[item.url]"
+              />
+              </div>
+            </div>
+          </div>
+        </span>
+        <span class="upload">
+          <div class="upload_left">销售授权及其他：</div>
+          <div class="upload_right">
+            <div
+              v-for="(item,index) in qualification.importAuthorizedList"
+              :key="index"
+            >
+              <a class="txt" v-if="getType(item)" :href="item.url" target="downloadFile" download>{{ item.name }}</a> 
+              <div class="pictrue" v-else>
+                <el-image
+                style="width: 60px; height: 60px;"
+                :src="item.url"
+                :preview-src-list="[item.url]"
+              />
+              </div>
+            </div>
+          </div>
+        </span>
+        <span class="upload">
+          <div class="upload_left">海关检验检疫证书及报关单：</div>
+          <div class="upload_right">
+            <div
+              v-for="(item,index) in qualification.customsList"
+              :key="index"
+            >
+              <a class="txt" v-if="getType(item)" :href="item.url" target="downloadFile" download>{{ item.name }}</a> 
+              <div class="pictrue" v-else>
+                <el-image
+                style="width: 60px; height: 60px;"
+                :src="item.url"
+                :preview-src-list="[item.url]"
+              />
+              </div>
+            </div>
+          </div>
+        </span>
+        <span class="upload">
+          <div class="upload_left">产品外包装实物图：</div>
+          <div class="upload_right">
+            <div
+              v-for="(item,index) in qualification.packingList"
+              :key="index"
+            >
+              <a class="txt" v-if="getType(item)" :href="item.url" target="downloadFile" download>{{ item.name }}</a> 
+              <div class="pictrue" v-else>
+                <el-image
+                style="width: 60px; height: 60px;"
+                :src="item.url"
+                :preview-src-list="[item.url]"
+              />
+              </div>
+            </div>
+          </div>
+        </span>
+        <span class="upload">
+          <div class="upload_left">其他资质：</div>
+          <div class="upload_right">
+            <div
+              v-for="(item,index) in qualification.importOtherList"
+              :key="index"
+            >
+              <a class="txt" v-if="getType(item)" :href="item.url" target="downloadFile" download>{{ item.name }}</a> 
+              <div class="pictrue" v-else>
+                <el-image
+                style="width: 60px; height: 60px;"
+                :src="item.url"
+                :preview-src-list="[item.url]"
+              />
+              </div>
+            </div>
+          </div>
+        </span>
+      </div>
+    </el-tab-pane>
         </el-tabs>
       </div>
     </el-drawer>
@@ -575,6 +782,23 @@ export default {
     return {
       loading: true,
       productId: '',
+      qualification:{
+          production_name: '',
+          businessList: [],
+          licenceList: [],
+          trademarkList: [],
+          authorizedList: [],
+          commodityList: [],
+          otherList: [],
+          importBusinessList: [],
+          importAuthorizedList: [],
+          customsList: [],
+          packingList: [],
+          importOtherList: [],
+          commodity_type: 0,
+          brands_name: '',
+          import_name: ''
+      },
       direction: 'rtl',
       activeName: 'basic',
       productData: {},
@@ -617,6 +841,11 @@ export default {
   filters: {
   },
   methods: {
+    getType(val){
+        var regex = /(?:\.([^.]+))?$/;
+        let suffix = regex.exec(val.url)[1]
+        return suffix == 'pdf'
+      },
     handleClose() {
       this.activeName = 'basic';
       this.$emit('closeDrawer');
@@ -627,6 +856,7 @@ export default {
       productDetailApi(id).then(res => {
         this.loading = false;
         this.productData = res.data
+        this.qualification = res.data.qualification
         this.mer_svip_status = res.data.mer_svip_status
         this.svip_type = res.data.svip_price_type
         if (this.productData.spec_type === 0) {
@@ -764,6 +994,40 @@ export default {
     }
   }
 }
+.sp {
+    display: block;
+    // width: 33%;
+    margin-bottom: 20px;
+  }
+.upload{
+    display: flex;
+    flex-direction: row;
+    // align-content: center;
+    align-items: center;
+    height: 60px;
+    // line-height: 60px;
+    margin-bottom: 20px;
+    &_right{
+      display: flex;
+      height: 60px;
+    }
+    &_left{
+      width: 115px;
+    }
+    .txt{
+      width: 60px;
+      height: 60px;
+      line-height: 60px;
+      overflow: hidden;
+      display: inline-block;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      border: 1px solid #DCDFE6;
+      border-radius: 4px;
+      margin-right: 10px;
+      color: blue;
+    }
+  }
 .tabNumWidth{
   max-height: 350px;
   overflow-y: auto;