jurong_circle_front_app/pages/my/order.vue

<template>
	<view class="order-container">
		<u-navbar id="navBar" title="" :border-bottom="false" :background="{ background: '#F5F8FF' }">
			<view class="slot-wrap">
				<u-search :show-action="false" placeholder="搜索订单" v-model="params.search" bgColor="#CADBFF"
					@search="handleSearch"></u-search>
			</view>
			<template v-slot:right>
				<u-icon class="more-dot-fill" name="more-dot-fill"></u-icon>
			</template>
		</u-navbar>

		<view class="box-tabs" id="tabsId">
			<u-tabs bg-color="#F5F8FF" :show-bar="false" :list="tabList" :is-scroll="false"
				v-model="currentTab"></u-tabs>
			<view class="menu-list">
				<!-- 'pending'：待发货,'paid','shipped'：已发货,'delivered','cancelled'：已取消,'pre_order'：预订单状态（未选择地址和支付方式）,'completed'：已收货 -->
				<view class="menu-item" :class="currentMenu==''?'active':''" @click="handleChangeMenu('')">全部订单</view>
				<view class="menu-item" :class="currentMenu=='pending'?'active':''"
					@click="handleChangeMenu('pending')">待发货</view>
				<view class="menu-item" :class="currentMenu=='pre_order'?'active':''"
					@click="handleChangeMenu('pre_order')">待支付</view>
				<view class="menu-item" :class="currentMenu=='shipped'?'active':''"
					@click="handleChangeMenu('shipped')">已发货</view>
				<view class="menu-item" :class="currentMenu=='completed'?'active':''"
					@click="handleChangeMenu('completed')">已完成</view>
				<view class="menu-item" :class="currentMenu=='cancelled'?'active':''"
					@click="handleChangeMenu('cancelled')">已取消</view>
			</view>
		</view>

		<scroll-view scroll-y="true" class="scroll-view" :style="'height:'+scrollHeight+'px'" @scrolltolower="loadData">
			<template v-if="currentTab==0">
				111
			</template>
			<template v-if="currentTab==1">
				<view class="order-list" v-for="orderItem in orderList">
					<view class="u-m-l-20">订单号：{{orderItem.order_no}}</view>
					<view class="order-item" v-for="item in orderItem.items">
						<view class="item-left">
							<image style="width: 100%;height: 100%;" :src="getImageUrl(item.image_url)" mode="">
							</image>
						</view>
						<view class="item-right">
							<u-row>
								<u-col :span="10">
									<view>{{item.product_name}}</view>
									<view style="display: flex;align-items: center;">
										<image class="icon" src="/static/icon/rongdou.png" mode=""></image>
										{{item.rongdou_price}}
									</view>
									<view style="display: flex;align-items: center;">
										<image class="icon" src="/static/icon/jifen.png" mode=""></image>
										{{item.points_price}}
									</view>
								</u-col>
								<u-col :span="2" text-align="right">
									<view>X{{item.quantity}}</view>
								</u-col>
							</u-row>
						</view>
					</view>

					<view class="operate-btns">
						<!-- 待发货 -->
						<template v-if="orderItem.status=='pending'">
							<u-button hover-class="none" class="operate-btn"
								@click="handelCancel(orderItem)">取消订单</u-button>
						</template>
						<!-- 已支付 -->
						<!-- <template v-if="orderItem.status=='paid'">
							<u-button hover-class="none" class="operate-btn">取消订单</u-button>
						</template> -->
						<!-- 已发货 -->
						<template v-if="orderItem.status=='shipped'">
							<u-button hover-class="none" class="operate-btn"
								@click="handleReceive(orderItem)">确认收货</u-button>
						</template>
						<!-- 已取消 -->
						<!-- <template v-if="orderItem.status=='cancelled'">
							<u-button hover-class="none" class="operate-btn">查看详情</u-button>
						</template> -->
						<!-- 待支付 -->
						<template v-if="orderItem.status=='pre_order'">
							<u-button hover-class="none" class="operate-btn"
								@click="handelCancel(orderItem)">取消订单</u-button>
							<u-button hover-class="none" class="operate-btn"
								@click="handlePay(orderItem)">立即支付</u-button>
						</template>
						<!-- 完成 -->
						<!-- <template v-if="orderItem.status=='completed'">
							<u-button hover-class="none" class="operate-btn">评价</u-button>
						</template> -->
						<u-button hover-class="none" class="operate-btn"
							@click="handleOrderDetail(orderItem)">查看详情</u-button>
					</view>
				</view>
				<u-loadmore margin-top="20" :status="loadStatus"></u-loadmore>
				<view class="box-view"></view>
			</template>
			<template v-if="currentTab==2">
				222
			</template>
		</scroll-view>
	</view>

	<!-- 取消订单提示 -->
	<u-modal @confirm="confirmCancel" v-model="showCancel" content="是否取消订单" :show-cancel-button="true"></u-modal>
	<!-- 收货提示 -->
	<u-modal @confirm="confirmReceive" v-model="showReceive" content="是否确认收到商品" :show-cancel-button="true"></u-modal>
	<!-- 详情 -->
	<u-modal v-model="showDetail" title="订单详情">
		<view class="slot-content">
			<view class="info-title">
				订单信息
			</view>
			<view class="info-item">
				<view class="info-name">订单号</view>
				<view class="info-value">{{detailInfo.order_no}}</view>
			</view>
			<view class="info-item">
				<view class="info-name">用户名</view>
				<view class="info-value">{{detailInfo.username}}</view>
			</view>
			<view class="info-item">
				<view class="info-name">下单时间</view>
				<view class="info-value">{{detailInfo.created_at}}</view>
			</view>
			<view class="info-item">
				<view class="info-name">更新时间</view>
				<view class="info-value">{{detailInfo.updated_at}}</view>
			</view>
			<view class="info-item">
				<view class="info-name">订单状态</view>
				<!-- <view class="info-value">{{detailInfo.status}}</view> -->
				<u-tag v-if="detailInfo.status=='pending'" text="待发货"></u-tag>
				<u-tag v-if="detailInfo.status=='shipped'" text="已发货"></u-tag>
				<u-tag v-if="detailInfo.status=='cancelled'" text="已取消"></u-tag>
				<u-tag v-if="detailInfo.status=='pre_order'" text="预订单"></u-tag>
				<u-tag v-if="detailInfo.status=='completed'" text="已收货"></u-tag>
			</view>
			<view class="info-item" v-if="detailInfo.address">
				<view class="info-name">收货信息</view>
				<view class="info-value">
					{{detailInfo.address.recipient_name + " " + detailInfo.address.detail_address}}
				</view>
			</view>
			<view class="info-title">
				商品信息
			</view>
			<view class="order-item" v-for="item in detailInfo.items">
				<view class="item-left">
					<image style="width: 100%;height: 100%;" :src="getImageUrl(item.image_url)" mode="">
					</image>
				</view>
				<view class="item-right">
					<u-row>
						<u-col :span="10">
							<view>{{item.product_name}}</view>
							<view style="display: flex;align-items: center;">
								<image class="icon" src="/static/icon/rongdou.png" mode=""></image>
								{{item.rongdou_price}}
							</view>
							<view style="display: flex;align-items: center;">
								<image class="icon" src="/static/icon/jifen.png" mode=""></image>
								{{item.points_price}}
							</view>
						</u-col>
						<u-col :span="2" text-align="right">
							<view>X{{item.quantity}}</view>
						</u-col>
					</u-row>
				</view>
			</view>
			<view class="info-title">
				费用明细
			</view>
			<view class="info-item">
				<view class="info-name">商品总计</view>
				<view class="info-value">
					<image class="icon" src="/static/icon/rongdou.png" mode=""></image>
					{{detailInfo.total_rongdou}}
				</view>
			</view>
			<view class="info-item">
				<view class="info-name">实付</view>
				<view class="info-value" v-if="detailInfo.real_rongdou">
					<image class="icon" src="/static/icon/rongdou.png" mode=""></image>
					{{detailInfo.real_rongdou}}
				</view>
				<view class="info-value" v-if="detailInfo.real_points">
					<image class="icon" src="/static/icon/jifen.png" mode=""></image>
					{{detailInfo.real_points}}
				</view>
			</view>
		</view>
	</u-modal>
	<!-- 消息提示 -->
	<u-toast ref="msgRef" />
