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.
yanzong_qianduan/pages/activity/seckill.vue

539 lines
11 KiB

11 months ago
<template>
<view class="seckill">
<view>
<u-navbar title="限时秒杀" back-icon-color="#fff" :border-bottom="false" title-color="#fff"
:background="background"></u-navbar>
11 months ago
</view>
<view class="title" :style="{backgroundImage:'url('+backgroundImg+')'}" style="background-size: 100% 100%;">
11 months ago
<image src="/static/seckill/topHeader.png" mode="" class="bgImg"></image>
<view 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">
11 months ago
<view class="num">
{{item.active_time}}
11 months ago
</view>
<view class="desc">
10 months ago
{{item.status_text}}
11 months ago
</view>
</view>
11 months ago
</view>
</view>
<view class="main">
<view class="over" v-if="tabbar.length">
11 months ago
<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" />
11 months ago
</view>
</view>
<view class="goodsList">
<view class="goodItem" v-for="(item,index) in goodsList" :key="index"
10 months ago
@click="handleTargetGoods(item.goods_id)">
11 months ago
<view class="itemImg">
<image :src="item.goods_image" mode="" class="goodsImg"></image>
11 months ago
</view>
<view class="goodsInfo">
<view class="name">
{{item.goods_name}}
11 months ago
</view>
<view class="sellNum">
爆卖{{item.sales_actual}}
11 months ago
</view>
<view class="info">
<view class="price">
¥{{item.original_price}}
11 months ago
</view>
<view class="delPrice">
<view class="delText">
直降{{item.original_price-item.seckill_price_min}}
11 months ago
</view>
11 months ago
</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">
11 months ago
<view class="killPrice">
10 months ago
秒杀价<text>{{item.original_price}}</text>
11 months ago
</view>
<view class="buyNow">
10 months ago
马上抢
11 months ago
</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'
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: [],
11 months ago
background: {
10 months ago
background: 'url(https://www.royaum.com.cn/static/rank/rank1.png) center top no-repeat',
11 months ago
backgroundSize: '100% auto',
},
backgroundImg:''
11 months ago
}
},
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
this.getCarouselList()
// 加载页面数据
this.onRefreshPage()
// 设置微信公众号链接分享卡片内容
this.setWxofficialShareData()
},
methods: {
// 获取背景图
getCarouselList() {
const app = this;
Api.getImage({
type: 2
})
.then(result => {
app.backgroundImg = result.data.imgurl
})
.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
10 months ago
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.data.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 => {
// 合并新数据
10 months ago
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) {
11 months ago
uni.navigateTo({
url: '/pages/goods/detail?goodsId=' + sharpGoodsId
11 months ago
})
},
// 设置微信公众号链接分享卡片内容
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}`
}
},
11 months ago
}
</script>
<style lang="scss" scoped>
.seckill {
11 months ago
width: 100%;
height: 100%;
}
.title {
11 months ago
width: 100%;
10 months ago
height: 220rpx;
11 months ago
position: relative;
.bgImg {
11 months ago
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: -1;
}
.limitTitle {
11 months ago
display: flex;
justify-content: center;
z-index: 20;
.img {
11 months ago
margin-top: 20rpx;
width: 302rpx;
height: 82rpx;
z-index: 20;
}
}
.time {
11 months ago
display: flex;
align-items: center;
width: 100%;
justify-content: space-around;
z-index: 30;
.timeItem {
.num {
10 months ago
width: 150rpx;
11 months ago
font-size: 28rpx;
font-weight: 500;
color: #FFFFFF;
line-height: 33rpx;
text-shadow: 0px 0px 11px #FB3A22;
text-align: center;
10 months ago
margin-top: 10rpx;
11 months ago
}
.desc {
width: 150rpx;
11 months ago
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;
10 months ago
margin-top: 10rpx;
11 months ago
text-align: center;
}
}
}
}
.main {
11 months ago
width: 100%;
height: 100%;
background: #F4F6FA;
border-radius: 0rpx 0rpx 0rpx 0rpx;
opacity: 1;
padding-top: 34rpx;
.over {
11 months ago
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 {
11 months ago
line-height: 40rpx;
margin-right: 18rpx;
}
.com {
11 months ago
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 {
11 months ago
margin-right: 4rpx;
}
.min {
11 months ago
margin: 0 4rpx;
}
.sec {
11 months ago
margin-left: 4rpx;
}
}
}
.goodsList {
10 months ago
overflow: hidden;
.goodItem {
11 months ago
width: 686rpx;
height: 342rpx;
background: #FFFFFF;
10 months ago
border-radius: 8rpx;
11 months ago
opacity: 1;
display: flex;
10 months ago
padding: 48rpx 32rpx 36rpx 0;
margin: 0 auto;
margin-top: 22rpx;
.itemImg {
11 months ago
width: 258rpx;
height: 258rpx;
10 months ago
margin-right: 10rpx;
.goodsImg {
11 months ago
width: 100%;
height: 100%;
}
}
.goodsInfo {
.name {
11 months ago
height: 44rpx;
font-size: 32rpx;
font-weight: 400;
color: #0E0E0E;
line-height: 44rpx;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 350rpx;
11 months ago
}
.sellNum {
11 months ago
font-size: 32rpx;
font-weight: 400;
color: #A9A9A9;
line-height: 44rpx;
10 months ago
margin-left: 10rpx;
11 months ago
margin-bottom: 8rpx;
}
.info {
11 months ago
display: flex;
.price {
11 months ago
height: 40rpx;
font-size: 28rpx;
font-weight: 400;
color: #979797;
line-height: 40rpx;
}
.delPrice {
11 months ago
width: 132rpx;
height: 48rpx;
font-size: 20rpx;
font-weight: 400;
color: #FB402B;
line-height: 23rpx;
10 months ago
background-image: url('https://www.royaum.com.cn/static/seckill/bottom.png');
11 months ago
background-size: 100% 100%;
margin: 0 12rpx 0 14rpx;
.delText {
11 months ago
width: 132rpx;
text-align: center;
10 months ago
margin-top: 8rpx;
11 months ago
}
}
.update {
11 months ago
width: 112rpx;
height: 40rpx;
font-size: 28rpx;
font-weight: 400;
color: #979797;
line-height: 40rpx;
}
}
.line {
11 months ago
width: 302rpx;
height: 30rpx;
margin-left: 22rpx;
image {
11 months ago
width: 100%;
height: 100%;
}
}
.btn {
11 months ago
margin-top: 14rpx;
width: 390rpx;
height: 70rpx;
10 months ago
border-radius: 96rpx;
11 months ago
opacity: 1;
text-align: center;
line-height: 70rpx;
display: flex;
justify-content: space-between;
10 months ago
background-image: url('https://www.royaum.com.cn/static/seckill/btnBg.png');
11 months ago
background-size: 100% 100%;
.killPrice {
11 months ago
font-size: 24rpx;
font-weight: 500;
color: #FF423D;
margin-left: 26rpx;
10 months ago
text{
font-size: 36rpx;
}
11 months ago
}
.buyNow {
10 months ago
width: 120rpx;
11 months ago
font-size: 28rpx;
font-weight: 500;
10 months ago
text-align: center;
11 months ago
color: #FFFFFF;
10 months ago
margin-right: 14rpx;
11 months ago
}
}
}
}
}
</style>