更新

src/components/col-calendar/index.module.less

@@ -45,8 +45,8 @@
         right: 0;
         bottom: 0;
         left: 50%;
-        width: 38px;
-        height: 45px;
+        width: 45px;
+        height: 50px;
         background: #2dc7aa;
         content: ' ';
         opacity: 0.12;

src/components/col-cropper copy/cropper.tsx

@@ -1,230 +0,0 @@
-import { defineComponent } from 'vue'
-import styles from './index.module.less'
-import { VueCropper } from 'vue-cropper'
-import umiRequest from 'umi-request'
-import 'vue-cropper/dist/index.css'
-import {
-  ElButton,
-  ElCol,
-  ElDialog,
-  ElIcon,
-  ElImage,
-  ElMessage,
-  ElRow
-} from 'element-plus'
-import { CirclePlus, Remove } from '@element-plus/icons-vue'
-import iconRate from '../col-upload/images/icon_rate.png'
-import request from '@/helpers/request'
-
-export default defineComponent({
-  name: 'cropper',
-  props: {
-    cropperNo: {
-      type: Function,
-      default: (data: any) => {}
-    },
-    cropperOk: {
-      type: Function,
-      default: (data: any) => {}
-    },
-    bucket: {
-      type: String,
-      default: 'daya'
-    }
-  },
-  data() {
-    return {
-      ossUploadUrl: 'https://ks3-cn-beijing.ksyuncs.com/' + this.bucket,
-      dataObj: {
-        policy: '',
-        signature: '',
-        key: '',
-        KSSAccessKeyId: '',
-        acl: 'public-read',
-        name: ''
-      },
-      visible: false,
-      img: null,
-      options: {
-        img: '', //裁剪图片的地址
-        autoCrop: true, //是否默认生成截图框
-        autoCropWidth: 180, //默认生成截图框宽度
-        autoCropHeight: 180, //默认生成截图框高度
-        fixedBox: true, //是否固定截图框大小 不允许改变
-        full: false,
-        enlarge: 1, // 是否按照截图框比例输出 默认为1
-        previewsCircle: true, //预览图是否是原圆形
-        centerBox: true,
-        outputType: 'png',
-        title: '修改头像',
-        name: null // 文件名称
-      },
-      previews: {} as any,
-      url: {
-        upload: '/sys/common/saveToImgByStr'
-      },
-      submitLoading: false
-    }
-  },
-  methods: {
-    edit(record: any) {
-      const { options } = this
-      this.visible = true
-      this.options = Object.assign({}, options, record)
-      console.log(this.options)
-    },
-    /**
-     * 取消截图
-     */
-    cancelHandel() {
-      this.visible = false
-      this.cropperNo()
-    },
-    /**
-     * 确认截图
-     */
-    okHandel() {
-      ;(this as any).$refs.cropperRef.getCropBlob(async data => {
-        // this.submitLoading = true
-        // context.emit('cropper-ok', data)
-        console.log(data, 'data')
-        this.visible = false
-        this.cropperOk(data, this.options)
-      })
-    },
-    //转成blob
-    blobToFile(Blob: any, fileName: any) {
-      //兼容IE
-      Blob.lastModifiedDate = new Date()
-      Blob.name = fileName
-      return Blob
-    },
-    base64ToFile(urlData: any, fileName: any) {
-      let arr = urlData.split(',')
-      let mime = arr[0].match(/:(.*?);/)[1]
-      let bytes = atob(arr[1]) // 解码base64
-      let n = bytes.length
-      let ia = new Uint8Array(n)
-      while (n--) {
-        ia[n] = bytes.charCodeAt(n)
-      }
-      return new File([ia], fileName, { type: mime })
-    },
-    //移动框的事件
-    realTime(data: any) {
-      this.previews = data
-    },
-    //图片缩放
-    changeScale(num: number) {
-      num = num || 1
-      ;(this as any).$refs.cropperRef.changeScale(num)
-    },
-    //向左旋转
-    rotateLeft() {
-      ;(this as any).$refs.cropperRef.rotateLeft()
-    },
-    //向右旋转
-    rotateRight() {
-      ;(this as any).$refs.cropperRef.rotateRight()
-    }
-  },
-  render() {
-    return (
-      <ElDialog
-        modelValue={this.visible}
-        onUpdate:modelValue={val => (this.visible = val)}
-        appendToBody
-        title={this.options.title}
-        closeOnClickModal={false}
-        width={'800px'}
-        v-slots={{
-          footer: () => (
-            <span class="dialog-footer !text-center block">
-              <ElButton
-                onClick={this.cancelHandel}
-                disabled={this.submitLoading}
-              >
-                取消
-              </ElButton>
-              <ElButton
-                type="primary"
-                onClick={this.okHandel}
-                loading={this.submitLoading}
-              >
-                保 存
-              </ElButton>
-            </span>
-          )
-        }}
-      >
-        <ElRow>
-          <ElCol xs={24} md={12} style={{ width: '350px' }}>
-            <VueCropper
-              ref="cropperRef"
-              img={this.options.img}
-              info={true}
-              autoCrop={this.options.autoCrop}
-              autoCropWidth={this.options.autoCropWidth}
-              full={this.options.full}
-              outputType={this.options.outputType}
-              autoCropHeight={this.options.autoCropHeight}
-              fixedBox={this.options.fixedBox}
-              enlarge={this.options.enlarge}
-              onRealTime={this.realTime}
-              style={{ height: '350px' }}
-            />
-            <div class="flex pt-2">
-              <div
-                onClick={() => {
-                  this.changeScale(1)
-                }}
-                class="mr-2 cursor-pointer"
-                title="放大"
-              >
-                <ElIcon size={30} color="#333">
-                  <CirclePlus />
-                </ElIcon>
-              </div>
-              <div
-                onClick={() => {
-                  this.changeScale(-1)
-                }}
-                class="mr-2 cursor-pointer"
-                title="缩小"
-              >
-                <ElIcon size={30} color="#333">
-                  <Remove />
-                </ElIcon>
-              </div>
-              <div
-                onClick={this.rotateRight}
-                title="向右旋转"
-                class="cursor-pointer"
-              >
-                <img src={iconRate} class="w-[30px] h-[30px]" />
-              </div>
-            </div>
-          </ElCol>
-          <ElCol xs={24} md={12} style={{ height: '350px' }}>
-            <div class={styles.previewImg}>
-              <span>预览图片</span>
-              <div
-                class={
-                  this.options.previewsCircle
-                    ? styles['avatar-upload-preview']
-                    : styles['avatar-upload-preview_range']
-                }
-                style={{
-                  width: this.options.autoCropWidth + 'px',
-                  height: this.options.autoCropHeight + 'px'
-                }}
-              >
-                <ElImage src={this.previews.url} style={this.previews.img} />
-              </div>
-            </div>
-          </ElCol>
-        </ElRow>
-      </ElDialog>
-    )
-  }
-})

