fix:帮助中心

src/router/router-root.ts

@@ -93,6 +93,22 @@ export default [
     }
   },
   {
+    path: '/help-center',
+    name: 'help-center',
+    component: () => import('@/views/information/help-center/index'),
+    meta: {
+      title: '帮助中心'
+    }
+  },
+  {
+    path: '/help-detail',
+    name: 'help-detail',
+    component: () => import('@/views/information/help-center/detail'),
+    meta: {
+      title: '帮助中心详情'
+    }
+  },
+  {
     path: '/:pathMatch(.*)*',
     component: () => import('@/views/404'),
     meta: {

src/views/information/help-center/detail.tsx

@@ -0,0 +1,56 @@
+import OHeader from '@/components/m-header';
+import request from '@/helpers/request';
+import { state } from '@/state';
+import { NavBar } from 'vant';
+import { defineComponent, onMounted, ref } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+import styles from '../information-detail.module.less';
+
+export default defineComponent({
+  name: 'notice-detail',
+  setup() {
+    const route = useRoute();
+    const router = useRouter();
+    const detail = ref<any>({});
+
+    const getDetails = async () => {
+      try {
+        const { data } = await request.get(
+          '/edu-app/helpCenterContent/detail/' + route.query.id
+        );
+        detail.value = data;
+      } catch {
+        //
+      }
+    };
+
+    onMounted(() => {
+      getDetails();
+    });
+    return () => (
+      <>
+        {route.query.source == 'music' ? (
+          <NavBar
+            leftArrow
+            leftText="返回"
+            border={false}
+            onClickLeft={() => router.back()}
+          />
+        ) : (
+          <OHeader />
+        )}
+        <div class={[styles.detail]}>
+          <div class={styles.detailContent}>
+            <div class={styles.title}>{detail.value.title}</div>
+            <div class={styles.who}>
+              <span>课堂乐器</span>
+              {detail.value.updateTime}
+            </div>
+
+            <div class={styles.content} v-html={detail.value.content}></div>
+          </div>
+        </div>
+      </>
+    );
+  }
+});

src/views/information/help-center/index.module.less

@@ -0,0 +1,55 @@
+.helpCenter {
+  .title {
+    font-size: 16px;
+    color: #333333;
+    line-height: 22px;
+  }
+  .container {
+    margin-top: 12px;
+    :global {
+      .van-cell {
+        padding: 18px 13px;
+      }
+    }
+  }
+
+  .containerInformation {
+    .img {
+      width: 142px;
+      height: 80px;
+      border-radius: 10px;
+      overflow: hidden;
+      margin-right: 15px;
+      flex-shrink: 0;
+    }
+
+    .bgImg {
+      background-color: #eaeaea;
+      background-repeat: no-repeat;
+      background-position: center;
+      background-image: url('../../mine-orchestra/images/icon-photo-default.png');
+    }
+
+    .title {
+      font-size: 14px;
+      font-weight: 500;
+      color: #333333;
+      line-height: 21px;
+      padding-top: 5px;
+      max-width: 180px;
+    }
+    .content {
+      font-size: 12px;
+      color: #777777;
+      line-height: 17px;
+      word-break: break-all;
+      word-wrap: break-word;
+    }
+    .time {
+      padding-bottom: 5px;
+      font-size: 12px;
+      color: #aaaaaa;
+      line-height: 17px;
+    }
+  }
+}

src/views/information/help-center/index.tsx

@@ -0,0 +1,115 @@
+import OEmpty from '@/components/m-empty';
+import OHeader from '@/components/m-header';
+import OSearch from '@/components/m-search';
+import OSticky from '@/components/m-sticky';
+import request from '@/helpers/request';
+import { state } from '@/state';
+import { Cell, CellGroup, List } from 'vant';
+import { defineComponent, onMounted, reactive } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+import styles from './index.module.less';
+
+export default defineComponent({
+  name: 'help-center',
+  setup() {
+    const route = useRoute();
+    const router = useRouter();
+    const form = reactive({
+      isClick: false,
+      list: [] as any,
+      listState: {
+        dataShow: true, // 判断是否有数据
+        loading: false,
+        finished: false
+      },
+      params: {
+        keyword: null,
+        status: true,
+        page: 1,
+        rows: 20
+      }
+    });
+
+    const getList = async () => {
+      try {
+        if (form.isClick) return;
+        form.isClick = true;
+        const res = await request.post('/edu-app/helpCenterContent/page', {
+          data: {
+            ...form.params,
+            catalogType: 'STUDENT'
+          }
+        });
+        form.listState.loading = false;
+        const result = res.data || {};
+        // 处理重复请求数据
+        if (form.list.length > 0 && result.current === 1) {
+          return;
+        }
+        form.list = form.list.concat(result.rows || []);
+        form.listState.finished = result.current >= result.pages;
+        form.params.page = result.current + 1;
+        form.listState.dataShow = form.list.length > 0;
+        form.isClick = false;
+      } catch {
+        form.listState.dataShow = false;
+        form.listState.finished = true;
+        form.isClick = false;
+      }
+    };
+
+    const onSearch = (val: any) => {
+      form.params.keyword = val;
+      form.params.page = 1;
+      form.list = [];
+      form.listState.dataShow = true; // 判断是否有数据
+      form.listState.loading = false;
+      form.listState.finished = false;
+      getList();
+    };
+
+    onMounted(() => {
+      getList();
+    });
+    return () => (
+      <div
+        class={[
+          styles.helpCenter,
+          !form.listState.dataShow && 'emptyRootContainer'
+        ]}>
+        <OSticky position="top">
+          <OHeader border={false} />
+          <OSearch onSearch={onSearch} />
+        </OSticky>
+
+        {form.listState.dataShow ? (
+          <List
+            // v-model:loading={form.listState.loading}
+            finished={form.listState.finished}
+            finishedText=" "
+            class={styles.container}
+            onLoad={getList}
+            immediateCheck={false}>
+            {form.list.map((item: any) => (
+              <Cell
+                titleClass={[styles.title, 'van-ellipsis']}
+                title={item.title}
+                isLink
+                onClick={() => {
+                  router.push({
+                    path: 'help-detail',
+                    query: {
+                      id: item.id,
+                      source: route.query.source
+                    }
+                  });
+                }}></Cell>
+            ))}
+          </List>
+        ) : (
+          <OEmpty description="暂无数据" />
+        )}
+      </div>
+    );
+  }
+});

src/views/information/index.tsx

@@ -0,0 +1,156 @@
+import OEmpty from '@/components/m-empty/index';
+import OHeader from '@/components/m-header/index';
+import OSearch from '@/components/m-search/index';
+import OSticky from '@/components/m-sticky/index';
+import request from '@/helpers/request';
+import { state } from '@/state';
+import dayjs from 'dayjs';
+import { Cell, CellGroup, List, Image } from 'vant';
+import { defineComponent, onMounted, reactive } from 'vue';
+import { useRouter } from 'vue-router';
+import styles from './help-center/index.module.less';
+
+export default defineComponent({
+  name: 'help-center',
+  setup() {
+    const router = useRouter();
+    const form = reactive({
+      isClick: false,
+      list: [] as any,
+      listState: {
+        dataShow: true, // 判断是否有数据
+        loading: false,
+        finished: false
+      },
+      params: {
+        keyword: null,
+        status: true,
+        type: 'HOT_CONSULTATION',
+        page: 1,
+        rows: 20
+      }
+    });
+
+    const getList = async () => {
+      try {
+        if (form.isClick) return;
+        form.isClick = true;
+        const res = await request.post('/edu-app/helpCenterContent/page', {
+          data: {
+            ...form.params,
+            catalogType: 'STUDENT'
+          }
+        });
+        form.listState.loading = false;
+        const result = res.data || {};
+        // 处理重复请求数据
+        if (form.list.length > 0 && result.current === 1) {
+          return;
+        }
+        form.list = form.list.concat(result.rows || []);
+        form.listState.finished = result.current >= result.pages;
+        form.params.page = result.current + 1;
+        form.listState.dataShow = form.list.length > 0;
+        form.isClick = false;
+      } catch {
+        form.listState.dataShow = false;
+        form.listState.finished = true;
+        form.isClick = false;
+      }
+    };
+
+    const onSearch = (val: any) => {
+      form.params.keyword = val;
+      form.params.page = 1;
+      form.list = [];
+      form.listState.dataShow = true; // 判断是否有数据
+      form.listState.loading = false;
+      form.listState.finished = false;
+      getList();
+    };
+
+    const onDetail = (item: any) => {
+      if (item.linkType === 'OUT') {
+        window.location.href = item.linkUrl;
+      } else {
+        router.push({
+          path: '/information-detail',
+          query: {
+            id: item.id
+          }
+        });
+      }
+    };
+
+    onMounted(() => {
+      getList();
+    });
+    return () => (
+      <div
+        class={[
+          styles.helpCenter,
+          !form.listState.dataShow && 'emptyRootContainer'
+        ]}>
+        <OSticky position="top">
+          <OHeader border={false} />
+          <OSearch onSearch={onSearch} />
+        </OSticky>
+
+        {form.listState.dataShow ? (
+          <List
+            // v-model:loading={form.listState.loading}
+            finished={form.listState.finished}
+            finishedText=" "
+            class={[styles.container, styles.containerInformation]}
+            onLoad={getList}
+            immediateCheck={false}>
+            {form.list.map((item: any) => (
+              <Cell
+                class={styles.cell}
+                onClick={() => onDetail(item)}
+                titleStyle={{
+                  display: 'flex',
+                  flexDirection: 'column',
+                  justifyContent: 'space-between'
+                }}>
+                {{
+                  icon: () => (
+                    <div
+                      class={[styles.img, styles.bgImg]}
+                      style={
+                        item.coverImage
+                          ? {
+                              backgroundImage: `url(${item.coverImage})`,
+                              backgroundSize: 'cover'
+                            }
+                          : ''
+                      }></div>
+                  ),
+                  // <Image src={item.coverImage} class={styles.img} fit="cover" />,
+                  title: () => (
+                    <>
+                      <div class={[styles.title, 'van-ellipsis']}>
+                        {item.title}
+                      </div>
+                      <div class={[styles.content, 'van-multi-ellipsis--l2']}>
+                        {item.summary}
+                      </div>
+
+                      <div class={styles.time}>
+                        {item.createTime
+                          ? dayjs(item.createTime).format('YYYY年MM月DD日')
+                          : ''}
+                      </div>
+                    </>
+                  )
+                }}
+              </Cell>
+            ))}
+          </List>
+        ) : (
+          <OEmpty description="暂无数据" />
+        )}
+      </div>
+    );
+  }
+});

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

@@ -0,0 +1,43 @@
+.detail {
+  background-color: #fff;
+  min-height: 100vh;
+  font-size: 15px;
+  color: #333333;
+  line-height: 25px;
+
+  .detailContent {
+    padding: 18px;
+  }
+
+  .title {
+    font-size: 20px;
+    font-weight: 600;
+    color: #333333;
+    line-height: 28px;
+  }
+
+  .who {
+    padding-top: 15px;
+    font-size: 14px;
+    color: #aaaaaa;
+    line-height: 20px;
+    span {
+      font-weight: 500;
+      color: #f67146;
+      padding-right: 10px;
+    }
+  }
+
+  .content {
+    padding-top: 24px;
+    word-wrap: break-word;
+    word-break: break-all;
+
+    img {
+      width: 100%;
+      padding: 6px 0;
+      border-radius: 6px;
+      overflow: hidden;
+    }
+  }
+}

src/views/information/information-detail.tsx

@@ -0,0 +1,43 @@
+import OHeader from '@/components/o-header'
+import request from '@/helpers/request'
+import { state } from '@/state'
+import { defineComponent, onMounted, ref } from 'vue'
+import { useRoute } from 'vue-router'
+import styles from './information-detail.module.less'
+
+export default defineComponent({
+  name: 'orchestra-information-detail',
+  setup() {
+    const route = useRoute()
+    const detail = ref<any>({})
+
+    const getDetails = async () => {
+      try {
+        const { data } = await request.get(
+          state.platformApi + '/sysNewsInformation/detail/' + route.query.id
+        )
+        detail.value = data
+      } catch {
+        //
+      }
+    }
+
+    onMounted(() => {
+      getDetails()
+    })
+    return () => (
+      <div class={styles.detail}>
+        <OHeader />
+        <div class={styles.detailContent}>
+          <div class={styles.title}>{detail.value.title}</div>
+          <div class={styles.who}>
+            <span>管乐团</span>
+            {detail.value.createTime}
+          </div>
+
+          <div class={styles.content} v-html={detail.value.content}></div>
+        </div>
+      </div>
+    )
+  }
+})

src/views/information/message-detail.tsx

@@ -0,0 +1,43 @@
+import OHeader from '@/components/o-header'
+import request from '@/helpers/request'
+import { state } from '@/state'
+import { defineComponent, onMounted, ref } from 'vue'
+import { useRoute } from 'vue-router'
+import styles from './information-detail.module.less'
+
+export default defineComponent({
+  name: 'orchestra-information-detail',
+  setup() {
+    const route = useRoute()
+    const detail = ref<any>({})
+
+    const getDetails = async () => {
+      try {
+        const { data } = await request.get(
+          state.platformApi + '/sysMessage/detail/' + route.query.id
+        )
+        detail.value = data
+      } catch {
+        //
+      }
+    }
+
+    onMounted(() => {
+      getDetails()
+    })
+    return () => (
+      <div class={styles.detail}>
+        <OHeader />
+        <div class={styles.detailContent}>
+          <div class={styles.title}>{detail.value.title}</div>
+          <div class={styles.who}>
+            <span>管乐团</span>
+            {detail.value.createTime}
+          </div>
+
+          <div class={styles.content} v-html={detail.value.content}></div>
+        </div>
+      </div>
+    )
+  }
+})

src/views/information/notice-detail.tsx

@@ -0,0 +1,43 @@
+import OHeader from '@/components/o-header'
+import request from '@/helpers/request'
+import { state } from '@/state'
+import { defineComponent, onMounted, ref } from 'vue'
+import { useRoute } from 'vue-router'
+import styles from './information-detail.module.less'
+
+export default defineComponent({
+  name: 'notice-detail',
+  setup() {
+    const route = useRoute()
+    const detail = ref<any>({})
+
+    const getDetails = async () => {
+      try {
+        const { data } = await request.get(
+          state.platformApi + '/sysNotice/detail/' + route.query.id
+        )
+        detail.value = data
+      } catch {
+        //
+      }
+    }
+
+    onMounted(() => {
+      getDetails()
+    })
+    return () => (
+      <div class={styles.detail}>
+        <OHeader />
+        <div class={styles.detailContent}>
+          <div class={styles.title}>{detail.value.title}</div>
+          <div class={styles.who}>
+            <span>管乐团</span>
+            {detail.value.createTime}
+          </div>
+
+          <div class={styles.content} v-html={detail.value.content}></div>
+        </div>
+      </div>
+    )
+  }
+})