yudao
/
mall-uniapp
mirror of https://gitee.com/yudaocode/yudao-mall-uniapp.git
3
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

【秒杀活动列表】

pull/1/MERGE
YunaiV 2023-06-18 21:24:11 +08:00
parent cf23ffbbfe
commit 7f976681e4
3 changed files with 137 additions and 107 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
api/promotion/seckill.js
View File

@ -1,12 +1,26 @@
import request from "@/utils/request.js";
// 获得秒杀时间段列表
export function getSeckillConfigList() {
return request.get("app-api/promotion/seckill-config/list", {}, {
noAuth: true // TODO 芋艿：后续要做调整
});
}
// 获得当前秒杀活动
export function getNowSeckillActivity(id) {
export function getNowSeckillActivity() {
return request.get("app-api/promotion/seckill-activity/get-now", {}, {
noAuth: true // TODO 芋艿：后续要做调整
});
}
// 获得秒杀活动分页
export function getSeckillActivityPage(data) {
return request.get("app-api/promotion/seckill-activity/page", data, {
noAuth: true // TODO 芋艿：后续要做调整
});
}
// 获得秒杀活动明细
export function getSeckillActivity(id) {
return request.get("app-api/promotion/seckill-activity/get-detail", {

220
pages/activity/goods_seckill/index.vue
View File

@ -5,18 +5,21 @@
<view class='iconfont icon-xiangzuo' @tap='goBack' :style="'top:'+ (navH/2) +'rpx'" v-if="returnShow"></view>
<!-- #endif -->
<view class="saleBox"></view>
<!-- 当前秒杀时间段的轮播图 -->
<view class="header" v-if="dataList.length">
<swiper indicator-dots="true" autoplay="true" :circular="circular" interval="3000" duration="1500"
indicator-color="rgba(255,255,255,0.6)" indicator-active-color="#fff">
<block v-for="(items,index) in dataList[active].slide" :key="index">
<block v-for="(items, index) in dataList[active].sliderPicUrls" :key="index">
<swiper-item class="borRadius14">
<image :src="items.sattDir" class="slide-image borRadius14" lazy-load></image>
<image :src="items" class="slide-image borRadius14" lazy-load />
</swiper-item>
</block>
</swiper>
</view>
<view class="seckillList acea-row row-between-wrapper">
<!-- 秒杀时间段 -->
<view class="seckillList acea-row row-between-wrapper">
<view class="priceTag">
<image src="/static/images/priceTag.png"></image>
</view>
@ -24,41 +27,45 @@
<scroll-view class="scroll-view_x" scroll-x scroll-with-animation :scroll-left="scrollLeft"
style="width:auto;overflow:hidden;">
<block v-for="(item,index) in dataList" :key='index'>
<view @tap='settimeList(item,index)' class='item' :class="active == index?'on':''">
<view class='time'>{{item.time.split(',')[0]}}</view>
<view class="state">{{item.statusName}}</view>
<view @tap='settimeList(item,index)' class='item' :class="active === index?'on':''">
<view class='time'>{{ item.startTime }}</view>
<view class="state" v-if="item.status === 1">即将开始</view>
<view class="state" v-if="item.status === 2">进行中</view>
<view class="state" v-if="item.status === 3">已结束</view>
</view>
</block>
</scroll-view>
</view>
</view>
<!-- 秒杀活动 -->
<view class='list pad30' v-if='seckillList.length>0'>
<block v-for="(item,index) in seckillList" :key='index'>
<view class='item acea-row row-between-wrapper' @tap='goDetails(item)'>
<view class='pictrue'>
<image :src='item.image'></image>
<image :src='item.picUrl' />
</view>
<view class='text acea-row row-column-around'>
<view class='name line1'>{{item.title}}</view>
<view class='name line1'>{{item.name}}</view>
<view class='money'><text class="font-color">￥</text>
<text class='num font-color'>{{item.price}}</text>
<text class="y_money">￥{{item.otPrice}}</text>
<text class='num font-color'>{{ fen2yuan(item.seckillPrice ) }}</text>
<text class="y_money">￥{{ fen2yuan(item.marketPrice) }}</text>
</view>
<view class="limit">限量 <text class="limitPrice">{{item.quota}} {{item.unitName}}</text>
<view class="limit">限量 <text class="limitPrice">{{ item.stock}} {{item.unitName}}</text>
</view>
<view class="progress">
<view class='bg-reds' :style="'width:'+item.percent+'%;'"></view>
<view class='piece'>已抢{{item.percent}}%</view>
<view class='bg-reds' :style="'width:' + item.percent +'%;'"></view>
<view class='piece'>已抢{{ item.percent }}%</view>
</view>
</view>
<view class='grab bg-color' v-if="status == 2">马上抢</view>
<view class='grab bg-color' v-else-if="status == 1">未开始</view>
<view class='grab bg-color' v-if="dataList[active].status === 2">马上抢</view>
<view class='grab bg-color' v-else-if="dataList[active].status === 1">未开始</view>
<view class='grab bg-color-hui' v-else>已结束</view>
</view>
</block>
</view>
</view>
<view class='noCommodity' v-if="seckillList.length == 0 && (page != 1 || active== 0)">
<view class='noCommodity' v-if="seckillList.length === 0 && (page !== 1 || active === 0)">
<view class='pictrue'>
<image src='../../../static/images/noShopper.png'></image>
</view>
@ -66,114 +73,125 @@
<home></home>
</div>
</template>
<script>
import {
getSeckillHeaderApi,
getSeckillList
} from '../../../api/activity.js';
import home from '@/components/home/index.vue';
let app = getApp();
import * as SeckillApi from '@/api/promotion/seckill.js';
import * as Util from '@/utils/util.js';
let app = getApp();
export default {
components: {
home
},
data() {
return {
circular: true,
autoplay: true,
interval: 500,
topImage: '',
seckillList: [],
timeList: [],
active: 0,
scrollLeft: 0,
interval: 0,
status: 1,
countDownHour: "00",
countDownMinute: "00",
countDownSecond: "00",
page: 1,
limit: 4,
loading: false,
loadend: false,
pageloading: false,
dataList: [],
returnShow: true,
navH: ''
}
// ========== 秒杀时间段相关变量 ==========
dataList: [], // 时间段数组
active: 0, // 选中的 dataList 下标
circular: true,
autoplay: true,
interval: 500,
scrollLeft: 0,
status: 1,
// ========== 秒杀活动相关变量 ==========
seckillList: [],
loading: false,
loadend: false,
page: 1,
limit: 4,
pageloading: false,
// ========== 导航相关变量 ==========
returnShow: true,
navH: ''
}
},
onLoad() {
var pages = getCurrentPages();
this.returnShow = pages.length===1?false:true;
const pages = getCurrentPages();
this.returnShow = pages.length !== 1;
// #ifdef H5
this.navH = app.globalData.navHeight-18;
// #endif
this.getSeckillConfig();
},
methods: {
goBack: function() {
uni.navigateBack();
},
/**
* 获得时间段
*/
getSeckillConfig: function() {
let that = this;
getSeckillHeaderApi().then(res => {
res.data.map(item => {
item.slide = JSON.parse(item.slide)
})
that.dataList = res.data;
that.getSeckillList();
that.seckillList = [];
that.page = 1;
that.status = that.dataList[that.active].status;
that.getSeckillList();
SeckillApi.getSeckillConfigList().then(res => {
this.dataList = res.data;
this.dataList.forEach(config => {
const startTimeInt = parseInt(config.startTime.split(':')[0]) * 60 + parseInt(config.startTime.split(':')[1]);
const endTimeInt = parseInt(config.endTime.split(':')[0]) * 60 + parseInt(config.endTime.split(':')[1]);
const nowInt = new Date().getHours() * 60 + new Date().getMinutes();
if (nowInt < startTimeInt) {
config.status = 1;
} else if (nowInt > endTimeInt) {
config.status = 3;
} else {
config.status = 2;
}
})
// 加载秒杀活动
this.getSeckillList();
});
},
/**
* 选择一个拼团时间段
*
* @param item 时间段
* @param index 下标
*/
settimeList: function(item, index) {
this.active = index
if (this.interval) {
clearInterval(this.interval);
this.interval = null
}
this.interval = 0;
});
},
// 加载活动列表
this.loadend = false;
this.page = 1;
this.seckillList = [];
this.getSeckillList();
},
/**
* 获得拼团活动列表
*/
getSeckillList: function() {
var that = this;
var data = {
page: that.page,
limit: that.limit
};
if (that.loadend) return;
if (that.pageloading) return;
this.pageloading = true
getSeckillList(that.dataList[that.active].id, data).then(res => {
var seckillList = res.data.list;
var loadend = seckillList.length < that.limit;
that.page++;
that.seckillList = that.seckillList.concat(seckillList),
that.page = that.page;
that.pageloading = false;
that.loadend = loadend;
}).catch(err => {
that.pageloading = false
});
},
settimeList: function(item, index) {
var that = this;
this.active = index
if (that.interval) {
clearInterval(that.interval);
that.interval = null
}
that.interval = 0,
that.countDownHour = "00";
that.countDownMinute = "00";
that.countDownSecond = "00";
that.status = that.dataList[that.active].status;
that.loadend = false;
that.page = 1;
that.seckillList = [];
// wxh.time(e.currentTarget.dataset.stop, that);
that.getSeckillList();
if (this.loadend || this.pageloading) {
return;
}
SeckillApi.getSeckillActivityPage({
id: this.dataList[this.active].id,
pageNo: this.page,
pageSize: this.limit
}).then(res => {
const seckillList = res.data.list;
seckillList.forEach(item => {
item.percent = parseInt(100 * (item.totalStock - item.stock) / item.totalStock);
})
this.page++;
this.seckillList = this.seckillList.concat(seckillList);
this.loadend = seckillList.length < this.limit;
}).finally(() => {
this.pageloading = false;
})
},
goDetails(item) {
uni.navigateTo({
url: '/pages/activity/goods_seckill_details/index?id=' + item.id
})
}
},
goBack: function() {
uni.navigateBack();
},
fen2yuan(price) {
return Util.fen2yuan(price)
}
},
/**
* 页面上拉触底事件的处理函数

8
pages/activity/goods_seckill_details/index.vue
View File

@ -187,9 +187,7 @@
import userEvaluation from '@/components/userEvaluation/index.vue'
// #ifdef MP
import { base64src } from '@/utils/base64src.js'
import {
getQrcode
} from '@/api/api.js';
import { getQrcode } from '@/api/api.js';
// #endif
import parser from "@/components/jyf-parser/jyf-parser";
import home from '@/components/home/index.vue'
@ -201,7 +199,7 @@
import * as ProductSpuApi from '@/api/product/spu.js';
import * as ProductFavoriteApi from '@/api/product/favorite.js';
import * as ProductCommentApi from '@/api/product/comment.js';
import * as SeckillActivityApi from '@/api/promotion/seckill.js';
import * as SeckillApi from '@/api/promotion/seckill.js';
import * as Util from '@/utils/util.js';
import * as ProductUtil from '@/utils/product.js';
export default {
@ -372,7 +370,7 @@
methods: {
// ========== 秒杀活动相关 ==========
getSeckillDetail: function() {
SeckillActivityApi.getSeckillActivity(this.id).then(res => {
SeckillApi.getSeckillActivity(this.id).then(res => {
this.activity = res.data;
// 计算活动状态
const now = new Date().getTime();