jikeH5/pages/wyCar/index.vue

<template>
	<view class="content">
		
		<!-- 自定义导航 -->
		<view class="zdyNavBox">
			<view class="status_bar" :style="{height: iStatusBarHeight + 'px'}"></view>
			<view class="zdyNav">
				<view class="zdyNavLeft">
					<image src="../../static/img/nav_icon_back.png" mode="aspectFit" class="backImg" @click="goback">
					</image>
		
				</view>
				<view class="zdyNavTitle">网约车优享申请</view>
				<view style="width: 50px;"></view>
			</view>
		</view>
		<view class="status_bar" :style="{height: iStatusBarHeight + 'px'}"></view>
		<view style="height: 44px;"></view>
		<view class="top">
			<view class="topLeft">
				<view class="topMs">网约车优享认证入口</view>
				<image src="../../static/img/icon_arrow@2x.png" mode="" class="topImg"></image>
			</view>
			<view class="topRzBtn" @click="rzBtn">去认证</view>
		</view>
		<view class="searchBox">
			<view class="searchView">
				<image src="../../static/img/icon_search.png"  class="searchImg"></image>
				<input type="text" class="searchInput" v-model="name" @confirm="search" placeholder="请输入电话、姓名搜索"/>
			</view>
		</view>
		<view class="listBox">
			<view class="line" v-for="(item,index) in items">
				<view class="lineZt lineState1" v-if="item.applyState==1">未审</view>
				<view class="lineZt lineState2" v-if="item.applyState==2">通过</view>
				<view class="lineZt lineState3" v-if="item.applyState==0">退回</view>
				<view class="lineName">
					<view >
						<view class="lineNameBox">
								<span>{{item.customerName}}</span>  <span style="padding-left: 10rpx;">{{item.mobilePhone}}</span>
						</view>
					
						<view class="plateNumberBox">
							<span>{{item.plateNumber}}</span>  
							<span style="padding-left: 10rpx;" v-if="item.carmodelType==1">丰田网约车</span>
							<span style="padding-left: 10rpx;" v-if="item.carmodelType==2">其他网约车</span>
						</view>
					</view>
					<view class="examine" v-if="item.applyState==1" @click="examine(2,item.id)">审核</view>
				</view>
				<view class="lineBottom">
					<view class="lineTime">	{{item.createTime}}	</view>
					<view class="lineBottomBtnBox">
						<view class="returnBtn"  v-if="item.applyState==1" @click="examine(0,item.id)">退回</view>
						<view class="seeBtn" @click="seeImg(item.imgs)">查看凭证</view>
					</view>
				</view>
			</view>
			

			
			
			
			
		</view>
		
		<view class="carBox" @click="goapply">
			<image src="../../static/img/wyc.png" mode="" class="wycImg"></image>
			<view class="carMs">网约车优享申请</view>
		</view>
		
		<!-- 认证 -->
		<view class="authentication" @click="rzHide()" v-if="rzShow">
			<view class="rzBox" @click.stop="">
				<view class="rzTitle">认证</view>
				<view class="wxsm">微信扫码填写认证信息</view>
				<view class="wxImgBox">
					<!-- <canvas canvas-id="qrcode" style="width: 437rpx;height: 437rpx;" /> -->
					 <canvas canvas-id="qrcode" :style="{width: `${qrcodeSize}px`, height: `${qrcodeSize}px`}" />
				</view>
				<view class="rzBottom">
					<view class="tzBottomBtn" @click="rzHide()">关闭</view>
				</view>
			</view>
		</view>
		
		
		<!-- <canvas canvas-id="qrcode" :style="{width: `${qrcodeSize}px`, height: `${qrcodeSize}px`}" /> -->
		
	</view>
</template>

