case-data/pages/apply/apply.vue

<template>
  <view class="logincontent">
    <up-form labelPosition="left" :model="model" ref="form" labelWidth="115rpx">
      <up-form-item label="姓名" prop="userInfo.name" borderBottom>
        <up-input v-model="model.name" placeholder="请输入真实姓名"></up-input>
      </up-form-item>

      <view class="smsbox">
        <up-form-item label="医院" prop="userInfo.name" borderBottom @click="showArea=true">
          <up-input v-model="model.name" placeholder="请选择医院"></up-input>
          <template #right>
            <up-icon name="arrow-right"></up-icon>
          </template>
        </up-form-item>
        <up-form-item label="科室" prop="userInfo.name" borderBottom @click="showDepart=true">
          <up-input v-model="model.name" placeholder="请选择科室"></up-input>
          <template #right>
            <up-icon name="arrow-right"></up-icon>
          </template>
        </up-form-item>
        <up-form-item label="职称" prop="userInfo.name" borderBottom @click="showTitle=true">
          <up-input v-model="model.name" placeholder="请选择职称"></up-input>
          <template #right>
            <up-icon name="arrow-right"></up-icon>
          </template>
        </up-form-item>
        <up-form-item label="执业证号(选填)" prop="userInfo.name" borderBottom>
          <up-input
            v-model="model.name"
            placeholder="请输入执业证号"
          ></up-input>
        </up-form-item>
        <up-form-item
          label="执业医师资格证或工作胸牌"
          prop="userInfo.name"
          borderBottom
        >
          <up-input v-model="model.name" placeholder=""></up-input>
          <template #right>
            <view class="rightbox">
              <view class="uploadwraper">
                <up-upload @afterRead="afterRead" :maxCount="1"> </up-upload>
                <image
                  :src="img"
                  mode="widthFix"
                  style="width: 120rpx; height: 80px"
                  class="dimg"
                ></image>
              </view>
              <up-icon name="arrow-right"></up-icon>
            </view>
          </template>
        </up-form-item>
      </view>
    </up-form>

    <view class="row">
      <up-button
        :customStyle="customStyle"
        class="custom-style"
        type="success"
        text="提交"
        color="#3cc7c0"
        size="large"
      ></up-button>
    </view>
    <view>
      <QfImageCropper
      v-if="showCroper"
      :width="500"
      :height="500"
      :radius="0"
      backgroundColor="#000"
      :src="coperImg"
       zIndex="999"
       delay="1500"
       ref="imgCropper"
       @cancel="handleCancel"
       @crop="handleCrop"
    ></QfImageCropper>
    </view>
    <up-picker @cancel="closeArea" @confirm="confirmArea" :show="showArea" :columns="areacolumns"></up-picker>
    <up-picker @cancel="closeDepart" @confirm="confirmDepart" :show="showDepart" :columns="departcolumns"></up-picker>
    <up-picker @cancel="closeTitle" @confirm="confirmTitle" :show="showTitle" :columns="titlecolumns"></up-picker>
  </view>
</template>

<script setup>
import { ref, reactive } from "vue";
import { onShow } from "@dcloudio/uni-app";
import img from "@/static/default.png";
import QfImageCropper from "@/uni_modules/qf-image-cropper/components/qf-image-cropper/qf-image-cropper.vue";

const imgCropper=ref(null);
const model = reactive({
  name: "",
});
const showCroper = ref(false);
const coperImg = ref("");

const customStyle = reactive({
  height: "90rpx",
  fontSize: "36rpx",
});
const areacolumns = ref([]);
const showArea = ref(false);
const departcolumns = ref([]);
const showDepart = ref(false);
const titlecolumns = ref([]);
const showTitle = ref(false);
const closeArea = () => {
  showArea.value = false;
};
const confirmArea = (e) => {
 
  showArea.value = false;
};
const closeDepart = () => {
  showDepart.value = false;
};
const confirmDepart = (e) => {
  console.log(e);
  showDepart.value = false;
};
const closeTitle = () => {
  showTitle.value = false;
};
const confirmTitle = (e) => {
  showTitle.value = false;
}

const afterRead = (event) => {
  // console.log(event.file);
  // console.log(QfImageCropper);
  coperImg.value =event.file.url;
  showCroper.value = true;
};
const handleCrop = (e) => {
   console.log(e.tempFilePath)
  // uni.previewImage({
  //   urls: [e.tempFilePath],
  //   current: 0,
  // });
};
const handleCancel = () => {
  showCroper.value = false;
};
onShow(() => {
 
});
</script>

<style lang="scss" scoped>
.logincontent {
  width: 100%;
  height: 100vh;
  background: #fff;
  .rightbox {
    display: flex;
  }
  .uploadwraper {
    position: relative;
    width: 140rpx;
    height: 80rpx;
    overflow: hidden;
    ::v-deep .u-upload {
      width: 140rpx;
      height: 80rpx;
      position: relative;
      z-index: 2;
      opacity: 0;
    }
  }
  .uploadwraper ::v-deep .dimg {
    position: absolute;
    top: 0;
    bottom: 0;
  }
  .smsbox ::v-deep .u-form-item:nth-child(4) .u-form-item__body__left {
    width: 240rpx !important;
  }
  .smsbox ::v-deep .u-form-item:nth-child(5) .u-form-item__body__left {
    width: 418rpx !important;
  }
  ::v-deep .u-form-item__body__left__content__label {
    font-size: 34rpx;
    color: #000;
  }
  .title {
    padding: 124rpx 0 64rpx 30rpx;
    //padding-left: 30rpx;
    font-size: 46rpx;
    font-stretch: normal;
    letter-spacing: 2rpx;
    color: #000000;
  }
  ::v-deep .u-form {
    padding: 0 30rpx;
  }
  .row {
    margin-top: 60rpx;
    display: flex;
    justify-content: space-between;
    padding: 0 30rpx;
    .left {
      flex: 1;
      color: #3cc7c0;
      text-align: left;
    }
    .right {
      flex: 1;
      color: #666;
      text-align: right;
    }
    ::v-deep .u-button--large .u-button__text {
      font-size: 36rpx !important;
    }
  }
  ::v-deep .wrap {
    border-radius: 16rpx;
    overflow: hidden;
    border: none;
  }
}
</style>