parking_h5_all/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>
    </view>

    <!-- ===================================== 轮播图 ===================================== -->
    <view v-if="bannerList.length">
      <u-swiper :list="bannerList" border-radius="0" mode="none" @click="swiperClick"></u-swiper>
    </view>
    <!-- ===================================== 城市选择器 ===================================== -->
    <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" @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>

    <u-card :show-head="false" :show-foot="false" border-radius="16" margin="20rpx 40rpx" padding="30">
      <view slot="body" class="myorders">
        <view class="myorders-item"
          >当前已缴费<text style="color: #008cff">{{ totalCount || '0' }}</text
          >笔，合计<text style="color: #008cff">{{ totalActualAmount || '0' }}</text
          >元</view
        >
        <view class="myorders-item"
          >当前欠费<text style="color: #ff482b">{{ totalPayCount || '0' }}</text
          >笔，合计<text style="color: #ff482b">{{ totalPayAmount || '0' }}</text
          >元</view
        >
      </view>
    </u-card>

    <!-- ===================================== 停车列表 ===================================== -->
    <view v-for="item in orderList" :key="item.id">
      <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 || 0 }}</span>
              </view>
              <view class="item-cell" v-if="item.vehicleNo == ''">
                <span class="pending-order-body-left-label">车牌信息：</span>
                <span class="pending-order-body-center-label" @click="addvehicleNo(item.orderId)">添加车牌</span>
              </view>
              <view class="item-cell" v-else>
                <span class="pending-order-body-left-label">车牌信息：</span>
                <span>{{ item.vehicleNo }}</span>
                <!-- <span class="pending-order-body-right-label" @click="changevehicleNo(item.orderId)">更换</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" v-if="Number(item.deviceType) !== 2">
              <view class="go-pay" @click="goPay(item)" v-if="item.payAmount != 0">出场缴费</view>
              <view class="go-pay1" v-else>出场缴费</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>
    </view>

    <!-- ===================================== 无停车信息 ===================================== -->
    <view class="empty-data-box" v-if="!orderList.length">
      <u-empty text="暂无停车信息" mode="list"></u-empty>
    </view>

    <!-- ===================================== 优惠活动 ===================================== -->
    <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-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>

    <!-- ===================================== 0元提示弹出层 ===================================== -->
    <u-modal v-model="jumpMsgModal" :content="jumpMsgContent" :show-title="false" :show-confirm-button="false" />
    <u-toast ref="uToast" />

    <!-- ===================================== 添加车牌弹出层 ===================================== -->
    <u-popup class="popup-vehicleNo" v-model="ShowaddvehicleNo" mode="center" border-radius="20" width="710rpx" height="auto">
      <view class="popup-vehicleNo-title">添加车牌</view>
      <view class="popup-vehicleNo-center"></view>
      <view class="popup-vehicleNo-content">
        <view class="new-plate-number">
          <view class="message-input-wrap" @click="messageInputClick">
            <u-message-input :maxlength="8" width="70" font-size="50" :disabled-keyboard="true" v-model="newPlateNumber"></u-message-input>
          </view>
        </view>
      </view>
      <view class="popup-vehicleNo-select">暂无绑定车牌</view>
      <view class="vehicleNo-btn">
        <u-button type="primary" @click="handleAddCar">确认</u-button>
        <u-button type="primary" plain @click="ShowaddvehicleNo = false">取消</u-button>
      </view>
    </u-popup>

    <u-action-sheet :list="colorList" @click="confirmColor" v-model="colorShow"></u-action-sheet>
    <u-keyboard ref="uKeyboard" mode="car" @change="keyboardChange" @confirm="keyboardConfirm" @backspace="backspace" v-model="keyboardshow" />

    <!-- ===================================== 更换车牌弹出层 ===================================== -->
    <u-popup class="popup-vehicleNo" v-model="ShowchangevehicleNo" mode="center" border-radius="20" width="710rpx" height="auto">
      <view class="popup-vehicleNo-title">更换车牌</view>
      <view class="popup-vehicleNo-center"></view>
      <view class="popup-vehicleNo-content">
        <view class="new-plate-number">
          <view class="message-input-wrap" @click="messageInputClick">
            <u-message-input :maxlength="8" width="70" font-size="50" :disabled-keyboard="true" v-model="newPlateNumber"></u-message-input>
          </view>
        </view>
      </view>
      <view class="popup-vehicleNo-select">
        <u-collapse ref="refValue">
          <u-collapse-item title="点击选择车牌" align="center">
            <u-cell-group>
              <u-cell-item :title="item.vehicleNo" v-for="(item, index) in groupList" :key="index" :arrow="false">
                <u-radio-group v-model="selectvalue" @change="radioGroupChange">
                  <u-radio :name="item.vehicleNo" :key="index"></u-radio>
                </u-radio-group>
              </u-cell-item>
            </u-cell-group>
          </u-collapse-item>
        </u-collapse>
      </view>
      <view class="vehicleNo-btn">
        <u-button type="primary" @click="handleAddCar">确认</u-button>
        <u-button type="primary" plain @click="ShowchangevehicleNo = false">取消</u-button>
      </view>
    </u-popup>
    <!-- 选择支付 -->
    <ChoosePayment ref="choosePayment" :curOrderList="curOrderList" :jumpUrl="jumpUrl" @closePaymentMethod="closePaymentMethod" />
  </view>
