yikangyang-wx/pages/order/order.vue

<template>
	<view>
		<view class="wrap safe-area-inset-bottom" v-if="token">
			<view class="u-tabs-box">
				<u-tabs-swiper :height="76" :font-size="24" active-color="#c20d12" bg-color="transparent"
					inactive-color="#999" ref="tabs" :list="tabs" :current="swiperCurrent" @change="change"
					:is-scroll="false" :offset="[5, 5]" swiperWidth="750"></u-tabs-swiper>
			</view>
			<!-- @transition="transition"
				@animationfinish="animationfinish" -->
			<swiper class="swiper-box" :current="swiperCurrent" @animationfinish="animationfinish" >
				<swiper-item class="swiper-item" v-for="(swiper, swiperIndex) in tabs" :key="swiperIndex">
					<scroll-view scroll-y style="height: 100%; width: 100%" @scrolltolower="reachBottom">
						<view>
							<view class="order" v-for="i in list[swiperIndex]" :key="i.id">
								<view class="title">
									<view class="title__name">
										<u-tag size="mini" type="primary" mode="dark" shape="circleLeft"
											:text="i.type === 1 ? '陪诊' : '陪护'"></u-tag>
										<text style="padding-left: 10rpx;">{{i.accompany_product?i.accompany_product.name:''}}</text>
									</view>
									<view class="title__status">{{ statusFormat(i.pay_status) }}</view>
								</view>

								<view class="price">
									<view class="price-icon">
										<image style="width:90rpx" mode="widthFix" :src="i.accompany_product?(i.accompany_product.cover?i.accompany_product.cover.url:vuex_default_icon):vuex_default_icon"></image>
										<!-- <u-icon :name="" size="30"></u-icon> -->
									</view>

									<view class="price-text">
										<view class="price-text__num">
											￥{{ i.price ? i.price : 0 }}</view>
										<view class="price-text__no">订单号 {{ i.no }}</view>
									</view>
								</view>

								<view class="info" @click.stop.native="$u.route({
									  url: '/package_sub/pages/AddOrder/AddOrder',
									  params: {
										order_id: i.id,
										type: i.type,
										site_id: i.hospital?i.hospital.site_id:''
									  }
									})">
									<view class="info__item">
										<text>{{i.type == 1 ? '被服务人' : '被服务人'}}</text>
										<text>{{ i.user_archive ? i.user_archive.name : i.user_archive_id }}</text>
									</view>
									<view class="info__item flex100">
										<text>{{(i.type == 1 ? '就诊' : '服务') + '时间'}}</text>
										<text>{{ i.time ? $moment(i.time).format('YYYY年MM月DD日 HH:mm') : '' }}</text>
									</view>
									<view class="info__item"  v-if="i.type==2">
										<text>详细地址</text>
										<text>{{ i.city || " " }}</text>
									</view>
									<view class="info__item flex100" v-if="i.type==1">
										<text>就诊医院</text>
										<text>{{ i.hospital ? i.hospital.name : '' }}</text>
									</view>
									<view class="info__item flex100">
										<text>下单时间： </text>
										<text>{{ i.created_at ? $moment(i.created_at).format('YYYY年MM月DD日 HH:mm') : '' }}</text>
									</view>
								</view>

								<view class="bottom">
									<view class="row1" style="justify-content: flex-end;">
										<u-button v-if="i.pay_status === 0" ripple shape="circle" :custom-style="editBtnStyle"
														:throttle-time="2000" @click="$u.route({
										  url: '/package_sub/pages/AddOrder/editOrder',
										  params: {
										    order_id: i.id,
										    type: i.type,
										    site_id: i.hospital ? i.hospital.site_id : ''
										  }
										})">修改信息</u-button>
										
										<u-button style="margin-left:20rpx" ripple shape="circle" :custom-style="payBtnStyle"
											:throttle-time="2000" @click="$u.route({
                              url: '/package_sub/pages/AddOrder/AddOrder',
                              params: {
                                order_id: i.id,
                                type: i.type,
                                site_id: i.hospital ? i.hospital.site_id : ''
                              }
                            })">{{ i.pay_status === 0 ? '立即支付' : '查看订单' }}</u-button>
									</view>
								</view>
							</view>
							<u-loadmore :status="loadStatus[swiperIndex]" bgColor="#f2f2f2"></u-loadmore>
						</view>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
		<view v-if="!token">
			<u-empty :margin-top="360" text="未登录" mode="order">
				<u-button shape="circle" slot="bottom" type="primary" ripple @click="$u.route({
                    url: '/pages/login/login',
                    type: 'redirect'
                  })">点击登录</u-button>
			</u-empty>

		</view>
		<Tabbar />
		<floatPhone></floatPhone>
	</view>
