加入名单UI

TEAMModelOS/ClientApp/src/view/joinclass/JoinClass.vue

@@ -1,37 +1,123 @@
 <template>
-    <div>
-        <div style="text-align:center;" id="test-hahah">
-            <h1 style="text-align:center;margin-top:100px;font-size:22px;">学生扫码加入名单需要学生端APP对接，学生端APP扫码可以直接读取学生账号信息加入到班级。</h1>
-            <!-- <p>{{tId}}</p> -->
-            <p data-html2canvas-ignore>教师姓名：{{tName}}</p>
-            <p>名单：{{cName}}</p>
-            <p>编码：{{cId}}</p>
+    <div class="join-wrap">
+        <div class="join-main-box">
+            <p class="join-title">
+                <span>
+                    加入课程名单
+                </span>
+                <!-- <Divider dashed plain class="join-title">
+                    加入课程名单
+                </Divider> -->
+            </p>
+            <p class="course-name">{{cusName}}</p>
+            <p class="info-item">
+                <span class="info-lable">
+                    教师：
+                </span>
+                <span class="info-value">
+                    {{tName}}
+                </span>
+            </p>
+            <p class="info-item">
+                <span class="info-lable">
+                    名单：
+                </span>
+                <span class="info-value">
+                    {{listName}}
+                </span>
+            </p>
+            <div class="join-btn" @click="joinList()">
+                立即加入
+            </div>
         </div>
     </div>
 </template>
 <script>
-import html2canvas from 'html2canvas';
 export default {
     data() {
         return {
             tId: '',
             tName: '',
-            cId: '',
-            cName: '',
+            listId: '',
+            listName: '',
+            cusName: '',
         }
     },
     methods: {
+        joinList() {
+            this.$Message.warning('暂未对接API')
+        }
     },
     created() {
-        this.tId = this.$route.query.tId
-        this.tName = this.$route.query.tName
-        this.cId = this.$route.query.cId
-        this.cName = this.$route.query.cName
+        this.tId = this.$route.query.tId //教师id
+        this.tName = this.$route.query.tName //教师姓名
+        this.listId = this.$route.query.listId   //名单id
+        this.listName = this.$route.query.listName //名单
+        this.cusName = this.$route.query.cusName  //课程名称
+        if (!this.listId || !this.tId) {
+            this.$Modal.error({
+                title: '信息错误',
+                content: '课程名单获取失败，请重新扫码加入！'
+            })
+        }
     }
 }
 </script>
-<style scoped>
-div p {
-    margin: 10px;
+<style scoped lang="less">
+.join-wrap {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-evenly;
+    align-items: center;
+    width: 100%;
+    height: 100%;
+    background-image: url("../../assets/image/bak_light.jpg");
+}
+.join-btn {
+    width: fit-content;
+    margin: auto;
+    margin-top: 60px;
+    text-align: center;
+    border: 1px solid rgba(25, 190, 107, 0.5);
+    color: rgba(25, 190, 107, 1);
+    padding: 4px 30px;
+    border-radius: 5px;
+    font-size: 16px;
+    letter-spacing: 2px;
+    font-weight: 400;
+    user-select: none;
+    &:hover{
+        background: rgba(25, 190, 107, 0.5);
+        color: white;
+    }
+}
+.course-name {
+    color: white;
+    margin-bottom: 15px;
+    font-size: 30px;
+    font-family: cursive;
+}
+.join-main-box {
+    width: 100%;
+    text-align: center;
+    .info-item {
+        margin-top: 20px;
+        font-size: 15px;
+    }
+    .info-lable {
+        color: #a5a5a5;
+    }
+    .info-value {
+        color: #eeeeee;
+    }
+}
+.join-title {
+    position: absolute;
+    top: 15px;
+    text-align: center;
+    width: 100%;
+    left: 0px;
+    border-bottom: 1px dashed;
+    padding-bottom: 8px;
 }
 </style>

TEAMModelOS/ClientApp/src/view/newcourse/MyCourse.less

@@ -345,7 +345,7 @@
     display: block;
     margin: auto;
     text-align: center;
-    margin-top: 8px;
-    margin-bottom: -14px;
+    margin-top: -14px;
+    margin-bottom: 5px;
     color: black;
 }

TEAMModelOS/ClientApp/src/view/newcourse/MyCourse.vue

@@ -299,7 +299,7 @@
             </div>
             <StudentList v-if="$store.state.userInfo.hasSchool" @getSelectInfo="(selction)=>{createStuList = selction}"></StudentList>
             <p v-else class="no-school-tips">
-                您暂未加入学校无法添加学校学生，只能创建好名单，让学生通过扫码加入名单！
+                您暂未加入学校无法添加学校学生，只能创建自定义名单，学生通过扫码加入名单！
             </p>
         </Modal>
         <Modal v-model="addCusStatus" :title="$t('cusMgt.addCus')" @on-ok="confirmAddCus" class-name="dark-iview-modal dark-iview-form">
@@ -994,9 +994,16 @@ export default {
             this.showQrStatus = true
             let tId = this.$store.state.userInfo.TEAMModelId
             let tName = this.$store.state.userInfo.name
-            let cId = this.teaClassList[this.curClassIndex].stulist
-            let cName = this.teaClassList[this.curClassIndex].listName
-            this.createQRCode(`http://teammodelos-test.chinacloudsites.cn/joinclass?tId=${tId}&cId=${cId}&tName=${tName}&cName=${cName}`)
+            let listId = this.teaClassList[this.curClassIndex].stulist
+            let listName = this.teaClassList[this.curClassIndex].listName
+            let cusName = this.courseListShow[this.curCusIndex].name
+
+            //这里需要根据站点动态拼接域名
+            let addr = this.$store.state.config.srvAdr
+            let host = ''
+            let url = `http://teammodelos-test.chinacloudsites.cn/joinclass?tId=${tId}&listName=${listName}&tName=${tName}&listId=${listId}&cusName=${cusName}`
+            console.log(url)
+            this.createQRCode(url)
         },
         //确认添加自定义名单
         confirmCreateList() {