yijianbao_user_uniapp/pages_store/index.vue

<template>
	<view style="padding: 24rpx 20rpx;">
		<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :down="downOption" :up="upOption">
			<view class="storebox" v-for="(item,index) in dataList" :key="index">
				<image class="logo" :src="item.store.logoUrl" mode="aspectFill"></image>
				<view class="storebox-r">
					<view class="x-bc" style="flex: 1;min-height: 104rpx;">
						<view class="" @click="goStoreDetail">
							<view class="storename ellipsis">{{item.store.storeName || 's---'}}</view>
							<view class="storedesc">24小时营业  月售{{item.store.salesCount|| 0}}</view>
						</view>
						<view class="storebox-btn" @click="navTo(item)">进店</u-icon></view>
					</view>
					<scroll-view :scroll-x="true" class="scrollView">
						<view class="scrollItem" v-for="(it,i) in item.recommendProductList" :key="i" @click="showDetail(it)">
							<image :src="it.image" mode="aspectFill"></image>
							<view style="padding: 8rpx;">
								<view class="ellipsis" style="white-space: normal;">{{ it.productName || '' }}</view>
								<view class="price-box">
									<text class="price-box-unit">￥</text>
									<text class="price-box-integer">{{splitPrice(it.price || 0).intPart}}</text>
									<text class="price-box-decimal">.{{splitPrice(it.price || 0).decPart}}</text>
								</view>
							</view>
						</view>
					</scroll-view>
				</view>
			</view>
		</mescroll-body>
	</view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import {recommendList} from "@/api/index.js"
	export default {
		mixins: [MescrollMixin], 
		data() {
			return {
				storeId:'',
				list:[],
				storeInfo: {},
				item: {
					productName:'口服液 口服液口服液口服液口服液12',
					price: 12.3
				},
				mescroll:null,
				downOption: {   //下拉刷新
				 	use:true,
					auto: false // 不自动加载 (mixin已处理第一个tab触发downCallback)
				},
				upOption: {
					onScroll:false,
					use: true, // 是否启用上拉加载; 默认true
					page: {
						pae: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
						size: 10 // 每页数据的数量,默认10
					},
					noMoreSize: 10, // 配置列表的总数量要大于等于5条才显示'-- END --'的提示
					textNoMore:"已经到底了",
					empty: {
						icon:'https://bjyjb-1362704775.cos.ap-chongqing.myqcloud.com/app/newImages/empty_icon.png',
						tip: '暂无数据'
					}
				},
				dataList: []
			}
		},
		onLoad() {
			
		},
		methods: {
			// 查看详情
			showDetail(item) {
				uni.navigateTo({
					url: '/pages_shopping/productDetails?productId='+item.productId + `${item.storeId ? '&storeId='+item.storeId : ''}`
				})
			},
			splitPrice(num) {
			  const [intPart = '0', decPart = '00'] = String(num ||0).split('.');
			  return { intPart, decPart: decPart.padEnd(2, '0').slice(0, 2) };
			},
			navTo(item) {
				uni.navigateTo({
					url: '/pages_store/storeIndex?storeId='+item.store.storeId
				})
			},
			mescrollInit(mescroll) {
				this.mescroll = mescroll;
			},
			/*下拉刷新的回调 */
			downCallback(mescroll) {
				mescroll.resetUpScroll()
			},
			upCallback(page) {
				//联网加载数据
				var that = this;
				var data = {
					pageNum: page.num,
					pageSize: page.size
				};
				recommendList(data).then(res => {
					if(res.code==200){
						//设置列表数据
						let list = res.rows.map(item=>({
								...item,
								recommendProductList: item.recommendProductList&&item.recommendProductList.length > 0 ?item.recommendProductList.splice(0,5):[]
							})); 
						if (page.num == 1) {
							that.dataList = list
							
						} else {
							that.dataList = that.dataList.concat(list);
							 
						}
						that.mescroll.endBySize(res.rows.length, res.total);
						
					}else{
						uni.showToast({
							icon:'none',
							title: "请求失败",
						});
						that.dataList = null;
						that.mescroll.endErr();
					}
				});
			},
		}
	}
</script>

<style scoped lang="scss">
	.scrollView {
		white-space: nowrap;
		margin-top: 10rpx;
		.scrollItem {
			display: inline-block;
			background-color: #f5f5f5;
			border-radius: 10rpx;
			overflow: hidden;
			width: 170rpx;
			font-size: 28rpx;
			margin-right: 10rpx;
			image {
				height: 170rpx;
				width: 170rpx;
			}
		}
	}
	.price-box {
		font-family: Roboto, Roboto;
		font-weight: bold;
		font-size: 28rpx;
		color: #FF5C03;
		margin-top: 6rpx;
	
		&-unit {
			font-weight: 600;
			font-size: 22rpx;
		}
	
		&-decimal {
			font-weight: 600;
			font-size: 22rpx;
		}
	
		&-text {
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 22rpx;
		}
	}
	.storebox {
		background-color: #fff;
		padding: 20rpx;
		font-family: PingFang SC;
		color: #333333;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		overflow: hidden;
		display: flex;
		align-items: flex-start;
		margin-bottom: 24rpx;
		.logo {
			flex-shrink: 0;
			width: 104rpx;
			height: 104rpx;
			background: #fff;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			border: 1rpx solid #eee;
			margin-right: 16rpx;
			box-sizing: border-box;
		}
		.storename {
			font-weight: 500;
			font-size: 32rpx;
		}
		.storedesc {
			margin-top: 12rpx;
			font-weight: 400;
			font-size: 22rpx;
		}
		.storebox-r {
			flex: 1;
			overflow: hidden;
		}
		.storebox-btn {
			flex-shrink: 0;
			padding: 10rpx 24rpx;
			font-size: 28rpx;
			border-radius: 28rpx 28rpx 28rpx 28rpx;
			border: 2rpx solid #FF5C03;
			font-weight: 500;
			font-size: 24rpx;
			color: #FF5C03;
		}
	}
</style>