346 lines
7.7 KiB
Vue
346 lines
7.7 KiB
Vue
<template>
|
|
<view class="content">
|
|
<!-- 顶部搜索 -->
|
|
<view class="content_top">
|
|
<view class="content_top_bar"></view>
|
|
<view class="content_top_title">友达赏</view>
|
|
<view class="flex_center">
|
|
<view class="title_ipt">
|
|
<image :src="z_imgPath+'search.png'"></image>
|
|
<input type="text" placeholder="请输入关键字" placeholder-style="color:rgba(2555,255,255,0.6)"
|
|
confirm-type="search" v-model="keyword" @confirm="show='',loadData(1)" />
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<mescroll-body ref="mescrollRef" class="valbox" @init="mescrollInit" :down="downOption" @down="downCallback"
|
|
@up="upCallback">
|
|
<!-- 轮播 -->
|
|
<view style="position: relative;">
|
|
<swiper class="content_swiper" :autoplay="true" :indicator-dots="true" :circular="true">
|
|
<swiper-item v-for="(v,i) in advert" :key='i'>
|
|
<image class="yh_bg" :src="'https://hdyfs.languowangluo.cn'+v.imgurl"></image>
|
|
</swiper-item>
|
|
</swiper>
|
|
<!-- <image :src="z_imgPath+'xian.png'" class="xianStyle"></image>
|
|
<image :src="z_imgPath+'mysy.png'" class="mysyStyle"></image> -->
|
|
</view>
|
|
<!-- 公告 -->
|
|
<view class="content_gonggao" v-if="aa && notice_list && notice_list.length>0">
|
|
<lff-barrage ref="lffBarrage"></lff-barrage>
|
|
</view>
|
|
<!-- 类型筛选 -->
|
|
<view class="qiehuan">
|
|
<view @click="getlist(v.id)" v-for="(v,i) in arr" :key="i" :class="show==v.id?'xzs':'wzs'">
|
|
{{v.title}}
|
|
<!-- <image :src="show==v.show?z_imgPath+v.sel:z_imgPath+v.img" :style="show==v.show?'width:160rpx;height:47rpx;':'width:102rpx;height:26rpx;'"></image> -->
|
|
</view>
|
|
</view>
|
|
<!-- 卡片数据 -->
|
|
<view class="content_con">
|
|
<view v-for="(item,index) in listdata" :key="index" class="content_con_item" @click="todetails(item)"
|
|
:style="'background: url('+ z_imgPath + 'chouka_bg.png'+ ') no-repeat 0 0 / 100% 100%;'">
|
|
<view class="item_img">
|
|
<image :src="item.imgurl" mode="aspectFill"></image>
|
|
</view>
|
|
<view class="item_title">
|
|
<view class="hang1">{{item.title}}</view>
|
|
<view>￥<text>{{item.show_price}}</text></view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</mescroll-body>
|
|
<tab-bar :index="2"></tab-bar>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import lffBarrage from '@/components/lff-barrage/lff-barrage.vue'
|
|
export default {
|
|
components: {
|
|
lffBarrage
|
|
},
|
|
data() {
|
|
return {
|
|
z_imgPath: this.$z_img1 + 'chouka/',
|
|
arr:'',
|
|
// arr: ['新品推荐', '一番赏', '积分赏', '无限赏', '擂台赏'],
|
|
show:0,
|
|
keyword: '',
|
|
listdata: [],
|
|
downOption: {
|
|
auto: false
|
|
},
|
|
advert: [], //轮播图
|
|
notice_list: [], // 弹幕
|
|
erweima: '', // 福利群
|
|
yushou_rili: '', // 预售日历
|
|
jump_appid: '', // 跳转的小程序id
|
|
aa: false,
|
|
}
|
|
},
|
|
|
|
onUnload() {
|
|
this.aa = false
|
|
|
|
},
|
|
onHide() {
|
|
clearInterval(this.timer);
|
|
this.aa = false
|
|
let pages = getCurrentPages()
|
|
uni.setStorageSync('page', this.$mp.page.route)
|
|
},
|
|
onLoad(v) {
|
|
this.getnews();
|
|
this.getCate();
|
|
},
|
|
onShow() {
|
|
let that = this;
|
|
this.aa = true
|
|
setTimeout(() => {
|
|
that.colrdo()
|
|
}, 500)
|
|
},
|
|
|
|
onShareAppMessage() {
|
|
let that = this;
|
|
return {
|
|
title: "友达赏，正版潮玩手办一番赏",
|
|
imageUrl: that.advert[0].imgurl,
|
|
path: "/pages/shouye/index?pid=" + uni.getStorageSync('userinfo').ID
|
|
};
|
|
},
|
|
methods: {
|
|
colrdo() { //插入一条弹幕
|
|
let that = this;
|
|
let a = 0;
|
|
that.timer = setInterval(function() {
|
|
that.$refs.lffBarrage.add({
|
|
item: that.notice_list[a].content,
|
|
// title: that.notice_list[a].title,
|
|
// color: that.notice_list[a].color,
|
|
headimg: that.notice_list[a].headimg
|
|
});
|
|
if (a < that.notice_list.length - 1) {
|
|
a++;
|
|
} else {
|
|
a = 0
|
|
}
|
|
}, 5000)
|
|
},
|
|
getnews() {
|
|
let that = this;
|
|
that.req({
|
|
url: 'card_index',
|
|
success(res) {
|
|
if (res.status == 1) {
|
|
that.advert = res.data.advert;
|
|
that.notice_list = res.data.bullet_chat
|
|
}
|
|
}
|
|
})
|
|
},
|
|
getCate(){
|
|
let that = this;
|
|
that.req({
|
|
url: 'card_category_list',
|
|
success(res) {
|
|
if (res.status == 1) {
|
|
that.arr=res.data
|
|
}
|
|
}
|
|
})
|
|
},
|
|
/*下拉刷新的回调 */
|
|
downCallback() {
|
|
// this.mescroll.resetUpScroll()
|
|
this.loadData(1)
|
|
},
|
|
/*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
|
|
upCallback(page) {
|
|
//联网加载数据
|
|
this.loadData(page.num);
|
|
},
|
|
loadData(pageNo) {
|
|
// 模拟接口
|
|
let that = this;
|
|
that.req({
|
|
url: 'card_goods_list',
|
|
data: {
|
|
page: pageNo,
|
|
type:that.show
|
|
},
|
|
success: function(res) {
|
|
that.mescroll.endByPage(res.data.data.length, res.data.data.last_page);
|
|
if (pageNo == 1) {
|
|
that.listdata = res.data.data;
|
|
} else {
|
|
that.listdata = that.listdata.concat(res.data.data);
|
|
}
|
|
console.log(that.listdata)
|
|
}
|
|
})
|
|
},
|
|
todetails(e) {
|
|
this.$customRouter.navigateTo('cardDetail', { goods_id: e.id });
|
|
},
|
|
getlist(v) {
|
|
this.show = v;
|
|
this.loadData(1)
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
//顶部
|
|
.content{
|
|
width: 100vw;
|
|
box-sizing: border-box;
|
|
position: relative;
|
|
background-attachment: fixed;
|
|
position: relative;
|
|
background: #222222;
|
|
color: #fff;
|
|
&_top{
|
|
width: 750rpx;
|
|
height: 230rpx;
|
|
padding: 30rpx;
|
|
box-sizing: border-box;
|
|
position: fixed;
|
|
top: 0;
|
|
z-index: 15;
|
|
&_bar {
|
|
width: 100%;
|
|
height: var(--status-bar-height);
|
|
}
|
|
&_title {
|
|
height: 69rpx;
|
|
font-weight: bold;
|
|
color: #FFFFFF;
|
|
}
|
|
.title_ipt{
|
|
display: flex;
|
|
align-items: center;
|
|
margin: 20rpx auto;
|
|
border-radius: 30rpx;
|
|
padding-left: 30rpx;
|
|
width: 620rpx;
|
|
height: 60rpx;
|
|
background: rgba(255, 255, 255, .2);
|
|
border-radius: 10rpx;
|
|
box-sizing: border-box;
|
|
>image {
|
|
width: 33rpx;
|
|
height: 33rpx;
|
|
}
|
|
>input {
|
|
width: 90%;
|
|
height: 60rpx;
|
|
box-sizing: border-box;
|
|
border-radius: 105rpx;
|
|
font-size: 28rpx;
|
|
line-height: 60rpx;
|
|
font-size: 28rpx;
|
|
font-weight: 400;
|
|
color: rgba(255, 255, 255, 0.6);
|
|
padding-left: 20rpx;
|
|
}
|
|
}
|
|
}
|
|
&_swiper {
|
|
width: 750rpx;
|
|
height: 660rpx;
|
|
margin: 0rpx auto;
|
|
.yh_bg {
|
|
width: 750rpx;
|
|
height: 660rpx;
|
|
}
|
|
}
|
|
&_gonggao {
|
|
width: 750rpx;
|
|
height: 300rpx;
|
|
border-radius: 39rpx;
|
|
margin: 0rpx auto;
|
|
overflow: hidden;
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 0 20rpx;
|
|
box-sizing: border-box;
|
|
position: absolute;
|
|
top: 330rpx;
|
|
z-index: 16;
|
|
pointer-events: none;
|
|
}
|
|
.qiehuan {
|
|
display: flex;
|
|
// justify-content: space-between;
|
|
align-items: center;
|
|
width: 690rpx;
|
|
margin: 35rpx auto;
|
|
box-sizing: border-box;
|
|
>view{
|
|
margin-right: 20rpx;
|
|
}
|
|
.wzs {
|
|
font-size: 32rpx;
|
|
color: rgba(255, 255, 255, 0.6);
|
|
}
|
|
|
|
.xzs {
|
|
font-size: 34rpx;
|
|
color: #fff;
|
|
}
|
|
}
|
|
&_con{
|
|
margin:0 30rpx;
|
|
&_item{
|
|
width: 690rpx;
|
|
height: 402rpx;
|
|
padding-top:32rpx;
|
|
box-sizing: border-box;
|
|
margin-top: 30rpx;
|
|
.item_img{
|
|
margin-left: 13rpx;
|
|
image{
|
|
width: 664rpx;
|
|
height: 310rpx;
|
|
}
|
|
}
|
|
.item_title{
|
|
margin: 0 20rpx;
|
|
font-size: 28rpx;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
color: #FEFF00;
|
|
text{
|
|
font-size: 32rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
swiper {
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
pointer-events: auto;
|
|
}
|
|
.xianStyle{
|
|
width:750rpx;
|
|
height:104rpx;
|
|
display: block;
|
|
position: absolute;
|
|
left: 0;
|
|
bottom:0
|
|
}
|
|
.mysyStyle{
|
|
width: 213rpx;
|
|
height: 129rpx;
|
|
position: absolute;
|
|
left: 0;
|
|
right: 0;
|
|
bottom:0;
|
|
margin: 0 auto;
|
|
}
|
|
}
|
|
</style> |