修改样式

miniprogram/components/service/service.less

@@ -1,4 +1,12 @@
 /* components/service/service.wxss */
+.iconSerivce {
+  position: fixed;
+  // bottom: 198rpx;
+  // right: 8rpx;
+  width: 112rpx;
+  height: 119rpx;
+  z-index: 998;
+}
 .service-container {
   position: fixed;
   top: 0;
@@ -23,14 +31,17 @@
     left: 50%;
     text-align: center;
     .iconImg {
-      width: 590rpx;
-      height: 848.22rpx;
+      width: 578rpx;
+      height: 686rpx;
     }
 
     .iconClose {
-      margin-top: 40rpx;
-      width: 60rpx;
-      height: 60rpx;
+      position: absolute;
+      z-index: 1;
+      top: 34rpx;
+      right: 16rpx;
+      width: 44rpx;
+      height: 44rpx;
     }
   }
 }

miniprogram/components/service/service.ts

@@ -1,32 +1,86 @@
 // components/service/service.ts
 Component({
-
   /**
    * 组件的属性列表
    */
-  properties: {
-    popShow: {
-      type: Boolean,
-      default: false
-    }
-  },
+  // properties: {
+  //   popShow: {
+  //     type: Boolean,
+  //     default: false
+  //   }
+  // },
 
   /**
    * 组件的初始数据
    */
   data: {
-
+    popShow: false,
+    top: 0,  // 初始的上偏移
+    startX: 0, // 触摸起始点 X 坐标
+    startY: 0, // 触摸起始点 Y 坐标
+    windowWidth: 0, // 屏幕宽度
+    windowHeight: 0, // 屏幕高度
+    elementHeight: 60 // 元素高度
+  },
+  attached() {
+    // 获取屏幕宽高
+    const systemInfo = wx.getWindowInfo();
+    this.setData({
+      windowWidth: systemInfo.windowWidth,
+      windowHeight: systemInfo.windowHeight,
+      top: systemInfo.windowHeight - 180
+    });
   },
-
   /**
    * 组件的方法列表
    */
   methods: {
     onClose() {
-      this.triggerEvent('changePop', false)
+      // this.triggerEvent('changePop', false)
+      this.setData({
+        popShow: false
+      })
     },
     onOpen() {
-// 
+      // 
+    },
+    onShow() {
+      this.setData({
+        popShow: true
+      })
+    },
+    onTouchStart(e: any) {
+      // 记录触摸起始点的 Y 坐标
+      this.setData({
+        startY: e.touches[0].clientY
+      });
+    },
+  
+    onTouchMove(e: any) {
+      // 计算上下方向的偏移量
+      const deltaY = e.touches[0].clientY - this.data.startY;
+  
+      // 更新元素的垂直位置
+      this.setData({
+        top: this.data.top + deltaY,
+        startY: e.touches[0].clientY
+      });
+    },
+  
+    onTouchEnd() {
+      const { top, windowHeight, elementHeight } = this.data;
+
+      // 计算与顶部和底部边界的距离
+      const distanceTop = top;
+      const moveHeight = top + elementHeight
+      // 判断元素与顶部和底部的距离，选择最近的边界
+      if (distanceTop < 0) {
+        this.setData({ top: 0 }); // 吸附到顶部
+      } else if(moveHeight >= windowHeight) {
+        this.setData({ top: windowHeight - elementHeight })
+      } else {
+        this.setData({ top })
+      }
     }
   }
 })

miniprogram/components/service/service.wxml

@@ -1,9 +1,16 @@
 <!--components/service/service.wxml-->
-<view class="service-container" wx:if="{{ popShow }}">
-  <view class="service-mask" bind:tap="onClose"></view>
-  <view class="service-section" bind:tap="onClose">
-    <image src="https://oss.dayaedu.com/ktyq/1732155965679.png" data-src="https://oss.dayaedu.com/ktyq/1732155965679.png" mode="aspectFill" catch:tap="onOpen" show-menu-by-longpress="true" catch:longtap="onPerview" class="iconImg"></image>
+<view>
+  <view class="service-container" wx:if="{{ popShow }}">
+    <view class="service-mask" bind:tap="onClose"></view>
+    <view class="service-section" bind:tap="onClose">
+      <image src="https://oss.dayaedu.com/ktyq/1732174608277.png" data-src="https://oss.dayaedu.com/ktyq/1732174608277.png" mode="aspectFill" catch:tap="onOpen" show-menu-by-longpress="true" catch:longtap="onPerview" class="iconImg"></image>
 
-    <image src="./images/icon-close.png" catch:tap="onClose" class="iconClose"></image>
+      <image src="./images/icon-close.png" catch:tap="onClose" class="iconClose"></image>
+    </view>
   </view>
+  <image src="./images/icon-service.png" bind:tap="onShow" 
+  style="top: {{top}}px; right: 4px;" 
+    bindtouchstart="onTouchStart" 
+    bindtouchmove="onTouchMove" 
+    bindtouchend="onTouchEnd" class="iconSerivce"></image>
 </view>

miniprogram/pages/index/index.less

@@ -5,6 +5,7 @@ page {
   flex-direction: column;
   background: #F5F6F7;
 }
