Huanyuyuehui/pages/activity/rank/index.vue

416 lines
11 KiB
Vue

<template>
<view class="content">
<view class="rank_header" :style="{ 'background-image': `url(${domain}/static/images/rank_header.png)`}">
<view class="cate_name">
<text class="name line1">
<text class="title_icon icon_left" :style="{ 'background-image': `url(${domain}/static/images/rank-title.png)`}"></text>
{{(active == 0 || !cate_name) ? '热销TOP总榜单' : `${cate_name}热卖榜`}}
<text class="title_icon icon_right" :style="{ 'background-image': `url(${domain}/static/images/rank-title.png)`}"></text>
</text>
</view>
<view class="scroll_box">
<scroll-view scroll-x="true" style="white-space: nowrap; vertical-align: middle;" show-scrollbar="false"
:scroll-left="tabLeft">
<view class="scroll_item"
v-for="(item,index) in categoryList"
:key="item.store_category_id"
:id="`cate${item.store_category_id}`"
:data-index="item.store_category_id"
@click="checkActive(item,index,true)"
:class="active == item.store_category_id ? 'scroll_item_active' : ''">{{item.cate_name}}
</view>
</scroll-view>
</view>
</view>
<view class="rank_list pad30">
<swiper :interval="interval" indicator-color="rgba(255,255,255,0.6)" :current="swiperCurrent" @change="swiperChange" :style="'height:'+swiperHeight+'px;'" >
<block v-for="(item,index) in categoryList" :key="item.store_category_id">
<swiper-item :item-id="`${item.store_category_id}`">
<scroll-view scroll-y="true" :style="'height:'+swiperHeight+'px'" id="goods">
<view class='item acea-row' v-for="(itm,idx) in spuTopList" :key="itm.spu_id" @click="godDetail(itm)">
<view class="rank" :class="'rank'+idx"
:style="{'color': idx<3 ? '#CE8F21' : '#986561'}">
{{idx < 9 ? '0'+(idx+1) : idx+1}}
</view>
<view class='pictrue on'>
<image :src='itm.image' class="on"></image>
</view>
<view class='goods-msg pad16 acea-row row-column row-between'>
<text class="name line2">{{itm.store_name}}</text>
<view v-if="itm.sales>0" class="list"><text class="iconfont icon-goumai"></text>{{itm.sales>10000 ? (itm.sales/10000)+'万' : itm.sales}}人买过</view>
<view class="mt-18 acea-row row-bottom">
<BaseMoney :money="itm.price" symbolSize="26" integerSize="36" decimalSize="28"
incolor="E93323" weight />
<BaseMoney :money="itm.ot_price" symbolSize="22" integerSize="22" decimalSize="22"
incolor="999999" class="ml-16" line />
</view>
</view>
</view>
</scroll-view>
</swiper-item>
</block>
</swiper>
<!-- <view class='item acea-row' v-for="(item,index) in spuTopList" :key="item.spu_id" @click="godDetail(item)">
<view class="rank" :class="'rank'+index"
:style="{'color': index<3 ? '#CE8F21' : '#986561'}">
{{index < 9 ? '0'+(index+1) : index+1}}
</view>
<view class='pictrue on'>
<image :src='item.image' class="on"></image>
</view>
<view class='goods-msg pad16 acea-row row-column row-between'>
<text class="name line2">{{item.store_name}}</text>
<view v-if="item.sales>0" class="list"><text class="iconfont icon-goumai"></text>{{item.sales>10000 ? (item.sales/10000)+'万' : item.sales}}人买过</view>
<view class="mt-18 acea-row row-bottom">
<BaseMoney :money="item.price" symbolSize="26" integerSize="36" decimalSize="28"
incolor="E93323" weight />
<BaseMoney :money="item.ot_price" symbolSize="22" integerSize="22" decimalSize="22"
incolor="999999" class="ml-16" line />
</view>
</view>
</view> -->
</view>
<!-- -->
</view>
</template>
<script>
import { spuTop,spuTopList } from '@/api/activity.js';
import { HTTP_REQUEST_URL } from '@/config/app';
export default {
data() {
return {
categoryList: [{
store_category_id: 0,
cate_name: '总榜'
}],
cate_name: "",
spuTopList: [],
active: 0,
pro_top_banner: 'https://zhongbang-1257983696.cos.ap-beijing.myqcloud.com/uploads/def/20220801/383c0026840f70a9b4e33a43c6bd3341.png',
scrollInto: '',
domain: HTTP_REQUEST_URL,
tabClick: 0,
tabLeft: 0,
isLeft: 0, //导航栏下划线位置
isWidth: 0, //每个导航栏占位
windowHeight: 0,
swiperHeight: 0,
swiperCur: 0,
circular: true,
isScroll: false,
interval: 3000,
currentItemId: 0,
swiperCurrent: 0,
}
},
created() {
var that = this;
// 获取设备宽度
uni.getSystemInfo({
success(e) {
that.isWidth = e.windowWidth / 6;
that.windowHeight = e.windowHeight;
// that.swiperHeight = that.windowHeight - 205
that.$set(that, 'swiperHeight', that.windowHeight-150);
}
});
},
onLoad(option) {
this.spuTop(option.cate_id || 0)
if(option.cate_id){
this.active = option.cate_id
}
},
methods: {
spuTop(cate_id) {
spuTop().then(res => {
this.categoryList = [...this.categoryList, ...res.data]
this.cate_name = this.getCate(cate_id,this.categoryList) || ''
this.$nextTick(() => {
this.getSpuTopList(cate_id)
this.active = cate_id && this.cate_name ? cate_id : 0
this.scrollInto = `cate${cate_id}`;
let tabLeft = (this.swiperCur - 2) * this.isWidth; //设置下划线位置
this.$set(this, 'tabLeft', tabLeft);
});
})
},
getSpuTopList(cate_id) {
cate_id = this.cate_name ? cate_id : 0
spuTopList({
cate_pid: cate_id
}).then(res => {
this.spuTopList = (res.data[0] && res.data[0]['list']) || []
})
},
swiperChange(e) {
let { current, source, currentItemId } = e.detail;
// if(this.active){
// if(current == 1){
// current = this.swiperCur+1
// }else if(current == 0){
// current = this.swiperCur-1
// }
// currentItemId = this.categoryList[current]['store_category_id']
// }
if (source === 'autoplay' || source === 'touch') {
this.active = currentItemId;
this.swiperCur = current
this.checkActive(this.categoryList[this.swiperCur],this.swiperCur,false)
if (this.categoryList.length > 6) {
var tempIndex = this.swiperCur - 2;
tempIndex = tempIndex <= 0 ? 0 : tempIndex;
let tabLeft = (this.swiperCur - 2) * this.isWidth; //设置下划线位置
this.$nextTick(function() {
this.$set(this, 'tabLeft', tabLeft);
});
}
}
},
checkActive(item, index, isScroll) {
this.active = item.store_category_id;
this.cate_name = item.cate_name
this.swiperCurrent = index;
this.swiperCur = index
this.isScroll = isScroll;
this.tabClick = index; //设置导航点击了哪一个
this.isLeft = index * this.isWidth; //设置下划线位置
this.spuTopList = [];
this.getSpuTopList(item.store_category_id)
},
// 去商品详情页
godDetail(item) {
uni.navigateTo({
url: "/pages/goods_details/index?id=" + item.product_id
})
},
// 获取第一次进来的默认分类名称
getCate(id,arr){
for (let i = 0; i < arr.length; i++) {
if (arr[i].store_category_id == id) {
this.swiperCur = i
return arr[i]['cate_name']
}
}
},
}
}
</script>
<style lang="scss" scoped>
.content{
background: #171717;
min-height: 100vh;
}
.rank_header {
background-size: cover;
height: 270rpx;
position: fixed;
top: 0;
left: 0;
display: block;
z-index: 9999;
background-color: #171717;
.cate_name{
text-align: center;
position: relative;
top: 80rpx;
.name{
color: #FFE9BE;
font-weight: bold;
font-size: 44rpx;
padding: 0 64rpx;
position: relative;
display: inline-block;
.title_icon{
content: "";
display: inline-block;
width: 38rpx;
height: 58rpx;
background-repeat: no-repeat;
background-size: 100% 100%;
position: absolute;
top: 0;
&.icon_left{
left: 0;
}
&.icon_right{
right: 0;
transform: rotateY(180deg);
}
}
}
}
}
.header {
position: relative;
z-index: 6;
display: flex;
align-items: center;
padding-right: 34rpx;
height: 43px;
padding-left: 33rpx;
.head-menu {
display: -webkit-box;
display: -webkit-flex;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
align-items: center;
height: 27px;
width: 70px;
border-radius: 13px;
.icon-xiangzuo {
font-size: 32rpx;
color: #FFFFFF;
}
.iconfont {
-webkit-box-flex: 1;
-webkit-flex: 1;
flex: 1;
text-align: center;
color: #fff;
box-sizing: border-box;
&.icon-xiangzuo {
border-right: 1px solid #fff;
}
}
}
}
.head-menu {
display: flex;
align-items: center;
height: 54rpx;
width: 140rpx;
background: transparent;
border: 1px solid rgba(151, 151, 151, 0.2);
border-radius: 27rpx;
position: relative;
z-index: 9999;
&:after {
content: '';
position: absolute;
width: 1px;
height: 26rpx;
background-color: #EAEAEA;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.iconfont {
flex: 1;
text-align: center;
color: #fff;
box-sizing: border-box;
}
}
.scroll_box {
width: 750rpx;
box-sizing: border-box;
line-height: 50rpx;
padding-left: 32rpx;
margin-top: 140rpx;
}
.scroll_item {
display: inline-block;
font-size: 28rpx;
color: #6D6D6D;
&:last-child {
margin-right: 40rpx;
}
}
.scroll_item_active {
font-weight: 500;
position: relative;
text-align: center;
color: #fff;
&::after{
content: "";
display: block;
margin: 10rpx auto 0;
width: 80%;
height:4rpx;
border-radius: 2rpx;
background: #fff;
}
}
.scroll_item~.scroll_item {
margin-left: 40rpx;
}
.rank_list {
padding-top: 270rpx;
padding-bottom: 32rpx;
.item {
border-radius: 16rpx;
background: #fff;
margin-top: 30rpx;
padding: 28rpx 30rpx 32rpx;
position: relative;
.rank {
position: absolute;
top: 0;
left: 20rpx;
width: 50rpx;
height: 61rpx;
display: flex;
justify-content: center;
line-height: 61rpx;
font-size: 30rpx;
z-index: 10;
background-size: 100% 100%;
background-image: url('@/pages/activity/static/images/rank_num.png');
font-family: '黑体';
font-weight: bold;
&.rank0,&.rank1,&.rank2{
background-image: url('@/pages/activity/static/images/rank.png');
}
}
.name {
width: 382rpx;
height: 76rpx;
line-height: 38rpx;
color: #282828;
font-weight: 500;
font-size: 32rpx;
}
}
.mt-18 {
margin-top: 18rpx;
}
.ot_price {
font-weight: 300;
color: #6D6D6D;
padding-left: 16rpx;
}
.goods-msg {
flex: 1;
margin-left: 20rpx;
.list{
background: #FDF8EE;
border-radius: 6rpx;
line-height: 57rpx;
color: #666666;
font-size: 26rpx;
padding: 0 12rpx;
.iconfont{
color: #FFB31C;
margin-right: 12rpx;
}
}
}
.pictrue {
width: 240rpx;
height: 240rpx;
position: relative;
flex: 1;
image {
width: 100%;
height: 100%;
border-radius: 12rpx 0 0 12rpx;
}
}
}
</style>