107 lines
1.9 KiB
Vue
107 lines
1.9 KiB
Vue
<script setup>
|
|
// 礼包专区
|
|
import {
|
|
ref,
|
|
reactive,
|
|
getCurrentInstance,
|
|
} from 'vue'
|
|
import {
|
|
onReachBottom,
|
|
onPullDownRefresh,
|
|
onShow,
|
|
onLoad,
|
|
onReady,
|
|
} from '@dcloudio/uni-app';
|
|
// 工具库
|
|
import util from '@/common/js/util.js'
|
|
//
|
|
import api from '@/api/index.js'
|
|
// 商品列表
|
|
import productList from '@/components/shop/productList/productList'
|
|
|
|
// tab
|
|
const tab = reactive([{
|
|
name: '礼包专区',
|
|
},
|
|
{
|
|
name: '超值礼包',
|
|
},
|
|
{
|
|
name: '大礼包',
|
|
},
|
|
{
|
|
name: '小礼包',
|
|
},
|
|
])
|
|
// 下标
|
|
const tabIndex = ref(0)
|
|
|
|
// 切换tab
|
|
function handleTab(index) {
|
|
if (tabIndex.value === index) return
|
|
tabIndex.value = index
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<view class="app">
|
|
|
|
<!-- 公告 -->
|
|
<swiper class="notice c333 f28" vertical="true">
|
|
<swiper-item class="item bsb rows plr20" v-for="(item, index) in 2" :key="index">
|
|
<image class="icon" src="/static/notice.png" mode="aspectFit" />
|
|
<view class="f1 mlr20">九亿商城上线啦~</view>
|
|
</swiper-item>
|
|
</swiper>
|
|
|
|
<!-- 礼包专区 -->
|
|
<view class="tab bfff">
|
|
<view class="item ver ptb10" v-for="(item,index) in tab" :key="index" @click="handleTab(index)"
|
|
:class="{'active': index === tabIndex}">
|
|
<view class="mtb20">{{item.name}}</view>
|
|
<view class="line"></view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 商品卡片组 加载更多 -->
|
|
<view class="product oh ptb30 plr30">
|
|
<productList ref="product" />
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
// 公告
|
|
.notice {
|
|
height: 80rpx;
|
|
background-color: #e8e8e8;
|
|
|
|
.icon {
|
|
width: 84rpx;
|
|
height: 36rpx;
|
|
}
|
|
}
|
|
|
|
// 导航
|
|
.tab {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, 1fr);
|
|
|
|
//
|
|
.item {
|
|
.line {
|
|
width: 40rpx;
|
|
height: 6rpx;
|
|
background-color: #DD4B5B;
|
|
opacity: 0;
|
|
transition: .3s;
|
|
}
|
|
|
|
&.active {
|
|
.line {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style> |