src/components/col-cropper copy/index.module.less

@@ -1,85 +0,0 @@
-.uploadSection {
-  width: 156px;
-  height: 106px;
-  background: #f8faf9;
-  border-radius: 4px;
-  border: 1px solid rgba(45, 199, 170, 0.26);
-  font-size: 14px;
-  color: #2dc7aa;
-  line-height: 20px;
-}
-
-.uploadClass {
-  height: 106px;
-  width: 100%;
-
-  :global {
-    .el-loading-spinner {
-      margin-top: -43px;
-      height: 106px;
-    }
-  }
-}
-
-.avatar-upload-preview_range,
-.avatar-upload-preview {
-  width: 180px;
-  height: 180px;
-  box-shadow: 0 0 4px #ccc;
-  overflow: hidden;
-  img {
-    background-color: #f7f7f7;
-    height: 100%;
-  }
-}
-.avatar-upload-preview_range {
-  border-radius: 0;
-}
-.previewImg {
-  padding-left: 50px;
-  padding-top: 10px;
-  & > span {
-    display: block;
-    color: #212121;
-    font-size: 16px;
-    padding-bottom: 15px;
-  }
-}
-.operation {
-  font-size: 24px;
-  display: flex;
-  align-items: center;
-  margin-top: 20px;
-  & > i {
-    margin-left: 12px;
-    cursor: pointer;
-  }
-  .icon-rate {
-    display: inline-block;
-    width: 20px;
-    height: 20px;
-    background: url('./images/icon_rate.png') no-repeat center;
-    background-size: contain;
-  }
-}
-.vue-cropper {
-  border-radius: 5px;
-  overflow: hidden;
-}
-:deep(.el-dialog) {
-  margin-bottom: 10vh;
-  .el-dialog__header {
-    // background: #363d55;
-    background: #fff;
-    padding: 15px 20px 15px;
-    .el-dialog__title {
-      color: #212121;
-    }
-    .el-dialog__headerbtn .el-dialog__close {
-      color: #212121;
-    }
-  }
-  .el-dialog__body {
-    padding-top: 0;
-  }
-}

src/components/col-cropper copy/index.tsx

