shop-uniapp-240426/pages/order/order.vue

<template>
	<view class="order">
		<view class="order-nav">
			<u-navbar :title="$t('page.order.myOrder')" @leftClick="leftClick()"></u-navbar>
		</view>
		<u-sticky>
			<view class="order-tabs">
				<u-tabs lineWidth="40" lineColor="#ED762F" @change="tabChange" :current="currentIndex"
					:list="classifyList"></u-tabs>
			</view>
		</u-sticky>
		<view v-if="!noOrder" class="order-list">
			<view v-for="(item,index) in productList" :key="index" class="order-item" v-if="item.state == currentIndex">
				<view class="order-item-top">
					<!-- <view class="order-time">
						{{ item.createTime }}
						
					</view> -->
					<text class="order-status">{{ classifyList[item.state].name }}</text>
				</view>
				<orderProductListVue :product="item"></orderProductListVue>
				<!-- <view class="order-bottom">TôngcÃng:￥<text class="total-price">5280.0</text>(baogòmcàvànchuyên¥0.0) -->
				<view class="order-bottom">{{ $t('page.order.total') }}:<text
						class="total-price">{{ item.sumPrice }}</text></view>
				<view class="btns">
					<view @click="toPayOrder(item)" v-if="currentIndex == 0" class="btn">
						{{ $t('page.order.immediatePayment') }}
					</view>
					<view @click="cancelOrder(item)" v-if="currentIndex == 0" class="btn">
						{{ $t('page.order.cancelOrder') }}
					</view>
					<view @click="confirmReceiptGoods(item)" v-if="currentIndex == 2" class="btn golden">
						{{ $t('page.order.confirm-receipt-goods') }}
					</view>
					<!-- <view v-if="currentIndex == 3" class="btn">{{ $t('page.order.repurchase') }}</view> -->
					<!-- <view v-if="currentIndex == 3" class="btn">{{ $t('page.order.deleteOrder') }}</view> -->
					<view @click="toOrderDetail(item.id)" class="btn">{{ $t('page.order.viewNow') }}</view>
				</view>
			</view>
		</view>

		<view v-else class="no-order">
			<view class="box">
				<view class="no-product-title">{{ $t('page.order.no-Order') }}</view>
				<view @click="toHome()" class="to-home">{{ $t('page.order.take-stroll')}}</view>
			</view>
		</view>

		<orderPanel :open.sync="orderPanenOpen" @definiteExecution="definiteExecution" @closePanel="closePanel"
			:title="panelTitle" :desc="panelDesc" :num="panelNum" :url="imageUrl"></orderPanel>
	</view>
</template>

