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

<template>
	<view class="flex-row relative page" :style="{ backgroundImage: 'url(' + bkgPubilcPath + ')' }">
		<agentBubbleVue></agentBubbleVue>
		<view class="flex-row justify-between items-center section_2 pos">
			<!-- <text class="text" style="color: #E79EA1;">商品</text> -->
			<view class="flex-row items-center section_3" @click="goToSearch">
				<image mode="aspectFit" class="image" :src="workshopUrl + '/searchGood/search.png'" />
				<text class="text-wrapper font" style="color: #B1B1B1;">搜索商品</text>
			</view>
		</view>

		<carousel class="pos_2" :img-list="imgList" url-key="url" />

		<!-- 类别列表 -->
		<view class="flex-col justify-start items-center section_4 pos_3">
			<!-- <view class="flex-col"> -->
			<view class="my-aside">
				<view class="flex-col items-center self-stretch group" v-for="(item, index) in typeList" :key="index"
					@click="changeTypes(item , index)">
					<image :style="changeImgStyle(index)" class="image_3" mode="aspectFill"
						:src="publicPath + typeImgUrl[index]" />
					<text class="font_2 text_4" :style="FontsStyle(index)">{{ item }}</text>
				</view>
			</view>
			<!-- </view> -->
		</view>
		<!-- 商品列表 -->
		<view class="flex-col pos_5">
			<view class="good-list">
				<view class="flex-row list-item mt-9" v-for="(item, index) in goodList" :key="index" @click="goToProduct(item)">
					<image class="self-center image_4" mode="aspectFill" :src="publicPath + item.goodImg.split(';')[0]" />
					<view class="flex-col items-start self-center group_1">
						<text class="font">{{ item.name }}</text>
						<text class="font_3 mt-9">{{ item.intro }}</text>
						<text class="font_4 text_5 text_1 mt-9">￥{{ item.price.toFixed(2) }}</text>
					</view>
					<!-- <image
	        class="self-start image_5"
	        src="https://carbon2.obs.cn-north-4.myhuaweicloud.com:443/feiyi%2Ftest%2F0%2FhuDBpAGx-add.png"
					@click.stop
	      /> -->
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { ref, onMounted, toRaw } from 'vue';
	import { baseUrl, testUrl, suiUrl } from '@/api/request';
	import { onLoad, onPullDownRefresh } from '@dcloudio/uni-app';
	import { getFonts } from '../../../common/globalFont';
	import carousel from '@/components/vear-carousel/vear-carousel'
	import { all } from 'mathjs';
	import { workshopUrl, bkgPubilcPath, storeHomeUrl, publicPath } from '../../../common/globalImagesUrl';
	import agentBubbleVue from '../agentBubble/agentBubble.vue';

	const bkgUrl = ref(storeHomeUrl + '/main/bkg.png')
	const currentColor = ref(0);
	const sort = ref([{}]) //商品类别对象数组
	const headerList = ref([{}]) //类别标题和介绍
	const productList = ref([{}]) //类别下对应的商品 
	const cookie = wx.getStorageSync("cookie")
	const imgList = ref([]) //轮播图展示数组
	const carouseList = ref([]) //轮播图数组
	const allGoodList = ref(null)
	const typeList = ref(null)
	const goodList = ref(null)
	const typeImgUrl = ref(null)
	let pointIdx = 0;

	const product_type = ref({
		type: "材料包"
	})

	onLoad((options) => {
		getFonts()
		// await Getsort()
		// await changeTypes( sort.value[0] , 0 ) //首先获取最开始的类别
		getAllGoods()
		getCarouseList()
		wx.showShareMenu({
			withShareTicket: true,
			menus: ["shareAppMessage", "shareTimeline"]
		})
	})
	onPullDownRefresh(() => { //下拉刷新
		// await Getsort()
		// await changeTypes( sort.value[0] , 0 ) //首先获取最开始的类别
		getAllGoods()
		getCarouseList()
		setTimeout(() => {
			uni.stopPullDownRefresh() //停止下拉刷新
		}, 1000)
	})

	const getCarouseList = async () => { //获取轮播图
		const res = await uni.request({
			url: baseUrl + '/banner/query',
			method: 'POST',
			header: {
				cookie
			},
			data: {
				type: '实体类'
			}
		})
		if (res.data.code === 1) {
			console.log('轮播图信息--->', res.data.data);
			carouseList.value = res.data.data
			carouseList.value.forEach((item) => {
				imgList.value.push({
					url: publicPath + item.url
				})
			})
		}
	}

	//获取商品分类
	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.data);
	}


	const goToSearch = () => {
		uni.navigateTo({
			url: '../../workshop/searchGood/searchGood?type=1'
		})
	}





	const getAllGoods = async () => {
		const res = await uni.request({
			url: baseUrl + '/global/getAllGoods',
			method: 'GET'
		})
		allGoodList.value = Object.entries(res.data.data)
		typeList.value = allGoodList.value.map(item => item[0])
		typeImgUrl.value = allGoodList.value.map(item => item[1].image)
		goodList.value = allGoodList.value[0][1].goodLabelVOList
	}


	//更改类别
	const changeTypes = async (item, index) => {
		currentColor.value = index
		product_type.value.type = item.name
		if (pointIdx === index) return
		pointIdx = index
		goodList.value = allGoodList.value[pointIdx][1].goodLabelVOList
	}








	//点击后颜色变为红色
	const FontsStyle = (index) => ({
		color: currentColor.value === index ? '#C35C5D' : '#727272'
	})
	//点击后类别图片有阴影
	const changeImgStyle = (index) => ({
		filter: currentColor.value === index ? 'drop-shadow(0rpx 7.5rpx 3.75rpx #acacac)' : 'none'
	});
	//跳转商品详情
	const goToProduct = (item) => {
		console.log('跳转商品详情的item--->', item);
		uni.navigateTo({
			url: '../../../pages/store-home/ProductDetails/ProductDetails?gid=' + JSON.stringify(item.id)
		})
	}
