添加页面

src/state.ts

@@ -18,6 +18,7 @@ export const state = reactive({
     unionId: 0 // 是否已关联账号
   } as any, // 管乐团信息
   projectType: 'default' as 'default' | 'tenant', // 机构端，还是默认
+  payBackPath: '/tenant/',
   platformType: '' as 'STUDENT' | 'TEACHER',
   platformApi: '/api-student' as '/api-student' | '/api-teacher',
   version: '', // 版本号 例如: 1.0.0

src/tenant/exercise-record/echats.ts

@@ -0,0 +1,558 @@
+export const lineChartOption = {
+  tooltip: {
+    trigger: 'axis',
+    axisPointer: {
+      lineStyle: {
+        width: 2,
+        color: '#FFA3C2'
+      }
+    }
+  },
+  legend: {
+    show: false,
+    selected: {
+      //在这里设置默认展示就ok了
+      训练时长: true,
+      使用次数: true
+    }
+  },
+  xAxis: {
+    type: 'category',
+    boundaryGap: true,
+    axisLabel: {
+      show: true,
+      interval: 0
+    },
+    data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
+    // splitLine: {
+    //   show: true,
+    //   lineStyle: {
+    //     width: 2,
+    //     type: 'solid',
+    //     color: 'rgba(226,226,226,0.5)'
+    //   }
+    // }
+    // axisTick: {
+    //   show: false
+    // }
+  },
+  yAxis: [
+    {
+      type: 'value',
+      axisLabel: {
+        formatter: '{value}'
+      },
+      axisTick: {
+        show: false
+      },
+      splitArea: {
+        show: false,
+        areaStyle: {
+          color: ['rgba(255,255,255,0.2)']
+        }
+      },
+      minInterval: 1,
+      splitNumber: 5
+    }
+  ],
+  grid: {
+    left: '1%',
+    right: '1%',
+    top: '2  %',
+    bottom: 0,
+    containLabel: true
+  },
+  series: [
+    {
+      // smooth: true,
+      data: ['0.00', '0.00', '0.00', '0.00', '0.00', '0.00', '0.00'],
+      symbolSize: 10,
+      type: 'line',
+      name: '训练时长',
+      symbol: 'circle',
+      smooth: true,
+      itemStyle: {
+        color: '#FF7AA7',
+        borderColor: '#fff',
+        borderWidth: 3
+      },
+      lineStyle: {
+        width: 3 //设置线条粗细
+      },
+      areaStyle: {
+        color: {
+          type: 'linear',
+          x: 0,
+          y: 0,
+          x2: 0,
+          y2: 1,
+          colorStops: [
+            {
+              offset: 0,
+              color: 'rgba(255, 243, 246, 1)'
+              // 0% 处的颜色
+            },
+            {
+              offset: 1,
+              // 100% 处的颜色
+              color: 'rgba(255, 246, 248, 0)'
+            }
+          ]
+        }
+      },
+      emphasis: {
+        disabled: true
+      }
+    },
+    {
+      data: ['0.00', '0.00', '0.00', '0.00', '0.00', '0.00', '0.00'],
+      type: 'line',
+      name: '使用次数',
+      symbolSize: 10,
+      symbol: 'circle',
+      smooth: true,
+      itemStyle: {
+        color: '#3583FA',
+        borderColor: '#fff',
+        borderWidth: 3
+      },
+      lineStyle: {
+        width: 2 //设置线条粗细
+      },
+      areaStyle: {
+        color: {
+          type: 'linear',
+          x: 0,
+          y: 0,
+          x2: 0,
+          y2: 1,
+          colorStops: [
+            {
+              offset: 0,
+              color: 'rgba(212, 231, 255, 1)'
+              // 0% 处的颜色
+            },
+            {
+              offset: 1,
+              color: 'rgba(221, 235, 254, 0)' // 100% 处的颜色
+            }
+          ]
+        }
+      },
+      emphasis: {
+        disabled: true
+      }
+    }
+  ],
+  formatter: (item: any) => {
+    if (Array.isArray(item)) {
+      return [
+        item[0].axisValueLabel,
+        ...item.map(
+          (d: any, index: number) =>
+            `<br/>${
+              d.marker
+            }<span style="margin-top:10px;margin-left:5px;font-size: 13px;font-weight: 500;
+                  color: #333333;
+                  line-height: 18px;">${d.seriesName}: ${d.value}${
+              index === 0 ? '分钟' : '次'
+            } </span>`
+        )
+      ].join('')
+    } else {
+      return item
+    }
+  }
+  // dataZoom: [
+  //   {
+  //     type: 'slider',
+  //     start: 5,
+  //     end: 100,
+  //     filterMode: 'empty'
+  //   }
+  // ]
+}
+
+// export const lineChartOption = {
+//   legend: { show: false },
+//   emphasis: { lineStyle: { width: 2 } },
+//   xAxis: {
+//     boundaryGap: false,
+//     data: [
+//       '01月',
+//       '02月',
+//       '03月',
+//       '04月',
+//       '05月',
+//       '06月',
+//       '07月',
+//       '08月',
+//       '09月',
+//       '10月',
+//       '11月',
+//       '12月'
+//     ],
+//     type: 'category',
+//     axisLine: { lineStyle: { color: '#8C8C8C' } }
+//   },
+//   color: [
+//     '#5B8FF9',
+//     '#2DC7AA',
+//     '#91DD1C',
+//     '#FFA92C',
+//     '#BE7E2E',
+//     '#1C96DD',
+//     '#D22CFF',
+//     '#FF3C3C',
+//     '#1AEE3E',
+//     '#00c9ff',
+//     '#7c47ff'
+//   ],
+//   series: [
+//     {
+//       lineStyle: { width: 1 },
+//       data: [
+//         '0.00',
+//         '0.00',
+//         '0.00',
+//         '0.00',
+//         '0.00',
+//         '0.00',
+//         '0.00',
+//         '0.00',
+//         '0.00',
+//         '0.00',
+//         '0.00',
+//         '0.00'
+//       ],
+//       symbol: 'circle',
+//       name: '陪练课',
+//       type: 'line',
+//       emphasis: { lineStyle: { width: 1 } }
+//     },
+//     {
+//       lineStyle: { width: 1 },
+//       data: [
+//         '0.00',
+//         '0.00',
+//         '0.00',
+//         '0.00',
+//         '0.00',
+//         '0.00',
+//         '0.00',
+//         '0.00',
+//         '0.00',
+//         '0.00',
+//         '0.00',
+//         '0.00'
+//       ],
+//       symbol: 'circle',
+//       name: '直播课',
+//       type: 'line',
+//       emphasis: { lineStyle: { width: 1 } }
+//     },
+//     {
+//       lineStyle: { width: 1 },
+//       data: [
+//         '0.00',
+//         '0.00',
+//         '0.00',
+//         '0.00',
+//         '0.00',
+//         '0.00',
+//         '0.00',
+//         '0.00',
+//         '0.00',
+//         '0.00',
+//         '0.00',
+//         '0.00'
+//       ],
+//       symbol: 'circle',
+//       name: '视频课',
+//       type: 'line',
+//       emphasis: { lineStyle: { width: 1 } }
+//     },
+//     {
+//       lineStyle: { width: 1 },
+//       data: [
+//         '0.00',
+//         '0.00',
+//         '0.00',
+//         '0.00',
+//         '0.00',
+//         '0.00',
+//         '0.00',
+//         '0.00',
+//         '0.00',
+//         '0.00',
+//         '0.00',
+//         '0.00'
+//       ],
+//       symbol: 'circle',
+//       name: '乐谱',
+//       type: 'line',
+//       emphasis: { lineStyle: { width: 1 } }
+//     },
+//     {
+//       lineStyle: { width: 1 },
+//       data: [
+//         '0.00',
+//         '0.00',
+//         '0.00',
+//         '0.00',
+//         '0.00',
+//         '0.00',
+//         '0.00',
+//         '0.00',
+//         '0.00',
+//         '0.00',
+//         '0.00',
+//         '0.00'
+//       ],
+//       symbol: 'circle',
+//       name: '小酷Ai推广',
+//       type: 'line',
+//       emphasis: { lineStyle: { width: 1 } }
+//     },
+//     {
+//       lineStyle: { width: 1 },
+//       data: [
+//         '0.00',
+//         '0.00',
+//         '0.00',
+//         '0.00',
+//         '0.00',
+//         '0.00',
+//         '0.00',
+//         '0.00',
+//         '0.00',
+//         '0.00',
+//         '0.00',
+//         '0.00'
+//       ],
+//       symbol: 'circle',
+//       name: '直播课推荐',
+//       type: 'line',
+//       emphasis: { lineStyle: { width: 1 } }
+//     },
+//     {
+//       lineStyle: { width: 1 },
+//       data: [
+//         '0.00',
+//         '0.00',
+//         '0.00',
+//         '0.00',
+//         '0.00',
+//         '0.00',
+//         '0.00',
+//         '0.00',
+//         '0.00',
+//         '0.00',
+//         '0.00',
+//         '0.00'
+//       ],
+//       symbol: 'circle',
+//       name: '视频课推荐',
+//       type: 'line',
+//       emphasis: { lineStyle: { width: 1 } }
+//     },
+//     {
+//       lineStyle: { width: 1 },
+//       data: [
+//         '0.00',
+//         '0.00',
+//         '0.00',
+//         '0.00',
+//         '0.00',
+//         '0.00',
+//         '0.00',
+//         '0.00',
+//         '0.00',
+//         '0.00',
+//         '0.00',
+//         '0.00'
+//       ],
+//       symbol: 'circle',
+//       name: '商品推荐',
+//       type: 'line',
+//       emphasis: { lineStyle: { width: 1 } }
+//     },
+//     {
+//       lineStyle: { width: 1 },
+//       data: [
+//         '0.00',
+//         '0.00',
+//         '0.00',
+//         '0.00',
+//         '0.00',
+//         '0.00',
+//         '0.00',
+//         '0.00',
+//         '0.00',
+//         '0.00',
+//         '0.00',
+//         '0.00'
+//       ],
+//       symbol: 'circle',
+//       name: '乐谱推荐',
+//       type: 'line',
+//       emphasis: { lineStyle: { width: 1 } }
+//     },
+//     {
+//       lineStyle: { width: 1 },
+//       data: [
+//         '0.00',
+//         '0.00',
+//         '0.00',
+//         '0.00',
+//         '0.00',
+//         '0.00',
+//         '0.00',
+//         '0.00',
+//         '0.00',
+//         '0.00',
+//         '0.00',
+//         '0.00'
+//       ],
+//       symbol: 'circle',
+//       name: '专辑推荐',
+//       type: 'line',
+//       emphasis: { lineStyle: { width: 1 } }
+//     },
+//     {
+//       lineStyle: { width: 1 },
+//       data: [
+//         '0.00',
+//         '0.00',
+//         '0.00',
+//         '0.00',
+//         '0.00',
+//         '0.00',
+//         '0.00',
+//         '0.00',
+//         '0.00',
+//         '0.00',
+//         '0.00',
+//         '0.00'
+//       ],
+//       symbol: 'circle',
+//       name: '活动报名',
+//       type: 'line',
+//       emphasis: { lineStyle: { width: 1 } }
+//     }
+//   ],
+//   title: { show: false },
+//   grid: {
+//     bottom: '3%',
+//     containLabel: true,
+//     left: '3%',
+//     right: '5%',
+//     top: '7%'
+//   },
+//   tooltip: {
+//     trigger: 'axis',
+//     confine: true
+//     // position: function (point, params, dom, rect, size) {
+//     //   // 鼠标坐标和提示框位置的参考坐标系是：以外层div的左上角那一点为原点，x轴向右，y轴向下
+//     //   // 提示框位置
+//     //   var x = 0 // x坐标位置
+//     //   var y = 0 // y坐标位置
+
+//     //   // 当前鼠标位置
+//     //   var pointX = point[0]
+//     //   var pointY = point[1]
+
+//     //   // 外层div大小
+//     //   // var viewWidth = size.viewSize[0];
+//     //   // var viewHeight = size.viewSize[1];
+
+//     //   // 提示框大小
+//     //   var boxWidth = size.contentSize[0]
+//     //   var boxHeight = size.contentSize[1]
+
+//     //   // boxWidth > pointX 说明鼠标左边放不下提示框 --- 情况
+//     //   if (boxWidth > pointX) {
+//     //     x = 5 // 自己定个x坐标值，以防出屏
+//     //     y -= 15 // 防止点被覆盖住，可根据情况自行调节
+//     //   } else {
+//     //     // 左边放的下
+//     //     x = pointX - boxWidth - 15
+//     //   }
+
+//     //   // boxHeight > pointY 说明鼠标上边放不下提示框 --- 情况
+//     //   if (boxHeight + 20 > pointY) {
+//     //     y = pointY + 15
+//     //   } else if (boxHeight > pointY) {
+//     //     y = 5
+//     //   } else {
+//     //     // 上边放得下
+//     //     y += pointY - boxHeight
+//     //   }
+//     //   //return [x, y]
+//     //   return [x, '20%'] //这里采用固定y轴 x轴随鼠标位置变化
+//     //   // return [point[0], '10%']
+//     // }
+//   },
+//   yAxis: {
+//     type: 'value',
+//     splitLine: {
+//       axisLine: { lineStyle: { color: '#8C8C8C' } },
+//       lineStyle: { color: ['#E2E2E2'] }
+//     }
+//   },
+//   dataZoom: [{ type: 'inside', throttle: 100 }],
+//   toolbox: { feature: { saveAsImage: { show: false } } }
+// }
+
+export const pieChartOption = {
+  tooltip: {
+    position: ['30%', '30%'],
+    trigger: 'item',
+    padding: 3,
+    textStyle: { fontSize: 12 },
+    borderWidth: 0,
+    formatter: '{b} : {c} ({d}%)'
+  },
+  series: [
+    {
+      avoidLabelOverlap: false,
+      label: { show: false },
+      data: [
+        { name: '陪练课', value: '0.00' },
+        { name: '直播课', value: '0.00' },
+        { name: '视频课', value: '0.00' },
+        { name: '乐谱', value: '0.00' },
+        { name: '小酷Ai推广', value: '0.00' },
+        { name: '直播课推荐', value: '0.00' },
+        { name: '视频课推荐', value: '0.00' },
+        { name: '商品推荐', value: '0.00' },
+        { name: '乐谱推荐', value: '0.00' },
+        { name: '专辑推荐', value: '0.00' },
+        { name: '活动报名', value: '0.00' }
+      ],
+      type: 'pie',
+      radius: ['50%', '80%']
+    }
+  ],
+  grid: {
+    bottom: '0%',
+    containLabel: true,
+    left: '0%',
+    right: '0%',
+    top: '0%'
+  },
+  toolbox: { feature: { saveAsImage: { show: false } } },
+  color: [
+    '#5B8FF9',
+    '#2DC7AA',
+    '#91DD1C',
+    '#FFA92C',
+    '#BE7E2E',
+    '#1C96DD',
+    '#D22CFF',
+    '#FF3C3C',
+    '#1AEE3E',
+    '#00c9ff',
+    '#7c47ff'
+  ]
+}

src/tenant/exercise-record/exercis-detail.module.less

@@ -20,82 +20,137 @@
   }
 }
 