</template>

<script>
	import Tabbar from "@/component/Tabbar/Tabbar.vue";
	export default {
		components: {
			Tabbar,
		},
		data() {
			return {
				editBtnStyle:{
					"background-image": "linear-gradient(-90deg, #ddd 0%, #ccc 94%, #ccc 100%)",
					"font-weight": "500",
					"font-size": "28rpx",
					color: "#fff",
					width: "185rpx",
					height: "60rpx",
					"line-height": "60rpx",
				},
				payBtnStyle: {
					"background-image": "linear-gradient(-90deg, #e26165 0%, #c10d12 94%, #c10d12 100%)",
					"font-weight": "500",
					"font-size": "28rpx",
					color: "#fff",
					width: "185rpx",
					height: "60rpx",
					"line-height": "60rpx",
				},
				tabs: [{
						name: "全部",
						value: "",
						count: 0,
					},
					{
						name: "待支付",
						value: 0,
						count: 0,
					},
					{
						// name: '待评价',
						name: "已支付",
						value: 1,
						count: 0,
					},
					{
						name: "服务中",
						value: 2,
						count: 0,
					},
					{
						name: "已完成",
						value: 3,
						count: 0,
					},
					// {
					//   name: '已取消'
					// }
				],
				swiperCurrent: 0,
				tabsHeight: 0,
				dx: 0,
				scrollTop: [],
				loadStatus: [],
				refresherStatus: [],
				select: {
					page: 1,
					pay_status: "",
					page_size: 10,
				},
				list: [],
			};
		},
		onShow() {
			if (this.token) {
				this.getOrder(true);
			}
		},
		created() {
			for (let i = 0; i < this.tabs.length; i++) {
				this.refresherStatus.push(false);
				this.list.push([]);
				this.loadStatus.push("loadmore");
			}
		},
		computed: {
			statusFormat() {
				return function(status) {
					return this.vuex_order_status.find(i => i.value === status)?.name
				}
			},
			token() {
				return this.vuex_token || uni.getStorageSync('lifeData')?.vuex_token
			}
		},
		methods: {
			reachBottom() {
				// 此tab为空数据
				this.getOrder()
			},
			// tab栏切换
			change(index) {
				console.log("index",index)
				this.swiperCurrent = index;
			},
			transition({
				detail: {
					dx
				}
			}) {
				this.$refs.tabs.setDx(dx);
			},
			animationfinish({
				detail: {
					current
				}
			}) {
				this.$refs.tabs.setFinishCurrent(current);
				this.swiperCurrent = current;
				this.select.pay_status = this.tabs[this.swiperCurrent].value;
				this.getOrder(true)
			},
			async getOrder(isRefresh = false) {
				if (isRefresh) {
					this.select.page = 1;
					this.loadStatus[this.swiperCurrent] = 'loadmore'
				}
				if (this.loadStatus[this.swiperCurrent] === 'nomore') return
				try {
					this.loadStatus[this.swiperCurrent] = 'loading'
					const res = await this.$u.api.accompanyOrders(this.select);
					console.log(res);
					this.tabs[0].count = res.pay_status_count_0+res.pay_status_count_1+res.pay_status_count_2+res.pay_status_count_3;
					this.tabs[1].count = res.pay_status_count_0;
					this.tabs[2].count = res.pay_status_count_1;
					this.tabs[3].count = res.pay_status_count_2;
					this.tabs[4].count = res.pay_status_count_3;
					if (isRefresh) {
						this.list[this.swiperCurrent].length = 0;
					}
					this.list[this.swiperCurrent].push(...res.order.data)
					if (this.list[this.swiperCurrent].length >= res.order.total) {
						this.loadStatus[this.swiperCurrent] = 'nomore'
					} else {
						this.select.page++;
						this.loadStatus[this.swiperCurrent] = 'loadmore'
					}
				} catch (err) {
					console.error(err);
					this.loadStatus[this.swiperCurrent] = 'loadmore'
				}
			},
		},
	};
