85 lines
2.2 KiB
Vue
85 lines
2.2 KiB
Vue
<script setup lang="ts">
|
|
import { reactive } from "vue"
|
|
import { onLoad, onShow } from "@dcloudio/uni-app"
|
|
import { isEmpty } from "radash"
|
|
|
|
import { router } from "@@/index"
|
|
import { boxesApi } from "@@/api"
|
|
|
|
import { filePath } from "@/sheep/utils/file"
|
|
|
|
const state = reactive<any>({
|
|
detailId: null,
|
|
detail: {},
|
|
})
|
|
|
|
onLoad((options: any) => {
|
|
if (!isEmpty(options.id)) {
|
|
state.detailId = options.id
|
|
}
|
|
})
|
|
onShow(() => {
|
|
getDetail()
|
|
})
|
|
|
|
const getDetail = async () => {
|
|
const _pa = { id: state.detailId }
|
|
const { data } = await boxesApi.detail(_pa)
|
|
state.detail = data
|
|
state.detail.imagesArray = data.images?.split(",")
|
|
}
|
|
|
|
const doSubmit = () => {
|
|
router.jump("/pages/boxes/apply", { id: state.detail.id })
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<crud-layout mainIsScroll tabBarType="just-flot-back" bg="/static/page/blue-bg.png">
|
|
<swiper
|
|
class="w-100vw h-30vh"
|
|
circular
|
|
:indicator-dots="true"
|
|
indicator-active-color="#0779FD"
|
|
indicator-color="#ffffff"
|
|
:autoplay="true"
|
|
>
|
|
<swiper-item v-for="(v, i) in state.detail?.imagesArray" :key="i">
|
|
<image class="w-full h-full" :src="$fileUrl(filePath(v))" mode="aspectFill" @error="$fileRetry(filePath(v))" />
|
|
</swiper-item>
|
|
</swiper>
|
|
|
|
<view class="p-15rpx">
|
|
<view class="flex-col justify-between card p-y-20rpx p-x-30rpx">
|
|
<view class="flex-row items-center justify-between">
|
|
<view class="flex-row items-center">
|
|
<view class="second-text-46 color-#f63a36!">¥{{ state.detail.price }}</view>
|
|
</view>
|
|
<view class="second-text-26">可容纳{{ state.detail.capacity }}</view>
|
|
</view>
|
|
<view class="flex-col m-t-15rpx">
|
|
<view class="sub-text-32">{{ state.detail.name }}</view>
|
|
</view>
|
|
</view>
|
|
<view class="h-15rpx" />
|
|
<view class="flex-col justify-between card p-y-20rpx p-x-30rpx">
|
|
<view class="prefix_title">详情</view>
|
|
<view class="m-t-15rpx" v-html="$fileHtml(state.detail.description)"></view>
|
|
</view>
|
|
</view>
|
|
<template #main-bottom>
|
|
<view class="bg-#0094ff p-y-20rpx text-center rounded-40rpx m-x-60rpx m-y-30rpx sub-text-30 color-white!" @tap="doSubmit">
|
|
预订
|
|
</view>
|
|
</template>
|
|
</crud-layout>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
:deep() {
|
|
.layout_main > scroll-view {
|
|
padding: 0 !important;
|
|
}
|
|
}
|
|
</style>
|