<script>
	import uQRCode from '@/utils/uqrcode.js'
	export default {
		data() {
			return {
			    iStatusBarHeight:'',
				rzShow:false,
				page:1,
				name:'',
				items:'',
				shopID:'86B933FF-3782-4F82-A192-176E7A45AA13',
				shopName:'fzh123',
				sourceUserID:'00958045-3341-4AF7-9460-801F5B52E3E2',
				sourceName:'姜国远',
				qrcodeSrc: '',
				qrcodeSize:200,
				qrcodeText: '',
				url:'',
				token:'',
				uid:'',
			}
		},
		onLoad(opt) {
           this.iStatusBarHeight = uni.getSystemInfoSync().statusBarHeight;
		   this.getList();
		   console.log(opt)
		  this.token=opt.token;
		  this.uid=opt.uid
		   
		},
		created() {
			
		},
		methods: {
			make() {
				 uni.showLoading({
					title: '二维码生成中',
					mask: true
				}) 
			this.qrcodeText=this.url+'/#/pages/wyCar/apply'+'?shopID='+this.shopID+'&shopName='+this.shopName+'&sourceUserID='+this.sourceUserID+'&sourceName='+this.sourceName+'&token='+this.token+'&uid='+this.uid
			//console.log(this.qrcodeText)
				uQRCode.make({
					canvasId: 'qrcode',
					text: this.qrcodeText,
					size: this.qrcodeSize,
					margin: 10,
					success: res => {
						this.qrcodeSrc = res
						console.log('qrcodeSrc = ' + this.qrcodeSrc);
					},
					complete: () => {
						uni.hideLoading()
					}
				})
			},
			seeImg(imgs){
				if(imgs){
					var arr=imgs.split(',')
					uni.previewImage({
						urls: arr,
						longPressActions: {
							itemList: ['发送给朋友', '保存图片',],
							success: function(data) {},
							fail: function(err) {}
						}
					});
				}else{
					uni.showToast({
						title: '暂无凭证',
						icon: 'none',
						duration: 3000
					});
				}
			},
			examine(num,sheetId){
				var that = this;
				if(num==2){
					var content='确认审核通过？'
				}else{
					var content='确认退回？'
				}
				uni.showModal({
					title: '提示',
					content: content,
					success: function(res) {
						if (res.confirm) {
							uni.showLoading({
								title: '加载中'
							});
							that.$http('api/online-apply/state', {
								sheetId: sheetId,
								state: num
							}, 'POST').then(res => {
								uni.showToast({
									title: '操作成功',
									icon: 'none',
									duration: 3000
								});
				
								that.page = 1;
								that.getList()
							})
						} else if (res.cancel) {
				
						}
					}
				});
			},
			search(){
				this.page = 1
				this.getList()
			},
			getList(){
			    uni.showLoading({
			    	title: '加载中'
			    });
				this.isload = false;
				this.$http('api/online-apply/data', {
					input:this.name,
					page:this.page,
					limit:20,
				}, 'GET').then(res => {
					uni.hideLoading();
					this.isload = true;
					var list = res.data.data.Items;
					this.shopID=res.data.data.shopID;
					this.shopName=res.data.data.shopName;
					this.sourceName=res.data.data.sourceName;
					this.sourceUserID=res.data.data.sourceUserID
					this.url=res.data.data.url
				
					if (this.page == 1) {
						this.items = list
					} else {
						this.items = this.items.concat(list)
					}
				
				})
			},
			goapply(){
				uni.navigateTo({
					url:'/pages/wyCar/apply?shopID='+this.shopID+'&shopName='+this.shopName+'&sourceUserID='+this.sourceUserID+'&sourceName='+this.sourceName+'&token='+this.token+'&uid='+this.uid
				})
			},
			rzHide(){
				this.rzShow=false;
			},
			rzBtn(){
				this.rzShow=true;
				this.make();
			},
			goback(){
				
					//app交互
					var standalone = window.navigator.standalone
					var userAgent = window.navigator.userAgent.toLowerCase()
					var safari = /safari/.test(userAgent)
					var ios = /iphone|ipod|ipad|mac/.test(userAgent)
					var android = /android/.test(userAgent)
					if (ios) {
									 if ( true) {//!standalone&& !safari
									   window.webkit.messageHandlers.goMyNav.postMessage(null)
									 }
					} else if (android) {
									 window.android.postMessage()
					}
				
			   
			},
		},
		onPullDownRefresh() {
			this.page = 1;
			this.getList()
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		}
	}
</script>

