heshui_shop_frontend/sheep/components/s-businessSchool/s-businessSchool.vue

<template>
    <view class="business">
        <view class="business-school">
            <view class="business-school-title">
                <text class="business-school-title-left">公司及产品资质</text>
            </view>
            <view class="business-school-content">
                <image class="image" :src="item.image" mode="aspectFill" v-for="(item, idx) in state.companyData" :key="item.id" @tap="preivewImg(idx, state.companyData)"></image>    
            </view>
        </view>
        <view class="business-school">
            <view class="business-school-title">
                <text class="business-school-title-left">案例介绍</text>
                <text class="business-school-title-right" @click="sheep.$router.go('/pages/announcement/list', { type: '案例介绍' })">更多 ></text>
            </view>
            <view class="business-school-content">
                 <view class="business-school-content-item" v-for="item in state.articleData" :key="item.id" @click="onDetail(item.id, '营销素材')">
                    <view class="business-school-content-item-left">
                        <image :src="item.image" class="avatar"></image>
                    </view>
                    <view class="business-school-content-item-right">
                        <view class="business-school-content-item-right-title" v-html="item.title"></view>
                        <view class="business-school-content-item-right-time">
                          <view>上传时间：{{ dayjs(item.createtime).format('YYYY.MM.DD') }}</view>
                          <view>更新时间：{{ dayjs(item.updatetime).format('YYYY.MM.DD') }}</view>
                        </view>
                    </view>
                </view>
            </view>
        </view>
        <view class="business-school">
            <view class="business-school-title">
                <text class="business-school-title-left">营销素材</text>
                <text class="business-school-title-right" @click="sheep.$router.go('/pages/announcement/list', { type: '营销素材' })">更多 ></text>
            </view>
            <view class="business-school-content">
                <view class="business-school-content-item" v-for="item in state.saleData" :key="item.id" @click="onDetail(item.id, '营销素材')">
                    <view class="business-school-content-item-left">
                        <image :src="item.image" class="avatar"></image>
                    </view>
                    <view class="business-school-content-item-right">
                        <view class="business-school-content-item-right-title" v-html="item.title"></view>
                        <view class="business-school-content-item-right-time">
                          <view>上传时间：{{ dayjs(item.createtime).format('YYYY.MM.DD') }}</view>
                          <view>更新时间：{{ dayjs(item.updatetime).format('YYYY.MM.DD') }}</view>
                        </view>
                    </view>
                </view>
            </view>
        </view>
  </view>
</template>

<script setup>
  import sheep from '@/sheep';
  import { onLoad } from '@dcloudio/uni-app';
  import { reactive } from 'vue';
  import dayjs from 'dayjs';

  const state = reactive({
    companyData: [],
    articleData: [],
    saleData: [],
  });
  // 获取列表
  async function getList() { 
    let { code, data: { data } } = await sheep.$api.businessSchool.companyList();
    if (code === 1) {
      state.companyData = data;
    } else {
      state.companyData = [];
    }
    let { code: articleCode, data: { data: articleData } } = await sheep.$api.businessSchool.articleList('1');
    if (articleCode === 1) {
      state.articleData = articleData;
    } else {
      state.articleData = [];
    }
    let { code: saleCode, data: { data: saleData } } = await sheep.$api.businessSchool.articleList('2');
    console.log(saleData, 'saleData');
    if (saleCode === 1) {
      state.saleData = saleData;
    } else {
      state.saleData = [];
    }
  }

  function onDetail(orderId, type) {
    sheep.$router.go('/pages/announcement/detail', {
      id: orderId,
      type: type === '公告列表' ? '公告详情': `${type}详情`
    });
  }
  
  function preivewImg(index, imgList) {
    uni.previewImage({
      current: index, // 当前显示图片索引
      urls: imgList.map(val => (val.image)) // 需要预览的图片http链接列表
    });
  }

  onLoad((options) => {
    getList();
  });
</script>

<style lang="scss">
  .business-school {
    background: #FFFFFF;
    border-radius: 15rpx 15rpx 15rpx 15rpx;
    background: #fff;
    margin: 0 25rpx 23rpx;
    padding: 37rpx 35rpx;
    &-title {
      border-left: 10rpx solid var(--ui-BG-Main);
      padding-left: 12rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 31rpx;
      &-left {
        font-weight: bold;
        font-size: 32rpx;
        color: #010101;
        font-style: normal;
        text-transform: none;
      }
      &-right {
        font-weight: 400;
        font-size: 26rpx;
        color: #898989;
        cursor: pointer;
      }
    }
    &-content {
        image {
            width: 132rpx;
            height: 188rpx;
            margin-right: 25rpx;
            &:last-child {
                margin-right: 0;
            }
        }
        &-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            height: 145rpx;
            margin-bottom: 22rpx;
            &-left {
                flex: 0 0 298rpx;
                width: 298rpx;
                height: 100%;
                border-radius: 15rpx 15rpx 15rpx 15rpx;
                .avatar {
                    width: 100%;
                    height: 100%;
                    background: var(--ui-BG-Main);
                    border-radius: 15rpx 15rpx 15rpx 15rpx;
                }
            }
            &-right {
                flex: 1;
                padding-left: 42rpx;
                height: 100%;
                font-weight: 400;
                position: relative;
                height: 145rpx;
                overflow: hidden;
                &-title {
                    font-size: 26rpx;
                    color: #000000;
                    font-style: normal;
                    text-transform: none;
                }
                &-time {
                    font-weight: 400;
                    font-size: 22rpx;
                    color: #898989;
                    font-style: normal;
                    text-transform: none;
                    position: absolute;
                    bottom: 0;
                    left: 42rpx;
                }
            }
            &:last-child {
                margin-bottom: 0;
            }
        }
    }
  }
</style>