123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801 |
- <template>
- <view class="container_box">
- <view class="fixed_top_status_bar"></view>
- <view class="seckill_top_wrap" :style="{backgroundImage:'url('+ top_bg +')',height:swiper_list.length>0?'358rpx' : nav_list.length == 0&&goods_list.length==0 ? '88rpx' : '160rpx'}">
- <view class="seckill_top" :style="{backgroundColor:scroll_top==0?'':'#E31719'}">
- <image :src="imgUrl+'seckill/to_back.png'" mode="" class="to_back_icon" @click="toPrev"></image>
- <view class="seckill_title" >{{$L('限时秒杀')}}</view>
- </view>
- <view class="nav_list_wrap" v-if="activity_open">
- <view class="nav_list" v-if='goods_list.length>0'>
- <view :class="current == 'all'?'nav_item active':'nav_item'" v-if='goods_list.length>0' @click="changeSort('all',0)">{{$L('全部')}}</view>
- <view :class="current == index?'nav_item active':'nav_item'" v-for="(item,index) in nav_list" :key="index" @click="changeSort(index,item.labelId)">{{item.labelName}}</view>
- </view>
- </view>
- <view class="swiper_wrap" v-if="activity_open&&is_show_banner" :style="{paddingTop:is_show_banner?'10rpx':'150rpx'}">
- <swiper class="carousel" circular @change="swiperChange" autoplay="true">
- <swiper-item v-show="swiperItem.imgUrl" class="carousel_item" v-for="(swiperItem,swiperIndex) in swiper_list" :key="swiperIndex" @click="skipTo(swiperItem)">
- <image :src="swiperItem.imgUrl" class="carousel_item"/>
- </swiper-item>
- </swiper>
- </view>
- </view>
- <view v-if="activity_open" :style="{marginTop:is_show_banner?'86rpx':'10rpx'}">
- <view :class="is_fixed_nav?'fixed_nav seckill_time_wrap':'seckill_time_wrap'" :style="{marginTop:swiper_list.length>0?'0':'10rpx'}" v-if="time_list.length>0&¤t=='all'">
- <view class="seckill_icon_wrap">
- <image :src="imgUrl+'seckill/seckill_icon.png'" mode="" class="seckill_icon"></image>
- </view>
- <view class="seckill_time">
- <view class="seckill_time_item" v-for="(item,index) in time_list" :key="index" @click="changeList(index,item.stageId)">
- <view :class="currIndex == index?'active_time time_item':'time_item'">{{item.time}}</view>
- <view :class="currIndex == index?'active_time_text time_text':'time_text'">{{item.state==1?'即将开始':'已开抢'}}</view>
- </view>
- </view>
- </view>
- <view class="goods_wrap" :style="{paddingTop:is_fixed_nav?'160rpx':'0'}">
- <view class="goods_item" v-for="(item,index) in goods_list" :key="index" @click="toGoodsDetail(item.productId,item.goodsId)">
- <view class="goods_img_wrap">
- <image :src="item.mainImage" mode="" class="goods_img"></image>
- </view>
- <view class="goods_item_wrap">
- <view class="goods_name">{{item.goodsName}}</view>
- <view class="goods_bottom_wrap">
- <view class="goods_bottom_left">
- <view class="goods_price">
- <text class="small_price">¥</text>
- <text class="big_price">{{$getPartNumber(item.seckillPrice,'int')}}</text>
- <text class="small_price">{{$getPartNumber(item.seckillPrice,'decimal')}}</text>
- </view>
- <view class="old_price">¥{{$getPartNumber(item.productPrice,'int')}}{{$getPartNumber(item.productPrice,'decimal')}}</view>
- </view>
- <!-- 进行中去抢购 -->
- <view class="goods_bottom_right" :style="{backgroundImage:'url('+ purchase_url +')'}" v-if="item.state == 2 && item.secKillProgress !='100%'">
- <text class="to_buy">{{$L('去抢购')}}</text>
- <view class="progress-box">
- <progress :percent="$formatPercent(item.secKillProgress)" stroke-width="3" backgroundColor="rgba(0,0,0,0)" border-radius="5" activeColor="#fff"/>
- </view>
- <text class="have_buy_percent">{{$L('已抢')}}{{item.secKillProgress}}</text>
- </view>
- <!-- 进行中已抢完 -->
- <view class="sold_out_wrap" v-if="item.state == 2 && item.secKillProgress =='100%'">
- <view class="sold_out_btn" @click.stop="haveSoldOut">{{$L('已抢完')}}</view>
- <view class="sold_out_num">{{item.buyQuantity}}{{$L('件已抢完')}}</view>
- </view>
- <!-- 即将开始设置/取消提醒 -->
- <view class="remind_wrap" v-if="item.state == 1">
- <view class="set_remind_btn remind_btn" v-if="!item.isRemind" @click.stop="setRemind(item.stageProductId)">{{$L('设置提醒')}}</view>
- <view class="cancel_remind_btn remind_btn" v-else @click.stop="setRemind(item.stageProductId)">{{$L('取消提醒')}}</view>
- </view>
- </view>
- </view>
- </view>
- <view class="is_more" v-if="goods_list.length > 0">{{hasmore ? '数据加载中...' : '数据加载完毕~'}}</view>
- </view>
- <!-- 无秒杀空页面 -->
- <view class="empty_page" v-if="is_show_empty">
- <image :src="imgUrl+'index/empty.png'" mode="" class="empty_img"></image>
- <view class="empty_text">{{$L('今日无秒杀')}}</view>
- </view>
- </view>
- <notOpen v-if='!activity_open'></notOpen>
- </view>
- </template>
- <script>
- import {
- mapState
- } from 'vuex';
- import notOpen from '../../components/not_open.vue'
- export default{
- data(){
- return {
- imgUrl:getApp().globalData.imgUrl,
- top_bg:getApp().globalData.imgUrl+'seckill/top_bg2.png',
- top_bg2:getApp().globalData.imgUrl+'seckill/top_bg2.png',
- purchase_url:getApp().globalData.imgUrl+'seckill/purchase_bg.png',
- nav_list:[],
- swiper_list:[],
- time_list:[],
- goods_list:[],
- current:'all',
- swiperCurrent:0,
- currIndex:0,
- label_id:0, //分类id
- stage_id:'', //场次id
- pn:1,
- has_more:true,
- seckillId:'',
- is_show_banner:true,
- is_show_empty:false,
- banner_height:'358rpx',
- is_fixed_nav:false, //是否固定场次
- if_hide:false,
- scroll_top:0,
- activity_open:false
- }
- },
- components:{
- notOpen
- },
- computed: {
- ...mapState(['hasLogin','userInfo'])
- },
- onLoad(option){
- this.ifOpen()
- this.seckillId = option.seckillId
- },
- onShow(){
- if(this.if_hide&&this.activity_open){
- if(this.stage_id){
- this.getActivityGoods()
- }
- }
- },
- onHide(){
- this.if_hide=true
- },
- onPageScroll(e){
- this.scroll_top=e.scrollTop
- if(this.is_show_banner){ //有轮播图
- if(e.scrollTop > 179){
- this.top_bg = getApp().globalData.imgUrl+'seckill/top_bg2.png'
- this.is_fixed_nav = true
- }else{
- this.top_bg = this.is_show_banner?getApp().globalData.imgUrl+'seckill/top_bg.png':getApp().globalData.imgUrl+'seckill/top_bg2.png',
- this.is_fixed_nav = false
- }
- }else{ //没有轮播图
- if(e.scrollTop > 44){
- this.is_fixed_nav = true
- }else{
- this.is_fixed_nav = false
- }
- }
- },
- onReachBottom(){
- if(this.hasmore){
- this.getActivityGoods()
- }
- },
- methods:{
- // 判断活动是否开启
- ifOpen(){
- let param = {}
- param.data={}
- param.data.names='seckill_is_enable'
- param.url = 'v3/system/front/setting/getSettings'
- param.method = 'GET'
- this.$request(param).then(res => {
- if (res.state == 200) {
- if(res.data[0]=='1'){
- this.activity_open=true
- this.getSeckillList()
- this.getBannerList()
- }else{
- this.activity_open=false
- }
- }
- })
- },
- toPrev(){
- // #ifdef H5
- const pages = getCurrentPages()
- if (pages.length > 1) {
- uni.navigateBack(1)
- return;
- }
- //使用vue-router返回上一级
- let a = this.$router.go(-1)
- if (a == undefined) {
- //重新定向跳转页面
- uni.reLaunch({
- url: '/pages/index/index'
- })
- }
- return;
- // #endif
- uni.navigateBack(1)
- },
- //获取轮播图
- getBannerList(){
- let _this = this
- this.$request({
- url:'v3/promotion/front/seckill/banner',
- method: 'GET',
- data:{
- seckillId:_this.seckillId
- }
- }).then((res)=>{
- if (res.state == 200) {
- var newList=[]
- if(res.data.banner){
- _this.swiper_list=JSON.parse(res.data.banner)
- _this.swiper_list.map((item)=>{
- if(item.imgUrl){
- newList.push(item)
- }
- })
- }
- _this.swiper_list=newList
- if(_this.swiper_list.length == 0){
- _this.top_bg = getApp().globalData.imgUrl+'seckill/top_bg2.png'
- _this.is_show_banner = false
- }else{
- _this.top_bg = getApp().globalData.imgUrl+'seckill/top_bg.png'
- _this.is_show_banner = true
- }
- // _this.getSessionList()
- }else if(res.state == 255){
- _this.is_show_empty = true
- }else{
- uni.showToast({
- title:res.msg,
- icon:'none'
- })
- }
- });
- },
- // 获取顶部分类
- getSeckillList(){
- let _this = this
- this.$request({
- url:'v3/promotion/front/seckill/getSeckillLabel',
- method: 'GET',
- data:{
- seckillId:_this.seckillId
- }
- }).then((res)=>{
- if (res.state == 200) {
- let result = res.data.list
- if(result.length > 0){
- _this.nav_list = result
- // _this.label_id = _this.label_id == ''?_this.nav_list[0].labelId:_this.label_id
- _this.currIndex = 0
- }else{
- _this.is_show_empty = true
- }
- _this.getSessionList()
- }else if(res.state == 255){
- _this.is_show_empty = true
- }else{
- uni.showToast({
- title:res.msg,
- icon:'none'
- })
- }
- });
- },
- // 获取场次列表
- getSessionList(){
- let _this = this
- this.$request({
- url:'v3/promotion/front/seckill/getSeckillStage',
- method: 'GET',
- data:{
- seckillId:_this.seckillId
- }
- }).then((res)=>{
- if (res.state == 200) {
- let result = res.data.list
- if(result != null && result.length>0){
- _this.time_list = result
- _this.stage_id = _this.time_list[_this.currIndex].stageId
- this.getActivityGoods()
- }else{
- _this.is_show_empty = true
- }
- }else if(res.state == 255){
- _this.is_show_empty = true
- }else{
- uni.showToast({
- title:res.msg,
- icon:'none'
- })
- }
- });
- },
- // 获取商品列表activitySession
- getActivityGoods(){
- uni.showLoading()
- let _this = this
- var param={}
- param.labelId=_this.label_id
- if(_this.current=='all'){
- param.stageId=_this.stage_id
- }
- param.seckillId=_this.seckillId
- this.$request({
- url:'v3/promotion/front/seckill/goodsList',
- data:param,
- method: 'GET',
- }).then((res)=>{
- if (res.state == 200) {
- let result = res.data
- if(_this.current=='all'){
- _this.is_show_empty = _this.time_list.length == 0?true:false
- }else{
- _this.is_show_empty = result.list.length == 0?true:false
- }
- if(_this.pn == 1){
- _this.goods_list = result.list
- }else{
- _this.goods_list = _this.goods_list.concat(result.list)
- }
- let page = result.pagination
- if(page.current < Math.ceil(page.total/page.pageSize)){
- _this.hasmore = true
- }else{
- _this.hasmore = false
- }
- if(_this.hasmore){
- _this.pn ++
- }
- uni.hideLoading()
- }else{
- uni.hideLoading()
- uni.showToast({
- title:res.msg,
- icon:'none'
- })
- }
- });
- },
- // 切换分类
- async changeSort(index,id){
- this.current = index
- this.label_id = id
- this.currIndex = 0
- await this.getSessionList()
- },
- // 切换场次
- async changeList(index,id){
- this.currIndex = index
- this.stage_id = id
- await this.getActivityGoods()
- },
- swiperChange(e){
- this.swiperIndex = e.detail.current
- },
- // 设置/取消提醒
- setRemind(stageProductId){
- if(this.hasLogin){
- let param = {
- stageProductId
- }
- let _this = this
- this.$request({
- url: 'v3/promotion/front/seckill/isRemind',
- method: 'POST',
- data: param,
- }).then((res)=>{
- if (res.state == 200) {
- uni.showToast({
- title:res.msg
- })
- setTimeout(()=>{
- _this.getActivityGoods()
- },1500)
- }else{
- uni.showToast({
- title:res.msg,
- icon:'none'
- })
- }
- });
- }else{
- uni.navigateTo({
- url:'/pages/public/login'
- })
- }
- },
- toGoodsDetail(productId,goodsId){
- uni.navigateTo({
- url:'/pages/product/detail?productId='+productId+'&goodsId='+goodsId
- })
- },
- // 已抢完
- haveSoldOut(){
- uni.showToast({
- title:'该商品已抢完,去看看别的吧!',
- icon:'none'
- })
- },
- // 相关跳转
- skipTo(swiperitem) {
- if (swiperitem.link_type == 'url') { //跳转链接地址
- // #ifdef H5
- window.open(swiperitem.link_value)
- // #endif
- // #ifdef APP-PLUS
- plus.runtime.openURL(swiperitem.link_value) //这里默认使用外部浏览器打开而不是内部web-view组件打开
- // #endif
- // #ifdef MP
- uni.navigateTo({
- url: '/pages/index/skip_to?url=' + swiperitem.link_value
- })
- // #endif
- } else if (swiperitem.link_type == 'goods') { //跳转商品详情页
- uni.navigateTo({
- url: '/pages/product/detail?productId=' + swiperitem.info.defaultProductId + '&goodsId=' + swiperitem.info.goodsId
- })
- } else if (swiperitem.link_type == 'category') { // 分类列表
- uni.navigateTo({
- url: '/pages/product/list?categoryId=' + swiperitem.info.categoryId
- })
- } else if (swiperitem.link_type == 'keyword') { // 关键词
- uni.navigateTo({
- url: '/pages/product/list?keyword=' + swiperitem.link_value + '&source=search'
- })
- } else if (swiperitem.link_type == 'topic') { //跳转专题页
- uni.navigateTo({
- url: '/pages/index/topic?id=' + swiperitem.info.decoId
- })
- } else if (swiperitem.link_type == 'brand_home') { //品牌列表
- uni.navigateTo({
- url: '/pages/public/brand'
- })
- } else if(swiperitem.link_type == 'seckill'){ //秒杀
- uni.navigateTo({
- url: '/pages/seckill/seckill?seckillId=' + swiperitem.info.seckillId
- })
- }else if(swiperitem.link_type == 'voucher_center'){ //优惠券领券中心
- uni.navigateTo({
- url: '/pages/coupon/couponCenter'
- })
- }
- },
- }
- }
- </script>
- <style lang='scss' scoped>
- /deep/.uni-swiper-wrapper{
- border-radius: 5px!important;
- }
- </style>
- <style lang="scss">
- .fixed_top_status_bar {
- position: fixed;
- /* #ifdef APP-PLUS */
- height: var(--status-bar-height);
- /* #endif */
- /* #ifndef APP-PLUS */
- height: 0;
- /* #endif */
- top: 0;
- left: 0;
- right: 0;
- z-index: 99;
- background: #fff;
- }
- .uni-swiper__dots-box{
- border-radius: 5px!important;
- }
- page{
- background-color: #f5f5f5;
- }
- .container_box{
- padding-top:var(--status-bar-height);
- width:750rpx;
- margin:0 auto;
- .seckill_top_wrap{
- width:750rpx;
- height:358rpx;
- background-size: 100% 100%;
- .seckill_top{
- width:750rpx;
- height:88rpx;
- display: flex;
- justify-content: center;
- align-items: center;
- position: fixed;
- top:0;
- left:50%;
- transform: translateX(-50%);
- z-index:1000;
- // #ifdef MP
- top: 20rpx;
- // #endif
- // #ifdef APP-PLUS
- top: var(--status-bar-height);
- // #endif
- // background-color: #E31719;
- .to_back_icon{
- width: 17rpx;
- height:29rpx;
- position:absolute;
- left:20rpx;
- top:32rpx;
- }
- .seckill_title{
- font-size: 36rpx;
- color:#fff;
- }
- }
- .nav_list_wrap{
- width:100%;
- box-sizing: border-box;
- margin-right: 20rpx;
- padding-top:88rpx;
- .nav_list{
- height:50rpx;
- display: flex;
- align-items: center;
- overflow-x: scroll;
- padding-left:20rpx;
- box-sizing: border-box;
- margin-right: 20rpx;
- .nav_item{
- white-space: nowrap;
- font-size:32rpx;
- color:#fff;
- margin-right:53rpx;
- }
- }
- }
- .swiper_wrap{
- padding:10rpx 20rpx 0 20rpx;
- height:300rpx;
- .carousel{
- width:100%;
- height:300rpx;
- border-radius: 5px;
- .carousel_item{
- width:100%;
- height:300rpx;
- border-radius: 5px;
- }
- }
- }
- }
- .seckill_time_wrap{
- width:750rpx;
- padding:0 20rpx;
- height:137rpx;
- display: flex;
- align-items: center;
- margin-top:82rpx;
- box-sizing: border-box;
- .seckill_icon_wrap{
- width:64rpx;
- height:94rpx;
- margin-right:25rpx;
- .seckill_icon{
- width:64rpx;
- height:94rpx;
- }
- }
- .seckill_time{
- width: 100%;
- display: flex;
- overflow-x: scroll;
- .seckill_time_item{
- margin-right:40rpx;
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- .time_item{
- font-size:32rpx;
- color:#333;
- font-weight: bold;
- }
- .time_text{
- font-size:24rpx;
- color:#666;
- white-space: nowrap;
- padding:5rpx 10rpx;
- line-height: 24rpx;
- }
- }
- }
- .seckill_time view:last-child{
- margin-right:0;
- }
- }
- .goods_wrap{
- width:750rpx;
- padding:0 20rpx;
- box-sizing: border-box;
- .goods_item{
- width:100%;
- height:310rpx;
- background-color: #fff;
- border-radius: 15rpx;
- display: flex;
- padding:20rpx;
- box-sizing: border-box;
- margin-bottom:20rpx;
- .goods_img_wrap{
- width:270rpx;
- height:270rpx;
- border-radius: 15rpx;
- margin-right:20rpx;
- background-color: #f8f8f8;
- .goods_img{
- width:270rpx;
- height:270rpx;
- border-radius: 15rpx;
- }
- }
- .goods_item_wrap{
- width:100%;
- position: relative;
- .goods_name{
- font-size:28rpx;
- color:#2D2D2D;
- font-weight: 600;
- overflow: hidden;
- text-overflow: ellipsis;
- display: -webkit-box;
- -webkit-line-clamp: 2;
- -webkit-box-orient: vertical;
- word-break: break-word;
- margin-top:20rpx;
- }
- .goods_bottom_wrap{
- width:100%;
- position: absolute;
- bottom:0;
- left:0;
- display: flex;
- justify-content: space-between;
- .goods_bottom_left{
- padding-top: 10rpx;
- box-sizing: border-box;
- .goods_price{
- color:#FC1C1C;
- font-weight: bold;
- .small_price{
- font-size:24rpx;
- }
- .big_price{
- font-size:34rpx;
- }
- }
- .old_price{
- font-size:20rpx;
- color:#999;
- text-decoration: line-through;
- }
- }
- .sold_out_wrap{
- .sold_out_btn{
- width: 138rpx;
- height: 50rpx;
- font-size:26rpx;
- display: flex;
- justify-content: center;
- align-items: center;
- color:#fff;
- background: #999999;
- border-radius: 25rpx;
- }
- .sold_out_num{
- font-size: 22rpx;
- color:#666;
- margin-top:14rpx;
- text-align: center;
- }
- }
- .goods_bottom_right{
- width:129rpx;
- height:86rpx;
- display: flex;
- flex-direction: column;
- align-items: center;
- background-size: 100% 100%;
- .to_buy{
- font-size:26rpx;
- color:#fff;
- margin:6rpx 0;
- }
- .progress-box{
- width:90rpx;
- }
- .have_buy_percent{
- font-size: 20rpx;
- color:#fff;
- transform: scale(0.8);
- font-weight: 400;
- }
- }
- .remind_wrap{
- height:86rpx;
- display: flex;
- align-items: flex-end;
- .set_remind_btn{
- color: #fff;
- background: linear-gradient(90deg, #FCE000 0%, #FF6B23 0%, #FF133A 100%);
- }
- .cancel_remind_btn{
- color:#333;
- border: 1rpx solid #A6A6A6;
- box-sizing: border-box;
- }
- .remind_btn{
- width: 138rpx;
- height: 50rpx;
- font-size:26rpx;
- display: flex;
- justify-content: center;
- align-items: center;
- border-radius: 25rpx;
- }
- }
- }
- }
- }
- }
- }
- .active{
- font-size:32rpx !important;
- font-weight: bold;
- }
- .active_time{
- font-size:32rpx;
- font-weight: bold;
- color:#EC2116 !important;
- }
- .active_time_text{
- padding:2rpx 10rpx;
- background-color: #EC2116;
- color:#fff !important;
- border-radius: 17rpx;
- }
- .progress-box /deep/ .uni-progress /deep/ .uni-progress-bar{
- border:1rpx solid #fff;
- height:4rpx !important;
- border-radius: 3rpx;
- }
- .empty_page{
- display: flex;
- flex-direction: column;
- justify-content: center;
- align-items: center;
- margin-top:200rpx;
- .empty_img{
- width:210rpx;
- height: 210rpx;
- margin-bottom:32rpx;
- }
- .empty_text{
- font-size: 26rpx;
- color:#666;
- }
- }
- /* 加载更多,没有更多 */
- .is_more {
- width: 100%;
- display: flex;
- align-items: center;
- justify-content: center;
- font-size: 22rpx;
- color: #999999;
- line-height: 22rpx;
- padding: 10rpx 0 30rpx;
- background: #F5F5F5;
- }
- .fixed_nav{
- position:fixed;
- top:78rpx;
- left:50%;
- transform: translateX(-50%);
- z-index:999;
- background-color: #f5f5f5;
- }
- </style>
|