|
@@ -0,0 +1,154 @@
|
|
|
|
|
+<script setup lang="ts">
|
|
|
|
|
+import { StaticUrl } from '@/config'
|
|
|
|
|
+import router from '@/router'
|
|
|
|
|
+
|
|
|
|
|
+definePage({
|
|
|
|
|
+ name: 'djk-goods',
|
|
|
|
|
+ islogin: false,
|
|
|
|
|
+ style: {
|
|
|
|
|
+ navigationStyle: 'custom',
|
|
|
|
|
+ navigationBarTitleText: '大健康商品详情',
|
|
|
|
|
+ },
|
|
|
|
|
+})
|
|
|
|
|
+const current = ref<number>(0)
|
|
|
|
|
+
|
|
|
|
|
+const isShowTab = ref(false)
|
|
|
|
|
+const goodsId = ref()
|
|
|
|
|
+onLoad((option: any) => {
|
|
|
|
|
+ goodsId.value = option.id
|
|
|
|
|
+ getGoodsDetaile()
|
|
|
|
|
+})
|
|
|
|
|
+
|
|
|
|
|
+const goodsInfo = ref<Api.PmsDjkGoods>()
|
|
|
|
|
+
|
|
|
|
|
+const swiperList = computed(() => {
|
|
|
|
|
+ if (goodsInfo.value) {
|
|
|
|
|
+ return goodsInfo.value.goodsImg?.split(',')
|
|
|
|
|
+ }
|
|
|
|
|
+ return []
|
|
|
|
|
+})
|
|
|
|
|
+const goodsContent = computed(() => {
|
|
|
|
|
+ if (goodsInfo.value?.content) {
|
|
|
|
|
+ return goodsInfo.value.content.replace(
|
|
|
|
|
+ /<img/gi,
|
|
|
|
|
+ '<img style="max-width:100%;height:auto" ',
|
|
|
|
|
+ )
|
|
|
|
|
+ }
|
|
|
|
|
+ return '暂无数据'
|
|
|
|
|
+})
|
|
|
|
|
+
|
|
|
|
|
+async function getGoodsDetaile() {
|
|
|
|
|
+ const res = await Apis.djk.goodsInfo({ data: { goodsId: goodsId.value } })
|
|
|
|
|
+ goodsInfo.value = res.data
|
|
|
|
|
+}
|
|
|
|
|
+function handlePhone() {
|
|
|
|
|
+ uni.makePhoneCall({
|
|
|
|
|
+ phoneNumber: String(goodsInfo.value?.tel),
|
|
|
|
|
+ })
|
|
|
|
|
+}
|
|
|
|
|
+</script>
|
|
|
|
|
+
|
|
|
|
|
+<template>
|
|
|
|
|
+ <view class="page-djk">
|
|
|
|
|
+ <wd-navbar
|
|
|
|
|
+ title="商品详情" :custom-style="`background-color:${isShowTab ? '#FFF !important' : 'transparent !important'}`" :bordered="false" :z-index="99"
|
|
|
|
|
+ safe-area-inset-top left-arrow fixed @click-left="router.back()"
|
|
|
|
|
+ />
|
|
|
|
|
+ <template v-if="goodsInfo">
|
|
|
|
|
+ <wd-swiper v-model:current="current" :list="swiperList" :autoplay="false" :height="375" />
|
|
|
|
|
+ <view class="relative z999 rounded-t-48rpx bg-white px24rpx py28rpx -mt20rpx">
|
|
|
|
|
+ <view class="flex items-end text-#FF4D3A font-semibold">
|
|
|
|
|
+ <view class="text-24rpx">
|
|
|
|
|
+ ¥
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <view class="text-36rpx line-height-[36rpx]">
|
|
|
|
|
+ {{ goodsInfo?.price }}
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <view class="mt20rpx text-32rpx font-semibold">
|
|
|
|
|
+ {{ goodsInfo.goodsName }}
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <view class="mt20rpx">
|
|
|
|
|
+ <text class="text-24rpx text-gray">
|
|
|
|
|
+ 服务保障
|
|
|
|
|
+ </text>
|
|
|
|
|
+ <text class="ml10rpx text-24rpx">
|
|
|
|
|
+ 随时退·过期退
|
|
|
|
|
+ </text>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <view class="mt20rpx flex items-center text-24rpx text-gray">
|
|
|
|
|
+ <image
|
|
|
|
|
+ :src="`${StaticUrl}/djk-goods-erro.png`"
|
|
|
|
|
+ class="mr5rpx h24rpx w24rpx"
|
|
|
|
|
+ /> 使用积分购买的,退款后返回的积分,有效期不变
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <view class="px24rpx">
|
|
|
|
|
+ <view class="mt20rpx rounded-16rpx bg-white p24rpx">
|
|
|
|
|
+ <view class="text-32rpx font-semibold">
|
|
|
|
|
+ 购买须知
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <view class="mt20rpx text-24rpx text-gray">
|
|
|
|
|
+ 有效期
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <view class="mt16rpx text-28rpx">
|
|
|
|
|
+ 购买之日起{{ goodsInfo.effectiveTime }}天有效
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <view class="mt20rpx text-24rpx text-gray">
|
|
|
|
|
+ 预约信息
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <view class="mt16rpx text-28rpx">
|
|
|
|
|
+ 请您提前{{ goodsInfo.advanceBookingTime }}天预定
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <view class="mt20rpx text-24rpx text-gray">
|
|
|
|
|
+ 可用时间
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <view class="mt16rpx text-28rpx">
|
|
|
|
|
+ {{ goodsInfo.useStartTime }} 至 {{ goodsInfo.useEndTime }}
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <view class="mt20rpx text-24rpx text-gray">
|
|
|
|
|
+ 消费流程
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <view class="mt16rpx text-28rpx">
|
|
|
|
|
+ {{ goodsInfo.usageProcess }}
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <view class="mt20rpx text-24rpx text-gray">
|
|
|
|
|
+ 购买人群
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <view class="mt16rpx text-28rpx">
|
|
|
|
|
+ {{ goodsInfo.buyNotice }}
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <view class="mt20rpx rounded-16rpx bg-white">
|
|
|
|
|
+ <view class="p24rpx text-32rpx font-semibold">
|
|
|
|
|
+ 套餐详情
|
|
|
|
|
+ <rich-text :nodes="goodsContent" />
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <view class="h180rpx" />
|
|
|
|
|
+ <view class="ios shadow-fixed fixed bottom-0 left-0 box-border w-full rounded-t-32rpx bg-white pl28rpx pr32rpx">
|
|
|
|
|
+ <view class="flex items-center pt10rpx">
|
|
|
|
|
+ <view class="w80rpx flex flex-col items-center justify-center" @click="handlePhone">
|
|
|
|
|
+ <image
|
|
|
|
|
+ :src="`${StaticUrl}/film-phone.png`"
|
|
|
|
|
+ class="h40rpx w40rpx"
|
|
|
|
|
+ />
|
|
|
|
|
+ <view class="mt20rpx text-28rpx">
|
|
|
|
|
+ 电话
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <view class="ml24rpx flex-1">
|
|
|
|
|
+ <wd-button block class="w-full">
|
|
|
|
|
+ 立即购买
|
|
|
|
|
+ </wd-button>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </template>
|
|
|
|
|
+ </view>
|
|
|
|
|
+</template>
|
|
|
|
|
+
|
|
|
|
|
+<style scoped lang="scss">
|
|
|
|
|
+
|
|
|
|
|
+</style>
|