黄涛 / yoho-dl-label-fe · Commits

Go to a project

Authored by 陈峰
Commit 91dbe31c2fda78f45ca49a4509e981c994ae0c8d 1 parent 750d54cf

commit

Inline Side-by-side
Showing 2 changed files with 68 additions and 31 deletions
... ... @@ -69,7 +69,7 @@
export default {
created() {
this.$router.push({name: 'similar.fast'})
this.$router.push({name: 'similar.list'})
},
methods: {
open(name) {
... ...
... ... @@ -2,9 +2,9 @@
<div class="fast-page">
<div v-if="current" class="fast-page-box">
<div class="example">
<img :src="current.product.url.replace('/w/78/h/78', '/w/300/h300')" alt="">
<img :src="current.product.url && current.product.url.replace('/w/78/h/78', '/w/300/h300')" alt="">
<div class="info">
从{{startOp.start}}到{{startOp.end}}的第{{currentPage + 1}}页
从{{startOp.start}}到{{startOp.end}}，共{{total}}的第{{currentPage + 1}}页
<Progress :percent="progress"></Progress>
</div>
<div class="help">
... ... @@ -16,6 +16,9 @@
<p>Shift + Up：全部勾选</p>
<p>Shift + Down：全部取消勾选</p>
</div>
<div class="posting">
提交状态：{{postingText}}
</div>
</div>
<div class="images">
<ul>
... ... @@ -27,7 +30,7 @@
'marking': index === markIndex,
'marked': img.isMark
}">
<div class="img-box">
<div class="img-box" @click="clickImage(index)">
<img :src="splitUrl(img.url)" alt="">
</div>
</li>
... ... @@ -74,21 +77,25 @@ export default {
return this.pageDatas[this.currentIndex];
}
},
total() {
return this.startOp.end - this.startOp.start + 1;
},
progress() {
return parseInt(((this.currentPage) / (this.startOp.end - this.startOp.start + 1)) * 10000, 10) / 100
return parseInt(((this.currentPage + 1) / (this.startOp.end - this.startOp.start + 1)) * 10000, 10) / 100
}
},
data() {
return {
startModel: false,
startModel: true,
startOp: {
start: 4700,
end: 4900
start: 0,
end: 0
},
currentPage: 0,
currentIndex: 0,
markIndex: 0,
pageDatas: [],
postingText: '等待编辑'
}
},
watch: {
... ... @@ -97,12 +104,10 @@ export default {
if ($img) {
const {top} = $img.getBoundingClientRect();
const offset = top - 200;
if (top > 418) {
this.$el.querySelector('.images').scrollTo(0, 200 + this.$el.querySelector('.images').scrollTop);
} else if (top < 200) {
this.$el.querySelector('.images').scrollTo(0, this.$el.querySelector('.images').scrollTop - 200);
}
this.$el.querySelector('.images').scrollTo(0, this.$el.querySelector('.images').scrollTop + offset);
}
}
},
... ... @@ -135,6 +140,8 @@ export default {
}
},
start() {
this.startOp.start = parseInt(this.startOp.start, 0);
this.startOp.end = parseInt(this.startOp.end, 0);
if (this.startOp.start > 0 && this.startOp.end > 0 && this.startOp.end > this.startOp.start) {
this.startModel = false;
this.loadNextPage(this.currentPage).then(list => {
... ... @@ -160,6 +167,7 @@ export default {
},
prevPage() {
this.post(this.current);
this.$el.querySelector('.images').scrollTo(0, 0);
if (this.currentIndex > 0) {
if (this.currentIndex % 10 === 0) {
this.currentPage--;
... ... @@ -170,7 +178,13 @@ export default {
},
nextPage() {
this.post(this.current);
if (this.currentIndex < (this.startOp.end - this.startOp.start + 1) * 10) {
this.$el.querySelector('.images').scrollTo(0, 0);
if (this.currentIndex >= this.total * 10 - 1) {
this.$Message.success('任务完成');
return;
}
if (this.currentIndex < this.total * 10 - 1) {
this.currentIndex++;
this.markIndex = 0;
if (this.pageDatas.length - (this.currentIndex + 1) <= 5) {
... ... @@ -178,17 +192,19 @@ export default {
this.pageDatas = this.pageDatas.concat(list);
});
}
if (this.currentIndex > 0 && this.currentIndex % 10 === 0) {
this.currentPage++;
}
}
if (this.currentIndex > 0 && this.currentIndex % 10 === 0 && this.currentPage < this.total) {
this.currentPage++;
}
},
loadImages(list) {
list.forEach(item => {
const purl = item.product.url.replace('/w/78/h/78', '/w/300/h300');
const imagep = new Image();
if (item.product.url) {
const purl = item.product.url.replace('/w/78/h/78', '/w/300/h300');
const imagep = new Image();
imagep.src = purl;
imagep.src = purl;
}
item.imageList.forEach(img => {
const url = this.splitUrl(img.url);
... ... @@ -213,29 +229,37 @@ export default {
this.markIndex++;
} else {
this.nextPage();
if (this.currentPage > this.startOp.end - 1) {
this.$Message.success('任务完成');
return;
}
}
}
},
selected() {
this.current.imageList[this.markIndex].isMark = true;
selected(index) {
this.current.imageList[index || this.markIndex].isMark = true;
this.current.imageList[index || this.markIndex]._change = true;
this.postingText = '编辑中。。。';
this.nextItem();
},
cancel() {
this.current.imageList[this.markIndex].isMark = false;
cancel(index) {
this.current.imageList[index || this.markIndex].isMark = false;
this.current.imageList[index || this.markIndex]._change = true;
this.postingText = '编辑中。。。';
this.nextItem();
},
clickImage(index) {
const img = this.current.imageList[index];
img.isMark = !img.isMark;
img._change = true;
},
allSelected() {
this.current.imageList.forEach(img => {
img.isMark = true;
img._change = true;
});
},
allUnSelected() {
this.current.imageList.forEach(img => {
img.isMark = false;
img._change = true;
});
},
post(item) {
... ... @@ -249,18 +273,26 @@ export default {
isMark: 0,
productId: item.product.productId
};
item.imageList.forEach(img => {
item.imageList.filter(img => img._change).forEach(img => {
if (img.isMark) {
confirms.imageId.push(img.imageId)
} else {
cancels.imageId.push(img.imageId)
}
});
const postPromise = [];
if (confirms.imageId.length) {
this.api.confirm(confirms)
postPromise.push(this.api.confirm(confirms));
}
if (cancels.imageId.length) {
this.api.cancel(cancels)
postPromise.push(this.api.cancel(cancels));
}
if (postPromise.length) {
this.postingText = '正在提交。。。。';
Promise.all(postPromise).then(() => {
this.postingText = '提交OK';
})
}
}
}
... ... @@ -290,6 +322,11 @@ export default {
width: 300px;
height: 300px;
}
.posting {
margin-top: 20px;
color: green;
}
}
.images {
flex: 1;
... ...