Leadfyy.co
/
ec.uniapp-master
11
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

秒杀倒计时

master
Enzo 4 years ago
parent
145b987006
commit
6e2f295929
2 changed files with 164 additions and 39 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 17
      pages/order/confirm/confirm.vue
  2. 186
      pages/shop/seckillList.vue

17
pages/order/confirm/confirm.vue
View File

@ -27,6 +27,23 @@
暂无收货地址,请前往添加
</view>
</view>
<view class="card address" v-else>
<view @click="$url('/pages/address/list/list?is_select=1')">
<text class="lf-font-28 lf-color-primary lf-m-r-10">店铺地址</text>
</view>
<view v-if="address">
<view class="lf-m-t-20">
<text class="lf-font-28 lf-color-222 lf-font-bold">{{ order_detail.order.brand.name }}</text>
<text class="lf-font-28 lf-color-777 lf-m-l-20">{{ order_detail.order.brand.tel }}</text>
</view>
<view class="lf-font-28 lf-color-333 lf-m-t-10">
<text>{{ order_detail.order.brand.floor }}</text>
</view>
</view>
<view v-else class="lf-font-28 lf-color-777">
暂无收货地址,请前往添加
</view>
</view>
<view class="card goods">
<view @click="$url('/pages/shop/shopdetail?id='+ order_detail.order.brand.id)">
<text class="lf-iconfont icon-Group- lf-font-30"></text>

186
pages/shop/seckillList.vue
View File

