jp-charge/pagesFinance/user/activatedChargingPile.vue

<template>
	<view>
		<ujp-navbar title="激活充电桩"></ujp-navbar>
		<view class="main">
			<view class="img">
				<img src="../../assets/img/pile.png" alt="">
			</view>
			<view class="text">
				<view class="text-1">
					{{name}}
				</view>
				<view class="text-1">
					设备暂未绑定
				</view>
				<view class="text-2">
					<p>请在施工人员的帮助下，</p>
					<p>扫码关联充电桩并完成激活操作</p>
				</view>
				
			</view>
			<button v-if="!isReady" class="btn" @click="test" > <text>加载中</text></button>
			<button v-else class="btn" @click="getScanCode" >
				<text><img src="../../assets/img/riLine-qr-scan-2-line@1x.png" alt="">
				</text>扫码绑定</button>
				<view  style="text-align: center; margin-top: 10px;color: #275cbf;"
				 @click="gotoUrl('pagesFinance/news/index?code=AZSM')" >查看安装说明文档</view>
		</view>
		
	</view>
</template>

<script>
	import * as WxJsApi from '@/utils/wxJsApi.js'
	import * as API from '@/apis/finance.js'
	
	export default {
		data() {
			return {
				isReady:false,
				id:"",
				name:""
				
			}
		},
		onLoad(op) {
			if(op.id){
				this.id=op.id;
				this.name=op.name
			}
		},
		onReady() {
			WxJsApi.getWxConfig(['scanQRCode']).then((res) => {
				// //(res)
				this.isReady=true;
			}).catch(error => {
				//(res)
			})
		},
		methods: {
			test(){
				if(process.env.NODE_ENV === "development"){
					this.getInfo("YQ20220816002")
				}
				//
			},
			getInfo(id){
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				API.findByDeviceNo({
					
					deviceNo:id
				}).then((res) => {
					this.obj = res.data
				
					uni.redirectTo({
						url:"/pagesFinance/user/confirmBinding?id="+id+"&stationId="+this.id
					})
					uni.hideLoading()
					
				}).catch(error => {
					uni.showToast({
						title: error
					})
				})
			},
			getScanCode(){
				WxJsApi.scanQRCode(1).then(res => {
					this.getInfo(res)
				}).catch(error => {
				
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.main{
		margin-top: 48px;
		.img{
			width: 100%;
			   text-align: center;
			
		}
		.text{
			text-align: center;
			margin-top: 28px;
			.text-1{
				color: rgba(51, 51, 51, 1);
				font-size: 20px;
				line-height: 27px;
				font-weight: bold;
			}
			.text-2{
				margin: 0 auto;
				
				color: rgba(119, 119, 119, 1);
				font-size: 16px;
				line-height: 19px;
				margin-top: 24rpx;
				p{
					margin-bottom: 4px;
				}
			}
		}
		.btn{
			margin-top: 36px;
			width: 58.9%;
			border-radius: 8px;
			background-color: rgba(24, 90, 198, 1);
			line-height: 48px;
			color: #fff;
			text{
				margin-right: 16rpx;
			}
			img{
				vertical-align: middle;
			}
		}
		
	}
	

</style>