修改组件

gaoluyang

2 天以前 025e46e11cb2962fd7692adfa401333758cc779b

 src/pages/template.vue

@@ -1,65 +1,48 @@
<script setup lang="ts">
import tab from "@/plugins/tab";
import list from "./template.config.js";

interface ListItem {
  groupName: string;
  list: FieldItem[];
}

interface FieldItem {
  title: string;
  icon: string;
  path: string;
}

const listData = list as ListItem[];
const getIcon = (path: string) => `../static/uview/demo/${path}.png`;
const openPage = (path: string) => tab.navigateTo(path)
const getGroupTitle = (item: ListItem) => item.groupName;
const getFieldTitle = (item: FieldItem) => item.title;
</script>
<template>
    <view class="wrap">
      <view class="list-wrap">
        <u-cell-group title-bg-color="rgb(243, 244, 246)" :title="getGroupTitle(item)" v-for="(item, index) in list"
          :key="index">
          <u-cell :titleStyle="{ fontWeight: 500 }" @click="openPage(item1.path)" :title="getFieldTitle(item1)"
            v-for="(item1, index1) in item.list" :key="index1">
            <template v-slot:icon>
              <image class="u-cell-icon" :src="getIcon(item1.icon)" mode="widthFix"></image>
            </template>
          </u-cell>
        </u-cell-group>
      </view>
      <u-gap height="70"></u-gap>
      <!-- <u-tabbar :list="vuex_tabbar" :mid-button="true"></u-tabbar> -->
  <view class="wrap">
    <view class="list-wrap">
      <u-cell-group title-bg-color="rgb(243, 244, 246)" :title="getGroupTitle(item)" v-for="(item, index) in listData"
        :key="index">
        <u-cell :titleStyle="{ fontWeight: 500 }" @click="openPage(item1.path)" :title="getFieldTitle(item1)"
          v-for="(item1, index1) in item.list" :key="index1">
          <template v-slot:icon>
            <image class="u-cell-icon" :src="getIcon(item1.icon)" mode="widthFix"></image>
          </template>
        </u-cell>
      </u-cell-group>
    </view>
  </template>
  
  <script>
  import list from "./template.config.js";
  export default {
    data() {
      return {
        list: list,
        // desc: '收集众多的常用页面和布局，减少开发者的重复工作，让你专注逻辑，事半功倍'
      }
    },
    computed: {
      getIcon() {
        return path => {
          return '../static/uview/demo/' + path + '.png';
          return 'https://cdn.uviewui.com/uview/example/' + path + '.png';
        }
      },
    },
    methods: {
      openPage(path) {
        this.$u.route({
          url: path
        })
      },
      getGroupTitle(item) {
        return item.groupName
      },
      getFieldTitle(item) {
        return item.title
      }
    }
  }
  </script>
  
  <style>
  /* page {
          background-color: rgb(240, 242, 244);
      } */
  </style>
  
  <style lang="scss" scoped>
  .u-cell-icon {
    width: 36rpx;
    height: 36rpx;
    margin-right: 8rpx;
  }
  </style>
  
    <u-gap height="70"></u-gap>
  </view>
</template>
<style lang="scss" scoped>
page {
  background-color: rgb(240, 242, 244);
}

.u-cell-icon {
  width: 36rpx;
  height: 36rpx;
  margin-right: 8rpx;
}
</style>