supermyc/pages/prefecture/integral.vue

<template>
	<view class="container">
		<view class="jg"></view>
		<view class="good-wrapper flex" v-for="(good ,index) in list" :key="good.id">
			<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.ot_price - good.price}}元</text>
					</view>
					<view class="integral-wrap">
						<image src="../../static/icon/jf.png" mode=""></image>
						<text class="price">{{good.price}}</text>
					</view>
				</view>
				<view class="btn" @click="nav(good.id)">
					立即购买
				</view>
			</view>
		</view>
		<view class="jg"></view>
	</view>

</template>

<script>
	import {
		groomList
	} from '@/api/product.js';
	export default {
		filters: {
			toFixed: function(value) {
				// 判断是否为整数
				if (value % 1 == 0) {
					return value;
				} else {
					return value.toFixed(2);
				}
			}
		},
		data() {
			return {
				list: [],
				bannerImg: []
			};
		},
		onLoad(option) {
			// 加载基础数据
			this.loadData();
		},
		methods: {
			//详情页
			navToDetailPage(item) {
				uni.navigateTo({
					url: '/pages/product/product?id=' + item.id
				});
			},
			// 轮播图跳转
			bannerNavToUrl(item) {
				// #ifdef H5
				if (item.wap_link.indexOf('http') > 0) {
					window.location.href = item.wap_link;
				}
				// #endif
				//测试数据没有写id，用title代替
				uni.navigateTo({
					url: item.wap_link
				});
			},
			// 请求载入数据
			async loadData() {
				groomList({}, 6)
					.then(({
						data
					}) => {
						// 保存轮播图
						this.bannerImg = data.banner;
						// 保存商品信息
						this.list = data.list.map(e => {
							e.price = Number(e.price);
							e.ot_price = Number(e.ot_price);
							return e;
						});
					})
					.catch(e => {
						console.log(e);
					});
			},
			nav(id) {
				uni.navigateTo({
					url: '/pages/product/product?id=' + id
				})
			}
		}
	};
</script>

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

	.jg {
		height: 20rpx;
	}

	.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>