newmyc/pages/product/bdLis.vue

<template>
	<view class="content">
		<view class="good-list">
			<view class="good flex" v-for="item in list"
				@click="navto('/pages/product/product?id=' + item.id + '&isbd=1')">
				<view class="good-img">
					<image :src="item.image" mode=""></image>
				</view>
				<view class="good-info flex">
					<view class="good-name clamp2">
						{{item.store_name}}
					</view>
					<view class="good-price">
						<view class="old-price" v-if="item.ot_price*1 > item.price*1">
							<text class="old-left">¥{{item.ot_price}}</text>
							<image src="../../static/icon/down.png" mode="widthFix"></image>
							<text class="old-right">直降{{item.ot_price*1 - item.price*1}}元</text>
						</view>
						<view class="new-price flex">
							<view class="">
								¥{{item.price}}
							</view>
							<view class="good-tip">
								立即购买
							</view>
						</view>
					</view>
				</view>
			</view>
			<uni-load-more :status="loadingType"></uni-load-more>
		</view>
	</view>
</template>

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

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

		},
		methods: {
			navto(url) {
				uni.navigateTo({
					url
				})
			},
			groomList() {
				let that = this
				if (that.loadingType == 'loading' || that.loadingType == 'noMore') {
					return
				}
				that.loadingType = 'loading'
				groomList({
					page: that.page,
					limit: that.limit
				}, 5).then(res => {
					that.page++
					that.list = that.list.concat(res.data.list)
					if (res.data.list.length == that.limit) {
						that.loadingType = 'more'
					} else {
						that.loadingType = 'noMore'
					}
				})
			}
		}
	}
</script>

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

	.good-list {
		width: 750rpx;
		background: #fff;
		padding: 30rpx 0;

		.good {
			width: 690rpx;
			height: 276rpx;
			background: #FFFFFF;
			box-shadow: 0px 0px 20rpx 0px rgba(50, 50, 52, 0.06);
			border-radius: 10rpx;
			margin: auto;
			padding: 20rpx 15rpx;
			margin-bottom: 20rpx;

			&:last-of-type {
				margin-bottom: 0rpx;
			}

			.good-img {
				flex-shrink: 0;
				width: 236rpx;
				height: 236rpx;
				border-radius: 10rpx;
				margin-right: 22rpx;

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

			.good-info {
				flex-grow: 1;
				height: 100%;
				flex-direction: column;
				justify-content: space-between;
				align-items: flex-start;

				.good-name {
					font-size: 32rpx;
					font-weight: bold;
					padding-top: 10rpx;
					color: #333333;
				}

				.good-price {
					width: 100%;

					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;
						}
					}

					.new-price {
						width: 100%;
						font-size: 36rpx;
						font-weight: bold;
						color: #FF4C4C;
						justify-content: space-between;

						.good-tip {
							width: 137rpx;
							height: 52rpx;
							background: #01A6A8;
							border-radius: 26rpx;
							position: relative;
							font-size: 26rpx;
							font-weight: 500;
							color: #FFFFFF;
							line-height: 52rpx;
							text-align: center;
						}
					}
				}
			}
		}

	}
</style>