jiangchengfeiyi-xiaochengxu/pages/store-home/main/main.vue

<template>
	<view class="flex-row relative page">
		<view class="flex-row items-center section pos_8">
			<text class="text">商品</text>
			<view class="flex-row items-center section_2 ml-15">
				<image class="image"
					:src="sousuokuang" />
				<input class="text-wrapper ml-3" placeholder="请输入内容" />
			</view>
		</view>
		<view class="flex-col justify-start items-center image-wrapper pos_1">
			<image class="shrink-0 image_2"
				src="" />
		</view>
		<!-- 类别列表 -->
		<view class="flex-col justify-start section_3 pos_9">
			<scroll-view scroll-y class="scrollable-contentType">
			<view class="flex-col group">
				<view class="flex-col items-center list-item mt-5" 
					  v-for="(item, index) in sort" 
					  :key="index"
					  :style="getBoxStyle(index)"
					  @click="changeTypes(item , index)"
					  >
					<image class="image_3"
						:src="item.imgurl" />
					<text class="font_4 mt-3">{{ item.name }}</text>
				</view>
			</view>
			</scroll-view>
		</view>
		<view class="flex-col justify-start section_4 pos_4">
			<view class="flex-col items-start section_5">
				<text class="font_2">材料包</text>
				<text class="font_3 text_3 mt-6">提供材料自行DIY</text>
			</view>
		</view>
		<!--  根据类别渲染的商品列表 -->
		<view class="flex-col pos_5">
			<scroll-view scroll-y class="scrollable-content">
				<view class="flex-row section_9 list-item_2 mt-5" v-for="(item, index) in productList" :key="index" @click="goToProduct(item)">
					<image class="self-center image_4"
						:src="item.goodImg" />
					<view style="width: 220rpx;" class="flex-col items-start self-center group_3">
						<text class="font_2 text_5">{{ item.name }}</text>
						<text class="font_3 mt-13">{{ item.intro }}</text>
						<text class="font mt-13">￥{{ item.price }}</text>
					</view>
					<image class="self-start image_5"
						:src="add_img" />
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script setup>
import {
	ref,onMounted, toRaw
} from 'vue';
import { baseUrl, testUrl , suiUrl} from '@/api/request';
const currentColor = ref(0);
const sort =ref([{}]) //商品类别对象数组
const headerList = ref([{}]) //类别标题和介绍
const productList = ref([{}]) //类别下对应的商品
const cookie = wx.getStorageSync("cookie")
const product_type = [{
	type: "材料包",
	detail: "提供材料自行DIY"
}]
onMounted( async () => {
	console.log('cookie--->',cookie);
  await Getsort() //获取商品类别
  await changeTypes( sort.value[0] , 0 ) //首先获取最开始的类别
})
//获取商品分类
const Getsort = async ()=>{
	const res = await uni.request({
		url: baseUrl + '/category/list',
		method:'POST',
		header: {
			cookie,
		}
	})
	if(res.data.code === 1){
		for(let key in res.data.data) {
			sort.value[key] = {//类别列表
				name : res.data.data[key].typeName,
				imgurl : res.data.data[key].typeUrl,
				id : res.data.data[key].id
			}//标题列表
			headerList.value[key] = {
				name : res.data.data[key].typeName,
				typeIntro : res.data.data[key].typeIntro
			}
		}
	} else {
		uni.showToast({ //提示请求错误
			title: '请求商品分类错误',
			icon: 'none',
			duration: 2000
		})
	}
	console.log('获取商品分类==>',res.data);
}
//更改类别
const changeTypes = async (item , index) =>{
	currentColor.value = index  
	const res = await uni.request({
		url: baseUrl + '/category/list/type',
		method: 'POST',
		data: {
			id : item.id
		},
		header:{
			cookie,
		}
	})
	if(res.data.code === 1) {
		productList.value = res.data.data[item.id]
	} else {
		uni.showToast({ //商品请求错误
			title: '更改类别错误',
			icon: 'none',
			duration: 2000
		})
	}
}
//更改box颜色
const getBoxStyle = (index) => ({
    backgroundColor: currentColor.value === index ? 'brown' : '#fffef8'  
});


const goToProduct = (item) => {
	uni.navigateTo({
		url: '../../../pages/store-home/ProductDetails/ProductDetails?info=' + JSON.stringify(item)
	})
}
</script>

