Browse Source

refactor(mine): 重构个人中心页面

- 优化个人中心页面布局和样式
- 添加订单状态显示和点击事件处理
- 使用 PageHelperEvo 组件替换原有的 PageHelper
- 调整订单列表项的样式和内容
EvilDragon 3 months ago
parent
commit
5c96a515d9

+ 10 - 11
packages/app/src/pages/home/mall/detail/index.vue

@@ -107,7 +107,7 @@ onLoad(async (query: { id: string }) => {
           已售{{ data?.exchangeCount || 0 }}件
         </div>
       </div>
-      <div class="h-4 text-black text-xl font-normal font-['PingFang_SC'] leading-[10.18px]">
+      <div class="text-black text-xl font-normal font-['PingFang_SC']">
         <!-- 阿芙佳朵 -->
         {{ data?.prodcutName }}
       </div>
@@ -115,16 +115,15 @@ onLoad(async (query: { id: string }) => {
       <div class="text-black/90 text-base font-normal font-['PingFang_SC'] leading-normal">
         积分兑换说明:
       </div>
-      <div
-        class="w-[346px] h-[95px] text-black/40 text-xs font-normal font-['PingFang_SC'] leading-[23px]"
-      >
-        · 不限制兑换个数
-        <br />
-        · 兑换后不支持退换货,如有问题可联系官方客户
-        <br />
-        · 规格:件
-        <br />
-        · 配送方式:到店自取
+      <div class="text-black/40 text-xs font-normal font-['PingFang_SC'] leading-[23px]">
+        {{ data?.exchangeDesc }}
+        <!--        · 不限制兑换个数-->
+        <!--        <br />-->
+        <!--        · 兑换后不支持退换货,如有问题可联系官方客户-->
+        <!--        <br />-->
+        <!--        · 规格:件-->
+        <!--        <br />-->
+        <!--        · 配送方式:到店自取-->
       </div>
       <div class="mx--4 h-2.5 bg-neutral-100"></div>
       <wd-divider>

+ 3 - 1
packages/app/src/pages/home/spread/index.vue

@@ -19,6 +19,8 @@ const { data, run: setData } = useRequest(
   () =>
     getContents({
       contentType: '3',
+      contentCategory: '301',
+      pageSize: '3',
     }),
   {
     initialData: { list: [] },
@@ -87,7 +89,7 @@ onMounted(async () => {
 "
     ></info-card>
     <section-heading title="最新资讯"></section-heading>
-    <div class="my-6">
+    <div class="my-6 flex flex-col gap-6">
       <template v-for="(it, i) in data.list" :key="i">
         <ElegantInfoCard :options="it"></ElegantInfoCard>
       </template>

+ 4 - 4
packages/merchant/env/.env.development

@@ -1,10 +1,10 @@
 # 变量必须以 VITE_ 为前缀才能暴露给外部读取
-NODE_ENV = 'development'
+NODE_ENV='development'
 # 是否去除console 和 debugger
-VITE_DELETE_CONSOLE = false
+VITE_DELETE_CONSOLE=false
 # 是否开启sourcemap
-VITE_SHOW_SOURCEMAP = true
+VITE_SHOW_SOURCEMAP=true
 
 VITE_SERVER_BASEURL='https://www.zhuchaohui.com'
 # VITE_SERVER_BASEURL = 'http://39.106.91.179:48080'
-# VITE_SERVER_BASEURL = 'http://192.168.2.58:48080'
+# VITE_SERVER_BASEURL='http://192.168.2.58:48080'

+ 40 - 30
packages/merchant/src/pages/mine/index.vue

@@ -20,31 +20,34 @@ import { desinTopBg } from '@designer-hub/assets/src/svgs'
 import NavBarEvo from '@designer-hub/app/src/components/navbar-evo.vue'
 import dayjs from 'dayjs'
 import PageHelper from '../../components/page-helper.vue'
-import { useUserStore } from '../../store'
+import { useUserStore } from '@/store'
 import AgentMine from './components/agent-mine.vue'
+import PageHelperEvo from '@/components/page-helper-evo.vue'
 
 const userStore = useUserStore()
 const { isLogined, userInfo, isMerchant, isAgent } = storeToRefs(userStore)
-const avatar = computed(() =>
-  !isEmpty(userInfo.value.avatar) ? userInfo.value.avatar : 'https://via.placeholder.com/72x72',
-)
 const { data, run: setData } = useRequest(() => getVendorAppInfo())
 const { data: orders, run: setOrders } = useRequest(() => getOrders())
 const { data: yearTarget, run: setYearTarget } = useRequest(() => getYearTarget())
 const { data: designerData, run: setdesignerData } = useRequest(() => getDesignerStatistics())
 const { data: followData, run: setFollowData } = useRequest(() => getFollowStatistics())
 const { data: agent, run: setAgent } = useRequest(() =>
-  getBroker({ brokerId: userInfo.value.userId.toString() }),
+  getBroker({ brokerId: String(userInfo.value.userId) }),
 )
-const nickNameClickHandle = async () => {
-  if (isLogined.value) return
-
-  uni.navigateTo({ url: '/pages/login/index' })
-}
 
+const status = ref<any>({
+  '0': '已报名',
+  '1': '已完成',
+  '2': '未核销',
+  '3': '已取消',
+  '4': '待交付',
+})
 const toInfoSeting = () => {
   uni.navigateTo({ url: '/pages/mine/merchant/merchant_settings' })
 }
+const toOrder = (order: any) => {
+  uni.navigateTo({ url: `/pages/mine/merchant/orders/detail/index?id=${order.id}` })
+}
 onShow(async () => {
   if (isLogined.value && isMerchant?.value) {
     await setData()
@@ -52,16 +55,11 @@ onShow(async () => {
   }
 
   if (isLogined.value && isAgent?.value) {
-    // await setData()
     await setAgent()
     await Promise.all([setYearTarget(), setdesignerData(), setFollowData()])
   }
 })
-onMounted(async () => {
-  // await run()
-  // console.log(data.value)
-  // await getTaskData()
-})
+onMounted(async () => {})
 const navBarProps = ref({ customClass: 'bg-transparent!' })
 onPageScroll(({ scrollTop }: { scrollTop: number }) => {
   console.log(scrollTop)
@@ -107,27 +105,39 @@ onPageScroll(({ scrollTop }: { scrollTop: number }) => {
           </div>
         </div>
         <div class="mt-[16px]">
-          <PageHelper :request="getOrders" :query="{}">
+          <PageHelperEvo :request="getOrders" :query="{}">
             <template #default="{ source }">
               <div class="flex flex-col gap-4">
-                <template v-for="(it, i) in source.list" :key="i">
+                <template v-for="(it, i) in source?.list" :key="i">
                   <Card custom-class="py-4">
-                    <div
-                      class="bg-white rounded-2xl flex flex-col"
-                      @click="router.push(`/pages/mine/merchant/orders/detail/index?id=${it.id}`)"
-                    >
-                      <div
-                        class="text-black/90 text-sm font-normal font-['PingFang_SC'] leading-normal"
-                      >
-                        支付时间:
-                        {{ dayjs(it.completeTime).format('YYYY-MM-DD hh:mm') }}
+                    <div class="bg-white rounded-2xl flex flex-col" @click="toOrder(it)">
+                      <div class="flex items-center justify-between">
+                        <div
+                          class="text-black/90 text-sm font-normal font-['PingFang_SC'] leading-normal"
+                        >
+                          支付时间:
+                          {{ dayjs(it.completeTime).format('YYYY-MM-DD hh:mm') }}
+                        </div>
+                        <div
+                          class="text-xs font-normal font-['PingFang SC'] leading-normal"
+                          :class="
+                            ['2', '4'].includes(it.orderStatus) ? 'text-[#ff2d2d]' : 'text-black/30'
+                          "
+                        >
+                          {{ status[it.orderStatus] }}
+                        </div>
                       </div>
 
                       <div class="flex mt-[19px] items-center">
                         <div class="w-[86px] h-[86px] bg-[#f6f6f6] rounded-[10px] overflow-hidden">
-                          <wd-img width="100%" height="100%" :src="it.orderImgUrl"></wd-img>
+                          <wd-img
+                            width="86"
+                            height="86"
+                            custom-class="vertical-bottom bg-[#f6f6f6]"
+                            :src="it.orderImgUrl"
+                          ></wd-img>
                         </div>
-                        <div class="ml-[16px]">
+                        <div class="ml-[16px] flex-1">
                           <div
                             class="text-black text-base font-normal font-['PingFang_SC'] leading-normal"
                           >
@@ -150,7 +160,7 @@ onPageScroll(({ scrollTop }: { scrollTop: number }) => {
                 </template>
               </div>
             </template>
-          </PageHelper>
+          </PageHelperEvo>
         </div>
       </view>
     </template>