first
This commit is contained in:
297
pagesCreateOrder/choose-table/choose-table.vue
Normal file
297
pagesCreateOrder/choose-table/choose-table.vue
Normal file
@@ -0,0 +1,297 @@
|
||||
<template>
|
||||
<view class="page-gray">
|
||||
<view class="bg-fff">
|
||||
<view class="search bg-fff u-flex u-col-center ">
|
||||
<view class="u-flex-1">
|
||||
<uni-search-bar bgColor="#F9F9F9" cancelButton="none" placeholder="输入桌号" @confirm="search"
|
||||
v-model="searchValue">
|
||||
</uni-search-bar>
|
||||
</view>
|
||||
<!-- <view class="u-flex">
|
||||
<image src="/pagesCreateOrder/static/images/icon-saoma.svg" class="icon-saoma" mode=""></image>
|
||||
</view> -->
|
||||
</view>
|
||||
<view>
|
||||
<picker @change="areaChange" range-key="name" :value="area.defaultCateIndex" :range="area.list">
|
||||
<view class="u-flex u-row-between area">
|
||||
<view class="color-333">桌台类型：<text v-if="area.sel">{{area.sel.name}}</text> <text
|
||||
v-else>全部</text> </view>
|
||||
<uni-icons type="right"></uni-icons>
|
||||
</view>
|
||||
</picker>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="list ">
|
||||
<view class="">
|
||||
<template v-if="tables.list.length">
|
||||
<view class=" bg-fff box bg-fff">
|
||||
<view class="u-flex item u-row-between" v-for="(item,index) in tables.list" :key="index"
|
||||
@tap="chooseTable(index,item)">
|
||||
<view class="u-flex">
|
||||
<view class="">
|
||||
<view class="u-flex">
|
||||
<view>{{item.name}}</view>
|
||||
<view class="line"></view>
|
||||
<view>{{''}}</view>
|
||||
</view>
|
||||
<view class="color-999 u-font-24 u-m-t-12">
|
||||
<text
|
||||
:style="{color:returnStutasColor(item.status)}">{{returnStutasText(item.status)}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="my-radio u-font-28 u-flex color-333">
|
||||
<view class="circle u-flex u-row-center" :class="{active:index==tables.selIndex}">
|
||||
<uni-icons type="checkmarkempty" :size="16" color="#fff"></uni-icons>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-m-t-32">
|
||||
<my-pagination :page="query.page" :totalElements="query.totalElements" :size="query.size"
|
||||
@change="pageChange"></my-pagination>
|
||||
</view>
|
||||
|
||||
</template>
|
||||
|
||||
|
||||
<template v-if="tables.list.length<=0">
|
||||
<my-img-empty tips="未找到相关的桌台"></my-img-empty>
|
||||
</template>
|
||||
</view>
|
||||
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {
|
||||
$table,
|
||||
$tableArea
|
||||
} from '@/http/yskApi/table.js'
|
||||
import {
|
||||
reactive,
|
||||
ref,
|
||||
watch
|
||||
} from 'vue';
|
||||
import {
|
||||
$status
|
||||
} from '@/commons/table-status.js'
|
||||
import {
|
||||
onLoad
|
||||
} from '@dcloudio/uni-app'
|
||||
let nouser = ref(false)
|
||||
|
||||
function returnStutasText(key) {
|
||||
const item = $status[key]
|
||||
return item ? item.label : ''
|
||||
}
|
||||
|
||||
function returnStutasColor(key) {
|
||||
// if(key=='using'){
|
||||
// return 'rgb(250,85,85)'
|
||||
// }else{
|
||||
// return ''
|
||||
// }
|
||||
const item = $status[key]
|
||||
return item ? item.type : ''
|
||||
}
|
||||
|
||||
function emitChooeTable(data) {
|
||||
uni.$emit('choose-table', data)
|
||||
setTimeout(() => {
|
||||
uni.navigateBack()
|
||||
}, 100)
|
||||
}
|
||||
let searchValue = ref('')
|
||||
|
||||
function search() {
|
||||
query.page=1
|
||||
getTable()
|
||||
}
|
||||
|
||||
function chooseTable(index, item) {
|
||||
if (item.status == 'closed') {
|
||||
return uni.showToast({
|
||||
title: '该桌台已关闭！',
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
if (index === undefined || item === undefined) {
|
||||
nouser.value = true
|
||||
return emitChooeTable()
|
||||
} else {
|
||||
tables.selIndex = index
|
||||
emitChooeTable(item)
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
//分类
|
||||
const area = reactive({
|
||||
list: [{
|
||||
name: '全部'
|
||||
}],
|
||||
defaultCateIndex: 0,
|
||||
sel: ''
|
||||
})
|
||||
|
||||
function areaChange(e) {
|
||||
area.defaultCateIndex = e.detail.value
|
||||
area.sel = area.list[e.detail.value]
|
||||
query.page=1
|
||||
getTable()
|
||||
}
|
||||
const query = {
|
||||
page: 1,
|
||||
size: 10,
|
||||
areaId: 0,
|
||||
totalElements:0
|
||||
}
|
||||
// 页数改变事件
|
||||
function pageChange(page) {
|
||||
console.log(page);
|
||||
query.page = page
|
||||
getTable()
|
||||
}
|
||||
const tables = reactive({
|
||||
hasAjax: false,
|
||||
selIndex: -1,
|
||||
originList: [],
|
||||
list: []
|
||||
})
|
||||
async function getTable() {
|
||||
// let state=status.list[status.active].key
|
||||
// state=state?(state=='all'?'':state):''
|
||||
const areaId=area.list[area.defaultCateIndex].id||''
|
||||
let {
|
||||
content,total
|
||||
} = await $table.get({...query,areaId,name:searchValue.value,state:'idle'})
|
||||
query.totalElements=total||0;
|
||||
tables.hasAjax = true;
|
||||
console.log(content);
|
||||
tables.list = content
|
||||
tables.selIndex = content.findIndex(v => v.tableId == option.tableId)
|
||||
tables.originList = content
|
||||
}
|
||||
async function getArea() {
|
||||
const {
|
||||
content
|
||||
} = await $tableArea.get({
|
||||
page: 0,
|
||||
size: 300
|
||||
})
|
||||
content.unshift({
|
||||
name: '全部'
|
||||
})
|
||||
area.list = content.map(v => {
|
||||
return {
|
||||
...v,
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
watch(() => area.sel, (newval) => {
|
||||
getTable()
|
||||
})
|
||||
let option = {}
|
||||
onLoad(opt => {
|
||||
Object.assign(option, opt)
|
||||
console.log(option);
|
||||
getTable()
|
||||
getArea()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.line {
|
||||
width: 1px;
|
||||
height: 20rpx;
|
||||
background-color: #E5E5E5;
|
||||
margin-left: 8rpx;
|
||||
margin-right: 16rpx;
|
||||
}
|
||||
|
||||
.my-radio {
|
||||
|
||||
.circle {
|
||||
background: #FFFFFF;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
|
||||
&.active {
|
||||
background-color: $my-main-color;
|
||||
border-color: $my-main-color;
|
||||
}
|
||||
|
||||
border: 1px solid #707070;
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
|
||||
&.square {
|
||||
border-radius: 8rpx;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.area {
|
||||
padding: 2px 28rpx 24rpx 28rpx;
|
||||
}
|
||||
|
||||
.scale7 {
|
||||
transform: scale(0.7);
|
||||
}
|
||||
|
||||
::v-deep .uni-searchbar {
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
.search {
|
||||
padding: 20rpx 28rpx 20rpx 28rpx;
|
||||
|
||||
.icon-saoma {
|
||||
margin-left: 20rpx;
|
||||
width: 34rpx;
|
||||
height: 32rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.list {
|
||||
padding: 32rpx 24rpx;
|
||||
|
||||
.no-choose {
|
||||
padding: 36rpx 30rpx 36rpx 24rpx;
|
||||
}
|
||||
|
||||
.box {
|
||||
padding: 32rpx 30rpx 32rpx 24rpx;
|
||||
|
||||
.item {
|
||||
padding: 24rpx 0;
|
||||
|
||||
.headimg {
|
||||
border-radius: 12rpx 12rpx 12rpx 12rpx;
|
||||
overflow: hidden;
|
||||
font-size: 0;
|
||||
width: 84rpx;
|
||||
height: 84rpx;
|
||||
|
||||
.img {
|
||||
width: 84rpx;
|
||||
height: 84rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.item:not(:first-child) {
|
||||
border-top: 1px solid #E5E5E5;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user