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