uav-uniapp-demo-24-8-18/pages/order/order.vue

<template>
	<view class="order  bx">
		<!-- <u-sticky> -->
		<!-- <view style="width: 100%;display: flex;padding: 20rpx 0rpx;
			font-size: 28rpx;">
				<view style="flex: 1;
				text-align: center;padding: 10rpx 0;
				margin: 20rpx;"
				:class="{act : currentIndex == index}"
				@click="tabChange(index)"
				v-for="(item, index) in classifyList">
					{{ item.name }}
				</view>
			</view> -->
		<!-- </u-sticky> -->

		<view class="type">
			<view :class="{select : index == currentIndex}" :key="index" @click="tabChange(index)"
				v-for="(item, index) in classifyList">
				<text>{{ item.name }}</text>
			</view>
		</view>


		<!-- <view style="color: #333;border: 1px solid #333;
		padding: 7rpx 15rpx;font-size: 24rpx;" 
		v-if="item.state != 0">
			{{ $t('page.order.Submit_New') }}
		</view>
		<view style="color: #f90;border: 1px solid #f90;
		padding: 7rpx 15rpx;font-size: 24rpx;"
		v-else @click="order = item;show = true;$play()">
			{{ $t('page.order.pay') }}
		</view> -->


		<view v-if="!noOrder" class="order-list">
			<u-list @scrolltolower="scrolltolower" height="calc(100vh - 90rpx)">
				<view v-for="(item,index) in productList" :key="index" class="order-item">
					<view class="top">
						<view style="font-size: 28rpx;" class="time">
							{{ item.subTitle }}
						</view>
						<view style="font-size: 28rpx;" class="time">
							{{ item.createTime }}
						</view>
					</view>
					<view class="center-box">
						<view class="img-box">
							<image :src="item.image" mode="widthFix" style=""></image>
						</view>
						<view class="content">
							<view class="title">
								{{ item.subTitle }}
							</view>
							<view class="con">
								<view>
									{{ $t('page.order.Total_Amount') }}
								</view>
								<view>
									{{ item.price }} USD
								</view>
							</view>
							<view class="con" style="color: #b00;font-size: 26rpx;">
								<view>
									{{ $t('page.order.Profit') }}
								</view>
								<view>
									{{ item.giveMoney }} USD
								</view>
							</view>
						</view>
					</view>

					<view class="buttom">
						<!-- <view class="btn">
							{{ $t('page.order.Submit_New') }}
						</view> -->
						<view class="btn" v-if="item.state == 0" @click="order = item;show = true">
							{{ $t('page.order.payment') }}
						</view>
					</view>
					<view class="buttom">
						<!-- <view class="btn">
							{{ $t('page.order.Submit_New') }}
						</view> -->
						<view class="btn" v-if="item.state == 2">
							{{ $t('page.order.complete') }}
						</view>
					</view>
				</view>

				<view style="justify-content: center;display: flex;
				margin-top: 150rpx;" v-if="loading">
					<u-loading-icon mode="semicircle" size="30"></u-loading-icon>
				</view>
			</u-list>
		</view>

		<!-- <view class="list"
		v-if="!noOrder">
			
			<view class="item">
				
			</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>



		<u-modal :show="show" :title="$t('page.order.confirm_pay')" :confirmText="$t('page.order.ok')"
			:cancelText="$t('page.order.no')" @cancel="show = false;$play()" @confirm="payOrder"
			:showCancelButton="true"></u-modal>

		<sTabbar select="1" />
	</view>
</template>

<script>
	import navbar from '@/components/base/m-navbar.vue'
	import sTabbar from '@/components/base/tabBar.vue'
	export default {
		components: {
			navbar,
			sTabbar
		},
		data() {
			return {
				classifyList: [{
						name: this.$t('page.order.class_1')
					},
					{
						name: this.$t('page.order.class_2')
					},
					{
						name: this.$t('page.order.class_3')
					},
					{
						name: this.$t('page.order.class_4')
					},
				],

				productList: [],
				currentIndex: 0, //当前选择的标签index
				queryParams: {
					pageNo: 1,
					pageSize: 10
				},
				noOrder: false,
				loading: false,
				show: false,
				order: {}
			}
		},
		onShow() {
			this.getOrderList();
			this.currentIndex = localStorage.getItem('orderIndex') ?
				parseInt(localStorage.getItem('orderIndex')) : 0
			localStorage.removeItem('orderIndex')
		},
		methods: {
			getOrderList() { //获取订单列表
				this.loading = true
				let data = {
					...this.queryParams,
				}

				if (this.currentIndex) data.state = this.currentIndex - 1

				this.request('orderPage', {}, data).then(res => {
					if (res.code == 200) {
						this.loading = false
						this.productList = res.result.records
					}
				})
			},
			tabChange(index) {
				if (index != this.currentIndex) {
					this.currentIndex = index
					this.$play()
					this.getOrderList();
				}
			},
			payOrder() {
				this.$play()
				uni.showLoading()
				this.request('pay', {}, {
					id: this.order.id
				}).then(res => {
					uni.hideLoading()
					this.show = false
					if (res.code == 200) {
						this.getOrderList();
					}
				})
			},
			toHome() { //去首页
				this.$play()
				uni.switchTab({
					url: '/pages/home/home'
				})
			},
			scrolltolower() {
				this.queryParams.pageSize += 10
				this.getOrderList()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.order {
		padding-bottom: 200rpx;
		background-color: #f7f7f7;
		// background-image: url('@/static/home/bg.png');
		background-size: 100%;
		color: #000;
		font-weight: bold;
		min-height: 100vh;
		padding-bottom: 200rpx;

		.type {
			display: flex;
			background-color: #fff;
			// position: fixed;
			width: 100%;
			top: 0;
			left: 0;
			height: 90rpx;
			justify-content: center;
			align-items: center;
			color: #989898;
			font-size: 28rpx;

			&>view {
				flex: 1;
				display: flex;
				justify-content: center;
				align-items: center;
			}

			.select {
				color: #000;

				text {
					padding-bottom: 10rpx;
					border-bottom: 3px solid #000;
				}
			}
		}

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

			.order-item {
				position: relative;
				padding: 20rpx;
				border-radius: 5px;
				background-color: $uni-bg-color;
				box-shadow: 0px 0px 5rpx 5rpx #00000010;
				margin: 0rpx 20rpx 20rpx 20rpx;

				.top {
					display: flex;
					justify-content: space-between;
				}

				.center-box {
					display: flex;
					padding: 20rpx 0;

					.img-box {
						width: 200rpx;
						height: 200rpx;
						overflow: hidden;
						border-radius: 10rpx;
						display: flex;
						align-items: center;

						image {
							width: 100%;
							height: 100%;
						}
					}

					.content {
						font-weight: 500;
						width: 430rpx;
						font-size: 28rpx;
						padding-left: 10rpx;
						padding-top: 10rpx;

						.title {
							overflow: hidden;
							text-overflow: ellipsis;
							display: -webkit-box;
							-webkit-line-clamp: 2;
							-webkit-box-orient: vertical;
							width: 100%;
						}

						.con {
							display: flex;
							align-items: center;
							justify-content: space-between;
							margin-top: 15rpx;
						}
					}
				}

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

					.btn {
						padding: 10rpx 20rpx;
						margin: 0 20rpx;
						font-size: 26rpx;
						font-weight: 500;
						background-color: #f33;
						color: #fff;
						border-radius: 10rpx;
					}
				}
			}
		}

		.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>