</script>

<style>
	page {
		height: 100%;
		background-color: #eee;
	}
</style>

<style lang="scss" scoped>
	::v-deep .u-load-more-wrap {
		padding: 20rpx 0;
	}

	::v-deep .u-load-more-wrap {
		background-color: #eee !important;

		.u-line-1 {
			background-color: #eee !important;
		}
	}

	.d-flex {
		display: flex;
	}

	.ai-center {
		align-items: center;
	}

	.jc-center {
		justify-content: center;
	}

	.wrap {
		display: flex;
		flex-direction: column;
		height: calc(100vh - var(--window-top) - calc(60px + 6px));
		width: 100%;
	}

	.swiper-box {
		flex: 1;
	}

	.swiper-item {
		height: 100%;
	}

	.order {
		margin: 0 25rpx;
		border-radius: 10rpx;
		filter: drop-shadow(0 0 10rpx rgba(211, 211, 214, 0.3));
		background-color: #ffffff;
		margin-top: 24rpx;

		.title {
			display: flex;
			align-items: center;
			padding: 37rpx 39rpx 32rpx 45rpx;
			position: relative;

			&__name {
				font-size: 26rpx;
				color: #333333;
				font-weight: bold;

				::v-deep .u-tag {
					font-size: 26rpx;
				}
			}

			&__status {
				font-size: 26rpx;
				color: #c20d12;
				font-weight: 500;
				margin-left: auto;
			}

			&::after {
				content: "";
				height: 2rpx;
				background: #999999;
				opacity: 0.302;

				position: absolute;
				bottom: 0;
				left: 39rpx;
				right: 39rpx;
			}
		}

		.price {
			display: flex;
			align-items: center;
			padding: 28rpx 0 0 44rpx;

			&-icon {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 90rpx;
				height: 84rpx;
				border-radius: 10rpx;
				// background-color: #f3e7d8;
			}

			&-text {
				padding-left: 28rpx;

				&__num {
					font-size: 30rpx;
					color: #000000;
					font-weight: bold;
				}

				&__no {
					font-size: 24rpx;
					color: #999999;
					font-weight: 500;
					padding-top: 14rpx;
				}
			}
		}

		.info {
			display: flex;
			flex-wrap: wrap;
			padding: 35rpx 45rpx 0;

			&__item {
				flex-basis: 50%;
				color: #333;
				font-size: 26rpx;
				font-weight: 500;
				display: flex;
				margin-bottom: 32rpx;

				&>text {
					display: block;
				}

				&>text:nth-child(1) {
					color: #999;
					padding-right: 20rpx;
					flex: 0;
					word-break: keep-all;
				}

				&>text:nth-child(2) {}
			}

			.flex100 {
				flex-basis: 100%;
			}
		}

		.bottom {
			padding: 6rpx 28rpx 35rpx 43rpx;

			.row1 {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.time {
					font-size: 24rpx;
					color: #999999;
					font-weight: 500;
				}
			}
		}
	}
</style>