|
@@ -2,10 +2,8 @@
|
|
|
<view class="container">
|
|
|
<view v-show="menuCurrent === 0">
|
|
|
<view class="menus-box">
|
|
|
- <view class="menus-item-box"
|
|
|
- @click="toReportList(key, data.value)"
|
|
|
- v-for="(data,key) in categoryList"
|
|
|
- :key="key">
|
|
|
+ <view class="menus-item-box" @click="toReportList(key, data.value)" v-for="(data,key) in categoryList"
|
|
|
+ :key="key">
|
|
|
<view class="icon-box">
|
|
|
<view class="iconfont icon-hetong"></view>
|
|
|
</view>
|
|
@@ -42,17 +40,14 @@
|
|
|
<view v-show="menuCurrent === 1">
|
|
|
<view class="header-box">
|
|
|
<view class="search-box">
|
|
|
- <u-search
|
|
|
- v-model="searchForm.keyword"
|
|
|
- :clearabled="true"
|
|
|
- bg-color="#E5E5E5"
|
|
|
- :input-style="searchInputStyle"
|
|
|
- placeholder="搜索您想要的内容"
|
|
|
+ <u-search v-model="searchForm.keyword" :clearabled="true" bg-color="#E5E5E5"
|
|
|
+ :input-style="searchInputStyle" placeholder="搜索您想要的内容"
|
|
|
@search="searchHistory(searchForm.keyword, 1)"
|
|
|
- @custom="searchHistory(searchForm.keyword, 1)"
|
|
|
- ></u-search>
|
|
|
+ @custom="searchHistory(searchForm.keyword, 1)"></u-search>
|
|
|
</view>
|
|
|
</view>
|
|
|
+ <u-empty margin-top="50" mode="data" v-if="list.length === 0" iconSize="120" textSize="58" text="暂无数据">
|
|
|
+ </u-empty>
|
|
|
<view class="list-box">
|
|
|
<view class="list-item-box" v-for="item in list" :key="item.id" @click="onClickReport(item)">
|
|
|
<view class="image-box">
|
|
@@ -69,7 +64,9 @@
|
|
|
<view class="func">
|
|
|
<view v-if="item.free > 0" class="button free">免费</view>
|
|
|
<view v-else-if="item.memberFree > 0" class="button member-free">会员免费</view>
|
|
|
- <view v-else :class="['button', item.status > 0 ? 'free' : 'buy']">{{item.status > 0 ? '已购买' : '立即购买'}}</view>
|
|
|
+ <view v-else :class="['button', item.status > 0 ? 'free' : 'buy']">
|
|
|
+ {{item.status > 0 ? '已购买' : '立即购买'}}
|
|
|
+ </view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
@@ -79,17 +76,15 @@
|
|
|
<view v-show="menuCurrent === 2">
|
|
|
<view class="header-box">
|
|
|
<view class="search-box">
|
|
|
- <u-search
|
|
|
- v-model="searchForm.keyword"
|
|
|
- :clearabled="true"
|
|
|
- bg-color="#E5E5E5"
|
|
|
- :input-style="searchInputStyle"
|
|
|
- placeholder="搜索您想要的内容"
|
|
|
- @search="searchMy(searchForm.keyword, 1)"
|
|
|
- @custom="searchMy(searchForm.keyword, 1)"
|
|
|
- ></u-search>
|
|
|
+ <u-search v-model="searchForm.keyword" :clearabled="true" bg-color="#E5E5E5"
|
|
|
+ :input-style="searchInputStyle" placeholder="搜索您想要的内容" @search="searchMy(searchForm.keyword, 1)"
|
|
|
+ @custom="searchMy(searchForm.keyword, 1)"></u-search>
|
|
|
</view>
|
|
|
</view>
|
|
|
+ <u-empty
|
|
|
+ margin-top="50"
|
|
|
+ mode="data" v-if="list2.length === 0" iconSize="120" textSize="58" text="暂无数据">
|
|
|
+ </u-empty>
|
|
|
<view class="list-box">
|
|
|
<view class="list-item-box" v-for="item in list2" :key="item.id" @click="onClickReport(item)">
|
|
|
<view class="image-box">
|
|
@@ -109,7 +104,8 @@
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
- <u-loadmore v-if="menuCurrent !== 0" :status="status" margin-top="20" margin-bottom="20" @loadmore="loadMore"/>
|
|
|
+ <u-loadmore v-if="menuCurrent !== 0 && status !== 'nomore'" :status="status" margin-top="20" margin-bottom="20"
|
|
|
+ @loadmore="loadMore" />
|
|
|
<view class="bottom-block"></view>
|
|
|
<view class="bottom-box">
|
|
|
<view class="menu-box">
|
|
@@ -131,15 +127,23 @@
|
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
|
- import { ref, computed } from 'vue'
|
|
|
- import { onLoad } from '@dcloudio/uni-app'
|
|
|
+ import {
|
|
|
+ ref,
|
|
|
+ computed
|
|
|
+ } from 'vue'
|
|
|
+ import {
|
|
|
+ onLoad,
|
|
|
+ onReachBottom
|
|
|
+ } from '@dcloudio/uni-app'
|
|
|
import {
|
|
|
getReportCate,
|
|
|
loadReportHistory,
|
|
|
loadMyReport
|
|
|
} from '@/api/report.js'
|
|
|
|
|
|
- import { useReportStore } from '@/store/reportStore.js'
|
|
|
+ import {
|
|
|
+ useReportStore
|
|
|
+ } from '@/store/reportStore.js'
|
|
|
|
|
|
const reportStore = useReportStore();
|
|
|
|
|
@@ -170,32 +174,32 @@
|
|
|
menuCurrent.value = index;
|
|
|
searchForm.value.keyword = ""
|
|
|
status.value = 'loadmore'
|
|
|
- if(index===1){
|
|
|
+ if (index === 1) {
|
|
|
// 浏览记录
|
|
|
searchHistory("", 1)
|
|
|
- }else if(index===2){
|
|
|
+ } else if (index === 2) {
|
|
|
// 我的报告
|
|
|
searchMy("", 1)
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- function searchHistory(keyword, pageNumber, pageSize){
|
|
|
+ function searchHistory(keyword, pageNumber, pageSize) {
|
|
|
status.value = 'loading'
|
|
|
loadReportHistory({
|
|
|
keyword,
|
|
|
pageNumber: pageNumber,
|
|
|
- pageSize: pageSize?pageSize:10
|
|
|
- }).then(res=>{
|
|
|
- if(res.code===0){
|
|
|
- if(pageNumber===1){
|
|
|
+ pageSize: pageSize ? pageSize : 10
|
|
|
+ }).then(res => {
|
|
|
+ if (res.code === 0) {
|
|
|
+ if (pageNumber === 1) {
|
|
|
list.value = res.data
|
|
|
- }else{
|
|
|
+ } else {
|
|
|
list.value = [...list.value, ...res.data]
|
|
|
}
|
|
|
listCount.value = res.count
|
|
|
- if(list.value.length === res.count){
|
|
|
+ if (list.value.length === res.count) {
|
|
|
status.value = 'nomore'
|
|
|
- }else{
|
|
|
+ } else {
|
|
|
status.value = 'loadmore'
|
|
|
}
|
|
|
pageNum.value = pageNumber + 1;
|
|
@@ -203,23 +207,23 @@
|
|
|
})
|
|
|
}
|
|
|
|
|
|
- function searchMy(keyword, pageNumber, pageSize){
|
|
|
+ function searchMy(keyword, pageNumber, pageSize) {
|
|
|
status.value = 'loading'
|
|
|
loadMyReport({
|
|
|
keyword,
|
|
|
pageNumber: pageNumber,
|
|
|
- pageSize: pageSize?pageSize:10
|
|
|
- }).then(res=>{
|
|
|
- if(res.code===0){
|
|
|
- if(pageNumber===1){
|
|
|
+ pageSize: pageSize ? pageSize : 10
|
|
|
+ }).then(res => {
|
|
|
+ if (res.code === 0) {
|
|
|
+ if (pageNumber === 1) {
|
|
|
list2.value = res.data
|
|
|
- }else{
|
|
|
+ } else {
|
|
|
list2.value = [...list2.value, ...res.data]
|
|
|
}
|
|
|
listCount2.value = res.count
|
|
|
- if(list2.value.length === res.count){
|
|
|
+ if (list2.value.length === res.count) {
|
|
|
status.value = 'nomore'
|
|
|
- }else{
|
|
|
+ } else {
|
|
|
status.value = 'loadmore'
|
|
|
}
|
|
|
pageNum.value = pageNumber + 1;
|
|
@@ -234,7 +238,7 @@
|
|
|
})
|
|
|
}
|
|
|
|
|
|
- async function init(){
|
|
|
+ async function init() {
|
|
|
const cateRes = await getReportCate();
|
|
|
if (cateRes.code === 0) {
|
|
|
const result = cateRes.data.reduce((acc, curr) => {
|
|
@@ -266,15 +270,23 @@
|
|
|
url: `/pages/reportDetail/reportDetail?id=${report.id}&title=${report.title}`
|
|
|
})
|
|
|
}
|
|
|
-
|
|
|
- function loadMore(){
|
|
|
- if(menuCurrent.value === 1){
|
|
|
+
|
|
|
+ function loadMore() {
|
|
|
+ if (menuCurrent.value === 1) {
|
|
|
+ if (list.value.length === listCount) {
|
|
|
+ return
|
|
|
+ }
|
|
|
searchHistory(searchForm.value.keyword, pageNum.value)
|
|
|
- }else{
|
|
|
+ } else {
|
|
|
+ if (list2.value.length === listCount2) {
|
|
|
+ return
|
|
|
+ }
|
|
|
searchMy(searchForm.value.keyword, pageNum.value)
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
+ onReachBottom(() => {
|
|
|
+ loadMore()
|
|
|
+ })
|
|
|
onLoad((load) => {
|
|
|
// console.log(load,"reporthome")
|
|
|
if (load.menuCurrent) {
|
|
@@ -282,7 +294,6 @@
|
|
|
}
|
|
|
init()
|
|
|
})
|
|
|
-
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
@@ -301,6 +312,7 @@
|
|
|
|
|
|
.search-box {
|
|
|
margin-bottom: 20rpx;
|
|
|
+
|
|
|
::v-deep(.u-search) {
|
|
|
background-color: #e5e5e5;
|
|
|
border-radius: 50rpx;
|
|
@@ -321,17 +333,21 @@
|
|
|
|
|
|
.list-box {
|
|
|
padding: 0 20rpx;
|
|
|
+
|
|
|
.list-item-box {
|
|
|
padding: 30rpx 20rpx;
|
|
|
display: flex;
|
|
|
gap: 20rpx;
|
|
|
height: 210rpx;
|
|
|
border-bottom: 5rpx solid #E6E6E6;
|
|
|
+
|
|
|
&:active {
|
|
|
background-color: $uni-bg-color-hover;
|
|
|
}
|
|
|
+
|
|
|
.image-box {
|
|
|
width: $image-width;
|
|
|
+
|
|
|
image {
|
|
|
width: $image-width;
|
|
|
flex: 0 0 $image-width;
|
|
@@ -339,6 +355,7 @@
|
|
|
border-radius: $uni-card-border-radius;
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
.info-box {
|
|
|
.title {
|
|
|
font-size: $uni-title-font-size-2;
|
|
@@ -347,39 +364,47 @@
|
|
|
margin-bottom: 15rpx;
|
|
|
@include text-line-overflow(2);
|
|
|
}
|
|
|
+
|
|
|
.time {
|
|
|
font-size: $uni-font-size-2;
|
|
|
color: $uni-text-color-grey;
|
|
|
+
|
|
|
.iconfont {
|
|
|
font-size: $uni-font-size-2;
|
|
|
padding-right: 10rpx;
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
.func {
|
|
|
display: flex;
|
|
|
justify-content: flex-end;
|
|
|
font-size: $uni-font-size-2;
|
|
|
font-weight: bold;
|
|
|
+
|
|
|
.button {
|
|
|
text-align: center;
|
|
|
width: 130rpx;
|
|
|
}
|
|
|
+
|
|
|
.price {
|
|
|
color: $uni-color-error;
|
|
|
font-size: $uni-title-font-size-2;
|
|
|
}
|
|
|
+
|
|
|
.buy {
|
|
|
padding: 6rpx 25rpx;
|
|
|
background-color: $uni-color-error;
|
|
|
border-radius: $uni-card-border-radius;
|
|
|
color: $uni-text-color-inverse;
|
|
|
}
|
|
|
+
|
|
|
.free {
|
|
|
padding: 6rpx 25rpx;
|
|
|
background-color: $uni-color-primary;
|
|
|
border-radius: $uni-card-border-radius;
|
|
|
color: $uni-text-color-inverse;
|
|
|
}
|
|
|
+
|
|
|
.member-free {
|
|
|
padding: 10rpx 20rpx;
|
|
|
@include backgroundImg('http://www.gzrea.org.cn:8543/icon/wxmp/bg-label.png');
|
|
@@ -392,6 +417,7 @@
|
|
|
|
|
|
.menus-box {
|
|
|
padding: 0 20rpx;
|
|
|
+
|
|
|
.menus-item-box {
|
|
|
width: 100%;
|
|
|
padding: 35rpx 50rpx;
|
|
@@ -401,9 +427,11 @@
|
|
|
align-items: center;
|
|
|
background-color: #006AF4;
|
|
|
border-radius: $uni-card-border-radius;
|
|
|
+
|
|
|
&:active {
|
|
|
background-color: #005AF4;
|
|
|
}
|
|
|
+
|
|
|
.icon-box {
|
|
|
width: 40%;
|
|
|
text-align: center;
|
|
@@ -414,11 +442,13 @@
|
|
|
border-radius: 50%;
|
|
|
border: 3rpx solid $uni-text-color-inverse;
|
|
|
background-color: #004DC9;
|
|
|
+
|
|
|
.iconfont {
|
|
|
font-size: 60rpx;
|
|
|
color: $uni-text-color-inverse;
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
.text-box {
|
|
|
font-size: 50rpx;
|
|
|
font-weight: bold;
|
|
@@ -431,6 +461,7 @@
|
|
|
// height: 112rpx;
|
|
|
height: calc(112rpx + env(safe-area-inset-bottom, 0));
|
|
|
}
|
|
|
+
|
|
|
.bottom-box {
|
|
|
padding: 5rpx 20rpx;
|
|
|
background-color: $uni-bg-color-grey;
|
|
@@ -442,20 +473,24 @@
|
|
|
height: 100rpx;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
+
|
|
|
.menu-item-box {
|
|
|
width: calc(100% / 3);
|
|
|
text-align: center;
|
|
|
+
|
|
|
.iconfont {
|
|
|
font-size: 55rpx;
|
|
|
}
|
|
|
+
|
|
|
.text {
|
|
|
font-size: $uni-font-size-2;
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
.is-active {
|
|
|
color: $uni-color-primary;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
-</style>
|
|
|
+</style>
|