充值

mallApp/src/pages/recharge/detail.vue

@@ -1,82 +1,58 @@
 <template>
-  <div class="app-content">
-    <div class="page-top">
-      <div class="page-top-img">
-        <image mode="widthFix" :src="`${constant.imgUrl}/retail/order/bg.png`" alt />
-      </div>
-      <div class="page-top-det">
-        <div>
-          <div class="page-status">{{ getStatusName }}</div>
-        </div>
-        <div class="page-status-img">
-          <img :src="statusImg" alt />
-        </div>
-      </div>
-    </div>
-    
-    <div class="page-det">
-      <div class="module-com">
-        <div class="module-tit">充值信息</div>
-        <div class="module-det">
-          <div class="recharge-info">
-            <div class="amount-display">
-              <span class="currency">¥</span>
-              <span class="amount">{{ data.amount ? parseFloat(data.amount).toFixed(2) : '0.00' }}</span>
-            </div>
-            <div class="recharge-status">
-              <span class="status-tag" :class="getStatusClass">{{ getStatusName }}</span>
-            </div>
-          </div>
-        </div>
-      </div>
+  <view class="app-content">
+   
+    <view class="page-det">
       
-      <div class="module-com order-msg">
-        <div class="module-tit">充值详情</div>
-        <div class="module-det">
-          <div class="order-msg-blo">
-            <div class="msg-list">
-              <div class="label">订单号</div>
-              <div class="value">{{ data.orderSn }}</div>
-            </div>
-            <div class="msg-list">
-              <div class="label">充值时间</div>
-              <div class="value">{{ data.createTime ? data.createTime.substring(5, 16) : '' }}</div>
-            </div>
-            <div class="msg-list" v-if="data.payTime && data.payTime != '0000-00-00 00:00:00'">
-              <div class="label">支付时间</div>
-              <div class="value">{{ data.payTime ? data.payTime.substring(5, 16) : '' }}</div>
-            </div>
-            <div class="msg-list">
-              <div class="label">支付方式</div>
-              <div class="value">{{ getPayMethodName }}</div>
-            </div>
-            <div class="msg-list" v-if="data.remark">
-              <div class="label">备注</div>
-              <div class="value">{{ data.remark }}</div>
-            </div>
-          </div>
-          
-          <div class="order-msg-blo" v-if="data.status == '3'">
-            <div class="msg-list">
-              <div class="label">失败原因</div>
-              <div class="value error-text">{{ data.failReason || '未知原因' }}</div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
+      <view class="module-com order-msg">
+        <view class="module-tit">充值详情</view>
+        <view class="module-det">
+          <view class="order-msg-blo">
+            <view class="msg-list">
+              <view class="label">订单号</view>
+              <view class="value">{{ data.orderSn }}</view>
+            </view>
+            <view class="msg-list">
+              <view class="label">创建时间</view>
+              <view class="value">{{ data.addTime ? data.addTime.substring(5, 16) : '' }}</view>
+            </view>
+            <view class="msg-list" v-if="data.payTime && data.payTime != '0000-00-00 00:00:00'">
+              <view class="label">支付时间</view>
+              <view class="value">{{ data.payTime ? data.payTime.substring(5, 16) : '' }}</view>
+            </view>
+            <view class="msg-list">
+              <view class="label">充值状态</view>
+              <view class="value">{{ data.status==0?'待付款':data.status == 1?'已充值':'已取消' }}</view>
+            </view>
+            <view class="msg-list">
+              <view class="label">支付渠道</view>
+              <view class="value">{{ data.onlinePay==1?'线下':'线上' }}</view>
+            </view>
+            <view class="msg-list">
+              <view class="label">支付方式</view>
+              <view class="value">{{ data.payWay==0?'微信支付':data.status == 1?'支付宝':data.status==4?'现金':'银行卡' }}</view>
+            </view>
+            <view class="msg-list" v-if="data.remark">
+              <view class="label">备注</view>
+              <view class="value">{{ data.remark }}</view>
+            </view>
+          </view>
+
+        </view>
+      </view>
+    </view>
     
-    <div class="page-btn app-footer" v-if="data.status == '1'">
-      <div class="flex-center">
+    <view class="page-btn app-footer" v-if="1==2">
+      <view class="flex-center">
         <span>充值金额</span>
         <span class="app-price">
           <span>￥</span>
           <span class="app-size-40">{{ data.amount ? parseFloat(data.amount).toFixed(2) : '0.00' }}</span>
         </span>
