first

pages/list/render/PayOrderRender.vue

@@ -0,0 +1,142 @@
+<!--
+
+  订单列表页面， 数据渲染 
+   业务： 支付订单列表页 
+
+  @author terrfly
+  @site https://www.jeequan.com
+  @date 2022/11/23 16:57
+-->
+<template>
+  <!-- 列表卡片循环渲染start -->
+  <view class="order-card" hover-class="touch-hover" hover-stay-time="150" @tap="toDetail()">
+    <view class="img-wrapper flex-center" :style="{ backgroundColor: datamap.payOrderImage(record?.wayCodeType)?.bgColor }">
+      <image :src="datamap.payOrderImage(record?.wayCodeType)?.imgUrl" mode="scaleToFill"></image>
+    </view>
+    <view class="order-info">
+      <view class="order-num">
+        <view> <text class="icon-money">￥</text> {{ cal.cert2Dollar(props.record.amount) }} </view>
+        <view class="order-state">
+          {{ datamap.payOrderState(props.record.state).text }}
+          <text class="order-spot" :style="{ backgroundColor: datamap.payOrderState(props.record.state).color }"></text>
+        </view>
+      </view>
+      <view class="order-time">{{ props.record.createdAt }}</view>
+    </view>
+  </view>
+</template>
+
+<script setup>
+import { reactive, ref } from 'vue'
+import cal from '@/commons/utils/cal.js'
+import go from '@/commons/utils/go.js'
+import datamap from '@/commons/utils/datamap.js'
+
+// 跳转详情页
+function toDetail() {
+  go.to('PAGES_PAY_ORDER_DETAIL', { payOrderId: props.record.payOrderId })
+}
+
+// 定义传入属性
+const props = defineProps({
+  record: { type: Object, default: () => {} }, // 渲染对象
+})
+</script>
+
+<style lang="scss" scoped>
+.store-name {
+  display: flex;
+  align-items: center;
+  font-size: 33rpx;
+  font-weight: 500;
+  image {
+    width: 44rpx;
+    height: 44rpx;
+    margin-left: 5rpx;
+    transform: rotate(180deg);
+  }
+}
+.input-wrapper {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 30rpx;
+  padding-top: 22rpx;
+  height: 110rpx;
+  background-color: $J-bg-ff;
+  .input-main {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    height: 70rpx;
+    background: $J-bg-f5;
+    border-radius: $J-b-r12;
+    image {
+      padding: 22rpx;
+      width: 26rpx;
+      height: 26rpx;
+    }
+    input {
+      flex: 1;
+      font-size: 27rpx;
+    }
+  }
+  .screen-wrapper {
+    margin: 0 12rpx 0 20rpx;
+    font-size: 32rpx;
+    color: $J-color-t99;
+    image {
+      width: 28rpx;
+      height: 26rpx;
+      padding: 0 21rpx;
+    }
+  }
+}
+.order-card {
+  display: flex;
+  align-items: center;
+  padding: 0 30rpx;
+  height: 170rpx;
+  background-color: $J-bg-ff;
+  .img-wrapper {
+    margin-right: 30rpx;
+    width: 100rpx;
+    height: 100rpx;
+    border-radius: 50%;
+    overflow: hidden;
+    image {
+      width: 100%;
+      height: 100%;
+    }
+  }
+  .order-info {
+    flex: 1;
+    .order-num {
+      display: flex;
+      justify-content: space-between;
+      font-size: 30rpx;
+      font-weight: 500;
+      .icon-money {
+        font-size: 23rpx;
+      }
+      .order-state {
+        display: flex;
+        align-items: center;
+        color: $J-color-t80;
+        .order-spot {
+          display: block;
+          margin: 0 10rpx 0 20rpx;
+          width: 20rpx;
+          height: 20rpx;
+          border-radius: 50%;
+        }
+      }
+    }
+    .order-time {
+      margin-top: 16rpx;
+      font-size: 26rpx;
+      color: $J-color-t99;
+    }
+  }
+}
+</style>