car-wash-front/src/pages/index/index.vue

<template>
  <view class="content">
    <!--    <image class="logo" src="/static/logo.png"/>
        <view class="text-area">
          <text class="title">{{ title }}</text>
        </view>-->
    <view style="width: 100%;" class="swiper-content">
      <uv-swiper
          class="swiper-item-1"
          style="width: 100%"
          :list="state.swiperList"
          previousMargin="30"
          nextMargin="30"
          circular
          :autoplay="true"
          radius="5"
          bgColor="#ffffff">
      </uv-swiper>
    </view>
    <view class="w100">
      <uv-notice-bar mode="closable" speed="50" url="/pages/coupon/index" :text="state.notice"></uv-notice-bar>
    </view>

    <view class="w100 gap"></view>


    <view class="menu-content w100">
      <uv-grid :border="false" :col="4">
        <uv-grid-item v-for="(item,index) in state.menuList" :key="index" @click="handleMenuClick(item)">
          <uv-icon :customStyle="{paddingTop:20+'rpx'}" :name="item.name" :size="22"></uv-icon>
          <text class="grid-text">{{ item.title }}</text>
        </uv-grid-item>
      </uv-grid>
    </view>

    <view class="w100 gap"></view>

    <!--    站点清单  start-->
    <view class="w100 content_station" >
      <WashStation v-for="item in state.stationList" :key="item.id" :item="item"></WashStation>
      <WashStation v-for="item in state.stationList" :key="item.id" :item="item"></WashStation>
      <WashStation v-for="item in state.stationList" :key="item.id" :item="item"></WashStation>
      <WashStation v-for="item in state.stationList" :key="item.id" :item="item"></WashStation>
      <WashStation v-for="item in state.stationList" :key="item.id" :item="item"></WashStation>
      <WashStation v-for="item in state.stationList" :key="item.id" :item="item"></WashStation>
      <WashStation v-for="item in state.stationList" :key="item.id" :item="item"></WashStation>
      <WashStation v-for="item in state.stationList" :key="item.id" :item="item"></WashStation>
      <WashStation v-for="item in state.stationList" :key="item.id" :item="item"></WashStation>
      <WashStation v-for="item in state.stationList" :key="item.id" :item="item"></WashStation>
      <WashStation v-for="item in state.stationList" :key="item.id" :item="item"></WashStation>
      <WashStation v-for="item in state.stationList" :key="item.id" :item="item"></WashStation>
      <WashStation v-for="item in state.stationList" :key="item.id" :item="item"></WashStation>
      <WashStation v-for="item in state.stationList" :key="item.id" :item="item"></WashStation>
      <WashStation v-for="item in state.stationList" :key="item.id" :item="item"></WashStation>
    </view>
    <!--    站点清单  end-->

<!--    <cover-view class="login_bar">
      <login-bar class="w100 text-center"></login-bar>
    </cover-view>-->
<!--    <cover-view class="login_bar" v-show="!isLogin">-->
      <login-bar class="w100 text-center"></login-bar>
<!--    </cover-view>-->
    <tab-bar :index="0" ></tab-bar>
  </view>
</template>

<script setup lang="ts">
import {reactive, ref} from 'vue'
import {onHide, onShow, onLoad} from "@dcloudio/uni-app";
import TabBar from "@/components/tab-bar/index.vue";
import LoginBar from "@/components/login-bar/index.vue";
import WashStation from "@/components/station/index.vue"
import {get, post} from "@/utils/https";
import {calcMapDistance} from "@/utils/common"
import {checkLogin} from "@/utils/auth";

const title = ref('Hello')
const isLogin = ref(false)

const change = () => {
  console.log("change")
}

