<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"> <image class="image" src="https://carbon2.obs.cn-north-4.myhuaweicloud.com:443/feiyi%2Ftest%2F0%2FODjBDedI-sousuo.png" /> <input class="text-wrapper" placeholder="“梅花簪子”" /> </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" /> <!-- 类别列表 --> <view class="flex-col justify-start items-center section_4 pos_3"> <!-- <view class="flex-col"> --> <scroll-view scroll-y class="scrollable-contentType"> <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> </scroll-view> <!-- </view> --> </view> <!-- 商品列表 --> <view class="flex-col pos_5"> <scroll-view scroll-y class="scrollable-content"> <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> </scroll-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'; const currentColor = ref(0); const sort =ref([{}]) //商品类别对象数组 const headerList = ref([{}]) //类别标题和介绍 const productList = ref([{}]) //类别下对应的商品 const cookie = wx.getStorageSync("cookie") const product_type = ref({ type: "材料包" }) const items_1 = [null,null,null] 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); } }) } </script> <style lang="scss" scoped> .scrollable-contentType { height: 56vh; } .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: 30rpx 45.41rpx 33.75rpx; background-color: #ebe7e4; } .pos { position: absolute; left: 0; right: 0; top: 0; } .text { color: #000000; font-size: 45rpx; font-family: FangZhengFonts; line-height: 41.66rpx; } .section_3 { margin-right: 38.96rpx; padding: 5.49rpx 12.99rpx 5.76rpx; background-color: #f2eeeb; border-radius: 28.13rpx; height: 90rpx; border: solid 1.88rpx #fffef8; } .image { width: 95.63rpx; height: 75rpx; } .text-wrapper { margin-left: -9.38rpx; margin-right: 15.26rpx; } .image_2 { width: 100vw; height: 55vw; } .pos_2 { position: absolute; left: 0; right: 0; top: 153.75rpx; } .section_4 { padding: 7.5rpx 0 0rpx; background-color: #f4f3f1; width: 109.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>