usky-web-mobile/src/pages/mine/help/index.vue

<template>
  <view class="help-container">
    <u-navbar :titleStyle="{ color: '#fff' }" :autoBack="true" title="常见问题" :placeholder="true" :safeAreaInsetTop="true" :bgColor="proxy.$settingStore.themeColor.color">
      <template #left>
        <view class="u-nav-slot">
          <u-icon name="arrow-left" size="19" color="#fff"></u-icon>
        </view>
      </template>
    </u-navbar>

    <view class="uni-content-header"></view>
    <view class="uni-content-body">
      <view class="list-title" v-for="(item, findex) in list" :key="findex" :title="item.title">
        <view class="text-title"> <view :class="item.icon"></view>{{ item.title }} </view>
        <view class="childList">
          <view v-for="(child, zindex) in item.childList" :key="zindex" class="question" hover-class="hover" @click="handleText(child)">
            <view class="text-item">{{ child.title }}</view>
            <view class="line" v-if="zindex !== item.childList.length - 1"></view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { onReady, onLoad, onShow, onNavigationBarButtonTap } from "@dcloudio/uni-app";
import { ref, onMounted, inject, computed, shallowRef, reactive, getCurrentInstance, toRefs } from "vue";
import { publicStores, useStores } from "@/store/modules/index";

const useStore = useStores();

const { proxy } = getCurrentInstance();

const data = reactive({
  list: [
    // {
    //   icon: 'iconfont icon-github',
    //   title: '若依问题',
    //   childList: [{
    //     title: '若依开源吗？',
    //     content: '开源'
    //   }, {
    //     title: '若依可以商用吗？',
    //     content: '可以'
    //   }, {
    //     title: '若依官网地址多少？',
    //     content: 'http://ruoyi.vip'
    //   }, {
    //     title: '若依文档地址多少？',
    //     content: 'http://doc.ruoyi.vip'
    //   }]
    // },
    {
      icon: "iconfont ucicon-Help",
      title: "其他问题",
      childList: [
        {
          title: "如何退出登录？",
          content: "请点击[我的] - [应用设置] - [退出登录]即可退出登录",
        },
        {
          title: "如何修改用户头像？",
          content: "请点击[我的] - [选择头像] - [点击提交]即可更换用户头像",
        },
        {
          title: "如何修改登录密码？",
          content: "请点击[我的] - [应用设置] - [修改密码]即可修改登录密码",
        },
      ],
    },
  ],
});

const { list } = toRefs(data);

function handleText(item) {
  proxy.$tab.navigateTo(`/pages/common/textview/index?title=${item.title}&content=${item.content}`);
}

onShow(() => {
  //调用系统主题颜色
  proxy.$settingStore.systemThemeColor([1]);
});
</script>

<style lang="scss" scoped>
.help-container {
  .uni-content-body {
    padding: 30rpx;

    .list-title {
      margin-bottom: 30rpx;
    }

    .childList {
      background: #ffffff;
      box-shadow: 0px 0px 10rpx rgba(193, 193, 193, 0.2);
      border-radius: 16rpx;
      margin-top: 10rpx;
    }

    .line {
      width: 100%;
      height: 1rpx;
      background-color: #f5f5f5;
    }

    .text-title {
      display: flex;
      color: #303133;
      font-size: 32rpx;
      font-weight: bold;
      margin-left: 10rpx;

      .iconfont {
        font-size: 16px;
        margin: auto 10rpx auto 0;
      }
    }

    .text-item {
      font-size: 28rpx;
      padding: 24rpx;
    }

    .question {
      color: #606266;
      font-size: 28rpx;
    }
  }
}
</style>