guosen-ldt-client/pages/consume/detail/comps/shop-activity.vue

<template>
	<view class="content">
		<view class="item" v-if="!$isEmpty(list)">
			<view class="card" @click="goDetail(item.id)" v-for="(item,index) in list" :key="index">
				<view class="left">
					<image :src="item.pic" mode=""></image>
				</view>
				<view class="right">
					<view class="title text-cut-1">
						<text class="">{{item.title}}</text>
					</view>
					<view class="data">
						<view class="">
							<view style="display: flex;">
								<u-icon name="bag"  size="30"></u-icon>
								<view class="" style="margin-right: 20rpx;font-size: 26rpx;">
									<text class="text-red" style="margin: 0 10rpx;">{{item.supplyPrice/10}}</text>
									<text>折优惠</text>
								</view>
							</view>
						</view>
					</view>
					
					<view  class="flex justify-start"
						style="margin-top: 18rpx;width: 100%;color: #999;font-size: 26rpx;">
						<view class="center margin-right-10" >
							<text class="cuIcon-time"></text>
						</view>
						<view class=" flex flex-direction justify-end">{{item.beginTime | date('mm/dd hh:MM')}}</view>
						<view class="" style="padding: 0 20rpx;">至</view>
						<view class=" flex flex-direction justify-end">{{item.endTime | date('mm/dd hh:MM')}}</view>
					</view>
					<view class="text-cut-2" style="width: 100%;height: 32rpx;margin-top: 14rpx;">
						<view v-for="(item1,index1) in item.labelNames.split(',')" :key="index1" class="cu-tag sm "
							style="background-color: #fff0d9;color: #ff7001;">
							{{item1}}
						</view>
					</view>
				</view>
			</view>
		</view>
		<view style="margin-top: 300rpx;" v-else>
			<u-empty icon-size="300" text="暂无活动" src="/static/agent/empty.png"></u-empty>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			shopId: String
		},
		data() {
			return {
				list:[]
			}
		},
		created() {
			this.fetchList()
		},
		methods: {
			fetchList(){
				let params={
					sponsorId:this.shopId,
					sponsorType:2,
					auditStatus:1
				}
				this.$api.activity.list(params).then(res=>{
					this.list=res.data.records
				})
			},
			goDetail(id){
				
			}
		}
	}
</script>

<style lang="scss">
	.item {
		background-color: #FFFFFF;
		padding:20rpx 30rpx;
		display: flex;
		flex-direction: column;
		margin-top: 20rpx;
	
		.card {
			margin-bottom: 20rpx;
			display: flex;
			border-bottom: 1rpx solid #ececec;
			padding-bottom: 20rpx;
	
			.left {
				width: 30%;
	
				image {
					width: 100%;
					border-radius: 12rpx;
					height: 180rpx;
				}
			}
	
			.right {
				margin-left: 20rpx;
				display: flex;
				width: 70%;
				flex-direction: column;
	
				.title {
					font-size: 30rpx;
					font-weight: 800;
				}
	
				.data {
					margin-top: 20rpx;
					display: flex;
					justify-content: space-between;
					font-size: 24rpx;
					color: #666666;
				}
	
				.label {
					margin-top: 10rpx;
				}
			}
		}
	
		.card:last-child {
			border: none;
			margin-bottom: 0;
			padding-bottom: 0;
		}
	}
</style>