+
 .scrollarea {
   flex: 1;
   overflow-y: hidden;
@@ -12,46 +13,53 @@ page {
 
 .container {
   position: relative;
+
   .topShadow {
     position: absolute;
     top: 0;
     z-index: 1;
     width: 100%;
     height: 200rpx;
-    background: linear-gradient( 180deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 100%);
+    background: linear-gradient(180deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0) 100%);
   }
+
   .slider-count {
     position: absolute;
-    top: 674rpx;
-    right: 32rpx;
-    background: rgba(0,0,0,0.4);
-    border-radius: 26rpx;
-    border: 2rpx solid rgba(255,255,255,0.3);
+    top: 678rpx;
+    right: 0;
+    background: rgba(0, 0, 0, 0.4);
+    border-radius: 200rpx 0rpx 0rpx 200rpx;
     font-weight: 600;
     font-size: 28rpx;
     color: #FFFFFF;
     line-height: 40rpx;
     text-align: center;
-    padding: 2rpx 26rpx;
+    padding: 2rpx 20rpx 2rpx 28rpx;
     z-index: 1;
   }
+
   swiper {
     height: 750rpx;
   }
+
   .swiper-item {
     width: 100%;
     height: 100%;
+
     image {
       width: 100%;
       height: 100%;
     }
   }
+
   .demo-text-1 {
     background-color: red;
   }
+
   .demo-text-2 {
     background-color: black;
   }
+
   .demo-text-3 {
     background-color: gray;
   }
@@ -60,98 +68,213 @@ page {
 
 .shop-section {
   background: #FFFFFF;
-  border-radius: 20rpx;
-  margin: 16rpx 16rpx 0;
-  padding: 24rpx;
+  padding: 20rpx 32rpx 24rpx;
+
+  .main-goods {
+    width: 100%;
+    height: 160rpx;
+    background: url('https://oss.dayaedu.com/ktyq/1732175749177.png') no-repeat center;
+    background-size: contain;
+  }
+
   .showPrice {
     display: flex;
     justify-content: space-between;
-    align-items: center;
+    // align-items: center;
   }
+
   .left {
-    flex: 1 auto;
     display: flex;
-    align-items: flex-end;
+    flex-direction: column;
+    min-width: 210rpx;
+  }
+
+  .left-top {
+    .t1 {
+      margin-top: 16rpx;
+      margin-left: 24rpx;
+      width: 116rpx;
+      height: 47.5rpx;
+    }
   }
+
+  .left-bottom {
+    padding-left: 16rpx;
+  }
+
   .currentPrice {
     font-weight: bold;
-    color: #FE2451;
+    color: #502F00;
     font-family: DINAlternate, DINAlternate;
+
     .stuff {
       font-size: 36rpx;
     }
+
     .priceZ {
       font-size: 60rpx;
     }
+
     .priceF {
       font-size: 36rpx;
     }
   }
-  .originPrice {
-    padding-left: 16rpx;
-    font-size: 32rpx;
-    color: #AAAAAA;
-    line-height: 44rpx;
-    text-decoration: line-through;
-    padding-bottom: 12rpx;
-  }
+
+  // .originPrice {
+  //   padding-left: 16rpx;
+  //   font-size: 32rpx;
+  //   color: #AAAAAA;
+  //   line-height: 44rpx;
+  //   text-decoration: line-through;
+  //   padding-bottom: 12rpx;
+  // }
   .right {
-    padding-top: 14rpx;
+    flex: 1 auto;
+    padding-top: 22rpx;
     font-weight: 400;
     font-size: 28rpx;
     color: #777777;
     line-height: 40rpx;
+
+    .right-top {
+      display: flex;
+      font-size: 24rpx;
+      color: #6D4718;
+      line-height: 34rpx;
+    }
+
+    .right-bottom {
+      padding-top: 40rpx;
+    }
   }
 }
+
 .shopName {
   font-weight: 600;
-  font-size: 32rpx;
-  color: #131415;
-  line-height: 44rpx;
-  padding: 24rpx 0 16rpx;
+  font-size: 30rpx;
+  color: #502F00;
+  line-height: 42rpx;
+  max-width: 460rpx;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 .goodsInfo {
   display: flex;
+
   // align-items: center;
   .desc {
-    font-size: 28rpx;
-    color: #131415;
-    line-height: 68rpx;
-    margin: 24rpx;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    width: 84rpx;
+    height: 84rpx;
+    background: #F1F1F1;
+    border-radius: 12rpx;
+    font-size: 24rpx;
+    color: #777777;
+    line-height: 30rpx;
     flex-shrink: 0;
+    padding: 12rpx 16rpx;
+    box-sizing: border-box;
+    margin-right: 16rpx;
+    margin-top: 32rpx;
   }
 
   .goodsList {
     display: flex;
     align-items: center;
-    flex-wrap: wrap;
+    flex-wrap: nowrap;
+    overflow-x: auto;
+    padding-top: 32rpx;
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
   }
+
   .goodsItem {
-    line-height: 68rpx;
-    background: #F4F4F5;
-    border-radius: 12rpx;
-    padding: 0 32rpx;
-    margin-right: 24rpx;
+    display: flex;
+    align-items: center;
+    position: relative;
+    height: 84rpx;
+    background: #F8F8F8;
+    padding-left: 10rpx;
+    margin-right: 16rpx;
     font-size: 28rpx;
     color: #131415;
     position: relative;
-    margin-top: 24rpx;
+    border-radius: 12rpx;
+    border: 4rpx solid #F8F8F8;
+    box-sizing: border-box;
+
+    .select-arrow {
+      display: none;
+    }
 
     &.selected {
-      background: #FEEDF0;
-      font-weight: 600;
-      color: #FE2451;
+      background: rgba(255, 255, 255, 0.7);
+      border-radius: 12rpx;
+      border: 4rpx solid #855F2E;
+
+      .select-arrow {
+        display: block;
+        position: absolute;
+        top: -40rpx;
+        left: 50%;
+        transform: translateX(-50%);
+        width: 28rpx;
+        height: 18rpx;
+
+      }
     }
 
     &.nosale {
-      background: #F4F4F5;
-      color: #B1B1B1;
+      background-color: rgba(248, 248, 248, 0.6);
+
+      .pic,
+      .nameorprice {
+        opacity: 0.6;
+      }
     }
-    image {
+
+    .pic {
+      width: 64rpx;
+      height: 64rpx;
+      flex-shrink: 0;
+    }
+
+    .nameorprice {
+      padding-left: 10rpx;
+      padding-right: 12rpx;
+      flex-shrink: 0;
+      display: flex;
+      flex-direction: column;
+      justify-content: space-around;
+      height: 64rpx;
+      .name {
+        font-weight: 600;
+        font-size: 24rpx;
+        color: #131415;
+        line-height: 28rpx;
+      }
+
+      .price {
+        font-family: DINAlternate, DINAlternate;
+        font-weight: bold;
+        font-size: 24rpx;
+        color: #FF0047;
+        line-height: 1.2;
+        padding-top: 4rpx;
+      }
+    }
+
+    .imgSale {
       position: absolute;
-      top: -14rpx;
-      right: -14rpx;
+      top: -20rpx;
+      right: -16rpx;
       width: 56rpx;
       height: 28rpx;
       display: block;
@@ -160,41 +283,68 @@ page {
   }
 }
 
+.current-item {
+  margin-top: 24rpx;
+  font-size: 24rpx;
+  color: #502F00;
+  line-height: 40rpx;
+  background: linear-gradient(180deg, rgba(254, 248, 241, 0.4) 0%, rgba(251, 233, 205, 0.4) 100%);
+  border: 2rpx solid #FBE9CE;
+  border-radius: 10rpx;
+  padding: 12rpx 16rpx;
+
+  text {
+    color: #FF0047;
+    font-weight: bold;
+  }
+}
+
 .goodsSection {
   // margin-bottom: 156rpx;
-  padding-bottom: 174rpx;
-}
-.goodsIntro {
+  margin-top: 12rpx;
   background: #FFFFFF;
-  border-radius: 20rpx;
-  overflow: hidden;
-  margin: 16rpx 16rpx 8rpx;
+  padding-bottom: 162rpx;
 
   .title {
-    font-weight: 600;
-    font-size: 32rpx;
-    color: #131415;
-    line-height: 44rpx;
+    font-size: 28rpx;
+    color: #333333;
+    line-height: 40rpx;
     padding: 28rpx 24rpx;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    .before,
+    .after {
+      content: '';
+      width: 68rpx;
+      height: 2rpx;
+      border-radius: 2rpx;
+      opacity: 0.3;
+      display: inline-block;
+    }
+
+    .before {
+      background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, #000000 100%);
+      margin-right: 24rpx;
+    }
+
+    .after {
+      background: linear-gradient(270deg, rgba(0, 0, 0, 0) 0%, #000000 100%);
+      margin-left: 24rpx;
+    }
   }
+}
+
+.goodsIntro {
+  background: #FFFFFF;
+  overflow: hidden;
 
   .images {
     image {
       display: block;
       width: 100%;
     }
-    .img1 {
-      height: 1128rpx;
-    }
-    .img2 {
-      height: 1810rpx
-    }
-    .img3 {
-      height: 1336rpx;
-    }
-    .img4 {
-      height: 1750rpx;
-    }
   }
 }
 
@@ -209,32 +359,36 @@ page {
   display: flex;
   align-items: center;
   box-sizing: border-box;
+
   .orders {
     display: flex;
     flex-direction: column;
     margin-right: 40rpx;
+
     image {
       width: 48rpx;
       height: 48rpx;
     }
+
     text {
-      font-weight: 500;
-      font-size: 22rpx;
-      color: #131415;
-      line-height: 32rpx;
+      font-size: 24rpx;
+      color: #777777;
+      line-height: 34rpx;
       text-align: center;
     }
   }
+
   .btnSection {
     flex: 1 auto;
+
     button {
       width: 100%;
       line-height: 88rpx;
-      background: linear-gradient( 270deg, #FF204B 0%, #FE5B71 100%);
+      background: linear-gradient(90deg, #544F4A 0%, #302F2B 100%);
       border-radius: 44rpx;
       font-weight: 500;
       font-size: 32rpx;
-      color: #FFFFFF;
+      color: #FBEAC9;
       padding-top: 0;
       padding-bottom: 0;
 
@@ -245,6 +399,43 @@ page {
   }
 }
 
+.scroll-header {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  z-index: 9;
+  background-color: #fff;
+  .product-catagory {
+    border-top: 1px solid #F2F2F2;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 20rpx 0 28rpx;
+    .item {
+      position: relative;
+      padding: 0 40rpx;
+      font-size: 28rpx;
+      color: #999999;
+      line-height: 40rpx;
+    }
+    .selected {
+      color: #131415;
+      font-weight: 600;
+      &::after {
+        position: absolute;
+        left: 50%;
+        bottom: -8rpx;
+        transform: translateX(-50%);
+        content: '';
+        display: block;
+        width: 34rpx;
+        height: 4rpx;
+        background: #534E49;
+      }
+    }
+  }
+}
 
 // 'demo-text-1', 'demo-text-2', 'demo-text-3'
 .popup-section {
@@ -258,9 +449,10 @@ page {
     left: 0;
     right: 0;
     bottom: 0;
-    background-color: rgba(0,0,0,0.6);
+    background-color: rgba(0, 0, 0, 0.6);
     z-index: 9;
   }
+
   .popup-container {
     position: fixed;
     bottom: 0;
@@ -274,9 +466,43 @@ page {
     box-sizing: border-box;
 
     .goodsInfo {
-      .desc {
-        padding-bottom: 0;
-        margin-bottom: 0;
+      padding-bottom: 28rpx;
+      min-height: 300rpx;
+      .goodsItem {
+        height: 102rpx;
+        margin-bottom: 22rpx;
+        // flex: 1;
+        width: 31.53%;
+        margin-right: 2%;
+        max-width: 31.53%;
+        &:nth-child(3n + 3) {
+          margin-right: 0;
+        }
+
+        .nameorprice {
+          height: 82rpx;
+          display: flex;
+          flex-direction: column;
+          justify-content: space-between;
+        }
+      }
+
+      .goodsList {
+        max-height: 480rpx;
+        overflow-y: auto;
+        overflow-x: hidden;
+
+        &::-webkit-scrollbar {
+          display: none;
+        }
+
+        flex-wrap: wrap;
+        width: 100%;
+
+        .pic {
+          width: 82rpx;
+          height: 82rpx;
+        }
       }
     }
   }
@@ -289,47 +515,68 @@ page {
     height: 38rpx;
   }
 
+
   .product-section {
     display: flex;
-    padding-bottom: 60rpx;
+    padding-bottom: 40rpx;
+
     .product-img {
       width: 160rpx;
       height: 160rpx;
       flex-shrink: 0;
       margin-right: 32rpx;
-      border-radius: 6px;
+      border-radius: 12rpx;
       overflow: hidden;
+
       image {
         width: 100%;
         height: 100%;
       }
     }
+
     .product-left {
       display: flex;
       align-items: flex-start;
+
       .currentPrice {
         font-weight: bold;
         color: #FE2451;
         font-family: DINAlternate, DINAlternate;
+
         .stuff {
-          font-size: 36rpx;
+          font-size: 32rpx;
         }
+
         .priceZ {
-          font-size: 60rpx;
+          font-family: DINAlternate, DINAlternate;
+          font-size: 56rpx;
         }
+
         .priceF {
-          font-size: 36rpx;
+          font-family: DINAlternate, DINAlternate;
+          font-size: 32rpx;
         }
       }
+
       .originPrice {
         padding-left: 16rpx;
-        font-size: 32rpx;
+        font-size: 28rpx;
         color: #AAAAAA;
-        line-height: 44rpx;
-        text-decoration: line-through;
+        line-height: 40rpx;
         padding-top: 30rpx;
       }
     }
+
+    .selected-info {
+      padding-top: 24rpx;
+      font-size: 28rpx;
+      color: #131415;
+      line-height: 40rpx;
+
+      text {
+        color: #FF0047;
+      }
+    }
   }
 
   .goodsInfo {
@@ -348,7 +595,7 @@ page {
   button {
     width: 100%;
     line-height: 88rpx;
-    background: linear-gradient( 270deg, #FF204B 0%, #FE5B71 100%);
+    background: linear-gradient( 90deg, #544F4A 0%, #302F2B 100%);
     border-radius: 44rpx;
     font-weight: 500;
     font-size: 32rpx;

miniprogram/pages/index/index.ts

@@ -19,7 +19,7 @@ Page({
     list: [] as any,
     isOverSaled: false, // 是否所有商品都没有库存
     selected: {} as any,
-    showService: false,
+    opacity: 0,
   },
 
   /**
@@ -39,7 +39,9 @@ Page({
       let isOverSaled = true // 是否销售完
       list.forEach((item: any) => {
         item.originalPrice = this.formatPrice(item.originalPrice, 'ALL');
+        item.showSalePrice = this.formatPrice(item.salePrice, 'ALL');
         item.typeName = this.formatPeriod(item.num, item.period);
+        item.discountPrice = this.formatPrice(item.originalPrice - item.salePrice, 'ALL')
         const prices: any = this.formatPrice(item.salePrice)
         item.integerPart = prices.integerPart
         item.decimalPart = prices.decimalPart
@@ -84,7 +86,7 @@ Page({
       YEAR: "年卡"
     }
     if(type === "YEAR" && num >= 99) {
-      return '终生卡'
+      return '永久卡'
     }
     return num + template[type]
   },
@@ -129,17 +131,6 @@ Page({
       url: '../orders/orders',
     })
   },
-  /** 客服 */
-  onService() {
-    this.setData({
-      showService: true
-    })
-  },
-  changePop(event: { detail: any }) {
-    this.setData({
-      showService: event.detail
-    })
-  },
   onBuyShop() {
     // 判断是否登录
     if(!this.isLogin()) {
@@ -180,4 +171,11 @@ Page({
   onShow() {
     this.onInit()
   },
+  // 页面滚动时颜色变化
+  onScrollView(e: { detail: any }) {
+    const top = e.detail.scrollTop || 0
+    this.setData({
+      opacity: top > 150 ? 1 : top / 150
+    })
+  }
 })

miniprogram/pages/index/index.wxml

@@ -1,80 +1,130 @@
 <!--index.wxml-->
-<scroll-view class="scrollarea" scroll-y="{{popupShow ? false : true}}" type="list">
+<scroll-view class="scrollarea" scroll-y="{{popupShow ? false : true}}" type="list" bindscroll="onScrollView">
   <view class="container">
     <!-- <view class="topShadow"></view> -->
-    <view class="slider-count">{{current + 1}}/{{5}}</view>
+    <view class="slider-count">{{current + 1}}/{{8}}</view>
     <swiper indicator-dots="{{false}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" bindchange="changeSwiper">
       <swiper-item>
         <view class="swiper-item ">
-          <image src="https://oss.dayaedu.com/ktyq/1731664204915.png"></image>
+          <image src="https://oss.dayaedu.com/ktyq/1732173958445.png"></image>
         </view>
       </swiper-item>
       <swiper-item>
         <view class="swiper-item ">
-          <image src="https://oss.dayaedu.com/ktyq/1731664238525.png"></image>
+          <image src="https://oss.dayaedu.com/ktyq/1732173972772.png"></image>
         </view>
       </swiper-item>
       <swiper-item>
         <view class="swiper-item ">
-          <image src="https://oss.dayaedu.com/ktyq/1731664250837.png"></image>
+          <image src="https://oss.dayaedu.com/ktyq/1732173985370.png"></image>
         </view>
       </swiper-item>
       <swiper-item>
         <view class="swiper-item ">
-          <image src="https://oss.dayaedu.com/ktyq/1731664259087.png"></image>
+          <image src="https://oss.dayaedu.com/ktyq/1732173997722.png"></image>
         </view>
       </swiper-item>
       <swiper-item>
         <view class="swiper-item ">
-          <image src="https://oss.dayaedu.com/ktyq/1731664269098.png"></image>
+          <image src="https://oss.dayaedu.com/ktyq/1732174010387.png"></image>
+        </view>
+      </swiper-item>
+      <swiper-item>
+        <view class="swiper-item ">
+          <image src="https://oss.dayaedu.com/ktyq/1732174025169.png"></image>
+        </view>
+      </swiper-item>
+      <swiper-item>
+        <view class="swiper-item ">
+          <image src="https://oss.dayaedu.com/ktyq/1732174034215.png"></image>
+        </view>
+      </swiper-item>
+      <swiper-item>
+        <view class="swiper-item ">
+          <image src="https://oss.dayaedu.com/ktyq/1732174043543.png"></image>
         </view>
       </swiper-item>
     </swiper>
 
     <view class="shop-section">
-      <view class="showPrice">
-        <view class="left">
-          <view class="currentPrice">
-            <text class="stuff">¥</text>
-            <text class="priceZ">{{ selected.integerPart || 0 }}</text>
-            <text class="priceF">.{{ selected.decimalPart || '00' }}</text>
+      <view class="main-goods">
+        <view class="showPrice">
+          <view class="left">
+            <view class="left-top">
+              <image class="t1" src="./images/t1.png"></image>
+            </view>
+            <view class="left-bottom">
+              <view class="currentPrice">
+                <text class="stuff">¥ </text>
+                <text class="priceZ">{{ selected.integerPart || 0 }}</text>
+                <text class="priceF">.{{ selected.decimalPart || '00' }}</text>
+              </view>
+            </view>
+          </view>
+          <view class="right">
+            <view class="right-top">
+              <view class="originPrice" wx:if="{{ selected.originalPrice > selected.salePrice }}">原价 ¥{{ selected.originalPrice || '0.00' }}</view><text style="padding: 0 6rpx"> | </text>
+              <view class="saleNum"> 已售100W+</view>
+            </view>
+            <view class="right-bottom">
+              <view class="shopName">
+                {{ selected.name }}
+              </view>
+            </view>
           </view>
-          <view class="originPrice" wx:if="{{ selected.originalPrice > selected.salePrice }}">¥{{ selected.originalPrice || '0.00' }}</view>
-        </view>
-        <view class="right">
-          已售100w+
         </view>
       </view>
 
-      <view class="shopName">
-        {{ selected.name }}
-      </view>
-
       <view class="goodsInfo">
-        <text class="desc">已选：</text>
+        <text class="desc">规格选择</text>
         <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 wx:for="{{ list }}" wx:key="index" class="goodsItem {{ item.id == selected.id ? 'selected' : '' }} {{ item.stockNum <= 0 ? 'nosale' : '' }}" bind:tap="onSelectGoods" data-id="{{ item.id }}">
+            <image class="select-arrow" src="./images/icon-down-arrow.png"></image>
+            <image class="imgSale" wx:if="{{ item.stockNum <= 0 }}" src="./images/nosale.png"></image>
+            <image class="pic" src="{{ item.pic }}"></image>
+            <view class="nameorprice">
+              <view class="name">{{ item.typeName }}</view>
+              <view class="price">¥{{ item.showSalePrice }}</view>
+            </view>
+          </view>
         </view>
       </view>
+
+      <!-- 有选择商品的时候  -->
+      <view class="current-item" wx:if="{{!isOverSaled && selected.id}}">
+        您已选中：<text>{{ selected.typeName }}</text> ，已优惠：<text>¥ {{ selected.discountPrice }}</text>
+      </view>
+
     </view>
-    
+
+
+    <view class="scroll-header" style="opacity: {{opacity}}">
+      <navigation-bar back="{{false}}" title="商品详情"></navigation-bar>
+      <view class="product-catagory">
+        <view class="item selected">产品介绍</view>
+        <view class="item">互通案例</view>
+        <view class="item">购买流程</view>
+      </view>
+    </view>
+
     <view class="goodsSection">
+      <view class="title">
+        <view class="before"></view>
+        <view>商品详情</view>
+        <view class="after"></view>
+      </view>
       <view class="goodsIntro">
-        <view class="title">图文详情</view>
         <view class="images">
-          <image class="img1" src="https://oss.dayaedu.com/ktyq/1731664304424.png"></image>
-          <image class="img2" src="https://oss.dayaedu.com/ktyq/1731664318588.png"></image>
-          <image class="img3" src="https://oss.dayaedu.com/ktyq/1731664330981.png"></image>
-          <image class="img4" src="https://oss.dayaedu.com/ktyq/1732085582320.png"></image>
+          <image mode="widthFix" src="https://oss.dayaedu.com/ktyq/1732175006625.png"></image>
+          <image mode="widthFix" src="https://oss.dayaedu.com/ktyq/1732175021350.png"></image>
+          <image mode="widthFix" src="https://oss.dayaedu.com/ktyq/1732175031878.png"></image>
+          <image mode="widthFix" src="https://oss.dayaedu.com/ktyq/1732175041724.png"></image>
+          <image mode="widthFix" src="https://oss.dayaedu.com/ktyq/1732175051612.png"></image>
         </view>
       </view>
     </view>
 
     <view class="bottom-section">
-      <view class="orders" bind:tap="onService">
-        <image src="./images/icon-service.png" />
-        <text>客服</text>
-      </view>
       <view class="orders" bind:tap="onOrder">
         <image src="./images/icon-order.png" />
         <text>订单</text>
@@ -93,20 +143,32 @@
           <view class="product-img">
             <image src="{{ selected.pic }}"></image>
           </view>
-          <view class="product-left">
-            <view class="currentPrice">
-              <text class="stuff">¥</text>
-              <text class="priceZ">{{ selected.integerPart }}</text>
-              <text class="priceF">.{{ selected.decimalPart }}</text>
+          <view>
+            <view class="product-left">
+              <view class="currentPrice">
+                <text class="stuff">¥ </text>
+                <text class="priceZ">{{ selected.integerPart }}</text>
+                <text class="priceF">.{{ selected.decimalPart }}</text>
+              </view>
+              <view class="originPrice">¥{{ selected.originalPrice }}</view>
+            </view>
+            <view class="selected-info">
+              您已选中：<text>{{ selected.typeName }}</text> ，已优惠：<text>¥ {{ selected.discountPrice }}</text>
             </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 wx:for="{{ list }}" wx:key="index" class="goodsItem {{ item.id == selected.id ? 'selected' : '' }} {{ item.stockNum <= 0 ? 'nosale' : '' }}" bind:tap="onSelectGoods" data-id="{{ item.id }}">
+              <image class="select-arrow" src="./images/icon-down-arrow.png"></image>
+              <image class="imgSale" wx:if="{{ item.stockNum <= 0 }}" src="./images/nosale.png"></image>
+              <image class="pic" src="{{ item.pic }}"></image>
+              <view class="nameorprice">
+                <view class="name">{{ item.typeName }}</view>
+                <view class="price">¥{{ item.showSalePrice }}</view>
+              </view>
+            </view>
           </view>
         </view>
 
@@ -114,6 +176,6 @@
       </view>
     </view>
   </view>
-
-  <service popShow="{{ showService }}" bind:changePop="changePop"></service>
+  <!-- 客服功能 -->
+  <service></service>
 </scroll-view>

miniprogram/pages/orders/order-detail.less

@@ -67,7 +67,8 @@ page {
       white-space: nowrap;
       overflow: hidden;
       font-weight: 600;
-      font-size: 28rpx;
+      font-size: 30rpx;
+      color: #131415;
       text-overflow: ellipsis;
       max-width: 310rpx;
     }
@@ -75,9 +76,18 @@ page {
       flex-shrink: 0;
       font-family: DINAlternate, DINAlternate;
       font-weight: bold;
-      font-size: 28rpx;
       color: #131415;
       line-height: 48rpx;
+
+      .stuff {
+        font-size: 28rpx;
+      }
+      .priceZ {
+        font-size: 40rpx;
+      }
+      .priceF {
+        font-size: 32rpx;
+      }
     }
   }
 
@@ -175,7 +185,7 @@ page {
     }
     .currentPrice {
       font-weight: bold;
-      color: #FE2451;
+      color: #FF0047;
       font-family: DINAlternate, DINAlternate;
       .stuff {
         font-size: 32rpx;
@@ -192,12 +202,12 @@ page {
   button {
     margin: 0 0 0 12rpx;
     width: auto;
-    background: linear-gradient( 270deg, #FF204B 0%, #FE5B71 100%);
-    border-radius: 78rpx;
+    background: linear-gradient( 90deg, #544F4A 0%, #302F2B 100%);
+    border-radius: 44rpx;
     padding: 22rpx 84rpx;
     font-weight: 500;
     font-size: 32rpx;
-    color: #FFFFFF;
+    color: #FBEAC9;
     line-height: 44rpx;
   }
 }

miniprogram/pages/orders/order-detail.wxml

@@ -1,15 +1,15 @@
 <!--pages/orders/order-detail.wxml-->
 <view class="container">
-  <navigation-bar title="订单详情"></navigation-bar>
+  <navigation-bar title="{{ statusList[status].title  }}"></navigation-bar>
 
   <scroll-view class="record-list" type="list" scroll-y bindscrolltolower="loadMore">
-    <view class="order-status">
+    <!-- <view class="order-status">
       <view class="status">
         <image src="{{ statusList[status].logo }}"></image>
         <text>{{ statusList[status].title }}</text>
       </view>
       <view class="tips">{{ statusList[status].content }}</view>
-    </view>
+    </view> -->
 
     <view class="order-content">
       <view class="item-content">
@@ -17,7 +17,12 @@
         <view class="goods-desc">
           <view class="goodsInfo">
             <view class="goods-name">{{ goodsInfo.name }}</view>
-            <view class="goods-price">¥ {{ goodsInfo.salePrice }}</view>
+            <view class="goods-price">
+              <text class="stuff">¥ </text>
+              <text class="priceZ">{{ goodsInfo.integerPart }}</text>
+              <text class="priceF">.{{ goodsInfo.decimalPart }}</text>
+              <!-- ¥ {{ goodsInfo.salePrice }} -->
+            </view>
           </view>
           <view class="goods-type">
             <view class="goods-card">{{ goodsInfo.typeName }}</view>
@@ -40,21 +45,15 @@
   </scroll-view>
 
   <view class="order-btn">
-    <view class="orders" bind:tap="onService">
-        <image src="./images/icon-service.png" />
-        <text>客服</text>
-      </view>
-    <view class="more">
       <view class="price">
-        <view class="desc">订单金额：</view>
+        <view class="desc">商品总价：</view>
         <view class="currentPrice">
-          <text class="stuff">¥</text>
+          <text class="stuff">¥ </text>
           <text class="priceZ">{{ goodsInfo.integerPart }}</text>
           <text class="priceF">.{{ goodsInfo.decimalPart }}</text>
         </view>
       </view>
       <button type="primary" bind:tap="onSubmit">{{ goodsInfo.orderNo ? '继续支付' : '立即支付' }}</button>
-    </view>
   </view>
 
   <service popShow="{{ showService }}" bind:changePop="changePop"></service>

miniprogram/pages/orders/order-result.less

@@ -3,7 +3,7 @@ page {
   height: 100vh;
   display: flex;
   flex-direction: column;
-  background: #F5F6F7;
+  background: #F4F4F4;
 }
 
 .order-status {
@@ -36,6 +36,13 @@ page {
 .order-content {
   margin: 24rpx 26rpx 0;
   border-radius: 20rpx;
+  display: flex;
+  flex-direction: column;
+  background-color: #FFFFFF;
+}
+.goods-content {
+  margin: 24rpx 26rpx 0;
+  border-radius: 20rpx;
   padding: 28rpx 24rpx;
   display: flex;
   flex-direction: column;
@@ -45,8 +52,8 @@ page {
   display: flex;
   width: 100%;
   .goods-icon {
-    width: 160rpx;
-    height: 160rpx;
+    width: 140rpx;
+    height: 140rpx;
     margin-right: 24rpx;
     flex-shrink: 0;
     border-radius: 6px;
@@ -68,9 +75,10 @@ page {
       white-space: nowrap;
       overflow: hidden;
       font-weight: 600;
-      font-size: 28rpx;
+      font-size: 30rpx;
+      color: #131415;
       text-overflow: ellipsis;
-      max-width: 310rpx;
+      max-width: 380rpx;
     }
     .goods-price {
       flex-shrink: 0;
@@ -88,11 +96,11 @@ page {
     align-items: center;
     padding-top: 12rpx;
     .goods-card {
-      background: #FEEDF0;
+      background: #FDF2E2;
       border-radius: 6rpx;
       font-size: 26rpx;
-      color: #FE2451;
-      line-height: 40rpx;
+      color: #502F00;
+      line-height: 36rpx;
       padding: 0 12rpx;
     }
     .goods-num {
@@ -104,27 +112,83 @@ page {
 
 }
 
+.qrcode-title {
+  padding: 40rpx 24rpx;
+  font-weight: 600;
+  font-size: 30rpx;
+  color: #131415;
+  line-height: 42rpx;
+}
+.qrcode-line {
+  position: relative;
+  background: linear-gradient(to right, transparent 50%, rgba(219, 219, 219, 1) 50%) repeat-x;  // 设置水平方向的线性渐变，透明与半透明色交替，模拟虚线线段
+  background-size: 10px 1px;  // 设置背景大小，控制虚线的线段长度和粗细，这里线段长度为10px，粗细为1px
+  height: 2rpx;  // 元素高度，可根据实际需求调整，用于展示虚线效果的高度范围
+  margin: 0 24rpx;
+  &::before, &::after {
+    content: '';
+    position: absolute;
+    top: -20rpx;
+    display: block;
+    width: 40rpx;
+    height: 40rpx;
+    background-color: #F4F4F4;
+    border-radius: 50%;
+  }
+  &::before {
+    left: -44rpx;
+  }
+  &::after {
+    right: -44rpx;
+  }
+}
 .qrcode-section {
-  margin-top: 28rpx;
-  border-top: 2rpx solid #F0F0F0;
-  padding-top: 60rpx;
+  margin-top: 20rpx;
   padding-bottom: 32rpx;
-  text-align: center;
+  padding: 0 24rpx 28rpx;
+  .qrcode-block {
+    display: flex;
+    margin-top: 20rpx;
+    background: #FBF5EE;
+    border-radius: 20rpx;
+    overflow: hidden;
+    .left-text {
+      padding: 0 18rpx 0 22rpx;
+      background: linear-gradient( 180deg, #544F4A 0%, #302F2B 100%);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      writing-mode: vertical-lr;
+      font-weight: 600;
+      font-size: 26rpx;
+      color: #FBEAC9;
+      line-height: 36rpx;
+      letter-spacing: 10rpx;
+    }
+  } 
   .qrcode-wrap {
-    margin: 0 auto;
-    border: 3rpx solid #EDEDED;
-    padding: 10rpx;
+    margin: 32rpx auto;
+    border: 2rpx solid #EDEDED;
+    padding: 6rpx;
+    border-radius: 8rpx;
     display: inline-block;
   }
   .my_draw_canvas {
-    width: 262rpx;
-    height: 262rpx;
+    width: 202rpx;
+    height: 202rpx;
   }
   .qrcode-text {
-    padding-top: 32rpx;
     font-size: 28rpx;
     color: #131415;
     line-height: 40rpx;
+    border-radius: 12rpx;
+    border: 2rpx solid #F2F2F2;
+    padding: 16rpx 24rpx;
+    text-align: left;
+    text {
+      color: #DDA64C;
+      font-weight: bold;
+    }
     &.used {
       color: #AAAAAA;
     }
@@ -134,29 +198,51 @@ page {
 .order-time {
   margin: 24rpx 26rpx 0;
   border-radius: 20rpx;
-  padding: 36rpx 24rpx;
+  // padding: 36rpx 24rpx;
   background-color: #FFFFFF;
 
   .order-item {
     display: flex;
     justify-content: space-between;
-    padding-bottom: 36rpx;
+    // padding-bottom: 36rpx;
+    padding: 36rpx 0;
+    margin: 0 24rpx;
+    border-bottom: 2rpx solid #F0F0F0;
+
     &:last-child {
-      padding-bottom: 0;
+      border-bottom: none;
     }
     .title {
-      font-size: 28rpx;
+      font-weight: 500;
+      font-size: 30rpx;
       color: #131415;
-      line-height: 40rpx;
+      line-height: 42rpx;
     }
     .value {
-      font-size: 28rpx;
+      font-size: 30rpx;
       color: #777777;
-      line-height: 40rpx;
-
+      line-height: 42rpx;
+      display: flex;
       &.red {
         color: #FE2451;
       }
+
+      .copy {
+        font-size: 30rpx;
+        color: #131415;
+        line-height: 42rpx;
+        display: flex;
+        align-items: center;
+
+        &::before {
+          content: '';
+          display: block;
+          width: 2rpx;
+          height: 22rpx;
+          background: #DCDCDC;
+          margin: 0 16rpx;
+        }
+      }
     }
   }
 }
@@ -218,12 +304,12 @@ page {
   button {
     margin: 0;
     width: 100%;
-    background: linear-gradient( 270deg, #FF204B 0%, #FE5B71 100%);
+    background: linear-gradient( 90deg, #544F4A 0%, #302F2B 100%);
     border-radius: 78rpx;
     padding: 22rpx 84rpx;
     font-weight: 500;
     font-size: 32rpx;
-    color: #FFFFFF;
+    color: #FBEAC9;
     line-height: 44rpx;
   }
 }
@@ -249,8 +335,7 @@ page {
     right: 0;
     bottom: 0;
     width: 100%;
-    background: linear-gradient( 180deg, #FFDEE7 0%, #FFFFFF 12%, #FFFFFF 100%);
-    background-color: #fff;
+    background: #F8F8F8;
     border-radius: 32rpx 32rpx 0rpx 0rpx;
     .icon-close {
       position: absolute;
@@ -262,41 +347,70 @@ page {
     .use-title {
       font-weight: 600;
       font-size: 36rpx;
-      color: #131415;
+      color: #000000;
       line-height: 50rpx;
       padding-top: 34rpx;
       padding-bottom: 30rpx;
       text-align: center;
     }
     .use-form {
-      margin: 0 40rpx;
-      background: #F7F8F9;
-      border-radius: 16rpx;
-      padding: 16rpx 16rpx 8rpx;
-      margin-bottom: 80rpx;
+      margin: 0 40rpx 0;
+      background: #FFFFFF;
+      border-radius: 20rpx;
+      padding: 22rpx 24rpx 24rpx 30rpx;
       textarea {
         height: 140rpx;
         font-size: 30rpx;
+        width: 100%;
+        &::placeholder {
+          color: #AAAAAA;
+        }
       }
       .num {
         text-align: right;
-        font-size: 26rpx;
+        font-size: 28rpx;
         color: #AAAAAA;
-        line-height: 42rpx;
+        line-height: 40rpx;
+      }
+    }
+    .use-form__input {
+      margin: 20rpx 40rpx 0;
+      background: #FFFFFF;
+      border-radius: 20rpx;
+      padding: 24rpx;
+      margin-bottom: 180rpx;
+      display: flex;
+      justify-content: space-between;
+      .title {
+        display: inline;
+        font-size: 30rpx;
+        color: #131415;
+        .red {
+          color: #F44541;
+        }
+        .sencd {
+          color: #AAAAAA;
+        }
+      }
+      input {
+        text-align: right;
+        font-size: 30rpx;
+        &::placeholder {
+          color: #AAAAAA;
+        }
       }
     }
-
     .btnSection {
       padding: 0 32rpx 58rpx;
       button {
         margin: 0;
         width: 100%;
-        background: linear-gradient( 270deg, #FF204B 0%, #FE5B71 100%);
+        background: linear-gradient( 90deg, #544F4A 0%, #302F2B 100%);
         border-radius: 78rpx;
         padding: 22rpx 84rpx;
         font-weight: 500;
         font-size: 32rpx;
-        color: #FFFFFF;
+        color: #FBEAC9;
         line-height: 44rpx;
       }
     }

miniprogram/pages/orders/order-result.ts

@@ -47,9 +47,9 @@ Page({
     orderNo: "" as string,
     showCanvas: false, // 是否显示二维码
     canvasImg: "" as string,
-    showService: false,
     refoundStatus: false,
-    refoundValue: "" // 退款内容
+    refoundValue: "", // 退款内容
+    refoundPhone: ''
   },
 
   /**
@@ -136,7 +136,7 @@ Page({
       YEAR: "年卡"
     }
     if(type === "YEAR" && num >= 99) {
-      return '终生卡'
+      return '永久卡'
     }
     return num + template[type]
   },
@@ -206,17 +206,6 @@ Page({
       clearTimeout(timer)
     }
   },
-  /** 客服 */
-  onService() {
-    this.setData({
-      showService: true
-    })
-  },
-  changePop(event: { detail: any }) {
-    this.setData({
-      showService: event.detail
-    })
-  },
   /** 申请退款 */
   async cancelRefound() {
     try {
@@ -224,9 +213,11 @@ Page({
       console.log(data, 'data')
       if(data.code == 200) {
         wx.showToast({ title: '取消退款成功', icon: 'none' })
-        wx.navigateBack({
-          delta: 1
-        })
+        setTimeout(() => {
+          wx.navigateBack({
+            delta: 1
+          })
+        }, 1000);
       } else {
         wx.showToast({ title: data.message, icon: 'none' })
       }
@@ -244,22 +235,35 @@ Page({
       refoundValue: e.detail.value
     })
   },
+  phoneInput(e: {detail: any}) {
+    this.setData({
+      refoundPhone: e.detail.value
+    })
+  },
   onRefoundClose() {
     this.setData({
       refoundStatus: false,
       refoundValue: ''
     })
   },
+  checkPhone(phone: string) {
+    const phoneRule =
+      /^((13[0-9])|(14(0|[5-7]|9))|(15([0-3]|[5-9]))|(16(2|[5-9]))|(17[0-8])|(18[0-9])|(19([0-3]|[5-9])))\d{8}$/;
+    return phoneRule.test(phone);
+  },
   async onRefound() {
-    console.log(this.data.refoundValue, 'value')
     const refoundValue = this.data.refoundValue
+    const refoundPhone = this.data.refoundPhone
     if(!refoundValue) {
       wx.showToast({ title: '请输入退款原因', icon: 'none' })
       return
     }
+    if(!this.checkPhone(refoundPhone)) {
+      wx.showToast({ title: '请输入正确的手机号码', icon: 'none' })
+      return
+    }
     try {
       const { goods, orderNo } = this.data.goodsInfo
-      console.log(this.data.goodsInfo, 'goodsInfo')
       const details: any = []
       goods.forEach((item: any) => {
         details.push({
@@ -273,20 +277,36 @@ Page({
         merOrderNo: orderNo,
         serviceCharge: false,
         refundReason: refoundValue,
+        phone: refoundPhone, // 手机号
         serviceChargeFee: 0,
         userRefundOrderDetails: details
       }
       const {data} = await api_userPaymentOrderRefundPayment(params)
       if(data.code == 200) {
         wx.showToast({ title: '申请成功', icon: 'none' })
+        this.setData({
+          refoundStatus: false
+        })
         setTimeout(() => {
           wx.navigateBack({
             delta: 1
           })
-        }, 2000);
+        }, 1000);
       } else {
         wx.showToast({ title: data.message, icon: 'none' })
       }
     } catch {}
+  },
+  onCopy(e: { currentTarget: any }) {
+    console.log(e, 'e')
+    wx.setClipboardData({
+      data: e.currentTarget.dataset.orderno,
+      success: () => {
+        wx.showToast({title: '复制成功', icon: 'none'})
+      },
+      fail: () => {
+        wx.showToast({title: '复制失败，请稍后再试', icon: 'none'})
+      }
+    })
   }
 })

miniprogram/pages/orders/order-result.wxml

@@ -1,17 +1,17 @@
 <!--pages/orders/order-detail.wxml-->
 <view class="container">
-  <navigation-bar title="订单详情"></navigation-bar>
+  <navigation-bar title="{{ statusList[status].title }}"></navigation-bar>
 
   <scroll-view class="record-list" type="list" scroll-y bindscrolltolower="loadMore">
-    <view class="order-status" wx:if="{{statusList[status]}}">
+    <!-- <view class="order-status" wx:if="{{statusList[status]}}">
       <view class="status">
         <image src="{{ statusList[status].logo }}"></image>
         <text>{{ statusList[status].title }}</text>
       </view>
       <view class="tips" wx:if="{{ statusList[status].content }}">{{ statusList[status].content }}</view>
-    </view>
+    </view> -->
 
-    <view class="order-content">
+    <view class="goods-content" wx:if="{{ goodsInfo.goods && goodsInfo.goods.length > 0 }}">
       <view class="item-content" wx:for="{{ goodsInfo.goods }}" wx:key="index">
         <image class='goods-icon' src="{{ item.goodsUrl }}" mode="" />
         <view class="goods-desc">
@@ -21,23 +21,19 @@
           </view>
           <view class="goods-type">
             <view class="goods-card">{{ item.typeName }}</view>
-            <view class="goods-num">x1</view>
+            <view class="goods-num">共 {{ item.goodsNum }} 件</view>
           </view>
         </view>
       </view>
-      <view class="qrcode-section" wx:if="{{ (goodsInfo.wechatStatus == 'PAID' || goodsInfo.wechatStatus == 'WAIT_USE') && showCanvas }}">
-        <view class="qrcode-wrap">
-          <canvas class='my_draw_canvas' data-type="image" canvas-id='canvasCode' id="canvasCode"></canvas>
-        </view>
-        <view class="qrcode-text" wx:if="{{goodsInfo.wechatStatus == 'WAIT_USE'}}">请扫描二维码激活使用</view>
-        <view class="qrcode-text used" wx:else>二维码已使用</view>
-      </view>
     </view>
 
     <view class="order-time">
       <view class="order-item">
-        <view class="title">订单号</view>
-        <view class="value">{{ goodsInfo.orderNo }}</view>
+        <view class="title">订单编号</view>
+        <view class="value">
+          {{ goodsInfo.orderNo }}
+          <view class="copy" bind:tap="onCopy" data-orderno="{{goodsInfo.orderNo}}">复制</view>
+        </view>
       </view>
       <view class="order-item">
         <view class="title">下单时间</view>
@@ -45,6 +41,21 @@
       </view>
     </view>
 
+    <view class="order-content" wx:if="{{ (goodsInfo.wechatStatus == 'PAID' || goodsInfo.wechatStatus == 'WAIT_USE') && showCanvas }}">
+      <view class="qrcode-title" >{{ goodsInfo.wechatStatus == 'WAIT_USE' ? '请扫码激活' : '激活码已使用' }}</view>
+      <view class="qrcode-line"></view>
+      <view class="qrcode-section">
+        <view class="qrcode-text" wx:if="{{goodsInfo.wechatStatus == 'WAIT_USE'}}">为了顺利使用，请<text>长按下方二维码</text>进行激活</view>
+        <view class="qrcode-text used" wx:else>登录「音乐数字课堂」APP，开启AI学练之旅～</view>
+        <view class="qrcode-block">
+          <view class="left-text">待使用</view>
+          <view class="qrcode-wrap">
+            <canvas class='my_draw_canvas' data-type="image" canvas-id='canvasCode' id="canvasCode"></canvas>
+          </view>
+        </view>
+      </view>
+    </view>
+
     <view class="order-time" wx:if="{{ goodsInfo.wechatStatus == 'REFUNDED' }}">
       <view class="order-item">
         <view class="title">{{ goodsInfo.wechatStatus == 'REFUNDED' ? '退款时间' : '申请退款时间' }}</view>
@@ -62,14 +73,10 @@
   </scroll-view>
 
   <view class="order-btn" wx:if="{{ goodsInfo.wechatStatus != 'WAIT_PAY' }}">
-    <view class="orders" bind:tap="onService">
-      <image src="./images/icon-service.png" />
-      <text>客服</text>
-    </view>
     <button type="primary" bind:tap="useRefound" wx:if="{{ goodsInfo.wechatStatus == 'WAIT_USE' }}">申请退款</button>
     <block wx:else>
       <button type="primary" bind:tap="cancelRefound" wx:if="{{ goodsInfo.wechatStatus == 'REFUNDING' }}">取消退款</button>
-      <button type="primary" wx:else bind:tap="onSubmit">再来一单</button>
+      <button type="primary" wx:else bind:tap="onSubmit">再次购买</button>
     </block>
   </view>
 
@@ -81,8 +88,12 @@
       <image bind:tap="onRefoundClose" class="icon-close" src="./images/icon-close.png"></image>
       <view class="use-title">选择退款原因</view>
       <view class="use-form">
-        <textarea placeholder="请输入您的退款原因" maxlength="50" bindinput="textareaInput" value="{{ refoundValue }}"></textarea>
-        <view class="num">{{ refoundValue.length }}/50</view>
+        <textarea placeholder="请输入您的退款原因" maxlength="100" bindinput="textareaInput" value="{{ refoundValue }}"></textarea>
+        <view class="num">{{ refoundValue.length }}/100</view>
+      </view>
+      <view class="use-form__input">
+        <view class="title"><text class="red">*</text>联系方式 <text class="sencd">(必填)</text></view>
+        <input placeholder="请输入手机号码" type="number" maxlength="11" bindinput="phoneInput" value="{{ refoundPhone }}"></input>
       </view>
       <view class="btnSection">
         <button type="primary" bind:tap="onRefound">申请退款</button>

miniprogram/pages/orders/orders.json

@@ -1,5 +1,6 @@
 {
   "usingComponents": {
-    "navigation-bar": "/components/navigation-bar/navigation-bar"
+    "navigation-bar": "/components/navigation-bar/navigation-bar",
+    "service": "/components/service/service"
   }
 }

miniprogram/pages/orders/orders.less

@@ -3,7 +3,7 @@ page {
   height: 100vh;
   display: flex;
   flex-direction: column;
-  background: #F5F6F7;
+  background: #F4F4F4;
 }
 
 .container {
@@ -43,13 +43,12 @@ page {
               content: "";
               position: absolute;
               left: 50%;
-              margin-left: -24rpx;
-              bottom: -8rpx;
+              margin-left: -17rpx;
+              bottom: -12rpx;
               z-index: -1;
-              width: 48rpx;
-              height: 8rpx;
-              background: linear-gradient( 90deg, #FF3C3C 0%, rgba(255,118,155,0.5) 100%);
-              border-radius: 72rpx 72rpx 0rpx 0rpx;
+              width: 34rpx;
+              height: 4rpx;
+              background: #534E49;
           }
       }
   }
@@ -69,14 +68,17 @@ page {
   background: #FFFFFF;
   border-radius: 20rpx;
   margin: 24rpx 26rpx 0;
-  padding: 28rpx 24rpx 32rpx;
+  padding: 24rpx 24rpx 20rpx;
 
   .item-top {
     display: flex;
     justify-content: space-between;
-    font-size: 28rpx;
+    font-weight: 600;
+    font-size: 30rpx;
     line-height: 48rpx;
-    padding-bottom: 12rpx;
+    padding-bottom: 24rpx;
+    border-bottom: 1px solid #F2F2F2;
+    margin-bottom: 24rpx;
     
     .item-mid {
       color: #131415;
@@ -87,7 +89,7 @@ page {
     }
 
     .red {
-      color: #FE2451;
+      color: #DDA64C;
     }
   }
 
@@ -95,8 +97,8 @@ page {
     display: flex;
 
     .goods-icon {
-      width: 160rpx;
-      height: 160rpx;
+      width: 140rpx;
+      height: 140rpx;
       margin-right: 24rpx;
       flex-shrink: 0;
       border-radius: 6px;
@@ -138,11 +140,11 @@ page {
       align-items: center;
       padding-top: 12rpx;
       .goods-card {
-        background: #FEEDF0;
+        background: #FDF2E2;
         border-radius: 6rpx;
         font-size: 26rpx;
-        color: #FE2451;
-        line-height: 40rpx;
+        color: #A76D1C;
+        line-height: 36rpx;
         padding: 0 12rpx;
       }
       .goods-num {
@@ -155,7 +157,7 @@ page {
   }
 
   .item-footer {
-    padding-top: 24rpx;
+    padding-top: 18rpx;
     display: flex;
     justify-content: space-between;
     align-items: center;
@@ -184,12 +186,13 @@ page {
       font-size: 28rpx;
       color: #333333;
       width: auto;
-      padding: 14rpx 32rpx;
+      padding: 10rpx 22rpx;
       line-height: 40rpx;
     }
     .sure {
-      background: #FE2451;
-      border-color: #FE2451;
+      background: linear-gradient( 90deg, #544F4A 0%, #302F2B 100%);
+      border-radius: 26rpx;
+      border: none;
       color: #FFFFFF;
     }
   }
@@ -206,8 +209,8 @@ page {
   color: #999999;
 
   image {
-    width: 436rpx;
-    height: 364rpx;
+    width: 408rpx;
+    height: 204rpx;
   }
 
   .empty-text {
@@ -215,6 +218,6 @@ page {
     color: #777777;
     line-height: 40rpx;
     text-align: center;
-    padding-top: 24rpx;
+    padding-top: 36rpx;
   }
 }

miniprogram/pages/orders/orders.ts

@@ -89,7 +89,7 @@ Page({
         openId: app.globalData.userInfo?.liteOpenid,
         page: currentPage,
         rows: this.data.rows,
-        wechatOrderStatus: tabIdx == 0 ? "" : tabIdx == 1 ? "WAIT_PAY" : tabIdx == 2 ? "WAIT_USE" : tabIdx == 3 ? "PAID" : tabIdx == 4 ? "CLOSED" : tabIdx == 5 ? 'REFUNDING' : "",
+        wechatOrderStatus: tabIdx == 0 ? "" : tabIdx == 1 ? "WAIT_PAY" : tabIdx == 2 ? "WAIT_USE" : tabIdx == 3 ? "PAID" : tabIdx == 4 ? "CLOSED" : tabIdx == 5 ? 'SALE_AFTER' : "",
       })
       if (data.code == 200) {
         const { rows, total } = data.data;
@@ -156,7 +156,7 @@ Page({
       YEAR: "年卡"
     }
     if(type === "YEAR" && num >= 99) {
-      return '终生卡'
+      return '永久卡'
     }
     return num + template[type]
   },

miniprogram/pages/orders/orders.wxml

@@ -31,7 +31,7 @@
             </view>
             <view class="item-footer">
               <view class="order-price">
-                订单金额：<text class="price">¥ {{item.amount}}</text>
+                <!-- 订单金额：<text class="price">¥ {{item.amount}}</text> -->
               </view>
               <button class="sure" type="primary" wx:if="{{ item.wechatStatus == 'WAIT_PAY' }}"  catch:tap="onPay" data-id="{{item.id}}">继续支付</button>
               <button type="primary" wx:else catch:tap="onOne" data-id="{{item.id}}">再来一单</button>
@@ -41,10 +41,13 @@
       </block>
       <block wx:else>
         <view class="empty-box">
-          <image src="https://oss.dayaedu.com/ktyq/1731839238916.png"></image>
+          <image src="https://oss.dayaedu.com/ktyq/1732182740363.png"></image>
           <view class="empty-text">暂无订单</view>
         </view>
       </block>
     </scroll-view>
   </view>
+
+  <!-- 客服 -->
+  <service></service>
 </view>