@@ -1,272 +0,0 @@
-import { ElImage, ElMessage, ElUpload } from 'element-plus'
-import { defineComponent } from 'vue'
-import styles from './index.module.less'
-import iconUpload from '../col-upload/images/icon_upload.png'
-import Cropper from './cropper'
-import request from '@/helpers/request'
-import umiRequest from 'umi-request'
-
-export default defineComponent({
-  name: 'col-cropper',
-  props: {
-    modelValue: {
-      type: String,
-      default: ''
-    },
-    options: {
-      // 裁切需要参数
-      type: Object,
-      default: {
-        autoCrop: true, //是否默认生成截图框
-        enlarge: 1, //  图片放大倍数
-        autoCropWidth: 200, //默认生成截图框宽度
-        autoCropHeight: 200, //默认生成截图框高度
-        fixedBox: true, //是否固定截图框大小 不允许改变
-        previewsCircle: true, //预览图是否是原圆形
-        title: '上传图片'
-      }
-    },
-    // 显示图片原始图片
-    showSize: {
-      type: Boolean,
-      default: false
-    },
-    disabled: {
-      type: Boolean,
-      default: false
-    },
-    bucket: {
-      type: String,
-      default: 'daya'
-    },
-    size: {
-      type: Number,
-      default: 5 // 默认5M
-    },
-    accept: {
-      type: String,
-      default: 'images/*'
-    },
-    tips: {
-      type: String,
-      default: '请上传图片'
-    },
-    extraTips: {
-      type: String,
-      default: '图片最大不能超过5MB'
-    },
-    cropUploadSuccess: {
-      type: Function,
-      default: (data: string) => {}
-    }
-  },
-  data() {
-    return {
-      isStopRun: false,
-      loading: false,
-      ossUploadUrl: 'https://ks3-cn-beijing.ksyuncs.com/' + this.bucket,
-      dataObj: {
-        policy: '',
-        signature: '',
-        key: '',
-        KSSAccessKeyId: '',
-        acl: 'public-read',
-        name: ''
-      },
-      data: null as any
-    }
-  },
-  methods: {
-    onDelete() {
-      // 删除图片
-      this.$emit('update:modelValue', '')
-    },
-
-    change(info: any) {
-      this.loading = true
-      const options = this.options
-      console.log(info)
-      this.getBase64(info.raw, (imageUrl: any) => {
-        const target = Object.assign({}, options, {
-          img: imageUrl,
-          name: info.raw.name // 上传文件名
-        })
-        ;(this as any).$refs.CropperModal.edit(target)
-      })
-    },
-    //从本地选择文件
-    async handleChange(options: any) {
-      // console.log(info, 1212)
-      // return
-      // if (this.isStopRun) {
-      //   return
-      // }
-      // this.loading = true
-      // const options = this.options
-      // this.getBase64(info.file, (imageUrl: any) => {
-      //   const target = Object.assign({}, options, {
-      //     img: imageUrl,
-      //     name: info.file.name // 上传文件名
-      //   })
-      //   ;(this as any).$refs.CropperModal.edit(target)
-      // })
-      // const options: any = this.options
-      const fileName =
-        (options.name ? options.name.split('.')[0] : +new Date()) + '.png'
-      try {
-        let key = new Date().getTime() + fileName
-        let obj = {
-          filename: fileName,
-          bucketName: this.bucket,
-          postData: {
-            filename: fileName,
-            acl: 'public-read',
-            key: key,
-            unknowValueField: []
-          }
-        }
-        const res = await request.post('/api-website/getUploadSign', {
-          data: obj
-        })
-        this.dataObj = {
-          policy: res.data.policy,
-          signature: res.data.signature,
-          key: key,
-          KSSAccessKeyId: res.data.kssAccessKeyId,
-          acl: 'public-read',
-          name: fileName
-        }
-
-        let formData = new FormData()
-        for (let key in this.dataObj) {
-          formData.append(key, this.dataObj[key])
-        }
-        formData.append('file', this.blobToFile(this.data, fileName), fileName)
-        await umiRequest(this.ossUploadUrl, {
-          method: 'POST',
-          data: formData
-        })
-        console.log(this.ossUploadUrl + '/' + key)
-        const uploadUrl = this.ossUploadUrl + '/' + key
-        // this.cropperOk(uploadUrl)
-        this.$emit('update:modelValue', uploadUrl)
-      } catch (err: any) {
-        ElMessage.error(err)
-      } finally {
-        // this.submitLoading = false
-        // this.cancelHandel()
-      }
-    },
-    //转成blob
-    blobToFile(Blob: any, fileName: any) {
-      //兼容IE
-      Blob.lastModifiedDate = new Date()
-      Blob.name = fileName
-      return Blob
-    },
-    // 上传之前 格式与大小校验
-    beforeUpload(file) {
-      this.isStopRun = false
-      var fileType = file.type
-      if (fileType.indexOf('image') < 0) {
-        ElMessage.warning('请上传图片')
-        this.isStopRun = true
-        return false
-      }
-      // const isJpgOrPng = this.acceptArray.includes(file.type)
-      // if (!isJpgOrPng) {
-      //   ElMessage.error('你上传图片格式不正确!')
-      //   this.isStopRun = true
-      // }
-      console.log(this.size)
-      const size = this.size || 0
-      const isLtSize = file.size < size * 1024 * 1024
-      if (!isLtSize) {
-        ElMessage.error('图片大小不能超过' + this.size + 'MB!')
-        this.isStopRun = true
-      }
-      return isLtSize
-    },
-    error() {
-      this.remove()
-      this.loading = false
-    },
-    remove() {
-      this.onDelete()
-    },
-    //获取服务器返回的地址
-    handleCropperSuccess(data: any, options: any) {
-      //将返回的数据回显
-      // this.loading = false
-      // console.log(data, 'success')
-      // this.$emit('update:modelValue', data)
-      // this.cropUploadSuccess(data)
-      // this.$emit('cropUploadSuccess', data)
-      // console.log(this.modelValue, 'modelValue')
-      this.data = data
-      // this.handleChange(options)
-      // console.log((this as any).$refs.uploadRef)
-      ;(this as any).$refs.uploadRef.submit()
-    },
-    // 取消上传
-    handleCropperClose() {
-      this.loading = false
-      this.remove()
-    },
-    getBase64(img, callback) {
-      const reader = new FileReader()
-      reader.addEventListener('load', () => callback(reader.result))
-      reader.readAsDataURL(img)
-    }
-  },
-  render() {
-    return (
-      <div class={[styles.colUpload, 'w-full']}>
-        <ElUpload
-          disabled={this.disabled}
-          showFileList={false}
-          accept={this.accept}
-          beforeUpload={this.beforeUpload}
-          // @ts-ignore
-          onChange={this.change}
-          httpRequest={this.handleChange}
-          // limit={1}
-          ref="uploadRef"
-        >
-          <div
-            ref="uploadDom"
-            class={[styles.uploadClass, 'w-full']}
-            style={{ height: '106px' }}
-          >
-            {this.modelValue ? (
-              <ElImage
-                src={this.modelValue}
-                fit="cover"
-                class={styles.uploadSection}
-              />
-            ) : (
-              <div
-                class={[
-                  styles.uploadSection,
-                  'flex items-center flex-col justify-center'
-                ]}
-              >
-                <img src={iconUpload} class="w-8 h-7 mb-3" />
-                <p>{this.tips}</p>
-              </div>
-            )}
-          </div>
-        </ElUpload>
-
-        <p class="text-3 text-[#999999] leading-6 pt-1">{this.extraTips}</p>
-
-        <Cropper
-          ref="CropperModal"
-          bucket={this.bucket}
-          cropperNo={this.handleCropperClose}
-          cropperOk={this.handleCropperSuccess}
-        />
-      </div>
-    )
-  }
-})

src/components/col-cropper-1/cropper.tsx

