150 lines
2.9 KiB
Vue
150 lines
2.9 KiB
Vue
<template>
|
|
<view>
|
|
<view class="u-flex input-box u-row-between" @click="openPopup">
|
|
<template v-if="!modelValue||!modelValue.id">
|
|
<text class="color-999">请选择转桌到</text>
|
|
<up-icon name="arrow-down" color="#999"></up-icon>
|
|
</template>
|
|
<template v-else>
|
|
<text class="color-333">{{modelValue.name}}</text>
|
|
<up-icon name="arrow-down" color="#999"></up-icon>
|
|
</template>
|
|
</view>
|
|
|
|
|
|
<up-popup :show="show" mode="bottom">
|
|
<view class="box bg-fff u-p-30">
|
|
<up-search v-model="query.name" @search="search" @clear="search" @custom="search"></up-search>
|
|
<scroll-view direction="vertical" scroll-y style="max-height: 50vh;">
|
|
<view class="u-m-t-30 list">
|
|
<view class="item" v-for="(item,index) in list" :key="index" :class="{active:selIndex==index}"
|
|
@click="selIndex=index">
|
|
<text> {{item.name}}</text>
|
|
|
|
</view>
|
|
</view>
|
|
<up-loadmore status="nomore"></up-loadmore>
|
|
</scroll-view>
|
|
|
|
|
|
</view>
|
|
<view class="u-flex gap-20 u-p-l-30 u-p-r-30 u-p-b-30">
|
|
<view class="u-flex-1">
|
|
<my-button type="default" @click="close">取消</my-button>
|
|
</view>
|
|
<view class="u-flex-1">
|
|
<my-button @click="confirm">确认</my-button>
|
|
</view>
|
|
|
|
</view>
|
|
</up-popup>
|
|
|
|
</view>
|
|
|
|
</template>
|
|
|
|
<script setup>
|
|
import {
|
|
reactive,
|
|
ref,
|
|
watch,
|
|
onMounted
|
|
} from 'vue';
|
|
import {
|
|
onLoad
|
|
} from '@dcloudio/uni-app'
|
|
|
|
import {
|
|
getShopTable
|
|
} from '@/http/api/table.js'
|
|
|
|
const modelValue = defineModel({
|
|
default:{id:''}
|
|
})
|
|
const list = ref([])
|
|
const show = ref(false)
|
|
const selIndex = ref(-1)
|
|
|
|
function close() {
|
|
show.value = false
|
|
selIndex.value = -1;
|
|
}
|
|
|
|
function confirm() {
|
|
if (selIndex.value < 0) {
|
|
return uni.showToast({
|
|
title: '请选择桌台',
|
|
icon: 'none'
|
|
})
|
|
}
|
|
modelValue.value = list.value[selIndex.value]
|
|
close()
|
|
}
|
|
const query = reactive({
|
|
page: 1,
|
|
size: 999,
|
|
// status: 'idle',
|
|
name: ''
|
|
})
|
|
/**
|
|
* 获取桌台列表
|
|
*/
|
|
async function getTable() {
|
|
let res = await getShopTable(query)
|
|
list.value = res.records
|
|
|
|
}
|
|
|
|
function search() {
|
|
selIndex.value = -1;
|
|
getTable()
|
|
}
|
|
|
|
function openPopup() {
|
|
const index = list.value.findIndex(v => v.id === modelValue.value.id)
|
|
if (index != -1) {
|
|
selIndex.value = index
|
|
}
|
|
show.value = true
|
|
}
|
|
onMounted(() => {
|
|
getTable()
|
|
})
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.input-box {
|
|
padding: 20rpx 20rpx;
|
|
border-radius: 8rpx;
|
|
border: 1px solid #dedede;
|
|
min-width: 300rpx;
|
|
}
|
|
|
|
.box {
|
|
border-radius: 18rpx;
|
|
}
|
|
|
|
.list {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr 1fr 1fr;
|
|
grid-gap: 20rpx;
|
|
|
|
.item {
|
|
margin-bottom: 24rpx;
|
|
padding: 20rpx 40rpx;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
border-radius: 6rpx;
|
|
border: 1px solid #dedede;
|
|
transition: all .3s ease-in-out;
|
|
|
|
&.active {
|
|
border-color: $my-main-color;
|
|
background-color: $my-main-color;
|
|
color: #fff;
|
|
}
|
|
}
|
|
|
|
}
|
|
</style> |