<!-- 本示例未包含完整css，获取外链css请参考上文，在hello uni-app项目中查看 -->
|
<template>
|
<view class="indexBody">
|
<view class="mainWrap" style='background: linear-gradient(270deg,#fe3c35,#ff1f4c); border-bottom: none;'>
|
<view class="search" @click="gotogoodDetail(4,'')">
|
<img style="height: 24px;width: 24px;" src="../../static/search.png" alt="">
|
请输入或粘贴商品标签搜
|
</view>
|
</view>
|
<view class="classify">
|
<view class="classify_left">
|
<view v-for="(item,index) in lists" class="classify_leftsignal"
|
:class="tabCur===index?'classify_leftsignalHL':'classify_leftsignalAN'" @click="changeTab(index)">
|
{{item?.cname}}
|
</view>
|
|
</view>
|
<view class="classify_right">
|
<view v-for="(item2,index) in lists[tabCur]?.subcategories" class="classify_rightsignal"
|
@click='gotoPage(item2.scname)'>
|
<image :src="item2?.scpic" style="width:60px;height: 60px;" />
|
<text class="title">{{item2?.scname}}</text>
|
</view>
|
</view>
|
</view>
|
</view>
|
</template>
|
|
|
<script>
|
export default {
|
data() {
|
return {
|
title: 'Hello',
|
lists: [],
|
tabCur: 0,
|
routerr: '',
|
}
|
},
|
mounted() {
|
this.GetSuperCategory()
|
},
|
onLoad() {
|
let rr = getCurrentPages()
|
this.routerr = rr[rr.length-1].route
|
console.log('rr', rr)
|
},
|
onShareAppMessage: function() {
|
return {
|
title: '淘券获取',
|
path:' /pages/index/index',
|
// promise
|
}
|
},
|
onShareTimeline() {
|
return {
|
title: '淘券获取',
|
query: '/pages/index/index',
|
}
|
},
|
methods: {
|
GetSuperCategory() {
|
// debugger
|
let me = this
|
uni.request({
|
url: 'https://h.ushopvip.com/api/TkProduct/GetSuperCategory',
|
method: 'POST',
|
// data: {},
|
success(res) {
|
console.log('GetSuperCategory：', res);
|
if (res.data?.success) {
|
me.lists = res.data.result
|
// me.tabCur = res.data.result[0].cid
|
}
|
|
},
|
fail(err) {
|
console.log('获取openid失败：', err);
|
}
|
})
|
},
|
changeTab(i) {
|
this.tabCur = i
|
},
|
gotogoodDetail(type, id) {
|
//商品详情
|
if (type == 1) {
|
uni.navigateTo({
|
url: '/pages/goodDetail/index?id=' + id
|
})
|
} else if (type == 2) {
|
uni.navigateTo({
|
url: '/pages/rankingList/index?id=' + id
|
})
|
} else if (type == 3) {
|
uni.navigateTo({
|
url: '/pages/madBuy/index?id=' + id
|
})
|
} else if (type == 4) {
|
uni.navigateTo({
|
url: '/pages/index/search/index'
|
})
|
}
|
|
},
|
gotoPage(keyWords) {
|
// debugger
|
uni.navigateTo({
|
url: '/pages/index/search/index?keyWords=' + keyWords
|
})
|
}
|
}
|
}
|
</script>
|
|
<style>
|
.mainWrap {
|
font-size: 0;
|
height: 46px;
|
width: 100%;
|
position: relative;
|
display: flex;
|
flex-direction: row;
|
padding-left: 13px;
|
padding-right: 13px;
|
align-items: center;
|
box-sizing: border-box;
|
align-items: center;
|
border-bottom: 1px solid #e7e7e7;
|
}
|
|
.search {
|
height: 44rpx;
|
padding: 10rpx 25rpx;
|
line-height: 50rpx;
|
font-size: 28rpx;
|
background: #FFF;
|
flex: 1;
|
border-radius: 20px;
|
display: flex;
|
color: gray;
|
}
|
|
.classify {
|
display: flex;
|
flex-direction: row;
|
}
|
|
.classify_left {
|
width: 30%;
|
text-align: center;
|
}
|
|
.classify_leftsignal {
|
height: 60px;
|
line-height: 60px;
|
}
|
|
.classify_leftsignalHL {
|
border-left: 2px solid #ee0a24;
|
}
|
|
.classify_leftsignalAN {
|
background-color: #f7f8fa;
|
}
|
|
.classify_right {
|
width: 70%;
|
display: flex;
|
flex-direction: row;
|
flex-wrap: wrap;
|
height: 100%;
|
padding: 40rpx 0;
|
}
|
|
.classify_rightsignal {
|
width: 33.3%;
|
padding: 12px;
|
box-sizing: border-box;
|
height: 120px;
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
}
|
|
.title {
|
font-size: 24rpx;
|
}
|
</style>
|
