316 lines
7.3 KiB
Vue
316 lines
7.3 KiB
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">
|
|
<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';
|
|
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);
|
|
await Getsort() //获取商品类别
|
|
await changeTypes( sort.value[0] , 0 ) //首先获取最开始的类别
|
|
getFonts() //获取字体
|
|
})
|
|
//获取商品分类
|
|
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>
|