fe / yoho-shop-manage · Commits

Go to a project

Authored by OF1706
Commit 89aaa811ac8040ef3391efe16a5b127e6166b273 1 parent 53c0cf14

edit mod

Inline Side-by-side
Showing 5 changed files with 162 additions and 4 deletions
<template>
<div :class="classes" :style="styles" @click="back">
<slot>
<div class="back-top-dom-inner">
<i class="ivu-icon ivu-icon-chevron-up"></i>
</div>
</slot>
</div>
</template>
<script>
const prefixCls = 'back-top-dom';
export default {
name: 'back-top-dom',
props: {
height: {
type: Number,
default: 400
},
bottom: {
type: Number,
default: 30
},
right: {
type: Number,
default: 30
},
duration: {
type: Number,
default: 1000
}
},
data() {
return {
backTop: false
};
},
mounted() {
document.getElementsByClassName('layout-content')[0].addEventListener('scroll', this.handleScroll, true);
document.getElementsByClassName('layout-content')[0].addEventListener('resize', this.handleScroll, true);
},
beforeDestroy() {
document.getElementsByClassName('layout-content')[0].removeEventListener('scroll', this.handleScroll, false);
document.getElementsByClassName('layout-content')[0].removeEventListener('resize', this.handleScroll, false);
},
computed: {
classes() {
return [
`${prefixCls}`,
{
[`${prefixCls}-show`]: this.backTop
}
];
},
styles() {
return {
bottom: `${this.bottom}px`,
right: `${this.right}px`
};
},
},
methods: {
handleScroll() {
this.backTop = document.getElementsByClassName('layout-content')[0].scrollTop >= document.getElementsByClassName('layout-content')[0].clientHeight + 92;
},
back() {
const sTop = document.getElementsByClassName('layout-content')[0].scrollTop;
this.scrollTop(document.getElementsByClassName('layout-content')[0], sTop, 0, this.duration);
this.$emit('on-click');
},
scrollTop(el, from = 0, to, duration = 5000) {
const difference = Math.abs(from - to);
const step = Math.ceil(difference / duration * 50);
function scroll(start, end) {
if (start === end) {
return;
}
el.scrollTop = 0;
}
scroll(from, to, step);
}
}
};
</script>
<style lang="scss" scoped>
.back-top-dom {
position: fixed;
z-index: 10;
cursor: pointer;
display: none;
&.back-top-dom-show {
display: block;
}
.back-top-dom-inner {
background-color: rgba(0, 0, 0, 0.6);
border-radius: 2px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
transition: all 0.2s ease-in-out;
.ivu-icon {
display: inline-block;
font-family: Ionicons;
speak: none;
font-style: normal;
font-weight: 400;
font-variant: normal;
text-transform: none;
text-rendering: auto;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: #fff;
font-size: 24px;
padding: 8px 12px;
}
.ivu-icon-chevron-up:before {
content: "\F126";
}
}
}
</style>
... ...
... ... @@ -15,6 +15,7 @@ import FileUpload from './file-upload';
import DragFileUpload from './drag-file-upload';
import IFrame from './iframe';
import UploadXlsx from './upload-xlsx';
import BackTopDom from './back-top-dom';
export default {
LayoutUserInfo,
... ... @@ -33,5 +34,6 @@ export default {
FileUpload,
DragFileUpload,
IFrame,
UploadXlsx
UploadXlsx,
BackTopDom
};
... ...
... ... @@ -119,8 +119,9 @@
</checkbox-material>
</Form-item>
<Form-item>
<Button type="primary" @click="submit" size="large">保存</Button>
<Button type="primary" @click="submit" size="large" id="btnSave">保存</Button>
</Form-item>
<back-top-dom></back-top-dom>
</Form>
<Spin size="large" fix v-else-if="showLoading"></Spin>
<modal-example ref="example"></modal-example>
... ... @@ -138,6 +139,7 @@ export default {
return edit.call(this);
},
created() {
this.handleScrollBtn();
this.productService = new ProductService();
this.productCreateService = new ProductCreateService();
this.from = this.$route.query.from || this.from;
... ... @@ -176,7 +178,32 @@ export default {
this.showLoading = false;
});
},
mounted() {
if (document.getElementsByClassName('layout-content')[0]) {
document.getElementsByClassName('layout-content')[0].addEventListener('scroll', this.handleScrollBtn, true);
}
},
beforeDestroy() {
document.getElementsByClassName('layout-content')[0].addEventListener('scroll', this.handleScrollBtn, false);
},
methods: {
handleScrollBtn() {
if (document.getElementsByClassName('layout-content')[0]) {
let scrollPosition = document.getElementsByClassName('layout-content')[0].scrollTop > 600 &&
document.getElementsByClassName('layout-content')[0].scrollTop < 3000 ? true : false;
if (document.getElementById('btnSave')) {
if (scrollPosition === true) {
document.getElementById('btnSave').style.position = 'fixed';
document.getElementById('btnSave').style.top = 54 + 'px';
document.getElementById('btnSave').style.right = 40 + 'px';
} else {
document.getElementById('btnSave').style.position = 'initial';
}
}
}
},
removeColor(color) {
this.$refs.tableGood.syncData();
... ...
... ... @@ -19,7 +19,7 @@
<dd><label class="normal">不可售(其他)：</label>商品借出拍摄、测量或被有货其他渠道销售占用的库存等，不可在有货平台售卖，具体情况可联系品牌经理进行查询</dd>
</dl>
<dl>
<dd><label class="bold">库存总价：</label>全部商品库存的数量。其中，<span class="bold">可售库存，即作为商品在前台用于销售的库存，是有货仓库的可售库存和JIT可调拨库存的总和</span></dd>
<dd><label class="bold">库存总计：</label>全部商品库存的数量。其中，<span class="bold">可售库存，即作为商品在前台用于销售的库存，是有货仓库的可售库存和JIT可调拨库存的总和</span></dd>
</dl>
</div>
... ...
... ... @@ -26,7 +26,7 @@
<layout-list>
<Table border :columns="tableCols" :data="tableData" :no-data-text="noFilteredDataText"></Table>
<Page :total="pageData.total" :current="pageData.current"
@on-change="pageChange" show-total></Page>
@on-change="pageChange" :page-size="20" show-total></Page>
</layout-list>
<edit-intro ref="showImgEdit" @on-success="editSuccess"></edit-intro>
... ...