303 lines
7.0 KiB
Vue
303 lines
7.0 KiB
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="" v-if="videoUrl==''">
|
||
<image class="tip_img" src="https://lxnapi.ccttiot.com/bike/img/static/uXFG7Vee8MWx5y7pha2U" mode=""></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="" v-if="videoUrl!=''"></image>
|
||
<!-- https://lxnapi.ccttiot.com/bike/vadio/static/u4NKq2eQVg0QkrLP6Syw -->
|
||
<!-- <image src="https://lxnapi.ccttiot.com/bike/img/static/uAjjz6wpQALYAGUDx5UL" mode=""></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=""></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> |