xiaokuaisong-shopapp/uniapp05/pages/product/product.vue

<script setup lang="ts">
import sort from "./sort.vue"
import sort2 from "./sort2.vue"
import sort3 from "./sort3.vue"
import { ref,onMounted,computed,onUnmounted,watch } from 'vue'
import { url } from "inspector";


    const currentIndex = ref(0);
    const tabs = ref([
      { name: '总览' },
      { name: '菜品组操作' },
      { name: '新增菜品' },
    ]);
 
    const switchTab = (index) => {
      currentIndex.value = index;
    };
    const showLeft = ref(null); 

    const showDrawer = () => {
      if (showLeft.value) {
        showLeft.value.open();
      }
    };

    const closeDrawer = () => {
      if (showLeft.value) {
        showLeft.value.close();
      }
    };

</script>

<template>
<scroll-view scroll-y class="preview">
    
        <view class="preview">
          <swiper :circular="true" :autoplay="true" :interval="3000" indicator-dots>
            <swiper-item>
                <image
                  mode="aspectFill"
                  class="image"
                  src="https://ts1.cn.mm.bing.net/th/id/R-C.8f2db93b542db8adf6c850762c1cce4d?rik=erpuvqVy64IJzQ&riu=http%3a%2f%2fimg95.699pic.com%2fphoto%2f50044%2f9286.jpg_wh860.jpg&ehk=dnizwrPBuCaHnaxfih%2fryK7p%2fXZMbmolNORKknXvL%2bI%3d&risl=&pid=ImgRaw&r=0"
                ></image>
            </swiper-item>
            <swiper-item>
                <image
                  mode="aspectFill"
                  class="image"
                  src="https://img95.699pic.com/photo/50127/2949.jpg_wh860.jpg"
                ></image>
            </swiper-item>
            <swiper-item>
                <image
                  mode="aspectFill"
                  class="image"
                  src="https://img95.699pic.com/photo/50070/9636.jpg_wh860.jpg"
                ></image>
            </swiper-item>
          </swiper>
        </view>


      <view class="tab-menu">
        <view class="tab-item"
              v-for="(tab, index) in tabs"
              :key="index"
              :class="{active: currentIndex === index}"
              @click="switchTab(index)">
          {{ tab.name }}
        </view>
      </view>
      <view class="content">
        <block v-if="currentIndex === 0">
             <sort></sort>
        </block>
        <block v-if="currentIndex === 1">
             <sort2></sort2>
        </block>
        <block v-if="currentIndex === 2">
     	    <sort3></sort3>
        </block>
      </view>
  </scroll-view>


 
</template>
<style lang="scss">
	.priceTitle {
		width: 100%;
		height: 50px;
		background-color: #4095e5;
		font-size: 20px;
		color: #fff;
		padding-left: 5px;
		line-height: 50px;
	}
	.tabs {
	  display: flex;
	  justify-content: space-around;
	  line-height: 60rpx;
	  margin: 0 10rpx;
	  background-color: #fff;
	  box-shadow: 0 4rpx 6rpx rgba(240, 240, 240, 0.6);
	  position: relative;
	  z-index: 9;
	
	  .item {
	    flex: 1;
	    text-align: center;
	    padding: 20rpx;
	    font-size: 28rpx;
	    color: #262626;
	  }
	
	  .cursor {
	    position: absolute;
	    left: 0;
	    bottom: 0;
	    width: 18%;
	    height: 6rpx;
	    padding: 0 50rpx;
	    background-color: #4095e5;
	    
	    transition: all 0.4s;
	  }
	}
	.preview image {
		width: 100%;
	}


.toolbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  background-color: #fff;
  height: 150rpx;
  padding: 0 20rpx var(--window-bottom);
  border-top: 1rpx solid #eaeaea;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: content-box;
  .buttons {
    display: flex;
    & > view {
      width: 220rpx;
      text-align: center;
      line-height: 72rpx;
      font-size: 26rpx;
      color: #fff;
      border-radius: 72rpx;
    }
    .addcart {
      background-color: #4095e5;
    }
    .buynow,
    .payment {
      background-color: #4095e5;
      margin-left: 20rpx;
    }
  }
  .icons {
    padding-right: 10rpx;
    display: flex;
    align-items: center;
    flex: 1;
    .icons-button {
      flex: 1;
      text-align: center;
      line-height: 1.4;
      padding: 0;
      margin: 0;
      border-radius: 0;
      font-size: 20rpx;
      color: #333;
      background-color: #fff;
      &::after {
        border: none;
      }
    }
    text {
      display: block;
      font-size: 34rpx;
    }
  }
}
.tab-menu {
  display: flex;
  justify-content: space-around;
  padding: 10px 0;
  background-color: #f5f5f5;
}
.tab-item {
  padding: 10px;
  cursor: pointer;
}
.tab-item.active {
  color: #4095e5;
  font-weight: bold;
}
.container {
  align-items: center;
  padding: 20rpx;
}


</style>