hwnc/pagesD/pages/mall/goodslist.vue

<template>
	<view :class="[AppTheme]" class="box">
		<view class="search">
			<view class="usearch">
				<u-search v-model="keyword" @search="search" @custom="search"></u-search>
			</view>
		</view>
		<view class="tag" v-if='tag&&tag.length>0'>
			<u-tabs :list="tag" :activeStyle="{color:primary}" :lineColor="primary" lineWidth="30" :scrollable="true"
				:current="current"  @change="change"></u-tabs>
		</view>
		<view class="NewProducts">
			<p class="subtitle text-primary">
				商品列表
				<view class="before bg-primary"></view>
				<view class="after bg-primary"></view>
			</p>
			<view class="content">
				<view class="guess-section" v-if="shopList&&shopList.length > 0">
					<view class="content_box" v-for="item in shopList" :key="item.id" @click="navToDetailPage(item)">
						<u--image :src=" item.pic" radius="10rpx" width="355rpx" height="340rpx" :lazy-load="true"
							:fade="true" duration="450">
							<template v-slot:loading>
								<u-loading-icon color="red"></u-loading-icon>
							</template>
						</u--image>
						<view class="message">
							<p class="tltile">{{ item.name }}</p>
							<view class="message_bot">
								<view class="f_left">
									<p class="color_org  text-neutral">{{ item.price }}元/{{ item.unit }}</p>
									<p class="old_price">原价：{{ item.oprice }}元</p>
								</view>
								<view class="f_right" @click.stop="navToDetailPage(item.id)">
									<u-icon size="40" :color="primary" name="shopping-cart-fill"></u-icon>
								</view>
							</view>
						</view>
					</view>
				</view>
				<u-empty marginTop="100" style="height: 0% !important;width: 100vw;" v-if="shopList&&shopList.length==0"
					text="暂无更多数据" mode="list"></u-empty>
			</view>
		</view>
	</view>
</template>
<!-- 商城 -->
<script>
	import api from '@/api/mall/index.js';
	export default {
		data() {
			return {
				primary: this.$theme.primary,
				carouselList: [{
					src: 'http://www.zzfcd.com/images/Upload/201507101533569.jpg'
				}, {
					src: 'http://www.zzfcd.com/images/Upload/201507101533569.jpg'
				}],
				shopList: null,
				settingFile: getApp().globalData.siteinfo,
				tag: [{
					id: 0,
					name: '全部'
				}],
				current: 0,
				keyword: '',
				pid: 0,
				id: 0
			};
		},
		onLoad(option) {
			console.log(option)
			if (option.id && option.pid) {
				this.id = option.id
				this.pid = option.pid
				this.shop(option.pid, option.id);
			}
		},
		methods: {
			search(e) {
				let obj = {
					pid: this.pid,
					id: this.tag[this.current].id,
					name: encodeURI(this.keyword)
				}
				api.goodslist(obj).then(res => {
					if (res.status == 200) {
						this.shopList = res.data.list;
					} else {
						this.$api.msg(res.msg);
					}
				});
			},
			change(e) {
				this.current = e.index;
				let i = this.tag[e.index]
				console.log(i, "i")
				let obj = {
					pid: this.pid,
					id: i.id
				}
				api.goodslist(obj).then(res => {
					if (res.status == 200) {
						this.shopList = res.data.list;
					} else {
						this.$api.msg(res.msg);
					}
				});
			},
			shop(pid, id) {
				let that = this;
				let obj = {
					pid: pid,
					id: id,
				}
				api.goodslist(obj).then(res => {
					console.log(res, "res");
					if (res.status == 200) {
						let tag = this.tag
						let num = 1;
						res.data.cate2.forEach(item => {
							if (item.id == id) {
								that.current = num
							}
							num++;
							tag.push(item)
						})
						console.log(tag, "tag")
						this.shopList = res.data.list;
					} else {
						this.$api.msg(res.msg);
					}
				});
			},
			navToDetailPage(item) {
				//测试数据没有写id，用title代替
				let id = item.id;
				uni.navigateTo({
					url: `/pagesD/pages/product/product?id=${id}`
				});
			}
		}
	};
</script>

<style lang="scss">
	$color-fff: #fff;

	@mixin lineH($index) {
		height: $index;
		line-height: $index;
	}

	::-webkit-scrollbar {
		display: none
	}

	page {
		background: #f5f5f5;
	}

	.search {
		width: 100%;
		height: 100rpx;
		background-color: #fff;

		.usearch {
			width: 95%;
			padding: 20rpx;
		}
	}

	.tag {
		margin-top: 20rpx;
		width: 100%;
		height: 80rpx;
		background-color: #fff;

		.tags {
			width: 180rpx;
			height: 100%;
			text-align: center;
			line-height: 80rpx;
			font-size: 30rpx;
			color: #606266;
			display: inline-block;
		}

		.current {
			color: #fe8b31;
		}
	}

	.tltile {
		font-size: 12px;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.box {
		.carousel {
			height: 400rpx;
		}

		.carousel-item {
			width: 100%;

			.s-img {
				width: 100%;
				height: 100%;
			}

			.swiper-dots {
				left: 45rpx;
				bottom: 40rpx;
			}
		}

		.application {
			background-color: #fff;
			width: 100%;
			height: 200rpx;
			display: flex;
			justify-content: space-around;
			align-items: center;

			.a-img {
				width: 110rpx;
				height: 110rpx;
			}

			.app_to {
				p {
					margin: 0;
					padding: 0;
					text-align: center;
					color: #f1511e;
					font-size: 24rpx;
				}
			}
		}

		.NewProducts {
			background-color: $color-fff;
			margin-top: 20rpx;

			.content {
				width: 100%;
				box-sizing: border-box;
				min-height: 80vh;


				.guess-section {
					margin: 15rpx;
					display: flex;
					justify-content: space-between;
					flex-wrap: wrap;

					.content_box {
						box-shadow: $box-shadow;
						border-radius: 15rpx;
						width: 355rpx;
						padding-bottom: 10rpx;
						margin-bottom: 10rpx;

						.new-img {
							width: 100%;
							height: 355rpx;
						}

						.message {
							box-sizing: border-box;
							padding: 10rpx;
							line-height: 35rpx;

							.message_bot {
								height: 84rpx;
								margin-top: 20rpx;
								border-top: 0.5rpx solid #fafafa;
								display: flex;
								justify-content: space-between;
								align-items: center;

								.f_left {
									margin-top: 10rpx;
									font-size: 24rpx;

									.color_org {
										margin-top: 10rpx;

									}

									.old_price {
										color: #999;
										margin-top: 10rpx;
										text-decoration: line-through;
									}
								}

								.f_right {
									width: 56rpx;
									height: 56rpx;

									margin-right: 10rpx;
								}
							}
						}
					}
				}
			}

			.tag {
				display: flex;
				justify-content: space-around;

				.tag-box {
					width: 200rpx;
					height: 98rpx;
					border: 1px solid #ff8300;
					color: #ff8300;
					border-radius: 10rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					flex-direction: column;
					font-size: 24rpx;

					.tag-img {
						width: 60rpx;
						height: 60rpx;
					}
				}
			}
		}

		.subtitle {
			position: relative;
			font-size: 0.24rem;
			height: 45px;
			line-height: 45px;
			text-align: center;
			font-size: 14px;

			.before {
				content: '';
				position: absolute;
				width: 30%;
				height: 1px;
				top: 50%;
				left: 2%;
			}

			.after {
				content: '';
				position: absolute;
				width: 30%;
				height: 1px;
				top: 50%;
				right: 2%;
			}
		}
	}
</style>