合并

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

@@ -169,6 +169,15 @@
     }
   }
 
+  &.vip {
+    background: url('./images/vip1.png') no-repeat top center #fff;
+    background-size: cover;
+    &.yellow {
+      background: url('./images/vip2.png') no-repeat top center #fff;
+      background-size: cover;
+    }
+  }
+
   .shareContent {
     padding-top: 124px;
   }

src/components/col-share/index.tsx

@@ -18,17 +18,30 @@ export default defineComponent({
     },
     shareType: {
       // 分享类型
-      type: String as PropType<'' | 'video' | 'music' | 'live' | 'mall'>,
+      type: String as PropType<
+        '' | 'video' | 'music' | 'live' | 'mall' | 'vip'
+      >,
       default: ''
+    },
+    shareLength: {
+      type: Number,
+      default: 3
     }
   },
   data() {
+    const tempArray: any = []
+    for (let i = 0; i < this.shareLength; i++) {
+      tempArray.push(i)
+    }
+    console.log(tempArray)
     return {
       swiperIndex: 0,
       image: null as any,
       codeUrl: '',
       shareLoading: false,
-      saveLoading: false
+      shareArray: tempArray || [],
+      saveLoading: false,
+      showType: ['', 'yellow', 'pink'] as any
     }
   },
   async mounted() {
@@ -52,40 +65,48 @@ export default defineComponent({
         return
       }
       this.saveLoading = true
-      const container: any = document.getElementById(
-        `share-preview-container${this.swiperIndex}`
-      )
-      html2canvas(container, {
-        allowTaint: true,
-        useCORS: true,
-        backgroundColor: null
-      })
-        .then(async canvas => {
-          const url = canvas.toDataURL('image/png')
-          this.image = url
-          Toast.loading({
-            message: '图片生成中...',
-            forbidClick: true
+      // 判断是否已经生成图片
+      if (this.image) {
+        this.saveImg()
+      } else {
+        const container: any = document.getElementById(
+          `share-preview-container${this.swiperIndex}`
+        )
+        html2canvas(container, {
+          allowTaint: true,
+          useCORS: true,
+          backgroundColor: null
+        })
+          .then(async canvas => {
+            const url = canvas.toDataURL('image/png')
+            this.image = url
+            this.saveImg()
           })
-          setTimeout(() => {
+          .catch(() => {
+            Toast.clear()
             this.saveLoading = false
-          }, 100)
-          const res = await promisefiyPostMessage({
-            api: 'savePicture',
-            content: {
-              base64: this.image
-            }
           })
-          if (res?.content?.status === 'success') {
-            Toast.success('保存成功')
-          } else {
-            Toast.fail('保存失败')
-          }
-        })
-        .catch(() => {
-          Toast.clear()
-          this.saveLoading = false
-        })
+      }
+    },
+    async saveImg() {
+      Toast.loading({
+        message: '图片生成中...',
+        forbidClick: true
+      })
+      setTimeout(() => {
+        this.saveLoading = false
+      }, 100)
+      const res = await promisefiyPostMessage({
+        api: 'savePicture',
+        content: {
+          base64: this.image
+        }
+      })
+      if (res?.content?.status === 'success') {
+        Toast.success('保存成功')
+      } else {
+        Toast.fail('保存失败')
+      }
     },
     async shareShow() {
       // 判断是否在分享中...
@@ -93,49 +114,56 @@ export default defineComponent({
         return
       }
       this.shareLoading = true
-      const container: any = document.getElementById(
-        `share-preview-container${this.swiperIndex}`
-      )
-      html2canvas(container, {
-        allowTaint: true,
-        useCORS: true,
-        backgroundColor: null
-      })
-        .then(async canvas => {
-          const url = canvas.toDataURL('image/png')
-          this.image = url
+      if (this.image) {
+        this.openShare()
+      } else {
+        const container: any = document.getElementById(
+          `share-preview-container${this.swiperIndex}`
+        )
+        html2canvas(container, {
+          allowTaint: true,
+          useCORS: true,
+          backgroundColor: null
+        })
+          .then(async canvas => {
+            const url = canvas.toDataURL('image/png')
+            this.image = url
 
-          const image = this.image
-          setTimeout(() => {
+            this.openShare()
+          })
+          .catch(() => {
+            Toast.clear()
             this.shareLoading = false
-          }, 100)
-          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 ? '分享成功' : '分享失败')
-                  )
-                }
-              }
-            )
+          })
+      }
+    },
+    openShare() {
+      const image = this.image
+      setTimeout(() => {
+        this.shareLoading = false
+      }, 100)
+      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 ? '分享成功' : '分享失败')
+              )
+            }
           }