@@ -1,271 +0,0 @@
-import { defineComponent } from 'vue'
-import styles from './index.module.less'
-import { VueCropper } from 'vue-cropper'
-import umiRequest from 'umi-request'
-import 'vue-cropper/dist/index.css'
-import {
-  ElButton,
-  ElCol,
-  ElDialog,
-  ElIcon,
-  ElImage,
-  ElMessage,
-  ElRow
-} from 'element-plus'
-import { CirclePlus, Remove } from '@element-plus/icons-vue'
-import iconRate from '../col-upload/images/icon_rate.png'
-import request from '@/helpers/request'
-
-export default defineComponent({
-  name: 'cropper',
-  props: {
-    cropperNo: {
-      type: Function,
-      default: (data: any) => {}
-    },
-    cropperOk: {
-      type: Function,
-      default: (data: any) => {}
-    },
-    bucket: {
-      type: String,
-      default: 'daya'
-    }
-  },
-  data() {
-    return {
-      ossUploadUrl: 'https://ks3-cn-beijing.ksyuncs.com/' + this.bucket,
-      dataObj: {
-        policy: '',
-        signature: '',
-        key: '',
-        KSSAccessKeyId: '',
-        acl: 'public-read',
-        name: ''
-      },
-      visible: false,
-      img: null,
-      options: {
-        img: '', //裁剪图片的地址
-        autoCrop: true, //是否默认生成截图框
-        autoCropWidth: 180, //默认生成截图框宽度
-        autoCropHeight: 180, //默认生成截图框高度
-        fixedBox: true, //是否固定截图框大小 不允许改变
-        full: false,
-        enlarge: 1, // 是否按照截图框比例输出 默认为1
-        previewsCircle: true, //预览图是否是原圆形
-        centerBox: true,
-        outputType: 'png',
-        title: '修改头像',
-        name: null // 文件名称
-      },
-      previews: {} as any,
-      url: {
-        upload: '/sys/common/saveToImgByStr'
-      },
-      submitLoading: false
-    }
-  },
-  methods: {
-    edit(record: any) {
-      const { options } = this
-      this.visible = true
-      this.options = Object.assign({}, options, record)
-      console.log(this.options)
-    },
-    /**
-     * 取消截图
-     */
-    cancelHandel() {
-      this.visible = false
-      this.cropperNo()
-    },
-    /**
-     * 确认截图
-     */
-    okHandel() {
-      ;(this as any).$refs.cropperRef.getCropBlob(async data => {
-        this.submitLoading = true
-        const options: any = this.options
-        const fileName =
-          (options.name ? options.name.split('.')[0] : +new Date()) + '.png'
-        try {
-          let key = new Date().getTime() + fileName
-          let obj = {
-            filename: fileName,
-            bucketName: this.bucket,
-            postData: {
-              filename: fileName,
-              acl: 'public-read',
-              key: key,
-              unknowValueField: []
-            }
-          }
-          const res = await request.post('/api-website/getUploadSign', {
-            data: obj
-          })
-          this.dataObj = {
-            policy: res.data.policy,
-            signature: res.data.signature,
-            key: key,
-            KSSAccessKeyId: res.data.kssAccessKeyId,
-            acl: 'public-read',
-            name: fileName
-          }
-
-          let formData = new FormData()
-          for (let key in this.dataObj) {
-            formData.append(key, this.dataObj[key])
-          }
-          formData.append('file', this.blobToFile(data, fileName), fileName)
-          await umiRequest(this.ossUploadUrl, {
-            method: 'POST',
-            data: formData
-          })
-          console.log(this.ossUploadUrl + '/' + key)
-          const uploadUrl = this.ossUploadUrl + '/' + key
-          this.cropperOk(uploadUrl)
-        } catch (err: any) {
-          ElMessage.error(err)
-        } finally {
-          this.submitLoading = false
-          this.cancelHandel()
-        }
-      })
-    },
-    //转成blob
-    blobToFile(Blob: any, fileName: any) {
-      //兼容IE
-      Blob.lastModifiedDate = new Date()
-      Blob.name = fileName
-      return Blob
-    },
-    base64ToFile(urlData: any, fileName: any) {
-      let arr = urlData.split(',')
-      let mime = arr[0].match(/:(.*?);/)[1]
-      let bytes = atob(arr[1]) // 解码base64
-      let n = bytes.length
-      let ia = new Uint8Array(n)
-      while (n--) {
-        ia[n] = bytes.charCodeAt(n)
-      }
-      return new File([ia], fileName, { type: mime })
-    },
-    //移动框的事件
-    realTime(data: any) {
-      this.previews = data
-    },
-    //图片缩放
-    changeScale(num: number) {
-      num = num || 1
-      ;(this as any).$refs.cropperRef.changeScale(num)
-    },
-    //向左旋转
-    rotateLeft() {
-      ;(this as any).$refs.cropperRef.rotateLeft()
-    },
-    //向右旋转
-    rotateRight() {
-      ;(this as any).$refs.cropperRef.rotateRight()
-    }
-  },
-  render() {
-    return (
-      <ElDialog
-        modelValue={this.visible}
-        onUpdate:modelValue={val => (this.visible = val)}
-        appendToBody
-        title={this.options.title}
-        closeOnClickModal={false}
-        width={'800px'}
-        v-slots={{
-          footer: () => (
-            <span class="dialog-footer !text-center block">
-              <ElButton
-                onClick={this.cancelHandel}
-                disabled={this.submitLoading}
-              >
-                取消
-              </ElButton>
-              <ElButton
-                type="primary"
-                onClick={this.okHandel}
-                loading={this.submitLoading}
-              >
-                保 存
-              </ElButton>
-            </span>
-          )
-        }}
-      >
-        <ElRow>
-          <ElCol xs={24} md={12} style={{ width: '350px' }}>
-            <VueCropper
-              ref="cropperRef"
-              img={this.options.img}
-              info={true}
-              autoCrop={this.options.autoCrop}
-              autoCropWidth={this.options.autoCropWidth}
-              full={this.options.full}
-              outputType={this.options.outputType}
-              autoCropHeight={this.options.autoCropHeight}
-              fixedBox={this.options.fixedBox}
-              enlarge={this.options.enlarge}
-              onRealTime={this.realTime}
-              style={{ height: '350px' }}
-            />
-            <div class="flex pt-2">
-              <div
-                onClick={() => {
-                  this.changeScale(1)
-                }}
-                class="mr-2 cursor-pointer"
-                title="放大"
-              >
-                <ElIcon size={30} color="#333">
-                  <CirclePlus />
-                </ElIcon>
-              </div>
-              <div
-                onClick={() => {
-                  this.changeScale(-1)
-                }}
-                class="mr-2 cursor-pointer"
-                title="缩小"
-              >
-                <ElIcon size={30} color="#333">
-                  <Remove />
-                </ElIcon>
-              </div>
-              <div
-                onClick={this.rotateRight}
-                title="向右旋转"
-                class="cursor-pointer"
-              >
-                <img src={iconRate} class="w-[30px] h-[30px]" />
-              </div>
-            </div>
-          </ElCol>
-          <ElCol xs={24} md={12} style={{ height: '350px' }}>
-            <div class={styles.previewImg}>
-              <span>预览图片</span>
-              <div
-                class={
-                  this.options.previewsCircle
-                    ? styles['avatar-upload-preview']
-                    : styles['avatar-upload-preview_range']
-                }
-                style={{
-                  width: this.options.autoCropWidth + 'px',
-                  height: this.options.autoCropHeight + 'px'
-                }}
-              >
-                <ElImage src={this.previews.url} style={this.previews.img} />
-              </div>
-            </div>
-          </ElCol>
-        </ElRow>
-      </ElDialog>
-    )
-  }
-})

