201 lines
3.5 KiB
Vue
201 lines
3.5 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'
|
|
|
|
const {
|
|
proxy
|
|
} = getCurrentInstance()
|
|
// tab
|
|
const tab = reactive([{
|
|
name: '礼包专区',
|
|
},
|
|
{
|
|
name: '超值礼包',
|
|
},
|
|
{
|
|
name: '大礼包',
|
|
},
|
|
{
|
|
name: '小礼包',
|
|
},
|
|
])
|
|
// 下标
|
|
const tabIndex = ref(0)
|
|
|
|
onReady(() => {
|
|
// 获取礼包分类
|
|
getGiftCate().then(rs => {
|
|
// 分类
|
|
proxy.$refs.product.listPrototype.categoryId = tab[tabIndex.value].id
|
|
proxy.$refs.product.getList()
|
|
})
|
|
})
|
|
|
|
onReachBottom(() => {
|
|
// 重载列表
|
|
proxy.$refs.product.getMoreList()
|
|
})
|
|
|
|
onPullDownRefresh(() => {
|
|
// 重载列表
|
|
proxy.$refs.product.refreshList()
|
|
})
|
|
|
|
// 获取礼包分类
|
|
function getGiftCate() {
|
|
return new Promise(resolve => {
|
|
api.shop.getCategory({
|
|
query: {
|
|
categoryCode: 'GIFT_PACK',
|
|
},
|
|
}).then(rs => {
|
|
if (rs.code === 200) {
|
|
tab.length = 0
|
|
tab.push(...rs.data)
|
|
resolve(tab)
|
|
return
|
|
}
|
|
util.alert({
|
|
content: rs.msg,
|
|
showCancel: false,
|
|
})
|
|
})
|
|
})
|
|
}
|
|
|
|
// 切换tab
|
|
function handleTab(index) {
|
|
if (tabIndex.value === index) return
|
|
tabIndex.value = index
|
|
// 分类
|
|
proxy.$refs.product.listPrototype.categoryId = tab[tabIndex.value].id
|
|
// 重载列表
|
|
proxy.$refs.product.refreshList()
|
|
}
|
|
</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="gift mt30 bfff">
|
|
<view class="item fdc fmid" :class="{'big': item.categoryCode == 'GIFT_PACK'}"
|
|
v-for="(item,index) in tab" :key="index">
|
|
<view class="icon">
|
|
<image class="image" :src="item.image" mode="widthFix" />
|
|
</view>
|
|
<view class="mt10 c333 f28">{{item.name}}</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 礼包专区 -->
|
|
<view class="tab pt20 bfff">
|
|
<view class="item ver ptb30" v-for="(item,index) in tab" :key="index" @click="handleTab(index)"
|
|
:class="{'active': index === tabIndex}">
|
|
<view class="">
|
|
<image class="icon" :src="item.icon" mode="aspectFill" />
|
|
</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 {
|
|
.icon {
|
|
width: 160rpx;
|
|
height: 60rpx;
|
|
}
|
|
|
|
.line {
|
|
width: 40rpx;
|
|
height: 6rpx;
|
|
background-color: #DD4B5B;
|
|
opacity: 0;
|
|
transition: .3s;
|
|
}
|
|
|
|
&.active {
|
|
.line {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// 礼包专区
|
|
.gift {
|
|
display: flex;
|
|
|
|
.image {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.item.big {
|
|
width: 400rpx;
|
|
|
|
.icon {
|
|
width: 240rpx;
|
|
}
|
|
}
|
|
|
|
.item {
|
|
flex: 1;
|
|
}
|
|
|
|
.icon {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: flex-end;
|
|
width: 100%;
|
|
height: 200rpx;
|
|
}
|
|
}
|
|
</style> |