| | |
| | | <template> |
| | | <PageLayoutWithBg class="mineHire-page-wrapper" :title="'服务名'" :need-auth="false"> |
| | | <PageLayout class="serciceDetail-page-wrapper" :title="detail?.name ?? ''" :need-auth="false"> |
| | | <LoadingLayout :loading="isLoading" :error="isError" :loadError="refetch"> |
| | | <ContentScrollView style="background-color: transparent"> serciceDetail </ContentScrollView> |
| | | <InfiniteLoading |
| | | commonMode |
| | | :refetch="refetch" |
| | | :isLoading="isLoading" |
| | | :isError="isError" |
| | | :showMoreText="false" |
| | | scrollViewClassName="common-infinite-scroll-list-no-padding" |
| | | > |
| | | <div class="serciceDetail-top-view"> |
| | | <nut-swiper |
| | | :auto-play="3000" |
| | | v-if="detail?.files?.length > 0" |
| | | class="serciceDetail-swiper" |
| | | > |
| | | <nut-swiper-item |
| | | v-for="(item, index) in detail.files" |
| | | :key="item" |
| | | class="serciceDetail-swiper-item" |
| | | > |
| | | <img |
| | | :src="setOSSLink(item)" |
| | | class="serciceDetail-swiper-item-img" |
| | | draggable="false" |
| | | /> |
| | | </nut-swiper-item> |
| | | </nut-swiper> |
| | | |
| | | <div class="serciceDetail-top-view-title-wrapper"> |
| | | <div class="serciceDetail-price-wrapper"> |
| | | <div class="serciceDetail-price">{{ toThousand(minPrice) }}</div> |
| | | <div class="serciceDetail-price-unit">元起</div> |
| | | </div> |
| | | <div class="serciceDetail-top-view-title">{{ detail?.name ?? '' }}</div> |
| | | </div> |
| | | </div> |
| | | |
| | | <List class="serciceDetail-content-list"> |
| | | <ListItem title="规格" @click="openSkuDialog()"> |
| | | <template #extra> |
| | | <div>共{{ detail.specs?.length }}类</div> |
| | | </template> |
| | | </ListItem> |
| | | </List> |
| | | <ProTabs |
| | | v-model="tab" |
| | | name="serciceDetail-content-tab" |
| | | class="serciceDetail-content-tabs" |
| | | flexTitle |
| | | > |
| | | <ProTabPane :title="`服务详情`" pane-key="1"> |
| | | <RichEditorContent :content="detail?.description ?? ''"></RichEditorContent> |
| | | </ProTabPane> |
| | | <ProTabPane :title="`客户评价`" pane-key="2"> |
| | | <NoData /> |
| | | </ProTabPane> |
| | | <ProTabPane :title="`相关推荐`" pane-key="3"> |
| | | <NoData /> |
| | | </ProTabPane> |
| | | </ProTabs> |
| | | </InfiniteLoading> |
| | | <Sku |
| | | v-model:visible="skuState.visible" |
| | | :sku="skuState.sku" |
| | | v-model:goods="skuState.goods" |
| | | @clickBtnOperate="clickBtnOperate" |
| | | > |
| | | </Sku> |
| | | <PageFooter> |
| | | <PageFooterAction |
| | | :icon="detail.isCollection ? IconAttentionActive : IconAttention" |
| | |
| | | ></PageFooterAction> |
| | | <PageFooterAction |
| | | :icon="IconShare" |
| | | text="分享" |
| | | text="客服" |
| | | :isFlex="false" |
| | | :open-type="'contact'" |
| | | ></PageFooterAction> |
| | | <PageFooterBtn type="primary" @click="openSkuDialog()">预约下单</PageFooterBtn> |
| | | <PageFooterBtn type="primary" @click="pay">预约下单</PageFooterBtn> |
| | | </PageFooter> |
| | | <Sku |
| | | v-model:visible="skuState.visible" |
| | | :sku="skuState.sku" |
| | | v-model:goods="skuState.goods" |
| | | @clickBtnOperate="clickBtnOperate" |
| | | > |
| | | </Sku> |
| | | </LoadingLayout> |
| | | </PageLayoutWithBg> |
| | | </PageLayout> |
| | | </template> |
| | | |
| | | <script setup lang="ts"> |
| | | import { useStandardServiceDetail } from '@12333/hooks'; |
| | | import Taro from '@tarojs/taro'; |
| | | import * as standardOrderServices from '@12333/services/apiV2/standardOrder'; |
| | | import { toThousand, setOSSLink } from '@12333/utils'; |
| | | import { Sku, Goods, SkuItem, SkuUtils } from '@12333/components'; |
| | | import * as standardServiceServices from '@12333/services/apiV2/standardService'; |
| | | import { toThousand, setOSSLink, Message } from '@12333/utils'; |
| | | import { |
| | | Sku, |
| | | Goods, |
| | | SkuItem, |
| | | SkuUtils, |
| | | List, |
| | | ListItem, |
| | | ProTabs, |
| | | ProTabPane, |
| | | } from '@12333/components'; |
| | | import { useAccessLogin } from '@/hooks'; |
| | | import IconShare from '@/assets/flexJob/icon-share.png'; |
| | | import IconAttention from '@/assets/flexJob/icon-attention-lg.png'; |
| | |
| | | const router = Taro.useRouter(); |
| | | const id = router.params?.id ?? ''; |
| | | |
| | | const { isLoading, isError, detail, refetch } = useStandardServiceDetail({ |
| | | const tab = ref('1'); |
| | | |
| | | const { isLoading, isError, detail, refetch, minPrice } = useStandardServiceDetail({ |
| | | id, |
| | | onSuccess(res) { |
| | | skuState.sku = [ |
| | |
| | | list: res.specs.map((item, index) => ({ |
| | | id: item.id, |
| | | name: item.name, |
| | | price: item.price, |
| | | active: index === 0, |
| | | disable: false, |
| | | })), |
| | |
| | | |
| | | // 底部操作按钮触发 |
| | | const clickBtnOperate = (op: { type: string; value: number }) => { |
| | | addStandardOrder(op.value); |
| | | // addStandardOrder(op.value); |
| | | Message.warning('支付系统维护中,请稍后预约'); |
| | | }; |
| | | |
| | | const openSkuDialog = useAccessLogin(() => { |
| | | const openSkuDialog = () => { |
| | | skuState.visible = true; |
| | | }); |
| | | }; |
| | | |
| | | function goAddStandardOrder(specNumber: number) { |
| | | const goAddStandardOrder = useAccessLogin((specNumber: number) => { |
| | | Taro.navigateTo({ |
| | | url: `${RouterPath.addStandardOrder}?specNumber=${specNumber}`, |
| | | }); |
| | | } |
| | | }); |
| | | |
| | | async function addStandardOrder(specNumber: number) { |
| | | try { |
| | |
| | | } catch (error) {} |
| | | } |
| | | |
| | | function handleAttention() {} |
| | | async function handleAttention() { |
| | | try { |
| | | let params: API.CollectionStandardServiceCommand = { |
| | | ids: [id], |
| | | isCollect: !detail.value.isCollection, |
| | | }; |
| | | let res = await standardServiceServices.collectionStandardService(params); |
| | | if (res) { |
| | | refetch({ type: 'inactive' }); |
| | | } |
| | | } catch (error) {} |
| | | } |
| | | </script> |
| | | |
| | | <style lang="scss"> |
| | | @import '@/styles/common.scss'; |
| | | |
| | | .serciceDetail-page-wrapper { |
| | | .serciceDetail-swiper { |
| | | height: 640px; |
| | | |
| | | .serciceDetail-swiper-item-img { |
| | | width: 100%; |
| | | height: 100%; |
| | | object-fit: cover; |
| | | } |
| | | } |
| | | |
| | | .serciceDetail-top-view { |
| | | margin-bottom: 20px; |
| | | background-color: #fff; |
| | | |
| | | .serciceDetail-top-view-title-wrapper { |
| | | padding: 24px boleGetCssVar('size', 'body-padding-h') 32px; |
| | | |
| | | .serciceDetail-price-wrapper { |
| | | display: flex; |
| | | align-items: flex-end; |
| | | margin-bottom: 24px; |
| | | |
| | | .serciceDetail-price { |
| | | font-weight: 600; |
| | | font-size: 48px; |
| | | color: #ff6414; |
| | | line-height: 52px; |
| | | } |
| | | |
| | | .serciceDetail-price-unit { |
| | | font-weight: 400; |
| | | font-size: 28px; |
| | | color: #ff6414; |
| | | line-height: 40px; |
| | | } |
| | | } |
| | | |
| | | .serciceDetail-top-view-title { |
| | | font-weight: 500; |
| | | font-size: 32px; |
| | | color: boleGetCssVar('text-color', 'primary'); |
| | | line-height: 44px; |
| | | } |
| | | } |
| | | } |
| | | |
| | | .serciceDetail-content-list { |
| | | margin-bottom: 20px; |
| | | } |
| | | } |
| | | </style> |