cczg-lottery-activity/pages/simpleshop/index/index.vue

<template>
	<view class="content">
		<view class="swiper">
			<!-- <u-swiper :list="list" previousMargin="128" nextMargin="128" keyName="url" circular :autoplay="false"
				radius="5" height="360rpx" bgColor="none" imgMode="aspectFit"></u-swiper> -->
		<u--image :src="list[2].url" width="258rpx" mode="aspectFit"></u--image>
		<u--image :src="list[0].url" width="362rpx" mode="aspectFit"></u--image>
		<u--image :src="list[1].url" width="258rpx" mode="aspectFit"></u--image>
		</view>
		<view class="product-list">
			<view class="wxljtitle"></view>
			<view class="listcontainer">
				<view v-for="(item,index) in products" :key="item.id">
					<productcard :product="item" ></productcard>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import productcard from '@/pages/simpleshop/components/productcard.vue'
	import api from '@/api/api.js'
	import {acstore} from '@/store/activities.js'
	export default {
		data() {
			return {
				userinfo:{},
				list: [{
					url: require('@/static/images/banner_50.png'),
					title: '',
				}, {
					url: require('@/static/images/banner_30.png'),
					title: ''
				}, {
					url: require('@/static/images/banner_15.png'),
					title: ''
				}],
				products:[
					// {
					// 	id:1,
					// 	title:"15元立减金",
					// 	price:1500,
					// 	url:require("@/static/images/ljjsample.png"),
					// 	tag:"微信立减金",
					// 	inventory:66
					// },
				],
				activityId:undefined
			}
		},
		components: {
			productcard
		},
		methods: {
			getProducts(){
				api.getproducts({
					activity_id: this.activityId
				}).then((res)=>{
					if(res.data.code == 200){
						const data = res.data.data
						this.products = data.prizes.map((item)=>{
							return {
								id:item.id,
								title:item.name,
								price:item.integral,
								url:item.icon,
								tag:"微信立减金",
								inventory:item.num
							}
						})
					}else{
						uni.showToast({
							title: res.data.message,
							icon: "none"
						})
					}
				})
			},
		},
		mounted(){
			
		},
		onShow(){
			acstore.dispatch('getactivitId').then((res)=>{
				this.activityId =  parseInt(res.activitId)
				this.getProducts()	
			})
					
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: start;
		/* height: calc(100vh - 240rpx); */
		background-image: url('@/static/images/shopbackground_1.png');
		background-repeat: no-repeat;
		background-size: 100% auto;
		background-color: #00A8EA;
		padding-bottom: 180rpx;
		width: 100%;
		overflow-x: hidden;
	}

	.swiper {
		margin-top: 360rpx;
		width: 100%;
		height: 406rpx;
		display: flex;
		justify-content: center;
	}

	.product-list {
		width: 694rpx;
		/* height: 1280rpx; */
		box-shadow: inset 0rpx 2rpx 0rpx 0rpx #FFFFF0;
		border-radius: 40rpx 40rpx 40rpx 40rpx;
		border: 4rpx solid #F2F0B8;
		margin-top: 68rpx;
		background-color: #E8F9FD;
		/* background-color: #FFFFFF; */
		padding-bottom: 60rpx;
	}

	.wxljtitle {
		background-image: url('@/static/images/wxljtitle.png');
		background-repeat: no-repeat;
		background-size: cover;
		width: 312rpx;
		height: 102rpx;
		position: relative;
		top: -6px;
	}

	.listcontainer {
		margin-top: 20rpx;
		width: 100%;
		margin-left:calc(50% - 310rpx);
		display: flex;
		flex-wrap: wrap;
		justify-content: start;
		gap: 28rpx;
	}
</style>