-        })
-        .catch(() => {
-          Toast.clear()
-          this.shareLoading = false
-        })
+        )
+      }
     }
   },
   render() {
@@ -150,6 +178,8 @@ export default defineComponent({
                 lazyRender={true}
                 onChange={(index: number) => {
                   this.swiperIndex = index
+                  // 当前显示分享的图片切换时，则需要重置图片
+                  this.image = null
                 }}
                 v-slots={{
                   indicator: (active: any) => (
@@ -172,7 +202,20 @@ export default defineComponent({
                   )
                 }}
               >
-                <SwipeItem>
+                {this.shareArray.map((item: any, index: number) => (
+                  <SwipeItem>
+                    <ShareItem
+                      id={`share-preview-container${index}`}
+                      teacherId={this.teacherId}
+                      shareUrl={this.codeUrl}
+                      shareType={this.shareType}
+                      showType={this.showType[index]}
+                    >
+                      {this.$slots.default && this.$slots.default()}
+                    </ShareItem>
+                  </SwipeItem>
+                ))}
+                {/* <SwipeItem>
                   <ShareItem
                     id="share-preview-container0"
                     teacherId={this.teacherId}
@@ -181,8 +224,8 @@ export default defineComponent({
                   >
                     {this.$slots.default && this.$slots.default()}
                   </ShareItem>
-                </SwipeItem>
-                <SwipeItem>
+                </SwipeItem> */}
+                {/* <SwipeItem>
                   <ShareItem
                     id="share-preview-container1"
                     teacherId={this.teacherId}
@@ -203,7 +246,7 @@ export default defineComponent({
                   >
                     {this.$slots.default && this.$slots.default()}
                   </ShareItem>
-                </SwipeItem>
+                </SwipeItem> */}
               </Swipe>
             </div>
 

src/components/col-share/share-item.tsx

@@ -30,12 +30,14 @@ export default defineComponent({
     },
     showType: {
       // 显示背景图
-      type: String as PropType<'yellow' | 'pink' | 'defult'>,
+      type: String as PropType<'' | 'yellow' | 'pink' | 'defult'>,
       default: 'default'
     },
     shareType: {
       // 分享类型
-      type: String as PropType<'' | 'video' | 'music' | 'live' | 'mall'>,
+      type: String as PropType<
+        '' | 'video' | 'music' | 'live' | 'mall' | 'vip'
+      >,
       default: ''
     }
   },
@@ -50,6 +52,8 @@ export default defineComponent({
         return '这首曲目挺不错！推荐给你～'
       } else if (this.shareType === 'mall') {
         return '这件商品挺不错！推荐给你～'
+      } else if (this.shareType === 'vip') {
+        return '小酷Ai智能陪练VIP！推荐给你~'
       } else {
         return '这个课程挺不错！推荐给你～'
       }

src/router/routes-teacher.ts

@@ -30,6 +30,14 @@ const noLoginRouter = [
     meta: {
       title: '分享商品'
     }
+  },
+  {
+    path: '/shareVip',
+    name: 'shareVip',
+    component: () => import('@/teacher/share-page/share-vip/index'),
+    meta: {
+      title: '会员中心'
+    }
   }
 ]
 

src/teacher/share-page/share-vip/index.module.less

@@ -0,0 +1,172 @@
+.member-center {
+  min-height: 100vh;
+  position: relative;
+  background-color: #fff;
+
+  .intro {
+    background: url('../images/share-vip-tips.png') no-repeat center;
+    background-size: contain;
+    height: 142px;
+    font-size: 14px;
+    color: #bb6e3a;
+    p {
+      padding: 45px 25px 0;
+      text-align: justify;
+      line-height: 22px;
+    }
+  }
+
+  .shareBanner {
+    width: 100%;
+  }
+
+  .memberContainer {
+    position: relative;
+    margin-top: 15px;
+    padding: 0 14px 65px;
+    z-index: 99;
+  }
+  .memberItem {
+    padding-top: 20px;
+    .title {
+      font-size: 16px;
+      color: #333333;
+      font-weight: 500;
+      span {
+        color: #f7b500;
+      }
+    }
+  }
+
+  .member_function {
+    display: flex;
+    justify-content: space-between;
+    flex-wrap: wrap;
+    .function_item__content {
+      height: 100%;
+    }
+    .function_item {
+      width: 80px;
+      padding: 12px 0;
+      margin-top: 8px;
+      border-radius: 8px;
+      overflow: hidden;
+      background-color: #faefe3;
+      text-align: center;
+    }
+    .function_text {
+      font-size: 12px;
+      color: #814014;
+      line-height: 16px;
+    }
+  }
+  .system-list::-webkit-scrollbar {
+    display: none; /* Chrome Safari */
+  }
+  .system-list {
+    width: 100%;
+    overflow-x: auto;
+    overflow-y: hidden;
+    display: flex;
+    position: relative;
+    user-select: none;
+    box-sizing: content-box;
+    padding-top: 16px;
+    padding-bottom: 10px;
+    margin-bottom: 10px;
+  }
+  .system-item {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    flex: 1 0 auto;
+    width: 96px;
+    min-height: 120px;
+    box-sizing: border-box;
+    background: #ffffff;
+    border-radius: 12px;
+    border: 1px solid #e5e5e5;
+    margin-right: 10px;
+    .title {
+      font-size: 14px;
+      font-weight: 500;
+      color: #333333;
+      line-height: 20px;
+    }
+    .price {
+      color: #dc9362;
+      font-size: 25px;
+      line-height: 1.5;
+      span {
+        font-size: 16px;
+      }
+    }
+    .originalPrice {
+      color: #937059;
+      font-size: 13px;
+    }
+
+    &.active {
+      background: linear-gradient(
+        215deg,
+        #ffe7c4 0%,
+        rgba(250, 211, 156, 0.21) 100%
+      );
+      border: 1px solid #b1652e;
+      position: relative;
+      .title {
+        color: #814014;
+      }
+      .price {
+        color: #b1652e;
+      }
+      .originalPrice {
+        color: #937059;
+      }
+      &::before {
+        content: '\e728';
+        font: 14px/1 'vant-icon';
+        color: #fff;
+        background-color: #b1652e;
+        width: 27px;
+        height: 18px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        position: absolute;
+        top: 0;
+        right: 0;
+        border-radius: 0 12px 0 12px;
+      }
+    }
+  }
+
+  .tagDiscount {
+    position: absolute;
+    top: -14px;
+    right: 55px;
+    padding: 2px 12px;
+    height: 23px;
+    background: linear-gradient(180deg, #ffb635 0%, #ff4e18 100%);
+    border-radius: 8px 8px 0px 0px;
+    font-size: 14px;
+    font-weight: 600;
+    color: #ffffff;
+    line-height: 24px;
+  }
+
+  .wxpopup {
+    width: 100%;
+    height: 100vh;
+    position: fixed;
+    top: 0;
+    left: 0;
+    background: rgba(0, 0, 0, 0.5);
+    z-index: 9999;
+    img {
+      width: 88%;
+      margin: 0 6%;
+    }
+  }
+}

src/teacher/share-page/share-vip/index.tsx

@@ -0,0 +1,146 @@
+import ColHeader from '@/components/col-header'
+import { Button, Cell, Dialog, Icon, Image, Popup, Toast } from 'vant'
+import { defineComponent } from 'vue'
+import styles from './index.module.less'
+import request from '@/helpers/request'
+import { state } from '@/state'
+import shareBanner from '../images/share-banner.png'
+import wxImage from '../images/wx_bg.png'
+import { shareCall, initJumpNativePage } from '../share'
+import { browser } from '@/helpers/utils'
+import { postMessage } from '@/helpers/native-message'
+import qs from 'query-string'
+
+export const getAssetsHomeFile = (fileName: string) => {
+  const path = `../../../views/member-center/images/${fileName}`
+  const modules = import.meta.globEager('../../../views/member-center/images/*')
+  return modules[path].default
+}
+
+export default defineComponent({
+  name: 'MemberCenter',
+  data() {
+    const query = this.$route.query
+    const tmpUrl = `${location.origin}/student/#/memberCenter?${qs.stringify(
+      query
+    )}`
+    return {
+      activityId: query.activityId,
+      recomUserId: query.recomUserId,
+      discount: 0,
+      functionList: [],
+      wxStatus: false,
+      jumpUrl: tmpUrl
+    }
+  },
+  computed: {
+    userInfo() {
+      const users = state.user.data
+      return {
+        username: users?.username,
+        phone: users?.phone,
+        avatar: users?.heardUrl,
+        id: users?.userId,
+        memberRankSettingId: users?.memberRankSettingId,
+        membershipDays: users?.membershipDays,
+        membershipEndTime: users?.membershipEndTime
+      }
+    }
+  },
+  created() {
+    initJumpNativePage(this.jumpUrl)
+  },
+  async mounted() {
+    try {
+      const res = await request.post(
+        `/api-teacher/open/memberPriceSettings/vipPermissions`
+      )
+      const result = res.data || []
+      this.functionList = result.map((item: any) => {
+        return {
+          title: item.paramName,
+          icon: getAssetsHomeFile(`${item.paramValue}.png`)
+        }
+      })
+
+      const active = await request.post(
+        `/api-teacher/open/activity/state/${this.activityId}`
+      )
+      this.discount = active.data.check || 0
+    } catch {
+      //
+    }
+  },
+  methods: {
+    onShare() {
+      if (browser().weixin) {
+        this.wxStatus = true
+        return
+      }
+      // 尝试拉起app
+      shareCall(this.jumpUrl)
+      // 不管有没有拉起app则都跳转到下载app
+      setTimeout(() => {
+        window.location.href = location.origin + '/student/#/download'
+      }, 3000)
+    }
+  },
+  render() {
+    return (
+      <div class={styles['member-center']}>
+        <Image src={shareBanner} class={styles.shareBanner} />
+        <div class={styles.memberContainer}>
+          <div class={[styles.intro]}>
+            <p>
+              酷乐秀会员可使用包括平台提供的所有训练乐谱，并专享“
+              <b>小酷Ai</b>
+              ”八大核心功能，孩子在家就能轻松完成乐器自主规范练习。
+            </p>
+          </div>
+          {this.functionList.length > 0 && (
+            <div class={styles.memberItem}>
+              <div class={styles.title}>会员功能</div>
+
+              <div class={styles.member_function}>
+                {this.functionList.map((item: any) => (
+                  <div class={styles.function_item}>
+                    <Icon name={item.icon} size={34} />
+                    <div class={styles.function_text} v-html={item.title}></div>
+                  </div>
+                ))}
+              </div>
+            </div>
+          )}
+        </div>
+        <div
+          class={['btnGroup']}
+          style={{ paddingTop: '12px', position: 'relative' }}
+        >
+          {this.discount === 1 && (
+            <div class={styles.tagDiscount}>专属优惠</div>
+          )}
+          <Button
+            block
+            round
+            type="primary"
+            onClick={this.onShare}
+            color="linear-gradient(220deg, #DFA164 0%, #FAC87E 100%)"
+          >
+            下载小酷Ai开始练习吧！
+          </Button>
+        </div>
+
+        {this.wxStatus && (
+          <div
+            class={styles.wxpopup}
+            onClick={() => {
+              this.wxStatus = false
+            }}
+          >
+            <img src={wxImage} alt="" />
+          </div>
+        )}
+      </div>
+    )
+  }
+})

src/teacher/share-page/share.ts

@@ -1,11 +1,14 @@
-import { Toast } from 'vant'
+import { Toast, Dialog } from 'vant'
+import { postMessage } from '@/helpers/native-message'
+import { browser } from '@/helpers/utils'
+import { state } from '@/state'
 
 // share information
 export const shareCall = (str: string, params?: any) => {
   const query = {
     url: str,
-    action: params.action || 'h5', // app, h5
-    pageTag: params.pageTag || 1 // 页面标识
+    action: params?.action || 'h5', // app, h5
+    pageTag: params?.pageTag || 1 // 页面标识
     // params: {}
   }
   const iosStr = encodeURIComponent(JSON.stringify(query))
@@ -51,3 +54,40 @@ export const appDownload = () => {
   }
   transfer(failed)
 }
+
+// 页面跳转原生页面
+export const initJumpNativePage = (url: string) => {
+  if (browser().isApp) {
+    if (state.platformType === 'STUDENT') {
+      // 自动跳转到学生端视频课详情购买页
+      window.location.replace(url)
+      // 为了处理andoird webview的跳转问题
+      if (browser().ios) {
+        window.location.replace(url)
+      } else {
+        postMessage({
+          api: 'openWebView',
+          content: {
+            url,
+            orientation: 1,
+            isHideTitle: false
+          }
+        })
+
+        postMessage({ api: 'back' })
+      }
+      return
+    } else if (state.platformType === 'TEACHER') {
+      Dialog.alert({
+        title: '提示',
+        message: '请使用酷乐秀学生端扫码打开',
+        confirmButtonColor: '#2dc7aa'
+      }).then(() => {
+        postMessage({ api: 'back' })
+      })
+    }
+  } else {
+    // 如果不在app里面则不需要唤起操作
+    shareCall(url)
+  }
+}

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

@@ -311,3 +311,61 @@
   padding-bottom: 0;
   margin-left: 8px;
 }
+
+.shareBtn {
+  display: flex;
+  align-items: flex-start;
+  color: #666;
+  font-size: 14px;
+  line-height: 20px !important;
+  :global(.van-image) {
+    width: 18px;
+    height: 18px;
+    margin-right: 6px;
+  }
+}
+
+.shareVip {
+  position: relative;
+  margin-top: 50px;
+  display: flex;
+  flex: 1;
+  align-items: center;
+  padding: 11px 6px 11px;
+  background: #ffffff;
+  border-radius: 10px;
+
+  .icon {
+    width: 36px;
+    height: 36px;
+    border-radius: 10px;
+  }
+  .info {
+    margin-left: 6px;
+    flex: 1;
+    word-break: break-all;
+    > h4 {
+      color: var(--music-list-item-title-color);
+      font-size: 14px;
+      font-weight: 600;
+    }
+    > p {
+      color: var(--music-list-item-mate-color);
+      line-height: 17px;
+    }
+  }
+}
+
+.tagDiscount {
+  position: absolute;
+  top: -23px;
+  left: 15px;
+  padding: 0 10px;
+  height: 23px;
+  background: linear-gradient(180deg, #ffb635 0%, #ff4e18 100%);
+  border-radius: 8px 8px 0px 0px;
+  font-size: 14px;
+  font-weight: 600;
+  color: #ffffff;
+  line-height: 24px;
+}

src/views/member-center/index.tsx

@@ -1,5 +1,5 @@
 import ColHeader from '@/components/col-header'
-import { Button, Cell, Icon, Image, Toast } from 'vant'
+import { Button, Cell, Icon, Image, Popup, Toast } from 'vant'
 import { defineComponent } from 'vue'
 import styles from './index.module.less'
 import request from '@/helpers/request'
@@ -7,11 +7,14 @@ import { setLogin, state } from '@/state'
 import iconStudent from '@common/images/icon_student.png'
 import iconTeacher from '@common/images/icon_teacher.png'
 import iconGift from './images/icon_gift.png'
+import iconShare from '../music/album/icon_share2.svg'
 import iconDiscount from './images/icon_discount.png'
+import iconMemberLogo from './images/member_logo.png'
 import { orderStatus } from '@/views/order-detail/orderStatus'
 import dayjs from 'dayjs'
 import { memberType } from '@/constant'
 import { moneyFormat } from '@/helpers/utils'
+import ColShare from '@/components/col-share'
 
 export const getAssetsHomeFile = (fileName: string) => {
   const path = `./images/${fileName}`
@@ -40,7 +43,10 @@ export default defineComponent({
         avatar: '',
         discount: 0,
         username: ''
-      }
+      },
+      shareStatus: false,
+      shareUrl: '',
+      shareDiscount: 0 // 是否有优惠活动
     }
   },
   computed: {
@@ -50,6 +56,7 @@ export default defineComponent({
         username: users?.username,
         phone: users?.phone,
         avatar: users?.heardUrl,
+        id: users?.userId,
         memberRankSettingId: users?.memberRankSettingId,
         membershipDays: users?.membershipDays,
         membershipEndTime: users?.membershipEndTime
@@ -58,9 +65,11 @@ export default defineComponent({
   },
   async mounted() {
     try {
-      const userInfo = await request.get('/api-student/student/queryUserInfo', {
-        initRequest: true // 初始化接口
-      })
+      const userInfo = await request.get(
+        state.platformType === 'TEACHER'
+          ? '/api-teacher/teacher/queryUserInfo'
+          : '/api-student/student/queryUserInfo'
+      )
       setLogin(userInfo.data)
 
       const res = await request.post(
@@ -115,9 +124,34 @@ export default defineComponent({
     } catch {}
   },
   methods: {
+    async onShare() {
+      try {
+        const res = await request.post('/api-teacher/open/vipProfit', {
+          data: {
+            userId: this.userInfo.id
+          }
+        })
+
+        // 只有老师端才会有分享功能
+        this.shareUrl = `${location.origin}/teacher#/shareVip?recomUserId=${this.userInfo.id}&activityId=${res.data.activityId}`
+        this.shareStatus = true
+        this.shareDiscount = res.data.discount || 0
+        // let url =
+        //   location.origin +
+        //   `/accompany/colexiu-share.html?id=${moreData.value.id}&recomUserId=${state.user.data?.userId}`
+        // // 判断是否有活动
+        // if (res.data.discount === 1) {
+        //   url += `&activityId=${res.data.activityId}`
+        // }
+        // shareDiscount.value = res.data.discount || 0
+        // shareUrl.value = url
+        // isMore.value = false
+        // shareStatus.value = true
+        return
+      } catch {}
+    },
     calcSalePrice(item: any) {
       // discount
-
       if (item.discount === 1) {
         const tempPrice = Number(
           (item.salePrice - item.discountPrice).toFixed(2)
@@ -173,7 +207,18 @@ export default defineComponent({
   render() {
     return (
       <div class={styles['member-center']}>
-        <ColHeader background="#ffe5cc" />
+        <ColHeader
+          background="#ffe5cc"
+          v-slots={{
+            right: () =>
+              state.platformType === 'TEACHER' && (
+                <div class={styles.shareBtn} onClick={this.onShare}>
+                  <Image src={iconShare} />
+                  分享
+                </div>
+              )
+          }}
+        />
         <div class={styles.member_container}>
           <Cell
             class={styles.userMember}
@@ -328,6 +373,30 @@ export default defineComponent({
             立即支付
           </Button>
         </div>
+
+        <Popup
+          v-model:show={this.shareStatus}
+          style={{ background: 'transparent' }}
+        >
+          <ColShare
+            teacherId={this.userInfo.id}
+            shareUrl={this.shareUrl}
+            shareType="vip"
+            shareLength={2}
+          >
+            <div class={styles.shareVip}>
+              {this.shareDiscount === 1 && (
+                <div class={styles.tagDiscount}>专属优惠</div>
+              )}
+
+              <img class={styles.icon} src={iconMemberLogo} />
+              <div class={styles.info}>
+                <h4 class="van-multi-ellipsis--l2">小酷Ai会员</h4>
+                <p>海量曲谱、智能评测，专为器乐学习者量身打造</p>
+              </div>
+            </div>
+          </ColShare>
+        </Popup>
       </div>
     )
   }

src/views/music/album/icon_share2.svg

@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="18px" height="18px" viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>切片</title>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="曲目（老师分享）" transform="translate(-295.000000, -222.000000)">
+            <g id="编组-5备份" transform="translate(14.000000, 151.000000)">
+                <g id="分享（专辑）" transform="translate(281.000000, 71.000000)">
+                    <rect id="矩形" x="0" y="0" width="18" height="18"></rect>
+                    <g id="编组-5" transform="translate(1.960261, 2.294652)" stroke="#666666" stroke-linecap="round" stroke-width="1.4">
+                        <path d="M7,0.0980762114 C3.13400675,0.0980762114 0,3.23208296 0,7.09807621 C0,10.9640695 3.13400675,14.0980762 7,14.0980762 C10.8659932,14.0980762 14,10.9640695 14,7.09807621" id="路径"></path>
+                        <path d="M13.0553063,2.25732549 C9.74159779,2.25732549 7.05530629,4.94361699 7.05530629,8.25732549" id="路径"></path>
+                        <polyline id="路径" stroke-linejoin="round" transform="translate(11.366025, 2.732051) rotate(-330.000000) translate(-11.366025, -2.732051) " points="9.3660254 0.732050808 13.3660254 0.732050808 13.3660254 4.73205081"></polyline>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>