Merge branch 'master' into jenkins

src/router/routes-common.ts

@@ -236,6 +236,14 @@ export const rootRouter = [
     }
   },
   {
+    path: '/follow-account',
+    name: 'follow-account',
+    component: () => import('@/views/follow-account'),
+    meta: {
+      title: '关注微信公众号'
+    }
+  },
+  {
     path: '/:pathMatch(.*)*',
     component: () => import('@/views/404'),
     meta: {

src/views/coursewarePlay/index.module.less

@@ -2,6 +2,7 @@
   width: 100vw;
   height: 100vh;
   background-color: #000;
+  overflow: hidden;
 }
 .coursewarePlay {
   position: relative;
@@ -28,6 +29,7 @@
   align-items: center;
   justify-content: space-between;
   background: linear-gradient(180deg, rgba(0, 0, 0, 0.6), transparent);
+  transition: transform 0.5s;
 }
 .backBtn {
   color: #fff;

src/views/coursewarePlay/index.tsx

@@ -158,7 +158,8 @@ export default defineComponent({
           }
         )
         if (res?.data) {
-          data.isCourse = res.data.status === 'ING' ? true : false
+          data.isCourse =
+            res.data.status === 'ING' && state.platformType == 'TEACHER' ? true : false
         }
       } catch (e) {
         console.log(e)
@@ -596,11 +597,6 @@ export default defineComponent({
                               <div>{m.name}</div>
                             </div>
                           </div>
-                          {/* <Transition name="bottom">
-                            {activeData.model && (
-                              
-                            )}
-                          </Transition> */}
                         </>
                       ) : m.type === 'IMG' ? (
                         <img src={m.content} />
@@ -620,18 +616,19 @@ export default defineComponent({
             })}
           </Swipe>
 
-          <Transition name="top">
-            {activeData.model && (
-              <div id="coursePlayHeader" class={styles.headerContainer} ref={headeRef}>
-                <div class={styles.backBtn} onClick={() => goback()}>
-                  <Icon name={iconBack} />
-                  返回
-                </div>
-                <div class={styles.menu}>{popupData.tabName}</div>
-                {data.isCourse && <PlayRecordTime list={data.itemList} />}
-              </div>
-            )}
-          </Transition>
+          <div
+            style={{ transform: activeData.model ? '' : 'translateY(-100%)' }}
+            id="coursePlayHeader"
+            class={styles.headerContainer}
+            ref={headeRef}
+          >
+            <div class={styles.backBtn} onClick={() => goback()}>
+              <Icon name={iconBack} />
+              返回
+            </div>
+            <div class={styles.menu}>{popupData.tabName}</div>
+            {data.isCourse && <PlayRecordTime list={data.itemList} />}
+          </div>
 
           <Transition name="right">
             {activeData.model && (

src/views/follow-account/index.module.less

@@ -0,0 +1,43 @@
+.followAccount {
+  position: relative;
+  min-height: 100vh;
+  background: url('./images/top_bg.png') no-repeat top center,
+    url('./images/bottom_bg.png') no-repeat bottom center,
+    url('./images/bg.png') repeat center center;
+  background-color: #5cbd75;
+  background-size: 100%;
+  padding: 443px 20px 0;
+  overflow: hidden;
+
+  &::before {
+    content: ' ';
+    position: absolute;
+    width: 50px;
+    height: 47px;
+    background: url('./images/icon_small.png') no-repeat center center;
+    background-size: contain;
+    left: 0;
+    top: 640px;
+    z-index: 1;
+  }
+
+  .content2 {
+    padding: 30px 0;
+  }
+
+  .saveQrcode {
+    background: url('./images/btn.png') no-repeat center center;
+    background-size: contain;
+    width: 300px;
+    height: 50px;
+    margin: 0 auto;
+    margin-bottom: 70px;
+  }
+
+  .followQrcode {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: -1;
+  }
+}

src/views/follow-account/index.tsx

@@ -1,20 +1,79 @@
-import { Image } from 'vant'
-import { defineComponent } from 'vue'
+import { closeToast, Image, showFailToast, showLoadingToast, showSuccessToast } from 'vant'
+import { defineComponent, onMounted, reactive } from 'vue'
 import styles from './index.module.less'
-import topBg from './images/top_bg.png'
-import bottomBg from './images/bottom_bg.png'
-import btn from './images/btn.png'
 import content1 from './images/content1.png'
 import content2 from './images/content2.png'
-import iconSmall from './images/iconSmall.png'
+import qrcode from './images/qrcode.jpg'
+import html2canvas from 'html2canvas'
+import { promisefiyPostMessage, postMessage } from '@/helpers/native-message'
 
 export default defineComponent({
   name: 'follow-account',
   setup() {
+    const imgs = reactive({
+      saveLoading: false,
+      image: null as any,
+      shareLoading: false
+    })
+    const onSaveImg = async () => {
+      // 判断是否在保存中...
+      if (imgs.saveLoading) {
+        return
+      }
+      imgs.saveLoading = true
+      // 判断是否已经生成图片
+      if (imgs.image) {
+        saveImg()
+      } else {
+        const container: any = document.getElementById(`preview-container`)
+        html2canvas(container, {
+          allowTaint: true,
+          useCORS: true,
+          backgroundColor: null
+        })
+          .then(async (canvas) => {
+            const url = canvas.toDataURL('image/png')
+            imgs.image = url
+            saveImg()
+          })
+          .catch(() => {
+            closeToast()
+            imgs.saveLoading = false
+          })
+      }
+    }
+
+    const saveImg = async () => {
+      showLoadingToast({ message: '图片生成中...', forbidClick: true })
+      setTimeout(() => {
+        imgs.saveLoading = false
+      }, 100)
+      const res = await promisefiyPostMessage({
+        api: 'savePicture',
+        content: {
+          base64: imgs.image
+        }
+      })
+      if (res?.content?.status === 'success') {
+        showSuccessToast('保存成功')
+      } else {
+        showFailToast('保存失败')
+      }
+    }
+
+    onMounted(() => {
+      postMessage({ api: 'setBarStatus', content: { status: 0 } })
+    })
     return () => (
       <div class={styles.followAccount}>
-        <Image src={content1} />
-        <Image src={content2} />
+        <Image src={content1} class={styles.content1} />
+        <Image src={content2} class={styles.content2} />
+
+        <div class={styles.saveQrcode} onClick={onSaveImg}></div>
+
+        <div id="preview-container" class={styles.followQrcode}>
+          <Image src={qrcode} />
+        </div>
       </div>
     )
   }

src/views/mine-orchestra/index.tsx

@@ -11,13 +11,14 @@ import OEmpty from '@/components/o-empty'
 import OFullRefresh from '@/components/o-full-refresh'
 import OrchestraDeeds from './orchestra-deeds'
 import MyPhoto from './my-photo'
-import { useRouter } from 'vue-router'
+import { useRoute, useRouter } from 'vue-router'
 
 export default defineComponent({
   name: 'my-orchestra',
   setup(props, ctx) {
+    const route = useRoute()
     const router = useRouter()
-    const tabActive = ref('我的班级')
+    const tabActive = ref<'course' | 'photo' | 'deeds'>((route.query as any)?.tab || 'course')
     const data = reactive({
       orchestraList: [] as any[],
       loading: true
@@ -137,7 +138,7 @@ export default defineComponent({
               animated
               swipeable
             >
-              <Tab name="我的班级" title="我的班级">
+              <Tab name="course" title="我的班级">
                 <div class={styles.content}>
                   <MyClass
                     list={modelData.orchestra?.classGroupIdList || []}
@@ -145,12 +146,12 @@ export default defineComponent({
                   />
                 </div>
               </Tab>
-              <Tab name="乐团相册" title="乐团相册">
+              <Tab name="photo" title="乐团相册">
                 <div class={styles.content}>
                   <MyPhoto orchestraId={modelData.orchestra?.id || ''} />
                 </div>
               </Tab>
-              <Tab name="乐团事迹" title="乐团事迹">
+              <Tab name="deeds" title="乐团事迹">
                 <div class={styles.content}>
                   <OrchestraDeeds orchestraId={modelData.orchestra?.id || ''} />
                 </div>