JP-ChargeTeam51/pages/bindingHomePile/homeInfo.vue

<template>
	<view>
		
			<ujp-navbar :title="pageTitle" :startGz="false" >
				<view class="iconfont service" @click="openModal">
					&#xe60d;
				</view>
			</ujp-navbar>
		<view class="main-back">
			
		</view>
			<view class="main">
				<view class="main-head">


				

					<view class="text" >
						<view class="text-1">
							充电桩名称
						</view>
						 
						<view class="text-2" >
							{{applyList.length?applyList[0].chargingName:''}}
						</view>
					</view>

					<view class="charge-img">
						<img src="@/assets/img/charge.png" alt="">
					</view>
				</view>



				<view class="charging-info" >
					<view class="info-title">
						<view class="name">设备信息</view>
						<view class="value">
							<view class="pack-up" v-show="!listShow" @click="listShow=true">
								收起<text class="iconfont">&#xe607;</text>
							</view>
							<view class="pack-up" v-if="listShow" @click="listShow=false">
								展开<text class="iconfont">&#xe62c;</text>
							</view>
						</view>
					</view>
					<view class="table">
						<view class="row">
							<view class="name">设备型号</view>
							<view class="value">{{obj.model}}</view>
						</view>
						
						
						<view class="row">
							<view class="name">出厂编号</view>
							<view class="value">{{obj.deviceNo}}</view>
						</view>
						<template v-if="!listShow">
						<view class="row">
							<view class="name">固件版号</view>
							<view class="value">{{obj.firmwareVersion}}</view>
						</view>
						<view class="row">
							<view class="name">防护等级</view>
							<view class="value">{{obj.protectionGrade}}</view>
						</view>
						
						<view class="row">
							<view class="name">输入电压</view>
							<view class="value">{{obj.inputVoltage}}</view>
						</view>
						<view class="row">
							<view class="name">输出电压</view>
							<view class="value">{{obj.outputVoltage}}</view>
						</view>
						
						<view class="row">
							<view class="name">输出电流</view>
							<view class="value">{{obj.outputCurrent}}</view>
						</view>
						<view class="row">
							<view class="name">输出功率</view>
							<view class="value">{{obj.outputPower}}</view>
						</view>
						
						<view class="row">
							<view class="name">生产日期</view>
							<view class="value">{{obj.manufactureTime}}</view>
						</view>
						
						<view class="row">
							<view class="name">标准依据</view>
							<view class="value">{{obj.standardBasis}}</view>
						</view>
						<view class="row">
							<view class="name">联网卡号</view>
							<view class="value">{{obj.trafficCardNumber}}</view>
						</view>
						<view class="row">
							<view class="name">资费标准</view>
							<view class="value">{{obj.tariffStandard}}</view>
						</view>
						<view class="row">
							<view class="name">设备启动时间</view>
							<view class="value">{{obj.bindingTime}}</view>
						</view>
						<view class="row">
							<view class="name">设备质保期</view>
							<view class="value">{{obj.shelfLife}}</view>
						</view>
						</template>
						
					</view>
				
				</view>	
					
					<view class="charging-info" >
						<view class="info-title">
							<view class="name">联网信息</view>
							<view class="value">
								
							</view>
						</view>
						<view class="table">
							<view class="row">
								<view class="name">联网卡号</view>
								<view class="value">{{obj.trafficCardNumber}}</view>
							</view>
							<view class="row">
								<view class="name">有效期至</view>
								<view class="value">{{obj.expirationTime?obj.expirationTime.split(' ')[0]:''}}
								<u-button type="primary"    @click="popupShowWL=true" v-if="obj.expirationTime&&mallProductList.length"
								style="margin-left: 8px;" size="mini" shape="circle"  >立即续期</u-button>
								</view>
							</view>
							
						</view>
						<view class="tips">
							<u-icon
							  style="    margin-top: 2px;"
							  size="30"
							  name="info-circle"
							></u-icon>
							<view>
								家用充电桩内含物联网卡，此卡随设备出厂时赠送三年免费使用时长，三年后将按5元/月资费标准收取费用。

							</view>
						</view>
					
					</view>	
					
					<view class="charging-info">
						<view class="info-title">
							<view class="name">充电白名单<span class="span">({{vipUserList.length}}/3)</span></view>
							<view class="value" @click="addUser()">
								<u-icon
								  style="    margin-top: 2px;"
								  size="30"
								  name="plus"
								></u-icon> 添加
							</view>
						</view>
						<view class="table" >
							<table>
								<tr>
									<td>姓名</td>
									<td>手机号</td>
									<td>车牌号</td>
									<td>操作</td>
								</tr>
								<tr v-for="(item,i) in vipUserList" :key="i">
									<td>{{item.userName}}</td>
									<td>{{item.phone}}</td>
									<td>{{item.carNum==0?'':item.carNum}}</td>
									<td class="" style="color:#1677FF" @click="editUser(item)" >修改</td>
								</tr>
								
							</table>
							
						</view>
					
					</view>	
					
			</view>
			<u-popup v-model="popupShowWL" mode="bottom" :closeable="true"  border-radius="30" >
				<view class="popup-screen">
					<view class="popup-title">物联网卡续期
						<span style="color: rgba(102, 102, 102, 1);font-weight: 400;">
							有效期至<span style="color: red;">{{obj.expirationTime?obj.expirationTime.split(' ')[0]:''}}</span>
						</span>
					</view>
					<view  class="cardList">
						<view  class="cardInfo"  v-for="(item,i) in mallProductList" :key="i"
						@click="wlkid=item.id"
						 :class="{
						 	cardInfoCk:item.id==wlkid
						 }"  >
							<view class="name">{{item.remark}}</view>
							<view class="price">{{item.price}}元</view>
						</view>
					</view>
					<!-- 支付方式 -->
					<view class="payment">
						<view class="title">
							选择支付方式
						</view>
						<radio-group  @change="radioChange">
					
						<view class="way">
							<view class="way-name">
								<text><img src="@/assets/img/riFill-wechat-pay-fill@3x.png" alt=""></text>
								微信支付
							</view>
							<view class="way-radio">
								<label class="radio">
									<radio value="0"  name="abc"  :checked="submitType === '0'"  /><text></text>
								</label>
							</view>
						</view>
					
						<view class="way">
							<view class="way-name">
								<text><img src="@/assets/img/ze-alipay Copy@3x.png" alt=""></text>
								支付宝
							</view>
							<view class="way-radio">
								<label class="radio">
									<radio value="1"  name="abc"  :checked="submitType === '1'"  /><text></text>
								</label>
							</view>
						</view>
						</radio-group>
					
					</view>
					<u-button type="success" style="margin-top: 10px;" @click="submitWLK"
					 shape="circle" >确认充值</u-button>
				</view>
			</u-popup>
			<u-modal v-model="showModelzfb" :show-cancel-button="true"  @confirm="confirmzfb"
				confirm-text="支付成功？" title="扫码支付">
				<view style="
									text-align: center;
								">
					<img id="qrcode2" :src="qrCodeImg">
				</view>
				<view style="
									text-align: center;
								">请使用支付宝扫码</view>
			
			</u-modal>
			<img id="qrcode" style="display: none;">
			
			<u-popup v-model="popupShow" mode="bottom" :closeable="true"  border-radius="30" >
				<view class="popup-screen">
					<view class="popup-title">{{vipUser.id?'修改':'添加'}}白名单信息</view>
					<view style="padding: 4px;" >白名单车主姓名<span style="color: red;">*</span></view>
					<u-input :customStyle="customStyle"  v-model="vipUser.name"
					placeholder="白名单车主姓名(必填)"></u-input>
					<view  style="padding: 4px;">白名单车主手机号码<span style="color: red;">*</span></view>
					<u-input :customStyle="customStyle" type="number" v-model="vipUser.phone"
					placeholder="白名单车主手机号码(必填)"></u-input>
					<view style="padding: 4px;">白名单车主车牌号</view>
					<u-input :customStyle="customStyle"   v-model="vipUser.carNum"
					placeholder="白名单车主车牌号"></u-input>
					<view v-if="vipUser.id" style="display: flex;">
						<u-button type="info" style="margin-top: 10px;width: 49%;"
						 shape="circle" @click="delUser()">删除</u-button>
						<u-button type="success" style="margin-top: 10px;width: 49%;"
						 shape="circle" @click="submitUser()">保存</u-button>
					</view>
					<view v-else>
						
						<u-button type="success" style="margin-top: 10px;"
						 shape="circle" @click="submitUser()">保存</u-button>
					</view>
					
					
				</view>
			</u-popup>
			<view class="botton">
				<button class="bottonBtn" @click="bindingHomePile">开始充电</button>
			
			</view>
		 <u-modal v-model="delShow" @confirm="confirmDelete" confirm-color="#fa3534" :show-cancel-button="true" ref="uModal"  title="删除白名单用户"
		 	content="是否删除当前白名单用户?" confirm-text="删除"></u-modal>
			
			<u-modal v-model="show" @confirm="confirmPhone" :confirm-text="confirmText" confirm-color="#606266"
				:show-cancel-button="true" ref="uModal" :asyncClose="true" :title="title" :content="consumerPhone"
				:content-style="{fontSize: '24px',color: '#101010'}"></u-modal>
		
	</view>
