This commit is contained in:
周中平 2021-07-16 16:36:54 +08:00
parent b53018c8c9
commit 53ddca24ab
22 changed files with 550 additions and 145 deletions

20
app.js
View File

@ -441,4 +441,24 @@ App({
}); });
}, },
/**
* 记录购物车商品总数量
* @param {*} value
*/
setCartTotalNum(value) {
wx.setStorageSync('cartTotalNum', Number(value))
},
/**
* 设置购物车tabbar的角标
*/
setCartTabBadge() {
const number = wx.getStorageSync('cartTotalNum')
if (number <= 0) return
wx.setTabBarBadge({
index: 2,
text: `${number}`
})
}
}); });

36
components/toast/index.js Normal file
View File

@ -0,0 +1,36 @@
'use strict';
var DEFAULT_DATA = {
show: false,
message: '',
icon: '',
image: '',
mask: false
};
var SUPPORT_TYPE = ['loading', 'success', 'fail'];
Component({
data: Object.assign({}, DEFAULT_DATA),
methods: {
show: function show(options) {
var toastOptions = Object.assign({}, options);
var icon = options.icon || '';
var image = options.image || '';
if (SUPPORT_TYPE.indexOf(options.type) > -1) {
icon = options.type;
image = '';
}
this.setData(Object.assign({}, toastOptions, {
icon: icon,
image: image
}));
},
clear: function clear() {
this.setData(Object.assign({}, DEFAULT_DATA));
}
}
});

View File

@ -0,0 +1,3 @@
{
"component": true
}

View File

@ -0,0 +1,30 @@
<view
class="zan-toast {{ !message ? 'zan-toast--notitle' : '' }}"
wx:if="{{ show }}"
bindtap="clearZanToast"
>
<!-- icon 展示 -->
<block
wx:if="{{ icon || image }}"
>
<view
wx:if="{{ image }}"
class="zan-toast__icon zan-toast__icon-image"
style="background-image: url({{ image }});"
></view>
<view
wx:elif="{{ icon === 'loading' }}"
class="zan-toast__icon zan-toast__icon-loading"
>
<view class="zan-loading"></view>
</view>
<zan-icon
wx:else
type="{{ icon }}"
class="zan-toast__icon"
></zan-icon>
</block>
<!-- 文案展示 -->
<view wx:if="{{ message }}">{{ message }}</view>
</view>

View File

