feat:增加支付的五个状态页

app.json

@@ -1,5 +1,6 @@
 {
   "pages": [
+    "pages/payStatus/payStatus",
     "pages/quantify/quantify",
     "pages/scan/scan",
     "pages/moreOrder/moreOrder",

pages/payStatus/payStatus.js

@@ -0,0 +1,45 @@
+Page({
+  data: {
+    id: 1 , // 初始ID值
+    // isLoading: true,//授权加载
+    countdown: 120,
+    progressWidth: 100, // 初始进度条宽度为100%
+    totalSeconds: 120, // 总秒数
+    currentSeconds: 120 // 当前剩余秒数
+  },
+  onLoad() {
+    //id=1计时器
+    // this.setData({
+    //   isLoading: false
+    // });
+    // setTimeout(() => {
+    //   this.setData({
+    //     isLoading: false
+    //   });
+    // }, );
+
+    //id=2计算器
+    this.countDown();
+  },
+  countDown() {
+    let timer = setInterval(() => {
+      let { currentSeconds, totalSeconds } = this.data;
+      currentSeconds--;
+      if (currentSeconds < 0) {
+        currentSeconds = totalSeconds;
+      }
+      let aprogressWidth = (currentSeconds / totalSeconds) * 100;
+      this.setData({
+        currentSeconds: currentSeconds,
+        progressWidth: aprogressWidth
+      });
+    }, 1000);
+    this.data.timer = timer; // 保存定时器，以便在onUnload中清除
+  },
+  onUnload() {
+    if (this.data.timer) {
+      clearInterval(this.data.timer);
+    }
+  }
+
+});

pages/payStatus/payStatus.json

@@ -0,0 +1,3 @@
+{
+  "usingComponents": {}
+}

pages/payStatus/payStatus.wxml

@@ -0,0 +1,119 @@
+<view class="container" wx:if="{{id === 1}}" style="position: relative; left: 0rpx; top: 0rpx">
+  <!-- 动画区域 -->
+  <view style="position: relative; left: 0rpx; top: 204rpx">
+    <view class="loading-circle" style="position: relative; left: 0rpx; top: 18rpx"></view>
+  </view>
+  <!-- 文本区域 -->
+  <view>
+    <view class="title" style="width: 122rpx; display: block; box-sizing: border-box; position: relative; left: 25rpx; top: -220rpx">授权中</view>
+    <view class="sub-title" style="position: relative; left: 0rpx; top: -195rpx; width: 170rpx; display: block; box-sizing: border-box; height: 50rpx">请勿退出页面</view>
+  </view>
+        <!-- 底部链接区域 -->
+        <view class="bottom-links" style="position: relative; left: 192rpx; top: -12rpx">
+    <text style="height: 56rpx; display: block; box-sizing: border-box; left: 0rpx; top: 0rpx; position: relative; width: 150rpx">客服帮助</text>
+    <text style="width: 72rpx; height: 56rpx; display: block; box-sizing: border-box; position: relative; left: -34rpx; top: 0rpx">|</text>
+    <text style="position: relative; left: -70rpx; top: 0rpx; width: 218rpx; display: block; box-sizing: border-box; height: 56rpx">隐私政策等</text>
+</view>
+</view>
+
+
+  <view class="page-container" wx:if="{{id === 2}}" style="position: relative; left: 0rpx; top: -39rpx">
+  <!-- 图标部分 -->
+  <view class="fail-icon-box">
+    <view class="orange-circle" style="position: relative; left: 0rpx; top: 154rpx">
+      <text class="close-icon" style="position: relative; left: 0rpx; top: 0rpx; height: 225rpx; display: block; box-sizing: border-box">×</text>
+    </view>
+  </view>
+  <!-- 提示文本部分 -->
+  <view class="prompt-text-area">
+    <text class="fail-title" style="position: relative; left: 0rpx; top: 143rpx">支付失败</text>
+  </view>
+  <!-- 操作按钮部分 -->
+  <view class="action-button-section">
+    <button class="retry-pay-btn" style="position: relative; left: 0rpx; top: 241rpx; width: 522rpx; display: block; box-sizing: border-box">重新支付</button>
+  </view>
+        <!-- 底部链接区域 -->
+        <view class="bottom-links" style="position: relative; left: 130rpx; top: -15rpx">
+    <text style="height: 56rpx; display: block; box-sizing: border-box; left: 86rpx; top: -26rpx; position: relative; width: 212rpx">客服帮助</text>
+    <text style="width: 72rpx; height: 56rpx; display: block; box-sizing: border-box; position: relative; left: -20rpx; top: -29rpx">|</text>
+    <text style="position: relative; left: -57rpx; top: -29rpx; width: 212rpx; display: block; box-sizing: border-box; height: 56rpx">隐私政策等</text>
+</view>
+</view>
+
+<view class="a" wx:if="{{id === 3}}" style="position: relative; left: 0rpx; top: 0rpx">
+  <!-- 图标区域 -->
+  <view class="b" style="position: relative; left: 0rpx; top: 95rpx">
+    <view class="c">
+      <text class="d">√</text>
+    </view>
+  </view>
+  <!-- 提示文本区域 -->
+  <view class="e">
+    <text class="f" style="position: relative; left: 0rpx; top: -108rpx">授权成功</text>
+  </view>
+  <view class="g">
+    <text class="h" style="position: relative; left: 0rpx; top: -226rpx">请在两分钟内提枪加油</text>
+  </view>
+  <!-- 倒计时区域 -->
+  <view class="i" style="position: relative; left: 0rpx; top: -388rpx; width: 556rpx; height: 100rpx; display: block; box-sizing: border-box">
+    <view class="k" style="width: {{progressWidth}}%; position: relative; left: -58rpx; top: 0rpx"></view>
+      <text class="countdown-text" style="position: absolute; left: 85rpx; top: -105rpx; width: 368rpx; height: 291rpx; display: flex; box-sizing: border-box">{{currentSeconds}}s</text>
+  </view>
+        <!-- 底部链接区域 -->
+        <view class="bottom-links" style="position: relative; left: 57rpx; top: -15rpx">
+    <text style="height: 56rpx; display: block; box-sizing: border-box; left: 148rpx; top: -57rpx; position: relative; width: 186rpx">客服帮助</text>
+    <text style="width: 72rpx; height: 56rpx; display: block; box-sizing: border-box; position: relative; left: 77rpx; top: -57rpx">|</text>
+    <text style="position: relative; left: 40rpx; top: -57rpx; width: 186rpx; display: block; box-sizing: border-box; height: 56rpx">隐私政策等</text>
+</view>
+</view>
+
+
+<view class="a" wx:if="{{id === 4}}" style="position: relative; left: 0rpx; top: 0rpx">
+  <!-- 图标区域 -->
+  <view class="b" style="position: relative; left: 0rpx; top: 95rpx">
+    <view class="c">
+      <text class="d">√</text>
+    </view>
+  </view>
+  <!-- 提示文本区域 -->
+  <view class="e">
+    <text class="f" style="position: relative; left: 0rpx; top: -160rpx">加油中</text>
+  </view>
+  <view class="button-container">
+  <button class="check-order-btn" style="position: relative; left: 2rpx; top: -266rpx; width: 464rpx; display: block; box-sizing: border-box; height: 83rpx">查看订单</button>
+  <button class="complete-btn" style="position: relative; left: 0rpx; top: -254rpx; width: 468rpx; display: block; box-sizing: border-box; height: 83rpx">完成</button>
+</view>
+      <!-- 底部链接区域 -->
+      <view class="bottom-links" style="position: relative; left: 180rpx; top: -12rpx">
+    <text style="height: 56rpx; display: block; box-sizing: border-box; left: 12rpx; top: -62rpx; position: relative; width: 120rpx">客服帮助</text>
+    <text style="width: 72rpx; height: 56rpx; display: block; box-sizing: border-box; position: relative; left: 12rpx; top: -62rpx">|</text>
+    <text style="position: relative; left: -34rpx; top: -62rpx; width: 174rpx; display: block; box-sizing: border-box; height: 56rpx">隐私政策等</text>
+</view>
+</view>
+
+<view class="page-container" wx:if="{{id === 5}}" style="position: relative; left: 0rpx; top: -37rpx">
+  <!-- 图标部分 -->
+  <view class="fail-icon-box">
+    <view class="orange-circle" style="position: relative; left: 0rpx; top: 154rpx">
+      <text class="close-icon" style="position: relative; left: 0rpx; top: 0rpx; height: 225rpx; display: block; box-sizing: border-box">×</text>
+    </view>
+  </view>
+  <!-- 提示文本部分 -->
+  <view class="prompt-text-area">
+    <text class="fail-title" style="position: relative; left: 0rpx; top: 143rpx">授权失败</text>
+  </view>
+  <view class="g">
+    <text class="h" style="position: relative; left: 0rpx; top: 87rpx">已超时，请重新扫码</text>
+  </view>
+  <!-- 操作按钮部分 -->
+  <view class="action-button-section">
+    <button class="retry-pay-btn" style="position: relative; left: 0rpx; top: 150rpx; width: 522rpx; display: block; box-sizing: border-box">重新扫码</button>
+  </view>
+      <!-- 底部链接区域 -->
+      <view class="bottom-links" style="position: relative; left: 24rpx; top: 0rpx">
+    <text style="height: 56rpx; display: block; box-sizing: border-box; left: 200rpx; top: -55rpx; position: relative; width: 104rpx">客服帮助</text>
+    <text style="width: 72rpx; height: 56rpx; display: block; box-sizing: border-box; position: relative; left: 201rpx; top: -55rpx">|</text>
+    <text style="position: relative; left: 164rpx; top: -55rpx; width: 138rpx; display: block; box-sizing: border-box; height: 55rpx">隐私政策等</text>
+</view>
+</view>
+

pages/payStatus/payStatus.wxss

@@ -0,0 +1,218 @@
+.container {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: center;
+  min-height: 100vh;
+  color: #f2f2f2;
+  padding: 20px;
+}
+
+.title {
+  color: #373737;
+  font-size: 20px;
+  font-weight: bold;
+  margin-bottom: 10px;
+}
+
+.sub-title {
+  font-size: 14px;
+  color: #7e7e7e;
+}
+
+.bottom-links {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  font-size: 12px;
+  color: #808080;
+}
+
+.page-container {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: center;
+  min-height: 100vh;
+  padding: 20px;
+  background-color: #f2f2f2;
+}
+
+.fail-icon-box {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  margin-bottom: 40px;
+}
+
+.orange-circle {
+  width: 80px;
+  height: 80px;
+  border-radius: 50%;
+  background-color: #fe8d1b;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.close-icon {
+  color: #eff3f2;
+  font-size: 80px;
+}
+
+.prompt-text-area {
+  text-align: center;
+  margin-bottom: 50px;
+  color: #353535;
+}
+
+.fail-title {
+  font-size: 20px;
+  font-weight: bold;
+  color: #3a3a3a;
+}
+
+.action-button-section {
+  width: 100%;
+  margin-bottom: auto;
+}
+
+.retry-pay-btn {
+  width: 100%;
+  height: 45px;
+  line-height: 30px;
+  background-color: #d81e07;
+  color: #fff3e9;
+  border: none;
+  border-radius: 12px;
+  font-size: 16px;
+}
+
+.a {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: center;
+  min-height: 100vh;
+  padding: 20px;
+  background-color: #f2f2f2;
+}
+
+.b {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  margin-bottom: 40px;
+}
+
+.c {
+  width: 80px;
+  height: 80px;
+  border-radius: 50%;
+  background-color: #1fb758;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.d {
+  color: #fefaff;
+  font-size: 40px;
+}
+
+.e {
+  text-align: center;
+  margin-bottom: 20px;
+}
+
+.f {
+  font-size: 20px;
+  font-weight: bold;
+  color: #383838;
+}
+
+.g {
+  text-align: center;
+  margin-bottom: 50px;
+}
+
+.h {
+  font-size: 17px;
+  color: #818181;
+}
+
+.i {
+  width: 120%;
+  background-color: #f2f2f2;
+  height: 45px;
+  border: 5px solid #d81e07;
+  border-radius: 20px;
+  overflow: hidden; 
+  box-sizing: border-box;
+  position: relative;
+}
+
+.k{
+  height: 100%;
+  background-color: #d81e07;
+  transition: width 1s ease; /* 添加过渡动画，让进度条变化更平滑 */
+}
+
+.countdown-text {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
+  color: rgb(0, 0, 0);
+  font-size: 24px;
+}
+
+.button-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 15px; /* 设置按钮之间的间距 */
+}
+
+.check-order-btn {
+  width: 200px; /* 按钮宽度 */
+  height: 45px; /* 按钮高度 */
+  background-color: #d81e07; /* 背景颜色 */
+  color: #fffdfe; /* 文字颜色 */
+  border: none; /* 无边框 */
+  border-radius: 10px; /* 圆角 */
+  font-size: 16px; /* 文字大小 */
+}
+
+.complete-btn {
+  width: 200px;
+  height: 45px;
+  background-color: #f2f2f2; /* 背景颜色为白色 */
+  color: #c52818; /* 文字颜色为红色 */
+  border: 3px solid #c83523; /* 红色边框 */
+  border-radius: 10px;
+  font-size: 16px;
+}
+
+.loading-circle {
+  width: 65px;
+  height: 65px;
+  border: 4px solid #e0e0e0; /* 灰色边框 */
+  border-top-color: #ad1919; /* 绿色上边框，可根据喜好修改 */
+  border-radius: 50%; /* 圆形 */
+  animation: spin 1s linear infinite; /* 应用动画，1秒循环一次，线性变化，无限循环 */
+}
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg); /* 初始旋转角度 */
+  }
+  100% {
+    transform: rotate(360deg); /* 结束旋转角度 */
+  }
+}