<style scoped>
.authentication{
	width: 100vw;height: 100vh;
	background: rgba(0,0,0,0.6);
	position: fixed;
	left: 0;
	bottom: 0;
}
.tzBottomBtn{
	width: 682rpx;color: #FEFFFE;font-weight: 500;
	height: 74rpx;font-size: 28rpx;line-height:74rpx ;
	background: #3F90F7;text-align: center;
	border-radius: 37rpx;margin-top: 13rpx;
}
.rzBottom{
	background: #FFFFFF;
	box-shadow: 0rpx -2rpx 20rpx 0rpx rgba(153,153,153,0.2);
	height: 100rpx;
	width: 100vw;
	position: fixed;
	left: 0;
	bottom: 0;
}
.wxsm{
	font-weight: 400;font-size: 28rpx;padding-top: 100rpx;
	color: #3C3C3C;text-align: center;
}
.wxImgBox{
	width: 200px;
	height: 200px;
	background: #EDEDED;
	margin: 0 auto;
	margin-top: 30rpx;
}
.rzBox{
	width: 100vw;
	height: 60vh;
	background: #FFFFFF;
	margin-top: 40vh;
	border-radius: 32rpx 32rpx 0rpx 0rpx;
}
.rzTitle{
	font-weight: 500;font-size: 30rpx;padding-left: 24rpx;
	color: #3C3C3C;padding-top: 30rpx;
}
.carBox{
	position: fixed;left: 50rpx;bottom: 200rpx;text-align: center;
}
.wycImg{
	width: 68rpx;height: 68rpx;
}
.carMs{
	font-weight: 500;
	color: #333333;
	line-height: 33rpx;
	width: 104rpx;
	font-size: 24rpx;
}
.listBox{
	padding:0 24rpx;
}
.lineState2{
	background: #00A040;
}
.lineState3{
	background: #FF3B30;
}
.lineBottom{
	display: flex;justify-content: space-between;
	padding:16rpx 20rpx ;
}
.lineBottomBtnBox{
	display: flex;
}
.lineTime{
	color: #999999;
	font-size: 24rpx;
line-height: 50rpx;
}
.returnBtn{
	width: 96rpx;color: #FF8130;
	height: 48rpx;text-align: center;line-height: 48rpx;
	border-radius: 6rpx;
	border: 1rpx solid #FF8130;
}
.seeBtn{
	width: 136rpx;font-size: 24rpx;
	height: 48rpx;line-height: 48rpx;
	border-radius: 6rpx;text-align: center;
	border: 1rpx solid #DDDDDD;
	color: #3C3C3C;margin-left: 24rpx;
}
.lineName{
	display: flex;justify-content: space-between;
	padding: 10rpx 20rpx;
	border-bottom: 1px solid #DDDDDD;
}
.lineNameBox{
	font-weight: 500;font-size: 30rpx;
	color: #3C3C3C;line-height: 42rpx;
}
.plateNumberBox{
	color: #666666;font-size: 24rpx;
	line-height: 33rpx;padding-top: 10rpx;
}
.examine{
	width: 96rpx;color: #FFFFFF;
	height: 56rpx;font-size: 24rpx;
	background: #3F90F7;
	border-radius: 6rpx;
	line-height: 56rpx;
	text-align: center;
	margin-top: 18rpx;
}
.line{
	background: #FFFFFF;
	border-radius: 6rpx;
	margin-top: 20rpx;
}
.lineZt{
	width: 69rpx;line-height: 32rpx;
	height: 32rpx;font-size: 22rpx;
	text-align: center;color: #FFFFFF;
	border-radius: 10rpx 0rpx 10rpx 0rpx;
}
.lineState1{
	background: #FF8130;
}
.top{
	width: 750rpx;
	height: 72rpx;
	background: #FF8130;
	display: flex;
	justify-content: space-between;
}
.topLeft{
	font-size: 26rpx;
	display: flex;padding-left: 35rpx;padding-top: 17rpx;color: #FFFFFF;
}
.topImg{
	width: 24rpx;height: 24rpx;margin-left: 8rpx;margin-top: 6rpx;
}
.topRzBtn{
	width: 110rpx;font-size: 26rpx;
	height: 52rpx;line-height: 52rpx;text-align: center;
	background: #FFFFFF;
	border-radius: 6rpx;
	color: #FF8130;
	margin-top: 10rpx;
	margin-right: 24rpx;
}
.searchBox{
	background: #FFFFFF;
	padding: 24rpx;
}
.searchView{
	width: 702rpx;
	height: 36rpx;
	background: #F4F5F7;
	border-radius: 36rpx;
	display: flex;
	padding: 18rpx 0;
}
.searchImg{
	width: 36rpx;height: 36rpx;margin-left: 24rpx;
}
.searchInput{
	line-height: 36rpx;height: 36rpx;font-size: 26rpx;
	padding-left: 16rpx;
}
	.content{
		min-height: 100vh;
		background: #F6F6F6;
	}
	.zdyNavBox {
		width: 100vw;
		background: #FFFFFF;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 99;
	
	
	}
	
	.zdyNav {
		height: 44px;
		display: flex;
		justify-content: space-between;
	
		align-items: center;
	
	}
	
	.backImg {
		width: 44rpx;
		height: 44rpx;
		margin-left: 10rpx;
		margin-right: 20rpx;
	}
	
	.homeImg {
		width: 44rpx;
		height: 44rpx;
	
	}
	
	.zdyNavLeft {
		display: flex;
		align-items: center;
	}
	
	.zdyNavTitle {
	
		height: 44px;
		background: #FFFFFF;
		text-align: center;
		font-size: 34rpx;
		line-height: 44px;
	}
	
	
	
	.tab {
		background: #FFFFFF;
		display: flex;
		justify-content: space-between;
		line-height: 92rpx;
		/* position: fixed; */
		width: calc(100vw - 100rpx);
		padding-left: 50rpx;
		padding-right: 50rpx;
		height: 92rpx;
		z-index: 11;
		border-top: 1px solid #EEEEEE;
	}
	
	.tabLine {
	
		font-size: 28rpx;
		color: #333333;
		text-align: center;
	}
	
	.tabActive {
		color: #FF0000;
		font-weight: bold;
		border-bottom: 4rpx solid #FF0000;
	
	}
	
	.main {
		padding-top: 260rpx;
		padding-bottom: 20rpx;
		background-color: #F4F5F7;
	}
	
	.itemBg {
		margin: 20rpx 24rpx;
		background-color: #FFFFFF;
		border-radius: 10rpx;
		padding: 20rpx;
	}
	
	.itemTop {
		display: flex;
		justify-content: space-between;
	}
	
	.itemType {
		color: #999999;
		font-size: 24rpx;
	}
	
	.itemSheetState {
		font-size: 24rpx;
		color: #999999
	}
	.redColor {
		color: #FF0000;
	}
	.orangeColor {
		color: #F19D01;
	}
	.greenColor {
		color: #00A040;
	}
	
	
	.itemShopBg {
		display: flex;
		justify-content: space-between;
		margin-top: 20rpx;
	}
	
	.shopName {
		color: #333333;
		font-size: 30rpx;
		font-weight: bold;
		/* 隐藏文字显示 ...不换行 */
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	
	.price {
		color: #333333;
		font-weight: bold;
		font-size: 32rpx;
	}
	
	.itemName {
		color: #666666;
		font-size: 24rpx;
		padding-top: 16rpx;
		height: 30rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	
	.plateBg {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	
	.plateNumber {
		color: #666666;
		font-size: 24rpx;
		margin-bottom: 20rpx;
		display: flex;
	
	}
	
	.itemLineBottom {
		display: flex;
		justify-content: flex-end;
	
	}
	
	.itemBtn1 {
		width: 150rpx;
		height: 56rpx;
		border-radius: 36rpx;
		border: 2rpx solid #DDDDDD;
		text-align: center;
		line-height: 56rpx;
		font-size: 28rpx;
		color: #3C3C3C;
		margin-left: 40rpx;
	}
	
	.itemBtn2 {
		width: 150rpx;
		height: 56rpx;
		border-radius: 36rpx;
		border: 2rpx solid #FF4F00;
		text-align: center;
		line-height: 56rpx;
		font-size: 28rpx;
		color: #FF4F00;
		margin-left: 40rpx;
	}
	
	.orderState {
		color: #F19D01;
		font-size: 24rpx;
		padding-left: 20rpx;
	}
	.renBox{
		   color: #1A1A1A;
		   background: #F7F7F7;
		   border-radius: 10rpx;
		   display: flex;
		   padding: 20rpx;font-size: 24rpx;
		   line-height: 30rpx;
		   margin-top: 16rpx;
	}
	.renimg{
		   width: 30rpx;height: 30rpx;
	}
	.renMobilePhone{
		   padding-left: 13rpx;
	}
	.itemaddress{
		font-size: 24rpx;display: flex;
		color: #3C3C3C;padding-top: 16rpx;
		line-height: 33rpx;
	}
	.addressDD{
		width: 10rpx;
		height: 10rpx;
		background: #FF0000;
		border-radius: 50%;
		margin-top: 10rpx;
		margin-right: 5rpx;
	}
	.sschahao{
		width: 40rpx;
		height: 40rpx;
		padding-top: 16rpx;
	}
</style>