wanghongjun
2 years ago
3 changed files with 442 additions and 4 deletions
@ -0,0 +1,430 @@ |
|||
<template> |
|||
<view class="container"> |
|||
<!-- 搜索框 --> |
|||
<view class="search"> |
|||
<view class="search-wrapper"> |
|||
<view class="index-search"> |
|||
<view class="index-cont-search t-c"> |
|||
<text class="search-icon iconfont icon-search"></text> |
|||
<text class="search-text"> |
|||
<input type="text" placeholder="请输入关键字" v-model="searchValue"> |
|||
</text> |
|||
<button class="search-text-bu" @click="onSearch">搜索</button> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="secondary"> |
|||
<!-- 二级分类 20 --> |
|||
<view class="cate-content"> |
|||
<!-- 左侧 一级分类 --> |
|||
<scroll-view class="cate-left" scroll-y="true"> |
|||
<view class="type-nav" :class="{ selected: curIndex == index }" v-for="(item, index) in menus" :key="index" |
|||
@click="handleSelectNav(index)"> |
|||
<image class="cate-left-image" :src="'./static/tabbar/recommend-cate.png'"></image> |
|||
<text class="cate-left-text">{{ item.name }}</text> |
|||
</view> |
|||
</scroll-view> |
|||
<!-- 右侧 二级分类 --> |
|||
<scroll-view class="cate-right" :scroll-top="scrollTop" :scroll-y="true" |
|||
:style="{ height: `${scrollHeight}px` }"> |
|||
<!-- 有数据的时候 --> |
|||
<view v-if="list.length>0" class="cate-right-cont"> |
|||
<view class="cate-two-box"> |
|||
<view class="cate-cont-box"> |
|||
<view class="flex-two" v-for="(item, idx) in list" :key="idx" |
|||
@click="onTargetGoods(item.goods_islicode)"> |
|||
<view class="cate-img-padding"> |
|||
<view v-if="item.rankingDetails.goodsImage" class="cate-img"> |
|||
<image class="image" mode="scaleToFill" :src="item.rankingDetails.goodsImage"></image> |
|||
</view> |
|||
</view> |
|||
<view class="name"> |
|||
<text>{{ item.goodsName }}</text> |
|||
<text class="name-price">￥ {{ item.rankingDetails.price }}</text> |
|||
<text class="name-type">交易类型：{{ item.rankingDetails.goodsEntrust == 1 ? '转让' : '授权'}}</text> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 空白提示 --> |
|||
<view v-else class="cate-right-cont"> |
|||
<view class="empty-content"> |
|||
<view class="empty-icon"> |
|||
<image class="image" src="/static/empty.png" mode="widthFix"></image> |
|||
</view> |
|||
<view class="tips">暂无数据</view> |
|||
</view> |
|||
|
|||
</view> |
|||
|
|||
</scroll-view> |
|||
|
|||
</view> |
|||
|
|||
</view> |
|||
|
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import MescrollCompMixin from '@/components/mescroll-uni/mixins/mescroll-comp' |
|||
import {PageCategoryStyleEnum} from '@/common/enum/store/page/category' |
|||
import * as GoodsApi from '@/api/goods' |
|||
import Empty from '@/components/empty' |
|||
import Secondary from './components/secondary' |
|||
import {rpx2px, base64ToUint8Array} from '@/utils/util' |
|||
|
|||
|
|||
// 左侧菜单(固定) |
|||
const menus = [ |
|||
{id: 'all', name: '标的推荐', type: 0}, |
|||
{id: 'rs', name: '销售排行', type: 1}, |
|||
{id: 'rd', name: '店铺排行', type: 2}, |
|||
] |
|||
|
|||
// 最后一次刷新时间 |
|||
let lastRefreshTime; |
|||
|
|||
export default { |
|||
components: { |
|||
Empty, |
|||
Secondary, |
|||
}, |
|||
mixins: [MescrollCompMixin], |
|||
data() { |
|||
return { |
|||
searchValue: '', |
|||
// 枚举类 |
|||
PageCategoryStyleEnum, |
|||
// 分类列表 |
|||
list: [], |
|||
// 分类模板设置 |
|||
setting: {}, |
|||
// 正在加载中 |
|||
isLoading: true, |
|||
// 一级分类：指针 |
|||
curIndex: 0, |
|||
//默认显示第一页 |
|||
page: 1, |
|||
// 列表高度 |
|||
scrollHeight: 0, |
|||
// 内容区竖向滚动条位置 |
|||
scrollTop: 0, |
|||
// 菜单 |
|||
menus, |
|||
} |
|||
}, |
|||
|
|||
/** |
|||
* 生命周期函数--监听页面加载 |
|||
*/ |
|||
onLoad() { |
|||
// 加载页面数据 |
|||
this.onRefreshPage() |
|||
}, |
|||
|
|||
/** |
|||
* 生命周期函数--监听页面显示 |
|||
*/ |
|||
onShow() { |
|||
// 每间隔5分钟自动刷新一次页面数据 |
|||
const curTime = new Date().getTime() |
|||
if ((curTime - lastRefreshTime) > 5 * 60 * 1000) { |
|||
this.onRefreshPage() |
|||
} |
|||
}, |
|||
created() { |
|||
// 设置分类列表高度 |
|||
this.setListHeight() |
|||
}, |
|||
methods: { |
|||
// 搜索 |
|||
async onSearch() { |
|||
if (this.searchValue == '') { |
|||
this.$error('请输入搜索关键词'); |
|||
} else { |
|||
} |
|||
}, |
|||
|
|||
// 设置列表内容的高度 |
|||
setListHeight() { |
|||
const {windowHeight} = uni.getSystemInfoSync() |
|||
this.scrollHeight = windowHeight - rpx2px(96) |
|||
}, |
|||
|
|||
// 刷新页面 |
|||
onRefreshPage() { |
|||
// 记录刷新时间 |
|||
lastRefreshTime = new Date().getTime() |
|||
//加载分类数据 |
|||
this.getCatList() |
|||
}, |
|||
|
|||
// 一级分类：选中分类 |
|||
handleSelectNav(index) { |
|||
this.curIndex = index |
|||
this.scrollTop = 0 |
|||
this.getCatList() |
|||
}, |
|||
// 查询分类 获取列表 |
|||
getCatList() { |
|||
let item = menus[this.curIndex] |
|||
let type = item.type |
|||
let param = { |
|||
goods_type: '', //1.文化资源数据,2.文化数字内容 |
|||
lbdSet: 1, //1 热门标的推荐 2 交易(销售) 3 点击 |
|||
pageIndex: this.page, |
|||
pageRows: 10, |
|||
typeStatus: 1, |
|||
} |
|||
|
|||
if (type === 1) { |
|||
param.lbdSet = 2 |
|||
} else if (type === 2) { |
|||
param.lbdSet = 3 |
|||
} |
|||
this.bindData(param) |
|||
}, |
|||
// 标的详情 |
|||
onTargetGoods(gislicode) { |
|||
// this.$toast(goodsId) |
|||
this.$navTo('pages/goods/detail', {gislicode}) |
|||
}, |
|||
// 绑定数据 |
|||
async bindData(param) { |
|||
const app = this |
|||
GoodsApi.getRankingList(param).then(res=>{ |
|||
app.list = res.data |
|||
}); |
|||
}, |
|||
}, |
|||
|
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> // 搜索框 |
|||
.search { |
|||
position: fixed; |
|||
float: top; |
|||
top: var(--window-top); |
|||
left: var(--window-left); |
|||
right: var(--window-right); |
|||
z-index: 19; |
|||
|
|||
.search-wrapper { |
|||
background: #1c223b; |
|||
padding: 0rpx 20rpx 20rpx 20rpx; |
|||
} |
|||
|
|||
.index-search { |
|||
border-bottom: 0; |
|||
background: #fff; |
|||
border-radius: 50rpx; |
|||
overflow: hidden; |
|||
font-size: 28rpx; |
|||
color: #6d6d6d; |
|||
box-sizing: border-box; |
|||
height: 74rpx; |
|||
line-height: 74rpx; |
|||
|
|||
.index-cont-search { |
|||
width: 100%; |
|||
font-size: 28rpx; |
|||
background: #f7f7f7; |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
|
|||
.search-icon { |
|||
font-size: 34rpx; |
|||
margin-left: 50rpx; |
|||
} |
|||
|
|||
.search-text { |
|||
text-align: left; |
|||
float: left; |
|||
margin-left: 20rpx; |
|||
width: 100%; |
|||
|
|||
input { |
|||
font-size: 20rpx; |
|||
} |
|||
} |
|||
.search-text-bu { |
|||
margin-right: 20rpx; |
|||
color: #ffffff; |
|||
background-color: #1c223b; |
|||
font-size: 20rpx; |
|||
width: 120rpx; |
|||
height: 50rpx; |
|||
text-align: center; |
|||
border-radius: 50rpx; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
// |
|||
.secondary { |
|||
z-index: 19; |
|||
border-top: 1rpx solid #444; |
|||
height: 100vh; |
|||
} |
|||
|
|||
// 分类内容 |
|||
.cate-content { |
|||
display: flex; |
|||
z-index: 1; |
|||
background: #fff; |
|||
padding-top: 96rpx; |
|||
height: 100%; |
|||
} |
|||
|
|||
// 一级分类+二级分类 20 |
|||
.cate-left { |
|||
// height: 100%; |
|||
display: flex; |
|||
flex-direction: column; |
|||
flex: 0 0 26%; |
|||
background: #f8f8f8; |
|||
color: #444; |
|||
margin-right: 22rpx; |
|||
} |
|||
|
|||
|
|||
.cate-right { |
|||
display: flex; |
|||
flex-direction: column; |
|||
height: 100%; |
|||
overflow: hidden; |
|||
|
|||
.cate-right-cont { |
|||
width: 100%; |
|||
display: flex; |
|||
flex-flow: row wrap; |
|||
align-content: flex-start; |
|||
padding-top: 15 rpx; |
|||
|
|||
.cate-two-box { |
|||
width: 100%; |
|||
padding: 0 10px; |
|||
} |
|||
|
|||
// 空白提示 |
|||
.empty-content { |
|||
box-sizing: border-box; |
|||
width: 100%; |
|||
padding: 140rpx 50rpx; |
|||
text-align: center; |
|||
|
|||
.tips { |
|||
font-size: 28rpx; |
|||
color: gray; |
|||
margin: 50rpx 0; |
|||
} |
|||
|
|||
.empty-icon .image { |
|||
width: 280rpx; |
|||
} |
|||
|
|||
} |
|||
} |
|||
} |
|||
|
|||
// 左侧一级分类 |
|||
.type-nav { |
|||
position: relative; |
|||
height: 180rpx; |
|||
z-index: 10; |
|||
font-size: 26rpx; |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
font-weight: bold; |
|||
|
|||
&.selected { |
|||
background: #fff; |
|||
color: #cec7bf; |
|||
border-right: none; |
|||
font-size: 28rpx; |
|||
font-weight: bold; |
|||
} |
|||
|
|||
.cate-left-image{ |
|||
position: absolute; |
|||
width: 50rpx; |
|||
height: 50rpx; |
|||
border-radius: 10rpx; |
|||
margin-bottom: 20rpx; |
|||
} |
|||
.cate-left-text{ |
|||
position: absolute; |
|||
margin-top: 80rpx; |
|||
} |
|||
} |
|||
|
|||
// 右侧二级分类 |
|||
.cate-cont-box { |
|||
margin-bottom: 30rpx; |
|||
padding-bottom: 10rpx; |
|||
background: #fff; |
|||
overflow: hidden; |
|||
|
|||
.name { |
|||
width: 45%; |
|||
height: 200rpx; |
|||
float: left; |
|||
margin-left: 51%; |
|||
margin-top: -45%; |
|||
display: inline-block; |
|||
font-size: 26rpx; |
|||
font-weight: bold; |
|||
color: #444444; |
|||
|
|||
.name-price{ |
|||
color: #fe7730; |
|||
margin-top: 30rpx; |
|||
} |
|||
.name-type{ |
|||
color: #cec7bf; |
|||
margin-top: 20rpx; |
|||
} |
|||
} |
|||
|
|||
|
|||
.flex-two { |
|||
float: left; |
|||
width: 100%; |
|||
background-color: #f7f7f7; |
|||
margin-bottom: 20rpx; |
|||
|
|||
text { |
|||
display: inline-block; |
|||
} |
|||
|
|||
.cate-img-padding { |
|||
width: 250rpx; |
|||
height: 250rpx; |
|||
padding: 16rpx 16rpx 4rpx 16rpx; |
|||
} |
|||
|
|||
.cate-img { |
|||
position: relative; |
|||
width: 100%; |
|||
padding-top: 100%; |
|||
|
|||
.image { |
|||
width: 100%; |
|||
height: 100%; |
|||
position: absolute; |
|||
top: 0; |
|||
left: 0; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
|
After Width: | Height: | Size: 1.1 KiB |
Loading…
Reference in new issue