9.18

gasStation-uni/pages.json

@@ -185,8 +185,8 @@
 				{
 					"path": "orderSuccess/index",
 					"style": {
-						"navigationBarTitleText": "支付完成页",
+						"navigationBarTitleText": "支付结果"
-						"navigationStyle": "custom"
+
 					}
 				}
 			]
@@ -355,4 +355,4 @@
 		"backgroundColor": "#F8F8F8"
 	},
 	"uniIdRouter": {}
-}
+}

gasStation-uni/pagesHome/cardDetails/detailed.vue

@@ -1,12 +1,176 @@
 <template>
 	<view class="centenr">
-
+		<view class="Candywrapper">
+			<view class="card_box">
+				<view class="r-size">储值卡</view>
+				<view style="margin-bottom: 10px;">当前余额（元）</view>
+				<view class="r-num">123456.98</view>
+			</view>
+			<view class="tab-bs">
+				<view class="w_box" @click="show1 = true">类型筛选 <u-icon name="arrow-down-fill"></u-icon> </view>
+				<view class="w_box" @click="show = true">全部时间 <u-icon name="arrow-down-fill"></u-icon> </view>
+			</view>
+			<view class="bai_box">
+				<view class="left-img">
+					<image src="../../static/icon/hyxf.png" mode=""></image>
+				</view>
+				<view style="width: 85%;">
+					<view class="right-box">
+						<view class="l-text">会员消费</view>
+						<view class="r-text">-199.00</view>
+					</view>
+					<view class="right-box">
+						<view class="">储值卡</view>
+						<view class="">余额123456.98</view>
+					</view>
+					<view class="right-box">
+						<view class="">中建锦绣二期站</view>
+						<view class="">2024-09-09 16:45:09</view>
+					</view>
+				</view>
+			</view>
+			<view class="bai_box">
+				<view class="left-img">
+					<image src="../../static/icon/hycz.png" mode=""></image>
+				</view>
+				<view style="width: 85%;">
+					<view class="right-box">
+						<view class="l-text">会员消费</view>
+						<view class="r-text">-199.00</view>
+					</view>
+					<view class="right-box">
+						<view class="">储值卡</view>
+						<view class="">余额123456.98</view>
+					</view>
+					<view class="right-box">
+						<view class="">中建锦绣二期站</view>
+						<view class="">2024-09-09 16:45:09</view>
+					</view>
+				</view>
+			</view>
+			<u-datetime-picker :show="show" v-model="value1" mode="datetime" @cancel="cancel1"></u-datetime-picker>
+			<u-picker :show="show1" :columns="columns" @cancel="cancel"></u-picker>
+		</view>
 	</view>
 </template>
 
 <script>
+	export default {
+		data() {
+			return {
+				show: false,
+				show1: false,
+				value1: Number(new Date()),
+				columns: [
+					['中国', '美国', '日本']
+				],
+			}
+		},
+		methods: {
+			cancel() {
+				this.show1 = false
+			},
+			cancel1() {
+				this.show = false
+			}
+		}
+	}
 </script>
 
 <style scoped lang="scss">
-	.centenr {}
+	.centenr {
+		width: 100%;
+		height: 100vh;
+		background: #F9F9F9;
+	}
+
+	.Candywrapper {
+		background: #F9F9F9;
+		box-sizing: border-box;
+		padding: 10px;
+	}
+
+	.card_box {
+		width: 100%;
+		height: 90px;
+		background: url('../../static/imgs/topback.png') no-repeat;
+		background-size: 100% 100%;
+		box-sizing: border-box;
+		padding: 10px;
+		color: #fff;
+		font-size: 14px;
+	}
+
+	.r-size {
+		width: 100%;
+		display: flex;
+		align-items: center;
+		justify-content: flex-end;
+	}
+
+	.r-num {
+		font-weight: 600;
+		font-size: 20px;
+		color: #FFFFFF;
+	}
+
+	.tab-bs {
+		width: 100%;
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		background: #fff;
+		margin: 15px auto;
+	}
+
+	.w_box {
+		width: 50%;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		box-sizing: border-box;
+		padding: 15px;
+	}
+
+	.bai_box {
+		width: 100%;
+		box-sizing: border-box;
+		padding: 15px 10px;
+		background: #fff;
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+	}
+
+	.left-img {
+		margin-right: 10px;
+
+		image {
+			width: 40px;
+			height: 40px;
+		}
+	}
+
+	.right-box {
+		width: 100%;
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		font-size: 12px;
+		color: #666666;
+	}
+
+	.l-text {
+		font-size: 16px;
+		color: #333333;
+		margin-bottom: 5px;
+		font-weight: bold;
+	}
+
+	.r-text {
+		font-size: 16px;
+		color: #333333;
+		margin-bottom: 5px;
+		font-weight: bold;
+	}
 </style>

gasStation-uni/pagesHome/cardDetails/index.vue

@@ -25,7 +25,7 @@
 			<view class="or-aniu">立即充值</view>
 		</view>
 		<view class="b_box">
-			<view class="g-box">
+			<view class="g-box" @click="godetail()">
 				<view class="d-s">
 					<image src="../../static/new/k1.png" style="width: 20px; height: 20px;margin-right: 5px; "></image>
 					<view class="">余额明细</view>
