xiaokuaisong-xiaochengxu/uniapp04/pages/index/index.vue

<script setup lang="ts">
	/* 首页 */
import { onMounted, ref,reactive,computed } from 'vue'
import {recommend} from "../recommend/recommend.vue"

import {apiImageUrl} from '../../API/api'

const meishi=ref('')
const getCategoryList=()=>{
	uni.request({
		url:apiImageUrl+'/api/category/list',
		method:'GET',
		success(res) {
			console.log(res.data.data);
			meishi.value=res.data.data
		},
		fail(err) {
			console.log(err);
			
		}
	})
}
onMounted(()=>{
	getCategoryList()
})

const categorySort = (id) => {
  console.log(id);
  
  const pageRoutes = {
    1: '/pages/food/food',
    2: '/pages/drinks/drinks',
    3: '/pages/fruits/fruits',
    4: '/pages/points/points',
    5: '/pages/more/more'
  };

  if (pageRoutes[id]) {
    uni.navigateTo({
      url: pageRoutes[id]
    });
  } else {
    console.warn('No matching page for id:', id);
  }
};

const systemList = ref([]);
    const lastSystemItem = computed(() => systemList.value[systemList.value.length - 1]);

    const system = () => {
      uni.request({
        url: apiImageUrl + '/api/system/list',
        method: 'POST',
        data: {
          type: 0
        },
        success(res) {
          systemList.value = res.data.data;
          console.log(systemList.value);
        },
        fail() {
          console.log("失败啦");
        }
      });
    };

    onMounted(system);


const activeIndex = ref(0)

const goSearch=()=>{
	uni.navigateTo({
		url:'/pages/goSearch/goSearch'
	})
}


/* 取餐吗 */
const props = defineProps({
	damping: {
		type: Number,
		default: 10
	},
	direction: {
		type: String,
		default: "all"
	},
	position: {
		type: Number,
		default: 4
	}
});

const state = reactive({
	x: 0,
	y: 0,
	x1: 0,
	x2: 0,
	y1: 0,
	y2: 0,
	move: {
		x: 0,
		y: 0
	}
});

onMounted(() => {
	uni.getSystemInfo({
		success: (res) => {
			state.x1 = 0;
			state.x2 = parseInt(res.windowWidth) - 50;
			state.y1 = 0;
			state.y2 = parseInt(res.windowHeight) - 20;
			setTimeout(() => {
				if ([1, 2].includes(props.position)) state.y = parseInt(state.y2 * 0.2);
				if ([3, 4].includes(props.position)) state.y = parseInt(state.y2 * 0.8);
				if ([1, 3].includes(props.position)) state.x = parseInt(state.x1);
				if ([2, 4].includes(props.position)) state.x = parseInt(state.x2);
				state.move.x = state.x;
				state.move.y = state.y;
			}, 1000)
		}
	});
});

function onChange(e) {
	if (e.detail.source === "touch") {
		state.move.x = e.detail.x;
		state.move.y = e.detail.y;
	}
}

function onTap(e) {
	console.log("Tap event");
	// 在这里处理单击事件的逻辑
	// 例如打开链接、执行动作等
	uni.navigateTo({
		url:'/pages/testFive/testFive'
	})
}

function onTouchend() {
	state.x = state.move.x;
	state.y = state.move.y;
	setTimeout(() => {
		if (state.move.x < state.x2 / 2) state.x = state.x1;
		else state.x = state.x2;
		console.log("yuan" + state.x, state.y)
	}, 100);
}

