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

<route lang="json5">
{
  layout: 'tabbar',
  style: {
    navigationBarTitleText: '首页',
    navigationBarBackgroundColor: '#fff',
  },
}
</route>

<script lang="ts" setup>
import useRequest from '../../hooks/useRequest'
import dayjs from 'dayjs'
import { getCircles, scanCodeCheckPaper } from '../../core/libs/requests'
import SectionHeading from '@designer-hub/app/src/components/section-heading.vue'
import Card from '@designer-hub/app/src/components/card.vue'
import { merchantPageHeaderBg, scanIcon, bookIcon } from '@designer-hub/assets/src/svgs'
import { useUserStore } from '../../store'
import { storeToRefs } from 'pinia'
import { qrCodeString2Object, requestToast } from '@designer-hub/app/src/core/utils/common'
import { useRouter } from '@designer-hub/app/src/core/utils/router'
import { QrCodeBusinessType } from '../../core/libs/enums'

defineOptions({
  name: 'Home',
})
const router = useRouter()
const userStore = useUserStore()
const { isLogined, userInfo } = storeToRefs(userStore)
// 测试 uni API 自动引入
const { data } = useRequest(async () => ({ code: 0, msg: '', data: {} }) as IResData<any>, {
  initialData: {
    banners: [],
    hots: [
      {
        id: 1,
        title: '日本研学·东京艺术大学游学',
        img: '',
        start: dayjs('2024-07-15').toDate(),
        end: dayjs('2024-08-10').toDate(),
      },
      {
        id: 1,
        title: '日本研学·东京艺术大学游学',
        img: '',
        start: dayjs('2024-07-15').toDate(),
        end: dayjs('2024-08-10').toDate(),
      },
    ],
    dynamics: [
      {
        author: {
          avatar: 'https://via.placeholder.com/35x35',
          nickname: '苏小萌',
          level: '0',
        },
        content: '用心做好设计，为客户创造美好家居环境',
        images: ['https://via.placeholder.com/165x220'],
        tags: ['意大利游学设计班'],
        shares: 0,
        comments: 0,
        likes: 0,
        createdAt: dayjs('2024-07-15').toDate(),
      },
      {
        author: {
          avatar: 'https://via.placeholder.com/35x35',
          nickname: '苏小萌',
          level: '0',
        },
        content: '用心做好设计，为客户创造美好家居环境',
        images: ['https://via.placeholder.com/220x165'],
        tags: ['意大利游学设计班'],
        shares: 0,
        comments: 0,
        likes: 0,
        createdAt: dayjs('2024-07-15').toDate(),
      },
      {
        author: {
          avatar: 'https://via.placeholder.com/35x35',
          nickname: '苏小萌',
          level: '0',
        },
        content: '用心做好设计，为客户创造美好家居环境',
        images: [
          'https://via.placeholder.com/104x104',
          'https://via.placeholder.com/104x204',
          'https://via.placeholder.com/204x104',
        ],
        tags: ['意大利游学设计班'],
        shares: 0,
        comments: 0,
        likes: 0,
        createdAt: dayjs('2024-07-15').toDate(),
      },
    ],
    studyTour: null,
  },
})
const { data: circlesData, run } = useRequest(() => getCircles({}), { initialData: { list: [] } })
const orderAmount = ref()
const pointsAmount = computed(() => orderAmount.value * 10)
console.log(data.value)
const toDesigner = () => {
  uni.navigateTo({ url: '/pages/designer/index' })
}
const handleScanning = async () => {
  console.log('handleScanning')

  const { result } = await uni.scanCode({ scanType: ['qrCode'] })
  const { type, options } = qrCodeString2Object(result)
  if (type !== QrCodeBusinessType.InStoreWriteOff) {
    uni.showToast({ title: '不支持此二维码/条码', icon: 'none', duration: 5000 })
    return
  }
  await requestToast(() => scanCodeCheckPaper({ orderNo: options.no }), {
    success: true,
    successTitle: '验券成功',
  })
}
const handle2Settlement = () => {
  if ((orderAmount.value ?? '') === '') {
    uni.showToast({ title: '请输入金额', icon: 'none', duration: 5000 })
    return
  }
  router.push(
    `/pages/home/merchant/settlement?orderAmount=${orderAmount.value}&pointsAmount=${pointsAmount.value}`,
  )
}
const toAddReporting = () => {
  uni.navigateTo({ url: '/pages/home/merchant/add-reporting-information' })
}
onShow(async () => {})
onLoad(() => {
  console.log(isLogined.value)
  if (!isLogined.value) {
    uni.reLaunch({ url: '/pages/login/index' })
  }
})
onShareAppMessage(() => ({}))
</script>

