jszPhone/pages/goods/server_card/index.vue

<template>
	<view  style="height: 100vh">
		<view class="good-list">
			<view class="good" v-for="item in list" @click="navto('/pages/goods_details/indexs?id=' + item.product_id + '&server_card_id=' + item.id)">
				<image :src="item.image" mode="" class="good-image"></image>
				<view class="good-name ">
					<view class="clamp2">
						{{item.card_name}}
					</view>
				</view>
				<view class="good-price">
					<view class="price">
						{{item.card_price}}
					</view>
					<!-- <view class="xl">
						销量：{{item.sold}}
					</view> -->
				</view>
			</view>
		</view>
		<u-loadmore :status="loadingType" />
	</view>
</template>

<script>
	import {
		getSeverCardList
	} from '@/api/store.js';
	export default {
		data() {
			return {
				page: 1,
				pageSize: 10,
				loaded: false,
				loadingType: 'loadmore',
				list: []
			}
		},
		onLoad(opt) {

		},
		onShow() {
			this.getList()
		},
		onReachBottom() {
			this.getList()
		},
		onReady() {
			
		},
		methods: {
			getList(type) {
				let that = this

				if (type == 'tab' && that.loaded) {
					return
				}
				if (that.loadingType == 'loading' || that.loadingType == 'nomore') {
					return
				}
				that.loadingType = 'loading'

				getSeverCardList({
					page: that.page,
					limit: that.pageSize,
				}).then(({
					data
				}) => {
					that.list = that.list.concat(data.list)
					that.page++
					if (data.list.length == that.pageSize) {
						that.loadingType = 'loadmore'
					} else {
						that.loadingType = 'nomore'
					}
				})

			},
			navto(url) {
				uni.navigateTo({
					url,
					fail() {
						uni.switchTab({
							url
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.good-list {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		padding: 20rpx 28rpx;
		.good {
			width: 336rpx;
			height: 482rpx;
			background: #FFFFFF;
			box-shadow: 0px 0px 6rpx 0px rgba(0, 0, 0, 0.1);
			border-radius: 14rpx;
			margin-bottom: 20rpx;
			position: relative;
			.good-image {
				width: 336rpx;
				height: 336rpx;
				border-radius: 14rpx 14rpx 0 0;
			}

			.good-name {
				font-size: 28rpx;
				font-weight: bold;
				color: #333333;
				padding: 0 20rpx;
			}

			.good-price {
				display: flex;
				width: 336rpx;
				justify-content: space-between;
				font-size: 28rpx;
				font-weight: bold;
				color: #FF1A1A;
				position: absolute;
				bottom: 20rpx;
				padding: 0 20rpx;
				.xl{
					font-size: 20rpx;
					font-weight: bold;
					color: #999999;
				}
			}
		}
	}
</style>