const getloginUser=()=>{
	const user=uni.getStorageSync("userInfo")
	console.log(user);
	if(user==''){
		uni.showToast({
			title:'去登录',
			duration: 2000 
		})
	}
}
onMounted(getloginUser)
</script>
<template>
	<view class="notice">
		<uni-notice-bar show-icon scrollable
			  :text="lastSystemItem.content" />
	</view>
	<scroll-view 
	refresher-enabled 
	scroll-y>
		<view class="navbar">
				
			    <!-- 搜索条 -->
			    <view class="search">
			      <text class="icon-search"  @click="goSearch">
					  搜索店铺
				  </text>
			    </view>
				<navigator url="/pages/messageCenter/messageCenter">
					<uni-icons type="chat-filled" size="30" class="talk"></uni-icons>
				</navigator>
				
			  </view>
			<!--轮播图-->
		<view class="swiperPicture">
		  <swiper :circular="true" :autoplay="true" :interval="3000" indicator-dots >
		    <swiper-item>
		      <navigator class="navigator">
		        <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>
		      </navigator>
		    </swiper-item>
		    <swiper-item>
		      <navigator class="navigator">
		        <image
		          mode="aspectFill"
		          class="image"
		          src="https://img95.699pic.com/photo/50127/2949.jpg_wh860.jpg"
		        ></image>
		      </navigator>
		    </swiper-item>
		    <swiper-item>
		      <navigator class="navigator">
		        <image
		          mode="aspectFill"
		          class="image"
		          src="https://img95.699pic.com/photo/50070/9636.jpg_wh860.jpg"
		        ></image>
		      </navigator>
		    </swiper-item>
		  </swiper>
		</view>
		<!--首页分类-->
		<view class="category">
		    <view
		      class="category-item"
		      :url="item.url"
		      v-for="(item, index) in meishi" 
				:key="index"
				@click="categorySort(item.id)"
		    >
		      <image
		        class="icon"
		        :src="item.image"
		      ></image>
		      <text class="text">{{item.name}}</text>
		    </view>
		  </view>
			<recommend></recommend>
			
			
			<!-- 取餐码 -->
			<view class="content">
				<movable-area class="movableArea">
					<movable-view class="movableView"
						:x="state.x"
						:y="state.y"
						:direction="props.direction"
						:damping="props.damping"
						@change="onChange"
						@tap="onTap"
						@touchend="onTouchend">
						<image src="@/static/Gourmet/meishi_hanbao.png" mode="widthFix" class="iconImage"></image>
					</movable-view>
				</movable-area>
			</view>
	</scroll-view>
</template>

<style lang="scss">

	.navbar {
	  background-color: #4095e5;
	  display: flex;
	  flex-direction: row;
	  padding: 10px;
	  .search {
	    display: flex;
	    align-items: center;
	    padding: 0 10rpx 0 26rpx;
	    height: 0.64rem;
	    color: #fff;
	    font-size: 28rpx;
	    border-radius: 32rpx;
	    background-color: rgba(255, 255, 255, 0.5);
	    width: 70%;
	    margin: 0 auto;
	  }
	  .icon-search {
	    margin-right: 10rpx;
	  }
	  .search-button {
	    margin-left: auto; 
	    height: 0.64rem; 
	    background-color: #fff; 
	    color: #4095e5; 
	    border: none; 
	    border-radius: 32rpx; 
	    padding: 0 20rpx; 
		line-height: 0.64rem;
		font-size: 15px;
		
	  }
	  
	  
	  .transparent-input {
	    background-color: transparent; 
	    border: none;
	    color: #fff; 
	    outline: none; 
	    width: 100%; 
	    padding: 0 10rpx;
	    font-size: 28rpx; 
	  }
	}


  .navigator,
  .image {
    width: 100%;
    height: 100%;
  }

.category {
  margin: 20rpx 0 0;
  padding: 10rpx 0;
  display: flex;
  flex-wrap: wrap;
  min-height: 1.5rem;

  .category-item {
    width: 150rpx;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;

    .icon {
      width: 80rpx;
      height: 80rpx;
	  margin-bottom: 5px;
    }
    .text {
      font-size: 26rpx;
      color: #111;
    }
  }
}

.IPtext {
	font-size: 28rpx;
}
.notice {
	height: 40px;
}
/* 取餐吗 */
.content {
		position: relative;
	}

	.movableArea {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		pointer-events: none;
		z-index: 999;
	}

	.movableView {
		pointer-events: auto;
		width: 60rpx;
		height: 60rpx;
		padding: 10rpx;
		border-radius: 100%;
		border: 2px solid #33A3DC;
		background-color: #eed43e;
	}

	.iconImage {
		display: block;
		width: 60rpx;
		height: 60rpx;
	}

	.contact {
		width: 50px;
		height: 50px;
		overflow: hidden;
		position: absolute;
		left: 0px;
		top: 0px;
		border-radius: 100%;
		opacity: 0;
	}
</style>