</template>

<script>
import getUrlParams from '../../utils/getUrlParams.js';
// import PaymentMethod from '@/pages/paymentMethod/paymentMethod.vue';
import ChoosePayment from '@/pages/choosePayment/choosePayment.vue';
import { jsonp } from 'vue-jsonp';
export default {
  components: {
    // PaymentMethod,
    ChoosePayment
  },
  data() {
    return {
      orderid: '',
      selectvalue: null,
      groupList: [],
      radiogroupList: [],
      keyboardshow: false,
      colorShow: false,
      colorList: [
        { text: '蓝色', colorCode: 0 },
        { text: '黄色', colorCode: 1 },
        { text: '黑色', colorCode: 2 },
        { text: '白色', colorCode: 3 },
        { text: '绿色', colorCode: 4 },
        { text: '其他', colorCode: 99 }
      ],
      vehicleColor: 0,
      newPlateNumber: '',
      //更换车牌弹窗
      ShowchangevehicleNo: false,
      //添加车牌弹窗
      ShowaddvehicleNo: false,
      // 城市选择框
      cityOpen: false,
      // 选中城市
      city: '贵州省',
      // 搜索框值
      keyword: '',
      // 轮播图
      bannerList: [],
      // 订单列表
      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: '我的停车'
        }
      ],
      totalActualAmount: '', //缴费总额
      totalPayAmount: '', //应支付总额
      totalCount: '', //缴费总笔数
      totalPayCount: '', //应支付总笔数
      // 0元提示框
      jumpMsgModal: false,
      // 0元提示内容
      jumpMsgContent: ''
    };
  },
  onLoad(page) {
    const locationLocaturl = location.href;
    // 微信聚合支付完成跳转过来重定向到详情页
    const type = getUrlParams(locationLocaturl, 'type');
    if (type && type === 'jumpurl') {
      const jumpurl = localStorage.getItem('jumpUrl');
      if (jumpurl) {
        uni.showLoading({
          title: '正在跳转中...'
        });
        setTimeout(() => {
          uni.hideLoading();
          location.href = jumpurl;
        }, 0);
      }
    }
    // 0元支付情况添加一个加载层
    const jumpMsg = getUrlParams(locationLocaturl, 'jumpMsg');
    if (jumpMsg) {
      this.jumpMsgModal = true;
      this.jumpMsgContent = jumpMsg;
      setTimeout(() => {
        this.jumpMsgModal = false;
      }, 3000);
    }

    // this.getParams();
    this.getLocation();
    this.handleGetIndexData();
  },
  methods: {
    /**
     * @description: 获取参数免费时长
     * @return {*}
     */
    async getParams() {
      const { code, msg } = await this.$u.api.getParamsApi({
        key: 'park.lock.freetime'
      });
      if (code === 200) {
        this.$u.vuex('free_time', msg);
      }
    },
    radioGroupChange(e) {
      this.newPlateNumber = e;
    },
    // 获取车辆列表
    handlegetMycars() {
      let that = this;
      this.$u.api.getMycars().then((res) => {
        if (res.code === 200) {
          this.groupList = res.data.rows;
          this.radiogroupList = res.data.rows;
          this.$nextTick(() => {
            // dom元素更新后执行，因此这里能正确打印更改之后的值
            console.log(that.$refs.refValue.init()); // 改变了的值
          });
        }
      });
    },
    //更换车牌信息
    changevehicleNo(id) {
      this.orderid = id;
      this.ShowchangevehicleNo = true;
      this.handlegetMycars();
    },
    // 添加车辆
    handleAddCar() {
      if (!this.$u.test.carNo(this.newPlateNumber)) {
        this.$refs.uToast.show({
          title: '请正确填写车牌号',
          type: 'error'
        });
        return;
      }
      let param = {
        orderId: this.orderid,
        vehicleNo: this.newPlateNumber,
        vehicleColor: this.vehicleColor
      };
      this.$u.api.bindVehicleNo(param).then((res) => {
        if (res.code === 200) {
          this.$refs.uToast.show({
            title: res.msg,
            type: 'success'
          });
          this.handleGetIndexData();
          this.ShowchangevehicleNo = false;
        }
      });
    },
    //新增车牌
    addvehicleNo() {
      this.ShowaddvehicleNo = true;
    },

    // 点击输入框
    messageInputClick() {
      this.keyboardshow = true;
    },
    // 按键被点击(点击退格键不会触发此事件)
    keyboardChange(val) {
      // 将每次按键的值拼接到value变量中，注意+=写法
      this.newPlateNumber += val;
    },
    // 退格键被点击
    backspace() {
      // 删除value的最后一个字符
      if (this.newPlateNumber.length) this.newPlateNumber = this.newPlateNumber.substr(0, this.newPlateNumber.length - 1);
    },
    // 键盘输入完成后确认
    keyboardConfirm() {
      this.colorShow = true;
    },
    // 确认颜色
    confirmColor(e) {
      this.vehicleColor = this.colorList[e].colorCode;
    },
    //添加车牌
    addvehicleNo(id) {
      this.orderid = id;
      this.ShowaddvehicleNo = true;
    },
    // 定位
    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) {
            uni.getLocation({
              type: 'gcj02',
              success: function (res) {
                that.latLongItude = {
                  latitude: res.latitude,
                  longitude: res.longitude
                };
                that.latitude = res.latitude;
                that.longitude = res.longitude;
                that.getCityNameByLonLat(that.latLongItude);
              }
            });
          }
        );
      } 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}`;
      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: '加载中'
      });
      console.log('this.recordList[1]', this.recordList[1]);
      console.log('orderNav', this.orderNav);
      if (!this.recordList[1]) {
        uni.hideLoading();
        return;
      }
      this.$u.api
        .feePay({
          vehicleId: this.recordList[1]
        })
        .then((res) => {
          console.log('res', res);
          if (res?.code == 200) {
            this.handleGetIndexData();
          }
          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() {
      this.$u.api.getIndexData().then((res) => {
        if (res.code === 200) {
          // 轮播
          this.bannerList = (res?.data?.advs ?? []).map((item) => {
            return {
              image: item.bannerUrl,
              id: item.id,
              name: item.name,
              content: item.content
            };
          });
          // 是否有绑定车牌: 没有则通过弹框去绑定
          const vehicleList = res.data?.vehicleList ?? [];
          if (vehicleList.length === 0) {
            this.bindCarShow = true;
          }
          // 无感和手动
          const enableFeepay = [];
          const orderList = res.data?.orderList ?? [];
          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;
          if (enableFeepay.length) this.orderNav = enableFeepay[0];
          if (enableFeepay.length === 3) this.contractStatus = enableFeepay[2];
          // 统计
          this.totalActualAmount = res.data?.payedInfo?.totalActualAmount;
          this.totalCount = res.data?.payedInfo?.totalCount;
          this.totalPayAmount = res.data?.payingInfo?.totalPayAmount;
          this.totalPayCount = res.data?.payingInfo?.totalCount;
          this.orderList = orderList;
          // 消息提示
          const newsList = [];
          const news = res.data?.news ?? [];
          news.forEach((item) => {
            newsList.push(item.content);
          });
          this.noticeList = newsList;
        }
      });
    },
    // 去支付,选择支付方式
    goPay(item) {
      const href = location.origin;
      this.jumpUrl = href + '/pages/center/order/orderDetails/orderDetails?orderId=' + item.id + '&type=open';
      this.curOrderList = [];
      this.curOrderList.push(item.id);
      this.$refs['choosePayment'].openPopup({ ...item }, 'single', 'road');
    },
    // 获取路段详情
    async onRoadInfo(item) {
      const { code, data } = await this.$u.api.roadInfoById({
        id: item.roadId
      });
      if (code === 200) {
        if (data) {
          this.popupOrderDetails = data;
          this.showOrderDetails = true;
        } else {
          this.$refs.uToast.show({
            title: '暂无停车点数据!',
            type: 'warning'
          });
        }
      }
    },
    // 关闭路段详情弹框
    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>