<template>
|
<view class="wh-full">
|
<useNavbar title="分类"></useNavbar>
|
|
<!-- 头部组件 -->
|
<useHeader :fixed="headerFixed" :placeholder="headerPlaceholder" type="gray" :search-tip="searchTip"
|
:search-auto="searchAuto"></useHeader>
|
|
<!-- 分类 -->
|
<view class="category dflex-s h-full padding-top-big">
|
<!-- 左侧一级分类 -->
|
<view class="h-full left padding-tb-16">
|
<scroll-view class="h-full" scroll-y="true" :scroll-top="scrollTop"
|
:scroll-with-animation="true">
|
<view v-for="(item,index) in fdatas" :key="index" class="item dflex-c"
|
:class="{'ac':active == index}">
|
<text @click="selectcategoryproduct(item,index)"> {{ item.name }}</text>
|
</view>
|
</scroll-view>
|
</view>
|
|
<!-- 右侧 1二级分类 2商品列表 -->
|
<scroll-view class="h-full right" scroll-with-animation scroll-y :scroll-top="top"
|
:style="{ height: scrollHeight, padding: 0 , width: '100%', backgroundColor: 'transparent'}"
|
@scroll="onScroll">
|
<view v-for="(item,index) in children" :key="index" class="item dflex-c" style="width: 100%;"
|
:class="{'ac':active == index}">
|
<view class="limit-area use-area margin-lr-sm" style="width: 100%;">
|
<text style="font-size: 15px;font-weight: bold;">{{ item.name }}</text>
|
<u-row v-if="item.children.length>0">
|
<u-col span="6" v-for="(i,indexs) in item.children" @click="getproducts(i,indexs)">
|
<view style="text-align: center;">
|
<image class="flex1" mode="heightFix" style="margin-top: 10px;width: 100%;"
|
src="https://www.farriver.top/d335a9db-464f-4123-9f2f-66e36e800489/others/20221022/d3de83ae-41b2-4ec3-bec5-38f0417cd196.jpg">
|
</image>
|
</view>
|
<view style="text-align: center;">
|
{{i.name}}
|
</view>
|
</u-col>
|
</u-row>
|
<u-empty v-else text="暂无更多数据!" mode="data"></u-empty>
|
</view>
|
</view>
|
</scroll-view>
|
|
<!-- 置顶 -->
|
<use-totop ref="usetop" type="tabbar" bottom="150" :top="10" :style="{ marginBottom: navHeight + 'px' }"
|
@to="totop"></use-totop>
|
</view>
|
<template>
|
<view>
|
<u-popup v-model="show" mode="bottom" width="50px" height="400px">
|
<view v-if="productformation">
|
<view style="margin-top: 80px;">
|
<u-row>
|
<u-col span="1">
|
<view>
|
<image :src="productformation.img" mode="aspectFill"
|
style="height: 80px;width: 80px;">
|
</image>
|
</view>
|
</u-col>
|
<u-col span="8">
|
<view style="margin-left: 150px;margin-top: -90px;">
|
<view>名称：{{productformation.productname}}</view>
|
<view>价格：{{productformation.price}}元</view>
|
</view>
|
</u-col>
|
</u-row>
|
</view>
|
<!-- <view>颜色：</view> -->
|
<view style="margin-left: 20px;">
|
<u-row>
|
尺码:
|
</u-row>
|
<u-row>
|
<view>
|
<u-radio-group v-model="value">
|
<text @change="radioChange" v-for="(item, index) in chima" :name="item"
|
style="width: 50px; border-radius: 30%; border-style:solid;text-align: center;margin-left: 20px;margin-top: 5px;">
|
{{item}}
|
</text>
|
</u-radio-group>
|
|
</view>
|
</u-row>
|
</view>
|
</view>
|
<view style=": 1px;">
|
<button @click="addshoppbus">加入购物车</button>
|
<button>立即购买</button>
|
</view>
|
</u-popup>
|
</view>
|
</template>
|
|
<!-- 切换模式 1二级分类 2商品列表 -->
|
<view class="fixed-top" :style="{ marginBottom: navHeight + 'px' }" @click="changeMode">
|
<text class="iconfont iconpailie" v-if="mode == 1"></text>
|
<text class="iconfont iconpailie02" v-if="mode == 2"></text>
|
</view>
|
</view>
|
</template>
|
|
<script>
|
import {ref, reactive, toRefs, onMounted, getCurrentInstance} from "vue";
|
import {onShow} from "@dcloudio/uni-app";
|
import {useBasicInfoStore} from "../../store/basicInfo";
|
import {GetProductCategoryListByParentName, GetProductListByCategoryId} from '../../apis/api';
|
import {useNavbar} from "../../components/use-navbar/use-navbar.vue";
|
import {useHeader} from "../../components/use-header/use-header.vue";
|
|
export default {
|
components: {useNavbar, useHeader},
|
setup() {
|
const userStore = useBasicInfoStore()
|
const {proxy} = getCurrentInstance();
|
const state = reactive({
|
categories: [],
|
category: userStore.category,
|
products: [],
|
// 1分类列表 2商品列表
|
mode: 2,
|
// 兼容支付宝 height 显示 bug
|
scrollHeight: '100%',
|
active: 0,
|
scrollTop: 0,
|
height: 0,
|
// 头部参数
|
headerPlaceholder: 0,
|
headerFixed: !0,
|
searchAuto: !0,
|
searchTip: '请输入搜索关键字',
|
// 当前选中分类ID
|
value: 1,
|
needcount: "",
|
cid: 0,
|
cname: '',
|
categoryids: [],
|
// 一级数据
|
fdatas: [],
|
// 二级数据
|
children: [],
|
secchildren: [],
|
categoryDatas: [],
|
categoryEmpty: false,
|
show: false,
|
needpayproducts: [],
|
// 商品列表
|
goodsDatas: [],
|
chima: ["39", "40", "41", "42", "43",],
|
empty: false,
|
hasmore: 0,
|
productformation: [],
|
loadmoreType: 'nomore',
|
// 商品请求数据
|
reqdata: {
|
rows: 20,
|
page: 1
|
},
|
|
top: 0,
|
navHeight: 0
|
})
|
|
onMounted(() => {
|
Init();
|
loadProductCategories();
|
});
|
|
onShow((option) => {
|
console.log(option); // 获取url中query部分的参数
|
})
|
|
const Init = () => {
|
|
}
|
|
const loadProductCategories = () => {
|
state.categories = [];
|
|
GetProductCategoryListByParentName("家政服务").then(resp => {
|
if (resp.data) {
|
state.categories = resp.data;
|
if (state.categories) {
|
if (!state.category) {
|
state.category = state.categories.shift();
|
console.log(state.category);
|
}
|
|
loadProductListByCategoryId(state.category.id);
|
}
|
}
|
}).catch(err => {
|
console.error(err);
|
});
|
}
|
|
const loadProductListByCategoryId = (categoryid) => {
|
state.products = [];
|
|
GetProductListByCategoryId(categoryid).then(resp => {
|
if (resp.data) {
|
state.products = resp.data;
|
}
|
}).catch(err => {
|
console.error(err);
|
});
|
}
|
|
const onProductClick = (product) => {
|
let params = {
|
id: product.id
|
}
|
|
uni.navigateTo({
|
url: `/pages/product/index?data=${encodeURIComponent(JSON.stringify(params))}`,
|
});
|
|
// proxy.$refs.uToast.success(`点击了${product.name}`)
|
}
|
|
return {...toRefs(state), userStore, onProductClick}
|
}
|
}
|
</script>
|
|
<style scoped lang="scss">
|
page {
|
height: 100%;
|
background-color: $page-color-base;
|
}
|
|
.category {
|
overflow: hidden;
|
|
.left {
|
width: 180 rpx;
|
background-color: $page-color-base;
|
|
.item {
|
font-size: 28 rpx;
|
height: 100 rpx;
|
color: $font-color-base;
|
position: relative;
|
|
&.active {
|
color: $uni-color-primary;
|
font-size: 38 rpx;
|
font-weight: 580;
|
}
|
}
|
}
|
|
.addbutton {
|
height: 28px;
|
width: 20px;
|
background-color: red;
|
margin-left: 150px;
|
border-radius: 50%;
|
margin-top: 25px;
|
line-height: 28px;
|
|
|
}
|
|
.right {
|
flex: 1;
|
overflow: hidden;
|
display: block;
|
|
.item {
|
flex-shrink: 0;
|
width: 33.33%;
|
font-size: $font-sm + 2upx;
|
color: #666;
|
|
image {
|
width: 130 rpx;
|
height: 130 rpx;
|
}
|
}
|
}
|
}
|
|
.goods {
|
display: flex;
|
|
.goods-left {
|
image {
|
width: 120 rpx;
|
height: 120 rpx;
|
}
|
}
|
|
.price-box {
|
bottom: 0;
|
}
|
}
|
</style>
|
