studytour-front/pages_order/live/index.vue

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

		<navbar :title="liveInfo.title" leftClick @leftClick="$utils.navigateBack" />

    <view class="header">
      <image class="cover-img" :src="liveInfo.url" mode="widthFix"></image>
      <view class="flex" style="padding: 40rpx 40rpx 0 40rpx;">
        <view class="flex flex-column">
          <view class="title">{{ liveInfo.title }}</view>
          <view class="tag">{{ liveInfo.createTime }}</view>
        </view>
        <view v-if="isManager" class="flex operate">
          <view class="btn btn-add" @click="onAdd">新增记录</view>
        </view>
      </view>
    </view>

    <view class="main">

      <view class="section" v-for="item in list" :key="item.id">
        <view class="flex section-header">
          <view class="avatar">
            <image class="avatar-img" :src="item.avatar" mode="scaleToFill"></image>
          </view>
          <view class="info">
            <view class="flex title">
              <view>{{ item.createBy }}</view>
              <image class="icon" src="@/static/image/icon-location.png" mode="widthFix"></image>
              <view class="address text-ellipsis">{{ item.address }}</view>
            </view>
            <view class="desc">{{ item.createTime }}</view>
          </view>
        </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>

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

  </view>
</template>

<script>
	import { mapState } from 'vuex'

	import mixinsList from '@/mixins/list.js'

  import SYStackedCarousel from '@/uni_modules/SY-StackedCarousel/components/SY-StackedCarousel/SY-StackedCarousel.vue'
  import formPopup from './formPopup.vue'

  export default {
		mixins: [mixinsList],
    components: {
      SYStackedCarousel,
      formPopup,
    },
    data() {
      return {
        current: 0,
        queryParams: {
          pageNo: 1,
          pageSize: 10,
          imageId: '',
        },
				mixinsListApi: 'queryImageContentList',
        // todo: fetch
        isManager: true,
      }
    },
    computed: {
			...mapState(['liveInfo']),
    },
    onLoad(arg) {
      const { id } = arg

      this.queryParams.imageId = id
      this.getData()
    },
    methods: {
			getCoverImage(image) {
				return image?.split?.(',')?.[0]
			},
      getDataThen(records) {
        this.list = records.map(item => {
          const { id, avatar, createBy, address, image, createTime } = item

          return {
            id,
            // todo: check key
            avatar: avatar || '/pages_order/static/center/avatar-default.png',
            createBy,
            address,
            images: image?.split?.(',') || [],
            createTime,
          }
        })
      },
      onAdd() {
        this.$refs.formPopup.open()
      },
    },
  }
</script>

<style lang="scss" scoped>

  .header {
    margin-top: 40rpx;
    font-size: 0;

    .cover-img {
      width: 100%;
      height: auto;
      border-radius: 40rpx;
    }

    .title {
      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;
    }

    .operate {
      flex: 1;
      justify-content: flex-end;
      
      .btn-add {
        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;
      } 
    }
  }

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

  .section {
    margin-top: 40rpx;

    &-header {
      column-gap: 24rpx;

      .avatar {
        flex: none;
        width: 100rpx;
        height: 100rpx;
        border: 4rpx solid #FFFFFF;
        border-radius: 50%;
        overflow: hidden;

        &-img {
          width: 100%;
          height: 100%;
        }
      }

      .info {
        flex: 1;
        min-width: 0;

        .title {
          column-gap: 8rpx;
          white-space: nowrap;
          font-size: 36rpx;
          font-weight: 600;
          color: #252545;

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

          .address {
            flex: 1;
            font-weight: 400;
            font-size: 24rpx;
            color: #00A9FF;
          }
        }

        .desc {
          margin-top: 8rpx;
          font-size: 24rpx;
          font-weight: 400;
          color: #8B8B8B;
        }
      }

    }

    &-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>