91fans_h5/src/views/lldmine/questionsAnswers/index.vue

<template>
  <div class="help-center">
    <Header class="header" title="常见问题" right-icon="" />
    <div v-if="!state.loading" class="help-center-content">
      <van-collapse v-model="activeName" accordion>
        <van-collapse-item :title="item.name" :name="item.type" v-for="item in typeList" :key="item.type">
          <!-- {{ item.content }} -->
          <div class="content-text" v-html="item.content"></div>
          <!-- <van-cell :title="item.title" is-link @click="handleClick(item)" v-for="item in item.list" :key="item.id" /> -->
        </van-collapse-item>
      </van-collapse>
    </div>
    <Loading v-else />
  </div>
</template>
<script lang="ts">
export default {
  name: 'Help',
};
</script>
<script lang="ts" setup>
import { ref, onMounted, reactive, nextTick } from 'vue';
import { useRouter } from 'vue-router';
import MineApi from '@/service/mine';
const router = useRouter();
const activeName = ref(1);
const state = reactive({
  loading: false,
});
const typeList = ref([
  {
    name: '描述文件安装失败?',
    type: 1,
    content:
      '若提示【新的MDM有效负载与旧的有效负载不匹配】，请移除移动设备管理步骤：【设置-通用-设备管理-移动设备管理-移除管理】',
  },
  {
    name: '怎么找回账号？',
    type: 2,
    content:
      '本平台登录会自动创建账号，需保存账号凭证或绑定手机号码，才能记录之前的账号信息。受行业限制，APP无法正常使用时需升级，未绑定手机号码会导致账号信息丢失。请及时绑定手机号码或保存账号凭证，以免VIP信息丢失，造成巨大财产损失！账号丢失的用户可在 『我的』页面-账号找回，原账号的VIP信息会转移至新账号上。',
  },
  {
    name: '怎么支付不成功？',
    type: 3,
    content:
      '1.因超时支付无法到账，请重新发起。<br/>2.每天发起支付不能超过5次，连续发起且未支付，账号可能被加入黑名单。<br/>3.支付通道在夜间比较忙碌，尝试多次发起，后台会为您自动切换不同支付通道。<br/>4.若充值成功，用户权益通常会在数分钟内到账，请刷新APP或重启。',
  },
  {
    name: '收到手机报毒提醒？',
    type: 4,
    content:
      '本平台有主要收益为广告赞助，且保证APP安全无毒，因平台主要展示内容为色情属于特殊行业，某些杀毒软件会误报毒提醒，如遇此类提醒请忽略继续使用。',
  },
  // {
  //   name: '如何填写邀请码',
  //   type: 6,
  //   content: '在「我的」页面点击个人头像或设置即可跳转页面,然后点击「输入推广码」打开新页面,输入对方的推广码即可(邀请码字母大写)',
  // },
  // {
  //   name: '忘记密码,如何找回账号',
  //   type: 7,
  //   content: '本平台登录会自动创建账号，需保存账号凭证或绑定手机号码，才能记录之前的账号信息。受行业限制，APP无法正常使用时需升级，未绑定手机号码会导致账号信息丢失。请及时绑定手机号码或保存账号凭证，以免VIP信息丢失，造成巨大财产损失！账号丢失的用户可在 『我的』页面-账号找回，原账号的VIP信息会转移至新账号上。',
  // },
]);
const getHelpList = async (val?: number) => {
  // console.log(activeName.value, 'activeName.value');
  // if (val) {
  //   activeName.value = val;
  // }
  nextTick(async () => {
    if (!activeName.value) return;
    try {
      // const res = await MineApi.getAppHelpInfo({
      //   pageNumber: 1,
      //   pageSize: 50,
      //   type: activeName.value,
      // });
      // if (typeList.value[activeName.value - 1]?.list.length === 0) {
      //   typeList.value[activeName.value - 1].list = res.list || [];
      // }
    } catch (error) {
      console.log(error);
    } finally {
      state.loading = false;
    }
  });
};
onMounted(() => {
  state.loading = true;
  getHelpList();
});

const handleClick = (item: any) => {
  sessionStorage.setItem('helpData', JSON.stringify(item));
  router.push({
    path: '/helpDetail',
    query: {
      title: item.title,
    },
  });
};
</script>
<style lang="scss" scoped>
.help-center {
  background-color: #0f0f0f;
  padding-bottom: 50px;
  height: 100vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  .help-center-content {
    padding: 10px 16px;
  }
  .help-center-tips {
    display: flex;
    align-items: center;
    padding: 16px;
    img {
      width: 65px;
      height: 65px;
      // background-color: #fff;
      border-radius: 50%;
      overflow: hidden;
    }
    .help-center-tips-text {
      margin-left: 10px;
      line-height: 22px;
      font-size: 16px;
      color: rgba(41, 41, 41, 1);
      font-weight: 500;
      overflow: hidden;
      flex: 1;
    }
  }
  :deep(.van-collapse-item__content) {
    background-color: rgba(255, 255, 255, 0.05);
    color: rgba(152, 152, 152, 1);
    .van-cell {
      background-color: rgba(255, 255, 255, 0.05);
      padding-right: 0;
    }
  }
  :deep(.van-collapse-item--border) {
    &::after {
      border-top: 1px solid rgba(255, 255, 255, 0.1);
    }
  }
  :deep(.van-cell) {
    height: 56px;
    line-height: 56px;
    align-items: center;
    background-color: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.9);
    &::after {
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }
  }
  :deep() {
    .van-collapse {
      overflow: hidden;
      border-radius: 10px;
    }
    .van-hairline--top-bottom:after,
    .van-hairline-unset--top-bottom:after {
      border: none;
    }
    .content-text {
      line-height: 30px;
    }
    .van-icon-arrow {
      color: #fff;
    }
  }
}
</style>