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

<template>
	<view class="flex-row relative page">
	  <view class="flex-row justify-between items-center section_2 pos">
	    <text class="text">商品</text>
	    <view class="flex-row items-center section_3" @click="goToSearch">
	      <image
	        class="image"
	        src="https://carbon2.obs.cn-north-4.myhuaweicloud.com:443/feiyi%2Ftest%2F0%2FODjBDedI-sousuo.png"
	      />
	      <input class="text-wrapper" placeholder="搜索商品" disabled />
	    </view>
	  </view>
	  
	  <!-- <image
	    class="image_2 pos_2"
	    src="https://carbon2.obs.cn-north-4.myhuaweicloud.com:443/feiyi%2Ftest%2F0%2FloZarLZD-%E6%B5%8B%E8%AF%95%E6%8F%92%E5%85%A5.jpg"
	  /> --> 
		<carousel class="pos_2" :img-list="imgList" url-key="url" @selected="selectedBanner"/>
	  
		<!-- 类别列表 -->
	  <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 sort" 
							:key="index"
							@click="changeTypes(item , index)"
							>
	        <image
						:style="changeImgStyle(index)"
	          class="image_3"
	          :src="item.imgurl"
	        />
	        <text class="font_2 text_4" :style="FontsStyle(index)">{{ item.name }}</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 productList" :key="index" @click="goToProduct(item)">
	      <image
	        class="self-center image_4"
	        :src="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 }}</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>
	  <text class="font text_3 pos_4">{{ product_type.type }}</text>
	</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 carousel from '@/components/vear-carousel/vear-carousel'

const currentColor = ref(0);
const sort =ref([{}]) //商品类别对象数组
const headerList = ref([{}]) //类别标题和介绍
const productList = ref([{}]) //类别下对应的商品 
const cookie = wx.getStorageSync("cookie") 

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

onMounted( async () => {
	console.log('cookie--->',cookie);
})
onLoad( async (options)=>{
	await Getsort()
	await changeTypes( sort.value[0] , 0 ) //首先获取最开始的类别
	await getFonts()  //获取字体
})
onPullDownRefresh( async ()=>{  //下拉刷新
	await Getsort()
	await changeTypes( sort.value[0] , 0 ) //首先获取最开始的类别
	setTimeout(()=>{
		uni.stopPullDownRefresh()   //停止下拉刷新
	},1000)
}) 
//获取商品分类
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
	product_type.value.type = item.name
	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
		})
	}
}
//点击后颜色变为红色
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)
	})
}
const getFonts = () => { //导入字体
	uni.loadFontFace({
		family: 'FangZhengFonts',
		source: `url("https://carbon2.obs.cn-north-4.myhuaweicloud.com/fonts/FangZhengFonts.TTF")`,
		success: (res) => {
			console.log('success', res);
		},
		fail: (err) => {
			console.log('err', err);
		}
	})
}





const imgList = ref([{
				url: 'https://carbon2.obs.cn-north-4.myhuaweicloud.com:443/feiyi%2Ftest%2F0%2FVZJcndFL-VCG211334705187.png',
				id: 1
			},{
				url: ' https://carbon2.obs.cn-north-4.myhuaweicloud.com:443/feiyi%2Ftest%2F0%2FplnBXSNq-VCG211345185434.png',
				id: 2
			},{
				url: 'https://carbon2.obs.cn-north-4.myhuaweicloud.com:443/feiyi%2Ftest%2F0%2FpWmCgSml-VCG21gic13424447.png',
				id: 3
			},{
				url: 'https://carbon2.obs.cn-north-4.myhuaweicloud.com:443/feiyi%2Ftest%2F0%2FbGthWnIG-VCG211247054746.png',
				id: 4
			},])





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



















</script>

<style lang="scss" scoped>
	
	
::-webkit-scrollbar {
  display: none;
}

.good-list {
	overflow: auto;
	height: 750rpx;
}

.my-aside {
	overflow: auto;
	height: 800rpx;
}

.mt-9 {
  margin-top: 16.88rpx;
}
.page {
  background-color: #ffffff;
  background-image: url('https://carbon2.obs.cn-north-4.myhuaweicloud.com:443/feiyi%2Ftest%2F0%2FQfLHXSAU-feiyigongfangbeijin.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
	height: 100vh;
  width: 100%;
	overflow: hidden;
}
.section_2 {
  padding: 20rpx 35.41rpx 23.75rpx;
  background-color: #ebe7e4;
}
.pos {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
}
.text {
  color: #000000;
  font-size: 35rpx;
  font-family: FangZhengFonts;
  line-height: 35.66rpx;
}
.section_3 {
  margin-right: 38.96rpx;
  padding: 5.49rpx 12.99rpx 5.76rpx;
  background-color: #f2eeeb;
  height: 70rpx;
  width: 550rpx;
  border: solid 1.88rpx #fffef8;
  border-radius: 28.13rpx;
}
.image {
  width: 60.63rpx;
  height: 45rpx;
}
.text-wrapper {
	padding: 0 10rpx 0;
}
.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: #f4f3f1;
  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: #000000;
}
.text_4 {
	font-size: 12px;
  color: #727272;
  line-height: 25.43rpx;
}
.pos_5 {
  position: absolute;
  right: 34.63rpx;
  top: 628.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: 28.95rpx;
  color: #000000;
}
.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>