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_png" @click="recordVideo">
				<image src="https://lxnapi.ccttiot.com/bike/img/static/uAjjz6wpQALYAGUDx5UL" mode=""></image>
			</view>
			<view class="tip_txt" style="font-weight: 600;font-size: 32rpx;color: #3D3D3D;">
				保持车辆录像的完整清晰
			</view>
			<view class="vadio_png">
				<image src="https://lxnapi.ccttiot.com/bike/img/static/uVuGMvfe3xlz3x8WSmcC" mode=""></image>
			</view>
			
			<view class="btn">
				提交
			</view>
		</view>
	</view>
</template>

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


		},
		onShow() {
			this.getQiniuToken()
		},
		methods: {
			
			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(){
				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/vadio/'+math
					},
					success: function(res) {
						console.log(res,'resres');
						let str = JSON.parse(res.data)
						console.log(str.key)
						_this.userImgs = _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;
		}

		.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 {
				margin-top: 128rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				width: 680rpx;
				height: 90rpx;
				background: #64B6A7;
				border-radius: 54rpx 54rpx 54rpx 54rpx;

				font-weight: 500;
				font-size: 40rpx;
				color: #FFFFFF;
			}
		}
	}
</style>