forked from zhongyuanhaiju/uniapp
496 lines
12 KiB
Vue
496 lines
12 KiB
Vue
<template>
|
||
<page-meta :page-style="themeColor"></page-meta>
|
||
<view class="seckill">
|
||
<!--顶部内容-->
|
||
<view class="seckill-top">
|
||
<image class="top-background-image" :src="$util.img('public/static/img/futures/seckill-bg.png')" mode="widthFix"></image>
|
||
<view class="seckill-gz" @click="openPopup()">规则</view>
|
||
<view class="tip">
|
||
<view class="title">商品全部实物销售</view>
|
||
<view class="content">本区域销售的商品均为商家已经生产并承诺全额补货</view>
|
||
</view>
|
||
<view class="seckill-count-down" v-if="h > 0 || i > 0 || s > 0">
|
||
<text v-if="parseInt(activity_status) === 1">距开始</text>
|
||
<text v-else>距结束</text>
|
||
<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="350">
|
||
<block slot="list">
|
||
<!--活动正常进行中 商品列表-->
|
||
<view class="goods-list" v-if="list.length > 0 && parseInt(activity_status) === 3">
|
||
<view class="goods-block" v-for="(item, index) in list" :key="index">
|
||
<view class="left">
|
||
<image class="goods-image" :src="$util.img(item.goods_image)" mode="widthFix"></image>
|
||
<view class="goods-status" v-if="parseInt(item.status) === 2">正在销售</view>
|
||
<view class="goods-status" v-else>{{ status_text[item.status] }}</view>
|
||
</view>
|
||
<view class="right">
|
||
<view class="goods-title">{{ item.goods_name }}</view>
|
||
<view class="goods-sell">
|
||
<view class="goods-sell-item">销售商：{{ item.seller_nickname }}</view>
|
||
<view class="goods-sell-item">采购数量：{{ item.total }}件</view>
|
||
</view>
|
||
<view class="goods-bottom">
|
||
<view class="price">
|
||
<view class="price-item">单价:￥{{ item.market_price }}/{{ item.unit || '件' }}</view>
|
||
<view class="price-item">
|
||
采购价:
|
||
<text class="purchase_price">￥{{ item.price }}</text>
|
||
</view>
|
||
</view>
|
||
<view class="buy-button">
|
||
<view class="buy-btn" @click="ToBuy(item)">前去采购</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!--秒杀活动未正常进行时的内容-->
|
||
<view class="not-list" v-else>
|
||
<image
|
||
class="not-list-image"
|
||
v-if="parseInt(activity_status) === 1"
|
||
:src="$util.img('public/static/img/futures/futures_not_started.png')"
|
||
mode="widthFix"></image>
|
||
<image
|
||
class="not-list-image"
|
||
v-if="parseInt(activity_status) === 2"
|
||
:src="$util.img('public/static/img/futures/futures_not_goods.png')"
|
||
mode="widthFix"
|
||
></image>
|
||
<view class="back-buttons"><view class="back-buttons-btn" @click="$util.goBack()">返回</view></view>
|
||
</view>
|
||
</block>
|
||
</mescroll-uni>
|
||
<!--登录弹框-->
|
||
<ns-login ref="login"></ns-login>
|
||
<!--加载动画-->
|
||
<loading-cover ref="loadingCover"></loading-cover>
|
||
</view>
|
||
<view @touchmove.prevent>
|
||
<uni-popup ref="registerPopup" type="center" :maskClick="false">
|
||
<view class="conten-box">
|
||
<view class="close"><text class="iconfont icon-close" @click="toClose"></text></view>
|
||
<view class="title">{{ regisiterAgreement.title }}</view>
|
||
<view class="con">
|
||
<scroll-view scroll-y="true" class="con"><rich-text :nodes="regisiterAgreement.content"></rich-text></scroll-view>
|
||
</view>
|
||
</view>
|
||
</uni-popup>
|
||
</view>
|
||
</template>
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
list: [],
|
||
activity_status: 1, // 活动状态：1=活动未开始，2=活动已开始无商品，3=活动正常进行中
|
||
status_text: {
|
||
1: '库存',
|
||
2: '正在销售',
|
||
3: '已售出',
|
||
4: '提货中',
|
||
5: '提货完成',
|
||
6: '待支付',
|
||
7: '捡漏'
|
||
},
|
||
// 倒计时
|
||
setInterval_time: 0, // 倒计时计算时间
|
||
diff_time: 0,
|
||
h: '00',
|
||
i: '00',
|
||
s: '00',
|
||
interval: '',
|
||
regisiterAgreement: {
|
||
// 注册协议
|
||
title: '',
|
||
content: ''
|
||
}
|
||
};
|
||
},
|
||
components: {},
|
||
mixins: [],
|
||
onLoad(option) {
|
||
this.getRegisiterAggrement();
|
||
},
|
||
onReady() {
|
||
// 判断是否登录
|
||
if (!uni.getStorageSync('token')) this.$refs.login.open('/pages_rush/futures/seckill');
|
||
},
|
||
onShow() {},
|
||
methods: {
|
||
ToBuy(data){
|
||
uni.setStorage({
|
||
key: 'futuresOrderCreateData',
|
||
data: {
|
||
futures_id: data.id,
|
||
order_remarks: ''
|
||
},
|
||
success: () => {
|
||
this.$util.redirectTo('/pages_rush/futures/details',{ id: data.id });
|
||
}
|
||
});
|
||
},
|
||
/**
|
||
* 获取注册协议
|
||
*/
|
||
getRegisiterAggrement() {
|
||
this.$api.sendRequest({
|
||
url: '/futures/api/futures/aggrement',
|
||
success: res => {
|
||
if (res.code >= 0) {
|
||
this.regisiterAgreement = res.data;
|
||
}
|
||
}
|
||
});
|
||
},
|
||
// 获取商品列表
|
||
getList(mescroll) {
|
||
this.$api.sendRequest({
|
||
url: '/futures/api/futures/list',
|
||
data: {
|
||
page: mescroll.num,
|
||
page_size: mescroll.size,
|
||
status: 'miaosha'
|
||
},
|
||
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); //追加新数据
|
||
this.setInterval_time = parseInt(res.data.end_time);
|
||
// 判断状态
|
||
this.activity_status = 3; // 正常进行中
|
||
if (Object.keys(this.list).length <= 0) this.activity_status = 2; // 已开始无商品
|
||
} else if (parseInt(res.code) === -801) {
|
||
// 未到秒杀时间 res.code：-801=未到秒杀时间
|
||
mescroll.endSuccess(0);
|
||
this.activity_status = 1; // 活动未开始
|
||
this.setInterval_time = res.data.miaosha_start_time;
|
||
}
|
||
// 开启倒计时
|
||
this.countDown();
|
||
this.$refs.loadingCover.hide();
|
||
// setTimeout(() => {
|
||
// if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
|
||
// }, 1000);
|
||
},
|
||
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.setInterval_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);
|
||
},
|
||
/**
|
||
* 展示注册协议
|
||
*/
|
||
openPopup() {
|
||
this.$refs.registerPopup.open();
|
||
},
|
||
/**
|
||
* 点击关闭协议
|
||
*/
|
||
toClose() {
|
||
this.$refs.registerPopup.close();
|
||
}
|
||
},
|
||
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-gz{
|
||
color: rgb(255, 255, 255);
|
||
font-size: 20px;
|
||
top: 2px;
|
||
margin-left: 10px;
|
||
position: absolute;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: flex-end;
|
||
width: 100%;
|
||
-webkit-transform: scale(0.85);
|
||
transform: scale(0.85);
|
||
}
|
||
.seckill-count-down {
|
||
position: absolute;
|
||
top: 260rpx;
|
||
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;
|
||
min-width: calc(var(--size--) - 20rpx);
|
||
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;
|
||
}
|
||
}
|
||
.tip {
|
||
position: absolute;
|
||
top: 130rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
width: 100%;
|
||
transform: scale(0.85);
|
||
z-index: 500;
|
||
.title {
|
||
width: 520rpx;
|
||
font-weight: 900;
|
||
font-size: 60rpx;
|
||
color: #f4de38;
|
||
border-bottom: solid 2rpx;
|
||
border-top: solid 2rpx;
|
||
line-height: 82rpx;
|
||
text-align: center;
|
||
}
|
||
.content {
|
||
font-size: 32rpx;
|
||
color: #fff;
|
||
}
|
||
}
|
||
}
|
||
.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;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.not-list {
|
||
width: 100%;
|
||
padding-top: 200rpx;
|
||
display: inline-flex;
|
||
flex-direction: column;
|
||
flex-wrap: nowrap;
|
||
justify-content: center;
|
||
align-items: center;
|
||
.not-list-image {
|
||
max-width: 60vw !important;
|
||
max-height: 60vw !important;
|
||
}
|
||
.back-buttons {
|
||
width: 100%;
|
||
display: inline-flex;
|
||
flex-direction: row;
|
||
flex-wrap: nowrap;
|
||
justify-content: center;
|
||
align-items: center;
|
||
margin-top: 50rpx;
|
||
.back-buttons-btn {
|
||
background: linear-gradient(90deg, #f5877b, #e93e3d);
|
||
height: 70rpx;
|
||
line-height: 70rpx;
|
||
font-size: 34rpx;
|
||
color: #fffefe;
|
||
width: 300rpx;
|
||
text-align: center;
|
||
border-radius: 100rpx;
|
||
letter-spacing: 6rpx;
|
||
text-indent: 6px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.conten-box {
|
||
padding: 0 30rpx 30rpx;
|
||
.title {
|
||
text-align: center;
|
||
margin-top: 50rpx;
|
||
margin-bottom: 10rpx;
|
||
}
|
||
.close {
|
||
position: absolute;
|
||
right: 30rpx;
|
||
top: 10rpx;
|
||
}
|
||
.con {
|
||
height: 500rpx;
|
||
}
|
||
}
|
||
</style>
|