mycajt/pages/shoping/index.vue

<template>
	<view class="content">
		<view class="varHeight"></view>
		<view class="banner position-relative">
			<image class="bgImg" src="../../static/img/img10.png" mode="scaleToFill"></image>
			<view class="flex shpingInfo position-relative">
				<view class="logoBox flex">
					<image class="logo" :src="info.image" mode="scaleToFill"></image>
					<view class="shopingTitle">{{ info.name }}</view>
				</view>
				<icon class="shopingExit" type="clear" color="#FFFFFF" @click="backUrl"></icon>
			</view>
			<view class="serachBox flex position-relative">
				<view class="serachInput flex">
					<icon :size="iconSize" type="search" color="#FFFFFF"></icon>
					<input class="search" placeholder="搜索" @blur="confirm" placeholder-style="color:#ffffff" type="text"
						:value="search" @confirm="confirm" />
				</view>
			</view>
		</view>
		<view class="list position-relative">
			<list ref="dataList"></list>
		</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 list from '@/pages/product/list';
	import {
		getShoping
	} from '@/api/shoping.js';
	import {
		getCartList,
	} from '@/api/cart.js';
	export default {
		components: {
			list
		},
		data() {
			return {
				// 当前选中的滑块
				current: 0,
				// 门店信息
				info: {
					logo: '',
					title: ''
				},
				ratio: '', //页面比例信息
				search: '' ,//店铺搜索商品
				total: 0
				//商店详情
			};
		},
		onShow() {
			this.loadCart();
		},
		onLoad(pt) {
			// 保存商户id
			this.info.id = pt.merid;
			this.getShoping();
		},
		onReachBottom(e) {
			// 底部加载数据
			this.$refs.dataList.loadData();
		},
		onReady() {
			// 保存商家id
			this.$refs.dataList.mer_id = this.info.id;

			// 加载分类
			this.$refs.dataList.loadCateList();
			let obj = this;
			let query = uni.createSelectorQuery();
			// 获取页面比例
			query
				.select('.content')
				.fields({
						size: true
					},
					e => {
						// 保存比例
						this.ratio = e.width / 750;
					}
				)
				.exec();
		},
		computed: {
			// 计算图标大小
			iconSize() {
				return 28 * this.ratio;
			}
		},
		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);
					});
			},
			//获取商店信息
			getShoping() {
				let obj = this;
				getShoping({}, this.info.id)
					.then(function({
						data
					}) {
						obj.info = data.info;
						obj.$refs.dataList.iszy = obj.info.is_triple;
						// 加载数据
						obj.$refs.dataList.loadData();
					})
					.catch(e => {
						console.log(e);
					});
			},
			// 滑块切换时触发方法
			changeIndex(e) {
				this.current = e.current;
			},
			// 搜索确认事件
			confirm(e) {
				this.$refs.dataList.keyword = e.detail.value;
				this.$refs.dataList.page = 1;
				this.$refs.dataList.loadData('refresh');
			},
			// 回退功能
			backUrl() {
				uni.navigateBack();
			}
		}
	};
</script>

<style lang="scss">
	.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;
		}

	}

	page,
	.content {
		height: 100%;
	}

	.varHeight {
		height: var(--status-bar-height);
	}

	.banner {
		.shpingInfo {
			padding: 30rpx $page-row-spacing;

			.logoBox {
				.logo {
					height: 90rpx;
					width: 90rpx;
					border-radius: 50%;
				}

				.shopingTitle {
					padding-left: 20rpx;
					color: #ffffff;
					font-size: $font-lg;
				}
			}

			.shopingExit {}
		}

		.serachBox,
		.shpingInfo {
			z-index: 999;
		}
	
	.bgImg {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
		}

		.serachBox {
			padding: 0 $page-row-spacing;
			padding-bottom: 20rpx;
			width: 100%;

			.serachInput {
				background-color: rgba($color: #f1f1f1, $alpha: 0.5);
				border-radius: 100rpx;
				padding: 10rpx 25rpx;
				width: 100%;

				.search {
					padding-left: 20rpx;
					width: 100%;
					color: #ffffff;
					font-size: 28rpx;
				}
			}
		}
	}
</style>