|
|
@@ -0,0 +1,217 @@
|
|
|
+<template>
|
|
|
+ <div class="assets" @scroll="handleScroll">
|
|
|
+ <div class="list" v-if="list.length > 0">
|
|
|
+ <div class="item f-sb-n" v-for="(item, index) in list" :key="index">
|
|
|
+ <div class="left">
|
|
|
+ <div>
|
|
|
+ <span v-html="item.introduction"></span>
|
|
|
+ <img src="@/assets/images/copy.png" alt="" class="icon copys" :data-clipboard-text="item.introduction.replace(/<[^>]*>/g, '')" @click="copy(item.introduction.replace(/<[^>]*>/g, ''))" />
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <van-image :src="item.img_url" alt="" class="pic" @click="preview(item.img_url)" />
|
|
|
+ </div>
|
|
|
+ <div class="time">
|
|
|
+ <span>{{ dateFormatFn(item.createtime) }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="right f-row copys" :data-clipboard-text="item.img_url" @click="copyimg(item.img_url)">
|
|
|
+ <img src="@/assets/images/down.png" alt="" class="icon" />
|
|
|
+ <span>{{ $t('lang293') }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="nomore" v-else>
|
|
|
+ <span>{{ $t('lang60') }}</span>
|
|
|
+ </div>
|
|
|
+ <BottomNavigation></BottomNavigation>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import { homeApi } from '@/api/index';
|
|
|
+import { Dialog, Notify, Toast, ImagePreview } from 'vant';
|
|
|
+import { dateFormat } from '@/utils/formatTool.js';
|
|
|
+import BottomNavigation from '@/components/BottomNavigation.vue';
|
|
|
+import Clipboard from 'clipboard';
|
|
|
+export default {
|
|
|
+ components: {
|
|
|
+ BottomNavigation,
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ list: [],
|
|
|
+ page: 1,
|
|
|
+ loading: false,
|
|
|
+ finished: false,
|
|
|
+ total: 0,
|
|
|
+ };
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.getAnnouncement();
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ copy(result) {
|
|
|
+ console.log(result);
|
|
|
+
|
|
|
+ if (result) {
|
|
|
+ var clipboard = new Clipboard('.copys');
|
|
|
+ clipboard.on('success', e => {
|
|
|
+ this.$toast(this.$t('lang45'));
|
|
|
+ clipboard.destroy(); // 释放内存
|
|
|
+ });
|
|
|
+ clipboard.on('error', e => {
|
|
|
+ this.$toast(this.$t('lang46'));
|
|
|
+ clipboard.destroy(); // 释放内存
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ copyimg(result) {
|
|
|
+ console.log(result);
|
|
|
+
|
|
|
+ if (result) {
|
|
|
+ var clipboard = new Clipboard('.copys');
|
|
|
+ clipboard.on('success', e => {
|
|
|
+ this.$toast(this.$t('lang292'));
|
|
|
+ clipboard.destroy(); // 释放内存
|
|
|
+ });
|
|
|
+ clipboard.on('error', e => {
|
|
|
+ this.$toast(this.$t('lang46'));
|
|
|
+ clipboard.destroy(); // 释放内存
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ dateFormatFn(date) {
|
|
|
+ if (date) {
|
|
|
+ return dateFormat(new Date(date * 1000), 'yyyy-MM-dd hh:mm:ss');
|
|
|
+ }
|
|
|
+ },
|
|
|
+ getAnnouncement() {
|
|
|
+ let params = {
|
|
|
+ page: this.page,
|
|
|
+ query: {},
|
|
|
+ type_id: 3,
|
|
|
+ };
|
|
|
+ homeApi.getAnnouncement(params).then(res => {
|
|
|
+ if (res.code == 200) {
|
|
|
+ if (this.list.length >= res.data.total) {
|
|
|
+ this.page = -1; // 重置为 -1，表示没有更多数据
|
|
|
+ } else {
|
|
|
+ console.log(res.data.rows);
|
|
|
+
|
|
|
+ this.list = [...this.list, ...res.data.rows];
|
|
|
+ if (this.list.length >= res.data.total) {
|
|
|
+ this.page = -1; // 重置为 -1，表示没有更多数据
|
|
|
+ }
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ handleScroll(event) {
|
|
|
+ const container = event.target;
|
|
|
+ const scrollTop = container.scrollTop; // 滚动距离
|
|
|
+ const scrollHeight = container.scrollHeight; // 内容总高度
|
|
|
+ const clientHeight = container.clientHeight; // 可视区域高度
|
|
|
+ // 判断是否滑动到底部
|
|
|
+ if (scrollTop + clientHeight >= scrollHeight - 10) {
|
|
|
+ console.log('Bottom');
|
|
|
+ if (this.page != -1) {
|
|
|
+ this.page++; // 页数加 1
|
|
|
+ this.getAnnouncement(); // 触发加载更多
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ preview(img_url) {
|
|
|
+ ImagePreview([img_url]);
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="less" scoped>
|
|
|
+.f-sb {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+}
|
|
|
+.f-sa {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-around;
|
|
|
+}
|
|
|
+.f-sb-n {
|
|
|
+ display: flex;
|
|
|
+ align-items: flex-end;
|
|
|
+ justify-content: space-between;
|
|
|
+}
|
|
|
+.f-col {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+}
|
|
|
+.f-row {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+.assets {
|
|
|
+ padding: 20px 13px 50px;
|
|
|
+ height: 100vh;
|
|
|
+ overflow: auto;
|
|
|
+
|
|
|
+ .list {
|
|
|
+ color: #000;
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 600;
|
|
|
+
|
|
|
+ .item {
|
|
|
+ padding: 13px;
|
|
|
+ border-radius: 12px;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ background-color: #fff;
|
|
|
+ .left {
|
|
|
+ line-height: 150%;
|
|
|
+ padding-right: 10px;
|
|
|
+ .icon {
|
|
|
+ width: 14px;
|
|
|
+ height: 14px;
|
|
|
+ margin-left: 10px;
|
|
|
+ }
|
|
|
+ .pic {
|
|
|
+ min-width: 50px;
|
|
|
+ min-height: 50px;
|
|
|
+ max-width: 100%;
|
|
|
+ max-height: 140px;
|
|
|
+ margin: 10px 0;
|
|
|
+
|
|
|
+ ::v-deep img {
|
|
|
+ max-width: 100% !important;
|
|
|
+ max-height: 140px !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .time {
|
|
|
+ font-size: 10px;
|
|
|
+ font-weight: normal;
|
|
|
+ color: #aaa;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .right {
|
|
|
+ font-size: 9px;
|
|
|
+ color: #7c92bf;
|
|
|
+ width: fit-content;
|
|
|
+ white-space: nowrap;
|
|
|
+ padding-bottom: 6px;
|
|
|
+ .icon {
|
|
|
+ width: 14px;
|
|
|
+ height: 14px;
|
|
|
+ margin-right: 3px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .nomore {
|
|
|
+ color: #aaa;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 12px;
|
|
|
+ padding: 20px 0;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
xiaomei
