把onload后改成mounted
<template>
<view style="position: absolute;">
<view class="goodsbox" v-for="(i,index) in goodlist" :key='index' @click="goodsdetails(i.id)">
<image :src="i.pic" mode="">
</image>
<!-- <text style="position: relative;top: -70rpx;left: -80rpx;color: #FFFFFF;background-color:rgba(0,0,0,0.5);padding: 10rpx;border-radius: 20rpx;font-size: 20rpx;"><uni-icons style="color: #FFFFFF;font-size: 40rpx;" type="location-filled"></uni-icons>222m
</text> -->
<text style="position: relative;top: -70rpx;left: 450rpx;color: #FFFFFF;background-color:#ff0000;padding: 10rpx;border-radius: 20rpx;font-size: 20rpx;">{{countdown}}</text>
<text style="position: relative;top: -70rpx;left: 460rpx;color: #FFFFFF;background-color:#ff0000;padding: 10rpx;border-radius: 20rpx;font-size: 20rpx;">即将下架</text>
<!-- <text style="position: relative;top: -70rpx;left: 600rpx;color: #FFFFFF;background-color:#F0AD4E;padding: 10rpx;border-radius: 20rpx;font-size: 20rpx;">抢购中</text> -->
<view style="padding: 20rpx;">
<text class="title">{{i.title}}</text>
</view>
<view style="padding: 0px 20rpx;">
<text class="content">{{i.content}}</text>
</view>
<view class="nums">
<view>
<text>￥{{i.price}}</text>
<text>门店价:{{i.oldprice}}</text>
<text>销量:{{i.xl}}</text>
</view>
<view class="fan">
<uni-icons type="redo" size="20" color="#ffffff"></uni-icons> 返￥{{i.fl}}
</view>
</view>
</view>
</view>
</template>
<script>
// import bwCountdown from './bw-countdown/bw-countdown.vue'
export default {
components: {
// bwCountdown
},
data() {
return {
h: 23, //时
m: 59, //分
s: 59, //秒
countdown: '24:00:00', //倒计时
timer: null, //重复执行
goodlist: [{
id: 1,
pic: require('../static/logo.png'),
title: '【十九世纪函数的|返回酒店客房的|肯德基客户】',
content: '【十九世纪函数的|返回酒店客房的|肯德基客户】锁定季skldhkldsjflkfsdjlds后赛的计划分解的客户接受度很简单',
price: 98,
oldprice: 188,
xl: 222,
fl: 9
},
{
id: 2,
pic: require('../static/logo.png'),
title: '【十九世纪函数的|返回酒店客房的|肯德基客户】',
content: '【十九世纪函数的|返回酒店客房的|肯德基客户】锁定季skldhkldsjflkfsdjlds后赛的计划分解的客户接受度很简单',
price: 98,
oldprice: 188,
xl: 222,
fl: 9
},
{
id: 3,
pic: require('../static/logo.png'),
title: '【十九世纪函数的|返回酒店客房的|肯德基客户】',
content: '【十九世纪函数的|返回酒店客房的|肯德基客户】锁定季skldhkldsjflkfsdjlds后赛的计划分解的客户接受度很简单',
price: 98,
oldprice: 188,
xl: 222,
fl: 19
}
]
};
},
mounted() {
console.log('hello')
this.timer = setInterval(() => {
this.timeCount()
}, 1000)
},
methods: {
goodsdetails(id) {
this.$emit('goodsDetails', id)
},
timeCount() {
--this.s;
if (this.s < 0) {
--this.m;
this.s = 59;
}
if (this.m < 0) {
--this.h;
this.m = 59
}
if (this.h < 0) {
this.s = 0;
this.m = 0;
}
this.countdown = this.h + ":" + this.m + ":" + this.s
}
},
onReachBottom() {
this.goodlist = [...this.goodlist, ...[{
id: 3,
pic: require('../static/logo.png'),
title: '【十九世纪函数的|返回酒店客房的|肯德基客户】',
content: '【十九世纪函数的|返回酒店客房的|肯德基客户】锁定季skldhkldsjflkfsdjlds后赛的计划分解的客户接受度很简单',
price: 98,
oldprice: 188,
xl: 222,
fl: 19
}]]
}
}
</script>
<style lang="scss">
.goodsbox {
margin: 20rpx auto;
width: 95%;
// height: 200rpx;
border-radius: 30rpx;
background-color: #FFFFFF;
height: auto;
padding: 0rpx 0rpx 5rpx 0rpx;
image {
width: 100%;
height: 300rpx;
border-radius: 30rpx 30rpx 0rpx 0rpx;
}
.title {
font-size: 38rpx;
font-weight: bold;
}
.content {
font-size: 30rpx;
line-height: 50rpx;
margin: 0 auto;
color: $uni-color-subtitle;
// width: 95%;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2; // 控制多行的行数
-webkit-box-orient: vertical;
}
.nums {
display: flex;
align-items: center;
justify-content: space-between;
width: 95%;
margin: 20rpx auto;
view {
display: flex;
align-items: center;
text:nth-child(1) {
color: #FE9528;
font-size: 40rpx;
font-weight: bold;
}
text:nth-child(2) {
text-decoration: line-through;
color: $uni-color-subtitle;
margin: 0rpx 10rpx;
font-size: 12rpx;
}
text:nth-child(3) {
color: $uni-text-color-grey;
font-size: 30rpx;
}
}
.fan {
width: auto;
height: 60rpx;
background-color: #FF8816;
color: #FFFFFF;
border-radius: 20rpx;
padding: 5rpx 10rpx;
font-size: 35rpx;
}
}
}
</style>
