wip: 4.0

2024-05-16 14:27:57 +08:00
parent b09c1d9537
commit 8f3b158032
72 changed files with 3931 additions and 2161 deletions
--- a/src/pages/admin/order_manage/detail/index.vue
+++ b/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>
--- a/src/pages/admin/order_manage/list/index.scss
+++ b/src/pages/admin/order_manage/list/index.scss
@@ -1,29 +1,94 @@
 .tabs-1 {
  display: flex;
  box-sizing: border-box;
-  justify-content: space-between;
+  justify-content: space-evenly;
  align-items: center;
  background-color: #fff;
-  padding: 10px;
-  overflow-x: scroll;
+  // padding: 10px;
  .item {
    display: flex;
    flex-direction: column;
    align-items: center;
    .line {
-      margin-top: 10px auto;
+      margin: 10px auto;
      width: 50px;
-      height: 5px;
+      height: 8px;
+      border-radius: 15px;
    }
  }
 }

+// .order-card {
+//   width: 95%;
+//   box-sizing: border-box;
+//   margin: 15px auto;
+//   background-color: #fff;
+//   border-radius: 10px;
+//   padding: 20px;
+
+//   .line {
+//     width: 100%;
+//     height: 1px;
+//     background-color: #f5f5f5;
+//     margin: 10px;
+//   }
+
+//   .top {
+//     // display: flex;
+//     // justify-content: space-between;
+//     // align-items: center;
+
+//     .name {
+//       font-weight: bold;
+//     }
+
+//     .sub {
+//       color: #999;
+//       font-size: 30px;
+//     }
+//   }
+
+//   .btn {
+//     display: flex;
+//     justify-content: flex-end;
+//     align-items: center;
+//   }
+
+//   .center {
+//     .top {
+//       display: flex;
+//       justify-content: space-between;
+//       // align-items: flex-start;
+
+//       image {
+//         width: 150px;
+//         height: 150px;
+//         border-radius: 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;
+//       }
+//     }
+//   }
+// }
+
 .order-card {
-  width: 95%;
  box-sizing: border-box;
  margin: 15px auto;
  background-color: #fff;
-  border-radius: 10px;
  padding: 20px;

  .line {
@@ -34,18 +99,9 @@
  }

  .top {
-    // display: flex;
-    // justify-content: space-between;
-    // align-items: center;
-
-    .name {
-      font-weight: bold;
-    }
-
-    .sub {
-      color: #999;
-      font-size: 30px;
-    }
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
  }

  .btn {
@@ -55,19 +111,20 @@
  }

  .center {
+    // margin-bottom: 10px;
    .top {
      display: flex;
-      justify-content: space-between;
-      // align-items: flex-start;
+      // justify-content: space-between;
+      align-items: flex-start;

      image {
        width: 150px;
        height: 150px;
-        border-radius: 10px;
+        border-radius: 15px;
+        margin-right: 10px;
      }

      .title {
-        margin-left: 10px;
        display: -webkit-box;
        overflow: hidden;
        -webkit-line-clamp: 2;
@@ -80,6 +137,7 @@
        margin-left: 10px;
        font-size: 28px;
        text-align: right;
+        color: #9c9c9c;
      }
    }
  }
--- a/src/pages/admin/order_manage/list/index.vue
+++ b/src/pages/admin/order_manage/list/index.vue
@@ -5,15 +5,18 @@
        class="item"
        v-for="(item, index) in opt"
        :key="index"
-        @click="tabChange(item.value)"
-      >
-        <view>{{ item.text }}</view>
+        @click="tabChange(item.value)">
+        <view
+          :style="{
+            color: item.value === tabVal ? '#333333' : '#9C9C9C',
+          }"
+          >{{ item.text }}</view
+        >
        <view
          class="line"
          :style="{
-            backgroundColor: item.value === tabVal ? 'red' : '',
-          }"
-        ></view>
+            backgroundColor: item.value === tabVal ? '#FFD940' : '',
+          }"></view>
      </view>
    </view>
    <view v-if="dataList.length > 0">
@@ -21,73 +24,87 @@
        class="order-card"
        v-for="(item, index) in dataList"
        :key="index"
-        @click="toDetailPage(item)"
-      >
+        @click="toDetailPage(item)">
        <view class="top">