</template>

<script setup>
	import {
		ref,
		onMounted,
		getCurrentInstance,
		computed,
		watch
	} from 'vue';
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app'
	import {
		mallAPI
	} from '../../api/mall';
	import {
		getImageUrl
	} from '../../util/common.js'

	const msgRef = ref()

	const instance = getCurrentInstance();
	const scrollHeight = ref(0)
	const loadHeight = () => {
		uni.getSystemInfo({
			success(res) {
				let screenHeight = res.screenHeight
				uni.createSelectorQuery().in(instance.proxy).select("#navBar").boundingClientRect((data) => {
					scrollHeight.value = screenHeight - data.height
				}).exec()
				uni.createSelectorQuery().in(instance.proxy).select("#tabsId").boundingClientRect((
					data) => {
					scrollHeight.value = scrollHeight.value - data.height
				}).exec()
			}
		})
	}

	const navBarTitle = {
		fontWeight: '510',
		fontStyle: 'Medium',
		fontSize: '40rpx',
		lineHeight: '52px'
	}

	const handleSearch = () => {
		msgRef.value.show({
			title: '暂无功能，请期待~'
		})
	}

	const tabList = ref([{
		name: '项目订单'
	}, {
		name: '商品订单'
	}, {
		name: '理财产品',
	}])
	const currentTab = ref(1)
	const currentMenu = ref(0)

	watch(currentTab, (val) => {
		if (val == 0 || val === 2) {
			msgRef.value.show({
				title: '暂无功能，请期待~'
			})
			currentTab.value = 1
			return
		}
		loadData()
	})

	const handleChangeMenu = (val) => {
		currentMenu.value = val
		clearData()
		params.value.status = val
		loadData()
	}

	// 取消订单
	const showCancel = ref(false)
	const cancelId = ref()

	const handelCancel = (item) => {
		showCancel.value = true
		cancelId.value = item.id
	}

	const confirmCancel = () => {
		mallAPI.cancelOrder(cancelId.value).then(res => {
			msgRef.value.show({
				title: '取消成功',
				type: 'success'
			})
			clearData()
			loadData()
		})
	}

	// 收货
	const showReceive = ref(false)
	const receiveId = ref()
	const handleReceive = (item) => {
		showReceive.value = true
		receiveId.value = item.id
	}
	const confirmReceive = () => {
		mallAPI.confirmOrder(receiveId.value).then(res => {
			msgRef.value.show({
				title: '收货成功',
				type: 'success'
			})
			clearData()
			loadData()
		})
	}

	// 进入支付页面
	const handlePay = (item) => {
		uni.navigateTo({
			url: '/pages/home/pay?preOrderId=' + item.id
		})
	}

	// 详情
	const showDetail = ref(false)
	const detailInfo = ref({})
	const allPay = computed(() => {
		let data = 0
		detailInfo.value.items.forEach(item => {
			data += item.rongdou_price * item.quantity
		})
		return data
	})
	// 查看详情
	const handleOrderDetail = (item) => {
		showDetail.value = true
		detailInfo.value = item
	}


	const params = ref({
		page: 1,
		limit: 10,
		search: '',
		status: ''
	})
	const loadStatus = ref('loadmore')
	const maxPage = ref(1)
	const orderList = ref([])

	const loadData = () => {
		if (currentTab.value == 0) {
			// 项目订单
		} else if (currentTab.value == 1) {
			// 商品订单
			if (loadStatus.value == 'nomore') return
			mallAPI.getOrderList(params.value).then(res => {
				orderList.value = orderList.value.concat(res.data.orders)
				maxPage.value = res.data.pagination.pages
				params.value.page++
				if (maxPage.value < params.value.page) {
					loadStatus.value = 'nomore'
				}
			})
		} else if (currentTab.value == 2) {
			// 理财产品
		}

	}

	const clearData = () => {
		loadStatus.value = 'loadmore'
		params.value.page = 1
		params.value.search = ''
		orderList.value = []
	}

	onShow(() => {
		clearData()
		loadData()
	})

	onMounted(() => {
		loadHeight()
	})
