|
|
@@ -0,0 +1,287 @@
|
|
|
+<template>
|
|
|
+ <div class="pb_content">
|
|
|
+ <div class="pb_head">
|
|
|
+ <span>首页</span>
|
|
|
+ <div class="pb_left">
|
|
|
+ <span style="font-size: 0.8rem" @click="goTo('/submitWork')"
|
|
|
+ >上传作品</span
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="pb_content_body">
|
|
|
+ <div class="find_content">
|
|
|
+ <div>
|
|
|
+ <van-pull-refresh
|
|
|
+ v-model="refreshing"
|
|
|
+ @refresh="onRefresh"
|
|
|
+ looing-text="释放刷新"
|
|
|
+ pulling-text="下拉刷新"
|
|
|
+ >
|
|
|
+ <!-- -->
|
|
|
+ <van-list
|
|
|
+ v-model="loading"
|
|
|
+ :finished="finished"
|
|
|
+ finished-text="没有更多啦"
|
|
|
+ offset="10"
|
|
|
+ :immediate-check="false"
|
|
|
+ @load="onLoad"
|
|
|
+ >
|
|
|
+ <van-empty
|
|
|
+ class="custom-image"
|
|
|
+ :image="require('../../assets/icon/custom-empty-image.png')"
|
|
|
+ description="暂无数据"
|
|
|
+ v-if="isShow"
|
|
|
+ />
|
|
|
+ <div
|
|
|
+ class="hs_content_body van-hairline--top"
|
|
|
+ v-for="(item, index) in res2"
|
|
|
+ :key="index"
|
|
|
+ >
|
|
|
+ <div class="img-box" v-if="JSON.parse(item.file).cover">
|
|
|
+ <van-image
|
|
|
+ width="100%"
|
|
|
+ height="5rem"
|
|
|
+ fit="cover"
|
|
|
+ :src="JSON.parse(item.file).cover"
|
|
|
+ >
|
|
|
+ <template v-slot:loading>
|
|
|
+ <van-loading type="spinner" size="20" />
|
|
|
+ </template>
|
|
|
+ <template v-slot:error>
|
|
|
+ <img
|
|
|
+ :src="require('../../assets/none.png')"
|
|
|
+ style="object-fit: none; width: 100%; height: 100%"
|
|
|
+ />
|
|
|
+ </template>
|
|
|
+ </van-image>
|
|
|
+ </div>
|
|
|
+ <div class="hs_title">
|
|
|
+ <div class="van-ellipsis">
|
|
|
+ <span>{{ item.workName }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="van-multi-ellipsis--l2">
|
|
|
+ <span v-html="snippet(item.workDesc)"></span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </van-list>
|
|
|
+ </van-pull-refresh>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+export default {
|
|
|
+ name: "main-keep-alive",
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ res2: [],
|
|
|
+ loading: false,
|
|
|
+ finished: false,
|
|
|
+ refreshing: false,
|
|
|
+ page: 1,
|
|
|
+ isShow: true,
|
|
|
+ };
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ goTo(path) {
|
|
|
+ this.$router.push(path);
|
|
|
+ },
|
|
|
+ //在method里面写方法
|
|
|
+ snippet(value) {
|
|
|
+ return value.replace(/<[^>]*>/g, "");
|
|
|
+ },
|
|
|
+ tabClick(index) {},
|
|
|
+
|
|
|
+ //查询发现
|
|
|
+ getFind() {
|
|
|
+ this.loading = true;
|
|
|
+ let params = { page: this.page };
|
|
|
+ this.ajax
|
|
|
+ .get(this.$store.state.api + "selectWork", params)
|
|
|
+ .then((res) => {
|
|
|
+ if (res.data[0].length == 0) {
|
|
|
+ this.isShow = true;
|
|
|
+ } else {
|
|
|
+ this.isShow = false;
|
|
|
+ }
|
|
|
+ this.page++;
|
|
|
+ this.loading = false;
|
|
|
+ this.refreshing = false;
|
|
|
+ this.finished = false;
|
|
|
+ this.res2 = res.data[0];
|
|
|
+ console.log(this.res2);
|
|
|
+ })
|
|
|
+ .catch((err) => {
|
|
|
+ this.loading = false;
|
|
|
+ this.refreshing = false;
|
|
|
+ console.error(err);
|
|
|
+ });
|
|
|
+ },
|
|
|
+ onRefresh() {
|
|
|
+ this.page = 1;
|
|
|
+ this.getFind();
|
|
|
+ },
|
|
|
+ onLoad() {
|
|
|
+ let params = { page: this.page };
|
|
|
+ this.ajax
|
|
|
+ .get(this.$store.state.api + "selectWork", params)
|
|
|
+ .then((res) => {
|
|
|
+ this.page++;
|
|
|
+ this.loading = false;
|
|
|
+ this.refreshing = false;
|
|
|
+ this.res2 = this.res2.concat(res.data[0]);
|
|
|
+ var num = this.res2.length ? this.res2[0].num : 0;
|
|
|
+ if (this.res2.length < num) {
|
|
|
+ this.page++;
|
|
|
+ this.loading = false;
|
|
|
+ } else {
|
|
|
+ this.finished = true;
|
|
|
+ this.loading = true;
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .catch((err) => {
|
|
|
+ this.loading = false;
|
|
|
+ this.refreshing = false;
|
|
|
+ console.error(err);
|
|
|
+ });
|
|
|
+ },
|
|
|
+ },
|
|
|
+ activated() {
|
|
|
+ this.page = 1;
|
|
|
+ this.getFind();
|
|
|
+ // this.page1 = 1;
|
|
|
+ // this.getWorkI();
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+.custom-image >>> .van-empty__image {
|
|
|
+ width: 4.5rem;
|
|
|
+ height: auto;
|
|
|
+ /* height: 6.4rem; */
|
|
|
+}
|
|
|
+.van-hairline--top::after {
|
|
|
+ border-top-width: 2px;
|
|
|
+}
|
|
|
+.van-hairline--top:nth-child(1)::after {
|
|
|
+ border-top-width: 0px;
|
|
|
+}
|
|
|
+.img-box {
|
|
|
+ border-radius: 3px;
|
|
|
+ overflow: hidden;
|
|
|
+ width: 5rem;
|
|
|
+ height: 3.8rem;
|
|
|
+ /* margin: 0 auto; */
|
|
|
+ /* box-shadow: #c8c8c8 0px 0px 10px 4px; */
|
|
|
+ flex-grow: 1;
|
|
|
+}
|
|
|
+
|
|
|
+.hs_content {
|
|
|
+ margin-top: 1rem;
|
|
|
+}
|
|
|
+.hs_content_body {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ width: 95%;
|
|
|
+ margin: 0 auto;
|
|
|
+ padding: 0.8rem 0;
|
|
|
+}
|
|
|
+.hs_title {
|
|
|
+ flex-grow: 2;
|
|
|
+ margin-left: 10%;
|
|
|
+ width: 50%;
|
|
|
+}
|
|
|
+.hs_title div:nth-child(1) {
|
|
|
+ font-size: 0.8rem;
|
|
|
+ font-weight: 600;
|
|
|
+}
|
|
|
+.hs_title div:nth-child(2) {
|
|
|
+ font-size: 0.68rem;
|
|
|
+ margin-top: 0.5rem;
|
|
|
+ color: #4c4c4c;
|
|
|
+}
|
|
|
+.pb_content_body {
|
|
|
+ background: #fff;
|
|
|
+}
|
|
|
+.find_head {
|
|
|
+ padding: 1rem 0 0;
|
|
|
+ /* position: sticky;
|
|
|
+ top: 3rem;background: #fff;
|
|
|
+ z-index: 999; */
|
|
|
+}
|
|
|
+.find_tabs {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ font-size: 0.73rem;
|
|
|
+ border-radius: 5px;
|
|
|
+ height: 1.8rem;
|
|
|
+ background: rgb(208, 208, 208);
|
|
|
+ margin: 0rem auto 0.5rem;
|
|
|
+ width: 50%;
|
|
|
+ text-align: center;
|
|
|
+ color: #fff;
|
|
|
+ overflow: hidden;
|
|
|
+ line-height: 1.8rem;
|
|
|
+}
|
|
|
+.find_tabs div {
|
|
|
+ width: 50%;
|
|
|
+ height: 100%;
|
|
|
+}
|
|
|
+
|
|
|
+.active {
|
|
|
+ background: rgb(81, 201, 154);
|
|
|
+}
|
|
|
+
|
|
|
+.find_content {
|
|
|
+}
|
|
|
+
|
|
|
+.myw_work_body {
|
|
|
+ background: #fff;
|
|
|
+}
|
|
|
+.myw_work_contentBox {
|
|
|
+ padding: 0.5rem 0;
|
|
|
+ width: 95%;
|
|
|
+ margin: 0 auto;
|
|
|
+}
|
|
|
+.myw_work_content {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+.myw_work_head {
|
|
|
+}
|
|
|
+.myw_work_title {
|
|
|
+}
|
|
|
+.myw_work_title span:nth-child(1) {
|
|
|
+ font-size: 0.8rem;
|
|
|
+}
|
|
|
+.myw_work_title span:nth-child(2) {
|
|
|
+ font-size: 0.65rem;
|
|
|
+ margin-left: 0.5rem;
|
|
|
+ color: #7e7e7e;
|
|
|
+}
|
|
|
+.myw_work_rate {
|
|
|
+}
|
|
|
+
|
|
|
+.myw_work_imgbox {
|
|
|
+ margin: 0.3rem 0 0 0;
|
|
|
+}
|
|
|
+.myw_work_img {
|
|
|
+ border-radius: 5px;
|
|
|
+ overflow: hidden;
|
|
|
+ min-width: 8rem;
|
|
|
+ width: 10rem;
|
|
|
+ height: 6rem;
|
|
|
+ box-shadow: #c8c8c8 0px 0px 10px 4px;
|
|
|
+}
|
|
|
+.myw_work_img img {
|
|
|
+ width: inherit;
|
|
|
+ height: inherit;
|
|
|
+}
|
|
|
+</style>
|
zengyicheng