-          <view class="name">订单号:{{ item.oid }}</view>
-          <!-- <view class="sub">下单时间：{{ item.add_time }}</view> -->
-          <view class="sub" v-if="item.status !== 3">核销时间：{{ item.cancel_time || "待核销" }}</view>
-          <!-- <view style="color: red">{{
-                        item.status === 0
-                            ? "待付款"
-                            : item.status === 1
-                            ? "待使用"
-                            : item.status === 2
-                            ? "已使用"
-                            : "已失效"
-                    }}</view> -->
+          <view class="text-[#9C9C9C] text-[25px]">订单号：{{ item.oid }}</view>
+          <view
+            :style="{
+              color:
+                item.status === 0
+                  ? '#FF850A'
+                  : item.status === 1
+                  ? '#F83D3D'
+                  : item.status === 2
+                  ? '#333333'
+                  : '#9C9C9C',
+            }"
+            >{{
+              item.status === 0
+                ? '待付款'
+                : item.status === 1
+                ? '待使用'
+                : item.status === 2
+                ? '已使用'
+                : '已失效'
+            }}
+          </view>
        </view>
        <view class="line"></view>
        <view class="center" v-for="(itm, idx) in item.OrderGoods" :key="idx">
          <view class="top">
-            <image :src="itm.Goods.cover" />
-            <view class="title">{{ itm.Goods.name }} </view>
+            <image class="mr-10" :src="itm.Goods.cover" />
+            <view class="flex-1">
+              <view class="title">{{ itm.Goods?.name }}</view>
+              <view class="text-[#F83D3D] mt-5">
+                <view>{{ itm.pay_price }}元</view>
+                <view>{{ itm.pay_integral }}积分</view>
+              </view>
+            </view>
            <view class="right">
-              <view v-if="item.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">
-          共{{ item.count }}件商品,支付方式:{{
-            item.pay_type === 1 ? "微信" : "积分"
-          }},实付:
-          <text style="color: red">{{
-            item.pay_type === 1 ? `${item.price}元` : `${item.exchange}积分`
-          }}</text>
+        <view
+          class="flex justify-between items-center mt-2 mb-2 text-[25px]"
+          v-if="item.status !== 0">
+          <text class="text-[#9C9C9C]">共{{ item.count }}件商品</text>
+          <view
+            >{{ item.status !== 0 ? '实' : '应' }}付款{{
+              item.pay_type === 1 ? '(元): ' : '(积分): '
+            }}{{ item.pay_type === 1 ? item.price : item.exchange }}</view
+          >
        </view>
      </view>
    </view>
-    <nut-empty v-else description="暂无订单数据"></nut-empty>
+    <nut-empty v-else description="暂无订单"></nut-empty>
  </view>
 </template>

 <script setup lang="ts">
-import { ref } from "vue";
-import Taro from "@tarojs/taro";
-import { getActiveOrderList } from "../../../../api/admin";
+import {ref} from 'vue';
+import Taro from '@tarojs/taro';
+import {getActiveOrderList} from '../../../../api/admin';

 const opt = ref([
  {
-    text: "全部",
+    text: '全部',
    value: 0,
  },
  {
-    text: "待付款",
+    text: '待付款',
    value: 1,
  },
  {
-    text: "待核销",
+    text: '待核销',
    value: 2,
  },
  {
-    text: "已核销",
+    text: '已核销',
    value: 3,
  },
  {
-    text: "已失效",
+    text: '已失效',
    value: 4,
  },
 ]);
@@ -96,42 +113,63 @@ const tabVal = ref(0);

 const dataList = ref<any>([]);

-Taro.useLoad((options) => {
+const pageOpt = ref({
+  page: 1,
+  total: 0,
+});
+
+Taro.useLoad(options => {
  tabVal.value = Number(options.type);
  getData();
 });

 const getData = async () => {
+  Taro.showLoading({
+    title: '加载中',
+  });
  try {
-    const user_info = Taro.getStorageSync("userInfo");
+    const user_info = Taro.getStorageSync('userInfo');
    const data = {
      bid: user_info.data.bid,
      status: tabVal.value,
+      PageNum: pageOpt.value.page,
+      PageSize: 10,
    };
    const res = await getActiveOrderList(data);
-    dataList.value = res.data.data;
+    dataList.value.push(...res.data.data);
+    pageOpt.value.total = res.data.total || 0;
  } catch (error) {
    Taro.showToast({
      title: error.msg,
-      icon: "none",
+      icon: 'none',
    });
  }
+  Taro.hideLoading();
 };

 const tabChange = (e: number) => {
-  console.log(e);
  tabVal.value = e;
  getData();
 };

 const toDetailPage = (item: any) => {
-  Taro.setStorageSync("ver_order_info", item);
+  Taro.setStorageSync('ver_order_info', item);
  Taro.navigateTo({
-    url: "/pages/admin/order_manage/detail/index",
+    url: '/pages/admin/order_manage/detail/index',
  });
 };
+
+Taro.useReachBottom(() => {
+  if (pageOpt.value.total === dataList.value.length)
+    return Taro.showToast({
+      title: '没有更多数据了',
+      icon: 'none',
+    });
+  pageOpt.value.page++;
+  getData();
+});
 </script>

 <style lang="scss">
-@import "./index.scss";
+@import './index.scss';
 </style>