mycajt/pages/product/supermarket.vue

<template>
	<view class="content">
		<empty v-if="list.length === 0"></empty>
		<view class="guess" v-if="list.length !=0">
			<view v-for="(item, index) in list" :key="index" class="guess-item" @click="navToDetailPage(item)">
				<image :src="item.image"></image>
				<view class="guess-box">
					<view class="title clamp">{{ item.store_name }}</view>
					<view class="guessbtm-box flex">
						<view class="price">￥{{ item.price }} <text class="yuan">￥{{ item.ot_price }}</text> </view>
						<image @click.stop="toggleSpec(item.id)" class="btn" src="../../static/icon/cart.png" mode="">
						</image>
					</view>
				</view>
			</view>
			<uni-load-more :status="loadingType"></uni-load-more>
		</view>
		<view class="cart" @click="navtab">
			<view class="text" v-if="total>0">
				{{total}}
			</view>
			<image class="cart-icon" src="/static/img/cartIcon.png" mode="scaleToFill"></image>
		</view>
	</view>
</template>

<script>
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
	import empty from '@/components/empty';
	import {
		getCartList,
	} from '@/api/cart.js';
	import {
		getProducts,
		cartAdd
	} from '@/api/product.js';
	export default {
		data() {
			return {
				page: 1,
				limit: 20,
				loadingType: 'more',
				list: [],
				total: 0
			};
		},
		components: {
			empty,
			uniLoadMore
		},
		onLoad() {
			this.loadData();

		},
		onShow() {
			this.loadCart();
		},
		onReachBottom() {
			this.loadData();
		},
		onReady() {},
		methods: {
			navtab() {
				uni.switchTab({
					url: '/pages/cart/cart'
				})
			},
			async loadCart() {
				let obj = this;
				getCartList({
						type: 0
					})
					.then(function(e) {
						obj.total = e.data.valid.length;
					})
					.catch(function(e) {
						console.log(e);
					});
			},
			navToDetailPage(opt) {
				uni.navigateTo({
					url: '/pages/product/product?id=' + opt.id
				})
			},
			loadData() {
				if (this.loadingType == 'loading' || this.loadingType == 'nomore') {
					return
				}
				this.loadingType = 'loading'
				getProducts({
					page: this.page,
					limit: this.limit,
					cid: 1
				}).then(({
					data
				}) => {
					this.list = this.list.concat(data)
					this.page++
					if (data.length != this.limit) {
						this.loadingType = 'nomore'
					} else {
						this.loadingType = 'more'
					}
				})
			},
			toggleSpec(str) {
				const that = this;
				that.total++
				cartAdd({
					cartNum: 1, //商品数量
					uniqueId: '', //商品标签
					new: 0, //商品是否新增加到购物车1为不加入0为加入
					mer_id: 0,
					is_consumer: 0,
					productId: str
				}).then(e => {
					uni.showToast({
						title: '成功加入购物车',
						type: 'top',
						duration: 2000
					});
					that.loadCart();
				}).catch((e)=>{
					that.total--
				})
			},
		}
	};
</script>

<style lang="scss">
	page,
	.content {
		min-height: 100%;
		height: auto;
	}

	.cart {
		position: fixed;
		right: 30rpx;
		bottom: 60rpx;

		.cart-icon {
			width: 150rpx;
			height: 150rpx;
		}

		.text {
			background-color: $color-red;
			color: #FFF;
			position: absolute;
			top: 0;
			right: 0;
			width: 40rpx;
			height: 40rpx;
			z-index: 999;
			text-align: center;
			border-radius: 99rpx;
		}

	}

	.guess {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		padding: 20rpx;
	}

	.guess-item {
		margin-top: 20rpx;
		width: 345rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(50, 50, 52, 0.06);
		border-radius: 10rpx;

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

		.guess-box {
			padding: 28rpx 20rpx;
			width: 345rpx;

			.title {
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #333333;
			}


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

				.yuan {
					display: inline-block;
					margin-left: 10rpx;
					font-size: 26rpx;
					font-family: PingFang SC;
					font-weight: 500;
					text-decoration: line-through;
					color: #989898;
				}
			}

			.btn {
				width: 44rpx;
				height: 44rpx;
				background: #00ca95;
				border-radius: 50rpx;

			}
		}
	}
</style>