fix: 退款列表

src/utils/sticky.js

+
+/* 组件需要提供parent字段，指定表格的className（字符串） */
+const rafThrottle = (fn) => {
+  let locked = false;
+  return function (...args) {
+    if (locked) return;
+    locked = true;
+    window.requestAnimationFrame(_ => {
+      fn.apply(this, args);
+      locked = false;
+    });
+  };
+};
+export default {
+  mounted () {
+    this.containerDom = document.getElementsByClassName(this.scrollClass);
+    this.clearListener();
+    const timer = setTimeout(() => {
+      this.initFixedHeader();
+      clearTimeout(timer);
+    }, 300);
+    window.addEventListener('resize', this.resizeChange);
+  },
+  deactivated () {
+    this.clearListener();
+  },
+  beforeDestroy () {
+    this.clearListener();
+    // 取消监听窗口大小
+    window.removeEventListener('resize', this.resizeChange);
+  },
+  activated () {
+    this.initFixedHeader();
+    this.updateFixedRight();
+    window.addEventListener('resize', this.resizeChange);
+    const timer = setTimeout(() => {
+      const container = this.containerDom;
+      if (container[0].scrollTop > 0) {
+        container[0].scrollTop = container[0].scrollTop + 2;
+      }
+      clearTimeout(timer);
+    }, 1000);
+  },
+  methods: {
+    activatedReload () {
+      window.addEventListener('resize', this.resizeChange);
+      const timer = setTimeout(() => {
+        this.clearFixedStyle();
+        this.initFixedHeader();
+      }, 300);
+      this.timerList.push(timer);
+    },
+    reset () {
+      this.clearFixedStyle();
+    },
+    // 窗口大小变化时，初始化
+    resizeChange () {
+      this.headerDragend();
+      const timer = setTimeout(() => {
+        this.initFixedHeader();
+        clearTimeout(timer);
+      }, 300);
+    },
+    async initFixedHeader () {
+      if (this.parent) {
+        // console.log('启动监听，页面：', this.parent)
+        this.parentDom = document.getElementsByClassName(this.parent);
+        if (this.parentDom && this.parentDom.length !== 0) {
+          this.tableWidth = this.parentDom[0].querySelector('.el-table__header-wrapper').getBoundingClientRect().width;
+          this.setScrollXWidth();
+          this.tableDom = this.parentDom[0].getElementsByClassName('el-table__header-wrapper');
+          this.scrollDom = document.querySelector(`.${this.scrollClass}`);
+          this.scrollDom.addEventListener('scroll', this.scrollEvent);
+        }
+      }
+    },
+    // 清空监听事件
+    clearListener () {
+      if (this.scrollDom) {
+        this.scrollDom.removeEventListener('scroll', this.scrollEvent);
+        window.removeEventListener('resize', this.resizeChange);
+        this.clearFixedStyle();
+        // console.log('卸载监听,页面：', this.parent)
+        this.timerList.forEach(key => {
+          clearTimeout(key);
+        });
+      }
+    },
+    // 更新右侧固定栏
+    updateFixedRight () {
+      const { fixedRightHeaderDom, dom } = this.getFixedDom();
+      if (dom.classList.contains('fixed')) {
+        const timer = setTimeout(() => {
+          this.setFixedStyle({
+            dom: fixedRightHeaderDom,
+            left: this.fixedRightDom[0].getBoundingClientRect().left + 'px',
+            width: getComputedStyle(this.fixedRightDom[0]).width,
+            scrollLeft: fixedRightHeaderDom.scrollWidth,
+          });
+          clearTimeout(timer);
+        }, 100);
+      }
+    },
+    async headerDragend () {
+      await this.updateWidth();
+      await this.updateFixedRight();
+      this.setScrollXWidth();
+      // await this.updateHeaderHeight()
+    },
+    setScrollXWidth () {
+      const timer = setTimeout(() => {
+        if (!this.parentDom) this.parentDom = document.getElementsByClassName(this.parent);
+        if (this.parentDom.length == 0) return;
+        const dom = this.parentDom[0].querySelector('.el-table__header');
+        this.tableWidth = this.parentDom[0].querySelector('.el-table__body-wrapper').getBoundingClientRect().width;
+        this.tableDom[0].style.width = this.tableWidth + 'px';
+        this.updateHeaderHeight();
+        this.headerWidth = dom.style.width;
+        clearTimeout(timer);
+      }, 200);
+    },
+    // 更新表格宽度，（拖拽改变宽度时使用）
+    updateWidth () {
+      if (!this.parentDom) this.parentDom = document.getElementsByClassName(this.parent);
+      const bodyWrapperDom = this.parentDom[0].getElementsByClassName('el-table__body-wrapper')[0];
+      const width = getComputedStyle(bodyWrapperDom).width;// 表格宽度
+      // 给表格设置宽度。
+      const tableParent = this.tableDom;
+      for (let i = 0; i < tableParent.length; i++) {
+        tableParent[i].style.width = width;
+      }
+    },
+    getFixedDom () {
+      let fixedRightHeaderDom, fixedRightBox, fixedLeftHeaderDom, fixedLeftBox;
+      const dom = this.tableDom[0];
+      if (this.fixedLeftDom && this.fixedLeftDom[0]) {
+        const lefarr = this.fixedLeftDom[0].children;
+        fixedLeftHeaderDom = lefarr[0];
+        fixedLeftBox = lefarr[1];
+      }
+      if (this.fixedRightDom && this.fixedRightDom[0]) {
+        const rightarr = this.fixedRightDom[0].children;
+        fixedRightHeaderDom = rightarr[0];
+        fixedRightBox = rightarr[1];
+      }
+      return { fixedRightHeaderDom, fixedRightBox, fixedLeftHeaderDom, fixedLeftBox, dom };
+    },
+    // 更新表头高度，表头高度有可能改变
+    updateHeaderHeight () {
+      this.$nextTick(() => {
+        this.tableDom = this.parentDom[0].getElementsByClassName('el-table__header-wrapper');
+        const obj = this.tableDom[0].getBoundingClientRect();
+        if (obj.height != this.tablexy.height) {
+          this.tablexy.height = obj.height;
+          const { dom } = this.getFixedDom();
+          if (dom.classList.contains('fixed')) {
+            const timer = setTimeout(() => {
+              this.parentDom[0].getElementsByClassName('el-table__fixed-body-wrapper')[0].style.top = this.headerTop;
+              const container = this.containerDom;
+              if (container && container[0]) {
+                container[0].scrollTop = container[0].scrollTop + 3;
+              }
+              clearTimeout(timer);
+            }, 100);
+          }
+        }
+      });
+    },
+    // 获取表格属性
+    getTableXy () {
+      this.tablexy = this.tableDom[0].getBoundingClientRect();
+      this.tablexy.height = this.tableDom[0].offsetHeight;
+      return this.tablexy;
+    },
+    getDom () {
+      if (!this.parentDom) {
+        this.parentDom = document.getElementsByClassName(this.parent);
+      }
+    },
+    // 滚动事件
+    scrollEvent: rafThrottle(async function (e) {
+      this.getDom();
+      this.tableDom = this.parentDom[0].getElementsByClassName('el-table__header-wrapper');
+      if (this.tablexy.top == 0 || !this.tablexy.height || !this.tablexy.top) {
+        await this.getTableXy();
+      }
+      this.fixedRightDom = this.parentDom[0].getElementsByClassName('el-table__fixed-right');
+      this.fixedLeftDom = this.parentDom[0].getElementsByClassName('el-table__fixed');
+      const { height, top, left } = this.tablexy;
+      const scrollTop = e.target.scrollTop;
+      const { fixedRightHeaderDom, fixedRightBox, fixedLeftHeaderDom, fixedLeftBox, dom } = this.getFixedDom();
+      if (scrollTop >= height / 2 + top) {
+        // 存在右侧固定表头
+        if (fixedRightHeaderDom) {
+          this.setFixedStyle({
+            dom: fixedRightHeaderDom,
+            left: this.fixedRightDom[0].getBoundingClientRect().left + 'px',
+            width: getComputedStyle(this.fixedRightDom[0]).width,
+            scrollLeft: fixedRightHeaderDom.scrollWidth,
+          });
+          fixedRightBox.style.top = 0;
+        }
+        // 左侧固定
+        if (fixedLeftHeaderDom) {
+          this.setFixedStyle({
+            dom: fixedLeftHeaderDom,
+            left: left + 'px',
+            width: getComputedStyle(this.fixedLeftDom[0]).width,
+            scrollLeft: 0,
+          });
+          fixedLeftBox.style.top = 0;
+        }
+        dom.classList.add('fixed');// 加一个固定标识
+        this.updateWidth();
+        dom.style.position = 'fixed';
+        dom.style.zIndex = '2000';
+        dom.style.top = this.headerTop;
+        dom.style.overflow = 'hidden';
+      } else {
+        this.clearFixedStyle();
+      }
+    }),
+    // 设置固定
+    setFixedStyle (data) {
+      const { dom, scrollLeft, width, left } = data;
+      dom.style.zIndex = '2000';
+      dom.style.position = 'fixed';
+      dom.style.top = this.headerTop;
+      dom.scrollLeft = scrollLeft;
+      dom.style.width = width;
+      dom.style.overflow = 'hidden';
+      dom.style.left = left;
+    },
+    // 清除header固定
+    clearFixedStyle () {
+      if (!this.tableDom) return;
+      const { height, left } = this.tablexy;
+      const { dom, fixedRightHeaderDom, fixedRightBox, fixedLeftHeaderDom, fixedLeftBox } = this.getFixedDom();
+      if (dom.classList.contains('fixed')) {
+        if (fixedRightHeaderDom) {
+          fixedRightBox.style.top = height + 'px';
+          fixedRightHeaderDom.removeAttribute('style');
+        }
+
+        if (fixedLeftHeaderDom) {
+          fixedLeftHeaderDom.style.zIndex = '0';
+          fixedLeftHeaderDom.style.position = 'static';
+          fixedLeftHeaderDom.style.top = this.headerTop;
+          fixedLeftHeaderDom.style.left = left + 'px';
+          fixedLeftBox.style.top = getComputedStyle(dom).height;
+        }
+        dom.classList.remove('fixed');
+        dom.style.position = 'static';
+        dom.style.top = this.headerTop;
+        dom.style.zIndex = '0';
+      }
+    },
+  },
+  computed: {
+    __opened () {
+      return true;
+    },
+  },
+  watch: {
+    __opened () {
+      this.$nextTick(() => {
+        this.setScrollXWidth();
+      });
+    },
+  },
+  data () {
+    return {
+      tablexy: {}, // 表格的左边宽度信息
+      fixedRightDom: null, // 右侧
+      fixedLeftDom: null, // 左侧栏固定
+      scrollDom: null, // 滚动的dom
+      parentDom: null, // 表格的父元素dom
+      tableWidth: 0,
+      timerList: [],
+      tableDom: null,
+      containerDom: null,
+    };
+  },
+};

