1837 lines
48 KiB
Vue
1837 lines
48 KiB
Vue
<template>
|
||
<view class="new-index-page">
|
||
<!-- 背景头部 -->
|
||
<image src="@/static/home/zm.gif" mode="aspectFit" class="top-zm-icon"></image>
|
||
<image src="@/static/home/top.png" mode="aspectFit" class="top-img"></image>
|
||
<view class="home-main">
|
||
<view class="home-header">
|
||
<view class="header-activity">
|
||
<!-- <view class="header-activity-item coupon">
|
||
<view class="activity-dian" v-if="isCouponRed"></view>
|
||
天天领劵
|
||
</view>
|
||
<view class="header-activity-item card">
|
||
<view class="activity-dian" v-if="isCardRed"></view>
|
||
卡包
|
||
</view>
|
||
<view class="header-activity-item wechat">
|
||
<view class="activity-dian" v-if="isWechatRed"></view>
|
||
微信福利
|
||
</view> -->
|
||
<view class="header-activity-item task" @click="signCk">
|
||
<!-- <view class="activity-dian" v-if="isTaskRed"></view> -->
|
||
<view style="position: absolute;top: 40rpx;left: 42rpx;color: #FF4800;font-family: YouSheBiaoTiHei;font-size: 28rpx;z-index: 10;">签到</view>
|
||
<image src="@/static/home/7.png" mode="aspectFit" class="activity-dian" v-if="isTaskRed"></image>
|
||
<image src="@/static/home/77.png" mode="aspectFit" style="width: 107rpx;height: 109rpx;"></image>
|
||
<!-- <image src="@/static/home/rw.gif" mode="aspectFit" style="width: 107rpx;height: 109rpx;" class=""></image> -->
|
||
</view>
|
||
|
||
<!-- <view class="header-activity-item task" @click="signCk">
|
||
<view class="activity-dian" v-if="isTaskRed"></view>
|
||
任务签到
|
||
</view> -->
|
||
</view>
|
||
<view class="header-rule">
|
||
<view class="rule-item" @click="rule">
|
||
玩法
|
||
</view>
|
||
<!-- <a :href="customer" class="rule-item" target="_blank">客服</a> -->
|
||
<!-- <web-view :src="customer" v-if="isCustomerPath" style="position: fixed;top: -1000rpx;"></web-view> -->
|
||
<view class="rule-item" @click="handleCustomer">客服</view>
|
||
<view class="rule-item rotate-music">
|
||
<image src="@/static/home/music.png" mode="" class="music"></image>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="rank" @click="rankingCk">
|
||
<view class="rank-item">
|
||
<!-- 排行榜 -->
|
||
<view style="position: absolute;top: 20rpx;left: 40rpx;color: #FF4800;font-family: YouSheBiaoTiHei;font-size: 28rpx;z-index: 10;">排行</view>
|
||
<image src="@/static/home/78.png" mode="aspectFit" style="width: 87rpx;height: 89rpx;"></image>
|
||
<image src="@/static/home/7.png" mode="aspectFit" class="activity-dian" v-if="isRankRed"></image>
|
||
<!-- <view class="activity-dian" v-if="isRankRed"></view> -->
|
||
</view>
|
||
<!-- <view class="rank-item">
|
||
排行榜
|
||
<view class="activity-dian" v-if="isRankRed"></view>
|
||
</view> -->
|
||
</view>
|
||
|
||
<image src="@/static/home/z.png" mode="" class="left-icon" @click="changeSwiper('left')"></image>
|
||
<image src="@/static/home/y.png" mode="" class="right-icon" @click="changeSwiper('right')"></image>
|
||
|
||
<view class="box-main">
|
||
<image src="@/static/home/bj.gif" mode="aspectFit" class="jt-icon"></image>
|
||
<swiper class="swiper" circular :current="current" @change="swiperChange" :autoplay="autoplay" :interval="interval">
|
||
<swiper-item class="swiper-items" v-for="(item,index) in list" :key="index" @click="goDetail(item)">
|
||
<!-- 气泡 -->
|
||
<view style="position: absolute;top: 0;width: 100%;height: 100%;top: 10%;z-index: 11;">
|
||
<bubbleCom></bubbleCom>
|
||
</view>
|
||
<view class="swiper-img-view">
|
||
<template v-if="item.coverResource">
|
||
<image v-if="item.coverResource" :src="item.coverResource.url"
|
||
mode="aspectFit" class="swiper-img"></image>
|
||
</template>
|
||
</view>
|
||
|
||
<!-- <view class="seal" v-if="list.length > 0">
|
||
<view class="seal-txt">
|
||
<view v-if="item.itemFirst">{{gradeObj[item.itemFirst.grade]}}</view>
|
||
<template v-if="item.itemFirst">
|
||
<view class="seal-num" v-if="Number(item.itemFirst.curStock) == -1">无限量</view>
|
||
<view class="seal-num" v-else>剩{{Number(item.itemFirst.curStock) || 0}}件</view>
|
||
</template>
|
||
|
||
</view>
|
||
</view> -->
|
||
|
||
|
||
</swiper-item>
|
||
</swiper>
|
||
<view class="look">
|
||
<image src="@/static/home/shou.png" mode="" class="look-img"></image>
|
||
<view class="look-txt">查看宝贝</view>
|
||
</view>
|
||
<view class="footer-tai">
|
||
<!-- <template v-for="(item,index) in list[current].price">
|
||
<text class="price" v-if="item.type === 'SINGLE'" :key="index">{{item.settlement || '/'}}</text>
|
||
</template> -->
|
||
<template v-if="list.length > 0 && list[current]">
|
||
<template v-for="(item,index) in list[current].price">
|
||
<view class="box-price" v-if="item.type === 'SINGLE'" :key="index">
|
||
<text class="price-last">¥</text>
|
||
{{Number(item.settlement)}}
|
||
<text class="price-last">元/个</text>
|
||
</view>
|
||
</template>
|
||
</template>
|
||
<!-- <view class="free">免费试玩</view> -->
|
||
</view>
|
||
<view class="footer">
|
||
<swiper class="footer-swiper" previous-margin="277rpx" next-margin='277rpx' circular
|
||
:current="current" @change="swiperChange">
|
||
<swiper-item class="footer-swiper-item" v-for="(item,index) in list" :key="index"
|
||
@click="swiperCk(index)">
|
||
<view class="swiper-tai active-box" v-if="current === index">
|
||
<image src="@/static/home/box-s-h.png" mode="" class="box-s-h"></image>
|
||
<image src="@/static/home/box-s-t.png" mode="" class="box-s-t"></image>
|
||
<view class="swiper-name-active">{{item.name}}</view>
|
||
</view>
|
||
<view class="swiper-tai" v-else>
|
||
<image src="@/static/home/box-h.png" mode="" class="box-h"></image>
|
||
<image src="@/static/home/box-t.png" mode="" class="box-t"></image>
|
||
<view class="swiper-name">{{item.name}}</view>
|
||
</view>
|
||
</swiper-item>
|
||
</swiper>
|
||
<view class="footer-btn">
|
||
<!-- <view class="footer-activity"><view>更多</view><view style="margin-top: -16rpx;">活动</view></view> -->
|
||
<!-- <view class="footer-activity"><view>更多</view><view style="margin-top: -16rpx;">活动</view></view> -->
|
||
<image src="@/static/home/gdhd.gif" class="footer-activity-gif" mode="aspectFit" @click="lookMore"></image>
|
||
<!-- <view class="footer-open" @click="buy">立即开启</view> -->
|
||
<image src="@/static/home/ljkqq.gif" class="footer-open-gif" mode="aspectFit" @click="buy"></image>
|
||
<!-- <view class="footer-open" @click="buy">立即开启</view> -->
|
||
</view>
|
||
<view class="footer-txt">谢绝未成年人使用或在监护人的监督下使用</view>
|
||
</view>
|
||
|
||
</view>
|
||
</view>
|
||
|
||
<floatWindow v-if="activityDetail" :list="boxActivityLeftList" :consumptionTime="activityDetail.expireTime" :source="activityDetail.source" :isConsumption="activityDetail.source === 'PREFERENTIAL_DAY'" :isDiscounts="activityDetail.source === 'ROOKIE'" @click="floatCk"></floatWindow>
|
||
<!-- 活动盲盒弹窗 -->
|
||
<view class="dlg" v-if="activityShow">
|
||
<template v-for="(item,index) in boxActivityList">
|
||
<template v-if="activityShow && item.visible">
|
||
<view class="activity-main" :key="index">
|
||
<template v-if="item.img">
|
||
<image v-if="item.img.coverResource" :src="item.img.coverResource.url" mode="aspectFit" class="activity-img" @click="goActivityDetail(item)"></image>
|
||
</template>
|
||
<image v-if="item.button.coverResource" :src="item.button.coverResource.url" @click="goActivityPre(item)" class="now-buy" mode=""></image>
|
||
<image src="@/static/order/close.png" mode="" class="dlg-close-img" @click="activityClose(index)"></image>
|
||
</view>
|
||
</template>
|
||
</template>
|
||
</view>
|
||
<popup-view v-model="show" mode="bottom" border-radius="15" z-index="1000" :maskCloseAble="false" closeable>
|
||
<BuyBoxCom :detailData="detailData" @payStatus="payStatus" @isOk="buySuccess" :boxType="boxType" @coinDeficit="coinDeficit" :isActivityClick="isActivityClick"
|
||
@payPaid="payPaid" :payNum="payNum"></BuyBoxCom>
|
||
</popup-view>
|
||
<!-- 活动购买 -->
|
||
<popup-view v-model="showActivity" mode="bottom" border-radius="15" z-index="1000">
|
||
<BuyActivityBox :detailData="list[current]" @isOk="buySuccess" @payStatus="payStatus" :boxType="boxType" @coinDeficit="coinDeficit" :isActivityClick="isActivityClick"
|
||
@payPaid="payPaid" :payNum="payNum"></BuyActivityBox>
|
||
</popup-view>
|
||
<template v-if="isPayDlgVisible">
|
||
<isPayDlgVue @isOk="isPayStatus" @isCancel="isCancelCk" v-if="isPayDlgVisible" @againPay="againPay"></isPayDlgVue>
|
||
</template>
|
||
|
||
<!-- 去充值 -->
|
||
<popup-view v-model="isTopUp" mode="bottom" border-radius="15" z-index="1000" :maskCloseAble="false"
|
||
:closeable="true" @input="coinDeficitComClose">
|
||
<coinDeficitCom @close="closeTop" @sucClose="sucClose" :close='isClose'></coinDeficitCom>
|
||
</popup-view>
|
||
<NoOpenCom></NoOpenCom>
|
||
<view class="custom-toast" v-if="isTip">
|
||
<view class="toast-txt">支付成功</view>
|
||
</view>
|
||
|
||
<popup-view v-model="isPayTip" mode="center" border-radius="15" z-index="1000">
|
||
<view class="log-out">
|
||
<view class="log-out-tip">您今日在本商城的消费已达到1000元。为了确保您的消费安全，请确认是否继续购买。</view>
|
||
<view class="log-out-footer">
|
||
<view class="cancel" @click="closePay">取消支付</view>
|
||
<view class="shu"></view>
|
||
<view class="log-out-submit" @click="submitPay">确定支付</view>
|
||
</view>
|
||
</view>
|
||
</popup-view>
|
||
<!-- 签到 -->
|
||
<view class="dlg" v-if="isSign" @click.stop="isSign = false">
|
||
<SignCom @signOk="signOkFn" @close="isSign = false"></SignCom>
|
||
</view>
|
||
<!-- 所有页面的弹框 -->
|
||
<page-popup page="/pages/index/new-index" v-if="visible"></page-popup>
|
||
<!-- <image src="@/static/home/guan.png" mode=""class="guan"></image> -->
|
||
<!-- 更多活动弹窗 -->
|
||
<view class="dlg" v-if="moreVisible" @click.stop="moreVisible = false">
|
||
<view class="more-bg" @click.stop="">
|
||
<view class="more-header">
|
||
<image src="@/static/home/gdhd-title.png" mode="aspectFit" class="more-title"></image>
|
||
<image src="@/static/home/gdhd-close.png" mode="aspectFit" class="more-close" @click="moreVisible = false"></image>
|
||
</view>
|
||
<scroll-view scroll-y="true" class="more-content">
|
||
<view class="more-item" v-for="(item,index) in moreList" :key="index" :style="{backgroundImage:`url(${item.img.coverResource.url})`}" @click="moreCk(item)">
|
||
<view class="more-item-title">
|
||
<view class="titles">{{item.title}}</view>
|
||
<image src="@/static/new/mine/back.png" class="title-imgs" mode=""></image>
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
</view>
|
||
</view>
|
||
<!-- <customerCom v-if="customerVisible" @isClose="customerVisible = false"></customerCom> -->
|
||
<!-- 查询是否支付 -->
|
||
<!-- <isPayDlgVue @isOk="isPayStatus"></isPayDlgVue> -->
|
||
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import floatWindow from '@/pages/components/floatWindow.vue'
|
||
import BuyBoxCom from './components/buyBox.vue'
|
||
import BuyActivityBox from './components/buyActivityBox.vue'
|
||
import coinDeficitCom from './components/coinDeficit.vue'
|
||
import NoOpenCom from './components/noOpen.vue'
|
||
import trumpetCom from './components/trumpet.vue'
|
||
import reportClickFn from '@/utils/report.js'
|
||
import bubbleCom from './components/bubble.vue'
|
||
import SignCom from './components/sign.vue'
|
||
import isPayDlgVue from '@/pages/components/isPayDlg.vue'
|
||
|
||
import {
|
||
loginXc
|
||
} from '@/API/login.js'
|
||
import {
|
||
noticeTopApi,
|
||
popupAdApi,
|
||
customerApi,
|
||
userInfo,
|
||
coinPaidApi
|
||
} from '@/API/user.js'
|
||
import md5 from 'crypto-js/md5';
|
||
import Hex from 'crypto-js/enc-hex';
|
||
import {
|
||
myMixins
|
||
} from "@/mixins/mixins.js";
|
||
import {
|
||
boxesPinnedApi,
|
||
boxesTagsApi,
|
||
boxesApi,
|
||
boxActivityApi,
|
||
boxActivityListApi,
|
||
promptCountApi,
|
||
boxResultApi,
|
||
noOpenListApi,
|
||
boxesChannelPinnedApi,
|
||
popupAdPageApi,
|
||
popupAdPageChannelApi,
|
||
boxOrderPaidApi,
|
||
boxesDetail
|
||
} from '@/API/index.js'
|
||
import {
|
||
mpScheme
|
||
} from '@/API/pay.js'
|
||
import { signInInfo,signIn,taskListApi,taskReceive } from '@/API/sign.js'
|
||
import customerCom from '@/pages/components/customer.vue'
|
||
|
||
import {
|
||
showWebview
|
||
} from '@/utils/webViewCom.js'
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
list: [],
|
||
current: 0,
|
||
customer: '',
|
||
adStoreVisible: '', //是否第一次进入
|
||
infoDetail: {
|
||
point: 0,
|
||
},
|
||
adVisible: false,
|
||
activityShow: false,
|
||
activityDetail: {
|
||
coverResource: {},
|
||
price: {}
|
||
},
|
||
buyVisible: false,
|
||
tipVisible: false,
|
||
buyType: '', //几连抽
|
||
|
||
popupList: [],
|
||
bannerTopList: [],
|
||
optionTxt: '',
|
||
optionSign: '',
|
||
footerCurrent: 0,
|
||
gradeObj: {
|
||
NORMAL: "普通",
|
||
HIDDEN: "隐藏",
|
||
RARE: "稀有",
|
||
SUPREME: "至尊"
|
||
},
|
||
|
||
|
||
show: false,
|
||
boxType: '', //盲盒类型
|
||
isTopUp: false,
|
||
isTip: false,
|
||
rookieTimer: null,
|
||
boxResultTimer: null,
|
||
boxResultList: [], //开奖结果
|
||
isOpen: false,
|
||
isClose: false,
|
||
visible: false,
|
||
autoplay:true,//是否自动播放
|
||
interval:10000,
|
||
isRankRed:false,//排行榜小红点是否显示
|
||
isCouponRed:false,//天天领劵小红点
|
||
isCardRed:false,//卡包小红点
|
||
isWechatRed:false,//微信福利小红点
|
||
isTaskRed:false,//任务签到小红点
|
||
|
||
|
||
isActivityClick:false,//是否点击打开弹窗
|
||
isPayTip:false,//已经支付超过一千元显示
|
||
boxActivityList:[],
|
||
boxActivityLeftList:[],//用于右侧浮窗按钮
|
||
activityShowIndex:null,
|
||
floatCkVis:false,//true时点击右侧浮窗打开
|
||
isPay:false,//是否支付跳转
|
||
isSign:false,//签到弹窗
|
||
timeCur:'',
|
||
moreVisible:false,
|
||
moreList:[],
|
||
|
||
showActivity:false,//活动购买弹窗
|
||
isPayDlgVisible:false,
|
||
paidData:{},//用于支付轮训参数
|
||
payNum:0,
|
||
customerVisible:false,
|
||
isCustomerPath:false,
|
||
|
||
|
||
detailData:{}
|
||
}
|
||
},
|
||
components: {
|
||
floatWindow,
|
||
BuyBoxCom,
|
||
coinDeficitCom,
|
||
NoOpenCom,
|
||
trumpetCom,
|
||
bubbleCom,
|
||
SignCom,
|
||
BuyActivityBox,
|
||
isPayDlgVue,
|
||
customerCom
|
||
},
|
||
|
||
filters: {
|
||
million: function(
|
||
num
|
||
) { //过万处理 let num; if(value > 9999){//大于9999显示x.xx万 num=(Math.floor(value/1000)/10) + 'W'; }else if( value < 9999 && value>-9999){ num=value }else if(value<-9999){//小于-9999显示-x.xx万
|
||
var fixedNum = 2
|
||
num = num ? Number(num) : 0
|
||
if (num >= 10000) {
|
||
var digit = num / 10000
|
||
var count = digit.toFixed(6).slice(0, -(6 - fixedNum))
|
||
count = Math.max(count)
|
||
return count + 'w'
|
||
} else {
|
||
return num
|
||
}
|
||
}
|
||
|
||
},
|
||
onLoad(option) {
|
||
// if(option.token){
|
||
// uni.setStorageSync('box-token',token)
|
||
// }
|
||
|
||
this.loginParams = option
|
||
let userId = ''
|
||
if (option.user_id) {
|
||
userId = option.user_id
|
||
}
|
||
if (option.userid) {
|
||
userId = option.userid
|
||
}
|
||
// url里有appid和userid的时候需要登录
|
||
if (option.sign) {
|
||
this.login(option)
|
||
} else if (!option.sign && option.appid && userId) {
|
||
uni.setStorageSync('box-appid',option.appid)
|
||
// uni.setStorageSync('box-appid', option.appid)
|
||
this.loginParams.userid = userId
|
||
// 获取当前时间的秒级时间戳
|
||
const currentTimeInSeconds = Math.floor(Date.now() / 1000);
|
||
this.appid = option.appid
|
||
this.userid = userId
|
||
this.gotoPath = option.gotoPath ? option.gotoPath : ""
|
||
this.time = currentTimeInSeconds
|
||
let md5Str = ''
|
||
if (this.gotoPath) {
|
||
md5Str =
|
||
`appid=${this.appid}&gotoPath=${this.gotoPath}&time=${this.time}&userid=${this.userid}&key=${this.appid}`
|
||
} else {
|
||
md5Str = `appid=${this.appid}&time=${this.time}&userid=${this.userid}&key=${this.appid}`
|
||
}
|
||
// md5加密
|
||
let sign = this.generate16BitMD5(md5Str)
|
||
this.optionSign = sign
|
||
this.loginParams.sign = sign
|
||
this.loginParams.time = this.time
|
||
this.login(this.loginParams)
|
||
} else {
|
||
// this.getBoxesTags()
|
||
// this.getNoticeTop()
|
||
this.getPopupAd('HOMEPAGE_CAROUSEL')
|
||
this.getPopupAd('HOMEPAGE_POPUP')
|
||
this.getPopupAdPage()
|
||
this.getBoxesPinned()
|
||
// if(this.categoriesIndex === 0){
|
||
// this.getBoxesPinned()
|
||
// }else{
|
||
// this.getBoxes()
|
||
// }
|
||
}
|
||
|
||
// this.getNoOpenList()
|
||
this.getBoxResult()
|
||
this.boxResultTimer = setInterval(() => {
|
||
this.getBoxResult()
|
||
}, 6000)
|
||
|
||
|
||
|
||
// 是否第一次打开页面(第一次进入页面排行榜小红点显示)
|
||
if (!uni.getStorageSync('firstTime')) {
|
||
this.isRankRed = true//排行榜小红点
|
||
this.isCouponRed = true//天天领劵小红点
|
||
this.isCardRed = true//卡包小红点
|
||
this.isWechatRed = true//微信福利小红点
|
||
this.isTaskRed = true//任务签到小红点
|
||
uni.setStorageSync('firstTime', true)
|
||
}
|
||
this.getBoxActivity()
|
||
},
|
||
onShow() {
|
||
|
||
// if(this.isCustomerPath){
|
||
// this.isCustomerPath = false
|
||
// uni.switchTab({
|
||
// url:`/pages/index/new-index`
|
||
// })
|
||
// }
|
||
uni.$on('updateTabData', (data) => {
|
||
this.visible = false
|
||
if(data.boxId){
|
||
this.boxType = 'buy'
|
||
this.visible = false
|
||
boxesDetail({
|
||
id: data.boxId,type:data.type
|
||
}).then(res => {
|
||
if (res.code === 200) {
|
||
this.detailData = res.data
|
||
this.show = true
|
||
} else {
|
||
this.$api.msg(res.message)
|
||
}
|
||
})
|
||
|
||
|
||
}else{
|
||
setTimeout(() => {
|
||
// this.visible = true
|
||
|
||
if (uni.getStorageSync('box-token')) {
|
||
this.getSignInInfo()
|
||
this.getBoxActivity()
|
||
}
|
||
|
||
}, 500)
|
||
}
|
||
|
||
|
||
});
|
||
if(!this.isPay){
|
||
if (uni.getStorageSync('box-token')) {
|
||
this.getUserInfo()
|
||
// this.getCustomer()
|
||
// this.getBoxActivity()
|
||
this.getBoxesPinned()
|
||
this.getSignInInfo()
|
||
} else {
|
||
this.getBoxesPinned()
|
||
}
|
||
}
|
||
|
||
},
|
||
methods: {
|
||
isCancelCk(){
|
||
this.isPayDlgVisible = false
|
||
},
|
||
// 购买弹框回传回来的方法 用于是否打开是否支付弹框
|
||
payStatus(val){
|
||
this.isPayDlgVisible = true
|
||
console.log(val)
|
||
this.paidData = val
|
||
},
|
||
isPayStatus(){
|
||
boxOrderPaidApi({
|
||
no:this.paidData.no
|
||
}).then(payResult => {
|
||
if (payResult.data) {
|
||
this.$api.msg('支付成功')
|
||
this.isPayDlgVisible = false
|
||
console.log(`/pages/index/draw?no=${this.paidData.no}&boxId=${this.paidData.boxId}&type=${this.paidData.type}`)
|
||
uni.navigateTo({
|
||
url: `/pages/index/draw?no=${this.paidDatano}&boxId=${this.paidData.boxId}&type=${this.paidData.type}`
|
||
})
|
||
uni.hideLoading()
|
||
}else{
|
||
this.$api.msg('未查询到支付结果')
|
||
uni.hideLoading()
|
||
}
|
||
}).catch(err => {
|
||
uni.hideLoading()
|
||
})
|
||
},
|
||
againPay(){
|
||
this.payNum += 1
|
||
},
|
||
lookMore(){
|
||
this.$api.msg('暂未开放，敬请期待')
|
||
// this.getMore()
|
||
},
|
||
moreCk(item){
|
||
if (item.img.type === 'INSIDE') {
|
||
if (item.img.url === '/pages/index/new-index' || item.img.url === '/pages/shop/index' || item.img
|
||
.url === '/pages/mine/boxRecrd' || item.img.url === '/pages/mine/mine') {
|
||
uni.switchTab({
|
||
url: `${item.img.url}`,
|
||
});
|
||
uni.$emit('updateTabData', {newData:'newData'});
|
||
} else {
|
||
uni.navigateTo({
|
||
url: `${item.img.url}`
|
||
})
|
||
}
|
||
|
||
} else {
|
||
window.location.href = item.img.url
|
||
}
|
||
},
|
||
getMore(){
|
||
popupAdPageChannelApi({
|
||
page:'/pages/index/new-index',
|
||
type: 'CAROUSEL'
|
||
}).then(res => {
|
||
if (res.code === 200) {
|
||
this.moreList = res.data
|
||
this.moreVisible = true
|
||
} else {
|
||
this.$api.msg(res.message)
|
||
}
|
||
})
|
||
},
|
||
getTime(){
|
||
let now = new Date();
|
||
let year = now.getFullYear();
|
||
let month = now.getMonth() + 1; // 月份从0开始，所以要加1
|
||
let day = now.getDate();
|
||
let hour = now.getHours();
|
||
let minute = now.getMinutes();
|
||
let second = now.getSeconds();
|
||
month = month < 10 ? `0${month}` : month
|
||
day = day < 10 ? `0${day}` : day
|
||
this.timeCur = `${year}-${month}-${day}`
|
||
},
|
||
getSignInInfo(){
|
||
uni.showLoading()
|
||
signInInfo().then(res => {
|
||
uni.hideLoading()
|
||
if(res.code === 200){
|
||
this.getTime()
|
||
console.log(res)
|
||
if(res.data.details.length > 0){
|
||
let signObj = {}
|
||
res.data.details.forEach(item => {
|
||
signObj[item.dt] = item.sign
|
||
})
|
||
if(signObj[this.timeCur]){
|
||
this.isTaskRed = false
|
||
}else{
|
||
this.isTaskRed = true
|
||
}
|
||
}
|
||
}else{
|
||
this.$api.msg(res.message)
|
||
}
|
||
}).catch(err => {
|
||
uni.hideLoading()
|
||
})
|
||
},
|
||
signOkFn(){
|
||
// this.isTaskRed = false
|
||
this.getSignInInfo()
|
||
},
|
||
closePay(){
|
||
this.isPayTip = false
|
||
},
|
||
submitPay(){
|
||
this.isPayTip = false
|
||
},
|
||
// 签到
|
||
signCk(){
|
||
// 首页签到点击次数
|
||
reportClickFn('index_sign_clk');
|
||
if (uni.getStorageSync('box-token')) {
|
||
this.isSign = true
|
||
// uni.navigateTo({
|
||
// url:`/pages/mine/sign`
|
||
// })
|
||
}else{
|
||
uni.navigateTo({
|
||
url:`/pages/login/login`
|
||
})
|
||
}
|
||
|
||
},
|
||
rankingCk() {
|
||
this.isRankRed = false
|
||
// 首页排行榜点击次数
|
||
reportClickFn('index_ranging_clk');
|
||
uni.navigateTo({
|
||
url: `/pages/index/ranking`
|
||
})
|
||
},
|
||
getPopupAdPage() {
|
||
popupAdPageApi({
|
||
page: '/pages/index/new-index',
|
||
type: "CAROUSEL"
|
||
}).then(res => {
|
||
if (res.code === 200) {
|
||
this.bannerTopList = res.data
|
||
// if(this.list.length > 0){
|
||
// this.visible = true
|
||
// }
|
||
} else {
|
||
this.$api.msg(res.message)
|
||
}
|
||
})
|
||
},
|
||
// 关闭充值弹窗
|
||
coinDeficitComClose() {
|
||
this.isClose = !this.isClose
|
||
console.log("aasdsds")
|
||
},
|
||
async openWeapp(amount) {
|
||
console.log("uniCloud:", uniCloud)
|
||
try {
|
||
const res = await uniCloud.callFunction({
|
||
name: 'public',
|
||
data: {
|
||
action: 'getUrlScheme',
|
||
options: `amount=${amount}`
|
||
}
|
||
});
|
||
|
||
if (res.result && res.result.openlink) {
|
||
// 跳转到微信小程序
|
||
uni.navigateTo({
|
||
url: res.result.openlink
|
||
});
|
||
} else {
|
||
console.error('未能获取有效的链接：', res);
|
||
}
|
||
} catch (error) {
|
||
console.error('调用云函数失败：', error);
|
||
}
|
||
},
|
||
// // 获取是否有开奖记录
|
||
// getNoOpenList(){
|
||
// noOpenListApi().then(res => {
|
||
// console.log(res)
|
||
// if(res.code === 200){
|
||
// // this.list = res.data
|
||
// this.isOpen = res.data.length > 0 ? true : false
|
||
// }else{
|
||
// this.$api.msg(res.message)
|
||
// }
|
||
// }).catch(err => {
|
||
|
||
// })
|
||
// },
|
||
goxcx() {
|
||
mpScheme().then(res => {
|
||
console.log(res)
|
||
if (res.code === 200) {
|
||
location.href = res.data
|
||
} else {
|
||
this.$api.msg(res.message)
|
||
}
|
||
})
|
||
// document.write('weixin://dl/business/?t=8LzmkyltYAh')
|
||
// location.href = "weixin://dl/business/?t=8LzmkyltYAh"
|
||
},
|
||
// // 获取滚动公告
|
||
getBoxResult() {
|
||
boxResultApi().then(res => {
|
||
if (res.code === 200) {
|
||
let arr = []
|
||
res.data.forEach(item => {
|
||
let time = ''
|
||
const date = new Date(item.time * 1000);
|
||
const now = new Date();
|
||
const diffInSeconds = Math.abs(Math.floor((now - date) / 1000));
|
||
if (diffInSeconds === 0) {
|
||
time = `刚刚`
|
||
} else {
|
||
time = `${diffInSeconds}秒前`
|
||
}
|
||
let nickName = item.nickName.length > 4 ? item.nickName.substring(0, 3) +
|
||
'...' : item.nickName;
|
||
arr.unshift(`${nickName}开启${item.boxName}得到了${item.productName}`)
|
||
})
|
||
|
||
arr.forEach(item => {
|
||
const match = this.boxResultList.find(bItem => bItem === item);
|
||
if (!match) {
|
||
this.boxResultList.unshift(item);
|
||
}
|
||
})
|
||
if (this.boxResultList.length > 20) {
|
||
this.boxResultList = this.boxResultList.slice(0, 20);
|
||
}
|
||
} else {
|
||
this.$api.msg(res.message)
|
||
}
|
||
})
|
||
},
|
||
// 新手盲盒订单支付轮训
|
||
payPaid(val) {
|
||
this.getCoinPaid(val.no, val.boxOrderNo, val.boxId)
|
||
this.rookieTimer = setInterval(() => {
|
||
this.getCoinPaid(val.no, val.boxOrderNo, val.boxId)
|
||
}, 3000);
|
||
},
|
||
|
||
// 查询新手盲盒支付订单
|
||
getCoinPaid(no, boxOrderNo, boxId) {
|
||
coinPaidApi({
|
||
no
|
||
}).then(payResult => {
|
||
if (payResult.data) {
|
||
clearInterval(this.rookieTimer); // 清除定时器
|
||
this.rookieTimer = null;
|
||
this.show = false
|
||
this.isPay = false
|
||
this.$api.msg('支付成功')
|
||
uni.navigateTo({
|
||
url: `/pages/index/draw?no=${boxOrderNo}&boxId=${boxId}&type=1`
|
||
})
|
||
// uni.redirectTo({
|
||
// url: `/pages/index/boxPaySuccess?no=${this.boxOrderNo}&boxId=${this.previewData.boxId}&name=${this.previewData.name}&type=${this.previewData.type}&sale=${this.previewData.amount.sale}`
|
||
// })
|
||
uni.hideLoading()
|
||
}
|
||
}).catch(err => {
|
||
clearInterval(this.timer); // 清除定时器
|
||
this.timer = null;
|
||
uni.hideLoading()
|
||
})
|
||
},
|
||
// 代币不足
|
||
coinDeficit() {
|
||
this.isTopUp = true
|
||
},
|
||
closeTop() {
|
||
this.isTopUp = false
|
||
this.getUserInfo()
|
||
},
|
||
sucClose() {
|
||
this.isTopUp = false
|
||
this.isTip = true
|
||
this.getUserInfo()
|
||
setTimeout(() => {
|
||
this.isTip = false
|
||
}, 1500)
|
||
},
|
||
// 购买成功
|
||
buySuccess() {
|
||
this.isPayDlgVisible = false
|
||
this.show = false
|
||
this.showActivity = false
|
||
this.isPay = false
|
||
},
|
||
rule() {
|
||
console.log("aaa")
|
||
uni.navigateTo({
|
||
url: `/pages/agreement/rule`
|
||
})
|
||
},
|
||
preloadImages(type) {
|
||
if (type === 'box') {
|
||
this.boxList.forEach((imgSrc) => {
|
||
const img = new Image();
|
||
img.src = imgSrc;
|
||
});
|
||
} else if (type === 'lihua') {
|
||
this.liHuaList.forEach((imgSrc) => {
|
||
const img = new Image();
|
||
img.src = imgSrc;
|
||
});
|
||
} else if (type === 'gx') {
|
||
this.gxList.forEach((imgSrc) => {
|
||
const img = new Image();
|
||
img.src = imgSrc;
|
||
});
|
||
} else if (type === 'grade') {
|
||
|
||
this.gradeList.forEach((imgSrc) => {
|
||
const img = new Image();
|
||
img.src = imgSrc;
|
||
});
|
||
}
|
||
|
||
},
|
||
generate16BitMD5(data) {
|
||
let md5Digest = md5(data).toString(Hex);
|
||
return md5Digest.substring(8, 24); // 截取前16位
|
||
},
|
||
rollingLink(item) {
|
||
this.adVisible = false
|
||
if (item.img.type === 'INSIDE') {
|
||
if (item.img.url === '/pages/index/new-index' || item.img.url === '/pages/shop/index' || item.img
|
||
.url === '/pages/mine/sign' || item.img.url === '/pages/mine/mine') {
|
||
uni.switchTab({
|
||
url: `${item.img.url}`
|
||
})
|
||
} else {
|
||
uni.navigateTo({
|
||
url: `${item.img.url}`
|
||
})
|
||
}
|
||
|
||
} else {
|
||
window.location.href = item.img.url
|
||
}
|
||
},
|
||
// 获取活动盲盒详情
|
||
getBoxActivity() {
|
||
// /boxes/activity/list
|
||
boxActivityListApi().then(res => {
|
||
if (res.code === 200) {
|
||
this.visible = false
|
||
|
||
// 定义一个排序顺序的映射
|
||
let sortOrderMap = {
|
||
'PREFERENTIAL_DAY': 1,
|
||
'ROOKIE': 2,
|
||
'SPECIAL_PRICE': 3
|
||
};
|
||
|
||
// 使用 sort() 方法进行排序
|
||
res.data.sort((a, b) => {
|
||
// 获取 a 和 b 的 source 在 sortOrderMap 中的值
|
||
let orderA = sortOrderMap[a.source] || Number.MAX_SAFE_INTEGER;
|
||
let orderB = sortOrderMap[b.source] || Number.MAX_SAFE_INTEGER;
|
||
|
||
// 使用这些值进行比较
|
||
return orderA - orderB;
|
||
});
|
||
|
||
console.log("res.data:",res.data)
|
||
|
||
this.boxActivityList = JSON.parse(JSON.stringify(res.data))
|
||
if(this.boxActivityList.length > 0){
|
||
this.boxActivityList.forEach((item,index) => {
|
||
// item.visible = true
|
||
this.$set(this.boxActivityList[index],'visible',false)
|
||
})
|
||
this.boxActivityList[this.boxActivityList.length-1].visible = true
|
||
this.boxActivityLeftList = JSON.parse(JSON.stringify(res.data))
|
||
// activityShowIndex
|
||
if(this.boxActivityList.length > 0){
|
||
console.log("this.boxActivityList:",this.boxActivityList)
|
||
this.activityShowIndex = this.boxActivityList.length-1
|
||
try {
|
||
if (!uni.getStorageSync('activityShow')) {
|
||
this.activityShow = true
|
||
this.autoplay = false
|
||
// 设置标记，表示已经弹出过
|
||
uni.setStorageSync('activityShow', true)
|
||
}
|
||
} catch (e) {
|
||
//TODO handle the exception
|
||
}
|
||
}
|
||
}else{
|
||
this.visible = true
|
||
}
|
||
|
||
} else {
|
||
this.$api.msg(res.message)
|
||
}
|
||
})
|
||
},
|
||
goDetail(item) {
|
||
uni.navigateTo({
|
||
url: `/pages/index/boxDetail?id=${item.id}`
|
||
})
|
||
},
|
||
goActivityDetail(item) {
|
||
uni.navigateTo({
|
||
url: `/pages/index/boxDetail?type=${item.source}`
|
||
})
|
||
},
|
||
// 活动盲盒订单预览
|
||
goActivityPre(item) {
|
||
this.boxType = item.source
|
||
this.showActivity = true
|
||
this.isPay = true
|
||
this.activityShow = false
|
||
},
|
||
activityClose(index) {
|
||
uni.setStorageSync('ad', 'behind')
|
||
if(this.floatCkVis){
|
||
this.activityShow = false
|
||
this.autoplay = true
|
||
}else{
|
||
if (index === 0) {
|
||
this.activityShow = false
|
||
this.autoplay = true
|
||
this.visible = true
|
||
} else {
|
||
this.$set(this.boxActivityList[index],'visible',false)
|
||
this.$set(this.boxActivityList[index-1],'visible',true)
|
||
}
|
||
}
|
||
this.floatCkVis = false
|
||
|
||
},
|
||
close() {
|
||
uni.setStorageSync('ad', 'behind')
|
||
this.adVisible = false
|
||
},
|
||
login(data) {
|
||
loginXc(data).then(res => {
|
||
if (res.code === 200) {
|
||
// uni.setStorageSync('box-nickname', res.data.nickname)
|
||
// uni.setStorageSync('box-id', res.data.id)
|
||
try {
|
||
this.adStoreVisible = uni.getStorageSync('ad') ? uni.getStorageSync('ad') : 'frist'
|
||
} catch (e) {
|
||
this.adStoreVisible = 'frist'
|
||
}
|
||
this.getPopupAd('HOMEPAGE_CAROUSEL')
|
||
this.getPopupAd('HOMEPAGE_POPUP')
|
||
this.getPopupAdPage()
|
||
this.getBoxesPinned()
|
||
this.getBoxActivity()
|
||
} else {
|
||
this.$api.msg(res.message)
|
||
}
|
||
})
|
||
},
|
||
// 获取用户信息
|
||
getUserInfo() {
|
||
userInfo().then(res => {
|
||
if (res.code === 200) {
|
||
this.infoDetail = res.data
|
||
} else if (res.code == 400) {
|
||
uni.removeStorageSync('userInfo')
|
||
uni.removeStorageSync('info')
|
||
this.$api.msg(res.message)
|
||
} else {
|
||
this.$api.msg(res.message)
|
||
}
|
||
})
|
||
},
|
||
getCustomer() {
|
||
customerApi().then(res => {
|
||
if (res.code === 200) {
|
||
this.customer = res.data
|
||
} else {
|
||
this.$api.msg(res.message)
|
||
}
|
||
})
|
||
},
|
||
handleCustomer() {
|
||
// this.isCustomerPath = true
|
||
// window.location.href = 'https://work.weixin.qq.com/kfid/kfcdd500903e17d36af'
|
||
|
||
uni.navigateTo({
|
||
url:`/pages/mine/customer`
|
||
})
|
||
|
||
|
||
|
||
// uni.showLoading()
|
||
// customerApi().then(res => {
|
||
// uni.hideLoading()
|
||
// if (res.code === 200) {
|
||
// this.isCustomerPath = true
|
||
// showWebview(res.data)
|
||
// this.customer = res.data
|
||
// setTimeout(() => {
|
||
// // window.top.location.replace(res.data)
|
||
// // window.location.href = res.data
|
||
// },50)
|
||
// // uni.navigateTo({
|
||
// // url:`/pages/index/webview?customer=${this.customer}`
|
||
// // })
|
||
// // this.customerVisible = true
|
||
// // window.location.href = res.data
|
||
// // uni.navigateBack()
|
||
// // uni.switchTab({
|
||
// // url:`/pages/index/new-index`
|
||
// // })
|
||
|
||
// } else {
|
||
// this.$api.msg(res.message)
|
||
// }
|
||
// }).catch(err => {
|
||
// uni.hideLoading()
|
||
// })
|
||
|
||
// window.open(this.customer)
|
||
},
|
||
topUpCk() {
|
||
uni.navigateTo({
|
||
url: `/pages/mine/topUp`
|
||
})
|
||
},
|
||
notice() {
|
||
uni.navigateTo({
|
||
url: `/pages/mine/notice`
|
||
})
|
||
},
|
||
// 获取广告弹窗/轮播
|
||
getPopupAd(type) {
|
||
// HOMEPAGE_CAROUSEL 轮播
|
||
// HOMEPAGE_POPUP 弹窗
|
||
popupAdApi({
|
||
type
|
||
}).then(res => {
|
||
if (res.code === 200) {
|
||
console.log(type)
|
||
if (type === 'HOMEPAGE_CAROUSEL') {
|
||
this.bannerTopList = res.data
|
||
}
|
||
if (type === 'HOMEPAGE_POPUP') {
|
||
this.popupList = res.data
|
||
if (this.popupList.length > 0) {
|
||
// this.adVisible = true
|
||
}
|
||
}
|
||
} else {
|
||
this.$api.msg(res.message)
|
||
}
|
||
})
|
||
},
|
||
// 获取首页盲盒
|
||
getBoxesPinned() {
|
||
let data = {
|
||
name: this.search
|
||
}
|
||
boxesChannelPinnedApi(data).then(res => {
|
||
if (res.code === 200) {
|
||
this.list = res.data
|
||
} else {
|
||
this.$api.msg(res.message)
|
||
}
|
||
})
|
||
// boxesPinnedApi(data).then(res => {
|
||
// if (res.code === 200) {
|
||
// this.list = res.data
|
||
// } else {
|
||
// this.$api.msg(res.message)
|
||
// }
|
||
// })
|
||
},
|
||
swiperFooterChange(val) {
|
||
this.footerCurrent = val.detail.current
|
||
},
|
||
swiperChange(val) {
|
||
this.current = val.detail.current
|
||
},
|
||
swiperCk(index) {
|
||
this.current = index
|
||
},
|
||
changeSwiper(type) {
|
||
if (type === 'right') {
|
||
if (this.current === this.list.length - 1) {
|
||
this.current = 0
|
||
} else {
|
||
this.current += 1
|
||
}
|
||
} else {
|
||
if (this.current === 0) {
|
||
this.current = this.list.length - 1
|
||
} else {
|
||
this.current -= 1
|
||
}
|
||
}
|
||
},
|
||
|
||
// 不使用提示卡
|
||
nonuse() {
|
||
this.tipVisible = false
|
||
uni.navigateTo({
|
||
url: `/pages/index/boxOrderConfirm?boxId=${this.list[this.current].id}&type=${this.buyType}`
|
||
})
|
||
},
|
||
// 使用提示卡
|
||
immediate() {
|
||
|
||
},
|
||
// 打开购买组件
|
||
buy() {
|
||
if (uni.getStorageSync('box-token')) {
|
||
console.log(this.current)
|
||
this.detailData = this.list[this.current]
|
||
this.boxType = 'buy'
|
||
this.show = true
|
||
this.isPay = true
|
||
this.autoplay = false
|
||
// 盲盒预览埋点
|
||
// reportClickFn('box_buy_review_clk')
|
||
} else {
|
||
uni.navigateTo({
|
||
url: `/pages/login/login`
|
||
})
|
||
}
|
||
|
||
},
|
||
// 关闭购买弹窗组件
|
||
buyClose() {
|
||
this.buyVisible = false
|
||
},
|
||
floatCk(type) {
|
||
this.floatCkVis = true
|
||
this.isActivityClick = true
|
||
this.boxType = type
|
||
console.log(this.boxType)
|
||
this.boxActivityList.forEach((item,index) => {
|
||
this.$set(this.boxActivityList[index],'visible',false)
|
||
})
|
||
this.boxActivityList.forEach((item,index) => {
|
||
if(type === item.source){
|
||
console.log("aaa")
|
||
this.$set(this.boxActivityList[index],'visible',true)
|
||
}
|
||
})
|
||
console.log(this.boxActivityList)
|
||
if(type === 'SPECIAL_PRICE'){
|
||
this.activityShow = true
|
||
}
|
||
if(type === 'PREFERENTIAL_DAY'){
|
||
this.activityShow = true
|
||
}
|
||
if(type === 'ROOKIE'){
|
||
this.activityShow = true
|
||
// 点击打开新人福利数
|
||
reportClickFn('box_clk_activity_num')
|
||
}
|
||
if(type === 'SPECIAL_PRICE'){
|
||
// 点击打开薅羊毛数
|
||
reportClickFn('box_special_price_clk_activity_num')
|
||
}
|
||
// if (type) {
|
||
|
||
|
||
// // 每日优惠
|
||
// if (this.activityDetail && this.activityDetail.source) {
|
||
// // 活动页面埋点
|
||
// // reportClickFn('box_activity_clk');
|
||
// this.activityShow = true
|
||
// }
|
||
// }
|
||
},
|
||
// 购买组件 购买
|
||
goBuy(type) {
|
||
this.buyVisible = false
|
||
}
|
||
},
|
||
onHide() {
|
||
// 在页面离开时清除定时器
|
||
clearInterval(this.rookieTimer)
|
||
clearInterval(this.boxResultTimer)
|
||
this.isCustomerPath = false
|
||
// if(this.isCustomerPath){
|
||
// this.isCustomerPath = false
|
||
// // uni.navigateBack()
|
||
// // uni.switchTab({
|
||
// // url:`/pages/index/new-index`
|
||
// // })
|
||
// console.log("我返回了")
|
||
// }
|
||
|
||
},
|
||
onUnload() {
|
||
// 在页面离开时清除定时器
|
||
clearInterval(this.rookieTimer)
|
||
clearInterval(this.boxResultTimer)
|
||
},
|
||
onTabItemTap() {
|
||
// 首页tabbar点击次数home_ranging_clk
|
||
// reportClickFn('index_tabbar');
|
||
// console.log("我点击了首页的bar")
|
||
},
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.new-index-page {
|
||
width: 100%;
|
||
// height: 100vh;
|
||
overflow: hidden;
|
||
background-image: url('@/static/home/bg.jpg');
|
||
background-repeat: no-repeat;
|
||
background-size: 100%;
|
||
position: relative;
|
||
|
||
.top-img {
|
||
position: absolute;
|
||
top: 0;
|
||
// top: -160rpx;
|
||
width: 750rpx;
|
||
height: 653rpx;
|
||
z-index: 1;
|
||
}
|
||
.top-zm-icon{
|
||
position: absolute;
|
||
width: 650rpx;
|
||
top: -140rpx;
|
||
left: 50rpx;
|
||
z-index: 2;
|
||
// border: 1px solid red;
|
||
// width: 100%;
|
||
}
|
||
|
||
.home-main {
|
||
z-index: 3;
|
||
position: relative;
|
||
|
||
.home-header {
|
||
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 9rpx 23rpx 0 29rpx;
|
||
|
||
.header-activity {
|
||
z-index: 3;
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.header-activity-item {
|
||
margin-right: 3rpx;
|
||
width: 147rpx;
|
||
height: 149rpx;
|
||
// width: 107rpx;
|
||
// height: 109rpx;
|
||
position: relative;
|
||
background-size: 100%;
|
||
background-repeat: no-repeat;
|
||
font-weight: 500;
|
||
font-size: 15rpx;
|
||
color: #FFFFFF;
|
||
text-align: center;
|
||
// padding-top: 80rpx;
|
||
|
||
.activity-dian {
|
||
position: absolute;
|
||
// top: 11rpx;
|
||
// right: 3rpx;
|
||
bottom: 50rpx;
|
||
right: 40rpx;
|
||
width: 28rpx;
|
||
height: 28rpx;
|
||
// background: #FF0000;
|
||
border-radius: 50%;
|
||
z-index: 2;
|
||
}
|
||
}
|
||
|
||
.coupon {
|
||
background-image: url('@/static/home/ttlq.png');
|
||
}
|
||
|
||
.card {
|
||
background-image: url('@/static/home/kb.png');
|
||
}
|
||
|
||
.wechat {
|
||
background-image: url('@/static/home/wxfl.png');
|
||
}
|
||
|
||
.task {
|
||
// background-image: url('@/static/home/rwqd.png');
|
||
}
|
||
}
|
||
|
||
.header-rule {
|
||
display: flex;
|
||
align-items: center;
|
||
z-index: 3;
|
||
|
||
.rule-item {
|
||
width: 64rpx;
|
||
height: 64rpx;
|
||
background-image: url('@/static/home/wf.png');
|
||
background-size: 100%;
|
||
background-repeat: no-repeat;
|
||
margin-left: 11rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-weight: 500;
|
||
font-size: 15rpx;
|
||
color: #1C4362;
|
||
.music{
|
||
width: 21rpx;
|
||
height: 21rpx;
|
||
}
|
||
}
|
||
@keyframes rotateAnimation {
|
||
from {
|
||
transform: rotate(0deg);
|
||
}
|
||
to {
|
||
transform: rotate(360deg);
|
||
}
|
||
}
|
||
|
||
.rotate-music {
|
||
animation: rotateAnimation 3s linear infinite; /* 2秒旋转一周，线性过渡，无限循环 */
|
||
}
|
||
}
|
||
}
|
||
|
||
.rank {
|
||
|
||
z-index: 11;
|
||
// width: 121rpx;
|
||
// height: 96rpx;
|
||
width: 141rpx;
|
||
height: 116rpx;
|
||
font-weight: 500;
|
||
font-size: 22rpx;
|
||
// font-size: 15rpx;
|
||
color: #FFFFFF;
|
||
display: flex;
|
||
text-align: center;
|
||
|
||
justify-content: center;
|
||
// background-image: url('@/static/home/phb.png');
|
||
// background-size: 100%;
|
||
// background-repeat: no-repeat;
|
||
position: absolute;
|
||
// top: 127rpx;
|
||
// left: 36rpx;
|
||
top: 22rpx;
|
||
left: 158rpx;
|
||
// left: 29rpx;
|
||
.rank-item{
|
||
// border: 1px solid red;
|
||
position: relative;
|
||
width: 121rpx;
|
||
height: 96rpx;
|
||
// padding-top: 43rpx;
|
||
// padding-top: 46rpx;
|
||
.activity-dian {
|
||
position: absolute;
|
||
bottom: 12rpx;
|
||
right: 13rpx;
|
||
// top: 11rpx;
|
||
// right: 13rpx;
|
||
width: 28rpx;
|
||
height: 28rpx;
|
||
// background: #FF0000;
|
||
border-radius: 50%;
|
||
}
|
||
}
|
||
|
||
}
|
||
|
||
.left-icon {
|
||
width: 61rpx;
|
||
height: 61rpx;
|
||
position: absolute;
|
||
left: 41rpx;
|
||
top: 444rpx;
|
||
z-index: 11;
|
||
}
|
||
|
||
.right-icon {
|
||
width: 61rpx;
|
||
height: 61rpx;
|
||
position: absolute;
|
||
right: 41rpx;
|
||
top: 444rpx;
|
||
z-index:11;
|
||
}
|
||
|
||
.box-main {
|
||
// padding-top: 225rpx;
|
||
position: relative;
|
||
.jt-icon{
|
||
position: absolute;
|
||
top: 80rpx;
|
||
left: 0;
|
||
width: 100%;
|
||
z-index: 1;
|
||
}
|
||
.swiper {
|
||
position: relative;
|
||
z-index: 10;
|
||
// height: 295rpx;
|
||
height: 520rpx;
|
||
|
||
|
||
.swiper-items {
|
||
z-index: 10;
|
||
padding-top: 225rpx;
|
||
height: 520rpx;
|
||
position: relative;
|
||
|
||
.swiper-img-view {
|
||
z-index: 10;
|
||
width: 100%;
|
||
height: 295rpx;
|
||
|
||
.swiper-img {
|
||
z-index: 10;
|
||
display: block;
|
||
margin: 0 auto;
|
||
width: 495rpx;
|
||
height: 295rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.look{
|
||
position: absolute;
|
||
z-index: 11;
|
||
top: 400rpx;
|
||
right: 90rpx;
|
||
.look-img{
|
||
width: 104rpx;
|
||
height: 104rpx;
|
||
animation: pressAnimation 2s linear infinite;
|
||
}
|
||
.look-txt{
|
||
width: 104rpx;
|
||
text-align: right;
|
||
font-family: YouSheBiaoTiHei;
|
||
font-size: 23rpx;
|
||
color: #FF4800;
|
||
margin-top: -20rpx;
|
||
}
|
||
@keyframes pressAnimation {
|
||
// 0% {
|
||
// transform: translateX(0) translateY();
|
||
// }
|
||
// 100% {
|
||
// transform: translateX(-10px) translateY(0px); /* 向左上方移动10px */
|
||
// }
|
||
0% {
|
||
transform: translateX(0) translateY() rotate(0deg);
|
||
}
|
||
25% {
|
||
transform: translateX(0px) translateY(-10rpx) rotate(0deg); /* 向左上方移动10px */
|
||
}
|
||
50% {
|
||
transform: translateX(-10rpx) translateY(0rpx) rotate(-10deg);
|
||
}
|
||
100% {
|
||
transform: translateX(0) translateY() rotate(0deg);
|
||
}
|
||
}
|
||
}
|
||
|
||
.footer-tai {
|
||
position: relative;
|
||
width: 661rpx;
|
||
height: 215rpx;
|
||
z-index: 2 !important;
|
||
background-image: url('@/static/home/tai.gif');
|
||
// background-image: url('@/static/home/tai.png');
|
||
background-size: 100%;
|
||
background-repeat: no-repeat;
|
||
text-align: center;
|
||
margin-top: -50rpx;
|
||
margin-left: 45rpx;
|
||
|
||
.box-price {
|
||
padding-top: 96rpx;
|
||
color: #1C4362;
|
||
font-size: 46rpx;
|
||
font-family: YouSheBiaoTiHei;
|
||
.price-last{
|
||
font-size: 26rpx;
|
||
}
|
||
}
|
||
.free{
|
||
width: 91rpx;
|
||
height: 91rpx;
|
||
background-image: url('@/static/home/mfsw.png');
|
||
background-size: 100%;
|
||
background-repeat: no-repeat;
|
||
position: absolute;
|
||
right: -28rpx;
|
||
bottom: -10rpx;
|
||
font-weight: 500;
|
||
font-size: 15rpx;
|
||
color: #EBF9FE;
|
||
text-align: center;
|
||
padding-top: 70rpx;
|
||
}
|
||
|
||
}
|
||
|
||
.footer {
|
||
position: relative;
|
||
width: 100%;
|
||
z-index: 1 !important;
|
||
background-image: url('@/static/home/footer.png');
|
||
background-size: 100%;
|
||
background-repeat: no-repeat;
|
||
padding-top: 175rpx;
|
||
margin-top: -150rpx;
|
||
|
||
.footer-swiper {
|
||
height: 244rpx;
|
||
.footer-swiper-item {
|
||
width: 199rpx;
|
||
height: 244rpx;
|
||
.swiper-tai {
|
||
width: 199rpx;
|
||
height: 244rpx;
|
||
position: relative;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
.box-s-h{
|
||
position: absolute;
|
||
width: 184rpx;
|
||
height: 175rpx;
|
||
left: 7rpx;
|
||
top: 0;
|
||
z-index: 1;
|
||
}
|
||
.box-s-t{
|
||
position: absolute;
|
||
bottom: 0;
|
||
width: 199rpx;
|
||
height: 244rpx;
|
||
}
|
||
.box-h{
|
||
position: absolute;
|
||
width: 148rpx;
|
||
height: 161rpx;
|
||
left: 26rpx;
|
||
top: 7rpx;
|
||
z-index: 1;
|
||
}
|
||
.box-t{
|
||
position: absolute;
|
||
bottom: 0;
|
||
width: 161rpx;
|
||
height: 204rpx;
|
||
}
|
||
.swiper-name{
|
||
font-size: 31rpx;
|
||
color: #7DA9B8;
|
||
font-family: YouSheBiaoTiHei;
|
||
z-index: 2;
|
||
padding-top: 166rpx;
|
||
width: 141rpx;
|
||
overflow: hidden;
|
||
white-space: nowrap;
|
||
text-overflow: ellipsis;
|
||
margin: 0 auto;
|
||
text-align: center;
|
||
}
|
||
|
||
.swiper-name-active{
|
||
z-index: 2;
|
||
font-size: 38rpx;
|
||
color: #7DA9B8;
|
||
font-family: YouSheBiaoTiHei;
|
||
padding-top: 166rpx;
|
||
width: 179rpx;
|
||
overflow: hidden;
|
||
white-space: nowrap;
|
||
text-overflow: ellipsis;
|
||
text-align: center;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.footer-btn {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-top: 9rpx;
|
||
|
||
.footer-activity {
|
||
margin-left: 33rpx;
|
||
width: 188rpx;
|
||
height: 188rpx;
|
||
background-image: url('@/static/home/gdhd.png');
|
||
background-size: 100%;
|
||
background-repeat: no-repeat;
|
||
display: flex;
|
||
align-items: center;
|
||
// justify-content: center;
|
||
padding-top: 40rpx;
|
||
flex-direction: column;
|
||
font-family: YouSheBiaoTiHei;
|
||
font-size: 39rpx;
|
||
color: #FFFFFF;
|
||
}
|
||
.footer-activity-gif{
|
||
margin-left: 33rpx;
|
||
width: 188rpx;
|
||
height: 188rpx;
|
||
}
|
||
|
||
.footer-open {
|
||
margin-left: 6rpx;
|
||
width: 495rpx;
|
||
height: 188rpx;
|
||
background-image: url('@/static/home/ljkq.png');
|
||
background-size: 100%;
|
||
background-repeat: no-repeat;
|
||
font-family: YouSheBiaoTiHei;
|
||
font-size: 71rpx;
|
||
color: #FFFFFF;
|
||
display: flex;
|
||
// align-items: center;
|
||
justify-content: center;
|
||
padding-top: 36rpx;
|
||
// padding: 57rpx 0 0 109rpx;
|
||
}
|
||
.footer-open-gif{
|
||
margin-left: 6rpx;
|
||
width: 495rpx;
|
||
height: 188rpx;
|
||
// border: 1px solid red;
|
||
}
|
||
}
|
||
|
||
.footer-txt {
|
||
font-size: 16rpx;
|
||
color: #75B0C4;
|
||
text-align: center;
|
||
padding: 29rpx 0 19rpx 0;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
|
||
|
||
}
|
||
|
||
.dlg {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100vh;
|
||
background-color: rgba(0, 0, 0, 0.5);
|
||
z-index: 999;
|
||
|
||
|
||
.activity-main {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
left: 50%;
|
||
top: 50%;
|
||
transform: translate(-50%, -50%);
|
||
width: 579rpx;
|
||
.activity-img {
|
||
width: 579rpx;
|
||
height: 549rpx;
|
||
border-radius: 20rpx;
|
||
display: block;
|
||
margin: 20rpx auto;
|
||
z-index: 2;
|
||
}
|
||
|
||
.now-buy {
|
||
width: 296rpx;
|
||
height: 95rpx;
|
||
// background-image: url('@/static/home/dlg-ljgm.png');
|
||
// background-repeat: no-repeat;
|
||
// background-size: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-family: YouSheBiaoTiHei;
|
||
font-size: 45rpx;
|
||
color: #FFFFFF;
|
||
margin: 0 auto;
|
||
// width: 348rpx;
|
||
// // height: 120rpx;
|
||
// display: block;
|
||
// margin: -120rpx auto 0 auto;
|
||
// z-index: 1;
|
||
}
|
||
|
||
.dlg-close-img {
|
||
display: block;
|
||
width: 81rpx;
|
||
height: 81rpx;
|
||
z-index: 9999;
|
||
margin: 55rpx auto 0 auto;
|
||
}
|
||
}
|
||
.more-bg{
|
||
width: 100%;
|
||
height: 1174rpx;
|
||
background-image: url('@/static/home/gdhdbj.png');
|
||
background-repeat: no-repeat;
|
||
background-size: 100%;
|
||
position: absolute;
|
||
bottom: 0;
|
||
.more-header{
|
||
padding-top: 16rpx;
|
||
padding-left:32rpx;
|
||
height: 138rpx;
|
||
position: relative;
|
||
.more-title{
|
||
width: 292rpx;
|
||
height: 88rpx;
|
||
|
||
}
|
||
.more-close{
|
||
position: absolute;
|
||
top:2rpx;
|
||
right: 32rpx;
|
||
width: 50rpx;
|
||
height: 50rpx;
|
||
}
|
||
}
|
||
.more-content{
|
||
height: 1036rpx;
|
||
.more-item{
|
||
width: 686rpx;
|
||
height: 280rpx;
|
||
border-radius: 16rpx;
|
||
border: 2rpx solid #FFFFFF;
|
||
margin-left: 32rpx;
|
||
margin-top: 24rpx;
|
||
position: relative;
|
||
background-position: 50%;
|
||
background-size: 100%;
|
||
background-repeat: no-repeat;
|
||
.more-item-title{
|
||
position: absolute;
|
||
bottom: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 72rpx;
|
||
background: rgba(255,255,255,0.8);
|
||
border-radius: 0px 0px 16rpx 16rpx;
|
||
padding: 0 24rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
.titles{
|
||
width: 450rpx;
|
||
overflow: hidden;
|
||
white-space: nowrap;
|
||
text-overflow: ellipsis;
|
||
font-weight: bold;
|
||
font-size: 28rpx;
|
||
color: #000000;
|
||
}
|
||
.title-imgs{
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.log-out{
|
||
width: 590rpx;
|
||
height: 300rpx;
|
||
background: #FFFFFF;
|
||
border-radius: 16rpx;
|
||
.log-out-tip{
|
||
height: 200rpx;
|
||
font-weight: 500;
|
||
font-size: 28rpx;
|
||
color: rgba(0,0,0,0.85);
|
||
text-align: center;
|
||
padding: 64rpx 30rpx;
|
||
}
|
||
.log-out-footer{
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
border-top: 2rpx solid rgba(0,0,0,0.06);
|
||
height: 100rpx;
|
||
.cancel{
|
||
width: 294rpx;
|
||
height: 100rpx;
|
||
line-height: 100rpx;
|
||
font-weight: 500;
|
||
font-size: 32rpx;
|
||
color: #000000;
|
||
text-align: center;
|
||
border-right: 1px solid rgba(0,0,0,0.06);
|
||
}
|
||
.log-out-submit{
|
||
width: 294rpx;
|
||
height: 100rpx;
|
||
line-height: 100rpx;
|
||
font-weight: 500;
|
||
font-size: 32rpx;
|
||
color: #E55353;
|
||
text-align: center;
|
||
}
|
||
}
|
||
}
|
||
</style> |