@ -0,0 +1,58 @@
.zan-toast {
position: fixed;
top: 35%;
left: 50%;
-webkit-transform: translate3d(-50%, -50%, 0);
transform: translate3d(-50%, -50%, 0);
background: rgba(0, 0, 0, .7);
color: #fff;
font-size: 14px;
line-height: 1.5em;
margin: 0 auto;
box-sizing: border-box;
padding: 10px 30rpx;
text-align: center;
border-radius: 4px;
z-index: 100
}
.zan-toast--notitle {
padding: 18px
}
.zan-toast__icon {
display: block;
width: 40px;
height: 40px;
line-height: 40px;
margin: 0 auto;
padding: 12px 15px;
font-size: 38px;
text-align: center
}
.zan-toast__icon-loading {
line-height: 0
}
.zan-loading {
width: 20px;
height: 20px;
display: inline-block;
vertical-align: middle;
-webkit-animation: weuiLoading 1s steps(12, end) infinite;
animation: weuiLoading 1s steps(12, end) infinite;
background: transparent url(data:image/svg+xml;base64,PHN2ZyBjbGFzcz0iciIgd2lkdGg9JzEyMHB4JyBoZWlnaHQ9JzEyMHB4JyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj4KICAgIDxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIiBmaWxsPSJub25lIiBjbGFzcz0iYmsiPjwvcmVjdD4KICAgIDxyZWN0IHg9JzQ2LjUnIHk9JzQwJyB3aWR0aD0nNycgaGVpZ2h0PScyMCcgcng9JzUnIHJ5PSc1JyBmaWxsPScjRTlFOUU5JwogICAgICAgICAgdHJhbnNmb3JtPSdyb3RhdGUoMCA1MCA1MCkgdHJhbnNsYXRlKDAgLTMwKSc+CiAgICA8L3JlY3Q+CiAgICA8cmVjdCB4PSc0Ni41JyB5PSc0MCcgd2lkdGg9JzcnIGhlaWdodD0nMjAnIHJ4PSc1JyByeT0nNScgZmlsbD0nIzk4OTY5NycKICAgICAgICAgIHRyYW5zZm9ybT0ncm90YXRlKDMwIDUwIDUwKSB0cmFuc2xhdGUoMCAtMzApJz4KICAgICAgICAgICAgICAgICByZXBlYXRDb3VudD0naW5kZWZpbml0ZScvPgogICAgPC9yZWN0PgogICAgPHJlY3QgeD0nNDYuNScgeT0nNDAnIHdpZHRoPSc3JyBoZWlnaHQ9JzIwJyByeD0nNScgcnk9JzUnIGZpbGw9JyM5Qjk5OUEnCiAgICAgICAgICB0cmFuc2Zvcm09J3JvdGF0ZSg2MCA1MCA1MCkgdHJhbnNsYXRlKDAgLTMwKSc+CiAgICAgICAgICAgICAgICAgcmVwZWF0Q291bnQ9J2luZGVmaW5pdGUnLz4KICAgIDwvcmVjdD4KICAgIDxyZWN0IHg9JzQ2LjUnIHk9JzQwJyB3aWR0aD0nNycgaGVpZ2h0PScyMCcgcng9JzUnIHJ5PSc1JyBmaWxsPScjQTNBMUEyJwogICAgICAgICAgdHJhbnNmb3JtPSdyb3RhdGUoOTAgNTAgNTApIHRyYW5zbGF0ZSgwIC0zMCknPgogICAgPC9yZWN0PgogICAgPHJlY3QgeD0nNDYuNScgeT0nNDAnIHdpZHRoPSc3JyBoZWlnaHQ9JzIwJyByeD0nNScgcnk9JzUnIGZpbGw9JyNBQkE5QUEnCiAgICAgICAgICB0cmFuc2Zvcm09J3JvdGF0ZSgxMjAgNTAgNTApIHRyYW5zbGF0ZSgwIC0zMCknPgogICAgPC9yZWN0PgogICAgPHJlY3QgeD0nNDYuNScgeT0nNDAnIHdpZHRoPSc3JyBoZWlnaHQ9JzIwJyByeD0nNScgcnk9JzUnIGZpbGw9JyNCMkIyQjInCiAgICAgICAgICB0cmFuc2Zvcm09J3JvdGF0ZSgxNTAgNTAgNTApIHRyYW5zbGF0ZSgwIC0zMCknPgogICAgPC9yZWN0PgogICAgPHJlY3QgeD0nNDYuNScgeT0nNDAnIHdpZHRoPSc3JyBoZWlnaHQ9JzIwJyByeD0nNScgcnk9JzUnIGZpbGw9JyNCQUI4QjknCiAgICAgICAgICB0cmFuc2Zvcm09J3JvdGF0ZSgxODAgNTAgNTApIHRyYW5zbGF0ZSgwIC0zMCknPgogICAgPC9yZWN0PgogICAgPHJlY3QgeD0nNDYuNScgeT0nNDAnIHdpZHRoPSc3JyBoZWlnaHQ9JzIwJyByeD0nNScgcnk9JzUnIGZpbGw9JyNDMkMwQzEnCiAgICAgICAgICB0cmFuc2Zvcm09J3JvdGF0ZSgyMTAgNTAgNTApIHRyYW5zbGF0ZSgwIC0zMCknPgogICAgPC9yZWN0PgogICAgPHJlY3QgeD0nNDYuNScgeT0nNDAnIHdpZHRoPSc3JyBoZWlnaHQ9JzIwJyByeD0nNScgcnk9JzUnIGZpbGw9JyNDQkNCQ0InCiAgICAgICAgICB0cmFuc2Zvcm09J3JvdGF0ZSgyNDAgNTAgNTApIHRyYW5zbGF0ZSgwIC0zMCknPgogICAgPC9yZWN0PgogICAgPHJlY3QgeD0nNDYuNScgeT0nNDAnIHdpZHRoPSc3JyBoZWlnaHQ9JzIwJyByeD0nNScgcnk9JzUnIGZpbGw9JyNEMkQyRDInCiAgICAgICAgICB0cmFuc2Zvcm09J3JvdGF0ZSgyNzAgNTAgNTApIHRyYW5zbGF0ZSgwIC0zMCknPgogICAgPC9yZWN0PgogICAgPHJlY3QgeD0nNDYuNScgeT0nNDAnIHdpZHRoPSc3JyBoZWlnaHQ9JzIwJyByeD0nNScgcnk9JzUnIGZpbGw9JyNEQURBREEnCiAgICAgICAgICB0cmFuc2Zvcm09J3JvdGF0ZSgzMDAgNTAgNTApIHRyYW5zbGF0ZSgwIC0zMCknPgogICAgPC9yZWN0PgogICAgPHJlY3QgeD0nNDYuNScgeT0nNDAnIHdpZHRoPSc3JyBoZWlnaHQ9JzIwJyByeD0nNScgcnk9JzUnIGZpbGw9JyNFMkUyRTInCiAgICAgICAgICB0cmFuc2Zvcm09J3JvdGF0ZSgzMzAgNTAgNTApIHRyYW5zbGF0ZSgwIC0zMCknPgogICAgPC9yZWN0Pgo8L3N2Zz4=) no-repeat;
background-size: 100%
}
.zan-toast__icon-loading .zan-loading {
width: 40px;
height: 40px
}
.zan-toast__icon-image {
background-size: 40px;
background-position: center;
background-repeat: no-repeat
}

134
components/toast/toast.js Normal file
View File

@ -0,0 +1,134 @@
'use strict';
var TOAST_CONFIG_KEY = 'zanui.__zanToastPageConfig';
var DEFAULT_SHOW_TOAST_TIME = 3000;
var timeoutData = {
timeoutId: 0,
toastCtx: null
};
var globalToastUserConfig = {};
// 获取页面上下文
function getPageCtx(pageCtx) {
var ctx = pageCtx;
if (!ctx) {
var pages = getCurrentPages();
ctx = pages[pages.length - 1];
}
return ctx;
}
// 获取当前页面的 toast 配置数据
function getPageToastConfig(pageCtx) {
var zanuiData = pageCtx.data.zanui || {};
return zanuiData.__zanToastPageConfig || {};
}
// Toast 显示函数
function Toast(optionsOrMsg, pageCtx) {
// 参数格式化处理
// 如果是文字,默认为 message
var options = optionsOrMsg || {};
if (typeof optionsOrMsg === 'string') {
options = { message: optionsOrMsg };
}
var ctx = getPageCtx(pageCtx);
var pageToastUserSetting = getPageToastConfig(ctx);
var parsedOptions = Object.assign({}, globalToastUserConfig, pageToastUserSetting, options);
var toastCtx = ctx.selectComponent(parsedOptions.selector);
if (!toastCtx) {
console.error('无法找到对应的toast组件请于页面中注册并在 wxml 中声明 toast 自定义组件');
return;
}
if (timeoutData.timeoutId) {
Toast.clear();
}
toastCtx.show(Object.assign({}, parsedOptions, {
show: true
}));
var timeoutId = 0;
// toast 计时如果小于0就不会去关闭。
// 如果不传,就取默认值
var timeoutOption = parsedOptions.timeout || DEFAULT_SHOW_TOAST_TIME;
if (timeoutOption >= 0) {
timeoutId = setTimeout(function () {
toastCtx.clear();
}, timeoutOption);
}
timeoutData = {
timeoutId: timeoutId,
toastCtx: toastCtx
};
}
// 设置 toast 基础属性
Toast.setDefaultOptions = function () {
var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
var type = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'page';
var parsedDefaultOptions = {
selector: options.selector || '',
type: options.type || '',
icon: options.icon || '',
image: options.image || '',
timeout: options.timeout || DEFAULT_SHOW_TOAST_TIME
};
if (type === 'global') {
globalToastUserConfig = Object.assign({}, parsedDefaultOptions);
} else if (type === 'page') {
var _ctx$setData;
var ctx = getPageCtx();
ctx.setData((_ctx$setData = {}, _ctx$setData['' + TOAST_CONFIG_KEY] = parsedDefaultOptions, _ctx$setData));
}
};
// 重置 toast 基础属性
Toast.resetDefaultOptions = function () {
var type = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'page';
if (type === 'global') {
globalToastUserConfig = {};
} else {
var _ctx$setData2;
var ctx = getPageCtx();
ctx.setData((_ctx$setData2 = {}, _ctx$setData2['' + TOAST_CONFIG_KEY] = {}, _ctx$setData2));
}
};
// 清理所有 toast
Toast.clear = function () {
clearTimeout(timeoutData.timeoutId);
try {
timeoutData.toastCtx && timeoutData.toastCtx.clear();
} catch (e) {}
timeoutData = {
timeoutId: 0,
toastCtx: null
};
};
// 显示 loading
Toast.loading = function () {
var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
Toast(Object.assign({}, options, {
type: 'loading'
}));
};
module.exports = Toast;

