mnsx/pages/recommend/recommend.vue

<template>
	<view class="recommend">
		<view class="re-list" v-for="b in bastList" :key="b.id">
			<view class="re-img">
				<image :src="b.image" mode=""></image>
			</view>
			<view class="re-right">
				<view class="re-right-top">
					<view class="good-name clamp2">{{b.store_name}}</view>
					<view class="store-name clamp">
						门店：{{checkedStore.name}}
					</view>
					<text>距离：{{checkedStore.distance | des}}</text>
				</view>
				<view class="re-right-bottom">
					<view class="re-right-bottom-left">
						<text>￥{{b.price}}</text><text class="ot-price" v-if="b.ot_price*1 > b.price*1">￥{{b.ot_price}}</text>
					</view>
					<view class="re-right-bottom-right" @click="navTo('/pages/product/product?id=' + b.id + '&type=0')">
						立即购买
					</view>
				</view>
			</view>
		</view>
		<uni-load-more :status="loadingType"></uni-load-more>
	</view>
</template>

<script>
import { mapState, mapMutations } from 'vuex';
import { groom1 } from '@/api/index.js';
export default {
	data() {
		return {
			bastList: [],
			loadingType: 'more',
			page: 1,
			limit: 10,
		}
	},
	filters: {
		des(val) {
			let str = ''
			if(val) {
				if(val <= 1000) {
					 str = parseInt(val) + 'm'
				}else {
					 str = parseInt(val/1000) + 'km'
				}
			}
			return str
		}
	},
	onShow() {
		this.getRecommend()
		console.log(this.checkedStore)
	},
	computed: {
		...mapState('user',['checkedStore'])
	},
	// 页面到底部
	onReachBottom() {
		console.log('到底')
		this.getRecommend()
	},
	methods: {
		navTo(url) {
			uni.navigateTo({
				url: url
			})
		},
		getRecommend() {
			let obj = this
			if(obj.loadingType == 'loading' || obj.loadingType == 'noMore') {
				return 
			}
			obj.loadingType = 'loading' 
			groom1({
				page: obj.page,
				limit: obj.limit
			}).then( ({data}) => {
				obj.bastList = obj.bastList.concat(data.list)
				console.log(data.list,'groom1')
				obj.page++
				if(data.list.length == obj.limit) {
					obj.loadingType = 'more' 
				}else {
					obj.loadingType = 'noMore' 
				}
				})
		}
	}
}
</script>

<style lang="scss" scoped>
	.re-list {
		margin: 20rpx;
		height: 280rpx;
		background-color: #FFFFFF;
		border-radius: 8rpx;
		display: flex;
		
		$wi: 200rpx;
		.re-img {
			margin: auto 0;
			image {
				width: $wi;
				height: $wi;
				border-radius: 10rpx;
				margin: 0 25rpx;
			}
		}
		
		.re-right {
			height: $wi;
			width: 100%;
			margin: auto 0;
			font-family: PingFang-SC-Medium;
			position: relative;
				
			.re-right-top {
				color: #333333;
				font-size: 30rpx;
				.good-name {
					width: 380rpx;
					font-size: 30rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #333333;
				}
				.store-name {
					padding-top: 10rpx;
					width: 300rpx;
					font-size: 22rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #DCB876;
				}
				text {
					color: #DCB876;
					font-size: 22rpx;
				}
			}
			
			.re-right-bottom {
				width: 450rpx;
				display: flex;
				justify-content:space-between;
				position: absolute;
				bottom: 0;
					
				.re-right-bottom-left {
					height: 60rpx;
					line-height: 60rpx;
					margin: auto 0;
					font-size: 32rpx;
					color: #901B21;
					.ot-price {
						padding-left: 8rpx;
						font-size: 20rpx;
						font-family: PingFang SC;
						font-weight: 500;
						text-decoration: line-through;
						color: #9D9D9D;
					}
					// span {
					// 	margin-left: 5rpx;
					// 	color: #989B9F;
					// 	font-size: 15rpx;
					// 	text-decoration: line-through;
					// }
				}
				
				.re-right-bottom-right {
					width: 160rpx;
					line-height: 60rpx;
					background: #901b21;
					border-radius: 30rpx;
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #FFFFFF;
					text-align: center;
				}
			}
		}
	}
</style>