z-index: 2; | z-index: 2; | ||||
} | } | ||||
/* | |||||
.container { | .container { | ||||
position: relative; | position: relative; | ||||
height: 100vh; | height: 100vh; | ||||
} | |||||
} */ | |||||
.content { | |||||
/* .content { | |||||
position: absolute; | position: absolute; | ||||
top: 50%; | top: 50%; | ||||
left: 50%; | left: 50%; | ||||
transform: translate(-50%, -50%); | transform: translate(-50%, -50%); | ||||
/* 这是你要垂直居中的内容 */ | |||||
} | } | ||||
*/ | |||||
</style> | </style> |
<template> | |||||
<view style="width: 100%;height: 100vh;position: fixed;left: 0;top:0;z-index: 111111;"> | |||||
<view class="viewfinder"> | |||||
<!-- <view v-if="phoneType == 1" | |||||
style="display: flex;align-items: center;justify-content: flex-end;width: 100%;height: 100%;"> | |||||
<image :src="fileURL + 'image/index/etc_bd_ocr_id_card_locator_back.png'" | |||||
style="height: 220rpx;margin-right: 30rpx;" mode="heightFix"></image> | |||||
</view> | |||||
<view v-if="phoneType == 2" style="margin: 30rpx 0 0 30rpx;"> | |||||
<image :src="fileURL + 'image/index/etc_bd_ocr_id_card_locator_front.png'" style="height: 160rpx;" | |||||
mode="heightFix"> | |||||
</image> | |||||
</view> --> | |||||
<view v-if="phoneType == 1" | |||||
style="margin: -30rpx 0 0 30rpx;display: flex;height: 100%;align-self: flex-end;flex-direction: column;justify-content: flex-end;"> | |||||
<view style="border: 1px solid #fff;height: 160rpx;width: 160rpx;"> | |||||
</view> | |||||
</view> | |||||
<view v-if="phoneType == 2" | |||||
style="margin: -30rpx 30rpx 0 0;display: flex;height: 100%;justify-content: flex-end;align-items: flex-end;"> | |||||
<view style="border: 1px solid #fff;height: 60rpx;width: 300rpx;"> | |||||
</view> | |||||
</view> | |||||
</view> | |||||
<!-- camera --> | |||||
<camera v-if="showStartPhoto" id="camera" style="height: 70vh;width: 100vh;background-color: black;width: 100%;" | |||||
mode="normal" :device-position="cameraPosition" :flash="flash" @stop="cameraStop" @error="cameraError" /> | |||||
<image v-if="!showStartPhoto" :src="srcImg" style="height: 98vh;width: 100vh;" mode="scaleToFill"></image> | |||||
<view style="background-color: #A5A5A5;top: 60%;width: 100%;height: 40%;position: absolute;"> | |||||
<view style="display: flex;flex-direction: row;justify-content: center;align-items: center;height: 100%;"> | |||||
<view style="flex: 1;"></view> | |||||
<image v-if="!showStartPhoto" @click="camera" :src="fileURL + 'image/index/etc_bd_ocr_cancel.png'" | |||||
style="width: 50rpx;height: 50rpx;"></image> | |||||
<view style="flex: 1;"></view> | |||||
<image @click="takePhoto" :src="fileURL + 'image/index/etc_bd_ocr_take_photo_normal.png'" | |||||
style="width: 140rpx;height: 140rpx;"></image> | |||||
<view style="flex: 1;"></view> | |||||
<image v-if="!showStartPhoto" @click="success" :src="fileURL + 'image/index/etc_bd_ocr_confirm.png'" | |||||
style="width: 50rpx;height: 50rpx;"></image> | |||||
<view style="flex: 1;"></view> | |||||
</view> | |||||
</view> | |||||
</view> | |||||
</template> | |||||
<script setup lang="ts"> | |||||
import { | |||||
fileURL | |||||
} from "@/datas/fileURL.js"; | |||||
import { | |||||
ref | |||||
} from 'vue' | |||||
let prop = defineProps({ | |||||
phoneType: { | |||||
type: Number, | |||||
default: function () { | |||||
return 3 //1 身份证正面 2 身份证反面 3 行驶证正面 4 行驶证反面 | |||||
} | |||||
}, | |||||
}); | |||||
console.log('输出内容', prop.phoneType) | |||||
const emit = defineEmits<{ | |||||
(e : "confirmReturn", content : any) : void; | |||||
(e : "failReturn", content : any) : void; | |||||
}>(); | |||||
let cameraPosition = 'back' // 'back'为后置摄像头,'front'为前置摄像头 | |||||
let flash = 'off' // 'off'为关闭闪光灯,'on'为打开闪光灯 | |||||
let showStartPhoto = ref(true) | |||||
let srcImg = ref('') | |||||
let resItem = ref(null); | |||||
function takePhoto() { | |||||
console.log('输出内容', '===123') | |||||
let cameraContext = null | |||||
// #ifdef MP-WEIXIN | |||||
cameraContext = uni.createCameraContext(); | |||||
// #endif | |||||
// #ifdef MP-ALIPAY | |||||
cameraContext = my.createCameraContext('camera'); | |||||
// #endif | |||||
// 调用拍照方法 | |||||
cameraContext.takePhoto({ | |||||
quality: 'normal', | |||||
success: (res) => { | |||||
// 在这里处理拍照成功后的逻辑,res.tempImagePath 为拍照的图片路径 | |||||
console.log('拍照成功:', res.tempImagePath); | |||||
srcImg.value = res.tempImagePath | |||||
// showStartPhoto.value = false | |||||
// resItem.value = res | |||||
// // #ifdef MP-ALIPAY | |||||
// cameraContext.stopRecord(); | |||||
// emit('confirmReturn', res) | |||||
// // #endif | |||||
cameraContext.stopRecord(); | |||||
emit('confirmReturn', res) | |||||
}, | |||||
fail: (error) => { | |||||
console.error('拍照失败:', error); | |||||
emit('failReturn', error); | |||||
}, | |||||
}); | |||||
} | |||||
//成功 | |||||
function success() { | |||||
console.log('成功:', resItem.value); | |||||
emit('confirmReturn', resItem.value) | |||||
} | |||||
//重新拍摄 | |||||
function camera() { | |||||
showStartPhoto.value = true | |||||
} | |||||
function cameraStop() { | |||||
// 相机停止时的回调 | |||||
console.log('相机已停止'); | |||||
} | |||||
function cameraError(e) { | |||||
// 相机出错时的回调 | |||||
console.error('相机错误:', e.detail.errMsg); | |||||
} | |||||
</script> | |||||
<style> | |||||
.viewfinder { | |||||
position: absolute; | |||||
top: 20%; | |||||
left: 10%; | |||||
width: 80%; | |||||
height: 400rpx; | |||||
border: 2px solid #fff; | |||||
box-sizing: border-box; | |||||
border-radius: 16rpx; | |||||
z-index: 2; | |||||
} | |||||
</style> |
<view class="btn btn-primary" @click.stop="gotoOrderDetailsPay(item)">支付</view> | <view class="btn btn-primary" @click.stop="gotoOrderDetailsPay(item)">支付</view> | ||||
</view> | </view> | ||||
<view class="btns" v-if="item.orderStep == OrderStatus.待支付2"> | <view class="btns" v-if="item.orderStep == OrderStatus.待支付2"> | ||||
<!-- <view class="btn btn-normal" @click.stop="gotoEditUserOrUnitInfo(item)">修改资料</view> --> | |||||
<view class="btn btn-normal" @click.stop="gotoCancelOrder(item)">取消订单</view> | <view class="btn btn-normal" @click.stop="gotoCancelOrder(item)">取消订单</view> | ||||
<view class="btn btn-primary" @click.stop="gotoOrderDetailsPay(item)">支付</view> | <view class="btn btn-primary" @click.stop="gotoOrderDetailsPay(item)">支付</view> | ||||
</view> | </view> | ||||
<view class="btns" v-if="item.orderStep == OrderStatus['已支付/待签约']"> | <view class="btns" v-if="item.orderStep == OrderStatus['已支付/待签约']"> | ||||
<!-- <view class="btn btn-normal" @click.stop="gotoEditUserOrUnitInfo(item)">修改资料</view> --> | |||||
<view class="btn btn-normal" @click.stop="gotoCancelOrder(item)">取消订单</view> | <view class="btn btn-normal" @click.stop="gotoCancelOrder(item)">取消订单</view> | ||||
<view class="btn btn-primary" @click.stop="gotoOrderSign(item)">去签约</view> | <view class="btn btn-primary" @click.stop="gotoOrderSign(item)">去签约</view> | ||||
</view> | </view> | ||||
<!-- 审核中/审核不通过 --> | <!-- 审核中/审核不通过 --> | ||||
<view class="btns" v-if="item.orderStep == OrderStatus.待审核 || item.orderStep == OrderStatus.审核不通过"> | <view class="btns" v-if="item.orderStep == OrderStatus.待审核 || item.orderStep == OrderStatus.审核不通过"> | ||||
<view class="btn btn-normal" v-if="item.orderStep == OrderStatus.审核不通过" | |||||
@click.stop="gotoEditUserOrUnitInfo(item)">修改资料</view> | |||||
<!-- <view class="btn btn-normal" v-if="item.orderStep == OrderStatus.审核不通过" | |||||
@click.stop="gotoEditUserOrUnitInfo(item)">修改资料</view> --> | |||||
<view class="btn btn-normal" @click.stop="gotoCancelOrder(item)">取消订单</view> | <view class="btn btn-normal" @click.stop="gotoCancelOrder(item)">取消订单</view> | ||||
<!-- <view class="btn btn-primary" @click.stop="gotoEditAddress(item)">修改地址</view> --> | <!-- <view class="btn btn-primary" @click.stop="gotoEditAddress(item)">修改地址</view> --> | ||||
</view> | </view> |
}; | }; | ||||
const deleteHandle = () => { | const deleteHandle = () => { | ||||
if(getItem(StorageKeys.OpenId)){ | |||||
if (getItem(StorageKeys.OpenId)) { | |||||
state.formData.openId = getItem(StorageKeys.OpenId); | state.formData.openId = getItem(StorageKeys.OpenId); | ||||
const options = { | const options = { | ||||
type: 2, | type: 2, | ||||
data: state.formData, | data: state.formData, | ||||
delta: 1, | delta: 1, | ||||
}); | }); | ||||
}); | }); | ||||
}else{ | |||||
} else { | |||||
uni.navigateTo({ | uni.navigateTo({ | ||||
url: `/subpackage/orders/essential-information?del=1` | url: `/subpackage/orders/essential-information?del=1` | ||||
}); | }); | ||||
/* 新增/编辑收货地址 */ | /* 新增/编辑收货地址 */ | ||||
const queryAddOrEditAddress = (code, data) => { | const queryAddOrEditAddress = (code, data) => { | ||||
if(getItem(StorageKeys.OpenId)){ | |||||
if (getItem(StorageKeys.OpenId)) { | |||||
const options = { | const options = { | ||||
type: 2, | type: 2, | ||||
data: data, | data: data, | ||||
delta: 1, | delta: 1, | ||||
}); | }); | ||||
}); | }); | ||||
}else{ | |||||
uni.$emit('updateData',state.formData) | |||||
} else { | |||||
uni.$emit('updateData', state.formData) | |||||
uni.navigateBack({ | uni.navigateBack({ | ||||
delta: 1, | |||||
delta: 1, | |||||
}); | }); | ||||
} | } | ||||
}; | }; | ||||
} | } | ||||
.action { | .action { | ||||
padding-left: 20rpx; | padding-left: 20rpx; | ||||
padding-right: 20rpx; | padding-right: 20rpx; | ||||
padding-bottom: 30rpx; | padding-bottom: 30rpx; | ||||
display: flex; | display: flex; | ||||
width: 90%; | |||||
justify-content: space-between; | |||||
.button::after { | .button::after { | ||||
border: none; | border: none; |
// uni.navigateTo({ | // uni.navigateTo({ | ||||
// url: `/subpackage/orders/product-detail?orderId=${state.orderId}&&clientFee=${state.clientFee}&&id=${state.id}`, | // url: `/subpackage/orders/product-detail?orderId=${state.orderId}&&clientFee=${state.clientFee}&&id=${state.id}`, | ||||
// }); | // }); | ||||
uni.switchTab({ | |||||
url: "/pages/order/order" | |||||
}) | |||||
setTimeout(() => { | |||||
uni.switchTab({ | |||||
url: "/pages/order/order" | |||||
}) | |||||
}, 1500) | |||||
} else if (data.userState === "PAUSED") { | } else if (data.userState === "PAUSED") { | ||||
msg("已暂停车主服务"); | msg("已暂停车主服务"); | ||||
return; | return; |
.content { | .content { | ||||
position: relative; | position: relative; | ||||
// margin-top: -50rpx; | // margin-top: -50rpx; | ||||
padding: 0rpx 30rpx; | |||||
padding: 14rpx 30rpx; | |||||
position: relative; | position: relative; | ||||
.img-pos { | .img-pos { |
// export const URL = "trial.etcjz.cn"; | // export const URL = "trial.etcjz.cn"; | ||||
export const URL = "qtzl.etcjz.cn"; | export const URL = "qtzl.etcjz.cn"; | ||||
// export const URL = "qtzl.etcjz.cn/test"; | // export const URL = "qtzl.etcjz.cn/test"; | ||||
// http://192.168.100.63:50001 | |||||
/** | /** | ||||
* 配置信息,针对不同的平台进行配置 | * 配置信息,针对不同的平台进行配置 | ||||
*/ | */ |