JP-ChargeTeam51/pages/discountCard/paymentSuccess.vue

<template>
	<view>
		<ujp-navbar title="支付结果"></ujp-navbar>
		<view class="icon">
			<img  v-if="detail.payStatus==20"
			src="../../assets/img/paymentSuccess.png" alt="">
		</view>
		<view class="text">
			{{detail.payStatusStr}}
		</view>
		<view class="infos-group">
			<view class="item">
				<view class="title">
					商品总金额
				</view>
				<view class="value">
					{{detail.totalFee}}元
				</view>
			</view>
			<view class="item" v-if="false">
				<view class="title">
					交易手机号
				</view>
				<view class="value">
					155****0001
				</view>
			</view>
			<view class="item">
				<view class="title">
					订单号
				</view>
				<view class="value">
					{{detail.outOrderNo}}
				</view>
			</view>
			<view class="item">
				<view class="title">
					创建时间
				</view>
				<view class="value">
					{{detail.createTime}}
				</view>
			</view>
			<view class="item">
				<view class="title">
					支付时间
				</view>
				<view class="value">
					{{detail.payTime}}
				</view>
			</view>
			
		</view>
		<view class="btn">
			<view class="check" @click="gotoUrl('pages/discountCard/myOrder')">
				查看订单
			</view>
			<view class="continue" v-if="detail.payStatus!=20" @click="getInfo">
				刷新订单
			</view>
			<view class="continue" v-else-if="charge" @click="chargeLook">
				继续充电
			</view>
			<view class="continue" v-else @click="mainindex">
				返回首页
			</view>
		</view>
	</view>
</template>

<script>
	import * as API from '@/apis/finance.js'
	import * as newsApi from '@/apis/news.js'
	export default {
		data() {
			return {
				detail: {},
				id: "",
				charge:false,
				chargeObj:{},
				title:'充值结果',
				bannerList:[],
			}
		},
		onLoad(op) {
			if(op.id){
				this.id=op.id
				this.getInfo();
			}
			var obj=this.carhelp.getGunIdCharge();
			if(obj){
				this.charge=true
				this.chargeObj=obj
			}
			this.getBannerInfo("recharge-end")
		},
		methods: {
			clickBanner(index){
				var mod= this.bannerList[index]
				
				if(mod.linkUrl.indexOf('http')==0){
				    window.location=mod.linkUrl;
				}
				else if(mod.linkUrl.indexOf('#/')==0){
					if(mod.linkUrl.indexOf("?")==-1){
						mod.linkUrl+='?';
					}
				    //window.location=mod.linkUrl;
					var url=mod.linkUrl.split("#")[1]
					//window.location = mod.clickUrl;
					uni.navigateTo({
						url: url
					})
				}
				else if(mod.linkUrl=='#'||mod.linkUrl==''){
				
				}
				else{
					uni.navigateTo({
						url:mod.linkUrl
					})
				}
				
			},
			getBannerInfo(code){
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				newsApi.getBannerInfo(code).then((res) => {
					uni.hideLoading();
					this.bannerList =res.data;
					
					// document.getElementsByClassName("uni-swiper-wrapper")[0].parentNode.style="background-color: rgb(255, 255, 255); height: 300px;"
				 }).catch(error => {
						uni.showToast({
						
							title: error,icon: "none"
						})
				})
			},
			getInfo() {
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				API.accountDetail({
					outOrderNo: this.id
				}).then((res) => {
					uni.hideLoading()
			
					this.detail = res.data.orderInfo;
					if(this.detail.type=='2'){
						this.title='开通会员'
					}
					
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			mainindex() {
				uni.redirectTo({
					url: '/pages/index/index'
				})
			},
			userindex() {
				uni.redirectTo({
					url: '/pages/user/index'
				})
			},
			rechargeContinue() {
				uni.redirectTo({
					url: '/pages/user/finance/recharge'
				})
			},
			chargeLook2(){
			 	
				uni.redirectTo({
					url:"/pages/searchPile/chargeProcess/dcCharging?id=" + this.detail.recordId
				})
				
			},
			chargeLook(){
				
				uni.redirectTo({
					url:'/pages/searchPile/chargeProcess/charge?isback=1&deviceNo='+this.chargeObj.deviceNo+"&gun="+this.chargeObj.channelNo+"&carNumber="+this.chargeObj.carNumber
				})
				
			},
			balanceLook() {
				uni.redirectTo({
					url: '/pages/user/finance/balance'
				})
			}
		}
	}
</script>
<style>
	page{
		background-color: #fff;
	}
</style>
<style lang="scss" scoped>
	.icon{
		width: 160rpx;
		height: 160rpx;
		margin: 100rpx auto 32rpx;
		img{
			width: 100%;
			height: 100%;
		}
	}
     
	 .text{
		 text-align: center;
		 color: rgba(16, 16, 16, 1);
		 font-size: 48rpx;
	 }
	 .infos-group{
		 margin-top: 80rpx;
		 padding: 0 80rpx;
		 .item{
			 display: flex;
			 align-items: center;
			 justify-content: space-between;
			 margin-bottom: 24rpx;
			 .title{
				 color: rgba(119, 119, 119, 1);
			 }
			 .value{
				 color: rgba(51, 51, 51, 1);
			 }
		 }
	 }
	 .btn{
		 padding: 0 80rpx;
		 margin-top: 80rpx;
		 display: flex;
		 align-items: center;
		 justify-content: space-between;
		 .check{
			 width: 280rpx;
			 height: 80rpx;
			 line-height: 80rpx;
			 border-radius: 50px;
			 background-color: rgba(255, 255, 255, 1);
			 color: rgba(0, 0, 0, 1);
			 font-size: 32rpx;
			 text-align: center;
			 border: 1px solid rgba(223, 223, 223, 1);
		 }
		 .continue{
			 width: 280rpx;
			 height: 80rpx;
			 line-height: 80rpx;
			 border-radius: 50px;
			 background-color: rgba(0, 185, 98, 1);
			 color: rgba(255, 255, 255, 1);
			 font-size: 32rpx;
			 text-align: center;
		 }
	 }
</style>