studytour-front/pages_order/live/index.vue

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

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

    <view class="header">
      <image class="cover-img" :src="detail.image" mode="widthFix"></image>
      <view class="flex" style="padding: 40rpx 40rpx 0 40rpx;">
        <view class="flex flex-column">
          <view class="title">{{ detail.title }}</view>
          <view class="tag">{{ detail.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.name }}</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="scaleToFill"></image>
          </view>
        </view>
      </view>

    </view>

    <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 formPopup from './formPopup.vue'

  export default {
		mixins: [mixinsList],
    components: {
      SYStackedCarousel,
      formPopup,
    },
    data() {
      return {
        id: null,
        detail: {},
        bannerList: [],
        current: 0,
        queryParams: {
          pageNo: 1,
          pageSize: 10,
          id: '',
        },
        // todo
				mixinsListApi: '',
        // todo: fetch
        isManager: false,
      }
    },
    computed: {
      swiperCurrent() {
        return this.bannerList[this.current]
      },
    },
    onLoad(arg) {
      const { id } = arg
      this.id = id

      this.fetchDetail()

      this.queryParams.id = id
      this.getData()
    },
    methods: {
      async fetchDetail() {
        // todo: fetch
        this.detail = {
          id: '001',
          image: '/static/image/temp-20.png',
          title: '趣玩新加坡',
          createTime: '2025-04-18',
        }
      },
      // todo: delete
      getData() {
        this.list = [
          {
            id: '001',
            avatar: '/pages_order/static/temp-30.png',
            name: '战斗世界',
            address: '241 Orchard Road, Singapore 238863',
            createTime: '2023-04-18 12:00:00',
            images: [
              '/pages_order/static/temp-38.png',
              '/pages_order/static/temp-38.png',
              '/pages_order/static/temp-38.png',
              '/pages_order/static/temp-38.png',
              '/pages_order/static/temp-38.png',
              '/pages_order/static/temp-38.png',
              '/pages_order/static/temp-38.png',
              '/pages_order/static/temp-38.png',
              '/pages_order/static/temp-38.png',
            ]
          },
          {
            id: '001',
            avatar: '/pages_order/static/temp-30.png',
            name: '战斗世界',
            address: '10 Bayfront Avenue, Singapore 018956',
            createTime: '2023-04-18 12:00:00',
            images: [
              '/pages_order/static/temp-38.png',
              '/pages_order/static/temp-38.png',
              '/pages_order/static/temp-38.png',
              '/pages_order/static/temp-38.png',
              '/pages_order/static/temp-38.png',
              '/pages_order/static/temp-38.png',
              '/pages_order/static/temp-38.png',
              '/pages_order/static/temp-38.png',
              '/pages_order/static/temp-38.png',
            ]
          },
        ]
      },
      clickHandler(item, index) {
        console.log("item: ", item);
        console.log("index: ", index);
        this.current = index
      },
      changeHandler(index) {
        console.log("当前触发change事件，返回索引: ", index);
      },
      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>