uni_cli_dy_verify/src/subpackage/groupon/components/site/table.vue

<script setup>
import { onLoad } from '@dcloudio/uni-app';
import { reactive, ref, computed, nextTick } from 'vue';
import { deepClone } from "@/utils";
import { showNone } from "@/utils/polish";
import { AutoSelect } from "../../js/site_select/autoSelect";
const emits = defineEmits([ 'update:table' ]);
const props = defineProps({
    tableData: { default: [] },
    altitude: { default: 0 }
})

const timeList = computed(_=> {
    let _table = props?.tableData;
    if(!_table?.length)return [];
    let _items = _table?.[0]?.items ?? [], _tempArr;
    _tempArr = _items.reduce((_arr, val)=>_arr.concat(val.time.split('-')), []);
    // 去重前减掉最后一位，去重后再补上
    // 00:00-00:30 && 23:00-00:00 ，这两个时间段去重后少一个节点
    return [...new Set(_tempArr.splice(0, _tempArr.length-2)), _tempArr[_tempArr.length-1]];

})
const scrollViewStyle = computed(_=>`height: ${props?.altitude ?? 0}px;`);

onLoad(() => {
    
});

const itemClick = function(k, i, j){
    if(k.is_valid === false)return showNone('该场次已出售');
    let _tableCopy = deepClone(props?.tableData);
    _tableCopy[i].items[j]._is_selected = !k?._is_selected;
    // 自动勾选连场和起订
    // 获取设置场地列表
    const autoSelect = new AutoSelect({
        items: _tableCopy[i].items ?? [],
        index: j,
        timeUnit: 2,
        bookingHour: 3,
    })
    let [ _handleSelectItems, _noticeList ] = autoSelect.getInfo();

    _tableCopy[i].items = _handleSelectItems;
    // 提示弹窗
    nextTick(_=>autoSelect.showModalList(_noticeList || []));

    emits('update:table', _tableCopy);

}

</script>

<template>
  <scroll-view class="sm-table-data" scroll-x scroll-y :style="scrollViewStyle">
    <view class="std-box">
        <!-- 左侧栏 -->
        <view class="std-left-sticky">
            <view class="sls-item" v-for="(e,i) in timeList" :key="i">
                <view class="si-txt">{{ e || '-' }}</view>
            </view>
        </view>
        <!-- 顶部栏 -->
        <view class="std-top-sticky">
            <view class="sts-item" v-for="(e, i) in tableData" :key="i">{{ e.name || '-' }}</view>
        </view>
        <view class="std-data">
            <view class="sd-column" v-for="(e, i) in tableData" :key="i">
                    <view class="sc-row" v-for="(k, j) in e.items" :key="j">
                        <view 
                            class="sr-item"
                            :class="{
                                green: k._is_selected,
                                sold: k.is_valid === false,
                            }"
                            @click="itemClick(k, i, j)"
                        >
                            <block  v-if="k.is_valid">
                                <view class="sr-price">¥60.00</view>
                                <view class="sr-del" v-if="false">¥60.00</view>
                            </block>
                            <view class="sr-sold" v-else>已售</view>
                        </view>
                    </view>
            </view>
        </view>
    </view>
</scroll-view>
</template>

<style lang="scss" scoped>
    .sm-table-data{
        position: relative;
        background-color: #F2F2F7;
        .std-box{
            width: fit-content;
            padding-bottom: 60upx;
            background-color: #F2F2F7;
        }
        .std-left-sticky{
            position: sticky;
            left: 0;
            float: left;
            z-index: 5;
            height: fit-content;
            background-color: #F2F2F7;
            .sls-item{
                position: relative;
                width: 112upx;
                height: 100upx;
                border-right: 2upx solid #D8D8D8;
                &:first-child{
                    height: 72upx;
                }
                .si-txt{
                    position: absolute;
                    right: 0;
                    bottom: 0;
                    transform: translateY(50%);
                    padding-right: 20upx;
                    width: 100%;
                    text-align: right;
                    @include flcw(24upx, 34upx, #333);
                    @include tHide;
                }
                &:not(:first-child){
                    &::after{
                        content: '';
                        display: block;
                        width: 12upx;
                        height: 2upx;
                        position: absolute;
                        right: 0;
                        bottom: 0;
                        transform: translateY(50%);
                        background-color: #D8D8D8;
                    }
                }
                
            }
            
        }
        .std-top-sticky{
            position: sticky;
            top: 0;
            z-index: 2;
            width: fit-content;
            white-space: nowrap;
            font-size: 0;
            background-color: #fff;
            .sts-item{
                width: 196upx;
                display: inline-block;
                text-align: center;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
                border-bottom: 2upx solid #D8D8D8;
                background-color: #fff;
                @include flcw(24upx, 70upx, #333, 500);
            }
        }
        .std-data{
            white-space: nowrap;
            width: fit-content;
            .sd-column{
                display: inline-block;
                width: 196upx;
                .sc-row{
                    padding: 1px;
                    width: 100%;
                    height: 100upx;
                    .sr-item{
                        width: 100%;
                        height: 100%;
                        border: 1px solid $mColor;
                        border-radius: 10upx;
                        display: flex;
                        flex-direction: column;
                        flex-wrap: wrap;
                        justify-content: center;
                        overflow: hidden;
                        background-color: #fff;
                        >view{
                            flex-shrink: 0;
                            width: 100%;
                            padding: 0 10upx;
                            text-align: center;
                            @include tHide;
                            @include flcw(28upx, 40upx, $mColor);
                        }
                        .sr-sold{
                            color: #9A9A9D;
                        }
                        .sr-del{
                            @include flcw(20upx, 28upx, #9A9A9D);
                        }
                        &.green{
                            background: $mColor;
                            .sr-price{
                                color: #fff;
                            }
                        }
                        &.orange{
                            border-color: #FF873D;
                            .sr-price{
                                color: #FF873D;
                            }
                        }
                        &.gray{
                            border-color: #D7D7DD;
                            color: #9A9A9D;
                            .sr-price{
                                color: #9A9A9D;
                            }
                        }
                        &.sold{
                            border-color: #D7D7DD;
                            background-color: #D7D7DD;
                        }
                    }
                }
            }
        }
    }
</style>