first commit
This commit is contained in:
PC-202306242200\Administrator
290
pages/cate/cate.vue
Normal file
290
pages/cate/cate.vue
Normal file
@@ -0,0 +1,290 @@
|
||||
<template>
|
||||
<view class="u-wrap">
|
||||
<wd-search @search="search" @clear="clear" placeholder-left placeholder="搜一搜药品名称" hide-cancel :customStyle="{ background: '#799675', height: '80rpx' }" />
|
||||
<view class="u-menu-wrap">
|
||||
<scroll-view scroll-y scroll-with-animation class="u-tab-view menu-scroll-view">
|
||||
<view
|
||||
v-for="(item, index) in goodsCate"
|
||||
:key="index"
|
||||
class="u-tab-item"
|
||||
:class="[current == index ? 'u-tab-item-active' : '']"
|
||||
:data-current="index"
|
||||
@tap.stop="swichMenu(index, item.id)"
|
||||
>
|
||||
<text class="u-line-1">{{ item.name }}</text>
|
||||
</view>
|
||||
</scroll-view>
|
||||
|
||||
<z-paging ref="paging" v-model="dataList" use-page-scroll @query="queryList" :paging-style="{ 'background-color': '#FFF' }">
|
||||
<view class="right-box">
|
||||
<view class="page-view">
|
||||
<view class="page-view_item" v-for="(item, index) in dataList" :key="index" @click="toGoods(item.id)">
|
||||
<image :src="item.cover" mode="aspectFill"></image>
|
||||
<view style="flex: 1">
|
||||
<view class="page-view_item_title">{{ item.name }}</view>
|
||||
<view class="page-view_item_info">{{ item.specs }}</view>
|
||||
<view class="page-view_item_price">
|
||||
<view class="page-view_item_price_left">￥{{ item.currentPrice }}</view>
|
||||
<view class="page-view_item_price_right">￥{{ item.originalPrice }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</z-paging>
|
||||
|
||||
<!--
|
||||
<scroll-view scroll-y class="right-box">
|
||||
<view class="page-view">
|
||||
<view class="page-view_item" v-for="(item, index) in goodsList" :key="index" @click="toGoods(item.id)">
|
||||
<image :src="item.cover" mode="aspectFill"></image>
|
||||
<view style="flex: 1">
|
||||
<view class="page-view_item_title">{{ item.name }}</view>
|
||||
<view class="page-view_item_info">{{ item.specs }}</view>
|
||||
<view class="page-view_item_price">
|
||||
<view class="page-view_item_price_left">￥{{ item.originalPrice }}</view>
|
||||
<view class="page-view_item_price_right">￥{{ item.currentPrice }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view> -->
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
import { onLoad } from '@dcloudio/uni-app';
|
||||
import api from '@/api/index';
|
||||
const current = ref<number>(0);
|
||||
const goodsCate = ref([]);
|
||||
const goodsList = ref([]);
|
||||
const paging = ref(null);
|
||||
const dataList = ref([]);
|
||||
const goodsCateId = ref(null);
|
||||
const name = ref('');
|
||||
// interface goodsCateType {
|
||||
// list: Array;
|
||||
// total: number;
|
||||
// }
|
||||
|
||||
onLoad(() => {
|
||||
api.goodsCate().then((res: any) => {
|
||||
goodsCate.value = res.list;
|
||||
goodsCateId.value = res.list[0].id;
|
||||
});
|
||||
});
|
||||
|
||||
const queryList = (pageNo, pageSize) => {
|
||||
if (!goodsCateId.value) {
|
||||
api.goodsCate().then((res: any) => {
|
||||
goodsCate.value = res.list;
|
||||
goodsCateId.value = res.list[0].id;
|
||||
api.goodsPage({ pageNo, pageSize, categoryId: goodsCateId.value, name: name.value })
|
||||
.then((res: any) => {
|
||||
paging.value.complete(res.list);
|
||||
})
|
||||
.catch((res) => {
|
||||
paging.value.complete(false);
|
||||
});
|
||||
});
|
||||
} else {
|
||||
api.goodsPage({ pageNo, pageSize, categoryId: goodsCateId.value, name: name.value })
|
||||
.then((res: any) => {
|
||||
paging.value.complete(res.list);
|
||||
})
|
||||
.catch((res) => {
|
||||
paging.value.complete(false);
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const toGoods = (e) => {
|
||||
uni.navigateTo({
|
||||
url: `/pages/goods/goods?id=${e}`
|
||||
});
|
||||
};
|
||||
|
||||
const clear = () => {
|
||||
name.value = '';
|
||||
paging.value.reload();
|
||||
};
|
||||
|
||||
const search = (e) => {
|
||||
name.value = e.value;
|
||||
paging.value.reload();
|
||||
};
|
||||
|
||||
let swichMenu = (index, id) => {
|
||||
current.value = index;
|
||||
goodsCateId.value = id;
|
||||
paging.value.reload();
|
||||
// api.goodsPage({ categoryId: id }).then((res) => {
|
||||
// goodsList.value = res.list;
|
||||
// });
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.u-wrap {
|
||||
height: calc(100vh);
|
||||
/* #ifdef H5 */
|
||||
height: calc(100vh - var(--window-top));
|
||||
/* #endif */
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.u-search-box {
|
||||
padding: 18rpx 30rpx;
|
||||
}
|
||||
|
||||
.u-menu-wrap {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.u-search-inner {
|
||||
background-color: rgb(234, 234, 234);
|
||||
border-radius: 100rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 10rpx 16rpx;
|
||||
}
|
||||
|
||||
.u-search-text {
|
||||
font-size: 26rpx;
|
||||
color: #799675;
|
||||
margin-left: 10rpx;
|
||||
}
|
||||
|
||||
.u-tab-view {
|
||||
width: 200rpx;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.u-tab-item {
|
||||
height: 110rpx;
|
||||
background: #f6f6f6;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 26rpx;
|
||||
color: #444;
|
||||
font-weight: 400;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.u-tab-item-active {
|
||||
position: relative;
|
||||
color: #799675;
|
||||
font-size: 30rpx;
|
||||
font-weight: 600;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.u-tab-item-active::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
border-left: 4px solid #799675;
|
||||
height: 32rpx;
|
||||
left: 0;
|
||||
top: 39rpx;
|
||||
}
|
||||
|
||||
.u-tab-view {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.right-box {
|
||||
width: 550rpx;
|
||||
flex: 1;
|
||||
background-color: #fff;
|
||||
// background-color: rgb(250, 250, 250);
|
||||
}
|
||||
|
||||
.page-view {
|
||||
padding: 16rpx;
|
||||
|
||||
&_item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 25rpx;
|
||||
image {
|
||||
width: 160rpx;
|
||||
height: 160rpx;
|
||||
margin-right: 22rpx;
|
||||
border-radius: 18rpx;
|
||||
}
|
||||
&_title {
|
||||
font-size: 28rpx;
|
||||
font-weight: bold;
|
||||
color: #232323;
|
||||
}
|
||||
|
||||
&_info {
|
||||
font-weight: 400;
|
||||
font-size: 24rpx;
|
||||
color: #232323;
|
||||
margin: 20rpx 0;
|
||||
}
|
||||
|
||||
&_price {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
&_left {
|
||||
font-weight: bold;
|
||||
font-size: 38rpx;
|
||||
color: #ff2929;
|
||||
margin-right: 35rpx;
|
||||
}
|
||||
&_right {
|
||||
font-size: 24rpx;
|
||||
color: #999999;
|
||||
text-decoration-line: line-through;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.class-item {
|
||||
margin-bottom: 30rpx;
|
||||
background-color: #fff;
|
||||
padding: 16rpx;
|
||||
border-radius: 8rpx;
|
||||
}
|
||||
|
||||
.item-title {
|
||||
font-size: 26rpx;
|
||||
color: #000;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.item-menu-name {
|
||||
font-weight: normal;
|
||||
font-size: 24rpx;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.item-container {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.thumb-box {
|
||||
width: 33.333333%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
|
||||
.item-menu-image {
|
||||
width: 120rpx;
|
||||
height: 120rpx;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user