forked from zhongyuanhaiju/uniapp
秒杀商品列表页面样式完成
This commit is contained in:
parent
3eb2395bec
commit
0ddf87dd7f
|
|
@ -920,4 +920,7 @@ export default {
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
14
pages.json
14
pages.json
|
|
@ -994,9 +994,23 @@
|
||||||
// #endif
|
// #endif
|
||||||
"navigationBarTitleText": "交易市场"
|
"navigationBarTitleText": "交易市场"
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "futures/seckill",
|
||||||
|
"style": {
|
||||||
|
// #ifdef H5
|
||||||
|
"navigationStyle": "custom",
|
||||||
|
// #endif
|
||||||
|
"navigationBarTitleText": "限时秒杀"
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
|
|
||||||
|
|
@ -81,7 +81,8 @@ export default {
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
mixins: [],
|
mixins: [],
|
||||||
onLoad(option) {
|
onLoad(option) {},
|
||||||
|
onReady(){
|
||||||
if (uni.getStorageSync('token')) {
|
if (uni.getStorageSync('token')) {
|
||||||
this.getBaseInfo();
|
this.getBaseInfo();
|
||||||
} else {
|
} else {
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,320 @@
|
||||||
|
<template>
|
||||||
|
<page-meta :page-style="themeColor"></page-meta>
|
||||||
|
<view class="seckill">
|
||||||
|
<!--顶部内容-->
|
||||||
|
<view class="seckill-top" v-if="list.length > 0">
|
||||||
|
<image class="top-background-image" :src="$util.img('public/static/img/futures/seckill-bg.png')" mode="widthFix"></image>
|
||||||
|
<view class="seckill-count-down" v-if="h > 0 || i > 0 || s > 0">
|
||||||
|
距结束
|
||||||
|
<text class="count-down-time">{{ h }}</text>时
|
||||||
|
<text class="count-down-time">{{ i }}</text>分
|
||||||
|
<text class="count-down-time">{{ s }}</text>秒
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<!--商品列表-->
|
||||||
|
<mescroll-uni ref="mescroll" @getData="getList" top="240">
|
||||||
|
<block slot="list">
|
||||||
|
<view class="goods-list" v-if="list.length > 0">
|
||||||
|
<view class="goods-block" v-for="(item,index) in list" :key="index">
|
||||||
|
<view class="left">
|
||||||
|
<image class="goods-image" src="https://miaogou.cdlfjy.com/upload/1/common/images/20230220/20230220113632167686419271176_SMALL.jpg" mode="widthFix"></image>
|
||||||
|
<view class="goods-status">正在销售</view>
|
||||||
|
</view>
|
||||||
|
<view class="right">
|
||||||
|
<view class="goods-title">脑黄金为智慧加分 澳大利亚进口保健品</view>
|
||||||
|
<view class="goods-sell">
|
||||||
|
<view class="goods-sell-item">销售商：木木李子</view>
|
||||||
|
<view class="goods-sell-item">采购数量：8件</view>
|
||||||
|
</view>
|
||||||
|
<view class="goods-bottom">
|
||||||
|
<view class="price">
|
||||||
|
<view class="price-item">单价:￥1200/件</view>
|
||||||
|
<view class="price-item">采购价:<text class="purchase_price">￥1199.99</text></view>
|
||||||
|
</view>
|
||||||
|
<view class="buy-button">
|
||||||
|
<view class="buy-btn">前去采购</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view v-else>
|
||||||
|
<ns-empty :isIndex="false" text="暂无商品信息"></ns-empty>
|
||||||
|
</view>
|
||||||
|
</block>
|
||||||
|
</mescroll-uni>
|
||||||
|
<!--登录弹框-->
|
||||||
|
<ns-login ref="login"></ns-login>
|
||||||
|
<!--加载动画-->
|
||||||
|
<loading-cover ref="loadingCover"></loading-cover>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
list: [],
|
||||||
|
// 倒计时
|
||||||
|
end_time: 1680170346,// 结束时间 时间戳
|
||||||
|
diff_time: 0,
|
||||||
|
h: 0,
|
||||||
|
i: 0,
|
||||||
|
s: 0,
|
||||||
|
interval: '',
|
||||||
|
|
||||||
|
|
||||||
|
};
|
||||||
|
},
|
||||||
|
components: {},
|
||||||
|
mixins: [],
|
||||||
|
onLoad(option) {},
|
||||||
|
onReady(){
|
||||||
|
// 判断是否登录
|
||||||
|
if (!uni.getStorageSync('token')) this.$refs.login.open('/pages_promotion/futures/seckill');
|
||||||
|
// 开启倒计时
|
||||||
|
this.countDown();
|
||||||
|
},
|
||||||
|
onShow() {},
|
||||||
|
methods: {
|
||||||
|
// 获取商品列表 todo:暂时使用的订单列表接口 未对接秒杀商品列表
|
||||||
|
getList(mescroll) {
|
||||||
|
this.$api.sendRequest({
|
||||||
|
url: '/api/order/lists',
|
||||||
|
data: {
|
||||||
|
page: mescroll.num,
|
||||||
|
page_size: mescroll.size,
|
||||||
|
},
|
||||||
|
success: res => {
|
||||||
|
if(parseInt(res.code) === 0){
|
||||||
|
mescroll.endSuccess(Object.keys(res.data.list).length);
|
||||||
|
//设置列表数据
|
||||||
|
if (parseInt(mescroll.num) === 1){
|
||||||
|
this.list = []; //如果是第一页需手动制空列表
|
||||||
|
}
|
||||||
|
|
||||||
|
this.list = this.list.concat(res.data.list); //追加新数据
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
|
||||||
|
},
|
||||||
|
fail: res => {
|
||||||
|
mescroll.endErr();
|
||||||
|
if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
// 倒计时
|
||||||
|
countDown(){
|
||||||
|
this.interval = setInterval(() => {
|
||||||
|
// 获取距离结束时间的毫秒数
|
||||||
|
let nowTime = Math.ceil((new Date()).getTime() / 1000);
|
||||||
|
this.diff_time = this.end_time - nowTime;
|
||||||
|
// 计算时间
|
||||||
|
let result = this.$util.countDown(this.diff_time);
|
||||||
|
this.h = (parseInt(result.d) * 24) + parseInt(result.h);
|
||||||
|
this.i = parseInt(result.i);
|
||||||
|
this.s = parseInt(result.s);
|
||||||
|
}, 1000)
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
},
|
||||||
|
onBackPress(options) {
|
||||||
|
if (options.from === 'navigateBack') return false;
|
||||||
|
this.$util.redirectTo('/pages/member/index');
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.seckill{
|
||||||
|
background: #fafcff;
|
||||||
|
min-height: 100vh;
|
||||||
|
|
||||||
|
.seckill-top{
|
||||||
|
width: 100vw;
|
||||||
|
position: relative;
|
||||||
|
.top-background-image{
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.seckill-count-down{
|
||||||
|
position: absolute;
|
||||||
|
top: 150rpx;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 30rpx;
|
||||||
|
color: #f7dee1;
|
||||||
|
display: inline-flex;
|
||||||
|
flex-direction: row;
|
||||||
|
flex-wrap: nowrap;
|
||||||
|
align-content: center;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
height: 60rpx;
|
||||||
|
.count-down-time{
|
||||||
|
--size--: 45rpx;
|
||||||
|
background: #ffffff;
|
||||||
|
color: #fe7671;
|
||||||
|
max-width: var(--size--);
|
||||||
|
height: var(--size--);
|
||||||
|
border-radius: 10rpx;
|
||||||
|
display: inline-flex;
|
||||||
|
flex-direction: row;
|
||||||
|
flex-wrap: nowrap;
|
||||||
|
align-content: center;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
margin: 0 6rpx;
|
||||||
|
font-size: 26rpx;
|
||||||
|
padding: 0 10rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.goods-list{
|
||||||
|
margin: 0 30rpx;
|
||||||
|
|
||||||
|
.goods-block{
|
||||||
|
--size--: calc((100vw - 100rpx) / 3);
|
||||||
|
border-radius: 20rpx;
|
||||||
|
background: #ffffff;
|
||||||
|
padding: 20rpx;
|
||||||
|
margin-bottom: 30rpx;
|
||||||
|
box-shadow: 0 2rpx 10rpx #eeeff2;
|
||||||
|
width: calc(100% - 40rpx);
|
||||||
|
display: inline-flex;
|
||||||
|
flex-wrap: nowrap;
|
||||||
|
flex-direction: row;
|
||||||
|
align-content: center;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
height: var(--size--);
|
||||||
|
|
||||||
|
.left{
|
||||||
|
margin-right: 20rpx;
|
||||||
|
height: var(--size--);
|
||||||
|
width: var(--size--);
|
||||||
|
position: relative;
|
||||||
|
border-radius: 20rpx;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
.goods-image{
|
||||||
|
max-width: 100% !important;
|
||||||
|
max-height: 100% !important;
|
||||||
|
}
|
||||||
|
.goods-status{
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
width: 100%;
|
||||||
|
background: #fc4740;
|
||||||
|
color: #febebc;
|
||||||
|
font-size: 24rpx;
|
||||||
|
text-align: center;
|
||||||
|
height: 30rpx;
|
||||||
|
line-height: 30rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.right{
|
||||||
|
width: calc((var(--size--) * 2) - 20rpx);
|
||||||
|
display: inline-flex;
|
||||||
|
flex-direction: column;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
align-content: flex-start;
|
||||||
|
justify-content: flex-start;
|
||||||
|
align-items: flex-start;
|
||||||
|
height: 100%;
|
||||||
|
.goods-title{
|
||||||
|
width: 100%;
|
||||||
|
height: 50rpx;
|
||||||
|
line-height: 50rpx;
|
||||||
|
font-size: 30rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
.goods-sell{
|
||||||
|
width: 100%;
|
||||||
|
display: inline-flex;
|
||||||
|
height: 50rpx;
|
||||||
|
line-height: 50rpx;
|
||||||
|
color: #b5b7c0;
|
||||||
|
.goods-sell-item{
|
||||||
|
width: 50%;
|
||||||
|
color: #b5b7c0;
|
||||||
|
font-size: 24rpx;
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
line-height: 50rpx;
|
||||||
|
}
|
||||||
|
.goods-sell-item:nth-of-type(1){
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
.goods-sell-item:nth-of-type(2){
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.goods-bottom{
|
||||||
|
width: 100%;
|
||||||
|
height: calc(var(--size--) - 100rpx);
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: flex-end;
|
||||||
|
flex-direction: row;
|
||||||
|
flex-wrap: nowrap;
|
||||||
|
justify-content: space-between;
|
||||||
|
|
||||||
|
.price{
|
||||||
|
height: 100%;
|
||||||
|
display: inline-flex;
|
||||||
|
flex-direction: column;
|
||||||
|
flex-wrap: nowrap;
|
||||||
|
justify-content: flex-end;
|
||||||
|
align-items: flex-start;
|
||||||
|
width: calc(100% - 140rpx);
|
||||||
|
|
||||||
|
.price-item{
|
||||||
|
width: 100%;
|
||||||
|
color: #b5b7c0;
|
||||||
|
font-size: 24rpx;
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
height: 40rpx;
|
||||||
|
line-height: 40rpx;
|
||||||
|
.purchase_price{
|
||||||
|
color: #fe7e79;
|
||||||
|
font-size: 30rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.buy-button{
|
||||||
|
height: 100%;
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: flex-end;
|
||||||
|
justify-content: flex-end;
|
||||||
|
.buy-btn{
|
||||||
|
width: 140rpx;
|
||||||
|
height: 70rpx;
|
||||||
|
line-height: 70rpx;
|
||||||
|
color: #fef5f5;
|
||||||
|
background: #ff2724;
|
||||||
|
font-size: 26rpx;
|
||||||
|
border-radius: 100rpx;
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: 8rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Loading…
Reference in New Issue