hqshop/pages/index/rxbd.vue

<template>
	<view class="content">
		<!-- #ifdef APP-PLUS -->
		<view class="status_bar"></view>
		<!-- #endif -->

		<view class="top-bg">
			<image src="../../static/img/rx-mbg.png" mode="widthFix" style="width: 750rpx;"></image>
			<view class="body-title">
				<view class="goback-box" @click="toBack">
					<image class="goback" src="../../static/icon/fanhui.png" mode=""></image>
				</view>
				<view class="header">热销榜</view>
			</view>
		</view>
		<view class="bastgood-box">
			<view v-for="(item, index) in list" :key="index" class="guess-item">
				<image :src="item.image"></image>
				<view class="guess-box flex">
					<view class="title clamp2">{{ item.store_name}}</view>
					<view class="">
						<view class="price-box flex" v-if="(item.ot_price*1 - item.price*1) > 0">
							<view class="yuanprice">{{ item.ot_price*1 }}</view>
							<image src="../../static/icon/down.png" mode=""></image>
							<view class="jiang">直降{{ (item.ot_price*1 - item.price*1).toFixed(0) }}元</view>
						</view>
						<view class="price">￥{{ item.price*1}}</view>
					</view>
					<view class="btn" @click.stop="navTo('/pages/product/product?id='+ item.id)">
						立即购买</view>
				</view>
			</view>
			<uni-load-more :status="loadingType"></uni-load-more>
		</view>
	</view>
</template>

<script>
	import {
		getProducts
	} from '@/api/product.js'
	import {
		groom4
	} from '@/api/index.js'
	export default {
		data() {
			return {
				page: 1,
				limit: 10,
				list: [],
				loadingType: 'more'
			}
		},
		onLoad() {
			this.getProducts()
		},
		onShow() {

		},
		onReachBottom() {
			this.getProducts()
		},
		onReady() {

		},
		methods: {
			navTo(url) {
				uni.navigateTo({
					url
				})
			},
			toBack() {
				uni.switchTab({
					url: '/pages/index/index'
				})
			},
			getProducts() {
				let obj = this
				if (obj.loadingType == 'noMore' || obj.loadingType == 'loading') {
					return
				}
				obj.loadingType = 'loading'
				groom4({
					page: obj.page,
					limit: obj.limit
				}).then(res => {
					console.log(res)
					obj.list = obj.list.concat(res.data.list)
					obj.page++
					if (obj.limit == res.data.length) {
						obj.loadingType = 'more'
					} else {
						obj.loadingType = 'noMore'
					}
				})
			}
		}

	}
</script>

<style lang="scss">
	page {
		background: #fff;
		height: auto;
		min-height: 100%;
	}

	.top-bg {
		position: relative;
		width: 750rpx;
		height: 591rpx;

		image {
			width: 750rpx;
			height: 591rpx;
			position: absolute;
		}
	}

	.status_bar {
		height: var(--status-bar-height);
		width: 100%;
		// background: #dcae6d;
	}

	.body-title {
		height: 80rpx;
		text-align: center;
		font-size: 35rpx;
		// background-color:#dcae6d;
		position: relative;

		.header {
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			font-size: 36rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #fffeff;
			height: 80rpx;
			font-size: 36rpx;
			font-weight: 700;
			z-index: 9;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.goback-box {
			position: absolute;
			left: 18rpx;
			top: 0;
			height: 80rpx;
			display: flex;
			align-items: center;
		}

		.goback {
			z-index: 100;
			width: 34rpx;
			height: 34rpx;
		}
	}

	.bastgood-box {
		// margin-top: 20rpx;
		background-color: #ffffff;
		padding: 0rpx 0 40rpx;
		// border-radius: 70rpx 70rpx 0 0;

		.bast-bg {
			width: 376rpx;
			height: 34rpx;
			margin: 0 auto;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.guess-item {
			display: flex;
			width: 710rpx;
			background: #ffffff;
			box-shadow: 0px 0px 20rpx 0px rgba(50, 50, 52, 0.06);
			border-radius: 10rpx;
			// padding: 15rpx;
			margin: 0 auto 20rpx;
			position: relative;

			image {
				width: 236rpx;
				height: 236rpx;
				border-radius: 10rpx;
			}

			.guess-box {
				padding: 12rpx 0 12rpx 24rpx;
				width: 436rpx;
				flex-direction: column;
				justify-content: space-between;
				align-items: flex-start;

				.title {
					font-size: 32rpx;
					padding-left: 4rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #333333;
					width: 368rpx;
					line-height: 36rpx;
				}

				.price-box {
					justify-content: flex-start;

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

					image {
						width: 16rpx;
						height: 18rpx;
					}

					.jiang {
						padding-left: 2rpx;
						font-size: 24rpx;
						font-family: PingFang SC;
						font-weight: bold;
						color: #b59467;
					}
				}

				.price {
					font-size: 36rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #ff1135;
				}

				.btn {
					width: 138rpx;
					height: 52rpx;
					background: #FF4C4C;
					border-radius: 26rpx;
					font-size: 26rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #ffffff;
					line-height: 52rpx;
					text-align: center;
					position: absolute;
					bottom: 25rpx;
					right: 25rpx;
				}
			}
		}
	}
</style>