const initState = () => ({
  swiperList: [
    'https://cdn.uviewui.com/uview/swiper/swiper3.png',
    'https://cdn.uviewui.com/uview/swiper/swiper2.png',
    'https://cdn.uviewui.com/uview/swiper/swiper1.png'
  ],
  menuList: [
    {name: "photo", title: "洗车"},
    {name: "lock", title: "充值"},
    {name: "star", title: "卡券"},
    {name: "red-packet", title: "停车"},
  ],
  qrcodeOption: {
    style: 'round',
    size: 230,
    // 指定二维码前景，一般可在中间放logo
    foregroundImageSrc: 'https://www.uvui.cn/common/logo.png'
  },
  customStyle: {
    'margin-top': '40rpx',
    height: '80rpx',
    width: '80%',
    borderRadius: '40rpx',//圆角
  },
  notice: '中秋佳节，全场8折，快来洗车吧！',
  stationList: [],
  location: {
    latitude: 0,
    longitude: 0,
  }
})

const state = reactive(initState())

onLoad((e: any) => {
  let query = decodeURIComponent(e);
  let scanTime = e.scancode_time;
  console.log(e)
/*  if (query) {
    uni.showToast({
      title: query,
      duration: 5000
    })
  }*/

})

onShow(() => {
  const userData = getApp<any>().globalData.user;
  if (userData&&userData.id) {
    isLogin.value = true;
  }
  console.log("show index>>>>",isLogin.value,state.stationList,state.location)
  let locationData = getApp<any>().globalData.location;
  if(!locationData||!locationData.longitude){

  loadCurrentLocation();
  }else{
    state.location = locationData;
    loadWashStationList();
  }
  uni.$on('loginEvent', function (data) {
    isLogin.value = data.isLogin;
  })

});

onHide(() => {
  Object.assign(state, initState());
})

const handleMenuClick =  (menu:any) => {
   checkLogin().then((res)=>{
     if(menu.title==='洗车'){
       uni.navigateTo({
         url:'/pages-wash/scan/index'
       })
     }else  if(menu.title==='充值'){
       uni.navigateTo({
         url:'/pages-user/wallet/recharge'
       })
     }
   })
}

/**
 * 获取当前的地理位置
 */
const loadCurrentLocation = () => {
  uni.authorize({
    scope: 'scope.userLocation',
    success() {
      uni.getLocation({
        type: 'gcj02', //返回可以用于uni.openLocation的经纬度
        success: res => {
         let location = {
            latitude: res.latitude,
            longitude: res.longitude
          }
          getApp<any>().globalData.location  = location;
         state.location = location
          loadWashStationList();
          console.log("loadCurrentLocation location", res)
        }
      });
    },
    fail(e) {
      loadWashStationList();
      console.log("authorize location fail", e)
    }
  })

}

const loadWashStationList = () => {
  post(`/wash-station/listStation`, {pageSize: 5}).then((res: any) => {
    console.log(res)
    let {list, total} = res;
    list.forEach((station: any) => {
      if (station.location) {
        let stationLocation = JSON.parse(station.location);
        station.distance = calcMapDistance(state.location.latitude,state.location.longitude,stationLocation.stationLat,stationLocation.stationLng);
      }
    })
    state.stationList = list;
  })
}

const handleNavMap = (station:any) => {
  let location = JSON.parse(station.location)
  uni.openLocation({
    latitude: location.stationLat,
    longitude: location.stationLng,
    scale: 18,
    name: station.stationName,
    address: station.address,
  });
}

const handleNavStation = (station: any) => {
  getApp<any>().globalData.pageData = {station}
  uni.navigateTo({
    url: '/pages-wash/station/index?id='+station.id
  })
  console.log(station)
}

</script>

<style scoped lang="scss">
.content {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 8rpx;

}

.logo {
  height: 200rpx;
  width: 200rpx;
  margin: 200rpx auto 50rpx;
}

.menu-content {
  width: 100%;
  padding: 0 20rpx;
  border-radius: 8rpx;
}

.qrcode-content {
  margin-top: 40rpx;
  padding: 0 20rpx;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  align-content: center;
  justify-content: center;
}

.gap {
  width: 100%;
  height: 36rpx;
  background-color: #f5f3f3;
  margin-top: 10rpx;
  margin-bottom: 10rpx;
}

.swiper-content{
  height: 200rpx;
}
.guide-content {
  text-align: center;
}

.loginbar {
  position: fixed;
  bottom: 20rpx;
}

.content_station{
  height: calc(100vh - 600rpx );
  overflow: scroll;
}
</style>