添加会员购买

src/views/member-center/index.tsx

@@ -159,6 +159,7 @@ export default defineComponent({
         const params: any = [
           {
             giftVipDay: selectMember.membershipDays,
+            giftPeriod: selectMember.giftPeriod,
             goodsId: selectMember.id,
             goodsNum: 1,
             goodsType: 'VIP',
@@ -307,7 +308,7 @@ export default defineComponent({
                   title: () => (
                     <div class={styles.gift}>
                       <img src={iconGift} class={styles.iconGift} />
-                      现在开通赠送{' '}
+                      现在开通赠送
                       <span>{this.users.membershipGiftDays || 0}</span>
                       天有效期
                     </div>

src/views/student-register/index-apply.module.less

@@ -808,4 +808,44 @@
       color: #767C7F;
     }
   }
+}
+
+// 赠送会员
+.vipGiftContainer {
+  display: flex;
+  align-items: center;
+  margin: 7px 13px 12px;
+  background: url('./images/new/vip_gift_bg.png') no-repeat center;
+  background-size: contain;
+  height: 47px;
+
+
+  .iconGift {
+    width: 60px;
+    height: 51px;
+    margin: -10px 11px 0 16px;
+  }
+
+  font-weight: 500;
+  font-size: 15px;
+  color: #801D09;
+  line-height: 21px;
+
+  .vipGiftNum {
+    font-weight: bold;
+    font-size: 26px;
+    color: #FF113F;
+    line-height: 36px;
+    padding: 0 2px;
+    margin-top: -6px;
+  }
+
+  p {
+    display: flex;
+    align-items: center;
+  }
+
+  .vipGiftPreviod {
+    color: #FF113F;
+  }
 }

src/views/student-register/index-apply.tsx

@@ -53,6 +53,7 @@ import icon10 from './images/new/icon-10.png';
 import icon6 from './images/new/icon-6.png';
 import giftTip from './images/new/icon-9.png';
 import iconGift from './images/new/icon-gift.png';
+import vipGiftTIps from './images/new/vip_gift_tips.png';
 import dayjs from 'dayjs';
 // import MMessageTip from '@/components/m-message-tip';
 import { CurrentTime, useCountDown } from '@vant/use';
@@ -65,6 +66,7 @@ import MPopup from '@/components/m-popup';
 import UserAuth from './component/user-auth';
 import MMessageTip from '@/components/m-message-tip';
 import SelectStudent from './modal/select-student';
+import { vipGiftPeriodType } from '.';
 
 const classList: any = [];
 for (let i = 1; i <= 40; i++) {
@@ -928,6 +930,7 @@ export default defineComponent({
         vipList.forEach((vip: any) => {
           params.push({
             giftVipDay: vip.membershipDays,
+            giftPreiod: vip.giftPeriod,
             goodsId: vip.goodsId,
             goodsNum: 1,
             goodsType: vip.goodsType,
@@ -1694,18 +1697,37 @@ export default defineComponent({
             </Cell>
 
             {/* {forms.detailVip.membershipDays ? ( */}
-            <div class={[styles.memberNumer, styles.aiMemberNumber]}>
-              <img src={iconGift} class={styles.iconGift} />
-              <p>
-                首次购买赠送乐器AI学练工具
-                <span>{forms.detailVip.membershipDays || 0}</span>天有效期
-              </p>
-            </div>
+
             {/* ) : (
               ''
             )} */}
           </div>
 
+          {/* <div class={[styles.memberNumer, styles.aiMemberNumber]}>
+            <img src={iconGift} class={styles.iconGift} />
+            <p>
+              首次购买赠送乐器AI学练工具
+              <span>{forms.detailVip.membershipDays || 0}</span>天有效期
+            </p>
+          </div> */}
+
+          {forms.detailVip.membershipDays ? (
+            <div class={styles.vipGiftContainer}>
+              <img src={vipGiftTIps} class={styles.iconGift} />
+              <p>
+                现在购买额外赠送有效期
+                <span class={styles.vipGiftNum}>
+                  {forms.detailVip.membershipDays || 0}
+                </span>
+                <span class={styles.vipGiftPreviod}>
+                  {vipGiftPeriodType[forms.detailVip.giftPeriod]}
+                </span>
+              </p>
+            </div>
+          ) : (
+            ''
+          )}
+
           {/* {forms.joinType === 'tradition' && (
             <div class={styles.goodsTradition}>
               <i class={styles.iconArrow}></i>

src/views/student-register/index.module.less

@@ -844,4 +844,44 @@
       color: #767C7F;
     }
   }
+}
+
+// 赠送会员
+.vipGiftContainer {
+  display: flex;
+  align-items: center;
+  margin: 7px 13px 12px;
+  background: url('./images/new/vip_gift_bg.png') no-repeat center;
+  background-size: contain;
+  height: 47px;
+
+
+  .iconGift {
+    width: 60px;
+    height: 51px;
+    margin: -10px 11px 0 16px;
+  }
+
+  font-weight: 500;
+  font-size: 15px;
+  color: #801D09;
+  line-height: 21px;
+
+  .vipGiftNum {
+    font-weight: bold;
+    font-size: 26px;
+    color: #FF113F;
+    line-height: 36px;
+    padding: 0 2px;
+    margin-top: -6px;
+  }
+
+  p {
+    display: flex;
+    align-items: center;
+  }
+
+  .vipGiftPreviod {
+    color: #FF113F;
+  }
 }

src/views/student-register/index.tsx

@@ -54,6 +54,7 @@ import icon3 from './images/new/icon-3.png';
 // import icon6 from './images/new/icon-6.png';
 import giftTip from './images/new/icon-9.png';
 import iconGift from './images/new/icon-gift.png';
+import vipGiftTIps from './images/new/vip_gift_tips.png';
 import icon10 from './images/new/icon-n-10.png';
 import icon11 from './images/new/icon-n-11.png';
 import dayjs from 'dayjs';
@@ -115,6 +116,12 @@ const getGradeList = (gradeYear: string, instrumentCode?: string) => {
   return tempList;
 };
 
+export const vipGiftPeriodType = {
+  DAY: '天',
+  MONTH: '个月',
+  YEAR: '年'
+} as any;
+
 export default defineComponent({
   name: 'student-register',
   setup() {
@@ -960,6 +967,7 @@ export default defineComponent({
         vipList.forEach((vip: any) => {
           params.push({
             giftVipDay: vip.membershipDays,
+            giftPreiod: vip.giftPeriod,
             goodsId: vip.goodsId,
             goodsNum: 1,
             goodsType: vip.goodsType,
@@ -1951,22 +1959,7 @@ export default defineComponent({
             {forms.joinType && (
               <div class={styles.goodsTypeGroup}>
                 {forms.joinType === 'digitalize' && (
-                  <>
-                    <img src={icon10} class={styles.showImg} />
-
-                    {forms.detailVip.membershipDays ? (
-                      <div class={styles.memberNumer}>
-                        <img src={iconGift} class={styles.iconGift} />
-                        <p>
-                          首次购买赠送乐器AI学练工具
-                          <span>{forms.detailVip.membershipDays || 0}</span>
-                          天有效期
-                        </p>
-                      </div>
-                    ) : (
-                      ''
-                    )}
-                  </>
+                  <img src={icon10} class={styles.showImg} />
                 )}
                 {forms.joinType === 'tradition' && (
                   <img src={icon11} class={styles.showImg} />
@@ -1975,6 +1968,23 @@ export default defineComponent({
             )}
           </div>
 
+          {forms.detailVip.membershipDays && forms.joinType === 'digitalize' ? (
+            <div class={styles.vipGiftContainer}>
+              <img src={vipGiftTIps} class={styles.iconGift} />
+              <p>
+                现在购买额外赠送有效期
+                <span class={styles.vipGiftNum}>
+                  {forms.detailVip.membershipDays || 0}
+                </span>
+                <span class={styles.vipGiftPreviod}>
+                  {vipGiftPeriodType[forms.detailVip.giftPeriod]}
+                </span>
+              </p>
+            </div>
+          ) : (
+            ''
+          )}
+
           {/* {forms.joinType === 'digitalize' && (
             <div class={[styles.goodsExtra]}>
               <i class={styles.iconArrow}></i>