designer-hub/packages/app/src/pages/mine/homepage/consult/index.vue

<route lang="json">
{
  "style": {
    "navigationStyle": "custom"
  }
}
</route>
<script setup lang="ts">
import { getByDictType, getCircles, reserveDesigner } from '../../../../core/libs/requests'
import { useUserStore } from '../../../../store'
import { storeToRefs } from 'pinia'
import { NetImages } from '../../../../core/libs/net-images'
import BottomAppBar from '@/components/bottom-app-bar.vue'
import { useRouter } from '../../../../core/utils/router'
import NavbarEvo from '@/components/navbar-evo.vue'
import { requestToast } from '../../../../core/utils/common'

const router = useRouter()
const userStore = useUserStore()
const { userInfo } = storeToRefs(userStore)
const id = ref()
const tab = ref('2')
const form = ref({ appointmentName: '', appointmentPhone: '' })
const { data: circleTypes, run: getCircleType } = useRequest(() =>
  getByDictType('member_circle_type'),
)
const circlesData = ref({ list: [] })
const setCirclesData = async (circleType) => {
  const { data } = await getCircles({
    circleType,
    stylistId: id.value,
  })
  circlesData.value = data
}
const tabs = ref([
  { label: '案例', value: '2' },
  { label: '动态', value: '1' },
  { label: '视频', value: '0' },
])
const handleTabsChange = async ({ name }: any) => {
  if (['1', '2'].includes(name)) {
    await setCirclesData(name)
  }
}
onMounted(async () => {})
onLoad(async (query: { id: string }) => {
  if (query.id) {
    id.value = query.id
  } else {
    id.value = userInfo.value.userId
  }
  await setCirclesData(tab.value)
  console.log(circleTypes.value)
})
const handleSubmit = async () => {
  const { code } = await requestToast(
    () =>
      reserveDesigner({
        ...form.value,
        stylistId: id.value,
        stylistName: '',
      }),
    { success: false, successTitle: '设计师预约成功' },
  )
  if (code === 0) {
    form.value = { appointmentName: '', appointmentPhone: '' }
    router.replace(`/pages/mine/homepage/consult/success/index?name=${''}`)
  }
}
onShareAppMessage(() => ({ title: `${userInfo.value.nickname}` }))
defineExpose({
  navBarFixed: false,
})
</script>
<template>
  <div class="flex-grow flex flex-col px-3.5">
    <NavbarEvo transparent dark></NavbarEvo>
    <div class="relative aspect-[0.79/1] mx--3.5">
      <div class="absolute top-0 left-0 w-full h-full">
        <wd-img
          width="100%"
          height="100%"
          :src="NetImages.ConsultDefaultBg"
          mode="widthFix"
          custom-class="aspect-[0.71/1]"
        />
      </div>
    </div>
    <div class="flex-grow flex flex-col bg-white rounded-t-2xl relative px-4">
      <div class="mt-13 flex gap-3 border-b-1 border-b-solid border-b-[#e1e1e1] pb-3">
        <div class="px-4 py-0.5 bg-[#2b2725] rounded justify-center items-center gap-2.5 flex">
          <div
            class="text-center text-white text-base font-normal font-['PingFang_SC'] tracking-wide"
          >
            姓名
          </div>
        </div>
        <div class="flex-1 flex items-center">
          <wd-input
            placeholder="请填写您的真实姓名"
            no-border
            v-model="form.appointmentName"
          ></wd-input>
        </div>
      </div>

      <div class="mt-13 flex gap-3 border-b-1 border-b-solid border-b-[#e1e1e1] pb-3">
        <div class="px-4 py-0.5 bg-[#2b2725] rounded justify-center items-center gap-2.5 flex">
          <div
            class="text-center text-white text-base font-normal font-['PingFang_SC'] tracking-wide"
          >
            电话
          </div>
        </div>
        <div class="flex-1 flex items-center">
          <wd-input
            placeholder="请输入您的手机号"
            no-border
            v-model="form.appointmentPhone"
          ></wd-input>
        </div>
      </div>
    </div>
    <BottomAppBar fixed placeholder>
      <div class="flex gap-7.5">
        <div class="flex-1">
          <wd-button block :round="false" @click="handleSubmit">提交预约</wd-button>
        </div>
      </div>
    </BottomAppBar>
  </div>
</template>