View File

@ -32,6 +32,14 @@ Page({
_this.getCategoryList(); _this.getCategoryList();
}, },
/**
* 生命周期函数--监听页面显示
*/
onShow() {
// 更新购物车角标
App.setCartTabBadge()
},
/** /**
* 设置分类列表高度 * 设置分类列表高度
*/ */

View File

@ -1,20 +1,11 @@
const App = getApp();
// 工具类
import Util from '../../utils/util.js'; import Util from '../../utils/util.js';
// 验证类
import Verify from '../../utils/verify.js'; import Verify from '../../utils/verify.js';
// 枚举类:发货方式
import DeliveryTypeEnum from '../../utils/enum/DeliveryType.js'; import DeliveryTypeEnum from '../../utils/enum/DeliveryType.js';
// 枚举类:支付方式
import PayTypeEnum from '../../utils/enum/order/PayType'; import PayTypeEnum from '../../utils/enum/order/PayType';
// 对话框插件
import Dialog from '../../components/dialog/dialog'; import Dialog from '../../components/dialog/dialog';
import Toast from '../../components/toast/toast';
const App = getApp()
Page({ Page({
/** /**
@ -447,15 +438,27 @@ Page({
* 选择优惠券 * 选择优惠券
*/ */
onSelectCoupon(e) { onSelectCoupon(e) {
let _this = this; const app = this;
// 当前选择的优惠券
const index = e.currentTarget.dataset.index
const couponItem = app.data.coupon_list[index]
// 判断是否在适用范围
if (!couponItem['is_apply']) {
Toast({
selector: '#zan-toast',
message: couponItem.not_apply_info,
timeout: 1800
});
return
}
// 记录选中的优惠券id // 记录选中的优惠券id
_this.setData({ app.setData({
selectCouponId: e.currentTarget.dataset.id selectCouponId: couponItem.user_coupon_id
}); });
// 重新获取订单信息 // 重新获取订单信息
_this.getOrderData(); app.getOrderData();
// 隐藏优惠券弹层 // 隐藏优惠券弹层
_this.onTogglePopupCoupon(); app.onTogglePopupCoupon();
}, },
/** /**

View File

@ -3,6 +3,7 @@
"usingComponents": { "usingComponents": {
"zan-popup": "/components/popup/index", "zan-popup": "/components/popup/index",
"zan-dialog": "/components/dialog/index", "zan-dialog": "/components/dialog/index",
"zan-toast": "/components/toast/index",
"van-switch": "/components/switch/index", "van-switch": "/components/switch/index",
"shortcut": "/components/shortcut/shortcut" "shortcut": "/components/shortcut/shortcut"
} }

View File

@ -2,7 +2,9 @@
<!-- 顶部选项卡 --> <!-- 顶部选项卡 -->
<view wx:if="{{ isShowTab }}" class="swiper-tab dis-flex flex-y-center flex-x-around"> <view wx:if="{{ isShowTab }}" class="swiper-tab dis-flex flex-y-center flex-x-around">
<view wx:for="{{ DeliveryTypeEnum }}" wx:key="this" class="swiper-tab-item {{ curDelivery == item.value ? 'on' : '' }}" data-current="{{ item.value }}" catchtap="onSwichDelivery"> <view wx:for="{{ DeliveryTypeEnum }}" wx:key="this"
class="swiper-tab-item {{ curDelivery == item.value ? 'on' : '' }}" data-current="{{ item.value }}"
catchtap="onSwichDelivery">
{{ item.name }} {{ item.name }}
</view> </view>
</view> </view>
@ -20,7 +22,8 @@
<text class="detail-content__title-phone f-28">{{ address.phone }}</text> <text class="detail-content__title-phone f-28">{{ address.phone }}</text>
</view> </view>
<view class="detail-content__describe"> <view class="detail-content__describe">
<text class="col-7">{{address.region.province}} {{address.region.city}} {{address.region.region}} {{address.detail}}</text> <text class="col-7">{{address.region.province}} {{address.region.city}} {{address.region.region}}
{{address.detail}}</text>
</view> </view>
</block> </block>
<block wx:else> <block wx:else>
@ -48,7 +51,8 @@
<text class="f-30">{{ extract_shop.shop_name }}</text> <text class="f-30">{{ extract_shop.shop_name }}</text>
</view> </view>
<view class="detail-content__describe"> <view class="detail-content__describe">
<text class="col-7">{{extract_shop.region.province}} {{extract_shop.region.city}} {{extract_shop.region.region}} {{extract_shop.address}}</text> <text class="col-7">{{extract_shop.region.province}} {{extract_shop.region.city}}
{{extract_shop.region.region}} {{extract_shop.address}}</text>
</view> </view>
</block> </block>
<block wx:else> <block wx:else>
@ -135,7 +139,7 @@
<view catchtap="onTogglePopupCoupon"> <view catchtap="onTogglePopupCoupon">
<block wx:if="{{ coupon_list.length > 0 }}"> <block wx:if="{{ coupon_list.length > 0 }}">
<text class="col-m" wx:if="{{ coupon_id > 0 }}">-¥{{ coupon_money }}</text> <text class="col-m" wx:if="{{ coupon_id > 0 }}">-¥{{ coupon_money }}</text>
<text class="col-m" wx:else>有{{ coupon_list.length }}张优惠券可用</text> <text class="col-m" wx:else>有{{ coupon_list.length }}张优惠券</text>
<text class="iconfont icon-xiangyoujiantou user-orderJtou"></text> <text class="iconfont icon-xiangyoujiantou user-orderJtou"></text>
</block> </block>
<text wx:else class="">无优惠券可用</text> <text wx:else class="">无优惠券可用</text>
@ -241,7 +245,8 @@
<view class="coupon-list"> <view class="coupon-list">
<scroll-view scroll-y="{{ true }}" style="height: 565rpx;"> <scroll-view scroll-y="{{ true }}" style="height: 565rpx;">
<view class="coupon-item" wx:for="{{ coupon_list }}" wx:key="this"> <view class="coupon-item" wx:for="{{ coupon_list }}" wx:key="this">
<view class="item-wrapper color__{{ item.color.text }}" catchtap="onSelectCoupon" data-index="{{ index }}" data-id="{{ item.user_coupon_id }}"> <view class="item-wrapper color__{{ item.is_apply ? item.color.text : 'gray' }}" catchtap="onSelectCoupon"
data-index="{{ index }}" data-id="{{ item.user_coupon_id }}">
<view class="coupon-type">{{ item.coupon_type.text }}</view> <view class="coupon-type">{{ item.coupon_type.text }}</view>
<view class="tip dis-flex flex-dir-column flex-x-center"> <view class="tip dis-flex flex-dir-column flex-x-center">
<view wx:if="{{ item.coupon_type.value == 10 }}"> <view wx:if="{{ item.coupon_type.value == 10 }}">
@ -283,6 +288,8 @@
<!-- 积分说明弹框 --> <!-- 积分说明弹框 -->
<zan-dialog id="zan-base-dialog"></zan-dialog> <zan-dialog id="zan-base-dialog"></zan-dialog>
<!-- Toast组件 -->
<zan-toast id="zan-toast"></zan-toast>
</view> </view>

View File

@ -167,6 +167,15 @@
background: linear-gradient(-141deg, #f7d059, #fdb054); background: linear-gradient(-141deg, #f7d059, #fdb054);
} }
.popup__coupon .coupon-list .coupon-item .item-wrapper.color__gray {
background: linear-gradient(-113deg, #bdbdbd, #a2a1a2);
}
.popup__coupon .coupon-list .coupon-item .item-wrapper.color__gray .coupon-type {
background: #9e9e9e;
}
.popup__coupon .coupon-list .coupon-item .item-wrapper .tip { .popup__coupon .coupon-list .coupon-item .item-wrapper .tip {
position: relative; position: relative;
flex: 0 0 32%; flex: 0 0 32%;

View File

@ -55,7 +55,12 @@ Page({
getCartList() { getCartList() {
let _this = this; let _this = this;
App._get('cart/lists', {}, result => { App._get('cart/lists', {}, result => {
_this._initGoodsChecked(result.data); const data = result.data
// 更新购物车数量及角标
App.setCartTotalNum(data.order_total_num)
App.setCartTabBadge()
// 初始化商品选中状态
_this._initGoodsChecked(data)
}); });
}, },

View File

@ -285,6 +285,8 @@ Page({
}, (result) => { }, (result) => {
App.showSuccess(result.msg); App.showSuccess(result.msg);
_this.setData(result.data); _this.setData(result.data);
// 记录购物车商品数量
App.setCartTotalNum(result.data.cart_total_num)
}); });
} }
}, },

View File

@ -22,6 +22,14 @@ Page({
this.getPageData(); this.getPageData();
}, },
/**
* 生命周期函数--监听页面显示
*/
onShow() {
// 更新购物车角标
App.setCartTabBadge()
},
/** /**
* 加载页面数据 * 加载页面数据
*/ */

View File

@ -62,7 +62,10 @@ Page({
showTopWidget: false, showTopWidget: false,
// 倒计时 // 倒计时
actEndTimeList: [], countDownObj: {
date: '',
dynamic: {}
},
active: {}, // 秒杀活动详情 active: {}, // 秒杀活动详情
goods: {}, // 商品详情 goods: {}, // 商品详情
@ -73,7 +76,7 @@ Page({
* 生命周期函数--监听页面加载 * 生命周期函数--监听页面加载
*/ */
onLoad(options) { onLoad(options) {
let _this = this, const _this = this,
scene = App.getSceneData(options); scene = App.getSceneData(options);
// 秒杀商品id // 秒杀商品id
_this.setData({ _this.setData({
@ -81,14 +84,16 @@ Page({
sharp_goods_id: options.sharp_goods_id ? options.sharp_goods_id : scene.gid, sharp_goods_id: options.sharp_goods_id ? options.sharp_goods_id : scene.gid,
}); });
// 获取秒杀商品信息 // 获取秒杀商品信息
_this.getActiveDetail(); _this.onRefreshPage();
}, },
/** /**
* 生命周期函数--监听页面显示 * 刷新页面数据
*/ */
onShow(options) { onRefreshPage() {
// 获取秒杀商品信息
const _this = this
_this.getActiveDetail()
}, },
/** /**
@ -100,12 +105,12 @@ Page({
active_time_id: _this.data.active_time_id, active_time_id: _this.data.active_time_id,
sharp_goods_id: _this.data.sharp_goods_id, sharp_goods_id: _this.data.sharp_goods_id,
}, (result) => { }, (result) => {
const data = result.data
// 初始化详情数据 // 初始化详情数据
let data = _this._initData(result.data); _this._initData(data);
_this.setData(data); // 初始化倒计时组件
// 执行倒计时 _this._initCountDownData(data);
CountDown.onSetTimeList(_this, 'actEndTimeList'); })
});
}, },
/** /**
@ -134,12 +139,27 @@ Page({
if (goodsDetail.spec_type == 20) { if (goodsDetail.spec_type == 20) {
data.goodsMultiSpec = _this._initManySpecData(goodsDetail.goods_multi_spec); data.goodsMultiSpec = _this._initManySpecData(goodsDetail.goods_multi_spec);
} }
// 记录活动到期时间 _this.setData(data)
data.actEndTimeList = [{ },
date: data.active.active_status == ActiveStatusEnum.STATE_SOON.value ?
data.active.start_time : data.active.end_time /**
}]; * 初始化倒计时组件
return data; */
_initCountDownData(data) {
const app = this
// 记录倒计时的时间
const countDownTime = data.active.active_status == ActiveStatusEnum.STATE_SOON.value ?
data.active.start_time : data.active.end_time
app.setData({
'countDownObj.date': countDownTime
})
// 执行倒计时
CountDown.start(0, app, 'countDownObj', () => {
// 倒计时结束刷新页面
setTimeout(() => {
app.onRefreshPage()
}, 800)
})
}, },
/** /**

View File

@ -8,7 +8,8 @@
<!-- 商品图片 --> <!-- 商品图片 -->
<view class="goods-swiper"> <view class="goods-swiper">
<swiper autoplay="{{ autoplay }}" bindchange="setCurrent" class="banner-box swiper-box" duration="{{duration}}" indicator-dots="{{indicatorDots}}" interval="{{interval}}" circular="{{true}}"> <swiper autoplay="{{ autoplay }}" bindchange="setCurrent" class="banner-box swiper-box" duration="{{duration}}"
indicator-dots="{{indicatorDots}}" interval="{{interval}}" circular="{{true}}">
<swiper-item wx:for="{{ goods.image }}" wx:key="this" catchtap="onPreviewImages" data-index="{{ index }}"> <swiper-item wx:for="{{ goods.image }}" wx:key="this" catchtap="onPreviewImages" data-index="{{ index }}">
<image class="slide-image" mode="aspectFill" src="{{ item.file_path }}"></image> <image class="slide-image" mode="aspectFill" src="{{ item.file_path }}"></image>
</swiper-item> </swiper-item>
@ -47,7 +48,7 @@
</view> </view>
<view class="goods-share__line"></view> <view class="goods-share__line"></view>
<view class="goods-share"> <view class="goods-share">
<form bindsubmit="onClickShare" report-submit="true"> <form bindsubmit="onClickShare">
<button formType="submit" class="share-btn dis-flex flex-dir-column"> <button formType="submit" class="share-btn dis-flex flex-dir-column">
<text class="share__icon iconfont icon-fenxiang"></text> <text class="share__icon iconfont icon-fenxiang"></text>
<text class="f-24">分享</text> <text class="f-24">分享</text>
@ -60,11 +61,11 @@
<text>{{ goods.selling_point }}</text> <text>{{ goods.selling_point }}</text>
</view> </view>
<!-- 活动倒计时 --> <!-- 活动倒计时 -->
<view wx:if="{{ active.active_status != ActiveStatusEnum.STATE_END.value }}" class="info-item info-item_status info-item_countdown"> <view wx:if="{{ active.active_status != ActiveStatusEnum.STATE_END.value }}"
class="info-item info-item_status info-item_countdown">
<text class="countdown-icon iconfont icon-naozhong"></text> <text class="countdown-icon iconfont icon-naozhong"></text>
<block wx:for="{{ actEndTimeList }}" wx:key="this"> <text>距离秒杀{{ active.active_status == ActiveStatusEnum.STATE_SOON.value ? '开始' : '结束' }}</text>
<text>距离秒杀{{ active.active_status == ActiveStatusEnum.STATE_SOON.value ? '开始' : '结束' }} 还剩{{ item.dynamic.hou }}时{{ item.dynamic.min }}分{{ item.dynamic.sec }}秒</text> <text>还剩{{ countDownObj.dynamic.hou }}时{{ countDownObj.dynamic.min }}分{{ countDownObj.dynamic.sec }}秒</text>
</block>
</view> </view>
<!-- 活动已结束 --> <!-- 活动已结束 -->
<view wx:else class="info-item info-item_status info-item_end"> <view wx:else class="info-item info-item_status info-item_end">
@ -162,7 +163,8 @@
<!-- 操作按钮 --> <!-- 操作按钮 -->
<view class="foo-item-trigger flex-box"> <view class="foo-item-trigger flex-box">
<form bindsubmit="onToggleTrade" report-submit> <form bindsubmit="onToggleTrade" report-submit>
<button wx:if="{{ active.active_status == ActiveStatusEnum.STATE_BEGIN.value }}" class="opt-btn btn-main btn-normal" form-type="submit"> <button wx:if="{{ active.active_status == ActiveStatusEnum.STATE_BEGIN.value }}"
class="opt-btn btn-main btn-normal" form-type="submit">
<text>立即购买</text> <text>立即购买</text>
</button> </button>
<button wx:else class="opt-btn btn-gray btn-normal"> <button wx:else class="opt-btn btn-gray btn-normal">
@ -174,7 +176,9 @@
</view> </view>
<!-- 分享按钮 --> <!-- 分享按钮 -->
<zan-actionsheet show="{{ share.show }}" actions="{{ share.actions }}" cancel-text="{{ share.cancelText }}" cancel-with-mask="{{ share.cancelWithMask }}" bind:cancel="onCloseShare" bind:actionclick="onClickShareItem" mask-class="tiny" /> <zan-actionsheet show="{{ share.show }}" actions="{{ share.actions }}" cancel-text="{{ share.cancelText }}"
cancel-with-mask="{{ share.cancelWithMask }}" bind:cancel="onCloseShare" bind:actionclick="onClickShareItem"
mask-class="tiny" />
<!-- 商品海报 弹出层 --> <!-- 商品海报 弹出层 -->
<zan-popup show="{{ share.showPopup }}" bindclose="onTogglePopup"> <zan-popup show="{{ share.showPopup }}" bindclose="onTogglePopup">
@ -183,7 +187,7 @@
<view class="pop-close dis-flex flex-x-center flex-y-center" catchtap="onTogglePopup"> <view class="pop-close dis-flex flex-x-center flex-y-center" catchtap="onTogglePopup">
<text class="iconfont icon-shanchu f-30 col-9"></text> <text class="iconfont icon-shanchu f-30 col-9"></text>
</view> </view>
<form bindsubmit="onSavePoster" report-submit="true"> <form bindsubmit="onSavePoster">
<view class="poster__image"> <view class="poster__image">
<image mode="widthFix" src="{{ qrcode }}"></image> <image mode="widthFix" src="{{ qrcode }}"></image>
</view> </view>
@ -232,9 +236,12 @@
<view class="goods-attr"> <view class="goods-attr">
<!-- 滚动容器 --> <!-- 滚动容器 -->
<scroll-view class="goods-attr--scroll" scroll-y="{{ true }}"> <scroll-view class="goods-attr--scroll" scroll-y="{{ true }}">
<view class="group-item" wx:for="{{ goodsMultiSpec.spec_attr }}" wx:for-item="attr" wx:for-index="attr_idx" wx:key="this"> <view class="group-item" wx:for="{{ goodsMultiSpec.spec_attr }}" wx:for-item="attr" wx:for-index="attr_idx"
wx:key="this">
<view class="tips-text" data-id="{{ attr.group_id }}">{{ attr.group_name }}</view> <view class="tips-text" data-id="{{ attr.group_id }}">{{ attr.group_name }}</view>
<view class="spec-item {{ item.checked ? 'cur' : '' }}" wx:for="{{ attr.spec_items }}" wx:for-index="item_idx" wx:key="this" data-attr-idx="{{ attr_idx }}" data-item-idx="{{ item_idx }}" catchtap="onSwitchSpec"> <view class="spec-item {{ item.checked ? 'cur' : '' }}" wx:for="{{ attr.spec_items }}"
wx:for-index="item_idx" wx:key="this" data-attr-idx="{{ attr_idx }}" data-item-idx="{{ item_idx }}"
catchtap="onSwitchSpec">
{{ item.spec_value }} {{ item.spec_value }}
</view> </view>
</view> </view>
@ -246,11 +253,11 @@
<text>购买数量</text> <text>购买数量</text>
</view> </view>
<view class="select-number"> <view class="select-number">
<form bindsubmit="onDecGoodsNumber" report-submit="true"> <form bindsubmit="onDecGoodsNumber">
<button formType="submit" class="default {{ goods_num > 1 ? '' : 'disabled' }}" type="default">-</button> <button formType="submit" class="default {{ goods_num > 1 ? '' : 'disabled' }}" type="default">-</button>
</form> </form>
<input bindinput="onInputGoodsNum" type="number" value="{{ goods_num }}"></input> <input bindinput="onInputGoodsNum" type="number" value="{{ goods_num }}"></input>
<form bindsubmit="onIncGoodsNumber" report-submit="true"> <form bindsubmit="onIncGoodsNumber">
<button formType="submit" class="default" type="default">+</button> <button formType="submit" class="default" type="default">+</button>
</form> </form>
</view> </view>

View File

@ -26,7 +26,10 @@ Page({
StateEnum, // 枚举类:秒杀会场活动状态 StateEnum, // 枚举类:秒杀会场活动状态
// 倒计时 // 倒计时
countDownList: [], countDownObj: {
date: '',
dynamic: {}
},
// 秒杀活动场次 // 秒杀活动场次
tabbar: [], tabbar: [],
@ -40,46 +43,78 @@ Page({
* 生命周期函数--监听页面加载 * 生命周期函数--监听页面加载
*/ */
onLoad(options) { onLoad(options) {
const _this = this;
_this.onRefreshPage()
}, },
/** /**
* 生命周期函数--监听页面显示 * 生命周期函数--监听页面显示
*/ */
onShow() { onShow() {
let _this = this; // const _this = this;
if (_this.data.curTabIndex == 0) { // if (_this.data.curTabIndex == 0) {
// 获取列表数据 // // 刷新页面
_this.getApiData(); // _this.onRefreshPage()
} // }
}, },
/** /**
* 获取列表数据 * 刷新页面数据
*/
onRefreshPage() {
const _this = this
return new Promise((resolve, reject) => {
// 获取列表数据
_this.getApiData().then(() => {
resolve()
})
})
},
/**
* 下拉刷新
*/
onPullDownRefresh() {
// 获取首页数据
this.onRefreshPage().then(() => {
wx.stopPullDownRefresh()
})
},
/**
* 获取页面数据
*/ */
getApiData() { getApiData() {
let _this = this; const app = this;
App._get('sharp.index/index', {}, (result) => { return new Promise((resolve, reject) => {
_this.setData(result.data); App._get('sharp.index/index', {}, (result) => {
// 初始化倒计时组件 const data = result.data
_this._initCountDownData(); app.setData(data);
}); // 初始化倒计时组件
app._initCountDownData();
resolve(data)
});
})
}, },
/** /**
* 初始化倒计时组件 * 初始化倒计时组件
* mix: 怎么才能每次执行这里的时候不重复触发定时器
*/ */
_initCountDownData(data) { _initCountDownData(countId = 0) {
let _this = this, const app = this,
curTabbar = _this.data.tabbar[_this.data.curTabIndex]; curTabbar = app.data.tabbar[app.data.curTabIndex];
// 记录倒计时的时间 // 记录倒计时的时间
_this.setData({ app.setData({
[`countDownList[0]`]: { 'countDownObj.date': curTabbar.count_down_time
date: curTabbar.count_down_time, })
}
});
// 执行倒计时 // 执行倒计时
CountDown.onSetTimeList(_this, 'countDownList'); CountDown.start(countId, app, 'countDownObj', () => {
// 倒计时结束刷新页面
setTimeout(() => {
app.onRefreshPage()
}, 800)
})
}, },
/** /**
@ -87,11 +122,10 @@ Page({
*/ */
onToggleTab(e) { onToggleTab(e) {
let _this = this; let _this = this;
// 保存formid
App.saveFormId(e.detail.formId);
// 设置当前tabbar索引并重置数据 // 设置当前tabbar索引并重置数据
const curTabIndex = e.currentTarget.dataset.index
_this.setData({ _this.setData({
curTabIndex: e.detail.target.dataset.index, curTabIndex,
goodsList: [], goodsList: [],
page: 1, page: 1,
isLoading: true, isLoading: true,
@ -100,17 +134,15 @@ Page({
// 获取列表数据 // 获取列表数据
_this.getGoodsList(); _this.getGoodsList();
// 初始化倒计时组件 // 初始化倒计时组件
_this._initCountDownData(); _this._initCountDownData(curTabIndex);
}, },
/** /**
* 跳转到砍价商品详情 * 跳转到秒杀商品详情
*/ */
onTargetActive(e) { onTargetActive(e) {
let _this = this, let _this = this,
curTabbar = _this.data.tabbar[_this.data.curTabIndex]; curTabbar = _this.data.tabbar[_this.data.curTabIndex];
// 保存formid
App.saveFormId(e.detail.formId);
let query = util.urlEncode({ let query = util.urlEncode({
active_time_id: curTabbar.active_time_id, active_time_id: curTabbar.active_time_id,
sharp_goods_id: e.detail.target.dataset.id, sharp_goods_id: e.detail.target.dataset.id,
@ -146,7 +178,7 @@ Page({
*/ */
getGoodsList(isNextPage) { getGoodsList(isNextPage) {
let _this = this, let _this = this,
curTabbar = _this.data.tabbar[_this.data.curTabIndex];; curTabbar = _this.data.tabbar[_this.data.curTabIndex];
App._get('sharp.goods/lists', { App._get('sharp.goods/lists', {
page: _this.data.page || 1, page: _this.data.page || 1,
active_time_id: curTabbar.active_time_id active_time_id: curTabbar.active_time_id

View File

@ -1,3 +1,4 @@
{ {
"navigationBarTitleText": "整点秒杀" "navigationBarTitleText": "整点秒杀",
"enablePullDownRefresh": true
} }

View File

@ -2,21 +2,19 @@
<!-- 商品分类tab --> <!-- 商品分类tab -->
<view class="sharp-tabs"> <view class="sharp-tabs">
<scroll-view scroll-x="{{ true }}" scroll-left="{{ true }}"> <scroll-view scroll-x="{{ true }}" scroll-left="{{ true }}">
<form bindsubmit="onToggleTab" report-submit="true"> <view class="sharp-tabs--container dis-flex">
<view class="sharp-tabs--container dis-flex"> <view wx:for="{{ tabbar }}" wx:key="this" data-index="{{ index }}"
<button wx:for="{{ tabbar }}" wx:key="this" formType="submit" class="btn-normal" data-index="{{ index }}"> class="tabs-item {{ curTabIndex == index ? 'active' : '' }} dis-flex flex-dir-column flex-x-center flex-y-center"
<view class="tabs-item {{ curTabIndex == index ? 'active' : '' }} dis-flex flex-dir-column flex-x-center flex-y-center"> catchtap="onToggleTab">
<block wx:if="{{ item.status == StateEnum.ACTIVE_STATE_NOTICE.value }}"> <block wx:if="{{ item.status == StateEnum.ACTIVE_STATE_NOTICE.value }}">
<view class="item-title">{{ item.status_text }}</view> <view class="item-title">{{ item.status_text }}</view>
</block> </block>
<block wx:else> <block wx:else>
<view class="item-time">{{ item.active_time }}</view> <view class="item-time">{{ item.active_time }}</view>
<view class="item-status">{{ item.status_text }}</view> <view class="item-status">{{ item.status_text }}</view>
</block> </block>
</view>
</button>
</view> </view>
</form> </view>
<view class="sharp-tabs--empty"></view> <view class="sharp-tabs--empty"></view>
</scroll-view> </scroll-view>
</view> </view>
@ -25,7 +23,8 @@
<!-- 活动状态 --> <!-- 活动状态 -->
<view class="active-status"> <view class="active-status">
<text class="active-status--icon iconfont icon-artboard"></text> <text class="active-status--icon iconfont icon-artboard"></text>
<text class="active-status--time" wx:if="{{ tabbar[curTabIndex].status != StateEnum.ACTIVE_STATE_NOTICE.value }}">{{ tabbar[curTabIndex].active_time }}</text> <text class="active-status--time"
wx:if="{{ tabbar[curTabIndex].status != StateEnum.ACTIVE_STATE_NOTICE.value }}">{{ tabbar[curTabIndex].active_time }}</text>
<text class="active-status--text">{{ tabbar[curTabIndex].status_text2 }}</text> <text class="active-status--text">{{ tabbar[curTabIndex].status_text2 }}</text>
</view> </view>
<!-- 倒计时 --> <!-- 倒计时 -->
@ -35,19 +34,19 @@
</view> </view>
<view class="clock dis-flex"> <view class="clock dis-flex">
<view class="clock-time"> <view class="clock-time">
<text>{{ countDownList[0].dynamic.hou }}</text> <text>{{ countDownObj.dynamic.hou }}</text>
</view> </view>
<view class="clock-symbol"> <view class="clock-symbol">
<text>:</text> <text>:</text>
</view> </view>
<view class="clock-time"> <view class="clock-time">
<text>{{ countDownList[0].dynamic.min }}</text> <text>{{ countDownObj.dynamic.min }}</text>
</view> </view>
<view class="clock-symbol"> <view class="clock-symbol">
<text>:</text> <text>:</text>
</view> </view>
<view class="clock-time"> <view class="clock-time">
<text>{{ countDownList[0].dynamic.sec }}</text> <text>{{ countDownObj.dynamic.sec }}</text>
</view> </view>
</view> </view>
</view> </view>
@ -56,7 +55,7 @@
<view class="bargain-hall"> <view class="bargain-hall">
<!-- 商品列表 --> <!-- 商品列表 -->
<view class="goods-item" wx:for="{{ goodsList.data }}" wx:key="this"> <view class="goods-item" wx:for="{{ goodsList.data }}" wx:key="this">
<form bindsubmit="onTargetActive" report-submit="true"> <form bindsubmit="onTargetActive">
<button formType="submit" class="btn-normal" data-id="{{ item.sharp_goods_id }}"> <button formType="submit" class="btn-normal" data-id="{{ item.sharp_goods_id }}">
<view class="goods-item--container dis-flex"> <view class="goods-item--container dis-flex">
<!-- 商品图片 --> <!-- 商品图片 -->

View File

@ -28,6 +28,8 @@ Page({
}); });
// 获取当前用户信息 // 获取当前用户信息
_this.getUserDetail(); _this.getUserDetail();
// 更新购物车角标
App.setCartTabBadge()
}, },
/** /**
@ -35,7 +37,7 @@ Page({
*/ */
getUserDetail() { getUserDetail() {
let _this = this; let _this = this;
App._get('user.index/detail', {}, function(result) { App._get('user.index/detail', {}, function (result) {
_this.setData(result.data); _this.setData(result.data);
}); });
}, },

View File

@ -6,51 +6,71 @@ import util from './util.js';
*/ */
module.exports = { module.exports = {
onSetTimeList(page, dataIndex) { // 计时器句柄
let _this = this; countIds: {},
// 获取当前时间,同时得到活动结束时间数组
let newTime = new Date().getTime(),
newData = [];
// 对结束时间进行处理渲染到页面
page.data[dataIndex].forEach(item => {
let endTime = new Date(util.format_date(item.date)).getTime();
let dynamic = {
// day: '00',
hou: '00',
min: '00',
sec: '00'
};
// 如果活动未结束,对时间进行处理
if (endTime - newTime > 0) {
let diffTime = (endTime - newTime) / 1000;
// 获取时、分、秒 start(countId, app, dataIndex, endCallBack) {
// day = parseInt(diffTime / 86400), // console.log('start')
let hou = parseInt(diffTime / 3600), this.onSetTimeList(countId, app, dataIndex, endCallBack, 0)
min = parseInt(diffTime % 3600 / 60), },
sec = parseInt(diffTime % 3600 % 60);
dynamic = { onSetTimeList(countId, app, dataIndex, endCallBack, deep = 0) {
hou: _this.timeFormat(hou), const _this = this;
min: _this.timeFormat(min), // 获取倒计时数据对象
sec: _this.timeFormat(sec) const countDownObj = app.data[dataIndex]
} // 获取当前时间,同时得到活动结束时间数组
} const newTime = new Date().getTime()
newData.push({ // 对结束时间进行处理渲染到页面
date: item.date, const endTime = new Date(util.format_date(countDownObj.date)).getTime();
dynamic // 初始化倒计时数据
}); countDownObj.dynamic = {
}) // day: '00',
hou: '00',
min: '00',
sec: '00'
};
// 如果活动未结束,对时间进行处理
if (endTime - newTime > 0) {
const diffTime = (endTime - newTime) / 1000;
// 获取时、分、秒
// day = parseInt(diffTime / 86400),
const hou = parseInt(diffTime / 3600),
min = parseInt(diffTime % 3600 / 60),
sec = parseInt(diffTime % 3600 % 60);
countDownObj.dynamic.hou = _this.timeFormat(hou)
countDownObj.dynamic.min = _this.timeFormat(min)
countDownObj.dynamic.sec = _this.timeFormat(sec)
}
// 渲染,然后每隔一秒执行一次倒计时函数 // 渲染,然后每隔一秒执行一次倒计时函数
page.setData({ app.setData({
[`${dataIndex}`]: newData [`${dataIndex}`]: countDownObj
}); })
// 判断倒计时是否结束
const isEnd = _this.isEnd(countDownObj);
// 结束后执行回调函数
isEnd && deep > 0 && endCallBack && endCallBack();
// 重复执行 // 重复执行
setTimeout(() => { _this.countIds[countId] && clearTimeout(_this.countIds[countId])
this.onSetTimeList(page, dataIndex) if (!isEnd) {
}, 1000); _this.countIds[countId] = setTimeout(() => {
_this.onSetTimeList(countId, app, dataIndex, endCallBack, ++deep)
}, 1000)
}
},
/**
* 判断倒计时是否结束
* @param {*} countDownObj
*/
isEnd(countDownObj) {
const {
dynamic
} = countDownObj
if (dynamic.hou == '00' && dynamic.min == '00' && dynamic.sec == '00') {
return true
}
return false
}, },
/** /**

View File

@ -1,3 +1,3 @@
{ {
"version": "1.1.44" "version": "1.1.45"
} }