src/components/col-cropper-1/index.module.less

@@ -1,85 +0,0 @@
-.uploadSection {
-  width: 156px;
-  height: 106px;
-  background: #f8faf9;
-  border-radius: 4px;
-  border: 1px solid rgba(45, 199, 170, 0.26);
-  font-size: 14px;
-  color: #2dc7aa;
-  line-height: 20px;
-}
-
-.uploadClass {
-  height: 106px;
-  width: 100%;
-
-  :global {
-    .el-loading-spinner {
-      margin-top: -43px;
-      height: 106px;
-    }
-  }
-}
-
-.avatar-upload-preview_range,
-.avatar-upload-preview {
-  width: 180px;
-  height: 180px;
-  box-shadow: 0 0 4px #ccc;
-  overflow: hidden;
-  img {
-    background-color: #f7f7f7;
-    height: 100%;
-  }
-}
-.avatar-upload-preview_range {
-  border-radius: 0;
-}
-.previewImg {
-  padding-left: 50px;
-  padding-top: 10px;
-  & > span {
-    display: block;
-    color: #212121;
-    font-size: 16px;
-    padding-bottom: 15px;
-  }
-}
-.operation {
-  font-size: 24px;
-  display: flex;
-  align-items: center;
-  margin-top: 20px;
-  & > i {
-    margin-left: 12px;
-    cursor: pointer;
-  }
-  .icon-rate {
-    display: inline-block;
-    width: 20px;
-    height: 20px;
-    background: url('./images/icon_rate.png') no-repeat center;
-    background-size: contain;
-  }
-}
-.vue-cropper {
-  border-radius: 5px;
-  overflow: hidden;
-}
-:deep(.el-dialog) {
-  margin-bottom: 10vh;
-  .el-dialog__header {
-    // background: #363d55;
-    background: #fff;
-    padding: 15px 20px 15px;
-    .el-dialog__title {
-      color: #212121;
-    }
-    .el-dialog__headerbtn .el-dialog__close {
-      color: #212121;
-    }
-  }
-  .el-dialog__body {
-    padding-top: 0;
-  }
-}

src/components/col-cropper-1/index.tsx

