Browse Source

feat(merchant): 积分商城订单详情

- 新增积分商城订单详情页面
- 在设计师详情页面添加积分订单列表
- 实现订单列表的分页加载和展示
- 添加订单状态和支付方式的显示
EvilDragon 3 months ago
parent
commit
3fb8ff310a

+ 8 - 0
packages/merchant/src/core/libs/requests.ts

@@ -434,6 +434,14 @@ export const getAppMemberLevelConfigs = () =>
       }[]
     }[]
   >('/app-api/basicsetting/app-set-member-level-config/listAndRights')
+/**
+ * 获取设计师积分订单
+ */
+export const getPointsOrders = (query: Partial<PointsOrder>) =>
+  httpGet<{
+    list: PointsOrder[]
+    total: number
+  }>('/app-api/member/points-order/page', query)
 export const httpGetMock = <T>(data: T) =>
   new Promise<IResData<T>>((resolve) => resolve({ code: 1, msg: '', data } as IResData<T>))
 export interface Circle {

+ 8 - 0
packages/merchant/src/pages.json

@@ -182,6 +182,14 @@
       }
     },
     {
+      "path": "pages/common/orders/detail/index",
+      "type": "page",
+      "style": {
+        "navigationBarTitleText": "订单详情",
+        "navigationBarBackgroundColor": "#fff"
+      }
+    },
+    {
       "path": "pages/mine/agent/invite/index",
       "type": "page",
       "style": {

+ 56 - 32
packages/merchant/src/pages/agent/designer/detail.vue

@@ -24,7 +24,7 @@ import { toHomePage } from '@/core/libs/actions'
 import arcBottom from '@designer-hub/assets/src/libs/assets/arcBottom'
 import { useMemberLevelsStore } from '@/store/member-levles'
 import TaskCard from '@/pages/agent/components/task-card.vue'
-import { getDesignerPointsActivities } from '@/core/libs/requests'
+import {getDesignerPointsActivities, getPointsOrders} from '@/core/libs/requests'
 import { useUserStore } from '@/store'
 import { storeToRefs } from 'pinia'
 import Card from '@designer-hub/app/src/components/card.vue'
@@ -42,13 +42,14 @@ const tabs = ref([
   // { label: '圈子动态', value: 'interact' },
   { label: '兑换商品', value: 'product' },
 ])
+const status = ref({ '0': '已报名', '1': '已完成', '2': '未核销', '3': '已取消', '4': '待交付' })
 const followUpQuery = ref({})
 const pointsActivitiesQuery = computed(() => ({ brokerId: userInfo.value.userId }))
 const toPointsDetails = () => {
   uni.navigateTo({ url: `/pages/agent/designer/points/index?id=${id.value}` })
 }
-const toOrderDetails = () => {
-  uni.navigateTo({ url: '/pages/mine/merchant/orders/detail/index' })
+const toOrderDetails = (it: any) => {
+  uni.navigateTo({ url: `/pages/common/orders/detail/index?id=${it.id}` })
 }
 const toArchives = () => {
   uni.navigateTo({ url: '/pages/agent/designer/archives/index?id=' + id.value })
@@ -400,37 +401,60 @@ onLoad((query) => {
             </div>
           </div>
         </view>
+
         <view class="content mt-[20px]" v-if="active === 'product'">
-          <div
-            class="bg-white rounded-2xl shadow pa-[15px] mt-[20px] flex-col gap-2 flex"
-            @click="toOrderDetails"
-          >
-            <div class="bg-white rounded-2xl flex items-center justify-between w-full">
-              <div>
-                <img class="w-[76px] h-[101px]" src="https://via.placeholder.com/76x101" />
-              </div>
-              <div class="ml-[16px] flex flex-col justify-start">
-                <div class="text-black text-base font-normal font-['PingFang_SC'] leading-normal">
-                  阿芙佳朵
-                </div>
-                <div
-                  class="text-left text-black/30 text-sm font-normal font-['PingFang_SC'] leading-normal"
-                >
-                  x2
-                </div>
-                <div
-                  class="text-left text-black/30 text-sm font-normal font-['PingFang_SC'] leading-normal"
-                >
-                  600积分
-                </div>
-              </div>
-              <div class="flex-1"></div>
-              <div>
-                <div class="text-[#2357e9] text-xs font-normal font-['PingFang_SC'] leading-normal">
-                  已完成
+          <div class="flex-grow flex flex-col gap-4 px-3.5 py-5">
+            <PageHelperEvo
+              ref="pageHelperRef"
+              :request="getPointsOrders"
+              :query="{}"
+              class="flex-grow flex flex-col"
+            >
+              <template #default="{ source }">
+                <div class="flex-grow flex flex-col gap-4">
+                  <template v-for="(it, i) in source?.list" :key="i">
+                    <div @click="toOrderDetails(it)">
+                      <Card>
+                        <div class="flex gap-4">
+                          <wd-img
+                            width="94"
+                            height="94"
+                            custom-class="rounded-2xl overflow-hidden"
+                            :src="it.orderImgUrl"
+                          />
+                          <div class="flex flex-col flex-1">
+                            <div
+                              class="text-black text-base font-normal font-['PingFang_SC'] leading-normal"
+                            >
+                              {{ it.projectName }}
+                            </div>
+                            <div
+                              class="text-start text-black/40 text-sm font-normal font-['PingFang_SC'] leading-normal"
+                            >
+                              x{{ it.orderQuantity || 1 }}
+                            </div>
+                            <div class="flex-1"></div>
+                            <div
+                              class="text-start text-black/60 text-sm font-normal font-['PingFang_SC'] leading-normal"
+                            >
+                              {{ it.points }}积分
+                            </div>
+                          </div>
+                          <div>
+                            <div
+                              class="text-black/40 text-sm font-normal font-['PingFang_SC'] leading-normal"
+                            >
+                              <!-- 已完成 -->
+                              {{ status[it.orderStatus] }}
+                            </div>
+                          </div>
+                        </div>
+                      </Card>
+                    </div>
+                  </template>
                 </div>
-              </div>
-            </div>
+              </template>
+            </PageHelperEvo>
           </div>
         </view>
       </div>

+ 101 - 0
packages/merchant/src/pages/common/orders/detail/index.vue

@@ -0,0 +1,101 @@
+<route lang="json">
+{ "style": { "navigationBarTitleText": "订单详情", "navigationBarBackgroundColor": "#fff" } }
+</route>
+<script setup lang="ts">
+import SectionHeading from '@/components/section-heading.vue'
+import { getPointsOrder } from '@/core/libs/requests'
+import BottomAppBar from '@/components/bottom-app-bar.vue'
+import dayjs from 'dayjs'
+
+const id = ref()
+const status = ref({ '0': '已报名', '1': '已完成', '2': '未核销', '3': '已取消', '4': '待交付' })
+const payTypes = ref({ 0: '积分支付', 1: '现金支付' })
+const { data, run: setData } = useRequest(() => getPointsOrder(id.value), { initialData: {} })
+const handleSubmit = async () => {
+  // await requestToast(() => cancelOrder(id.value), { success: true, successTitle: '取消成功' })
+  // await setData()
+}
+
+onLoad((query?: Record<string | 'id', any>) => {
+  id.value = query?.id
+  setData()
+})
+</script>
+<template>
+  <div class="flex-grow flex flex-col gap-4 px-3.5 bg-white">
+    <div class="h-8.5 flex items-center justify-center mx--3.5 box-border bg-[#ffecec]">
+      <div
+        class="text-right text-[#ef4343] text-sm font-normal font-['PingFang_SC'] leading-normal"
+      >
+        {{ status[data.orderStatus] }}
+      </div>
+    </div>
+    <div class="flex gap-4 border-b border-b-solid border-b-[#f2f2f2] pb-5">
+      <wd-img
+        width="94"
+        height="94"
+        custom-class="rounded-2xl overflow-hidden"
+        :src="data.orderImgUrl"
+      />
+      <div class="flex flex-col flex-1">
+        <div class="text-black text-base font-normal font-['PingFang_SC'] leading-normal">
+          {{ data.projectName }}
+        </div>
+        <div
+          class="text-start text-black/40 text-sm font-normal font-['PingFang_SC'] leading-normal"
+        >
+          x{{ data.orderQuantity }}
+        </div>
+        <div class="flex-1"></div>
+        <div
+          class="text-start text-black/60 text-sm font-normal font-['PingFang_SC'] leading-normal"
+        >
+          {{ data.points }}积分
+        </div>
+      </div>
+      <div>
+        <div class="text-black/40 text-sm font-normal font-['PingFang_SC'] leading-normal">
+          <!-- 已完成 -->
+          {{ status[data.orderStatus] }}
+        </div>
+      </div>
+    </div>
+    <SectionHeading
+      v-if="data.orderMoney"
+      title="订单金额"
+      size="sm"
+      :end-text="`¥ ${data.orderMoney}`"
+    ></SectionHeading>
+    <SectionHeading title="总积分" size="sm" :end-text="`${data.points}`"></SectionHeading>
+    <SectionHeading title="实际支付积分" size="sm" :end-text="`${data.payPoints}`"></SectionHeading>
+    <SectionHeading title="订单号" size="sm" :end-text="data.orderNo"></SectionHeading>
+    <SectionHeading
+      title="支付时间"
+      size="sm"
+      :end-text="dayjs(data.createTime).format('YYYY-MM-DD hh:mm')"
+    ></SectionHeading>
+    <SectionHeading title="支付方式" size="sm" :end-text="payTypes[data.payType]"></SectionHeading>
+    <template v-if="data.orderStatus === '3'">
+      <SectionHeading
+        title="取消时间"
+        size="sm"
+        :end-text="dayjs(data.cancelTime).format('YYYY-MM-DD hh:mm')"
+      ></SectionHeading>
+      <SectionHeading title="返还积分" size="sm" :end-text="`${data.payPoints}`"></SectionHeading>
+      <SectionHeading title="取消人" size="sm" :end-text="data.cancelUser"></SectionHeading>
+    </template>
+    <div class="flex-1"></div>
+    <!--    <BottomAppBar fixed>-->
+    <!--      <div>-->
+    <!--        <wd-button-->
+    <!--          :round="false"-->
+    <!--          block-->
+    <!--          v-if="['2', '4'].includes(data.orderStatus)"-->
+    <!--          @click="handleSubmit"-->
+    <!--        >-->
+    <!--          取消订单-->
+    <!--        </wd-button>-->
+    <!--      </div>-->
+    <!--    </BottomAppBar>-->
+  </div>
+</template>

+ 1 - 0
packages/merchant/src/types/uni-pages.d.ts

@@ -20,6 +20,7 @@ interface NavigateToOptions {
        "/pages/agent/designer/archives/index" |
        "/pages/agent/designer/points/index" |
        "/pages/agent/tasks/detail/index" |
+       "/pages/common/orders/detail/index" |
        "/pages/mine/agent/invite/index" |
        "/pages/mine/agent/settings/index" |
        "/pages/agent/designer/archives/basic-info/index" |