添加

miniprogram/pages/index/index.less

@@ -87,14 +87,17 @@
     transform: translateX(-50%);
     animation: breathe 2s infinite cubic-bezier(0, 0.21, 0, 0.88);
   }
+
   @keyframes breathe {
     0% {
       opacity: 1;
       transform: translateX(-50%) translateY(0rpx);
     }
-    75%{
+
+    75% {
       opacity: 1;
     }
+
     100% {
       opacity: 0;
       transform: translateX(-50%) translateY(-40rpx);
@@ -211,6 +214,12 @@ page {
     .priceF {
       font-size: 36rpx;
     }
+
+    .after {
+      padding-left: 4rpx;
+      font-size: 28rpx;
+      line-height: 48rpx;
+    }
   }
 
   .originPrice {
@@ -236,9 +245,32 @@ page {
   font-size: 32rpx;
   color: #131415;
   line-height: 44rpx;
-  padding: 24rpx 0 16rpx;
+  padding: 24rpx 0 14rpx;
 }
 
+.shopInfo {
+  font-size: 24rpx;
+  color: #999999;
+  line-height: 38rpx;
+  padding-bottom: 40rpx;
+}
+
+.shop-btn {
+  button {
+    line-height: 88rpx;
+    background: linear-gradient(270deg, #FF204B 0%, #FE5B71 100%);
+    border-radius: 44rpx;
+    text-align: center;
+    font-weight: 500;
+    font-size: 32rpx;
+    color: #FFFFFF;
+    padding: 0 !important;
+    margin: 0 !important;
+    width: 100%;
+  }
+}
+
+
 .goodsInfo {
   display: flex;
 
@@ -345,11 +377,19 @@ page {
   display: flex;
   align-items: center;
   box-sizing: border-box;
+  justify-content: space-around;
 
   .orders {
     display: flex;
-    flex-direction: column;
+    align-items: center;
     margin-right: 40rpx;
+    padding: 8rpx 0 16rpx;
+
+    &.active {
+      text {
+        color: #131415;
+      }
+    }
 
     image {
       width: 48rpx;
@@ -357,10 +397,11 @@ page {
     }
 
     text {
+      padding-left: 16rpx;
       font-weight: 500;
-      font-size: 22rpx;
-      color: #131415;
-      line-height: 32rpx;
+      font-size: 28rpx;
+      color: #AAAAAA;
+      line-height: 40rpx;
       text-align: center;
     }
   }
@@ -389,6 +430,10 @@ page {
 
 // 'demo-text-1', 'demo-text-2', 'demo-text-3'
 .popup-section {
+  max-height: 86vh;
+  overflow-x: hidden;
+  overflow-y: auto;
+
   &.hidden {
     display: none;
   }
@@ -412,10 +457,12 @@ page {
     width: 100%;
     background: #FFFFFF;
     border-radius: 32rpx 32rpx 0rpx 0rpx;
-    padding: 40rpx 32rpx 58rpx;
+    padding: 40rpx 0 0;
     box-sizing: border-box;
 
     .goodsInfo {
+      padding: 0 40rpx 48rpx;
+
       .desc {
         padding-bottom: 0;
         margin-bottom: 0;
@@ -507,4 +554,31 @@ page {
     padding-top: 0;
     padding-bottom: 0;
   }
+}
+
+
+.popupBottom {
+  background: #ffffff;
+  border-top: 2rpx solid #F0F0F0;
+  padding: 0 32rpx 58rpx;
+}
+
+.current-item {
+  font-size: 24rpx;
+  color: #502f00;
+  line-height: 40rpx;
+  padding: 12rpx 12rpx 28rpx;
+
+  .current-item-text {
+    font-weight: 600;
+    font-size: 26rpx;
+    color: #502f00;
+    line-height: 36rpx;
+    padding-bottom: 4rpx;
+  }
+
+  text {
+    color: #ff0047;
+    font-weight: bold;
+  }
 }

miniprogram/pages/index/index.ts

@@ -1,7 +1,7 @@
 // index.ts
 
 import { api_shopProduct } from "../../api/login";
-import { debounce } from '../../utils/util'
+import { debounce, formatPrice } from '../../utils/util'
 
 // 获取应用实例
 const app = getApp<IAppOption>()
@@ -34,6 +34,13 @@ Page({
       'https://oss.dayaedu.com/ktyq/1739182557976.png',
       'https://oss.dayaedu.com/ktyq/1739182545221.png'
     ],
+    formatSelectGood: {
+      typeName: '',
+      showSalePrice: '', // 显示的现价
+      originalPrice: 0, // 原价
+      salePrice: 0, // 现价
+      discountPrice: '' // 已省
+    } as any, // 格式化所有选中的数据
     current: 0,
     autoplay: false,
     interval: 5000,
@@ -62,19 +69,19 @@ Page({
       let selected: any = {}
       let isOverSaled = true // 是否销售完
       list.forEach((item: any) => {
-        item.originalPrice = this.formatPrice(item.originalPrice, 'ALL');
+        item.originalPrice = formatPrice(item.originalPrice, 'ALL');
         item.typeName = this.formatPeriod(item.num, item.period);
-        const prices: any = this.formatPrice(item.salePrice)
+        const prices: any = formatPrice(item.salePrice)
         item.integerPart = prices.integerPart
         item.decimalPart = prices.decimalPart
-        if(item.stockNum > 0) {
+        if (item.stockNum > 0) {
           isOverSaled = false
-          if( !selected.id) {
+          if (!selected.id) {
             selected = item
           }
         }
       });
-      if(isOverSaled) {
+      if (isOverSaled) {
         // 没有可购买商品则默认选中第一个商品
         selected = list[0]
       }
@@ -84,22 +91,10 @@ Page({
         isOverSaled,
         selected
       })
-    } catch(e) {
+    } catch (e) {
       console.log(e, 'e')
     }
   },
-  // 格式化价格
-  formatPrice(price: number, type?: string) {
-    const amountStr = price.toFixed(2)
-    const [integerPart, decimalPart] = amountStr.split('.');
-    if(type === 'ALL') {
-      return amountStr
-    }
-    return {
-      integerPart,
-      decimalPart
-    }
-  },
   // 格式化类型
   formatPeriod(num: number, type: string) {
     const template: any = {
@@ -107,17 +102,17 @@ Page({
       MONTH: "月卡",
       YEAR: "年卡"
     }
-    if(type === "YEAR" && num >= 99) {
+    if (type === "YEAR" && num >= 99) {
       return '永久卡'
     }
-    return num + template[type]
+    return num + (template[type] || '')
   },
   // 选择
   onSelectGoods(e: any) {
     const { dataset } = e.currentTarget
     const item = this.data.list.find((item: any) => item.id === dataset.id)
     // 判断是否有库存
-    if(item.stockNum <= 0) {
+    if (item.stockNum <= 0) {
       return
     }
     this.setData({
@@ -126,7 +121,7 @@ Page({
   },
   onFirstChange(e: any) {
     const detail = e.detail;
-    if(detail.source === 'touch' || detail.source == 'autoplay') {
+    if (detail.source === 'touch' || detail.source == 'autoplay') {
       this.setData({
         firstCurrent: detail.current
       })
@@ -135,15 +130,61 @@ Page({
   // 事件处理函数
   changeSwiper(e: any) {
     const detail = e.detail;
-    if(detail.source === 'touch' || detail.source == 'autoplay') {
+    if (detail.source === 'touch' || detail.source == 'autoplay') {
       this.setData({
         current: detail.current
       })
     }
   },
+  /** 格式化选中的商品 */
+  onFormatGoods() {
+    const selected = this.data.selected;
+    const selectedInstrument = this.data.selectedInstrument
+
+    const params = {
+      typeName: '',
+      showSalePrice: '' as any, // 显示的现价
+      originalPrice: 0, // 原价
+      salePrice: 0, // 现价
+      discountPrice: '' as any, // 已省
+      integerPart: '',
+      decimalPart: '',
+    }
+    // 选中期限
+    if (selected.id) {
+      params.typeName = selected.typeName
+      params.showSalePrice = selected.showSalePrice
+      params.originalPrice = selected.originalPrice
+      params.salePrice = selected.salePrice
+      params.discountPrice = selected.discountPrice
+
+      const prices: any = formatPrice(params.salePrice);
+      params.integerPart = prices.integerPart
+      params.decimalPart = prices.decimalPart
+    }
+    // 选中乐器
+    if (selectedInstrument.id) {
+      params.typeName = selected.typeName ? selected.typeName + '+' + selectedInstrument.name : selectedInstrument.name
+      params.originalPrice = Number(selected.originalPrice) + Number(selectedInstrument.originalPrice)
+      params.salePrice = Number(selected.salePrice) + Number(selectedInstrument.salePrice)
+      params.showSalePrice = formatPrice(params.salePrice, "ALL");
+      params.discountPrice = formatPrice(
+        params.originalPrice - params.salePrice,
+        "ALL"
+      );
+
+      const prices: any = formatPrice(params.salePrice);
+      params.integerPart = prices.integerPart
+      params.decimalPart = prices.decimalPart
+    }
+
+    this.setData({
+      formatSelectGood: params
+    })
+  },
   isLogin() {
     // 判断是否登录
-    if(!app.globalData.isLogin) {
+    if (!app.globalData.isLogin) {
       wx.navigateTo({
         url: '../login/login',
       })
@@ -154,7 +195,7 @@ Page({
   /** 我的订单 */
   onOrder() {
     // 判断是否登录
-    if(!this.isLogin()) {
+    if (!this.isLogin()) {
       return
     }
     wx.navigateTo({
@@ -174,7 +215,7 @@ Page({
   },
   onBuyShop() {
     // 判断是否登录
-    if(!this.isLogin()) {
+    if (!this.isLogin()) {
       return
     }
     this.setData({
@@ -190,7 +231,7 @@ Page({
     // 判断是否登录
     const that = this
     debounce(function () {
-      if(!that.isLogin()) {
+      if (!that.isLogin()) {
         return
       }
       let info = JSON.stringify({
@@ -245,7 +286,7 @@ Page({
    * 生命周期函数--监听页面显示
    */
   onShow() {
-    if(!this.data.isFromPreviewImage) {
+    if (!this.data.isFromPreviewImage) {
       this.onInit()
     } else {
       this.setData({

miniprogram/pages/index/index.wxml

@@ -55,9 +55,11 @@
             <view class="shopInfo">
               一款专为音乐学习者、爱好者设计的音乐学习软件。通过先进的人工智能技术，为您提供全方位的乐理知识、日常练习和智能评分等功能，帮助您在音乐道路上更上一层楼。
             </view>
-            <view class="goods-btn">
-              <view class="btn-submit">立即享受专属权益</view>
+
+            <view class="shop-btn">
+              <button bind:tap="onBuyShop" type="primary" disabled="{{ isOverSaled }}">立即享受专属权益</button>
             </view>
+            <!-- <view class="btn-submit">立即享受专属权益</view> -->
           </view>
 
           <view class="goodsSection">
@@ -73,17 +75,17 @@
           </view>
 
           <view class="bottom-section">
-            <!-- <view class="orders" bind:tap="onService">
-              <image src="./images/icon-service.png" />
-              <text>客服</text>
-            </view> -->
+            <view class="orders active" bind:tap="onOrder">
+              <image src="./images/icon-order.png" />
+              <text>首页</text>
+            </view>
             <view class="orders" bind:tap="onOrder">
               <image src="./images/icon-order.png" />
               <text>订单</text>
             </view>
-            <view class="btnSection">
+            <!-- <view class="btnSection">
               <button bind:tap="onBuyShop" type="primary" disabled="{{ isOverSaled }}">立即购买</button>
-            </view>
+            </view> -->
           </view>
 
           <view class="popup-section" wx:if="{{popupShow}}">
@@ -91,7 +93,7 @@
             <view class="popup-container">
               <image bind:tap="onClose" src="./images/icon-close.png" class="iconClose"></image>
 
-              <view class="product-section">
+              <!-- <view class="product-section">
                 <view class="product-img">
                   <image bind:tap="onPreivewGoods" data-src="{{ selected.pic }}" src="{{ selected.pic }}"></image>
                 </view>
@@ -103,10 +105,19 @@
                   </view>
                   <view class="originPrice">¥{{ selected.originalPrice }}</view>
                 </view>
+              </view> -->
+
+              <view class="goodsInfo">
+                <view class="desc">会员有效期</view>
+                <view class="goodsList">
+                  <view wx:for="{{ list }}" wx:key="index" class="goodsItem {{ item.id == selected.id ? 'selected' : '' }} {{ item.stockNum <= 0 ? 'nosale' : '' }}" bind:tap="onSelectGoods" data-id="{{ item.id }}">{{ item.typeName }}
+                    <image wx:if="{{ item.stockNum <= 0 }}" src="./images/nosale.png"></image>
+                  </view>
+                </view>
               </view>
 
               <view class="goodsInfo">
-                <view class="desc">规格</view>
+                <view class="desc">乐器搭配<text>(非必选)</text></view>
                 <view class="goodsList">
                   <view wx:for="{{ list }}" wx:key="index" class="goodsItem {{ item.id == selected.id ? 'selected' : '' }} {{ item.stockNum <= 0 ? 'nosale' : '' }}" bind:tap="onSelectGoods" data-id="{{ item.id }}">{{ item.typeName }}
                     <image wx:if="{{ item.stockNum <= 0 }}" src="./images/nosale.png"></image>
@@ -114,7 +125,23 @@
                 </view>
               </view>
 
-              <button type="primary" bind:tap="onSubmit">立即购买</button>
+
+              <view class="popupBottom">
+                <!-- 有选择商品的时候 -->
+                <view class="current-item" wx:if="{{!isOverSaled && selected.id}}">
+                  <view class="current-item-text">您已选择：</view>
+                  <text>{{ formatSelectGood.typeName }}</text>
+                  ，合计：
+                  <text>¥ {{ formatSelectGood.showSalePrice }}</text>
+                  <block wx:if="{{ formatSelectGood.originalPrice > formatSelectGood.salePrice }}">
+                    ，已省
+                    <text>¥ {{ formatSelectGood.discountPrice }}</text>
+                  </block>
+                </view>
+                <view class="btnGroup">
+                  <button type="primary" catch:tap="onSubmit">立即享受专属权益</button>
+                </view>
+              </view>
             </view>
           </view>
         </view>

miniprogram/utils/util.ts

@@ -31,7 +31,7 @@ export const debounce = (func: any, wait: number) => {
   return () => {
     const _this = this;
     let args: any = arguments;
-    if(timer) clearTimeout(timer);
+    if (timer) clearTimeout(timer);
     timer = setTimeout(() => {
       timer = null;
       func.apply(_this, args)
@@ -51,11 +51,40 @@ export const throttle = (func: { apply: (arg0: undefined, arg1: any) => void },
   return () => {
     let _this = this;
     let args = arguments;
-    if(!timer) {
+    if (!timer) {
       timer = setTimeout(() => {
         func.apply(_this, args);
         timer = null;
       }, delay)
     }
   }
-}
+}
+
+/**
+ * 格式化金额
+ * @param price 
+ * @param type 
+ */
+export const formatPrice = (price: number, type?: string) => {
+  const amountStr = price.toFixed(2);
+  const [integerPart, decimalPart] = amountStr.split(".");
+  if (type === "ALL") {
+    return amountStr;
+  }
+  return {
+    integerPart,
+    decimalPart,
+  };
+}
+
+export const GRADE_ENUM = {
+  '1': '一年级',
+  '2': '二年级',
+  '3': '三年级',
+  '4': '四年级',
+  '5': '五年级',
+  '6': '六年级',
+  '7': '七年级',
+  '8': '八年级',
+  '9': '九年级'
+} as any;