@@ -1,427 +0,0 @@
-// import { ElImage, ElMessage, ElUpload } from 'element-plus'
-import { defineComponent } from 'vue'
-import styles from './index.module.less'
-import iconUpload from '../col-upload/images/icon_upload.png'
-// import Cropper from './cropper'
-import { VueCropper } from 'vue-cropper'
-import umiRequest from 'umi-request'
-import 'vue-cropper/dist/index.css'
-import {
-  ElButton,
-  ElCol,
-  ElDialog,
-  ElIcon,
-  ElImage,
-  ElMessage,
-  ElUpload,
-  ElRow
-} from 'element-plus'
-import { CirclePlus, Remove } from '@element-plus/icons-vue'
-import iconRate from '../col-upload/images/icon_rate.png'
-import request from '@/helpers/request'
-
-export default defineComponent({
-  name: 'col-cropper',
-  props: {
-    modelValue: {
-      type: String,
-      default: ''
-    },
-    options: {
-      // 裁切需要参数
-      type: Object,
-      default: {
-        autoCrop: true, //是否默认生成截图框
-        enlarge: 1, //  图片放大倍数
-        autoCropWidth: 200, //默认生成截图框宽度
-        autoCropHeight: 200, //默认生成截图框高度
-        fixedBox: true, //是否固定截图框大小 不允许改变
-        previewsCircle: true, //预览图是否是原圆形
-        title: '上传图片'
-      }
-    },
-    // 显示图片原始图片
-    showSize: {
-      type: Boolean,
-      default: false
-    },
-    disabled: {
-      type: Boolean,
-      default: false
-    },
-    bucket: {
-      type: String,
-      default: 'daya'
-    },
-    size: {
-      type: Number,
-      default: 5 // 默认5M
-    },
-    accept: {
-      type: String,
-      default: 'images/*'
-    },
-    tips: {
-      type: String,
-      default: '请上传图片'
-    },
-    extraTips: {
-      type: String,
-      default: '图片最大不能超过5MB'
-    },
-    cropUploadSuccess: {
-      type: Function,
-      default: (data: string) => {}
-    }
-  },
-  data() {
-    return {
-      isStopRun: false,
-      loading: false,
-      ossUploadUrl: 'https://ks3-cn-beijing.ksyuncs.com/' + this.bucket,
-      dataObj: {
-        policy: '',
-        signature: '',
-        key: '',
-        KSSAccessKeyId: '',
-        acl: 'public-read',
-        name: ''
-      },
-      visible: false,
-      img: null,
-      optionsList: {
-        img: '', //裁剪图片的地址
-        autoCrop: true, //是否默认生成截图框
-        autoCropWidth: 180, //默认生成截图框宽度
-        autoCropHeight: 180, //默认生成截图框高度
-        fixedBox: false, //是否固定截图框大小 不允许改变
-        full: false,
-        enlarge: 1, // 是否按照截图框比例输出 默认为1
-        previewsCircle: true, //预览图是否是原圆形
-        centerBox: true,
-        outputType: 'png',
-        title: '修改头像',
-        name: null // 文件名称
-      },
-      previews: {} as any,
-      url: {
-        upload: '/sys/common/saveToImgByStr'
-      },
-      submitLoading: false
-    }
-  },
-  methods: {
-    onDelete() {
-      // 删除图片
-      this.$emit('update:modelValue', '')
-    },
-    //从本地选择文件
-    async handleChange(info: any) {
-      if (this.isStopRun) {
-        return
-      }
-      this.loading = true
-      const options = this.options
-      this.getBase64(info.file, (imageUrl: any) => {
-        const target = Object.assign({}, options, {
-          img: imageUrl,
-          name: info.file.name // 上传文件名
-        })
-        // ;(this as any).$refs.CropperModal.edit(target)
-        this.edit(target)
-      })
-    },
-    // 上传之前 格式与大小校验
-    beforeUpload(file) {
-      this.isStopRun = false
-      var fileType = file.type
-      if (fileType.indexOf('image') < 0) {
-        ElMessage.warning('请上传图片')
-        this.isStopRun = true
-        return false
-      }
-      // const isJpgOrPng = this.acceptArray.includes(file.type)
-      // if (!isJpgOrPng) {
-      //   ElMessage.error('你上传图片格式不正确!')
-      //   this.isStopRun = true
-      // }
-      console.log(this.size)
-      const size = this.size || 0
-      const isLtSize = file.size < size * 1024 * 1024
-      if (!isLtSize) {
-        ElMessage.error('图片大小不能超过' + this.size + 'MB!')
-        this.isStopRun = true
-      }
-      return isLtSize
-    },
-    error() {
-      this.remove()
-      this.loading = false
-    },
-    remove() {
-      this.onDelete()
-    },
-    //获取服务器返回的地址
-    handleCropperSuccess(data: any) {
-      //将返回的数据回显
-      this.loading = false
-      console.log(data, 'success')
-      this.$emit('update:modelValue', data)
-      // this.cropUploadSuccess(data)
-      // this.$emit('cropUploadSuccess', data)
-      // console.log(this.modelValue, 'modelValue')
-    },
-    // 取消上传
-    handleCropperClose() {
-      this.loading = false
-      this.remove()
-    },
-    getBase64(img, callback) {
-      const reader = new FileReader()
-      reader.addEventListener('load', () => callback(reader.result))
-      reader.readAsDataURL(img)
-    },
-    edit(record: any) {
-      const { options } = this
-      this.visible = true
-      this.optionsList = Object.assign({}, options, record)
-      console.log(this.options)
-    },
-    /**
-     * 取消截图
-     */
-    cancelHandel() {
-      this.visible = false
-      // this.cropperNo()
-      this.loading = false
-      this.remove()
-    },
-    /**
-     * 确认截图
-     */
-    okHandel() {
-      ;(this as any).$refs.cropperRef.getCropBlob(async data => {
-        this.submitLoading = true
-        const options: any = this.options
-        const fileName =
-          (options.name ? options.name.split('.')[0] : +new Date()) + '.png'
-        try {
-          let key = new Date().getTime() + fileName
-          let obj = {
-            filename: fileName,
-            bucketName: this.bucket,
-            postData: {
-              filename: fileName,
-              acl: 'public-read',
-              key: key,
-              unknowValueField: []
-            }
-          }
-          const res = await request.post('/api-website/getUploadSign', {
-            data: obj
-          })
-          this.dataObj = {
-            policy: res.data.policy,
-            signature: res.data.signature,
-            key: key,
-            KSSAccessKeyId: res.data.kssAccessKeyId,
-            acl: 'public-read',
-            name: fileName
-          }
-
-          let formData = new FormData()
-          for (let key in this.dataObj) {
-            formData.append(key, this.dataObj[key])
-          }
-          formData.append('file', this.blobToFile(data, fileName), fileName)
-          await umiRequest(this.ossUploadUrl, {
-            method: 'POST',
-            data: formData
-          })
-          console.log(this.ossUploadUrl + '/' + key)
-          const uploadUrl = this.ossUploadUrl + '/' + key
-          // this.cropperOk(uploadUrl)
-          this.$emit('update:modelValue', uploadUrl)
-        } catch (err: any) {
-          ElMessage.error(err)
-        } finally {
-          this.submitLoading = false
-          this.cancelHandel()
-        }
-      })
-    },
-    //转成blob
-    blobToFile(Blob: any, fileName: any) {
-      //兼容IE
-      Blob.lastModifiedDate = new Date()
-      Blob.name = fileName
-      return Blob
-    },
-    base64ToFile(urlData: any, fileName: any) {
-      let arr = urlData.split(',')
-      let mime = arr[0].match(/:(.*?);/)[1]
-      let bytes = atob(arr[1]) // 解码base64
-      let n = bytes.length
-      let ia = new Uint8Array(n)
-      while (n--) {
-        ia[n] = bytes.charCodeAt(n)
-      }
-      return new File([ia], fileName, { type: mime })
-    },
-    //移动框的事件
-    realTime(data: any) {
-      this.previews = data
-    },
-    //图片缩放
-    changeScale(num: number) {
-      num = num || 1
-      ;(this as any).$refs.cropperRef.changeScale(num)
-    },
-    //向左旋转
-    rotateLeft() {
-      ;(this as any).$refs.cropperRef.rotateLeft()
-    },
-    //向右旋转
-    rotateRight() {
-      ;(this as any).$refs.cropperRef.rotateRight()
-    }
-  },
-  render() {
-    return (
-      <div class={[styles.colUpload, 'w-full']}>
-        <ElUpload
-          disabled={this.disabled}
-          showFileList={false}
-          accept={this.accept}
-          beforeUpload={this.beforeUpload}
-          // @ts-ignore
-          httpRequest={this.handleChange}
-          // limit={1}
-          ref="uploadRef"
-        >
-          <div
-            ref="uploadDom"
-            class={[styles.uploadClass, 'w-full']}
-            style={{ height: '106px' }}
-          >
-            {this.modelValue ? (
-              <ElImage
-                src={this.modelValue}
-                fit="cover"
-                class={styles.uploadSection}
-              />
-            ) : (
-              <div
-                class={[
-                  styles.uploadSection,
-                  'flex items-center flex-col justify-center'
-                ]}
-              >
-                <img src={iconUpload} class="w-8 h-7 mb-3" />
-                <p>{this.tips}</p>
-              </div>
-            )}
-          </div>
-        </ElUpload>
-
-        <p class="text-3 text-[#999999] leading-6 pt-1">{this.extraTips}</p>
-
-        <ElDialog
-          modelValue={this.visible}
-          onUpdate:modelValue={val => (this.visible = val)}
-          appendToBody
-          title={this.options.title}
-          closeOnClickModal={false}
-          width={'800px'}
-          v-slots={{
-            footer: () => (
-              <span class="dialog-footer !text-center block">
-                <ElButton
-                  onClick={this.cancelHandel}
-                  disabled={this.submitLoading}
-                >
-                  取消
-                </ElButton>
-                <ElButton
-                  type="primary"
-                  onClick={this.okHandel}
-                  loading={this.submitLoading}
-                >
-                  保 存
-                </ElButton>
-              </span>
-            )
-          }}
-        >
-          <ElRow>
-            <ElCol xs={24} md={12} style={{ width: '350px' }}>
-              <VueCropper
-                ref="cropperRef"
-                img={this.optionsList.img}
-                info={true}
-                autoCrop={this.optionsList.autoCrop}
-                autoCropWidth={this.optionsList.autoCropWidth}
-                full={this.optionsList.full}
-                outputType={this.optionsList.outputType}
-                autoCropHeight={this.optionsList.autoCropHeight}
-                fixedBox={this.optionsList.fixedBox}
-                enlarge={this.optionsList.enlarge}
-                onRealTime={this.realTime}
-                style={{ height: '350px' }}
-              />
-              <div class="flex pt-2">
-                <div
-                  onClick={() => {
-                    this.changeScale(1)
-                  }}
-                  class="mr-2 cursor-pointer"
-                  title="放大"
-                >
-                  <ElIcon size={30} color="#333">
-                    <CirclePlus />
-                  </ElIcon>
-                </div>
-                <div
-                  onClick={() => {
-                    this.changeScale(-1)
-                  }}
-                  class="mr-2 cursor-pointer"
-                  title="缩小"
-                >
-                  <ElIcon size={30} color="#333">
-                    <Remove />
-                  </ElIcon>
-                </div>
-                <div
-                  onClick={this.rotateRight}
-                  title="向右旋转"
-                  class="cursor-pointer"
-                >
-                  <img src={iconRate} class="w-[30px] h-[30px]" />
-                </div>
-              </div>
-            </ElCol>
-            <ElCol xs={24} md={12} style={{ height: '350px' }}>
-              <div class={styles.previewImg}>
-                <span>预览图片</span>
-                <div
-                  class={
-                    this.optionsList.previewsCircle
-                      ? styles['avatar-upload-preview']
-                      : styles['avatar-upload-preview_range']
-                  }
-                  style={{
-                    width: this.optionsList.autoCropWidth + 'px',
-                    height: this.optionsList.autoCropHeight + 'px'
-                  }}
-                >
-                  <ElImage src={this.previews.url} style={this.previews.img} />
-                </div>
-              </div>
-            </ElCol>
-          </ElRow>
-        </ElDialog>
-      </div>
-    )
-  }
-})

