cbz-sj/pages/mine/service/feed/history.vue

<template>
	<view class="content">
		<block v-for="(item,index) in pageList" :key="index">
			<view class="box" @click="toDetail(item.id)">
				<view class="title">{{item.title}}</view>
				<view class="text">问题描述：{{item.content}}</view>
				<view class="reply" v-if="item.reply">{{item.reply}}</view>
				<view class="bottom hflex acenter jbetween">
					<view class="date">{{item.create_time}}</view>
					<view class="hflex acenter">
						<view class="btn" @click.stop="detele(item.id)">删除</view>
						<view class="btn1" v-if="!item.reply" @click.stop="toEdit(item.id)">编辑</view>
					</view>
				</view>
			</view>
		</block>
	</view>
</template>

<script>
	import $api from '@/static/js/api.js'
	var that = ''
	export default {
		data() {
			return {
				pageList: [
				],
				total: 1,
				limit: 10,
				page: 1,
			}
		},
		onLoad() {
			that = this
		},
		onShow() {
			that.getList()
		},
		methods: {
			getList() {
				$api.req({
					url: '/data/api.business.User/feedback_list',
					data: {
						page: that.page
					}
				}, function(res) {
					if(res.code == 1) {
						that.pageList = res.data
						// that.total = res.data.length()
					}
				})
			},
			// 详情
			toDetail(id) {
				$api.jump('/pages/mine/service/feed/detail?id=' + id)
			},
			// 删除
			detele(id) {
				$api.req({
					url: '/data/api.business.User/del_feedback',
					method: 'POST',
					data: {
						feedback_id: id
					}
				}, function(res) {
					if(res.code == 1) {
						console.log(res.data);
						$api.info(res.info)
						that.getList()
					}
				})
			},
			toEdit(id) {
				console.log(id);
				$api.jump('/pages/mine/service/feed/feed?id='+id)
			},
			onReachBottom() {
				console.log("到底了");
				if (that.page == that.total) {
					$api.info("没有更多了")
				} else {
					this.page++
					this.getList()
				}
				
			}
		},
	}
</script>

<style lang="scss" scoped>
	.content {
		background: #F5F5F5;
		padding: 0 30rpx;
		.box {
			width: 100%;
			margin: 20rpx 0 0;
			background-color: #fff;
			border-radius: 20rpx;
			box-sizing: border-box;
			padding: 28rpx 20rpx;
			.title {
				font-size: 30rpx;
				font-weight: 500;
				color: #222222;
			}
			.text {
				font-size: 26rpx;
				font-weight: 400;
				color: #777777;
				margin: 18rpx 0 24rpx;
				line-height: 18px;
			}
			.reply {
				width: 100%;
				height: 76rpx;
				background: #F5F5F5;
				border-radius: 16rpx;
				font-size: 26rpx;
				font-weight: 400;
				color: #222222;
				line-height: 76rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				margin-bottom: 24rpx;
				box-sizing: border-box;
				padding: 0 8rpx 0 36rpx;
				position: relative;
			}
			.reply::before {
				content: "";
				position: absolute;
				top: 34rpx;
				left: 12rpx;
				width: 12rpx;
				height: 12rpx;
				background: #506DFF;
				border-radius: 50%;
			}
			.bottom {
				width: 100%;
				padding-top: 24rpx;
				border-top: 1rpx solid #f5f5f5;
				.date {
					font-size: 24rpx;
					font-weight: 400;
					color: #777777;
					line-height: 34rpx;
				}
				.btn {
					width: 120rpx;
					height: 56rpx;
					border-radius: 28rpx;
					border: 1rpx solid #D3D3D3;
					font-size: 26rpx;
					color: #222222;
					margin-left: 20rpx;
					text-align: center;
					line-height: 56rpx;
				}
				.btn1 {
					width: 120rpx;
					height: 56rpx;
					border-radius: 28rpx;
					border: 1rpx solid #506DFF;
					font-size: 26rpx;
					color: #506DFF;
					margin-left: 20rpx;
					text-align: center;
					line-height: 56rpx;
				}
			}
		}
	}
</style>