saas_miniprogram/components/popup/camera.vue

<template>
  <view>
    <u-popup
      v-model="isShow"
      mode="bottom"
      border-radius="40"
      :mask-close-able="false"
    >
      <!-- 播放前拍照start -->
      <!-- :mask-close-able="false" -->
      <!-- style="bottom: 0; position: fixed; width: 100%; z-index: 999" -->
      <view v-if="isShow">
        <view class="photoBox">
          <view class="photoTop">
            <view class="centersq">请正视手机屏幕</view>
          </view>
          <view class="photoCenter">
            <view class="center_camera" v-if="photoPopup && isTaking">
              <!-- #ifdef MP-WEIXIN -->
              <camera
                device-position="front"
                flash="off"
                @error="error"
                style="width: 100%; height: 100%"
              >
                <!-- 加人脸框 -->
                <cover-view class="head_take">
                  <cover-view class="headTake_up color"></cover-view>
                  <cover-view class="headTake_minddle">
                    <cover-view class="min_left color"></cover-view>
                    <cover-view class="min_img"></cover-view>
                    <cover-view class="min_right color"></cover-view>
                  </cover-view>
                  <cover-view class="headTake_down color"></cover-view>
                </cover-view>
              </camera>
              <!-- #endif -->
              <!-- #ifdef H5 -->
              <video
                :controls="false"
                id="video"
                width="400"
                height="300"
                class="photo_v"
              ></video>
              <view class="mask"></view>
              <!-- #endif -->
            </view>
            <view class="custom" v-if="!isTaking">
              <!-- #ifdef MP-WEIXIN -->
              <image :src="avatarUrl" mode=""></image>
              <!-- #endif -->
              <!-- #ifdef H5 -->
              <image :src="faceUrl" mode=""></image>
              <!-- #endif -->
            </view>
          </view>
          <view class="btns">
            <!-- <view class="btnResult" v-if="isTaking" @click="takePhoto"
              >拍照</view
            > -->
            <view v-if="isTaking" class="takePhoto_btn">
              <view style="width: 100rpx; height: 2rpx"></view>
              <view class="middle_btn" @click="takePhoto">
                <view class="square"></view>
              </view>
              <view class="rights" @click="takePhTips()">
                <text>拍照提示</text>
                <u-icon name="arrow-right" color="#FFFFFF" size="30"></u-icon>
              </view>
            </view>
            <view class="btnResult" v-if="!isTaking" @click="reTake">重拍</view>
            <view class="btnResult" v-if="!isTaking" @click="submit">确认</view>
          </view>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
export default {
  name: "SaasMiniprogramCamera",
  popos: {
    visible: {
      type: Boolean,
      defaule: false,
    },
  },
  data() {
    return {
      isShow: false,
    };
  },

  mounted() {},

  methods: {},
};
</script>

<style lang="scss" scoped></style>