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

<template>
	<view>
		<view class="cu-bar bg-white margin-top">
			<view class="action">
				<text class="cuIcon-title text-orange "></text> 选择时间
			</view>
			<view class="uni-list">
				<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-if="list.length==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 list" :key="index">
				<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">
					<navigator :url="'./feedback/feedback?id='+item.id">
						<button class=" cu-btn round bg-red">反馈</button>
					</navigator>
				</view>
			</view>
			<text>共 {{list.length}} 记录</text>
		</view>
	</view>
</template>

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

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

			},

		},
		onReachBottom: function() { //滚动到底翻页
			this.pageNum += 1
			if(this.total!=0){
			this.selectByMember()
			}
		},
		created() {
			this.userInfo = uni.getStorageSync('userInfo')
			this.selectByMember()
		}
	}
</script>

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

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

	.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 .items .item:last-child {
		margin-bottom: 0upx;
	}

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

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

	.content text {
		padding-right: 5upx;
	}
</style>