diancan_uni/pages/tables/index.vue

<template>
    <!-- pages/tables/index.wxml -->
    <view class="wrap">
        <view class="list-back">
            <view class="table" @tap="goStore(item)" v-for="(item, index) in list" :key="item.id">
                <view class="name">{{ item.name }}</view>

                <view :class="'status ' + (item.status == 1 ? 'busy' : 'free')">{{ item.status == 1 ? '就餐' : '空闲' }}</view>
            </view>
        </view>
    </view>
</template>

<script>
// pages/tables/index.js
export default {
    data() {
        return {
            list: [
                {
                    id: 1,
                    name: '1号桌',
                    status: '1' // 1 就餐 0 空闲
                },
                {
                    id: 2,
                    name: '2号桌',
                    status: '0' // 1 就餐 0 空闲
                },
                {
                    id: 3,
                    name: '3号桌',
                    status: '1' // 1 就餐 0 空闲
                },
                {
                    id: 3,
                    name: '3号桌',
                    status: '4' // 1 就餐 0 空闲
                }
            ]
        };
    }
    /**
     * 生命周期函数--监听页面加载
     */,
    onLoad(options) {},
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady() {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow() {},
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide() {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload() {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh() {},
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom() {},
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage() {},
    methods: {
        goStore(e) {
            console.log(e);
            var item = e;
            uni.navigateTo({
                url: '/pages/goods/index?' + 'tableId=' + item.id
            });
        }
    }
};
</script>
<style>
/* pages/tables/index.wxss */
.list-back {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}
.list-back .table {
    margin-top: 30rpx;
    width: 45%;
    height: 200rpx;
    background-color: #f3f4f5;
    border-radius: 8rpx;
    display: flex;
    position: relative;
    align-items: center;
    justify-content: center;
}
.table .name {
    font-size: 40rpx;
    color: #333333;
}
.table .status {
    position: absolute;
    top: 0;
    right: 0;
    width: 50rpx;
    height: 50rpx;
    font-size: 20rpx;
    color: white;
    text-align: center;
    line-height: 50rpx;
}
.table .status.free {
    background-color: greenyellow;
}
.table .status.busy {
    background-color: red;
}
</style>