tall-mui-3-project/src/components/Globals/Globals.vue

<template>
  <view class="m-2">
    <u-card :show-foot="false" :show-head="false" :style="{ height: isShrink ? '96rpx' : '300rpx' }" border-radius="25" margin="0">
      <view slot="body">
        <scroll-view :scrollY="true" :style="{ height: isShrink ? '40rpx' : '240rpx' }">
          <skeleton :banner="false" :loading="loading" :row="4" animate class="mt-2 u-line-2 skeleton"></skeleton>
          <view class="p-0 u-col-between">
            <view class="grid grid-cols-3 gap-2 h-36" v-if="plugins.length">
              <Plugin
                :pluginId="pluginId"
                :styleType="styleType"
                v-for="(plugin, pluginIndex) in plugins"
                :key="pluginIndex"
                :class="getClass(plugin.col, plugin.row)"
              />
            </view>
          </view>
        </scroll-view>
      </view>
    </u-card>
  </view>
</template>

<script>
import { mapState } from 'vuex';
import Skeleton from '@/components/Skeleton/Skeleton';

export default {
  name: 'Global',
  components: { Skeleton },
  data() {
    return {
      loading: true,
      pluginId: 0,
      styleType: 0,
      task: null,
      plugins: [],
    };
  },
  async created() {
    const permanent = await this.$u.api.getPermanent({ roleId: 0 });
    const res = await this.$u.api.getGlobal({
      roleId: 0,
      timeNode: new Date().getTime(),
      timeUnit: 7,
    });
    for (let item of res.plugins) {
      this.plugins.push(...item);
    }
    this.task = res;
    console.log('permanent', permanent);
  },
  mounted() {
    setTimeout(() => (this.loading = false), 5000);
  },
  computed: mapState('home', ['isShrink']),
  methods: {
    getClass(col, row) {
      return [`row-span-${row}`, `col-span-${col}`];
    },
  },
};
</script>

<style scoped lang="scss">
.u-card-wrap {
  background-color: $u-bg-color;
  padding: 1px;
}

.u-body-item {
  font-size: 32rpx;
  color: #333;
  padding: 20rpx 10rpx;
}

.u-body-item image {
  width: 120rpx;
  flex: 0 0 120rpx;
  height: 120rpx;
  border-radius: 8rpx;
  margin-left: 12rpx;
}
</style>