</template>

<script>
	
	import * as API from '@/apis/mall.js'
	import * as WxJsApi from '@/utils/wxJsApi.js'
	import QRCode from 'qrcodejs2'
	import * as API_apply from '@/apis/apply.js'
	import {
		convertCanvasToImage
	} from '@/utils'
	import {
		wxPayJs
	} from '@/utils/wxpay'

	export default {
		components: {
		
		},
		data() {
			return {
				pageTitle:"充电枪详情",
				show:false,
				consumerPhone:"",
				title: '联系客服',
				
				confirmText: '拨打电话',
				listShow:true,
				popupShow:false,
				popupShowWL:false,
				customStyle:{
					"border-radius": "50px",
					"background-color": 'rgba(242, 244, 246, 1)',
					padding:"5px 20px",
					margin:"5px 0 "
				},
				applyList:[],
				vipUserList:[],
				vipUser:{},
				delShow:false,
				obj:{},
				showModelzfb:false,
					qrCodeImg: "",
					submitForm:{},
					submitType:"0",
					wlkid:"",
					mallProductList:[],
				cardList:[
					{
						name:"包年",
						price:60,
						id:"c4474038-2921-4cd1-8cf9-93755de7ec2c"
					},
					{
						id:"9c247fb3-097e-46be-9317-d2ae2075e6eb",
						name:"1个月",
						price:5
					},
					{
						name:"3个月",
						price:15
					}
				]
			}
		},

		computed: {
			
			
		},
		onShow() {
			
		
		},
		onReady() {
			var consumerPhone = "400-8899-619"
			// img="https://yktwechat.xiaoxinda.com/config/xxd2021.jpg"		
			if (consumerPhone) {
				this.consumerPhone = consumerPhone
			}
			
		},
		onLoad(op) {
			this.myApplyList()
			this.trafficCardMallList()
		},
		methods: {
			confirmzfb(){
				this.popupShowWL=false;
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				this.findDeviceByNo()
			},
			submitWLK(){
				if(!this.wlkid){
					uni.showToast({		
						title: "请选择购买商品"
					})
					return 
				}
				var type=this.submitType
				
				
				if (type == 0) {
					this.wxpy()
				}
				if (type == 1) {
					this.alpy()
				}
				
			},
			
			alpy() {
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				var listcanvas = document.getElementsByTagName('canvas')
			
				if (listcanvas.length > 0) {
					document.getElementById("qrcode").removeChild(document.getElementsByTagName('canvas')[0]);
				}
				var item=this.applyList[0]
				API.tradePrecreatePay({
					deviceNo:item.deviceNo,
					productId: this.wlkid,
					opinions:"",
					buyNum:1,
					receiver:"x",
					contactPhone:"x",
					deliveryAddress:"x",
				}).then((response) => {
				console.log(response)
					let qrcode = new QRCode('qrcode', {
						width: 200,
						height: 200,
						text: response.data.qr_code,
						correctLevel: QRCode.CorrectLevel.M,
			
					})
					
					//this.outOrderNo = response.data.outOrderNo;
					var canvas = document.getElementsByTagName('canvas')[0];
					this.qrCodeImg = convertCanvasToImage(canvas);
					uni.hideLoading()
					this.showModelzfb = true
			
				}).catch(error => {
					uni.showToast({
			
						title: error
					})
				})
			},
			wxpy() {
				var item=this.applyList[0]
				API.wxJsapiPay({
					deviceNo:item.deviceNo,
					productId: this.wlkid,
					opinions:"",
					buyNum:1,
					receiver:"x",
					contactPhone:"x",
					deliveryAddress:"x",
				}).then((response) => {
					this.submitForm = response.data
					wxPayJs(this.submitForm);
					
				}).catch(error => {
					uni.showToast({
						title: error
					})
				})
				
			},
			radioChange: function(evt) {
				 
				this.submitType=evt.detail.value
			    
			},
			submitUser(){
				if(!this.vipUser.name){
					uni.showToast({
						title: "请填写白名单车主姓名"
					})
					return 
				}
				if(!this.vipUser.phone){
					uni.showToast({
						title: "请填写白名单车主手机号码"
					})
					return 
				}
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				API_apply.saveVipUser(this.vipUser).then((res) => {
					//this.obj = res.data
					uni.hideLoading()
					
					this.delShow=false
					this.popupShow=false
					this.findVipUser(1)
					
				}).catch(error => {
					
					uni.showToast({
						title: error
					})
				})
				
				
			},
			confirmDelete(){
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				API_apply.deleteVipUser({
					id:this.vipUser.id
				}).then((res) => {
					//this.obj = res.data
					 uni.hideLoading()
					 this.delShow=false
					 this.popupShow=false
					uni.showToast({
						title: "操作成功"
					})
					this.findVipUser(1)
					
				}).catch(error => {
					
					uni.showToast({
						title: error
					})
				})
			},
			delUser(){
				this.delShow=true;
			},
			editUser(item){
				this.popupShow=true;
				this.vipUser=item;
				this.vipUser.name=item.userName
				var item=this.applyList[0]
				this.vipUser.stationId=item.stationId
				if(this.vipUser.carNum==0){
					this.vipUser.carNum=''
				}
			},
			addUser(){
				if(this.vipUserList.length>=3){
					uni.showToast({
						title: "添加白名单用户已达到上限"
					})
					return 
				}
				this.popupShow=true;
				this.vipUser={}
				var item=this.applyList[0]
				this.vipUser.stationId=item.stationId
				
			},
			bindingHomePile(){
				var item=this.applyList[0]
				uni.navigateTo({
					url:'/pages/searchPile/stationAndPile/chargingPileDetails?isback=1&id='+item.gunNo
				})
			},
			trafficCardMallList(){
				
				API.trafficCardMallList({
					
				}).then((res) => {
					
					 
					this.mallProductList=res.data.mallProductList
					if(this.mallProductList.length){
						this.wlkid=this.mallProductList[0].id
					}
					
					
				}).catch(error => {
					uni.showToast({
						title: error
					})
				})
			},
			findDeviceByNo(){
				var item=this.applyList[0]
				API_apply.findDeviceByNoD({
					deviceNo:item.deviceNo
				}).then((res) => {
					this.obj = res.data.chargingDevice
					 uni.hideLoading()
					
					
					
					
				}).catch(error => {
					uni.showToast({
						title: error
					})
				})
			},
			findVipUser(bl){
				if(bl){
					uni.showLoading({
						title: "加载中",
						mask: true,
					})
				}
				var item=this.applyList[0]
				this.vipUserList=[]
				API_apply.findVipUser({
					stationId:item.stationId
				}).then((res) => {
					if(bl){
						
						 uni.hideLoading()
						 uni.showToast({
						 	title: "操作成功"
						 })
					}
					
					this.vipUserList=res.data.vipUserList
					
					
					
				}).catch(error => {
					
					uni.showToast({
						title: error
					})
				})
			},
			myApplyList(){
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				API_apply.myApplyList({
					
				}).then((res) => {
					//this.obj = res.data
					 
					this.applyList=res.data.applyList;
					this.findVipUser()
					this.findDeviceByNo()
					
				}).catch(error => {
					uni.showToast({
						title: error
					})
				})
			},
			confirmPhone() {
				this.show = false;
				uni.makePhoneCall({
					phoneNumber: this.consumerPhone //仅为示例
				});
			},
			openModal() {
				this.show = true;
			},
			
		},

		
	}
