175 lines
4.2 KiB
Vue
175 lines
4.2 KiB
Vue
<script setup>
|
||
import { reactive, ref } from 'vue'
|
||
import { onLoad } from '@dcloudio/uni-app'
|
||
import { getCategory } from '@/api/mall'
|
||
|
||
// 顶部分类选项
|
||
const topNavOptions = ref([])
|
||
const formData = reactive({
|
||
name: '',
|
||
type: '0'
|
||
})
|
||
|
||
const categoryList = async () => {
|
||
const res = await getCategory()
|
||
topNavOptions.value = res.data
|
||
console.log(res.data, '===22==')
|
||
}
|
||
|
||
const onTop = value => {
|
||
formData.type = value
|
||
}
|
||
|
||
onLoad(() => {
|
||
categoryList()
|
||
})
|
||
</script>
|
||
|
||
<template>
|
||
<view class="mall-list">
|
||
<view class="top-box">
|
||
<cb-search v-model="formData.name"></cb-search>
|
||
<view class="top-options">
|
||
<view
|
||
v-for="item in topNavOptions"
|
||
:key="item.value"
|
||
:class="{ active: item.id === formData.type }"
|
||
class="text"
|
||
@click="onTop(item.id)"
|
||
>
|
||
{{ item.categoryName }}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 商品卡片 -->
|
||
<view class="card-list">
|
||
<view v-for="item in 3" :key="item" class="card-item">
|
||
<image
|
||
src="https://wx1.sinaimg.cn/mw690/92eeb099gy1i29hl0ne80j21jk2bcash.jpg"
|
||
mode="scaleToFill"
|
||
class="imghead"
|
||
></image>
|
||
<text class="title">名称</text>
|
||
<view class="price">
|
||
<view class="num-box">
|
||
<text class="num">￥</text>
|
||
<text class="num">0.00</text>
|
||
</view>
|
||
<text class="buy">好评率：99%</text>
|
||
</view>
|
||
<!-- 拼单数量 -->
|
||
<text class="bottom-name">拼单数量:12505件</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<style lang="scss" scoped>
|
||
.mall-list {
|
||
.top-box {
|
||
padding: 24rpx;
|
||
.top-options {
|
||
overflow: hidden;
|
||
margin-top: 32rpx;
|
||
margin-bottom: 8rpx;
|
||
display: flex;
|
||
flex-direction: row;
|
||
white-space: nowrap; /* 重要：防止换行 */
|
||
-webkit-overflow-scrolling: touch; /* iOS 平滑滚动 */
|
||
|
||
.text + .text {
|
||
margin-left: 16rpx;
|
||
}
|
||
.text {
|
||
flex-shrink: 0;
|
||
padding: 8rpx 16rpx;
|
||
font-family: PingFang SC, PingFang SC;
|
||
font-weight: 500;
|
||
font-size: 28rpx;
|
||
color: #999999;
|
||
text-align: center;
|
||
font-style: normal;
|
||
text-transform: none;
|
||
background: #f4f4f4;
|
||
border-radius: 64rpx;
|
||
box-sizing: border-box;
|
||
}
|
||
.active {
|
||
padding: 6rpx 14rpx;
|
||
border-radius: 64rpx;
|
||
border: 2rpx solid #00d993;
|
||
color: #00d993;
|
||
}
|
||
}
|
||
}
|
||
|
||
.card-list {
|
||
background: #f9f9f9;
|
||
padding: 32rpx 24rpx;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
justify-content: space-between;
|
||
|
||
.card-item {
|
||
border-radius: 14rpx;
|
||
overflow: hidden;
|
||
margin-bottom: 18rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
width: 344rpx;
|
||
background: #ffffff;
|
||
font-family: PingFang SC, PingFang SC;
|
||
font-style: normal;
|
||
text-transform: none;
|
||
.imghead {
|
||
width: 100%;
|
||
height: 288rpx;
|
||
}
|
||
.title {
|
||
font-weight: bold;
|
||
font-size: 28rpx;
|
||
color: #333333;
|
||
padding: 16rpx;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
.price {
|
||
padding: 0 16rpx;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: baseline;
|
||
.num-box {
|
||
display: flex;
|
||
align-items: baseline;
|
||
.num {
|
||
font-weight: 500;
|
||
font-size: 24rpx;
|
||
color: #eb1c26;
|
||
&:last-child {
|
||
margin-left: 2rpx;
|
||
font-weight: bold;
|
||
font-size: 32rpx;
|
||
color: #eb1c26;
|
||
}
|
||
}
|
||
}
|
||
.buy {
|
||
font-weight: 500;
|
||
font-size: 24rpx;
|
||
color: #00d993;
|
||
}
|
||
}
|
||
|
||
.bottom-name {
|
||
padding: 16rpx 16rpx 26rpx 16rpx;
|
||
font-weight: 500;
|
||
font-size: 24rpx;
|
||
color: #999999;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|