模块开发

package.json

@@ -41,6 +41,7 @@
     "three-dots": "^0.3.2",
     "vue": "2.6.10",
     "vue-count-to": "1.0.13",
+    "vue-print-nb": "^1.7.5",
     "vue-router": "3.0.2",
     "vue-splitpane": "1.0.4",
     "vuedraggable": "2.20.0",

src/api/campaign.js

@@ -1,5 +1,8 @@
 import request from '@/utils/request'
 
+/**
+ * 轮播图列表
+ */
 export function getBannerList(query) {
   return request({
     url: '/home/page/banner/list',
@@ -7,21 +10,27 @@ export function getBannerList(query) {
     params: query
   })
 }
-
+/**
+ * 轮播图上下架
+ */
 export function getBannerStatus(id) {
   return request({
     url: '/home/page/check/banner/status/' + id,
     method: 'get'
   })
 }
-
+/**
+ * 轮播图排序
+ */
 export function getBannerSort(id, sort) {
   return request({
     url: `/home/page/banner/${id}/${sort}`,
     method: 'get'
   })
 }
-
+/**
+ * 轮播图保存
+ */
 export function savePageBanner(params) {
   return request({
     url: '/home/page/save/banner',
@@ -29,57 +38,174 @@ export function savePageBanner(params) {
     data: params
   })
 }
-
+/**
+ * 轮播图删除
+ */
 export function delPageBanner(id) {
   return request({
     url: '/home/page/del/banner/' + id,
     method: 'get'
   })
 }
-
-export function switchGoods(id) {
+/**
+ * 轮播图详情
+ */
+export function formPageBanner(id) {
   return request({
-    url: '/product/cmMallOrganizeProducts/switchLine/' + id,
+    url: '/home/page/banner/form/' + id,
     method: 'get'
   })
 }
 
-export function saveGoods(goods) {
+/**
+ * 主菜单列表
+ */
+export function getMenuList(query) {
   return request({
-    url: '/product/cmMallOrganizeProducts/saveEditProductInfo',
-    method: 'post',
-    data: goods
+    url: '/home/page/menu/list',
+    method: 'get',
+    params: query
   })
 }
-
-export function saveGoodsSort(sorts) {
+/**
+ * 主菜单上下线
+ */
+export function getMenuStatus(id) {
   return request({
-    url: '/product/cmMallOrganizeProducts/batchSaveSort',
+    url: '/home/page/check/menu/status/' + id,
+    method: 'get'
+  })
+}
+/**
+ * 主菜单排序
+ */
+export function getMenuSort(id, sort) {
+  return request({
+    url: `/home/page/menu/${id}/${sort}`,
+    method: 'get'
+  })
+}
+/**
+ * 主菜单保存
+ */
+export function saveMenu(params) {
+  return request({
+    url: '/home/page/save/menu',
     method: 'post',
-    params: sorts
+    data: params
+  })
+}
+/**
+ * 主菜单删除
+ */
+export function delMenu(id) {
+  return request({
+    url: '/home/page/del/menu/' + id,
+    method: 'get'
+  })
+}
+/**
+ * 主菜单详情
+ */
+export function formMenu(id) {
+  return request({
+    url: '/home/page/menu/form/' + id,
+    method: 'get'
   })
 }
 
-export function getAddList(query) {
+/**
+ * 专题列表
+ */
+export function getThemeList(query) {
   return request({
-    url: '/product/cmMallOrganizeProducts/toAddProduct1',
+    url: '/home/page/theme/list',
     method: 'get',
     params: query
   })
 }
-
-export function saveAddList(data) {
+/**
+ * 专题上下线
+ */
+export function getThemeStatus(id) {
   return request({
-    url: '/product/cmMallOrganizeProducts/saveAddProductInfo',
+    url: '/home/page/check/theme/status/' + id,
+    method: 'get'
+  })
+}
+/**
+ * 专题存
+ */
+export function saveTheme(params) {
+  return request({
+    url: '/home/page/save/theme',
     method: 'post',
-    data: data
+    data: params
+  })
+}
+/**
+ * 专题删除
+ */
+export function delTheme(id) {
+  return request({
+    url: '/home/page/del/theme/' + id,
+    method: 'get'
+  })
+}
+/**
+ * 专题详情
+ */
+export function formTheme(id) {
+  return request({
+    url: '/home/page/theme/form/' + id,
+    method: 'get'
   })
 }
 
-export function canncelProduct(data) {
+/**
+ * 活动列表
+ */
+export function getActiveList(params) {
+  return request({
+    url: '/home/page/active/list',
+    method: 'get',
+    params: params
+  })
+}
+/**
+ * 活动上下线
+ */
+export function getActiveStatus(id) {
   return request({
-    url: '/product/cmMallOrganizeProducts/canncelProduct',
+    url: '/home/page/check/active/status/' + id,
+    method: 'get'
+  })
+}
+/**
+ * 保存活动
+ */
+export function saveActive(params) {
+  return request({
+    url: '/home/page/save/active',
     method: 'post',
-    data: data
+    data: params
+  })
+}
+/**
+ * 删除活动
+ */
+export function delActive(id) {
+  return request({
+    url: '/home/page/del/active/' + id,
+    method: 'get'
+  })
+}
+/**
+ * 活动编辑详情
+ */
+export function formActive(id) {
+  return request({
+    url: '/home/page/active/form/' + id,
+    method: 'get'
   })
 }

src/api/finance.js

@@ -0,0 +1,69 @@
+import request from '@/utils/request'
+
+/**
+ * 收款列表
+ */
+export function getReceiptList(query) {
+  return request({
+    url: '/order/organize/receipt/list',
+    method: 'get',
+    params: query
+  })
+}
+/**
+ * 收款账号列表
+ */
+export function getReceiptTypeList(query) {
+  return request({
+    url: '/order/organize/receipt/type',
+    method: 'get',
+    params: query
+  })
+}
+/**
+ * 收款详情
+ */
+export function getReceiptDetail(id) {
+  return request({
+    url: '/order/organize/receipt/detail/' + id,
+    method: 'get'
+  })
+}
+/**
+ * 楼层排序
+ */
+export function getFloorSort(id, sort) {
+  return request({
+    url: `/home/page/floor/${id}/${sort}`,
+    method: 'get'
+  })
+}
+/**
+ * 楼层保存
+ */
+export function savePageFloor(params) {
+  return request({
+    url: '/home/page/save/floor',
+    method: 'post',
+    data: params
+  })
+}
+/**
+ * 楼层删除
+ */
+export function delPageFloor(id) {
+  return request({
+    url: '/home/page/del/floor/' + id,
+    method: 'get'
+  })
+}
+/**
+ * 楼层详情
+ */
+export function formPageFloor(id) {
+  return request({
+    url: '/home/page/floor/form/' + id,
+    method: 'get'
+  })
+}
+

src/api/floor.js

@@ -0,0 +1,59 @@
+import request from '@/utils/request'
+
+/**
+ * 楼层管理列表
+ */
+export function getFloorList(query) {
+  return request({
+    url: '/home/page/floor/list',
+    method: 'get',
+    params: query
+  })
+}
+/**
+ * 楼层停启用
+ */
+export function getFloorStatus(id) {
+  return request({
+    url: '/home/page/check/floor/status/' + id,
+    method: 'get'
+  })
+}
+/**
+ * 楼层排序
+ */
+export function getFloorSort(id, sort) {
+  return request({
+    url: `/home/page/floor/${id}/${sort}`,
+    method: 'get'
+  })
+}
+/**
+ * 楼层保存
+ */
+export function savePageFloor(params) {
+  return request({
+    url: '/home/page/save/floor',
+    method: 'post',
+    data: params
+  })
+}
+/**
+ * 楼层删除
+ */
+export function delPageFloor(id) {
+  return request({
+    url: '/home/page/del/floor/' + id,
+    method: 'get'
+  })
+}
+/**
+ * 楼层详情
+ */
+export function formPageFloor(id) {
+  return request({
+    url: '/home/page/floor/form/' + id,
+    method: 'get'
+  })
+}
+

src/assets/print/index.js

@@ -0,0 +1,6 @@
+import Print from './packages/print.js';
+Print.install = function(Vue) {
+    Vue.directive('print', Print);
+};
+
+export default Print;

src/assets/print/packages/css/print.css

@@ -0,0 +1,3 @@
+div{
+  
+}

src/assets/print/packages/print.js

@@ -0,0 +1,90 @@
+/*
+ * @Author: lee
+ * @Date: 2021-05-10 11:45:50
+ * @LastEditors: lee
+ * @LastEditTime: 2021-05-20 15:39:43
+ * @Description: file content
+ */
+import Print from './printarea.js';
+/**
+ * @file 打印
+ * 指令`v-print`,默认打印整个窗口
+ * 传入参数`v-print="'#id'"` , 参数为需要打印局部的盒子标识.
+ */
+const addEvent = (element, type, callback) => {
+  if (element.addEventListener) {
+    element.addEventListener(type, callback, false);
+  } else if (element.attachEvent) {
+    element.attachEvent('on' + type, callback);
+  } else {
+    element['on' + type] = callback;
+  }
+}
+export default {
+  directiveName: 'print',
+  bind (el, binding, vnode) {
+    let vue = vnode.context;
+    let id = '';
+    addEvent(el, 'click', () => {
+      vue.$nextTick(() => {
+        if (binding?.value?.clickMounted) {
+          binding.value.clickMounted(vue)
+        }
+        if (typeof binding.value === 'string') {
+          // 全局打印
+          id = binding.value;
+          localPrint();
+        } else if (typeof binding.value === 'object' && !!binding.value.id) {
+          // 局部打印
+          id = binding.value.id;
+          let ids = id.replace(new RegExp("#", "g"), '');
+          let elsdom = document.getElementById(ids);
+          if (!elsdom) console.log("id in Error"), id = '';
+          localPrint();
+
+        } else if(binding?.value?.preview) {
+          localPrint();
+        } else {
+          window.print();
+          return
+        }
+      });
+    })
+
+    const localPrint = () => {
+      new Print({
+        ids: id, // * 局部打印必传入id
+        vue,
+        url: binding.value.url, // 打印指定的网址，这里不能跟id共存 如果共存id的优先级会比较高
+        standard: '', // 文档类型，默认是html5，可选 html5，loose，strict
+        extraHead: binding.value.extraHead, // 附加在head标签上的额外标签,使用逗号分隔
+        extraCss: binding.value.extraCss, // 额外的css连接，多个逗号分开
+        previewTitle: binding.value.previewTitle || '打印预览', // 打印预览的标题
+        zIndex: binding.value.zIndex || 20002, // 预览窗口的z-index
+        previewPrintBtnLabel: binding.value.previewPrintBtnLabel || '打印', // 打印预览的标题
+        popTitle: binding.value.popTitle, // title的标题
+        preview: binding.value.preview || false, // 是否启动预览模式
+        asyncUrl: binding.value.asyncUrl,
+        beforeEntryIframe(){
+          binding.value.beforeEntryIframe && binding.value.beforeEntryIframe(vue)
+        },
+        previewBeforeOpenCallback () { // 预览窗口打开之前的callback
+          binding.value.previewBeforeOpenCallback && binding.value.previewBeforeOpenCallback(vue)
+        },
+        previewOpenCallback () { // 预览窗口打开之后的callback
+          binding.value.previewOpenCallback && binding.value.previewOpenCallback(vue)
+        },
+        openCallback () { // 调用打印之后的回调事件
+          binding.value.openCallback && binding.value.openCallback(vue)
+        },
+        closeCallback () {
+          binding.value.closeCallback && binding.value.closeCallback(vue)
+        },
+        beforeOpenCallback () {
+          binding.value.beforeOpenCallback && binding.value.beforeOpenCallback(vue)
+        }
+      });
+
+    };
+  }
+};

src/assets/print/packages/printarea.js

@@ -0,0 +1,430 @@
+
+ const isIE = () =>{
+	if (!!window.ActiveXobject || "ActiveXObject" in window) {
+		return true;
+	} else {
+		return false;
+	}
+}
+/**
+ * 判断是否是IE11
+ * @returns boolean
+ */
+const isIE11 = () => {
+	if((/Trident\/7\./).test(navigator.userAgent)) {
+		return true;
+	} else {
+		return false;
+	}
+}
+const isRemove = (dom) => {
+  if (isIE() || isIE11()) {
+    dom.removeNode(true)
+  } else {
+    dom.remove()
+  }
+  return dom
+}
+export default class {
+  constructor(option) {
+
+    this.standards = {
+      strict: 'strict',
+      loose: 'loose',
+      html5: 'html5'
+    };
+    this.previewBody = null;
+    this.close = null;
+    this.previewBodyUtilPrintBtn = null;
+    this.selectArray = []; // 存储select的
+    this.counter = 0;
+    this.settings = {
+      standard: this.standards.html5,
+    };
+    Object.assign(this.settings, option);
+    this.init();
+  }
+  init () {
+    this.counter++;
+    this.settings.id = `printArea_${this.counter}`;
+    let url = ''
+    if (this.settings.url && !this.settings.asyncUrl) {
+      url = this.settings.url
+    }
+    let _this = this
+    // 如果是异步的
+    if (this.settings.asyncUrl) {
+
+      _this.settings.asyncUrl(function (url) {
+        let PrintAreaWindow = _this.getPrintWindow(url); // 创建iframe
+        if (_this.settings.preview) {
+          // 打开预览弹窗
+          _this.previewIfrmaeLoad()
+        } else {
+          // 直接打印
+          _this.print(PrintAreaWindow);
+        }
+      }, _this.settings.vue)
+      return
+    }
+    let PrintAreaWindow = this.getPrintWindow(url); // 创建iframe
+
+    if (!this.settings.url) {
+      this.write(PrintAreaWindow.doc); // 写入内容
+    }
+
+    if (this.settings.preview) {
+      // 打开预览弹窗
+      this.previewIfrmaeLoad()
+    } else {
+      // 直接打印
+      this.print(PrintAreaWindow);
+    }
+  }
+  addEvent (element, type, callback) {
+    if (element.addEventListener) {
+      element.addEventListener(type, callback, false);
+    } else if (element.attachEvent) {
+      element.attachEvent('on' + type, callback);
+    } else {
+      element['on' + type] = callback;
+    }
+  }
+  previewIfrmaeLoad () {
+    let box = document.getElementById('vue-pirnt-nb-previewBox')
+
+    if (box) {
+      let _this = this
+      let iframe = box.querySelector('iframe')
+      this.settings.previewBeforeOpenCallback()
+      this.addEvent(iframe, 'load', function () {
+        _this.previewBoxShow()
+        _this.removeCanvasImg()
+        _this.settings.previewOpenCallback()
+      })
+
+      this.addEvent(box.querySelector('.previewBodyUtilPrintBtn'), 'click', function () {
+        _this.settings.beforeOpenCallback()
+        _this.settings.openCallback();
+        iframe.contentWindow.print();
+        _this.settings.closeCallback()
+      })
+    }
+  }
+  // 删除所有canva转换的图片
+  removeCanvasImg () {
+    let _this = this
+    try {
+      if (_this.elsdom) {
+        // 删除canva转变图片的dom节点
+        let canvasList = _this.elsdom.querySelectorAll('.canvasImg')
+        for (let i = 0; i < canvasList.length; i++) {
+          isRemove(canvasList[i])
+        }
+      }
+    } catch (e) {
+      console.log(e);
+    }
+  }
+  print (ifrmae) {
+    var _this = this;
+    let iframe = document.getElementById(this.settings.id) || ifrmae.f;
+    let iframeWin = document.getElementById(this.settings.id).contentWindow || ifrmae.f.contentWindow;
+    var _loaded = function () {
+
+      iframeWin.focus();
+      _this.settings.openCallback();
+      iframeWin.print();
+      isRemove(iframe)
+      _this.settings.closeCallback()
+      _this.removeCanvasImg()
+    }
+    _this.settings.beforeOpenCallback()
+    _this.addEvent(iframe, 'load', function () {
+      _loaded()
+    })
+
+  }
+  write (PADocument) {
+    PADocument.open();
+    PADocument.write(`${this.docType()}<html>${this.getHead()}${this.getBody()}</html>`);
+    PADocument.close();
+
+  }
+  docType () {
+    if (this.settings.standard === this.standards.html5) {
+      return '<!DOCTYPE html>';
+    }
+    var transitional = this.settings.standard === this.standards.loose ? ' Transitional' : '';
+    var dtd = this.settings.standard === this.standards.loose ? 'loose' : 'strict';
+
+    return `<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01${transitional}//EN" "http://www.w3.org/TR/html4/${dtd}.dtd">`;
+  }
+  getHead () {
+    let extraHead = '';
+    let links = '';
+    let style = '';
+    if (this.settings.extraHead) {
+      this.settings.extraHead.replace(/([^,]+)/g, (m) => {
+        extraHead += m;
+      });
+    }
+    // 复制所有link标签
+    [].forEach.call(document.querySelectorAll('link'), function (item) {
+      if (item.href.indexOf('.css') >= 0) {
+        links += `<link type="text/css" rel="stylesheet" href="${item.href}" >`;
+      }
+    });
+    // 循环获取style标签的样式
+    let domStyle = document.styleSheets;
+    if (domStyle && domStyle.length > 0) {
+      for (let i = 0; i < domStyle.length; i++) {
+        try {
+          if (domStyle[i].cssRules || domStyle[i].rules) {
+            let rules = domStyle[i].cssRules || domStyle[i].rules;
+            for (let b = 0; b < rules.length; b++) {
+              style += rules[b].cssText;
+            }
+          }
+        } catch (e) {
+          console.log(domStyle[i].href + e);
+        }
+      }
+    }
+
+    if (this.settings.extraCss) {
+      this.settings.extraCss.replace(/([^,\s]+)/g, (m) => {
+        links += `<link type="text/css" rel="stylesheet" href="${m}">`;
+      });
+
+    }
+
+    return `<head><title>${this.settings.popTitle}</title>${extraHead}${links}<style type="text/css">${style}</style></head>`;
+  }
+
+  getBody () {
+    let ids = this.settings.ids;
+    ids = ids.replace(new RegExp("#", "g"), '');
+    this.settings.beforeEntryIframe();
+    this.elsdom = this.beforeHanler(document.getElementById(ids));
+    let ele = this.getFormData(this.elsdom);
+    let htm = ele.outerHTML;
+    return '<body style="width:100%">' + htm + '</body>';
+  }
+  // 处理canva转成图片
+  beforeHanler (elsdom) {
+    let canvasList = elsdom.querySelectorAll('canvas');
+    // canvas转换png图片
+    for (let i = 0; i < canvasList.length; i++) {
+      if (!canvasList[i].style.display) {
+        let _parent = canvasList[i].parentNode
+        let _canvasUrl = canvasList[i].toDataURL('image/png')
+        let _img = new Image()
+        _img.className = 'canvasImg'
+        _img.style.display = 'none'
+        _img.src = _canvasUrl
+        _parent.appendChild(_img)
+      }
+    }
+    return elsdom
+  }
+  // 根据type去处理form表单
+  getFormData (ele) {
+    let copy = ele.cloneNode(true);
+    let copiedInputs = copy.querySelectorAll('input,select,textarea');
+    let canvasImgList = copy.querySelectorAll('.canvasImg,canvas');
+    let selectCount = -1;
+    // 处理所有canvas
+    for (let i = 0; i < canvasImgList.length; i++) {
+      let _parent = canvasImgList[i].parentNode
+      let item = canvasImgList[i]
+      // 删除克隆后的canvas节点
+      if (item.tagName.toLowerCase() === 'canvas') {
+        _parent.removeChild(item)
+      } else {
+        item.style.display = 'block'
+      }
+    }
+    // 处理所有输入框
+    for (let i = 0; i < copiedInputs.length; i++) {
+      let item = copiedInputs[i];
+      let typeInput = item.getAttribute('type');
+      let copiedInput = copiedInputs[i];
+      // 获取select标签
+      if (!typeInput) {
+        typeInput = item.tagName === 'SELECT' ? 'select' : item.tagName === 'TEXTAREA' ? 'textarea' : '';
+      }
+      // 处理input框
+      if (item.tagName === 'INPUT') {
+        // 除了单选框 多选框比较特别
+        if (typeInput === 'radio' || typeInput === 'checkbox') {
+          if (item.checked) {
+            copiedInput.setAttribute('checked', item.checked);
+          }
+
+        } else {
+          copiedInput.value = item.value;
+          copiedInput.setAttribute('value', item.value);
+        }
+        // 处理select
+      } else if (typeInput === 'select') {
+
+        selectCount++;
+        for (let b = 0; b < ele.querySelectorAll('select').length; b++) {
+          let select = ele.querySelectorAll('select')[b]; // 获取原始层每一个select
+          !select.getAttribute('newbs') && select.setAttribute('newbs', b) // 添加标识
+          if (select.getAttribute('newbs') == selectCount) {
+            let opSelectedIndex = ele.querySelectorAll('select')[selectCount].selectedIndex;
+            item.options[opSelectedIndex].setAttribute('selected', true);
+
+          }
+        }
+        // 处理textarea
+      } else {
+        copiedInput.innerHTML = item.value;
+        copiedInput.setAttribute('html', item.value);
+      }
+    }
+
+    return copy;
+  }
+  getPrintWindow (url) {
+    var f = this.Iframe(url);
+    return {
+      f: f,
+      win: f.contentWindow || f,
+      doc: f.doc
+    };
+  }
+  previewBoxShow () {
+    let box = document.getElementById('vue-pirnt-nb-previewBox')
+    if (box) {
+      document.querySelector('html').setAttribute('style', 'overflow: hidden')
+      box.style.display = 'block'
+    }
+  }
+  
+  previewBoxHide () {
+    let box = document.getElementById('vue-pirnt-nb-previewBox')
+    if (box) {
+      document.querySelector('html').setAttribute('style', 'overflow: visible;')
+      
+      box.querySelector('iframe') && isRemove(box.querySelector('iframe'))
+      box.style.display = 'none'
+    }
+  }
+  previewBox () {
+
+    let box = document.getElementById('vue-pirnt-nb-previewBox')
+    let previewBodyClass = 'previewBody'
+    if (box) {
+      box.querySelector('iframe') && isRemove(box.querySelector('iframe'))
+      return {
+        close: box.querySelector('.previewClose'),
+        previewBody: box.querySelector(`.${previewBodyClass}`)
+      }
+    }
+    let previewContent = document.createElement('div');
+    previewContent.setAttribute('id', "vue-pirnt-nb-previewBox")
+    previewContent.setAttribute('style', 'position: fixed;top: 0px;left: 0px;width: 100%;height: 100%;background: white;display:none')
+    previewContent.style.zIndex = this.settings.zIndex
+    // 打印预览弹窗的header
+    let previewHeader = document.createElement('div');
+    previewHeader.setAttribute('class', "previewHeader")
+    previewHeader.setAttribute('style', "padding: 5px 20px;")
+    previewHeader.innerHTML = this.settings.previewTitle
+    previewContent.appendChild(previewHeader)
+    // close关闭按钮
+    this.close = document.createElement('div');
+    let close = this.close
+    close.setAttribute('class', "previewClose")
+    close.setAttribute('style', "position: absolute;top: 5px;right: 20px;width: 25px;height: 20px;cursor: pointer;")
+    let closeBefore = document.createElement('div');
+    let closeAfter = document.createElement('div');
+    closeBefore.setAttribute('class', "closeBefore")
+    closeBefore.setAttribute('style', "position: absolute;width: 3px;height: 100%;background: #040404;transform: rotate(45deg); top: 0px;left: 50%;")
+    closeAfter.setAttribute('class', "closeAfter")
+    closeAfter.setAttribute('style', "position: absolute;width: 3px;height: 100%;background: #040404;transform: rotate(-45deg); top: 0px;left: 50%;")
+    close.appendChild(closeBefore)
+    close.appendChild(closeAfter)
+    previewHeader.appendChild(close)
+
+    // 打印预览弹窗的body
+    this.previewBody = document.createElement('div');
+    let previewBody = this.previewBody
+    previewBody.setAttribute('class', previewBodyClass)
+    previewBody.setAttribute('style', "display: flex;flex-direction: column; height: 100%;")
+    previewContent.appendChild(previewBody)
+    // 打印预览弹窗的body的工具栏
+    let previewBodyUtil = document.createElement('div');
+    previewBodyUtil.setAttribute('class', "previewBodyUtil")
+    previewBodyUtil.setAttribute('style', "height: 32px;background: #474747;position: relative;")
+    previewBody.appendChild(previewBodyUtil)
+    // 打印的按钮
+    this.previewBodyUtilPrintBtn = document.createElement('div');
+    let previewBodyUtilPrintBtn = this.previewBodyUtilPrintBtn
+    previewBodyUtilPrintBtn.setAttribute('class', 'previewBodyUtilPrintBtn')
+    previewBodyUtilPrintBtn.innerHTML = this.settings.previewPrintBtnLabel
+    previewBodyUtilPrintBtn.setAttribute('style', 'position: absolute;padding: 2px 10px;margin-top: 3px;left: 24px;font-size: 14px;color: white;cursor: pointer;background-color: rgba(0,0,0,.12);background-image: linear-gradient(hsla(0,0%,100%,.05),hsla(0,0%,100%,0));background-clip: padding-box;border: 1px solid rgba(0,0,0,.35);border-color: rgba(0,0,0,.32) rgba(0,0,0,.38) rgba(0,0,0,.42);box-shadow: inset 0 1px 0 hsla(0,0%,100%,.05), inset 0 0 1px hsla(0,0%,100%,.15), 0 1px 0 hsla(0,0%,100%,.05);')
+    previewBodyUtil.appendChild(previewBodyUtilPrintBtn)
+
+    // 添加整个预览到body
+    document.body.appendChild(previewContent);
+
+    return {
+      close: this.close,
+      previewBody: this.previewBody
+    }
+  }
+  iframeBox (frameId, url) {
+    let iframe = document.createElement('iframe');
+    iframe.style.border = '0px';
+    iframe.style.position = 'absolute';
+    iframe.style.width = '0px';
+    iframe.style.height = '0px';
+    iframe.style.right = '0px';
+    iframe.style.top = '0px';
+    iframe.setAttribute('id', frameId);
+    iframe.setAttribute('src', url);
+
+    return iframe
+  }
+  Iframe (url) {
+    let frameId = this.settings.id;
+    // 局部打印 用当前的时间做ifrmae的url
+    url = !url ? new Date().getTime() : url
+    let _this = this
+
+    let iframe = this.iframeBox(frameId, url)
+
+    // let that = this
+    try {
+      // 直接打印 不预览
+      if (!this.settings.preview) {
+        document.body.appendChild(iframe);
+
+      } else {
+        iframe.setAttribute('style', 'border: 0px;flex: 1;')
+        // 预览打印
+        let previewBox = this.previewBox()
+        let previewBody = previewBox.previewBody
+        let close = previewBox.close
+        // 添加ifrmae到预览弹窗
+        previewBody.appendChild(iframe);
+        this.addEvent(close, 'click', function () {
+          _this.previewBoxHide()
+        })
+      }
+
+      iframe.doc = null;
+      iframe.doc = iframe.contentDocument ? iframe.contentDocument : (iframe.contentWindow ? iframe.contentWindow.document : iframe.document);
+    } catch (e) {
+      throw new Error(e + '. iframes may not be supported in this browser.');
+    }
+    if (iframe.doc == null) {
+      throw new Error('Cannot find document.');
+    }
+
+    return iframe;
+  }
+}

src/filters/index.js

@@ -83,3 +83,15 @@ export function toThousandFloatFilter(num) {
 export function uppercaseFirst(string) {
   return string.charAt(0).toUpperCase() + string.slice(1)
 }
+/**
+ * 处理金额
+ * @param {String} string
+ */
+export function amountfilters(value) {
+  // 处理金额
+  if (value) {
+    return Number(value).toFixed(2)
+  } else {
+    return '0.00'
+  }
+}

src/main.js

@@ -19,6 +19,8 @@ import './utils/error-log' // error log
 
 import * as filters from './filters' // global filters
 
+import Print from './assets/print'
+
 import Component from '@/components'
 
 const simplePwd = 'caimei123' // 简单密码
@@ -41,6 +43,8 @@ Vue.use(Element, {
 
 Vue.use(Component)
 
+// 针对性打印
+Vue.use(Print)
 // register global utility filters
 Object.keys(filters).forEach(key => {
   Vue.filter(key, filters[key])

src/router/index.js

@@ -97,8 +97,8 @@ export const asyncRoutes = [
   goodsRouter,
   campaign,
   floorRouter,
-  financeRouter,
   orderRouter,
+  financeRouter,
   otherRouter,
   // 404 page must be placed at the end !!!
   { path: '*', redirect: '/404', hidden: true }

src/router/modules/campaign.js

@@ -13,41 +13,41 @@ const clubRouter = {
       path: 'list',
       name: 'CampaignList',
       component: () => import('@/views/campaign/list'),
-      meta: { title: '运营专区', icon: 'el-icon-guide' }
+      meta: { title: '运营专区', noCache: true, icon: 'el-icon-guide' }
     },
     {
       path: 'banner-edit',
       name: 'BannerEdit',
       component: () => import('@/views/campaign/banner-edit'),
-      meta: { title: '轮播图编辑', icon: 'ma-other-notes' },
+      meta: { title: '轮播图编辑', noCache: true, icon: 'ma-other-notes' },
       hidden: true
     },
     {
       path: 'category-edit',
       name: 'CategoryEdit',
       component: () => import('@/views/campaign/category-edit'),
-      meta: { title: '主菜单编辑', icon: 'ma-other-notes' },
+      meta: { title: '主菜单编辑', noCache: true, icon: 'ma-other-notes' },
       hidden: true
     },
     {
       path: 'special-edit',
       name: 'SpecialEdit',
       component: () => import('@/views/campaign/special-edit'),
-      meta: { title: '活动编辑', icon: 'ma-other-notes' },
+      meta: { title: '活动编辑', noCache: true, icon: 'ma-other-notes' },
       hidden: true
     },
     {
       path: 'activity-edit',
       name: 'ActivityEdit',
       component: () => import('@/views/campaign/activity-edit'),
-      meta: { title: '活动编辑', icon: 'ma-other-notes' },
+      meta: { title: '活动编辑', noCache: true, icon: 'ma-other-notes' },
       hidden: true
     },
     {
       path: 'activity-list',
       name: 'ActivityList',
       component: () => import('@/views/campaign/activity-list'),
-      meta: { title: '活动列表', icon: 'el-icon-s-grid' }
+      meta: { title: '活动列表', noCache: true, icon: 'el-icon-s-grid' }
     }
   ]
 }

src/router/modules/finance.js

@@ -13,13 +13,92 @@ const financeRouter = {
       path: 'list',
       name: 'List',
       component: () => import('@/views/finance/list'),
-      meta: { title: '收款列表', icon: 'el-icon-coin' }
+      meta: { title: '收款列表', noCache: true, icon: 'el-icon-coin' }
     },
     {
-      path: 'refund',
-      name: 'Refund',
-      component: () => import('@/views/finance/refund'),
-      meta: { title: '退款管理', icon: 'ma-finance-return' },
+      path: 'details',
+      name: 'Details',
+      component: () => import('@/views/finance/details'),
+      meta: { title: '收款详情', noCache: true, icon: 'el-icon-coin' },
+      hidden: true
+    },
+    {
+      path: 'payment-list',
+      name: 'PaymentList',
+      component: () => import('@/views/finance/payment-list'),
+      meta: { title: '付款管理', noCache: true, icon: 'el-icon-bank-card' }
+    },
+    {
+      path: 'payment-details',
+      name: 'PaymentDetails',
+      component: () => import('@/views/finance/payment-details'),
+      meta: { title: '付款详情', noCache: true, icon: 'el-icon-bank-card' },
+      hidden: true
+    },
+    {
+      path: 'payment-edit',
+      name: 'PaymentEdit',
+      component: () => import('@/views/finance/payment-edit'),
+      meta: { title: '提交付款单', noCache: true, icon: 'el-icon-bank-card' },
+      hidden: true
+    },
+    {
+      path: 'payment-record',
+      name: 'PaymentRecord',
+      component: () => import('@/views/finance/payment-record'),
+      meta: { title: '退/付款记录', noCache: true, icon: 'el-icon-bank-card' },
+      hidden: true
+    },
+    {
+      path: 'payapply-list',
+      name: 'PayapplyList',
+      component: () => import('@/views/finance/payapply-list'),
+      meta: { title: '申请付款', noCache: true, icon: 'el-icon-wallet' }
+    },
+    {
+      path: 'paycents-list',
+      name: 'PaycentsList',
+      component: () => import('@/views/finance/paycents-list'),
+      meta: { title: '子订单手动分账', noCache: true, icon: 'el-icon-stopwatch' }
+    },
+    {
+      path: 'paysettle-list',
+      name: 'PaysettleList',
+      component: () => import('@/views/finance/paysettle-list'),
+      meta: { title: '子订单手动结算', noCache: true, icon: 'el-icon-odometer' }
+    },
+    {
+      path: 'paysettle-record',
+      name: 'PaysettleRecord',
+      component: () => import('@/views/finance/paysettle-record'),
+      meta: { title: '结算记录', noCache: true, icon: 'el-icon-odometer' },
+      hidden: true
+    },
+    {
+      path: 'payfinance-list',
+      name: 'PayfinanceList',
+      component: () => import('@/views/finance/payfinance-list'),
+      meta: { title: '订单财务信息', noCache: true, icon: 'el-icon-takeaway-box' }
+    },
+    {
+      path: 'shop-record',
+      name: 'ShopRecord',
+      component: () => import('@/views/finance/payfinance-shop-record'),
+      meta: { title: '供应商退/付款记录', noCache: true, icon: 'el-icon-takeaway-box' },
+      hidden: true
+    },
+    {
+      path: 'remit-record',
+      name: 'RemitRecord',
+      component: () => import('@/views/finance/payfinance-remit-record'),
+      meta: { title: '收退款记录', noCache: true, icon: 'el-icon-takeaway-box' },
+      hidden: true
+    },
+    {
+      path: 'refund-record',
+      name: 'RefundRecord',
+      component: () => import('@/views/finance/payfinance-refund-record'),
+      meta: { title: '用户退款记录', noCache: true, icon: 'el-icon-takeaway-box' },
       hidden: true
     }
   ]

src/router/modules/floor.js

@@ -13,7 +13,7 @@ const floorRouter = {
       path: 'list',
       name: 'FloorList',
       component: () => import('@/views/floor/list'),
-      meta: { title: '楼层管理', icon: 'el-icon-s-operation' }
+      meta: { title: '楼层管理', noCache: true, icon: 'el-icon-s-operation' }
     },
     {
       path: 'edit',

src/router/modules/order.js

@@ -22,10 +22,10 @@ const orderRouter = {
       meta: { title: '用户退款列表', icon: 'el-icon-money' }
     },
     {
-      path: 'refund/detail/:id(\\d+)',
+      path: 'refund-detail',
       name: 'RefundDeatil',
       component: () => import('@/views/order/refund-detail'),
-      meta: { title: '用户退款详情', noCache: true, activeMenu: '/order/refund' },
+      meta: { title: '退款详情', noCache: true, activeMenu: '/order/refund' },
       hidden: true
     },
     {

src/store/getters.js

@@ -11,7 +11,7 @@ const getters = {
   name: state => state.user.name,
   avatar: state => state.user.avatar,
   roles: state => state.user.roles,
-  organizeId: state => state.user.organizeID,
+  organizeId: state => state.user.organizeId,
   permission_routes: state => state.permission.routes,
   errorLogs: state => state.errorLog.logs
 }

src/store/modules/permission.js

@@ -56,7 +56,7 @@ const actions = {
       } else {
         accessedRoutes = filterAsyncRoutes(asyncRoutes, userInfo.roles)
       }
-      getModule({ organizeID: userInfo.organizeID }).then(response => {
+      getModule({ organizeId: userInfo.organizeId }).then(response => {
         const modules = response.data[0]
         accessedRoutes.forEach(routeItem => {
           if (routeItem.name === 'Goods') {

src/store/modules/user.js

@@ -12,7 +12,7 @@ const state = {
   avatar: '',
   systemName: '',
   systemImage: '',
-  organizeID: '',
+  organizeId: '',
   roles: []
 }
 
@@ -35,8 +35,8 @@ const mutations = {
   SET_AVATAR: (state, avatar) => {
     state.avatar = avatar
   },
-  SET_ORGANIZE_ID: (state, organizeID) => {
-    state.organizeID = organizeID
+  SET_ORGANIZE_ID: (state, organizeId) => {
+    state.organizeId = organizeId
   },
   SET_ROLES: (state, roles) => {
     state.roles = roles
@@ -46,7 +46,7 @@ const mutations = {
 const actions = {
   getSysInfo: function({ commit, state }) {
     return new Promise((resolve, reject) => {
-      getOrganizeInfo({ id: state.organizeID }).then(response => {
+      getOrganizeInfo({ id: state.organizeId }).then(response => {
         const { data } = response
         if (data) {
           const { systemName, systemImage } = data
@@ -93,11 +93,11 @@ const actions = {
           reject('getInfo: roles must be a non-null array!')
         } */
         data.roles = ['admin']
-        const { roles, accountName, avatar, organizeID } = data
+        const { roles, accountName, avatar, organizeId } = data
         commit('SET_ROLES', roles)
         commit('SET_NAME', accountName)
         commit('SET_AVATAR', avatar)
-        commit('SET_ORGANIZE_ID', organizeID)
+        commit('SET_ORGANIZE_ID', organizeId)
         dispatch('getSysInfo')
         resolve(data)
       }).catch(error => {
@@ -138,6 +138,7 @@ const actions = {
 
   // dynamically modify permissions
   changeRoles({ commit, dispatch }, role) {
+    // eslint-disable-next-line no-async-promise-executor
     return new Promise(async resolve => {
       const token = role + '-token'
 

src/utils/request.js

@@ -45,7 +45,9 @@ service.interceptors.response.use(
   response => {
     const res = response.data
     // if the custom code is not 20000, it is judged as an error.
-    if (res.code * 1 !== 1) {
+    if (res.code === 0) {
+      return res
+    } else {
       Message({
         message: res.msg || 'Error',
         type: 'error',
@@ -65,9 +67,6 @@ service.interceptors.response.use(
           })
         })
       }
-      // return Promise.reject(new Error(res.msg || 'Error'))
-    } else {
-      return res
     }
   },
   error => {

src/views/campaign/activity-edit.vue

@@ -1,30 +1,30 @@
 <template>
   <div class="app-container" style="width: 800px;margin: 0 auto;">
     <el-form ref="bannerForm" :model="form" label-width="100px">
-      <el-form-item label="活动类型:" prop="acType" :rules="rules.acType">
-        <el-select v-model="form.acType" placeholder="请选择">
+      <el-form-item label="活动类型:" prop="activeType" :rules="rules.activeType">
+        <el-select v-model="form.activeType" placeholder="请选择" @change="handeleSelChange">
           <el-option label="商品列表" :value="1" />
           <el-option label="宣传图（一张）" :value="2" />
           <el-option label="宣传图（多张）" :value="3" />
         </el-select>
-        <el-button v-if="form.acType === 3" type="primary" icon="el-icon-plus" :disabled="disabled" style="margin-left: 10px;" @click="handleAddList">新增宣传图</el-button>
+        <el-button v-if="form.activeType === 3" type="primary" icon="el-icon-plus" :disabled="disabled" style="margin-left: 10px;" @click="handleAddList">新增宣传图</el-button>
       </el-form-item>
-      <el-form-item label="主题:" prop="name" :rules="rules.name">
-        <el-input v-model="form.name" placeholder="请输入活动主题" style="width: 200px;" />
+      <el-form-item label="主题:" prop="topic" :rules="rules.topic">
+        <el-input v-model="form.topic" placeholder="请输入活动主题,30个字以内" maxlength="30" style="width: 200px;" />
       </el-form-item>
-      <el-form-item label="状态:" prop="status" :rules="rules.status">
-        <el-select v-model="form.status" placeholder="请选择">
+      <el-form-item label="状态:" prop="enabledStatus" :rules="rules.enabledStatus">
+        <el-select v-model="form.enabledStatus" placeholder="请选择">
           <el-option label="上线" :value="1" />
           <el-option label="下线" :value="0" />
         </el-select>
       </el-form-item>
-      <template v-if="form.acType === 1">
+      <template v-if="form.activeType === 1">
         <!-- 商品列表 -->
-        <el-form-item label="商品信息" :prop="productList" :rules="rules.productList">
-          <el-button type="primary" icon="el-icon-sort" size="mini" :disabled="disabled3(form.productList)" @click="handleOnInputBlur">一键排序</el-button>
+        <el-form-item label="商品信息" prop="products" :rules="rules.products">
+          <el-button type="primary" icon="el-icon-sort" size="mini" :disabled="disabled3(form.products)" @click="handleOnInputBlur">一键排序</el-button>
           <el-button type="primary" icon="el-icon-plus" size="mini" @click="handleDialogVisible">添加商品</el-button>
-          <el-checkbox-group v-show="false" v-model="form.productList" />
-          <el-table v-show="form.productList && form.productList.length>0" :data="form.productList" border>
+          <el-checkbox-group v-show="false" v-model="form.products" />
+          <el-table v-show="form.products && form.products.length>0" :data="form.products" border>
             <el-table-column property="mainImage" label="商品图片" align="center" width="80">
               <template slot-scope="{ row }">
                 <el-popover
@@ -38,15 +38,15 @@
                 </el-popover>
               </template>
             </el-table-column>
-            <el-table-column property="name" label="商品名称" align="center" />
+            <el-table-column property="productName" label="商品名称" align="center" />
             <el-table-column prop="validFlag" label="商品状态" align="center" width="150">
               <template slot-scope="{row}">
                 <el-tag :type="row.validFlag | statusFilter">{{ row.validFlag*1 === 1 ? '已上架' : '已下架' }}</el-tag>
               </template>
             </el-table-column>
-            <el-table-column label="排序" align="center" width="100">
+            <el-table-column prop="sort" label="排序" align="center" width="100">
               <template slot-scope="{row}">
-                <el-input v-model="row.sort" maxlength="4" minlength="1" />
+                <el-input v-model="row.sort" :maxlength="4" size="mini" />
               </template>
             </el-table-column>
             <el-table-column label="操作" align="center">
@@ -57,9 +57,9 @@
           </el-table>
         </el-form-item>
       </template>
-      <template v-if="form.acType === 2 || form.acType === 3">
-        <div v-for="(activ,index) in form.activityList" :key="index" class="form-cell">
-          <el-form-item label="宣传图:" prop="banner" :rules="rules.banner">
+      <template v-if="form.activeType === 2 || form.activeType === 3">
+        <div v-for="(activ,index) in form.images" :key="index" class="form-cell">
+          <el-form-item label="宣传图:" prop="image" :rules="rules.image">
             <div class="form-el-upload">
               <el-upload
                 class="avatar-uploader"
@@ -70,18 +70,18 @@
                 :before-upload="beforeUpload"
               >
                 <div v-loading="loadImgLoading" class="avatar">
-                  <img v-if="form.banner" :src="form.banner" @error="reloadImage" @load="loadSucess">
+                  <img v-if="activ.image" :src="activ.image" @error="reloadImage" @load="loadSucess">
                   <i v-else class="el-icon-plus avatar-uploader-icon" />
                 </div>
               </el-upload>
             </div>
           </el-form-item>
           <!-- 商品列表 -->
-          <el-form-item label="商品信息" :prop="`activityList.${index}.productList`" :rules="rules.productList">
-            <el-button type="primary" icon="el-icon-sort" size="mini" :disabled="disabled3(activ.productList)" @click="handleOnInputBlur">一键排序</el-button>
-            <el-button type="primary" icon="el-icon-plus" size="mini" @click="handleDialogVisible">添加商品</el-button>
-            <el-checkbox-group v-show="false" v-model="activ.productList" />
-            <el-table v-show="activ.productList && activ.productList.length>0" :data="activ.productList" border>
+          <el-form-item label="商品信息" :prop="`images.${index}.products`" :rules="rules.products">
+            <el-button type="primary" icon="el-icon-sort" size="mini" :disabled="disabled3(activ.products)" @click="handleOnInputSort(index)">一键排序</el-button>
+            <el-button type="primary" icon="el-icon-plus" size="mini" @click="handleDialogVisible(index)">添加商品</el-button>
+            <el-checkbox-group v-show="false" v-model="activ.products" />
+            <el-table v-show="activ.products && activ.products.length>0" :data="activ.products" border>
               <el-table-column property="mainImage" label="商品图片" align="center" width="80">
                 <template slot-scope="{ row }">
                   <el-popover
@@ -95,7 +95,7 @@
                   </el-popover>
                 </template>
               </el-table-column>
-              <el-table-column property="name" label="商品名称" align="center" />
+              <el-table-column property="productName" label="商品名称" align="center" />
               <el-table-column prop="validFlag" label="商品状态" align="center" width="150">
                 <template slot-scope="{row}">
                   <el-tag :type="row.validFlag | statusFilter">{{ row.validFlag*1 === 1 ? '已上架' : '已下架' }}</el-tag>
@@ -108,7 +108,7 @@
               </el-table-column>
               <el-table-column label="操作" align="center">
                 <template slot-scope="scope">
-                  <el-button type="text" @click="handleDeletePros(scope.$index)">删除</el-button>
+                  <el-button type="text" @click="handleDeletePros(scope.$index,index)">删除</el-button>
                 </template>
               </el-table-column>
             </el-table>
@@ -117,7 +117,7 @@
         </div>
       </template>
     </el-form>
-    <div class="el-dialog__footer" style="text-align: center;">
+    <div class="el-dialog__footer" style="text-align: left;">
       <el-button type="primary" @click="onSubmit('bannerForm')">保存</el-button>
     </div>
     <!-- 商品弹框 -->
@@ -126,16 +126,16 @@
 </template>
 
 <script>
-import { getClubList, createOperator, updateStatus } from '@/api/club'
+import { saveActive, formActive } from '@/api/campaign'
 import goodDialog from './components/good-multi-dialog'
-const defaultForm = () => {
+const defaultImages = () => {
   return {
-    banner: 'https://img1.baidu.com/it/u=1016138010,1907110459&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
-    productList: []
+    image: 'https://img1.baidu.com/it/u=1016138010,1907110459&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
+    products: []
   }
 }
 export default {
-  name: 'BannerEdit',
+  name: 'ActivityEdit',
   components: { goodDialog },
   filters: {
     statusFilter(status) {
@@ -147,63 +147,46 @@ export default {
     }
   },
   data() {
-    return {
-      form: {
-        acType: 1,
-        name: '',
-        banner: 'https://img1.baidu.com/it/u=1016138010,1907110459&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
-        sort: 0,
-        status: 1,
-        actId: '',
-        productList: [],
-        activityList: [
+    const defaultForm = () => {
+      return {
+        organizeId: this.$store.getters.organizeId,
+        topic: '', // 活动主题
+        activeType: 1, // 活动类型 1商品列表 2宣传图（一张） 3宣传图（多张）)
+        enabledStatus: 1, // 活动上线状态
+        products: [],
+        images: [// 活动 2,3
           {
-            banner: 'https://img1.baidu.com/it/u=1016138010,1907110459&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
-            productList: []
+            image: 'https://img1.baidu.com/it/u=1016138010,1907110459&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
+            products: []
           }
         ]
-      },
-      productData: [
-        {
-          mainImage: 'https://img1.baidu.com/it/u=1016138010,1907110459&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
-          productName: 'Twinkle 水婴肌 美白 补水 紧致 无创水光',
-          shopName: '雅光博睿医药科技（广东）有限公司',
-          unit: '20ML',
-          costPrice: '50000.00',
-          price: '50000.00',
-          addTime: '2023-04-14 14:45:39',
-          validFlag: 1
-        }
-      ],
-      formParams: {
-        id: '',
-        month: '',
-        endMonth: '',
-        status: '',
-        configure: 1, // 专属优惠券配置  1是、0否
-        coupons: []
-      },
+      }
+    }
+    return {
+      form: defaultForm(),
+      ActivIndex: 0,
       editType: 'add',
       // 商品列表
       dialogVisible: false,
       loadImgLoading: false,
       rules: {
-        acType: [{ required: true, message: '请选择活动类型', trigger: 'blur' }],
-        name: [{ required: true, message: '请填写轮播主题', trigger: 'blur' }],
+        activeType: [{ required: true, message: '请选择活动类型', trigger: 'blur' }],
+        topic: [{ required: true, message: '请填写轮播主题', trigger: 'blur' }],
         banner: [{ required: true, message: '请上传轮播图', trigger: 'blur' }],
-        productList: [{ required: true, type: 'array', message: '请添加商品', trigger: ['change'] }],
+        products: [{ required: true, type: 'array', message: '请添加商品', trigger: ['change'] }],
         sort: [{ required: true, message: '排序值不能为空', trigger: 'blur' }],
-        status: [{ required: true, message: '请选择状态', trigger: 'blur' }]
+        enabledStatus: [{ required: true, message: '请选择状态', trigger: 'blur' }]
       },
-      delFlag: false
+      handelProduts: []
+
     }
   },
   computed: {
     disabled() {
-      return this.form.activityList.length === 10
+      return this.form.images.length === 10
     },
     disabled1() {
-      return this.form.activityList.length === 1
+      return this.form.images.length === 1
     },
     getToken() {
       return {
@@ -216,48 +199,22 @@ export default {
   },
   created() {
     this.editType = this.$route.query.type || 'edit'
-    console.log('editType', this.editType)
-    // this.initForm(this.editType)
+    if (this.editType === 'edit') {
+      console.log('edit')
+      this.formActive(this.$route.query.id)
+    }
   },
   methods: {
-    initForm(type) {
-      if (type === 'add') {
-        console.log('add')
-        this.svipCoupon(type, 1, 0)
-      } else {
-        console.log('edit')
-        this.svipCoupon(type, 0, this.$route.query.id)
-      }
-    },
-    async svipCoupon(type, configure, id) {
-      const res = await svipCoupon({ id: id, configure: configure })
-      const data = res.data.svipcouponForm
-      this.formParams = { ...this.formParams, ...data }
-      if (data.coupons.length > 0) {
-        this.delFlag = true
-        this.form.formList = data.coupons.map((el) => {
-          el = { ...el, ...this.defaultShop }
-          if (el.shop) {
-            el.shopData.push(el.shop)
-          }
-          return el
-        })
-        console.log('formList', this.form.formList)
-      } else {
-        for (let i = 0; i <= 2; i++) {
-          this.form.formList.push(defaultForm())
-        }
-      }
+    async formActive(id) {
+      // 获取轮播图详情
+      const res = await formActive(id)
+      this.form = { ...this.form, ...res.data }
     },
     // 显示选择商品弹窗
-    handleDialogVisible() {
+    handleDialogVisible(index) {
+      if (index) { this.ActivIndex = index }
       this.dialogVisible = true
     },
-    handleGoodDialogVisible(index) {
-      // 显示选择商品弹窗
-      this.addIndex = index
-      this.dialogGoodVisible = true
-    },
     deleteShop() {
       // 清除供应商
       this.form.productId = ''
@@ -265,70 +222,63 @@ export default {
     },
     handleGoodConfirm(data) {
       // 确认选择商品
-      const from = this.form.formList[this.addIndex]
-      from.associateList.push(data)
-      console.log('from', this.form.formList)
+      if (this.form.activeType === 1) {
+        const products = data.map(item => { item.sort = 0; return item })
+        this.form.products = [...this.form.products, ...products]
+      } else {
+        const products = data.map(item => { item.sort = 0; return item })
+        this.form.images[this.ActivIndex].products = [...this.form.images[this.ActivIndex].products, ...products]
+      }
+      console.log('products', this.form.products)
       this.handleGoodCancel()
     },
-    handleDeletePros(index) {
+    handeSetSort() {
+      return { sort: 0 }
+    },
+    handleDeletePros(index, acIndex) {
       // 删除商品
       this.$confirm('确定删除吗？', '提示', {
         confirmButtonText: '确定',
         cancelButtonText: '取消',
         type: 'warning'
       }).then(() => {
-        this.from.productList.splice(index, 1)
+        console.log('1111', this.form)
+        if (this.form.activeType === 1) {
+          this.form.products.splice(index, 1)
+        } else {
+          this.form.images[acIndex].products.splice(index, 1)
+        }
       })
     },
     onSubmit(formName) {
       this.$refs[formName].validate(valid => {
         if (valid) {
-          this.handleFormParams()
           this.$confirm('是否提交数据', '提示', {
             confirmButtonText: '确定',
             cancelButtonText: '取消',
             type: 'warning'
           }).then(() => {
-            console.log('formParams', this.formParams)
-            if (this.editType === 'add') {
-              this.formParams.configure = 1
-            } else {
-              this.formParams.configure = 0
-            }
-            this.saveVipCoupon(this.formParams)
+            console.log('form', this.form)
+            this.saveActive(this.form)
           })
         } else {
           return false
         }
       })
     },
-    handleFormParams() {
-      // 处理参数
-      this.formParams.coupons = this.form.formList.map((el) => {
-        if (el.associateList && el.associateList.length > 0) {
-          el.associateList = el.associateList.map((pro) => {
-            return {
-              sort: pro.sort,
-              pcStatus: pro.pcStatus,
-              appletsStatus: pro.appletsStatus,
-              name: pro.name,
-              shopName: pro.shopName,
-              mainImage: pro.mainImage,
-              productId: pro.productId
-            }
-          })
-        }
-        return el
-      })
-    },
-    async saveVipCoupon(params) {
-      // 保存超级会员优惠券
-      await saveVipCoupon(params)
+    // 保存活动
+    async saveActive(params) {
+      // 保存
+      await saveActive(params)
       this.$message.success('保存成功')
       setTimeout(() => {
-        this.$router.push({ path: '/member/coupon/list' })
+        this.$router.push({ path: '/campaign/activity-list' })
       }, 1000)
     },
+    // 修改活动类型时清空商品
+    handeleSelChange() {
+      this.handelProduts = []
+    },
     // 取消选择商品
     handleGoodCancel() {
       this.dialogVisible = false
@@ -336,7 +286,7 @@ export default {
     },
     handleAddList() {
       // 新增宣传图
-      this.form.activityList.push(defaultForm())
+      this.form.images.push(defaultImages())
     },
     handleDelete(index) {
       // 删除单挑优惠券
@@ -345,27 +295,16 @@ export default {
         cancelButtonText: '取消',
         type: 'warning'
       }).then(() => {
-        if (this.delFlag) {
-          this.delCoupon(item.id, index)
-        } else {
-          this.form.activityList.splice(index, 1)
-        }
+        this.form.images.splice(index, 1)
       })
     },
-    async delCoupon(id, index) {
-      // 保存超级会员优惠券
-      if (id) {
-        try {
-          await delCoupon(id)
-        } catch (error) {
-          console.log(error)
-        }
-      }
-      this.form.formList.splice(index, 1)
+    handleOnInputBlur() {
+      // 商品排序
+      this.form.products.sort(this.sortByEnent('sort'))
     },
-    handleOnInputBlur(formItem) {
+    handleOnInputSort(index) {
       // 商品排序
-      this.form.productList.sort(this.sortByEnent('sort'))
+      this.form.images[index].products.sort(this.sortByEnent('sort'))
     },
     sortByEnent(i) {
       // 排序
@@ -373,23 +312,6 @@ export default {
         return a[i] - b[i] //  a[i] - b[i]为正序，倒叙为  b[i] - a[i]
       }
     },
-    handlePcStatusChange(row) {
-      // PC状态开启关闭
-      console.log('row', row)
-      if (row.pcStatus === '0') {
-        row.pcStatus = '1'
-      } else {
-        row.pcStatus = '0'
-      }
-    },
-    handleAppStatusChange(row) {
-      // 小程序状态开启关闭
-      if (row.appletsStatus === '0') {
-        row.appletsStatus = '1'
-      } else {
-        row.appletsStatus = '0'
-      }
-    },
     disabled3(array) {
       if (array && array.length >= 2) {
         return false

src/views/campaign/activity-list.vue

@@ -3,7 +3,7 @@
     <div class="filter-container">
       <div class="filter-control">
         <span>活动类型:</span>
-        <el-select v-model="listQuery.stats" style="width:120px;" clearable @change="getList">
+        <el-select v-model="listQuery.activeType" style="width:120px;" clearable @change="getList">
           <el-option value="" label="请选择" />
           <el-option :value="1" label="商品列表" />
           <el-option :value="2" label="宣传图(一张)" />
@@ -13,18 +13,18 @@
       <div class="filter-control">
         <span>主题:</span>
         <el-input
-          v-model="listQuery.productId"
+          v-model="listQuery.topic"
           placeholder="请输入活动主题"
           clearable
-          @input="e => (listQuery.productId= checkedInput(e,1))"
+          @input="e => (listQuery.topic= checkedInput(e,1))"
           @keyup.enter.native="getList"
           @clear="getList"
         />
       </div>
       <div class="filter-control">
         <span>状态:</span>
-        <el-select v-model="listQuery.status" style="width:120px;" clearable @change="getList">
-          <el-option value="" label="请选择" />
+        <el-select v-model="listQuery.enabledStatus" style="width:120px;" clearable @change="getList">
+          <el-option value="" label="所有" />
           <el-option :value="0" label="已上线" />
           <el-option :value="1" label="已下线" />
         </el-select>
@@ -43,19 +43,19 @@
       highlight-current-row
       :header-cell-style="{background:'#eef1f6',color:'#606266'}"
     >
-      <el-table-column label="活动ID" align="center" prop="classifyName" />
-      <el-table-column label="活动类型" align="center" prop="classifyName" />
-      <el-table-column label="活动主题" align="center" prop="classifyName" />
+      <el-table-column label="活动ID" align="center" prop="id" />
+      <el-table-column label="活动类型" align="center" prop="activeType">
+        <template slot-scope="{row}">
+          <span>{{ row.activeType | activeTypeFilter }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="活动主题" align="center" prop="topic" />
       <el-table-column class-name="status-col" label="状态" align="center" prop="status">
         <template slot-scope="{row}">
-          <el-tooltip :content="row.status*1 === 1 ? '停用' : '启用'" placement="top">
-            <el-switch
-              v-model="row.status"
-              active-value="1"
-              inactive-value="0"
-              @change="changeStatus(row.id, row.status)"
-            />
-          </el-tooltip>
+          <el-tag v-if="row.enabledStatus===0" type="danger" size="small">已下线</el-tag>
+          <el-tag v-else type="success" size="small">已上线</el-tag>
+          <el-button v-if="row.enabledStatus === 0" type="primary" size="mini" @click="handleShangeStatus(row.id,row.enabledStatus)">上线</el-button>
+          <el-button v-else type="primary" size="mini" @click="handleShangeStatus(row.id,row.enabledStatus)">下线</el-button>
         </template>
       </el-table-column>
       <el-table-column align="center" label="创建时间" prop="addTime">
@@ -66,29 +66,34 @@
       <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
         <template slot-scope="{row}">
           <el-button type="primary" size="mini" @click="handleToEdit('edit',row.id)">编辑</el-button>
-          <el-button type="danger" size="mini" @click="handleDelete(row)">删除</el-button>
+          <el-button type="danger" size="mini" @click="handleDelete(row.id)">删除</el-button>
         </template>
       </el-table-column>
     </el-table>
-
-    <pagination v-show="total>20" :total="total" :page.sync="listQuery.index" :limit.sync="listQuery.pageSize" @pagination="getList" />
-
+    <!-- 页码 -->
+    <pagination
+      :total="total"
+      :page-sizes="[20]"
+      :page-size="20"
+      :page.sync="listQuery.index"
+      :limit.sync="listQuery.pageSize"
+      @pagination="getclubList"
+    />
   </div>
 </template>
 
 <script>
-import { getCategory, switchClassify, saveCategorySort } from '@/api/goods-classify'
-import Pagination from '@/components/Pagination'
+import { getActiveList, getActiveStatus, delActive } from '@/api/campaign'
 
 export default {
-  components: { Pagination },
   filters: {
-    statusFilter(status) {
-      const statusMap = {
-        1: 'success',
-        0: 'danger'
+    activeTypeFilter(value) {
+      const map = {
+        1: '商品列表',
+        2: '宣传图(一张)',
+        3: '宣传图(多张)'
       }
-      return statusMap[status]
+      return map[value]
     }
   },
   data() {
@@ -99,55 +104,65 @@ export default {
       listQuery: {
         index: 1,
         pageSize: 20,
-        organizeID: this.$store.getters.organizeId
+        enabledStatus: '',
+        organizeId: this.$store.getters.organizeId
       }
     }
   },
-  computed: {
-    organizeID() {
-      return this.$store.getters.organizeId
-    }
-  },
   created() {
     this.getList()
   },
   methods: {
-    getList() {
+    // 获取轮播图列表
+    async getList() {
       this.listLoading = true
-      getCategory(this.listQuery).then(response => {
-        this.list = response.data.results
-        this.total = response.data.totalRecord
+      try {
+        const res = await getActiveList(this.listQuery)
+        this.list = res.data.results
+        this.total = res.data.totalRecord
         this.listLoading = false
-      })
+      } catch (error) {
+        console.log('error', error)
+      }
     },
-    changeStatus(id, status) {
-      const confirmTxt = '确定要' + (status * 1 === 1 ? '启用' : '停用') + '该分类吗？'
+    // 操作上下线
+    handleShangeStatus(id, status) {
+      let confirmTxt = ''
+      if (status === 1) {
+        confirmTxt = '确定下线该活动吗？ '
+      } else {
+        confirmTxt = '确定上线该活动吗？ '
+      }
       this.$confirm(confirmTxt).then(_ => {
-        this.confirmChange(id)
+        this.getActiveStatus(id)
       }).catch(() => {
         this.getList()
       })
     },
-    confirmChange(id) {
-      switchClassify({ id: id }).then(() => {
+    // 上下线轮播图
+    async getActiveStatus(id) {
+      try {
+        await getActiveStatus(id)
+        this.$message({ message: '操作成功', type: 'success', center: true })
         this.getList()
-      }).catch(() => {
-        this.getList()
-      })
+      } catch (error) {
+        console.log('error', error)
+      }
     },
-    batchSaveSort() {
-      const sorts = []
-      this.list.map(item => {
-        if (item.sort) {
-          sorts.push(item.id + '-' + Math.abs(item.sort))
-        }
+    // 删除活动
+    handleDelete(id) {
+      this.$confirm('确定删除该该活动吗？').then(_ => {
+        this.delActive(id)
       })
-      saveCategorySort({ newProducSorttList: sorts.join(',') }).then(response => {
-        this.$message({ message: response.msg, type: 'success', center: true })
-        this.getList()
-      }).catch(() => {
+    },
+    async delActive(id) {
+      try {
+        await delActive(id)
+        this.$message({ message: '操作成功', type: 'success' })
         this.getList()
-      })
+      } catch (error) {
+        console.log('error', error)
+      }
     },
     handleToEdit(type, id) {
       if (type === 'add') {
@@ -155,6 +170,18 @@ export default {
       } else {
         this.$router.push({ path: '/campaign/activity-edit', query: { type: type, id: id }})
       }
+    },
+    checkedInput(event, type) {
+      let pattern = ''
+      switch (type) {
+        case 1:
+          pattern = /[^\d]/g
+          break
+        case 2:
+          pattern = /[^u4E00-u9FA5|d|a-zA-Z|rns,.?!，。？！…—&$=()-+/*{}[]]|s/g
+          break
+      }
+      return event.replace(pattern, '')
     }
   }
 }

src/views/campaign/banner-edit.vue

@@ -37,13 +37,13 @@
         </el-radio-group>
       </el-form-item>
       <template v-if="form.jumpType === 1">
-        <el-form-item label="商品信息" prop="productData" :rules="rules.productData">
-          <template v-if="form.productData && form.productData.length === 0">
+        <el-form-item label="商品信息" prop="products" :rules="rules.products">
+          <template v-if="form.products && form.products.length === 0">
             <el-button type="primary" autofocussize="mini" size="mini" icon="el-icon-plus" @click="handleDialogVisible">选择商品</el-button>
-            <el-checkbox-group v-show="false" v-model="form.productData" />
+            <el-checkbox-group v-show="false" v-model="form.products" />
           </template>
           <template v-else>
-            <el-table :data="form.productData" border width="1000">
+            <el-table :data="form.products" border width="1000">
               <el-table-column property="mainImage" label="商品图片" align="center" width="80">
                 <template slot-scope="{ row }">
                   <el-popover
@@ -75,15 +75,15 @@
           <el-select v-model="form.jumpActiveId" clearable>
             <el-option
               v-for="item in activityList"
-              :key="item.jumpActiveId"
-              :label="item.name"
-              :value="item.jumpActiveId"
+              :key="item.id"
+              :label="item.topic"
+              :value="item.id"
             />
           </el-select>
         </el-form-item>
       </template>
     </el-form>
-    <div class="el-dialog__footer" style="text-align: center;">
+    <div class="el-dialog__footer" style="text-align: left;">
       <el-button type="primary" @click="onSubmit('bannerForm')">保存</el-button>
     </div>
     <!-- 商品弹框 -->
@@ -92,20 +92,8 @@
 </template>
 
 <script>
-import { savePageBanner, svipCoupon } from '@/api/campaign'
+import { savePageBanner, formPageBanner, getActiveList } from '@/api/campaign'
 import goodDialog from './components/good-dialog'
-const defaultForm = () => {
-  return {
-    shopId: 0,
-    shopData: [],
-    couponType: 0,
-    couponAmount: '',
-    touchPrice: '',
-    productType: '1',
-    categoryType: '1',
-    associateList: []// 指定商品信息
-  }
-}
 export default {
   name: 'BannerEdit',
   components: { goodDialog },
@@ -119,8 +107,8 @@ export default {
     }
   },
   data() {
-    return {
-      form: {
+    const defaultForm = () => {
+      return {
         organizeId: this.$store.getters.organizeId,
         bannerName: '', // 轮播主题
         bannerImage: 'https://img1.baidu.com/it/u=1016138010,1907110459&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
@@ -129,26 +117,12 @@ export default {
         jumpType: null, // 跳转类型
         jumpActiveId: null, // 跳转活动Id
         jumpProductId: null, // 单个跳转商品详情Id
-        productData: []
-      },
-      activityList: [
-        {
-          actId: 1,
-          name: '活动主题1'
-        },
-        {
-          actId: 2,
-          name: '活动主题2'
-        }
-      ],
-      formParams: {
-        id: '',
-        month: '',
-        endMonth: '',
-        status: '',
-        configure: 1, // 专属优惠券配置  1是、0否
-        coupons: []
-      },
+        products: []
+      }
+    }
+    return {
+      form: defaultForm(),
+      activityList: [],
       editType: 'add',
       // 商品列表
       dialogVisible: false,
@@ -156,22 +130,21 @@ export default {
       rules: {
         bannerName: [{ required: true, message: '请填写轮播主题', trigger: 'blur' }],
         bannerImage: [{ required: true, message: '请上传轮播图', trigger: 'blur' }],
-        productData: [{ required: true, type: 'array', message: '请添加一个商品', trigger: ['change'] }],
+        products: [{ required: true, type: 'array', message: '请添加一个商品', trigger: ['change'] }],
         sort: [{ required: true, message: '排序值不能为空', trigger: 'blur' }],
         enabledStatus: [{ required: true, message: '请选择状态', trigger: 'blur' }],
         jumpType: [{ required: true, message: '请选择跳转类型', trigger: 'blur' }],
         jumpActiveId: [{ required: true, message: '请选择活动列表', trigger: 'blur' }]
       },
-      delFlag: false
+      listQuery: {
+        index: 1,
+        pageSize: 100,
+        enabledStatus: 1,
+        organizeId: this.$store.getters.organizeId
+      }
     }
   },
   computed: {
-    disabled() {
-      return this.form.formList.length === 5
-    },
-    disabled1() {
-      return this.form.formList.length === 1
-    },
     getToken() {
       return {
         'token': this.$store.getters.token
@@ -183,38 +156,22 @@ export default {
   },
   created() {
     this.editType = this.$route.query.type || 'edit'
-    console.log('editType', this.editType)
-    // this.initForm(this.editType)
+    if (this.editType === 'edit') {
+      console.log('edit')
+      this.formPageBanner(this.$route.query.id)
+    }
+    this.getActiveList()
   },
   methods: {
-    initForm(type) {
-      if (type === 'add') {
-        console.log('add')
-        this.svipCoupon(type, 1, 0)
-      } else {
-        console.log('edit')
-        this.svipCoupon(type, 0, this.$route.query.id)
-      }
+    async getActiveList() {
+      // 获取活动列表
+      const res = await getActiveList(this.listQuery)
+      this.activityList = [...this.activityList, ...res.data.results]
     },
-    async svipCoupon(type, configure, id) {
-      const res = await svipCoupon({ id: id, configure: configure })
-      const data = res.data.svipcouponForm
-      this.formParams = { ...this.formParams, ...data }
-      if (data.coupons.length > 0) {
-        this.delFlag = true
-        this.form.formList = data.coupons.map((el) => {
-          el = { ...el, ...this.defaultShop }
-          if (el.shop) {
-            el.shopData.push(el.shop)
-          }
-          return el
-        })
-        console.log('formList', this.form.formList)
-      } else {
-        for (let i = 0; i <= 2; i++) {
-          this.form.formList.push(defaultForm())
-        }
-      }
+    async formPageBanner(id) {
+      // 获取轮播图详情
+      const res = await formPageBanner(id)
+      this.form = { ...this.form, ...res.data }
     },
     // 显示选择商品弹窗
     handleDialogVisible() {
@@ -226,15 +183,15 @@ export default {
       this.dialogGoodVisible = true
     },
     deleteShop() {
-      // 清除供应商
+      // 清除商品
       this.form.jumpProductId = ''
-      this.form.productData = []
+      this.form.products = []
     },
     handleGoodConfirm(data) {
       // 确认选择商品
-      this.form.jumpProductId = data.productID
-      this.form.productData.push(data)
-      console.log('productData', this.form.productData)
+      this.form.jumpProductId = data.productId
+      this.form.products.push(data)
+      console.log('products', this.form.products)
       console.log('jumpProductId', this.form.jumpProductId)
       this.handleGoodCancel()
     },
@@ -255,11 +212,11 @@ export default {
       })
     },
     async savePageBanner(params) {
-      // 保存超级会员优惠券
+      // 保存
       await savePageBanner(params)
       this.$message.success('保存成功')
       setTimeout(() => {
-        this.$router.push({ path: '/campaign/list' })
+        this.$router.push({ path: '/campaign/list', query: { type: 1 }})
       }, 1000)
     },
     // 取消选择商品
@@ -267,10 +224,6 @@ export default {
       this.dialogVisible = false
       this.$refs.goodDialog.visible = false
     },
-    handleAddList() {
-      // 新增优惠券
-      this.form.formList.push(defaultForm())
-    },
     // 上传图标事件
     handleSuccess(response, file) {
       this.loadImgLoading = true

src/views/campaign/category-edit.vue

@@ -1,10 +1,10 @@
 <template>
   <div class="app-container" style="width: 800px;margin: 0 auto;">
     <el-form ref="bannerForm" :model="form" label-width="100px">
-      <el-form-item label="主题:" prop="name" :rules="rules.name">
-        <el-input v-model="form.name" placeholder="请输入活动主题" style="width: 250px;" />
+      <el-form-item label="主题:" prop="topic" :rules="rules.topic">
+        <el-input v-model="form.topic" placeholder="请输入菜单名，5字以内" style="width: 250px;" />
       </el-form-item>
-      <el-form-item label="轮播图:" prop="banner" :rules="rules.banner">
+      <el-form-item label="图标:" prop="image" :rules="rules.image">
         <div class="form-el-upload">
           <el-upload
             class="avatar-uploader"
@@ -15,7 +15,7 @@
             :before-upload="beforeUpload"
           >
             <div v-loading="loadImgLoading" class="avatar">
-              <img v-if="form.banner" :src="form.banner" @error="reloadImage" @load="loadSucess">
+              <img v-if="form.image" :src="form.image" @error="reloadImage" @load="loadSucess">
               <i v-else class="el-icon-plus avatar-uploader-icon" />
             </div>
           </el-upload>
@@ -24,8 +24,8 @@
       <el-form-item label="排序:" prop="sort" :rules="rules.sort">
         <el-input v-model="form.sort" style="width: 200px" />
       </el-form-item>
-      <el-form-item label="状态:" prop="status" :rules="rules.status">
-        <el-select v-model="form.status" placeholder="请选择">
+      <el-form-item label="状态:" prop="enabledStatus" :rules="rules.enabledStatus">
+        <el-select v-model="form.enabledStatus" placeholder="请选择">
           <el-option label="上线" :value="1" />
           <el-option label="下线" :value="0" />
         </el-select>
@@ -37,13 +37,13 @@
         </el-radio-group>
       </el-form-item>
       <template v-if="form.jumpType === 1">
-        <el-form-item label="商品信息" prop="productId" :rules="rules.productId">
-          <template v-if="productData && productData.length === 0">
+        <el-form-item label="商品信息" prop="products" :rules="rules.products">
+          <template v-if="form.products && form.products.length === 0">
             <el-button type="primary" autofocussize="mini" size="mini" icon="el-icon-plus" @click="handleDialogVisible">选择商品</el-button>
-            <el-checkbox-group v-show="false" v-model="form.productId" />
+            <el-checkbox-group v-show="false" v-model="form.products" />
           </template>
           <template v-else>
-            <el-table :data="productData" border width="1000">
+            <el-table :data="form.products" border width="1000">
               <el-table-column property="mainImage" label="商品图片" align="center" width="80">
                 <template slot-scope="{ row }">
                   <el-popover
@@ -71,19 +71,19 @@
         </el-form-item>
       </template>
       <template v-if="form.jumpType === 2">
-        <el-form-item label="选择活动:" prop="actId" :rules="rules.actId">
-          <el-select v-model="form.actId" clearable>
+        <el-form-item label="选择活动:" prop="jumpActiveId" :rules="rules.jumpActiveId">
+          <el-select v-model="form.jumpActiveId" clearable>
             <el-option
               v-for="item in activityList"
-              :key="item.actId"
-              :label="item.name"
-              :value="item.actId"
+              :key="item.id"
+              :label="item.topic"
+              :value="item.id"
             />
           </el-select>
         </el-form-item>
       </template>
     </el-form>
-    <div class="el-dialog__footer" style="text-align: center;">
+    <div class="el-dialog__footer" style="text-align: left;">
       <el-button type="primary" @click="onSubmit('bannerForm')">保存</el-button>
     </div>
     <!-- 商品弹框 -->
@@ -92,22 +92,10 @@
 </template>
 
 <script>
-import { getClubList, createOperator, updateStatus } from '@/api/club'
+import { saveMenu, formMenu, getActiveList } from '@/api/campaign'
 import goodDialog from './components/good-dialog'
-const defaultForm = () => {
-  return {
-    shopId: 0,
-    shopData: [],
-    couponType: 0,
-    couponAmount: '',
-    touchPrice: '',
-    productType: '1',
-    categoryType: '1',
-    associateList: []// 指定商品信息
-  }
-}
 export default {
-  name: 'CategoryEdit',
+  name: 'BannerEdit',
   components: { goodDialog },
   filters: {
     statusFilter(status) {
@@ -119,69 +107,44 @@ export default {
     }
   },
   data() {
+    const defaultForm = () => {
+      return {
+        organizeId: this.$store.getters.organizeId,
+        topic: '', // 菜单主题
+        image: 'https://img1.baidu.com/it/u=1016138010,1907110459&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
+        sort: 0, // 菜单排序值
+        enabledStatus: 1, // 菜单上线状态
+        jumpType: null, // 跳转类型
+        jumpActiveId: null, // 跳转活动Id
+        jumpProductId: null, // 单个跳转商品详情Id
+        products: []
+      }
+    }
     return {
-      form: {
-        name: '',
-        banner: 'https://img1.baidu.com/it/u=1016138010,1907110459&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
-        sort: 0,
-        status: 1,
-        jumpType: null,
-        actId: '',
-        productId: null
-      },
-      activityList: [
-        {
-          actId: 1,
-          name: '活动主题1'
-        },
-        {
-          actId: 2,
-          name: '活动主题2'
-        }
-      ],
-      productData: [
-        {
-          mainImage: 'https://img1.baidu.com/it/u=1016138010,1907110459&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
-          productName: 'Twinkle 水婴肌 美白 补水 紧致 无创水光',
-          shopName: '雅光博睿医药科技（广东）有限公司',
-          unit: '20ML',
-          costPrice: '50000.00',
-          price: '50000.00',
-          addTime: '2023-04-14 14:45:39',
-          validFlag: 1
-        }
-      ],
-      formParams: {
-        id: '',
-        month: '',
-        endMonth: '',
-        status: '',
-        configure: 1, // 专属优惠券配置  1是、0否
-        coupons: []
-      },
+      form: defaultForm(),
+      activityList: [],
       editType: 'add',
       // 商品列表
       dialogVisible: false,
       loadImgLoading: false,
       rules: {
-        name: [{ required: true, message: '请填写轮播主题', trigger: 'blur' }],
-        banner: [{ required: true, message: '请上传轮播图', trigger: 'blur' }],
-        productId: [{ required: true, type: 'array', message: '请添加一个商品', trigger: ['change'] }],
+        topic: [{ required: true, message: '请填写菜单名称', trigger: 'blur' }],
+        image: [{ required: true, message: '请上传菜单图标', trigger: 'blur' }],
+        products: [{ required: true, type: 'array', message: '请添加一个商品', trigger: ['change'] }],
         sort: [{ required: true, message: '排序值不能为空', trigger: 'blur' }],
-        status: [{ required: true, message: '请选择状态', trigger: 'blur' }],
+        enabledStatus: [{ required: true, message: '请选择状态', trigger: 'blur' }],
         jumpType: [{ required: true, message: '请选择跳转类型', trigger: 'blur' }],
-        actId: [{ required: true, message: '请选择活动列表', trigger: 'blur' }]
+        jumpActiveId: [{ required: true, message: '请选择活动列表', trigger: 'blur' }]
       },
-      delFlag: false
+      listQuery: {
+        index: 1,
+        pageSize: 100,
+        enabledStatus: 1,
+        organizeId: this.$store.getters.organizeId
+      }
     }
   },
   computed: {
-    disabled() {
-      return this.form.formList.length === 5
-    },
-    disabled1() {
-      return this.form.formList.length === 1
-    },
     getToken() {
       return {
         'token': this.$store.getters.token
@@ -193,38 +156,22 @@ export default {
   },
   created() {
     this.editType = this.$route.query.type || 'edit'
-    console.log('editType', this.editType)
-    // this.initForm(this.editType)
+    if (this.editType === 'edit') {
+      console.log('edit')
+      this.formMenu(this.$route.query.id)
+    }
+    this.getActiveList()
   },
   methods: {
-    initForm(type) {
-      if (type === 'add') {
-        console.log('add')
-        this.svipCoupon(type, 1, 0)
-      } else {
-        console.log('edit')
-        this.svipCoupon(type, 0, this.$route.query.id)
-      }
+    async getActiveList() {
+      // 获取活动列表
+      const res = await getActiveList(this.listQuery)
+      this.activityList = [...this.activityList, ...res.data.results]
     },
-    async svipCoupon(type, configure, id) {
-      const res = await svipCoupon({ id: id, configure: configure })
-      const data = res.data.svipcouponForm
-      this.formParams = { ...this.formParams, ...data }
-      if (data.coupons.length > 0) {
-        this.delFlag = true
-        this.form.formList = data.coupons.map((el) => {
-          el = { ...el, ...this.defaultShop }
-          if (el.shop) {
-            el.shopData.push(el.shop)
-          }
-          return el
-        })
-        console.log('formList', this.form.formList)
-      } else {
-        for (let i = 0; i <= 2; i++) {
-          this.form.formList.push(defaultForm())
-        }
-      }
+    async formMenu(id) {
+      // 获取菜单详情
+      const res = await formMenu(id)
+      this.form = { ...this.form, ...res.data }
     },
     // 显示选择商品弹窗
     handleDialogVisible() {
@@ -236,74 +183,40 @@ export default {
       this.dialogGoodVisible = true
     },
     deleteShop() {
-      // 清除供应商
-      this.form.productId = ''
-      this.productData = []
+      // 清除商品
+      this.form.jumpProductId = ''
+      this.form.products = []
     },
     handleGoodConfirm(data) {
       // 确认选择商品
-      const from = this.form.formList[this.addIndex]
-      from.associateList.push(data)
-      console.log('from', this.form.formList)
+      this.form.jumpProductId = data.productId
+      this.form.products.push(data)
+      console.log('products', this.form.products)
+      console.log('jumpProductId', this.form.jumpProductId)
       this.handleGoodCancel()
     },
-    handleDeletePros(formItem, index) {
-      // 删除商品
-      this.$confirm('确定删除吗？', '提示', {
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
-        type: 'warning'
-      }).then(() => {
-        formItem.associateList.splice(index, 1)
-      })
-    },
     onSubmit(formName) {
       this.$refs[formName].validate(valid => {
         if (valid) {
-          this.handleFormParams()
           this.$confirm('是否提交数据', '提示', {
             confirmButtonText: '确定',
             cancelButtonText: '取消',
             type: 'warning'
           }).then(() => {
-            console.log('formParams', this.formParams)
-            if (this.editType === 'add') {
-              this.formParams.configure = 1
-            } else {
-              this.formParams.configure = 0
-            }
-            this.saveVipCoupon(this.formParams)
+            console.log('form', this.form)
+            this.saveMenu(this.form)
           })
         } else {
           return false
         }
       })
     },
-    handleFormParams() {
-      // 处理参数
-      this.formParams.coupons = this.form.formList.map((el) => {
-        if (el.associateList && el.associateList.length > 0) {
-          el.associateList = el.associateList.map((pro) => {
-            return {
-              sort: pro.sort,
-              pcStatus: pro.pcStatus,
-              appletsStatus: pro.appletsStatus,
-              name: pro.name,
-              shopName: pro.shopName,
-              mainImage: pro.mainImage,
-              productId: pro.productId
-            }
-          })
-        }
-        return el
-      })
-    },
-    async saveVipCoupon(params) {
-      // 保存超级会员优惠券
-      await saveVipCoupon(params)
+    async saveMenu(params) {
+      // 保存
+      await saveMenu(params)
       this.$message.success('保存成功')
       setTimeout(() => {
-        this.$router.push({ path: '/member/coupon/list' })
+        this.$router.push({ path: '/campaign/list', query: { type: 2 }})
       }, 1000)
     },
     // 取消选择商品
@@ -311,75 +224,12 @@ export default {
       this.dialogVisible = false
       this.$refs.goodDialog.visible = false
     },
-    handleAddList() {
-      // 新增优惠券
-      this.form.formList.push(defaultForm())
-    },
-    handleDelete(item, index) {
-      // 删除单挑优惠券
-      this.$confirm('确定删除此优惠券吗？', '提示', {
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
-        type: 'warning'
-      }).then(() => {
-        if (this.delFlag) {
-          this.delCoupon(item.id, index)
-        } else {
-          this.form.formList.splice(index, 1)
-        }
-      })
-    },
-    async delCoupon(id, index) {
-      // 保存超级会员优惠券
-      if (id) {
-        try {
-          await delCoupon(id)
-        } catch (error) {
-          console.log(error)
-        }
-      }
-      this.form.formList.splice(index, 1)
-    },
-    handleOnInputBlur(formItem) {
-      // 商品排序
-      formItem.associateList.sort(this.sortByEnent('sort'))
-    },
-    sortByEnent(i) {
-      // 排序
-      return function(a, b) {
-        return a[i] - b[i] //  a[i] - b[i]为正序，倒叙为  b[i] - a[i]
-      }
-    },
-    handlePcStatusChange(row) {
-      // PC状态开启关闭
-      console.log('row', row)
-      if (row.pcStatus === '0') {
-        row.pcStatus = '1'
-      } else {
-        row.pcStatus = '0'
-      }
-    },
-    handleAppStatusChange(row) {
-      // 小程序状态开启关闭
-      if (row.appletsStatus === '0') {
-        row.appletsStatus = '1'
-      } else {
-        row.appletsStatus = '0'
-      }
-    },
-    disabled3(array) {
-      if (array && array.length >= 2) {
-        return false
-      } else {
-        return true
-      }
-    },
     // 上传图标事件
     handleSuccess(response, file) {
       this.loadImgLoading = true
       this.$nextTick(() => {
         setTimeout(() => {
-          this.temp.classifyImage = response.data
+          this.form.image = response.data
         }, 1000 * 2)
       })
     },

src/views/campaign/components/banner/index.vue

@@ -59,7 +59,7 @@
           <el-tag v-if="row.enabledStatus===0" type="danger" size="small">已下线</el-tag>
           <el-tag v-else type="success" size="small">已上线</el-tag>
           <el-button v-if="row.enabledStatus === 0" type="primary" size="mini" @click="handleShangeStatus(row.id,row.enabledStatus)">上线</el-button>
-          <el-button v-else type="primary" size="mini" @click="handleShangeStatus(row.id)">下线</el-button>
+          <el-button v-else type="primary" size="mini" @click="handleShangeStatus(row.id,row.enabledStatus)">下线</el-button>
         </template>
       </el-table-column>
       <el-table-column align="center" label="创建时间" prop="addTime">
@@ -82,19 +82,8 @@
 
 <script>
 import { getBannerList, getBannerStatus, getBannerSort, delPageBanner } from '@/api/campaign'
-import Pagination from '@/components/Pagination'
 
 export default {
-  components: { Pagination },
-  filters: {
-    statusFilter(status) {
-      const statusMap = {
-        1: 'success',
-        0: 'danger'
-      }
-      return statusMap[status]
-    }
-  },
   data() {
     return {
       list: null,
@@ -145,7 +134,7 @@ export default {
     async getBannerStatus(id) {
       try {
         await getBannerStatus(id)
-        this.$message({ message: '操作成功', type: 'success', center: true })
+        this.$message({ message: '操作成功', type: 'success' })
         this.getList()
       } catch (error) {
         console.log('error', error)
@@ -155,16 +144,21 @@ export default {
     async handleSort(row) {
       try {
         await getBannerSort(row.id, row.sort)
-        this.getList()
+        // this.getList()
       } catch (error) {
         console.log('error', error)
       }
     },
     // 删除轮播图
-    async handleDelete(id) {
+    handleDelete(id) {
+      this.$confirm('确定删除该banner图吗？').then(_ => {
+        this.delPageBanner(id)
+      })
+    },
+    async delPageBanner(id) {
       try {
         await delPageBanner(id)
-        this.$message({ message: '操作成功', type: 'success', center: true })
+        this.$message({ message: '操作成功', type: 'success' })
         this.getList()
       } catch (error) {
         console.log('error', error)

src/views/campaign/components/category/index.vue

@@ -2,7 +2,7 @@
   <div class="app-container">
     <div class="filter-container">
       <div class="filter-control">
-        <el-button type="primary" icon="el-icon-sort" @click="handleOnInputBlur(formItem,index)">一键排序</el-button>
+        <el-button type="primary" icon="el-icon-sort" @click="getList">一键排序</el-button>
         <el-button type="primary" icon="el-icon-plus" @click="handleToEdit('add')">添加菜单</el-button>
       </div>
     </div>
@@ -16,27 +16,23 @@
       highlight-current-row
       :header-cell-style="{background:'#eef1f6',color:'#606266'}"
     >
-      <el-table-column label="分类名称" align="center" prop="classifyName" />
-      <el-table-column label="分类图标" align="center" prop="classifyImage">
+      <el-table-column label="分类名称" align="center" prop="topic" />
+      <el-table-column label="分类图标" align="center" prop="image">
         <template slot-scope="{row}">
-          <img :src="row.classifyImage" alt="" width="50">
+          <img :src="row.image" alt="" width="50">
         </template>
       </el-table-column>
       <el-table-column label="排序值" align="center" prop="sort">
         <template slot-scope="{row}">
-          <el-input-number v-model="row.sort" controls-position="right" :min="1" :max="999" :maxlength="3" size="mini" style="width:65px;" />
+          <el-input-number v-model="row.sort" controls-position="right" :min="1" :max="999" :maxlength="3" size="mini" style="width:65px;" @change="handleSort(row)" />
         </template>
       </el-table-column>
-      <el-table-column class-name="status-col" label="状态" align="center" prop="status" width="100">
+      <el-table-column class-name="status-col" label="状态" align="center" prop="enabledStatus">
         <template slot-scope="{row}">
-          <el-tooltip :content="row.status*1 === 1 ? '停用' : '启用'" placement="top">
-            <el-switch
-              v-model="row.status"
-              active-value="1"
-              inactive-value="0"
-              @change="changeStatus(row.id, row.status)"
-            />
-          </el-tooltip>
+          <el-tag v-if="row.enabledStatus===0" type="danger" size="small">已下线</el-tag>
+          <el-tag v-else type="success" size="small">已上线</el-tag>
+          <el-button v-if="row.enabledStatus === 0" type="primary" size="mini" @click="handleShangeStatus(row.id,row.enabledStatus)">上线</el-button>
+          <el-button v-else type="primary" size="mini" @click="handleShangeStatus(row.id,row.enabledStatus)">下线</el-button>
         </template>
       </el-table-column>
       <el-table-column align="center" label="添加时间" prop="addTime">
@@ -47,7 +43,7 @@
       <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
         <template slot-scope="{row}">
           <el-button type="primary" size="mini" @click="handleToEdit('edit',row.id)">编辑</el-button>
-          <el-button type="danger" size="mini" @click="handleDelete(row)">删除</el-button>
+          <el-button type="danger" size="mini" @click="handleDelete(row.id)">删除</el-button>
         </template>
       </el-table-column>
     </el-table>
@@ -58,20 +54,9 @@
 </template>
 
 <script>
-import { getCategory, switchClassify, saveCategorySort } from '@/api/goods-classify'
-import Pagination from '@/components/Pagination'
+import { getMenuList, getMenuStatus, getMenuSort, delMenu } from '@/api/campaign'
 
 export default {
-  components: { Pagination },
-  filters: {
-    statusFilter(status) {
-      const statusMap = {
-        1: 'success',
-        0: 'danger'
-      }
-      return statusMap[status]
-    }
-  },
   data() {
     return {
       list: null,
@@ -80,55 +65,77 @@ export default {
       listQuery: {
         index: 1,
         pageSize: 20,
-        organizeID: this.$store.getters.organizeId
+        enabledStatus: '',
+        organizeId: this.$store.getters.organizeId
       }
     }
   },
   computed: {
-    organizeID() {
-      return this.$store.getters.organizeId
-    }
+
   },
   created() {
     this.getList()
   },
   methods: {
-    getList() {
+    // 获取轮播图列表
+    async getList() {
       this.listLoading = true
-      getCategory(this.listQuery).then(response => {
-        this.list = response.data.results
-        this.total = response.data.totalRecord
+      try {
+        const res = await getMenuList(this.listQuery)
+        this.list = res.data.results
+        this.total = res.data.totalRecord
         this.listLoading = false
-      })
+      } catch (error) {
+        console.log('error', error)
+      }
     },
-    changeStatus(id, status) {
-      const confirmTxt = '确定要' + (status * 1 === 1 ? '启用' : '停用') + '该分类吗？'
+    // 操作上下线
+    handleShangeStatus(id, status) {
+      let confirmTxt = ''
+      if (status === 1) {
+        confirmTxt = '确定下线该菜单吗？下线后将从小程序隐藏。'
+      } else {
+        confirmTxt = '确定上线该菜单吗？上线后将重新在小程序显示。'
+      }
       this.$confirm(confirmTxt).then(_ => {
-        this.confirmChange(id)
+        this.getMenuStatus(id)
       }).catch(() => {
         this.getList()
       })
     },
-    confirmChange(id) {
-      switchClassify({ id: id }).then(() => {
-        this.getList()
-      }).catch(() => {
+    // 上下线轮播图
+    async getMenuStatus(id) {
+      try {
+        await getMenuStatus(id)
+        this.$message({ message: '操作成功', type: 'success' })
         this.getList()
-      })
+      } catch (error) {
+        console.log('error', error)
+      }
+    },
+    // 修改排序
+    async handleSort(row) {
+      try {
+        await getMenuSort(row.id, row.sort)
+        // this.getList()
+      } catch (error) {
+        console.log('error', error)
+      }
     },
-    batchSaveSort() {
-      const sorts = []
-      this.list.map(item => {
-        if (item.sort) {
-          sorts.push(item.id + '-' + Math.abs(item.sort))
-        }
+    // 删除菜单
+    handleDelete(id) {
+      this.$confirm('确定删除该菜单吗？').then(_ => {
+        this.delMenu(id)
       })
-      saveCategorySort({ newProducSorttList: sorts.join(',') }).then(response => {
-        this.$message({ message: response.msg, type: 'success', center: true })
-        this.getList()
-      }).catch(() => {
+    },
+    async delMenu(id) {
+      try {
+        await delMenu(id)
+        this.$message({ message: '操作成功', type: 'success' })
         this.getList()
-      })
+      } catch (error) {
+        console.log('error', error)
+      }
     },
     // 跳转添加/编辑
     handleToEdit(type, id) {

src/views/campaign/components/good-dialog.vue

@@ -79,7 +79,6 @@ export default {
     return {
       visible: true,
       listQuery: {
-        productId: '', // 商品id
         productName: '', // 商品名称
         shopName: '', // 供应商名称
         index: 1,
@@ -121,9 +120,6 @@ export default {
     },
     handleAddProConfirm() {
       // 确认选择商品
-      this.productRadio.pcStatus = '1'
-      this.productRadio.appletsStatus = '1'
-      this.productRadio.sort = 1
       this.$emit('confirm', this.productRadio)
     },
     handleCanle() {

src/views/campaign/components/good-multi-dialog.vue

@@ -7,22 +7,13 @@
     :show-close="false"
   >
     <div class="filter-container">
-      <div class="filter-control">
-        <span>商品ID:</span>
-        <el-input
-          v-model="listQuery.productId"
-          placeholder="商品ID"
-          clearable
-          @input="e => (listQuery.productId= checkedInput(e,1))"
-        />
-      </div>
       <div class="filter-control">
         <span>商品名称:</span>
         <el-input
-          v-model="listQuery.name"
+          v-model="listQuery.productName"
           placeholder="商品名称"
           clearable
-          @input="e => (listQuery.name= checkedInput(e,2))"
+          @input="e => (listQuery.productName= checkedInput(e,2))"
         />
       </div>
       <div class="filter-control">
@@ -41,9 +32,8 @@
     </div>
     <el-table ref="table" v-loading="isLoading" :data="list" height="400px" border @selection-change="handleSelectionChange">
       <el-table-column type="selection" width="50" />
-      <el-table-column prop="productId" label="商品ID" align="center" width="80" />
-      <el-table-column prop="coupon" label="商品图片" align="center" width="100">
-        <template v-if="row.productId" slot-scope="{ row }">
+      <el-table-column prop="mainImage" label="商品图片" align="center" width="100">
+        <template slot-scope="{ row }">
           <el-popover
             placement="top-start"
             title=""
@@ -55,7 +45,7 @@
           </el-popover>
         </template>
       </el-table-column>
-      <el-table-column prop="name" label="商品名称" align="center" />
+      <el-table-column prop="productName" label="商品名称" align="center" />
       <el-table-column prop="shopName" label="供应商" align="center" width="250" />
     </el-table>
     <!-- 页码 -->
@@ -63,7 +53,7 @@
       :total="total"
       :page-sizes="[20]"
       :page-size="20"
-      :page.sync="listQuery.pageNum"
+      :page.sync="listQuery.index"
       :limit.sync="listQuery.pageSize"
       @pagination="getList"
     />
@@ -89,10 +79,9 @@ export default {
     return {
       visible: true,
       listQuery: {
-        productId: '', // 商品id
-        name: '', // 商品名称
+        productName: '', // 商品名称
         shopName: '', // 供应商名称
-        pageNum: 1,
+        index: 1,
         pageSize: 20
       },
       list: [],
@@ -125,9 +114,6 @@ export default {
     },
     handleAddProConfirm() {
       // 确认选择商品
-      this.productRadio.pcStatus = '1'
-      this.productRadio.appletsStatus = '1'
-      this.productRadio.sort = 1
       this.$emit('confirm', this.productRadio)
     },
     handleCanle() {

src/views/campaign/components/special/index.vue

@@ -0,0 +1,183 @@
+<template>
+  <div class="app-container">
+    <div class="filter-container">
+      <div class="filter-control">
+        <span>主题:</span>
+        <el-input
+          v-model="listQuery.productId"
+          placeholder="请输入活动主题"
+          clearable
+          @input="e => (listQuery.productId= checkedInput(e,1))"
+          @keyup.enter.native="getList"
+          @clear="getList"
+        />
+      </div>
+      <div class="filter-control">
+        <span>状态:</span>
+        <el-select v-model="listQuery.status" style="width:120px;" clearable @change="getList">
+          <el-option value="" label="请选择" />
+          <el-option :value="0" label="已上线" />
+          <el-option :value="1" label="已下线" />
+        </el-select>
+      </div>
+      <div class="filter-control">
+        <el-button type="primary" icon="el-icon-search" @click="getList">查询</el-button>
+        <el-button type="primary" icon="el-icon-plus" @click="handleToEdit('add')">添加活动</el-button>
+      </div>
+    </div>
+    <p style="margin: 0;line-height: 24px;font-size: 14px;color: #999;">注：专题仅支持一个已启用状态的活动。</p>
+    <el-table
+      v-loading="listLoading"
+      :data="list"
+      element-loading-text="Loading"
+      border
+      fit
+      highlight-current-row
+      :header-cell-style="{background:'#eef1f6',color:'#606266'}"
+    >
+      <el-table-column label="分类名称" align="center" prop="topic" />
+      <el-table-column label="活动入口图片" align="center" prop="image" width="200">
+        <template slot-scope="{row}">
+          <el-popover
+            placement="top-start"
+            title=""
+            width="530"
+            trigger="hover"
+          >
+            <img :src="row.image" alt="" style="width:500px;height:200px;">
+            <img slot="reference" :src="row.image" alt="" style="width:120px;height:50px;">
+          </el-popover>
+        </template>
+      </el-table-column>
+      <el-table-column class-name="status-col" label="状态" align="center" prop="enabledStatus">
+        <template slot-scope="{row}">
+          <el-tag v-if="row.enabledStatus===0" type="danger" size="small">已下线</el-tag>
+          <el-tag v-else type="success" size="small">已上线</el-tag>
+          <el-button v-if="row.enabledStatus === 0" type="primary" size="mini" @click="handleShangeStatus(row.id,row.enabledStatus)">上线</el-button>
+          <el-button v-else type="primary" size="mini" @click="handleShangeStatus(row.id,row.enabledStatus)">下线</el-button>
+        </template>
+      </el-table-column>
+      <el-table-column align="center" label="添加时间" prop="addTime">
+        <template slot-scope="{row}">
+          <span>{{ row.addTime | parseTime('{y}-{m}-{d} {h}:{i}:{s}') }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+        <template slot-scope="{row}">
+          <el-button type="primary" size="mini" @click="handleToEdit('edit',row.id)">编辑</el-button>
+          <el-button type="danger" size="mini" @click="handleDelete(row.id)">删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <pagination v-show="total>20" :total="total" :page.sync="listQuery.index" :limit.sync="listQuery.pageSize" @pagination="getList" />
+
+  </div>
+</template>
+
+<script>
+import { getThemeList, getThemeStatus, delTheme } from '@/api/campaign'
+
+export default {
+  data() {
+    return {
+      list: null,
+      listLoading: true,
+      total: 0,
+      listQuery: {
+        index: 1,
+        pageSize: 20,
+        enabledStatus: '',
+        organizeId: this.$store.getters.organizeId
+      }
+    }
+  },
+  computed: {
+
+  },
+  created() {
+    this.getList()
+  },
+  methods: {
+    // 获取专题列表
+    async getList() {
+      this.listLoading = true
+      try {
+        const res = await getThemeList(this.listQuery)
+        this.list = res.data.results
+        this.total = res.data.totalRecord
+        this.listLoading = false
+      } catch (error) {
+        console.log('error', error)
+      }
+    },
+    // 操作上下线
+    handleShangeStatus(id, status) {
+      let confirmTxt = ''
+      console.log('status', status)
+      if (status === 1) {
+        confirmTxt = '确定下线该活动吗？下线后将从小程序隐藏。'
+      } else {
+        confirmTxt = '确定上线该活动吗？上线后将重新在小程序显示。'
+      }
+      this.$confirm(confirmTxt).then(_ => {
+        this.getThemeStatus(id)
+      }).catch(() => {
+        this.getList()
+      })
+    },
+    // 上下线专题
+    async getThemeStatus(id) {
+      try {
+        await getThemeStatus(id)
+        this.$message({ message: '操作成功', type: 'success' })
+        this.getList()
+      } catch (error) {
+        console.log('error', error)
+      }
+    },
+    // 删除专题
+    handleDelete(id) {
+      this.$confirm('确定删除该专题活动吗？').then(_ => {
+        this.delTheme(id)
+      })
+    },
+    async delTheme(id) {
+      try {
+        await delTheme(id)
+        this.$message({ message: '操作成功', type: 'success' })
+        this.getList()
+      } catch (error) {
+        console.log('error', error)
+      }
+    },
+    // 跳转添加/编辑
+    handleToEdit(type, id) {
+      if (type === 'add') {
+        this.$router.push({ path: '/campaign/special-edit', query: { type: type }})
+      } else {
+        this.$router.push({ path: '/campaign/special-edit', query: { type: type, id: id }})
+      }
+    }
+  }
+}
+
+</script>
+<style>
+.el-input-number.is-controls-right .el-input__inner {
+    padding-left: 5px;
+    padding-right: 30px;
+}
+</style>
+<style lang="scss" scoped>
+.filter-title{
+  float: left;
+  font-size: 12px;
+  line-height: 18px;
+  text-align: left;
+  color: #2E3748;
+}
+.filter-title p{
+  margin:10px 0;
+}
+</style>

src/views/campaign/list.vue

@@ -19,7 +19,7 @@
 <script>
 import banner from './components/banner/index.vue'
 import category from './components/category/index.vue'
-import activity from './components/activity/index.vue'
+import activity from './components/special/index.vue'
 
 export default {
   name: 'CampaignList',
@@ -37,7 +37,14 @@ export default {
 
   },
   created() {
-
+    const map = {
+      1: 'first',
+      2: 'second',
+      3: 'three'
+    }
+    if (this.$route.query.type) {
+      this.activeName = map[this.$route.query.type]
+    }
   },
   methods: {
     // tab切换

src/views/campaign/special-edit.vue

@@ -1,10 +1,10 @@
 <template>
   <div class="app-container" style="width: 800px;margin: 0 auto;">
     <el-form ref="bannerForm" :model="form" label-width="100px">
-      <el-form-item label="主题:" prop="name" :rules="rules.name">
-        <el-input v-model="form.name" placeholder="请输入活动主题" style="width: 250px;" />
+      <el-form-item label="主题:" prop="topic" :rules="rules.topic">
+        <el-input v-model="form.topic" placeholder="请输入活动主题" style="width: 250px;" />
       </el-form-item>
-      <el-form-item label="轮播图:" prop="banner" :rules="rules.banner">
+      <el-form-item label="活动入口图片:" prop="image" :rules="rules.image">
         <div class="form-el-upload">
           <el-upload
             class="avatar-uploader"
@@ -15,7 +15,7 @@
             :before-upload="beforeUpload"
           >
             <div v-loading="loadImgLoading" class="avatar">
-              <img v-if="form.banner" :src="form.banner" @error="reloadImage" @load="loadSucess">
+              <img v-if="form.image" :src="form.image" @error="reloadImage" @load="loadSucess">
               <i v-else class="el-icon-plus avatar-uploader-icon" />
             </div>
           </el-upload>
@@ -24,8 +24,8 @@
       <el-form-item label="排序:" prop="sort" :rules="rules.sort">
         <el-input v-model="form.sort" style="width: 200px" />
       </el-form-item>
-      <el-form-item label="状态:" prop="status" :rules="rules.status">
-        <el-select v-model="form.status" placeholder="请选择">
+      <el-form-item label="状态:" prop="enabledStatus" :rules="rules.enabledStatus">
+        <el-select v-model="form.enabledStatus" placeholder="请选择">
           <el-option label="上线" :value="1" />
           <el-option label="下线" :value="0" />
         </el-select>
@@ -37,13 +37,13 @@
         </el-radio-group>
       </el-form-item>
       <template v-if="form.jumpType === 1">
-        <el-form-item label="商品信息" prop="productId" :rules="rules.productId">
-          <template v-if="productData && productData.length === 0">
+        <el-form-item label="商品信息" prop="products" :rules="rules.products">
+          <template v-if="form.products && form.products.length === 0">
             <el-button type="primary" autofocussize="mini" size="mini" icon="el-icon-plus" @click="handleDialogVisible">选择商品</el-button>
-            <el-checkbox-group v-show="false" v-model="form.productId" />
+            <el-checkbox-group v-show="false" v-model="form.products" />
           </template>
           <template v-else>
-            <el-table :data="productData" border width="1000">
+            <el-table :data="form.products" border width="1000">
               <el-table-column property="mainImage" label="商品图片" align="center" width="80">
                 <template slot-scope="{ row }">
                   <el-popover
@@ -71,19 +71,19 @@
         </el-form-item>
       </template>
       <template v-if="form.jumpType === 2">
-        <el-form-item label="选择活动:" prop="actId" :rules="rules.actId">
-          <el-select v-model="form.actId" clearable>
+        <el-form-item label="选择活动:" prop="jumpActiveId" :rules="rules.jumpActiveId">
+          <el-select v-model="form.jumpActiveId" clearable>
             <el-option
               v-for="item in activityList"
-              :key="item.actId"
-              :label="item.name"
-              :value="item.actId"
+              :key="item.id"
+              :label="item.topic"
+              :value="item.id"
             />
           </el-select>
         </el-form-item>
       </template>
     </el-form>
-    <div class="el-dialog__footer" style="text-align: center;">
+    <div class="el-dialog__footer" style="text-align: left;">
       <el-button type="primary" @click="onSubmit('bannerForm')">保存</el-button>
     </div>
     <!-- 商品弹框 -->
@@ -92,20 +92,8 @@
 </template>
 
 <script>
-import { getClubList, createOperator, updateStatus } from '@/api/club'
+import { saveTheme, formTheme, getActiveList } from '@/api/campaign'
 import goodDialog from './components/good-dialog'
-const defaultForm = () => {
-  return {
-    shopId: 0,
-    shopData: [],
-    couponType: 0,
-    couponAmount: '',
-    touchPrice: '',
-    productType: '1',
-    categoryType: '1',
-    associateList: []// 指定商品信息
-  }
-}
 export default {
   name: 'BannerEdit',
   components: { goodDialog },
@@ -119,69 +107,44 @@ export default {
     }
   },
   data() {
+    const defaultForm = () => {
+      return {
+        organizeId: this.$store.getters.organizeId,
+        topic: '', // 专题主题
+        image: 'https://img1.baidu.com/it/u=1016138010,1907110459&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
+        sort: 0, // 专题排序值
+        enabledStatus: 1, // 专题上线状态
+        jumpType: null, // 跳转类型
+        jumpActiveId: null, // 跳转活动Id
+        jumpProductId: null, // 单个跳转商品详情Id
+        products: []
+      }
+    }
     return {
-      form: {
-        name: '',
-        banner: 'https://img1.baidu.com/it/u=1016138010,1907110459&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
-        sort: 0,
-        status: 1,
-        jumpType: null,
-        actId: '',
-        productId: null
-      },
-      activityList: [
-        {
-          actId: 1,
-          name: '活动主题1'
-        },
-        {
-          actId: 2,
-          name: '活动主题2'
-        }
-      ],
-      productData: [
-        {
-          mainImage: 'https://img1.baidu.com/it/u=1016138010,1907110459&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
-          productName: 'Twinkle 水婴肌 美白 补水 紧致 无创水光',
-          shopName: '雅光博睿医药科技（广东）有限公司',
-          unit: '20ML',
-          costPrice: '50000.00',
-          price: '50000.00',
-          addTime: '2023-04-14 14:45:39',
-          validFlag: 1
-        }
-      ],
-      formParams: {
-        id: '',
-        month: '',
-        endMonth: '',
-        status: '',
-        configure: 1, // 专属优惠券配置  1是、0否
-        coupons: []
-      },
+      form: defaultForm(),
+      activityList: [],
       editType: 'add',
       // 商品列表
       dialogVisible: false,
       loadImgLoading: false,
       rules: {
-        name: [{ required: true, message: '请填写活动主题', trigger: 'blur' }],
-        banner: [{ required: true, message: '请上传轮播图', trigger: 'blur' }],
-        productId: [{ required: true, type: 'array', message: '请添加一个商品', trigger: ['change'] }],
+        topic: [{ required: true, message: '请填写轮播主题', trigger: 'blur' }],
+        image: [{ required: true, message: '请上传轮播图', trigger: 'blur' }],
+        products: [{ required: true, type: 'array', message: '请添加一个商品', trigger: ['change'] }],
         sort: [{ required: true, message: '排序值不能为空', trigger: 'blur' }],
-        status: [{ required: true, message: '请选择状态', trigger: 'blur' }],
+        enabledStatus: [{ required: true, message: '请选择状态', trigger: 'blur' }],
         jumpType: [{ required: true, message: '请选择跳转类型', trigger: 'blur' }],
-        actId: [{ required: true, message: '请选择活动列表', trigger: 'blur' }]
+        jumpActiveId: [{ required: true, message: '请选择活动列表', trigger: 'blur' }]
       },
-      delFlag: false
+      listQuery: {
+        index: 1,
+        pageSize: 100,
+        enabledStatus: 1,
+        organizeId: this.$store.getters.organizeId
+      }
     }
   },
   computed: {
-    disabled() {
-      return this.form.formList.length === 5
-    },
-    disabled1() {
-      return this.form.formList.length === 1
-    },
     getToken() {
       return {
         'token': this.$store.getters.token
@@ -193,38 +156,22 @@ export default {
   },
   created() {
     this.editType = this.$route.query.type || 'edit'
-    console.log('editType', this.editType)
-    // this.initForm(this.editType)
+    if (this.editType === 'edit') {
+      console.log('edit')
+      this.formTheme(this.$route.query.id)
+    }
+    this.getActiveList()
   },
   methods: {
-    initForm(type) {
-      if (type === 'add') {
-        console.log('add')
-        this.svipCoupon(type, 1, 0)
-      } else {
-        console.log('edit')
-        this.svipCoupon(type, 0, this.$route.query.id)
-      }
+    async getActiveList() {
+      // 获取活动列表
+      const res = await getActiveList(this.listQuery)
+      this.activityList = [...this.activityList, ...res.data.results]
     },
-    async svipCoupon(type, configure, id) {
-      const res = await svipCoupon({ id: id, configure: configure })
-      const data = res.data.svipcouponForm
-      this.formParams = { ...this.formParams, ...data }
-      if (data.coupons.length > 0) {
-        this.delFlag = true
-        this.form.formList = data.coupons.map((el) => {
-          el = { ...el, ...this.defaultShop }
-          if (el.shop) {
-            el.shopData.push(el.shop)
-          }
-          return el
-        })
-        console.log('formList', this.form.formList)
-      } else {
-        for (let i = 0; i <= 2; i++) {
-          this.form.formList.push(defaultForm())
-        }
-      }
+    async formTheme(id) {
+      // 获取轮播图详情
+      const res = await formTheme(id)
+      this.form = { ...this.form, ...res.data }
     },
     // 显示选择商品弹窗
     handleDialogVisible() {
@@ -237,73 +184,39 @@ export default {
     },
     deleteShop() {
       // 清除供应商
-      this.form.productId = ''
-      this.productData = []
+      this.form.jumpProductId = ''
+      this.form.products = []
     },
     handleGoodConfirm(data) {
       // 确认选择商品
-      const from = this.form.formList[this.addIndex]
-      from.associateList.push(data)
-      console.log('from', this.form.formList)
+      this.form.jumpProductId = data.productId
+      this.form.products.push(data)
+      console.log('products', this.form.products)
+      console.log('jumpProductId', this.form.jumpProductId)
       this.handleGoodCancel()
     },
-    handleDeletePros(formItem, index) {
-      // 删除商品
-      this.$confirm('确定删除吗？', '提示', {
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
-        type: 'warning'
-      }).then(() => {
-        formItem.associateList.splice(index, 1)
-      })
-    },
     onSubmit(formName) {
       this.$refs[formName].validate(valid => {
         if (valid) {
-          this.handleFormParams()
           this.$confirm('是否提交数据', '提示', {
             confirmButtonText: '确定',
             cancelButtonText: '取消',
             type: 'warning'
           }).then(() => {
-            console.log('formParams', this.formParams)
-            if (this.editType === 'add') {
-              this.formParams.configure = 1
-            } else {
-              this.formParams.configure = 0
-            }
-            this.saveVipCoupon(this.formParams)
+            console.log('form', this.form)
+            this.saveTheme(this.form)
           })
         } else {
           return false
         }
       })
     },
-    handleFormParams() {
-      // 处理参数
-      this.formParams.coupons = this.form.formList.map((el) => {
-        if (el.associateList && el.associateList.length > 0) {
-          el.associateList = el.associateList.map((pro) => {
-            return {
-              sort: pro.sort,
-              pcStatus: pro.pcStatus,
-              appletsStatus: pro.appletsStatus,
-              name: pro.name,
-              shopName: pro.shopName,
-              mainImage: pro.mainImage,
-              productId: pro.productId
-            }
-          })
-        }
-        return el
-      })
-    },
-    async saveVipCoupon(params) {
+    async saveTheme(params) {
       // 保存超级会员优惠券
-      await saveVipCoupon(params)
+      await saveTheme(params)
       this.$message.success('保存成功')
       setTimeout(() => {
-        this.$router.push({ path: '/member/coupon/list' })
+        this.$router.push({ path: '/campaign/list', query: { type: 3 }})
       }, 1000)
     },
     // 取消选择商品
@@ -311,75 +224,12 @@ export default {
       this.dialogVisible = false
       this.$refs.goodDialog.visible = false
     },
-    handleAddList() {
-      // 新增优惠券
-      this.form.formList.push(defaultForm())
-    },
-    handleDelete(item, index) {
-      // 删除单挑优惠券
-      this.$confirm('确定删除此优惠券吗？', '提示', {
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
-        type: 'warning'
-      }).then(() => {
-        if (this.delFlag) {
-          this.delCoupon(item.id, index)
-        } else {
-          this.form.formList.splice(index, 1)
-        }
-      })
-    },
-    async delCoupon(id, index) {
-      // 保存超级会员优惠券
-      if (id) {
-        try {
-          await delCoupon(id)
-        } catch (error) {
-          console.log(error)
-        }
-      }
-      this.form.formList.splice(index, 1)
-    },
-    handleOnInputBlur(formItem) {
-      // 商品排序
-      formItem.associateList.sort(this.sortByEnent('sort'))
-    },
-    sortByEnent(i) {
-      // 排序
-      return function(a, b) {
-        return a[i] - b[i] //  a[i] - b[i]为正序，倒叙为  b[i] - a[i]
-      }
-    },
-    handlePcStatusChange(row) {
-      // PC状态开启关闭
-      console.log('row', row)
-      if (row.pcStatus === '0') {
-        row.pcStatus = '1'
-      } else {
-        row.pcStatus = '0'
-      }
-    },
-    handleAppStatusChange(row) {
-      // 小程序状态开启关闭
-      if (row.appletsStatus === '0') {
-        row.appletsStatus = '1'
-      } else {
-        row.appletsStatus = '0'
-      }
-    },
-    disabled3(array) {
-      if (array && array.length >= 2) {
-        return false
-      } else {
-        return true
-      }
-    },
     // 上传图标事件
     handleSuccess(response, file) {
       this.loadImgLoading = true
       this.$nextTick(() => {
         setTimeout(() => {
-          this.temp.classifyImage = response.data
+          this.form.image = response.data
         }, 1000 * 2)
       })
     },

src/views/centralized/details.vue

@@ -138,7 +138,7 @@ export default {
         'token': this.$store.getters.token
       }
     },
-    organizeID() {
+    organizeId() {
       return this.$store.getters.organizeId
     },
     actionUrl() {
@@ -179,7 +179,7 @@ export default {
     onSubmite() {
       this.$refs['dataForm'].validate((valid) => {
         if (valid) {
-          const Formobj = Object.assign(this.form, { id: this.organizeID, userID: this.userID, clubID: this.clubID })
+          const Formobj = Object.assign(this.form, { id: this.organizeId, userID: this.userID, clubID: this.clubID })
           const params = Object.assign(this.addList, Formobj)
           this.loadingbut = true
           this.loadingbuttext = '保存中...'

src/views/centralized/list.vue

@@ -181,7 +181,7 @@ export default {
       listQuery: {
         pageNum: 1,
         pageSize: 20,
-        userOrganizeID: this.$store.getters.organizeId,
+        userorganizeId: this.$store.getters.organizeId,
         userName: '',
         linkMan: '',
         bindMobile: '',
@@ -221,7 +221,7 @@ export default {
     disabled() {
       return !this.addPeople.status
     },
-    organizeID() {
+    organizeId() {
       return this.$store.getters.organizeId
     }
   },
@@ -258,7 +258,7 @@ export default {
     handleCreateOperator() { // 保存
       this.$refs['dataForm'].validate((valid) => {
         if (valid) {
-          const Formobj = { userOrganizeID: this.$store.getters.organizeId, configFlag: 1 }
+          const Formobj = { userorganizeId: this.$store.getters.organizeId, configFlag: 1 }
           const params = Object.assign(Formobj, this.addPeople)
           this.loadingbut = true
           createOperator(params).then(response => {
@@ -272,7 +272,7 @@ export default {
       })
     },
     handOnline(row) {
-      this.updateTemp = Object.assign({}, { clubID: row.clubID, userID: row.userID, clubStatus: row.clubStatus, userOrganizeID: this.$store.getters.organizeId })
+      this.updateTemp = Object.assign({}, { clubID: row.clubID, userID: row.userID, clubStatus: row.clubStatus, userorganizeId: this.$store.getters.organizeId })
       this.$confirm('确定上线该门店吗？上线后门店负责人可使用账号密码登录小程序。', '系统提示', {
         confirmButtonText: '确定',
         cancelButtonText: '取消',
@@ -284,7 +284,7 @@ export default {
       })
     },
     handOffline(row) {
-      this.updateTemp = Object.assign({}, { clubID: row.clubID, userID: row.userID, clubStatus: row.clubStatus, userOrganizeID: this.$store.getters.organizeId })
+      this.updateTemp = Object.assign({}, { clubID: row.clubID, userID: row.userID, clubStatus: row.clubStatus, userorganizeId: this.$store.getters.organizeId })
       this.$confirm('确定下线该门店吗？下线后该门店将不能在小程序进行采购。', '系统提示', {
         confirmButtonText: '确定',
         cancelButtonText: '取消',

src/views/club/editForm.vue

@@ -129,7 +129,7 @@ export default {
         'token': this.$store.getters.token
       }
     },
-    organizeID() {
+    organizeId() {
       return this.$store.getters.organizeId
     },
     actionUrl() {
@@ -170,7 +170,7 @@ export default {
     onSubmite() {
       this.$refs['dataForm'].validate((valid) => {
         if (valid) {
-          const Formobj = Object.assign(this.form, { id: this.organizeID, userID: this.userID, clubID: this.clubID })
+          const Formobj = Object.assign(this.form, { id: this.organizeId, userID: this.userID, clubID: this.clubID })
           const params = Object.assign(this.addList, Formobj)
           this.loadingbut = true
           this.loadingbuttext = '保存中...'

src/views/club/form.vue

@@ -128,7 +128,7 @@ export default {
         'token': this.$store.getters.token
       }
     },
-    organizeID() {
+    organizeId() {
       return this.$store.getters.organizeId
     },
     actionUrl() {
@@ -201,7 +201,7 @@ export default {
             this.isAddress = true
             return
           }
-          const Formobj = Object.assign(this.form, { id: this.organizeID })
+          const Formobj = Object.assign(this.form, { id: this.organizeId })
           const params = Object.assign(this.addList, Formobj)
           this.loadingbut = true
           this.loadingbuttext = '保存中...'

src/views/club/list.vue

@@ -83,7 +83,7 @@
         </template>
       </el-table-column>
     </el-table>
-    <pagination v-show="total>20" :total="total" :page.sync="listQuery.index" :limit.sync="listQuery.pageSize" @pagination="fetchData" />
+    <pagination v-show="total>20" :total="total" :page.sync="listQuery.index" :limit.sync="listQuery.pageSize" @pagination="getList" />
     <el-dialog title="审核" :visible.sync="dialogFormVisible" width="440px">
       <el-form ref="dataForm" :rules="rules" :model="addPeople" label-position="right" label-width="120px">
         <el-form-item label="状态:">
@@ -112,10 +112,7 @@
 
 <script>
 import { getClubList, createOperator, updateStatus } from '@/api/club'
-import Pagination from '@/components/Pagination'
-
 export default {
-  components: { Pagination },
   data() {
     return {
       pageNum: 0,
@@ -125,7 +122,7 @@ export default {
       listQuery: {
         index: 1,
         pageSize: 20,
-        userOrganizeID: this.$store.getters.organizeId,
+        userorganizeId: this.$store.getters.organizeId,
         userName: '',
         linkMan: '',
         bindMobile: '',
@@ -166,7 +163,7 @@ export default {
     disabled() {
       return !this.addPeople.status
     },
-    organizeID() {
+    organizeId() {
       return this.$store.getters.organizeId
     }
   },
@@ -202,7 +199,7 @@ export default {
     handleCreateOperator() { // 保存
       this.$refs['dataForm'].validate((valid) => {
         if (valid) {
-          const Formobj = { userOrganizeID: this.$store.getters.organizeId, configFlag: 1 }
+          const Formobj = { userorganizeId: this.$store.getters.organizeId, configFlag: 1 }
           const params = Object.assign(Formobj, this.addPeople)
           this.loadingbut = true
           createOperator(params).then(response => {
@@ -216,7 +213,7 @@ export default {
       })
     },
     handOnline(row) {
-      this.updateTemp = Object.assign({}, { clubID: row.clubID, userID: row.userID, clubStatus: row.clubStatus, userOrganizeID: this.$store.getters.organizeId })
+      this.updateTemp = Object.assign({}, { clubID: row.clubID, userID: row.userID, clubStatus: row.clubStatus, userorganizeId: this.$store.getters.organizeId })
       this.$confirm('确定上线该门店吗？上线后门店负责人可使用账号密码登录小程序。', '系统提示', {
         confirmButtonText: '确定',
         cancelButtonText: '取消',
@@ -228,7 +225,7 @@ export default {
       })
     },
     handOffline(row) {
-      this.updateTemp = Object.assign({}, { clubID: row.clubID, userID: row.userID, clubStatus: row.clubStatus, userOrganizeID: this.$store.getters.organizeId })
+      this.updateTemp = Object.assign({}, { clubID: row.clubID, userID: row.userID, clubStatus: row.clubStatus, userorganizeId: this.$store.getters.organizeId })
       this.$confirm('确定下线该门店吗？下线后该门店将不能在小程序进行采购。', '系统提示', {
         confirmButtonText: '确定',
         cancelButtonText: '取消',

src/views/club/operateList.vue

@@ -172,7 +172,7 @@ export default {
         pageSize: 20,
         clubID: this.$route.query.clubID,
         userID: this.$route.query.userID,
-        userOrganizeID: this.$store.getters.organizeId,
+        userorganizeId: this.$store.getters.organizeId,
         linkName: '',
         mobile: '',
         status: '',
@@ -180,7 +180,7 @@ export default {
         endAddTime: ''
       },
       editTemp: {
-        userOrganizeID: this.$store.getters.organizeId,
+        userorganizeId: this.$store.getters.organizeId,
         linkName: '',
         mobile: ''
       },
@@ -212,7 +212,7 @@ export default {
     }
   },
   computed: {
-    organizeID() {
+    organizeId() {
       return this.$store.getters.organizeId
     }
   },
@@ -244,7 +244,7 @@ export default {
         id: row.id,
         clubID: row.clubID,
         userID: row.userID,
-        userOrganizeID: this.$store.getters.organizeId
+        userorganizeId: this.$store.getters.organizeId
       }
     },
     handleConfirm() {
@@ -276,7 +276,7 @@ export default {
       this.dialogStatus = 'untying'
       this.dialogVisibleText = '确定解绑该运营人员吗?'
       this.handleConfirmType = 'untying'
-      this.editTemp = { userOrganizeID: this.$store.getters.organizeId, id: row.id, clubID: row.clubID, userID: row.userID }
+      this.editTemp = { userorganizeId: this.$store.getters.organizeId, id: row.id, clubID: row.clubID, userID: row.userID }
     },
     unbindOperators() {
       const params = this.editTemp
@@ -317,7 +317,7 @@ export default {
     handleCreateOperator() { // 保存
       this.$refs['dataForm'].validate((valid) => {
         if (valid) {
-          const params = Object.assign({ userOrganizeID: this.$store.getters.organizeId, configFlag: 1 }, this.editTemp)
+          const params = Object.assign({ userorganizeId: this.$store.getters.organizeId, configFlag: 1 }, this.editTemp)
           this.loadingbut = true
           this.loadingbuttext = '保存中...'
           preservOperator(params).then(response => {
@@ -338,7 +338,7 @@ export default {
     handlePreservOperator() { // 保存并生成邀请码
       this.$refs['dataForm'].validate((valid) => {
         if (valid) {
-          const Formobj = { userOrganizeID: this.$store.getters.organizeId, configFlag: 2 }
+          const Formobj = { userorganizeId: this.$store.getters.organizeId, configFlag: 2 }
           const params = Object.assign(Formobj, this.editTemp)
           preservOperator(params).then(response => {
             this.dialogFormVisible = false

src/views/dashboard/admin/index.vue

@@ -128,24 +128,24 @@ export default {
       Receivable: {
         startTime: this.getCurrentMonthFirst(),
         endTime: this.getCurrentMonthLast(),
-        organizeID: this.$store.getters.organizeId
+        organizeId: this.$store.getters.organizeId
       },
       Order: {
         startTime: this.getCurrentMonthFirst(),
         endTime: this.getCurrentMonthLast(),
-        organizeID: this.$store.getters.organizeId
+        organizeId: this.$store.getters.organizeId
       },
       Commodity: {
         startTime: this.getCurrentMonthFirst(),
         endTime: this.getCurrentMonthLast(),
-        organizeID: this.$store.getters.organizeId
+        organizeId: this.$store.getters.organizeId
       },
       count: 0,
       payTotalFee: ''
     }
   },
   computed: {
-    organizeID() {
+    organizeId() {
       return this.$store.getters.organizeId
     }
   },
@@ -185,7 +185,7 @@ export default {
       })
     },
     handleGetHomepageSale() {
-      getHomepageSale({ organizeID: this.$store.getters.organizeId }).then(response => {
+      getHomepageSale({ organizeId: this.$store.getters.organizeId }).then(response => {
         this.isSaleRequest = true
         this.monthData = response.data.month
         this.payTotalFeeData = response.data.payTotalFee

src/views/finance/details.vue

@@ -0,0 +1,191 @@
+<template>
+  <div class="app-container">
+    <div class="app-header-top" style="width: 100%;float: right;margin-bottom: 10px;">
+      <div class="app-title">收款详情</div>
+      <el-button type="primary" icon="el-icon-back" style="float: right;" @click="backToList">返回</el-button>
+    </div>
+    <el-card class="box-card">
+      <div class="refund-item">
+        <h1 style="font-size: 16px;color: #409EFF;">收款信息</h1>
+        <el-row :gutter="24" class="box-row">
+          <el-col :span="4"><b>收款ID：</b> {{ repacts.receiptId }}</el-col>
+          <el-col :span="4"><b>收款类型：</b> {{ repacts.bankNameType }}</el-col>
+          <el-col :span="4"><b>收款金额：</b> {{ repacts.receiptAmount }}</el-col>
+          <el-col :span="4"><b>收款时间：</b> {{ repacts.receiptDate }}</el-col>
+          <el-col :span="4"><b>收款状态：</b>
+            <span
+              :class="{
+                'el-span-warning': repacts.receiptStatus == 2,
+                'el-span-success': repacts.receiptStatus == 3,
+                'el-span-danger': repacts.receiptStatus == 4,
+                'el-span-danger': repacts.receiptStatus == 5,
+              }"
+            >
+              {{ repacts.receiptStatus | receiptStatusFilters }}
+            </span>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24" class="box-row">
+          <el-col :span="24"><b>收款短信：</b> {{ repacts.smsContent }}</el-col>
+        </el-row>
+      </div>
+      <div class="refund-item">
+        <h1 style="font-size: 16px;color: #409EFF;">关联订单</h1>
+        <div v-for="order in repacts.orderInfos" :key="order.orderId">
+          <el-row :gutter="22" class="box-row">
+            <el-col :span="5"><b>订单编号：</b> {{ order.orderNo + '(' + order.orderId + ')' }}</el-col>
+            <el-col :span="5"><b>订单金额：</b> {{ order.orderAmount | amountfilters }}</el-col>
+            <el-col :span="4"><b>应收金额：</b> {{ order.payableAmount | amountfilters }}</el-col>
+            <el-col :span="4"><b>已收金额：</b> {{ order.receiptAmount | amountfilters }}</el-col>
+            <el-col :span="4"><b>订单状态：</b> {{ order.receiptStatus | orderReceiptStatus }}</el-col>
+          </el-row>
+          <el-row :gutter="24" class="box-row">
+            <el-col :span="5"><b>机构名称：</b> {{ order.userName }}</el-col>
+            <el-col :span="5"><b>下单日期：</b> {{ order.orderTime }}</el-col>
+          </el-row>
+          <el-row :gutter="24" class="box-row">
+            <el-col :span="24"><b>订单收款记录：</b></el-col>
+          </el-row>
+          <el-row v-for="(pay,index) in order.records" :key="index" :gutter="24" class="box-row">
+            <el-col :span="4">{{ index+1 }}.{{ pay.receiptTime }} </el-col>
+            <el-col :span="4">{{ pay.bankNameType }}</el-col>
+            <el-col :span="3">{{ pay.receiptAmount | amountfilters }}</el-col>
+          </el-row>
+        </div>
+      </div>
+    </el-card>
+    <template>
+      <el-backtop style="right: 40px; bottom: 40px;">
+        <i class="el-icon-upload2" />
+      </el-backtop>
+    </template>
+  </div>
+</template>
+
+<script>
+import { getReceiptDetail } from '@/api/finance'
+export default {
+  filters: {
+    receiptStatusFilters(value) {
+      // 收款状态
+      const map = {
+        2: '待审核',
+        3: '审核通过',
+        4: '审核未通过',
+        5: '收款撤销'
+      }
+      return map[value]
+    },
+    orderReceiptStatus(value) {
+      // 收款方式
+      const map = {
+        1: '待收款',
+        2: '部分收款',
+        3: '已收款'
+      }
+      return map[value]
+    }
+  },
+  data() {
+    return {
+      repacts: {},
+      activeIndex: '2',
+      receiptAmount: 0,
+      returnValue: 0,
+      returnedPurchaseFee: 0,
+      bpClauses: null,
+      dialogRemarkList: [],
+      dialogRemarksVisible: false,
+      dialogRemarksOrderId: 0,
+      statusObj: {
+        '0': '待确认',
+        '4': '交易完成',
+        '5': '订单完成',
+        '6': '已关闭',
+        '7': '交易全退',
+        '11': '待收款、待发货',
+        '12': '待收款、部分发货',
+        '13': '待收款、全部发货',
+        '21': '部分收款、待发货',
+        '22': '部分收款、部分发货',
+        '23': '部分收款、全部发货',
+        '31': '全部收款、待发货',
+        '32': '全部收款、部分发货',
+        '33': '全部收款、全部发货'
+      }
+    }
+  },
+  computed: {
+
+  },
+  created() {
+    this.getReceiptDetail(this.$route.query.receiptId)
+  },
+  methods: {
+    async getReceiptDetail(receiptId) {
+      try {
+        const res = await getReceiptDetail(receiptId)
+        this.repacts = res.data
+      } catch (error) {
+        console.log('error', error)
+      }
+    },
+    backToList() {
+      this.$store.dispatch('tagsView/delView', this.$route).then(() => {
+        this.$nextTick(() => {
+          this.$router.replace({
+            path: '/finance/list'
+          })
+        })
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+  .app-title{
+    float: left;
+    line-height: 36px;
+    font-size: 18px;
+    font-weight: bold;
+    color: #999999;
+  }
+  .box-card{
+    margin-top: 20px;
+    font-size: 14px;
+  }
+  .box-row{
+    padding: 10px 0;
+  }
+  .box-row .dropdown{
+    margin-top: -10px;
+  }
+  .refund-item{
+    padding: 10px 0;
+  }
+  .order-item{
+    background:#f7f7f7;
+    margin-bottom: 20px;
+    padding: 10px 15px;
+    border-radius: 5px;
+  }
+  .product-row{
+    padding: 10px 0;
+    background: #EBEEF5;
+    border-top: 1px dashed #DCDFE6;
+  }
+  .op-item{
+    padding: 5px 0;
+  }
+  .el-span-warning{
+    color: #E6A23C;
+  }
+  .el-span-success{
+    color: #67C23A;
+  }
+  .el-span-danger{
+    color: #F56C6C;
+  }
+</style>
+

src/views/finance/list.vue

@@ -1,17 +1,67 @@
 <template>
   <div class="app-container">
     <div class="filter-container">
+      <div class="filter-control">
+        <span>收款ID:</span>
+        <el-input v-model="listQuery.receiptId" style="width:130px;" placeholder="订单ID" clearable @keyup.enter.native="getList" @clear="getList" />
+      </div>
       <div class="filter-control">
         <span>订单ID:</span>
-        <el-input v-model="listQuery.orderID" style="width:130px;" placeholder="订单ID" clearable @keyup.enter.native="getList" @clear="getList" />
+        <el-input v-model="listQuery.orderId" style="width:130px;" placeholder="订单ID" clearable @keyup.enter.native="getList" @clear="getList" />
       </div>
       <div class="filter-control">
         <span>订单编号:</span>
-        <el-input v-model="listQuery.orderNumber" style="width:130px;" placeholder="订单编号" clearable @keyup.enter.native="getList" @clear="getList" />
+        <el-input v-model="listQuery.orderNo" style="width:200px;" placeholder="订单编号" clearable @keyup.enter.native="getList" @clear="getList" />
+      </div>
+      <div class="filter-control">
+        <span>机构名称:</span>
+        <el-input v-model="listQuery.userName" style="width:200px;" placeholder="客户名称" clearable @keyup.enter.native="getList" @clear="getList" />
+      </div>
+      <div class="filter-control">
+        <span>收款方:</span>
+        <el-input v-model="listQuery.customer" style="width:200px;" placeholder="收款方" clearable @keyup.enter.native="getList" @clear="getList" />
       </div>
       <div class="filter-control">
-        <span>客户名称:</span>
-        <el-input v-model="listQuery.customer" style="width:130px;" placeholder="客户名称" clearable @keyup.enter.native="getList" @clear="getList" />
+        <span>收款方式:</span>
+        <el-select v-model="listQuery.payWay" style="width:120px;" clearable @change="getList">
+          <el-option value="" label="所有" />
+          <el-option label="线上" :value="1" />
+          <el-option label="线下" :value="2" />
+        </el-select>
+      </div>
+      <div class="filter-control">
+        <span>收款状态:</span>
+        <el-select v-model="listQuery.receiptStatus" style="width:120px;" clearable @change="getList">
+          <el-option value="" label="所有" />
+          <el-option label="待审核" :value="2" />
+          <el-option label="审核通过" :value="3" />
+          <el-option label="审核不通过" :value="4" />
+          <el-option label="收款撤销" :value="5" />
+        </el-select>
+      </div>
+      <div class="filter-control">
+        <span>收款账号:</span>
+        <el-select v-model="listQuery.payType" style="width:150px;" clearable @change="getList">
+          <el-option value="" label="所有" />
+          <el-option v-for="item in receiptTypeList" :key="item.id" :label="item.name" :value="item.id" />
+        </el-select>
+      </div>
+      <div class="filter-control">
+        <span>收款进度:</span>
+        <el-select v-model="listQuery.receiptProgress" style="width:120px;" clearable @change="getList">
+          <el-option value="" label="所有" />
+          <el-option label="待收款" :value="1" />
+          <el-option label="部分收款" :value="2" />
+          <el-option label="已收款" :value="3" />
+        </el-select>
+      </div>
+      <div class="filter-control">
+        <span>关联数量:</span>
+        <el-select v-model="listQuery.associationNum" style="width:150px;" clearable @change="getList">
+          <el-option value="" label="所有" />
+          <el-option label="关联一个订单" value="1" />
+          <el-option label="关联多个订单" value="2" />
+        </el-select>
       </div>
       <div class="filter-control">
         <span>下单时间:</span>
@@ -28,6 +78,7 @@
       </div>
       <div class="filter-control">
         <el-button type="primary" icon="el-icon-search" @click="getList">查询</el-button>
+        <!-- <el-button type="primary" icon="el-icon-search" @click="getList">导出筛查结果</el-button> -->
       </div>
     </div>
     <el-table
@@ -39,157 +90,153 @@
       highlight-current-row
       :header-cell-style="{background:'#eef1f6',color:'#606266'}"
     >
-      <el-table-column align="center" label="序号" width="50">
-        <template slot-scope="scope">
-          {{ scope.$index+1 }}
+      <el-table-column label="收款ID" align="center" prop="receiptId" width="100" />
+      <el-table-column label="收款时间" align="center" prop="receiptTime" width="200" />
+      <el-table-column label="金额(元)" align="center" prop="receiptAmount" width="150">
+        <template slot-scope="{ row }">
+          <span>{{ row.receiptAmount | amountfilters }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="收款方式" align="center" prop="payWay">
+        <template slot-scope="{ row }">
+          {{ row.payWay | payWayFilters }}
+        </template>
+      </el-table-column>
+      <el-table-column label="收款账号" align="center" prop="payType">
+        <template slot-scope="{ row }">
+          <span>{{ payTypeFilters(row.payType) }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="状态" align="center" prop="receiptStatus">
+        <template slot-scope="{ row }">
+          <span
+            :class="{
+              'el-span-warning': row.receiptStatus == 2,
+              'el-span-success': row.receiptStatus == 3,
+              'el-span-danger': row.receiptStatus == 4,
+              'el-span-danger': row.receiptStatus == 5,
+            }"
+          >
+            {{ row.receiptStatus | receiptStatusFilters }}
+          </span>
+        </template>
+      </el-table-column>
+      <el-table-column label="机构名称" align="center" prop="userName">
+        <template slot-scope="{ row }">
+          {{ row.userName ? row.userName : '---' }}
+        </template>
+      </el-table-column>
+      <el-table-column label="关联订单号" align="center" prop="shopOrderNos" />
+      <el-table-column label="操作" align="center">
+        <template slot-scope="{row}">
+          <el-button type="primary" size="mini" @click="handleToDetails(row.receiptId)">查看详情</el-button>
         </template>
       </el-table-column>
-      <el-table-column label="订单编号(ID)" align="center" prop="orderID" />
-      <el-table-column label="下单时间" align="center" prop="createTime" />
-      <el-table-column label="客户名称" align="center" prop="customer" />
-      <el-table-column label="订单金额(元)" align="center" prop="money" />
-      <el-table-column label="应收金额(元)" align="center" prop="money" />
-      <el-table-column label="已收金额(元)" align="center" prop="money1" />
-      <el-table-column label="未收金额(元)" align="center" prop="money2" />
     </el-table>
-
-    <pagination v-show="total>20" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="fetchData" />
+    <!-- 页码 -->
+    <pagination
+      :total="total"
+      :page-sizes="[20]"
+      :page-size="20"
+      :page.sync="listQuery.pageNum"
+      :limit.sync="listQuery.pageSize"
+      @pagination="getList"
+    />
   </div>
 </template>
 
 <script>
-import { getClubList } from '@/api/club'
-import Pagination from '@/components/Pagination'
+import { getReceiptList, getReceiptTypeList } from '@/api/finance'
 import pickerOptions from '@/utils/time-picker.js'
 
 export default {
-  components: { Pagination },
   filters: {
-    statusFilter(status) {
-      const statusMap = {
-        1: 'success',
-        0: 'gray'
+    payWayFilters(value) {
+      // 收款方式
+      const map = {
+        1: '线上',
+        2: '线下'
+      }
+      return map[value]
+    },
+    receiptStatusFilters(value) {
+      // 收款状态
+      const map = {
+        2: '待审核',
+        3: '审核通过',
+        4: '审核未通过',
+        5: '收款撤销'
       }
-      return statusMap[status]
+      return map[value]
     }
   },
   data() {
     return {
+      time: '',
       list: null,
       pickerOptions,
       listLoading: true,
       searchTimeVal: '',
       total: 0,
       listQuery: {
-        page: 1,
-        limit: 10,
-        importance: undefined,
-        title: undefined,
-        type: undefined,
-        sort: '+id'
-      },
-      search: {
-
-      },
-      form: {
-        classifyName: '',
-        telephone: '',
-        contacts: '',
-        businessNum: '',
-        address: '',
-        radio: 1,
-        status: '请选择',
-        imageUrl: '',
-        doorwayImageUrl: ''
-      },
-      addPeople: {
-        classifyName: '',
-        telephone: ''
-      },
-      updateTatusId: '',
-      updateTatusType: '',
-      dialogVisible: false,
-      dialogVisibleText: '',
-      dialogFormVisible: false,
-      dialogStatus: '',
-      textMap: {
-        update: '添加运营人员',
-        create: 'Create',
-        titleText: '系统提示'
+        organizeId: 0,
+        pageNum: 1,
+        pageSize: 20,
+        receiptId: '', // 收款ID
+        orderId: '', // 订单ID
+        orderNo: '', // 订单编号
+        userName: '', // 机构名称
+        payWay: '', // 收款方式
+        payType: '', // 收款账号
+        receiptProgress: '', // 收款进度
+        associationNum: '', // 关联数量
+        startTime: '', // 下单开始时间
+        endTime: '' // 下单结束时间
       },
-      rules: {
-        classifyName: [{ required: true, message: '姓名不能为空', trigger: 'blur' }],
-        telephone: [{ required: true, message: '手机号码不能为空', trigger: 'blur' }]
-      }
+      receiptTypeList: []
     }
   },
   created() {
     this.getList()
+    this.getReceiptTypeList()
   },
   methods: {
-    getList() {
+    // 获取收款列表
+    async getList() {
       this.listLoading = true
-      getClubList().then(response => {
-        this.list = response.data.items
+      if (this.time && this.time.length > 0) {
+        this.listQuery.startPayTime = this.time[0]
+        this.listQuery.endPayTime = this.time[1]
+      } else {
+        this.listQuery.startPayTime = ''
+        this.listQuery.endPayTime = ''
+      }
+      try {
+        const res = await getReceiptList(this.listQuery)
+        this.list = res.data.list
+        this.total = res.data.total
+        this.listLoading = false
+      } catch (error) {
+        console.log('error', error)
         this.listLoading = false
-      }).catch(() => {
-        // 封装静态数据
-        this.list = [
-          {
-            id: 1,
-            orderID: 'XD956566565656',
-            customer: '商城测试演示机构',
-            createTime: '2020-01-01:20:30:56',
-            money: 1200000,
-            money1: 1200000,
-            money2: 1200000,
-            money3: 1200000,
-            money4: 1200000,
-            money5: 1200000,
-            money6: 1200000
-          },
-          {
-            id: 1,
-            orderID: 'XD956566565656',
-            customer: '商城测试演示机构',
-            createTime: '2020-01-01:20:30:56',
-            money: 1200000,
-            money1: 1200000,
-            money2: 1200000,
-            money3: 1200000,
-            money4: 1200000,
-            money5: 1200000,
-            money6: 1200000
-          },
-          {
-            id: 1,
-            orderID: 'XD956566565656',
-            customer: '商城测试演示机构',
-            createTime: '2020-01-01:20:30:56',
-            money: 1200000,
-            money1: 1200000,
-            money2: 1200000,
-            money3: 1200000,
-            money4: 1200000,
-            money5: 1200000,
-            money6: 1200000
-          },
-          {
-            id: 1,
-            orderID: 'XD956566565656',
-            customer: '商城测试演示机构',
-            createTime: '2020-01-01:20:30:56',
-            money: 1200000,
-            money1: 1200000,
-            money2: 1200000,
-            money3: 1200000,
-            money4: 1200000,
-            money5: 1200000,
-            money6: 1200000
-          }
-        ]
+      }
+    },
+    // 获取收款账号列表
+    async getReceiptTypeList() {
+      const res = await getReceiptTypeList()
+      this.receiptTypeList = res.data
+    },
+    payTypeFilters(value) {
+      // 收款账号
+      let valueText = ''
+      this.receiptTypeList.forEach(type => {
+        if (value === type.id) { valueText = type.name } else { valueText = '---' }
       })
-      this.listLoading = false
+      console.log('valueText', valueText)
+      return valueText
+    },
+    handleToDetails(receiptId) {
+      this.$router.push({ path: '/finance/details', query: { receiptId: receiptId }})
     },
     onSubmit() {
       console.log('search')
@@ -198,3 +245,14 @@ export default {
 }
 
 </script>
+<style scoped>
+.el-span-warning{
+  color: #E6A23C;
+}
+.el-span-success{
+  color: #67C23A;
+}
+.el-span-danger{
+  color: #F56C6C;
+}
+</style>

src/views/finance/payapply-list.vue

@@ -0,0 +1,347 @@
+<template>
+  <div class="app-container">
+    <div class="filter-container">
+      <div class="filter-control">
+        <span>子订单ID:</span>
+        <el-input v-model="listQuery.orderID" style="width:130px;" placeholder="子订单ID" clearable @keyup.enter.native="getList" @clear="getList" />
+      </div>
+      <div class="filter-control">
+        <span>子订单编号:</span>
+        <el-input v-model="listQuery.orderID" style="width:200px;" placeholder="子订单编号" clearable @keyup.enter.native="getList" @clear="getList" />
+      </div>
+      <div class="filter-control">
+        <span>订单ID:</span>
+        <el-input v-model="listQuery.orderID" style="width:130px;" placeholder="订单ID" clearable @keyup.enter.native="getList" @clear="getList" />
+      </div>
+      <div class="filter-control">
+        <span>订单编号:</span>
+        <el-input v-model="listQuery.orderNumber" style="width:200px;" placeholder="订单编号" clearable @keyup.enter.native="getList" @clear="getList" />
+      </div>
+      <div class="filter-control">
+        <span>供应商:</span>
+        <el-input v-model="listQuery.customer" style="width:200px;" placeholder="供应商" clearable @keyup.enter.native="getList" @clear="getList" />
+      </div>
+      <div class="filter-control">
+        <span>机构名称:</span>
+        <el-input v-model="listQuery.customer" style="width:200px;" placeholder="机构名称" clearable @keyup.enter.native="getList" @clear="getList" />
+      </div>
+      <div class="filter-control">
+        <span>付款状态:</span>
+        <el-select v-model="listQuery.sendOutStatus" style="width:120px;" clearable @change="getList">
+          <el-option value="" label="所有" />
+          <el-option label="未付款" value="0" />
+          <el-option label="部分付款" value="1" />
+        </el-select>
+      </div>
+      <div class="filter-control">
+        <span>下单时间:</span>
+        <el-date-picker
+          v-model="time"
+          type="daterange"
+          unlink-panels
+          range-separator="至"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+          :picker-options="pickerOptions"
+          @change="getList"
+        />
+      </div>
+      <div class="filter-control">
+        <el-button type="primary" icon="el-icon-search" @click="getList">查询</el-button>
+        <el-button type="success" icon="el-icon-document-add" @click="getList">付款申请</el-button>
+      </div>
+    </div>
+    <el-table
+      v-loading="listLoading"
+      :data="list"
+      element-loading-text="Loading"
+      border
+      fit
+      highlight-current-row
+      default-expand-all
+      :header-cell-style="{background:'#eef1f6',color:'#606266'}"
+      @selection-change="handleSelectionChange"
+    >
+      <el-table-column type="selection" width="40" />
+      <el-table-column label="商品信息" type="expand" width="50">
+        <template slot-scope="{row}">
+          <el-table :data="row.products" border fit highlight-current-row :header-cell-style="{background:'#eef1f6',color:'#606266'}">
+            <el-table-column label="商品名" align="center" prop="productName" />
+            <el-table-column label="规格" align="center" prop="unit" />
+            <el-table-column label="数量" align="center" prop="num" />
+            <el-table-column label="退货" align="center" prop="returnNum" />
+            <el-table-column label="单价" align="center" prop="price" />
+            <el-table-column label="总价" align="center" prop="totalPrice" />
+            <el-table-column label="成本(单)" align="center" prop="costPrice" />
+            <el-table-column label="成本(总)" align="center" prop="totalCostPrice" />
+          </el-table>
+        </template>
+      </el-table-column>
+      <el-table-column label="订单编号(ID)" align="center" prop="orderNo">
+        <template slot-scope="{row}">
+          <span>{{ row.orderNo }}({{ row.orderId }})</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="子订单编号(ID)" align="center" prop="shopOrderNo">
+        <template slot-scope="{row}">
+          <span>{{ row.shopOrderNo }}({{ row.shopOrderId }})</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="订单金额" align="center" prop="payableAmount" />
+      <el-table-column label="收款金额" align="center" prop="payableAmount" />
+      <el-table-column prop="status" label="收款状态" align="center">
+        <template slot-scope="{ row }">
+          <span
+            :class="{
+              'el-span-warning': row.status == 0,
+              'el-span-success': row.status == 1,
+              'el-span-danger': row.status == 0
+            }"
+          >
+            {{ row.status | statusFilter }}
+            <span v-if="row.status === 2" class="el-span-danger">原因：{{ row.statusText }}</span>
+          </span>
+        </template>
+      </el-table-column>
+      <el-table-column prop="status" label="付款状态" align="center">
+        <template slot-scope="{ row }">
+          <span
+            :class="{
+              'el-span-warning': row.status == 0,
+              'el-span-success': row.status == 1,
+              'el-span-danger': row.status == 2
+            }"
+          >
+            {{ row.status | statusFilter }}
+            <span v-if="row.status === 2" class="el-span-danger">原因：{{ row.statusText }}</span>
+          </span>
+        </template>
+      </el-table-column>
+      <el-table-column label="商品费" align="center" prop="verifyTime" />
+      <el-table-column label="机构" align="center" prop="clubName" />
+      <el-table-column label="机构运费" align="center" prop="clubName" />
+      <el-table-column label="供应商" align="center" prop="shopName" />
+      <el-table-column label="供应商运费" align="center" prop="verifyMan" />
+      <el-table-column label="付供应商" align="center" prop="payableAmount" />
+      <el-table-column label="操作" align="center">
+        <template slot-scope="{row}">
+          <el-button type="text" size="mini" @click="handleToRecord(row.id)">修改成本</el-button>
+          <el-button type="text" size="mini" @click="handleToRecord(row.id)">退/付款记录</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <pagination v-show="total>20" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="fetchData" />
+  </div>
+</template>
+
+<script>
+import { getClubList } from '@/api/club'
+import Pagination from '@/components/Pagination'
+import pickerOptions from '@/utils/time-picker.js'
+
+export default {
+  components: { Pagination },
+  filters: {
+    statusFilter(status) {
+      const map = {
+        0: '待付款',
+        1: '已付款',
+        2: '审核不通过'
+      }
+      return map[status]
+    }
+  },
+  data() {
+    return {
+      list: null,
+      pickerOptions,
+      listLoading: true,
+      searchTimeVal: '',
+      total: 0,
+      listQuery: {
+        page: 1,
+        limit: 10,
+        importance: undefined,
+        title: undefined,
+        type: undefined,
+        sort: '+id'
+      },
+      search: {
+
+      },
+      form: {
+        classifyName: '',
+        telephone: '',
+        contacts: '',
+        businessNum: '',
+        address: '',
+        radio: 1,
+        status: '请选择',
+        imageUrl: '',
+        doorwayImageUrl: ''
+      },
+      addPeople: {
+        classifyName: '',
+        telephone: ''
+      },
+      updateTatusId: '',
+      updateTatusType: '',
+      dialogVisible: false,
+      dialogVisibleText: '',
+      dialogFormVisible: false,
+      dialogStatus: '',
+      textMap: {
+        update: '添加运营人员',
+        create: 'Create',
+        titleText: '系统提示'
+      },
+      rules: {
+        classifyName: [{ required: true, message: '姓名不能为空', trigger: 'blur' }],
+        telephone: [{ required: true, message: '手机号码不能为空', trigger: 'blur' }]
+      }
+    }
+  },
+  created() {
+    this.getList()
+  },
+  methods: {
+    getList() {
+      this.listLoading = true
+      getClubList().then(response => {
+        this.list = response.data.items
+        this.listLoading = false
+      }).catch(() => {
+        // 封装静态数据
+        this.list = [
+          {
+            id: 7580,
+            name: '微博',
+            type: '子订单付款',
+            shopName: '采美信息技术有限公司',
+            payableAmount: '2000000.00',
+            shopOrderNo: 'P1682650952091471001',
+            shopOrderId: '19747',
+            orderNo: 'P16265095220221471',
+            orderId: '18179',
+            clubName: '广州白云区松洲蒂亚美容院',
+            applyMan: '路海珠',
+            applyTime: '2020-01-01:20:30:56',
+            verifyMan: '李昕',
+            verifyTime: '2020-01-01:20:30:56',
+            status: 0,
+            totalProduct: '3000.00',
+            payShopTotal: '3000.00',
+            products: [
+              {
+                productName: '阶雪山之恋保滋润面霜吖',
+                unit: '50ml',
+                num: 3,
+                returnNum: 0,
+                price: '2000.00',
+                totalPrice: '6000.00',
+                costPrice: '1000.00',
+                totalCostPrice: '3000.00'
+              },
+              {
+                productName: '阶雪山之恋保滋润面霜吖',
+                unit: '50ml',
+                num: 3,
+                returnNum: 0,
+                price: '2000.00',
+                totalPrice: '6000.00',
+                costPrice: '1000.00',
+                totalCostPrice: '3000.00'
+              },
+              {
+                productName: '阶雪山之恋保滋润面霜吖',
+                unit: '50ml',
+                num: 3,
+                returnNum: 0,
+                price: '2000.00',
+                totalPrice: '6000.00',
+                costPrice: '1000.00',
+                totalCostPrice: '3000.00'
+              },
+              {
+                productName: '阶雪山之恋保滋润面霜吖',
+                unit: '50ml',
+                num: 3,
+                returnNum: 0,
+                price: '2000.00',
+                totalPrice: '6000.00',
+                costPrice: '1000.00',
+                totalCostPrice: '3000.00'
+              }
+            ]
+          },
+          {
+            id: 7580,
+            name: '微博',
+            type: '子订单付款',
+            shopName: '采美信息技术有限公司',
+            payableAmount: '2000000.00',
+            shopOrderNo: 'P1682650952091471001',
+            shopOrderId: '19747',
+            orderNo: 'P16265095220221471',
+            orderId: '18179',
+            clubName: '广州白云区松洲蒂亚美容院',
+            applyMan: '路海珠',
+            applyTime: '2020-01-01:20:30:56',
+            verifyMan: '李昕',
+            verifyTime: '2020-01-01:20:30:56',
+            status: 0,
+            totalProduct: '3000.00',
+            payShopTotal: '3000.00',
+            products: [
+              {
+                productName: '阶雪山之恋保滋润面霜吖',
+                unit: '50ml',
+                num: 3,
+                returnNum: 0,
+                price: '2000.00',
+                totalPrice: '6000.00',
+                costPrice: '1000.00',
+                totalCostPrice: '3000.00'
+              },
+              {
+                productName: '阶雪山之恋保滋润面霜吖',
+                unit: '50ml',
+                num: 3,
+                returnNum: 0,
+                price: '2000.00',
+                totalPrice: '6000.00',
+                costPrice: '1000.00',
+                totalCostPrice: '3000.00'
+              }
+            ]
+          }
+        ]
+      })
+      this.listLoading = false
+    },
+    handleToRecord(id) {
+      this.$router.push({ path: '/finance/payment-record', query: { id: id }})
+    }
+  }
+}
+
+</script>
+<style scoped>
+/deep/ .el-table__expanded-cell[class*=cell]{
+  padding:10px 10px !important;
+}
+/deep/ .el-table__row td {
+  height: 34px !important;
+  line-height: 34px !important;
+  padding: 0 !important;
+}
+.el-span-warning{
+  color: #E6A23C;
+}
+.el-span-success{
+  color: #67C23A;
+}
+.el-span-danger{
+  color: #F56C6C;
+}
+</style>

src/views/finance/paycents-list.vue

@@ -0,0 +1,325 @@
+<template>
+  <div class="app-container">
+    <div class="filter-container">
+      <div class="filter-control">
+        <span>子订单ID:</span>
+        <el-input v-model="listQuery.orderID" style="width:130px;" placeholder="子订单ID" clearable @keyup.enter.native="getList" @clear="getList" />
+      </div>
+      <div class="filter-control">
+        <span>子订单编号:</span>
+        <el-input v-model="listQuery.orderID" style="width:200px;" placeholder="子订单编号" clearable @keyup.enter.native="getList" @clear="getList" />
+      </div>
+      <div class="filter-control">
+        <span>订单ID:</span>
+        <el-input v-model="listQuery.orderID" style="width:130px;" placeholder="订单ID" clearable @keyup.enter.native="getList" @clear="getList" />
+      </div>
+      <div class="filter-control">
+        <span>订单编号:</span>
+        <el-input v-model="listQuery.orderNumber" style="width:200px;" placeholder="订单编号" clearable @keyup.enter.native="getList" @clear="getList" />
+      </div>
+      <div class="filter-control">
+        <span>供应商:</span>
+        <el-input v-model="listQuery.customer" style="width:200px;" placeholder="供应商" clearable @keyup.enter.native="getList" @clear="getList" />
+      </div>
+      <div class="filter-control">
+        <span>机构名称:</span>
+        <el-input v-model="listQuery.customer" style="width:200px;" placeholder="机构名称" clearable @keyup.enter.native="getList" @clear="getList" />
+      </div>
+      <div class="filter-control">
+        <span>下单时间:</span>
+        <el-date-picker
+          v-model="time"
+          type="daterange"
+          unlink-panels
+          range-separator="至"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+          :picker-options="pickerOptions"
+          @change="getList"
+        />
+      </div>
+      <div class="filter-control">
+        <el-button type="primary" icon="el-icon-search" @click="getList">查询</el-button>
+        <el-button type="success" icon="el-icon-document-add" @click="getList">申请分账</el-button>
+      </div>
+    </div>
+    <p style="margin: 0;line-height: 24px;font-size: 14px;color: #F56C6C;">注：每次选择一个子订单申请分账，系统将自动分配佣金。付供应商的金额依然还在合利宝账户，需要再进行手动结算。</p>
+    <el-table
+      v-loading="listLoading"
+      :data="list"
+      element-loading-text="Loading"
+      border
+      fit
+      highlight-current-row
+      :header-cell-style="{background:'#eef1f6',color:'#606266'}"
+      @selection-change="handleSelectionChange"
+    >
+      <el-table-column type="selection" width="40" />
+      <el-table-column label="商品信息" type="expand" width="50">
+        <template slot-scope="{row}">
+          <el-table :data="row.products" border fit highlight-current-row :header-cell-style="{background:'#eef1f6',color:'#606266'}">
+            <el-table-column label="商品名" align="center" prop="productName" />
+            <el-table-column label="规格" align="center" prop="unit" />
+            <el-table-column label="数量" align="center" prop="num" />
+            <el-table-column label="退货" align="center" prop="returnNum" />
+            <el-table-column label="单价" align="center" prop="price" />
+            <el-table-column label="总价" align="center" prop="totalPrice" />
+          </el-table>
+        </template>
+      </el-table-column>
+      <el-table-column label="订单编号(ID)" align="center" prop="orderNo" width="240">
+        <template slot-scope="{row}">
+          <span>{{ row.orderNo }}({{ row.orderId }})</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="子订单编号(ID)" align="center" prop="shopOrderNo" width="240">
+        <template slot-scope="{row}">
+          <span>{{ row.shopOrderNo }}({{ row.shopOrderId }})</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="下单时间" align="center" prop="verifyTime" width="90" />
+      <el-table-column label="订单金额" align="center" prop="payableAmount" />
+      <el-table-column label="收款金额" align="center" prop="payableAmount" />
+      <el-table-column label="商品费" align="center" prop="verifyMan" />
+      <el-table-column label="机构" align="center" prop="clubName" />
+      <el-table-column label="机构运费" align="center" prop="clubName" />
+      <el-table-column label="供应商" align="center" prop="shopName" />
+      <el-table-column label="供应商运费" align="center" prop="verifyMan" />
+      <el-table-column label="付供应商" align="center" prop="payableAmount" />
+      <el-table-column prop="status" label="收款状态" align="center">
+        <template slot-scope="{ row }">
+          <span
+            :class="{
+              'el-span-warning': row.status == 0,
+              'el-span-success': row.status == 1,
+              'el-span-danger': row.status == 0
+            }"
+          >
+            {{ row.status | statusFilter }}
+            <span v-if="row.status === 2" class="el-span-danger">原因：{{ row.statusText }}</span>
+          </span>
+        </template>
+      </el-table-column>
+      <el-table-column prop="status" label="结算状态" align="center">
+        <template slot-scope="{ row }">
+          <span
+            :class="{
+              'el-span-warning': row.status == 0,
+              'el-span-success': row.status == 1,
+              'el-span-danger': row.status == 2
+            }"
+          >
+            {{ row.status | statusFilter }}
+            <span v-if="row.status === 2" class="el-span-danger">原因：{{ row.statusText }}</span>
+          </span>
+        </template>
+      </el-table-column>
+
+    </el-table>
+    <pagination v-show="total>20" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="fetchData" />
+  </div>
+</template>
+
+<script>
+import { getClubList } from '@/api/club'
+import Pagination from '@/components/Pagination'
+import pickerOptions from '@/utils/time-picker.js'
+
+export default {
+  components: { Pagination },
+  filters: {
+    statusFilter(status) {
+      const map = {
+        0: '待付款',
+        1: '已付款',
+        2: '审核不通过'
+      }
+      return map[status]
+    }
+  },
+  data() {
+    return {
+      list: null,
+      pickerOptions,
+      listLoading: true,
+      searchTimeVal: '',
+      total: 0,
+      listQuery: {
+        page: 1,
+        limit: 10,
+        importance: undefined,
+        title: undefined,
+        type: undefined,
+        sort: '+id'
+      },
+      search: {
+
+      },
+      form: {
+        classifyName: '',
+        telephone: '',
+        contacts: '',
+        businessNum: '',
+        address: '',
+        radio: 1,
+        status: '请选择',
+        imageUrl: '',
+        doorwayImageUrl: ''
+      },
+      addPeople: {
+        classifyName: '',
+        telephone: ''
+      },
+      updateTatusId: '',
+      updateTatusType: '',
+      dialogVisible: false,
+      dialogVisibleText: '',
+      dialogFormVisible: false,
+      dialogStatus: '',
+      textMap: {
+        update: '添加运营人员',
+        create: 'Create',
+        titleText: '系统提示'
+      },
+      rules: {
+        classifyName: [{ required: true, message: '姓名不能为空', trigger: 'blur' }],
+        telephone: [{ required: true, message: '手机号码不能为空', trigger: 'blur' }]
+      }
+    }
+  },
+  created() {
+    this.getList()
+  },
+  methods: {
+    getList() {
+      this.listLoading = true
+      getClubList().then(response => {
+        this.list = response.data.items
+        this.listLoading = false
+      }).catch(() => {
+        // 封装静态数据
+        this.list = [
+          {
+            id: 7580,
+            name: '微博',
+            type: '子订单付款',
+            shopName: '采美信息技术有限公司',
+            payableAmount: '2000000.00',
+            shopOrderNo: 'P1682650952091471001',
+            shopOrderId: '19747',
+            orderNo: 'P16265095220221471',
+            orderId: '18179',
+            clubName: '广州白云区松洲蒂亚美容院',
+            applyMan: '路海珠',
+            applyTime: '2020-01-01:20:30:56',
+            verifyMan: '李昕',
+            verifyTime: '2020-01-01:20:30:56',
+            status: 0,
+            totalProduct: '3000.00',
+            payShopTotal: '3000.00',
+            products: [
+              {
+                productName: '阶雪山之恋保滋润面霜吖',
+                unit: '50ml',
+                num: 3,
+                returnNum: 0,
+                price: '2000.00',
+                totalPrice: '6000.00',
+                costPrice: '1000.00',
+                totalCostPrice: '3000.00'
+              },
+              {
+                productName: '阶雪山之恋保滋润面霜吖',
+                unit: '50ml',
+                num: 3,
+                returnNum: 0,
+                price: '2000.00',
+                totalPrice: '6000.00',
+                costPrice: '1000.00',
+                totalCostPrice: '3000.00'
+              },
+              {
+                productName: '阶雪山之恋保滋润面霜吖',
+                unit: '50ml',
+                num: 3,
+                returnNum: 0,
+                price: '2000.00',
+                totalPrice: '6000.00',
+                costPrice: '1000.00',
+                totalCostPrice: '3000.00'
+              },
+              {
+                productName: '阶雪山之恋保滋润面霜吖',
+                unit: '50ml',
+                num: 3,
+                returnNum: 0,
+                price: '2000.00',
+                totalPrice: '6000.00',
+                costPrice: '1000.00',
+                totalCostPrice: '3000.00'
+              }
+            ]
+          },
+          {
+            id: 7580,
+            name: '微博',
+            type: '子订单付款',
+            shopName: '采美信息技术有限公司',
+            payableAmount: '2000000.00',
+            shopOrderNo: 'P1682650952091471001',
+            shopOrderId: '19747',
+            orderNo: 'P16265095220221471',
+            orderId: '18179',
+            clubName: '广州白云区松洲蒂亚美容院',
+            applyMan: '路海珠',
+            applyTime: '2020-01-01:20:30:56',
+            verifyMan: '李昕',
+            verifyTime: '2020-01-01:20:30:56',
+            status: 0,
+            totalProduct: '3000.00',
+            payShopTotal: '3000.00',
+            products: [
+              {
+                productName: '阶雪山之恋保滋润面霜吖',
+                unit: '50ml',
+                num: 3,
+                returnNum: 0,
+                price: '2000.00',
+                totalPrice: '6000.00',
+                costPrice: '1000.00',
+                totalCostPrice: '3000.00'
+              },
+              {
+                productName: '阶雪山之恋保滋润面霜吖',
+                unit: '50ml',
+                num: 3,
+                returnNum: 0,
+                price: '2000.00',
+                totalPrice: '6000.00',
+                costPrice: '1000.00',
+                totalCostPrice: '3000.00'
+              }
+            ]
+          }
+        ]
+      })
+      this.listLoading = false
+    },
+    onSubmit() {
+      console.log('search')
+    }
+  }
+}
+
+</script>
+<style scoped>
+.el-span-warning{
+  color: #E6A23C;
+}
+.el-span-success{
+  color: #67C23A;
+}
+.el-span-danger{
+  color: #F56C6C;
+}
+</style>

src/views/finance/payfinance-list.vue

@@ -0,0 +1,620 @@
+<template>
+  <div class="app-container">
+    <div class="filter-container">
+      <div class="filter-control">
+        <span>子订单ID:</span>
+        <el-input v-model="listQuery.orderID" style="width:130px;" placeholder="子订单ID" clearable @keyup.enter.native="getList" @clear="getList" />
+      </div>
+      <div class="filter-control">
+        <span>子订单编号:</span>
+        <el-input v-model="listQuery.orderID" style="width:200px;" placeholder="子订单编号" clearable @keyup.enter.native="getList" @clear="getList" />
+      </div>
+      <div class="filter-control">
+        <span>订单ID:</span>
+        <el-input v-model="listQuery.orderID" style="width:130px;" placeholder="订单ID" clearable @keyup.enter.native="getList" @clear="getList" />
+      </div>
+      <div class="filter-control">
+        <span>订单编号:</span>
+        <el-input v-model="listQuery.orderNumber" style="width:200px;" placeholder="订单编号" clearable @keyup.enter.native="getList" @clear="getList" />
+      </div>
+      <div class="filter-control">
+        <span>供应商:</span>
+        <el-input v-model="listQuery.customer" style="width:200px;" placeholder="供应商" clearable @keyup.enter.native="getList" @clear="getList" />
+      </div>
+      <div class="filter-control">
+        <span>机构名称:</span>
+        <el-input v-model="listQuery.customer" style="width:200px;" placeholder="机构名称" clearable @keyup.enter.native="getList" @clear="getList" />
+      </div>
+      <div class="filter-control">
+        <span>收款状态:</span>
+        <el-select v-model="listQuery.sendOutStatus" style="width:120px;" clearable @change="getList">
+          <el-option value="" label="所有" />
+          <el-option label="待审核" value="0" />
+          <el-option label="审核通过" value="1" />
+          <el-option label="审核不通过" value="2" />
+        </el-select>
+      </div>
+      <div class="filter-control">
+        <span>付款状态:</span>
+        <el-select v-model="listQuery.sendOutStatus" style="width:120px;" clearable @change="getList">
+          <el-option value="" label="所有" />
+          <el-option label="待审核" value="0" />
+          <el-option label="审核通过" value="1" />
+          <el-option label="审核不通过" value="2" />
+        </el-select>
+      </div>
+      <div class="filter-control">
+        <span>退款状态:</span>
+        <el-select v-model="listQuery.sendOutStatus" style="width:120px;" clearable @change="getList">
+          <el-option value="" label="所有" />
+          <el-option label="待审核" value="0" />
+          <el-option label="审核通过" value="1" />
+          <el-option label="审核不通过" value="2" />
+        </el-select>
+      </div>
+      <div class="filter-control">
+        <span>结算状态:</span>
+        <el-select v-model="listQuery.sendOutStatus" style="width:120px;" clearable @change="getList">
+          <el-option value="" label="所有" />
+          <el-option label="待审核" value="0" />
+          <el-option label="审核通过" value="1" />
+          <el-option label="审核不通过" value="2" />
+        </el-select>
+      </div>
+      <div class="filter-control">
+        <span>下单时间:</span>
+        <el-date-picker
+          v-model="time"
+          type="daterange"
+          unlink-panels
+          range-separator="至"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+          :picker-options="pickerOptions"
+          @change="getList"
+        />
+      </div>
+      <div class="filter-control">
+        <el-button type="primary" icon="el-icon-search" @click="getList">查询</el-button>
+      </div>
+    </div>
+    <el-table
+      v-loading="listLoading"
+      :data="list"
+      element-loading-text="Loading"
+      border
+      fit
+      highlight-current-row
+      default-expand-all
+      :header-cell-style="{background:'#eef1f6',color:'#606266'}"
+    >
+      <el-table-column label="序号" align="center" width="40">
+        <template slot-scope="scope">{{ scope.$index + 1 }}</template>
+      </el-table-column>
+      <el-table-column label="子订单信息" type="expand" width="60">
+        <template slot-scope="{row}">
+          <el-table :data="row.shopOrderIdList" border fit highlight-current-row default-expand-all :header-cell-style="{background:'#e9f3f7',color:'#606266'}">
+            <el-table-column label="商品信息" type="expand" width="80px">
+              <template slot-scope="scope">
+                <el-table :data="scope.row.products" border fit highlight-current-row :header-cell-style="{background:'#f9f9f9',color:'#606266'}">
+                  <el-table-column label="商品名" align="center" prop="productName" />
+                  <el-table-column label="规格" align="center" prop="unit" />
+                  <el-table-column label="数量" align="center" prop="num" />
+                  <el-table-column label="退货" align="center" prop="returnNum" />
+                  <el-table-column label="单价" align="center" prop="price" />
+                  <el-table-column label="总价" align="center" prop="totalPrice" />
+                </el-table>
+              </template>
+            </el-table-column>
+            <el-table-column label="子订单编号(ID)" align="center" prop="shopOrderNos" width="240">
+              <template slot-scope="scope">
+                <span>{{ scope.row.shopOrderNos }}({{ scope.row.shopOrderIds }})</span>
+              </template>
+            </el-table-column>
+            <el-table-column label="供应商" align="center" prop="shopName" />
+            <el-table-column label="商品费" align="center" prop="payShopTotals" />
+            <el-table-column label="已付供应商/合作方" align="center" prop="payShopTotals" />
+            <el-table-column label="供应商退款" align="center" prop="payShopTotals" />
+            <el-table-column label="应付供应商/合作方" align="center" prop="payShopTotals" />
+            <el-table-column label="供应商运费" align="center" prop="payShopTotals" />
+          </el-table>
+        </template>
+      </el-table-column>
+      <el-table-column label="订单编号(ID)" align="center" prop="orderNo">
+        <template slot-scope="{row}">
+          <span>{{ row.orderNo }}({{ row.orderId }})</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="下单时间" align="center" prop="verifyTime" />
+      <el-table-column label="订单金额" align="center" prop="payableAmount" />
+      <el-table-column label="应收金额" align="center" prop="payableAmount" />
+      <el-table-column label="已收金额" align="center" prop="payableAmount" />
+      <el-table-column label="应付金额" align="center" prop="payableAmount" />
+      <el-table-column label="已付金额" align="center" prop="payableAmount" />
+      <el-table-column label="应结金额" align="center" prop="payableAmount" />
+      <el-table-column label="已结金额" align="center" prop="payableAmount" />
+      <el-table-column label="退款金额" align="center" prop="payableAmount" />
+      <el-table-column label="机构" align="center" prop="clubName" />
+      <el-table-column label="机构运费" align="center" prop="payableAmount" />
+      <el-table-column label="订单状态" prop="status" align="center">
+        <template slot-scope="{ row }">
+          <span
+            :class="{
+              'el-span-warning': row.status == 0,
+              'el-span-success': row.status == 1,
+              'el-span-danger': row.status == 0
+            }"
+          >
+            交易中
+          </span>
+        </template>
+      </el-table-column>
+      <el-table-column prop="status" label="收款状态" align="center">
+        <template slot-scope="{ row }">
+          <span
+            :class="{
+              'el-span-warning': row.status == 0,
+              'el-span-success': row.status == 1,
+              'el-span-danger': row.status == 0
+            }"
+          >
+            {{ row.status | statusFilter }}
+            <span v-if="row.status === 2" class="el-span-danger">原因：{{ row.statusText }}</span>
+          </span>
+        </template>
+      </el-table-column>
+      <el-table-column label="付款状态" prop="status" align="center">
+        <template slot-scope="{ row }">
+          <span
+            :class="{
+              'el-span-warning': row.status == 0,
+              'el-span-success': row.status == 1,
+              'el-span-danger': row.status == 0
+            }"
+          >
+            已付款
+          </span>
+        </template>
+      </el-table-column>
+      <el-table-column label="退款状态" prop="status" align="center">
+        <template slot-scope="{ row }">
+          <span
+            :class="{
+              'el-span-warning': row.status == 0,
+              'el-span-success': row.status == 1,
+              'el-span-danger': row.status == 0
+            }"
+          >
+            无退款
+          </span>
+        </template>
+      </el-table-column>
+      <el-table-column label="结算状态" prop="status" align="center">
+        <template slot-scope="{ row }">
+          <span
+            :class="{
+              'el-span-warning': row.status == 0,
+              'el-span-success': row.status == 1,
+              'el-span-danger': row.status == 0
+            }"
+          >
+            已结算
+          </span>
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" align="center" width="160">
+        <template slot-scope="{row}">
+          <el-button type="text" size="mini" @click="handleToRecord(1,row.id)">收付款记录</el-button>
+          <el-button type="text" size="mini" @click="handleToRecord(2,row.id)">用户退款/退货记录</el-button>
+          <el-button type="text" size="mini" @click="handleToRecord(3,row.id)">供应商退/付款记录</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <pagination v-show="total>20" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />
+  </div>
+</template>
+
+<script>
+import { getClubList } from '@/api/club'
+import pickerOptions from '@/utils/time-picker.js'
+
+export default {
+  filters: {
+    statusFilter(status) {
+      const map = {
+        0: '待付款',
+        1: '已付款',
+        2: '审核不通过'
+      }
+      return map[status]
+    }
+  },
+  data() {
+    return {
+      list: [
+        {
+          id: 7580,
+          name: '微博',
+          type: '子订单付款',
+          shopName: '采美信息技术有限公司',
+          payableAmount: '2000.00',
+          shopOrderNo: 'P1682650952091471001',
+          shopOrderId: '19747',
+          orderNo: 'P16265095220221471',
+          orderId: '18179',
+          clubName: '广州白云区松洲蒂亚美容院',
+          applyMan: '路海珠',
+          applyTime: '2020-01-01:20:30:56',
+          verifyMan: '李昕',
+          verifyTime: '2020-01-01:20:30:56',
+          status: 0,
+          totalProduct: '3000.00',
+          payShopTotal: '3000.00',
+          shopOrderIdList: [
+            {
+              shopName: '采美信息技术有限公司',
+              shopOrderNos: 'P1682650952091471001',
+              shopOrderIds: '19747',
+              orderNos: 'P16265095220221471',
+              orderIds: '18179',
+              clubNames: '广州白云区松洲蒂亚美容院',
+              applyMans: '路海珠',
+              applyTimes: '2020-01-01:20:30:56',
+              verifyMans: '李昕',
+              verifyTimes: '2020-01-01:20:30:56',
+              statuss: 0,
+              totalProducts: '3000.00',
+              payShopTotals: '3000.00',
+              products: [
+                {
+                  productName: '阶雪山之恋保滋润面霜吖',
+                  unit: '50ml',
+                  num: 3,
+                  returnNum: 0,
+                  price: '2000.00',
+                  totalPrice: '6000.00',
+                  costPrice: '1000.00',
+                  totalCostPrice: '3000.00'
+                },
+                {
+                  productName: '阶雪山之恋保滋润面霜吖',
+                  unit: '50ml',
+                  num: 3,
+                  returnNum: 0,
+                  price: '2000.00',
+                  totalPrice: '6000.00',
+                  costPrice: '1000.00',
+                  totalCostPrice: '3000.00'
+                }
+              ]
+            },
+            {
+              shopName: '采美信息技术有限公司',
+              shopOrderNos: 'P1682650952091471001',
+              shopOrderIds: '19747',
+              orderNos: 'P16265095220221471',
+              orderIds: '18179',
+              clubNames: '广州白云区松洲蒂亚美容院',
+              applyMans: '路海珠',
+              applyTimes: '2020-01-01:20:30:56',
+              verifyMans: '李昕',
+              verifyTimes: '2020-01-01:20:30:56',
+              statuss: 0,
+              totalProducts: '3000.00',
+              payShopTotals: '3000.00',
+              products: [
+                {
+                  productName: '阶雪山之恋保滋润面霜吖',
+                  unit: '50ml',
+                  num: 3,
+                  returnNum: 0,
+                  price: '2000.00',
+                  totalPrice: '6000.00',
+                  costPrice: '1000.00',
+                  totalCostPrice: '3000.00'
+                },
+                {
+                  productName: '阶雪山之恋保滋润面霜吖',
+                  unit: '50ml',
+                  num: 3,
+                  returnNum: 0,
+                  price: '2000.00',
+                  totalPrice: '6000.00',
+                  costPrice: '1000.00',
+                  totalCostPrice: '3000.00'
+                }
+              ]
+            }
+          ]
+        },
+        {
+          id: 7580,
+          name: '微博',
+          type: '子订单付款',
+          shopName: '采美信息技术有限公司',
+          payableAmount: '2000.00',
+          shopOrderNo: 'P1682650952091471001',
+          shopOrderId: '19747',
+          orderNo: 'P16265095220221471',
+          orderId: '18179',
+          clubName: '广州白云区松洲蒂亚美容院',
+          applyMan: '路海珠',
+          applyTime: '2020-01-01:20:30:56',
+          verifyMan: '李昕',
+          verifyTime: '2020-01-01:20:30:56',
+          status: 0,
+          totalProduct: '3000.00',
+          payShopTotal: '3000.00',
+          shopOrderIdList: [
+            {
+              shopName: '采美信息技术有限公司',
+              shopOrderNos: 'P1682650952091471001',
+              shopOrderIds: '19747',
+              orderNos: 'P16265095220221471',
+              orderIds: '18179',
+              clubNames: '广州白云区松洲蒂亚美容院',
+              applyMans: '路海珠',
+              applyTimes: '2020-01-01:20:30:56',
+              verifyMans: '李昕',
+              verifyTimes: '2020-01-01:20:30:56',
+              statuss: 0,
+              totalProducts: '3000.00',
+              payShopTotals: '3000.00',
+              products: [
+                {
+                  productName: '阶雪山之恋保滋润面霜吖',
+                  unit: '50ml',
+                  num: 3,
+                  returnNum: 0,
+                  price: '2000.00',
+                  totalPrice: '6000.00',
+                  costPrice: '1000.00',
+                  totalCostPrice: '3000.00'
+                },
+                {
+                  productName: '阶雪山之恋保滋润面霜吖',
+                  unit: '50ml',
+                  num: 3,
+                  returnNum: 0,
+                  price: '2000.00',
+                  totalPrice: '6000.00',
+                  costPrice: '1000.00',
+                  totalCostPrice: '3000.00'
+                }
+              ]
+            },
+            {
+              shopName: '采美信息技术有限公司',
+              shopOrderNos: 'P1682650952091471001',
+              shopOrderIds: '19747',
+              orderNos: 'P16265095220221471',
+              orderIds: '18179',
+              clubNames: '广州白云区松洲蒂亚美容院',
+              applyMans: '路海珠',
+              applyTimes: '2020-01-01:20:30:56',
+              verifyMans: '李昕',
+              verifyTimes: '2020-01-01:20:30:56',
+              statuss: 0,
+              totalProducts: '3000.00',
+              payShopTotals: '3000.00',
+              products: [
+                {
+                  productName: '阶雪山之恋保滋润面霜吖',
+                  unit: '50ml',
+                  num: 3,
+                  returnNum: 0,
+                  price: '2000.00',
+                  totalPrice: '6000.00',
+                  costPrice: '1000.00',
+                  totalCostPrice: '3000.00'
+                },
+                {
+                  productName: '阶雪山之恋保滋润面霜吖',
+                  unit: '50ml',
+                  num: 3,
+                  returnNum: 0,
+                  price: '2000.00',
+                  totalPrice: '6000.00',
+                  costPrice: '1000.00',
+                  totalCostPrice: '3000.00'
+                }
+              ]
+            }
+          ]
+        },
+        {
+          id: 7580,
+          name: '微博',
+          type: '子订单付款',
+          shopName: '采美信息技术有限公司',
+          payableAmount: '2000.00',
+          shopOrderNo: 'P1682650952091471001',
+          shopOrderId: '19747',
+          orderNo: 'P16265095220221471',
+          orderId: '18179',
+          clubName: '广州白云区松洲蒂亚美容院',
+          applyMan: '路海珠',
+          applyTime: '2020-01-01:20:30:56',
+          verifyMan: '李昕',
+          verifyTime: '2020-01-01:20:30:56',
+          status: 0,
+          totalProduct: '3000.00',
+          payShopTotal: '3000.00',
+          shopOrderIdList: [
+            {
+              shopName: '采美信息技术有限公司',
+              shopOrderNos: 'P1682650952091471001',
+              shopOrderIds: '19747',
+              orderNos: 'P16265095220221471',
+              orderIds: '18179',
+              clubNames: '广州白云区松洲蒂亚美容院',
+              applyMans: '路海珠',
+              applyTimes: '2020-01-01:20:30:56',
+              verifyMans: '李昕',
+              verifyTimes: '2020-01-01:20:30:56',
+              statuss: 0,
+              totalProducts: '3000.00',
+              payShopTotals: '3000.00',
+              products: [
+                {
+                  productName: '阶雪山之恋保滋润面霜吖',
+                  unit: '50ml',
+                  num: 3,
+                  returnNum: 0,
+                  price: '2000.00',
+                  totalPrice: '6000.00',
+                  costPrice: '1000.00',
+                  totalCostPrice: '3000.00'
+                },
+                {
+                  productName: '阶雪山之恋保滋润面霜吖',
+                  unit: '50ml',
+                  num: 3,
+                  returnNum: 0,
+                  price: '2000.00',
+                  totalPrice: '6000.00',
+                  costPrice: '1000.00',
+                  totalCostPrice: '3000.00'
+                }
+              ]
+            },
+            {
+              shopName: '采美信息技术有限公司',
+              shopOrderNos: 'P1682650952091471001',
+              shopOrderIds: '19747',
+              orderNos: 'P16265095220221471',
+              orderIds: '18179',
+              clubNames: '广州白云区松洲蒂亚美容院',
+              applyMans: '路海珠',
+              applyTimes: '2020-01-01:20:30:56',
+              verifyMans: '李昕',
+              verifyTimes: '2020-01-01:20:30:56',
+              statuss: 0,
+              totalProducts: '3000.00',
+              payShopTotals: '3000.00',
+              products: [
+                {
+                  productName: '阶雪山之恋保滋润面霜吖',
+                  unit: '50ml',
+                  num: 3,
+                  returnNum: 0,
+                  price: '2000.00',
+                  totalPrice: '6000.00',
+                  costPrice: '1000.00',
+                  totalCostPrice: '3000.00'
+                },
+                {
+                  productName: '阶雪山之恋保滋润面霜吖',
+                  unit: '50ml',
+                  num: 3,
+                  returnNum: 0,
+                  price: '2000.00',
+                  totalPrice: '6000.00',
+                  costPrice: '1000.00',
+                  totalCostPrice: '3000.00'
+                }
+              ]
+            }
+          ]
+        }
+      ],
+      pickerOptions,
+      listLoading: false,
+      searchTimeVal: '',
+      total: 0,
+      listQuery: {
+        page: 1,
+        limit: 10,
+        importance: undefined,
+        title: undefined,
+        type: undefined,
+        sort: '+id'
+      },
+      search: {
+
+      },
+      form: {
+        classifyName: '',
+        telephone: '',
+        contacts: '',
+        businessNum: '',
+        address: '',
+        radio: 1,
+        status: '请选择',
+        imageUrl: '',
+        doorwayImageUrl: ''
+      },
+      addPeople: {
+        classifyName: '',
+        telephone: ''
+      },
+      updateTatusId: '',
+      updateTatusType: '',
+      dialogVisible: false,
+      dialogVisibleText: '',
+      dialogFormVisible: false,
+      dialogStatus: '',
+      textMap: {
+        update: '添加运营人员',
+        create: 'Create',
+        titleText: '系统提示'
+      },
+      rules: {
+        classifyName: [{ required: true, message: '姓名不能为空', trigger: 'blur' }],
+        telephone: [{ required: true, message: '手机号码不能为空', trigger: 'blur' }]
+      }
+    }
+  },
+  created() {
+    // this.getList()
+  },
+  methods: {
+    getList() {
+      this.listLoading = true
+      getClubList().then(response => {
+        this.list = response.data.items
+        this.listLoading = false
+      }).catch(() => {
+        // 封装静态数据
+        this.list = [
+
+        ]
+      })
+      this.listLoading = false
+    },
+    handleToRecord(type, id) {
+      switch (type) {
+        case 1:
+          this.$router.push({ path: '/finance/paysettle-record', query: { id: id }})
+          break
+        case 2:
+          this.$router.push({ path: '/finance/refund-record', query: { id: id }})
+          break
+        case 3:
+          this.$router.push({ path: '/finance/shop-record', query: { id: id }})
+          break
+      }
+    }
+  }
+}
+
+</script>
+<style scoped>
+/deep/ .el-table__expanded-cell[class*=cell]{
+  padding:10px 10px !important;
+}
+/deep/ .el-table__row td {
+  height: 34px !important;
+  line-height: 34px !important;
+  padding: 0 !important;
+}
+.el-span-warning{
+  color: #E6A23C;
+}
+.el-span-success{
+  color: #67C23A;
+}
+.el-span-danger{
+  color: #F56C6C;
+}
+</style>

src/views/finance/payfinance-refund-record.vue

@@ -0,0 +1,444 @@
+<template>
+  <div class="app-container">
+    <div id="printBox">
+      <el-card ref="print" class="box-card" style="margin: 5px auto;">
+        <div class="refund-item">
+          <h1 class="refund-item-title">审核信息</h1>
+          <el-row :gutter="24" class="box-row">
+            <el-col :span="5"><b>审核人：</b> 卢海珠</el-col>
+            <el-col :span="4"><b>审核时间：</b> 2023-03-06 15:28:50</el-col>
+            <el-col :span="15"><b>审核备注：</b> 没有货了</el-col>
+          </el-row>
+        </div>
+      </el-card>
+      <el-card ref="print" class="box-card" style="margin: 5px auto;">
+        <div class="refund-item">
+          <h1 class="refund-item-title">申请信息</h1>
+          <el-row :gutter="24" class="box-row">
+            <el-col :span="5"><b>申请人：</b> 卢海珠</el-col>
+            <el-col :span="4"><b>申请时间：</b> 2023-03-06 15:28:50</el-col>
+            <el-col :span="15"><b>退款备注：</b> 有部分没有货，客户需要重新下单</el-col>
+          </el-row>
+        </div>
+      </el-card>
+      <el-card ref="print" class="box-card" style="margin: 5px auto;">
+        <div class="refund-item">
+          <el-row :gutter="24" class="box-row">
+            <el-col :span="5"><b>退款编号：</b> T1678087730239854</el-col>
+            <el-col :span="4"><b>申请时间：</b> 2023-03-06 15:28:50</el-col>
+            <el-col :span="4"><b>申请金额：</b> 30000.00元</el-col>
+            <el-col :span="11"><b>退款方式：</b> 线上退回：597.00元</el-col>
+          </el-row>
+        </div>
+      </el-card>
+      <el-card ref="print" class="box-card" style="margin: 5px auto;">
+        <div class="refund-item">
+          <el-row :gutter="24" class="box-row">
+            <el-col :span="5"><b>订单编号(ID)：</b> {{ repacts.orderNo }}({{ repacts.orderId }})</el-col>
+            <el-col :span="4"><b>下单时间：</b> {{ repacts.applyTime }}</el-col>
+            <el-col :span="4"><b>机构名称：</b> {{ repacts.clubName }}</el-col>
+            <el-col :span="4"><b>订单状态：</b> 交易中</el-col>
+          </el-row>
+          <el-row :gutter="24" class="box-row">
+            <el-col :span="5"><b>订单金额：</b> {{ repacts.payableAmount }}</el-col>
+            <el-col :span="4"><b>应收金额：</b> {{ repacts.payableAmount }}</el-col>
+            <el-col :span="4"><b>机构运费：</b> 包邮</el-col>
+          </el-row>
+          <el-row :gutter="24" class="box-row">
+            <el-col :span="5"><b>收款状态：</b> {{ repacts.status | statusFilter }}</el-col>
+            <el-col :span="4"><b>发货状态：</b> {{ repacts.status | statusFilter }}</el-col>
+            <el-col :span="4"><b>付款状态：</b> {{ repacts.status | statusFilter }}</el-col>
+            <el-col :span="4"><b>退款状态：</b> {{ repacts.status | statusFilter }}</el-col>
+          </el-row>
+          <el-row :gutter="24" class="box-row">
+            <el-col :span="5"><b>收货人：</b> 黄志国</el-col>
+            <el-col :span="4"><b>手机：</b> 15817887257</el-col>
+            <el-col :span="15"><b>地址：</b> 广东省深圳市龙华区大浪街道上早新村</el-col>
+          </el-row>
+          <el-table :data="repacts.shopOrderIdList" border fit highlight-current-row default-expand-all :header-cell-style="{background:'#e9f3f7',color:'#606266'}">
+            <el-table-column label="商品信息" type="expand" width="80px">
+              <template slot-scope="scope">
+                <el-table :data="scope.row.products" border fit highlight-current-row :header-cell-style="{background:'#f9f9f9',color:'#606266'}">
+                  <el-table-column label="商品图片" align="center" prop="image" width="100">
+                    <template slot-scope="{row}">
+                      <el-popover
+                        placement="top-start"
+                        title=""
+                        width="120"
+                        trigger="hover"
+                      >
+                        <img :src="row.image" alt="" style="width:100px;height:100px;">
+                        <img slot="reference" :src="row.image" alt="" style="width:50px;height:50px;">
+                      </el-popover>
+                    </template>
+                  </el-table-column>
+                  <el-table-column label="商品名" align="center" prop="productName" />
+                  <el-table-column label="规格" align="center" prop="unit" />
+                  <el-table-column label="购买数量" align="center" prop="num" />
+                  <el-table-column label="退货" align="center" prop="returnNum" />
+                  <el-table-column label="单价" align="center" prop="price" />
+                  <el-table-column label="总额" align="center" prop="totalPrice" />
+                  <el-table-column label="已发货" align="center" prop="num" />
+                  <el-table-column label="已退货" align="center" prop="num" />
+                  <el-table-column label="本次退货" align="center" prop="num" />
+                  <el-table-column label="待发货" align="center" prop="num" />
+                  <el-table-column label="已取消" align="center" prop="num" />
+                  <el-table-column label="本次取消" align="center" prop="num" />
+                </el-table>
+              </template>
+            </el-table-column>
+            <el-table-column label="子订单编号(ID)" align="center" prop="shopOrderNos" width="240">
+              <template slot-scope="scope">
+                <span>{{ scope.row.shopOrderNos }}({{ scope.row.shopOrderIds }})</span>
+              </template>
+            </el-table-column>
+            <el-table-column label="子订单金额" align="center" prop="payShopTotals" />
+            <el-table-column label="收款状态" prop="status" align="center" width="100">
+              <template slot-scope="{ row }">
+                <span
+                  :class="{
+                    'el-span-warning': row.status == 0,
+                    'el-span-success': row.status == 1,
+                    'el-span-danger': row.status == 2
+                  }"
+                >
+                  {{ row.status | statusFilter }}
+                </span>
+              </template>
+            </el-table-column>
+            <el-table-column label="发货状态" prop="status" align="center" width="100">
+              <template slot-scope="{ row }">
+                <span
+                  :class="{
+                    'el-span-warning': row.status == 0,
+                    'el-span-success': row.status == 1,
+                    'el-span-danger': row.status == 2
+                  }"
+                >
+                  待发货
+                </span>
+              </template>
+            </el-table-column>
+            <el-table-column label="付款状态" prop="status" align="center" width="100">
+              <template slot-scope="{ row }">
+                <span
+                  :class="{
+                    'el-span-warning': row.status == 0,
+                    'el-span-success': row.status == 1,
+                    'el-span-danger': row.status == 2
+                  }"
+                >
+                  待付款
+                </span>
+              </template>
+            </el-table-column>
+            <el-table-column label="供应商" align="center" prop="shopName" />
+            <el-table-column label="商品总额" align="center" prop="payShopTotals" />
+            <el-table-column label="应付金额" align="center" prop="payShopTotals" />
+            <el-table-column label="已付金额" align="center" prop="payShopTotals" />
+            <el-table-column label="待付金额" align="center" prop="payShopTotals" />
+          </el-table>
+        </div>
+      </el-card>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getDetail, getRemarks } from '@/api/order'
+export default {
+  name: 'RefundRecord',
+  filters: {
+    statusFilter(status) {
+      const map = {
+        0: '待付款',
+        1: '已付款',
+        2: '审核不通过'
+      }
+      return map[status]
+    }
+  },
+  data() {
+    return {
+      payRepacts: {
+        name: '卢海珠',
+        account: '6214 8328 2826 4957 ',
+        accountBank: '中国建设银行',
+        accountType: '公账'
+      },
+      repacts: {
+        id: 7580,
+        name: '卢海珠',
+        account: '6214 8328 2826 4957 ',
+        accountBank: '中国建设银行',
+        accountType: '公账',
+        type: '子订单付款',
+        shopName: '采美信息技术有限公司',
+        payableAmount: '20000.00',
+        shopOrderNo: 'P1682650952091471001',
+        shopOrderId: '19747',
+        orderNo: 'P16265095220221471',
+        orderId: '18179',
+        clubName: '广州白云区松洲蒂亚美容院',
+        applyMan: '路海珠',
+        applyTime: '2020-01-01:20:30:56',
+        verifyMan: '李昕',
+        verifyTime: '2020-01-01:20:30:56',
+        status: 0,
+        totalProduct: '3000.00',
+        payShopTotal: '3000.00',
+        childOrderId: ['P16265095220221471', 'P16265095220221471', 'P16265095220221471'],
+        shopOrderIdList: [
+          {
+            shopName: '采美信息技术有限公司',
+            shopOrderNos: 'P1682650952091471001',
+            shopOrderIds: '19747',
+            orderNos: 'P16265095220221471',
+            orderIds: '18179',
+            clubNames: '广州白云区松洲蒂亚美容院',
+            applyMans: '路海珠',
+            applyTimes: '2020-01-01:20:30:56',
+            verifyMans: '李昕',
+            verifyTimes: '2020-01-01:20:30:56',
+            statuss: 0,
+            totalProducts: '3000.00',
+            payShopTotals: '3000.00',
+            products: [
+              {
+                image: 'https://img.caimei365.com/group1/M00/00/1E/rB-lF2JgwmuAfQQrAAE3BA2cBSY028.jpg',
+                productName: '阶雪山之恋保滋润面霜吖',
+                unit: '50ml',
+                num: 3,
+                returnNum: 0,
+                price: '2000.00',
+                totalPrice: '6000.00',
+                costPrice: '1000.00',
+                totalCostPrice: '3000.00'
+              },
+              {
+                image: 'https://img.caimei365.com/group1/M00/00/1E/rB-lF2JgwmuAfQQrAAE3BA2cBSY028.jpg',
+                productName: '阶雪山之恋保滋润面霜吖',
+                unit: '50ml',
+                num: 3,
+                returnNum: 0,
+                price: '2000.00',
+                totalPrice: '6000.00',
+                costPrice: '1000.00',
+                totalCostPrice: '3000.00'
+              }
+            ]
+          },
+          {
+            shopName: '采美信息技术有限公司',
+            shopOrderNos: 'P1682650952091471001',
+            shopOrderIds: '19747',
+            orderNos: 'P16265095220221471',
+            orderIds: '18179',
+            clubNames: '广州白云区松洲蒂亚美容院',
+            applyMans: '路海珠',
+            applyTimes: '2020-01-01:20:30:56',
+            verifyMans: '李昕',
+            verifyTimes: '2020-01-01:20:30:56',
+            statuss: 0,
+            totalProducts: '3000.00',
+            payShopTotals: '3000.00',
+            products: [
+              {
+                image: 'https://img.caimei365.com/group1/M00/00/1E/rB-lF2JgwmuAfQQrAAE3BA2cBSY028.jpg',
+                productName: '阶雪山之恋保滋润面霜吖',
+                unit: '50ml',
+                num: 3,
+                returnNum: 0,
+                price: '2000.00',
+                totalPrice: '6000.00',
+                costPrice: '1000.00',
+                totalCostPrice: '3000.00'
+              },
+              {
+                image: 'https://img.caimei365.com/group1/M00/00/1E/rB-lF2JgwmuAfQQrAAE3BA2cBSY028.jpg',
+                productName: '阶雪山之恋保滋润面霜吖',
+                unit: '50ml',
+                num: 3,
+                returnNum: 0,
+                price: '2000.00',
+                totalPrice: '6000.00',
+                costPrice: '1000.00',
+                totalCostPrice: '3000.00'
+              }
+            ]
+          }
+        ]
+      },
+      products: [
+        {
+          productName: '阶雪山之恋保滋润面霜吖',
+          unit: '50ml',
+          num: 3,
+          returnNum: 0,
+          price: '2000.00',
+          totalPrice: '6000.00',
+          costPrice: '1000.00',
+          totalCostPrice: '3000.00',
+          verifyTimes: '2020-01-01:20:30:56'
+        },
+        {
+          productName: '阶雪山之恋保滋润面霜吖',
+          unit: '50ml',
+          num: 3,
+          returnNum: 0,
+          price: '2000.00',
+          totalPrice: '6000.00',
+          costPrice: '1000.00',
+          totalCostPrice: '3000.00',
+          verifyTimes: '2020-01-01:20:30:56'
+        },
+        {
+          productName: '阶雪山之恋保滋润面霜吖',
+          unit: '50ml',
+          num: 3,
+          returnNum: 0,
+          price: '2000.00',
+          totalPrice: '6000.00',
+          costPrice: '1000.00',
+          totalCostPrice: '3000.00',
+          verifyTimes: '2020-01-01:20:30:56'
+        },
+        {
+          productName: '阶雪山之恋保滋润面霜吖',
+          unit: '50ml',
+          num: 3,
+          returnNum: 0,
+          price: '2000.00',
+          totalPrice: '6000.00',
+          costPrice: '1000.00',
+          totalCostPrice: '3000.00',
+          verifyTimes: '2020-01-01:20:30:56'
+        }
+      ],
+      activeIndex: '2',
+      order: null,
+      receiptAmount: 0,
+      returnValue: 0,
+      returnedPurchaseFee: 0,
+      bpClauses: null,
+      dialogRemarkList: [],
+      dialogRemarksVisible: false,
+      dialogRemarksOrderId: 0,
+      statusObj: {
+        '0': '待确认',
+        '4': '交易完成',
+        '5': '订单完成',
+        '6': '已关闭',
+        '7': '交易全退',
+        '11': '待收款、待发货',
+        '12': '待收款、部分发货',
+        '13': '待收款、全部发货',
+        '21': '部分收款、待发货',
+        '22': '部分收款、部分发货',
+        '23': '部分收款、全部发货',
+        '31': '全部收款、待发货',
+        '32': '全部收款、部分发货',
+        '33': '全部收款、全部发货'
+      }
+    }
+  },
+  computed: {
+    orderID: function() {
+      return this.$route.query.orderID * 1
+    }
+  },
+  created() {
+    // this.fetchData()
+  },
+  methods: {
+    fetchData() {
+      this.listLoading = true
+      getDetail({ id: this.orderID }).then(response => {
+        this.order = response.data.order
+        this.bpClauses = response.data.bpClauses
+        this.receiptAmount = response.data.receiptAmount
+        this.returnValue = response.data.returnValue
+        this.returnedPurchaseFee = response.data.returnedPurchaseFee
+        this.listLoading = false
+      }).catch(() => {
+        this.listLoading = false
+      })
+    },
+    RemarksOrder: function(id) {
+      getRemarks({ orderID: id }).then(response => {
+        this.dialogRemarkList = response.data
+      })
+      this.dialogRemarksOrderId = id
+      this.dialogRemarksVisible = true
+    },
+    backToList() {
+      this.$store.dispatch('tagsView/delView', this.$route).then(() => {
+        this.$nextTick(() => {
+          this.$router.replace({
+            path: '/finance/list'
+          })
+        })
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+  .app-title{
+    line-height: 36px;
+    font-size: 26px;
+    font-weight: bold;
+    color: #409EFF;
+    text-align: center;
+  }
+  .box-card{
+    margin-top: 20px;
+    font-size: 14px;
+  }
+  .box-row{
+    padding: 10px 0;
+  }
+  .box-row .dropdown{
+    margin-top: -10px;
+  }
+  .refund-item{
+    padding: 5px 0;
+  }
+  .refund-item-title{
+    line-height: 24px;
+    font-size: 14px;
+    color: #409EFF;
+    margin: 0;
+  }
+  .order-item{
+    background:#f7f7f7;
+    margin-bottom: 20px;
+    padding: 10px 15px;
+    border-radius: 5px;
+  }
+  .product-row{
+    padding: 10px 0;
+    background: #EBEEF5;
+    border-top: 1px dashed #DCDFE6;
+  }
+  .op-item{
+    padding: 5px 0;
+  }
+  .el-span-warning{
+  color: #E6A23C;
+  }
+  .el-span-success{
+    color: #67C23A;
+  }
+  .el-span-danger{
+    color: #F56C6C;
+  }
+  /deep/ .el-table__expanded-cell[class*=cell]{
+    padding:10px 10px !important;
+  }
+  /deep/ .el-card__body{
+    padding: 5px 20px !important;
+  }
+</style>
+

src/views/finance/payfinance-remit-record.vue

@@ -0,0 +1,351 @@
+<template>
+  <div class="app-container">
+    <div id="printBox">
+      <el-card ref="print" class="box-card" style="margin: 0 auto;">
+        <div class="refund-item">
+          <el-row :gutter="24" class="box-row">
+            <el-col :span="5"><b>订单编号(ID)：</b> {{ repacts.orderNo }}({{ repacts.orderId }})</el-col>
+            <el-col :span="4"><b>下单时间：</b> {{ repacts.applyTime }}</el-col>
+            <el-col :span="4"><b>机构名称：</b> {{ repacts.clubName }}</el-col>
+          </el-row>
+          <el-row :gutter="24" class="box-row">
+            <el-col :span="5"><b>订单状态：</b> 交易中</el-col>
+            <el-col :span="4"><b>收款状态：</b> {{ repacts.status | statusFilter }}</el-col>
+            <el-col :span="4"><b>付款状态：</b> {{ repacts.status | statusFilter }}</el-col>
+          </el-row>
+          <el-row :gutter="24" class="box-row">
+            <el-col :span="5"><b>收货人：</b> 黄志国</el-col>
+            <el-col :span="4"><b>手机：</b> 15817887257</el-col>
+            <el-col :span="15"><b>地址：</b> 广东省深圳市龙华区大浪街道上早新村</el-col>
+          </el-row>
+          <el-row :gutter="24" class="box-row">
+            <el-col :span="5"><b>订单金额：</b> {{ repacts.payableAmount }}</el-col>
+            <el-col :span="4"><b>应收金额：</b> {{ repacts.payableAmount }}</el-col>
+            <el-col :span="4"><b>运费：</b> 包邮</el-col>
+            <el-col :span="4"><b>退款金额：</b> {{ repacts.payableAmount }}</el-col>
+          </el-row>
+          <h1 class="refund-item-title">收款记录</h1>
+          <el-table :data="products" border fit highlight-current-row :header-cell-style="{background:'#e9f3f7',color:'#606266'}">
+            <el-table-column label="序号" align="center" width="50">
+              <template slot-scope="scope">{{ scope.$index + 1 }}</template>
+            </el-table-column>
+            <el-table-column label="收款ID" align="center" prop="unit" />
+            <el-table-column label="收款方式" align="center" prop="returnNum" />
+            <el-table-column label="收款金额" align="center" prop="price" />
+            <el-table-column label="收款时间" align="center" prop="verifyTimes" />
+          </el-table>
+          <h1 class="refund-item-title">付款记录</h1>
+          <el-table :data="products" border fit highlight-current-row :header-cell-style="{background:'#e9f3f7',color:'#606266'}">
+            <el-table-column label="序号" align="center" width="50">
+              <template slot-scope="scope">{{ scope.$index + 1 }}</template>
+            </el-table-column>
+            <el-table-column label="付款单ID" align="center" prop="unit" />
+            <el-table-column label="付款方式" align="center" prop="returnNum" />
+            <el-table-column label="付款金额" align="center" prop="price" />
+            <el-table-column label="付款时间" align="center" prop="verifyTimes" />
+          </el-table>
+        </div>
+      </el-card>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getDetail, getRemarks } from '@/api/order'
+export default {
+  name: 'RemitRecord',
+  filters: {
+    statusFilter(status) {
+      const map = {
+        0: '待付款',
+        1: '已付款',
+        2: '审核不通过'
+      }
+      return map[status]
+    }
+  },
+  data() {
+    return {
+      printObj: {
+        id: 'printBox', // 局部打印的<div> Id
+        popTitle: '', // 打印配置页上方标题
+        extraHead: '', // 最上方的头部文字，附加在head标签上的额外标签,使用逗号分隔
+        preview: '', // 是否启动预览模式，默认是false（开启预览模式，可以先预览后打印）
+        previewTitle: '', // 打印预览的标题（开启预览模式后出现）,
+        previewPrintBtnLabel: '', // 打印预览的标题的下方按钮文本，点击可进入打印（开启预览模式后出现）
+        zIndex: '', // 预览的窗口的z-index，默认是 20002（此值要高一些，这涉及到预览模式是否显示在最上面）
+        previewBeforeOpenCallback() {}, // 预览窗口打开之前的callback（开启预览模式调用）
+        previewOpenCallback() {}, // 预览窗口打开之后的callback（开启预览模式调用）
+        beforeEntryIframe() {
+          const cells = document.querySelectorAll('.cell')
+          const tableNode = document.querySelectorAll('.el-table__header,.el-table__body')
+          // el-table 打印不全的问题
+          for (let j = 0; j < tableNode.length; j++) {
+            const tableItem = tableNode[j]
+            tableItem.style.width = '100%'
+            const child = tableItem.childNodes
+            for (let i = 0; i < child.length; i++) {
+              const element = child[i]
+              if (element.localName === 'colgroup') {
+                element.innerHTML = ''
+              }
+            }
+          }
+          // el-table 格子里面打印超过格子的问题
+          for (let i = 0; i < cells.length; i++) {
+            const cell = cells[i]
+            cell.style.width = '100%'
+            cell.removeAttribute('style')
+          }
+        },
+        openCallback() {
+
+        }, // 调用打印之后的回调事件
+        closeCallback() {}, // 关闭打印的回调事件（无法确定点击的是确认还是取消）
+        url: '',
+        standard: '',
+        extraCss: '',
+        loading: false
+      },
+      payRepacts: {
+        name: '卢海珠',
+        account: '6214 8328 2826 4957 ',
+        accountBank: '中国建设银行',
+        accountType: '公账'
+      },
+      repacts: {
+        id: 7580,
+        name: '卢海珠',
+        account: '6214 8328 2826 4957 ',
+        accountBank: '中国建设银行',
+        accountType: '公账',
+        type: '子订单付款',
+        shopName: '采美信息技术有限公司',
+        payableAmount: '20000.00',
+        shopOrderNo: 'P1682650952091471001',
+        shopOrderId: '19747',
+        orderNo: 'P16265095220221471',
+        orderId: '18179',
+        clubName: '广州白云区松洲蒂亚美容院',
+        applyMan: '路海珠',
+        applyTime: '2020-01-01:20:30:56',
+        verifyMan: '李昕',
+        verifyTime: '2020-01-01:20:30:56',
+        status: 0,
+        totalProduct: '3000.00',
+        payShopTotal: '3000.00',
+        childOrderId: ['P16265095220221471', 'P16265095220221471', 'P16265095220221471'],
+        shopOrderIdList: [
+          {
+            shopName: '采美信息技术有限公司',
+            shopOrderNos: 'P1682650952091471001',
+            shopOrderIds: '19747',
+            orderNos: 'P16265095220221471',
+            orderIds: '18179',
+            clubNames: '广州白云区松洲蒂亚美容院',
+            applyMans: '路海珠',
+            applyTimes: '2020-01-01:20:30:56',
+            verifyMans: '李昕',
+            verifyTimes: '2020-01-01:20:30:56',
+            statuss: 0,
+            totalProducts: '3000.00',
+            payShopTotals: '3000.00',
+            products: [
+              {
+                productName: '阶雪山之恋保滋润面霜吖',
+                unit: '50ml',
+                num: 3,
+                returnNum: 0,
+                price: '2000.00',
+                totalPrice: '6000.00',
+                costPrice: '1000.00',
+                totalCostPrice: '3000.00'
+              },
+              {
+                productName: '阶雪山之恋保滋润面霜吖',
+                unit: '50ml',
+                num: 3,
+                returnNum: 0,
+                price: '2000.00',
+                totalPrice: '6000.00',
+                costPrice: '1000.00',
+                totalCostPrice: '3000.00'
+              }
+            ]
+          }
+        ]
+      },
+      products: [
+        {
+          productName: '阶雪山之恋保滋润面霜吖',
+          unit: '50ml',
+          num: 3,
+          returnNum: 0,
+          price: '2000.00',
+          totalPrice: '6000.00',
+          costPrice: '1000.00',
+          totalCostPrice: '3000.00',
+          verifyTimes: '2020-01-01:20:30:56'
+        },
+        {
+          productName: '阶雪山之恋保滋润面霜吖',
+          unit: '50ml',
+          num: 3,
+          returnNum: 0,
+          price: '2000.00',
+          totalPrice: '6000.00',
+          costPrice: '1000.00',
+          totalCostPrice: '3000.00',
+          verifyTimes: '2020-01-01:20:30:56'
+        },
+        {
+          productName: '阶雪山之恋保滋润面霜吖',
+          unit: '50ml',
+          num: 3,
+          returnNum: 0,
+          price: '2000.00',
+          totalPrice: '6000.00',
+          costPrice: '1000.00',
+          totalCostPrice: '3000.00',
+          verifyTimes: '2020-01-01:20:30:56'
+        },
+        {
+          productName: '阶雪山之恋保滋润面霜吖',
+          unit: '50ml',
+          num: 3,
+          returnNum: 0,
+          price: '2000.00',
+          totalPrice: '6000.00',
+          costPrice: '1000.00',
+          totalCostPrice: '3000.00',
+          verifyTimes: '2020-01-01:20:30:56'
+        }
+      ],
+      activeIndex: '2',
+      order: null,
+      receiptAmount: 0,
+      returnValue: 0,
+      returnedPurchaseFee: 0,
+      bpClauses: null,
+      dialogRemarkList: [],
+      dialogRemarksVisible: false,
+      dialogRemarksOrderId: 0,
+      statusObj: {
+        '0': '待确认',
+        '4': '交易完成',
+        '5': '订单完成',
+        '6': '已关闭',
+        '7': '交易全退',
+        '11': '待收款、待发货',
+        '12': '待收款、部分发货',
+        '13': '待收款、全部发货',
+        '21': '部分收款、待发货',
+        '22': '部分收款、部分发货',
+        '23': '部分收款、全部发货',
+        '31': '全部收款、待发货',
+        '32': '全部收款、部分发货',
+        '33': '全部收款、全部发货'
+      }
+    }
+  },
+  computed: {
+    orderID: function() {
+      return this.$route.query.orderID * 1
+    }
+  },
+  created() {
+    // this.fetchData()
+  },
+  methods: {
+    fetchData() {
+      this.listLoading = true
+      getDetail({ id: this.orderID }).then(response => {
+        this.order = response.data.order
+        this.bpClauses = response.data.bpClauses
+        this.receiptAmount = response.data.receiptAmount
+        this.returnValue = response.data.returnValue
+        this.returnedPurchaseFee = response.data.returnedPurchaseFee
+        this.listLoading = false
+      }).catch(() => {
+        this.listLoading = false
+      })
+    },
+    RemarksOrder: function(id) {
+      getRemarks({ orderID: id }).then(response => {
+        this.dialogRemarkList = response.data
+      })
+      this.dialogRemarksOrderId = id
+      this.dialogRemarksVisible = true
+    },
+    backToList() {
+      this.$store.dispatch('tagsView/delView', this.$route).then(() => {
+        this.$nextTick(() => {
+          this.$router.replace({
+            path: '/finance/list'
+          })
+        })
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+  .app-title{
+    line-height: 36px;
+    font-size: 26px;
+    font-weight: bold;
+    color: #409EFF;
+    text-align: center;
+  }
+  .box-card{
+    margin-top: 20px;
+    font-size: 14px;
+  }
+  .box-row{
+    padding: 10px 0;
+  }
+  .box-row .dropdown{
+    margin-top: -10px;
+  }
+  .refund-item{
+    padding: 10px 0;
+  }
+  .refund-item-title{
+    line-height: 24px;
+    font-size: 14px;
+    color: #409EFF;
+  }
+  .order-item{
+    background:#f7f7f7;
+    margin-bottom: 20px;
+    padding: 10px 15px;
+    border-radius: 5px;
+  }
+  .product-row{
+    padding: 10px 0;
+    background: #EBEEF5;
+    border-top: 1px dashed #DCDFE6;
+  }
+  .op-item{
+    padding: 5px 0;
+  }
+  .el-span-warning{
+  color: #E6A23C;
+  }
+  .el-span-success{
+    color: #67C23A;
+  }
+  .el-span-danger{
+    color: #F56C6C;
+  }
+  /deep/ .el-table__expanded-cell[class*=cell]{
+    padding:10px 10px !important;
+  }
+  /deep/ .el-table__row td {
+    height: 34px !important;
+    line-height: 34px !important;
+    padding: 0 !important;
+  }
+</style>
+

src/views/finance/payfinance-shop-record.vue

@@ -0,0 +1,371 @@
+<template>
+  <div class="app-container">
+    <div id="printBox">
+      <el-card ref="print" class="box-card" style="margin: 0 auto;">
+        <div class="refund-item">
+          <el-row :gutter="24" class="box-row">
+            <el-col :span="5"><b>订单编号(ID)：</b> {{ repacts.orderNo }}({{ repacts.orderId }})</el-col>
+            <el-col :span="4"><b>下单时间：</b> {{ repacts.applyTime }}</el-col>
+            <el-col :span="4"><b>机构名称：</b> {{ repacts.clubName }}</el-col>
+            <el-col :span="4"><b>订单金额：</b> {{ repacts.payableAmount }}</el-col>
+            <el-col :span="4"><b>机构运费：</b> 包邮</el-col>
+            <el-col :span="3"><b>订单状态：</b> 交易中</el-col>
+          </el-row>
+          <el-row :gutter="24" class="box-row">
+            <el-col :span="5"><b>应收金额：</b> {{ repacts.payableAmount }}</el-col>
+            <el-col :span="4"><b>已收金额：</b> {{ repacts.payableAmount }}</el-col>
+            <el-col :span="4"><b>应付金额：</b> {{ repacts.payableAmount }}</el-col>
+            <el-col :span="4"><b>已付金额：</b> {{ repacts.payableAmount }}</el-col>
+          </el-row>
+          <el-row :gutter="24" class="box-row">
+            <el-col :span="5"><b>收款状态：</b> {{ repacts.status | statusFilter }}</el-col>
+            <el-col :span="4"><b>付款状态：</b> {{ repacts.status | statusFilter }}</el-col>
+            <el-col :span="4"><b>退款状态：</b> {{ repacts.status | statusFilter }}</el-col>
+            <el-col :span="4"><b>退款金额：</b> {{ repacts.payableAmount }}</el-col>
+          </el-row>
+          <el-table :data="repacts.shopOrderIdList" border fit highlight-current-row default-expand-all :header-cell-style="{background:'#e9f3f7',color:'#606266'}">
+            <el-table-column label="商品信息" type="expand" width="80px">
+              <template slot-scope="scope">
+                <el-table :data="scope.row.products" border fit highlight-current-row :header-cell-style="{background:'#f9f9f9',color:'#606266'}">
+                  <el-table-column label="商品名" align="center" prop="productName" />
+                  <el-table-column label="规格" align="center" prop="unit" />
+                  <el-table-column label="数量" align="center" prop="num" />
+                  <el-table-column label="退货" align="center" prop="returnNum" />
+                  <el-table-column label="单价" align="center" prop="price" />
+                  <el-table-column label="总价" align="center" prop="totalPrice" />
+                </el-table>
+              </template>
+            </el-table-column>
+            <el-table-column label="子订单编号(ID)" align="center" prop="shopOrderNos" width="240">
+              <template slot-scope="scope">
+                <span>{{ scope.row.shopOrderNos }}({{ scope.row.shopOrderIds }})</span>
+              </template>
+            </el-table-column>
+            <el-table-column label="供应商" align="center" prop="shopName" />
+            <el-table-column label="商品费" align="center" prop="payShopTotals" />
+            <el-table-column label="已付供应商/合作方" align="center" prop="payShopTotals" />
+            <el-table-column label="供应商退款" align="center" prop="payShopTotals" />
+            <el-table-column label="应付供应商/合作方" align="center" prop="payShopTotals" />
+            <el-table-column label="供应商运费" align="center" prop="payShopTotals" />
+          </el-table>
+        </div>
+        <div class="refund-item">
+          <h1 class="refund-item-title">付款记录</h1>
+          <el-table :data="products" border fit highlight-current-row :header-cell-style="{background:'#e9f3f7',color:'#606266'}">
+            <el-table-column label="序号" align="center" prop="productName" />
+            <el-table-column label="付款单ID" align="center" prop="unit" />
+            <el-table-column label="付款时间" align="center" prop="num" />
+            <el-table-column label="付款方式" align="center" prop="returnNum" />
+            <el-table-column label="付款金额" align="center" prop="price" />
+          </el-table>
+        </div>
+        <div class="refund-item">
+          <h1 class="refund-item-title">退款记录</h1>
+          <el-table :data="products" border fit highlight-current-row :header-cell-style="{background:'#e9f3f7',color:'#606266'}">
+            <el-table-column label="序号" align="center" prop="productName" />
+            <el-table-column label="付款单ID" align="center" prop="unit" />
+            <el-table-column label="付款时间" align="center" prop="num" />
+            <el-table-column label="付款方式" align="center" prop="returnNum" />
+            <el-table-column label="付款金额" align="center" prop="price" />
+          </el-table>
+        </div>
+      </el-card>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getDetail, getRemarks } from '@/api/order'
+export default {
+  name: 'ShopRecord',
+  filters: {
+    statusFilter(status) {
+      const map = {
+        0: '待付款',
+        1: '已付款',
+        2: '审核不通过'
+      }
+      return map[status]
+    }
+  },
+  data() {
+    return {
+      printObj: {
+        id: 'printBox', // 局部打印的<div> Id
+        popTitle: '', // 打印配置页上方标题
+        extraHead: '', // 最上方的头部文字，附加在head标签上的额外标签,使用逗号分隔
+        preview: '', // 是否启动预览模式，默认是false（开启预览模式，可以先预览后打印）
+        previewTitle: '', // 打印预览的标题（开启预览模式后出现）,
+        previewPrintBtnLabel: '', // 打印预览的标题的下方按钮文本，点击可进入打印（开启预览模式后出现）
+        zIndex: '', // 预览的窗口的z-index，默认是 20002（此值要高一些，这涉及到预览模式是否显示在最上面）
+        previewBeforeOpenCallback() {}, // 预览窗口打开之前的callback（开启预览模式调用）
+        previewOpenCallback() {}, // 预览窗口打开之后的callback（开启预览模式调用）
+        beforeEntryIframe() {
+          const cells = document.querySelectorAll('.cell')
+          const tableNode = document.querySelectorAll('.el-table__header,.el-table__body')
+          // el-table 打印不全的问题
+          for (let j = 0; j < tableNode.length; j++) {
+            const tableItem = tableNode[j]
+            tableItem.style.width = '100%'
+            const child = tableItem.childNodes
+            for (let i = 0; i < child.length; i++) {
+              const element = child[i]
+              if (element.localName === 'colgroup') {
+                element.innerHTML = ''
+              }
+            }
+          }
+          // el-table 格子里面打印超过格子的问题
+          for (let i = 0; i < cells.length; i++) {
+            const cell = cells[i]
+            cell.style.width = '100%'
+            cell.removeAttribute('style')
+          }
+        },
+        openCallback() {
+
+        }, // 调用打印之后的回调事件
+        closeCallback() {}, // 关闭打印的回调事件（无法确定点击的是确认还是取消）
+        url: '',
+        standard: '',
+        extraCss: '',
+        loading: false
+      },
+      payRepacts: {
+        name: '卢海珠',
+        account: '6214 8328 2826 4957 ',
+        accountBank: '中国建设银行',
+        accountType: '公账'
+      },
+      repacts: {
+        id: 7580,
+        name: '卢海珠',
+        account: '6214 8328 2826 4957 ',
+        accountBank: '中国建设银行',
+        accountType: '公账',
+        type: '子订单付款',
+        shopName: '采美信息技术有限公司',
+        payableAmount: '20000.00',
+        shopOrderNo: 'P1682650952091471001',
+        shopOrderId: '19747',
+        orderNo: 'P16265095220221471',
+        orderId: '18179',
+        clubName: '广州白云区松洲蒂亚美容院',
+        applyMan: '路海珠',
+        applyTime: '2020-01-01:20:30:56',
+        verifyMan: '李昕',
+        verifyTime: '2020-01-01:20:30:56',
+        status: 0,
+        totalProduct: '3000.00',
+        payShopTotal: '3000.00',
+        childOrderId: ['P16265095220221471', 'P16265095220221471', 'P16265095220221471'],
+        shopOrderIdList: [
+          {
+            shopName: '采美信息技术有限公司',
+            shopOrderNos: 'P1682650952091471001',
+            shopOrderIds: '19747',
+            orderNos: 'P16265095220221471',
+            orderIds: '18179',
+            clubNames: '广州白云区松洲蒂亚美容院',
+            applyMans: '路海珠',
+            applyTimes: '2020-01-01:20:30:56',
+            verifyMans: '李昕',
+            verifyTimes: '2020-01-01:20:30:56',
+            statuss: 0,
+            totalProducts: '3000.00',
+            payShopTotals: '3000.00',
+            products: [
+              {
+                productName: '阶雪山之恋保滋润面霜吖',
+                unit: '50ml',
+                num: 3,
+                returnNum: 0,
+                price: '2000.00',
+                totalPrice: '6000.00',
+                costPrice: '1000.00',
+                totalCostPrice: '3000.00'
+              },
+              {
+                productName: '阶雪山之恋保滋润面霜吖',
+                unit: '50ml',
+                num: 3,
+                returnNum: 0,
+                price: '2000.00',
+                totalPrice: '6000.00',
+                costPrice: '1000.00',
+                totalCostPrice: '3000.00'
+              }
+            ]
+          }
+        ]
+      },
+      products: [
+        {
+          productName: '阶雪山之恋保滋润面霜吖',
+          unit: '50ml',
+          num: 3,
+          returnNum: 0,
+          price: '2000.00',
+          totalPrice: '6000.00',
+          costPrice: '1000.00',
+          totalCostPrice: '3000.00'
+        },
+        {
+          productName: '阶雪山之恋保滋润面霜吖',
+          unit: '50ml',
+          num: 3,
+          returnNum: 0,
+          price: '2000.00',
+          totalPrice: '6000.00',
+          costPrice: '1000.00',
+          totalCostPrice: '3000.00'
+        },
+        {
+          productName: '阶雪山之恋保滋润面霜吖',
+          unit: '50ml',
+          num: 3,
+          returnNum: 0,
+          price: '2000.00',
+          totalPrice: '6000.00',
+          costPrice: '1000.00',
+          totalCostPrice: '3000.00'
+        },
+        {
+          productName: '阶雪山之恋保滋润面霜吖',
+          unit: '50ml',
+          num: 3,
+          returnNum: 0,
+          price: '2000.00',
+          totalPrice: '6000.00',
+          costPrice: '1000.00',
+          totalCostPrice: '3000.00'
+        }
+      ],
+      activeIndex: '2',
+      order: null,
+      receiptAmount: 0,
+      returnValue: 0,
+      returnedPurchaseFee: 0,
+      bpClauses: null,
+      dialogRemarkList: [],
+      dialogRemarksVisible: false,
+      dialogRemarksOrderId: 0,
+      statusObj: {
+        '0': '待确认',
+        '4': '交易完成',
+        '5': '订单完成',
+        '6': '已关闭',
+        '7': '交易全退',
+        '11': '待收款、待发货',
+        '12': '待收款、部分发货',
+        '13': '待收款、全部发货',
+        '21': '部分收款、待发货',
+        '22': '部分收款、部分发货',
+        '23': '部分收款、全部发货',
+        '31': '全部收款、待发货',
+        '32': '全部收款、部分发货',
+        '33': '全部收款、全部发货'
+      }
+    }
+  },
+  computed: {
+    orderID: function() {
+      return this.$route.query.orderID * 1
+    }
+  },
+  created() {
+    // this.fetchData()
+  },
+  methods: {
+    fetchData() {
+      this.listLoading = true
+      getDetail({ id: this.orderID }).then(response => {
+        this.order = response.data.order
+        this.bpClauses = response.data.bpClauses
+        this.receiptAmount = response.data.receiptAmount
+        this.returnValue = response.data.returnValue
+        this.returnedPurchaseFee = response.data.returnedPurchaseFee
+        this.listLoading = false
+      }).catch(() => {
+        this.listLoading = false
+      })
+    },
+    RemarksOrder: function(id) {
+      getRemarks({ orderID: id }).then(response => {
+        this.dialogRemarkList = response.data
+      })
+      this.dialogRemarksOrderId = id
+      this.dialogRemarksVisible = true
+    },
+    backToList() {
+      this.$store.dispatch('tagsView/delView', this.$route).then(() => {
+        this.$nextTick(() => {
+          this.$router.replace({
+            path: '/finance/list'
+          })
+        })
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+  .app-title{
+    line-height: 36px;
+    font-size: 26px;
+    font-weight: bold;
+    color: #409EFF;
+    text-align: center;
+  }
+  .box-card{
+    margin-top: 20px;
+    font-size: 14px;
+  }
+  .box-row{
+    padding: 10px 0;
+  }
+  .box-row .dropdown{
+    margin-top: -10px;
+  }
+  .refund-item{
+    padding: 10px 0;
+  }
+  .refund-item-title{
+    line-height: 24px;
+    font-size: 14px;
+    color: #409EFF;
+  }
+  .order-item{
+    background:#f7f7f7;
+    margin-bottom: 20px;
+    padding: 10px 15px;
+    border-radius: 5px;
+  }
+  .product-row{
+    padding: 10px 0;
+    background: #EBEEF5;
+    border-top: 1px dashed #DCDFE6;
+  }
+  .op-item{
+    padding: 5px 0;
+  }
+  .el-span-warning{
+  color: #E6A23C;
+  }
+  .el-span-success{
+    color: #67C23A;
+  }
+  .el-span-danger{
+    color: #F56C6C;
+  }
+  /deep/ .el-table__expanded-cell[class*=cell]{
+    padding:10px 10px !important;
+  }
+  /deep/ .el-table__row td {
+    height: 34px !important;
+    line-height: 34px !important;
+    padding: 0 !important;
+  }
+</style>
+

src/views/finance/payment-details.vue

@@ -0,0 +1,373 @@
+<template>
+  <div class="app-container">
+    <div class="filter-container" style="text-align: right;">
+      <el-button type="primary">审核通过</el-button>
+      <el-button type="danger">审核不通过</el-button>
+      <el-button v-print="printObj" type="primary">打印</el-button>
+    </div>
+    <div id="printBox">
+      <el-card ref="print" class="box-card" style="margin: 0 auto;">
+        <h1 class="app-title">付款单</h1>
+        <div class="refund-item">
+          <el-row :gutter="24" class="box-row">
+            <el-col :span="24"><b>付款单名称：</b> 采美信息技术有限公司 </el-col>
+          </el-row>
+          <el-row :gutter="24" class="box-row">
+            <el-col :span="24"><b>供应商名称：</b> 浙江瑞崎科技有限公司</el-col>
+          </el-row>
+          <h1 style="font-size: 14px;">付款账号：</h1>
+          <el-row :gutter="24" class="box-row">
+            <el-col :span="4"><b>户名：</b>
+              <el-input
+                v-model="payRepacts.name"
+                :disabled="true"
+                clearable
+                style="width: 150px;"
+              />
+            </el-col>
+            <el-col :span="6"><b>账号：</b>
+              <el-input
+                v-model="payRepacts.account"
+                clearable
+                :disabled="true"
+                style="width: 200px;"
+              />
+            </el-col>
+            <el-col :span="6"><b>开户行：</b>
+              <el-input
+                v-model="payRepacts.accountBank"
+                :disabled="true"
+                style="width: 150px;"
+              />
+            </el-col>
+            <el-col :span="6"><b>账户类型：</b>
+              <el-input
+                v-model="payRepacts.accountType"
+                :disabled="true"
+                style="width: 150px;"
+              />
+            </el-col>
+          </el-row>
+        </div>
+        <div v-for="(repact,index) in repacts" :key="index" class="refund-item">
+          <el-row :gutter="24" class="box-row">
+            <el-col :span="6"><b>订单编号(ID)：</b> {{ repact.orderNo }}({{ repact.orderId }})</el-col>
+            <el-col :span="4"><b>下单时间：</b> {{ repact.applyTime }}</el-col>
+            <el-col :span="4"><b>订单金额：</b> {{ repact.payableAmount }}</el-col>
+            <el-col :span="10">
+              <b>所有子订单：</b>
+              <span v-for="child in repact.childOrderId" :key="child">
+                【{{ child }}】
+              </span>
+            </el-col>
+          </el-row>
+          <el-row :gutter="24" class="box-row">
+            <el-col :span="6"><b>机构名称：</b> {{ repact.clubName }}</el-col>
+            <el-col :span="4"><b>机构运费：</b> 包邮</el-col>
+            <el-col :span="4"><b>收款状态：</b> {{ repact.status | statusFilter }}</el-col>
+            <el-col :span="10"><b>收款金额：</b> {{ repact.payableAmount }}</el-col>
+          </el-row>
+          <el-row :gutter="24" class="box-row">
+            <el-col :span="6"><b>子订单编号(ID)</b> {{ repact.orderNo }}({{ repact.orderId }})</el-col>
+            <el-col :span="4"><b>子订单佣金：</b> 5000.00</el-col>
+            <el-col :span="4"><b>商品费：</b> {{ repact.payableAmount }}</el-col>
+            <el-col :span="10"><b>付款状态：</b> {{ repact.status | statusFilter }}</el-col>
+          </el-row>
+          <el-row :gutter="24" class="box-row">
+            <el-col :span="6"><b>供应商名称：</b> {{ repact.shopName }}</el-col>
+            <el-col :span="4"><b>供应商运费：</b> 15.00</el-col>
+          </el-row>
+          <el-row :gutter="24" class="box-row">
+            <el-col :span="24">
+              <b>付供应商：</b>
+              <b style="margin-left: 10px;">应付采美:</b>10000.00
+              <b style="margin-left: 10px;">已付采美:</b>10000.00
+              <b style="margin-left: 10px;">待付采美:</b>0.00
+              <b style="margin-left: 10px;">应付供应商:</b>10000.00
+              <b style="margin-left: 10px;">已付供应商:</b>10000.00
+              <b style="margin-left: 10px;">待付供应商:</b>0.00
+            </el-col>
+          </el-row>
+          <el-row :gutter="24" class="box-row">
+            <el-table :data="repact.products" border fit highlight-current-row :header-cell-style="{background:'#eef1f6',color:'#606266'}">
+              <el-table-column label="商品名" align="center" prop="productName" />
+              <el-table-column label="规格" align="center" prop="unit" />
+              <el-table-column label="数量" align="center" prop="num" />
+              <el-table-column label="退货" align="center" prop="returnNum" />
+              <el-table-column label="单价" align="center" prop="price" />
+              <el-table-column label="总价" align="center" prop="totalPrice" />
+            </el-table>
+          </el-row>
+        </div>
+        <div class="refund-item">
+          <el-row :gutter="24" class="box-row">
+            <el-col :span="5"><b>付供应商总金额：</b> 480.00 </el-col>
+            <el-col :span="6"><b>付采美总金额：</b> 480.00 </el-col>
+          </el-row>
+          <el-row :gutter="24" class="box-row">
+            <el-col :span="5"><b>转账支付：</b> 480.00 </el-col>
+            <el-col :span="6"><b>付款银行：</b> 中信银行0897  </el-col>
+            <el-col :span="6"><b>付款时间：</b> 2023-05-05 11:23:05 </el-col>
+          </el-row>
+          <el-row :gutter="24" class="box-row">
+            <el-col :span="5"><b>申请人：</b> 卢海珠  </el-col>
+            <el-col :span="8"><b>申请时间：</b> 2023-05-05 10:55:33   </el-col>
+          </el-row>
+          <el-row :gutter="24" class="box-row">
+            <el-col :span="5"><b>审核人：</b> 李昕  </el-col>
+            <el-col :span="8"><b>审核时间：</b> 2023-05-05 11:23:05 </el-col>
+          </el-row>
+          <el-row :gutter="24" class="box-row">
+            <el-col :span="24"><b>审核状态：</b> 审核通过 </el-col>
+          </el-row>
+        </div>
+      </el-card>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getDetail, getRemarks } from '@/api/order'
+export default {
+  name: 'PaymentDetails',
+  filters: {
+    statusFilter(status) {
+      const map = {
+        0: '待付款',
+        1: '已付款',
+        2: '审核不通过'
+      }
+      return map[status]
+    }
+  },
+  data() {
+    return {
+      printObj: {
+        id: 'printBox', // 局部打印的<div> Id
+        popTitle: '', // 打印配置页上方标题
+        extraHead: '', // 最上方的头部文字，附加在head标签上的额外标签,使用逗号分隔
+        preview: '', // 是否启动预览模式，默认是false（开启预览模式，可以先预览后打印）
+        previewTitle: '', // 打印预览的标题（开启预览模式后出现）,
+        previewPrintBtnLabel: '', // 打印预览的标题的下方按钮文本，点击可进入打印（开启预览模式后出现）
+        zIndex: '', // 预览的窗口的z-index，默认是 20002（此值要高一些，这涉及到预览模式是否显示在最上面）
+        previewBeforeOpenCallback() {}, // 预览窗口打开之前的callback（开启预览模式调用）
+        previewOpenCallback() {}, // 预览窗口打开之后的callback（开启预览模式调用）
+        beforeEntryIframe() {
+          const cells = document.querySelectorAll('.cell')
+          const tableNode = document.querySelectorAll('.el-table__header,.el-table__body')
+          // el-table 打印不全的问题
+          for (let j = 0; j < tableNode.length; j++) {
+            const tableItem = tableNode[j]
+            tableItem.style.width = '100%'
+            const child = tableItem.childNodes
+            for (let i = 0; i < child.length; i++) {
+              const element = child[i]
+              if (element.localName === 'colgroup') {
+                element.innerHTML = ''
+              }
+            }
+          }
+          // el-table 格子里面打印超过格子的问题
+          for (let i = 0; i < cells.length; i++) {
+            const cell = cells[i]
+            cell.style.width = '100%'
+            cell.removeAttribute('style')
+          }
+        },
+        openCallback() {
+
+        }, // 调用打印之后的回调事件
+        closeCallback() {}, // 关闭打印的回调事件（无法确定点击的是确认还是取消）
+        url: '',
+        standard: '',
+        extraCss: '',
+        loading: false
+      },
+      payRepacts: {
+        name: '卢海珠',
+        account: '6214 8328 2826 4957 ',
+        accountBank: '中国建设银行',
+        accountType: '公账'
+      },
+      repacts: [
+        {
+          id: 7580,
+          name: '卢海珠',
+          account: '6214 8328 2826 4957 ',
+          accountBank: '中国建设银行',
+          accountType: '公账',
+          type: '子订单付款',
+          shopName: '采美信息技术有限公司',
+          payableAmount: '20000.00',
+          shopOrderNo: 'P1682650952091471001',
+          shopOrderId: '19747',
+          orderNo: 'P16265095220221471',
+          orderId: '18179',
+          clubName: '广州白云区松洲蒂亚美容院',
+          applyMan: '路海珠',
+          applyTime: '2020-01-01:20:30:56',
+          verifyMan: '李昕',
+          verifyTime: '2020-01-01:20:30:56',
+          status: 0,
+          totalProduct: '3000.00',
+          payShopTotal: '3000.00',
+          childOrderId: ['P16265095220221471', 'P16265095220221471', 'P16265095220221471'],
+          products: [
+            {
+              productName: '阶雪山之恋保滋润面霜吖',
+              unit: '50ml',
+              num: 3,
+              returnNum: 0,
+              price: '2000.00',
+              totalPrice: '6000.00',
+              costPrice: '1000.00',
+              totalCostPrice: '3000.00'
+            },
+            {
+              productName: '阶雪山之恋保滋润面霜吖',
+              unit: '50ml',
+              num: 3,
+              returnNum: 0,
+              price: '2000.00',
+              totalPrice: '6000.00',
+              costPrice: '1000.00',
+              totalCostPrice: '3000.00'
+            },
+            {
+              productName: '阶雪山之恋保滋润面霜吖',
+              unit: '50ml',
+              num: 3,
+              returnNum: 0,
+              price: '2000.00',
+              totalPrice: '6000.00',
+              costPrice: '1000.00',
+              totalCostPrice: '3000.00'
+            },
+            {
+              productName: '阶雪山之恋保滋润面霜吖',
+              unit: '50ml',
+              num: 3,
+              returnNum: 0,
+              price: '2000.00',
+              totalPrice: '6000.00',
+              costPrice: '1000.00',
+              totalCostPrice: '3000.00'
+            }
+          ]
+        }
+      ],
+      activeIndex: '2',
+      order: null,
+      receiptAmount: 0,
+      returnValue: 0,
+      returnedPurchaseFee: 0,
+      bpClauses: null,
+      dialogRemarkList: [],
+      dialogRemarksVisible: false,
+      dialogRemarksOrderId: 0,
+      statusObj: {
+        '0': '待确认',
+        '4': '交易完成',
+        '5': '订单完成',
+        '6': '已关闭',
+        '7': '交易全退',
+        '11': '待收款、待发货',
+        '12': '待收款、部分发货',
+        '13': '待收款、全部发货',
+        '21': '部分收款、待发货',
+        '22': '部分收款、部分发货',
+        '23': '部分收款、全部发货',
+        '31': '全部收款、待发货',
+        '32': '全部收款、部分发货',
+        '33': '全部收款、全部发货'
+      }
+    }
+  },
+  computed: {
+    orderID: function() {
+      return this.$route.query.orderID * 1
+    }
+  },
+  created() {
+    // this.fetchData()
+  },
+  methods: {
+    fetchData() {
+      this.listLoading = true
+      getDetail({ id: this.orderID }).then(response => {
+        this.order = response.data.order
+        this.bpClauses = response.data.bpClauses
+        this.receiptAmount = response.data.receiptAmount
+        this.returnValue = response.data.returnValue
+        this.returnedPurchaseFee = response.data.returnedPurchaseFee
+        this.listLoading = false
+      }).catch(() => {
+        this.listLoading = false
+      })
+    },
+    RemarksOrder: function(id) {
+      getRemarks({ orderID: id }).then(response => {
+        this.dialogRemarkList = response.data
+      })
+      this.dialogRemarksOrderId = id
+      this.dialogRemarksVisible = true
+    },
+    backToList() {
+      this.$store.dispatch('tagsView/delView', this.$route).then(() => {
+        this.$nextTick(() => {
+          this.$router.replace({
+            path: '/finance/list'
+          })
+        })
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+  .app-title{
+    line-height: 36px;
+    font-size: 26px;
+    font-weight: bold;
+    color: #409EFF;
+    text-align: center;
+  }
+  .box-card{
+    margin-top: 20px;
+    font-size: 14px;
+  }
+  .box-row{
+    padding: 10px 0;
+  }
+  .box-row .dropdown{
+    margin-top: -10px;
+  }
+  .refund-item{
+    padding: 10px 0;
+  }
+  .order-item{
+    background:#f7f7f7;
+    margin-bottom: 20px;
+    padding: 10px 15px;
+    border-radius: 5px;
+  }
+  .product-row{
+    padding: 10px 0;
+    background: #EBEEF5;
+    border-top: 1px dashed #DCDFE6;
+  }
+  .op-item{
+    padding: 5px 0;
+  }
+  .el-span-warning{
+  color: #E6A23C;
+}
+.el-span-success{
+  color: #67C23A;
+}
+.el-span-danger{
+  color: #F56C6C;
+}
+</style>
+

src/views/finance/payment-edit.vue

@@ -0,0 +1,381 @@
+<template>
+  <div class="app-container">
+    <el-card class="box-card" style="margin: 0 auto;">
+      <h1 class="app-title">付款单</h1>
+      <div class="refund-item">
+        <el-row :gutter="24" class="box-row">
+          <el-col :span="24"><b>付款单名称：</b>
+            <el-input
+              v-model="payRepacts.name"
+              placeholder="请输入付款单名称"
+              clearable
+              style="width: 250px;"
+            /> </el-col>
+        </el-row>
+        <el-row :gutter="24" class="box-row">
+          <el-col :span="24"><b>供应商名称：</b> 浙江瑞崎科技有限公司</el-col>
+        </el-row>
+        <h1 style="font-size: 14px;">付款账号：</h1>
+        <el-row :gutter="24" class="box-row">
+          <el-col :span="4"><b>户名：</b>
+            <el-input
+              v-model="payRepacts.name"
+              placeholder="请输入银行户名："
+              clearable
+              style="width: 150px;"
+            />
+          </el-col>
+          <el-col :span="6"><b>账号：</b>
+            <el-input
+              v-model="payRepacts.account"
+              clearable
+              placeholder="请输入银行账户："
+              style="width: 250px;"
+            />
+          </el-col>
+          <el-col :span="6"><b>开户行：</b>
+            <el-input
+              v-model="payRepacts.accountBank"
+              placeholder="请输入开户行："
+              style="width: 200px;"
+            />
+          </el-col>
+          <el-col :span="6"><b>账户类型：</b>
+            <el-select v-model="payRepacts.enabledStatus" placeholder="请选择">
+              <el-option label="公账" :value="1" />
+              <el-option label="私账" :value="2" />
+            </el-select>
+          </el-col>
+        </el-row>
+      </div>
+      <div v-for="(repact,index) in repacts" :key="index" class="refund-item">
+        <el-row :gutter="24" class="box-row">
+          <el-col :span="6"><b>订单编号(ID)：</b> {{ repact.orderNo }}({{ repact.orderId }})</el-col>
+          <el-col :span="4"><b>下单时间：</b> {{ repact.applyTime }}</el-col>
+          <el-col :span="4"><b>订单金额：</b> {{ repact.payableAmount }}</el-col>
+          <el-col :span="10">
+            <b>所有子订单：</b>
+            <span v-for="child in repact.childOrderId" :key="child">
+              【{{ child }}】
+            </span>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24" class="box-row">
+          <el-col :span="6"><b>机构名称：</b> {{ repact.clubName }}</el-col>
+          <el-col :span="4"><b>机构运费：</b> 包邮</el-col>
+          <el-col :span="4"><b>收款状态：</b> {{ repact.status | statusFilter }}</el-col>
+          <el-col :span="10"><b>收款金额：</b> {{ repact.payableAmount }}</el-col>
+        </el-row>
+        <el-row :gutter="24" class="box-row">
+          <el-col :span="6"><b>子订单编号(ID)</b> {{ repact.orderNo }}({{ repact.orderId }})</el-col>
+          <el-col :span="4">
+            <b>子订单佣金：</b>5000.00(17%)
+          </el-col>
+          <el-col :span="4"><b>商品费：</b> {{ repact.payableAmount }}</el-col>
+          <el-col :span="10"><b>付款状态：</b> {{ repact.status | statusFilter }}</el-col>
+        </el-row>
+        <el-row :gutter="24" class="box-row">
+          <el-col :span="6"><b>供应商名称：</b> {{ repact.shopName }}</el-col>
+          <el-col :span="4">
+            <b>供应商运费：</b>
+            <el-input v-model="payRepacts.name" placeholder="" size="mini" clearable style="width: 80px;" />
+          </el-col>
+        </el-row>
+        <el-row :gutter="24" class="box-row">
+          <el-col :span="24"><b>付供应商：</b>
+            <b style="margin-left: 10px;">应付采美:</b>10000.00
+            <b style="margin-left: 10px;">已付采美:</b>10000.00
+            <b style="margin-left: 10px;">待付采美:</b>
+            <el-input v-model="payRepacts.name" placeholder="" size="mini" clearable style="width: 150px;" />
+            <b style="margin-left: 10px;">应付供应商:</b>10000.00
+            <b style="margin-left: 10px;">已付供应商:</b>10000.00
+            <b style="margin-left: 10px;">待付供应商:</b>
+            <el-input v-model="payRepacts.name" placeholder="" size="mini" clearable style="width: 150px;" />
+          </el-col>
+        </el-row>
+        <el-row :gutter="24" class="box-row">
+          <el-table :data="repact.products" border fit highlight-current-row :header-cell-style="{background:'#eef1f6',color:'#606266'}">
+            <el-table-column label="商品名" align="center" prop="productName" />
+            <el-table-column label="规格" align="center" prop="unit" />
+            <el-table-column label="数量" align="center" prop="num" />
+            <el-table-column label="退货" align="center" prop="returnNum" />
+            <el-table-column label="单价" align="center" prop="price" />
+            <el-table-column label="总价" align="center" prop="totalPrice" />
+          </el-table>
+        </el-row>
+      </div>
+      <div class="refund-item">
+        <el-row :gutter="24" class="box-row">
+          <el-col :span="5"><b>付供应商总金额：</b> 480.00 </el-col>
+          <el-col :span="6"><b>付采美总金额：</b> 480.00 </el-col>
+        </el-row>
+        <el-row :gutter="24" class="box-row">
+          <el-col :span="5"><b>转账支付：</b> 480.00 </el-col>
+          <el-col :span="6"><b>付款银行：</b> 中信银行0897  </el-col>
+          <el-col :span="6"><b>付款时间：</b> 2023-05-05 11:23:05 </el-col>
+        </el-row>
+        <el-row :gutter="24" class="box-row">
+          <el-col :span="5"><b>申请人：</b> 卢海珠  </el-col>
+          <el-col :span="8"><b>申请时间：</b> 2023-05-05 10:55:33   </el-col>
+        </el-row>
+        <el-row :gutter="24" class="box-row">
+          <el-col :span="5"><b>审核人：</b> 李昕  </el-col>
+          <el-col :span="8"><b>审核时间：</b> 2023-05-05 11:23:05 </el-col>
+        </el-row>
+        <el-row :gutter="24" class="box-row">
+          <el-col :span="24"><b>审核状态：</b> 审核通过 </el-col>
+        </el-row>
+      </div>
+    </el-card>
+    <div class="filter-container" style="text-align: center;margin-top: 20px;">
+      <el-button type="primary">提交付款单</el-button>
+      <el-button plain @click="backToList">返回</el-button>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getDetail, getRemarks } from '@/api/order'
+export default {
+  name: 'PaymentDetails',
+  filters: {
+    statusFilter(status) {
+      const map = {
+        0: '待付款',
+        1: '已付款',
+        2: '审核不通过'
+      }
+      return map[status]
+    }
+  },
+  data() {
+    return {
+      printObj: {
+        id: 'printBox', // 局部打印的<div> Id
+        popTitle: '', // 打印配置页上方标题
+        extraHead: '', // 最上方的头部文字，附加在head标签上的额外标签,使用逗号分隔
+        preview: '', // 是否启动预览模式，默认是false（开启预览模式，可以先预览后打印）
+        previewTitle: '', // 打印预览的标题（开启预览模式后出现）,
+        previewPrintBtnLabel: '', // 打印预览的标题的下方按钮文本，点击可进入打印（开启预览模式后出现）
+        zIndex: '', // 预览的窗口的z-index，默认是 20002（此值要高一些，这涉及到预览模式是否显示在最上面）
+        previewBeforeOpenCallback() {}, // 预览窗口打开之前的callback（开启预览模式调用）
+        previewOpenCallback() {}, // 预览窗口打开之后的callback（开启预览模式调用）
+        beforeEntryIframe() {
+          const cells = document.querySelectorAll('.cell')
+          const tableNode = document.querySelectorAll('.el-table__header,.el-table__body')
+          // el-table 打印不全的问题
+          for (let j = 0; j < tableNode.length; j++) {
+            const tableItem = tableNode[j]
+            tableItem.style.width = '100%'
+            const child = tableItem.childNodes
+            for (let i = 0; i < child.length; i++) {
+              const element = child[i]
+              if (element.localName === 'colgroup') {
+                element.innerHTML = ''
+              }
+            }
+          }
+          // el-table 格子里面打印超过格子的问题
+          for (let i = 0; i < cells.length; i++) {
+            const cell = cells[i]
+            cell.style.width = '100%'
+            cell.removeAttribute('style')
+          }
+        },
+        openCallback() {
+
+        }, // 调用打印之后的回调事件
+        closeCallback() {}, // 关闭打印的回调事件（无法确定点击的是确认还是取消）
+        url: '',
+        standard: '',
+        extraCss: '',
+        loading: false
+      },
+      payRepacts: {
+        name: '卢海珠',
+        account: '6214 8328 2826 4957 ',
+        accountBank: '中国建设银行',
+        accountType: '公账'
+      },
+      repacts: [
+        {
+          id: 7580,
+          name: '卢海珠',
+          account: '6214 8328 2826 4957 ',
+          accountBank: '中国建设银行',
+          accountType: '公账',
+          type: '子订单付款',
+          shopName: '采美信息技术有限公司',
+          payableAmount: '20000.00',
+          shopOrderNo: 'P1682650952091471001',
+          shopOrderId: '19747',
+          orderNo: 'P16265095220221471',
+          orderId: '18179',
+          clubName: '广州白云区松洲蒂亚美容院',
+          applyMan: '路海珠',
+          applyTime: '2020-01-01:20:30:56',
+          verifyMan: '李昕',
+          verifyTime: '2020-01-01:20:30:56',
+          status: 0,
+          totalProduct: '3000.00',
+          payShopTotal: '3000.00',
+          childOrderId: ['P16265095220221471', 'P16265095220221471', 'P16265095220221471'],
+          products: [
+            {
+              productName: '阶雪山之恋保滋润面霜吖',
+              unit: '50ml',
+              num: 3,
+              returnNum: 0,
+              price: '2000.00',
+              totalPrice: '6000.00',
+              costPrice: '1000.00',
+              totalCostPrice: '3000.00'
+            },
+            {
+              productName: '阶雪山之恋保滋润面霜吖',
+              unit: '50ml',
+              num: 3,
+              returnNum: 0,
+              price: '2000.00',
+              totalPrice: '6000.00',
+              costPrice: '1000.00',
+              totalCostPrice: '3000.00'
+            },
+            {
+              productName: '阶雪山之恋保滋润面霜吖',
+              unit: '50ml',
+              num: 3,
+              returnNum: 0,
+              price: '2000.00',
+              totalPrice: '6000.00',
+              costPrice: '1000.00',
+              totalCostPrice: '3000.00'
+            },
+            {
+              productName: '阶雪山之恋保滋润面霜吖',
+              unit: '50ml',
+              num: 3,
+              returnNum: 0,
+              price: '2000.00',
+              totalPrice: '6000.00',
+              costPrice: '1000.00',
+              totalCostPrice: '3000.00'
+            }
+          ]
+        }
+      ],
+      activeIndex: '2',
+      order: null,
+      receiptAmount: 0,
+      returnValue: 0,
+      returnedPurchaseFee: 0,
+      bpClauses: null,
+      dialogRemarkList: [],
+      dialogRemarksVisible: false,
+      dialogRemarksOrderId: 0,
+      statusObj: {
+        '0': '待确认',
+        '4': '交易完成',
+        '5': '订单完成',
+        '6': '已关闭',
+        '7': '交易全退',
+        '11': '待收款、待发货',
+        '12': '待收款、部分发货',
+        '13': '待收款、全部发货',
+        '21': '部分收款、待发货',
+        '22': '部分收款、部分发货',
+        '23': '部分收款、全部发货',
+        '31': '全部收款、待发货',
+        '32': '全部收款、部分发货',
+        '33': '全部收款、全部发货'
+      }
+    }
+  },
+  computed: {
+    orderID: function() {
+      return this.$route.query.orderID * 1
+    }
+  },
+  created() {
+    // this.fetchData()
+  },
+  methods: {
+    fetchData() {
+      this.listLoading = true
+      getDetail({ id: this.orderID }).then(response => {
+        this.order = response.data.order
+        this.bpClauses = response.data.bpClauses
+        this.receiptAmount = response.data.receiptAmount
+        this.returnValue = response.data.returnValue
+        this.returnedPurchaseFee = response.data.returnedPurchaseFee
+        this.listLoading = false
+      }).catch(() => {
+        this.listLoading = false
+      })
+    },
+    RemarksOrder: function(id) {
+      getRemarks({ orderID: id }).then(response => {
+        this.dialogRemarkList = response.data
+      })
+      this.dialogRemarksOrderId = id
+      this.dialogRemarksVisible = true
+    },
+    backToList() {
+      this.$store.dispatch('tagsView/delView', this.$route).then(() => {
+        this.$nextTick(() => {
+          this.$router.replace({
+            path: '/finance/payapply-list'
+          })
+        })
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+  .app-title{
+    line-height: 36px;
+    font-size: 26px;
+    font-weight: bold;
+    color: #409EFF;
+    text-align: center;
+  }
+  .box-card{
+    margin-top: 20px;
+    font-size: 14px;
+  }
+  .box-row{
+    padding: 10px 0;
+  }
+  .box-row .dropdown{
+    margin-top: -10px;
+  }
+  .refund-item{
+    padding: 10px 0;
+  }
+  .order-item{
+    background:#f7f7f7;
+    margin-bottom: 20px;
+    padding: 10px 15px;
+    border-radius: 5px;
+  }
+  .product-row{
+    padding: 10px 0;
+    background: #EBEEF5;
+    border-top: 1px dashed #DCDFE6;
+  }
+  .op-item{
+    padding: 5px 0;
+  }
+  .el-span-warning{
+  color: #E6A23C;
+}
+.el-span-success{
+  color: #67C23A;
+}
+.el-span-danger{
+  color: #F56C6C;
+}
+</style>
+

src/views/finance/payment-list.vue

@@ -0,0 +1,317 @@
+<template>
+  <div class="app-container">
+    <div class="filter-container">
+      <div class="filter-control">
+        <span>子订单ID:</span>
+        <el-input v-model="listQuery.orderID" style="width:130px;" placeholder="子订单ID" clearable @keyup.enter.native="getList" @clear="getList" />
+      </div>
+      <div class="filter-control">
+        <span>子订单编号:</span>
+        <el-input v-model="listQuery.orderID" style="width:200px;" placeholder="子订单编号" clearable @keyup.enter.native="getList" @clear="getList" />
+      </div>
+      <div class="filter-control">
+        <span>订单ID:</span>
+        <el-input v-model="listQuery.orderID" style="width:130px;" placeholder="订单ID" clearable @keyup.enter.native="getList" @clear="getList" />
+      </div>
+      <div class="filter-control">
+        <span>订单编号:</span>
+        <el-input v-model="listQuery.orderNumber" style="width:200px;" placeholder="订单编号" clearable @keyup.enter.native="getList" @clear="getList" />
+      </div>
+      <div class="filter-control">
+        <span>付款单ID:</span>
+        <el-input v-model="listQuery.orderNumber" style="width:120px;" placeholder="付款单ID" clearable @keyup.enter.native="getList" @clear="getList" />
+      </div>
+      <div class="filter-control">
+        <span>供应商:</span>
+        <el-input v-model="listQuery.customer" style="width:200px;" placeholder="供应商" clearable @keyup.enter.native="getList" @clear="getList" />
+      </div>
+      <div class="filter-control">
+        <span>付款单名称:</span>
+        <el-input v-model="listQuery.customer" style="width:200px;" placeholder="付款单名称" clearable @keyup.enter.native="getList" @clear="getList" />
+      </div>
+      <div class="filter-control">
+        <span>付款审核状态:</span>
+        <el-select v-model="listQuery.sendOutStatus" style="width:120px;" clearable @change="getList">
+          <el-option value="" label="所有" />
+          <el-option label="待审核" value="0" />
+          <el-option label="审核通过" value="1" />
+          <el-option label="审核不通过" value="2" />
+        </el-select>
+      </div>
+      <div class="filter-control">
+        <span>申请时间:</span>
+        <el-date-picker
+          v-model="time"
+          type="daterange"
+          unlink-panels
+          range-separator="至"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+          :picker-options="pickerOptions"
+          @change="getList"
+        />
+      </div>
+      <div class="filter-control">
+        <span>付款时间:</span>
+        <el-date-picker
+          v-model="time"
+          type="daterange"
+          unlink-panels
+          range-separator="至"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+          :picker-options="pickerOptions"
+          @change="getList"
+        />
+      </div>
+      <div class="filter-control">
+        <el-button type="primary" icon="el-icon-search" @click="getList">查询</el-button>
+        <el-button type="primary" icon="el-icon-search" @click="getList">导出筛查结果</el-button>
+      </div>
+    </div>
+    <el-table
+      v-loading="listLoading"
+      :data="list"
+      element-loading-text="Loading"
+      border
+      fit
+      highlight-current-row
+      :header-cell-style="{background:'#eef1f6',color:'#606266'}"
+    >
+      <el-table-column label="付款单ID" align="center" prop="id" width="80" />
+      <el-table-column label="付款单名称" align="center" prop="name" width="100" />
+      <el-table-column label="付款类型" align="center" prop="type" width="100" />
+      <el-table-column label="供应商" align="center" prop="shopName" />
+      <el-table-column label="付款金额" align="center" prop="payableAmount" width="120" />
+      <el-table-column label="子订单编号(ID)" align="center" prop="shopOrderNo">
+        <template slot-scope="{row}">
+          <span>{{ row.shopOrderNo }}({{ row.shopOrderId }})</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="订单编号(ID)" align="center" prop="orderNo">
+        <template slot-scope="{row}">
+          <span>{{ row.orderNo }}({{ row.orderId }})</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="机构" align="center" prop="clubName" />
+      <el-table-column label="申请人" align="center" prop="applyMan" width="80" />
+      <el-table-column label="申请日期" align="center" prop="applyTime" width="100" />
+      <el-table-column label="审核人" align="center" prop="verifyMan" width="80" />
+      <el-table-column label="审核时间" align="center" prop="verifyTime" width="100" />
+      <el-table-column prop="status" label="付款审核状态" align="center" width="100">
+        <template slot-scope="{ row }">
+          <span
+            :class="{
+              'el-span-warning': row.status == 0,
+              'el-span-success': row.status == 1,
+              'el-span-danger': row.status == 2
+            }"
+          >
+            {{ row.status | statusFilter }}
+            <span v-if="row.status === 2" class="el-span-danger">原因：{{ row.statusText }}</span>
+          </span>
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" align="center">
+        <template slot-scope="{row}">
+          <el-button type="text" size="mini" @click="handleOperate(1,row.id)">查看详情</el-button>
+          <template v-if="row.status === 0">
+            <el-button type="text" size="mini" @click="handleToEdit(2,row.id)">申请付款</el-button>
+            <el-button type="text" size="mini" @click="handleOperate(3,row.id)">取消付款</el-button>
+            <el-button type="text" size="mini" @click="handleOperate(4,row.id)">付款审核</el-button>
+          </template>
+          <template v-if="row.status === 1">
+            <el-button type="text" size="mini" @click="handleOperate(5,row.id)">编辑</el-button>
+            <el-button type="text" size="mini" @click="handleOperate(6,row.id)">撤销付款</el-button>
+            <el-button type="text" size="mini" @click="handleOperate(1,row.id)">打印</el-button>
+          </template>
+          <template v-if="row.status === 2">
+            <el-button type="text" size="mini" @click="handleOperate(2,row.id)">申请付款</el-button>
+            <el-button type="text" size="mini" @click="handleOperate(3,row.id)">取消付款</el-button>
+          </template>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <pagination v-show="total>20" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="fetchData" />
+  </div>
+</template>
+
+<script>
+import { getClubList } from '@/api/club'
+import Pagination from '@/components/Pagination'
+import pickerOptions from '@/utils/time-picker.js'
+
+export default {
+  components: { Pagination },
+  filters: {
+    statusFilter(status) {
+      const map = {
+        0: '待审核',
+        1: '审核通过',
+        2: '审核不通过'
+      }
+      return map[status]
+    }
+  },
+  data() {
+    return {
+      time: '',
+      list: null,
+      pickerOptions,
+      listLoading: true,
+      searchTimeVal: '',
+      total: 0,
+      listQuery: {
+        page: 1,
+        limit: 10,
+        importance: undefined,
+        title: undefined,
+        type: undefined,
+        sort: '+id'
+      },
+      search: {
+
+      },
+      form: {
+        classifyName: '',
+        telephone: '',
+        contacts: '',
+        businessNum: '',
+        address: '',
+        radio: 1,
+        status: '请选择',
+        imageUrl: '',
+        doorwayImageUrl: ''
+      },
+      addPeople: {
+        classifyName: '',
+        telephone: ''
+      },
+      updateTatusId: '',
+      updateTatusType: '',
+      dialogVisible: false,
+      dialogVisibleText: '',
+      dialogFormVisible: false,
+      dialogStatus: '',
+      textMap: {
+        update: '添加运营人员',
+        create: 'Create',
+        titleText: '系统提示'
+      },
+      rules: {
+        classifyName: [{ required: true, message: '姓名不能为空', trigger: 'blur' }],
+        telephone: [{ required: true, message: '手机号码不能为空', trigger: 'blur' }]
+      }
+    }
+  },
+  created() {
+    this.getList()
+  },
+  methods: {
+    getList() {
+      this.listLoading = true
+      getClubList().then(response => {
+        this.list = response.data.items
+        this.listLoading = false
+      }).catch(() => {
+        // 封装静态数据
+        this.list = [
+          {
+            id: 7580,
+            name: '微博',
+            type: '子订单付款',
+            shopName: '采美信息技术有限公司',
+            payableAmount: '2000000.00',
+            shopOrderNo: 'P1682650952091471001',
+            shopOrderId: '19747',
+            orderNo: 'P16265095220221471',
+            orderId: '18179',
+            clubName: '广州白云区松洲蒂亚美容院',
+            applyMan: '路海珠',
+            applyTime: '2020-01-01:20:30:56',
+            verifyMan: '李昕',
+            verifyTime: '2020-01-01:20:30:56',
+            status: 0
+          },
+          {
+            id: 7580,
+            name: '微博',
+            type: '子订单付款',
+            shopName: '采美信息技术有限公司',
+            payableAmount: '2000000.00',
+            shopOrderNo: 'P1682650952091471001',
+            shopOrderId: '19747',
+            orderNo: 'P16265095220221471',
+            orderId: '18179',
+            clubName: '广州白云区松洲蒂亚美容院',
+            applyMan: '路海珠',
+            applyTime: '2020-01-01:20:30:56',
+            verifyMan: '李昕',
+            verifyTime: '2020-01-01:20:30:56',
+            status: 1
+          },
+          {
+            id: 7580,
+            name: '微博',
+            type: '子订单付款',
+            shopName: '采美信息技术有限公司',
+            payableAmount: '2000000.00',
+            shopOrderNo: 'P1682650952091471001',
+            shopOrderId: '19747',
+            orderNo: 'P16265095220221471',
+            orderId: '18179',
+            clubName: '广州白云区松洲蒂亚美容院',
+            applyMan: '路海珠',
+            applyTime: '2020-01-01:20:30:56',
+            verifyMan: '李昕',
+            verifyTime: '2020-01-01:20:30:56',
+            status: 2,
+            statusText: '测试十四萨拉斯打蜡卡就'
+          },
+          {
+            id: 7580,
+            name: '微博',
+            type: '子订单付款',
+            shopName: '采美信息技术有限公司',
+            payableAmount: '2000000.00',
+            shopOrderNo: 'P1682650952091471001',
+            shopOrderId: '19747',
+            orderNo: 'P16265095220221471',
+            orderId: '18179',
+            clubName: '广州白云区松洲蒂亚美容院',
+            applyMan: '路海珠',
+            applyTime: '2020-01-01:20:30:56',
+            verifyMan: '李昕',
+            verifyTime: '2020-01-01:20:30:56',
+            status: 1
+          }
+        ]
+      })
+      this.listLoading = false
+    },
+    handleOperate(type, id) {
+      /**
+       * 1 查看详情 2申请付款 3取消付款 4付款审核 5编辑 6撤销付款
+       */
+      switch (type) {
+        case 1:
+          this.$router.push({ path: '/finance/payment-details', query: { id: id }})
+          break
+      }
+    }
+  }
+}
+
+</script>
+<style scoped>
+.el-span-warning{
+  color: #E6A23C;
+}
+.el-span-success{
+  color: #67C23A;
+}
+.el-span-danger{
+  color: #F56C6C;
+}
+</style>

src/views/finance/payment-record.vue

@@ -0,0 +1,371 @@
+<template>
+  <div class="app-container">
+    <div id="printBox">
+      <el-card ref="print" class="box-card" style="margin: 0 auto;">
+        <div v-for="(repact,index) in repacts" :key="index" class="refund-item">
+          <el-row :gutter="24" class="box-row">
+            <el-col :span="6"><b>订单编号(ID)：</b> {{ repact.orderNo }}({{ repact.orderId }})</el-col>
+            <el-col :span="4"><b>下单时间：</b> {{ repact.applyTime }}</el-col>
+            <el-col :span="4"><b>订单金额：</b> {{ repact.payableAmount }}</el-col>
+            <el-col :span="10">
+              <b>所有子订单：</b>
+              <span v-for="child in repact.childOrderId" :key="child">
+                【{{ child }}】
+              </span>
+            </el-col>
+          </el-row>
+          <el-row :gutter="24" class="box-row">
+            <el-col :span="6"><b>机构名称：</b> {{ repact.clubName }}</el-col>
+            <el-col :span="4"><b>机构运费：</b> 包邮</el-col>
+            <el-col :span="4"><b>收款状态：</b> {{ repact.status | statusFilter }}</el-col>
+            <el-col :span="10"><b>收款金额：</b> {{ repact.payableAmount }}</el-col>
+          </el-row>
+          <el-row :gutter="24" class="box-row">
+            <el-col :span="6"><b>子订单编号(ID)</b> {{ repact.orderNo }}({{ repact.orderId }})</el-col>
+            <el-col :span="4"><b>子订单佣金：</b> 5000.00</el-col>
+            <el-col :span="4"><b>商品费：</b> {{ repact.payableAmount }}</el-col>
+            <el-col :span="10"><b>付款状态：</b> {{ repact.status | statusFilter }}</el-col>
+          </el-row>
+          <el-row :gutter="24" class="box-row">
+            <el-col :span="6"><b>供应商名称：</b> {{ repact.shopName }}</el-col>
+            <el-col :span="4"><b>供应商运费：</b> 15.00</el-col>
+          </el-row>
+          <el-row :gutter="24" class="box-row">
+            <el-col :span="24">
+              <b>付供应商：</b>
+              <b style="margin-left: 10px;">应付采美:</b>10000.00
+              <b style="margin-left: 10px;">已付采美:</b>10000.00
+              <b style="margin-left: 10px;">待付采美:</b>0.00
+              <b style="margin-left: 10px;">应付供应商:</b>10000.00
+              <b style="margin-left: 10px;">已付供应商:</b>10000.00
+              <b style="margin-left: 10px;">待付供应商:</b>0.00
+            </el-col>
+          </el-row>
+          <el-row :gutter="24" class="box-row">
+            <el-table :data="repact.products" border fit highlight-current-row :header-cell-style="{background:'#eef1f6',color:'#606266'}">
+              <el-table-column label="商品名" align="center" prop="productName" />
+              <el-table-column label="规格" align="center" prop="unit" />
+              <el-table-column label="数量" align="center" prop="num" />
+              <el-table-column label="退货" align="center" prop="returnNum" />
+              <el-table-column label="单价" align="center" prop="price" />
+              <el-table-column label="总价" align="center" prop="totalPrice" />
+            </el-table>
+          </el-row>
+        </div>
+        <div class="refund-item">
+          <h1 class="refund-item-title">付款记录</h1>
+          <el-table :data="products" border fit highlight-current-row :header-cell-style="{background:'#e9f3f7',color:'#606266'}">
+            <el-table-column label="序号" align="center" prop="productName" />
+            <el-table-column label="付款单ID" align="center" prop="unit" />
+            <el-table-column label="付款时间" align="center" prop="num" />
+            <el-table-column label="付款方式" align="center" prop="returnNum" />
+            <el-table-column label="付款金额" align="center" prop="price" />
+          </el-table>
+        </div>
+        <div class="refund-item">
+          <h1 class="refund-item-title">退款记录</h1>
+          <el-table :data="products" border fit highlight-current-row :header-cell-style="{background:'#e9f3f7',color:'#606266'}">
+            <el-table-column label="序号" align="center" prop="productName" />
+            <el-table-column label="退款记录ID" align="center" prop="unit" />
+            <el-table-column label="退款时间" align="center" prop="num" />
+            <el-table-column label="退款方式" align="center" prop="returnNum" />
+            <el-table-column label="退款金额" align="center" prop="price" />
+          </el-table>
+        </div>
+      </el-card>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getDetail, getRemarks } from '@/api/order'
+export default {
+  name: 'PaymentRecord',
+  filters: {
+    statusFilter(status) {
+      const map = {
+        0: '待付款',
+        1: '已付款',
+        2: '审核不通过'
+      }
+      return map[status]
+    }
+  },
+  data() {
+    return {
+      printObj: {
+        id: 'printBox', // 局部打印的<div> Id
+        popTitle: '', // 打印配置页上方标题
+        extraHead: '', // 最上方的头部文字，附加在head标签上的额外标签,使用逗号分隔
+        preview: '', // 是否启动预览模式，默认是false（开启预览模式，可以先预览后打印）
+        previewTitle: '', // 打印预览的标题（开启预览模式后出现）,
+        previewPrintBtnLabel: '', // 打印预览的标题的下方按钮文本，点击可进入打印（开启预览模式后出现）
+        zIndex: '', // 预览的窗口的z-index，默认是 20002（此值要高一些，这涉及到预览模式是否显示在最上面）
+        previewBeforeOpenCallback() {}, // 预览窗口打开之前的callback（开启预览模式调用）
+        previewOpenCallback() {}, // 预览窗口打开之后的callback（开启预览模式调用）
+        beforeEntryIframe() {
+          const cells = document.querySelectorAll('.cell')
+          const tableNode = document.querySelectorAll('.el-table__header,.el-table__body')
+          // el-table 打印不全的问题
+          for (let j = 0; j < tableNode.length; j++) {
+            const tableItem = tableNode[j]
+            tableItem.style.width = '100%'
+            const child = tableItem.childNodes
+            for (let i = 0; i < child.length; i++) {
+              const element = child[i]
+              if (element.localName === 'colgroup') {
+                element.innerHTML = ''
+              }
+            }
+          }
+          // el-table 格子里面打印超过格子的问题
+          for (let i = 0; i < cells.length; i++) {
+            const cell = cells[i]
+            cell.style.width = '100%'
+            cell.removeAttribute('style')
+          }
+        },
+        openCallback() {
+
+        }, // 调用打印之后的回调事件
+        closeCallback() {}, // 关闭打印的回调事件（无法确定点击的是确认还是取消）
+        url: '',
+        standard: '',
+        extraCss: '',
+        loading: false
+      },
+      payRepacts: {
+        name: '卢海珠',
+        account: '6214 8328 2826 4957 ',
+        accountBank: '中国建设银行',
+        accountType: '公账'
+      },
+      repacts: [
+        {
+          id: 7580,
+          name: '卢海珠',
+          account: '6214 8328 2826 4957 ',
+          accountBank: '中国建设银行',
+          accountType: '公账',
+          type: '子订单付款',
+          shopName: '采美信息技术有限公司',
+          payableAmount: '20000.00',
+          shopOrderNo: 'P1682650952091471001',
+          shopOrderId: '19747',
+          orderNo: 'P16265095220221471',
+          orderId: '18179',
+          clubName: '广州白云区松洲蒂亚美容院',
+          applyMan: '路海珠',
+          applyTime: '2020-01-01:20:30:56',
+          verifyMan: '李昕',
+          verifyTime: '2020-01-01:20:30:56',
+          status: 0,
+          totalProduct: '3000.00',
+          payShopTotal: '3000.00',
+          childOrderId: ['P16265095220221471', 'P16265095220221471', 'P16265095220221471'],
+          products: [
+            {
+              productName: '阶雪山之恋保滋润面霜吖',
+              unit: '50ml',
+              num: 3,
+              returnNum: 0,
+              price: '2000.00',
+              totalPrice: '6000.00',
+              costPrice: '1000.00',
+              totalCostPrice: '3000.00'
+            },
+            {
+              productName: '阶雪山之恋保滋润面霜吖',
+              unit: '50ml',
+              num: 3,
+              returnNum: 0,
+              price: '2000.00',
+              totalPrice: '6000.00',
+              costPrice: '1000.00',
+              totalCostPrice: '3000.00'
+            },
+            {
+              productName: '阶雪山之恋保滋润面霜吖',
+              unit: '50ml',
+              num: 3,
+              returnNum: 0,
+              price: '2000.00',
+              totalPrice: '6000.00',
+              costPrice: '1000.00',
+              totalCostPrice: '3000.00'
+            },
+            {
+              productName: '阶雪山之恋保滋润面霜吖',
+              unit: '50ml',
+              num: 3,
+              returnNum: 0,
+              price: '2000.00',
+              totalPrice: '6000.00',
+              costPrice: '1000.00',
+              totalCostPrice: '3000.00'
+            }
+          ]
+        }
+      ],
+      products: [
+        {
+          productName: '阶雪山之恋保滋润面霜吖',
+          unit: '50ml',
+          num: 3,
+          returnNum: 0,
+          price: '2000.00',
+          totalPrice: '6000.00',
+          costPrice: '1000.00',
+          totalCostPrice: '3000.00'
+        },
+        {
+          productName: '阶雪山之恋保滋润面霜吖',
+          unit: '50ml',
+          num: 3,
+          returnNum: 0,
+          price: '2000.00',
+          totalPrice: '6000.00',
+          costPrice: '1000.00',
+          totalCostPrice: '3000.00'
+        },
+        {
+          productName: '阶雪山之恋保滋润面霜吖',
+          unit: '50ml',
+          num: 3,
+          returnNum: 0,
+          price: '2000.00',
+          totalPrice: '6000.00',
+          costPrice: '1000.00',
+          totalCostPrice: '3000.00'
+        },
+        {
+          productName: '阶雪山之恋保滋润面霜吖',
+          unit: '50ml',
+          num: 3,
+          returnNum: 0,
+          price: '2000.00',
+          totalPrice: '6000.00',
+          costPrice: '1000.00',
+          totalCostPrice: '3000.00'
+        }
+      ],
+      activeIndex: '2',
+      order: null,
+      receiptAmount: 0,
+      returnValue: 0,
+      returnedPurchaseFee: 0,
+      bpClauses: null,
+      dialogRemarkList: [],
+      dialogRemarksVisible: false,
+      dialogRemarksOrderId: 0,
+      statusObj: {
+        '0': '待确认',
+        '4': '交易完成',
+        '5': '订单完成',
+        '6': '已关闭',
+        '7': '交易全退',
+        '11': '待收款、待发货',
+        '12': '待收款、部分发货',
+        '13': '待收款、全部发货',
+        '21': '部分收款、待发货',
+        '22': '部分收款、部分发货',
+        '23': '部分收款、全部发货',
+        '31': '全部收款、待发货',
+        '32': '全部收款、部分发货',
+        '33': '全部收款、全部发货'
+      }
+    }
+  },
+  computed: {
+    orderID: function() {
+      return this.$route.query.orderID * 1
+    }
+  },
+  created() {
+    // this.fetchData()
+  },
+  methods: {
+    fetchData() {
+      this.listLoading = true
+      getDetail({ id: this.orderID }).then(response => {
+        this.order = response.data.order
+        this.bpClauses = response.data.bpClauses
+        this.receiptAmount = response.data.receiptAmount
+        this.returnValue = response.data.returnValue
+        this.returnedPurchaseFee = response.data.returnedPurchaseFee
+        this.listLoading = false
+      }).catch(() => {
+        this.listLoading = false
+      })
+    },
+    RemarksOrder: function(id) {
+      getRemarks({ orderID: id }).then(response => {
+        this.dialogRemarkList = response.data
+      })
+      this.dialogRemarksOrderId = id
+      this.dialogRemarksVisible = true
+    },
+    backToList() {
+      this.$store.dispatch('tagsView/delView', this.$route).then(() => {
+        this.$nextTick(() => {
+          this.$router.replace({
+            path: '/finance/list'
+          })
+        })
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+  .app-title{
+    line-height: 36px;
+    font-size: 26px;
+    font-weight: bold;
+    color: #409EFF;
+    text-align: center;
+  }
+  .box-card{
+    margin-top: 20px;
+    font-size: 14px;
+  }
+  .box-row{
+    padding: 10px 0;
+  }
+  .box-row .dropdown{
+    margin-top: -10px;
+  }
+  .refund-item{
+    padding: 10px 0;
+  }
+  .refund-item-title{
+    line-height: 24px;
+    font-size: 14px;
+    color: #409EFF;
+  }
+  .order-item{
+    background:#f7f7f7;
+    margin-bottom: 20px;
+    padding: 10px 15px;
+    border-radius: 5px;
+  }
+  .product-row{
+    padding: 10px 0;
+    background: #EBEEF5;
+    border-top: 1px dashed #DCDFE6;
+  }
+  .op-item{
+    padding: 5px 0;
+  }
+  .el-span-warning{
+  color: #E6A23C;
+}
+.el-span-success{
+  color: #67C23A;
+}
+.el-span-danger{
+  color: #F56C6C;
+}
+</style>
+

src/views/finance/paysettle-list.vue

@@ -0,0 +1,328 @@
+<template>
+  <div class="app-container">
+    <div class="filter-container">
+      <div class="filter-control">
+        <span>子订单ID:</span>
+        <el-input v-model="listQuery.orderID" style="width:130px;" placeholder="子订单ID" clearable @keyup.enter.native="getList" @clear="getList" />
+      </div>
+      <div class="filter-control">
+        <span>子订单编号:</span>
+        <el-input v-model="listQuery.orderID" style="width:200px;" placeholder="子订单编号" clearable @keyup.enter.native="getList" @clear="getList" />
+      </div>
+      <div class="filter-control">
+        <span>订单ID:</span>
+        <el-input v-model="listQuery.orderID" style="width:130px;" placeholder="订单ID" clearable @keyup.enter.native="getList" @clear="getList" />
+      </div>
+      <div class="filter-control">
+        <span>订单编号:</span>
+        <el-input v-model="listQuery.orderNumber" style="width:200px;" placeholder="订单编号" clearable @keyup.enter.native="getList" @clear="getList" />
+      </div>
+      <div class="filter-control">
+        <span>供应商:</span>
+        <el-input v-model="listQuery.customer" style="width:200px;" placeholder="供应商" clearable @keyup.enter.native="getList" @clear="getList" />
+      </div>
+      <div class="filter-control">
+        <span>机构名称:</span>
+        <el-input v-model="listQuery.customer" style="width:200px;" placeholder="机构名称" clearable @keyup.enter.native="getList" @clear="getList" />
+      </div>
+      <div class="filter-control">
+        <span>下单时间:</span>
+        <el-date-picker
+          v-model="time"
+          type="daterange"
+          unlink-panels
+          range-separator="至"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+          :picker-options="pickerOptions"
+          @change="getList"
+        />
+      </div>
+      <div class="filter-control">
+        <el-button type="primary" icon="el-icon-search" @click="getList">查询</el-button>
+        <el-button type="success" icon="el-icon-document-add" @click="getList">申请分账</el-button>
+      </div>
+    </div>
+    <el-table
+      v-loading="listLoading"
+      :data="list"
+      element-loading-text="Loading"
+      border
+      fit
+      highlight-current-row
+      :header-cell-style="{background:'#eef1f6',color:'#606266'}"
+      @selection-change="handleSelectionChange"
+    >
+      <el-table-column type="selection" width="40" />
+      <el-table-column label="商品信息" type="expand" width="50">
+        <template slot-scope="{row}">
+          <el-table :data="row.products" border fit highlight-current-row :header-cell-style="{background:'#eef1f6',color:'#606266'}">
+            <el-table-column label="商品名" align="center" prop="productName" />
+            <el-table-column label="规格" align="center" prop="unit" />
+            <el-table-column label="数量" align="center" prop="num" />
+            <el-table-column label="退货" align="center" prop="returnNum" />
+            <el-table-column label="单价" align="center" prop="price" />
+            <el-table-column label="总价" align="center" prop="totalPrice" />
+          </el-table>
+        </template>
+      </el-table-column>
+      <el-table-column label="订单编号(ID)" align="center" prop="orderNo" width="240">
+        <template slot-scope="{row}">
+          <span>{{ row.orderNo }}({{ row.orderId }})</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="子订单编号(ID)" align="center" prop="shopOrderNo" width="240">
+        <template slot-scope="{row}">
+          <span>{{ row.shopOrderNo }}({{ row.shopOrderId }})</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="下单时间" align="center" prop="verifyTime" width="90" />
+      <el-table-column label="订单金额" align="center" prop="payableAmount" />
+      <el-table-column label="收款金额" align="center" prop="payableAmount" />
+      <el-table-column label="商品费" align="center" prop="verifyMan" />
+      <el-table-column label="机构" align="center" prop="clubName" />
+      <el-table-column label="机构运费" align="center" prop="clubName" />
+      <el-table-column label="供应商" align="center" prop="shopName" />
+      <el-table-column label="供应商运费" align="center" prop="verifyMan" />
+      <el-table-column label="付供应商" align="center" prop="payableAmount" />
+      <el-table-column prop="status" label="收款状态" align="center">
+        <template slot-scope="{ row }">
+          <span
+            :class="{
+              'el-span-warning': row.status == 0,
+              'el-span-success': row.status == 1,
+              'el-span-danger': row.status == 0
+            }"
+          >
+            {{ row.status | statusFilter }}
+            <span v-if="row.status === 2" class="el-span-danger">原因：{{ row.statusText }}</span>
+          </span>
+        </template>
+      </el-table-column>
+      <el-table-column prop="status" label="结算状态" align="center">
+        <template slot-scope="{ row }">
+          <span
+            :class="{
+              'el-span-warning': row.status == 0,
+              'el-span-success': row.status == 1,
+              'el-span-danger': row.status == 2
+            }"
+          >
+            {{ row.status | statusFilter }}
+            <span v-if="row.status === 2" class="el-span-danger">原因：{{ row.statusText }}</span>
+          </span>
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" align="center">
+        <template slot-scope="{row}">
+          <el-button type="text" size="mini" @click="handleToRecord(row.id)">结算记录</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <pagination v-show="total>20" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="fetchData" />
+  </div>
+</template>
+
+<script>
+import { getClubList } from '@/api/club'
+import Pagination from '@/components/Pagination'
+import pickerOptions from '@/utils/time-picker.js'
+
+export default {
+  components: { Pagination },
+  filters: {
+    statusFilter(status) {
+      const map = {
+        0: '待付款',
+        1: '已付款',
+        2: '审核不通过'
+      }
+      return map[status]
+    }
+  },
+  data() {
+    return {
+      list: null,
+      pickerOptions,
+      listLoading: true,
+      searchTimeVal: '',
+      total: 0,
+      listQuery: {
+        page: 1,
+        limit: 10,
+        importance: undefined,
+        title: undefined,
+        type: undefined,
+        sort: '+id'
+      },
+      search: {
+
+      },
+      form: {
+        classifyName: '',
+        telephone: '',
+        contacts: '',
+        businessNum: '',
+        address: '',
+        radio: 1,
+        status: '请选择',
+        imageUrl: '',
+        doorwayImageUrl: ''
+      },
+      addPeople: {
+        classifyName: '',
+        telephone: ''
+      },
+      updateTatusId: '',
+      updateTatusType: '',
+      dialogVisible: false,
+      dialogVisibleText: '',
+      dialogFormVisible: false,
+      dialogStatus: '',
+      textMap: {
+        update: '添加运营人员',
+        create: 'Create',
+        titleText: '系统提示'
+      },
+      rules: {
+        classifyName: [{ required: true, message: '姓名不能为空', trigger: 'blur' }],
+        telephone: [{ required: true, message: '手机号码不能为空', trigger: 'blur' }]
+      }
+    }
+  },
+  created() {
+    this.getList()
+  },
+  methods: {
+    getList() {
+      this.listLoading = true
+      getClubList().then(response => {
+        this.list = response.data.items
+        this.listLoading = false
+      }).catch(() => {
+        // 封装静态数据
+        this.list = [
+          {
+            id: 7580,
+            name: '微博',
+            type: '子订单付款',
+            shopName: '采美信息技术有限公司',
+            payableAmount: '2000000.00',
+            shopOrderNo: 'P1682650952091471001',
+            shopOrderId: '19747',
+            orderNo: 'P16265095220221471',
+            orderId: '18179',
+            clubName: '广州白云区松洲蒂亚美容院',
+            applyMan: '路海珠',
+            applyTime: '2020-01-01:20:30:56',
+            verifyMan: '李昕',
+            verifyTime: '2020-01-01:20:30:56',
+            status: 0,
+            totalProduct: '3000.00',
+            payShopTotal: '3000.00',
+            products: [
+              {
+                productName: '阶雪山之恋保滋润面霜吖',
+                unit: '50ml',
+                num: 3,
+                returnNum: 0,
+                price: '2000.00',
+                totalPrice: '6000.00',
+                costPrice: '1000.00',
+                totalCostPrice: '3000.00'
+              },
+              {
+                productName: '阶雪山之恋保滋润面霜吖',
+                unit: '50ml',
+                num: 3,
+                returnNum: 0,
+                price: '2000.00',
+                totalPrice: '6000.00',
+                costPrice: '1000.00',
+                totalCostPrice: '3000.00'
+              },
+              {
+                productName: '阶雪山之恋保滋润面霜吖',
+                unit: '50ml',
+                num: 3,
+                returnNum: 0,
+                price: '2000.00',
+                totalPrice: '6000.00',
+                costPrice: '1000.00',
+                totalCostPrice: '3000.00'
+              },
+              {
+                productName: '阶雪山之恋保滋润面霜吖',
+                unit: '50ml',
+                num: 3,
+                returnNum: 0,
+                price: '2000.00',
+                totalPrice: '6000.00',
+                costPrice: '1000.00',
+                totalCostPrice: '3000.00'
+              }
+            ]
+          },
+          {
+            id: 7580,
+            name: '微博',
+            type: '子订单付款',
+            shopName: '采美信息技术有限公司',
+            payableAmount: '2000000.00',
+            shopOrderNo: 'P1682650952091471001',
+            shopOrderId: '19747',
+            orderNo: 'P16265095220221471',
+            orderId: '18179',
+            clubName: '广州白云区松洲蒂亚美容院',
+            applyMan: '路海珠',
+            applyTime: '2020-01-01:20:30:56',
+            verifyMan: '李昕',
+            verifyTime: '2020-01-01:20:30:56',
+            status: 0,
+            totalProduct: '3000.00',
+            payShopTotal: '3000.00',
+            products: [
+              {
+                productName: '阶雪山之恋保滋润面霜吖',
+                unit: '50ml',
+                num: 3,
+                returnNum: 0,
+                price: '2000.00',
+                totalPrice: '6000.00',
+                costPrice: '1000.00',
+                totalCostPrice: '3000.00'
+              },
+              {
+                productName: '阶雪山之恋保滋润面霜吖',
+                unit: '50ml',
+                num: 3,
+                returnNum: 0,
+                price: '2000.00',
+                totalPrice: '6000.00',
+                costPrice: '1000.00',
+                totalCostPrice: '3000.00'
+              }
+            ]
+          }
+        ]
+      })
+      this.listLoading = false
+    },
+    handleToRecord(id) {
+      this.$router.push({ path: '/finance/paysettle-record', query: { id: id }})
+    }
+  }
+}
+
+</script>
+<style scoped>
+.el-span-warning{
+  color: #E6A23C;
+}
+.el-span-success{
+  color: #67C23A;
+}
+.el-span-danger{
+  color: #F56C6C;
+}
+</style>

src/views/finance/paysettle-record.vue

@@ -0,0 +1,355 @@
+<template>
+  <div class="app-container">
+    <div id="printBox">
+      <el-card ref="print" class="box-card" style="margin: 0 auto;">
+        <div v-for="(repact,index) in repacts" :key="index" class="refund-item">
+          <el-row :gutter="24" class="box-row">
+            <el-col :span="6"><b>订单编号(ID)：</b> {{ repact.orderNo }}({{ repact.orderId }})</el-col>
+            <el-col :span="4"><b>下单时间：</b> {{ repact.applyTime }}</el-col>
+            <el-col :span="4"><b>订单金额：</b> {{ repact.payableAmount }}</el-col>
+            <el-col :span="10">
+              <b>所有子订单：</b>
+              <span v-for="child in repact.childOrderId" :key="child">
+                【{{ child }}】
+              </span>
+            </el-col>
+          </el-row>
+          <el-row :gutter="24" class="box-row">
+            <el-col :span="6"><b>机构名称：</b> {{ repact.clubName }}</el-col>
+            <el-col :span="4"><b>机构运费：</b> 包邮</el-col>
+            <el-col :span="4"><b>收款状态：</b> {{ repact.status | statusFilter }}</el-col>
+            <el-col :span="10"><b>收款金额：</b> {{ repact.payableAmount }}</el-col>
+          </el-row>
+          <el-row :gutter="24" class="box-row">
+            <el-col :span="6"><b>子订单编号(ID)</b> {{ repact.orderNo }}({{ repact.orderId }})</el-col>
+            <el-col :span="4"><b>子订单佣金：</b> 5000.00</el-col>
+            <el-col :span="4"><b>商品费：</b> {{ repact.payableAmount }}</el-col>
+            <el-col :span="10"><b>付款状态：</b> {{ repact.status | statusFilter }}</el-col>
+          </el-row>
+          <el-row :gutter="24" class="box-row">
+            <el-col :span="6"><b>供应商名称：</b> {{ repact.shopName }}</el-col>
+            <el-col :span="4"><b>供应商运费：</b> 15.00</el-col>
+            <el-col :span="6">
+              <b>付供应商：</b>
+              <b style="margin-left: 10px;">应付:</b>10000.00
+              <b style="margin-left: 10px;">已付:</b>10000.00
+              <b style="margin-left: 10px;">待付:</b>0.00</el-col>
+          </el-row>
+          <el-row :gutter="24" class="box-row">
+            <el-table :data="repact.products" border fit highlight-current-row :header-cell-style="{background:'#eef1f6',color:'#606266'}">
+              <el-table-column label="商品名" align="center" prop="productName" />
+              <el-table-column label="规格" align="center" prop="unit" />
+              <el-table-column label="数量" align="center" prop="num" />
+              <el-table-column label="退货" align="center" prop="returnNum" />
+              <el-table-column label="单价" align="center" prop="price" />
+              <el-table-column label="总价" align="center" prop="totalPrice" />
+            </el-table>
+          </el-row>
+        </div>
+        <div class="refund-item">
+          <h1 class="refund-item-title">结算记录</h1>
+          <el-table :data="products" border fit highlight-current-row :header-cell-style="{background:'#e9f3f7',color:'#606266'}">
+            <el-table-column label="序号" align="center" prop="productName" />
+            <el-table-column label="付款单ID" align="center" prop="unit" />
+            <el-table-column label="付款时间" align="center" prop="num" />
+            <el-table-column label="付款方式" align="center" prop="returnNum" />
+            <el-table-column label="付款金额" align="center" prop="price" />
+          </el-table>
+        </div>
+      </el-card>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getDetail, getRemarks } from '@/api/order'
+export default {
+  name: 'PaysettleRecord',
+  filters: {
+    statusFilter(status) {
+      const map = {
+        0: '待付款',
+        1: '已付款',
+        2: '审核不通过'
+      }
+      return map[status]
+    }
+  },
+  data() {
+    return {
+      printObj: {
+        id: 'printBox', // 局部打印的<div> Id
+        popTitle: '', // 打印配置页上方标题
+        extraHead: '', // 最上方的头部文字，附加在head标签上的额外标签,使用逗号分隔
+        preview: '', // 是否启动预览模式，默认是false（开启预览模式，可以先预览后打印）
+        previewTitle: '', // 打印预览的标题（开启预览模式后出现）,
+        previewPrintBtnLabel: '', // 打印预览的标题的下方按钮文本，点击可进入打印（开启预览模式后出现）
+        zIndex: '', // 预览的窗口的z-index，默认是 20002（此值要高一些，这涉及到预览模式是否显示在最上面）
+        previewBeforeOpenCallback() {}, // 预览窗口打开之前的callback（开启预览模式调用）
+        previewOpenCallback() {}, // 预览窗口打开之后的callback（开启预览模式调用）
+        beforeEntryIframe() {
+          const cells = document.querySelectorAll('.cell')
+          const tableNode = document.querySelectorAll('.el-table__header,.el-table__body')
+          // el-table 打印不全的问题
+          for (let j = 0; j < tableNode.length; j++) {
+            const tableItem = tableNode[j]
+            tableItem.style.width = '100%'
+            const child = tableItem.childNodes
+            for (let i = 0; i < child.length; i++) {
+              const element = child[i]
+              if (element.localName === 'colgroup') {
+                element.innerHTML = ''
+              }
+            }
+          }
+          // el-table 格子里面打印超过格子的问题
+          for (let i = 0; i < cells.length; i++) {
+            const cell = cells[i]
+            cell.style.width = '100%'
+            cell.removeAttribute('style')
+          }
+        },
+        openCallback() {
+
+        }, // 调用打印之后的回调事件
+        closeCallback() {}, // 关闭打印的回调事件（无法确定点击的是确认还是取消）
+        url: '',
+        standard: '',
+        extraCss: '',
+        loading: false
+      },
+      payRepacts: {
+        name: '卢海珠',
+        account: '6214 8328 2826 4957 ',
+        accountBank: '中国建设银行',
+        accountType: '公账'
+      },
+      repacts: [
+        {
+          id: 7580,
+          name: '卢海珠',
+          account: '6214 8328 2826 4957 ',
+          accountBank: '中国建设银行',
+          accountType: '公账',
+          type: '子订单付款',
+          shopName: '采美信息技术有限公司',
+          payableAmount: '20000.00',
+          shopOrderNo: 'P1682650952091471001',
+          shopOrderId: '19747',
+          orderNo: 'P16265095220221471',
+          orderId: '18179',
+          clubName: '广州白云区松洲蒂亚美容院',
+          applyMan: '路海珠',
+          applyTime: '2020-01-01:20:30:56',
+          verifyMan: '李昕',
+          verifyTime: '2020-01-01:20:30:56',
+          status: 0,
+          totalProduct: '3000.00',
+          payShopTotal: '3000.00',
+          childOrderId: ['P16265095220221471', 'P16265095220221471', 'P16265095220221471'],
+          products: [
+            {
+              productName: '阶雪山之恋保滋润面霜吖',
+              unit: '50ml',
+              num: 3,
+              returnNum: 0,
+              price: '2000.00',
+              totalPrice: '6000.00',
+              costPrice: '1000.00',
+              totalCostPrice: '3000.00'
+            },
+            {
+              productName: '阶雪山之恋保滋润面霜吖',
+              unit: '50ml',
+              num: 3,
+              returnNum: 0,
+              price: '2000.00',
+              totalPrice: '6000.00',
+              costPrice: '1000.00',
+              totalCostPrice: '3000.00'
+            },
+            {
+              productName: '阶雪山之恋保滋润面霜吖',
+              unit: '50ml',
+              num: 3,
+              returnNum: 0,
+              price: '2000.00',
+              totalPrice: '6000.00',
+              costPrice: '1000.00',
+              totalCostPrice: '3000.00'
+            },
+            {
+              productName: '阶雪山之恋保滋润面霜吖',
+              unit: '50ml',
+              num: 3,
+              returnNum: 0,
+              price: '2000.00',
+              totalPrice: '6000.00',
+              costPrice: '1000.00',
+              totalCostPrice: '3000.00'
+            }
+          ]
+        }
+      ],
+      products: [
+        {
+          productName: '阶雪山之恋保滋润面霜吖',
+          unit: '50ml',
+          num: 3,
+          returnNum: 0,
+          price: '2000.00',
+          totalPrice: '6000.00',
+          costPrice: '1000.00',
+          totalCostPrice: '3000.00'
+        },
+        {
+          productName: '阶雪山之恋保滋润面霜吖',
+          unit: '50ml',
+          num: 3,
+          returnNum: 0,
+          price: '2000.00',
+          totalPrice: '6000.00',
+          costPrice: '1000.00',
+          totalCostPrice: '3000.00'
+        },
+        {
+          productName: '阶雪山之恋保滋润面霜吖',
+          unit: '50ml',
+          num: 3,
+          returnNum: 0,
+          price: '2000.00',
+          totalPrice: '6000.00',
+          costPrice: '1000.00',
+          totalCostPrice: '3000.00'
+        },
+        {
+          productName: '阶雪山之恋保滋润面霜吖',
+          unit: '50ml',
+          num: 3,
+          returnNum: 0,
+          price: '2000.00',
+          totalPrice: '6000.00',
+          costPrice: '1000.00',
+          totalCostPrice: '3000.00'
+        }
+      ],
+      activeIndex: '2',
+      order: null,
+      receiptAmount: 0,
+      returnValue: 0,
+      returnedPurchaseFee: 0,
+      bpClauses: null,
+      dialogRemarkList: [],
+      dialogRemarksVisible: false,
+      dialogRemarksOrderId: 0,
+      statusObj: {
+        '0': '待确认',
+        '4': '交易完成',
+        '5': '订单完成',
+        '6': '已关闭',
+        '7': '交易全退',
+        '11': '待收款、待发货',
+        '12': '待收款、部分发货',
+        '13': '待收款、全部发货',
+        '21': '部分收款、待发货',
+        '22': '部分收款、部分发货',
+        '23': '部分收款、全部发货',
+        '31': '全部收款、待发货',
+        '32': '全部收款、部分发货',
+        '33': '全部收款、全部发货'
+      }
+    }
+  },
+  computed: {
+    orderID: function() {
+      return this.$route.query.orderID * 1
+    }
+  },
+  created() {
+    // this.fetchData()
+  },
+  methods: {
+    fetchData() {
+      this.listLoading = true
+      getDetail({ id: this.orderID }).then(response => {
+        this.order = response.data.order
+        this.bpClauses = response.data.bpClauses
+        this.receiptAmount = response.data.receiptAmount
+        this.returnValue = response.data.returnValue
+        this.returnedPurchaseFee = response.data.returnedPurchaseFee
+        this.listLoading = false
+      }).catch(() => {
+        this.listLoading = false
+      })
+    },
+    RemarksOrder: function(id) {
+      getRemarks({ orderID: id }).then(response => {
+        this.dialogRemarkList = response.data
+      })
+      this.dialogRemarksOrderId = id
+      this.dialogRemarksVisible = true
+    },
+    backToList() {
+      this.$store.dispatch('tagsView/delView', this.$route).then(() => {
+        this.$nextTick(() => {
+          this.$router.replace({
+            path: '/finance/list'
+          })
+        })
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+  .app-title{
+    line-height: 36px;
+    font-size: 26px;
+    font-weight: bold;
+    color: #409EFF;
+    text-align: center;
+  }
+  .box-card{
+    margin-top: 20px;
+    font-size: 14px;
+  }
+  .box-row{
+    padding: 10px 0;
+  }
+  .box-row .dropdown{
+    margin-top: -10px;
+  }
+  .refund-item{
+    padding: 10px 0;
+  }
+  .refund-item-title{
+    line-height: 24px;
+    font-size: 14px;
+    color: #409EFF;
+  }
+  .order-item{
+    background:#f7f7f7;
+    margin-bottom: 20px;
+    padding: 10px 15px;
+    border-radius: 5px;
+  }
+  .product-row{
+    padding: 10px 0;
+    background: #EBEEF5;
+    border-top: 1px dashed #DCDFE6;
+  }
+  .op-item{
+    padding: 5px 0;
+  }
+  .el-span-warning{
+  color: #E6A23C;
+}
+.el-span-success{
+  color: #67C23A;
+}
+.el-span-danger{
+  color: #F56C6C;
+}
+</style>
+

src/views/floor/components/good-multi-dialog.vue

@@ -7,22 +7,13 @@
     :show-close="false"
   >
     <div class="filter-container">
-      <div class="filter-control">
-        <span>商品ID:</span>
-        <el-input
-          v-model="listQuery.productId"
-          placeholder="商品ID"
-          clearable
-          @input="e => (listQuery.productId= checkedInput(e,1))"
-        />
-      </div>
       <div class="filter-control">
         <span>商品名称:</span>
         <el-input
-          v-model="listQuery.name"
+          v-model="listQuery.productName"
           placeholder="商品名称"
           clearable
-          @input="e => (listQuery.name= checkedInput(e,2))"
+          @input="e => (listQuery.productName= checkedInput(e,2))"
         />
       </div>
       <div class="filter-control">
@@ -41,9 +32,8 @@
     </div>
     <el-table ref="table" v-loading="isLoading" :data="list" height="400px" border @selection-change="handleSelectionChange">
       <el-table-column type="selection" width="50" />
-      <el-table-column prop="productId" label="商品ID" align="center" width="80" />
-      <el-table-column prop="coupon" label="商品图片" align="center" width="100">
-        <template v-if="row.productId" slot-scope="{ row }">
+      <el-table-column prop="mainImage" label="商品图片" align="center" width="100">
+        <template slot-scope="{ row }">
           <el-popover
             placement="top-start"
             title=""
@@ -55,20 +45,15 @@
           </el-popover>
         </template>
       </el-table-column>
-      <el-table-column prop="name" label="商品名称" align="center" />
+      <el-table-column prop="productName" label="商品名称" align="center" />
       <el-table-column prop="shopName" label="供应商" align="center" width="250" />
-      <el-table-column prop="price" label="机构价" align="center" width="160">
-        <template slot-scope="{ row }">
-          ￥{{ row.price ? row.price : '0.00' }}
-        </template>
-      </el-table-column>
     </el-table>
     <!-- 页码 -->
     <pagination
       :total="total"
       :page-sizes="[20]"
       :page-size="20"
-      :page.sync="listQuery.pageNum"
+      :page.sync="listQuery.index"
       :limit.sync="listQuery.pageSize"
       @pagination="getList"
     />
@@ -80,7 +65,7 @@
 </template>
 
 <script>
-import { getClubList, createOperator, updateStatus } from '@/api/club'
+import { getList } from '@/api/goods'
 
 export default {
   name: 'ProDialog',
@@ -94,10 +79,9 @@ export default {
     return {
       visible: true,
       listQuery: {
-        productId: '', // 商品id
-        name: '', // 商品名称
+        productName: '', // 商品名称
         shopName: '', // 供应商名称
-        pageNum: 1,
+        index: 1,
         pageSize: 20
       },
       list: [],
@@ -118,7 +102,7 @@ export default {
     // 商品列表
     async getList() {
       this.isLoading = true
-      const res = await fetchProductList(this.listQuery)
+      const res = await getList(this.listQuery)
       this.list = res.data.results
       this.total = res.data.totalRecord
       this.isLoading = false
@@ -130,9 +114,7 @@ export default {
     },
     handleAddProConfirm() {
       // 确认选择商品
-      this.productRadio.pcStatus = '1'
-      this.productRadio.appletsStatus = '1'
-      this.productRadio.sort = 1
+      this.productRadio = this.productRadio.map(item => { item.sort = 0; return item })
       this.$emit('confirm', this.productRadio)
     },
     handleCanle() {

src/views/floor/edit.vue

@@ -1,24 +1,24 @@
 <template>
   <div class="app-container" style="width: 800px;margin: 0 auto;">
-    <el-form ref="bannerForm" :model="form" label-width="100px">
-      <el-form-item label="楼层标题:" prop="name" :rules="rules.name">
-        <el-input v-model="form.name" style="width: 250px;" />
+    <el-form ref="floorForm" :model="form" label-width="100px">
+      <el-form-item label="楼层标题:" prop="topic" :rules="rules.topic">
+        <el-input v-model="form.topic" placeholder="10个字以内" maxlength="30" style="width: 200px;" />
       </el-form-item>
       <el-form-item label="排序:" prop="sort" :rules="rules.sort">
         <el-input v-model="form.sort" style="width: 200px" />
       </el-form-item>
-      <el-form-item label="状态:" prop="status" :rules="rules.status">
-        <el-select v-model="form.status" placeholder="请选择">
-          <el-option label="上线" :value="1" />
-          <el-option label="下线" :value="0" />
+      <el-form-item label="状态:" prop="enabledStatus" :rules="rules.enabledStatus">
+        <el-select v-model="form.enabledStatus" placeholder="请选择">
+          <el-option label="启用" :value="1" />
+          <el-option label="停用" :value="0" />
         </el-select>
       </el-form-item>
       <!-- 商品列表 -->
-      <el-form-item label="商品信息" :prop="productList" :rules="rules.productList">
-        <el-button type="primary" icon="el-icon-sort" size="mini" :disabled="disabled3(form.productList)" @click="handleOnInputBlur">一键排序</el-button>
+      <el-form-item label="商品信息" prop="products" :rules="rules.products">
+        <el-button type="primary" icon="el-icon-sort" size="mini" :disabled="disabled3(form.products)" @click="handleOnInputBlur">一键排序</el-button>
         <el-button type="primary" icon="el-icon-plus" size="mini" @click="handleDialogVisible">添加商品</el-button>
-        <el-checkbox-group v-show="false" v-model="form.productList" />
-        <el-table v-show="form.productList && form.productList.length>0" :data="form.productList" border>
+        <el-checkbox-group v-show="false" v-model="form.products" />
+        <el-table v-show="form.products && form.products.length>0" :data="form.products" border>
           <el-table-column property="mainImage" label="商品图片" align="center" width="80">
             <template slot-scope="{ row }">
               <el-popover
@@ -32,15 +32,15 @@
               </el-popover>
             </template>
           </el-table-column>
-          <el-table-column property="name" label="商品名称" align="center" />
+          <el-table-column property="productName" label="商品名称" align="center" />
           <el-table-column prop="validFlag" label="商品状态" align="center" width="150">
             <template slot-scope="{row}">
               <el-tag :type="row.validFlag | statusFilter">{{ row.validFlag*1 === 1 ? '已上架' : '已下架' }}</el-tag>
             </template>
           </el-table-column>
-          <el-table-column label="排序" align="center" width="100">
+          <el-table-column prop="sort" label="排序" align="center" width="100">
             <template slot-scope="{row}">
-              <el-input v-model="row.sort" maxlength="4" minlength="1" />
+              <el-input v-model="row.sort" :maxlength="4" size="mini" />
             </template>
           </el-table-column>
           <el-table-column label="操作" align="center">
@@ -51,8 +51,8 @@
         </el-table>
       </el-form-item>
     </el-form>
-    <div class="el-dialog__footer" style="text-align: center;">
-      <el-button type="primary" @click="onSubmit('bannerForm')">保存</el-button>
+    <div class="el-dialog__footer" style="text-align: left;">
+      <el-button type="primary" @click="onSubmit('floorForm')">保存</el-button>
     </div>
     <!-- 商品弹框 -->
     <good-dialog v-if="dialogVisible" ref="goodDialog" @cancel="handleGoodCancel" @confirm="handleGoodConfirm" />
@@ -60,22 +60,10 @@
 </template>
 
 <script>
-import { getClubList, createOperator, updateStatus } from '@/api/club'
+import { savePageFloor, formPageFloor } from '@/api/floor'
 import goodDialog from './components/good-multi-dialog'
-const defaultForm = () => {
-  return {
-    shopId: 0,
-    shopData: [],
-    couponType: 0,
-    couponAmount: '',
-    touchPrice: '',
-    productType: '1',
-    categoryType: '1',
-    associateList: []// 指定商品信息
-  }
-}
 export default {
-  name: 'BannerEdit',
+  name: 'FloorEdit',
   components: { goodDialog },
   filters: {
     statusFilter(status) {
@@ -87,68 +75,35 @@ export default {
     }
   },
   data() {
-    return {
-      form: {
-        name: '',
-        banner: 'https://img1.baidu.com/it/u=1016138010,1907110459&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
+    const defaultForm = () => {
+      return {
+        organizeId: this.$store.getters.organizeId,
         sort: 0,
-        status: 1,
-        jumpType: null,
-        actId: '',
-        productId: null
-      },
-      activityList: [
-        {
-          actId: 1,
-          name: '活动主题1'
-        },
-        {
-          actId: 2,
-          name: '活动主题2'
-        }
-      ],
-      productData: [
-        {
-          mainImage: 'https://img1.baidu.com/it/u=1016138010,1907110459&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
-          productName: 'Twinkle 水婴肌 美白 补水 紧致 无创水光',
-          shopName: '雅光博睿医药科技（广东）有限公司',
-          unit: '20ML',
-          costPrice: '50000.00',
-          price: '50000.00',
-          addTime: '2023-04-14 14:45:39',
-          validFlag: 1
-        }
-      ],
-      formParams: {
-        id: '',
-        month: '',
-        endMonth: '',
-        status: '',
-        configure: 1, // 专属优惠券配置  1是、0否
-        coupons: []
-      },
+        topic: '', // 楼层标题
+        enabledStatus: 1, // 楼层启用状态
+        products: [] // 楼层商品列表
+      }
+    }
+    return {
+      form: defaultForm(),
+      ActivIndex: 0,
       editType: 'add',
       // 商品列表
       dialogVisible: false,
       loadImgLoading: false,
       rules: {
-        name: [{ required: true, message: '请填写轮播主题', trigger: 'blur' }],
-        banner: [{ required: true, message: '请上传轮播图', trigger: 'blur' }],
-        productId: [{ required: true, type: 'array', message: '请添加一个商品', trigger: ['change'] }],
+        topic: [{ required: true, message: '请填写楼层标题', trigger: 'blur' }],
+        products: [{ required: true, type: 'array', message: '请添加商品', trigger: ['change'] }],
         sort: [{ required: true, message: '排序值不能为空', trigger: 'blur' }],
-        status: [{ required: true, message: '请选择状态', trigger: 'blur' }],
-        jumpType: [{ required: true, message: '请选择跳转类型', trigger: 'blur' }],
-        actId: [{ required: true, message: '请选择活动列表', trigger: 'blur' }]
+        enabledStatus: [{ required: true, message: '请选择状态', trigger: 'blur' }]
       },
-      delFlag: false
+      handelProduts: []
+
     }
   },
   computed: {
     disabled() {
-      return this.form.formList.length === 5
-    },
-    disabled1() {
-      return this.form.formList.length === 1
+      return this.form.images.length === 10
     },
     getToken() {
       return {
@@ -161,48 +116,22 @@ export default {
   },
   created() {
     this.editType = this.$route.query.type || 'edit'
-    console.log('editType', this.editType)
-    // this.initForm(this.editType)
+    if (this.editType === 'edit') {
+      console.log('edit')
+      this.formPageFloor(this.$route.query.id)
+    }
   },
   methods: {
-    initForm(type) {
-      if (type === 'add') {
-        console.log('add')
-        this.svipCoupon(type, 1, 0)
-      } else {
-        console.log('edit')
-        this.svipCoupon(type, 0, this.$route.query.id)
-      }
-    },
-    async svipCoupon(type, configure, id) {
-      const res = await svipCoupon({ id: id, configure: configure })
-      const data = res.data.svipcouponForm
-      this.formParams = { ...this.formParams, ...data }
-      if (data.coupons.length > 0) {
-        this.delFlag = true
-        this.form.formList = data.coupons.map((el) => {
-          el = { ...el, ...this.defaultShop }
-          if (el.shop) {
-            el.shopData.push(el.shop)
-          }
-          return el
-        })
-        console.log('formList', this.form.formList)
-      } else {
-        for (let i = 0; i <= 2; i++) {
-          this.form.formList.push(defaultForm())
-        }
-      }
+    async formPageFloor(id) {
+      // 获取轮播图详情
+      const res = await formPageFloor(id)
+      this.form = { ...this.form, ...res.data }
     },
     // 显示选择商品弹窗
-    handleDialogVisible() {
+    handleDialogVisible(index) {
+      if (index) { this.ActivIndex = index }
       this.dialogVisible = true
     },
-    handleGoodDialogVisible(index) {
-      // 显示选择商品弹窗
-      this.addIndex = index
-      this.dialogGoodVisible = true
-    },
     deleteShop() {
       // 清除供应商
       this.form.productId = ''
@@ -210,107 +139,61 @@ export default {
     },
     handleGoodConfirm(data) {
       // 确认选择商品
-      const from = this.form.formList[this.addIndex]
-      from.associateList.push(data)
-      console.log('from', this.form.formList)
+      this.form.products = [...this.form.products, ...data]
+      console.log('products', this.form.products)
       this.handleGoodCancel()
     },
-    handleDeletePros(formItem, index) {
+    handeSetSort() {
+      return { sort: 0 }
+    },
+    handleDeletePros(index) {
       // 删除商品
+      console.log('1111', index)
       this.$confirm('确定删除吗？', '提示', {
         confirmButtonText: '确定',
         cancelButtonText: '取消',
         type: 'warning'
       }).then(() => {
-        formItem.associateList.splice(index, 1)
+        this.form.products.splice(index, 1)
       })
     },
     onSubmit(formName) {
       this.$refs[formName].validate(valid => {
         if (valid) {
-          this.handleFormParams()
           this.$confirm('是否提交数据', '提示', {
             confirmButtonText: '确定',
             cancelButtonText: '取消',
             type: 'warning'
           }).then(() => {
-            console.log('formParams', this.formParams)
-            if (this.editType === 'add') {
-              this.formParams.configure = 1
-            } else {
-              this.formParams.configure = 0
-            }
-            this.saveVipCoupon(this.formParams)
+            console.log('form', this.form)
+            this.savePageFloor(this.form)
           })
         } else {
           return false
         }
       })
     },
-    handleFormParams() {
-      // 处理参数
-      this.formParams.coupons = this.form.formList.map((el) => {
-        if (el.associateList && el.associateList.length > 0) {
-          el.associateList = el.associateList.map((pro) => {
-            return {
-              sort: pro.sort,
-              pcStatus: pro.pcStatus,
-              appletsStatus: pro.appletsStatus,
-              name: pro.name,
-              shopName: pro.shopName,
-              mainImage: pro.mainImage,
-              productId: pro.productId
-            }
-          })
-        }
-        return el
-      })
-    },
-    async saveVipCoupon(params) {
-      // 保存超级会员优惠券
-      await saveVipCoupon(params)
+    // 保存活动
+    async savePageFloor(params) {
+      // 保存
+      await savePageFloor(params)
       this.$message.success('保存成功')
       setTimeout(() => {
-        this.$router.push({ path: '/member/coupon/list' })
+        this.$router.push({ path: '/floor/list' })
       }, 1000)
     },
+    // 修改活动类型时清空商品
+    handeleSelChange() {
+      this.handelProduts = []
+    },
     // 取消选择商品
     handleGoodCancel() {
       this.dialogVisible = false
       this.$refs.goodDialog.visible = false
     },
-    handleAddList() {
-      // 新增优惠券
-      this.form.formList.push(defaultForm())
-    },
-    handleDelete(item, index) {
-      // 删除单挑优惠券
-      this.$confirm('确定删除此优惠券吗？', '提示', {
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
-        type: 'warning'
-      }).then(() => {
-        if (this.delFlag) {
-          this.delCoupon(item.id, index)
-        } else {
-          this.form.formList.splice(index, 1)
-        }
-      })
-    },
-    async delCoupon(id, index) {
-      // 保存超级会员优惠券
-      if (id) {
-        try {
-          await delCoupon(id)
-        } catch (error) {
-          console.log(error)
-        }
-      }
-      this.form.formList.splice(index, 1)
-    },
-    handleOnInputBlur(formItem) {
+    handleOnInputBlur() {
       // 商品排序
-      formItem.associateList.sort(this.sortByEnent('sort'))
+      this.form.products.sort(this.sortByEnent('sort'))
     },
     sortByEnent(i) {
       // 排序
@@ -318,23 +201,6 @@ export default {
         return a[i] - b[i] //  a[i] - b[i]为正序，倒叙为  b[i] - a[i]
       }
     },
-    handlePcStatusChange(row) {
-      // PC状态开启关闭
-      console.log('row', row)
-      if (row.pcStatus === '0') {
-        row.pcStatus = '1'
-      } else {
-        row.pcStatus = '0'
-      }
-    },
-    handleAppStatusChange(row) {
-      // 小程序状态开启关闭
-      if (row.appletsStatus === '0') {
-        row.appletsStatus = '1'
-      } else {
-        row.appletsStatus = '0'
-      }
-    },
     disabled3(array) {
       if (array && array.length >= 2) {
         return false
@@ -430,4 +296,18 @@ export default {
   .filter-item-temp{
     width: 100px;
   }
+  .form-cell{
+    border: 1px solid #e1e1e1;
+    border-radius: 8px;
+    box-sizing: border-box;
+    box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.07);
+    padding: 20px;
+    position: relative;
+    margin-bottom: 20px;
+  }
+  .delete_label{
+    position: absolute;
+    right: 2%;
+    top: 20px;
+  }
 </style>

src/views/floor/list.vue

@@ -2,11 +2,11 @@
   <div class="app-container">
     <div class="filter-container">
       <div class="filter-control">
-        <el-button type="primary" icon="el-icon-sort" @click="handleOnInputBlur(formItem,index)">一键排序</el-button>
+        <el-button type="primary" icon="el-icon-sort" @click="getList">一键排序</el-button>
         <el-button type="primary" icon="el-icon-plus" @click="handleToEdit('add')">添加楼层</el-button>
       </div>
     </div>
-    <p style="margin: 0;line-height: 24px;font-size: 14px;color: #999;">注：排序值越小越靠前</p>
+    <p style="margin: 0;line-height: 24px;font-size: 14px;color: #999;">注：1. 排序值越小越靠前</p>
     <el-table
       v-loading="listLoading"
       :data="list"
@@ -16,25 +16,21 @@
       highlight-current-row
       :header-cell-style="{background:'#eef1f6',color:'#606266'}"
     >
-      <el-table-column label="楼层名称" align="center" prop="classifyName" />
-      <el-table-column class-name="status-col" label="状态" align="center" prop="status" width="100">
+      <el-table-column label="楼层名称" align="center" prop="topic" />
+      <el-table-column label="排序值" align="center" prop="sort">
         <template slot-scope="{row}">
-          <el-tooltip :content="row.status*1 === 1 ? '停用' : '启用'" placement="top">
-            <el-switch
-              v-model="row.status"
-              active-value="1"
-              inactive-value="0"
-              @change="changeStatus(row.id, row.status)"
-            />
-          </el-tooltip>
+          <el-input-number v-model="row.sort" controls-position="right" :min="0" :max="999" :maxlength="3" size="mini" style="width:65px;" @change="handleSort(row)" />
         </template>
       </el-table-column>
-      <el-table-column label="排序值" align="center" prop="sort" width="100">
+      <el-table-column class-name="status-col" label="状态" align="center" prop="enabledStatus">
         <template slot-scope="{row}">
-          <el-input-number v-model="row.sort" controls-position="right" :min="1" :max="999" :maxlength="3" size="mini" style="width:65px;" />
+          <el-tag v-if="row.enabledStatus===0" type="danger" size="small">已启用</el-tag>
+          <el-tag v-else type="success" size="small">已停用</el-tag>
+          <el-button v-if="row.enabledStatus === 0" type="primary" size="mini" @click="handleShangeStatus(row.id,row.enabledStatus)">启用</el-button>
+          <el-button v-else type="primary" size="mini" @click="handleShangeStatus(row.id,row.enabledStatus)">停用</el-button>
         </template>
       </el-table-column>
-      <el-table-column align="center" label="创建时间" prop="addTime">
+      <el-table-column align="center" label="添加时间" prop="addTime">
         <template slot-scope="{row}">
           <span>{{ row.addTime | parseTime('{y}-{m}-{d} {h}:{i}:{s}') }}</span>
         </template>
@@ -42,7 +38,7 @@
       <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
         <template slot-scope="{row}">
           <el-button type="primary" size="mini" @click="handleToEdit('edit',row.id)">编辑</el-button>
-          <el-button type="danger" size="mini" @click="handleDelete(row)">删除</el-button>
+          <el-button type="danger" size="mini" @click="handleDelete(row.id)">删除</el-button>
         </template>
       </el-table-column>
     </el-table>
@@ -53,20 +49,10 @@
 </template>
 
 <script>
-import { getCategory, switchClassify, saveCategorySort } from '@/api/goods-classify'
-import Pagination from '@/components/Pagination'
+import { getFloorList, getFloorStatus, getFloorSort, delPageFloor } from '@/api/floor'
 
 export default {
-  components: { Pagination },
-  filters: {
-    statusFilter(status) {
-      const statusMap = {
-        1: 'success',
-        0: 'danger'
-      }
-      return statusMap[status]
-    }
-  },
+  name: 'FloorList',
   data() {
     return {
       list: null,
@@ -75,55 +61,77 @@ export default {
       listQuery: {
         index: 1,
         pageSize: 20,
-        organizeID: this.$store.getters.organizeId
+        enabledStatus: '',
+        organizeId: this.$store.getters.organizeId
       }
     }
   },
   computed: {
-    organizeID() {
-      return this.$store.getters.organizeId
-    }
+
   },
   created() {
     this.getList()
   },
   methods: {
-    getList() {
+    // 获取轮播图列表
+    async getList() {
       this.listLoading = true
-      getCategory(this.listQuery).then(response => {
-        this.list = response.data.results
-        this.total = response.data.totalRecord
+      try {
+        const res = await getFloorList(this.listQuery)
+        this.list = res.data.results
+        this.total = res.data.totalRecord
         this.listLoading = false
-      })
+      } catch (error) {
+        console.log('error', error)
+      }
     },
-    changeStatus(id, status) {
-      const confirmTxt = '确定要' + (status * 1 === 1 ? '启用' : '停用') + '该分类吗？'
+    // 操作上下线
+    handleShangeStatus(id, status) {
+      let confirmTxt = ''
+      if (status === 1) {
+        confirmTxt = '确定下线该菜单吗？下线后将从小程序隐藏。'
+      } else {
+        confirmTxt = '确定上线该菜单吗？上线后将重新在小程序显示。'
+      }
       this.$confirm(confirmTxt).then(_ => {
-        this.confirmChange(id)
+        this.getFloorStatus(id)
       }).catch(() => {
         this.getList()
       })
     },
-    confirmChange(id) {
-      switchClassify({ id: id }).then(() => {
-        this.getList()
-      }).catch(() => {
+    // 上下线轮播图
+    async getFloorStatus(id) {
+      try {
+        await getFloorStatus(id)
+        this.$message({ message: '操作成功', type: 'success' })
         this.getList()
-      })
+      } catch (error) {
+        console.log('error', error)
+      }
+    },
+    // 修改排序
+    async handleSort(row) {
+      try {
+        await getFloorSort(row.id, row.sort)
+        // this.getList()
+      } catch (error) {
+        console.log('error', error)
+      }
     },
-    batchSaveSort() {
-      const sorts = []
-      this.list.map(item => {
-        if (item.sort) {
-          sorts.push(item.id + '-' + Math.abs(item.sort))
-        }
+    // 删除菜单
+    handleDelete(id) {
+      this.$confirm('确定删除该菜单吗？').then(_ => {
+        this.delPageFloor(id)
       })
-      saveCategorySort({ newProducSorttList: sorts.join(',') }).then(response => {
-        this.$message({ message: response.msg, type: 'success', center: true })
-        this.getList()
-      }).catch(() => {
+    },
+    async delPageFloor(id) {
+      try {
+        await delPageFloor(id)
+        this.$message({ message: '操作成功', type: 'success' })
         this.getList()
-      })
+      } catch (error) {
+        console.log('error', error)
+      }
     },
     // 跳转添加/编辑
     handleToEdit(type, id) {

src/views/goods/category-create.vue

@@ -71,7 +71,7 @@ export default {
       loadImgLoading: false,
       temp: {
         id: '',
-        organizeID: this.$store.getters.organizeId,
+        organizeId: this.$store.getters.organizeId,
         classifyName: '',
         classifyImage: '',
         sort: '',
@@ -92,7 +92,7 @@ export default {
     classifyId: function() {
       return window.location.href.split('/').reverse()[0]
     },
-    organizeID() {
+    organizeId() {
       return this.$store.getters.organizeId
     },
     actionUrl() {

src/views/goods/category-edit.vue

@@ -71,7 +71,7 @@ export default {
       loadImgLoading: false,
       temp: {
         id: '',
-        organizeID: this.$store.getters.organizeId,
+        organizeId: this.$store.getters.organizeId,
         classifyName: '',
         classifyImage: '',
         sort: '',
@@ -92,7 +92,7 @@ export default {
     classifyId: function() {
       return window.location.href.split('/').reverse()[0]
     },
-    organizeID() {
+    organizeId() {
       return this.$store.getters.organizeId
     },
     actionUrl() {

src/views/goods/category.vue

@@ -84,12 +84,12 @@ export default {
       listQuery: {
         index: 1,
         pageSize: 20,
-        organizeID: this.$store.getters.organizeId
+        organizeId: this.$store.getters.organizeId
       }
     }
   },
   computed: {
-    organizeID() {
+    organizeId() {
       return this.$store.getters.organizeId
     }
   },

src/views/goods/list-commonly.vue

@@ -137,7 +137,7 @@ export default {
       listQuery: {
         index: 1,
         pageSize: 10,
-        organizeID: this.$store.getters.organizeId,
+        organizeId: this.$store.getters.organizeId,
         commonlyProduct: '1', // 常用商品
         id: '',
         productName: '',
@@ -147,7 +147,7 @@ export default {
     }
   },
   computed: {
-    organizeID() {
+    organizeId() {
       return this.$store.getters.organizeId
     },
     onKeypress() {
@@ -160,7 +160,7 @@ export default {
   },
   methods: {
     getModuleType() {
-      getModule({ organizeID: this.$store.getters.organizeId }).then(response => {
+      getModule({ organizeId: this.$store.getters.organizeId }).then(response => {
         this.modules = response.data[0]
       })
     },

src/views/goods/list-preferential.vue

@@ -137,7 +137,7 @@ export default {
       listQuery: {
         index: 1,
         pageSize: 10,
-        organizeID: this.$store.getters.organizeId,
+        organizeId: this.$store.getters.organizeId,
         preferentialProduct: '1', // 星范精品
         id: '',
         productName: '',
@@ -147,7 +147,7 @@ export default {
     }
   },
   computed: {
-    organizeID() {
+    organizeId() {
       return this.$store.getters.organizeId
     },
     onKeypress() {
@@ -160,7 +160,7 @@ export default {
   },
   methods: {
     getModuleType() {
-      getModule({ organizeID: this.$store.getters.organizeId }).then(response => {
+      getModule({ organizeId: this.$store.getters.organizeId }).then(response => {
         this.modules = response.data[0]
       })
     },

src/views/goods/list-preferred.vue

@@ -137,7 +137,7 @@ export default {
       listQuery: {
         index: 1,
         pageSize: 10,
-        organizeID: this.$store.getters.organizeId,
+        organizeId: this.$store.getters.organizeId,
         preferredProduct: '1', // 星范优选
         id: '',
         productName: '',
@@ -147,7 +147,7 @@ export default {
     }
   },
   computed: {
-    organizeID() {
+    organizeId() {
       return this.$store.getters.organizeId
     },
     onKeypress() {
@@ -160,7 +160,7 @@ export default {
   },
   methods: {
     getModuleType() {
-      getModule({ organizeID: this.$store.getters.organizeId }).then(response => {
+      getModule({ organizeId: this.$store.getters.organizeId }).then(response => {
         this.modules = response.data[0]
       })
     },

src/views/goods/list-select.vue

@@ -122,7 +122,7 @@ export default {
       listQuery: {
         index: 1,
         pageSize: 10,
-        organizeID: this.$store.getters.organizeId,
+        organizeId: this.$store.getters.organizeId,
         id: '',
         productName: '',
         shopName: '',
@@ -135,7 +135,7 @@ export default {
     moduleId: function() {
       return window.location.href.split('/').reverse()[0] * 1
     },
-    organizeID() {
+    organizeId() {
       return this.$store.getters.organizeId
     }
   },
@@ -145,7 +145,7 @@ export default {
   },
   methods: {
     getModuleType() {
-      getModule({ organizeID: this.$store.getters.organizeId }).then(response => {
+      getModule({ organizeId: this.$store.getters.organizeId }).then(response => {
         this.modules = response.data[0]
       })
     },
@@ -216,7 +216,7 @@ export default {
       this.multipleSelection.map(item => {
         itemsList.push(item.id)
       })
-      saveAddList({ itemsList: JSON.stringify(itemsList), organizeID: this.$store.getters.organizeId, modules: this.moduleId }).then(response => {
+      saveAddList({ itemsList: JSON.stringify(itemsList), organizeId: this.$store.getters.organizeId, modules: this.moduleId }).then(response => {
         this.$message({ message: response.msg, type: 'success', center: true })
         this.backToParentPath()
       }).catch(() => {

src/views/goods/list.vue

@@ -117,7 +117,7 @@ export default {
       listQuery: {
         index: 1,
         pageSize: 10,
-        organizeID: this.$store.getters.organizeId,
+        organizeId: this.$store.getters.organizeId,
         productName: '',
         shopName: '',
         validFlag: '' // '商品状态,1已上架,2已下架',
@@ -129,7 +129,7 @@ export default {
     }
   },
   computed: {
-    organizeID() {
+    organizeId() {
       return this.$store.getters.organizeId
     }
   },

src/views/order/list.vue

@@ -218,7 +218,7 @@ export default {
       listQuery: {
         index: 1,
         pageSize: 20,
-        organizeID: this.$store.getters.organizeId,
+        organizeId: this.$store.getters.organizeId,
         orderID: '',
         orderNo: '',
         buyer: '',
@@ -250,7 +250,7 @@ export default {
     }
   },
   computed: {
-    organizeID() {
+    organizeId() {
       return this.$store.getters.organizeId
     }
   },

src/views/order/refund-detail.vue

@@ -1,221 +1,382 @@
 <template>
   <div class="app-container">
-
-    <!--<el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal">
-      <el-menu-item index="1" @click="backToList">用户退款列表</el-menu-item>
-      <el-menu-item index="2">用户退款详情</el-menu-item>
-    </el-menu>-->
-    <div class="app-header-top" style="width: 100%;float: right;margin-bottom: 10px;">
-      <div class="app-title">用户退款详情</div>
-      <el-button type="primary" icon="el-icon-back" style="float: right;" @click="backToList">返回</el-button>
+    <div class="filter-container" style="text-align: right;">
+      <el-button v-print="printObj" type="primary">打印</el-button>
+      <el-button plain @click="backToList">返回</el-button>
     </div>
-
-    <el-card v-for="refund in refundList" :key="refund.orderID" class="box-card">
-      <h1>退款单</h1>
-      <div class="refund-item">
-        <el-row :gutter="24" class="box-row">
-          <el-col :span="6"><b>退款编号:</b> {{ refund.returnedNo }}</el-col>
-          <el-col :span="6"><b>申请时间:</b> <template v-if="refund.returnTime">{{ refund.returnTime | parseTime('{y}-{m}-{d} {h}:{i}:{s}') }}</template></el-col>
-          <el-col :span="6"><b>申请金额:</b> ¥{{ refund.refundFee | toThousandFloatFilter }}</el-col>
-          <el-col :span="6"><b>退款状态:</b>
-            <el-tag v-if="refund.status*1===1" type="warning" size="small">待审核</el-tag>
-            <el-tag v-if="refund.status*1===2" type="success" size="small">审核通过</el-tag>
-            <el-tag v-if="refund.status*1===3" type="danger" size="small">审核不通过</el-tag>
-          </el-col>
-        </el-row>
-        <el-row :gutter="24" class="box-row">
-          <el-col :span="20"><b>退款方式:</b>
-            <template v-if="refund.returnedWay*1===4">未支付无退款</template>
-            <template v-else-if="refund.returnedWay*1===1">
-              <span v-if="refund.refundBalanceFee*1 !== 0">余额账户:¥{{ refund.refundBalanceFee | toThousandFloatFilter }}</span>
-              <span v-if="refund.refundOnlineFee*1 !== 0">线上退回:¥{{ refund.refundOnlineFee | toThousandFloatFilter }}</span>
-              <span v-if="refund.refundOfflineFee*1 !== 0">线下转账:¥{{ refund.refundOfflineFee | toThousandFloatFilter }}</span>
-            </template>
-            <template v-else>----</template>
-          </el-col>
-        </el-row>
-        <template v-if="refund.returnedWay*1===1 && refund.refundOfflineFee*1!==0">
+    <div id="printBox" style="margin: 0 auto;">
+      <h1 class="app-title">退款单</h1>
+      <el-card ref="print" class="box-card" style="margin: 5px auto;">
+        <div class="refund-item">
           <el-row :gutter="24" class="box-row">
-            <el-col v-if="refund.refundFee" :span="12"><b>退款银行:</b>
-              <template v-if="refund.payType*1===1">建设银行7297</template>
-              <template v-else-if="refund.payType*1===2">中信银行0897</template>
-              <template v-else-if="refund.payType*1===3">中信银行7172</template>
-              <template v-else-if="refund.payType*1===4">广发银行0115</template>
-              <template v-else-if="refund.payType*1===5">广发银行5461</template>
-            </el-col>
-            <el-col v-else :span="12">暂无支付方式</el-col>
+            <el-col :span="7"><b>退款编号：</b> T1678087730239854</el-col>
+            <el-col :span="6"><b>申请时间：</b> 2023-03-06 15:28:50</el-col>
+            <el-col :span="4"><b>申请金额：</b> 30000.00元</el-col>
+            <el-col :span="3"><b>退款状态：</b> 审核通过</el-col>
           </el-row>
           <el-row :gutter="24" class="box-row">
-            <el-col :span="6"><b>开户名:</b> {{ refund.bankAccountName ? refund.bankAccountName : '' }}</el-col>
-            <el-col :span="6"><b>账号:</b> {{ refund.bankAccountNo ? refund.bankAccountNo : '' }}</el-col>
-            <el-col :span="6"><b>开户行:</b> {{ refund.openBank ? refund.openBank : '' }}</el-col>
-            <el-col :span="6"><b>账户类型:</b>
-              <el-tag v-if="refund.bankAccountType*1===1" type="warning" size="small">公账</el-tag>
-              <el-tag v-if="refund.bankAccountType*1===2" type="danger" size="small">私账</el-tag>
-            </el-col>
+            <el-col :span="24"><b>退款方式：</b> 线上退回：597.00元</el-col>
           </el-row>
-        </template>
-      </div>
-
-      <div class="refund-item">
-        <template v-if="order">
+        </div>
+      </el-card>
+      <el-card ref="print" class="box-card" style="margin: 5px auto;">
+        <div class="refund-item">
           <el-row :gutter="24" class="box-row">
-            <el-col :span="6"><b>订单编号(ID):</b> {{ order.orderNo + '(' + order.orderID + ')' }}</el-col>
-            <el-col :span="6"><b>下单时间:</b> <template v-if="order.orderTime">{{ order.orderTime | parseTime('{y}-{m}-{d} {h}:{i}:{s}') }}</template></el-col>
-            <el-col :span="6"><b>订单状态:</b>
-              <template v-if="['11','12','13','21','22','23','31','32','33'].indexOf(order.status)>=0">
-                <el-tag type="success" size="small">{{ '交易中('+statusObj[order.status]+')' }}</el-tag>
-              </template>
-              <template v-else>
-                <el-tag :type="order.status*1===6?'info':''" size="small">{{ statusObj[order.status] }}</el-tag>
-              </template>
-            </el-col>
+            <el-col :span="7"><b>订单编号(ID)：</b> {{ repacts.orderNo }}({{ repacts.orderId }})</el-col>
+            <el-col :span="6"><b>下单时间：</b> {{ repacts.applyTime }}</el-col>
+            <el-col :span="4"><b>订单状态：</b> 交易中</el-col>
           </el-row>
           <el-row :gutter="24" class="box-row">
-            <el-col :span="6"><b>订单金额:</b>¥{{ order.payTotalFee | toThousandFloatFilter }}</el-col>
-            <el-col :span="6"><b>应收总额:</b>¥{{ order.payableAmount | toThousandFloatFilter }}</el-col>
-            <el-col :span="6"><b>经理折扣:</b>¥{{ order.discountFee | toThousandFloatFilter }}</el-col>
-            <el-col :span="6"><b>运费:</b>
-              <template v-if="order.freight*1===0">包邮</template>
-              <template v-else-if="order.freight*1===-1">到付</template>
-              <template v-else-if="order.freight*1===-2">仪器到付-产品包邮</template>
-              <template v-else>¥{{ order.freight | toThousandFloatFilter }}</template>
-            </el-col>
+            <el-col :span="7"><b>订单金额：</b> {{ repacts.payableAmount }}</el-col>
+            <el-col :span="6"><b>应收金额：</b> {{ repacts.payableAmount }}</el-col>
+            <el-col :span="4"><b>机构运费：</b> 包邮</el-col>
           </el-row>
           <el-row :gutter="24" class="box-row">
-            <el-col :span="6"><b>收款状态:</b>
-              <el-tag v-if="order.receiptStatus*1===1" type="danger" size="small">待收款</el-tag>
-              <el-tag v-if="order.receiptStatus*1===2" type="warning" size="small">部分收款</el-tag>
-              <el-tag v-if="order.receiptStatus*1===3" type="success" size="small">已收款</el-tag>
-            </el-col>
-            <el-col :span="6"><b>退款状态:</b>
-              <el-tag v-if="order.refundType*1===1" type="warning" size="small">部分退款</el-tag>
-              <el-tag v-else-if="order.refundType*1===2" type="danger" size="small">已退款</el-tag>
-              <el-tag v-else type="info" size="small">无退款</el-tag>
-            </el-col>
-            <el-col :span="6"><b>发货状态:</b>
-              <el-tag v-if="order.sendOutStatus*1===1" type="danger" size="small">待发货</el-tag>
-              <el-tag v-if="order.sendOutStatus*1===2" type="warning" size="small">部分发货</el-tag>
-              <el-tag v-if="order.sendOutStatus*1===3" type="success" size="small">已发货</el-tag>
-            </el-col>
+            <el-col :span="7"><b>收款状态：</b> {{ repacts.status | statusFilter }}</el-col>
+            <el-col :span="6"><b>发货状态：</b> {{ repacts.status | statusFilter }}</el-col>
+            <el-col :span="4"><b>付款状态：</b> {{ repacts.status | statusFilter }}</el-col>
+            <el-col :span="4"><b>退款状态：</b> {{ repacts.status | statusFilter }}</el-col>
           </el-row>
-          <el-row v-if="order.bpOrderUserinfo" :gutter="24" class="box-row">
-            <el-col :span="6"><b>买家:</b> {{ order.bpOrderUserinfo.name }}</el-col>
-            <el-col :span="6"><b>收货人:</b> {{ order.bpOrderUserinfo.shouHuoRen }}</el-col>
-            <el-col :span="6"><b>手机:</b> {{ order.bpOrderUserinfo.mobile }}</el-col>
-            <el-col :span="6"><b>地址:</b> {{ order.bpOrderUserinfo.province +' '+ order.bpOrderUserinfo.city +' '+ order.bpOrderUserinfo.town +' '+ order.bpOrderUserinfo.address }}</el-col>
+          <el-row :gutter="24" class="box-row">
+            <el-col :span="7"><b>机构名称：</b> {{ repacts.clubName }}</el-col>
+            <el-col :span="6"><b>收货人：</b> 黄志国(15817887257)</el-col>
+            <el-col :span="11"><b>地址：</b> 广东省深圳市龙华区大浪街道上早新村</el-col>
           </el-row>
-        </template>
-      </div>
-      <div class="refund-item">
-        <div v-for="shopOrder in refund.shopOrderReturnedList" :key="shopOrder.shopOrderID" class="order-item">
-          <el-row :gutter="22" class="box-row">
-            <el-col :span="9"><b>子订单号(ID):</b> {{ shopOrder.shopOrderNo + '(' + shopOrder.shopOrderID + ')' }}</el-col>
-            <el-col :span="5"><b>子订单金额:</b> ¥{{ shopOrder.productAmount | toThousandFloatFilter }}</el-col>
-            <el-col :span="5"><b>发货状态:</b>
-              <el-tag v-if="shopOrder.sendOutStatus*1===1" type="danger" size="small">待发货</el-tag>
-              <el-tag v-if="shopOrder.sendOutStatus*1===2" type="warning" size="small">部分发货</el-tag>
-              <el-tag v-if="shopOrder.sendOutStatus*1===3" type="success" size="small">已发货</el-tag>
-            </el-col>
+          <el-table :data="repacts.shopOrderIdList" border fit highlight-current-row default-expand-all :header-cell-style="{background:'#e9f3f7',color:'#606266'}">
+            <el-table-column label="商品信息" type="expand" width="110">
+              <template slot-scope="scope">
+                <el-table :data="scope.row.products" border fit highlight-current-row :header-cell-style="{background:'#f9f9f9',color:'#606266'}">
+                  <el-table-column label="商品图片" align="center" prop="image" width="100">
+                    <template slot-scope="{row}">
+                      <el-popover
+                        placement="top-start"
+                        title=""
+                        width="120"
+                        trigger="hover"
+                      >
+                        <img :src="row.image" alt="" style="width:100px;height:100px;">
+                        <img slot="reference" :src="row.image" alt="" style="width:50px;height:50px;">
+                      </el-popover>
+                    </template>
+                  </el-table-column>
+                  <el-table-column label="商品名" align="center" prop="productName" />
+                  <el-table-column label="规格" align="center" prop="unit" />
+                  <el-table-column label="购买数量" align="center" prop="num" width="100" />
+                  <el-table-column label="退货" align="center" prop="returnNum" width="100" />
+                  <el-table-column label="单价" align="center" prop="price" />
+                  <el-table-column label="总额" align="center" prop="totalPrice" />
+                  <el-table-column label="已发货" align="center" prop="num" width="100" />
+                  <el-table-column label="已退货" align="center" prop="num" width="100" />
+                  <el-table-column label="本次退货" align="center" prop="num" width="100" />
+                  <el-table-column label="待发货" align="center" prop="num" width="100" />
+                  <el-table-column label="已取消" align="center" prop="num" width="100" />
+                  <el-table-column label="本次取消" align="center" prop="num" width="100" />
+                </el-table>
+              </template>
+            </el-table-column>
+            <el-table-column label="子订单编号(ID)" align="center" prop="shopOrderNos">
+              <template slot-scope="scope">
+                <span>{{ scope.row.shopOrderNos }}({{ scope.row.shopOrderIds }})</span>
+              </template>
+            </el-table-column>
+            <el-table-column label="子订单金额" align="center" prop="payShopTotals" />
+            <el-table-column label="收款状态" prop="status" align="center">
+              <template slot-scope="{ row }">
+                <span
+                  :class="{
+                    'el-span-warning': row.status == 0,
+                    'el-span-success': row.status == 1,
+                    'el-span-danger': row.status == 2
+                  }"
+                >
+                  待收款
+                </span>
+              </template>
+            </el-table-column>
+            <el-table-column label="发货状态" prop="status" align="center">
+              <template slot-scope="{ row }">
+                <span
+                  :class="{
+                    'el-span-warning': row.status == 0,
+                    'el-span-success': row.status == 1,
+                    'el-span-danger': row.status == 2
+                  }"
+                >
+                  待发货
+                </span>
+              </template>
+            </el-table-column>
+            <el-table-column label="付款状态" prop="status" align="center">
+              <template slot-scope="{ row }">
+                <span
+                  :class="{
+                    'el-span-warning': row.status == 0,
+                    'el-span-success': row.status == 1,
+                    'el-span-danger': row.status == 2
+                  }"
+                >
+                  待付款
+                </span>
+              </template>
+            </el-table-column>
+            <el-table-column label="供应商" align="center" prop="shopName" />
+          </el-table>
+        </div>
+      </el-card>
+      <el-card ref="print" class="box-card" style="margin: 5px auto;">
+        <div class="refund-item">
+          <h1 class="refund-item-title">审核信息</h1>
+          <el-row :gutter="24" class="box-row">
+            <el-col :span="5"><b>审核人：</b> 卢海珠</el-col>
+            <el-col :span="6"><b>审核时间：</b> 2023-03-06 15:28:50</el-col>
+            <el-col :span="11"><b>审核备注：</b> 没有货了</el-col>
           </el-row>
-          <el-row :gutter="22" class="box-row">
-            <el-col :span="22"><b>供应商:</b> {{ shopOrder.shopName }}</el-col>
+        </div>
+      </el-card>
+      <el-card ref="print" class="box-card" style="margin: 5px auto;">
+        <div class="refund-item">
+          <h1 class="refund-item-title">申请信息</h1>
+          <el-row :gutter="24" class="box-row">
+            <el-col :span="5"><b>申请人：</b> 卢海珠</el-col>
+            <el-col :span="6"><b>申请时间：</b> 2023-03-06 15:28:50</el-col>
+            <el-col :span="11"><b>退款备注：</b> 有部分没有货，客户需要重新下单</el-col>
           </el-row>
-          <el-row v-for="op in shopOrder.cmReturnedPurchaseProductList" :key="op.orderProductID" :gutter="22" class="product-row">
-            <el-col :span="1.5">
-              <img :src="op.mainImage" width="60" alt="">
-            </el-col>
-            <el-col :span="7">{{ op.name }}</el-col>
-            <el-col :span="5">
-              <div class="op-item"><b>单价:</b> ¥{{ op.price | toThousandFloatFilter }}</div>
-              <div class="op-item"><b>已发货:</b> {{ op.num - op.notOutStore }}</div>
-              <div class="op-item"><b>待发货:</b> {{ op.notOutStore - op.cancelProductNum }}</div>
-            </el-col>
-            <el-col :span="5">
-              <div class="op-item"><b>数量:</b> {{ op.num }}</div>
-              <div class="op-item"><b>已退货:</b> {{ op.returnedPurchaseProductNum }}</div>
-              <div class="op-item"><b>已取消:</b> {{ op.cancelProductNum }}</div>
-            </el-col>
-            <el-col :span="5">
-              <div class="op-item"><b>总额:</b> ¥{{ op.totalFee | toThousandFloatFilter }}</div>
-              <div class="op-item"><b>本次退货:</b> {{ op.actualReturnedNum ? op.actualReturnedNum : 0 }}</div>
-              <div class="op-item"><b>本次取消:</b> {{ op.actualCancelNum ? op.actualCancelNum : 0 }}</div>
-            </el-col>
+        </div>
+      </el-card>
+      <el-card ref="print" class="box-card" style="margin: 5px 0 0 0;">
+        <div class="refund-item">
+          <el-row :gutter="24" class="box-row">
+            <el-col :span="14"><b>申请退款金额：</b> 30000.00元</el-col>
+            <el-col :span="5"><b>财务签名：</b> </el-col>
+            <el-col :span="5"><b>总经理签名：</b> </el-col>
           </el-row>
         </div>
-      </div>
-
-      <div class="refund-item">
-        <h3>审核信息</h3>
-        <el-row :gutter="24" class="box-row">
-          <el-col :span="6"><b>审核人:</b> {{ refund.reviewUserName }}</el-col>
-          <el-col :span="6"><b>审核时间:</b> {{ refund.confirmReturnTime }}</el-col>
-        </el-row>
-        <el-row>
-          <el-col :span="24"><b>审核备注:</b> {{ refund.reviewRemarks ? refund.reviewRemarks : '无' }}</el-col>
-        </el-row>
-        <el-row v-if="refund.reviewImage1 || refund.reviewImage2 || refund.reviewImage3 || refund.reviewImage4 || refund.reviewImage5 " :gutter="24" class="box-row">
-          <el-col :span="2"><b>审核凭证:</b></el-col>
-        </el-row>
-        <el-row>
-          <el-col :span="22">
-            <img v-if="refund.reviewImage1" :src="refund.reviewImage1" width="65" alt="">
-            <img v-if="refund.reviewImage2" :src="refund.reviewImage2" width="65" alt="">
-            <img v-if="refund.reviewImage3" :src="refund.reviewImage3" width="65" alt="">
-            <img v-if="refund.reviewImage4" :src="refund.reviewImage4" width="65" alt="">
-            <img v-if="refund.reviewImage5" :src="refund.reviewImage5" width="65" alt="">
-          </el-col>
-
-        </el-row>
-      </div>
-      <div class="refund-item">
-        <h3>申请信息</h3>
-        <el-row :gutter="24" class="box-row">
-          <el-col :span="6"><b>申请人:</b> {{ refund.applicationUserName }}</el-col>
-          <el-col :span="6"><b>申请时间:</b> <template v-if="refund.returnTime">{{ refund.returnTime | parseTime('{y}-{m}-{d} {h}:{i}:{s}') }}</template></el-col>
-        </el-row>
-        <el-row>
-          <el-col :span="24"><b>退款备注:</b> {{ refund.remarks ? refund.remarks : '无' }}</el-col>
-        </el-row>
-        <el-row v-if="refund.image1 || refund.image2 || refund.image3 || refund.image4 || refund.image5 " :gutter="24" class="box-row">
-          <el-col :span="2"><b>申请凭证:</b></el-col>
-        </el-row>
-        <el-row>
-          <el-col :span="22">
-            <img v-if="refund.image1" :src="refund.image1" width="65" alt="">
-            <img v-if="refund.image2" :src="refund.image2" width="65" alt="">
-            <img v-if="refund.image3" :src="refund.image3" width="65" alt="">
-            <img v-if="refund.image4" :src="refund.image4" width="65" alt="">
-            <img v-if="refund.image5" :src="refund.image5" width="65" alt="">
-          </el-col>
-        </el-row>
-      </div>
-      <div class="refund-item">
-        <el-row :gutter="24" class="box-row">
-          <el-col :span="6"><b>申请退款金额:</b> ¥{{ refund.refundFee | toThousandFloatFilter }}</el-col>
-          <el-col :span="6"><b>财务签名:</b></el-col>
-          <el-col :span="6"><b>总经理签名:</b></el-col>
-        </el-row>
-      </div>
-    </el-card>
-
-    <template>
-      <el-backtop style="right: 40px; bottom: 40px;">
-        <i class="el-icon-upload2" />
-      </el-backtop>
-    </template>
+      </el-card>
+    </div>
   </div>
 </template>
 
 <script>
-import { getRefundDetail } from '@/api/order'
+import { getDetail, getRemarks } from '@/api/order'
 export default {
+  name: 'RefundRecord',
+  filters: {
+    statusFilter(status) {
+      const map = {
+        0: '待付款',
+        1: '已付款',
+        2: '审核不通过'
+      }
+      return map[status]
+    }
+  },
   data() {
     return {
+      printObj: {
+        id: 'printBox', // 局部打印的<div> Id
+        popTitle: '', // 打印配置页上方标题
+        extraHead: '', // 最上方的头部文字，附加在head标签上的额外标签,使用逗号分隔
+        preview: '', // 是否启动预览模式，默认是false（开启预览模式，可以先预览后打印）
+        previewTitle: '', // 打印预览的标题（开启预览模式后出现）,
+        previewPrintBtnLabel: '', // 打印预览的标题的下方按钮文本，点击可进入打印（开启预览模式后出现）
+        zIndex: '', // 预览的窗口的z-index，默认是 20002（此值要高一些，这涉及到预览模式是否显示在最上面）
+        previewBeforeOpenCallback() {}, // 预览窗口打开之前的callback（开启预览模式调用）
+        previewOpenCallback() {}, // 预览窗口打开之后的callback（开启预览模式调用）
+        beforeEntryIframe() {
+          const cells = document.querySelectorAll('.cell')
+          const tableNode = document.querySelectorAll('.el-table__header,.el-table__body')
+          // el-table 打印不全的问题
+          for (let j = 0; j < tableNode.length; j++) {
+            const tableItem = tableNode[j]
+            tableItem.style.width = '100%'
+            const child = tableItem.childNodes
+            for (let i = 0; i < child.length; i++) {
+              const element = child[i]
+              if (element.localName === 'colgroup') {
+                element.innerHTML = ''
+              }
+            }
+          }
+          // el-table 格子里面打印超过格子的问题
+          for (let i = 0; i < cells.length; i++) {
+            const cell = cells[i]
+            cell.style.width = '100%'
+            cell.removeAttribute('style')
+          }
+        },
+        openCallback() {
+
+        }, // 调用打印之后的回调事件
+        closeCallback() {}, // 关闭打印的回调事件（无法确定点击的是确认还是取消）
+        url: '',
+        standard: '',
+        extraCss: '',
+        loading: false
+      },
+      payRepacts: {
+        name: '卢海珠',
+        account: '6214 8328 2826 4957 ',
+        accountBank: '中国建设银行',
+        accountType: '公账'
+      },
+      repacts: {
+        id: 7580,
+        name: '卢海珠',
+        account: '6214 8328 2826 4957 ',
+        accountBank: '中国建设银行',
+        accountType: '公账',
+        type: '子订单付款',
+        shopName: '采美信息技术有限公司',
+        payableAmount: '20000.00',
+        shopOrderNo: 'P1682650952091471001',
+        shopOrderId: '19747',
+        orderNo: 'P16265095220221471',
+        orderId: '18179',
+        clubName: '广州白云区松洲蒂亚美容院',
+        applyMan: '路海珠',
+        applyTime: '2020-01-01:20:30:56',
+        verifyMan: '李昕',
+        verifyTime: '2020-01-01:20:30:56',
+        status: 0,
+        totalProduct: '3000.00',
+        payShopTotal: '3000.00',
+        childOrderId: ['P16265095220221471', 'P16265095220221471', 'P16265095220221471'],
+        shopOrderIdList: [
+          {
+            shopName: '采美信息技术有限公司',
+            shopOrderNos: 'P1682650952091471001',
+            shopOrderIds: '19747',
+            orderNos: 'P16265095220221471',
+            orderIds: '18179',
+            clubNames: '广州白云区松洲蒂亚美容院',
+            applyMans: '路海珠',
+            applyTimes: '2020-01-01:20:30:56',
+            verifyMans: '李昕',
+            verifyTimes: '2020-01-01:20:30:56',
+            statuss: 0,
+            totalProducts: '3000.00',
+            payShopTotals: '3000.00',
+            products: [
+              {
+                image: 'https://img.caimei365.com/group1/M00/00/1E/rB-lF2JgwmuAfQQrAAE3BA2cBSY028.jpg',
+                productName: '阶雪山之恋保滋润面霜吖',
+                unit: '50ml',
+                num: 3,
+                returnNum: 0,
+                price: '2000.00',
+                totalPrice: '6000.00',
+                costPrice: '1000.00',
+                totalCostPrice: '3000.00'
+              },
+              {
+                image: 'https://img.caimei365.com/group1/M00/00/1E/rB-lF2JgwmuAfQQrAAE3BA2cBSY028.jpg',
+                productName: '阶雪山之恋保滋润面霜吖',
+                unit: '50ml',
+                num: 3,
+                returnNum: 0,
+                price: '2000.00',
+                totalPrice: '6000.00',
+                costPrice: '1000.00',
+                totalCostPrice: '3000.00'
+              }
+            ]
+          },
+          {
+            shopName: '采美信息技术有限公司',
+            shopOrderNos: 'P1682650952091471001',
+            shopOrderIds: '19747',
+            orderNos: 'P16265095220221471',
+            orderIds: '18179',
+            clubNames: '广州白云区松洲蒂亚美容院',
+            applyMans: '路海珠',
+            applyTimes: '2020-01-01:20:30:56',
+            verifyMans: '李昕',
+            verifyTimes: '2020-01-01:20:30:56',
+            statuss: 0,
+            totalProducts: '3000.00',
+            payShopTotals: '3000.00',
+            products: [
+              {
+                image: 'https://img.caimei365.com/group1/M00/00/1E/rB-lF2JgwmuAfQQrAAE3BA2cBSY028.jpg',
+                productName: '阶雪山之恋保滋润面霜吖',
+                unit: '50ml',
+                num: 3,
+                returnNum: 0,
+                price: '2000.00',
+                totalPrice: '6000.00',
+                costPrice: '1000.00',
+                totalCostPrice: '3000.00'
+              },
+              {
+                image: 'https://img.caimei365.com/group1/M00/00/1E/rB-lF2JgwmuAfQQrAAE3BA2cBSY028.jpg',
+                productName: '阶雪山之恋保滋润面霜吖',
+                unit: '50ml',
+                num: 3,
+                returnNum: 0,
+                price: '2000.00',
+                totalPrice: '6000.00',
+                costPrice: '1000.00',
+                totalCostPrice: '3000.00'
+              }
+            ]
+          }
+        ]
+      },
+      products: [
+        {
+          productName: '阶雪山之恋保滋润面霜吖',
+          unit: '50ml',
+          num: 3,
+          returnNum: 0,
+          price: '2000.00',
+          totalPrice: '6000.00',
+          costPrice: '1000.00',
+          totalCostPrice: '3000.00',
+          verifyTimes: '2020-01-01:20:30:56'
+        },
+        {
+          productName: '阶雪山之恋保滋润面霜吖',
+          unit: '50ml',
+          num: 3,
+          returnNum: 0,
+          price: '2000.00',
+          totalPrice: '6000.00',
+          costPrice: '1000.00',
+          totalCostPrice: '3000.00',
+          verifyTimes: '2020-01-01:20:30:56'
+        },
+        {
+          productName: '阶雪山之恋保滋润面霜吖',
+          unit: '50ml',
+          num: 3,
+          returnNum: 0,
+          price: '2000.00',
+          totalPrice: '6000.00',
+          costPrice: '1000.00',
+          totalCostPrice: '3000.00',
+          verifyTimes: '2020-01-01:20:30:56'
+        },
+        {
+          productName: '阶雪山之恋保滋润面霜吖',
+          unit: '50ml',
+          num: 3,
+          returnNum: 0,
+          price: '2000.00',
+          totalPrice: '6000.00',
+          costPrice: '1000.00',
+          totalCostPrice: '3000.00',
+          verifyTimes: '2020-01-01:20:30:56'
+        }
+      ],
       activeIndex: '2',
-      bpClauses: [],
       order: null,
-      refundList: [],
+      receiptAmount: 0,
+      returnValue: 0,
+      returnedPurchaseFee: 0,
+      bpClauses: null,
+      dialogRemarkList: [],
+      dialogRemarksVisible: false,
+      dialogRemarksOrderId: 0,
       statusObj: {
         '0': '待确认',
         '4': '交易完成',
@@ -236,32 +397,38 @@ export default {
   },
   computed: {
     orderID: function() {
-      return this.$route.query.orderID
-    },
-    refundId: function() {
-      return this.$route.params.id
+      return this.$route.query.orderID * 1
     }
   },
   created() {
-    this.fetchData()
+    // this.fetchData()
   },
   methods: {
     fetchData() {
       this.listLoading = true
-      getRefundDetail({ id: this.refundId, orderID: this.orderID }).then(response => {
+      getDetail({ id: this.orderID }).then(response => {
         this.order = response.data.order
         this.bpClauses = response.data.bpClauses
-        this.refundList = response.data.cmReturnedPurchaseList
+        this.receiptAmount = response.data.receiptAmount
+        this.returnValue = response.data.returnValue
+        this.returnedPurchaseFee = response.data.returnedPurchaseFee
         this.listLoading = false
       }).catch(() => {
         this.listLoading = false
       })
     },
+    RemarksOrder: function(id) {
+      getRemarks({ orderID: id }).then(response => {
+        this.dialogRemarkList = response.data
+      })
+      this.dialogRemarksOrderId = id
+      this.dialogRemarksVisible = true
+    },
     backToList() {
       this.$store.dispatch('tagsView/delView', this.$route).then(() => {
         this.$nextTick(() => {
           this.$router.replace({
-            path: '/order/refund'
+            path: '/finance/list'
           })
         })
       })
@@ -272,21 +439,12 @@ export default {
 
 <style scoped>
   .app-title{
-    float: left;
-    line-height: 36px;
-    font-size: 18px;
+    line-height: 32px;
+    font-size: 24px;
     font-weight: bold;
-    color: #999999;
-  }
-  h1{
     color: #409EFF;
-    font-size: 24px;
     text-align: center;
-  }
-  h3{
-    color: #409EFF;
-    font-size: 16px;
-    margin: 0;
+    margin: 10px 0;
   }
   .box-card{
     margin-top: 20px;
@@ -295,15 +453,22 @@ export default {
   .box-row{
     padding: 10px 0;
   }
+  .box-row .dropdown{
+    margin-top: -10px;
+  }
   .refund-item{
-    border-bottom:1px dashed #E4E7ED;
-    margin-bottom: 20px;
+    padding: 5px 0;
+  }
+  .refund-item-title{
+    line-height: 24px;
+    font-size: 14px;
+    color: #409EFF;
+    margin: 0;
   }
   .order-item{
-    border-bottom: 1px solid #DCDFE6;
-    background:#F2F6FC;
-    margin-top: 20px;
-    padding: 5px 15px 0;
+    background:#f7f7f7;
+    margin-bottom: 20px;
+    padding: 10px 15px;
     border-radius: 5px;
   }
   .product-row{
@@ -314,5 +479,20 @@ export default {
   .op-item{
     padding: 5px 0;
   }
+  .el-span-warning{
+  color: #E6A23C;
+  }
+  .el-span-success{
+    color: #67C23A;
+  }
+  .el-span-danger{
+    color: #F56C6C;
+  }
+  /deep/ .el-table__expanded-cell[class*=cell]{
+    padding:10px 10px !important;
+  }
+  /deep/ .el-card__body{
+    padding: 5px 20px !important;
+  }
 </style>
 

src/views/order/refund.vue

@@ -1,51 +1,48 @@
 <template>
   <div class="app-container">
     <div class="filter-container">
-      <el-form ref="searchForm" :inline="true" class="demo-form-inline">
-        <el-form-item label="退款编号:" style="width:215px;float: left;">
-          <el-input v-model="listQuery.returnedNo" placeholder="退款编号" style="width: 140px;" class="filter-item" @keyup.enter.native="handleFilter" />
-        </el-form-item>
-        <el-form-item label="订单ID:" style="width:180px;float: left;">
-          <el-input v-model="listQuery.orderID" type="number" oninput="if(value.length>9)value=value.slice(0,9)" placeholder="订单ID" style="width: 120px;" class="filter-item" @keyup.enter.native="handleFilter" />
-        </el-form-item>
-        <el-form-item label="订单编号:" style="width:215px;float: left;">
-          <el-input v-model="listQuery.orderNo" placeholder="订单编号" style="width: 140px;" class="filter-item" @keyup.enter.native="handleFilter" />
-        </el-form-item>
-        <el-form-item label="机构:" style="width:190px;float: left;">
-          <el-input v-model="listQuery.userName" placeholder="机构名称" style="width: 140px;" class="filter-item" @keyup.enter.native="handleFilter" />
-        </el-form-item>
-        <el-form-item label="退款审核状态:" style="width:240px;float: left;">
-          <el-select v-model="listQuery.status" placeholder="退款审核状态" clearable style="width: 130px" class="filter-item" value="" @change="handleFilter">
-            <el-option label="待审核" value="1" />
-            <el-option label="审核通过" value="2" />
-            <el-option label="审核不通过" value="3" />
-          </el-select>
-        </el-form-item>
-        <el-form-item class="date-box" label="申请时间:" style="width:405px;float: left;">
-          <el-date-picker
-            v-model="listQuery.beginReturnTime"
-            style="width:150px"
-            type="date"
-            placeholder="请选择时间"
-            format="yyyy-MM-dd"
-            value-format="yyyy-MM-dd"
-          />
-          至
-          <el-date-picker
-            v-model="listQuery.endReturnTime"
-            style="width:150px"
-            type="date"
-            placeholder="请选择时间"
-            format="yyyy-MM-dd"
-            value-format="yyyy-MM-dd"
-          />
-        </el-form-item>
-        <el-form-item style="width:100px;float: left;">
-          <el-button class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">查询</el-button>
-        </el-form-item>
-      </el-form>
+      <div class="filter-control">
+        <span>退款编号:</span>
+        <el-input v-model="listQuery.returnedNo" style="width:130px;" placeholder="退款编号" clearable @keyup.enter.native="getList" @clear="getList" />
+      </div>
+      <div class="filter-control">
+        <span>订单ID:</span>
+        <el-input v-model="listQuery.orderID" style="width:130px;" placeholder="订单ID" clearable @keyup.enter.native="getList" @clear="getList" />
+      </div>
+      <div class="filter-control">
+        <span>订单编号:</span>
+        <el-input v-model="listQuery.orderNo" style="width:130px;" placeholder="订单编号" clearable @keyup.enter.native="getList" @clear="getList" />
+      </div>
+      <div class="filter-control">
+        <span>机构名称:</span>
+        <el-input v-model="listQuery.orderID" style="width:130px;" placeholder="机构名称" clearable @keyup.enter.native="getList" @clear="getList" />
+      </div>
+      <div class="filter-control">
+        <span>退款审核状态:</span>
+        <el-select v-model="listQuery.status" style="width:120px;" clearable @change="getList">
+          <el-option value="" label="所有" />
+          <el-option label="待审核" value="1" />
+          <el-option label="审核通过" value="2" />
+          <el-option label="审核不通过" value="3" />
+        </el-select>
+      </div>
+      <div class="filter-control">
+        <span>申请时间:</span>
+        <el-date-picker
+          v-model="time"
+          type="daterange"
+          unlink-panels
+          range-separator="至"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+          :picker-options="pickerOptions"
+          @change="getList"
+        />
+      </div>
+      <div class="filter-control">
+        <el-button type="primary" icon="el-icon-search" @click="getList">查询</el-button>
+      </div>
     </div>
-
     <el-table
       v-loading="listLoading"
       :data="list"
@@ -93,14 +90,13 @@
           <span>{{ row.confirmReturnTime | parseTime('{y}-{m}-{d} {h}:{i}:{s}') }}</span>
         </template>
       </el-table-column>
-      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+      <el-table-column label="操作" align="center">
         <template slot-scope="{row}">
-          <router-link :to="'/order/refund/detail/' + row.id + '?orderID=' + row.orderID "><el-button type="primary" size="mini" style="width: 80px;margin:5px;">查看详情</el-button></router-link>
+          <el-button type="primary" size="mini" @click="handleDetailes(row)">查看详情</el-button>
         </template>
       </el-table-column>
     </el-table>
-
-    <pagination v-show="total>20" :total="total" :page.sync="listQuery.index" :limit.sync="listQuery.pageSize" @pagination="fetchData" />
+    <pagination v-show="total>20" :total="total" :page.sync="listQuery.index" :limit.sync="listQuery.pageSize" @pagination="getList" />
     <template>
       <el-backtop style="right: 40px; bottom: 40px;">
         <i class="el-icon-upload2" />
@@ -111,11 +107,12 @@
 
 <script>
 import { getRefundList } from '@/api/order'
-import Pagination from '@/components/Pagination'
+import pickerOptions from '@/utils/time-picker.js'
 export default {
-  components: { Pagination },
   data() {
     return {
+      time: '',
+      pickerOptions,
       list: null,
       listLoading: true,
       total: 0,
@@ -123,7 +120,7 @@ export default {
       listQuery: {
         index: 1,
         pageSize: 20,
-        organizeID: this.$store.getters.organizeId,
+        organizeId: this.$store.getters.organizeId,
         returnedNo: '',
         orderID: '',
         orderNo: '',
@@ -135,26 +132,36 @@ export default {
     }
   },
   computed: {
-    organizeID() {
-      return this.$store.getters.organizeId
-    }
+
   },
   created() {
-    this.fetchData()
+    this.getList()
   },
   methods: {
-    fetchData() {
+    async getList() {
       this.listLoading = true
-      getRefundList(this.listQuery).then(response => {
-        this.list = response.data.results
-        this.total = response.data.totalRecord
+      if (this.time && this.time.length > 0) {
+        this.listQuery.beginReturnTime = this.time[0]
+        this.listQuery.endReturnTime = this.time[1]
+      } else {
+        this.listQuery.beginReturnTime = ''
+        this.listQuery.endReturnTime = ''
+      }
+      try {
+        const res = await getRefundList(this.listQuery)
+        this.list = res.data.results
+        this.total = res.data.totalRecord
         this.listLoading = false
-      }).catch(() => {
+      } catch (error) {
+        console.log('error', error)
         this.listLoading = false
-      })
+      }
     },
     handleFilter() {
-      this.fetchData()
+      this.getList()
+    },
+    handleDetailes(row) {
+      this.$router.push({ path: '/order/refund-detail', query: { id: row.id }})
     }
   }
 }

src/views/other/about.vue

@@ -35,7 +35,7 @@ export default {
     }
   },
   computed: {
-    organizeID() {
+    organizeId() {
       return this.$store.getters.organizeId
     }
   },
@@ -44,7 +44,7 @@ export default {
   },
   methods: {
     initData() {
-      getOrganizeInfo({ id: this.organizeID }).then(response => {
+      getOrganizeInfo({ id: this.organizeId }).then(response => {
         this.introduction = response.data.introduction
         this.from.contactNumber = response.data.contactNumber
       })
@@ -56,7 +56,7 @@ export default {
             this.$message({ message: '内容不能为空', type: 'warning', center: true })
             return
           }
-          const Formobj = { id: this.organizeID, introduction: this.introduction }
+          const Formobj = { id: this.organizeId, introduction: this.introduction }
           const params = Object.assign(Formobj, this.from)
           this.loadingbut = true
           this.loadingbuttext = '提交中'

src/views/other/after.vue

@@ -24,7 +24,7 @@ export default {
     }
   },
   computed: {
-    organizeID() {
+    organizeId() {
       return this.$store.getters.organizeId
     }
   },
@@ -33,7 +33,7 @@ export default {
   },
   methods: {
     initData() {
-      getOrganizeInfo({ id: this.organizeID }).then(response => {
+      getOrganizeInfo({ id: this.organizeId }).then(response => {
         console.log(response)
         this.afterSale = response.data.afterSale
       })
@@ -45,7 +45,7 @@ export default {
       }
       this.loadingbut = true
       this.loadingbuttext = '提交中'
-      updateOrganizeInfo({ id: this.organizeID, afterSale: this.afterSale }).then(response => {
+      updateOrganizeInfo({ id: this.organizeId, afterSale: this.afterSale }).then(response => {
         this.$message({ message: response.msg, type: 'success', center: true })
         this.loadingbut = false
         this.loadingbuttext = '提交'

src/views/other/notes.vue

@@ -24,7 +24,7 @@ export default {
     }
   },
   computed: {
-    organizeID() {
+    organizeId() {
       return this.$store.getters.organizeId
     }
   },
@@ -33,7 +33,7 @@ export default {
   },
   methods: {
     initData() {
-      getOrganizeInfo({ id: this.organizeID }).then(response => {
+      getOrganizeInfo({ id: this.organizeId }).then(response => {
         console.log(response)
         this.shoppingNotes = response.data.shoppingNotes
       })
@@ -45,7 +45,7 @@ export default {
       }
       this.loadingbut = true
       this.loadingbuttext = '提交中'
-      updateOrganizeInfo({ id: this.organizeID, shoppingNotes: this.shoppingNotes }).then(response => {
+      updateOrganizeInfo({ id: this.organizeId, shoppingNotes: this.shoppingNotes }).then(response => {
         this.$message({ message: response.msg, type: 'success', center: true })
         this.loadingbut = false
         this.loadingbuttext = '提交'

src/views/other/password.vue

@@ -45,7 +45,7 @@ export default {
     }
   },
   computed: {
-    organizeID() {
+    organizeId() {
       return this.$store.getters.organizeId
     }
   },
@@ -69,7 +69,7 @@ export default {
             })
             return
           }
-          const Formobj = { organizeID: this.$store.getters.organizeId }
+          const Formobj = { organizeId: this.$store.getters.organizeId }
           const params = Object.assign(Formobj, this.from)
           this.fullscreenLoading = true
           changePassword(params).then(response => {