pika_shangjia/pages/order/order.vue

<template>
	<view>
		<!-- tab -->
		<view class="tab-box ddflex">
			<view class="fflex ddflex">
				<view :class="'tab-item fflex '+(queryType==1?'tab-item-active':'')" @click="queryTypeChange(1)">
					<view>待确认</view>
					<image class="tab-active-icon" src="../../static/images/tab_cur.png"></image>
				</view>
				<view :class="'tab-item fflex '+(queryType==2?'tab-item-active':'')" @click="queryTypeChange(2)">
					<view>已完成</view>
					<image class="tab-active-icon" src="../../static/images/tab_cur.png"></image>
				</view>
				<view :class="'tab-item fflex '+(queryType==3?'tab-item-active':'')" @click="queryTypeChange(3)">
					<view>全部</view>
					<image class="tab-active-icon" src="../../static/images/tab_cur.png"></image>
				</view>
			</view>
			<view class="ddflex">
				<image class="saoma" src="../../static/pages/images/saoma.png"></image>
				<image class="sousuo" src="../../static/pages/images/search.png"></image>
			</view>
		</view>
		<view style="height: 110rpx;"></view>
		
		<!-- 订单 -->
		<view>
			<view class="order-item" v-for="item,index in 10" @click="jumpUrl('/pages/orderDetail/orderDetail?id='+item)">
				<view class="ddflex order-item-header">
					<view class="order-time">2023-03-29 12:05:58</view>
					<block>
						<view v-if="index!=1" class="order-state">线下-待确认</view>
						<view v-else class="order-state" style="color: #0FCB27;">微信-支付成功</view>
					</block>
				</view>
				<view class="order-item-body">
					<view class="order-item-content ddflex">
						<view class="order-item-content-label">订单编号</view>
						<view class="order-item-content-data fflex tover">159582346324325171424</view>
					</view>
					<view class="order-item-content ddflex">
						<view class="order-item-content-label">门店名称</view>
						<view class="order-item-content-data fflex tover">白云科技</view>
					</view>
					<view class="order-item-content ddflex">
						<view class="order-item-content-label">租借机柜</view>
						<view class="order-item-content-data fflex tover">CHZD04TTCC200329109</view>
					</view>
					<view class="order-item-content ddflex">
						<view class="order-item-content-label">电池ID</view>
						<view class="order-item-content-data fflex tover">613880983244</view>
					</view>
					<view class="order-item-content ddflex">
						<view class="order-item-content-label">电池型号</view>
						<view class="order-item-content-data fflex tover">60V 30Ah</view>
					</view>	
					<view class="order-item-content ddflex">
						<view class="order-item-content-label">租赁用户</view>
						<view class="order-item-content-data fflex tover">文涛 15200809658</view>
					</view>
					<view class="order-item-content ddflex">
						<view class="order-item-content-label">租借时长</view>
						<view class="order-item-content-data fflex tover">8小时</view>
					</view>
					<view class="order-item-content ddflex">
						<view class="order-item-content-label">应付金额</view>
						<view class="order-item-content-data fflex tover" style="color: #EB5C20;">3元</view>
					</view>
				</view>
				<view v-if="index!=1" class="order-btns ddflex">
					<view class="order-btn" @click.stop="">确认支付</view>
				</view>
			</view>
		</view>
		
		
		<foot channel="order" :isUpdate="isUpdate"></foot>
	</view>
</template>

<script>
	const app = getApp();
	const req = require("../../utils/request.js");
	import foot from "../../components/nav-bar/index";

	export default {
		components: {
			foot
		},
		props: {},
		data() {
			return {
				systems: {},
				isTop: 0,

				queryType: 1,
			}
		},
		onLoad(options) {

		},
		onShow() {

		},
		methods: {
			jumpUrl(url) {
				if (req.isLogins(true)) {
					uni.navigateTo({
						url: url
					})
				}
			},
			queryTypeChange(val) {
				if (this.queryType == val) return false
				this.queryType = val
			},
		},
		mounted() {
			const systemInfo = uni.getSystemInfoSync();
			// px转换到rpx的比例
			let pxToRpxScale = 750 / systemInfo.windowWidth;
			let systems = {
				ktxStatusHeight: systemInfo.statusBarHeight * pxToRpxScale, // 状态栏的高度
				navigationHeight: 44 * pxToRpxScale // 导航栏的高度
			};
			systems.barHeight = systems.ktxStatusHeight + systems.navigationHeight;
			this.systems = systems;
		},
		onPageScroll: function(e) {
			if (e.scrollTop > this.systems.barHeight) {
				this.isTop = 1;
			} else {
				this.isTop = 0;
			}
		}
	}
</script>

<style>
	@import "./order.css";
</style>