fanghuayuexuan/pages/shopping/index.vue

<template>
	<view class="content">
		<view class="top-content">
			<image class="bg" src="/static/images/classification-bg.png"></image>
			<view class="status_bar" :style="{height: statusBarHeight}"></view>
			<!-- 这里是状态栏 -->
			<!-- <view class="top-title">健康商城</view> -->
			<!-- 搜索框 -->
			<view class="search-cont">
				<image class="back" src="../../static/images/back_black.png" mode=""></image>
				<view class="inner">
					<image class="icon-search" src="../../static/images/search.png" mode=""></image>
					<input type="text" disabled confirm-type="搜索" @click="toSearch" placeholder="搜索您喜欢的商品"
						placeholder-style="font-size:28rpx;color:#BBBBBB;font-family: PingFang SC;" />
				</view>
			</view>
			<!-- 栏目 -->
			<view class="column-box" :class="isExpand?'column-box2':''">
				<!-- <view class="column-list" :class="isExpand?'column-list2':''">
					<view class="item" v-for="(item,index) in columnList" :key="index" @click="selectColumn(item)">
						<view class="img-item" :class="index===activeIndex?'active':''">
							<image class="img" src="../../static/images/img.png" mode=""></image>
						</view>
						<view class="name" :class="index===activeIndex?'active':''">{{item.name}}</view>
					</view>
				</view> -->
				<scroll-view 
				          class="column-list-scroll" 
				          :class="isExpand?'column-list2':''"
				          scroll-x="true" 
				          :scroll-with-animation="true"
				          :show-scrollbar="false"
				          :enable-flex="true"
				        >
				          <view class="column-list" :class="isExpand?'column-list2':''">
				            <view class="item" v-for="(item,index) in columnList" :key="index" @click="selectColumn(item)">
				              <view class="img-item" :class="index===activeIndex?'active':''">
				                <image class="img" src="../../static/images/img.png" mode=""></image>
				              </view>
				              <view class="name" :class="index===activeIndex?'active':''">{{item.name}}</view>
				            </view>
				          </view>
				        </scroll-view>
				<view class="expand" @click="expand" :class="{'expand2': isExpand}">
					<view>{{isExpand ? '收起' : '展开'}}</view>
					<image class="expand-icon"
						:src="isExpand ? '../../static/images/retract.png' : '../../static/images/expand.png'" mode="">
					</image>
				</view>
			</view>

		</view>
		<view :style="{height: divHeight}" class="medic-box">
			<view class="cate-list">
				<view v-for="(item,index) in cates" :key="index" :class="cateSelect == item.cateId?'item active':'item'"
					@click="choseCate(item)">
					<image class="line" v-if="cateSelect == item.cateId" src="/static/images/select_hover_line.png"
						mode=""></image>
					{{item.cateName }}
				</view>
			</view>
			<view class="medic">
				<view class="medic-list">
					<view v-for="(item,index) in dataList" :key="index" class="item" @click="showDetail(item)">
						<view class="img-box">
							<image :src="item.image" mode="aspectFit"></image>
						</view>
						<view class="info-box">
							<view class="title ellipsis2">{{item.productName}}</view>
							<view class="intro ellipsis">{{item.productInfo}}</view>
							<view class="sale">已售 {{item.sales}} {{item.unitName}} | 惊艳度98%</view>
							<view class="lable-group">
								<view class="lable-item">9.5折</view>
								<view class="lable-item">限购1份</view>
							</view>
							<view class="prce-num">
								<view class="price">
									<text class="unit">¥</text><text
										class="bold">{{splitPrice(item.price).integer}}</text>.{{splitPrice(item.price).decimal}}
								</view>
								<view class="cart-img" @click="navgetTo('../shopping/cart')">
									<image class="w40 h40" src="/static/images/add_car.png"></image>
								</view>
							</view>
						</view>
					</view>
				</view>
				<!-- 轮播图 -->
				<!-- <view class="banner-box">
					<swiper class="swiper" :indicator-dots="true" :circular="true" :autoplay="true" :interval="3000"
						:duration="1000" indicator-color="rgba(255, 255, 255, 0.6)" indicator-active-color="#ffffff">
						<swiper-item class="swiper-item" v-for="(item,index) in advs" :key="index"
							@click="handleAdvClick(item)">
							<image :src="item.imageUrl" mode=""></image>
						</swiper-item>
					</swiper>
				</view> -->
				<!-- 药品列表 -->
				<!-- <view class="medic-list">
					<view class="inner-list">
						<view class="definite" v-for="(subItem,index) in subCates" @click="showProductList(subItem)">
							<view class="img-box">
								<image :src="subItem.pic" mode="aspectFit"></image>
							</view>
							<view class="name ellipsis">{{subItem.cateName}}</view>
						</view>
					</view>
				</view> -->
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getProductCate
	} from '@/api/product'
	import {
		getAdv
	} from '@/api/adv'
	export default {
		data() {
			return {
				isExpand: false, //是否展开
				activeIndex: 0,
				columnList: [{
					name: "中秋佳礼",
					img: "/static/images/img.png",
					value: 0
				}, {
					name: "中秋佳礼",
					img: "/static/images/img.png",
					value: 1
				}, {
					name: "中秋佳礼",
					img: "/static/images/img.png",
					value: 2
				}, {
					name: "中秋佳礼",
					img: "/static/images/img.png",
					value: 3
				}, {
					name: "中秋佳礼",
					img: "/static/images/img.png",
					value: 4
				}, {
					name: "中秋佳礼",
					img: "/static/images/img.png",
					value: 5
				}, {
					name: "中秋佳礼",
					img: "/static/images/img.png",
					value: 6
				}, {
					name: "中秋佳礼",
					img: "/static/images/img.png",
					value: 7
				}],
				dataList: [{
					cateId: 364,
					image: "https://hos-1309931967.cos.ap-chongqing.myqcloud.com/fs/20251216/6a3c96bd3fc44b15b760871670302e9a.jpg",
					otPrice: 268,
					price: 98,
					productId: 66050,
					productInfo: "电肌肉刺激(EMS)，又称神经肌肉电刺激，是利用电脉冲诱发多发性肌肉收缩；中枢神经系统使肌肉收缩；EMS被证明是一种积极的肌肉强化工具。↵EMS的用途：肌肉强化，预防废肌萎缩，肌肉松弛，缓解酸痛，放松肌肉，美容肌肉调理。",
					productName: "佟络宝®健步器",
					sales: 1026,
					unitName: "个",
					warehouseCode: "JST001",
					warehouseId: 3,
				}, {
					cateId: 364,
					image: "https://hos-1309931967.cos.ap-chongqing.myqcloud.com/fs/20251204/c53bb29cf794468ba59ee2d60983b92f.jpg",
					otPrice: 298,
					price: 138,
					productId: 65920,
					productInfo: "1、取本品1包放入脚盆，倒入适量沸水浸泡搅拌，约5-10分钟，再加入适量温水或冷水调至适宜水温即可足浴，泡脚15- 25分钟。↵2、取本品1包放入锅内煮约5分钟，将煮好的水倒入脚盆，再加入适量温水或冷水调至适宜温度即可足浴，泡脚15-25分钟。",
					productName: "[九仙汤]除痹通络汤 30克x30包",
					sales: 6042,
					unitName: "盒",
					warehouseCode: "JST001",
					warehouseId: 3,
				}],
				divHeight: '0px',
				allCates: [],
				cates: [],
				subCates: [],
				// 状态栏的高度
				statusBarHeight: uni.getStorageSync('menuInfo').statusBarHeight,
				// 选中药品分类
				cateSelect: 0,
				// 轮播图
				advs: [],
			};
		},
		onLoad() {
			uni.showShareMenu({
				withShareTicket: true,
				//小程序的原生菜单中显示分享按钮，才能够让发送给朋友与分享到朋友圈两个按钮可以点击
				menus: ["shareAppMessage", "shareTimeline"] //不设置默认发送给朋友
			})
			this.getProductCate();
		},
		onShow() {
			var that = this;
			setTimeout(function() {
				let info = uni.createSelectorQuery().select(".top-content");
				info.boundingClientRect(function(data) { //data - 各种参数
					console.log(data.height) // 获取元素宽度
					// console.log(uni.rpx2px(10)) 
					that.divHeight = "calc(100% - " + data.height + "px)"
				}).exec()
			}, 500);
			this.getAdv();
		},
		methods: {
			splitPrice(price) {
				const priceStr = parseFloat(price).toFixed(2).toString();
				return {
					integer: priceStr.split('.')[0],
					decimal: priceStr.split('.')[1]
				};
			},
			// 展开
			expand() {
				this.isExpand = !this.isExpand;
			},
			// 选择栏目
			selectColumn(item) {
				console.log("打印item", item.value);
				this.activeIndex = item.value;
			},

			// divHeight() {
			// 	return 'height:calc(100% - ${this.top}px);'
			// },
			toSearch() {
				uni.navigateTo({
					url: '../home/productSearch'
				})
			},
			handleAdvClick(item) {
				console.log(item);
				if (item.showType == 1) {
					uni.setStorageSync('url', item.advUrl);
					uni.navigateTo({
						url: "../home/h5"
					})
				} else if (item.showType == 2) {
					uni.navigateTo({
						url: item.advUrl
					})
				} else if (item.showType == 3) {
					uni.setStorageSync('content', item.content);
					uni.navigateTo({
						url: "../home/content"
					})
				}

			},
			getAdv() {
				let data = {
					advType: 2
				};
				getAdv(data).then(
					res => {
						if (res.code == 200) {
							this.advs = res.data;
						}
					},
					rej => {}
				);
			},
			getProductCate() {
				let data = {};
				getProductCate(data).then(
					res => {
						if (res.code == 200) {
							this.allCates = res.data;
							this.cates = this.allCates.filter(function(item) {
								return item.pid == 0
							});
							if (this.cates != null && this.cates.length > 0) {
								this.cateSelect = this.cates[0].cateId;
								this.getSubCate()
							}
						} else {
							uni.showToast({
								icon: 'none',
								title: "请求失败",
							});
						}
					},
					rej => {}
				);
			},
			// 药品分类选择
			choseCate(item) {
				this.cateSelect = item.cateId;
				this.getSubCate()

			},
			getSubCate() {
				var that = this;
				this.subCates = this.allCates.filter(function(item) {
					// let subList = that.allCates.filter(child => {
					// 	//返回每一项的子级数组
					// 	return child.pid === item.cateId
					// });
					// subList.length > 0 ? item.children = subList : [];
					return item.pid == that.cateSelect
				});

				console.log(this.subCates);
			},
			// 查看药品详情
			showProductList(item) {
				uni.navigateTo({
					url: '/pages_shopping/shopping/productList?cateId=' + item.cateId + "&pid=" + item.pid
				})
			},
			goSearch(e) {
				if (e.detail.value != null && e.detail.value != "") {
					this.utils.addHisSearch(e.detail.value);
				}
				uni.navigateTo({
					url: '../home/productList?searchValue=' + e.detail.value
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		height: 100%;
		background-color: #fff;
	}

	.content {
		height: 100%;
		display: flex;
		flex-direction: column;

		.top-content {
			background: linear-gradient(180deg, #E1FAEF 0%, #FFFFFF 100%);
			box-shadow: 0rpx 6rpx 8rpx 0rpx rgba(187, 187, 187, 0.15);
			width: 100%;
			z-index: 10;
			position: relative;

			.bg {
				position: absolute;
				top: 0;
				z-index: -1;
				width: 100%;
				height: 372rpx;
			}

			.top-title {
				height: 88rpx;
				line-height: 88rpx;
				font-size: 42rpx;
				font-family: Source Han Sans CN;
				font-weight: bold;
				color: #222222;
				padding-left: 41rpx;
				background-color: #FFFFFF;
			}

			.search-cont {
				display: flex;
				padding: 6rpx 30rpx;

				.back {
					width: 64rpx;
					height: 64rpx;
				}

				.inner {
					box-sizing: border-box;
					width: 436rpx;
					height: 64rpx;
					background: #ffffff;
					border-radius: 32rpx;
					display: flex;
					align-items: center;
					padding: 0 24rpx;

					.icon-search {
						width: 28rpx;
						height: 28rpx;
						margin-right: 20rpx;
					}

					input {
						height: 60rpx;
						line-height: 60rpx;
						flex: 1;
					}
				}
			}

			.column-box {
			  display: flex;
			  padding-left: 16rpx;
			  margin: 16rpx 0 24rpx;
			  
			  &.column-box2 {
			    display: flex;
			    flex-direction: column;
			  }
			  
			  .column-list-scroll {
			    flex: 1;
			    overflow: hidden;
			    white-space: nowrap;
			    
			    &.column-list2 {
			      flex-wrap: wrap;
			      height: auto;
			    }
			    
			    .column-list {
			      display: inline-flex;  // 改为行内flex
			      align-items: center;
			      padding-bottom: 10rpx; // 增加底部padding，防止滚动条遮挡
			      
			      &.column-list2 {
			        display: flex;
			        flex-wrap: wrap;
			        width: 100%;
			      }
			      
			      .item {
			        display: inline-flex;  // 改为行内flex
			        flex-direction: column;
			        align-items: center;
			        margin-right: 16rpx;
			        margin-bottom: 20rpx;
			        flex-shrink: 0; // 防止收缩
			        
			        .img-item {
			          width: 88rpx;
			          height: 88rpx;
			          flex-shrink: 0;
			          
			          &.active {
			            border: 3rpx solid #02B176;
			            box-sizing: border-box;
			            border-radius: 44rpx;
			          }
			          
			          .img {
			            width: 100%;
			            height: 100%;
			            border-radius: 44rpx;
			          }
			        }
			        
			        .name {
			          width: 128rpx;
			          height: 44rpx;
			          font-size: 24rpx;
			          color: #333333;
			          text-align: center;
			          line-height: 44rpx;
			          margin-top: 16rpx;
			          white-space: nowrap;
			          overflow: hidden;
			          text-overflow: ellipsis;
			          
			          &.active {
			            font-weight: 500;
			            color: #FFFFFF;
			            background: #02B176;
			            border-radius: 22rpx;
			          }
			        }
			      }
			    }
			  }
			  
			  .expand {
			    margin: 0 20rpx;
			    font-size: 24rpx;
			    color: #000000;
			    width: 24rpx;
			    display: flex;
			    flex-direction: column;
			    align-items: center;
			    flex-shrink: 0; // 防止收缩
			    
			    .expand-icon {
			      width: 24rpx;
			      height: 24rpx;
			      margin-top: 6rpx;
			    }
			  }
			  
			  .expand2 {
			    margin-top: 8rpx;
			    width: 100%;
			    justify-content: center;
			    flex-direction: row;
			    align-items: center;
			    
			    .expand-icon {
			      margin-left: 12rpx;
			    }
			  }
			}
		}

		.medic-box {
			display: flex;

			.cate-list {
				box-sizing: border-box;
				width: 200rpx;
				background: #F5F7FA;
				display: flex;
				flex-direction: column;
				padding: 20rpx 0;
				overflow-y: scroll;
				position: relative;

				.line {
					position: absolute;
					left: 0;
					top: 50%;
					transform: translateY(-50%);
					width: 6rpx;
					height: 28rpx;
				}

				.item {
					height: 112rpx;
					line-height: 112rpx;
					padding-left: 28rpx;
					font-size: 28rpx;
					font-family: PingFang SC;
					color: #666666;
					position: relative;

					&.active {
						color: #02B176;
						background: #FFFFFF;
						font-weight: 500;
					}
				}
			}

			.medic {
				box-sizing: border-box;
				width: calc(100% - 200rpx);
				height: 100%;

				.medic-list {
					.item {
						box-sizing: border-box;
						min-height: 296upx;
						background: #FFFFFF;
						border: 4upx solid #FFFFFF;
						border-radius: 16upx;
						margin-bottom: 18upx;
						padding: 24rpx;
						display: flex;

						.img-box {
							flex-shrink: 0;
							width: 188rpx;
							height: 188rpx;
							margin-right: 20upx;
							border-radius: 16upx;
							overflow: hidden;

							image {
								width: 100%;
								height: 100%;
							}
						}

						.info-box {
							flex: 1;
							min-width: 0;

							.title {
								font-size: 28upx;
								font-family: PingFang SC;
								font-weight: 500;
								color: #333333;
								margin-bottom: 4rpx;
							}

							.intro {
								font-weight: 400;
								font-size: 22rpx;
								color: #D46C0D;
								margin-bottom: 8upx;
							}

							.sale {
								font-size: 21rpx;
								color: #999999;
							}

							.lable-group {
								display: flex;
								margin-top: 8rpx;

								.lable-item {
									margin-right: 8rpx;
									height: 30rpx;
									padding: 0 8rpx;
									border-radius: 4rpx 4rpx 4rpx 4rpx;
									border: 1rpx solid #FFA599;
									font-size: 21rpx;
									color: #FF4B33;
								}
							}

							.prce-num {
								display: flex;
								align-items: center;
								justify-content: space-between;
								margin-top: 8upx;

								.price {
									font-weight: 600;
									font-size: 26rpx;
									color: #FA341E;
									font-size: 26rpx;

									.unit {
										font-size: 20upx;
									}

									.bold {
										font-size: 36upx;
									}
								}

							}
						}
					}
				}
			}
		}

	}
</style>