ruoyi-app/pages/marketing/index.vue

<template>
	<view class="container">

    <view class="cu-card dynamic" v-for="(item,index) in teamInfoList" :key="index">
      <uni-section :title="item.name" type="line">
        <uni-card padding="0" spacing="0">
          <template v-slot:cover>
            <view class="custom-cover">
              <image class="cover-image" mode="aspectFill"
                     :src="item.productImage" >
              </image>

              <view class="cover-content">
                <text class="uni-subtitle uni-white">{{item.content+"..."}}</text>
                <text class="uni-subtitle uni-white" v-if=" 'N' == item.status" style="color: red">该活动已结束</text>
                <text class="uni-subtitle uni-white" @click="jumpTeamInfo(item.teamId)" v-if=" 'Y' == item.status" style="color: green">点击我参加</text>
              </view>
            </view>
          </template>

          <uni-list>
          </uni-list>
          <view slot="actions" class="card-actions no-border">
            <view class="card-actions-item" @click="actionsClick('分享')">
              <uni-icons type="pengyouquan" size="18" color="#999"></uni-icons>
              <text class="card-actions-item-text">分享</text>
            </view>
            <view class="card-actions-item" @click="actionsClick('点赞')">
              <uni-icons type="heart" size="18" color="#999"></uni-icons>
              <text class="card-actions-item-text">点赞</text>
            </view>
            <view class="card-actions-item" @click="actionsClick('评论')">
              <uni-icons type="chatbubble" size="18" color="#999"></uni-icons>
              <text class="card-actions-item-text">评论</text>
            </view>
          </view>
        </uni-card>
      </uni-section>
    </view>
    <uni-section title="修改数据长度" type="line" padding>
      <uni-pagination :current="current" :total="this.total" title="标题文字" :show-icon="true" @change="change" />
      <view class="btn-view">
        <view>
          <text class="example-info">当前页：{{ this.current }}，数据总量：{{ this.total }}条，每页数据：{{ pageSize }}</text>
        </view>
      </view>
    </uni-section>
	</view>

</template>

<script>

import { getList } from 'api/marketing/marketing'
import upload from '@/utils/upload'
import request from '@/utils/request'

	export default {
		components: {},
    //分页

		data() {
			return {
        isDisabled: true ,// 控制是否禁用点击
        //分页
        current: 0,
        total: 0,
        pageSize: 0,
        //拼团活动列表
        teamInfoList:[],
        //列表req
        teamInfoListReq : {
          keyWord:"",
          status:"",
          pageNum:1,
          pageSize:3,
          orderByColumn:"",
          isAsc : "asc",
          reasonable : true,
        },
				cover: 'https://qianqiao.obs.cn-east-3.myhuaweicloud.com/567.jpg',
				avatar: 'https://qianqiao.obs.cn-east-3.myhuaweicloud.com/567.jpg',
				extraIcon:{
					color: '#4cd964',
					size: '22',
					type: 'gear-filled'
				}
			}
		},

    created(){
      this.getListGoods();
    },

		methods: {

      add() {
        this.total += 10
      },
      reset() {
        this.total = 0;
        this.current = 1
      },
      change(e) {
        console.log(e)
        this.current = e.current
      },

      //点击 拼团
      jumpTeamInfo(teamId){

        alert(teamId)
      } ,
    getListGoods(){
    getList(this.teamInfoListReq).then(res =>{
      this.teamInfoList=res.data.list;
      this.total=res.data.total;
      this.current=res.data.pageNum;
      this.pageSize=res.data.pageSize;
    })
    },

			onClick(e){
				console.log(e)
			},
			actionsClick(text){
				uni.showToast({
					title:text,
					icon:'none'
				})
			},
		},

	}
</script>
<style lang="scss">
.image-with-overlay {
  position: relative; /* 确保覆盖层能正确叠放 */
}
	.container {
		overflow: hidden;
	}

	.custom-cover {
		flex: 1;
		flex-direction: row;
		position: relative;
	}

	.cover-content {
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		height: 40px;
		background-color: rgba($color: #000000, $alpha: 0.4);
		display: flex;
		flex-direction: row;
		align-items: center;
		padding-left: 15px;
		font-size: 14px;
		color: #fff;
	}

	.card-actions {
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		align-items: center;
		height: 45px;
		border-top: 1px #eee solid;
	}
	.card-actions-item {
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	.card-actions-item-text {
		font-size: 12px;
		color: #666;
		margin-left: 5px;
	}
	.cover-image {
		flex: 1;
		height: 150px;
	}
	.no-border {
		border-width: 0;
	}
  .example-body {
    /* #ifndef APP-NVUE */
    display: block;
    /* #endif */
  }

  .btn-view {
    /* #ifndef APP-NVUE */
    display: flex;
    flex-direction: column;
    /* #endif */
    padding: 15px;
    text-align: center;
    background-color: #fff;
    justify-content: center;
    align-items: center;
  }

  .btn-flex {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
  }

  .button {
    margin: 20px;
    width: 150px;
    font-size: 14px;
    color: #333;
  }
</style>