|
@@ -8,7 +8,6 @@
|
|
|
class="flex-1 h-full pr-[10px] flex items-center justify-between cursor-pointer overflow-hidden"
|
|
|
>
|
|
|
<div
|
|
|
- @click="handleLeftClick"
|
|
|
class="text-[#999] shrink-0 flex items-center justify-center h-[34px] w-[44px] border border-[#e6e6e6] rounded-[12px]"
|
|
|
>
|
|
|
<el-icon>
|
|
@@ -31,7 +30,6 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
<div
|
|
|
- @click="handleRightClick"
|
|
|
class="text-[#999] shrink-0 flex items-center justify-center h-[34px] w-[44px] border border-[#e6e6e6] rounded-[12px]"
|
|
|
>
|
|
|
<el-icon>
|
|
@@ -75,36 +73,15 @@
|
|
|
<OrderDrawer v-model:show="show" />
|
|
|
</div>
|
|
|
</template>
|
|
|
-<script setup>
|
|
|
+<script lang="ts" setup>
|
|
|
import { ref, onMounted, nextTick } from 'vue'
|
|
|
- import { useStore } from '../../stores'
|
|
|
- import { storeToRefs } from 'pinia'
|
|
|
import { useI18n } from 'vue-i18n'
|
|
|
import { ArrowRight, ArrowLeft } from '@element-plus/icons-vue'
|
|
|
import rightOrder from './components/rightOrder/rightOrder.vue'
|
|
|
import OrderDrawer from './components/order-drawer.vue'
|
|
|
import deskDrawer from './components/desk-drawer.vue'
|
|
|
const { t } = useI18n()
|
|
|
- const store = useStore()
|
|
|
- const { count } = storeToRefs(store)
|
|
|
const scrollRef = ref(null)
|
|
|
- // function handleRightClick() {
|
|
|
- // scrollRef.value.scrollLeft += 100
|
|
|
- // }
|
|
|
-
|
|
|
- // 计算元素宽度
|
|
|
- const calculateItemWidth = () => {
|
|
|
- nextTick(() => {
|
|
|
- const element = scrollRef.value?.children[0]
|
|
|
- if (element) {
|
|
|
- const style = window.getComputedStyle(element)
|
|
|
- itemWidth.value = element.offsetWidth + parseInt(style.marginRight)
|
|
|
- }
|
|
|
- })
|
|
|
- }
|
|
|
- // function handleRightClick() {
|
|
|
- // scrollRef.value.scrollLeft += 100
|
|
|
- // }
|
|
|
|
|
|
const show = ref(false)
|
|
|
|
|
@@ -160,32 +137,11 @@
|
|
|
image: 'https://ai-public.mastergo.com/ai/img_res/210debe79bb22fec1944cab575f2759f.jpg',
|
|
|
},
|
|
|
])
|
|
|
- // 生命周期钩子
|
|
|
- onMounted(() => {
|
|
|
- calculateItemWidth()
|
|
|
- })
|
|
|
-
|
|
|
- // 左按钮点击
|
|
|
- const handleLeftClick = () => {
|
|
|
- if (currentIndex.value <= 0) return
|
|
|
- currentIndex.value--
|
|
|
- scrollToPosition()
|
|
|
- }
|
|
|
-
|
|
|
- // 右按钮点击
|
|
|
- const handleRightClick = () => {
|
|
|
- // 假设products通过props传入
|
|
|
- if (currentIndex.value >= products.value.length - 1) return
|
|
|
- currentIndex.value++
|
|
|
- scrollToPosition()
|
|
|
- }
|
|
|
|
|
|
- // 执行滚动
|
|
|
- const scrollToPosition = () => {
|
|
|
- scrollRef.value?.scrollTo({
|
|
|
- left: itemWidth.value * currentIndex.value,
|
|
|
- behavior: 'smooth',
|
|
|
- })
|
|
|
+ // 挂单桌子
|
|
|
+ const deskShow = ref(false)
|
|
|
+ const catgroyClick = () => {
|
|
|
+ deskShow.value = true
|
|
|
}
|
|
|
</script>
|
|
|
<style scoped>
|