You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
559 lines
12 KiB
559 lines
12 KiB
<template>
|
|
<view class="seckill" :id="`seckill${styleIndex}`">
|
|
<view>
|
|
<u-navbar title="限时秒杀" back-icon-color="#fff" :border-bottom="false" title-color="#fff"
|
|
:background="background"></u-navbar>
|
|
</view>
|
|
<view class="title" :style="{backgroundImage:'url('+backgroundImg+')'}" style="background-size: 100% 100%;">
|
|
<image v-if="!styleIndex" :src="$picUrl+ '/static/seckill/topHeader.png'" mode="" class="bgImg"></image>
|
|
<view v-if="!styleIndex" class="limitTitle">
|
|
<image src="/static/seckill/limit.png" mode="" class="img"></image>
|
|
</view>
|
|
<view class="time" v-if="tabbar.length">
|
|
<view class="timeItem" v-for="(item,index) in tabbar" :key="index">
|
|
<view class="num">
|
|
{{item.active_time}}
|
|
</view>
|
|
<view class="desc">
|
|
{{item.status_text}}
|
|
</view>
|
|
</view>
|
|
|
|
</view>
|
|
</view>
|
|
<view class="main">
|
|
<view class="over" v-if="tabbar.length">
|
|
<view class="info">
|
|
距秒杀<text
|
|
class="m-r-10">{{ tabbar[curTabIndex].status == ActiveStatusEnum.STATE_BEGIN.value ? '结束' : '开始' }}</text>还剩
|
|
<count-down style='display: inline-block;' :date="tabbar[curTabIndex].count_down_time"
|
|
separator="colon" theme="custom" />
|
|
</view>
|
|
</view>
|
|
<view class="goodsList">
|
|
<view class="goodItem" v-for="(item,index) in goodsList" :key="index"
|
|
@click="handleTargetGoods(item.goods_id)">
|
|
<view class="itemImg">
|
|
<image :src="item.goods_image" mode="widthFix" class="goodsImg"></image>
|
|
</view>
|
|
<view class="goodsInfo">
|
|
<view class="name">
|
|
{{item.goods_name}}
|
|
</view>
|
|
<view class="sellNum">
|
|
爆卖{{item.sales_actual}}件
|
|
</view>
|
|
<view class="info">
|
|
<view class="price">
|
|
¥{{item.original_price}}
|
|
</view>
|
|
<view class="delPrice">
|
|
<view class="delText">
|
|
直降{{item.original_price-item.seckill_price_min}}元
|
|
</view>
|
|
|
|
</view>
|
|
<view class="update">
|
|
即将调整
|
|
</view>
|
|
</view>
|
|
<view class="line">
|
|
<image src="/static/seckill/line.png" mode=""></image>
|
|
</view>
|
|
<view class="btn" v-if="tabbar.length">
|
|
<view class="killPrice">
|
|
秒杀价￥<text>{{item.original_price}}</text>
|
|
</view>
|
|
<view class="buyNow">
|
|
马上抢
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import WxofficialMixin from '@/core/mixins/wxofficial'
|
|
import CountDown from '@/components/countdown'
|
|
import MescrollMixin from '@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins'
|
|
import {
|
|
hex2rgba
|
|
} from '@/utils/color'
|
|
import {
|
|
getEmptyPaginateObj,
|
|
getMoreListData
|
|
} from '@/core/app'
|
|
import {
|
|
ActiveStatusEnum
|
|
} from '@/common/enum/sharp'
|
|
import * as Api from '@/api/activity'
|
|
import styleColor from '../styleColor';
|
|
|
|
const pageSize = 15
|
|
|
|
export default {
|
|
components: {
|
|
CountDown
|
|
},
|
|
mixins: [MescrollMixin, WxofficialMixin],
|
|
data() {
|
|
return {
|
|
// 是否正在加载中
|
|
isLoading: true,
|
|
// 当前tab索引
|
|
curTabIndex: 0,
|
|
// 上拉加载配置
|
|
upOption: {
|
|
// 首次自动执行
|
|
auto: false,
|
|
// 每页数据的数量; 默认10
|
|
page: {
|
|
size: pageSize
|
|
},
|
|
// 数量要大于3条才显示无更多数据
|
|
noMoreSize: 3,
|
|
},
|
|
// 枚举类
|
|
ActiveStatusEnum,
|
|
// 秒杀活动场次
|
|
tabbar: [],
|
|
// 秒杀商品列表
|
|
goodsList: [],
|
|
background: {
|
|
background: 'url(https://www.royaum.com.cn/static/rank/rank1.png) center top no-repeat',
|
|
backgroundSize: '100% auto',
|
|
},
|
|
backgroundImg:'',
|
|
}
|
|
},
|
|
computed: {
|
|
styleIndex() {
|
|
const index = uni.getStorageSync('styleIndex') || '';
|
|
return index;
|
|
},
|
|
},
|
|
watch: {
|
|
styleIndex: {
|
|
immediate: true,
|
|
handler() {
|
|
if (this.styleIndex > 0) {
|
|
this.backgroundImg = `https://www.royaum.com.cn/static/seckill/${this.styleIndex}.png`;
|
|
this.background.background = `${styleColor.seckillNavBgColor[this.styleIndex - 1]}`;
|
|
}
|
|
},
|
|
},
|
|
},
|
|
/**
|
|
* 生命周期函数--监听页面加载
|
|
*/
|
|
onLoad(options) {
|
|
this.getCarouselList()
|
|
// 加载页面数据
|
|
this.onRefreshPage()
|
|
// 设置微信公众号链接分享卡片内容
|
|
this.setWxofficialShareData()
|
|
},
|
|
|
|
methods: {
|
|
// 获取背景图
|
|
getCarouselList() {
|
|
const app = this;
|
|
Api.getImage({
|
|
type: 2
|
|
})
|
|
.then(result => {
|
|
app.backgroundImg = !this.styleIndex ? result.data.imgurl : app.backgroundImg;
|
|
})
|
|
.finally(() => app.isLoading = false)
|
|
},
|
|
// 加载页面数据
|
|
onRefreshPage() {
|
|
const app = this
|
|
return new Promise((resolve, reject) => {
|
|
Api.data()
|
|
.then(result => {
|
|
app.tabbar = result.data.tabbar;
|
|
app.goodsList = result.data.goodsList.data
|
|
if(app.goodsList && app.goodsList.length > 0){
|
|
app.goodsList.map(a=>{
|
|
a.original_price = Number(a.original_price)
|
|
a.seckill_price_max = Number(a.seckill_price_max)
|
|
a.seckill_price_min = Number(a.seckill_price_min)
|
|
})
|
|
}
|
|
app.curTabIndex = 0
|
|
if (!app.goodsList.length) {
|
|
app.mescroll.showEmpty()
|
|
}
|
|
resolve()
|
|
})
|
|
.catch(reject)
|
|
})
|
|
},
|
|
|
|
/**
|
|
* 获取商品列表
|
|
* @param {Number} pageNo 页码
|
|
*/
|
|
getListData(pageNo = 1) {
|
|
const app = this
|
|
const activeTimeId = app.getCurTabbarId()
|
|
return new Promise((resolve, reject) => {
|
|
Api.list(activeTimeId, {
|
|
page: pageNo
|
|
}, {
|
|
load: false
|
|
})
|
|
.then(result => {
|
|
// 合并新数据
|
|
let newList = result.data.list
|
|
app.goodsList = getMoreListData(newList, app.goodsList, pageNo)
|
|
resolve(newList)
|
|
})
|
|
.catch(reject)
|
|
})
|
|
},
|
|
|
|
// 下拉刷新的回调
|
|
downCallback() {
|
|
this.onRefreshPage()
|
|
.finally(() => this.mescroll.endSuccess())
|
|
},
|
|
|
|
/**
|
|
* 上拉加载的回调
|
|
* 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10
|
|
* @param {Object} page
|
|
*/
|
|
upCallback(page) {
|
|
const app = this
|
|
// 设置列表数据
|
|
app.getListData(page.num)
|
|
.then(list => {
|
|
const curPageLen = list.data.length
|
|
const totalSize = list.data.total
|
|
app.mescroll.endBySize(curPageLen, totalSize)
|
|
})
|
|
.catch(() => app.mescroll.endErr())
|
|
},
|
|
|
|
// 点击切换标签(会场场次)
|
|
handleTab(index) {
|
|
const app = this
|
|
app.curTabIndex = index
|
|
// 刷新列表数据
|
|
app.goodsList = getEmptyPaginateObj()
|
|
app.mescroll.resetUpScroll()
|
|
},
|
|
|
|
// 获取当前选择的会场
|
|
getCurTabbar() {
|
|
return this.tabbar[this.curTabIndex]
|
|
},
|
|
|
|
// 获取当前会场场次ID
|
|
getCurTabbarId() {
|
|
const curTabbar = this.getCurTabbar()
|
|
return curTabbar ? curTabbar.active_time_id : 0
|
|
},
|
|
|
|
// 跳转到秒杀商品详情
|
|
handleTargetGoods(sharpGoodsId) {
|
|
let count_down_time = new Date(this.tabbar[this.curTabIndex].count_down_time.replace(/-/g, '/')).getTime()-new Date().getTime()
|
|
uni.navigateTo({
|
|
url: '/pages/goods/detail?goodsId=' + sharpGoodsId+"&isSeckill="+true+'&isBuy='+count_down_time+'&seckillText='+(this.tabbar[this.curTabIndex].status == this.ActiveStatusEnum.STATE_BEGIN.value ? '结束' : '开始' )
|
|
})
|
|
},
|
|
|
|
|
|
// 设置微信公众号链接分享卡片内容
|
|
setWxofficialShareData() {
|
|
this.updateShareCardData({
|
|
title: '整点秒杀会场'
|
|
})
|
|
},
|
|
|
|
},
|
|
|
|
/**
|
|
* 分享当前页面
|
|
*/
|
|
onShareAppMessage() {
|
|
// 构建页面参数
|
|
const params = this.$getShareUrlParams()
|
|
return {
|
|
title: '整点秒杀会场',
|
|
path: `/pages/sharp/index?${params}`
|
|
}
|
|
},
|
|
|
|
/**
|
|
* 分享到朋友圈
|
|
* 本接口为 Beta 版本，暂只在 Android 平台支持，详见分享到朋友圈 (Beta)
|
|
* https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/share-timeline.html
|
|
*/
|
|
onShareTimeline() {
|
|
// 构建页面参数
|
|
const params = this.$getShareUrlParams()
|
|
return {
|
|
title: '整点秒杀会场',
|
|
path: `/pages/sharp/index?${params}`
|
|
}
|
|
},
|
|
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
@import './seckillStyle.scss';
|
|
.seckill {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.title {
|
|
width: 100%;
|
|
height: 220rpx;
|
|
position: relative;
|
|
|
|
.bgImg {
|
|
width: 100%;
|
|
height: 100%;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
z-index: -1;
|
|
}
|
|
|
|
.limitTitle {
|
|
display: flex;
|
|
justify-content: center;
|
|
z-index: 20;
|
|
|
|
.img {
|
|
margin-top: 20rpx;
|
|
width: 302rpx;
|
|
height: 82rpx;
|
|
z-index: 20;
|
|
}
|
|
}
|
|
|
|
.time {
|
|
display: flex;
|
|
align-items: center;
|
|
width: 100%;
|
|
justify-content: space-around;
|
|
z-index: 30;
|
|
|
|
.timeItem {
|
|
.num {
|
|
width: 150rpx;
|
|
font-size: 28rpx;
|
|
font-weight: 500;
|
|
color: #FFFFFF;
|
|
line-height: 33rpx;
|
|
text-shadow: 0px 0px 11px #FB3A22;
|
|
text-align: center;
|
|
margin-top: 10rpx;
|
|
}
|
|
|
|
.desc {
|
|
width: 150rpx;
|
|
height: 36rpx;
|
|
background: #FFFFFF;
|
|
border-radius: 62rpx 62rpx 62rpx 62rpx;
|
|
opacity: 1;
|
|
font-size: 24rpx;
|
|
font-family: PingFang SC, PingFang SC;
|
|
font-weight: 500;
|
|
color: #FB3D27;
|
|
line-height: 36rpx;
|
|
margin-top: 10rpx;
|
|
text-align: center;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.main {
|
|
width: 100%;
|
|
height: 100%;
|
|
background: #F4F6FA;
|
|
border-radius: 0rpx 0rpx 0rpx 0rpx;
|
|
opacity: 1;
|
|
padding-top: 34rpx;
|
|
|
|
.over {
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
font-size: 28rpx;
|
|
font-family: PingFang SC, PingFang SC;
|
|
font-weight: 500;
|
|
color: #3C3C3C;
|
|
|
|
.info {
|
|
line-height: 40rpx;
|
|
margin-right: 18rpx;
|
|
}
|
|
|
|
.com {
|
|
width: 54rpx;
|
|
height: 48rpx;
|
|
background: #252525;
|
|
border-radius: 4rpx 4rpx 4rpx 4rpx;
|
|
opacity: 1;
|
|
font-size: 32rpx;
|
|
font-family: PingFang SC, PingFang SC;
|
|
font-weight: 500;
|
|
color: #FFFFFF;
|
|
line-height: 48rpx;
|
|
text-align: center;
|
|
}
|
|
|
|
.hou {
|
|
margin-right: 4rpx;
|
|
}
|
|
|
|
.min {
|
|
margin: 0 4rpx;
|
|
}
|
|
|
|
.sec {
|
|
margin-left: 4rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.goodsList {
|
|
overflow: hidden;
|
|
.goodItem {
|
|
width: 686rpx;
|
|
height: 342rpx;
|
|
background: #FFFFFF;
|
|
border-radius: 8rpx;
|
|
opacity: 1;
|
|
display: flex;
|
|
padding: 48rpx 32rpx 36rpx 0;
|
|
margin: 0 auto;
|
|
margin-top: 22rpx;
|
|
.itemImg {
|
|
width: 258rpx;
|
|
height: 258rpx;
|
|
margin-right: 10rpx;
|
|
.goodsImg {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
.goodsInfo {
|
|
.name {
|
|
height: 44rpx;
|
|
font-size: 32rpx;
|
|
font-weight: 400;
|
|
color: #0E0E0E;
|
|
line-height: 44rpx;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
max-width: 350rpx;
|
|
}
|
|
|
|
.sellNum {
|
|
font-size: 32rpx;
|
|
font-weight: 400;
|
|
color: #A9A9A9;
|
|
line-height: 44rpx;
|
|
margin-left: 10rpx;
|
|
margin-bottom: 8rpx;
|
|
}
|
|
|
|
.info {
|
|
display: flex;
|
|
.price {
|
|
height: 40rpx;
|
|
font-size: 28rpx;
|
|
font-weight: 400;
|
|
color: #979797;
|
|
line-height: 40rpx;
|
|
}
|
|
|
|
.delPrice {
|
|
width: 132rpx;
|
|
height: 48rpx;
|
|
font-size: 20rpx;
|
|
font-weight: 400;
|
|
color: #FB402B;
|
|
line-height: 23rpx;
|
|
background-image: url('https://www.royaum.com.cn/static/seckill/bottom.png');
|
|
background-size: 100% 100%;
|
|
margin: 0 12rpx 0 14rpx;
|
|
.delText {
|
|
width: 132rpx;
|
|
text-align: center;
|
|
margin-top: 8rpx;
|
|
}
|
|
}
|
|
|
|
.update {
|
|
width: 112rpx;
|
|
height: 40rpx;
|
|
font-size: 28rpx;
|
|
font-weight: 400;
|
|
color: #979797;
|
|
line-height: 40rpx;
|
|
}
|
|
}
|
|
|
|
.line {
|
|
width: 302rpx;
|
|
height: 30rpx;
|
|
margin-left: 22rpx;
|
|
|
|
image {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
.btn {
|
|
margin-top: 14rpx;
|
|
width: 390rpx;
|
|
height: 70rpx;
|
|
border-radius: 96rpx;
|
|
opacity: 1;
|
|
text-align: center;
|
|
line-height: 70rpx;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
background-image: url('https://www.royaum.com.cn/static/seckill/btnBg.png');
|
|
background-size: 100% 100%;
|
|
|
|
.killPrice {
|
|
font-size: 24rpx;
|
|
font-weight: 500;
|
|
color: #FF423D;
|
|
margin-left: 26rpx;
|
|
text{
|
|
font-size: 36rpx;
|
|
}
|
|
}
|
|
|
|
.buyNow {
|
|
width: 120rpx;
|
|
font-size: 28rpx;
|
|
font-weight: 500;
|
|
text-align: center;
|
|
color: #FFFFFF;
|
|
margin-right: 14rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
|