161 lines
3.2 KiB
Vue

<template>
<div style="height: 100%;">
<div class="list_box" v-if="loading_box">
<div class="list_left">
<view class="box_left box"></view>
<view class="box_left box"></view>
<view class="box_left box"></view>
<view class="box_left box"></view>
<view class="box_left box"></view>
<view class="box_left box"></view>
<view class="box_left box"></view>
</div>
<div class="list_right">
<view class="box_right box"></view>
<view class="box_right box"></view>
<view class="box_right box"></view>
<view class="box_right box"></view>
<view class="box_right box"></view>
<view class="box_right box"></view>
<view class="box_right box"></view>
</div>
</div>
<view class="group" v-else>
<portrait :group-list="groupList" :type="1" @getnum="getNum" :vip-on="vip_on" />
</view>
<tabbar :chooseIndex="1" :num="cartNum" :msgNum="msgNum" />
</div>
</template>
<script>
import { ref, reactive, toRefs } from 'vue'
import tabbar from '@/components/tabbar/index.vue'
import { get } from '@/api/request.js'
import Portrait from '@/components/homeList/Portrait.vue'
import { goodsItem, NetWork } from '@/components/common.js'
export default {
components: {
Portrait,
tabbar
},
setup() {
const data = reactive({
vip_on: 0,
loading_box: true,
msgNum: Number(uni.getStorageSync('msgNum')) || 0,
cartNum: Number(uni.getStorageSync('cartNum')) || 0
})
const groupList = ref([])
// 获取分组
async function getList() {
var num2 = 0
var interval = setInterval(function() {
num2 += 1
if (num2 == 20) {
clearInterval(interval)
}
}, 1000)
let res = await get('/api/v1/index', {
shop_id: 1,
from: 2
})
let list = []
res.data.groups.forEach((item) => {
if (item.is_more === 0) {
list.push(item)
}
})
list.unshift({
id: '',
name: '全部商品'
})
groupList.value = list
if (num2 == 20 && data.loading_box) {
uni.showToast({
icon: 'none',
title: '请求超时,请重试!'
})
return
}
if (res.code == 0) {
data.loading_box = false
}
}
function getCartNum() {
get('/api/v1/carts/num').then((res) => {
data.cartNum = Number(res.data.num)
})
}
return {
groupList,
getList,
getCartNum,
NetWork,
...toRefs(data)
}
},
async onLoad() {
await this.getList()
},
onShow() {
this.getCartNum()
this.vip_on = uni.getStorageSync('vip_on') || 0
}
}
</script>
<style lang="scss" scoped>
.group {
height: 100%;
background: #fff;
}
@keyframes fade {
from {
opacity: 1;
}
50% {
opacity: 0.5;
}
to {
opacity: 1;
}
}
.box {
background: #e1e1e1;
animation: fade 2s infinite;
}
.list_box {
display: flex;
background: #fff;
.list_left {
width: 25%;
margin-right: 20rpx;
display: flex;
flex-direction: column;
.box_left {
height: 90rpx;
margin-bottom: 20rpx;
border-radius: 10rpx;
}
}
.list_right {
flex: 1;
display: flex;
flex-direction: column;
.box_right {
height: 140rpx;
padding: 20rpx 0;
margin-bottom: 20rpx;
border-radius: 10rpx;
}
}
}
</style>