tj/pages/product/classify.vue

<template>
	<view class="container">
		<view class="goodsList-box">
			<view class="goodsList-item flex" :key="ind" v-for="(ls, ind) in list" @click="navTo(ls)">
				<image :src="ls.image" mode=" scaleToFill"></image>
				<view class="goodsList-content">
					<view class="title">
						<text>{{ ls.store_name }}</text>
					</view>
					<view class="goods-money flex">
						<view class="money-box">
							<view class="old-price" v-if="ls.ot_price * 1 > ls.price * 1">
								<text class="old-left">¥{{ ls.ot_price }}</text>
								<image src="../../static/icon/down.png" mode="widthFix"></image>
								<text class="old-right">直降{{ ls.ot_price * 1 - ls.price * 1 }}元</text>
							</view>
							<view class="otMoney-box">
								<view class="otMoney">￥{{ ls.price }}</view>
								<view class="give-jf">
									赠{{ls.give_award_range*1}}绿色积分
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		groomList
	} from '@/api/product.js';
	export default {
		data() {
			return {
				list: [],
			};
		},
		onLoad(option) {
			// 获取查询对象
			this.type = option.type;
			// 加载基础数据
			this.loadData();
		},
		methods: {
			navTo: function(ls) {
				uni.navigateTo({
					url: '/pages/product/product?id=' + ls.id + '&isbao=1'
				});
			},
			// 请求载入数据
			async loadData() {
				groomList({}, this.type)
					.then(({
						data
					}) => {
						this.list = data.list;
					})
					.catch(e => {
						console.log(e);
					});
			},
		}
	};
</script>

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

	// 商品列表
	.goodsList-box {
		.goodsList-item {
			margin-bottom: 40rpx;
			background-color: #ffffff;
			padding: 30rpx;

			image {
				flex-shrink: 0;
				border-radius: $border-radius-sm;
				height: 180rpx;
				width: 180rpx;
			}

			.goodsList-content {
				margin-left: 20rpx;
				flex-grow: 1;
				height: 180rpx;
				position: relative;

				.title {
					font-size: $font-base;
					color: $font-color-dark;
					font-weight: 500;
				}

				.goods-money {
					position: absolute;
					left: 0;
					bottom: 0;
					width: 100%;

					.money-box {
						image {
							width: 14rpx;
							margin: 0 6rpx 0 10rpx;
						}

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

							.old-right {
								font-size: 24rpx;
								font-weight: bold;
								color: #b59467;
							}
						}

						.otMoney-box {
							display: flex;
							align-items: center;

							.otMoney {
								font-size: 36rpx;
								color: $color-red;
								padding-right: 20rpx;
							}

							.give-jf {
								display: inline-block;
								padding: 8rpx;
								background: linear-gradient(90deg, #65B2E9, #CA57DC);
								border-radius: 10rpx 0px 10rpx 0px;
								font-size: 22rpx;
								font-weight: 500;
								color: #FFFFFF;
							}

						}
					}

					.cart {
						border: 1px solid $color-red;
						color: $color-red;
						font-size: $font-base;
						font-weight: bold;
						border-radius: 99px;
						width: 55rpx;
						height: 55rpx;
						display: flex;
						justify-content: center;
						align-items: center;
					}
				}
			}
		}
	}
</style>