更新

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,16 +18,29 @@ 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
+      shareLoading: false,
+      shareArray: tempArray || [],
+      showType: ['', 'yellow', 'pink'] as any
     }
   },
   async mounted() {
@@ -162,7 +175,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}
@@ -171,8 +197,8 @@ export default defineComponent({
                   >
                     {this.$slots.default && this.$slots.default()}
                   </ShareItem>
-                </SwipeItem>
-                <SwipeItem>
+                </SwipeItem> */}
+                {/* <SwipeItem>
                   <ShareItem
                     id="share-preview-container1"
                     teacherId={this.teacherId}
@@ -193,7 +219,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/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: -26px;
+  left: 15px;
+  padding: 2px 10px 1px;
+  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: 20px;
+}

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 { 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,9 @@ export default defineComponent({
         avatar: '',
         discount: 0,
         username: ''
-      }
+      },
+      shareStatus: false,
+      shareUrl: ''
     }
   },
   computed: {
@@ -50,6 +55,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
@@ -107,6 +113,9 @@ export default defineComponent({
       }
       console.log(settingList)
       this.memberList = settingList
+
+      // 只有老师端才会有分享功能
+      this.shareUrl = `${location.origin}/teacher#/shareMember?recomUserId=${this.userInfo.id}`
     } catch {}
   },
   methods: {
@@ -168,7 +177,21 @@ 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.shareStatus = true)}
+                >
+                  <Image src={iconShare} />
+                  分享
+                </div>
+              )
+          }}
+        />
         <div class={styles.member_container}>
           <Cell
             class={styles.userMember}
@@ -323,6 +346,28 @@ 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}>
+              <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>