hs_hzl_uniapp_ml/pages/user/expense/expenseCalendar.vue

<template>
	<view>
		<view>
			<view>
				<u-list @scrolltolower="scrolltolower">
					<view class="hand">
						<u-row>
							<u-col span="8">
								<view class="orgTop">
									<uni-row>
										<uni-col :span="10">
											<u--text text="所属机构" size="22" bold color="#619f8a"></u--text>
										</uni-col>
										<uni-col :span="24">
											<u--text :text="from.organizationName" size="22" bold color="#757575">
											</u--text>
										</uni-col>
									</uni-row>
								</view>
							</u-col>
						</u-row>
					</view>
					<view v-if="indexList.length === 0" style="padding: 0 50px;">
						<image style="margin: 0 auto; width: 100%;" src="../../../static/img/page/empty_view.png">
						</image>
					</view>
					<view v-for="(item, index) in indexList" :key="index">
						<view :data-index="index" class="order-item" @touchstart="drawStart" @touchmove="drawMove"
							@touchend="drawEnd" :style="'right:'+item.right+'px'">
							<view class="listItemStyle" @click="getDetails(item)">
								<u-row>
									<u-col v-if="item.zfbz === 0" span="3">
										<view class="orderFoodStyle orderFoodType0">
											待取餐
										</view>
									</u-col>
									<u-col v-if="item.zfbz === 1" span="3">
										<view class="orderFoodStyle orderFoodType2">
											已退单
										</view>
									</u-col>
									<u-col v-if="item.zfbz === 2" span="3">
										<view class="orderFoodStyle orderFoodType2">
											已完成
										</view>
									</u-col>
									<u-col span="6" class="orderFoodStyle orderFoodType">
										<view>
											订单：{{item.orderNumber}}
										</view>
									</u-col>
									<u-col span="3" class="orderFoodStyle orderFoodType">
										<view v-if="item.placeName">
											{{item.placeName}}
										</view>
									</u-col>
								</u-row>
								<u-row>
									<u-col span="6" class="orderTimeText">{{item.paytime}}</u-col>
									<u-col span="4" textAlign="right">
										<view class="moneyText">
											{{"- "+item.orderTotal+""}}
										</view>
									</u-col>
								</u-row>
							</view>
							<view v-if="item.zfbz === 0" class="remove" @click="delData(item)">退 单
							</view>
						</view>
					</view>
				</u-list>
				<u-modal :show="modalContent1.show" :title="modalContent1.title" :showCancelButton="true"
					confirmColor="#53a591" @confirm="backSubmit()" @cancel="modalContent1.show = false">
					{{modalContent1.content}}
				</u-modal>
				<u-modal :show="modalContent2.show" :title="modalContent2.title" :content='modalContent2.content'
					confirmColor="#53a591" @confirm="modalContent2.show = false">
				</u-modal>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				type: uni.getStorageSync("tabType"),
				dateShow: false,
				data: {},
				from: {
					organizationName: ''
				},
				indexList: [],
				modalContent1: {
					show: false,
					title: '提示',
					content: '确认退单吗？'
				},
				modalContent2: {
					show: false,
					title: '提示',
					content: ''
				},
				//列表数据（
				indexList: [],
				//左滑默认宽度
				startX: 0,
				startY: 0,
				delBtnWidth: 90,
				pageNum: 1,
				pageSize: 10,
				total: 1
			}
		},
		onLoad() {
			this.getExpenseCalendarList()
		},
		methods: {
			getDetails(item) {
				uni.setStorageSync('order', item)
				this.$goto('details')
			},
			async getExpenseCalendarList() {
				if (this.indexList.length >= this.total) {
					return;
				}
				const orgInfo = uni.getStorageSync("orgInfo")
				this.from.organizationName = orgInfo.organizationName
				this.from.userName = uni.getStorageSync('userInfo').userName
				this.from.organizationCode = orgInfo.organizationCode
				let urlType = 1;
				if (orgInfo.organizationCode === 'G00000003') {
					urlType = 2;
				}
				// 发送请求
				const {
					data: res
				} = await this.$httpRequest({
					url: '/app/getOrder?' + "pageNum=" + this.pageNum + "&" + "pageSize=" + this.pageSize,
					method: 'post',
					data: this.from,
					urlType: this.$getUrlType()
				});
				if (res.code === 200) {
					this.total = res.total
					this.loadmore(res.rows)
				}
			},
			change(e) {
				//this.changeDate = this.result(e.value, e.mode)
			},
			scrolltolower() {
				this.pageNum++;
				this.getExpenseCalendarList()
			},
			loadmore(data) {
				if (data.length === 0) {
					return;
				}
				for (var i = 0; i < data.length; i++) {
					this.indexList.push(data[i])
				}
			},
			formatter(type, value) {
				if (type === 'year') {
					return `${value}年`
				}
				if (type === 'month') {
					return `${value}月`
				}
				if (type === 'day') {
					return `${value}日`
				}
				return value
			},
			//开始触摸滑动
			drawStart(e) {
				var touch = e.touches[0];
				this.startX = touch.clientX;
				this.startY = touch.clientY;
			},
			//触摸滑动
			drawMove(e) {
				for (var index in this.indexList) {
					this.$set(this.indexList[index], 'right', 0);
				}
				var item = this.indexList[e.currentTarget.dataset.index];
				if (item.zfbz === 2) {
					return;
				}
				if (item.zfbz === 3) {
					return;
				}
				var touch = e.touches[0];
				//防止快速滑动影响动画效果
				//上滑
				if (e.touches[0].clientY - this.startY > 100) {
					return;
				}
				//下滑
				if (this.startY - e.touches[0].clientY > 100) {
					return;
				}
				var disX = this.startX - touch.clientX;
				if (disX >= 0) {
					if (disX > this.delBtnWidth) {
						disX = this.delBtnWidth;
					}
					this.$set(this.indexList[e.currentTarget.dataset.index], 'right', disX);
				} else {
					this.$set(this.indexList[e.currentTarget.dataset.index], 'right', 0);
				}
			},
			//触摸滑动结束
			drawEnd(e) {
				var item = this.indexList[e.currentTarget.dataset.index];
				//如果滑动距离超过65默认展开按钮
				if (item.right >= 65) {
					item.right = this.delBtnWidth;
					return;
				}
				//赋值动画初始距离
				var dhWidth = item.right;
				//每隔 3 毫秒 减少 2px动画距离 实现动画效果
				var dhStop = setInterval(() => {
					//console.log(item.right)
					dhWidth -= 2;
					//当动画距离已经为0或小于零 默认列表距离为0
					if (dhWidth <= 0) {
						item.right = 0;
						//清除本次定时器
						clearInterval(dhStop)
						return;
					}
					item.right = dhWidth;
				}, 3);
			},
			async submitBack(orderNumber) {
				const {
					data: res
				} = await this.$httpRequest({
					url: '/app/back?orderNumber=' + orderNumber,
					method: 'get',
					isNotErrorMsg: true
				});
				if (res.code === 200) {
					uni.redirectTo({
						url: 'expenseCalendar'
					});
				} else {
					this.modalContent2.content = res.msg
					this.modalContent2.show = true
				}
			},
			backSubmit(item) {
				// 发送请求
				this.submitBack(uni.getStorageSync("orderNumber"))
				this.modalContent1.show = false;
			},
			//删除方法
			delData(item) {
				this.modalContent1.show = true;
				uni.setStorageSync("orderNumber", item.orderNumber)
				//关闭侧边滑动
				item.right = 0
			}
		}
	}
