xiangqin/pages/profile/fankuiList.vue

<template>
	<view>
		<view class="item" v-for="(item,index) in list" :key="index">
			<view class="u-flex u-row-between data">
				<text style="color: #6C6C6C;">{{item.create_at}}</text>
				<text class="yihui" style="background: #E2F5E1;color: #63C863;" v-if="item.status==2">已回复</text>
				<text class="yihui" style="background: #F9E3E5;color: #FF2F2F;" v-else>待回复</text>
			</view>
			<view class="content">
				<view class="content_text">
					{{item.content}}
				</view>
				<view class="content_img" v-if="item.show_images.length!=0">
					<image :src="it" mode="" class="item_img" v-for="(it,index) in item.show_images" :key="index"></image>
					
				</view>
				
			</view>
			<view class="huifu" v-if="item.huifu">
				<u-read-more showHeight="50" :shadowStyle="shadowStyle" closeText="展开">
				   <view class="info">
				   	{{item.huifu}}
				   	
				   </view>
				</u-read-more>
				
			</view>
		</view>
		<u-empty
		v-if="list.length==0"
		        mode="list"
		        icon="http://cdn.uviewui.com/uview/empty/list.png"
		>
		</u-empty>
		<view class="submit u-flex u-row-center" @click="toinfo"> 
			<image src="../../static/profile/fankui.png" mode="" style="width: 40rpx;height: 40rpx;margin-right: 14rpx;"></image>
			<text>立即反馈</text>
		</view>
	</view>
</template>

<script>
	export default {
		onShow() {
			this.list=[]
		this.getList()	
		},
		onReachBottom() {
				this.page++
				this.getList()	
		},
		data() {
			return {
				shadowStyle: {
									backgroundImage: "none",
									paddingTop: "0",
									marginTop: "20rpx"
								},
				list:[],
				page:1
			}
		},
		methods: {
			toinfo(){
			uni.navigateTo({
				url:'./fankuiinfo'
			})	
			},
			getList(){
				uni.$u.http.post('/api/user/feedback_list',{page:this.page}).then(res => {
					this.list=[...this.list,...res.data]
				})
			}
		}
	}
</script>

<style>
page{
	padding: 20rpx 0 100rpx;
	background-color: #F3F3F3;
}
</style>
<style lang="scss" scoped>
	.item{
		margin-bottom: 20rpx;
		font-size: 24rpx;
		color: #333;
		padding: 20rpx;
		width: 690rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		.data{
			height: 74rpx;
			line-height: 74rpx;
			border-bottom: 2rpx solid #F3F3F3;
		}
		.yihui{
			width: 84rpx;
			height: 32rpx;
			line-height: 32rpx;
			text-align: center;
			
			border-radius: 4rpx;
		}
		.content{
			margin: 20rpx 0;
			.content_text{
				margin-bottom: 20rpx;
			}
			.content_img{
				.item_img{
					width: 208rpx;
					height: 208rpx;
					border-radius: 20rpx;
				}
				.item_img:nth-child(3n-1){
					margin: 0 14rpx;
				}
			}
		}
		.huifu{
			padding-top: 20rpx;
			border-top: 2rpx solid #F3F3F3;
			.info{
				background: #F5F5F5;
				border-radius: 12rpx;
				padding: 20rpx 30rpx;
			}
		}
	}
	.submit{
		position: fixed;
		left: 50%;
		bottom: 50rpx;
		transform: translateX(-50%);
		font-size: 36rpx;
		color: #FFFFFF;
		width: 310rpx;
		height: 88rpx;
		background: linear-gradient(270deg, #A890FE 0%, #FFAEAE 100%);
		border-radius: 44rpx;
	}
</style>