订单页面第一版

common/styles/global/pages.scss

@@ -1033,6 +1033,69 @@
 	}
 }
 
+// 订单
+.ezy-order-page{
+	width: 100%;height: 100vh;background-color: #00c5fe;position: relative;
+	padding-top:var(--status-bar-height);display: flex;flex-direction: column;
+	@include ezy-no-repeat-cover(bottom);background-image: url("@/static/images/common/ezy-page-bj.png");
+	.uni-list{background-color: transparent!important;}
+	.uni-list--border-top,.uni-list--border-bottom{display: none;}
+	.uni-list-item__header{display: none;}
+	.uni-list-item__container{
+		flex-direction: column!important;position: relative;
+		padding:16rpx 20rpx !important;overflow: unset;}
+	
+	.order-scroll-view{margin-top: 10rpx;overflow-y: auto;height: calc(100vh - 380rpx - var(--status-bar-height));}
+	.order-list-item{
+		width: 94%;background-color: rgba(255, 255, 255, 0.6)!important;
+		margin: 0 3% 10rpx;border-radius: 8rpx;
+		.order-item-head{
+			display: flex;justify-content: space-between;align-items: center;font-size: 24rpx;color: #333;
+			.order-name-box{
+				display: flex;align-items: center;
+				icon{
+					width: 58rpx;height: 58rpx;margin-right: 10rpx;
+					@include ezy-no-repeat-cover;background-image: url("@/static/images/pay/order-icon.png");
+				}
+			}
+			.pay-status{color:#fdae36;margin-left: 36rpx;}
+		}
+		
+		.order-content-box{
+			display: flex;margin-top: 10rpx;border-bottom: 1px dashed #fff;
+			box-sizing: border-box;padding-bottom: 32rpx;margin-bottom: 24rpx;
+			icon{width: 212rpx;height: 202rpx;margin-right: 20rpx;@include ezy-no-repeat-cover;}
+			.content-img1{background-image: url("@/static/images/pay/svip1.png");}
+			.content-body-box{display: flex;flex-direction: column;}
+			.content-name{
+				font-size: 40rpx;color: #333;margin-bottom: 12rpx;
+			}
+			.content-tag{
+				width: 160rpx;height: 40rpx;line-height: 40rpx;
+				font-size: 24rpx;color: #01c6fe;background-color: rgba(255, 255, 255, 0.6);
+				border-radius: 4rpx;text-align: center;
+			}
+			.content-yuanjia{font-size: 42rpx;color: #ff0101;margin-top: auto;}
+		}
+		
+		.order-bottom-box{
+			box-sizing: border-box;padding-bottom: 24rpx;
+			.bottom-money-box{
+				 display: flex;justify-content: space-between;align-items: center;
+				.bottom-data{font-size: 24rpx;color: #999;}
+				.bottom-money{color: #333;}
+			}
+			.bottom-btn{
+				width: 167rpx;height: 52rpx;line-height: 52rpx;text-align: center;color: #FFF;font-size: 28rpx;margin-left: auto;
+				@include ezy-no-repeat-cover;background-image: url("@/static/images/pay/order-btn-bj.png");margin-top: 24rpx;
+
+			}
+		}
+	}
+	
+	
+}
+
 // 游戏
 .ezy-game-page{
 	width: 100%;height: 100vh;background-color: #23befb;position: relative;

pages/pay/order.vue

@@ -1,51 +1,47 @@
 <template>
-	<view class="ezy-cuoti-page">
+	<view class="ezy-order-page">
 		<view class="icon-title-navBar-box">
 			<view @click="goBack" class="nav-bar-icon"></view>
 			<text class="nav-bar-title">我的订单</text>
 		</view>
-		<view class="cuoti-border-box">
+		<view class="ezy-tab-border">
 
 			<uni-segmented-control :current="dingdanData.current" :values="dingdanData.items" active-color="#3A7FE9"
-				@clickItem="onChangeTab" class="cuo-tab-box" />
-			<view class="cuoti-content-box">
+				@clickItem="onChangeTab" class="ezy-tab-box" />
+			<view>
 				<view v-if="dingdanData.current === 0">
 					<scroll-view scroll-y="true" refresher-enabled="true"
 						:refresher-triggered="dingdanData.quanbu.loading" :refresher-threshold="50"
-						refresher-background="lightgreen" @refresherrefresh="onRefresh" class="cuoti-scroll-view">
+						refresher-background="transparent" @refresherrefresh="onRefresh" class="order-scroll-view">
 						<!--数学-->
 						<uni-list>
-							<uni-list-item v-for="item in dingdanData.quanbu.list" class="list-item-box">
+							<uni-list-item v-for="item in dingdanData.quanbu.list" class="order-list-item">
 								<template v-slot:body>
-									<view>
-										鹅状元自营 不支持退订
+									<view class="order-item-head">
+										<view class="order-name-box">
+											<icon></icon><text>鹅状元自营</text>
+										</view>
+										<view>
+											<text>不支持退订</text>
+											<text v-if="item.status ==0||item.status ==1" class="pay-status">已付款</text>
+											<text v-if="item.status ==2" class="pay-status">待付款</text>
+										</view>
 									</view>
-									<view v-if="item.status ==0||item.status ==1">
-										已付款
+									<view class="order-content-box">
+										<icon :class="'content-img'+item.cardId"></icon>
+										<view class="content-body-box">
+											<view class="content-name">SVIP终身卡</view>
+											<view class="content-tag">终身有效</view>
+											<view class="content-yuanjia">¥{{item.cardYuanjia}}</view>
+										</view>
 									</view>
-									<view v-if="item.status ==2">
-										未付款
-									</view>
-									<view>
-										图片
-									</view>
-									<view>
-										{{item.cardName}}
-
-									</view>
-									<view>
-
-										{{item.cardYuanjia}}
-									</view>
-									<view>
-										{{item.ctime}}
-
-									</view>
-									<view>
-										实付款：{{item.money}}
-									</view>
-									<view v-if="item.status ==1">
-										立即支付
+									<view class="order-bottom-box">
+										<view class="bottom-money-box">
+											<text class="bottom-data">{{item.ctime}}</text>
+											<text class="bottom-money">实付款：¥{{item.money}}</text>
+										</view>
+										<!--  v-if="item.status ==1" -->
+										<view class="bottom-btn">立即支付</view>
 									</view>
 								</template>
 							</uni-list-item>