添加分享与活动状态判断

src/components/col-share/index.tsx

@@ -30,14 +30,14 @@ export default defineComponent({
   },
   async mounted() {
     try {
-      // const shortRes = await request.post('/api-teacher/sysConfig/shortURL', {
-      //   requestType: 'form',
-      //   data: {
-      //     orginURL: this.shareUrl
-      //   }
-      // })
-      // this.codeUrl = shortRes.data
-      this.codeUrl = this.shareUrl
+      const shortRes = await request.post('/api-teacher/sysConfig/shortURL', {
+        requestType: 'form',
+        data: {
+          orginURL: this.shareUrl
+        }
+      })
+      this.codeUrl = shortRes.data
+      // this.codeUrl = this.shareUrl
     } catch {
       //
     }

src/constant/index.ts

@@ -4,7 +4,8 @@ export const goodsType = {
   VIDEO: '视频课',
   VIP: '开通会员',
   MUSIC: '单曲点播',
-  PINAO_ROOM: '琴房时长充值'
+  PINAO_ROOM: '琴房时长充值',
+  ACTI_REGIST: '活动报名'
 }
 
 export const orderType = {

src/student/member-center/member-record.module.less

@@ -112,6 +112,10 @@
 
     span {
       padding-right: 8px;
+      max-width: 150px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
     }
   }
 

src/student/share-active/track-review-activity/index.tsx

@@ -2,7 +2,7 @@ import ColSticky from '@/components/col-sticky'
 import request from '@/helpers/request'
 import { browser, removeAuth } from '@/helpers/utils'
 import { postMessage } from '@/helpers/native-message'
-import { Button, Cell, CellGroup, Image, Notify, Popup } from 'vant'
+import { Button, Cell, CellGroup, Dialog, Image, Notify, Popup } from 'vant'
 import { defineComponent } from 'vue'
 import styles from './index.module.less'
 import logo from '@/common/images/logo.png'
@@ -50,11 +50,17 @@ export default defineComponent({
     }
   },
   async mounted() {
-    this.getMusicInfo()
+    await this.getMusicInfo()
+
+    // 判断是否在内容打开页面
     if (!browser().isApp) {
       this.popupStatus = true
       removeAuth()
+      return
     }
+
+    // 判断活动状态的活动时间
+    this.checkActivityTime()
   },
   methods: {
     async getMusicInfo() {
@@ -67,11 +73,52 @@ export default defineComponent({
         //
       }
     },
+    checkActivityTime() {
+      // 判断活动状态的活动时间
+      try {
+        const activeInfo = this.activeInfo
+        if (activeInfo.activityState === 0) {
+          Dialog.alert({
+            message: '活动已结束，感谢你的关注！',
+            theme: 'round-button',
+            confirmButtonColor: '#2dc7aa'
+          })
+          this.onBackDialog('活动已结束，感谢你的关注！')
+          return false
+        }
+
+        const nowTime = dayjs()
+        const startTime = dayjs(activeInfo.activityStart)
+        const endTime = dayjs(activeInfo.activityEnd)
+        if (dayjs(nowTime).isBefore(dayjs(startTime))) {
+          this.onBackDialog('活动尚未开始，请您耐心等待！')
+          return false
+        } else if (!dayjs(nowTime).isBefore(dayjs(endTime))) {
+          this.onBackDialog('活动已结束，感谢你的关注！')
+          return false
+        }
+        return true
+      } catch {
+        //
+      }
+    },
+    onBackDialog(str: string) {
+      Dialog.alert({
+        message: str,
+        theme: 'round-button',
+        confirmButtonColor: '#2dc7aa'
+      }).then(() => {
+        postMessage({ api: 'back' })
+      })
+    },
     async onJoinActve() {
       const activeInfo = this.activeInfo
       try {
-        // 判断是否是收费活动
+        if (!this.checkActivityTime()) {
+          return
+        }
         if (activeInfo.registrationMethod === 'CHARGE') {
+          // 判断是否是收费活动
           orderStatus.orderObject.orderType = 'ACTI_REGIST'
           orderStatus.orderObject.orderName = activeInfo.activityName
           orderStatus.orderObject.orderDesc = activeInfo.activityName
@@ -323,6 +370,9 @@ export default defineComponent({
                               (this.userSelectMusic && item.join !== 1)
                             }
                             onClick={() => {
+                              if (!this.checkActivityTime()) {
+                                return
+                              }
                               this.selectMusic = item
                               this.popupStatus = true
                             }}

src/teacher/piano-room/model/share/index.module.less

@@ -18,6 +18,10 @@
     font-weight: 500;
     color: #1a1a1a;
     line-height: 18px;
+    max-width: 130px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
   }
 
   .titleTips {

src/teacher/share-page/track-review-activity/index.module.less

@@ -283,3 +283,37 @@
   font-weight: 500;
   color: #ffffff;
 }
+
+.shareContainer {
+  width: 333px;
+  overflow: hidden;
+}
+
+.shareCodeUrl {
+  padding: 11px;
+  background-color: rgba(255, 255, 255, 0.85);
+  & > div {
+    margin-top: 0;
+  }
+}
+
+.shareSection {
+  padding: 12px;
+  font-size: 14px;
+  line-height: 20px;
+  text-align: justify;
+}
+
+.shareActiveTime {
+  margin-top: 217px;
+}
+
+.shareGroupBtn {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-top: 12px;
+  :global(.van-button) {
+    padding: 8px 32px;
+  }
+}

src/teacher/share-page/track-review-activity/index.tsx

@@ -1,9 +1,11 @@
 import ColSticky from '@/components/col-sticky'
 import request from '@/helpers/request'
-import { Button, Cell, CellGroup, Image, Notify, Popup } from 'vant'
+import { Button, Cell, CellGroup, Image, Popup } from 'vant'
 import { defineComponent } from 'vue'
 import styles from './index.module.less'
 import dayjs from 'dayjs'
+import ShareModel from './share-model'
+import { state } from '@/state'
 
 export const getAssetsHomeFile = (fileName: string) => {
   const path = `./images/${fileName}`
@@ -17,7 +19,9 @@ export default defineComponent({
     const query = this.$route.query
     return {
       id: query.id,
-      activeInfo: {} as any
+      activeInfo: {} as any,
+      shareStatus: false,
+      shareUrl: ''
     }
   },
   computed: {
@@ -32,16 +36,17 @@ export default defineComponent({
   methods: {
     async getMusicInfo() {
       try {
+        // 获取活动基本信息
         const res = await request.post(
           '/api-teacher/open/activity/info/' + this.id
         )
         this.activeInfo = res.data
+
+        // 设置连接
+        this.shareUrl = `${location.origin}/student/#/track-review-activity?recomUserId=${state.user.data?.userId}&id=${this.activeInfo.id}`
       } catch {
         //
       }
-    },
-    async onJoinActve() {
-      //
     }
   },
   render() {
@@ -228,12 +233,19 @@ export default defineComponent({
               round
               class={styles.submit}
               block
-              onClick={this.onJoinActve}
+              onClick={() => (this.shareStatus = true)}
             >
               立即分享
             </Button>
           </div>
         </ColSticky>
+
+        <Popup
+          v-model:show={this.shareStatus}
+          style={{ background: 'transparent' }}
+        >
+          <ShareModel shareUrl={this.shareUrl} activeInfo={this.activeInfo} />
+        </Popup>
       </div>
     )
   }

src/teacher/share-page/track-review-activity/share-model.tsx

@@ -0,0 +1,166 @@
+import { state } from '@/state'
+import { Button, Cell, Toast } from 'vant'
+import { defineComponent } from 'vue'
+import styles from './index.module.less'
+import CodeDownload from '@/components/col-share/code-down-load'
+import html2canvas from 'html2canvas'
+import request from '@/helpers/request'
+export const getAssetsHomeFile = (fileName: string) => {
+  const path = `./images/${fileName}`
+  const modules = import.meta.globEager('./images/*')
+  return modules[path].default
+}
+import dayjs from 'dayjs'
+import { promisefiyPostMessage } from '@/helpers/native-message'
+export default defineComponent({
+  name: 'share-model',
+  props: {
+    shareUrl: {
+      type: String,
+      default: ''
+    },
+    activeInfo: {
+      type: Object,
+      default: {}
+    }
+  },
+  data() {
+    return {
+      image: null as any,
+      codeUrl: ''
+    }
+  },
+  async mounted() {
+    try {
+      const shortRes = await request.post('/api-teacher/sysConfig/shortURL', {
+        requestType: 'form',
+        data: {
+          orginURL: this.shareUrl
+        }
+      })
+      this.codeUrl = shortRes.data
+      // this.codeUrl = this.shareUrl
+    } catch {
+      //
+    }
+  },
+  methods: {
+    async onSaveImg() {
+      const container: any = document.getElementById('share-preview-container')
+      html2canvas(container, { allowTaint: true, useCORS: true }).then(
+        async canvas => {
+          const url = canvas.toDataURL('image/png')
+          this.image = url
+          Toast.loading({
+            message: '图片生成中...',
+            forbidClick: true
+          })
+          const res = await promisefiyPostMessage({
+            api: 'savePicture',
+            content: {
+              base64: this.image
+            }
+          })
+          if (res?.content?.status === 'success') {
+            Toast.success('保存成功')
+          } else {
+            Toast.fail('保存失败')
+          }
+        }
+      )
+    },
+    async shareShow() {
+      const container: any = document.getElementById('share-preview-container')
+      html2canvas(container, { allowTaint: true, useCORS: true }).then(
+        async canvas => {
+          const url = canvas.toDataURL('image/png')
+          this.image = url
+
+          const image = this.image
+          if (image) {
+            postMessage(
+              {
+                api: 'shareAchievements',
+                content: {
+                  title: '',
+                  desc: '',
+                  image,
+                  video: '',
+                  type: 'image'
+                }
+              },
+              (res: any) => {
+                if (res && res.content) {
+                  Toast(
+                    res.content.message ||
+                      (res.content.status ? '分享成功' : '分享失败')
+                  )
+                }
+              }
+            )
+          }
+        }
+      )
+    }
+  },
+  render() {
+    return (
+      <>
+        {this.codeUrl && (
+          <>
+            <div
+              class={styles.shareContainer}
+              id="share-preview-container"
+              style={{
+                background: `url(${this.activeInfo.subjectUrl}) no-repeat top center ${this.activeInfo.backgroundUrl}`,
+                backgroundSize: 'contain'
+              }}
+            >
+              <div class={styles.reviewContainer}>
+                <div
+                  class={[
+                    styles.section,
+                    styles.activeTime,
+                    styles.shareActiveTime
+                  ]}
+                >
+                  <div class={styles.activeBg}>
+                    <img src={getAssetsHomeFile('icon_time.png')} />
+                    <p>
+                      <span>活动时间：</span>
+                      {dayjs(this.activeInfo.activityStart).format(
+                        'YYYY-MM-DD'
+                      )}
+                      ~{dayjs(this.activeInfo.activityEnd).format('YYYY-MM-DD')}
+                    </p>
+                  </div>
+                </div>
+
+                <div class={[styles.section, styles.shareSection]}>
+                  {this.activeInfo.describe}
+                </div>
+              </div>
+              <div class={styles.shareCodeUrl}>
+                <CodeDownload shareUrl={this.codeUrl} />
+              </div>
+            </div>
+            <div class={['btnGroup', styles.shareGroupBtn]}>
+              <Button type="primary" plain round>
+                保存图片
+              </Button>
+              <Button
+                type="primary"
+                round
+                onClick={() => {
+                  // this.shareShow()
+                }}
+              >
+                立即分享
+              </Button>
+            </div>
+          </>
+        )}
+      </>
+    )
+  }
+})

src/views/live-class/live-item.module.less

@@ -46,6 +46,7 @@
     border-radius: 50%;
     overflow: hidden;
     margin-right: 4px;
+    flex-shrink: 0;
   }
 
   .liPrice {

src/views/member-center/index.module.less

@@ -61,6 +61,10 @@
       .name {
         font-size: 18px;
         padding-right: 5px;
+        max-width: 100px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
       }
       .phone {
         font-size: 14px;

src/views/music/list/item.module.less

@@ -71,6 +71,10 @@
       }
       > p {
         margin-right: 8px;
+        max-width: 120px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
       }
     }
     .favorite {