312 lines
6.8 KiB
Vue
312 lines
6.8 KiB
Vue
<template>
|
|
<div class="list_box" v-show="loading">
|
|
<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">
|
|
<template v-for="i in 3" :key="i">
|
|
<view class="tit box"></view>
|
|
<view class="item">
|
|
<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>
|
|
</view>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
<view class="whole" v-show="!loading">
|
|
<view class="classBox">
|
|
<view class="leftBox">
|
|
<view class="item"
|
|
v-for="(item, index) in classifyList"
|
|
:key="item.id"
|
|
:class="curId === index ? 'active' : ''"
|
|
@click="scrollIntoView(index)">{{item.name}}</view>
|
|
</view>
|
|
<scroll-view :scroll-y="true" class="rightBox" :scroll-into-view="intoView" :scroll-with-animation="true" @scroll="onScroll">
|
|
<view class="item" v-for="(item, index) in classifyList" :key="item.id" :id="'item' + index">
|
|
<view class="topTit">{{item.name}}</view>
|
|
<view class="box">
|
|
<view class="row" @click="toGroups(item)" v-if="!item.children">
|
|
<view class="img" :style="{backgroundImage: 'url(' + item.pic_url + ')'}"></view>
|
|
<view class="tit">{{item.name}}</view>
|
|
</view>
|
|
<view class="row" v-for="(it, i) in item.children" :key="it.id" @click="toGroups(it)">
|
|
<view class="img" :style="{backgroundImage: 'url(' + it.pic_url + ')'}"></view>
|
|
<view class="tit">{{it.name}}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view style="height: calc(100vh - 360rpx);width: 100%;"></view>
|
|
</scroll-view>
|
|
</view>
|
|
|
|
<tabbar :chooseIndex="1" :num="cartNum" :msgNum="msgNum" />
|
|
</view>
|
|
|
|
|
|
</template>
|
|
|
|
<script>
|
|
import { ref, reactive, toRefs } from 'vue'
|
|
import { get, post } from '@/api/request.js'
|
|
import { userBind } from '@/components/common.js'
|
|
import tabbar from '@/components/tabbar/index.vue'
|
|
|
|
export default {
|
|
components: {
|
|
tabbar
|
|
},
|
|
setup() {
|
|
const data = reactive({
|
|
classifyList: [],
|
|
curId: 0,
|
|
intoView: '',
|
|
shareUrl: '',
|
|
shareImage: '',
|
|
loading: true,
|
|
Color: '',
|
|
msgNum: Number(uni.getStorageSync('msgNum')) || 0,
|
|
cartNum: Number(uni.getStorageSync('cartNum')) || 0
|
|
})
|
|
|
|
const getClassifyList = () => {
|
|
get('/api/v1/group').then((res) => {
|
|
data.classifyList = res.data
|
|
const query = uni.createSelectorQuery()
|
|
setTimeout(() => {
|
|
data.classifyList.map((itm, index) => {
|
|
query.select("#item" + index).boundingClientRect(function (rect) {
|
|
itm.top = rect ? rect.top : 0
|
|
}).exec()
|
|
})
|
|
}, 1000)
|
|
})
|
|
}
|
|
|
|
const scrollIntoView = (index) => {
|
|
data.curId = index
|
|
data.intoView = 'item' + index
|
|
}
|
|
|
|
const toGroups = (item) => {
|
|
uni.navigateTo({
|
|
url: `/pages/search-result/index?title=${item.name}&groupId=${item.id}`
|
|
})
|
|
}
|
|
|
|
// 分享路径
|
|
const getShareUrl = () => {
|
|
post('/api/v1/user/share', {
|
|
page: 'pages/classify/new',
|
|
query: ``
|
|
}).then((res) => {
|
|
data.shareUrl = res.data.path
|
|
data.shareImage = res.data.image
|
|
})
|
|
}
|
|
|
|
function onScroll(e) {
|
|
data.classifyList.map((itm, idx) => {
|
|
if (e.detail.scrollTop >= data.classifyList[idx].top - 2) {
|
|
data.curId = idx
|
|
return false
|
|
}
|
|
})
|
|
}
|
|
|
|
function getCartNum() {
|
|
get('/api/v1/carts/num').then((res) => {
|
|
data.cartNum = Number(res.data.num)
|
|
})
|
|
}
|
|
|
|
return {
|
|
userBind,
|
|
...toRefs(data),
|
|
getClassifyList,
|
|
scrollIntoView,
|
|
getShareUrl,
|
|
toGroups,
|
|
getCartNum,
|
|
onScroll
|
|
}
|
|
},
|
|
async onLoad(options) {
|
|
// await this.$onLaunched
|
|
await this.getClassifyList()
|
|
this.Color = uni.getStorageSync('theme_color')
|
|
this.loading = false
|
|
this.getCartNum()
|
|
this.getShareUrl()
|
|
let params = {
|
|
from: options.from || 0,
|
|
s: options.s || 0,
|
|
u: options.u || 0,
|
|
group_id: 0,
|
|
company_id: options.company_id || ''
|
|
}
|
|
this.userBind(params)
|
|
},
|
|
onShareAppMessage() {
|
|
return {
|
|
title: '更多好货',
|
|
imageUrl: this.share_image,
|
|
path: this.shareUrl
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.whole{
|
|
background: #F9F9F9;
|
|
.classBox{
|
|
height: calc(100vh - 110rpx);
|
|
width: 100%;
|
|
overflow: hidden;
|
|
display: flex;
|
|
box-sizing: border-box;
|
|
.leftBox{
|
|
height: 100%;
|
|
overflow: auto;
|
|
width: 200rpx;
|
|
.item{
|
|
position: relative;
|
|
font-size: 28rpx;
|
|
color: #666;
|
|
display: flex;
|
|
align-items: center;
|
|
padding-left: 30rpx;
|
|
box-sizing: border-box;
|
|
height: 90rpx;
|
|
&.active{
|
|
color: #333;
|
|
font-weight: 600;
|
|
background: #fff;
|
|
&:before{
|
|
content: '';
|
|
position: absolute;
|
|
left: 0;
|
|
height: 50rpx;
|
|
top: 20rpx;
|
|
background: v-bind('Color');
|
|
width: 6rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.rightBox{
|
|
height: 100%;
|
|
overflow: auto;
|
|
width: calc(100% - 200rpx);
|
|
background: #fff;
|
|
.item{
|
|
padding: 0 24rpx 10rpx;
|
|
box-sizing: border-box;
|
|
width: 100%;
|
|
.topTit{
|
|
color: #222;
|
|
font-size: 24rpx;
|
|
padding: 10rpx 0;
|
|
width: 100%;
|
|
background: #fff;
|
|
font-weight: 600;
|
|
}
|
|
.box{
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
}
|
|
.row{
|
|
width: 31%;
|
|
margin-bottom: 20rpx;
|
|
margin-right: 3.5%;
|
|
&:nth-child(3n+3){
|
|
margin-right: 0;
|
|
}
|
|
.img{
|
|
width: 100%;
|
|
height: 0;
|
|
padding-bottom: 100%;
|
|
position: relative;
|
|
background-size: cover;
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
}
|
|
.tit{
|
|
color: #555;
|
|
font-size: 28rpx;
|
|
padding: 16rpx 0;
|
|
text-align: center;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.list_box {
|
|
background: #fff;
|
|
height: 100vh;
|
|
width: 100%;
|
|
overflow: hidden;
|
|
.list_left {
|
|
width: 200rpx;
|
|
height: 100%;
|
|
float: left;
|
|
.box_left {
|
|
height: 70rpx;
|
|
margin-bottom: 15rpx;
|
|
}
|
|
}
|
|
.list_right {
|
|
width: calc(100% - 240rpx);
|
|
margin-left: 20rpx;
|
|
height: 100%;
|
|
float: left;
|
|
.tit{
|
|
width: 100%;
|
|
height: 42rpx;
|
|
margin-bottom: 20rpx;
|
|
}
|
|
.item{
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
flex-wrap: wrap;
|
|
}
|
|
.box_right {
|
|
height: 150rpx;
|
|
width: 150rpx;
|
|
float: left;
|
|
margin-bottom: 20rpx;
|
|
border-radius: 6rpx;
|
|
}
|
|
}
|
|
.box {
|
|
background: #e1e1e1;
|
|
animation: fade 2s infinite;
|
|
}
|
|
}
|
|
@keyframes fade {
|
|
from {
|
|
opacity: 1;
|
|
}
|
|
50% {
|
|
opacity: 0.5;
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
</style>
|