myc/pages/prefecture/voucher.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>
						<template v-if="good.ot_price - good.price > 0">
							<image src="../../static/icon/down.png" mode=""></image>
							<text class="zj">直降{{good.ot_price - good.use_max_integral}}元</text>
						</template>
					</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({}, 5)
				.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/prefecture/detail?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>