|
@@ -0,0 +1,70 @@
|
|
|
|
|
+<template>
|
|
|
|
|
+ <view class="payment-view">
|
|
|
|
|
+ <image
|
|
|
|
|
+ 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>
|
|
|
|
|
+ <!-- <i-icon
|
|
|
|
|
+ name="arrow-right-s-line"
|
|
|
|
|
+ size="48rpx"
|
|
|
|
|
+ color="#333"/> -->
|
|
|
|
|
+ </view>
|
|
|
|
|
+</template>
|
|
|
|
|
+
|
|
|
|
|
+<script>
|
|
|
|
|
+export default {
|
|
|
|
|
+ name: "PaymentView",
|
|
|
|
|
+ props: {
|
|
|
|
|
+ status: String
|
|
|
|
|
+ },
|
|
|
|
|
+ data() {
|
|
|
|
|
+ return {
|
|
|
|
|
+
|
|
|
|
|
+ };
|
|
|
|
|
+ },
|
|
|
|
|
+ mounted() {
|
|
|
|
|
+
|
|
|
|
|
+ },
|
|
|
|
|
+ methods: {
|
|
|
|
|
+
|
|
|
|
|
+ }
|
|
|
|
|
+}
|
|
|
|
|
+</script>
|
|
|
|
|
+
|
|
|
|
|
+<style scoped>
|
|
|
|
|
+.payment-view {
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ padding: 32rpx;
|
|
|
|
|
+ margin: 32rpx 32rpx 0;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ border-radius: 24rpx;
|
|
|
|
|
+ padding-right: 24rpx;
|
|
|
|
|
+ background-color: white;
|
|
|
|
|
+}
|
|
|
|
|
+.payment-icon {
|
|
|
|
|
+ width: 65rpx;
|
|
|
|
|
+ height: 65rpx;
|
|
|
|
|
+}
|
|
|
|
|
+.payment-info {
|
|
|
|
|
+ flex: 1;
|
|
|
|
|
+ padding: 0 32rpx;
|
|
|
|
|
+}
|
|
|
|
|
+.payment-name {
|
|
|
|
|
+ flex: 1;
|
|
|
|
|
+ color: #222;
|
|
|
|
|
+ font-size: 32rpx;
|
|
|
|
|
+ font-weight: bold;
|
|
|
|
|
+}
|
|
|
|
|
+.payment-status {
|
|
|
|
|
+ color: #009E81;
|
|
|
|
|
+ font-size: 28rpx;
|
|
|
|
|
+ padding-top: 8rpx;
|
|
|
|
|
+}
|
|
|
|
|
+.payment-status.FAILED {
|
|
|
|
|
+ color: #FF2222;
|
|
|
|
|
+}
|
|
|
|
|
+</style>
|
