studytour-front/pages_order/live/list.vue

<template>
	<view class="page__view highlight">

		<navbar title="图片直播" leftClick @leftClick="$utils.navigateBack" />

    <view class="swiper">
      <SYStackedCarousel
        height="536rpx"
        :images="list"
        :current="current"
        :autoplay="true"
        horizontalMargin="25"
        baseOpacity="0.5"
        bgColor="transparent"
        padding="0"
        @click="clickHandler"
        @change="changeHandler"
      >
      </SYStackedCarousel>
      <view class="flex flex-column" v-if="swiperCurrent">
        <view class="title">{{ swiperCurrent.title }}</view>
        <view class="tag">{{ swiperCurrent.createTime }}</view>
      </view>
    </view>

    <view class="main">
      <view class="flex header">
        <view>图片直播</view>
        <view class="btn btn-mark" @click="onMark">标记有我</view>
      </view>

      <view class="section" v-for="item in list" :key="item.id">
        <view class="flex section-header">
          <view class="flex title">
            <view>{{ item.title }}</view>
            <view v-if="isManager" class="btn btn-add" @click="onAdd(item.id)">新增记录</view>
          </view>
          <button class="flex btn btn-all" @click="showAll(item.id)">
            <view>查看全部</view>
            <image class="icon" src="@/static/image/icon-arrow-right.png" mode="widthFix"></image>
          </button>
        </view>
        <view class="section-content record">
          <view class="record-item" v-for="(image, imgIdx) in item.images" :key="imgIdx">
            <image class="img" :src="image" mode="aspectFill"></image>
          </view>
        </view>
      </view>
    </view>

    <markPopup ref="markPopup"></markPopup>
    <formPopup ref="formPopup" @submitted="getData"></formPopup>

  </view>
</template>

<script>
	import mixinsList from '@/mixins/list.js'

  import SYStackedCarousel from '@/uni_modules/SY-StackedCarousel/components/SY-StackedCarousel/SY-StackedCarousel.vue'
  import markPopup from '@/pages_order/growing/activity/markPopup.vue'
  import formPopup from './formPopup.vue'

  export default {
		mixins: [mixinsList],
    components: {
      SYStackedCarousel,
      markPopup,
      formPopup,
    },
    data() {
      return {
        current: 0,
				mixinsListApi: 'queryImageList',
        // todo: fetch
        isManager: true,
      }
    },
    computed: {
      swiperCurrent() {
        return this.list[this.current]
      },
    },
    async onLoad() {
      this.getData()
    },
    methods: {
      getDataThen(records) {
        this.list = records.map(item => {
          const { id, image, activityId_dictText, createTime } = item

          const images = image?.split?.(',') || []

          return {
            id,
            url: images?.[0],
            images,
            title: activityId_dictText,
            createTime: this.$dayjs(createTime).format('YYYY-MM-DD'),
          }
        })
      },
      clickHandler(item, index) {
        this.current = index
      },
      changeHandler(index) {
        console.log("当前触发change事件，返回索引: ", index);
      },
      onMark() {
        this.$refs.markPopup.open(this.id)
      },
      onAdd() {
        this.$refs.formPopup.open()
      },
      showAll(id) {
        this.$store.commit('setLiveInfo', this.list.find(item => item.id === id))
				this.$utils.navigateTo(`/pages_order/live/index?id=${id}`)
      },
    },
  }
</script>

<style lang="scss" scoped>

  .swiper {
    margin-top: 40rpx;

    .title {
      margin-top: 12rpx;
      font-size: 28rpx;
      font-weight: 600;
      color: #252545;
    }

    .tag {
      margin-top: 4rpx;
      padding: 2rpx 8rpx;
      font-size: 24rpx;
      color: #00A9FF;
      background: #E0F5FF;
      border-radius: 8rpx;
    }
  }

  .main {
    padding: 0 40rpx 40rpx 40rpx;
  }

  .header {
    justify-content: space-between;
    font-size: 40rpx;
    font-weight: 600;
    color: #252545;
    
    .btn-mark {
      padding: 6rpx 22rpx;
      font-family: PingFang SC;
      font-size: 28rpx;
      font-weight: 500;
      line-height: 1.5;
      color: #FFFFFF;
      background: linear-gradient(to right, #21FEEC, #019AF9);
      border: 2rpx solid #00A9FF;
      border-radius: 30rpx;
    } 
  }

  .section {
    margin-top: 64rpx;

    &-header {
      justify-content: space-between;
      font-size: 36rpx;
      font-weight: 500;
      color: #191919;

      .title {
        flex: 1;
        justify-content: flex-start;
        column-gap: 8rpx;

        .btn-add {
          padding: 8rpx 24rpx;
          font-size: 28rpx;
          font-weight: 500;
          line-height: 1.5;
          color: #252545;
          border: 2rpx solid #252545;
          border-radius: 30rpx;
        }
      }

      .btn-all {
        column-gap: 4rpx;
        font-size: 24rpx;
        line-height: 1.4;
        color: #8B8B8B;

        .icon {
          width: 32rpx;
          height: auto;
        }
      }
    }

    &-content {
      margin-top: 24rpx;
    }
  }

  .record {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16rpx;

    &-item {
      height: 300rpx;
      border: 2rpx solid #CDCDCD;
      border-radius: 12rpx;
      overflow: hidden;

      .img {
        width: 100%;
        height: 100%;
      }
    }
  }
</style>