VAVABUY/components/CameraUpload.vue

<template>
  <Popup ref="popRef" mode="center" isClose>
    <template #content>
      <view class="content">
        <view class="modal-header" v-if="isCamera">
          <view class="title">
            <trans _t="相机权限说明" />
          </view>
          <view class="tip">
            <trans _t="用于上传用户头像、或依据图片信息搜索内容" />
          </view>
        </view>
        <view class="modal-header">
          <view class="title">
            <trans _t="存储权限说明" />
          </view>
          <view class="tip">
            <trans _t="用于选择照片" />
          </view>
        </view>
      </view>
    </template>
    <template #footer>
      <slot name="footer">
        <view class="footer">
          <view class="submit_btn" @click="select('camera')" v-if="isCamera">
            <trans _t="拍照" />
          </view>
          <view class="submit_btn" @click="select('album')">
            <trans _t="相册" />
          </view>
        </view>
      </slot>
    </template>
  </Popup>
</template>

<script setup>
import { ref, nextTick } from "vue";
import Popup from "./popup.vue";
import { uploadChooseImage, $upload, Toast } from "@/utils";

const popRef = ref(null);

const emit = defineEmits(["confirm", "close", "open"]);
const props = defineProps({
  isCamera: {
    type: Boolean,
    default: true,
  },
});

const open = () => {
  popRef.value && popRef.value.open();
  emit("open");
};

const close = () => {
  emit("close");
  popRef.value && popRef.value.close();
};

const select = async (type) => {
  try {
    let file = await uploadChooseImage(type);
    if (file.errMsg == "chooseImage:ok") {
      const res = await $upload(file.tempFilePath);
      nextTick(() => {
        emit("confirm", res.data.url);
      });
    }
  } catch (error) {}

  close();
};

defineExpose({ open, close });
</script>

<style lang="less" scoped>
@import url("@/style.less");

:deep(.conts) {
  max-width: 75vw;
}

.content {
  .modal-header {
    margin-bottom: 20rpx;

    .title {
      font-size: 32rpx;
      font-weight: bold;
    }

    .tip {
      font-size: 24rpx;
    }
  }
}

.footer {
  .hor(space-between);
  column-gap: 20rpx;

  .submit_btn {
    height: 76rpx;
    padding: 16rpx 60rpx;
    background-color: var(--black);
    color: var(--light);
    .flex_center();
    border-radius: 16rpx;
    .size(24rpx);

    &.submit_shop {
      background-color: var(--bg);
      border: 1rpx solid var(--black);
      color: var(--black);
    }
  }
}
</style>