renli-wx/pages/tabBar/myHome/service-feedback/service-feedback.vue

<template>
	<view>
		<view class="cu-list bg-white flex align-center justify-between "
			style="padding: 10rpx 5%;">
			<button class="cu-btn round bg-red light" @click="upMonth">上一月</button>
			<text>{{nowDate}}</text>
			<button class="cu-btn round bg-red light" @click="downMonth">下一月</button>
		</view>
		<!-- <view class="cu-bar bg-white margin-top">
			<view class="action">
				<text class="cuIcon-title text-orange "></text> 服务列表
			</view>
			<view class="uni-list" style="padding-right: 10upx;">
				<view class="uni-list-cell">
					<view class="uni-list-cell-db">
						<picker fields="month" mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
							<button class="cu-btn bg-green shadow" data-target="Modal">{{date}}</button>
						</picker>
					</view>
				</view>
			</view>
		</view> -->
		<view v-show="pageInfo.total==0">
			<view class='empty cuIcon-info'></view>
			<view class='empty-text text-gray'>暂无数据</view>
		</view>
		<view class="list">
			<view class="items padding-xl radius shadow shadow-lg bg-white margin-top flex solid-bottom justify-between align-end"
			 v-for="(item,index) in pageInfo.list" :key="index">
				<view class="flex justify-between align-center " style="width: 100%;">
					<view class="">
						<view class="item">
							<view class="title">消费单号：</view>
							<view class="content">{{item.cashNum}}</view>
						</view>
						<view class="item">
							<view class="title">消费名称：</view>
							<view class="content">{{item.projectName}}</view>
						</view>
						<view class="item">
							<view class="title">消费金额：</view>
							<view class="content">￥{{item.transactionPrice}}</view>
						</view>
						<view class="item">
							<view class="title">支付方式：</view>
							<view class="content">
								<text v-if="item.courseAccountId!=null">疗程卡包支付</text>
								<text v-if="item.collectionRechargeAmount!=0">卡付:{{item.collectionRechargeAmount}} </text>
								<text v-if="item.collectionCashAmount!=0">现付:{{item.collectionCashAmount}} </text>
								<text v-if="item.collectionIntegralAmount!=0">积分付:{{item.collectionIntegralAmount}} </text>
							</view>
						</view>
						<view class="item">
							<view class="title">消费时间：</view>
							<view class="content">{{item.cashDate}}</view>
						</view>
					</view>
					<view class="item-goin">
							<button class="btns cu-btn round bg-green" v-if="item.isMemberFeedback==1">已反馈</button>
						<navigator :url="'./feedback/feedback?item='+ JSON.stringify(item) " v-else>
							<button class="btns cu-btn round bg-red">反馈</button>
						</navigator>
					</view>
				</view>

			</view>
			<text>共 {{pageInfo.total}} 记录</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			const currentDate = this.getDate({
				format: true
			})
			return {
				date: currentDate,
				nowDate:null,
				pageInfo:{
				list: [],
				pageSize: 5,
				pageNum: 1,
				total: 0,
				},
				userInfo: null,
			}
		},
		computed: {
			
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}
		},
		methods: {
			upMonth() {
				this.nowDate = this.getUpMonth(this.nowDate)		
				this.selectProgress()
			},
			downMonth() {
				this.nowDate = this.getNextMonth(this.nowDate)	
						this.selectProgress()
			},
			bindDateChange: function(e) {
				this.date = e.target.value
				this.pageInfo.pageSize = 5
				this.pageInfo.pageNum = 1
				this.pageInfo.list = []
				this.selectProgress()
			},
			getDate(type) {
				//获取时间
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;

				if (type === 'start') {
					month = month - 2;
				} else if (type === 'end') {
					month = month ;
				}
				month = month > 9 ? month : '0' + month;;
				return `${year}-${month}`;
			},
			selectProgress() {
				let date = this.nowDate.replace(/[^0-9]/g, '')
				let form = {
					memberId: this.userInfo.id,
					storeId: this.userInfo.storeId,
					selectDate: date,
					pageSize: this.pageInfo.pageSize,
					pageNum: this.pageInfo.pageNum,
					isCancel: 0,
					type:1
				}
				
				this.$api.selectProgress(form).then(res => {
					console.log(res);
					if (res.code == '000000') {
						this.pageInfo = res.pageInfo
					} else if(res.code=='510002'||res.code=='502001'){
					}else{
						uni.showToast({
							title: res.message,
							icon: "none",
							duration: 2000
						});
					}
				})

			},

		},
		onReachBottom: function() { //滚动到底翻页
		this.pageInfo.pageSize = this.pageInfo.pageSize+5
				this.selectProgress()
		},
		onShow: function() {
			this.userInfo = uni.getStorageSync('userInfo')
			this.nowDate = this.formatTime(new Date(),"YYYY-MM")
			this.pageInfo.list = []
			this.selectProgress()

		},
		onPullDownRefresh: function() {
			setTimeout(function() {
				uni.redirectTo({
					url: './service-feedback'
				})
				uni.showToast({
					title: '刷新成功',
					icon: 'success',
					duration: 2000
				});
				uni.stopPullDownRefresh();
			}, 1000);
		},
	}
</script>

<style scoped>
	.list {
		margin: 15upx 10upx;

	}


	.list .items {
		background-color: #FFF;
		padding: 20upx;
		border-radius: 10upx;
		margin-bottom: 20upx;
	}

	.list .list_footer {
		position: fixed;
		bottom: 0;
	}

	.list .items .item {
		display: flex;
		align-items: center;
		margin-bottom: 10upx;
	}

	.list .item-goin {
		width: 150upx;
		display: inline-block;
	}

	.list .items .item:last-child {
		margin-bottom: 0upx;
	}

	.list .items .item .title {
		width: 135upx;
		font-size: 27upx;
	}

	.list .items .item .content {
		/* width: 75%; */
		font-size: 27 upx;
	}

	.content text {
		padding-right: 5upx;
	}

	.btns {
		/* padding: 0; */
	}
</style>