feat: 订单详情交互调整

src/pages-order/order/components/AmtSection/index.vue

@@ -0,0 +1,54 @@
+<template>
+  <view class="bg-white border-box rounded-12 p-12 mb-12">
+    <view class="flex flex-items-center flex-justify-between mb-4">
+      <view class="flex flex-items-center">
+        <text class="font-size-16 color-171717 line-height-24 font-500">
+          订单金额
+        </text>
+        <text class="amt font-size-18 font-bold color-FF3D60 ml-4">
+          {{ orderData.payAmt }}
+        </text>
+      </view>
+    </view>
+    <view
+      v-if="orderData.orderStatus === '0'"
+      class="font-size-11 color-99A0AE"
+    >
+      超时后，订单将自动取消
+    </view>
+    <view
+      v-if="['1', '2'].includes(orderData.orderStatus)"
+      class="border-box border-top flex flex-items-center flex-justify-between font-size-12 pt-12 mt-12"
+    >
+      <view class="color-525866">取消政策及说明</view>
+      <view class="flex flex-items-center" @click="emit('click')">
+        <text class="color-2D91FF mr-4">查看详情</text>
+        <uni-icons type="right" size="12" color="#99A0AE" />
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup>
+import { defineProps, defineEmits } from "vue";
+
+const props = defineProps({
+  orderData: {
+    type: Object,
+    required: true,
+    default: () => ({}),
+  },
+});
+
+const emit = defineEmits(["click"]);
+</script>
+
+<style scoped lang="scss">
+.amt {
+  &::before {
+    content: "¥";
+    font-size: 16px;
+    font-weight: 500;
+  }
+}
+</style>