源文件

jeepay-ui-uapp-face/pages/order/components/OrderCard.vue

@@ -0,0 +1,102 @@
+<template>
+  <view class="card-wrapper" @tap="emits('click')">
+    <view class="img-box" :style="{ backgroundColor: payImg(wayCodeType).bgColor }">
+      <image :src="payImg(wayCodeType).imgUrl" mode="scaleToFill" />
+    </view>
+    <view class="card-info">
+      <view class="card-title">
+        <view class="title">收款</view>
+        <view class="num">+{{ (amount / 100).toFixed(2) }}</view>
+      </view>
+      <view class="order-number">
+        <view class="order-title">订单编号：</view>
+        {{ payOrderId }}
+      </view>
+      <view class="card-time">
+        <view class="created-time">{{ createdAt }}</view>
+        <view class="card-state" :style="{ backgroundColor: payState(state).color }">{{ payState(state).text }}</view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup>
+const emits = defineEmits(['click'])
+const props = defineProps({
+  payOrderId: { type: String }, //订单编号
+  createdAt: { type: String }, //创建 时间
+  amount: { type: [String, Number] }, //收款金额
+  wayCodeType: { type: String }, // 支付方式
+  state: { type: [String, Number] }, // 状态
+})
+const payImg = uni.$J.dataMap.payImg
+const payState = uni.$J.dataMap.payStateMap
+</script>
+
+<style lang="scss" scoped>
+.card-wrapper {
+  display: flex;
+
+  margin: 30rpx;
+  padding: 20rpx 0 20rpx 20rpx;
+  background-color: #fff;
+  border-radius: 15rpx;
+
+  .img-box {
+    flex-shrink: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-right: 30rpx;
+    width: 20%;
+    border-radius: 14rpx;
+
+    image {
+      width: 80%;
+      height: 80%;
+    }
+  }
+
+  .card-info {
+    flex: 1;
+
+    .card-title {
+      display: flex;
+      justify-content: space-between;
+      font-size: 28rpx;
+      font-weight: 600;
+
+      .num {
+        margin-right: 20rpx;
+        color: rgba(45, 218, 119, 1);
+      }
+    }
+
+    .order-number {
+      display: flex;
+      margin: 20rpx 0;
+      font-size: 18rpx;
+      color: rgba(102, 102, 102, 1);
+    }
+
+    .card-time {
+      display: flex;
+      justify-content: space-between;
+
+      .created-time {
+        font-size: 18rpx;
+        color: rgba(179, 179, 179, 1);
+      }
+
+      .card-state {
+        padding: 8rpx 30rpx;
+        background-color: rgba(45, 218, 119, 1);
+        border-radius: 20rpx 0 0 20rpx;
+        font-size: 12rpx;
+        color: #fff;
+        letter-spacing: 2rpx;
+      }
+    }
+  }
+}
+</style>