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

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

const activeIndex = ref(0)

const meishi = [
  { type: 1, url:'/pages/food/food',title:'第一餐厅', imgUrl: '../../static/Gourmet/meishi_hanbao.png' },
  { type: 2, url:'/pages/drinks/drinks',title:'第二餐厅', imgUrl: '../../static/Gourmet/meishi.png' },
  { type: 3, url:'/pages/fruits/fruits',title:'第三餐厅', imgUrl: '../../static/Gourmet/meishi_caomei.png' },
  { type: 9, url:'/pages/points/points',title:'第四餐厅',imgUrl: '../../static/Gourmet/meishi_tusi.png' },
  { type: 10,url:'/pages/more/more',title:'第五餐厅', imgUrl: '../../static/Gourmet/meishi-bangbangtang.png' },
]
const trueCity=ref(null)
const chooseCity = () => {
  my.chooseCity({
    showLocatedCity: true,
    showHotCities: true,
    success: (res) => {
      my.alert({
        content: `您选择的城市: ${res.city} 纬度：${res.latitude} 经度：${res.longitude} 行政区划代码：${res.adCode}`
      });
	  trueCity.value=res.city
	  console.log(trueCity)
    },
  });
};

const setLocatedCity = () => {
  const chooseCityTask = my.chooseCity({
    showLocatedCity: true,
    showHotCities: true,
    setLocatedCity: true,
    success: (res) => {
      my.alert({ title: `chooseCity: ${JSON.stringify(res)}` });
    },
    fail: (error) => {
      my.alert({ content: `选择失败: ${JSON.stringify(error)}` });
    },
    complete: () => {
      my.showToast({ content: 'complete回调' });
    },
  });

  const onLocatedCompleteCallback = (locatedCompleteRes) => {
    const { longitude, latitude } = locatedCompleteRes;
    chooseCityTask.setLocatedCity({
      locatedCityName: 'new cityname',
      success() {
        console.log('修改成功');
      },
      fail() {
        console.log('修改失败');
      },
      complete() {
        chooseCityTask.offLocatedComplete(onLocatedCompleteCallback);
      }
    });
  };
  chooseCityTask.onLocatedComplete(onLocatedCompleteCallback);
};
</script>
<template>
	<view class="notice">
		<uni-notice-bar show-icon scrollable
			  text="“粒粒皆辛苦，盘盘见真情；珍惜粮食，从我做起，让节约成为最美的餐桌风景。”" />
	</view>
 
	<scroll-view 
	refresher-enabled 
	scroll-y>
		<view class="navbar">
				<view @click="chooseCity" class="IPLeft">
					<text class="IPtext">{{trueCity}}</text>
				<uni-icons type="location" size="25" class="list"></uni-icons>
				</view>
			    <!-- 搜索条 -->
			    <view class="search">
			      <text class="icon-search">搜索商品</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 url="/pages/index/index" 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 url="/pages/index/index" 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 url="/pages/index/index" 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">
		    <navigator
		      class="category-item"
		      :url="item.url"
		      v-for="(item, index) in meishi" 
				:key="index"
		    >
		      <image
		        class="icon"
		        :src="item.imgUrl"
		      ></image>
		      <text class="text">{{item.title}}</text>
		    </navigator>
		  </view>
			<recommend></recommend>
	</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;
	  }
	}


  .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: 100rpx;
      height: 100rpx;
    }
    .text {
      font-size: 26rpx;
      color: #666;
    }
  }
}

.IPtext {
	font-size: 28rpx;
}
.notice {
	height: 40px;
}
</style>