``
<template>
<view class="out-page">
<camera device-position="front" flash="off" @error="error" class="vid" v-if="vieShow">
</camera>
<cover-image src="../../static/front-camera.png" class="bj"></cover-image>
<cover-image src="../../static/camera-tips.png" class="bj-tit"></cover-image>
<view class="btn" v-if="vieShow">
<view>倒计时</view>
<view @click="takePhoto">拍照</view>
<view>翻转</view>
</view>
<view class="blick-bj" v-else>
<view>加载中请稍后</view>
</view>
</view>
</template>
<script setup>
import {
ref,
onMounted
} from "vue";
let vieShow = ref(false)
let src = ref('')
onMounted(() => {
setTimeout(() => {
vieShow.value = true
console.log('初始化')
}, 1000)
})
let takePhoto = () => {
let ctx = uni.createCameraContext();
console.log('实例', ctx)
ctx.takePhoto({
quality: 'high',
success: (res) => {
console.log('画面信息', res)
let src = res.tempImagePath //获取到的画面信息
uni.navigateTo({
url: `/pages/lookPhoto/lookPhoto?src=${src}`
})
},
fail: (err) => {
console.log('出错了', err)
}
});
}
</script>
<style lang="scss">
.out-page {
width: 100%;
height: 100vh;
.blick-bj {
width: 100%;
height: 100vh;
background-color: #000000;
color: #ffffff;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
font-weight: bold;
}
.vid {
width: 100%;
// height: calc(100vh - 400rpx);
height: 300px;
}
.bj {
width: 100%;
height: calc(100vh - 400rpx);
position: fixed;
top: 0;
left: 0;
}
.bj-tit {
width: 300px;
height: 58px;
position: fixed;
top: 100px;
left: 50%;
transform: translateX(-50%);
}
.btn {
width: 100%;
height: 400rpx;
color: #ffffff;
background-color: #000000;
padding: 60rpx 0;
box-sizing: border-box;
position: fixed;
left: 0;
bottom: 0;
display: flex;
align-items: center;
justify-content: space-evenly;
}
}
</style>
``
0 个回复