bike-ali/page_user/vadio_back.vue

<template>
	<view class="page">
		<u-navbar title="拍照还车" :border-bottom="false" :background="bgc" title-color='#fff' title-size='36' height='45'
			back-icon-color='#fff'></u-navbar>
		<view class="tip_box">
			请将车辆正确停放指定停车点后，环绕车拍摄视 频，押金将在审核通过后退还账户
		</view>
		<view class="cont">
			<view class="tip_txt">
				我们将在12小时内完成审核
			</view>
			<view class="vadio_png1" @click="recordVideo">
				<image  class="backimg" src="https://lxnapi.ccttiot.com/bike/img/static/uEP0UPJw6a1WuxA7ZlMo" mode="aspectFit" v-if="videoUrl==''">
					<image class="tip_img" src="https://lxnapi.ccttiot.com/bike/img/static/uXFG7Vee8MWx5y7pha2U" mode="aspectFit"></image>
				</image>
				<video class="vad" :src="videoUrl" controls="controls" style="width: 100%;" v-if="videoUrl!=''"></video>
				<view class="glass" v-if="videoUrl!=''"></view>
				<image class="tip_img" src="https://lxnapi.ccttiot.com/bike/img/static/uXFG7Vee8MWx5y7pha2U" mode="aspectFit" v-if="videoUrl!=''"></image>
				<!-- https://lxnapi.ccttiot.com/bike/vadio/static/u4NKq2eQVg0QkrLP6Syw -->
				<!-- <image src="https://lxnapi.ccttiot.com/bike/img/static/uAjjz6wpQALYAGUDx5UL" mode="aspectFit"></image> -->
			</view>
			<view class="tip_txt" style="font-weight: 500;font-size: 32rpx;color: #3D3D3D;">
				保持车辆录像的完整清晰,不要随意拍摄，确保视频中车辆出境，并且出现车牌号
			</view>
			<view class="vadio_png">
				<image src="https://lxnapi.ccttiot.com/bike/img/static/uVuGMvfe3xlz3x8WSmcC" mode="aspectFit"></image>
			</view>
			
			<view class="btn" @click="sub" :class='videoUrl!="" ? "act1": ""'>
				下一步
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				bgc: {
					backgroundColor: "#64B6A7",
				},
				videoPath: '',
				imglist:[],
				token: '',
				upurl:'',
				orderinfo:{},
				userId:'',
				videoUrl:''
				
			}
		},
		onLoad(e) {


		},
		onShow() {
			this.getQiniuToken()
			this.getuserInfo()
		},
		methods: {
			sub(){
				if(this.videoUrl!=''){
					let data={
						orderNo:this.orderinfo.orderNo,
						videoUrl:this.videoUrl
					}
					this.$u.put('/appVerify/order/saveVideoUrl',data ).then((res) => {
						// uni.hideLoading()
						if (res.code === 200) {
							uni.redirectTo({
								url:'/pages/index/index?isupload=true'
							})
							// uni.navigateBack({
							// 	delta: 1 // delta值为1时表示返回的页面层数
							// });
						} else {
								uni.showToast({
									title: res.msg,
									icon: 'none',
									duration: 2000
								});
						}
					})
				}else{
					uni.showToast({
						title:'请上传录像',
						icon: 'none',
						duration: 2000
					});
				}
				
			},
			getisInOrder() {
				// uni.showLoading({
			
				// })
				this.orderinfo = {}
				if (this.userId) {
					this.$u.post('/app/user/isInOrder?userId=' + this.userId, ).then((res) => {
						// uni.hideLoading()
						if (res.code === 200) {
							// this.freList=res.rows
							this.orderinfo=res.data[0]
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none',
								duration: 2000
							});
						}
					})
				}
			
			},
			getuserInfo() {
				
				this.$u.get("/getAppInfo").then((res) => {
			
					if (res.code == 200) {	
					
						this.$store.commit('SET_USERID', res.user.userId);
						this.info = res.user
						this.userId=res.user.userId
						this.getisInOrder()
						// if( res.user.role==2){
						// 	uni.navigateTo({
						// 		url:'/page_fix/fix_index'
						// 	})
						// }
					} else {
			
						
			
					}
				});
			},
			getQiniuToken() {
				console.log('diaou');
					this.$u.get("/common/qiniu/uploadInfo").then((res) => {
						if (res.code == 200) {
						this.token=res.token
						console.log(res,'resres');
						this.upurl=res.domain
						}
					});
				// this.$u.get('https://v2.ielts.langsi.online/file/getToken').then(res => {
				// 	console.log(res.data);
				// 	this.token = res.data.token
				// }).catch(err => {
				// 	console.log(err)
				// })
				
			},
			recordVideo() {
				// 调用录像API
				uni.chooseVideo({
					sourceType: ['camera'], // 指定使用相机录像
					camera: 'back', // 指定使用后置摄像头，可选值有front、back
					maxDuration: 15, // 最大录制时长（秒）
					success: (res) => {
						// 获取视频录制文件的临时路径
						this.videoPath = res.tempFilePath;
						console.log(res.tempFilePath);
						this.upload()
					},
					fail: (err) => {
						console.log('录像失败：', err);
					}
				});
			},
			upload(){
				uni.showLoading({
					title:'上传中'
				})
				let _this=this
				let math='static/'+_this.$u.guid(20)
				wx.uploadFile({
					url: 'https://up-z2.qiniup.com', 
					name: 'file',
					filePath: this.videoPath,
					formData: {
						token: _this.token, //后端返回的token
						key:'bike/video/'+math
					},
					success: function(res) {
						uni.hideLoading()
						console.log(res,'resres');
						let str = JSON.parse(res.data)
						console.log(str.key)
						_this.videoUrl = _this.upurl +'/'+ str.key
						console.log(_this.userImgs)
						// _this.imglist.push(_this.userImgs)
					}
				});
			}
		}
	}
