usky-web-mobile/src/pages/business/common/projectMange/write/index.vue

<template>
  <u-sticky class="shadow-default" bgColor="#fff" style="top: 0">
    <u-navbar :titleStyle="{ color: '#000' }" :autoBack="true" title="模板选择" :placeholder="true" :safeAreaInsetTop="true" bgColor="#fff">
      <template #left>
        <view class="u-navbar__content__left__item">
          <u-icon name="arrow-left" size="20" color="#000"></u-icon>
        </view>
      </template>
      <!-- <template #right>
        <view class="u-navbar__content__right__item">
          <u-icon name="more-dot-fill" size="19" color="#000"></u-icon>
        </view>
      </template> -->
    </u-navbar>
  </u-sticky>

  <oa-scroll
    customClass="record-container scroll-height bg-white"
    :isSticky="true"
    :customStyle="{
      //#ifdef APP-PLUS || MP-WEIXIN
      height: 'calc(100vh - 88px)',
      //#endif
    }"
    :refresherLoad="false"
    :refresherEnabled="false"
    :refresherDefaultStyle="'none'"
    :refresherThreshold="44"
    :lowerThreshold="44"
    :refresherBackground="'#f5f6f7'"
    :data-theme="'theme-' + proxy.$settingStore.themeColor.name"
  >
    <template #default>
      <u-loading-page :loading="state.loading" fontSize="16" style="z-index: 99"></u-loading-page>
      <view class="content-area p20">
        <!-- <view class="content-area-title font16 mb20">可使用模板</view> -->
        <u-row class="content-area-row" gutter="10">
          <u-col class="content-area-row-col" :span="4" v-for="item in moreData" :key="item">
            <view class="content-area-row-col-item shadow-default plr10 ptb10" @click="goNavigateTo(item)">
              <div class="font14 mb10" style="font-weight: 600">{{ item.title }}</div>
              <div class="font10 mb10" style="line-height: 16px" v-for="child in item.valueData" :key="child">
                <div style="color: #606266">{{ child.title }}</div>
                <div style="color: #a8abb2">{{ child.value }}</div>
              </div>
            </view>
          </u-col>
        </u-row>
      </view>
    </template>
  </oa-scroll>

  <oa-tabbar :tabbarValue="1" :tabbarList="proxy.$constData.projectTabbar" :isTabbar="false"></oa-tabbar>
</template>

<script setup>
/*----------------------------------依赖引入-----------------------------------*/
import { onLoad, onShow, onReady, onHide, onLaunch, onUnload, onNavigationBarButtonTap, onPageScroll } from "@dcloudio/uni-app";
import { ref, reactive, computed, getCurrentInstance, toRefs, inject } from "vue";
/*----------------------------------接口引入-----------------------------------*/
import { projectApi } from "@/api/business/project.js";
/*----------------------------------组件引入-----------------------------------*/
/*----------------------------------store引入-----------------------------------*/
/*----------------------------------公共方法引入-----------------------------------*/
/*----------------------------------公共变量-----------------------------------*/
const { proxy } = getCurrentInstance();
/*----------------------------------变量声明-----------------------------------*/
const state = reactive({
  moreData: [
    {
      id: 1,
      title: "项目报告",
      valueData: [
        { title: "今日工作内容", value: "请填写" },
        { title: "明日工作计划", value: "请输入" },
        { title: "需协调工作", value: "请输入" },
      ],
    },
    // {
    //   id: 2,
    //   title: "日志",
    //   valueData: [
    //     { title: "今日工作内容", value: "请输入" },
    //     { title: "明日工作计划", value: "请输入" },
    //     { title: "需协调工作", value: "请输入" },
    //   ],
    // },
  ],
});

const { moreData } = toRefs(state);

/**
 * @跳转详情
 */
function goNavigateTo(e) {
  proxy.$tab.navigateTo(`/pages/business/common/projectMange/write/insert?templateId=${e.id}`);
}

onReady(() => {});

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

onLoad((options) => {});

onUnload(() => {});
</script>

<style lang="scss" scoped>
.content-area {
  color: #000000;
}
</style>