myc/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>
</template>

<script>
import list from '@/pages/product/list';
import { getShoping } from '@/api/shoping.js';
export default {
	components: { list },
	data() {
		return {
			// 当前选中的滑块
			current: 0,
			// 门店信息
			info: {
				logo: '',
				title: ''
			},
			ratio: '', //页面比例信息
			search: '' //店铺搜索商品
			//商店详情
		};
	},
	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: {
		//获取商店信息
		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">
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>