<template>
  <view class="flex-grow relative">
    <template v-if="userInfo.appLoginType === 1">
      <div class="aspect-[0.96/1] absolute left-0 right-0 top--1">
        <wd-img
          width="100%"
          height="100%"
          :src="merchantPageHeaderBg"
          custom-class="vertical-bottom"
        ></wd-img>
      </div>
      1
      <wd-navbar custom-class="bg-transparent!" safe-area-inset-top :bordered="false">
        <template #left>
          <div
            @click="toAddReporting"
            class="ml-1 text-center text-white text-lg font-normal font-['PingFang_SC'] leading-relaxed"
          >
            今日待办
          </div>
        </template>
      </wd-navbar>
      <div class="flex flex-col gap-8 p-4 relative box-border">
        <div>
          <SectionHeading
            title="渠道任务"
            path="/pages/home/tasks/index"
            end-text="查看全部"
            custom-class="mb-5"
          ></SectionHeading>
          <Card><wd-status-tip image="search" tip="当前暂无未开始/进行中的任务" /></Card>
        </div>
        <div>
          <SectionHeading title="设计师" path="" custom-class="mb-5"></SectionHeading>
          <div class="flex flex-col gap-4">
            <template
              v-for="{ label, color } of [
                { label: '重点跟进设计师', color: '#FF523F' },
                { label: '全部设计师', color: '#7199FF' },
                { label: '本月新增设计师', color: '#FFE786' },
                { label: '超过30天未跟进', color: '#89F4E3' },
                { label: '超过60天未产生积分设计师', color: '#FFBA6A' },
                { label: '超过60天未消耗积分设计师', color: '#C494FF' },
                { label: '未成交过设计师', color: '#FF9EE2' },
              ]"
              :key="label"
            >
              <div
                class="h-12 bg-white rounded-lg shadow flex items-center hover:bg-[#fff6f5]"
                @click="toDesigner"
              >
                <div
                  class="w-1.5 h-12 rounded-tl-lg rounded-bl-lg shadow"
                  :style="{ background: color }"
                ></div>
                <div class="flex-1 mx-3">
                  <SectionHeading
                    :title="label"
                    path="/pages/designer/index"
                    size="sm"
                  ></SectionHeading>
                </div>
              </div>
            </template>
          </div>
        </div>
        <div>
          <SectionHeading title="设计师最新动态" path="" custom-class="mb-5"></SectionHeading>
          <div class="flex flex-col gap-4">
            <template
              v-for="{ title, date } of [
                { title: '苏小萌报名了日本设计游学', date: new Date() },
                { title: '苏小萌报名了骑行活动', date: new Date() },
                { title: '苏小萌获取imola16000积分', date: new Date() },
              ]"
              :key="title"
            >
              <Card>
                <div class="text-black/90 text-sm font-normal font-['PingFang_SC'] leading-none">
                  {{ title }}
                </div>
                <div
                  class="mt-3 text-black/30 text-xs font-normal font-['PingFang_SC'] leading-none"
                >
                  {{ dayjs(date).format('YYYY-MM-DD hh:mm') }}
                </div>
              </Card>
            </template>
          </div>
        </div>
      </div>
    </template>
    <template v-if="userInfo.appLoginType === 2">
      <div
        class="bg-white backdrop-blur-[60px] my-[16px] flex flex-col justify-center items-center p-[16px] mt-[20px]"
      >
        <div
          class="w-[68px] h-[68px] bg-[#2357e9] rounded-full mt-[37px] flex items-center justify-center"
        >
          <wd-img width="36px" height="36px" :src="scanIcon"></wd-img>
        </div>
        <div class="w-full mt-[45px]">
          <wd-button block :round="false" @click="handleScanning">
            <div
              class="text-center text-white text-base font-normal font-['PingFang_SC'] leading-normal"
            >
              扫码验券
            </div>
          </wd-button>
        </div>
      </div>
      <div
        class="bg-white backdrop-blur-[60px] flex flex-col justify-center items-center p-[16px] mt-[20px]"
      >
        <div
          class="w-[68px] h-[68px] bg-[#2357e9] rounded-full mt-[34px] flex items-center justify-center"
        >
          <wd-img width="36px" height="36px" :src="bookIcon"></wd-img>
        </div>
        <div class="w-full flex items-center mt-[40px] gap-5">
          <div
            class="text-black/90 text-base font-normal font-['PingFang_SC'] leading-relaxed w-[96px]"
          >
            输入订单金额
          </div>
          <div class="flex-1 bg-[#f5f7f9] rounded-lg flex items-center p-3.5">
            <wd-input
              custom-class="bg-transparent! flex-1"
              type="number"
              no-border
              placeholder="请输金额"
              v-model="orderAmount"
            />
          </div>
        </div>
        <div class="w-full flex items-center mt-[20px] gap-5">
          <div
            class="text-black/90 text-base font-normal font-['PingFang_SC'] leading-relaxed w-[96px]"
          >
            需支付积分
          </div>
          <div class="text-[#ff2d2d] text-base font-normal font-['PingFang_SC'] leading-relaxed">
            {{ pointsAmount }} 积分
          </div>
        </div>
        <div class="w-full mt-[45px]">
          <wd-button block :round="false" @click="handle2Settlement">
            <div
              class="text-center text-white text-base font-normal font-['PingFang_SC'] leading-normal"
            >
              积分结账
            </div>
          </wd-button>
        </div>
      </div>
    </template>
  </view>
</template>

<style></style>