</script>

<style lang="scss" scoped>
	input {
		font-family: FangZhengFonts;
	}

	::-webkit-scrollbar {
		display: none;
	}

	.good-list {
		overflow: auto;
		height: 60vh;
		padding-bottom: 80rpx;
	}

	.my-aside {
		overflow: auto;
		height: 60vh;
		padding-bottom: 40rpx;
	}

	.mt-9 {
		margin-top: 16.88rpx;
	}

	.page {
		background-color: #ffffff;
		background-size: 100% 100%;
		background-repeat: no-repeat;
		height: 100vh;
		width: 100%;
		overflow: hidden;
	}

	.section_2 {
		padding: 20rpx 35.41rpx 23.75rpx;
		background-color: #fbdedf;
	}

	.pos {
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
	}

	.text {
		color: #323232;
		font-size: 35rpx;
		font-family: FangZhengFonts;
		line-height: 35.66rpx;
	}

	.section_3 {
		padding: 5.49rpx 12.99rpx 5.76rpx;
		margin: 0 auto;
		background-color: #fff;
		height: 70rpx;
		width: 580rpx;
		border-radius: 28.13rpx;
	}

	.image {
		width: 60.63rpx;
		height: 45rpx;
	}

	.text-wrapper {
		padding: 0;
		margin-left: -5rpx;
	}

	.image_2 {
		// width: 100vw;
		// height: 900rpx;
	}

	.pos_2 {
		position: absolute;
		left: 0;
		right: 0;
		top: 118.75rpx;
	}

	.section_4 {
		padding: 7.5rpx 0 0rpx;
		background-color: #fff;
		border-radius: 0 15.38rpx 15.38rpx 0;
		width: 119.75rpx;
	}

	.pos_3 {
		position: absolute;
		left: 0;
		top: 566.25rpx;
	}

	.group {
		margin: 0 2.44rpx 20rpx 0;
		// margin-right: 2.44rpx;
	}

	.image_3 {
		// filter: drop-shadow(0rpx 7.5rpx 3.75rpx #acacac);   //点击图片有阴影
		width: 90rpx;
		height: 90rpx;
		margin-bottom: 10rpx;
	}

	.font_2 {
		font-size: 26.25rpx;
		font-family: FangZhengFonts;
		line-height: 24.41rpx;
		color: #323232;
	}

	.text_4 {
		font-size: 12px;
		color: #727272;
		line-height: 25.43rpx;
	}

	.pos_5 {
		position: absolute;
		right: 34.63rpx;
		top: 570.13rpx;
	}

	.list-item {
		width: 580rpx;
		padding: 17.53rpx 13.89rpx 18.23rpx;
		background-color: #ffffff;
		border-radius: 9.38rpx;
	}

	.list-item:first-child {
		margin-top: 0;
	}

	.image_4 {
		border-radius: 9.38rpx;
		width: 121.88rpx;
		height: 112.5rpx;
	}

	.group_1 {
		margin-left: 21.68rpx;
	}

	.font {
		font-size: 30rpx;
		font-family: FangZhengFonts;
		line-height: 30rpx;
		color: #323232;
	}

	.font_3 {
		font-size: 22.5rpx;
		font-family: FangZhengFonts;
		line-height: 21.88rpx;
		color: #727272;
		width: 180px;
		word-wrap: break-word;
	}

	.font_4 {
		font-size: 26.25rpx;
		font-family: FangZhengFonts;
		line-height: 17.53rpx;
		color: #ff0000;
	}

	.text_5 {
		-webkit-text-stroke: 1.88rpx #ff000040;
	}

	.text_1 {
		margin-left: 3.43rpx;
	}

	.image_5 {
		margin: 37.77rpx 2.8rpx 0 0.85rpx;
		border-radius: 9.38rpx;
		width: 52.5rpx;
		height: 48.75rpx;
	}

	.text_3 {
		color: #c35c5d;
		line-height: 29.06rpx;
	}

	.pos_4 {
		position: absolute;
		left: 142.29rpx;
		top: 585.94rpx;
	}

	@import url(../../../common/css/global.css);
</style>