supermyc/pages/product/classify.vue

<template>
	<view class="container">
		<view class="jg"></view>
		<view v-if="list.length != 0" class="good-wrapper flex" :key="ind" v-for="(good, ind) in list"
			@click="navTo(good)">
			<image :src="good.image" mode="" class="good-img"></image>
			<view class="good-info flex">
				<view class="tit clamp2">
					{{good.store_name }}
				</view>
				<view class="price-wrap">
					<view class="old-price">
						<text class="old">￥{{good.ot_price}}</text>
						<image src="../../static/icon/down.png" mode=""></image>
						<text class="zj">直降{{good.price - good.ot_price}}元</text>
					</view>
					<view class="integral-wrap">
						<text class="price">￥{{good.ot_price}}</text>
					</view>
				</view>
				<view class="btn">
					立即购买
				</view>
			</view>
		</view>
		<empty v-if="list.length === 0"></empty>
		<view class="jg"></view>
	</view>
	</view>
</template>

<script>
	import empty from '@/components/empty';
	import {
		groomList
	} from '@/api/product.js';
	export default {
		data() {
			return {
				list: [],
				bannerImg: []
			};
		},
		components: {
			empty
		},
		onLoad(option) {
			// 获取查询对象
			this.type = option.type;
			if (this.type == 7) {
				uni.setNavigationBarTitle({
					title: '商家礼包'
				});
			}
			// 加载基础数据
			this.loadData();
		},
		methods: {
			navTo: function(ls) {
				uni.navigateTo({
					url: '/pages/product/product?id=' + ls.id
				});
			},
			// 请求载入数据
			async loadData() {
				groomList({}, this.type)
					.then(({
						data
					}) => {
						// 保存轮播图
						this.bannerImg = data.banner;
						// 保存商品信息
						this.list = data.list;
					})
					.catch(e => {
						console.log(e);
					});
			},
			// 轮播图跳转
			bannerNavToUrl(item) {
				// #ifdef H5
				if (item.wap_link.indexOf('http') > 0) {
					window.location.href = item.wap_link;
				}
				// #endif
				if (item.wap_link) {
					uni.navigateTo({
						url: item.wap_link
					});
				}
			}
		}
	};
</script>

<style lang="scss">
	page {
		background: $page-color-base;
	}

	.good-wrapper {
		width: 690rpx;
		height: 276rpx;
		justify-content: flex-start;
		align-items: flex-start;
		margin: 0 auto 20rpx;
		// &:last-of-type {
		// 	margin-bottom: 0;
		// }
		background: #FFFFFF;
		box-shadow: 0px 0px 20rpx 0px rgba(50, 50, 52, 0.06);
		border-radius: 10rpx;
		padding: 20rpx 25rpx 20rpx 15rpx;

		.good-img {
			flex-shrink: 0;
			background-color: #eee;
			width: 236rpx;
			height: 236rpx;
			border-radius: 10rpx;
			margin-right: 20rpx;
		}

		.good-info {
			flex-direction: column;
			align-items: flex-start;
			width: 100%;
			height: 100%;
			position: relative;

			.tit {
				padding-top: 10rpx;
				padding-right: 15rpx;
				font-size: 32rpx;
				font-family: PingFang SC;
				font-weight: bold;
			}

			.btn {
				width: 137rpx;
				line-height: 52rpx;
				background: linear-gradient(0deg, #52C696 0%, #52C696 100%);
				border-radius: 26rpx;
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: 500;
				text-align: center;
				color: #FFFFFF;
				position: absolute;
				bottom: 0;
				right: 0;
			}

			.price-wrap {
				.old-price {

					.old {
						font-size: 26rpx;
						font-family: PingFang SC;
						font-weight: 500;
						text-decoration: line-through;
						color: #999999;
					}

					image {
						display: inline-block;
						width: 14rpx;
						height: 20rpx;
						margin: 0 6rpx 0 10rpx;
					}

					.zj {
						font-size: 24rpx;
						font-family: PingFang SC;
						font-weight: bold;
						color: #B59467;
					}
				}

				.integral-wrap {
					display: flex;
					justify-content: flex-start;
					padding-top: 14rpx;

					image {
						width: 40rpx;
						height: 40rpx;
						margin-right: 8rpx;
					}

					.price {
						font-size: 36rpx;
						font-family: PingFang SC;
						font-weight: bold;
						color: #FF6F0F;
						line-height: 40rpx;
					}
				}
			}

		}
	}
</style>