</script>

<style lang="scss" scoped>
	.order-container {
		width: 100%;
		height: 100vh;
		background: var(--Color, #E4ECFF);
		background-blend-mode: lighten;

		.more-dot-fill {
			width: 48rpx;
			height: 48rpx;
			margin-right: 24rpx;
		}

		.box-tabs {
			background: #F5F8FF;

			.menu-list {
				display: flex;
				font-weight: 400;
				font-size: 26rpx;
				line-height: 100%;
				padding: 20rpx 20rpx;
				overflow-x: auto;
				white-space: nowrap;
				
				.menu-item {
					background: #DFDFDF;
					border-radius: 12rpx;
					padding: 12rpx 20rpx;
					color: #676767;
					margin: 0 10rpx;
				}

				.active {
					background: #93B2FF80;
					color: #305DEF;
				}
			}
		}


		.scroll-view {

			.order-list {
				background: #F5F8FF;
				margin: 10rpx 0;
				padding: 20rpx 0;

				.order-item {
					display: flex;
					padding: 20rpx;

					.item-left {
						width: 160rpx;
						height: 160rpx;
					}

					.item-right {
						flex: 1;

						.icon {
							width: 30rpx;
							height: 30rpx;
						}
					}
				}

				.operate-btns {
					display: flex;
					justify-content: flex-end;

					.operate-btn {
						margin: 10rpx;
						width: 136rpx;
						height: 52rpx;
						background: #D4D9EA;
						font-weight: 400;
						font-size: 24rpx;
						line-height: 100%;
						border: none;
					}

				}

				.box-view {
					height: 20rpx;
				}


			}
		}

	}

	.slot-content {
		padding: 10rpx 20rpx 20rpx;


		.icon {
			width: 30rpx;
			height: 30rpx;
		}

		.info-title {
			font-weight: 400;
			font-size: 30rpx;
			line-height: 100%;
			margin: 30prx 0;
		}

		.info-item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin: 20rpx 0;

			.info-name {
				font-weight: 400;
				font-size: 24rpx;
				line-height: 100%;
			}

			.info-value {
				max-width: 50%;
				font-weight: 400;
				font-size: 24rpx;
				line-height: 100%;

				display: flex;
				align-items: center;
			}
		}



		.order-item {
			display: flex;
			padding: 20rpx;

			.item-left {
				width: 160rpx;
				height: 160rpx;
			}

			.item-right {
				flex: 1;
				font-weight: 400;
				font-size: 24rpx;
				line-height: 100%;
			}
		}
	}
</style>