parking_h5/pages/index/index.vue

<template>
  <view>
		<!-- ===================================== 搜索栏 ===================================== -->
    <view class="header-bar">
      <view class="city" @click="handleCitySelect">
        <view class="city-name">{{ city }}</view>
        <u-icon name="arrow-down" color="#fff" size="32"></u-icon>
      </view>
			<u-search
				placeholder="搜索停车点"
				:show-action="false"
				@search="handleSearch"
				v-model="keyword"
			></u-search>
      <!-- <u-icon class="scan" name="scan" color="#fff" size="48" @click="$refs.uToast.show({title: '建设中'})"></u-icon> -->
    </view>
	
		<!-- ===================================== 轮播图 ===================================== -->
    <u-swiper
			:list="bannerList"
			border-radius="0"
			mode="none"
			@click="swiperClick"
		></u-swiper>
	
		<!-- ===================================== 城市选择器 ===================================== -->
    <u-city-select
			v-model="cityOpen"
			@city-change="cityChange"
			:areaCode='["52", "5201"]'
		></u-city-select>
	
		<!-- ===================================== 滚动信息栏 ===================================== -->
    <view
      class="notice-bar-wrap u-flex"
      v-if="noticeList.length >= 1"
      @click="openPage('pages/message/message', true)"
    >
      <u-icon custom-prefix="custom-icon" size="50" name="xiaoxi" color="#008CFF"></u-icon>
      <u-notice-bar
        class="u-flex-1"
        mode="vertical"
        :autoplay="true"
        :list="noticeList"
        :volume-icon="false"
        bg-color="#fff"
        color="#727272"
        :more-icon="true"
      ></u-notice-bar>
    </view>
	
		<!-- ===================================== 宫格菜单 ===================================== -->
    <u-card
      :show-head="false"
      :show-foot="false"
      border-radius="16"
      margin="20rpx 40rpx"
      padding="30"
    >
      <view class="content-nav" slot="body">
				<view
					class="content-nav-item"
					v-for="(grid, index) in gridList"
					:key="'g-' + index"
					@click="openPage(grid.url, true)"
				>
					<view class="content-nav-item-icon-wrap">
					  <u-image
					    :src="grid.imageUrl"
					    :width="grid.width || '95rpx'"
					    :height="grid.height || '95rpx'"
					    :mode="grid.mode || 'heightFix'"
					  ></u-image>
					</view>
					<view class="content-nav-item-icon-text">{{grid.title}}</view>
				</view>
      </view>
    </u-card>

		<!-- ===================================== 无停车信息 ===================================== -->
    <view class="empty-data-box" v-if="!orderList || orderList.length < 1">
      <u-empty text="暂无停车信息" mode="list"></u-empty>
    </view>
	
		<!-- ===================================== 停车列表 ===================================== -->
    <template v-for="(item, index) in orderList">
      <u-card
        :show-foot="false"
        border-radius="16"
        margin="20rpx 40rpx"
        padding="30">
        <view class="pending-order-head" slot="head">
          <view class="pending-order-head-left">
            <b>P</b>
            {{ item.roadName }}
          </view>
          <view class="pending-order-head-right" @click="  onRoadInfo(item)">
            <u-icon class="arrow-down" name="arrow-down" size="32" color="#aaa"></u-icon>
          </view>
        </view>
        <view class="pending-order-body" slot="body">
          <view class="pending-order-body-nav">
            <view
              class="nav-item nav-manual"
              @click="orderNavclick()"
              :class="{ active: orderNav == 0 }"
            >手动缴费</view>
            <view
              class="nav-item nav-auto"
              @click="orderNavclick()"
              :class="{ active: orderNav == 1 }"
            >无感支付</view>
          </view>
          <view class="pending-order-body-wrap" v-show="orderNav == 0">
            <view class="pending-order-body-left">
              <view class="car-number">{{ item.vehicleNo }}</view>
              <view class="item-cell">
                <span class="pending-order-body-left-label">入场时间：</span>
                <span>{{ item.inTime }}</span>
              </view>
              <view class="item-cell">
                <span class="pending-order-body-left-label">预计出场时间：</span>
                <span>{{item.outTime}}</span>
              </view>
              <view class="item-cell">
                <span class="pending-order-body-left-label">预计金额：</span>
                <span>{{ item.payAmount }}</span>
              </view>
              <!-- <view class="item-cell">
                <span class="pending-order-body-left-label">出场时间:</span>
                <span>{{item.outTime||'停放中'}}</span>
              </view>
              <view class="item-cell">
                <span class="pending-order-body-left-label">停留时间:</span>
                <span>{{item.duration||'停放中'}}</span>
              </view>
              <view class="item-cell cost">
                <span class="pending-order-body-left-label">停车费用:</span>
                <span>
                  <span class="number" v-if="item.payAmount">￥{{item.payAmount}}</span>
                  <span class="number" v-else>停放中</span>
                </span>
              </view>-->
            </view>
            <view class="pending-order-body-right">
              <view class="order">停车泊位:{{ item.spaceName }}</view>
            </view>
            <view class="go-pay-wrap">
              <view class="go-pay" @click="goPay(item.id)">出场缴费</view>
            </view>
          </view>
          <view class="pending-order-body-wrap" v-show="orderNav == 1">
            <view v-if="contractStatus == 0" class="nosign">
              <view class="nosign1">您的车牌未签约贵州银行无感支付</view>
              <view class="nosign2">请下载贵州银行手机银行app进行签约</view>
            </view>
            <view v-if="contractStatus == 1" class="sign">
              <view class="sign1">您已签约贵州银行无感支付</view>
              <view class="sign2">停车出场时将默认使用无感支付进行支付</view>
            </view>
          </view>
        </view>
      </u-card>
    </template>
	
		<!-- ===================================== 优惠活动 ===================================== -->
    <view class="promotion-box">
      <view class="promotion-title">
        <text>优惠活动</text>
      </view>
      <view class="promotion-banner">
        <u-swiper :list="promotionBannerList" @click="promotionBannerClick" height="221"></u-swiper>
      </view>
    </view>

		<!-- ===================================== 绑定车牌号弹框 ===================================== -->
    <u-modal
      v-model="bindCarShow"
      title="绑定车牌号"
      :show-cancel-button="true"
      confirm-text="去绑定"
      content="首次使用请先绑定您的车牌"
      @confirm="$u.route({ url: 'pages/myCars/myCars' })"
    ></u-modal>

		<!-- ===================================== 停车场信息弹框 ===================================== -->
    <u-popup
      class="popup-order-details"
      v-model="showOrderDetails"
      mode="center"
      width="90%"
      border-radius="20"
    >
      <view class="popup-order-details-til">停车场信息</view>
      <view class="popup-order-details-con">
        <dl>
          <dt>路段名称：</dt>
          <dd>{{ popupOrderDetails.roadName }}</dd>
        </dl>
        <dl>
          <dt>路段编码：</dt>
          <dd>{{ popupOrderDetails.roadNo }}</dd>
        </dl>
        <dl>
          <dt>联系人：</dt>
          <dd>{{ popupOrderDetails.manager }}</dd>
        </dl>
        <dl>
          <dt>联系电话：</dt>
          <dd @click="phoneCall(popupOrderDetails.telephone)">{{ popupOrderDetails.telephone }}</dd>
        </dl>
      </view>
      <view class="popup-order-details-footer" @click="closeOrderDetails">知道了</view>
    </u-popup>
    
		<!-- ===================================== 支付方式弹框 ===================================== -->
    <PaymentMethod
      :payWayPop="payWayPop"
      :curOrderList="curOrderList"
      :jumpUrl="jumpUrl"
      @closePaymentMethod="closePaymentMethod"
    ></PaymentMethod>
    <u-toast ref="uToast" />
  </view>
