mycajt/pages/product/giftBag.vue

<template>
	<view class="container padding-t-20">
		<view class="uservip flex margin-b-20" v-for="(ls, index) in userServant" @click="navToDetailPage(ls)">
			<image @error="onImageError('userServant', index)" lazy-load :src="ls.image" mode="aspectFill"></image>
			<view class="detail">
				<view class="title">{{ ls.store_name }}</view>
				<view class="icon" v-if="ls.mer_id == 0">自营</view>
				<view class="flex price-box">
					<view class="price">
						<text class="font-size-sm">￥</text>
						{{ ls.price  }}
					</view>
					<view class="text">售出{{ ls.sales }}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { loadIndexs } from '@/api/index.js';
export default {
	data() {
		return {
			userServant: []
		};
	},
	onLoad(option) {
		this.loadData();
	},
	methods: {
		navToDetailPage: function(ls) {
			uni.navigateTo({
				url: '/pages/product/product?id=' + ls.id
			});
		},
		// 请求载入数据
		async loadData() {
			loadIndexs({}).then(({ data }) => {
				this.userServant = data.info.platoonList; //服务商品
			});
		},
	}
};
</script>

<style lang="scss">
page {
	background: $page-color-base;
}
// 会员升级礼包
.uservip {
	border-radius: $border-radius-sm;
	background-color: white;
	box-shadow: $box-shadow;
	height: 300rpx;
	margin: 0 30rpx;
	image {
		height: 100%;
		width: 300rpx;
	}
	.detail {
		position: relative;
		padding: 20rpx;
		height: 100%;
		flex-grow: 1;
		.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;
		}
		.price-box {
			position: absolute;
			bottom: 20rpx;
			width: calc(100% - 40rpx);
			.price {
				font-size: $font-lg + 2rpx;
				font-weight: bold;
				color: $font-color-base;
			}
			.text {
				color: $color-gray;
				font-size: $font-sm;
			}
		}
		.title {
			font-size: $font-lg;
			font-weight: bold;
		}
	}
}
</style>