i

src/pages/admin/order_manage/detail/index.vue

@@ -0,0 +1,122 @@
+<template>
+    <view>
+        <view class="header">
+            <view>订单号:{{ info.oid }}</view>
+            <view>{{ info.add_time }}</view>
+        </view>
+        <view class="good-info">
+            <view class="top">
+                <image :src="info.BindGoods?.cover" />
+                <view class="title">{{ info.BindGoods?.name }}</view>
+            </view>
+
+            <view class="public-total">
+                共{{ info.count }}件商品，已支付
+                <text class="money">{{ info.number }}</text>
+            </view>
+        </view>
+        <nut-cell-group>
+            <nut-cell title="订单状态:" :desc="orderStatus"></nut-cell>
+            <nut-cell
+                title="下单用户:"
+                :desc="info.BindUser?.nickName"
+            ></nut-cell>
+            <nut-cell
+                title="用户手机号:"
+                :desc="info.BindUser?.phone"
+            ></nut-cell>
+            <nut-cell
+                v-if="info.status === 2"
+                title="核销人员:"
+                :desc="info.BindCancelUser?.nickName"
+            ></nut-cell>
+            <nut-cell
+                v-if="info.status === 2"
+                title="核销人手机号:"
+                :desc="info.BindCancelUser?.phone"
+            ></nut-cell>
+        </nut-cell-group>
+    </view>
+</template>
+
+<script setup lang="ts">
+import Taro from "@tarojs/taro";
+import { ref, computed } from "vue";
+
+const info = ref<any>({});
+
+Taro.useLoad(() => {
+    info.value = Taro.getStorageSync("ver_order_info");
+});
+
+const orderStatus = computed(() => {
+    switch (info.value.status) {
+        case 1:
+            return "待核销";
+        case 2:
+            return "已核销";
+        case 3:
+            return "已失效";
+    }
+});
+</script>
+
+<style lang="scss">
+page {
+    --nut-cell-desc-color: #000;
+}
+
+.header {
+    background: linear-gradient(90deg, #2291f8 0, #1cd1dc);
+    padding: 30px;
+    color: #fff;
+    font-size: 30px;
+}
+
+.user-info {
+    background-color: #fff;
+    width: 100%;
+}
+
+.good-info {
+    margin-top: 20px;
+    width: 100%;
+    background-color: #fff;
+    padding: 20px;
+
+    .top {
+        display: flex;
+        justify-content: space-between;
+        align-items: flex-start;
+
+        image {
+            width: 200px;
+            height: 200px;
+        }
+
+        .title {
+            flex: 1;
+            padding: 10px;
+        }
+
+        .price {
+            text-align: right;
+        }
+    }
+
+    .public-total {
+        font-size: 28px;
+        color: #282828;
+        border-top: 1px solid #eee;
+        height: 92px;
+        line-height: 92px;
+        text-align: right;
+        padding: 0 30px;
+        background-color: #fff;
+    }
+
+    .public-total .money {
+        color: #ff4c3c;
+    }
+}
+</style>