zhwl-miniapp/pages/my/complaint.vue

<template>
	<view class="uni-container">
		<view id="navbar">
			<u-navbar :autoBack="true" :bgColor="bgColor">
				<view slot='center' style="font-size: 36rpx; font-weight: bold;">
					投诉建议
				</view>
			</u-navbar>
		</view>
		<view id="menu" class="menu" :style="{'padding-top': navHeight + 'px'}">
			<view :class="{ active: menuIndex === '0' }" @click="tabMenu('0')">投诉建议</view>
			<view :class="{ active: menuIndex === '1' }" @click="tabMenu('1')">我的投诉</view>
		</view>
		<view v-show="menuIndex === '0'" :style="{'padding-top': navHeight + 'px'}">
			<complaintForm />
		</view>
		<view class="list-container" v-show="menuIndex === '1'">
			<mescroll-body @init="mescrollInit" @down="downCallback" @up="upCallback" :down="downOption" :up="upOption" :top="paddingTop + 'px'">
				<view class="list_waper">
					<view class="list" v-for="(item, index) in list " :key="index" @click="goDetails(item)">
						<view class="title">{{item.scenicName}}（{{item.typeName}}）</view>
						<view class="describe">{{item.content}}</view>
						<view class="foot">
							<view class="time">{{$utils.formatDate('Y-M-D', item.createTime)}}</view>
							<view class="state state1" v-if="item.status == 0">已提交</view>
							<view class="state" v-if="item.status == 1">已处理</view>
						</view>
					</view>
				</view>
			</mescroll-body>
		</view>
	</view>
</template>
<script>
	import complaintForm from "./complaintForm"
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	export default {
    	mixins: [MescrollMixin],
		components: {
			complaintForm
		},
		data() {
			return {
				bgColor: '#FFF',
				menuIndex: '0',
				navHeight: 0,
				paddingTop: 0,
				topHeight: 0,
				list: []
			};
		},
		onLoad(options) {
			this.navHeight = this.$paddingTop;
			this.paddingTop = this.$paddingTop + uni.upx2px(88);
			this.topHeight = this.navHeight + this.paddingTop + 'px'
        },
		onShow () {
			this.mescroll && this.mescroll.resetUpScroll();
		},
		methods: {
			tabMenu (index) {
				this.menuIndex = index;
				this.mescroll.resetUpScroll();
			},
			async upCallback (page) {
				let obj = {  pageNum: page.num, pageSize: page.size };
				let info = await this.$http.reportList(obj);
				if(page.num == 1) this.list = [];
				this.list = this.list.concat(info.rows);
				this.mescroll.endBySize(info.rows.length, info.total);
			},
			goDetails(item) {
				uni.navigateTo({
					url: `/pages/my/complaintDet?id=${item.id}`
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.uni-container {
		width: 100%;
		min-height: 100vh;
		box-sizing: border-box;
		background-color: #FBFBFB;
		.menu {
			width: 100%;
			height: 88rpx;
			display: flex;
			justify-content: space-around;
			align-items: center;
			position: fixed;
			background: #FFF;
			z-index: 1;
			view{
				line-height: 46rpx;
				font-weight: 400;
				font-size: 32rpx;
				color: #333333;
			    &.active{
			        position: relative;
					color: #01BE69;
					font-weight: 500;
			        &::after{
						content: "";
						width: 30rpx;
						height: 4rpx;
						position: absolute;
						left: 50%;
						bottom: -4rpx;
						transform: translateX(-50%);
						background: #01BE69;
						border-radius: 12rpx;
					}
			    }
			}
		}
		.list-container{
			.list_waper{
				width: 100%; box-sizing: border-box; padding: 0 32rpx; padding-bottom: 40rpx;
				.list{
					margin-top: 24rpx; width: 100%; background: #fff; box-sizing: border-box; padding: 24rpx;
					.title {
						font-weight: 500;
						font-size: 32rpx;
						color: #333333;
						width: 630rpx;
						display: block;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
						-o-text-overflow: ellipsis;
					}
					.describe {
						width: 630rpx;
						margin-top: 16rpx;
						font-weight: 400;
						font-size: 28rpx;
						color: #999999;
						line-height: 40rpx;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-line-clamp: 2;
						-webkit-box-orient: vertical;
					}
					.foot {
						margin-top: 24rpx;
						display: flex;
						flex-direction: row;
						align-items: center;
						justify-content: space-between;
						.time {
							font-weight: 400;
							font-size: 24rpx;
							color: #666666;
						}
						.state {
							font-weight: 400;
							font-size: 28rpx;
							color: #999999;
						}
						.state1 {
							color: #01BE69;
						}
					}
				}
			}
		}
	}
	/deep/.uniui-right {
		font-size: 34rpx !important;
		color: #999999 !important;
	}
	/deep/.input-placeholder {
		font-weight: 400;
		font-size: 28rpx;
		color: #999999!important;
	}
	/deep/.u-textarea {
		background: #FBFBFB !important;
		border-radius: 10rpx !important;
		padding: 30rpx 26rpx !important;
		.input-placeholder {
			font-weight: 500;
			font-size: 28rpx;
			color: #999999;
		}
		.u-textarea__field {
			font-weight: 500;
			font-size: 28rpx;
			color: #333333;
		}
		.u-textarea__count {
			background-color: #FBFBFB !important;
		}
	}
	/deep/.u-upload__wrap {
		.u-upload__wrap__preview {
			margin: 23rpx 58rpx 0 0;
			&:nth-child(3n) {
				margin-right: 0;
			}
			.u-upload__wrap__preview__image {
				width: 172rpx !important;
				height: 172rpx !important;
				border-radius: 10rpx;
			}
		}
	}
	/deep/.weui-input {
		font-weight: 500;
		font-size: 28rpx;
		color: #333333;
	}
	/deep/.input-placeholder {
		font-weight: 400;
		font-size: 28rpx;
		color: #999999!important;
	}
</style>