-      </div>
+      </view>
       <button class="button-com red" @click="retryRecharge">重新充值</button>
-    </div>
-  </div>
+    </view>
+
+  </view>
 </template>
 
 <script>
@@ -91,24 +67,6 @@ export default {
     };
   },
   computed: {
-    getStatusName() {
-      let statusName = "";
-      switch (this.data.status) {
-        case '1':
-          statusName = "充值中";
-          break;
-        case '2':
-          statusName = "充值成功";
-          break;
-        case '3':
-          statusName = "充值失败";
-          break;
-        default:
-          statusName = "未知状态";
-          break;
-      }
-      return statusName;
-    },
     getStatusClass() {
       let statusClass = "";
       switch (this.data.status) {
@@ -127,24 +85,6 @@ export default {
       }
       return statusClass;
     },
-    getPayMethodName() {
-      let methodName = "";
-      switch (this.data.payMethod) {
-        case '1':
-          methodName = "微信支付";
-          break;
-        case '2':
-          methodName = "支付宝";
-          break;
-        case '3':
-          methodName = "余额支付";
-          break;
-        default:
-          methodName = "未知方式";
-          break;
-      }
-      return methodName;
-    },
     statusImg() {
       let img = "";
       if (this.data.status == '1') {
@@ -158,7 +98,6 @@ export default {
     }
   },
   onLoad() {
-    this.init();
   },
   methods: {
     init() {

mallApp/src/pages/recharge/rechargeItem.vue

@@ -39,6 +39,11 @@
         <text class="iconfont iconxiangyou"></text>
       </view>
     </view>
+    
+    <!-- 操作按钮区域 -->
+    <view class="item-actions" @click.stop>
+      <button class="action-btn" v-if="info.status == 0" @click="handlePay" > 取消 </button>
+    </view>
   </view>
 </template>
 <script>
@@ -75,6 +80,10 @@ export default {
   methods: {
     clickItemEvent () {
       this.$emit("click", this.info);
+    },
+    // 支付操作
+    handlePay () {
+      this.$emit("pay", this.info);
     }
   }
 };
@@ -85,56 +94,66 @@ export default {
   margin-bottom: 20upx;
   width: 100%;
   background-color: #fff;
+  
   .item-header {
     display: flex;
     justify-content: space-between;
     align-items: center;
     margin-bottom: 20upx;
+    
     .title {
       display: flex;
       align-items: center;
       flex: 1;
+      
       .icon {
         margin: 0 20upx;
         width: 50upx;
         height: 50upx;
-        border-radius: 25upx;
         border-radius: 50%;
       }
+      
       .name {
         font-size: 32upx;
         font-weight: 600;
         color: #333333;
       }
     }
+    
     .status {
       flex-shrink: 0;
       margin-right: 20upx;
       color: $mainColor;
     }
   }
+  
   .item-main {
     display: flex;
     padding: 0 20upx;
     box-sizing: border-box;
     align-items: flex-end;
+    
     .item-info {
       flex: 1;
       font-size: 26upx;
+      
       .info-row {
         margin-top: 12upx;
         display: flex;
         align-items: center;
       }
+      
       .info-label {
         font-weight: 400;
         color: #999999;
       }
+      
       .info-value {
         font-weight: 400;
         color: #333333;
       }
     }
+    
     .item-price {
       display: flex;
       align-items: center;
@@ -142,6 +161,7 @@ export default {
       font-size: 30upx;
       font-weight: 600;
       color: #333333;
+      
       .iconfont {
         font-size: 28upx;
         color: #999999;
@@ -149,5 +169,31 @@ export default {
       }
     }
   }
+  
+  .item-actions {
+    position: relative;
+    padding: 12upx 20upx;
+    margin-top: 35upx;
+    border-top: 1upx solid #f5f5f5;
+    width: 100%;
+    box-sizing: border-box;
+    height: 80upx;
+    
+    .action-btn {
+      position: absolute;
+      right: 35upx;
+      top: 68%;
+      transform: translateY(-50%);
+      padding: 0upx 50upx;
+      border-radius: 10upx;
+      font-size: 26upx;
+      border: none;
+      outline: none;
+      min-width: 140upx;
+      text-align: center;
+      background-color: #FF2842;
+      color: #fff;
+    }
+  }
 }
 </style>