point-app/pagesHome/farming/index.vue

<template>
	<mobile-frame>
		<view class="main">
			<view class="one">
				<view class="one_1" v-if="barActive=='0'">
					<view class="first">
						<image class="image" :src="oneUrl" mode=""></image>
					</view>
					<view class="second">
						<scroll-view scroll-y="true" class="scroll-view" @scrolltolower="toPage">
							<view class="list-scroll-view">
								<view class="list" v-for="(item,index) in list" :key="index"
									@tap="toCommon('pagesHome/order/detail')">
									<image class="image" :src="item.url" mode=""></image>
									<view class="name">
										{{item.name}}
									</view>
									<view class="other">
										<view class="money">
											<text>¥</text>
											<text>{{item.money}}</text>
										</view>
										<view class="btn">
											<button type="default" size="mini">购买</button>
										</view>
									</view>
								</view>
							</view>
						</scroll-view>
					</view>
				</view>
				<view class="one_2" v-else-if="barActive=='1'">
					商品分类
				</view>
				<view class="one_3" v-else-if="barActive=='2'">
					全部商品
				</view>
				<view class="one_4" v-else-if="barActive=='3'">
					<view class="first">
						<image class="image" :src="info.url" mode=""></image>
						<view class="name">{{info.name}}</view>
					</view>
					<view class="second">
						<view class="second_1">
							<view class="grade">
								<view>{{info.grade||'5'}}</view>
								商品
							</view>
							<view class="grade">
								<view>{{info.grade||'5'}}</view>
								发货
							</view>
							<view class="grade">
								<view>{{info.grade||'5'}}</view>
								服务
							</view>
						</view>
						<view class="second_2">
							<image class="image" :src="info.url" mode=""></image>
						</view>
					</view>
					<view class="collect">
						<text v-if="!collection" @click="toCollect" class="iconfont icon-kongxin"></text>
						<text v-else @click="toCollect" class="iconfont icon-shixin"></text>
					</view>
				</view>
			</view>
			<view class="two">
				<view class="list" v-for="(item,index) in barList" :key="index" @tap="barChange(index,item)">
					<view class="icon">
						<text :class="['iconfont',barActive==index?item.acticon:item.icon]"></text>
					</view>
					<view :class="['name',barActive==index?'activename':'']">
						{{item.name}}
					</view>
				</view>
			</view>
		</view>
	</mobile-frame>
</template>

<script>
	export default {
		data() {
			return {
				barActive: '0',
				barList: [ //底部菜单
					{
						icon: 'icon-shangdian',
						acticon: "icon-shangdian-copy",
						name: '微店首页'
					}, {
						icon: 'icon-fenlei',
						acticon: "icon-fenlei-copy",
						name: '商品分类'
					}, {
						icon: 'icon-shangpinfenlei',
						acticon: "icon-shangpinfenlei-copy",
						name: '全部商品'
					}, {
						icon: 'icon-qiyejianjie',
						acticon: "icon-qiyejianjie-copy",
						name: '店铺简介'
					}
				],
				oneUrl: require('@/static/test.png'),
				info: {
					url: require('@/static/test.png'),
					name: '首农食品旗舰店',
					money: 100,
				},
				list: [ //
					{
						url: require('@/static/test.png'),
						name: '商品名称',
						money: 100,
					},
					{
						url: require('@/static/test.png'),
						name: '商品名称',
						money: 100,
					},
					{
						url: require('@/static/test.png'),
						name: '商品名称',
						money: 100,
					},
					{
						url: require('@/static/test.png'),
						name: '商品名称',
						money: 100,
					},
					{
						url: require('@/static/test.png'),
						name: '商品名称',
						money: 100,
					},
				],
				// 收藏
				collection: false,
			};
		},
		onShow: function() {},
		methods: {
			// 选择底部菜单
			barChange(index, item) {
				const that = this;
				that.$set(that, `barActive`, index);
			},
			// 公共跳转
			toCommon(e) {
				uni.navigateTo({
					url: `/${e}`
				})
			},
			// 收藏
			toCollect() {
				const that = this;
				that.collection = !that.collection;
				if (that.collection == true) {
					uni.showToast({
						title: `收藏成功`,
						icon: 'none'
					})
				} else {
					uni.showToast({
						title: `取消成功`,
						icon: 'none'
					})
				}
			},
			// 分页
			toPage() {}
		}
	}
</script>

<style lang="scss">
	.main {
		display: flex;
		flex-direction: column;
		width: 100vw;
		height: 100vh;

		.one {
			position: relative;
			flex-grow: 1;

			.one_1 {
				display: flex;
				flex-direction: column;
				width: 96vw;
				height: 90vh;
				padding: 2vw;
				background-color: var(--fFB1Color);

				.first {
					margin: 0 0 2vw 0;

					.image {
						width: 100%;
						height: 50vw;
					}
				}

				.second {
					position: relative;
					flex-grow: 1;

					.list {
						margin: 0 2vw 2vw 0;
						background-color: var(--fffColor);
						padding: 2vw;
						width: 43vw;
						border-radius: 5px;

						.image {
							width: 100%;
							height: 49vw;
							margin: 0 0 1vw 0;
						}

						.name {
							font-size: var(--font15Size);
							margin: 0 0 2vw 0;
						}

						.other {
							display: flex;
							flex-direction: row;
							justify-content: space-between;

							.money {
								color: var(--ff0Color);

								text:nth-child(1) {
									font-size: var(--font12Size);
								}
							}

							.btn {
								button {
									border-radius: 25px;
									color: var(--fffColor);
									background-color: var(--ff0Color);
									font-size: var(--font12Size);
								}
							}
						}
					}

					.list:nth-child(2n) {
						margin: 0 0 2vw 0;
					}
				}
			}

			.one_4 {
				.first {
					display: flex;
					flex-direction: column;
					align-items: center;
					background-color: var(--fFB1Color);
					border-bottom-right-radius: 10vw;
					border-bottom-left-radius: 10vw;

					.image {
						width: 20vw;
						height: 20vw;
						border-radius: 20vw;
					}

					.name {
						margin: 2vw 0;
						font-size: var(--font16Szie);
						font-weight: bold;
						color: var(--mainColor);
					}
				}

				.second {
					margin: 2vw 0;

					.second_1 {
						display: flex;
						justify-content: space-evenly;

						.grade {
							display: flex;
							flex-direction: column;
							align-items: center;
							color: var(--f85Color);
							font-size: var(--font13Size);

							view {
								margin: 1vw 0 0 0;
								color: var(--ff0Color);
							}
						}
					}

					.second_2 {
						display: flex;
						justify-content: center;
						margin: 20vw 0 0 0;
					}
				}
			}

			.collect {
				position: fixed;
				top: 4vw;
				right: 5vw;

				.iconfont {
					font-size: 25px;
				}
			}
		}

		.two {
			display: flex;
			flex-direction: row;
			justify-content: space-around;
			border-top: 1px solid #f1f1f1;

			.list {
				padding: 1vw 0;
				text-align: center;

				.icon {}

				.name {
					font-size: 12px;
				}

				.activename {
					color: var(--fFB1Color);
				}
			}
		}
	}

	.scroll-view {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;

		.list-scroll-view {
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
		}
	}
</style>