|
|
@@ -4,9 +4,24 @@
|
|
|
|
|
|
<!-- 扫描框 -->
|
|
|
<view class="scanBox" >
|
|
|
- <camera :class="status==0?'scancode':'camera'" :mode="status==0?'scanCode':'normal'" @scancode="scancode" :flash='flashBtn'>
|
|
|
- <image v-if='status==0' class="coverImg" :src="iconScanBgGif"></image>
|
|
|
- </camera>
|
|
|
+ <view class="scan-view">
|
|
|
+ <view class="scan-border">
|
|
|
+ <camera :class="status==0?'scan-camera':'camera'" @error="error" :mode="status==0?'scanCode':'normal'" @scancode="scancode" :flash='flashBtn'>
|
|
|
+ <cover-view v-if='status==0'
|
|
|
+ class="scan-animation"
|
|
|
+ :animation="animation"
|
|
|
+ ></cover-view>
|
|
|
+ <!-- <cover-view class="scan-pict"
|
|
|
+ ><cover-image
|
|
|
+ class="pic"
|
|
|
+ src="../../static/images/selectpic.png"
|
|
|
+ ></cover-image>
|
|
|
+ </cover-view> -->
|
|
|
+
|
|
|
+ </camera>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
|
|
|
<view class="scanTip">{{status==1?'请':'请扫描二维码'}}</view>
|
|
|
<!-- 关闭扫码页面 -->
|
|
|
@@ -19,8 +34,6 @@
|
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
-
|
|
|
-
|
|
|
</view>
|
|
|
</view>
|
|
|
</template>
|
|
|
@@ -28,22 +41,28 @@
|
|
|
<script>
|
|
|
// import { iconScanBgGif,scancodeOpen,scancodeClose } from "../../../utils/imgUrl/index";
|
|
|
// const permisson = require("../../../utils/tools/permisson"); // 权限校验封装
|
|
|
+import uploadImage from '@/components/ossutil/uploadFile.js';
|
|
|
const userCameraName = "scope.camera"; // 摄像头权限
|
|
|
const userCameraZhName = "手机摄像头"; // 摄像头权限对应的中文名称
|
|
|
+let animation = uni.createAnimation({});
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
- iconScanBgGif:'/static/imgs/code.gif',
|
|
|
+ // iconScanBgGif:'/static/imgs/code1.gif',
|
|
|
// iconScanBgGif,scancodeOpen,scancodeClose,
|
|
|
canScan: false, // 是否显示自定义扫码界面
|
|
|
flashBtn: 'off', // off关闭 on 打开手电筒
|
|
|
scanResult: '', // 扫描结果
|
|
|
isShow:false,
|
|
|
- status:0,
|
|
|
+ status:uni.getStorageSync('scancodeStatus')?uni.getStorageSync('scancodeStatus'):0,
|
|
|
flag:false,
|
|
|
- src:''
|
|
|
+ src:'',
|
|
|
+ animation,
|
|
|
};
|
|
|
},
|
|
|
+ onShow() {
|
|
|
+ this.donghua()
|
|
|
+ },
|
|
|
mounted() {
|
|
|
var that = this
|
|
|
//需要获得现在的授权信息
|
|
|
@@ -76,7 +95,7 @@ export default {
|
|
|
icon: 'none',
|
|
|
success: function(){
|
|
|
// 刷新
|
|
|
- uni.navigateTo({
|
|
|
+ uni.redirectTo({
|
|
|
url: '/pages/cardHolder/scancode',
|
|
|
});
|
|
|
}
|
|
|
@@ -96,15 +115,61 @@ export default {
|
|
|
})
|
|
|
},
|
|
|
methods: {
|
|
|
+ donghua() {
|
|
|
+ let that = this;
|
|
|
+ let scode = true;
|
|
|
+ setInterval(
|
|
|
+ function () {
|
|
|
+ if (scode) {
|
|
|
+ animation.translateY(240).step({
|
|
|
+ duration: 1500,
|
|
|
+ });
|
|
|
+ scode = !scode;
|
|
|
+ } else {
|
|
|
+ animation.translateY(-10).step({
|
|
|
+ duration: 1500,
|
|
|
+ });
|
|
|
+ scode = !scode;
|
|
|
+ }
|
|
|
+ that.animation = animation.export();
|
|
|
+ }.bind(this),
|
|
|
+ 1500
|
|
|
+ );
|
|
|
+ },
|
|
|
takePhoto() {
|
|
|
+ console.log(1111111)
|
|
|
+ uni.showLoading({
|
|
|
+ title: '数据加载中',
|
|
|
+ mask:true
|
|
|
+ })
|
|
|
const ctx = uni.createCameraContext();
|
|
|
+ console.log(ctx)
|
|
|
ctx.takePhoto({
|
|
|
quality: 'high',
|
|
|
+ fail: (req) => {
|
|
|
+ console.log(req,22222)
|
|
|
+ uni.hideLoading()
|
|
|
+ },
|
|
|
success: (res) => {
|
|
|
this.src = res.tempImagePath
|
|
|
- }
|
|
|
+ console.log(res.tempImagePath,33333333)
|
|
|
+ this.uploadFilePromise(res.tempImagePath)
|
|
|
+ },
|
|
|
+
|
|
|
});
|
|
|
},
|
|
|
+ uploadFilePromise(url) {
|
|
|
+ console.log(url)
|
|
|
+ uploadImage(url, 'cardImages/',
|
|
|
+ result => {
|
|
|
+ console.log(result, 22222)
|
|
|
+
|
|
|
+ }
|
|
|
+ )
|
|
|
+ },
|
|
|
+ error(e) {
|
|
|
+ console.log(e.detail);
|
|
|
+ },
|
|
|
// 显示扫码界面(扫一扫)
|
|
|
scanShowClick(){
|
|
|
console.log('扫码',111111)
|
|
|
@@ -130,6 +195,10 @@ export default {
|
|
|
// 隐藏扫码界面
|
|
|
scanClick(status){
|
|
|
this.status=status
|
|
|
+ uni.setStorageSync('scancodeStatus', this.status);
|
|
|
+ uni.redirectTo({
|
|
|
+ url: '/pages/cardHolder/scancode',
|
|
|
+ });
|
|
|
},
|
|
|
// 扫一扫返回数据
|
|
|
scancode(e) {
|
|
|
@@ -178,12 +247,7 @@ export default {
|
|
|
background-color: #000000;
|
|
|
}
|
|
|
|
|
|
-.scancode {
|
|
|
- position: relative;
|
|
|
- width: 70vw;
|
|
|
- height: 70vw;
|
|
|
- margin: 20vh auto 0;
|
|
|
-}
|
|
|
+
|
|
|
.camera {
|
|
|
position: relative;
|
|
|
width: 100vw;
|
|
|
@@ -205,17 +269,7 @@ export default {
|
|
|
color: #fff;
|
|
|
}
|
|
|
|
|
|
-/* 开关手电筒 */
|
|
|
-.scancodePic{
|
|
|
- background: transparent !important;
|
|
|
- width: 100rpx;
|
|
|
- height: 100rpx;
|
|
|
- padding: 0 !important;
|
|
|
-}
|
|
|
-.scancodePic>image{
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
-}
|
|
|
+
|
|
|
/* 关闭按钮 */
|
|
|
.scan,.scan-left{
|
|
|
padding: 20rpx 30rpx;
|
|
|
@@ -236,4 +290,54 @@ export default {
|
|
|
.center-btn{
|
|
|
background:#fff;
|
|
|
}
|
|
|
+
|
|
|
+// .scan-border {
|
|
|
+// width: 100%;
|
|
|
+// height: 100%;
|
|
|
+// /* border: 6rpx solid #08FDFE; */
|
|
|
+// display: flex;
|
|
|
+// flex-direction: column;
|
|
|
+// align-items: center;
|
|
|
+
|
|
|
+
|
|
|
+ .scan-camera {
|
|
|
+ position: relative;
|
|
|
+ width: 70vw;
|
|
|
+ height: 70vw;
|
|
|
+ margin: 20vh auto 0;
|
|
|
+ border-radius: 6rpx;
|
|
|
+ }
|
|
|
+// }
|
|
|
+
|
|
|
+.scan-animation {
|
|
|
+ position: absolute;
|
|
|
+ top: 10%;
|
|
|
+ left:5%;
|
|
|
+ width: 480rpx;
|
|
|
+ height: 8rpx;
|
|
|
+ background-color: #0091ff;
|
|
|
+ border-radius: 50%;
|
|
|
+}
|
|
|
+.btns {
|
|
|
+ margin: 10rpx;
|
|
|
+ width: 100%;
|
|
|
+ background-color: #0091ff;
|
|
|
+}
|
|
|
+.scan-pict {
|
|
|
+ position: absolute;
|
|
|
+ right: 1%;
|
|
|
+ bottom: 1%;
|
|
|
+ width: 70rpx;
|
|
|
+ height: 70rpx;
|
|
|
+ z-index: 20;
|
|
|
+ border-radius: 50%;
|
|
|
+ background-color: #c0c0c0;
|
|
|
+ opacity: 0.8;
|
|
|
+ .pic {
|
|
|
+ z-index: 999;
|
|
|
+ width: 50rpx;
|
|
|
+ height: 50rpx;
|
|
|
+ margin: 10rpx;
|
|
|
+ }
|
|
|
+}
|
|
|
</style>
|
高敬炎