@@ -131,6 +131,11 @@
 			},
 			setIndex(index) {
 				this.windex = index
+			},
+			godetail() {
+				uni.navigateTo({
+					url: '/pagesHome/cardDetails/detailed'
+				})
 			}
 		}
 	}

gasStation-uni/pagesRefuel/orderSuccess/index.vue

@@ -1,25 +1,40 @@
 <template>
 	<view class="content">
 		<view class="container">
-			<view class="my-header">
+			<!-- <view class="my-header">
 				<view class="my-icons" @click="goBack"> <uni-icons type="left" size="16"></uni-icons> </view>
 				<view class="my-text">支付完成</view>
 				<view class="my-icons"></view>
-			</view>
+			</view> -->
-			
+
 			<view style="text-align: center;margin-top: 20px;">
 				<view style="margin: 0 auto;">
-					<image style="width: 60%;" src="@/static/imgs/paymentSuccess.png"></image>
+					<image src="../../static/icon/zfcg.png" style="width: 80px; height: 80px; "></image>
 				</view>
-				<view style="margin: 20px auto;font-size: 20px;color: #30a1ff;">支付成功</view>
+				<view style="margin: 20px auto;font-size: 16px;color: #22AF5B;">支付成功</view>
-				<view style="color: gray">
+				<view class="m_num">￥190.00</view>
-					您已完成支付<br/>
+				<view class="m_bs">
-					谢谢您对来个油惠的支持！
+					<view class="">门店名称</view>
+					<view class="">中建锦绣二期站</view>
 				</view>
-				<view v-if="orderNo" @click="goOrderInfo" style="border: solid 1px #30a1ff;border-radius: 50px;margin: 20px auto;width: 150px;
+				<view class="x_"></view>
-				height: 40px;line-height: 40px;color: #30a1ff;">{{timestamp}}s后去评价</view>
+				<view class="m_bs">
-				<view v-else @click="goBack" style="border: solid 1px #30a1ff;border-radius: 50px;margin: 20px auto;width: 150px;
+					<view class="">交易类型</view>
-				height: 40px;line-height: 40px;color: #30a1ff;">{{timestamp}}s后返回首页</view>
+					<view class="">油品</view>
+				</view>
+				<view class="m_bs">
+					<view class="">支付方式</view>
+					<view class="">会员储值卡</view>
+				</view>
+				<view class="m_bs">
+					<view class="">流水编号</view>
+					<view class="">xxxxxxxxxxxxxxxx</view>
+				</view>
+
+				<view v-if="orderNo" @click="goOrderInfo" style="border: solid 1px #FA6400;margin: 20px auto;width: 70%;
+				height: 40px;line-height: 40px;color: #FA6400;">{{timestamp}}s后去评价</view>
+				<view v-else @click="goBack" style="border: solid 1px #FA6400;margin: 20px auto;width: 70%;
+				height: 40px;line-height: 40px;color: #FA6400;">{{timestamp}}s后返回首页</view>
 			</view>
 		</view>
 	</view>
@@ -29,41 +44,41 @@
 	export default {
 		data() {
 			return {
-				timestamp:3,
+				timestamp: 3,
-				timer:{},
+				timer: {},
-				orderNo:"",
+				orderNo: "",
 			}
 		},
 		onLoad(e) {
-			if (e.orderNo){
+			if (e.orderNo) {
 				this.orderNo = e.orderNo
 			}
-			this.countdown()
+			// this.countdown()
 		},
 		methods: {
-			goOrderInfo(){
+			goOrderInfo() {
 				clearInterval(this.timer)
 				uni.navigateTo({
 					url: '/pagesMy/details/details?orderNo=' + this.orderNo,
 				})
 			},
 			// 倒计时刷新
-			countdown(){
+			countdown() {
 				let _this = this
 				this.timer = setInterval(() => {
-				    // countdown减1
+					// countdown减1
-				    _this.timestamp--;
+					_this.timestamp--;
-				    // 如果倒计时为0，清除定时器
+					// 如果倒计时为0，清除定时器
-				    if(_this.timestamp === 0) {
+					if (_this.timestamp === 0) {
-						if (_this.orderNo){
+						if (_this.orderNo) {
 							_this.goOrderInfo()
-						}else{
+						} else {
 							_this.goBack()
 						}
-						
+
 						clearInterval(this.timer)
 						_this.timestamp = 3
-				    }
+					}
 				}, 1000);
 			},
 			goBack() {
@@ -81,14 +96,14 @@
 	.content {
 		background: white;
 	}
-	
+
 	.container {
 		width: 100%;
 		height: 100vh;
 		box-sizing: border-box;
-		padding-top: 88px;
+
 	}
-	
+
 	.my-header {
 		width: 100%;
 		height: 88px;
@@ -100,13 +115,33 @@
 		box-sizing: border-box;
 		padding: 0px 15px;
 		padding-top: 40px;
-	
+
 		.my-icons {
 			width: 20px;
-	
+
 		}
-	
+
 		position: fixed;
 		top: 0px;
 	}
+
+	.m_num {
+		font-size: 30px;
+		color: #333333;
+	}
+
+	.m_bs {
+		width: 100%;
+		box-sizing: border-box;
+		padding: 5px 15px;
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+	}
+
+	.x_ {
+		width: 95%;
+		border-bottom: 1px solid #EEEEEE;
+		margin: 5px auto;
+	}
 </style>