<style lang="scss" scoped>
.scrollable-contentType {
	height: 65vh;
}
.scrollable-content {
	height: 56vh;
	/* 100px 是头部和底部的高度之和 */
}
.ml-15 {
	margin-left: 28.13rpx;
}
.ml-3 {
	margin-left: 5.63rpx;
}
.mt-3 {
	margin-top: 5.63rpx;
	text-align: center;
}
.mt-13 {
	margin-top: 17.38rpx;
}
.mt-5 {
	margin-top: 9.38rpx;
}
.page {
	background-color: #f5f5dc;
	// height: 1413.75rpx;
	width: 100%;
	overflow-y: auto;
	overflow-x: hidden;
	height: 100vh;
	overflow: hidden;
}
.section {
	padding: 22.5rpx 39.28rpx 16.88rpx;
	background-color: #f7de98;
}
.pos_8 {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
}
.text {
	color: #c1651a;
	font-size: 37.5rpx;
	font-family: STFangsong;
	line-height: 36.19rpx;
}
.section_2 {
	padding: 5.63rpx 15rpx 8.44rpx;
	background-color: #ffffff;
	border-radius: 28.13rpx;
	height: 63.75rpx;
	width: 500.69rpx;
}
.image {
	width: 50.63rpx;
	height: 50.63rpx;
}
.text-wrapper {
	margin-right: 17.42rpx;
}
.font {
	font-size: 26.25rpx;
	font-family: STFangsong;
	line-height: 18rpx;
	color: #ff0000;
}
.image-wrapper {
	background-color: #ffffff;
	border-radius: 28.13rpx;
	overflow: hidden;
	border: solid 9.38rpx #ffffff;
}
.pos_1 {
	position: absolute;
	left: 22.5rpx;
	right: 24.38rpx;
	top: 118.13rpx;
}
.image_2 {
	width: 91.25vw;
	height: 37.5vw;
}
.section_3 {
	padding: 8.44rpx 5.63rpx 750rpx;
	background-color: #f7de98;
	width: 151.88rpx;
}
.pos_9 {
	position: absolute;
	left: 0;
	top: 440.63rpx;
}
.group {
	margin: auto;
	width: 137.81rpx;
}
//类别列表
.list-item {
	padding: 11.25rpx 0 9.94rpx;
	background-color: #fffef8;
	border-radius: 9.38rpx;
}
.list-item:first-child {
	margin-top: 0;
}
.image_3 {
	border-radius: 0rpx 9.38rpx 9.38rpx 0rpx;
	width: 60rpx;
	height: 60rpx;
}
.font_4 {
	font-size: 25rpx;
	font-family: STFangsong;
	line-height: 28.26rpx;
	color: #c1651a;
}
.section_4 {
	padding-bottom: 879.38rpx;
	background-color: #f8e8c1;
	border-radius: 0rpx 18.75rpx 0rpx 0rpx;
	width: 600.13rpx;
}
.pos_4 {
	position: absolute;
	right: 0;
	top: 440.63rpx;
}
.section_5 {
	padding: 18.06rpx 16.24rpx 14.94rpx;
	background-color: #fffef8;
	border-radius: 0rpx 18.75rpx 0rpx 0rpx;
	width: 598.13rpx;
}
.font_2 {
	font-size: 30rpx;
	font-family: STFangsong;
	line-height: 28.26rpx;
	color: #000000;
}
.font_3 {
	font-size: 22.5rpx;
	font-family: STFangsong;
	line-height: 21.56rpx;
	color: #727272;
}
.text_3 {
	line-height: 21.15rpx;
}
.pos_5 {
	position: absolute;
	right: 15rpx;
	top: 543.75rpx;
}
.section_9 {
	padding: 20.63rpx 22.88rpx 22.5rpx;
	background-color: #fffef8;
	border-radius: 9.38rpx;
	right: 13.13rpx;
}
.list-item_2:first-child {
	margin-top: 0;
}
.image_4 {
	border-radius: 9.38rpx;
	width: 131.25rpx;
	height: 131.25rpx;
}
.group_3 {
	margin-left: 24.84rpx;
}
.text_5 {
	line-height: 28.65rpx;
}
.image_5 {
	margin: 75rpx 5.63rpx 0 107.96rpx;
	border-radius: 9.38rpx;
	width: 56.25rpx;
	height: 56.25rpx;
}
@import url(../../../common/css/global.css);
</style>