上传代码
This commit is contained in:
397
uniapp04/pages/index/index.vue
Normal file
397
uniapp04/pages/index/index.vue
Normal file
@ -0,0 +1,397 @@
|
||||
import uniNoticeBar from '@/uni_modules/uni-notice-bar/components/uni-notice-bar/uni-notice-bar.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
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
const getStaticImage = (categoryId) => {
|
||||
const imageMap = {
|
||||
1: '/static/cartory/1.png', // 注意这里改为 cartory
|
||||
2: '/static/cartory/2.png',
|
||||
3: '/static/cartory/3.png',
|
||||
4: '/static/cartory/4.png',
|
||||
5: '/static/cartory/5.png'
|
||||
}
|
||||
return imageMap[categoryId] || '/static/cartory/1.png'
|
||||
}
|
||||
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="../../static/lun/1.jpg"
|
||||
></image>
|
||||
</navigator>
|
||||
</swiper-item>
|
||||
<swiper-item>
|
||||
<navigator class="navigator">
|
||||
<image
|
||||
mode="aspectFill"
|
||||
class="image"
|
||||
src="../../static/lun/2.jpg"
|
||||
></image>
|
||||
</navigator>
|
||||
</swiper-item>
|
||||
<swiper-item>
|
||||
<navigator class="navigator">
|
||||
<image
|
||||
mode="aspectFill"
|
||||
class="image"
|
||||
src="../../static/lun/3.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="getStaticImage(item.id)"
|
||||
></image>
|
||||
<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>
|
||||
Reference in New Issue
Block a user