2025-04-10 08:57:21 +08:00
|
|
|
|
<template>
|
|
|
|
|
<view class="page">
|
2025-04-11 18:23:16 +08:00
|
|
|
|
<u-navbar title="还车" :border-bottom="false" :background="bgc" title-color='#fff' title-size='36' height='45'
|
2025-04-10 08:57:21 +08:00
|
|
|
|
back-icon-color='#fff'></u-navbar>
|
|
|
|
|
<view class="tip_box">
|
|
|
|
|
请将车辆正确停放指定停车点后,环绕车拍摄视 频,押金将在审核通过后退还账户
|
|
|
|
|
</view>
|
|
|
|
|
<view class="cont">
|
|
|
|
|
<view class="tip_txt">
|
|
|
|
|
我们将在12小时内完成审核
|
|
|
|
|
</view>
|
|
|
|
|
<view class="vadio_png1">
|
2025-04-11 18:23:16 +08:00
|
|
|
|
<image @click="recordVideo" class="backimg" src="https://api.ccttiot.com/smartmeter/img/static/uTwV4aH6HbxqmM1ssvTs" mode="" v-if="videoUrl==''"></image>
|
2025-04-10 08:57:21 +08:00
|
|
|
|
<video class="vad" :src="videoUrl" controls="controls" style="width: 100%;" v-if="videoUrl!=''"></video>
|
|
|
|
|
</view>
|
2025-04-11 18:23:16 +08:00
|
|
|
|
<view class="tip_txt" style="font-weight: 500;font-size: 32rpx;color: #3D3D3D;margin-top: 30rpx;">
|
2025-04-10 08:57:21 +08:00
|
|
|
|
保持车辆录像的完整清晰,不要随意拍摄,确保视频中车辆出境,并且出现车牌号
|
|
|
|
|
</view>
|
|
|
|
|
<view class="vadio_png">
|
2025-04-11 18:23:16 +08:00
|
|
|
|
<image src="https://api.ccttiot.com/smartmeter/img/static/unL4myQWRXAKWCmKof4j" mode=""></image>
|
2025-04-10 08:57:21 +08:00
|
|
|
|
</view>
|
|
|
|
|
|
|
|
|
|
<view class="btn" @click="sub" :class='videoUrl!="" ? "act1": ""'>
|
|
|
|
|
还车
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
2025-04-11 18:23:16 +08:00
|
|
|
|
<!-- 扫码用车未在停车点内还车弹窗 -->
|
|
|
|
|
<view class="tingchetc" v-if="fjflag">
|
|
|
|
|
<view class="topname">
|
|
|
|
|
<image src="https://api.ccttiot.com/smartmeter/img/static/uDfEXjApmdS6ByM88pv3" mode=""></image> {{fajinobj.manageFee > 0 ? '不在运营区' : fajinobj.dispatchFee > 0 ? '不在停车点' : ''}}
|
|
|
|
|
</view>
|
|
|
|
|
<view class="shuom">
|
|
|
|
|
需支付<text>{{fajinobj.manageFee > 0 ? fajinobj.manageFee : fajinobj.dispatchFee > 0 ? fajinobj.dispatchFee : ''}}元</text>,你可查看<text @click="btntcd">最近停车点</text>
|
|
|
|
|
</view>
|
|
|
|
|
<image src="https://api.ccttiot.com/smartmeter/img/static/uzRrRFiToK3bb3IurIHU" class="tcimg" mode=""></image>
|
|
|
|
|
<view class="btnan">
|
|
|
|
|
<view class="fj" @click="btnfajin">
|
|
|
|
|
缴纳罚金还车
|
|
|
|
|
</view>
|
|
|
|
|
<view class="qx" @click="fjflag = false">
|
|
|
|
|
继续骑行
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
<view class="mask" v-if="fjflag"></view>
|
2025-04-10 08:57:21 +08:00
|
|
|
|
</view>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
export default {
|
|
|
|
|
data() {
|
|
|
|
|
return {
|
|
|
|
|
bgc: {
|
|
|
|
|
backgroundColor: "#4297F3",
|
|
|
|
|
},
|
|
|
|
|
videoPath: '',
|
|
|
|
|
imglist:[],
|
|
|
|
|
token: '',
|
|
|
|
|
upurl:'',
|
|
|
|
|
orderinfo:{},
|
|
|
|
|
userId:'',
|
2025-04-11 18:23:16 +08:00
|
|
|
|
videoUrl:'',
|
|
|
|
|
fjflag:false,
|
|
|
|
|
fajinobj:{},
|
|
|
|
|
orderAreaId:''
|
2025-04-10 08:57:21 +08:00
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
onLoad(e) {
|
|
|
|
|
this.orderId = e.orderid
|
2025-04-11 18:23:16 +08:00
|
|
|
|
this.orderAreaId = e.orderAreaId
|
2025-04-10 08:57:21 +08:00
|
|
|
|
},
|
|
|
|
|
onShow() {
|
|
|
|
|
this.getQiniuToken()
|
|
|
|
|
// this.getuserInfo()
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
2025-04-11 18:23:16 +08:00
|
|
|
|
// 点击缴纳罚金继续还车
|
|
|
|
|
btnfajin(){
|
|
|
|
|
this.fjflag = false
|
|
|
|
|
this.gethc()
|
|
|
|
|
},
|
|
|
|
|
// 点击跳转到最近停车点
|
|
|
|
|
btntcd(){
|
|
|
|
|
uni.navigateTo({
|
|
|
|
|
url:'/pages/myorder/returned/tingche?areaId=' + this.orderAreaId
|
|
|
|
|
})
|
|
|
|
|
},
|
2025-04-10 08:57:21 +08:00
|
|
|
|
sub(){
|
|
|
|
|
uni.getLocation({
|
|
|
|
|
type: 'wgs84',
|
|
|
|
|
success: (res) => {
|
|
|
|
|
console.log(res);
|
|
|
|
|
this.lat = res.latitude
|
|
|
|
|
this.lon = res.longitude
|
|
|
|
|
this.getfeiyong()
|
|
|
|
|
},
|
|
|
|
|
fail: (err) => {
|
|
|
|
|
console.error('获取位置失败:', err)
|
|
|
|
|
this.getfeiyong()
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
},
|
2025-04-11 18:23:16 +08:00
|
|
|
|
// 点击还车判断是否需要另外缴费
|
2025-04-10 08:57:21 +08:00
|
|
|
|
getfeiyong(){
|
2025-04-11 18:23:16 +08:00
|
|
|
|
let data = {
|
|
|
|
|
orderId:this.orderId,
|
|
|
|
|
lon:this.lat,
|
|
|
|
|
lat:this.lon
|
|
|
|
|
}
|
|
|
|
|
this.$u.post(`/app/order/calcFee`,data).then(res =>{
|
|
|
|
|
if(res.code == 200){
|
|
|
|
|
this.fajinobj = res.data
|
|
|
|
|
if(res.data.manageFee > 0 || res.data.dispatchFee > 0){
|
|
|
|
|
this.fjflag = true
|
|
|
|
|
// this.gethc()
|
|
|
|
|
}else{
|
|
|
|
|
// this.fjflag = true
|
|
|
|
|
this.gethc()
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
},
|
|
|
|
|
gethc(){
|
2025-04-10 08:57:21 +08:00
|
|
|
|
let data = {
|
|
|
|
|
orderId:this.orderId,
|
|
|
|
|
picture:this.videoUrl,
|
|
|
|
|
lon:this.lon,
|
|
|
|
|
lat:this.lat
|
|
|
|
|
}
|
|
|
|
|
this.$u.put(`/app/order/end`,data).then(res =>{
|
|
|
|
|
if(res.code == 200){
|
|
|
|
|
uni.showToast({
|
|
|
|
|
title: '还车成功',
|
|
|
|
|
icon: 'success',
|
|
|
|
|
duration: 2000
|
|
|
|
|
})
|
|
|
|
|
setTimeout(()=>{
|
|
|
|
|
uni.switchTab({
|
|
|
|
|
url:'/pages/myorder/returned/index'
|
|
|
|
|
})
|
|
|
|
|
},1500)
|
|
|
|
|
}else{
|
|
|
|
|
uni.showToast({
|
|
|
|
|
title: res.msg,
|
|
|
|
|
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/qiniuToken").then((res) => {
|
|
|
|
|
if (res.code == 200) {
|
|
|
|
|
this.token=res.data
|
|
|
|
|
// 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 = 'https://api.ccttiot.com/' + str.key
|
|
|
|
|
console.log(_this.userImgs)
|
|
|
|
|
// _this.imglist.push(_this.userImgs)
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
<style lang="scss">
|
|
|
|
|
page {
|
|
|
|
|
background-color: #F7FAFE;
|
|
|
|
|
}
|
2025-04-11 18:23:16 +08:00
|
|
|
|
.mask{
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100vh;
|
|
|
|
|
position: fixed;
|
|
|
|
|
top: 0;
|
|
|
|
|
left: 0;
|
|
|
|
|
background-color: rgba(0, 0, 0, .3);
|
|
|
|
|
z-index: 9;
|
|
|
|
|
}
|
|
|
|
|
.tingchetc{
|
|
|
|
|
width: 624rpx;
|
|
|
|
|
height: 610rpx;
|
|
|
|
|
background: #FFFFFF;
|
|
|
|
|
border-radius: 20rpx 20rpx 20rpx 20rpx;
|
|
|
|
|
position: fixed;
|
|
|
|
|
left: 50%;
|
|
|
|
|
transform: translateX(-50%);
|
|
|
|
|
top: 572rpx;
|
|
|
|
|
z-index: 10;
|
|
|
|
|
padding: 28rpx 36rpx;
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
.btnan{
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
margin-top: 40rpx;
|
|
|
|
|
.fj{
|
|
|
|
|
width: 252rpx;
|
|
|
|
|
height: 72rpx;
|
|
|
|
|
border-radius: 45rpx 45rpx 45rpx 45rpx;
|
|
|
|
|
border: 2rpx solid #808080;
|
|
|
|
|
font-weight: 600;
|
|
|
|
|
font-size: 32rpx;
|
|
|
|
|
color: #808080;
|
|
|
|
|
text-align: center;
|
|
|
|
|
line-height: 72rpx;
|
|
|
|
|
}
|
|
|
|
|
.qx{
|
|
|
|
|
width: 252rpx;
|
|
|
|
|
height: 72rpx;
|
|
|
|
|
background: #4C97E7;
|
|
|
|
|
border-radius: 45rpx 45rpx 45rpx 45rpx;
|
|
|
|
|
text-align: center;
|
|
|
|
|
line-height: 72rpx;
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
font-weight: 600;
|
|
|
|
|
font-size: 32rpx;
|
|
|
|
|
color: #FFFFFF;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.tcimg{
|
|
|
|
|
width: 552rpx;
|
|
|
|
|
height: 300rpx;
|
|
|
|
|
margin-top: 28rpx;
|
|
|
|
|
}
|
|
|
|
|
.shuom{
|
|
|
|
|
font-size: 26rpx;
|
|
|
|
|
color: #3D3D3D;
|
|
|
|
|
margin-top: 18rpx;
|
|
|
|
|
text{
|
|
|
|
|
color: #4C97E7;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.topname{
|
|
|
|
|
font-weight: 600;
|
|
|
|
|
font-size: 36rpx;
|
|
|
|
|
color: #3D3D3D;
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
image{
|
|
|
|
|
width: 48rpx;
|
|
|
|
|
height: 48rpx;
|
|
|
|
|
margin-right: 14rpx;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
2025-04-10 08:57:21 +08:00
|
|
|
|
.page {
|
|
|
|
|
// width: 750rpx;
|
|
|
|
|
width: 750rpx;
|
|
|
|
|
// height: 530rpx;
|
|
|
|
|
// background: linear-gradient( 180deg, #4297F3 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: #ccc;
|
|
|
|
|
// background: #4297F3;
|
|
|
|
|
}
|
|
|
|
|
.vadio_png1{
|
|
|
|
|
position: relative;
|
|
|
|
|
width: 672rpx;
|
|
|
|
|
height: 370rpx;
|
|
|
|
|
margin-top: 30rpx;
|
|
|
|
|
.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 {
|
|
|
|
|
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: #4297F3;
|
|
|
|
|
border-radius: 54rpx 54rpx 54rpx 54rpx;
|
|
|
|
|
z-index: 10;
|
|
|
|
|
font-weight: 500;
|
|
|
|
|
font-size: 40rpx;
|
|
|
|
|
color: #FFFFFF;
|
|
|
|
|
}
|
|
|
|
|
.act1{
|
|
|
|
|
background: #4297F3;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</style>
|