</script>
<style lang="scss">
	page {
		background-color: #F7FAFE;
	}

	.page {
		// width: 750rpx;
		width: 750rpx;
		// height: 530rpx;
		// background: linear-gradient( 180deg, #64B6A7 0%, rgba(255,255,255,0) 100%), #FFFFFF;
		border-radius: 0rpx 0rpx 0rpx 0rpx;

		.tip_box {
			padding: 44rpx 36rpx;
			font-weight: 400;
			font-size: 32rpx;
			color: #FFFFFF;
			background: #64B6A7;
		}
		.vadio_png1{
			position: relative;
			width: 672rpx;
			height: 370rpx;
			.backimg{
				
				width: 672rpx;
				height: 370rpx;
				
			}
			.tip_img{
				position: absolute;
				top: 72rpx;
				left: 210rpx;
				width: 252rpx;
				height: 194rpx;
					z-index: 11;
			}
			.vad{
				width: 672rpx;
				height: 370rpx;
				border-radius: 40rpx;
				z-index: 1;
			}
			.glass{
				position: absolute;
				top: 0;
				left: 0;
				width: 672rpx;
				height: 370rpx;
				background: rgba(255, 255, 255, 0.2);
				border-radius: 40rpx;
				// box-shadow: 0 rgba(0, 0, 0, 0.1);
				backdrop-filter: blur(10rpx);
				-webkit-backdrop-filter: blur(10rpx); /* For Safari */
				// border: 1rpx solid rgba(255, 255, 255, 0.3);
				z-index: 10;
				  
			}
			
		}
		.cont {
			width: 100%;
			padding: 0 39rpx;

			.tip_txt {
				margin-top: 38rpx;
				width: 100%;
				font-weight: 400;
				font-size: 28rpx;
				color: #3D3D3D;
			}

			.vadio_png {
				margin-top: 52rpx;

				image {
					width: 672rpx;
					height: 370rpx;
				}
			}

			.btn {
				position: fixed;
				bottom: 100rpx;
				left: 38rpx;
				// margin-top: 128rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				width: 680rpx;
				height: 90rpx;
				background: rgba(100,182,167,0.5);
				border-radius: 54rpx 54rpx 54rpx 54rpx;
				z-index: 10;
				font-weight: 500;
				font-size: 40rpx;
				color: #FFFFFF;
			}
			.act1{
				background: #64B6A7;
			}
		}
	}
</style>