</script>

<style scoped>
	page {
		background-color: #eeeeee;
	}

	.hand {
		margin-top: 2px;
		padding: 5%;
		border-radius: 10px 10px 0 0;
		background: linear-gradient(to bottom right, #85c1bf, #f1fef9);
	}

	.orgTop {
		margin-bottom: 5px;
	}

	.sxButton {
		width: 100px;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.order-item {
		position: relative;
	}

	.remove {
		width: 100px;
		height: 100%;
		background-color: #57aa8e;
		color: white;
		position: absolute;
		top: 0;
		right: -100px;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 18px;
	}

	.listTermDate {
		padding: 10px 0;
	}

	.listItemStyle {
		padding: 15px;
		border-bottom: 1px solid #d8d8d8;
		border-top: 1px solid #d8d8d8;
	}

	.orderFoodStyle {
		font-size: 20px;
	}

	.orderFoodType {
		color: #000000;
	}

	.orderFoodType0 {
		color: #1787ff;
	}

	.orderFoodType1 {
		color: #da0000;
	}

	.orderFoodType2 {
		color: #00af00;
	}

	.moneyText {
		position: relative;
		top: 5px;
		right: 2%;
		font-size: 26px;
		color: #b30000;
	}

	.orderTimeText {
		position: relative;
		top: 5px;
		color: #bebebe;
		font-size: 16px;
	}
</style>