Merge branch 'master' of http://git.dayaedu.com/lex/colexiu-project

# Conflicts:
#	src/helpers/request.ts

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

@@ -77,66 +77,44 @@
   }
 }
 
-.calenderPopup {
-  border-radius: 8px;
-  overflow: hidden;
-  padding: 18px 12px 28px;
-  .popup {
-    width: 312px;
-    background: #ffffff;
+.container {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  padding-bottom: 14px;
+}
+.noDay {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex: 1;
+  padding: 25px 0 35px;
+  .clock {
+    width: 30px;
   }
-  .title {
-    display: flex;
-    align-items: center;
-    justify-content: space-around;
-    font-size: 18px;
+  span {
+    padding-left: 10px;
+    font-size: 14px;
     font-weight: 500;
-    color: #333333;
-    line-height: 25px;
-    padding: 0 20px 25px;
-  }
-  .container {
-    display: flex;
-    align-items: center;
-    flex-wrap: wrap;
-    padding-bottom: 14px;
-    & > div {
-      flex-basis: 33.33%;
-      text-align: center;
-    }
-  }
-  .noDay {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    flex: 1;
-    padding: 25px 0 35px;
-    .clock {
-      width: 30px;
-    }
-    span {
-      padding-left: 10px;
-      font-size: 14px;
-      font-weight: 500;
-      color: #999;
-    }
+    color: #999;
   }
-  .tag {
-    padding: 8px 10px;
-    margin-bottom: 10px;
-    font-size: 12px;
-    color: #333333 !important;
-    border-color: #d8d8d8 !important;
+}
+// .tag {
+//   background-color: red;
+//   padding: 8px 10px;
+//   margin-bottom: 10px;
+//   font-size: 12px;
+//   color: #333333 !important;
+//   border-color: #d8d8d8 !important;
 
-    &.active {
-      color: var(--van-primary) !important;
-      background: #e0f7f3;
-      border-color: var(--van-primary) !important;
-    }
-  }
+//   &.active {
+//     color: var(--van-primary) !important;
+//     background: #e0f7f3;
+//     border-color: var(--van-primary) !important;
+//   }
+// }
 
-  .dayBtn {
-    display: flex;
-    align-items: center;
-  }
+.dayBtn {
+  display: flex;
+  align-items: center;
 }

src/components/col-calendar/index.tsx

@@ -5,7 +5,7 @@ import dayjs from 'dayjs'
 import styles from './index.module.less'
 import IconArrow from '@/common/images/icon_arrow.png'
 import IconClock from '@/common/images/icon_clock.png'
-import { ElButton, ElDialog, ElMessage } from 'element-plus'
+import { ElButton, ElDialog, ElMessage, ElTag } from 'element-plus'
 
 export default defineComponent({
   name: 'calendar',
@@ -215,7 +215,7 @@ export default defineComponent({
   },
   render() {
     return (
-      <>
+      <div>
         <Calendar
           class={styles.calendar}
           showTitle={false}
@@ -253,117 +253,60 @@ export default defineComponent({
         <ElDialog
           modelValue={this.show}
           onUpdate:modelValue={e => (this.show = e)}
-          class={styles.calenderPopup}
+          title={this.selectDayTitle}
+          width={'520px'}
         >
-          <div class={styles.popup}>
-            <div class={styles.title}>
-              <span>{this.selectDayTitle}</span>
-            </div>
-
-            <div class={styles.container}>
-              {this.dayList.map((item: any) => (
-                <div>
-                  <Tag
-                    round
-                    class={[styles.tag, item.checked ? styles.active : '']}
-                    size="large"
-                    plain
-                    onClick={() => this.onSelectDay(item)}
-                  >
-                    {item.start}～{item.end}
-                  </Tag>
-                </div>
-              ))}
-              {this.dayList.length <= 0 && (
-                <div class={styles.noDay}>
-                  <Image src={IconClock} class={styles.clock} fit="cover" />
-                  <span>今日已约满</span>
-                </div>
-              )}
-            </div>
-
-            <div class={[styles.dayBtn, 'flex']}>
-              <ElButton
-                round
-                plain
-                style={{ width: '33.33%', marginRight: '10px' }}
-                onClick={() => {
-                  this.show = false
-                  this.selectDays = []
-                }}
-              >
-                取消
-              </ElButton>
-              <ElButton
-                type="primary"
-                round
-                disabled={!(this.selectDays.length > 0)}
-                onClick={() => {
-                  this.selectDay && this.selectDay(this.selectDays)
-                  this.show = false
-                }}
-              >
-                确认
-              </ElButton>
-            </div>
+          <div class={[styles.container, 'flex flex-wrap']}>
+            {this.dayList.map((item: any) => (
+              <div class="w-1/4 mb-2">
+                <ElTag
+                  round
+                  class={[
+                    'cursor-pointer w-28 !border-[#2DC7AA] !color-[#2DC7AA]'
+                  ]}
+                  size="large"
+                  onClick={() => this.onSelectDay(item)}
+                  effect={item.checked ? 'dark' : 'light'}
+                >
+                  {item.start}～{item.end}
+                </ElTag>
+              </div>
+            ))}
+            {this.dayList.length <= 0 && (
+              <div class={styles.noDay}>
+                <Image src={IconClock} class={styles.clock} fit="cover" />
+                <span>今日已约满</span>
+              </div>
+            )}
           </div>
-        </ElDialog>
-        {/* <Popup show={this.show} class={styles.calenderPopup}>
-          <div class={styles.popup}>
-            <div class={styles.title}>
-              <span>{this.selectDayTitle}</span>
-            </div>
-
-            <div class={styles.container}>
-              {this.dayList.map((item: any) => (
-                <div>
-                  <Tag
-                    round
-                    class={[styles.tag, item.checked ? styles.active : '']}
-                    size="large"
-                    plain
-                    onClick={() => this.onSelectDay(item)}
-                  >
-                    {item.start}～{item.end}
-                  </Tag>
-                </div>
-              ))}
-              {this.dayList.length <= 0 && (
-                <div class={styles.noDay}>
-                  <Image src={IconClock} class={styles.clock} fit="cover" />
-                  <span>今日已约满</span>
-                </div>
-              )}
-            </div>
 
-            <div class={styles.dayBtn}>
-              <Button
-                round
-                plain
-                style={{ width: '33.33%', marginRight: '10px' }}
-                onClick={() => {
-                  this.show = false
-                  this.selectDays = []
-                }}
-              >
-                取消
-              </Button>
-              <Button
-                type="primary"
-                block
-                round
-                disabled={!(this.selectDays.length > 0)}
-                onClick={() => {
-                  this.selectDay && this.selectDay(this.selectDays)
-                  this.show = false
-                }}
-              >
-                确认
-              </Button>
-            </div>
+          <div class={[styles.dayBtn, 'flex justify-center mt-4']}>
+            <ElButton
+              round
+              plain
+              class="!w-40 !h-[38px]"
+              onClick={() => {
+                this.show = false
+                this.selectDays = []
+              }}
+            >
+              取消
+            </ElButton>
+            <ElButton
+              type="primary"
+              round
+              class="!w-40 !h-[38px]"
+              disabled={!(this.selectDays.length > 0)}
+              onClick={() => {
+                this.selectDay && this.selectDay(this.selectDays)
+                this.show = false
+              }}
+            >
+              确认
+            </ElButton>
           </div>
-        </Popup> */}
-      </>
+        </ElDialog>
+      </div>
     )
   }
 })

src/helpers/request.ts

@@ -31,7 +31,7 @@ let initRequest = false
 
 request.interceptors.request.use(
   (url, options: any) => {
-    console.log(url)
+    // console.log(url)
     initRequest = options.initRequest || false
     const Authorization = getAuth() || ''
     const authHeaders: any = {}

src/views/App.tsx

@@ -12,7 +12,7 @@ import silder from '@/components/silder'
 export default defineComponent({
   components: { silder },
   name: 'App',
-  async mounted() {
+  async created() {
     // 获取用户信息
     await getUserInfo()
   },

src/views/muiscDetial/index.module.less

@@ -11,6 +11,7 @@
   .left {
     width: 692px;
     background-color: #fff;
+    margin-right: 14px;
     .title {
       padding: 28px 28px 0;
       background-color: #fff;
@@ -48,12 +49,268 @@
       margin: 0 auto;
       border: 1px dotted #ccc;
     }
+    .showCode {
+      position: relative;
+      .showCodeWrap {
+        position: absolute;
+        z-index: 10;
+        bottom: 0;
+        .close {
+          width: 19px;
+          height: 19px;
+          position: absolute;
+          z-index: 10;
+          top: 5px;
+          right: 5px;
+          cursor: pointer;
+        }
+        .code {
+          width: 74px;
+          height: 74px;
+          position: absolute;
+          z-index: 10;
+          top: 10px;
+          left: 10px;
+        }
+        .title {
+          padding: 0;
+          height: 22px;
+          font-size: 16px;
+          font-family: PingFangSC-Semibold, PingFang SC;
+          font-weight: 600;
+          color: #000000;
+          line-height: 22px;
+          position: absolute;
+          z-index: 10;
+          top: 14px;
+          left: 101px;
+          background-color: transparent;
+        }
+        .conent {
+          position: absolute;
+          z-index: 10;
+          top: 38px;
+          left: 101px;
+          font-size: 14px;
+          font-family: PingFangSC-Regular, PingFang SC;
+          font-weight: 400;
+          color: #333333;
+          line-height: 20px;
+        }
+        .subConent {
+          position: absolute;
+          z-index: 10;
+          top: 58px;
+          left: 101px;
+          font-size: 14px;
+          font-family: PingFangSC-Regular, PingFang SC;
+          font-weight: 400;
+          color: #333333;
+          line-height: 20px;
+        }
+      }
+    }
     .audios {
       width: 100%;
       border-radius: 0;
       background-color: #333;
     }
   }
+  .right {
+    .musicInfo {
+      background-color: #fff;
+      padding: 24px;
+      width: 494px;
+      margin-bottom: 14px;
+      h2 {
+        font-size: 20px;
+        font-family: PingFangSC-Semibold, PingFang SC;
+        font-weight: 600;
+        color: #000000;
+        line-height: 28px;
+        margin-bottom: 12px;
+      }
+      .collect {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        margin-bottom: 21px;
+        .start {
+          width: 23px;
+          height: 23px;
+          margin-right: 6px;
+        }
+        p {
+          font-size: 18px;
+          font-family: PingFangSC-Regular, PingFang SC;
+          font-weight: 400;
+          color: #000000;
+          line-height: 25px;
+        }
+      }
+      .subTitle {
+        margin-bottom: 15px;
+        span {
+          font-size: 16px;
+          line-height: 22px;
+          color: #666;
+        }
+      }
+    }
+    .btooom {
+      background-color: #fff;
+      .teacherInfo {
+        padding: 20px;
+        background-color: #fff;
+        margin-bottom: 25px;
+        .teacherHeadWrap {
+          display: flex;
+          flex-direction: row;
+          align-items: center;
+          justify-content: space-between;
+          .teacherHeadLeft {
+            display: flex;
+            flex-direction: row;
+            align-items: center;
+            .teacherHeader {
+              width: 54px;
+              height: 54px;
+              border-radius: 50%;
+              overflow: hidden;
+              margin-right: 16px;
+            }
+            .teacherHeadName {
+              padding-top: 2px;
+              display: flex;
+              flex-direction: row;
+              align-items: center;
+              font-size: 20px;
+              font-family: PingFangSC-Semibold, PingFang SC;
+              font-weight: 600;
+              color: #000000;
+              line-height: 28px;
+              span {
+                margin-right: 12px;
+              }
+              .teacherIcon {
+                width: 54px;
+                height: 22px;
+                margin-right: 5px;
+              }
+            }
+            .fens {
+              font-size: 16px;
+              font-family: PingFangSC-Regular, PingFang SC;
+              font-weight: 400;
+              color: #999999;
+              line-height: 22px;
+              span {
+                color: #333333;
+              }
+            }
+          }
+          .teacherHeadRight {
+            width: 67px;
+            height: 30px;
+            background: #2dc7aa;
+            border-radius: 21px;
+            font-size: 18px;
+            font-family: PingFangSC-Semibold, PingFang SC;
+            font-weight: 600;
+            color: #ffffff;
+            line-height: 30px;
+            text-align: center;
+            cursor: pointer;
+          }
+        }
+        //
+        .courseWrap {
+          padding: 20px;
+          background-color: #fff;
+          .courseTitle {
+            display: flex;
+            flex-direction: row;
+            align-items: center;
+            font-size: 20px;
+            font-family: PingFangSC-Medium, PingFang SC;
+            font-weight: 500;
+            color: #000000;
+            line-height: 28px;
+            img {
+              width: 26px;
+              height: 26px;
+              margin-right: 8px;
+            }
+          }
+        }
+
+        .titleWrap {
+          display: flex;
+          flex-direction: row;
+          align-items: center;
+          justify-content: flex-start;
+          margin-top: 20px;
+          padding-bottom: 12px;
+          span {
+            font-size: 20px;
+            color: #000;
+            line-height: 28px;
+            font-weight: 600;
+          }
+          img {
+            width: 24px;
+            height: 24px;
+            margin-right: 10px;
+          }
+        }
+        .teacherDetail {
+          font-size: 18px;
+          font-family: PingFangSC-Regular, PingFang SC;
+          font-weight: 400;
+          color: #666666;
+          line-height: 25px;
+        }
+        .teacherVideoList {
+          display: flex;
+          flex-direction: row;
+          flex-wrap: wrap;
+          .videoItem {
+            .Styles {
+              width: 218px;
+              height: 145px;
+            }
+            .videoItemVideo {
+              width: 218px;
+              height: 145px;
+            }
+            margin-right: 18px;
+            margin-bottom: 12px;
+            width: 218px;
+            height: 145px;
+            position: relative;
+            &:nth-child(2n) {
+              margin-right: 0;
+            }
+          }
+        }
+      }
+      .otherMusic {
+        padding: 0 20px;
+        h2 {
+          font-size: 18px;
+          font-family: PingFangSC-Semibold, PingFang SC;
+          font-weight: 600;
+          color: #000000;
+          line-height: 25px;
+          margin-bottom: 14px;
+        }
+        .otherMusicList {
+          padding: 18px 0;
+          border-top: 1px solid #DEDEDE;
+        }
+      }
+    }
+  }
 }
 :global {
   .subjectChiose {
@@ -63,10 +320,8 @@
       background-color: #f1f1f1;
       border: none;
       box-shadow: none !important;
-
     }
     .el-input__wrapper.is-focus {
-
       border: none !important;
       box-shadow: none !important;
     }

src/views/muiscDetial/index.tsx

@@ -4,6 +4,15 @@ import { ElButton, ElOption, ElSelect } from 'element-plus'
 import printIcon from './images/printIcon.png'
 import banner from './images/banner.png'
 import colVideo from '@/components/col-video/index'
+import iconClose from '@/views/login/images/icon_close.png'
+import start from '@/components/albumItem/images/start.png'
+import teacher from '@/views/videoDetailList/images/teacher.png'
+import teacherHeader from '@/common/images/icon_teacher.png'
+import musiceIcon from '@/views/videoDetailList/images/musiceIcon.png'
+import tagItem from '@/components/tagItem'
+import code from './images/code.png'
+import musicItem from './modals/musicItem'
+import request from '@/helpers/request'
 export default defineComponent({
   name: 'muiscDetial',
   props: {
@@ -12,18 +21,42 @@ export default defineComponent({
       default: ''
     }
   },
-  components:{
-    colVideo
+  components: {
+    colVideo,
+    tagItem,
+    musicItem
   },
   setup(props, conent) {
     const state = reactive({
       title: props.title,
       subjectId: '',
-      subjectList:[]
+      subjectList: [],
+      tagList: [],
+      teacherDetail: {} as any,
+      musicList:[]
+    })
+    const getMusicList = async () => {
+      try {
+        const res = await request.post('/api-website/open/music/sheet/list', {
+          data: {
+            albumStatus: 'PASS',
+            page: 1,
+            rows: 5,
+            state: 1
+          }
+        })
+
+        state.musicList = res.data.rows
+      } catch (e) {
+        console.log(e)
+      }
+    }
+    onMounted(()=>{
+      getMusicList()
     })
     return () => (
       <>
-      <div class={classes.wall}></div>
+        <div class={classes.wall}></div>
         <div class={[classes.width1200, classes.musicWrap]}>
           <div class={classes.left}>
             <div class={classes.title}>
@@ -46,14 +79,105 @@ export default defineComponent({
             </div>
             <div class={classes.musicContent}></div>
             <div class={classes.showCode}>
-              <img src={banner} alt="" />
+              <div class={classes.showCodeWrap}>
+                <img class={classes.close} src={iconClose} alt="" />
+                <img class={classes.code} src={code} alt="" />
+                <h2 class={classes.title}>酷乐秀</h2>
+                <p class={classes.conent}>扫码下载酷乐秀APP</p>
+                <p class={classes.subConent}>
+                  使用小酷Ai即可智能练习本首曲目哦！
+                </p>
+                <img src={banner} alt="" />
+              </div>
+            </div>
+            <colVideo
+              src=""
+              styleValue={{
+                height: '68px',
+                bacground: '#333'
+              }}
+              type={'audto'}
+              settings={['captions', 'quality', 'speed', 'loop']}
+              class={classes.audios}
+            ></colVideo>
+          </div>
+          <div class={classes.right}>
+            <div class={classes.musicInfo}>
+              <h2>曲目：红莲华</h2>
+              <div class={classes.collect}>
+                <img src={start} class={classes.start} alt="" />
+                <p>321人收藏</p>
+              </div>
+              <div class={classes.tagList}>
+                {state.tagList.map((item: any) => {
+                  return <tagItem title={item.key}>{item.key}</tagItem>
+                })}
+              </div>
+              <p class={classes.subTitle}>
+                作曲人：<span>草野华余子</span>
+              </p>
+              <p class={classes.subTitle}>
+                声部：<span>长笛、萨克斯、单簧管</span>
+              </p>
+            </div>
+            <div class={classes.btooom}>
+              <div class={classes.teacherInfo}>
+                <div class={classes.teacherHeadWrap}>
+                  <div class={classes.teacherHeadLeft}>
+                    <img
+                      src={
+                        state.teacherDetail.avatar
+                          ? state.teacherDetail.avatar
+                          : teacherHeader
+                      }
+                      alt=""
+                      class={classes.teacherHeader}
+                    />
+                    <div class={classes.teacherHeadInfo}>
+                      <div class={classes.teacherHeadName}>
+                        <span>{state.teacherDetail.username}</span>
+                        {state.teacherDetail.teacherType &&
+                        state.teacherDetail.teacherType.indexOf('ENTRY') ==
+                          -1 ? (
+                          ''
+                        ) : (
+                          <img
+                            src={teacher}
+                            class={classes.teacherIcon}
+                            alt=""
+                          />
+                        )}
+                        {state.teacherDetail.teacherType &&
+                        state.teacherDetail.teacherType.indexOf('MUSICIAN') ==
+                          -1 ? (
+                          ''
+                        ) : (
+                          <img
+                            src={musiceIcon}
+                            class={classes.teacherIcon}
+                            alt=""
+                          />
+                        )}
+                      </div>
+                      <p class={classes.fens}>
+                        粉丝 <span>{state.teacherDetail.fansNum}</span>
+                      </p>
+                    </div>
+                  </div>
+                  <div class={classes.teacherHeadRight}>关注</div>
+                </div>
+              </div>
+              <div class={classes.otherMusic}>
+                <h2>Ta的曲谱</h2>
+                <div class={classes.otherMusicList}>
+                  {state.musicList.map(item=>{
+                    return  <musicItem item={item}></musicItem>
+                  })}
+
+                </div>
+              </div>
             </div>
-            <colVideo src="" styleValue={{
-              height:'68px',
-              bacground:'#333'
-            }} type={'audto'} settings={['captions', 'quality', 'speed', 'loop']} class={classes.audios}></colVideo>
           </div>
-          <div class={classes.right}></div>
         </div>
       </>
     )

src/views/muiscDetial/modals/musicItem.module.less

@@ -0,0 +1,50 @@
+.itemWrap {
+  height: 40px;
+  background: #ffffff;
+  border-radius: 12px;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  width: 100%;
+  border-radius: 12px;
+  margin-bottom: 10px;
+  cursor: pointer;
+  .left {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    .imgWrap {
+      width: 40px;
+      height: 40px;
+      margin-right: 18px;
+    }
+    .textWrap {
+      p {
+        font-weight: 600;
+        color: #333333;
+        line-height: 22px;
+        font-size: 14px;
+        span {
+          font-weight: 400;
+          color: #6a6a6a;
+        }
+      }
+      .authorInfo {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        .icon {
+          width: 20px;
+          height: 20px;
+          border-radius: 27px;
+          margin-right: 6px;
+        }
+        .authorName {
+          color: #333;
+          font-size: 12px;
+          margin-right: 8px;
+        }
+      }
+    }
+  }
+}

src/views/muiscDetial/modals/musicItem.tsx

@@ -0,0 +1,70 @@
+import { defineComponent, reactive,watch } from 'vue'
+import icon from '../videoDetailItem/images/icon.png'
+import classes from './musicItem.module.less'
+import music from '@/components/musicLIstItem/images/music.png'
+import arrow from '@/components/musicLIstItem/images/arrow.png'
+
+type Props = {
+  id?: Number
+  addName: String
+  addUserAvatar: String
+  musicSheetName: String
+  subjectNames: String
+  composer: String
+  chargeType: String
+}
+const chargeTypes = {
+  CHARGE: '点播',
+  FREE: '免费',
+  VIP: 'VIP'
+}
+
+export default defineComponent({
+  name: 'musicItem',
+  props: {
+    item: {
+      type: Object as () => Props,
+      default: () => ({})
+    },
+    onClick: {
+      type: Function,
+      default: (item: any) => {}
+    }
+  },
+  setup(props: any) {
+    const state = reactive({
+      item:props.item
+    })
+
+    watch(
+      () => props.item,
+      item => {
+        state.item = item
+      }
+    )
+    return () => (
+      <div
+        onClick={() => {
+          props.onClick(state.item)
+        }}
+      >
+        <div class={classes.itemWrap}>
+          <div class={classes.left}>
+            <div class={classes.imgWrap}>
+              <img src={music} alt="" />
+            </div>
+            <div class={classes.textWrap}>
+              <p>
+                {state.item.musicSheetName}
+
+              </p>
+              <p>
+              <span>作曲: {state.item.composer}</span>
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+    )
+  }
+})

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

@@ -0,0 +1,18 @@
+.courseContent {
+  :global {
+    .el-dialog {
+      --el-dialog-width: 375px !important;
+    }
+
+    .el-dialog__body {
+      padding: 0;
+    }
+    .el-dialog__footer {
+      background-color: #f6f8f9;
+    }
+
+    .el-tabs__nav-wrap::after {
+      background-color: transparent;
+    }
+  }
+}

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

@@ -0,0 +1,230 @@
+import ColCropper from '@/components/col-cropper'
+import { verifiyNumberInteger } from '@/helpers/toolsValidate'
+import {
+  dayjs,
+  ElButton,
+  ElCol,
+  ElDatePicker,
+  ElForm,
+  ElFormItem,
+  ElImage,
+  ElInput,
+  ElRadio,
+  ElRadioGroup,
+  ElRow,
+  ElTabPane,
+  ElTabs
+} from 'element-plus'
+import { defineComponent } from 'vue'
+import { createState } from '../createState'
+import styles from './index.module.less'
+
+export default defineComponent({
+  name: 'course-class',
+  data() {
+    return {
+      typeDateTime: 'start',
+      dateStatus: false,
+      currentDate: new Date(),
+      minDate: dayjs().toDate(),
+      maxDate: new Date()
+    }
+  },
+  mounted() {
+    // this.maxDate = dayjs(createState.selectCourseList[0].startTime)
+    //   .subtract(1, 'day')
+    //   .toDate()
+
+    // createState.live.salesStartDate =
+    //   createState.live.salesStartDate ||
+    //   dayjs(this.minDate).format('YYYY-MM-DD')
+    // createState.live.salesEndDate =
+    //   createState.live.salesEndDate || dayjs(this.maxDate).format('YYYY-MM-DD')
+    console.log(createState.templateList, '1212')
+  },
+  methods: {
+    tabChange(name: number) {
+      createState.tabIndex = name
+    },
+    selectImg(val: string) {
+      createState.live.backgroundPic = ''
+      createState.live.backgroundPicTemplate = val
+    },
+    onFormatter(e: any) {
+      e.target.value = verifiyNumberInteger(e.target.value)
+    },
+    onConfirm(val: any) {
+      if (this.typeDateTime === 'start') {
+        createState.live.salesStartDate = dayjs(val).format('YYYY-MM-DD')
+        if (
+          createState.live.salesEndDate &&
+          dayjs(createState.live.salesStartDate).isAfter(
+            dayjs(createState.live.salesEndDate)
+          )
+        ) {
+          createState.live.salesEndDate = ''
+        }
+      } else if (this.typeDateTime === 'end') {
+        createState.live.salesEndDate = dayjs(val).format('YYYY-MM-DD')
+      }
+      this.dateStatus = false
+    }
+  },
+  render() {
+    return (
+      <div class={styles.courseContent}>
+        <ElForm
+          class="px-[200px] pb-10 pt-7"
+          size="large"
+          ref="form"
+          labelWidth={'120px'}
+          labelPosition="left"
+          model={createState.live}
+        >
+          <ElFormItem
+            label="开售日期"
+            prop="salesStartDate"
+            rules={[
+              {
+                required: true,
+                message: '请输入开售日期'
+              }
+            ]}
+          >
+            <ElDatePicker
+              class="!w-full"
+              v-model={createState.live.salesStartDate}
+              placeholder="请输入开售日期"
+              type="date"
+            />
+          </ElFormItem>
+          <ElFormItem
+            label="停售日期"
+            prop="salesEndDate"
+            rules={[
+              {
+                required: true,
+                message: '请输入停售日期'
+              }
+            ]}
+          >
+            <ElDatePicker
+              class="!w-full"
+              v-model={createState.live.salesEndDate}
+              placeholder="请输入停售日期"
+              type="date"
+            />
+          </ElFormItem>
+          <ElFormItem
+            label="最低开课人数"
+            prop="mixStudentNum"
+            rules={[
+              {
+                required: true,
+                message: '请输入最低开课人数'
+              }
+            ]}
+          >
+            <ElInput
+              placeholder="请输入最低开课人数"
+              v-model={createState.live.mixStudentNum}
+              // @ts-ignore
+              onKeyup={this.onFormatter}
+              maxlength={5}
+              v-slots={{
+                append: () => <span class="text-base text-[#333]">人</span>
+              }}
+            />
+          </ElFormItem>
+          <ElFormItem label="课程封面" class="!mb-0" required>
+            <ElTabs
+              v-model={createState.tabIndex}
+              class={styles.tabs}
+              onTab-change={(name: any) => {
+                this.tabChange(name)
+              }}
+            >
+              <ElTabPane label="图片模板" name={1}></ElTabPane>
+              <ElTabPane label="自定义模板" name={2}></ElTabPane>
+            </ElTabs>
+          </ElFormItem>
+
+          {createState.tabIndex === 1 && (
+            <ElFormItem
+              prop="backgroundPicTemplate"
+              rules={[
+                {
+                  required: true,
+                  message: '请上传课程封面'
+                }
+              ]}
+            >
+              <ElRadioGroup v-model={createState.live.backgroundPicTemplate}>
+                <ElRow>
+                  {createState.templateList.map((item: any) => (
+                    <ElCol span={10} class="mb-3 cursor-pointer">
+                      <div
+                        class="w-40 relative rounded-xl overflow-hidden border"
+                        onClick={() => {
+                          this.selectImg(item)
+                        }}
+                      >
+                        <ElImage src={item} class="align-middle" />
+                        <ElRadio
+                          label={item}
+                          class="!absolute bottom-2 right-0 !h-auto z-10"
+                        >
+                          {''}
+                        </ElRadio>
+                      </div>
+                    </ElCol>
+                  ))}
+                </ElRow>
+              </ElRadioGroup>
+            </ElFormItem>
+          )}
+
+          {createState.tabIndex === 2 && (
+            <ElFormItem
+              prop="backgroundPic"
+              rules={[
+                {
+                  required: true,
+                  message: '请上传课程封面',
+                  trigger: 'change'
+                }
+              ]}
+            >
+              <ColCropper
+                modelValue={createState.live.backgroundPic}
+                bucket="video-course"
+                cropUploadSuccess={(data: any) => {
+                  createState.live.backgroundPic = data
+                  createState.live.backgroundPicTemplate = ''
+                }}
+                options={{
+                  fixedNumber: [3, 2],
+                  autoCropWidth: 300,
+                  autoCropHeight: 200
+                }}
+              />
+            </ElFormItem>
+          )}
+        </ElForm>
+        <div class="border-t border-t-[#E5E5E5] text-center pt-6 pb-7">
+          <ElButton
+            class="!w-40 !h-[38px]"
+            onClick={() => {
+              console.log(true)
+            }}
+          >
+            上一步
+          </ElButton>
+          <ElButton type="primary" class="!w-40 !h-[38px]" onClick={() => {}}>
+            下一步
+          </ElButton>
+        </div>
+      </div>
+    )
+  }
+})

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

@@ -31,40 +31,31 @@
     }
   }
 
-  .selectPopup {
-    width: 312px;
-    background: #ffffff;
-    border-radius: 8px;
-    .selectContainer {
-      padding: 18px 14px;
-    }
-    .rTitle {
-      font-size: 18px;
-    }
-    .selectPopupContent {
-      padding: 20px 0;
-    }
-    .desc,
-    .times {
-      font-size: 14px;
-      color: #666666;
-      line-height: 20px;
-    }
+  .desc,
+  .times {
+    font-size: 14px;
+    color: #666666;
+    line-height: 20px;
+  }
 
-    .times {
-      padding-top: 15px;
-      span {
-        display: block;
-      }
+  .times {
+    padding-top: 10px;
+    span {
+      display: block;
+      padding-bottom: 5px;
     }
+  }
+
+  .selectBtn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding-top: 15px;
+  }
 
-    .selectBtn {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      .btn {
-        width: 48%;
-      }
+  :global {
+    .el-dialog__body {
+      padding-top: 10px;
     }
   }
 }

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

@@ -7,7 +7,7 @@ import { createState } from '../createState'
 import { state } from '@/state'
 import { getWeekCh } from '@/helpers/utils'
 import ColCalendar from '@/components/col-calendar'
-import { ElButton, ElMessageBox } from 'element-plus'
+import { ElButton, ElDialog, ElMessageBox, ElTag } from 'element-plus'
 
 export default defineComponent({
   name: 'arrange',
@@ -106,8 +106,10 @@ export default defineComponent({
       createState.selectCourseList = [...tempList]
     },
     onCloseTag(item: any) {
-      ElMessageBox.confirm('确定删除该课程吗？', '提示', {
-        type: 'warning'
+      Dialog.confirm({
+        title: '提示',
+        message: '您是否要删除该选择的课程？',
+        confirmButtonColor: 'var(--van-primary)'
       }).then(() => {
         const index = createState.selectCourseList.findIndex(
           (course: any) => course.startTime === item.startTime
@@ -164,8 +166,10 @@ export default defineComponent({
       } catch (e: any) {
         // 报错时需要重置日历表的数据
         const message = e.message
-        ElMessageBox.confirm(message, '提示', {
-          type: 'warning'
+        Dialog.alert({
+          title: '提示',
+          confirmButtonColor: 'var(--van-primary)',
+          message
         }).then(() => {
           this.getList(this.calendarDate || new Date())
           createState.selectCourseList = []
@@ -196,17 +200,28 @@ export default defineComponent({
       } else if (this.selectType === 'noEnough') {
         this.selectStatus = false
       }
-      createState.live.coursePlanList = []
+      // 只能重置课程时间
+      createState.live.coursePlanList.forEach((item: any) => {
+        item.startTime = ''
+        item.endTime = ''
+      })
+
       setTimeout(() => {
         createState.coursePlanStatus = false
       }, 500)
     },
     async onSure() {
       // 判断是否有锁课状态 或 是锁课类型的 并且已经有课的
-      if (
-        this.selectType === 'enough' ||
-        createState.live.coursePlanList.length > 0
-      ) {
+      console.log(
+        this.selectType,
+        createState.coursePlanStatus,
+        createState.live.coursePlanList
+      )
+      let courseLength = 0
+      createState.live.coursePlanList.forEach((item: any) => {
+        item.startTime && courseLength++
+      })
+      if (this.selectType === 'enough' || courseLength > 0) {
         this.selectStatus = false
         createState.active = 4
         return
@@ -244,17 +259,16 @@ export default defineComponent({
             <div class={styles.rTag}>
               {this.showSelectList.map((item: any) => (
                 <>
-                  <Tag
-                    plain
+                  <ElTag
                     round
-                    closeable
                     size="large"
-                    type="primary"
-                    class={styles.tag}
+                    effect="light"
+                    class={['mb-2 !border-[#2DC7AA] !color-[#2DC7AA]']}
+                    closable
                     onClose={() => this.onCloseTag(item)}
                   >
                     {item.title}
-                  </Tag>
+                  </ElTag>
                   <br />
                 </>
               ))}
@@ -282,7 +296,58 @@ export default defineComponent({
           </ElButton>
         </div>
 
-        <Popup show={this.selectStatus} class={styles.selectPopup}>
+        <ElDialog
+          modelValue={this.selectStatus}
+          onUpdate:modelValue={e => (this.selectStatus = e)}
+          width={'400px'}
+          title="提示"
+        >
+          <div class={styles.selectContainer}>
+            <div class={styles.selectPopupContent}>
+              <p class={styles.desc}>
+                {this.selectType === 'noEnough' && !createState.coursePlanStatus
+                  ? '您所选择的上课时间未达到您输入的课时数，系统根据已选时间将自动按周顺延排课。'
+                  : '您已选择以下上课时间段，时间段会暂时锁定，锁定期间学员不可购买该时间段课程。'}
+              </p>
+              {createState.live.coursePlanList &&
+                createState.live.coursePlanList.length > 0 &&
+                createState.coursePlanStatus && (
+                  <p class={styles.times}>
+                    {createState.live.coursePlanList.map((item: any) => (
+                      <span>
+                        {dayjs(item.startTime || new Date()).format(
+                          'YYYY-MM-DD'
+                        )}{' '}
+                        {dayjs(item.startTime || new Date()).format('HH:mm')}~
+                        {dayjs(item.endTime || new Date()).format('HH:mm')}
+                      </span>
+                    ))}
+                  </p>
+                )}
+            </div>
+
+            <div class={styles.selectBtn}>
+              <ElButton
+                type="primary"
+                round
+                plain
+                class="!w-40 !h-[38px]"
+                onClick={this.onReset}
+              >
+                {this.selectType === 'noEnough' ? '继续选择' : '重新选择'}
+              </ElButton>
+              <ElButton
+                type="primary"
+                round
+                class="!w-40 !h-[38px]"
+                onClick={this.onSure}
+              >
+                确认
+              </ElButton>
+            </div>
+          </div>
+        </ElDialog>
+        {/* <Popup show={this.selectStatus} class={styles.selectPopup}>
           <div class={styles.selectContainer}>
             <div class={styles.rTitle}>
               <span>提示</span>
@@ -332,7 +397,7 @@ export default defineComponent({
               </Button>
             </div>
           </div>
-        </Popup>
+        </Popup> */}
       </div>
     )
   }

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

@@ -261,80 +261,6 @@ export default defineComponent({
             </p>
             <p>您的课程收入将在课程结束后结算到您的账户中</p>
           </div>
-          {/* <ElFormItem label="课程封面" class="!mb-0">
-            <ElTabs
-              v-model={createState.tabIndex}
-              class={styles.tabs}
-              onTab-change={(name: any) => {
-                this.tabChange(name)
-              }}
-            >
-              <ElTabPane label="图片模板" name={1}></ElTabPane>
-              <ElTabPane label="自定义模板" name={2}></ElTabPane>
-            </ElTabs>
-          </ElFormItem>
-
-          {createState.tabIndex === 1 && (
-            <ElFormItem
-              prop="lessonCoverTemplateUrl"
-              rules={[
-                {
-                  required: true,
-                  message: '请上传课程封面'
-                }
-              ]}
-            >
-              <ElRadioGroup v-model={createState.live.lessonCoverTemplateUrl}>
-                <ElRow>
-                  {createState.templateList.map((item: any) => (
-                    <ElCol span={10} class="mb-3 cursor-pointer">
-                      <div
-                        class="w-40 relative rounded-xl overflow-hidden border"
-                        onClick={() => {
-                          this.selectImg(item)
-                        }}
-                      >
-                        <ElImage src={item} class="align-middle" />
-                        <ElRadio
-                          label={item}
-                          class="!absolute bottom-2 right-0 !h-auto z-10"
-                        >
-                          {''}
-                        </ElRadio>
-                      </div>
-                    </ElCol>
-                  ))}
-                </ElRow>
-              </ElRadioGroup>
-            </ElFormItem>
-          )}
-
-          {createState.tabIndex === 2 && (
-            <ElFormItem
-              prop="lessonCoverUrl"
-              rules={[
-                {
-                  required: true,
-                  message: '请上传课程封面',
-                  trigger: 'change'
-                }
-              ]}
-            >
-              <ColCropper
-                modelValue={createState.live.lessonCoverUrl}
-                bucket="video-course"
-                cropUploadSuccess={(data: any) => {
-                  createState.live.lessonCoverUrl = data
-                  createState.live.lessonCoverTemplateUrl = ''
-                }}
-                options={{
-                  fixedNumber: [3, 2],
-                  autoCropWidth: 300,
-                  autoCropHeight: 200
-                }}
-              />
-            </ElFormItem>
-          )} */}
         </ElForm>
         <div class="border-t border-t-[#E5E5E5] text-center pt-6 pb-7">
           <ElButton

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

@@ -10,7 +10,7 @@ export const basePlan = {
 const original = () => {
   return {
     subjectList: [], // 声部列表
-    active: 2,
+    active: 3,
     rate: 0,
     minutes: [] as any,
     tabIndex: 1,
@@ -26,10 +26,10 @@ const original = () => {
       name: '',
       subjectId: null as any,
       courseIntroduce: '',
-      courseNum: 4 as any,
+      courseNum: null as any,
       singleCourseMinutes: 0,
-      singleMins: 25 as any,
-      freeMinutes: 5,
+      singleMins: null as any,
+      freeMinutes: 0,
       coursePrice: null as any,
       salesStartDate: '',
       salesEndDate: '',

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

@@ -1,6 +1,7 @@
 import ColSteps from '@/components/col-steps'
 import request from '@/helpers/request'
 import { defineComponent } from 'vue'
+import CourseClass from './course-class'
 import CourseContent from './course-content'
 import CourseInfo from './course-info'
 import CoursePlan from './course-plan'
@@ -31,7 +32,7 @@ export default defineComponent({
           {createState.active === 0 && <CourseInfo />}
           {createState.active === 1 && <CoursePlan />}
           {createState.active === 2 && <CourseContent />}
-          {/* {createState.active === 1 && <CourseContent />} */}
+          {createState.active === 3 && <CourseClass />}
         </div>
       </>
     )

src/views/videoDetailList/videoDetail.tsx

@@ -9,8 +9,8 @@ import teacherIcon from './images/teacherIcon.png'
 import player from './images/player.png'
 import teacher from './images/teacher.png'
 import teacherHeader from '@/common/images/icon_teacher.png'
-import TimetableIcon from './images/TimetableIcon.png'
 import musiceIcon from './images/musiceIcon.png'
+import TimetableIcon from './images/TimetableIcon.png'
 import styles from './index.module.less'
 import videoDetailItem from '@/components/videoDetailItem'
 import colVideo from '@/components/col-video/index'