</template>

<script>
import getUrlParams from '../../utils/getUrlParams.js'
import PaymentMethod from '@/pages/paymentMethod/paymentMethod.vue'
export default {
  components: {
    PaymentMethod
  },
  data () {
    return {
			// 城市选择框
			cityOpen: false,
			// 选中城市
      city: '贵州省',
			// 搜索框值
      keyword: '',
			// 轮播图
      bannerList: [
        {
          image: require('@/static/img/index-banner01.png')
        }
      ],
			// 订单列表
      orderList: [],
			// 微信code
      code: null,
			// 手动,无感
      orderNav: '',
			// 绑定车询问弹窗
      bindCarShow: false,
			// 是否线上订单细节
      showOrderDetails: false,
			// 订单详情
      popupOrderDetails: [],
			// 消息列表
      noticeList: [],
      // 优惠活动广告图
      promotionBannerList: [
        {
          id: 1,
          image: '/static/img/promotion-banner-1.png',
          title: '1分钱停车'
        },
        {
          id: 2,
          image: '/static/img/promotion-banner-2.png',
          title: '八折停车'
        }
      ],
			// 签约状态
      contractStatus: '',
      vehicleId: '',
      recordList: [],
      // 支付方式弹框
      payWayPop: false,
      // 订单号
      curOrderList: [],
			// 当前位置经纬度
      latLongItude: {},
			// 跳转地址
      jumpUrl: '',
			// 宫格菜单列表
			gridList: [
				{
					url: 'pages/payLists/payLists',
					imageUrl: '../../static/img/index-content-nav-01.png',
					title: '停车缴费'
				},
				{
					url: 'pages/favourableActivity/favourableActivity',
					imageUrl: '../../static/img/index-content-nav-02.png',
					title: '优惠活动'
				},
				{
					url: 'pages/myCars/myCars',
					imageUrl: '../../static/img/index-content-nav-03.png',
					title: '车辆管理'
				},
				{
					url: 'pages/searchparking/searchparking',
					imageUrl: '../../static/img/index-content-nav-04.png',
					title: '我的停车'
				}
			]
    }
  },
  onShow () {
    this.handleGetIndexData()
    this.getLocation()
    const locationLocaturl = window.location.search
    this.code = getUrlParams(locationLocaturl, 'code')
    if (this.code && !this.$store.state.vuex_wxinfo.openId) { this.handleGetWXInfo(this.code) };
  },
  methods: {
    // 定位
    getLocation () {
      const that = this
      if (navigator.geolocation) {
        // 判断是否有这个对象
        navigator.geolocation.getCurrentPosition(function (pos) {
          that.latLongItude = { latitude: pos.coords.latitude, longitude: pos.coords.longitude }
          that.latitude = pos.coords.latitude
          that.longitude = pos.coords.longitude
          that.getCityNameByLonLat(that.latLongItude)
        }, function (err) {
          // 错误处理
          switch (err.code) {
            case 1:
              alert('位置服务被拒绝。')
              break
            case 2:
              alert('暂时获取不到位置信息。')
              break
            case 3:
              alert('获取信息超时。')
              break
            default:
              alert('未知错误。')
              break
          }
        })
      } else {
				alert('当前系统不支持GPS API')
      };
    },
    // 通过经纬度获取地区详细信息
    getCityNameByLonLat ({ longitude, latitude } = {}) {
      const that = this
      uni.showLoading({
        title: '加载中',
        mask: true
      })
      const str = `output=jsonp&key=BOGBZ-2BZ33-O4L32-Y3QJR-PGN66-RFFEL&location=${latitude},${longitude}`
      this.$jsonp('https://apis.map.qq.com/ws/geocoder/v1/?' + str, {}).then(res => {
        uni.hideLoading()
        if (res.status == 0) {
          if (res.result.ad_info) {
            that.city = res.result.ad_info.district
          }
        }
      })
    },
    // 轮播图点击
    swiperClick (item) {
      this.$u.route({
        url: 'pages/bannerDetails/bannerDetails',
        params: {
          id: this.bannerList[item].id
        }
      })
    },
    // 切换无感和手动
    orderNavclick () {
      uni.showLoading({
        title: '加载中'
      })
      this.$u.api.feePay({ vehicleId: this.recordList[1] })
        .then(res => {
          if (res.code == 200) {
            this.handleGetIndexData()
          } else {
						this.$refs.uToast.show({
						  title: res.msg,
						  type: 'error'
						})
					}
          uni.hideLoading()
        })
    },
    /**
     * 跳转页面
     * path 跳转路径
     * flag 是否存储
     * */
    openPage (path, flag) {
      this.$u.route({
        url: path
      })
      if (flag) {
        uni.setStorage({
          key: 'messageBack',
          data: 'pages/index/index'
        })
      }
    },
    // 搜索
    handleSearch () {
      uni.reLaunch({
        url: `/pages/parkingLists/parkingLists?keyword=${this.keyword}`
      })
    },
    // 城市选择
    handleCitySelect () {
      this.cityOpen = true
    },
    // 城市选择下拉变化
    cityChange (e) {
      if (e.area) {
        this.city = e.area.label
      } else if (e.city) {
        this.city = e.city.label
      } else {
        this.city = e.province.label
      }
    },
    // 获取首页数据
    handleGetIndexData () {
      uni.showLoading({
        title: '加载中'
      })
      this.$u.api.getIndexData()
        .then(res => {
          if (res.code === 200) {
            // 轮播
            const bannerList = []
            const banner = res.data?.advs
            banner.forEach(item => {
              const obj = {
                image: item.bannerUrl,
                id: item.id,
                name: item.name,
                content: item.content
              }
              bannerList.push(obj)
            })
            if (bannerList.length > 0) {
              this.bannerList = bannerList
            }
            // 是否有绑定车牌: 没有则通过弹框去绑定
            const vehicleList = res.data?.vehicleList ?? []
            if (vehicleList.length === 0) {
              this.bindCarShow = true
            }
            // 无感和手动
            const enableFeepay = []
            res.data.orderList.forEach(item => {
              if (item.enableFeepay) {
                enableFeepay.push(item.enableFeepay)
              } else {
                enableFeepay.push(0)
              }
              enableFeepay.push(item.vehicleId)
              if (item.contractStatus) {
                enableFeepay.push(item.contractStatus)
              } else {
                enableFeepay.push(0)
              }
            })
            this.recordList = enableFeepay
            this.orderNav = enableFeepay[0]
            this.contractStatus = enableFeepay[2]
            this.orderList = res.data.orderList
            // 消息提示
            const newsList = []
            const news = res.data?.news ?? []
            news.forEach(item => {
              newsList.push(item.content)
            })
            this.noticeList = newsList
            uni.hideLoading()
          } else {
            this.$refs.uToast.show({
              title: res.msg,
              type: 'error'
            })
            uni.hideLoading()
          }
        }).catch(err => {
          this.$refs.uToast.show({
            title: '系统异常',
            type: 'error'
          })
          uni.hideLoading()
        })
    },
    // 去支付,选择支付方式
    goPay (orderId) {
			const href = location.href.split('#')
			this.jumpUrl = href[0] + '#/pages/center/order/orderDetails/orderDetails?orderId=' + orderId + '&type=open'
      this.payWayPop = true
      this.curOrderList = []
      this.curOrderList.push(orderId)
    },
    // 获取路段详情
    onRoadInfo (item) {
      this.$u.api.roadInfoById({
        id: item.roadId
      })
        .then(res => {
          this.popupOrderDetails = res.data
          this.showOrderDetails = true
        }).catch(err => {
          this.$refs.uToast.show({
            title: '系统异常',
            type: 'error'
          })
        })
    },
    // 关闭路段详情弹框
    closeOrderDetails () {
      this.showOrderDetails = false
    },
    // 打电话
    phoneCall (phone) {
      uni.makePhoneCall({
        phoneNumber: phone
      })
    },
    /**
     * 点击优惠活动的广告图
     * */
    promotionBannerClick (cur) {
      this.promotionBannerList.forEach((item, index) => {
        if (cur === index) {
          this.$u.route({
            url: 'pages/favourableActivity/favourableActivity',
            params: {
              title: item.title,
              id: item.id
            }
          })
        }
      })
    },
    // 关闭支付弹框
    closePaymentMethod () {
      this.payWayPop = false
    }
  }
}
</script>

<style lang="scss" scoped>
@import "./index.scss";
</style>