dl_uniapp/pages/mine/set/my-suggest.vue

<template>
	<view class="my-card-box">
		<navigation-bar-vue title="我的反馈" style="width: 100%;" background-color="#ffffff"
			title-color="#000000"></navigation-bar-vue>
		<view class="addr-list-box">
			<scroll-view style="height: 100%;" scroll-y="true" @scrolltolower="onReachBottomCus" refresher-enabled
				@refresherrefresh="onRefresherrefresh" :refresher-triggered="isTriggered">
				<view v-for="(item,index) in dataList" class="addr-item-box">
					<view class="addr-item-top">
						{{item.content}}
					</view>
					<view class="addr-item-opt">
						<uni-file-picker samll="true" :value="item.imagesList" readonly="true"
							limit="9"></uni-file-picker>
					</view>
					<view class="addr-bottom">
						{{item.createTime}}
					</view>
				</view>
				<view style="text-align: center" v-if="dataList.length==0">
					<image class="" src="@/static/images/nothing.png"></image>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import navigationBarVue from '@/components/navigation/navigationBar.vue';
  import {toast} from '@/utils/common.js'
  import config from '@/config';
  import {feedbackList} from '@/api/business/notice.js'
  import constant from '@/utils/constant';
  import {getJSONData} from '@/utils/auth.js'
	export default {
		components: {
			navigationBarVue
		},
		data() {
			return {
        uploadUrl: config.baseUrl,
				dataList: [{
					createTime: "2024-02-10 12:22:44",
					content: "我的意见我的意见我的意见我的意见我的意见我的意见我的意见我的意见我的意见我的意见我的意见我的意见我的意见",
					images: "",
					imagesList: [
						'/profile/upload/2025/03/18/f936812fd66e18007385b187cc6b12c_20250318105540A001.png',
						'/profile/upload/2025/03/18/5_20250318172439A002.png'
					],
					backContent: "反馈内容",
					backImages: [],
					backTime: "2024-02-10 12:22:44",
				}],
				queryParams: {
					pageNum: 1,
					pageSize: 10,
          userId:null
				},
				total: 0,
				//下来刷新状态
				isTriggered: false
			}
		},
    onShow(){
		  this.initData();
    },
		methods: {

		  /**初始化数据*/
		  initData(){
        this.queryParams.userId = getJSONData(constant.userInfo).userId
        feedbackList(this.queryParams).then(res=>{
          this.isTriggered = false
          if (res.code == 200) {
            if (this.queryParams.pageNum == 1) {
              this.dataList = res.data.records
              this.dataList = this.dataList.map(item => {
                item.imagesList = item.images.split(',').map(image => ({ url: this.uploadUrl + image.trim() }));
                return item;
              });
            } else {
              this.dataList = this.dataList.concat(res.data.records)
              this.dataList = this.dataList.map(item => {
                item.imagesList = item.images.split(',').map(image => ({ url: this.uploadUrl + image.trim() }));
                return item;
              });
            }
            this.total = res.data.total
          }
        })
      },
			/**
			 * 上滑加载数据
			 */
			onReachBottomCus() {
				//判断 如果页码*页容量大于等于总条数，提示该页数据加载完毕
				if (this.queryParams.pageNum * this.queryParams.pageSize >= this.total) {
					toast("没有更多数据了")
					return
				}
				//页码+1,调用获取数据的方法获取第二页数据
				this.queryParams.pageNum++
        this.initData()
			},
			/**
			 * 下拉刷新数据
			 */
			onRefresherrefresh() {
				this.isTriggered = true
				this.queryParams.pageNum = 1
				this.total = 0
        this.initData()
			},
		}
	}
</script>

<style lang="scss">
	.my-card-box {
		padding-top: calc(90rpx + var(--status-bar-height));
		background-color: white;
		width: 100%;
		color: #363636;
		font-size: 32rpx;
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: self-start;
		justify-content: center;
		position: relative;

		.addr-list-box {
			background-color: #F6F6F6;
			height: calc(100vh - var(--status-bar-height) - var(--window-bottom) - 91rpx);
			overflow-y: scroll;
			padding: 0 30rpx;
			width: 100%;
			display: flex;
			flex-direction: column;
			align-items: center;
			padding-top: 20rpx;
			justify-content: start;

			.addr-item-box {
				width: 100%;
				display: flex;
				background-color: white;
				margin-top: 20rpx;
				border-radius: 20rpx;
				padding: 20rpx;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				border-bottom: 1rpx solid #F2F2F2;

				.addr-item-top {
					width: 100%;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
					overflow: hidden;
					text-overflow: ellipsis;
				}

				.addr-item-opt {
					width: 100%;
					padding-top: 20rpx;
					display: flex;
					align-items: center;
					justify-content: flex-end;

				}

				.addr-bottom {
					padding-top: 20rpx;
					width: 100%;
					text-align: left;
					font-size: 22rpx;
					color: #999999;
				}
			}
		}
	}
</style>