<template>
	<view class="container">


    <view class="cu-card dynamic" v-for="(item,index) in teamInfoList" :key="index">
      <uni-section title="拼团名称" 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">拼团</text>
              </view>
            </view>
          </template>

          <uni-list>
            <uni-list-item title="拼团详情" showArrow></uni-list-item>
          </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>



	</view>
</template>

<script>

import { getList } from 'api/marketing/marketing'
	export default {
		components: {},


		data() {
			return {
        teamInfoList:[],
        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: {
    getListGoods(){
    getList(this.teamInfoListReq).then(res =>{
      this.teamInfoList=res.data
    })
    },

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

	}
</script>
<style lang="scss">

	.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;
	}
</style>

