wip: 4.0

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

@@ -1,71 +1,77 @@
 <template>
   <view>
-    <view class="header">
-      <view>订单号:{{ info.oid }}</view>
-      <view>{{ info.add_time }}</view>
-    </view>
-    <view class="card">
-      <view class="center" v-for="(itm, idx) in info.OrderGoods" :key="idx">
-        <view class="top">
-          <image :src="itm.Goods.cover" />
-          <view class="title">{{ itm.Goods.name }} </view>
-          <view class="right">
-            <view v-if="info.pay_type === 1">{{ itm.pay_price }}元</view>
-            <view v-else>{{ itm.pay_integral }}积分</view>
-            <view>x{{ itm.number }}</view>
-          </view>
-        </view>
-      </view>
-      <view class="line"></view>
-      <view class="bom" style="text-align: right">
-        共{{ info.count }}件商品,支付方式:{{
-          info.pay_type === 1 ? "微信" : "积分"
-        }},实付:
-        <text style="color: red">{{
-          info.pay_type === 1 ? `${info.price}元` : `${info.exchange}积分`
-        }}</text>
-      </view>
-    </view>
-
+    <!--    订单信息    -->
     <nut-cell-group>
-      <nut-cell title="订单状态:" :desc="orderStatus"></nut-cell>
+      <nut-cell>
+        <template #default>
+          <view class="center-box">
+            <view
+              class="top"
+              v-for="(item, index) in info.OrderGoods"
+              :key="index">
+              <image class="mr-10" :src="item.Goods?.cover" />
+              <view class="flex-1">
+                <view class="title">{{ item.Goods?.name }}</view>
+                <view class="text-[#F83D3D] mt-5">
+                  <view>{{ item.pay_price }}元</view>
+                  <view>{{ item.pay_integral }}积分</view>
+                </view>
+              </view>
+              <view class="right">
+                <view>x{{ item.number }}</view>
+              </view>
+            </view>
+            <view
+              class="flex justify-between items-center mt-2 mb-2 text-[25px]">
+              <view class="text-[#9C9C9C]">{{ `共${info.count}件商品` }}</view>
+              <view
+                >{{ info.status !== 0 ? '实' : '应' }}付款{{
+                  info.pay_type === 1 ? '(元): ' : '(积分): '
+                }}{{ info.pay_type === 1 ? info.price : info.exchange }}</view
+              >
+            </view>
+          </view>
+        </template>
+      </nut-cell>
+    </nut-cell-group>
+    <nut-cell-group>
+      <nut-cell title="订单号:" :desc="info.oid"></nut-cell>
+      <nut-cell
+        title="订单状态:"
+        :desc="
+          info.status === 0
+            ? '待付款'
+            : info.status === 1
+            ? '待使用'
+            : info.status === 2
+            ? '已使用'
+            : '已失效'
+        ">
+      </nut-cell>
       <nut-cell title="下单用户:" :desc="info.User?.nickName"></nut-cell>
       <nut-cell title="用户手机号:" :desc="info.User?.phone"></nut-cell>
+      <nut-cell title="下单时间:" :desc="info.add_time"></nut-cell>
       <nut-cell title="核销时间:" :desc="info.User?.phone"></nut-cell>
       <nut-cell
         v-if="info.status === 2"
         title="核销人员:"
-        :desc="info.CancelUser?.nickName"
-      ></nut-cell>
+        :desc="info.CancelUser?.nickName"></nut-cell>
       <nut-cell
         v-if="info.status === 2"
         title="核销人手机号:"
-        :desc="info.CancelUser?.phone"
-      ></nut-cell>
+        :desc="info.CancelUser?.phone"></nut-cell>
     </nut-cell-group>
   </view>
 </template>
 
 <script setup lang="ts">
-import Taro from "@tarojs/taro";
-import { computed, ref } from "vue";
+import Taro from '@tarojs/taro';
+import {ref} from 'vue';
 
 const info = ref<any>({});
 
 Taro.useLoad(() => {
-  info.value = Taro.getStorageSync("ver_order_info");
-  console.log(info.value);
-});
-
-const orderStatus = computed(() => {
-  switch (info.value.status) {
-    case 1:
-      return "待核销";
-    case 2:
-      return "已核销";
-    case 3:
-      return "已失效";
-  }
+  info.value = Taro.getStorageSync('ver_order_info');
 });
 </script>
 
@@ -148,6 +154,7 @@ page {
     display: flex;
     justify-content: space-between;
     // align-items: flex-start;
+    margin-bottom: 10px;
 
     image {
       width: 150px;
@@ -172,4 +179,41 @@ page {
     }
   }
 }
+
+.center-box {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+
+  .top {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 10rpx;
+
+    image {
+      width: 150px;
+      height: 150px;
+      border-radius: 10rpx;
+      margin-right: 10px;
+    }
+
+    .title {
+      margin-left: 10px;
+      display: -webkit-box;
+      overflow: hidden;
+      -webkit-line-clamp: 2;
+      -webkit-box-orient: vertical;
+      text-overflow: ellipsis;
+      width: 350px;
+    }
+
+    .right {
+      margin-left: 10px;
+      font-size: 28px;
+      text-align: right;
+    }
+  }
+}
 </style>