update pages/charge/views/PaymentView.vue

WebApp-Lite/pages/charge/views/PaymentView.vue

@@ -4,14 +4,17 @@
       class="payment-icon"
       src="@/static/icons/icon-payment.png"/>
     <view class="payment-info">
-      <text class="payment-name">Pay-Per-Use</text>
-      <view :class="'payment-status ' + status" v-if="status">{{status}}</view>
-      <view class="payment-status" v-else>$50.00 Pre-Authorization</view>
+      <view class="flexc">
+        <text class="payment-name">Pay-Per-Use</text>
+        <view :class="'payment-status ' + info.paymentStatus" v-if="info.paymentStatus">{{info.paymentStatus}}</view>
+      </view>
+      <view class="payment-amount">{{info.preAuthAmount + " Pre-Authorization"}}</view>
     </view>
-    <!-- <i-icon
+    <i-icon
+      v-if="false"
       name="arrow-right-s-line"
       size="48rpx"
-      color="#333"/> -->
+      color="#333"/>
   </view>
 </template>
 
@@ -19,7 +22,10 @@
 export default {
   name: "PaymentView",
   props: {
-    status: String
+    info: {
+      type: Object,
+      default: () => ({})
+    }
   },
   data() {
     return {
@@ -54,17 +60,32 @@ export default {
   padding: 0 32rpx;
 }
 .payment-name {
-  flex: 1;
   color: #222;
   font-size: 32rpx;
   font-weight: bold;
 }
-.payment-status {
+.payment-amount {
   color: #009E81;
   font-size: 28rpx;
   padding-top: 8rpx;
 }
-.payment-status.FAILED {
-  color: #FF2222;
+.payment-status {
+  color: #fff;
+  font-size: 25rpx;
+  border-radius: 12px;
+  padding: 4px 10px;
+  margin-left: 8rpx;
+  transform: scale(0.8);
+  background-color: #009E81;
+}
+.payment-status.FAILED,
+.payment-status.EXPIRED {
+  background-color: #FF2222;
+}
+.payment-status.CANCELLED {
+  background-color: #999;
+}
+.payment-status.PENDING {
+  background-color: #7c9e0c;
 }
 </style>