|
@@ -1,32 +1,240 @@
|
|
|
<template>
|
|
|
- <view class="wrap">
|
|
|
+ <view>
|
|
|
<u-navbar :is-back='false' :border-bottom="false" :background="{ background: '#008CFF' }" title=""></u-navbar>
|
|
|
<view class="header-bar">
|
|
|
- <view class="city">
|
|
|
+ <view class="city" @click="handleCitySelect">
|
|
|
{{city}}<u-icon name="arrow-down" color="#fff" size="32"></u-icon>
|
|
|
</view>
|
|
|
- <u-search placeholder="搜索发票、停车场" :show-action="false" v-model="keyword"></u-search>
|
|
|
+ <u-search placeholder="搜索发票、停车场" :show-action="false" @search="handleSearch" v-model="keyword"></u-search>
|
|
|
<u-icon class="scan" name="scan" color="#fff" size="48"></u-icon>
|
|
|
</view>
|
|
|
- <u-swiper :list="bannerList"></u-swiper>
|
|
|
+
|
|
|
+ <u-swiper :list="bannerList" border-radius="0"></u-swiper>
|
|
|
+
|
|
|
+ <u-city-select v-model="cityOpen" @city-change="cityChange" :areaCode='["52", "5201"]' ></u-city-select>
|
|
|
+
|
|
|
+ <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">
|
|
|
+ <view class="content-nav-item-icon-wrap">
|
|
|
+ <u-image src="../../static/img/index-content-nav-01.png" width="77rpx" height="75rpx" mode="heightFix"></u-image>
|
|
|
+ </view>
|
|
|
+ <view class="content-nav-item-icon-text">停车缴费</view>
|
|
|
+ </view>
|
|
|
+ <view class="content-nav-item">
|
|
|
+ <view class="content-nav-item-icon-wrap">
|
|
|
+ <u-image src="../../static/img/index-content-nav-02.png" width="77rpx" height="75rpx" mode="heightFix"></u-image>
|
|
|
+ </view>
|
|
|
+ <view class="content-nav-item-icon-text">优惠活动</view>
|
|
|
+ </view>
|
|
|
+ <view class="content-nav-item">
|
|
|
+ <view class="content-nav-item-icon-wrap">
|
|
|
+ <u-image src="../../static/img/index-content-nav-03.png" width="77rpx" height="75rpx" mode="heightFix"></u-image>
|
|
|
+ </view>
|
|
|
+ <view class="content-nav-item-icon-text">车辆管理</view>
|
|
|
+ </view>
|
|
|
+ <view class="content-nav-item">
|
|
|
+ <view class="content-nav-item-icon-wrap">
|
|
|
+ <u-image src="../../static/img/index-content-nav-04.png" width="77rpx" height="75rpx" mode="heightFix"></u-image>
|
|
|
+ </view>
|
|
|
+ <view class="content-nav-item-icon-text">我的停车</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </u-card>
|
|
|
+
|
|
|
+ <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>甜蜜小镇D18组团停车场</view>
|
|
|
+ <view class="pending-order-head-right" @click="orderDetails"><u-icon class="arrow-down" name="arrow-down" size="32"></u-icon></view>
|
|
|
+ </view>
|
|
|
+ <view class="pending-order-body" slot="body">
|
|
|
+ <view class="pending-order-body-nav">
|
|
|
+ <view class="nav-item nav-manual" @click="orderNav=0" :class="{active:orderNav==0}">手动缴费</view>
|
|
|
+ <view class="nav-item nav-auto" @click="orderNav=1" :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">贵A37W45</view>
|
|
|
+ <view class="duration">
|
|
|
+ <span class="pending-order-body-left-label">停车时长</span>
|
|
|
+ <span>01:30:25</span>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="pending-order-body-right">
|
|
|
+ <view class="order">订单号:5222021022300045</view>
|
|
|
+ <view class="cost">
|
|
|
+ <span class="pending-order-body-left-label">停车费用</span>
|
|
|
+ <span>
|
|
|
+ <span class="number">10.25</span>
|
|
|
+ 元
|
|
|
+ </span>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="go-pay-wrap">
|
|
|
+ <view class="go-pay" @click="handlewxpay">去支付</view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+ <view class="pending-order-body-wrap" v-show="orderNav==1">
|
|
|
+
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </u-card>
|
|
|
+
|
|
|
+ <u-modal
|
|
|
+ v-model="bindCarShow"
|
|
|
+ title="绑定车牌号"
|
|
|
+ :show-cancel-button="true"
|
|
|
+ confirm-text="去绑定"
|
|
|
+ content="首次使用请先绑定您的车牌"
|
|
|
+ @confirm="$u.route({url:'pages/myCars/myCars'})"></u-modal>
|
|
|
+
|
|
|
+ <!-- 订单细节 -->
|
|
|
+ <u-modal v-model="showOrderDetails" title="停车场信息" confirm-text="知道了" :title-style="{color: '#008CFF'}">
|
|
|
+ <view class="slot-content">
|
|
|
+ <rich-text class="orderDetails" :nodes="content"></rich-text>
|
|
|
+ </view>
|
|
|
+ </u-modal>
|
|
|
+ <u-toast ref="uToast" />
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
+ import getUrlParams from "../../utils/getUrlParams.js";
|
|
|
export default {
|
|
|
+ // components: {
|
|
|
+ // citySelect
|
|
|
+ // },
|
|
|
data() {
|
|
|
return {
|
|
|
city: '贵阳市',
|
|
|
keyword:'',
|
|
|
bannerList:[
|
|
|
- {image: 'https://cdn.uviewui.com/uview/swiper/1.jpg',title: '昨夜星辰昨夜风,画楼西畔桂堂东'}
|
|
|
- ]
|
|
|
+ {image: '/static/img/index-banner01.png',title: ''}
|
|
|
+ ],
|
|
|
+ cityOpen:false,
|
|
|
+ pendingOrder:[],
|
|
|
+ code:null,//微信code
|
|
|
+ orderNav:0,//手动,无感
|
|
|
+ bindCarShow:false,//绑定车询问弹窗
|
|
|
+ showOrderDetails:false,//是否线上订单细节
|
|
|
+ content:`
|
|
|
+ <dl>
|
|
|
+ <dt>车场名称:</dt>
|
|
|
+ <dd>贵阳云岩区甜蜜小镇D18组团停车场</dd>
|
|
|
+ </dl>
|
|
|
+ <dl>
|
|
|
+ <dt>免费时长:</dt>
|
|
|
+ <dd>15分钟</dd>
|
|
|
+ </dl>
|
|
|
+ `,
|
|
|
+
|
|
|
}
|
|
|
},
|
|
|
onLoad() {
|
|
|
-
|
|
|
+ this.handleGetIndexData();
|
|
|
+ let locationLocaturl = window.location.search;
|
|
|
+ this.code = getUrlParams(locationLocaturl,"code");
|
|
|
+ if(this.code&&!this.$store.state.vuex_wxinfo.openId){this.handleGetWXInfo(this.code)};
|
|
|
},
|
|
|
methods: {
|
|
|
+ handleSearch(){
|
|
|
+ console.log('this.keyword',this.keyword);
|
|
|
+ this.$u.route({
|
|
|
+ url:'pages/parkingLists/parkingLists',
|
|
|
+ params: {
|
|
|
+ keyword: this.keyword
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ handleCitySelect(){
|
|
|
+ this.cityOpen = true;
|
|
|
+ },
|
|
|
+ cityChange(e){
|
|
|
+ console.log('cityChange',e);
|
|
|
+ this.city = e.city.label;
|
|
|
+ },
|
|
|
+ handleGetIndexData(){
|
|
|
+ this.$u.api.getIndexData()
|
|
|
+ .then(res=>{
|
|
|
+ console.log('getIndexData',res);
|
|
|
+ if(res.data.vehicleList.length<1){
|
|
|
+ this.bindCarShow = true;
|
|
|
+ }
|
|
|
+ }).catch(err=>{
|
|
|
+ alert(err.msg);
|
|
|
+ console.log('getIndexData err',err)
|
|
|
+ });
|
|
|
+ },
|
|
|
+ getCode () {
|
|
|
+ var local = window.location.href // 获取页面url
|
|
|
+ let locationLocaturl = window.location.search;
|
|
|
+ this.code = getUrlParams(locationLocaturl,"code"); // 截取code
|
|
|
+ if (this.code == null || this.code === '') { // 如果没有code,则去请求
|
|
|
+ window.location.href = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${this.config.wxAppid}&redirect_uri=${encodeURIComponent(local)}&response_type=code&scope=snsapi_userinfo&#wechat_redirect`
|
|
|
+ } else {
|
|
|
+ this.handleGetWXInfo(this.code) //把code传给后台获取用户信息
|
|
|
+ }
|
|
|
+ },
|
|
|
+ handleGetWXInfo (code) { // 通过code获取 openId等用户信息,/api/user/wechat/login 为后台接口
|
|
|
+ let _this = this
|
|
|
+ this.$u.api.getWXInfo(code).then((res) => {
|
|
|
+ if (res.code === 200 ) {
|
|
|
+ this.$u.vuex('vuex_wxinfo',res.data);
|
|
|
+ // 继续支付
|
|
|
+ }
|
|
|
+ }).catch((err) => {
|
|
|
+ this.$refs.uToast.show({
|
|
|
+ title: err.msg,
|
|
|
+ type: 'error',
|
|
|
+ });
|
|
|
+ })
|
|
|
+ },
|
|
|
+ handlewxpay(){;
|
|
|
+ if(!this.$store.state.vuex_wxinfo.openId){ // 如果微信openId,则需用code去后台获取
|
|
|
+ this.$refs.uToast.show({
|
|
|
+ title: '请登录后重试!',
|
|
|
+ type: 'info',
|
|
|
+ // url: '/pages/user/index'
|
|
|
+ });
|
|
|
+ this.getCode();
|
|
|
+ } else {
|
|
|
+ // 别的业务逻辑
|
|
|
+ this.getWXPay();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ async getWXPay(id){
|
|
|
+ let params = {
|
|
|
+ orderId:id||new Date().getTime(),
|
|
|
+ openid:this.$store.state.vuex_wxinfo.openId,
|
|
|
+ tradeType:"test"
|
|
|
+ };
|
|
|
+ await this.$wxApi.config();
|
|
|
+ this.$pay.wxPay(params).then(res =>{
|
|
|
+ console.log('wxPay',res.code);
|
|
|
+ if(res.code == 0){
|
|
|
+ // 成功
|
|
|
+ // uni.reLaunch({
|
|
|
+ // url: '/pages/buySuccess/buySuccess?orderId=' + params.orderId
|
|
|
+ // })
|
|
|
+ }else if(res.code == 1){
|
|
|
+ // 取消
|
|
|
+ // uni.redirectTo({
|
|
|
+ // url: '/pages/userCenter/myOrder/myOrder'
|
|
|
+ // })
|
|
|
+ }else if(res.code == 2){
|
|
|
+ this.$refs.uToast.show({
|
|
|
+ title: '支付失败,请检查!',
|
|
|
+ type: 'error',
|
|
|
+ // url: '/pages/user/index'
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ //
|
|
|
+ orderDetails(){
|
|
|
+ this.showOrderDetails = true;
|
|
|
+ }
|
|
|
|
|
|
}
|
|
|
}
|