|
@@ -4,22 +4,40 @@
|
|
|
<i class="iconfont icon-top"></i>
|
|
|
</div>
|
|
|
<div class="tab">
|
|
|
- <span>{{ myWorks }} {{ workTotalNum !== undefined ? `(${workTotalNum})` : '' }}</span>
|
|
|
+ <span
|
|
|
+ >{{ myWorks }}
|
|
|
+ {{ workTotalNum !== undefined ? `(${workTotalNum})` : "" }}</span
|
|
|
+ >
|
|
|
<div class="tab-r">
|
|
|
<div class="filter">
|
|
|
- <div :class="{ active: isFilterFocus }" @focusin="onFilterFocus" @focusout="onFilterBlur">
|
|
|
+ <div
|
|
|
+ :class="{ active: isFilterFocus }"
|
|
|
+ @focusin="onFilterFocus"
|
|
|
+ @focusout="onFilterBlur"
|
|
|
+ >
|
|
|
<i class="iconfont iconworks_search search"></i>
|
|
|
- <input type="text" :placeholder="search" v-model="searchKey">
|
|
|
- <i v-if="searchKey" @click="searchKey = ''" class="iconfont icon-toast_red del"></i>
|
|
|
+ <input type="text" :placeholder="search" v-model="searchKey" />
|
|
|
+ <i
|
|
|
+ v-if="searchKey"
|
|
|
+ @click="searchKey = ''"
|
|
|
+ class="iconfont icon-toast_red del"
|
|
|
+ ></i>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="mask" v-show="isShowMask"></div>
|
|
|
<!-- 断网时,输入关键字触发网络请求后,骨架图的隐藏会触发v-infinite-scroll,原因未知。进而导致循环触发,因此list为空时要禁用v-infinite-scroll -->
|
|
|
- <ul class="w-list" v-if="!(list.length === 0 && !hasMoreData)" v-infinite-scroll="requestMoreData"
|
|
|
- :infinite-scroll-disabled="!hasMoreData || isRequestingMoreData || (list.length === 0)" ref="w-list-ref"
|
|
|
- @scroll.self="onWorkListScroll">
|
|
|
+ <ul
|
|
|
+ class="w-list"
|
|
|
+ v-if="!(list.length === 0 && !hasMoreData)"
|
|
|
+ v-infinite-scroll="requestMoreData"
|
|
|
+ :infinite-scroll-disabled="
|
|
|
+ !hasMoreData || isRequestingMoreData || list.length === 0
|
|
|
+ "
|
|
|
+ ref="w-list-ref"
|
|
|
+ @scroll.self="onWorkListScroll"
|
|
|
+ >
|
|
|
<li class="add-work" @click="add">
|
|
|
<div class="wrapper">
|
|
|
<div class="add-con">
|
|
@@ -31,21 +49,33 @@
|
|
|
</div>
|
|
|
</li>
|
|
|
<!-- 骨架图 -->
|
|
|
- <template v-if="isRequestingMoreData && (list.length === 0)">
|
|
|
+ <template v-if="isRequestingMoreData && list.length === 0">
|
|
|
<li v-for="index in 19" :key="index">
|
|
|
<div class="wrapper">
|
|
|
<workCardSkeleton></workCardSkeleton>
|
|
|
</div>
|
|
|
</li>
|
|
|
</template>
|
|
|
- <li v-for="(item, i) in list" :key="i" :class="{ 'has-more-data': hasMoreData }">
|
|
|
+ <li
|
|
|
+ v-for="(item, i) in list"
|
|
|
+ :key="i"
|
|
|
+ :class="{ 'has-more-data': hasMoreData }"
|
|
|
+ >
|
|
|
<div class="wrapper">
|
|
|
<div class="li-hover">
|
|
|
- <span class="lipreview" @click="handlePreview(item)">{{ preview }}</span>
|
|
|
+ <span class="lipreview" @click="handlePreview(item)">{{
|
|
|
+ preview
|
|
|
+ }}</span>
|
|
|
<ul class="oper">
|
|
|
- <li class="comfirmhover" @click="edit(item)"><i class="iconfont icon-works_editor"></i>{{ edittips }}</li>
|
|
|
- <li class="comfirmhover" @click="openShare(item)"><i class="iconfont icon-works_share"></i>{{ share }}</li>
|
|
|
- <li class="cancelhover" @click="del(item, i)"><i class="iconfont icon-works_delete"></i>{{ deltips }}</li>
|
|
|
+ <li class="comfirmhover" @click="edit(item)">
|
|
|
+ <i class="iconfont icon-works_editor"></i>{{ edittips }}
|
|
|
+ </li>
|
|
|
+ <li class="comfirmhover" @click="openShare(item)">
|
|
|
+ <i class="iconfont icon-works_share"></i>{{ share }}
|
|
|
+ </li>
|
|
|
+ <li class="cancelhover" @click="del(item, i)">
|
|
|
+ <i class="iconfont icon-works_delete"></i>{{ deltips }}
|
|
|
+ </li>
|
|
|
</ul>
|
|
|
</div>
|
|
|
<div class="img" @click="handlePreview(item)">
|
|
@@ -53,33 +83,58 @@
|
|
|
</div>
|
|
|
<div class="li-info">
|
|
|
<div>
|
|
|
- <span class="shenglve tttttt" :title="item.name || no_title">{{ item.name || no_title }}</span>
|
|
|
+ <span class="shenglve tttttt" :title="item.name || no_title">{{
|
|
|
+ item.name || no_title
|
|
|
+ }}</span>
|
|
|
</div>
|
|
|
<div>
|
|
|
- <span>{{ item.createTime.split(' ')[0] }}</span>
|
|
|
+ <span>{{ item.createTime.split(" ")[0] }}</span>
|
|
|
<div :title="item.visit">
|
|
|
- <i class="iconfont icon-works_look"></i>{{ item.visit > 10000 ? '1w+' : item.visit }}
|
|
|
+ <i class="iconfont icon-works_look"></i
|
|
|
+ >{{ item.visit > 10000 ? "1w+" : item.visit }}
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</li>
|
|
|
- <div class="work-list-loading-wrapper" v-show="isRequestingMoreData && (list.length !== 0)">
|
|
|
- <img class="work-list-loading" :src="require('@/assets/images/icons/work-list-loading.gif')" />
|
|
|
+ <div
|
|
|
+ class="work-list-loading-wrapper"
|
|
|
+ v-show="isRequestingMoreData && list.length !== 0"
|
|
|
+ >
|
|
|
+ <img
|
|
|
+ class="work-list-loading"
|
|
|
+ :src="require('@/assets/images/icons/work-list-loading.gif')"
|
|
|
+ />
|
|
|
</div>
|
|
|
</ul>
|
|
|
- <div class="nodata" v-if="list.length == 0 && !hasMoreData && lastestUsedSearchKey">
|
|
|
+ <div
|
|
|
+ class="nodata"
|
|
|
+ v-if="list.length == 0 && !hasMoreData && lastestUsedSearchKey"
|
|
|
+ >
|
|
|
<img :src="$noresult" alt="" />
|
|
|
<span>{{ no_search_result }}~</span>
|
|
|
</div>
|
|
|
- <div class="nodata" v-if="list.length == 0 && !hasMoreData && !lastestUsedSearchKey">
|
|
|
+ <div
|
|
|
+ class="nodata"
|
|
|
+ v-if="list.length == 0 && !hasMoreData && !lastestUsedSearchKey"
|
|
|
+ >
|
|
|
<img :src="config.empty" alt="" />
|
|
|
<span>{{ no_works }}</span>
|
|
|
<button @click="add" class="upload-btn-in-table">{{ create }}</button>
|
|
|
</div>
|
|
|
- <share :show='showShare' :item="shareItem" @close="showShare = false"></share>
|
|
|
- <preview v-if="showItem" :name="showItem.name" :show="showPreview"
|
|
|
- :ifr="`./show.html?id=${showItem.id}&lang=${$lang}`" :dark="false" @close="showPreview = false" />
|
|
|
+ <share
|
|
|
+ :show="showShare"
|
|
|
+ :item="shareItem"
|
|
|
+ @close="showShare = false"
|
|
|
+ ></share>
|
|
|
+ <preview
|
|
|
+ v-if="showItem"
|
|
|
+ :name="showItem.name"
|
|
|
+ :show="showPreview"
|
|
|
+ :ifr="`./show.html?id=${showItem.id}&lang=${$lang}`"
|
|
|
+ :dark="false"
|
|
|
+ @close="showPreview = false"
|
|
|
+ />
|
|
|
<div class="dialog" style="z-index: 1000" v-if="isShowMaterialSelector">
|
|
|
<MaterialSelector
|
|
|
:isDarkTheme="false"
|
|
@@ -95,17 +150,16 @@
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import share from '../popup/share'
|
|
|
+import share from "../popup/share";
|
|
|
import preview from "@/components/preview";
|
|
|
import workCardSkeleton from "@/components/workCardSkeleton.vue";
|
|
|
import config from "@/config";
|
|
|
-import { debounce } from "@/utils/other.js"
|
|
|
+import { debounce } from "@/utils/other.js";
|
|
|
import MaterialSelector from "@/components/materialSelector.vue";
|
|
|
import { mapGetters } from "vuex";
|
|
|
-import { i18n } from "@/lang"
|
|
|
+import { i18n } from "@/lang";
|
|
|
import { $waiting } from "@/components/shared/loading";
|
|
|
|
|
|
-
|
|
|
import {
|
|
|
addWorks,
|
|
|
getWorksList,
|
|
@@ -122,9 +176,7 @@ export default {
|
|
|
MaterialSelector,
|
|
|
},
|
|
|
computed: {
|
|
|
- ...mapGetters([
|
|
|
- 'info',
|
|
|
- ])
|
|
|
+ ...mapGetters(["info"]),
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
@@ -140,22 +192,21 @@ export default {
|
|
|
no_search_result: i18n.t("gather.no_search_result"),
|
|
|
select_material: i18n.t("gather.select_material"),
|
|
|
|
|
|
-
|
|
|
config,
|
|
|
list: [],
|
|
|
workTotalNum: undefined,
|
|
|
hasMoreData: true,
|
|
|
isRequestingMoreData: false,
|
|
|
|
|
|
- searchKey: '',
|
|
|
+ searchKey: "",
|
|
|
// 因为searchKey的变化经过debounce、异步请求的延时,才会反映到数据列表的变化上,所以是否显示、显示哪种无数据提示,也要等到数据列表变化后,根据数据列表是否为空,以及引发本次变化的那个searchKey瞬时值来决定。本变量就是用来保存那个瞬时值。
|
|
|
- lastestUsedSearchKey: '',
|
|
|
+ lastestUsedSearchKey: "",
|
|
|
isFilterFocus: false,
|
|
|
|
|
|
showShare: false,
|
|
|
showPreview: false,
|
|
|
- showItem: '',
|
|
|
- shareItem: '',
|
|
|
+ showItem: "",
|
|
|
+ shareItem: "",
|
|
|
|
|
|
isBackingTop: false,
|
|
|
isShowBackTopBtn: false,
|
|
@@ -163,11 +214,11 @@ export default {
|
|
|
isShowMask: false,
|
|
|
|
|
|
isShowMaterialSelector: false,
|
|
|
- newWorkId: '',
|
|
|
- }
|
|
|
+ newWorkId: "",
|
|
|
+ };
|
|
|
},
|
|
|
mounted() {
|
|
|
- this.requestMoreData()
|
|
|
+ this.requestMoreData();
|
|
|
},
|
|
|
watch: {
|
|
|
searchKey: {
|
|
@@ -175,33 +226,37 @@ export default {
|
|
|
if (val.length > 0) {
|
|
|
this.selectedList = [];
|
|
|
}
|
|
|
- this.refreshListDebounced()
|
|
|
+ this.refreshListDebounced();
|
|
|
},
|
|
|
immediate: false,
|
|
|
},
|
|
|
},
|
|
|
methods: {
|
|
|
onFilterFocus() {
|
|
|
- this.isFilterFocus = true
|
|
|
+ this.isFilterFocus = true;
|
|
|
},
|
|
|
onFilterBlur() {
|
|
|
- this.isFilterFocus = false
|
|
|
+ this.isFilterFocus = false;
|
|
|
},
|
|
|
- refreshListDebounced: debounce(function () {
|
|
|
- this.list = []
|
|
|
- this.isRequestingMoreData = false
|
|
|
- this.hasMoreData = true
|
|
|
- this.requestMoreData()
|
|
|
- }, 500, false),
|
|
|
+ refreshListDebounced: debounce(
|
|
|
+ function () {
|
|
|
+ this.list = [];
|
|
|
+ this.isRequestingMoreData = false;
|
|
|
+ this.hasMoreData = true;
|
|
|
+ this.requestMoreData();
|
|
|
+ },
|
|
|
+ 500,
|
|
|
+ false
|
|
|
+ ),
|
|
|
openShare(data) {
|
|
|
console.log(data);
|
|
|
getPanoInfo(data.id, (data) => {
|
|
|
if (data.scenes.length <= 0) {
|
|
|
return this.$msg.warning(this.$i18n.t("material.works.no_link"));
|
|
|
}
|
|
|
- this.showShare = true
|
|
|
- this.shareItem = data
|
|
|
- })
|
|
|
+ this.showShare = true;
|
|
|
+ this.shareItem = data;
|
|
|
+ });
|
|
|
},
|
|
|
|
|
|
handlePreview(item) {
|
|
@@ -211,22 +266,19 @@ export default {
|
|
|
}
|
|
|
this.showItem = {
|
|
|
...item,
|
|
|
- ...data
|
|
|
- }
|
|
|
- this.showPreview = true
|
|
|
- })
|
|
|
+ ...data,
|
|
|
+ };
|
|
|
+ this.showPreview = true;
|
|
|
+ });
|
|
|
},
|
|
|
add() {
|
|
|
// 新建作品,弹窗让用户给作品选择素材。
|
|
|
$waiting.show();
|
|
|
- addWorks(
|
|
|
- {},
|
|
|
- (res) => {
|
|
|
- $waiting.hide();
|
|
|
- this.newWorkId = res.data.id
|
|
|
- this.isShowMaterialSelector = true
|
|
|
- },
|
|
|
- )
|
|
|
+ addWorks({}, (res) => {
|
|
|
+ $waiting.hide();
|
|
|
+ this.newWorkId = res.data.id;
|
|
|
+ this.isShowMaterialSelector = true;
|
|
|
+ });
|
|
|
},
|
|
|
handleSubmitFromMaterialSelector(selected) {
|
|
|
$waiting.show();
|
|
@@ -238,24 +290,41 @@ export default {
|
|
|
// 往里边添加用户选中的素材。
|
|
|
this.$store.commit("SetInfo", data);
|
|
|
for (const item of selected) {
|
|
|
- if (item.materialType === 'pano') {
|
|
|
- this.info.scenes.push({
|
|
|
+ if (item.materialType === "pano") {
|
|
|
+ console.log(" this.info.scenes", this.info.scenes);
|
|
|
+ const newScene = {
|
|
|
icon: item.icon,
|
|
|
sceneCode: item.sceneCode,
|
|
|
sceneTitle: item.name,
|
|
|
category: this.info.catalogs[0].id,
|
|
|
type: "pano",
|
|
|
- id: 's_' + this.$randomWord(true, 8, 8)
|
|
|
- })
|
|
|
- } else if (item.materialType === '3D') {
|
|
|
- this.info.scenes.push({
|
|
|
+ id: "s_" + this.$randomWord(true, 8, 8),
|
|
|
+ };
|
|
|
+ if (this.info.scenes.length > 0) {
|
|
|
+ this.info.scenes[0] = Object.assign(
|
|
|
+ this.info.scenes[0],
|
|
|
+ newScene
|
|
|
+ );
|
|
|
+ } else {
|
|
|
+ this.info.scenes.push(newScene);
|
|
|
+ }
|
|
|
+ } else if (item.materialType === "3D") {
|
|
|
+ const newScene = {
|
|
|
icon: item.thumb,
|
|
|
sceneCode: item.num,
|
|
|
sceneTitle: item.sceneName,
|
|
|
category: this.info.catalogs[0].id,
|
|
|
type: "4dkk",
|
|
|
- id: 's_' + this.$randomWord(true, 8, 8)
|
|
|
- })
|
|
|
+ id: "s_" + this.$randomWord(true, 8, 8),
|
|
|
+ };
|
|
|
+ if (this.info.scenes.length > 0) {
|
|
|
+ this.info.scenes[0] = Object.assign(
|
|
|
+ this.info.scenes[0],
|
|
|
+ newScene
|
|
|
+ );
|
|
|
+ } else {
|
|
|
+ this.info.scenes.push(newScene);
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
|
|
@@ -263,117 +332,122 @@ export default {
|
|
|
saveWorks(
|
|
|
{
|
|
|
id: this.newWorkId,
|
|
|
- password: '',
|
|
|
+ password: "",
|
|
|
someData: {
|
|
|
...this.info,
|
|
|
status: 1,
|
|
|
- icon: this.info.scenes[0].icon
|
|
|
+ icon: this.info.scenes[0].icon,
|
|
|
},
|
|
|
},
|
|
|
// 保存成功
|
|
|
() => {
|
|
|
$waiting.hide();
|
|
|
// 隐藏素材选择弹窗
|
|
|
- this.isShowMaterialSelector = false
|
|
|
+ this.isShowMaterialSelector = false;
|
|
|
|
|
|
// 刷新作品列表
|
|
|
- this.list = []
|
|
|
- this.isRequestingMoreData = false
|
|
|
- this.hasMoreData = true
|
|
|
- this.requestMoreData().then(() => {
|
|
|
- // 刷新成功
|
|
|
-
|
|
|
- // 弹出提示窗口
|
|
|
- this.$confirm({
|
|
|
- title: this.$i18n.t('tips_code.tips'),
|
|
|
- content: this.$i18n.t("material.works.had_created"),
|
|
|
- okText: this.$i18n.t("material.works.goto_preview"),
|
|
|
- ok: () => {
|
|
|
- this.handlePreview(this.list[0])
|
|
|
- this.newWorkId = ''
|
|
|
- this.$store.commit("SetInfo", {});
|
|
|
- },
|
|
|
- ok2Text: this.$i18n.t("material.works.continue_edit"),
|
|
|
- ok2: () => {
|
|
|
- window.open(`./edit.html?id=${this.newWorkId}&lang=${this.$lang}`)
|
|
|
- this.newWorkId = ''
|
|
|
- this.$store.commit("SetInfo", {});
|
|
|
- },
|
|
|
+ this.list = [];
|
|
|
+ this.isRequestingMoreData = false;
|
|
|
+ this.hasMoreData = true;
|
|
|
+ this.requestMoreData()
|
|
|
+ .then(() => {
|
|
|
+ // 刷新成功
|
|
|
+
|
|
|
+ // 弹出提示窗口
|
|
|
+ this.$confirm({
|
|
|
+ title: this.$i18n.t("tips_code.tips"),
|
|
|
+ content: this.$i18n.t("material.works.had_created"),
|
|
|
+ okText: this.$i18n.t("material.works.goto_preview"),
|
|
|
+ ok: () => {
|
|
|
+ this.handlePreview(this.list[0]);
|
|
|
+ this.newWorkId = "";
|
|
|
+ this.$store.commit("SetInfo", {});
|
|
|
+ },
|
|
|
+ ok2Text: this.$i18n.t("material.works.continue_edit"),
|
|
|
+ ok2: () => {
|
|
|
+ window.open(
|
|
|
+ `./edit.html?id=${this.newWorkId}&lang=${this.$lang}`
|
|
|
+ );
|
|
|
+ this.newWorkId = "";
|
|
|
+ this.$store.commit("SetInfo", {});
|
|
|
+ },
|
|
|
+ });
|
|
|
+ })
|
|
|
+ .catch(() => {
|
|
|
+ this.$msg.message(
|
|
|
+ this.$i18n.t("material.works.had_created_but_no_link")
|
|
|
+ );
|
|
|
+ console.error("已成功新建作品,但刷新作品列表失败。");
|
|
|
});
|
|
|
- }).catch(() => {
|
|
|
- this.$msg.message(this.$i18n.t("material.works.had_created_but_no_link"))
|
|
|
- console.error('已成功新建作品,但刷新作品列表失败。')
|
|
|
- })
|
|
|
},
|
|
|
// 保存失败,删除新建的作品。
|
|
|
(error) => {
|
|
|
$waiting.hide();
|
|
|
- console.error('保存失败:', error);
|
|
|
- delWorks(this.newWorkId)
|
|
|
- this.newWorkId = ''
|
|
|
+ console.error("保存失败:", error);
|
|
|
+ delWorks(this.newWorkId);
|
|
|
+ this.newWorkId = "";
|
|
|
this.$store.commit("SetInfo", {});
|
|
|
}
|
|
|
);
|
|
|
},
|
|
|
// 没拿到,删除新建的作品。
|
|
|
(error) => {
|
|
|
- console.error('没拿到新建的作品数据:', error);
|
|
|
- delWorks(this.newWorkId)
|
|
|
- this.newWorkId = ''
|
|
|
+ console.error("没拿到新建的作品数据:", error);
|
|
|
+ delWorks(this.newWorkId);
|
|
|
+ this.newWorkId = "";
|
|
|
}
|
|
|
- )
|
|
|
+ );
|
|
|
},
|
|
|
edit(item) {
|
|
|
- window.open(`./edit.html?id=${item.id}&lang=${this.$lang}`)
|
|
|
+ window.open(`./edit.html?id=${item.id}&lang=${this.$lang}`);
|
|
|
},
|
|
|
del(item, index) {
|
|
|
this.$confirm({
|
|
|
title: this.$i18n.t("material.works.delete_work"),
|
|
|
content: this.$i18n.t("material.works.comfirm_delete"),
|
|
|
ok: () => {
|
|
|
-
|
|
|
$waiting.show();
|
|
|
|
|
|
delWorks(item.id, () => {
|
|
|
this.$msg.success(this.$i18n.t("gather.delete_success"));
|
|
|
- this.isRequestingMoreData = true
|
|
|
- const lastestUsedSearchKey = this.searchKey
|
|
|
+ this.isRequestingMoreData = true;
|
|
|
+ const lastestUsedSearchKey = this.searchKey;
|
|
|
getWorksList(
|
|
|
{
|
|
|
pageNum: this.list.length,
|
|
|
pageSize: 1,
|
|
|
- searchKey: this.searchKey
|
|
|
+ searchKey: this.searchKey,
|
|
|
},
|
|
|
(data) => {
|
|
|
$waiting.hide();
|
|
|
- this.list.splice(index, 1)
|
|
|
- this.list = this.list.concat(data.data.list)
|
|
|
+ this.list.splice(index, 1);
|
|
|
+ this.list = this.list.concat(data.data.list);
|
|
|
if (this.list.length === data.data.total) {
|
|
|
- this.hasMoreData = false
|
|
|
+ this.hasMoreData = false;
|
|
|
}
|
|
|
- this.isRequestingMoreData = false
|
|
|
- this.lastestUsedSearchKey = lastestUsedSearchKey
|
|
|
+ this.isRequestingMoreData = false;
|
|
|
+ this.lastestUsedSearchKey = lastestUsedSearchKey;
|
|
|
if (!lastestUsedSearchKey) {
|
|
|
- this.workTotalNum = data.data.total
|
|
|
+ this.workTotalNum = data.data.total;
|
|
|
}
|
|
|
// TODO: 这是干啥呢?
|
|
|
this.$nextTick(() => {
|
|
|
- this.$bus.emit('refreshTips')
|
|
|
- })
|
|
|
+ this.$bus.emit("refreshTips");
|
|
|
+ });
|
|
|
},
|
|
|
() => {
|
|
|
$waiting.hide();
|
|
|
- this.lastestUsedSearchKey = lastestUsedSearchKey
|
|
|
- this.isRequestingMoreData = false
|
|
|
+ this.lastestUsedSearchKey = lastestUsedSearchKey;
|
|
|
+ this.isRequestingMoreData = false;
|
|
|
}
|
|
|
- )
|
|
|
+ );
|
|
|
});
|
|
|
},
|
|
|
});
|
|
|
},
|
|
|
requestMoreData() {
|
|
|
- this.isRequestingMoreData = true
|
|
|
- const lastestUsedSearchKey = this.searchKey
|
|
|
+ this.isRequestingMoreData = true;
|
|
|
+ const lastestUsedSearchKey = this.searchKey;
|
|
|
return new Promise((resolve, reject) => {
|
|
|
getWorksList(
|
|
|
{
|
|
@@ -382,65 +456,67 @@ export default {
|
|
|
searchKey: this.searchKey,
|
|
|
},
|
|
|
(data) => {
|
|
|
- this.list = this.list.concat(data.data.list)
|
|
|
+ this.list = this.list.concat(data.data.list);
|
|
|
if (this.list.length === data.data.total) {
|
|
|
- this.hasMoreData = false
|
|
|
+ this.hasMoreData = false;
|
|
|
}
|
|
|
- this.isRequestingMoreData = false
|
|
|
- this.lastestUsedSearchKey = lastestUsedSearchKey
|
|
|
+ this.isRequestingMoreData = false;
|
|
|
+ this.lastestUsedSearchKey = lastestUsedSearchKey;
|
|
|
if (!lastestUsedSearchKey) {
|
|
|
- this.workTotalNum = data.data.total
|
|
|
+ this.workTotalNum = data.data.total;
|
|
|
}
|
|
|
// TODO: 这是干啥呢?
|
|
|
this.$nextTick(() => {
|
|
|
- this.$bus.emit('refreshTips')
|
|
|
- })
|
|
|
- resolve()
|
|
|
+ this.$bus.emit("refreshTips");
|
|
|
+ });
|
|
|
+ resolve();
|
|
|
},
|
|
|
() => {
|
|
|
- this.isRequestingMoreData = false
|
|
|
- this.lastestUsedSearchKey = lastestUsedSearchKey
|
|
|
- reject()
|
|
|
+ this.isRequestingMoreData = false;
|
|
|
+ this.lastestUsedSearchKey = lastestUsedSearchKey;
|
|
|
+ reject();
|
|
|
}
|
|
|
);
|
|
|
- })
|
|
|
+ });
|
|
|
},
|
|
|
onClickBackTop() {
|
|
|
if (this.isBackingTop) {
|
|
|
- return
|
|
|
+ return;
|
|
|
}
|
|
|
- this.isBackingTop = true
|
|
|
+ this.isBackingTop = true;
|
|
|
|
|
|
- const startTime = Date.now()
|
|
|
- const totalScroll = this.$refs['w-list-ref'].scrollTop
|
|
|
+ const startTime = Date.now();
|
|
|
+ const totalScroll = this.$refs["w-list-ref"].scrollTop;
|
|
|
const fn = () => {
|
|
|
- if (this.$refs['w-list-ref'].scrollTop === 0) {
|
|
|
- this.isBackingTop = false
|
|
|
- return
|
|
|
+ if (this.$refs["w-list-ref"].scrollTop === 0) {
|
|
|
+ this.isBackingTop = false;
|
|
|
+ return;
|
|
|
}
|
|
|
|
|
|
- const nowTime = Date.now()
|
|
|
- const assumeScrollTop = totalScroll - (nowTime - startTime) * totalScroll / 500
|
|
|
- this.$refs['w-list-ref'].scrollTop = assumeScrollTop > 0 ? assumeScrollTop : 0
|
|
|
- requestAnimationFrame(fn)
|
|
|
- }
|
|
|
- requestAnimationFrame(fn)
|
|
|
+ const nowTime = Date.now();
|
|
|
+ const assumeScrollTop =
|
|
|
+ totalScroll - ((nowTime - startTime) * totalScroll) / 500;
|
|
|
+ this.$refs["w-list-ref"].scrollTop =
|
|
|
+ assumeScrollTop > 0 ? assumeScrollTop : 0;
|
|
|
+ requestAnimationFrame(fn);
|
|
|
+ };
|
|
|
+ requestAnimationFrame(fn);
|
|
|
},
|
|
|
onWorkListScroll(e) {
|
|
|
if (e.target.scrollTop >= 30) {
|
|
|
- !this.isShowMask && (this.isShowMask = true)
|
|
|
+ !this.isShowMask && (this.isShowMask = true);
|
|
|
} else {
|
|
|
- this.isShowMask && (this.isShowMask = false)
|
|
|
+ this.isShowMask && (this.isShowMask = false);
|
|
|
}
|
|
|
|
|
|
if (e.target.scrollTop >= 600) {
|
|
|
- this.isShowBackTopBtn = true
|
|
|
+ this.isShowBackTopBtn = true;
|
|
|
} else {
|
|
|
- this.isShowBackTopBtn = false
|
|
|
+ this.isShowBackTopBtn = false;
|
|
|
}
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
</script>
|
|
|
|
|
|
<style lang="less" scoped>
|
|
@@ -458,7 +534,7 @@ export default {
|
|
|
border-radius: 8px;
|
|
|
background-color: #fff;
|
|
|
z-index: 1;
|
|
|
- color: #C8C9CC;
|
|
|
+ color: #c8c9cc;
|
|
|
|
|
|
&:hover {
|
|
|
color: #323233;
|
|
@@ -483,7 +559,7 @@ export default {
|
|
|
align-items: center;
|
|
|
padding: 20px 30px;
|
|
|
|
|
|
- >span {
|
|
|
+ > span {
|
|
|
font-size: 18px;
|
|
|
font-weight: bold;
|
|
|
}
|
|
@@ -528,7 +604,7 @@ export default {
|
|
|
height: 0;
|
|
|
}
|
|
|
|
|
|
- >li {
|
|
|
+ > li {
|
|
|
width: calc((100% - @gap * 4) / 5);
|
|
|
height: 322px;
|
|
|
margin-bottom: @gap;
|
|
@@ -578,7 +654,7 @@ export default {
|
|
|
|
|
|
&:hover {
|
|
|
border: none;
|
|
|
- background: #1983F6;
|
|
|
+ background: #1983f6;
|
|
|
}
|
|
|
}
|
|
|
|
|
@@ -591,14 +667,14 @@ export default {
|
|
|
left: 0;
|
|
|
width: 100%;
|
|
|
|
|
|
- >li {
|
|
|
+ > li {
|
|
|
color: #fff;
|
|
|
font-size: 13px;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
cursor: pointer;
|
|
|
|
|
|
- >i {
|
|
|
+ > i {
|
|
|
font-size: 20px;
|
|
|
margin-right: 4px;
|
|
|
}
|
|
@@ -628,11 +704,11 @@ export default {
|
|
|
font-size: 14px;
|
|
|
padding: 10px;
|
|
|
|
|
|
- >div {
|
|
|
+ > div {
|
|
|
text-align: left;
|
|
|
|
|
|
&:first-of-type {
|
|
|
- >span {
|
|
|
+ > span {
|
|
|
font-weight: bold;
|
|
|
margin-bottom: 10px;
|
|
|
display: inline-block;
|
|
@@ -650,12 +726,12 @@ export default {
|
|
|
justify-content: space-between;
|
|
|
align-items: center;
|
|
|
|
|
|
- >span {
|
|
|
+ > span {
|
|
|
font-size: 14px;
|
|
|
color: #969799;
|
|
|
}
|
|
|
|
|
|
- >div {
|
|
|
+ > div {
|
|
|
color: #969799;
|
|
|
|
|
|
i {
|
|
@@ -698,18 +774,18 @@ export default {
|
|
|
width: 60px;
|
|
|
height: 60px;
|
|
|
border-radius: 50%;
|
|
|
- background: linear-gradient(144deg, #00AEFB 0%, #0076F6 100%);
|
|
|
+ background: linear-gradient(144deg, #00aefb 0%, #0076f6 100%);
|
|
|
position: relative;
|
|
|
cursor: pointer;
|
|
|
margin: 0 auto;
|
|
|
|
|
|
- >i {
|
|
|
+ > i {
|
|
|
font-size: 16px;
|
|
|
position: absolute;
|
|
|
top: 50%;
|
|
|
left: 50%;
|
|
|
transform: translate(-50%, -50%);
|
|
|
- color: #fff
|
|
|
+ color: #fff;
|
|
|
}
|
|
|
}
|
|
|
|
|
@@ -740,5 +816,5 @@ export default {
|
|
|
</style>
|
|
|
|
|
|
<style lang="less" scoped>
|
|
|
-@import '../style.less';
|
|
|
-</style>
|
|
|
+@import "../style.less";
|
|
|
+</style>
|