修改
This commit is contained in:
weiwei committed
1 parent
a1f8c2ba0c
commit
a378380d03
4 files changed
+64
-61
No files matched your search
@@ -1,10 +1,10 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive } from "vue"
|
||||
import { onLoad, onShow } from "@dcloudio/uni-app"
|
||||
import { onLoad } from "@dcloudio/uni-app"
|
||||
import { isEmpty, max, min } from "radash"
|
||||
import dayjs from "dayjs"
|
||||
|
||||
import { hooks, router } from "@@/index"
|
||||
import { router } from "@@/index"
|
||||
import { boxesApi } from "@@/api"
|
||||
|
||||
const state = reactive<any>({
|
||||
|
||||
+50
-55
@@ -1,83 +1,78 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive } from "vue";
|
||||
import { onLoad, onShow } from "@dcloudio/uni-app";
|
||||
import { reactive } from "vue"
|
||||
import { onLoad, onShow } from "@dcloudio/uni-app"
|
||||
import { isEmpty } from "radash"
|
||||
|
||||
import { hooks, router } from "@@/index"
|
||||
import { router } from "@@/index"
|
||||
import { boxesApi } from "@@/api"
|
||||
|
||||
import zSwiper from "@zebra-ui/swiper/components/z-swiper/z-swiper.vue"
|
||||
import zSwiperItem from "@zebra-ui/swiper/components/z-swiper-item/z-swiper-item.vue"
|
||||
import { filePath } from "@/sheep/utils/file"
|
||||
|
||||
const data = {
|
||||
|
||||
}
|
||||
const state = reactive<any>({
|
||||
detailId: null,
|
||||
detail: {},
|
||||
detailId: null,
|
||||
detail: {},
|
||||
})
|
||||
|
||||
onLoad((options: any) => {
|
||||
if (!isEmpty(options.id)) {
|
||||
state.detailId = options.id
|
||||
}
|
||||
});
|
||||
if (!isEmpty(options.id)) {
|
||||
state.detailId = options.id
|
||||
}
|
||||
})
|
||||
onShow(() => {
|
||||
getDetail()
|
||||
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 _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 })
|
||||
router.jump("/pages/boxes/apply", { id: state.detail.id })
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
<template>
|
||||
<crud-layout title="" mainIsScroll tabBarType="just-flot-back" bg="/static/page/blue-bg.png">
|
||||
<z-swiper>
|
||||
<z-swiper-item v-for="(v, i) in state.detail.imagesArray" :key="i">
|
||||
<image class="w-100vw" :src="v" mode="widthFix" />
|
||||
</z-swiper-item>
|
||||
</z-swiper>
|
||||
<view class="p-x-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="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>
|
||||
<crud-layout mainIsScroll tabBarType="just-flot-back" bg="/static/page/blue-bg.png">
|
||||
<z-swiper>
|
||||
<z-swiper-item v-for="(v, i) in state.detail.imagesArray" :key="i">
|
||||
<image class="w-100vw" :src="filePath(v)" mode="widthFix" />
|
||||
</z-swiper-item>
|
||||
</z-swiper>
|
||||
<view class="p-x-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="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;
|
||||
}
|
||||
.layout_main > scroll-view {
|
||||
padding: 0 !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
@@ -1,5 +1,5 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive } from "vue"
|
||||
import { ref, reactive, computed } from "vue"
|
||||
import { onLoad, onShow } from "@dcloudio/uni-app"
|
||||
import { isEmpty } from "radash"
|
||||
|
||||
@@ -8,6 +8,7 @@ import { boxesApi } from "@@/api"
|
||||
|
||||
import zTabs from "@@/components/other/z-tabs/z-tabs.vue"
|
||||
import CustomWaterfallsFlow from "@@/components/other/custom-waterfalls-flow/custom-waterfalls-flow.vue"
|
||||
import { filePath } from "@/sheep/utils/file"
|
||||
|
||||
const data = {
|
||||
tabs: [
|
||||
@@ -25,6 +26,13 @@ const state = reactive<any>({
|
||||
},
|
||||
})
|
||||
|
||||
// 重新设置图片路径
|
||||
const boxesList = computed(() => {
|
||||
return pageHook.list.map((item: any) => {
|
||||
return { ...item, images: filePath(item.images) }
|
||||
})
|
||||
})
|
||||
|
||||
const pageRef = ref<any>(null)
|
||||
const pageHook = hooks.usePage(pageRef, boxesApi.page, null, "data.records")
|
||||
const query = (page: number, pagesize: number) => {
|
||||
@@ -61,7 +69,7 @@ const doCard = (v: any) => {
|
||||
height="100%"
|
||||
:fixed="false"
|
||||
v-model="pageHook.list"
|
||||
:default-page-size="5"
|
||||
:default-page-size="999"
|
||||
safe-area-inset-bottom
|
||||
:loading-more-enabled="true"
|
||||
:show-scrollbar="false"
|
||||
@@ -76,7 +84,7 @@ const doCard = (v: any) => {
|
||||
</view>
|
||||
</template>
|
||||
<view class="h-20rpx" />
|
||||
<custom-waterfalls-flow v-model="pageHook.list" imageKey="images" :columnSpace="1" @wapperClick="doCard" @imageClick="doCard">
|
||||
<custom-waterfalls-flow v-model="boxesList" imageKey="images" :columnSpace="1" @wapperClick="doCard" @imageClick="doCard">
|
||||
<template v-slot:default="v">
|
||||
<view class="p-x-15rpx p-t-10rpx p-b-20rpx">
|
||||
<view class="sub-text-28 show-line">{{ v.name }}</view>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive, computed, watch } from "vue"
|
||||
import { ref, reactive, computed } from "vue"
|
||||
import { onLoad, onShow } from "@dcloudio/uni-app"
|
||||
import { isEmpty } from "radash"
|
||||
import dayjs from "dayjs"
|
||||
|
||||
Reference in new issue
Block a user