designer-hub/packages/merchant/src/pages/mine/index.vue

<route lang="json5">
{ layout: 'tabbar', style: { navigationBarTitleText: '我的', navigationStyle: 'custom' } }
</route>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import {
  getOrders,
  getVendorAppInfo,
  getYearTarget,
  getDesignerStatistics,
  getFollowStatistics,
  getBroker,
} from '../../core/libs/requests'

import { storeToRefs } from 'pinia'
import { isEmpty } from 'radash'
import Card from '@designer-hub/app/src/components/card.vue'
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 AgentMine from './components/agent-mine.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() }),
)
const nickNameClickHandle = async () => {
  if (isLogined.value) return

  uni.navigateTo({ url: '/pages/login/index' })
}

const toInfoSeting = () => {
  uni.navigateTo({ url: '/pages/mine/merchant/merchant_settings' })
}
onShow(async () => {
  if (isLogined.value && isMerchant?.value) {
    await setData()
    await setOrders()
  }

  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()
})
const navBarProps = ref({ customClass: 'bg-transparent!' })
onPageScroll(({ scrollTop }: { scrollTop: number }) => {
  console.log(scrollTop)
  navBarProps.value.customClass = scrollTop === 0 ? 'bg-transparent!' : ''
})
</script>

<template>
  <view>
    <NavBarEvo title="我的" transparent dark placeholder></NavBarEvo>
    <template v-if="isAgent">
      <AgentMine></AgentMine>
    </template>
    <template v-if="isMerchant">
      <view class="p-[16px]">
        <div class="aspect-[1.575/1] absolute left-0 right-0 top-0">
          <wd-img width="100%" height="100%" :src="desinTopBg" custom-class="vertical-top"></wd-img>
        </div>
        <div
          @click="toInfoSeting"
          class="bg-white rounded-2xl shadow relative mt-[28px] py-[29px] px-[14px] flex items-center"
        >
          <div>
            <wd-img width="64" height="64" round :src="data?.avatar" />
          </div>
          <div class="ml-[10px]">
            <div class="text-black/90 text-lg font-normal font-['PingFang_SC'] leading-[10.18px]">
              商家：{{ data?.vendorName }}
            </div>
            <div
              class="h-6 px-1.5 py-1 bg-[#f5f6fa] rounded justify-center items-center gap-2.5 inline-flex mt-[17px]"
            >
              <div class="text-[#8b8b8b] text-xs font-normal font-['PingFang_SC'] leading-none">
                ID：{{ data?.id }}
              </div>
            </div>
          </div>
        </div>
        <div class="flex items-center mt-[20px]">
          <div class="w-1 h-[19px] bg-[#2357e9] rounded-md"></div>
          <div class="text-black text-lg font-normal font-['PingFang_SC'] leading-normal ml-[8px]">
            记录
          </div>
        </div>
        <div class="mt-[16px]">
          <PageHelper :request="getOrders" :query="{}">
            <template #default="{ source }">
              <div class="flex flex-col gap-4">
                <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>

                      <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>
                        </div>
                        <div class="ml-[16px]">
                          <div
                            class="text-black text-base font-normal font-['PingFang_SC'] leading-normal"
                          >
                            {{ it.projectName }}
                          </div>
                          <div
                            class="text-left text-black/30 text-sm font-normal font-['PingFang_SC'] leading-normal"
                          >
                            数量x{{ it.orderQuantity }}
                          </div>
                          <div
                            class="text-left text-black/30 text-sm font-normal font-['PingFang_SC'] leading-normal"
                          >
                            {{ it.points }}积分
                          </div>
                        </div>
                      </div>
                    </div>
                  </Card>
                </template>
              </div>
            </template>
          </PageHelper>
        </div>
      </view>
    </template>
  </view>
</template>

<style scoped lang="scss"></style>