更新

src/components/col-video/index.tsx

@@ -83,6 +83,10 @@ export default defineComponent({
       this.player.elements.container
         ? (this.player.elements.container.style.height = this.height || '210px')
         : null
+
+      this.player.on('ready', () => {
+        console.log('ready')
+      })
     }
   },
   render() {

src/router/routes-common.ts

@@ -25,6 +25,14 @@ export const router = [
     }
   },
   {
+    path: '/afterSale',
+    name: 'afterSale',
+    component: () => import('@/views/goods-order/after-sale'),
+    meta: {
+      title: '售后服务'
+    }
+  },
+  {
     path: '/afterService',
     name: 'afterService',
     component: () => import('@/views/after-service/index'),

src/student/member-center/index.module.less

@@ -95,8 +95,8 @@
   }
 
   .memberContainer {
-    height: calc(100vh - 196px);
-    overflow-y: auto;
+    // height: calc(100vh - 196px);
+    // overflow-y: auto;
     background-color: #fff;
     border-radius: 18px 18px 0px 0px;
     position: relative;

src/student/member-center/index.tsx

@@ -3,8 +3,10 @@ import { Button, Cell, Icon, Image } from 'vant'
 import { defineComponent } from 'vue'
 import styles from './index.module.less'
 import ColProtocol from '@/components/col-protocol'
+import request from '@/helpers/request'
+import { state } from '@/state'
 
-import iconTeacher from '@common/images/icon_teacher.png'
+import iconStudent from '@common/images/icon_student.png'
 
 export const getAssetsHomeFile = (fileName: string) => {
   const path = `./images/${fileName}`
@@ -17,18 +19,48 @@ export default defineComponent({
   data() {
     return {
       agreeStatus: false,
-      functionList: [
-        { title: '五线谱<br />跟播', icon: getAssetsHomeFile('1.png') },
-        { title: '演奏指法<br />跟播', icon: getAssetsHomeFile('2.png') },
-        { title: '原声/伴奏<br />切换', icon: getAssetsHomeFile('3.png') },
-        { title: '播放速度<br />调整', icon: getAssetsHomeFile('4.png') },
-        { title: '五线谱选段<br />播放', icon: getAssetsHomeFile('5.png') },
-        { title: '智能评测', icon: getAssetsHomeFile('6.png') },
-        { title: '评测报告', icon: getAssetsHomeFile('7.png') },
-        { title: '评测音视频<br />云储存', icon: getAssetsHomeFile('8.png') }
-      ]
+      functionList: [],
+      params: {
+        page: 1,
+        rows: 20
+      }
     }
   },
+  computed: {
+    userInfo() {
+      const users = state.user.data
+      return {
+        username: users?.username,
+        phone: users?.phone,
+        avatar: users?.heardUrl,
+        memberRankSettingId: users?.memberRankSettingId,
+        membershipDays: users?.membershipDays
+      }
+    }
+  },
+  async mounted() {
+    try {
+      const res = await request.post(
+        '/api-student/memberPriceSettings/vipPermissions'
+      )
+      const result = res.data || []
+      this.functionList = result.map((item: any) => {
+        return {
+          title: item.paramName,
+          icon: getAssetsHomeFile(`${item.paramValue}.png`)
+        }
+      })
+
+      const setting = await request.post(
+        '/api-student/memberPriceSettings/list',
+        {
+          page: 1,
+          rows: 20
+        }
+      )
+      console.log(setting)
+    } catch {}
+  },
   methods: {
     onSubmit() {
       this.$router.push({
@@ -42,7 +74,7 @@ export default defineComponent({
   render() {
     return (
       <div class={styles['member-center']}>
-        <ColHeader isFixed={false} background="transparent" />
+        <ColHeader background="#ffe5cc" />
         <div class={styles.member_container}>
           <Cell
             class={styles.userMember}
@@ -50,26 +82,38 @@ export default defineComponent({
             v-slots={{
               icon: () => (
                 <div class={styles.userImgSection}>
-                  <Image class={styles.userImg} src={iconTeacher} fit="cover" />
+                  <Image
+                    class={styles.userImg}
+                    src={this.userInfo.avatar || iconStudent}
+                    fit="cover"
+                  />
                 </div>
               ),
               title: () => (
                 <div class={styles.userInfo}>
-                  <span class={styles.name}>李小明</span>
-                  <Image
-                    class={styles.level}
-                    src="https://daya.ks3-cn-beijing.ksyun.com/202107/ScSTL1D.png"
-                  />
-                  <span class={styles.phone} v-html="（15907121013）"></span>
+                  <span class={styles.name}>{this.userInfo.username}</span>
+                  {!!this.userInfo.memberRankSettingId && (
+                    <Image
+                      class={styles.level}
+                      src="https://daya.ks3-cn-beijing.ksyun.com/202107/ScSTL1D.png"
+                    />
+                  )}
+                  <span
+                    class={styles.phone}
+                    v-html={`（${this.userInfo.phone}）`}
+                  ></span>
                 </div>
               ),
               label: () => (
                 <div class={styles.member_time}>
-                  {true ? (
+                  {this.userInfo.memberRankSettingId ? (
                     <div>
                       {' '}
                       会员权益有效期剩余
-                      <span class={styles.remaining}>200</span>天
+                      <span class={styles.remaining}>
+                        {this.userInfo.membershipDays}
+                      </span>
+                      天
                     </div>
                   ) : (
                     <div>亲，您还不是会员哟</div>
@@ -129,21 +173,24 @@ export default defineComponent({
             </p>
           </div>
 
-          <div class={styles.memberItem}>
-            <div class={styles.title}>会员功能</div>
+          {this.functionList.length > 0 && (
+            <div class={styles.memberItem}>
+              <div class={styles.title}>会员功能</div>
 
-            <div class={styles.member_function}>
-              {this.functionList.map((item: any) => (
-                <div class={styles.function_item}>
-                  <Icon name={item.icon} size={34} />
-                  <div class={styles.function_text} v-html={item.title}></div>
-                </div>
-              ))}
+              <div class={styles.member_function}>
+                {this.functionList.map((item: any) => (
+                  <div class={styles.function_item}>
+                    <Icon name={item.icon} size={34} />
+                    <div class={styles.function_text} v-html={item.title}></div>
+                  </div>
+                ))}
+              </div>
             </div>
-          </div>
+          )}
 
           <ColProtocol
             v-model={this.agreeStatus}
+            showHeader
             style={{ paddingLeft: 0, paddingRight: 0, marginBottom: '64px' }}
           />
         </div>

src/student/member-center/member-record.tsx

@@ -2,6 +2,7 @@ import ColHeader from '@/components/col-header'
 import { defineComponent } from 'vue'
 import styles from './member-record.module.less'
 import { Cell, CellGroup, Grid, GridItem, Icon, Image, Sticky } from 'vant'
+import request from '@/helpers/request'
 
 export const getAssetsHomeFile = (fileName: string) => {
   const path = `./images/${fileName}`
@@ -11,6 +12,27 @@ export const getAssetsHomeFile = (fileName: string) => {
 
 export default defineComponent({
   name: 'memberRecord',
+  data() {
+    return {
+      params: {
+        page: 1,
+        rows: 20
+      }
+    }
+  },
+  async mounted() {
+    try {
+      const res = await request.get(
+        '/api-student/sysMusicRecord/studentTrainData',
+        {
+          params: {
+            ...this.params
+          }
+        }
+      )
+      console.log(res)
+    } catch {}
+  },
   render() {
     return (
       <div class={styles['member-record']}>
@@ -100,7 +122,7 @@ export default defineComponent({
                 style={{ paddingLeft: '5px', paddingRight: '5px' }}
                 v-slots={{
                   title: () => (
-                    <Grid border={false} columnNum={5} clickable>
+                    <Grid border={false} columnNum={5}>
                       <GridItem
                         text="评测难度"
                         v-slots={{

src/student/video-class/index.tsx

@@ -77,7 +77,6 @@ export default defineComponent({
             class={styles.classHeader}
             border={false}
             background="transparent"
-            isFixed={false}
           />
           <ColSearch
             placeholder="请输入老师名称/课程名称"

src/teacher/video-class/video-class-detail.tsx

@@ -54,9 +54,15 @@ export default defineComponent({
   computed: {
     users() {
       return state.user.data
+    },
+    offsetTop() {
+      let navHeight: number = this.navHeight
+      const top = Number(navHeight) + 44
+      return top + 'px'
     }
   },
   async mounted() {
+    this.navHeight = sessionStorage.getItem('navHeight') || 0
     try {
       const res = await request.get(
         '/api-teacher/videoLessonGroup/selectVideoLesson',
@@ -110,8 +116,6 @@ export default defineComponent({
         this.finished = result.pageNo >= result.totalPage
         this.params.page = result.pageNo + 1
         this.dataShow = this.list.length > 0
-
-        console.log(this.list)
       } catch {
         this.dataShow = false
         this.finished = true
@@ -187,6 +191,8 @@ export default defineComponent({
           class={styles.infoField}
           color="var(--van-primary)"
           lineWidth={20}
+          sticky
+          offsetTop={this.offsetTop}
         >
           <Tab title="目录" name={1}>
             <div style={{ height: 'calc(100vh - 320px)', overflowY: 'auto' }}>

src/views/goods-order/after-sale.tsx

@@ -0,0 +1,138 @@
+import ColHeader from '@/components/col-header'
+import ColResult from '@/components/col-result'
+import {
+  ActionSheet,
+  Button,
+  Cell,
+  CellGroup,
+  Field,
+  Image,
+  List,
+  Tab,
+  Tabs
+} from 'vant'
+import { defineComponent } from 'vue'
+import styles from './index.module.less'
+
+export default defineComponent({
+  name: 'after-sale',
+  data() {
+    return {
+      active: '0',
+      list: [1],
+      dataShow: true, // 判断是否有数据
+      loading: false,
+      finished: false,
+      params: {
+        search: '',
+        groupStatus: 'APPLY',
+        page: 1,
+        rows: 20
+      },
+      show: false
+    }
+  },
+  methods: {
+    getList() {}
+  },
+  render() {
+    return (
+      <div class={styles.shopOrder}>
+        <ColHeader
+          v-slots={{
+            default: () => (
+              <Tabs
+                v-model:active={this.active}
+                color="var(--van-primary)"
+                lineWidth={28}
+              >
+                <Tab name="0" title="全部"></Tab>
+                <Tab name="1" title="处理中"></Tab>
+                <Tab name="2" title="已处理"></Tab>
+              </Tabs>
+            )
+          }}
+        />
+
+        {this.dataShow ? (
+          <List
+            v-model:loading={this.loading}
+            finished={this.finished}
+            finishedText=" "
+            class={[styles.goodsList]}
+            onLoad={this.getList}
+          >
+            {this.list.map((item: any) => (
+              <CellGroup class={styles.cellGroup}>
+                <Cell
+                  center
+                  v-slots={{
+                    icon: () => (
+                      <Image
+                        class={styles.goodsImg}
+                        src="https://cdn.jsdelivr.net/npm/@vant/assets/cat.jpeg"
+                        fit="cover"
+                      />
+                    ),
+                    default: () => (
+                      <div class={styles.goodsContainer}>
+                        <div class={[styles.goodsTitle, 'van-ellipsis']}>
+                          次中音号降调JBBR-1220次中音号降调JBBR-1220次中音号降调JBBR-1220
+                        </div>
+                        <div class={styles.model}>型号：默认</div>
+                        <div class={styles.goodsPrice}>
+                          <span class={styles.price}>
+                            <i>¥</i>2,5000.0
+                          </span>
+                          <span class={styles.num}>x1</span>
+                        </div>
+                      </div>
+                    )
+                  }}
+                ></Cell>
+                <Cell
+                  center
+                  v-slots={{
+                    default: () => (
+                      <div class={styles.btnList}>
+                        <Button
+                          size="small"
+                          round
+                          type="primary"
+                          onClick={() => {
+                            this.show = true
+                          }}
+                        >
+                          申请退货
+                        </Button>
+                      </div>
+                    )
+                  }}
+                ></Cell>
+              </CellGroup>
+            ))}
+          </List>
+        ) : (
+          <ColResult btnStatus={false} classImgSize="SMALL" tips="暂无数据" />
+        )}
+
+        <ActionSheet v-model:show={this.show} title="退货原因">
+          <div style={{ paddingTop: '15px' }}>
+            <Field
+              class={[styles.field]}
+              placeholder="请输入退货原因"
+              type="textarea"
+              rows={3}
+            />
+            <Field class={[styles.field]} placeholder="请输入退货快递单号" />
+          </div>
+          <div class={styles['btn-group']}>
+            <Button type="primary" block round>
+              确定
+            </Button>
+          </div>
+        </ActionSheet>
+      </div>
+    )
+  }
+})

src/views/goods-order/index.module.less

@@ -1,7 +1,17 @@
+.shopOrder {
+  --van-nav-bar-text-color: #666666;
+}
+
 .goodsList {
   margin-top: 12px;
 }
 
+.payTime {
+  font-size: 13px;
+  color: #666666;
+  line-height: 18px;
+}
+
 .cellGroup {
   margin: 12px 14px;
   border-radius: 10px;
@@ -14,3 +24,71 @@
   border-radius: 8px;
   overflow: hidden;
 }
+
+.goodsContainer {
+  margin-left: 10px;
+}
+
+.goodsTitle {
+  font-size: 16px;
+  color: #333333;
+  line-height: 22px;
+}
+
+.model {
+  font-size: 14px;
+  color: #999999;
+  line-height: 20px;
+  padding: 6px 0 10px 0;
+}
+
+.goodsPrice {
+  display: flex;
+  justify-content: space-between;
+
+  .num {
+    font-size: 12px;
+    font-weight: 500;
+    color: #666666;
+    line-height: 17px;
+  }
+}
+
+.btnList {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  :global {
+    .van-button + .van-button {
+      margin-left: 10px;
+    }
+  }
+}
+
+.price {
+  color: #ff4e19;
+  font-size: 16px;
+  i {
+    font-size: 12px;
+    font-style: normal;
+  }
+}
+
+.sureGoods {
+  padding-right: 12px;
+  font-size: 12px;
+  color: #999999;
+  line-height: 17px;
+}
+
+.field {
+  margin: 0 26px 13px;
+  border: 1px solid #dedede;
+  width: auto;
+  border-radius: 10px;
+  overflow: hidden;
+}
+
+.btn-group {
+  padding: 0 15% 12px;
+}

src/views/goods-order/index.tsx

@@ -22,12 +22,17 @@ export default defineComponent({
     }
   },
   methods: {
-    getList() {}
+    getList() {},
+    onClickRight() {
+      this.$router.push('/afterSale')
+    }
   },
   render() {
     return (
       <div class={styles.shopOrder}>
         <ColHeader
+          rightText="售后服务"
+          onClickRight={this.onClickRight}
           v-slots={{
             default: () => (
               <Tabs
@@ -53,8 +58,14 @@ export default defineComponent({
           >
             {this.list.map((item: any) => (
               <CellGroup class={styles.cellGroup}>
-                <Cell title="2022年5月6日20:58:42" value="待支付"></Cell>
                 <Cell
+                  title="2022年5月6日20:58:42"
+                  titleClass={styles.payTime}
+                  value="待支付"
+                  valueClass={styles.payStatus}
+                ></Cell>
+                <Cell
+                  center
                   v-slots={{
                     icon: () => (
                       <Image
@@ -64,7 +75,33 @@ export default defineComponent({
                       />
                     ),
                     default: () => (
-                      <div>
+                      <div class={styles.goodsContainer}>
+                        <div class={[styles.goodsTitle, 'van-ellipsis']}>
+                          次中音号降调JBBR-1220次中音号降调JBBR-1220次中音号降调JBBR-1220
+                        </div>
+                        <div class={styles.model}>型号：默认</div>
+                        <div class={styles.goodsPrice}>
+                          <span class={styles.price}>
+                            <i>¥</i>2,5000.0
+                          </span>
+                          <span class={styles.num}>x1</span>
+                        </div>
+                      </div>
+                    )
+                  }}
+                ></Cell>
+                <Cell
+                  center
+                  v-slots={{
+                    icon: () => (
+                      <Image
+                        class={styles.goodsImg}
+                        src="https://cdn.jsdelivr.net/npm/@vant/assets/cat.jpeg"
+                        fit="cover"
+                      />
+                    ),
+                    default: () => (
+                      <div class={styles.goodsContainer}>
                         <div class={styles.goodsTitle}>
                           次中音号降调JBBR-1220
                         </div>
@@ -73,7 +110,7 @@ export default defineComponent({
                           <span class={styles.price}>
                             <i>¥</i>2,5000.0
                           </span>
-                          <span class={styles.num}>x1</span>
+                          <span class={styles.num}>x 1</span>
                         </div>
                       </div>
                     )
@@ -85,20 +122,24 @@ export default defineComponent({
                     title: () => (
                       <div class={styles.orderPrice}>
                         订单金额
-                        <span class={styles.price}>
+                        <span
+                          class={styles.price}
+                          style={{ paddingLeft: '5px' }}
+                        >
                           <i>¥</i>2,5000.0
                         </span>
                       </div>
                     ),
                     default: () => (
-                      <>
+                      <div class={styles.btnList}>
+                        {/* <span class={styles.sureGoods}>已确认收货</span> */}
                         <Button size="small" round>
                           取消订单
                         </Button>
                         <Button size="small" round type="primary">
                           继续支付
                         </Button>
-                      </>
+                      </div>
                     )
                   }}
                 ></Cell>
@@ -106,7 +147,7 @@ export default defineComponent({
             ))}
           </List>
         ) : (
-          <ColResult btnStatus={false} classImgSize="SMALL" tips="暂无直播课" />
+          <ColResult btnStatus={false} classImgSize="SMALL" tips="暂无订单" />
         )}
       </div>
     )