src/views/goods/coupon/detail.vue

@@ -477,6 +477,32 @@
               </p>
             </div>
           </div>
+          <div class="section-content">
+            <h3>售后服务</h3>
+            <el-form-item label="支持退款" prop="refund">
+               <el-radio v-model="couponForm.refund" :label="1">
+                否
+              </el-radio>
+              <el-radio v-model="couponForm.refund" :label="2">
+                是
+              </el-radio>
+            </el-form-item>
+            <el-form-item label="退款期限" prop="num">
+              <el-input-number v-model="couponForm.num"
+                controls-position="right"
+                :min="1"
+                :max="10"
+                style="width:130px"
+                :step="1"
+                step-strictly></el-input-number> 月
+            </el-form-item>
+            <el-form-item label="退款方式" prop="refundList">
+              <el-checkbox-group v-model="couponForm.refundList">
+                <el-checkbox label="主动退款"></el-checkbox>
+                <el-checkbox label="过期自动退款"></el-checkbox>
+              </el-checkbox-group>
+            </el-form-item>
+          </div>
 
           <!-- <div class="confim-btn" :style="{ width: fixedWidth + 'px' }">
             <el-form-item class="fix-btn">
@@ -611,6 +637,9 @@ export default {
         timeRangeList: [{ timeRange: '' }], // 部分时段数组
         timeZones: ['', ''],
         ladder: [],
+        refund: 1,
+        num: 1,
+        refundList: [],
       },
       uploadAction: getInputVal.uploadAction(),
       headersUpload: {
@@ -633,6 +662,7 @@ export default {
         exchangeDateDayArr: [{ required: true, message: '请选择时间', trigger: 'change' }],
         exchangeDateWeekArr: [{ required: true, message: '请选择时间', trigger: 'change' }],
         proName: [{ required: true, message: '请输入券包名称', trigger: 'blur' }],
+        refundList: [{ required: true, message: '请选择退款方式', trigger: 'blur' }],
       },
       validateTime,
       mallProId: '',

src/views/order/refundList.vue

@@ -39,6 +39,7 @@
                 >
                   <el-option label="仅退款" :value="1" />
                   <el-option label="退货退款" :value="2" />
+                  <el-option label="过期自动退" :value="3" />
                 </el-select>
               </div>
               <div class="search-item m-r-10">
@@ -90,7 +91,7 @@
         <el-tab-pane label="待退款" name="0" class="goods-table-content" />
         <el-tab-pane label="退款成功" name="1" class="goods-table-content" />
         <el-tab-pane label="退款关闭" name="2" class="goods-table-content" />
-        <div class="goods-list-content" v-loading="loading">
+        <div class="goods-list-content scroll_class" v-loading="loading">
           <el-table
             :data="tableData"
             ref="multipleTable"
@@ -160,6 +161,9 @@
                 <p v-if="scope.row.refundType === 2">
                   退货退款
                 </p>
+                <p v-if="scope.row.refundType === 3">
+                  过期自动退
+                </p>
               </template>
             </el-table-column>
             <el-table-column prop="definedCode" label="申请金额" min-width="120px">
@@ -289,6 +293,7 @@
 
 <script>
 import qs from 'qs';
+import sticky from '@/utils/sticky.js';
 import request from '../../service/request.js';
 import getInputVal from '../../utils/common.js';
 import closeRefund from './closeRefund';
@@ -296,6 +301,7 @@ import agreeRefund from './agreeRefund';
 import deliverModal from './delive';
 import memberInfo from '../../components/memberInfo';
 export default {
+  mixins: [sticky],
   components: {
     closeRefund,
     agreeRefund,
@@ -304,6 +310,9 @@ export default {
   },
   data () {
     return {
+      headerTop: '62px',
+      parent: 'scroll_class',
+      scrollClass: 'dm-layout-page',
       requestProject: 'integral-mall',
       placement: 'top-start',
       getTime: getInputVal.getTime,