shicai/pages/product/Gift.vue

<template>
	<view class="container">
		<view id="list-box" class="list-box" :style="{ height: swiperHeight + 'px' }">
			<view class="guess-section">
				<view v-for="(item, index) in list" :key="index" class="guess-item">
					<view class="imagewrapper"><image :src="item.image"></image></view>
					<view class="guess-list">
						<text class="title clamp margin-c-20">{{ item.store_name }}</text>
						<view class="info margin-c-20">{{ item.store_info }}</view>
						<view class="tipBox margin-c-20">
							<view class="tipsl" v-if="item.keyword != ''">
								<text v-for="lss in item.keyword">{{ lss }}</text>
							</view>
						</view>
					</view>
					<view class="receive" @click="Getreceive(item)">领取赠品</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { list,send} from '@/api/user.js';
	export default {
		data() {
			return {
				list:'',
				swiperHeight: 0,
				orderId:''
			}
		},
		onLoad(option) {
			this.orderId = option.orderId;
			this.loadDate();
		},
		watch:{
			// 初次加载页面高度时修改页面高度
			list(newValue, oldValue) {
				let obj = this;
				let bHeight = Math.ceil(newValue.length / 2);
				obj.$nextTick(function() {
					uni.createSelectorQuery()
						.select('#list-box')
						.fields(
							{
								size: true
							},
							function(data) {
								obj.pageProportion = data.width / 750;
								obj.swiperHeight = Math.ceil(obj.pageProportion * 600 * bHeight);
							}
						)
						.exec();
				});
			}
		},
		methods: {
			loadDate(){
				let obj = this;
				list({})
					.then(function(e) {
						obj.list = e.data;
						console.log(e)
					})
					.catch(function(e) {
						console.log(e);
					});
			},
			Getreceive(item){
				let obj = this;
				let id = item.id;
				send({
					gift_id:id,
					order_id:obj.orderId
				})
					.then(function(e) {
						uni.showToast({
							title: '领取成功',
							type: 'top',
							duration: 2000,
							icon: 'none'
						});
						setTimeout(function() {
							uni.switchTab({
								url: '/pages/user/user'
							});
						}, 500);
					})
					.catch(function(e) {
						console.log(e);
					});
			},
		}
	}
</script>

<style lang="scss">
	.container{
		padding: 25rpx 0rpx;
		background-color: #FFFFFF;
	}
	/*公用边框样式*/
	%icon {
		margin-right: 10rpx;
		display: inline-block;
		padding: 2rpx 10rpx;
		border: 1rpx solid $color-yellow;
		color: $color-yellow;
		line-height: 1;
		font-size: $font-base;
		border-radius: 10rpx;
	}
	/* 猜你喜欢 */
	.guess-section {
		display: flex;
		flex-wrap: wrap;
		padding: 0 20rpx;
		background-color: #FFFFFF;
		.guess-item {
			// height: 558rpx;
			position: relative;
			overflow: hidden;
			display: flex;
			flex-direction: column;
			border: 2rpx solid #eeeeee;
			width: 343rpx;
			margin-bottom: 4%;
			border-radius: $border-radius-sm;
			background-color: white;
			padding-bottom: 30rpx;
			&:nth-child(2n + 1) {
				margin-right: 24rpx;
			}
		}
		.imagewrapper {
			width: 100%;
			height: 330rpx;
			border-radius: 3px;
			margin-bottom: 15rpx;
			image {
				width: 100%;
				height: 100%;
				// opacity: 1;
			}
		}
		
		.guess-list{
			height: 190rpx;
			.title {
				font-size: 28rpx;
				color: $font-color-dark;
			}
			.info {
				color: #999999;
				font-size: 24rpx;
			}
			.tipBox{
				// padding-bottom: 8rpx;
				.tipsl {
					text {
						border: 2rpx solid #ff1a27;
						color: #ff1a27;
						border-radius: 5rpx;
						font-size: 18rpx;
						padding: 2rpx 5rpx;
						margin-right: 15rpx;
					}
				}
			}
		}
		
		.icon {
			@extend %icon;
		}
	
		.detail {
			line-height: 1;
		}
		.tip {
			color: white;
			background-color: $color-yellow;
			line-height: 1.5;
			font-size: $font-sm;
			padding-left: 20rpx;
		}
	}
	.receive{
		width: 100%;
		background: #2DBD59;
		padding: 20rpx 0rpx;
		color: #FFFFFF;
		text-align: center;
		position: absolute;
		bottom: 0;
		font-size: 28rpx;
	}
</style>