<template>
|
<PageLayoutWithBg class="mineHire-page-wrapper" :title="'服务名'" :need-auth="false">
|
<LoadingLayout :loading="isLoading" :error="isError" :loadError="refetch">
|
<ContentScrollView style="background-color: transparent"> serciceDetail </ContentScrollView>
|
<PageFooter>
|
<PageFooterAction
|
:icon="detail.isCollection ? IconAttentionActive : IconAttention"
|
text="收藏"
|
:isFlex="false"
|
@click="handleAttention"
|
></PageFooterAction>
|
<PageFooterAction
|
:icon="IconShare"
|
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>
|
</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 { useAccessLogin } from '@/hooks';
|
import IconShare from '@/assets/flexJob/icon-share.png';
|
import IconAttention from '@/assets/flexJob/icon-attention-lg.png';
|
import IconAttentionActive from '@/assets/flexJob/icon-attention-lg-active.png';
|
|
defineOptions({
|
name: 'serciceDetail',
|
});
|
|
const router = Taro.useRouter();
|
const id = router.params?.id ?? '';
|
|
const { isLoading, isError, detail, refetch } = useStandardServiceDetail({
|
id,
|
onSuccess(res) {
|
skuState.sku = [
|
{
|
id: SkuUtils.DefaultSkuSpecId,
|
name: '规格',
|
list: res.specs.map((item, index) => ({
|
id: item.id,
|
name: item.name,
|
active: index === 0,
|
disable: false,
|
})),
|
},
|
];
|
skuState.goods = {
|
skuId: SkuUtils.DefaultSkuSpecId,
|
price: toThousand(res.specs[0].price),
|
imagePath: setOSSLink(res.files[0]),
|
name: res.name,
|
};
|
},
|
});
|
|
const skuState = reactive({
|
visible: false,
|
sku: [] as SkuItem[],
|
goods: {} as Goods,
|
});
|
|
// 底部操作按钮触发
|
const clickBtnOperate = (op: { type: string; value: number }) => {
|
addStandardOrder(op.value);
|
};
|
|
const openSkuDialog = useAccessLogin(() => {
|
skuState.visible = true;
|
});
|
|
function goAddStandardOrder(specNumber: number) {
|
Taro.navigateTo({
|
url: `${RouterPath.addStandardOrder}?specNumber=${specNumber}`,
|
});
|
}
|
|
async function addStandardOrder(specNumber: number) {
|
try {
|
const spec = SkuUtils.getCurrentActiveSpec(skuState.sku);
|
let params: API.AddStandardOrderCommand = {
|
serviceId: detail.value.id,
|
serviceName: detail.value.name,
|
serviceCode: detail.value.code,
|
specId: spec.id,
|
specName: spec.name,
|
specPrice: detail.value.specs.find((x) => x.id === spec.id)?.price ?? 0,
|
specNumber: specNumber,
|
addressId: '3fa85f64-5717-4562-b3fc-2c963f66afa6',
|
name: detail.value.name,
|
contactPhoneNumber: 'string',
|
provinceCode: 'string',
|
provinceContent: 'string',
|
cityCode: 'string',
|
cityContent: 'string',
|
areaCode: 'string',
|
areaContent: 'string',
|
addressName: 'string',
|
addressDetail: 'string',
|
longitude: 0,
|
latitude: 0,
|
beginTime: '2025-12-24T08:25:08.372Z',
|
endTime: '2025-12-24T08:25:08.372Z',
|
supplierEnterpriseId: '3fa85f64-5717-4562-b3fc-2c963f66afa6',
|
enterpriseEmployeeIds: ['3fa85f64-5717-4562-b3fc-2c963f66afa6'],
|
remark: 'string',
|
payAccess: 1,
|
};
|
let res = await standardOrderServices.addStandardOrder(params);
|
} catch (error) {}
|
}
|
|
async function pay() {
|
try {
|
let params: API.PayStandardOrderCommand = {
|
id: '9e919af2-3d33-4eac-f6dc-08de429676b3',
|
};
|
let res = await standardOrderServices.payStandardOrder(params);
|
if (res) {
|
Taro.requestPayment({
|
timeStamp: res.timestamp,
|
nonceStr: res.nonceStr,
|
package: res.package,
|
signType: res.signType as any,
|
paySign: res.paySign,
|
});
|
}
|
} catch (error) {}
|
}
|
|
function handleAttention() {}
|
</script>
|
|
<style lang="scss">
|
@import '@/styles/common.scss';
|
</style>
|
