更新记录

1.0.1（2024-09-10） 下载此版本

  • 更新文档

1.0.0（2024-09-10） 下载此版本

场地选择（简版）

平台兼容性

Vue2 Vue3
√ √
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
HBuilderX 4.24 × √ × × × ×
钉钉小程序 快手小程序 飞书小程序 京东小程序
× × × ×
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari
× × × × × × × × ×

场地选择（简版）jc-venue-reservation

jc-venue-reservation

外层需要设置高度

props

prop type default desc
data Array< DataItem > [] 数据
selectedColor String #f59e0b 已选择颜色
disabledColor String #cbd5e1 不可选颜色
selectableColor String #059669 可选择颜色

emit

name value
change Array< SelectItem >

expose

name args
remove SelectItem 

type DataItem =  {
        range: Array< string >; // 开始-结束时间
        list: Array< ListItem >;
        // ...
}

type ListItem = {
    price: number;
    status: 0 | 1; // 0 未定 1已订(不可预定)
    // ...
}

type SelectItem =  {
    rowIndex: number;
    colIndex: number;
    row: object;
    col: object;
}

jc-venue-reservation-week

props

prop type default desc
color String #7c3aed 选中颜色
bookingDays [Number, String] #f59e0b 预定天数

emit

name value
init CurrentDate, Weeks
change CurrentDate, Weeks
DEMO
<script setup>
    import { ref, onMounted, computed } from 'vue';
    // status: 0 未定 1已订(不可预定)
    const _data = [{
        "range": ["07:00", "08:00"],
        "list": [{ "price": 20, "status": 0 }, { "price": 200, "status": 0 }, { "price": 2000, "status": 0 }, { "price": 20000, "status": 0 }, { "price": 200000, "status": 0 },
            { "price": 20, "status": 0 }, { "price": 20, "status": 0 }
        ]
    }, {
        "range": ["08:00", "09:00"],
        "list": [{ "price": 30, "status": 0 }, { "price": 30, "status": 1 }, { "price": 30, "status": 0 },
            { "price": 30, "status": 0 }, { "price": 30, "status": 0 }, { "price": 30, "status": 0 }, { "price": 30, "status": 0 }
        ]
    }, {
        "range": ["09:00", "10:00"],
        "list": [{ "price": 30, "status": 0 },
            { "price": 30, "status": 1 }, { "price": 30, "status": 0 }, { "price": 30, "status": 0 }, { "price": 30, "status": 0 }, { "price": 30, "status": 0 }, { "price": 30, "status": 0 }
        ]
    }, {
        "range": ["10:00",
            "11:00"
        ],
        "list": [{ "price": 30, "status": 0 }, { "price": 30, "status": 1 }, { "price": 30, "status": 0 }, { "price": 30, "status": 0 }, { "price": 30, "status": 0 }, { "price": 30, "status": 0 },
            { "price": 30, "status": 0 }
        ]
    }, {
        "range": ["11:00", "12:00"],
        "list": [{ "price": 30, "status": 0 }, { "price": 30, "status": 1 }, { "price": 30, "status": 0 }, { "price": 30, "status": 0 },
            { "price": 30, "status": 0 }, { "price": 30, "status": 0 }, { "price": 30, "status": 0 }
        ]
    }, {
        "range": ["12:00", "13:00"],
        "list": [{ "price": 30, "status": 0 }, { "price": 30, "status": 1 },
            { "price": 30, "status": 0 }, { "price": 30, "status": 0 }, { "price": 30, "status": 0 }, { "price": 30, "status": 0 }, { "price": 30, "status": 0 }
        ]
    }, {
        "range": ["13:00", "14:00"],
        "list": [
            { "price": 30, "status": 0 }, { "price": 30, "status": 1 }, { "price": 30, "status": 0 }, { "price": 30, "status": 0 }, { "price": 30, "status": 0 }, { "price": 30, "status": 0 },
            { "price": 30, "status": 0 }
        ]
    }, {
        "range": ["14:00", "15:00"],
        "list": [{ "price": 30, "status": 0 }, { "price": 30, "status": 1 }, { "price": 30, "status": 0 }, { "price": 30, "status": 0 },
            { "price": 30, "status": 0 }, { "price": 30, "status": 0 }, { "price": 30, "status": 0 }
        ]
    }, {
        "range": ["15:00", "16:00"],
        "list": [{ "price": 30, "status": 0 }, { "price": 30, "status": 1 },
            { "price": 30, "status": 0 }, { "price": 30, "status": 0 }, { "price": 30, "status": 0 }, { "price": 30, "status": 0 }, { "price": 30, "status": 0 }
        ]
    }, {
        "range": ["16:00", "17:00"],
        "list": [
            { "price": 30, "status": 0 }, { "price": 30, "status": 0 }, { "price": 30, "status": 0 }, { "price": 30, "status": 0 }, { "price": 30, "status": 0 }, { "price": 30, "status": 0 },
            { "price": 30, "status": 0 }
        ]
    }, {
        "range": ["17:00", "18:00"],
        "list": [{ "price": 30, "status": 0 }, { "price": 30, "status": 0 }, { "price": 30, "status": 1 }, { "price": 30, "status": 0 },
            { "price": 30, "status": 0 }, { "price": 30, "status": 0 }, { "price": 30, "status": 0 }
        ]
    }, {
        "range": ["18:00", "19:00"],
        "list": [{ "price": 50, "status": 0 }, { "price": 50, "status": 0 },
            { "price": 50, "status": 0 }, { "price": 50, "status": 0 }, { "price": 50, "status": 0 }, { "price": 50, "status": 0 }, { "price": 50, "status": 0 }
        ]
    }, {
        "range": ["19:00", "20:00"],
        "list": [
            { "price": 50, "status": 0 }, { "price": 50, "status": 0 }, { "price": 50, "status": 0 }, { "price": 50, "status": 0 }, { "price": 50, "status": 0 }, { "price": 50, "status": 0 },
            { "price": 50, "status": 0 }
        ]
    }, {
        "range": ["20:00", "21:00"],
        "list": [{ "price": 50, "status": 0 }, { "price": 50, "status": 0 }, { "price": 50, "status": 0 }, { "price": 50, "status": 0 },
            { "price": 50, "status": 0 }, { "price": 50, "status": 0 }, { "price": 50, "status": 0 }
        ]
    }, {
        "range": ["21:00", "22:00"],
        "list": [{ "price": 50, "status": 0 }, { "price": 50, "status": 0 },
            { "price": 50, "status": 0 }, { "price": 50, "status": 0 }, { "price": 50, "status": 0 }, { "price": 50, "status": 0 }, { "price": 50, "status": 0 }
        ]
    }, {
        "range": ["22:00", "23:00"],
        "list": [
            { "price": 15, "status": 0 }, { "price": 15, "status": 0 }, { "price": 15, "status": 0 }, { "price": 15, "status": 0 }, { "price": 15, "status": 0 }, { "price": 15, "status": 0 },
            { "price": 15, "status": 0 }
        ]
    }, {
        "range": ["23:00", "24:00"],
        "list": [{ "price": 15, "status": 0 }, { "price": 15, "status": 0 }, { "price": 15, "status": 0 }, { "price": 15, "status": 0 },
            { "price": 15, "status": 0 }, { "price": 15, "status": 0 }, { "price": 15, "status": 0 }
        ]
    }]

    const venueReservationRef = ref(null)
    const data = ref(_data)
    const selectedItems = ref([])
    const totalPrice = computed(() => selectedItems.value.reduce((_, cur) => (_ += Number(cur.col.price)), 0))

    function onWeekChange(d, weeks) {
        // console.log('onWeekChange', d, weeks);
        // setTimeout(() => {
        //  data.value = _data
        // }, 2000)
    }

    function onVenueChange(venues) {
        selectedItems.value = venues.value
    }

    function del(d) {
        venueReservationRef.value.remove(d)
    }
