소스 검색

upload

dev_YWQ
HolyKnightIX 1 년 전
부모
커밋
6444ec1692
3개의 변경된 파일104개의 추가작업 그리고 3개의 파일을 삭제
  1. +31
    -0
      src/api/camera.js
  2. +73
    -1
      src/pages/camera/index.vue
  3. +0
    -2
      src/style/my.scss

+ 31
- 0
src/api/camera.js 파일 보기

@@ -0,0 +1,31 @@
import { request } from "../utils/request"

/**
* @description:获取上传二维码
* @param machineQrcodeId
* @return: status
*/
export function getImageQrcode(machineQrcodeId) {
return request({
url: `/api/screenImg/imageQrcode`,
method: 'post',
data: {
machineQrcodeId
}
})
}

/**
* @description:生成画报
* @param {appId,img}
* @return: data
*/
export function getUserQrcodeApi(data) {
return request({
url: `/api/miniApp/getUserQrcode`,
method: 'POST',
responseType: "arraybuffer",
data
})
}


+ 73
- 1
src/pages/camera/index.vue 파일 보기

@@ -19,7 +19,7 @@
></video> ></video>


<div v-if="!isSuccess"> <div v-if="!isSuccess">
<div class="selectImg">
<div class="selectImg" @click="uploadImg">
<img src="../../assets/img/selectImg.png" /> <img src="../../assets/img/selectImg.png" />
<div class="uploadText">上传照片</div> <div class="uploadText">上传照片</div>
</div> </div>
@@ -57,6 +57,20 @@
</div> </div>
</div> </div>
<!-- Top section --> <!-- Top section -->
<u-overlay
class="overlay"
:show="showQrCode"
@click="showQrCode = false"
opacity="0.9"
>
<view class="content">
<view class="imageBox">
<image :src="QRCodeUrl" mode="scaleToFill" />
</view>
<text>打开微信扫码登录小程序</text>
<view class="orangeBtn" style="margin-top: 100rpx">取&nbsp;消</view>
</view>
</u-overlay>
</div> </div>
</template> </template>


@@ -64,11 +78,16 @@
import { ref, onMounted } from "vue"; import { ref, onMounted } from "vue";
import { onLoad, onShow, onUnload } from "@dcloudio/uni-app"; import { onLoad, onShow, onUnload } from "@dcloudio/uni-app";


import { getImageQrcode } from "../../api/camera.js";

let imgSrc = ref(""); let imgSrc = ref("");
let isSuccess = ref(false); let isSuccess = ref(false);
let isShowCanvas = ref(true); let isShowCanvas = ref(true);
let modelUrl = ref(""); let modelUrl = ref("");


let QRCodeUrl = ref("");
let showQrCode = ref(false);

const startCamera = () => { const startCamera = () => {
function getUserMedia(constraints, success, error) { function getUserMedia(constraints, success, error) {
if (navigator.mediaDevices.getUserMedia) { if (navigator.mediaDevices.getUserMedia) {
@@ -176,6 +195,19 @@ const reTry = () => {
}, 10); }, 10);
}; };


// 点击上传照片按钮
const uploadImg = async () => {
const UserId = localStorage.getItem("UserId");
try {
const res = await getImageQrcode(UserId);
QRCodeUrl.value = res.data.wxQrcode;
showQrCode.value = true;
console.log(res, "res");
} catch (error) {
console.log(error, "error");
}
};

onLoad((options) => { onLoad((options) => {
console.log(options, "options"); console.log(options, "options");
modelUrl.value = options.modelUrl; modelUrl.value = options.modelUrl;
@@ -346,5 +378,45 @@ onMounted(() => {
} }
} }
} }
.overlay {
.content {
width: 100%;
height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
.imageBox {
position: relative;
margin-top: 200rpx;
width: 500rpx;
height: 500rpx;
border-radius: 30rpx;
background-color: #fff;
.mask {
position: absolute;
width: 500rpx;
height: 500rpx;
border-radius: 30rpx;
background-color: rgba($color: #000000, $alpha: 0.7);
z-index: 2;
}
image {
width: 500rpx;
height: 500rpx;
border-radius: 30rpx;
background-color: #fff;
}
}
text {
margin-top: 20rpx;
font-weight: 900;
font-size: 32rpx;
}
// .orangeBtn {
// margin-top: 100rpx;
// }
}
}
} }
</style> </style>

+ 0
- 2
src/style/my.scss 파일 보기

@@ -47,8 +47,6 @@ view {
} }


.orangeBtn { .orangeBtn {
position: absolute;
bottom: 50;
background-color: #FF4F00; background-color: #FF4F00;
width: 520rpx; width: 520rpx;
height: 100rpx; height: 100rpx;


불러오는 중...
취소
저장