<script>
	import orderProductListVue from '../../components/order-product/orderProductList.vue'
	import orderPanel from '../../components/order-panel/orderPanel.vue';
	import UniDateformat from '@/uni_modules/uni-dateformat/components/uni-dateformat/date-format.js'
	export default {
		components: {
			orderProductListVue,
			orderPanel,
			UniDateformat
		},
		data() {
			return {
				classifyList: [{
						name: this.$t('page.order.pendingPayment')
					},
					{
						name: this.$t('page.order.pendingShipment')
					},
					{
						name: this.$t('page.order.pendingReceipt')
					},
					{
						name: this.$t('page.order.completed')
					},
				],

				productList: [],
				currentIndex: 0, //当前选择的标签index
				orderPanenOpen: false,
				panelTitle: '',
				panelDesc: '',
				panelNum: '',
				queryParams: {},
				typeGoods: '',
				noOrder: false,
				imageUrl : '',
			}
		},
		onShow() {
			this.getOrderList();
			this.currentIndex = localStorage.getItem('orderIndex') ?
				parseInt(localStorage.getItem('orderIndex')) : 0
			localStorage.removeItem('orderIndex')
		},
		methods: {
			getOrderList() { //获取订单列表
				this.request('getOrderPage', {}, this.queryParams).then(res => {
					this.productList = parseList(res.result.records);
					this.tabChange();
				})
			},
			tabChange(item) {
				if (item) {
					this.currentIndex = item.index
				}

				for (let i = 0; i < this.productList.length; i++) {
					if (parseInt(this.productList[i].state) === this.currentIndex) {
						return this.noOrder = false;
					}
					this.noOrder = true;
				}
			},
			toOrderDetail(id) {
				uni.navigateTo({
					url: '/pages/orderDetail/orderDetail?id=' + id
				})
			},
			toPayOrder(item) {
				uni.navigateTo({
					url: '/pages/payOrder/payOrder?id=' + item.id + '&quantity=' + item.num
				})
			},
			cancelOrder(item) { //取消订单
				this.panelTitle = this.$t('page.order.cancel-order-title')
				this.panelDesc = this.$t('page.order.cancel-order-desc')
				this.panelNum = this.$t('page.order.cancel-product-num')
				this.typeGoods = 'del'
				this.orderId = item.id
				this.imageUrl = item.image
				this.orderPanenOpen = true;
			},
			delOrder() {

			},
			confirmReceiptGoods(id) { //确认收货
				this.panelTitle = this.$t('page.order.confirm-receipt-goods-title')
				this.panelDesc = this.$t('page.order.confirm-receipt-goods-desc')
				this.panelNum = this.$t('page.order.confirm-product-num')
				this.typeGoods = 'confirm'
				this.orderId = item.id
				this.imageUrl = item.image
				this.orderPanenOpen = true;
			},
			leftClick() {
				uni.switchTab({
					url: '/pages/home/home'
				})
			},
			closePanel() {
				this.orderPanenOpen = false;
			},
			definiteExecution() {
				if (this.typeGoods == 'confirm') {
					this.request('confirm', {
						id: this.orderId
					}).then(res => {
						if (res.code == 200) {
							this.getOrderList();
							this.$MyToast(this.$t('page.order.success-operation'), {
								title: this.$t('myToactTitle'),
								icon: true //是否开启icon
							})
							this.orderPanenOpen = false;
						}
					})
				} else if (this.typeGoods == 'del') {
					this.request('delOrder', {
						id: this.orderId
					}).then(res => {
						if (res.code == 200) {
							this.getOrderList();
							this.$MyToast(this.$t('page.order.success-operation'), {
								title: this.$t('myToactTitle'),
								icon: true //是否开启icon
							})
							this.orderPanenOpen = false;
						}
					})
				}
			},
			toHome(){		//去首页
				uni.switchTab({
					url: '/pages/home/home'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.order {
		padding-bottom: 10px;

		&::v-deep .order-tabs {
			background: white;

			.u-tabs__wrapper__nav__item {
				flex: 1;
			}
		}

		.order-list {
			box-sizing: border-box;
			margin-top: 50px;

			.order-item {
				margin-top: 10px;
				background: white;
				padding: 10px;
				border-radius: 5px;

				.order-item-top {
					height: 70rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					font-size: 26rpx;

					.order-time {
						color: #333333;
					}

					.order-status {
						color: #ED762F;
					}
				}

				.order-bottom {
					font-size: 26rpx;
					text-align: right;
					padding: 15rpx;
				}

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

					.btn {
						display: flex;
						justify-content: center;
						align-items: center;
						box-sizing: border-box;
						padding: 10rpx 13rpx;
						border: 1px solid #ccc;
						border-radius: 100rpx;
						margin: 0px 5px;
						color: #333333;
						font-size: 22rpx;
					}

					.golden {
						color: #ED762F;
						border: 1px solid #ED762F;
					}
				}
			}
		}

		.no-order {
			height: calc(100vh - 138px);
			display: flex;
			align-items: center;
			justify-content: center;

			.box {
				font-size: 26rpx;
				text-align: center;

				.to-home {
					padding: 20rpx 140rpx;
					border: 1px solid #ccc;
					border-radius: 5px;
					text-align: center;
					margin: 20rpx 0px;
				}
			}
		}
	}
</style>