</script>

<template>
    <view style="height:100vh; display: flex; flex-direction: column;">
        <view style="padding: 20rpx 20rpx 0 20rpx;">
            <jc-venue-reservation-week color="#8b5cf6" :bookingDays="6" @change="onWeekChange" @init="onWeekChange" />
        </view>

        <view style="flex: 1; padding: 20rpx; height: 0;">
            <jc-venue-reservation selectedColor="#f97316" :data="data" @change="onVenueChange" ref="venueReservationRef" />
        </view>

        <view style="box-shadow: 0 -1rpx rgba(0,0,0,.1); position: relative; z-index: 10;">
            <view class="selectedItems" v-if="selectedItems.length">
                <view class="selectedItems-item" v-for="d, i in selectedItems" :key="i" @click="del(d, i)">
                    <view>
                        <text style="font-weight: 500;">{{d.colIndex + 1}}号场 </text>
                        <text style="color: red;">¥ {{d.col.price}}</text>
                    </view>
                    <view style="text-align: center; color: gray; font-size: 24rpx;">{{d.row.range[0]}}-{{d.row.range[1]}}</view>
                </view>
            </view>

            <view style="display: flex; align-items: center; padding: 10rpx;">
                <text style="color: gray; font-size: 24rpx;">合计：</text>
                <text style="color: red; font-size: 32rpx; font-weight: 500;"> ¥ {{totalPrice}}</text>
            </view>
        </view>
    </view>
</template>

<style lang="scss" scoped>
    .selectedItems {
        background: white;
        padding: 10rpx;
        display: flex;
        flex-wrap: nowrap;
        gap: 20rpx;
        padding: 10rpx;
        overflow-x: auto;
        font-size: 24rpx;

        &-item {
            padding: 10rpx;
            border: 1rpx solid green;
            border-radius: 8rpx;
            flex-shrink: 0;
        }
    }
</style>

隐私、权限声明

1. 本插件需要申请的系统权限列表：

无

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明：

插件不采集任何数据

3. 本插件是否包含广告，如包含需详细说明广告表达方式、展示频率：

无

许可协议

MIT协议
评论列表 撰写评论 向官方投诉
加载更多...
插件问答 我要提问

使用中有什么不明白的地方，就向插件作者提问吧~ 我要提问

加载更多...