Merge remote-tracking branch 'origin/master'

src/components/OnlineRollCall/index.vue

@@ -19,10 +19,13 @@
       :showConfirmButton="false"
     >
       <div class="dialog-content">
-        <div class="img-box" />
+        
+        <video ref="video" class="img-box" autoplay></video>
+        <canvas ref="canvas" class="img-box" style="display: none;"></canvas>
+
         <div v-show="!img" class="text1">即将通过摄像头捕捉画面</div>
         <div v-show="!img" class="text2">请稍等</div>
-        <div v-show="img" class="btn" @click="handleToRollCall2">
+        <div v-show="img" class="btn">
           上传视频截图
         </div>
         <div v-show="img" class="text3">已完成</div>
@@ -35,11 +38,14 @@
 import { ref, onUnmounted, nextTick } from "vue";
 import { useRouter } from "vue-router";
 import { hasMyCall, ackMyCall } from "@/api/onlineRollCall";
+import { showFailToast } from "vant";
 
 const router = useRouter();
 
 // 在线点名弹窗
 let timer;
+const video = ref(null);
+const canvas = ref(null);
 let show = ref(false);
 let durationTime = ref("");
 let rollCallData = ref({
@@ -52,16 +58,34 @@ let img = ref("");
 const handleToRollCall = () => {
   show.value = false;
   show2.value = true;
-  setTimeout(() => {
-    img.value = "2";
-  }, 3000);
-};
-const handleToRollCall2 = () => {
-  ackMyCall({call_id: rollCallData.value.id}).then((res)=>{
-    router.push({
-      name: "rollCallRecord2",
-      query: { id: rollCallData.value.id }
+
+  navigator.mediaDevices
+    .getUserMedia({ video: true })
+    .then(stream => {
+      video.value.srcObject = stream;
+      setTimeout(() => {
+      // 3秒后拍照
+        answerCall()
+      }, 3000);
+    })
+    .catch(err => {
+      showFailToast("访问摄像头被拒绝："+err);
     });
+};
+const answerCall = () => {
+  const context = canvas.value.getContext("2d");
+  context.drawImage(video.value, 0, 0, canvas.value.width, canvas.value.height);
+  const photoDataUrl = canvas.value.toDataURL("image/png");
+  
+  ackMyCall({call_id: rollCallData.value.id, photo_data: photoDataUrl}).then((res)=>{
+    img.value = "2";
+    setTimeout(() => {
+      // 3秒后切换到详情页
+      router.push({
+        name: "rollCallRecord2",
+        query: { id: rollCallData.value.id }
+      });
+    }, 3000);
   })
 };
 const calculateDuration = startTimeStr => {

src/views/onlineRollCall/rollCallDetails.vue

@@ -92,7 +92,7 @@
           </div>
         </div>
         <div class="item-bottom">
-          <div class="btn" @click="handleVideo(item.video_url)">视频</div>
+          <!-- div class="btn" @click="handleVideo(item.video_url)">视频</div -->
           <div class="btn" @click="handleCall(item.call_url)">电话</div>
         </div>
       </div>
@@ -215,7 +215,10 @@ const handleVideo = (url) => {
 }
 
 const handleCall = (url) => {
-  showToast("唤醒融合通信电话功能");
+  //const a = document.createElement('a');
+  //a.href = "tel:13800138000";
+  //a.click();
+  showToast("唤醒手机拨号功能");
 }
 
 onMounted(() => {

src/views/onlineRollCall/rollCallRecord2.vue

@@ -56,7 +56,10 @@
           <div :class="item.ack_status === 0 ? 'error-tag' : 'success-tag'">
             {{ item.ack_status === 0 ? '未应答' : '已应答' }}
           </div>
-          <div class="img"></div>
+          
+          <img class="img2" v-bind:src="get_img_url(item.img_url)" v-if="item.img_url != ''" />
+          <div class="img" v-else></div>
+
           <div class="box-right">
             <div class="text1">点名时间：{{ item.create_time }}</div>
             <div class="text1">完成耗时：{{ item.duration_time }}</div>
@@ -83,6 +86,11 @@ const finished = ref(false);
 let dateRangeText = ref('');
 let show = ref(false);
 
+const baseUrl = import.meta.env.VITE_BASE_API;
+const downLoadApi = import.meta.env.VITE_BASE_DOWNLOAD_API;
+const get_img_url = (url) => {
+  return baseUrl + downLoadApi + url;
+}
 const data = reactive({
   queryParams: {
     page: 0,
@@ -308,6 +316,14 @@ onMounted(() => {
     background: url("@/assets/images/onlineRollCall/header1.png") no-repeat;
     background-size: 100% 100%;
   }
+
+  .img2 {
+    width: 90px;
+    height: 66px;
+    border-radius: 8px;
+    margin: 8px;
+  }
+
   .box-right {
     .text1 {
       font-size: 14px;