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"; 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", {}, { return request.get("app-api/promotion/seckill-activity/get-now", {}, {
noAuth: true // TODO 芋艿：后续要做调整 noAuth: true // TODO 芋艿：后续要做调整
}); });
} }
// 获得秒杀活动分页
export function getSeckillActivityPage(data) {
return request.get("app-api/promotion/seckill-activity/page", data, {
noAuth: true // TODO 芋艿：后续要做调整
});
}
// 获得秒杀活动明细 // 获得秒杀活动明细
export function getSeckillActivity(id) { export function getSeckillActivity(id) {
return request.get("app-api/promotion/seckill-activity/get-detail", { 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> <view class='iconfont icon-xiangzuo' @tap='goBack' :style="'top:'+ (navH/2) +'rpx'" v-if="returnShow"></view>
<!-- #endif --> <!-- #endif -->
<view class="saleBox"></view> <view class="saleBox"></view>
<!-- 当前秒杀时间段的轮播图 -->
<view class="header" v-if="dataList.length"> <view class="header" v-if="dataList.length">
<swiper indicator-dots="true" autoplay="true" :circular="circular" interval="3000" duration="1500" <swiper indicator-dots="true" autoplay="true" :circular="circular" interval="3000" duration="1500"
indicator-color="rgba(255,255,255,0.6)" indicator-active-color="#fff"> 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"> <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> </swiper-item>
</block> </block>
</swiper> </swiper>
</view> </view>
<view class="seckillList acea-row row-between-wrapper">
<!-- 秒杀时间段 -->
<view class="seckillList acea-row row-between-wrapper">
<view class="priceTag"> <view class="priceTag">
<image src="/static/images/priceTag.png"></image> <image src="/static/images/priceTag.png"></image>
</view> </view>
@ -24,41 +27,45 @@
<scroll-view class="scroll-view_x" scroll-x scroll-with-animation :scroll-left="scrollLeft" <scroll-view class="scroll-view_x" scroll-x scroll-with-animation :scroll-left="scrollLeft"
style="width:auto;overflow:hidden;"> style="width:auto;overflow:hidden;">
<block v-for="(item,index) in dataList" :key='index'> <block v-for="(item,index) in dataList" :key='index'>
<view @tap='settimeList(item,index)' class='item' :class="active == index?'on':''"> <view @tap='settimeList(item,index)' class='item' :class="active === index?'on':''">
<view class='time'>{{item.time.split(',')[0]}}</view> <view class='time'>{{ item.startTime }}</view>
<view class="state">{{item.statusName}}</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> </view>
</block> </block>
</scroll-view> </scroll-view>
</view> </view>
</view> </view>
<!-- 秒杀活动 -->
<view class='list pad30' v-if='seckillList.length>0'> <view class='list pad30' v-if='seckillList.length>0'>
<block v-for="(item,index) in seckillList" :key='index'> <block v-for="(item,index) in seckillList" :key='index'>
<view class='item acea-row row-between-wrapper' @tap='goDetails(item)'> <view class='item acea-row row-between-wrapper' @tap='goDetails(item)'>
<view class='pictrue'> <view class='pictrue'>
<image :src='item.image'></image> <image :src='item.picUrl' />
</view> </view>
<view class='text acea-row row-column-around'> <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> <view class='money'><text class="font-color">￥</text>
<text class='num font-color'>{{item.price}}</text> <text class='num font-color'>{{ fen2yuan(item.seckillPrice ) }}</text>
<text class="y_money">￥{{item.otPrice}}</text> <text class="y_money">￥{{ fen2yuan(item.marketPrice) }}</text>
</view> </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>
<view class="progress"> <view class="progress">
<view class='bg-reds' :style="'width:'+item.percent+'%;'"></view> <view class='bg-reds' :style="'width:' + item.percent +'%;'"></view>
<view class='piece'>已抢{{item.percent}}%</view> <view class='piece'>已抢{{ item.percent }}%</view>
</view> </view>
</view> </view>
<view class='grab bg-color' v-if="status == 2">马上抢</view> <view class='grab bg-color' v-if="dataList[active].status === 2">马上抢</view>
<view class='grab bg-color' v-else-if="status == 1">未开始</view> <view class='grab bg-color' v-else-if="dataList[active].status === 1">未开始</view>
<view class='grab bg-color-hui' v-else>已结束</view> <view class='grab bg-color-hui' v-else>已结束</view>
</view> </view>
</block> </block>
</view> </view>
</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'> <view class='pictrue'>
<image src='../../../static/images/noShopper.png'></image> <image src='../../../static/images/noShopper.png'></image>
</view> </view>
@ -66,114 +73,125 @@
<home></home> <home></home>
</div> </div>
</template> </template>
<script> <script>
import {
getSeckillHeaderApi,
getSeckillList
} from '../../../api/activity.js';
import home from '@/components/home/index.vue'; 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 { export default {
components: { components: {
home home
}, },
data() { data() {
return { return {
circular: true, // ========== 秒杀时间段相关变量 ==========
autoplay: true, dataList: [], // 时间段数组
interval: 500, active: 0, // 选中的 dataList 下标
topImage: '', circular: true,
seckillList: [], autoplay: true,
timeList: [], interval: 500,
active: 0, scrollLeft: 0,
scrollLeft: 0, status: 1,
interval: 0,
status: 1, // ========== 秒杀活动相关变量 ==========
countDownHour: "00", seckillList: [],
countDownMinute: "00", loading: false,
countDownSecond: "00", loadend: false,
page: 1, page: 1,
limit: 4, limit: 4,
loading: false, pageloading: false,
loadend: false,
pageloading: false, // ========== 导航相关变量 ==========
dataList: [], returnShow: true,
returnShow: true, navH: ''
navH: '' }
}
}, },
onLoad() { onLoad() {
var pages = getCurrentPages(); const pages = getCurrentPages();
this.returnShow = pages.length===1?false:true; this.returnShow = pages.length !== 1;
// #ifdef H5 // #ifdef H5
this.navH = app.globalData.navHeight-18; this.navH = app.globalData.navHeight-18;
// #endif // #endif
this.getSeckillConfig(); this.getSeckillConfig();
}, },
methods: { methods: {
goBack: function() { /**
uni.navigateBack(); * 获得时间段
}, */
getSeckillConfig: function() { getSeckillConfig: function() {
let that = this; SeckillApi.getSeckillConfigList().then(res => {
getSeckillHeaderApi().then(res => { this.dataList = res.data;
res.data.map(item => { this.dataList.forEach(config => {
item.slide = JSON.parse(item.slide) 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]);
that.dataList = res.data; const nowInt = new Date().getHours() * 60 + new Date().getMinutes();
that.getSeckillList(); if (nowInt < startTimeInt) {
that.seckillList = []; config.status = 1;
that.page = 1; } else if (nowInt > endTimeInt) {
that.status = that.dataList[that.active].status; config.status = 3;
that.getSeckillList(); } 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() { getSeckillList: function() {
var that = this; if (this.loadend || this.pageloading) {
var data = { return;
page: that.page, }
limit: that.limit SeckillApi.getSeckillActivityPage({
}; id: this.dataList[this.active].id,
if (that.loadend) return; pageNo: this.page,
if (that.pageloading) return; pageSize: this.limit
this.pageloading = true }).then(res => {
getSeckillList(that.dataList[that.active].id, data).then(res => { const seckillList = res.data.list;
var seckillList = res.data.list; seckillList.forEach(item => {
var loadend = seckillList.length < that.limit; item.percent = parseInt(100 * (item.totalStock - item.stock) / item.totalStock);
that.page++; })
that.seckillList = that.seckillList.concat(seckillList), this.page++;
that.page = that.page; this.seckillList = this.seckillList.concat(seckillList);
that.pageloading = false; this.loadend = seckillList.length < this.limit;
that.loadend = loadend; }).finally(() => {
}).catch(err => { this.pageloading = false;
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();
}, },
goDetails(item) { goDetails(item) {
uni.navigateTo({ uni.navigateTo({
url: '/pages/activity/goods_seckill_details/index?id=' + item.id 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' import userEvaluation from '@/components/userEvaluation/index.vue'
// #ifdef MP // #ifdef MP
import { base64src } from '@/utils/base64src.js' import { base64src } from '@/utils/base64src.js'
import { import { getQrcode } from '@/api/api.js';
getQrcode
} from '@/api/api.js';
// #endif // #endif
import parser from "@/components/jyf-parser/jyf-parser"; import parser from "@/components/jyf-parser/jyf-parser";
import home from '@/components/home/index.vue' import home from '@/components/home/index.vue'
@ -201,7 +199,7 @@
import * as ProductSpuApi from '@/api/product/spu.js'; import * as ProductSpuApi from '@/api/product/spu.js';
import * as ProductFavoriteApi from '@/api/product/favorite.js'; import * as ProductFavoriteApi from '@/api/product/favorite.js';
import * as ProductCommentApi from '@/api/product/comment.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 Util from '@/utils/util.js';
import * as ProductUtil from '@/utils/product.js'; import * as ProductUtil from '@/utils/product.js';
export default { export default {
@ -372,7 +370,7 @@
methods: { methods: {
// ========== 秒杀活动相关 ========== // ========== 秒杀活动相关 ==========
getSeckillDetail: function() { getSeckillDetail: function() {
SeckillActivityApi.getSeckillActivity(this.id).then(res => { SeckillApi.getSeckillActivity(this.id).then(res => {
this.activity = res.data; this.activity = res.data;
// 计算活动状态 // 计算活动状态
const now = new Date().getTime(); const now = new Date().getTime();