renli-wx/pages/tabBar/mySet/common/expense/expense.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 class="cu-form-group">
			<text>只展示最近三天的记录</text>
		</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" v-for="(item,index) in list"
				:key="index" style="display: flex;justify-content: space-between;">
				<view class="">
					<view class="item">
						<view class="title">项目名称：</view>
						<view class="content">{{item.tradeName}}</view>
					</view>
					<view class="item">
						<view class="title">消费金额：</view>
						<view class="content">￥{{item.tradeMoney}}</view>
					</view>
					<view class="item">
						<view class="title">消费类型：</view>
						<view class="content">
							<text v-show="item.docType=='card_recharge'">充值卡</text>
							<text v-show="item.docType=='card_use'">买疗程</text>
							<text v-show="item.docType=='store_cash'">服务收银</text>
							<text v-show="item.docType=='card_repay'">还款单</text>
							<text v-show="item.docType=='refund_recharge'">充值退</text>
							<text v-show="item.docType=='refund_course'">疗程退</text>
							<text v-show="item.docType=='refund_cash'">消费退</text>
							<text v-show="item.docType=='promotion'">促销购买</text>
						</view>
					</view>
					<view class="item">
						<view class="title">消费时间：</view>
						<view class="content">{{item.docDate}}</view>
					</view>
				</view>
				<view class="item-goin">
					<navigator v-show="item.state==0" :url="'./appraise/appraise?item='+ JSON.stringify(item)">
						<button class=" cu-btn round bg-red">评价</button>
					</navigator>
					<navigator v-show="item.state==1" :url="'./appraise/appraise?item='+ JSON.stringify(item)">
						<button v-show="item.state==1" class=" cu-btn round bg-green">已评价</button>
					</navigator>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			const currentDate = this.getDate({
				format: true
			})
			return {
				date: currentDate,
				list: [],
			}
		},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}
		},
		methods: {
			bindDateChange: function(e) {
				console.log(e);
				this.date = e.target.value
			},
			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}`;
			},
			appraise(item) {
				//评价 传参
				console.log(item);
				uni.navigateTo({
					url: './appraise/appraise',
					success: function(res) {
						// 通过eventChannel向被打开页面传送数据
						res.eventChannel.emit('data', item)
					}

				})
			},
			selectRecentRecord() {
				var userInfo = uni.getStorageSync('userInfo')
				var form = {
					memberId: userInfo.id,
					storeId: userInfo.storeId,
				}
				this.$api.selectRecentRecord(form).then(res => {
					if (res.code == '000000') {
						this.list = res.rows
					} else {

					}
				})
			}
		},
		onShow: function() {
			console.log(this.date);
			this.selectRecentRecord()

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

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

	.list .item-goin {
		width: 25%;
		display: inline-block;
		padding-top: 50upx;
	}

	.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: 180upx;
		font-size: 27upx;
	}

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