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 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.createTime }}
						</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>
					<view class="con"
					style="border-bottom: 1px solid #333;
					padding: 20rpx 0;">
						<view class="img-box" style="width: 150rpx;height: 150rpx;
						overflow: hidden;border-radius: 10rpx;display: flex;
						align-items: center;">
							<image :src="item.image" mode="widthFix" style="width: 150rpx;"></image>
						</view>
						<view style="font-weight: 900;margin-left: 20rpx;font-size: 28rpx;color: #333;">
							{{ item.subTitle }}
						</view>
					</view>
					<view class="con"
					style="margin-top: 20rpx;font-size: 28rpx;font-weight: 500;">
						<view style="flex: 1;">
							{{ $t('page.order.Total_Amount') }}
						</view>
						<view style="flex: 1;">
							{{ $t('page.order.Profit') }}
						</view>
					</view>
					<view class="con"
					style="margin-top: 10rpx;
					color: #333;font-weight: 900;font-size: 28rpx;">
						<view style="flex: 1;">
							USDT {{ item.price }}
						</view>
						<view style="flex: 1;">
							USDT {{ item.giveMoney }}
						</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 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;
		
		.act{
			background-color: #000;
			border-radius: 10rpx;
			color: #fff;
		}

		.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 #00000023;
				margin: 0rpx 20rpx 20rpx 20rpx;
				.top{
					display: flex;
					justify-content: space-between;
				}
				.con{
					display: flex;
					align-items: center;
				}
			}
		}

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