</script>

<style lang="scss">
	

	// 支付方式
	.payment {
		margin: 24rpx;
		padding: 32rpx 0rpx;
		background-color: #fff;
	
		.title {
			color: rgba(51, 51, 51, 1);
			font-size: 32rpx;
			margin-bottom: 32rpx;
			font-weight: bold;
		}
	
		.way {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-top: 24rpx;
	
			.way-name {
				display: flex;
				align-items: center;
	
				text {
					margin-right: 16rpx;
	
					img {
						width: 48rpx;
						height: 48rpx;
						vertical-align: middle;
					}
				}
			}
	
			::v-deep .uni-radio-input-checked {
				background-color: #00b962 !important;
	
			}
	
			::v-deep .uni-radio-input {
				width: 40rpx !important;
				height: 40rpx !important;
			}
		}
	
	}

	page {
		background-color: #F6F8F8;
		padding-bottom: 100px;
	}

	.service {
		font-size: 24px;
		color: #101010;
		position: absolute;
		right: 16px;
	}

	

	.main {
		    position: absolute;
		    top: 80rpx;
		padding: 32rpx ;
		padding-bottom: 140rpx;
		//background-image: linear-gradient(#D6EEDC, #F6F8F8);
		.text-1 {
			color: rgba(255, 255, 255, 0.8);
			font-size:36rpx;
			    margin-top: 20rpx;

		}

		.text-2 {
			color: rgba(255, 255, 255, 1);
			font-size: 40rpx;
			    margin-top: 10rpx;
		}

		.charging-info {
			    position: relative;
			background-color: #fff;
			margin: 20rpx auto;
			border-radius: 12px;
			padding: 20rpx 32rpx;
			.info-title{
				    display: flex;
				    justify-content: space-between;
					padding-bottom: 24rpx ;
					.name{
						font-size: 36rpx;
						color: rgba(51, 51, 51, 1);
						font-weight: bold;
						.span{
							font-weight: 400;
							font-size: 28rpx;
							color: rgba(119, 119, 119, 1);
						}
					}
					.value{
						font-size: 28rpx;
						color: rgba(119, 119, 119, 1);
					}
			}
			.pack-up {
				
				
				color: rgba(119, 119, 119, 100);
			}
			.tips{
				  margin-top: 12rpx;
				display: flex;
				    align-items: flex-start;
				font-size: 24rpx;
			}
		}
	}

	.main-head {
		display: flex;
		justify-content: space-between;
		
	}
	.main-back{
		background: linear-gradient(180deg, rgba(0,185,98,1) 18%,rgba(137,218,182,1) 70%,rgba(242,244,246,1) 100%);
		height: 360rpx;
	}
	.charge-img {

		
		//overflow: hidden;
		height: 160rpx;
		margin-right: 40rpx;
		// margin-right: 16rpx;
		img {
			//width: 65%;
			
			width: 100rpx;
		}
	}
	
	
	// 尾部
	.botton {
		border: 1px solid rgba(242, 242, 242, 1);
		background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 100%);
		position: fixed;
	
		//background: #fff;
		width: 100%;
	
		padding: 24rpx 40rpx;
		line-height: 88rpx;
	
		bottom: 0;
		left: 0;
		z-index: 999;
		//padding: 0px 32rpx 32rpx;
		padding-bottom: 12px;
	
		button {
	
			margin-left: 40rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			//width: 45.8%;
			// background-color: black;
			// color: #fff;
			// background-color: rgba(255, 255, 255, 1);
			// color: rgba(0, 185, 98, 1);
			background-color: rgba(0, 185, 98, 100);
			color: rgba(255, 255, 255, 100);
	
	
	
			height: 88rpx;
			border-radius: 50px;
			font-size: 32rpx;
		}
	
	}
	.table{
		  table{
			   width: 100%;
		  }
		.row{
			 display: flex;
			     align-items: center;
			 height: 72rpx;
			font-size: 28rpx;
			padding: 0 24rpx;
			 .name{
				 width: 240rpx;
			 }
			 
		}
		td{
			height: 72rpx;
			font-size: 28rpx;
			padding: 0 24rpx;
		}
		  /* 隔行变色: 偶数行设置背景色 */
		  .row:nth-child(odd) {
		      background-color: #f9f9f9; /* 偶数行 */
		    }
			tr:nth-child(odd) {
			    background-color: #f9f9f9; /* 偶数行 */
			  }
		.row:nth-child(even) {
		     background-color: #ffffff; /* 奇数行 */
		   }
		   tr:nth-child(even) {
		        background-color: #ffffff; /* 奇数行 */
		      }
		 
	}
	.popup-screen{
		padding: 40rpx;
		.popup-title{
			font-size: 36rpx;
			color: rgba(51, 51, 51, 1);
			font-weight: bold;
			padding-bottom: 10px;
		}
		.cardList{
			    display: flex;
			    justify-content: space-evenly;
			
			.cardInfo{
				 display: flex;
				    flex-direction: column;
				    justify-content: center;
				    width: 160rpx;
				    height: 160rpx;
				border-radius: 8px;
				background-color: rgba(255, 255, 255, 1);
				text-align: center;
				border: 1px solid rgba(187, 187, 187, 1);
				.name{
					color: rgba(16, 16, 16, 1);
					font-size: 28rpx;
				}
				.price{
					color: rgba(16, 16, 16, 1);
					font-size: 48rpx;
					font-weight: bold;
				}
			}
			.cardInfoCk{
				background-color: rgba(225, 247, 237, 1);
				border: 1px solid rgba(0, 185, 98, 1);
				
				.price{
					color: rgba(0, 161, 85, 1);
					
				}
			}
		}
	}
</style>