@ -1,10 +1,10 @@
<template>
<view>
<lf-nav title="秒杀专场" :showIcon="true" bgColor="#fff"></lf-nav>
<scroll-view :style="{height: autoHeight}" :scroll-y="true" :refresher-enabled="true" :refresher-triggered="isRefresher"
@scrolltolower="onScrolltolower" @refresherrefresh="onRefresherrefresh">
<scroll-view :style="{height: autoHeight}" :scroll-y="true" :refresher-enabled="true"
:refresher-triggered="isRefresher" @scrolltolower="onScrolltolower" @refresherrefresh="onRefresherrefresh">
<view class="content">
<view class="card" v-for="(item, index) in list" :key="index"
<view class="card" v-for="(item, index) in list" :key="index"
@click="$url('/pages/shop/goodsdetail?id='+ item.goods.id)">
<view class="goods-img">
<image class="img" :src="item.goods.img"></image>
@ -13,12 +13,20 @@
<view class="goods-info">
<view>
<view class="lf-line-2 title lf-m-b-16">{{ item.goods.name }}</view>
<view class="desc" v-if="item.seckill.end_left_time.length==0">距离开始还剩余 {{item.seckill.start_left_time[0]}}天{{item.seckill.start_left_time[1]}}时{{item.seckill.start_left_time[2]}}分{{item.seckill.start_left_time[3]}}秒</view>
<view class="desc" v-if="item.seckill.start_left_time.length==0">距离结束还剩余 {{item.seckill.end_left_time[0]}}天{{item.seckill.end_left_time[1]}}时{{item.seckill.end_left_time[2]}}分{{item.seckill.end_left_time[3]}}秒</view>
<!-- <view class="desc" v-if="item.seckill.end_left_time.length==0">距离开始还剩余
{{item.seckill.start_left_time[0]}}天{{item.seckill.start_left_time[1]}}时{{item.seckill.start_left_time[2]}}分{{item.seckill.start_left_time[3]}}秒
</view>
<view class="desc" v-if="item.seckill.start_left_time.length==0">距离结束还剩余
{{item.seckill.end_left_time[0]}}天{{item.seckill.end_left_time[1]}}时{{item.seckill.end_left_time[2]}}分{{item.seckill.end_left_time[3]}}秒
</view> -->
<view class="desc" v-if="item.seckill.start_left_time.length==0">距离结束还剩余
{{ item.seckill.ends_at | timeStamp }}
</view>
</view>
<view class="lf-row-between">
<view class="price">
<text>¥{{ item.goods.max_price }}</text>
<text>¥{{ item.seckill_price }}</text>
<text>¥{{ item.goods.market_price }}</text>
</view>
<view class="btn" hover-class="lf-opacity">立即秒杀</view>
@ -27,8 +35,7 @@
</view>
<!-- 空数据的情况 -->
<view class="loading-more">
<text v-if="list.length != 0"
:class="{'loading-more-text': loadingClass}">{{ loadingText }}</text>
<text v-if="list.length != 0" :class="{'loading-more-text': loadingClass}">{{ loadingText }}</text>
<lf-nocontent src="/static/images/empty.png" v-else></lf-nocontent>
</view>
</view>
@ -39,7 +46,7 @@
<script>
export default {
data(){
data() {
return {
list: [],
page: 1,
@ -49,29 +56,117 @@
scrollH: 0,
nav_height: 0,
isRefresher: true,
pageSize: 10
pageSize: 10,
timer: '',
day: '',
hour: '',
min: '',
second: ''
}
},
computed: {
autoHeight(){
autoHeight() {
return `calc(${this.scrollH}px - ${this.nav_height}px - 180rpx)`;
}
},
onLoad(){
onLoad() {
let info = uni.getSystemInfoSync();
this.scrollH = info.screenHeight;
this.getSeckillList();
// setInterval(() => {
// //定时器调用 直接传入时间戳即可
// this.timer = this.timeStamp('2021-09-29 21:27:00')
// }, 1000)
},
filters: {
timeStamp(times) {
// setInterval(() => {
// }, 1000)
//定时器调用 直接传入时间戳即可
let timestamp = Date.parse(new Date());
timestamp = timestamp/1000;
let timestap1 = Date.parse(new Date(times));
let letime = (timestap1/1000) - timestamp;
let time = parseInt(letime);
if (parseInt(letime) > 60) {
let second = parseInt(letime) % 60;
let min = parseInt(letime / 60);
// 直接返回字符串格式：
// time = min + "分" + second + "秒";
// 返回对象格式：
time = {
min: min,
second: second
};
if (min > 60) {
min = parseInt(letime / 60) % 60;
let hour = parseInt(parseInt(letime / 60) / 60);
// 直接返回字符串格式：
// time = hour + "时" + min + "分" + second + "秒";
// 返回对象格式：
time = {
hour: hour,
min: min,
second: second
}
if (hour >= 24) {
hour = parseInt(parseInt(letime / 60) / 60) % 24;
let day = parseInt(parseInt(parseInt(letime / 60) / 60) / 24);
// 直接返回字符串格式：
// time = day + "天" + hour + "时" + min + "分" + second + "秒";
// 返回对象格式：
time = {
day: day,
hour: hour,
min: min,
second: second
}
}
}
}
// 判断是否小于10，小于10就补零
if (time.day < 10) {
time.day = '0' + time.day
} else if (time.day == undefined) {
time.day = '00'
}
if (time.hour < 10) {
time.hour = '0' + time.hour
} else if (time.hour == undefined) {
time.hour = '00'
}
if (time.min < 10) {
time.min = '0' + time.min
} else if (time.min == undefined) {
time.min = '00'
}
if (time.second < 10) {
time.second = '0' + time.second
}
console.log(time)
// this.day = time.day
// this.hour = time.hour
// this.min = time.min
// this.second = time.second
// 输出结果：
return time.day+'天'+time.hour+'时'+time.min+'分'+time.second+'秒';
},
},
methods: {
// 页面触底，加载下一页
onScrolltolower(){
if(this.isPage){
onScrolltolower() {
if (this.isPage) {
this.page = this.page + 1;
this.getSeckillList();
}
},
// 下拉刷新处理
refreshFn(options){
refreshFn(options) {
this.page = 1;
this.isPage = true;
this.loadingClass = true;
@ -80,32 +175,34 @@
this.getSeckillList(options);
},
// scroll-view 下拉刷新
onRefresherrefresh(){
onRefresherrefresh() {
this.isRefresher = true;
this.refreshFn({type: 'scrollRefresh'});
this.refreshFn({
type: 'scrollRefresh'
});
},
getSeckillList(options = {}){
getSeckillList(options = {}) {
this.$http.get({
api: 'api/seckill/all'
}).then(res => {
console.log("----", res);
let isPage = this.page < res.data.meta.pagination.total_pages?true:false;
let isPage = this.page < res.data.meta.pagination.total_pages ? true : false;
this.isPage = isPage;
if(!isPage) {
if (!isPage) {
this.loadingClass = false;
this.loadingText = '没有更多数据啦~';
}
if(options.type == 'pageRefresh') {
if (options.type == 'pageRefresh') {
uni.stopPullDownRefresh();
}else if(options.type == 'scrollRefresh') {
} else if (options.type == 'scrollRefresh') {
this.isRefresher = false;
}
if(this.page == 1) {
if (this.page == 1) {
this.list = res.data.data;
}else {
} else {
this.list.push(...res.data.data);
}
})
}
}
@ -113,17 +210,18 @@
</script>
<style>
page{
page {
background-color: #F8F8F8;
}
</style>
<style lang="scss" scoped="scoped">
.content{
.content {
padding: 30rpx 32rpx;
width: 750rpx;
height: max-content;
box-sizing: border-box;
.card{
.card {
width: 686rpx;
height: 260rpx;
background: #FFFFFF;
@ -131,28 +229,32 @@
box-sizing: border-box;
padding: 30rpx;
display: flex;
&:nth-child(n+2){
&:nth-child(n+2) {
margin-top: 30rpx;
}
.goods-img{
.goods-img {
width: 200rpx;
height: 200rpx;
border-radius: 10rpx;
overflow: hidden;
position: relative;
margin-right: 15rpx;
.img{
.img {
width: 100%;
height: 100%;
background-color: #EEEEEE;
}
.tips{
.tips {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 37rpx;
background-color: rgba(0,0,0,0.5);
background-color: rgba(0, 0, 0, 0.5);
color: #FFFFFF;
font-size: 22rpx;
display: flex;
@ -160,18 +262,21 @@
align-items: center;
}
}
.goods-info{
.goods-info {
width: 410rpx;
height: 200rpx;
display: flex;
flex-direction: column;
justify-content: space-between;
.title{
.title {
font-size: 28rpx;
color: #222222;
font-weight: bold;
}
.desc{
.desc {
width: 281rpx;
height: max-content;
border-radius: 3rpx;
@ -182,18 +287,21 @@
justify-content: center;
align-items: center;
}
.price>text:nth-child(1){
.price>text:nth-child(1) {
font-size: 36rpx;
color: #F63434;
font-weight: bold;
}
.price>text:nth-child(2){
.price>text:nth-child(2) {
font-size: 24rpx;
color: #777777;
margin-left: 20rpx;
text-decoration: line-through;
}
.btn{
.btn {
width: 142rpx;
height: 60rpx;
background: rgba(21, 113, 110, 0.05);

Write Preview
Loading…
Cancel
Save