src/helpers/request.ts

@@ -81,7 +81,7 @@ request.interceptors.response.use(
 
       if (data.code === 403) {
         removeAuth()
-        // window.location.href = location.origin
+        window.location.href = location.origin
         ElMessage.error('登录已过期，请重新登录')
       }
       throw new Error(msg)

src/views/user-info/live-operation/course-content/index.module.less

@@ -4,8 +4,8 @@
   .arrangeCell {
     margin: 10px 0 0;
     width: auto;
-    border-radius: 10px;
-    overflow: hidden;
+    // border-radius: 10px;
+    // overflow: hidden;
   }
   .rTitle {
     display: flex;

src/views/user-info/live-operation/course-content/index.tsx

@@ -57,7 +57,7 @@ export default defineComponent({
       }
       try {
         let res = await request.post(
-          '/api-teacher/courseSchedule/createLiveCourseCalendar',
+          '/api-website/courseSchedule/createLiveCourseCalendar',
           {
             data: {
               ...params,
@@ -138,7 +138,7 @@ export default defineComponent({
           })
         })
         const res = await request.post(
-          '/api-teacher/courseGroup/lockCourseToCache',
+          '/api-website/courseGroup/lockCourseToCache',
           {
             data: {
               courseNum: createState.live.courseNum,
@@ -175,7 +175,7 @@ export default defineComponent({
     },
     async _unLookCourse() {
       try {
-        await request.get('/api-teacher/courseGroup/unlockCourseToCache', {
+        await request.get('/api-website/courseGroup/unlockCourseToCache', {
           params: {
             teacherId: state.user.data?.userId
           }
@@ -236,7 +236,7 @@ export default defineComponent({
             />
           </div>
 
-          <div class={[styles.arrangeCell, 'mb12']}>
+          <div class={[styles.arrangeCell, '!my-3']}>
             <div class={styles.rTitle}>
               <span>已选择课程时间</span>
             </div>

src/views/user-info/live-operation/course-info/index.tsx

@@ -341,8 +341,8 @@ export default defineComponent({
             type="primary"
             class="!w-40 !h-[38px]"
             onClick={() => {
-              createState.active = 1
-              return
+              // createState.active = 1
+              // return
               ;(this as any).$refs.form.validate(async (valid: boolean) => {
                 if (valid) {
                   createState.active = 1

src/views/user-info/live-operation/course-plan/index.tsx

@@ -1,8 +1,55 @@
 import { ElButton, ElForm, ElFormItem, ElInput } from 'element-plus'
 import { defineComponent } from 'vue'
+import { basePlan, createState } from '../createState'
 
 export default defineComponent({
   name: 'course-plan',
+  async mounted() {
+    let list = createState.live.coursePlanList
+    let listLength = list.length || 0
+    if (createState.live.courseNum > listLength) {
+      for (let i = 0; i < createState.live.courseNum - listLength; i++) {
+        await this.addPlan()
+      }
+    } else if (createState.live.courseNum < listLength) {
+      for (let i = 0; i < listLength - createState.live.courseNum; i++) {
+        await this.delPlan()
+      }
+    }
+  },
+  methods: {
+    async addPlan() {
+      let list = createState.live.coursePlanList || []
+      list.push({
+        plan: '',
+        startTime: '',
+        endTime: '',
+        classNum: list.length + 1
+      })
+      createState.live.coursePlanList = list
+    },
+    async delPlan(index?: number) {
+      let list = createState.live.coursePlanList || []
+      list.splice(index || list.length - 1, 1)
+      createState.live.coursePlanList = list
+    },
+    onSubmit() {
+      ;(this as any).$refs.form.validate(async (valid: boolean) => {
+        if (valid) {
+          createState.active = 2
+        } else {
+          this.$nextTick(() => {
+            let isError = document.getElementsByClassName('is-error')
+            isError[0].scrollIntoView({
+              block: 'center',
+              behavior: 'smooth'
+            })
+          })
+          return false
+        }
+      })
+    }
+  },
   render() {
     return (
       <>
@@ -12,14 +59,42 @@ export default defineComponent({
           ref="form"
           labelWidth={'100px'}
           labelPosition="top"
+          model={createState.live}
         >
-          <ElFormItem label="第一课">
-            <ElInput type="textarea" rows="3" />
-          </ElFormItem>
+          {createState.live.coursePlanList &&
+            createState.live.coursePlanList.map((item: any, index: number) => (
+              <ElFormItem
+                label={`第${item.classNum}课`}
+                prop={`coursePlanList.${index}.plan`}
+                rules={[{ required: true, message: '请输入课程计划' }]}
+              >
+                <ElInput
+                  v-model={item.plan}
+                  type="textarea"
+                  placeholder="请输入课程计划"
+                  // @ts-ignore
+                  maxlength={200}
+                  rows={4}
+                  showWordLimit
+                />
+              </ElFormItem>
+            ))}
         </ElForm>
         <div class="border-t border-t-[#E5E5E5] text-center pt-6 pb-7">
-          <ElButton class="!w-40 !h-[38px]">上一步</ElButton>
-          <ElButton type="primary" class="!w-40 !h-[38px]">
+          <ElButton
+            class="!w-40 !h-[38px]"
+            onClick={() => {
+              createState.active = 0
+              createState.live.coursePlanList = [{ ...basePlan }]
+            }}
+          >
+            上一步
+          </ElButton>
+          <ElButton
+            type="primary"
+            class="!w-40 !h-[38px]"
+            onClick={this.onSubmit}
+          >
             下一步
           </ElButton>
         </div>

src/views/user-info/live-operation/createState.ts

@@ -10,7 +10,7 @@ export const basePlan = {
 const original = () => {
   return {
     subjectList: [], // 声部列表
-    active: 2,
+    active: 0,
     rate: 0,
     minutes: [] as any,
     tabIndex: 1,