-.topWrap {
-  :global {
-    .van-sticky {
-      background: url('../images/bg-image.png') no-repeat top center;
-      background-size: 100% 214px;
-    }
+.userMember {
+  background-color: transparent;
+  width: auto;
+  padding: 0;
+  // border-radius: 10px;
+  padding: 18px;
+
+
+  .level {
+    width: 44px;
+    height: 17px;
   }
 
+  .userImgSection {
+    position: relative;
+    padding: 3px;
+    background: #fff;
+    margin-right: 12px;
+    border-radius: 50%;
 
+    &::before {
+      content: ' ';
+      position: absolute;
+      left: 1px;
+      top: 1px;
+      bottom: 1px;
+      right: 1px;
+      background-color: #fff;
+      border-radius: 50%;
+    }
+  }
 
-  .userMember {
-    background-color: transparent;
-    width: auto;
-    padding: 0;
-    // border-radius: 10px;
-    padding: 18px 12px 30px 26px;
+  .userImg {
+    width: 46px;
+    height: 46px;
+    border-radius: 50%;
+    vertical-align: middle;
+    overflow: hidden;
+  }
 
+  .userInfo {
+    display: flex;
+    align-items: center;
+    color: #fff;
+    padding-bottom: 5px;
 
-    .level {
-      width: 44px;
-      height: 17px;
+    .name {
+      padding-right: 5px;
+      max-width: 100px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      font-size: 18px;
+      font-weight: 600;
+      color: #742626;
     }
+  }
 
-    .userImgSection {
-      position: relative;
-      padding: 3px;
-      background: #fff;
-      margin-right: 12px;
-      border-radius: 50%;
+  .timeRemaining {
+    margin-top: 0;
+    font-size: 14px;
+    color: #c0c0c0;
+  }
 
-      &::before {
-        content: ' ';
-        position: absolute;
-        left: 1px;
-        top: 1px;
-        bottom: 1px;
-        right: 1px;
-        background-color: #fff;
-        border-radius: 50%;
-      }
-    }
+  .subjectTag {
+    font-size: 12px;
+    font-weight: 500;
+    color: #FE2451;
+    padding: 1px 7px;
+    background: rgba(255, 255, 255, 0.3);
+    border-radius: 20px;
+    border: 1px solid #FFFFFF;
+    display: inline-flex;
+    align-items: center;
+    line-height: 1;
 
-    .userImg {
-      width: 46px;
-      height: 46px;
-      border-radius: 50%;
-      vertical-align: middle;
-      overflow: hidden;
+    .iconSubject {
+      width: 13px;
+      height: 13px;
+      margin-right: 4px;
     }
+  }
+}
 
-    .userInfo {
-      padding-top: 4px;
-      display: flex;
-      align-items: center;
-      color: #fff;
-      padding-bottom: 5px;
-
-      .name {
-        padding-right: 5px;
-        max-width: 100px;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-        font-size: 18px;
-        font-weight: 600;
-        color: #742626;
+.itemBottom {
+  margin: 0 13px 15px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-around;
+  text-align: center;
+  background-color: #fff;
+  border-radius: 10px;
+  padding: 20px 0;
+
+  .itemBottomDot {
+    width: 25%;
+
+    .dotMain {
+      font-size: 24px;
+      color: #333333;
+      line-height: 30px;
+      margin-bottom: 4px;
+      font-family: DINAlternate-Bold, DINAlternate;
+      font-weight: bold;
+
+      span {
+        margin-left: 1px;
+        font-size: 12px;
+        font-weight: 400;
+        color: #333333;
+        line-height: 17px;
       }
     }
 
-    .timeRemaining {
-      margin-top: 0;
-      font-size: 14px;
-      color: #c0c0c0;
+    .dotSub {
+      font-size: 12px;
+      font-weight: 400;
+      color: #777777;
+      line-height: 17px;
     }
   }
+}
 
+.topWrap {
+  :global {
+    .van-sticky {
+      background: url('../images/bg-image.png') no-repeat top center;
+      background-size: 100% 214px;
+    }
+  }
 
   .topInfoRight {
     // width: 50%;
@@ -162,4 +217,87 @@
     }
   }
 
+}
+
+.trainWeek {
+  margin: 15px 13px 12px;
+  min-height: 267px;
+  background-color: #fff;
+  border-radius: 10px;
+  padding: 20px 15px;
+
+  .exerciseWeek {
+    height: 200px;
+  }
+
+  .TrainDataTopRight {
+    display: flex;
+    align-items: center;
+    margin-bottom: 18px;
+  }
+
+  .DataTopRightItem {
+    display: flex;
+    align-items: center;
+    font-size: 13px;
+    color: #777777;
+    line-height: 1;
+
+    &:first-child {
+      margin-right: 20px;
+
+      .DataTopRightDot {
+        background-color: #FF7AA7;
+      }
+    }
+
+    &:last-child {
+      .DataTopRightDot {
+        background-color: #3583FA;
+      }
+    }
+
+    &.DataTopRightItemDis {
+      .DataTopRightDot {
+        background-color: #e8e8e8 !important
+      }
+    }
+
+    .DataTopRightDot {
+      width: 12px;
+      height: 12px;
+      border-radius: 2px;
+      background-color: #ccc;
+      margin-right: 4px;
+    }
+  }
+
+  .trainTitle {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding-bottom: 16px;
+
+    img {
+      width: 64px;
+      height: 15px;
+    }
+
+    .timeRange {
+      display: flex;
+      align-items: center;
+      font-size: 14px;
+      color: #131415;
+
+
+      .iconArrow {
+        display: inline-block;
+        width: 9px;
+        height: 5px;
+        margin-left: 3px;
+        background: url('./images/icon-arrow.png') no-repeat center;
+        background-size: contain;
+      }
+    }
+  }
 }

src/tenant/exercise-record/exercis-detail.tsx

@@ -4,7 +4,15 @@ dayjs.extend(isBetween)
 import { List, Image, Calendar, Cell } from 'vant'
 import OFullRefresh from '@/components/the-full-refresh'
 import DetailItem from './modals/detail-item'
-import { defineComponent, onMounted, reactive, ref, computed } from 'vue'
+import {
+  defineComponent,
+  onMounted,
+  reactive,
+  ref,
+  computed,
+  markRaw,
+  nextTick
+} from 'vue'
 import { useRoute } from 'vue-router'
 import styles from './exercis-detail.module.less'
 import request from '@/helpers/request'
@@ -16,6 +24,66 @@ import bgImg from '../images/bg-image.png'
 import iconStudent from '@common/images/icon_student.png'
 import iconLogo from '../member-center/images/icon-logo-default.png'
 import iconLogoActive from '../member-center/images/icon-logo.png'
+import iconSubject from './images/icon-subject.png'
+import iconTrainTitle from './images/train-title.png'
+
+import * as echarts from 'echarts/core'
+import {
+  BarChart,
+  // 系列类型的定义后缀都为 SeriesOption
+  BarSeriesOption,
+  LineChart,
+  LineSeriesOption
+} from 'echarts/charts'
+import { PieChart } from 'echarts/charts'
+import {
+  TitleComponent,
+  // 组件类型的定义后缀都为 ComponentOption
+  TitleComponentOption,
+  TooltipComponent,
+  TooltipComponentOption,
+  GridComponent,
+  GridComponentOption,
+  // 数据集组件
+  DatasetComponent,
+  DatasetComponentOption,
+  // 内置数据转换器组件 (filter, sort)
+  TransformComponent,
+  LegendComponent,
+  ToolboxComponent,
+  DataZoomComponent
+} from 'echarts/components'
+import { LabelLayout, UniversalTransition } from 'echarts/features'
+import { CanvasRenderer } from 'echarts/renderers'
+import { lineChartOption } from './echats'
+
+// 通过 ComposeOption 来组合出一个只有必须组件和图表的 Option 类型
+type ECOption = echarts.ComposeOption<
+  | BarSeriesOption
+  | LineSeriesOption
+  | TitleComponentOption
+  | TooltipComponentOption
+  | GridComponentOption
+  | DatasetComponentOption
+>
+
+// 注册必须的组件
+echarts.use([
+  TitleComponent,
+  TooltipComponent,
+  GridComponent,
+  DatasetComponent,
+  TransformComponent,
+  BarChart,
+  LabelLayout,
+  UniversalTransition,
+  CanvasRenderer,
+  PieChart,
+  ToolboxComponent,
+  LegendComponent,
+  DataZoomComponent,
+  LineChart
+])
 
 export default defineComponent({
   name: 'exercis-detail',
@@ -32,8 +100,15 @@ export default defineComponent({
         trainDays: 0,
         trainNum: 0,
         trainTime: 0
-      }
+      },
+      userTrainChartData: [] as any,
+      myChart: null as any
     })
+    const qualifiedFlag = ref(true)
+    const unqualifiedFlag = ref(true)
+
+    // const chartRef = ref<HTMLDivElement | null>(null)
+    // const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>)
 
     const userInfo = computed(() => {
       const users = baseState.user.data
@@ -50,7 +125,8 @@ export default defineComponent({
     })
     const forms = reactive({
       practiceMonth: dayjs().day(1).format('YYYYMMDD'),
-      startTime: '2023-09',
+      // startTime: dayjs().day(1).format('YYYYMMDD'),
+      startTime: dayjs().day(1).format('YYYY-MM'),
       endTime: dayjs().day(7).format('YYYY-MM-DD'),
       page: 1,
       rows: 20
@@ -85,7 +161,7 @@ export default defineComponent({
         if (list.value.length > 0 && data.detail.pageNo === 1) {
           return
         }
-
+        state.userTrainChartData = data.userTrainChartData || []
         list.value = list.value.concat(data.detail.rows || [])
         forms.page = data.detail.pageNo + 1
         showContact.value = list.value.length > 0
@@ -96,21 +172,39 @@ export default defineComponent({
         finished.value = true
       }
       state.isClick = false
-    }
 
-    onMounted(async () => {
-      await getList()
-    })
+      if (showContact.value) {
+        nextTick(() => {
+          if (document.getElementById('exerciseWeek')) {
+            state.myChart = markRaw(
+              echarts.init(
+                document.getElementById('exerciseWeek') as HTMLDivElement
+              )
+            )
 
-    const checkTimer = (val: any) => {
-      // forms.practiceMonth = val.selectedValues[0] + val.selectedValues[1]
-      // state.practiceMonthName =
-      //   val.selectedValues[0] + '年' + val.selectedValues[1] + '月'
-      state.showPopoverTime = false
-      refreshing.value = true
-      getList()
-    }
+            const cloudTime: any = []
+            const cloudNum: any = []
+            state.userTrainChartData.forEach((data: any) => {
+              const indexData = data.indexMonthData || []
+              if (data.dataType === 'CLOUD_STUDY_TRAIN_TIME') {
+                indexData.forEach((d: any) => {
+                  cloudTime.push(d.totalNum)
+                })
+              } else if (data.dataType === 'CLOUD_STUDY_TRAIN_NUM') {
+                indexData.forEach((d: any) => {
+                  cloudNum.push(d.totalNum)
+                })
+              }
+            })
+            lineChartOption.series[0].data = cloudTime
+            lineChartOption.series[1].data = cloudNum
 
+            state.myChart.clear()
+            state.myChart.setOption(lineChartOption)
+          }
+        })
+      }
+    }
     const onRefresh = () => {
       finished.value = false
       // 重新加载数据
@@ -119,6 +213,10 @@ export default defineComponent({
       getList()
     }
 
+    onMounted(async () => {
+      await getList()
+    })
+
     return () => (
       <div class={[styles.exercisContainer]}>
         <div class={styles.topWrap}>
@@ -131,6 +229,7 @@ export default defineComponent({
             <Cell
               class={styles.userMember}
               labelClass={styles.timeRemaining}
+              border={false}
               v-slots={{
                 icon: () => (
                   <div class={styles.userImgSection}>
@@ -150,64 +249,115 @@ export default defineComponent({
                     />
                   </div>
                 ),
-                label: () => <div class={styles.subjectName}></div>
+                label: () => (
+                  <div class={styles.subjectName}>
+                    <span class={styles.subjectTag}>
+                      <img src={iconSubject} class={styles.iconSubject} />
+                      口风琴
+                    </span>
+                  </div>
+                )
               }}
             ></Cell>
+
+            <div class={styles.itemBottom}>
+              <div class={styles.itemBottomDot}>
+                <p class={styles.dotMain}>
+                  {state.userTrainOverView.trainTime || 0}
+                  <span>分钟</span>{' '}
+                </p>
+                <p class={styles.dotSub}> 累计练习时长</p>
+              </div>
+              <div class={styles.itemBottomDot}>
+                <p class={styles.dotMain}>
+                  {state.userTrainOverView.trainDays || 0}
+                  <span>天</span>{' '}
+                </p>
+                <p class={styles.dotSub}>累计练习天数 </p>
+              </div>
+              <div class={styles.itemBottomDot}>
+                <p class={styles.dotMain}>
+                  {state.userTrainOverView.trainTime || 0}
+                  <span>分钟</span>{' '}
+                </p>
+                <p class={styles.dotSub}>平均训练时长 </p>
+              </div>
+              <div class={styles.itemBottomDot}>
+                <p class={styles.dotMain}>
+                  {state.userTrainOverView.trainNum || 0}
+                  <span>次</span>{' '}
+                </p>
+                <p class={styles.dotSub}>平均训练次数 </p>
+              </div>
+            </div>
           </TheSticky>
         </div>
         <img class={styles.bgImg} src={bgImg} />
-        {/* <div class={styles.topInfoRight}>
-            <div class={styles.infoDay}>
-              <p class={styles.infoDayMain}>
-                {infoDetail.value.practiceDays
-                  ? infoDetail.value.practiceDays
-                  : 0}
-              </p>
-              <p class={styles.infoDaysub}>
-                <img src={iconDays} />
-                练习天数(天)
-              </p>
-            </div>
-            <div class={styles.infoTime}>
-              <p class={styles.infoDayMain}>
-                {infoDetail.value.practiceTimes
-                  ? Math.floor(infoDetail.value.practiceTimes / 60)
-                  : 0}
 
-              </p>
-              <p class={styles.infoDaysub}>
-                <img src={iconClock} />
-                练习时长(分钟)
-              </p>
-            </div>
-          </div> */}
-        {/* <CellGroup inset>
-            <Cell
-              class={styles.select}
-              center
-              isLink
-              onClick={() => (state.showPopoverTime = true)}
-            >
-              {{
-                // icon: () => <img class={styles.icon} src={iconData} />,
-                title: () => (
-                  <div class="van-ellipsis">{state.practiceMonthName}</div>
-                )
-              }}
-            </Cell>
-          </CellGroup>
-         */}
         {showContact.value ? (
           <OFullRefresh
             v-model:modelValue={refreshing.value}
             onRefresh={onRefresh}
             style={{ minHeight: `calc(100vh - var(--header-height))` }}
           >
+            <div class={styles.trainWeek}>
+              <div class={styles.trainTitle}>
+                <img src={iconTrainTitle} />
+
+                <span
+                  class={styles.timeRange}
+                  onClick={() => (state.showPopoverTime = true)}
+                >
+                  {dayjs(forms.practiceMonth).format('YYYY-MM-DD')}至
+                  {dayjs(forms.endTime).format('YYYY-MM-DD')}
+                  <i class={styles.iconArrow}></i>
+                </span>
+              </div>
+              <div class={styles.TrainDataTopRight}>
+                <div
+                  onClick={() => {
+                    qualifiedFlag.value = !qualifiedFlag.value
+                    lineChartOption.legend.selected['训练时长'] =
+                      qualifiedFlag.value
+                    state.myChart.setOption(lineChartOption)
+                  }}
+                  class={[
+                    styles.DataTopRightItem,
+                    qualifiedFlag.value ? '' : styles.DataTopRightItemDis
+                  ]}
+                >
+                  <div class={styles.DataTopRightDot}></div>
+                  <p>训练时长</p>
+                </div>
+                <div
+                  onClick={() => {
+                    unqualifiedFlag.value = !unqualifiedFlag.value
+                    lineChartOption.legend.selected['使用次数'] =
+                      unqualifiedFlag.value
+                    state.myChart.setOption(lineChartOption)
+                  }}
+                  class={[
+                    styles.DataTopRightItem,
+                    unqualifiedFlag.value ? '' : styles.DataTopRightItemDis
+                  ]}
+                >
+                  <div class={[styles.DataTopRightDot, styles.red]}></div>
+                  <p>使用次数</p>
+                </div>
+              </div>
+              <div
+                id="exerciseWeek"
+                class={styles.exerciseWeek}
+                // style={{ height: payForm.height, width: payForm.width }}
+              ></div>
+            </div>
+
             <List
               loading-text=" "
               finished={finished.value}
               finished-text=" "
               onLoad={getList}
+              style={{ overflow: 'hidden' }}
             >
               {list.value.map((item: any) => (
                 <DetailItem item={item} />
@@ -273,6 +423,8 @@ export default defineComponent({
               }
             }
             state.showPopoverTime = false
+            refreshing.value = true
+            getList()
           }}
         />
       </div>

src/tenant/exercise-record/modals/detail-item.module.less

@@ -14,18 +14,34 @@
 
     .itemTopLeft {
       .itemTopMain {
-        height: 22px;
-        font-size: 16px;
-        font-weight: 500;
-        color: #333333;
-        line-height: 22px;
+        display: flex;
+        align-items: center;
         margin-bottom: 6px;
-        max-width: 160px;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
+
+        span {
+          display: inline-block;
+          height: 22px;
+          font-size: 16px;
+          font-weight: 500;
+          color: #333333;
+          line-height: 22px;
+
+          max-width: 150px;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+
+        .iconPlay {
+          margin-top: -1px;
+          font-size: 20px;
+          width: 20px;
+          height: 20px;
+          margin-left: 6px;
+        }
       }
 
+
       .itemTopSub {
         font-size: 12px !important;
         font-weight: 400;

src/tenant/exercise-record/modals/detail-item.tsx

@@ -1,12 +1,13 @@
-import { defineComponent } from 'vue';
-import styles from './detail-item.module.less';
-import { postMessage } from '@/helpers/native-message';
-import { Icon } from 'vant';
-import Image1 from '../images/Image1.png';
-import Image2 from '../images/Image2.png';
-import Image3 from '../images/Image3.png';
-import Image4 from '../images/Image4.png';
-import Image5 from '../images/Image5.png';
+import { defineComponent } from 'vue'
+import styles from './detail-item.module.less'
+import { postMessage } from '@/helpers/native-message'
+import { Icon } from 'vant'
+import Image1 from '../images/Image1.png'
+import Image2 from '../images/Image2.png'
+import Image3 from '../images/Image3.png'
+import Image4 from '../images/Image4.png'
+import Image5 from '../images/Image5.png'
+import iconPlay from '../images/icon-play.png'
 
 const scoreInfos: any = {
   1: {
@@ -34,7 +35,7 @@ const scoreInfos: any = {
     tips: '你的演奏非常不错，音准的把握和节奏稍有瑕疵，完整性把握的很好~',
     mome: '你很棒'
   }
-};
+}
 export default defineComponent({
   props: ['item'],
   name: 'detail-item',
@@ -42,41 +43,48 @@ export default defineComponent({
   setup(props) {
     const getLeveByScoreId = (score?: number) => {
       if (!score && typeof score !== 'number') {
-        return {};
+        return {}
       }
-      let leve: any = 1;
+      let leve: any = 1
       if (score > 20 && score <= 40) {
-        leve = 2;
+        leve = 2
       } else if (score > 40 && score <= 60) {
-        leve = 3;
+        leve = 3
       } else if (score > 60 && score <= 80) {
-        leve = 4;
+        leve = 4
       } else if (score > 80) {
-        leve = 5;
+        leve = 5
       }
-      return leve;
-    };
+      return leve
+    }
     const gotoDetail = () => {
-      const url =
-        window.location.origin +
-        `/instrument/#/evaluat-report?id=${props.item.id}`;
-      // const url = `https://test.lexiaoya.cn/instrument/#/evaluat-report?id=${props.item.id}`;
+      const behaviorId = +new Date()
       postMessage({
-        api: 'openWebView',
+        api: 'openAccompanyWebView',
         content: {
-          url: url,
+          url:
+            location.origin +
+            '/accompany/colexiu-report.html?id=' +
+            props.item.id +
+            '&behaviorId=' +
+            behaviorId,
           orientation: 0,
           isHideTitle: true,
           statusBarTextColor: false,
           isOpenLight: true
         }
-      });
-    };
+      })
+    }
     return () => (
       <div class={styles.itemWrap} onClick={gotoDetail}>
         <div class={styles.itemTop}>
           <div class={styles.itemTopLeft}>
-            <p class={styles.itemTopMain}>{props.item.musicSheetName}</p>
+            <p class={styles.itemTopMain}>
+              <span>{props.item.sysMusicScoreName}</span>
+              {props.item.videoFilePath && (
+                <Icon class={styles.iconPlay} name={iconPlay} />
+              )}
+            </p>
             <p class={styles.itemTopSub}>{props.item.createTime}</p>
           </div>
           <div class={styles.itemTopRight}>
@@ -120,6 +128,6 @@ export default defineComponent({
           </div>
         </div>
       </div>
-    );
+    )
   }
-});
+})

src/tenant/music/album/index.module.less

@@ -6,7 +6,7 @@
 }
 
 .headerImg {
-  position: fixed;
+  position: fixed !important;
   left: 0;
   top: 0;
   width: 100%;

src/tenant/music/album/index.tsx

@@ -220,7 +220,6 @@ export default defineComponent({
                   <ColHeader
                     class={styles.memberHeader}
                     background="transparent"
-                    backIconColor="white"
                     border={false}
                     isFixed={false}
                     color="#131415"

src/tenant/music/component/song/index.tsx

@@ -42,28 +42,29 @@ export default defineComponent({
   },
   emits: ['detail'],
   setup(props, { emit }) {
-    const isMore = ref<boolean>(false)
-    const moreData = ref<any>({})
-    const router = useRouter()
-    const colors: any = {
-      FREE: {
-        color: '#01B84F',
-        text: '免费'
-      },
-      VIP: {
-        color: '#CD863E',
-        text: '会员'
-      },
-      CHARGE: {
-        color: '#3591CE',
-        text: '点播'
-      }
-    }
+    // const isMore = ref<boolean>(false)
+    // const moreData = ref<any>({})
+    // const router = useRouter()
+    // const colors: any = {
+    //   FREE: {
+    //     color: '#01B84F',
+    //     text: '免费'
+    //   },
+    //   VIP: {
+    //     color: '#CD863E',
+    //     text: '会员'
+    //   },
+    //   CHARGE: {
+    //     color: '#3591CE',
+    //     text: '点播'
+    //   }
+    // }
 
     const list = computed(() => {
       return props.list.map(n => {
-        if (typeof n.paymentType === 'string')
-          n.paymentType = n.paymentType.split(',')
+        // if (typeof n.paymentType === 'string')
+        //   n.paymentType = n.paymentType.split(',')
+        n.subjectNames = n.musicSubjectName
         return { ...n }
       })
     })
@@ -108,7 +109,7 @@ export default defineComponent({
                   )}
 
                   <div class={styles.tags}>
-                    {n?.subjectNames.split(',').map((name: any) => (
+                    {n.subjectNames?.split(',').map((name: any) => (
                       <span>{name}</span>
                     ))}
                   </div>

src/tenant/music/train-list/index.tsx

@@ -160,6 +160,7 @@ export default defineComponent({
             data: tempParams
           }
         )
+        console.log(res, 'res')
         if (data.value) {
           const result = (data.value?.rows || []).concat(res.data.rows || [])
           data.value.rows = result
@@ -239,7 +240,12 @@ export default defineComponent({
 
     const getSelectCondition = async () => {
       const { data } = await request.post(
-        `${apiSuffix.value}/tenantAlbumMusic/selectCondition?subjectType=${params.subjectType}`
+        `${apiSuffix.value}/tenantAlbumMusic/selectCondition`,
+        {
+          data: {
+            subjectType: params.subjectType
+          }
+        }
       )
       console.log(data)
     }

src/views/adapay/pay-define/index.tsx

@@ -5,6 +5,7 @@ import { Button, Cell, CellGroup, Icon, Toast } from 'vant'
 import { defineComponent, onMounted, reactive } from 'vue'
 import { useRoute } from 'vue-router'
 import styles from './index.module.less'
+import { state as baseState } from '@/state'
 
 export default defineComponent({
   name: 'pay-define',
@@ -126,13 +127,15 @@ export default defineComponent({
             if ('9000' == data.resultCode) {
               window.location.replace(
                 location.origin +
-                  '/tenant/#/tradeDetail?orderNo=' +
+                  +baseState.payBackPath +
+                  '#/tradeDetail?orderNo=' +
                   state.orderNo
               )
             } else {
               window.location.replace(
                 location.origin +
-                  '/tenant/#/tradeDetail?orderNo=' +
+                  +baseState.payBackPath +
+                  '#/tradeDetail?orderNo=' +
                   state.orderNo
               )
             }
@@ -165,14 +168,20 @@ export default defineComponent({
             res.err_msg == 'get_brand_wcpay_request:fail'
           ) {
             window.location.replace(
-              location.origin + '/tenant/#/tradeDetail?orderNo=' + state.orderNo
+              location.origin +
+                baseState.payBackPath +
+                '#/tradeDetail?orderNo=' +
+                state.orderNo
             )
           } else {
             // 使用以上方式判断前端返回,微信团队郑重提示：
             //res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
             // alert('支付成功')
             window.location.replace(
-              location.origin + '/tenant/#/tradeDetail?orderNo=' + state.orderNo
+              location.origin +
+                baseState.payBackPath +
+                '#/tradeDetail?orderNo=' +
+                state.orderNo
             )
           }
         }

src/views/adapay/pay-result/index.tsx

@@ -5,6 +5,7 @@ import { Cell, CellGroup, Dialog, Icon, Loading, Toast } from 'vant'
 import { defineComponent, onMounted, reactive } from 'vue'
 import { useRouter, useRoute } from 'vue-router'
 import styles from './index.module.less'
+import { state as baseState } from '@/state'
 
 export default defineComponent({
   name: 'pay-result',
@@ -97,7 +98,10 @@ export default defineComponent({
         console.log(e)
         // 接口报错也跳转到支付回调页
         window.location.replace(
-          location.origin + '/tenant/#/tradeDetail?orderNo=' + state.orderNo
+          location.origin +
+            baseState.payBackPath +
+            '#/tradeDetail?orderNo=' +
+            state.orderNo
         )
       }
     }
@@ -122,13 +126,15 @@ export default defineComponent({
             if ('9000' == data.resultCode) {
               window.location.replace(
                 location.origin +
-                  '/tenant/#/tradeDetail?orderNo=' +
+                  baseState.payBackPath +
+                  '#/tradeDetail?orderNo=' +
                   state.orderNo
               )
             } else {
               window.location.replace(
                 location.origin +
-                  '/tenant/#/tradeDetail?orderNo=' +
+                  baseState.payBackPath +
+                  '#/tradeDetail?orderNo=' +
                   state.orderNo
               )
             }
@@ -208,14 +214,20 @@ export default defineComponent({
             res.err_msg == 'get_brand_wcpay_request:fail'
           ) {
             window.location.replace(
-              location.origin + '/tenant/#/tradeDetail?orderNo=' + state.orderNo
+              location.origin +
+                baseState.payBackPath +
+                '#/tradeDetail?orderNo=' +
+                state.orderNo
             )
           } else {
             // 使用以上方式判断前端返回,微信团队郑重提示：
             //res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
             // alert('支付成功')
             window.location.replace(
-              location.origin + '/tenant/#/tradeDetail?orderNo=' + state.orderNo
+              location.origin +
+                baseState.payBackPath +
+                '#/tradeDetail?orderNo=' +
+                state.orderNo
             )
           }
         }

src/views/order-detail/index.tsx

@@ -56,7 +56,7 @@ export default defineComponent({
       paymentVersion: '', // 支付版本,可用值:V1 老版,V2 新版
       showQrcode: false,
       orderTimer: null as any,
-      qrCodeUrl: 'https://m.baidu.com',
+      qrCodeUrl: '',
       pay_channel: '',
       orderInfo: {} as any,
       config: {} as any, // 支付信息
@@ -334,10 +334,10 @@ export default defineComponent({
       })
       if (val.payCode === 'payResult') {
         window.location.href =
-          window.location.origin + '/tenant.html#/payResult?' + params
+          window.location.origin + state.payBackPath + '#/payResult?' + params
       } else {
         this.qrCodeUrl =
-          window.location.origin + '/tenant.html#/payDefine?' + params
+          window.location.origin + state.payBackPath + '#/payDefine?' + params
         this.showQrcode = true
         this.paymentStatus = false
 

src/views/trade/trade-detail.module.less

@@ -1,129 +1,154 @@
-.tradeDetail {
-  .orderType {
-    padding: 30px 0 72px;
-    background: var(--van-primary);
-    text-align: center;
-    color: #fff;
-    font-size: 24px;
-
-    & > p {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      span {
-        padding-top: 8px;
-        padding-left: 13px;
-      }
-    }
-  }
-  .orderImg {
-    width: 42px;
-    height: 47px;
-  }
-
-  &.FAILED,
-  &.CLOSE {
-    .orderType {
-      background-color: #bdbdbd;
-    }
-    .orderContent::before {
-      background: url('./images/icon_close_block.png') no-repeat center;
-      background-size: contain;
-    }
-  }
-
-  &.ING {
-    .orderType {
-      background-color: #ff802c;
-    }
-    .orderContent::before {
-      background: url('./images/icon_paying_block.png') no-repeat center;
-      background-size: contain;
-    }
-  }
-
-  .orderContent {
-    border-radius: 0px 0px 10px 10px;
-    margin: -30px 16px 0;
-    position: relative;
-    &::before {
-      content: ' ';
-      position: absolute;
-      top: -6px;
-      left: -8px;
-      right: -8px;
-      height: 14px;
-      background: url('./images/icon_success_block.png') no-repeat center;
-      background-size: contain;
-    }
-
-    .payPrice {
-      color: #333;
-      font-size: 32px;
-      text-align: center;
-      font-weight: 500;
-      padding: 10px 0 5px;
-      & > span {
-        font-size: 12px;
-      }
-    }
-  }
-
-  .tradeLogo {
-    width: 35px;
-    height: 35px;
-    border-radius: 50%;
-    margin-right: 10px;
-    overflow: hidden;
-  }
-
-  .title,
-  .content {
-    padding-top: 1px;
-    display: flex;
-    justify-content: space-between;
-    flex-direction: column;
-    line-height: 18px;
-    color: #333333;
-    font-size: 14px;
-  }
-  .desc,
-  .num {
-    padding-top: 3px;
-    font-size: 13px;
-    color: #999999;
-  }
-
-  .optionRow {
-    line-height: 26px;
-    display: flex;
-    position: relative;
-    padding-bottom: 15px;
-    box-sizing: border-box;
-    color: #333333;
-    font-size: 14px;
-
-    :global {
-      .van-col {
-        display: flex;
-        line-height: 1.5;
-      }
-      .van-col--8 {
-        color: #999999;
-        justify-content: flex-start;
-      }
-      .van-col--14 {
-        justify-content: flex-end;
-        word-break: break-word; /* 文本行的任意字内断开 */
-        word-wrap: break-word; /* IE */
-        white-space: -moz-pre-wrap; /* Mozilla */
-        white-space: -hp-pre-wrap; /* HP printers */
-        white-space: -o-pre-wrap; /* Opera 7 */
-        white-space: -pre-wrap; /* Opera 4-6 */
-        white-space: pre; /* CSS2 */
-        white-space: pre-wrap; /* CSS 2.1 */
-        white-space: pre-line; /* CSS 3 (and 2.1 as well, actually) */
-      }
-    }
-  }
-}
+.tradeDetail {
+  .orderType {
+    padding: 30px 0 72px;
+    background: var(--van-primary);
+    text-align: center;
+    color: #fff;
+    font-size: 24px;
+
+    &>p {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      span {
+        padding-top: 8px;
+        padding-left: 13px;
+      }
+    }
+  }
+
+  .orderImg {
+    width: 42px;
+    height: 47px;
+  }
+
+  &.FAILED,
+  &.CLOSE {
+    .orderType {
+      background-color: #bdbdbd;
+    }
+
+    .orderContent::before {
+      background: url('./images/icon_close_block.png') no-repeat center;
+      background-size: contain;
+    }
+  }
+
+  &.ING {
+    .orderType {
+      background-color: #ff802c;
+    }
+
+    .orderContent::before {
+      background: url('./images/icon_paying_block.png') no-repeat center;
+      background-size: contain;
+    }
+  }
+
+  .orderContent {
+    border-radius: 0px 0px 10px 10px;
+    margin: -30px 16px 0;
+    position: relative;
+
+    &::before {
+      content: ' ';
+      position: absolute;
+      top: -6px;
+      left: -8px;
+      right: -8px;
+      height: 14px;
+      background: url('./images/icon_success_block.png') no-repeat center;
+      background-size: contain;
+    }
+
+    &.orderContentTenant {
+      &::before {
+        background: url('./images/icon_success_block_tenant.png') no-repeat center;
+        background-size: contain;
+      }
+    }
+
+    .payPrice {
+      color: #333;
+      font-size: 32px;
+      text-align: center;
+      font-weight: 500;
+      padding: 10px 0 5px;
+
+      &>span {
+        font-size: 12px;
+      }
+    }
+  }
+
+  .tradeLogo {
+    width: 35px;
+    height: 35px;
+    border-radius: 50%;
+    margin-right: 10px;
+    overflow: hidden;
+  }
+
+  .title,
+  .content {
+    padding-top: 1px;
+    display: flex;
+    justify-content: space-between;
+    flex-direction: column;
+    line-height: 18px;
+    color: #333333;
+    font-size: 14px;
+  }
+
+  .desc,
+  .num {
+    padding-top: 3px;
+    font-size: 13px;
+    color: #999999;
+  }
+
+  .optionRow {
+    line-height: 26px;
+    display: flex;
+    position: relative;
+    padding-bottom: 15px;
+    box-sizing: border-box;
+    color: #333333;
+    font-size: 14px;
+
+    :global {
+      .van-col {
+        display: flex;
+        line-height: 1.5;
+      }
+
+      .van-col--8 {
+        color: #999999;
+        justify-content: flex-start;
+      }
+
+      .van-col--14 {
+        justify-content: flex-end;
+        word-break: break-word;
+        /* 文本行的任意字内断开 */
+        word-wrap: break-word;
+        /* IE */
+        white-space: -moz-pre-wrap;
+        /* Mozilla */
+        white-space: -hp-pre-wrap;
+        /* HP printers */
+        white-space: -o-pre-wrap;
+        /* Opera 7 */
+        white-space: -pre-wrap;
+        /* Opera 4-6 */
+        white-space: pre;
+        /* CSS2 */
+        white-space: pre-wrap;
+        /* CSS 2.1 */
+        white-space: pre-line;
+        /* CSS 3 (and 2.1 as well, actually) */
+      }
+    }
+  }
+}

src/views/trade/trade-detail.tsx

@@ -36,7 +36,8 @@ export default defineComponent({
         },
         SUCCESS: {
           img: getAssetsHomeFile('icon_success.png'),
-          background: 'var(--van-primary)',
+          background:
+            state.projectType === 'tenant' ? '#FF5461' : 'var(--van-primary)',
           title: '支付成功'
         },
         FAILED: {
@@ -144,7 +145,15 @@ export default defineComponent({
               border={false}
             />
 
-            <div class={styles.orderType}>
+            <div
+              class={styles.orderType}
+              style={{
+                backgroundColor:
+                  state.projectType === 'tenant'
+                    ? '#FF5461'
+                    : 'var(--van-primary)'
+              }}
+            >
               <p>
                 <Image
                   class={styles.orderImg}
@@ -155,7 +164,14 @@ export default defineComponent({
               </p>
             </div>
 
-            <CellGroup border={false} class={[styles.orderContent, 'mb12']}>
+            <CellGroup
+              border={false}
+              class={[
+                styles.orderContent,
+                state.projectType === 'tenant' && styles.orderContentTenant,
+                'mb12'
+              ]}
+            >
               <Cell
                 v-slots={{
                   title: () => (