Authored by 邱骏

我的排队

... ... @@ -110,5 +110,26 @@ export default {
method: 'app.drawline.getLuckyUserList'
}
});
},
/**
* 获取用户排队列表(用户好友助力列表)
*/
getMyQueueList(actId, limit = 10, page = 1) {
if (!actId) {
return Promise.reject({
code: 403,
message: '缺少actId参数'
});
}
return api.get({
url: '',
data: {
activityId: actId,
limit: limit,
page: page,
method: 'app.drawline.getMyQueueList'
}
});
}
};
... ...
... ... @@ -11,8 +11,8 @@ let router = global.router;
/**
* method=app.limitProduct.queryHelpInfo(助力信息)
method=app.limitProduct.addhelpUserInfo(添加助力信息)
method=app.drawline.getMyQueueList 获取我的排队列表
method=app.limitProduct.addhelpUserInfo(添加助力信息)
method=app.drawline.getMyQueueList 获取我的排队列表
*/
/**
* 接口:获取用户排队信息
... ... @@ -93,7 +93,9 @@ Page({
queueList: [], // 排队列表
scrollTop: 0, // 控制scroll-view滚动的实际位置
tempScrollTop: 0, // 手动滚动页面时保存当前滚动的位置
showMsg: 0 // 0不显示提示框, 1显示提示框
showMsg: 0, // 0不显示提示框, 1显示提示框
hidePopup: 0, // 用于显示头像旁边的气泡 0:显示 1:不显示
hideInviteButton: 0 // 用户显示邀请按钮
},
/**
... ... @@ -102,7 +104,7 @@ Page({
onLoad: function(options) {
console.log(options);
let actId = options.actId;
let uid = app.getUid() || this.data.test_uid[this.data.now_test_uid_index];
let uid = app.getUid();
if (actId) {
this.getActivityInfo(actId).then(res => {
... ... @@ -115,8 +117,6 @@ Page({
}
}); // 获取活动信息
}
},
/**
... ... @@ -130,6 +130,7 @@ Page({
* 生命周期函数--监听页面显示
*/
onShow: function() {
setTimeout(this.hidePopup, 4000);
},
/**
... ... @@ -207,6 +208,13 @@ Page({
},
/**
* 跳转到我的排队列表
*/
navigateToMyList: function(e) {
router.go('myList', { actId: this.data.activityInfo.activityId});
},
/**
* 点击用户头像,跳转到用户对应位置<已取消该功能>
*/
userTap: function(e) {
... ... @@ -248,6 +256,15 @@ Page({
},
/**
* 隐藏气泡
*/
hidePopup: function(e) {
this.setData({
hidePopup: 1
});
},
/**
* 点击参加活动按钮
*/
joinInQueue: function(e) {
... ... @@ -304,7 +321,6 @@ Page({
* 加入排队
*/
addQueue: function(actId, uid) {
if (!this.data.api_status) {
this.setData({
api_status: 1
... ... @@ -330,8 +346,6 @@ Page({
});
});
}
},
/**
... ... @@ -430,10 +444,7 @@ Page({
* 跳转到活动说明的H5页面
*/
navigateToDescPage: function() {
wx.navigateTo({
url: '../webview/webview?url=' + this.data.h5PageUrl[0].url + '&title=' + this.data.h5PageUrl[0].title
});
router.goUrl(this.data.h5PageUrl[0].url + '&title=' + this.data.h5PageUrl[0].title);
},
/**
... ... @@ -441,7 +452,6 @@ Page({
*/
navigateToPrizeUserList: function() {
if (this.data.activityInfo.isDrawEnd) {
router.go('prizeUserList', {actId: this.data.activityInfo.activityId});
}
},
... ... @@ -453,7 +463,6 @@ Page({
if (this.data.userInfo.isLucky) {
router.go('userCenter');
}
},
/**
... ...
... ... @@ -42,8 +42,8 @@
<!--悬浮按钮-->
<block wx:if="{{userInfo.isDrawline && !activityInfo.isEnd}}">
<view class='user-container' bindtap='userTap'>
<view class='userrank'>
<view class='user-container' bindtap='navigateToMyList'>
<view class='userrank' hidden='{{hidePopup}}'>
<view class='rank-text'>
<!-- {{userInfo.sort}} -->
查看我的排队号
... ... @@ -54,11 +54,13 @@
</view>
</view>
</block>
<!--如果用户已排队,并且活动结束, 展示用户中奖或未中奖的头像-->
<block wx:elif='{{userInfo.isDrawline && activityInfo.isEnd}}'>
<view class='user-container {{userInfo.isLucky ? "success" : "fail"}}' bindtap='navigateToUserCodePage'>
<view class='userrank'>
<view class='userrank' hidden='{{hidePopup}}'>
<view class='rank-text'>
{{userInfo.sort}}
<!-- {{userInfo.sort}} -->
查看我的排队号
</view>
</view>
<view class='userhead'>
... ... @@ -66,6 +68,7 @@
</view>
</view>
</block>
<!--如果活动正在进行中-->
<block wx:elif='{{activityInfo.isBegin === 1 && !activityInfo.isEnd}}'>
<view class='button-container' bindtap='joinInQueue'>
<view class='join-button'>
... ... @@ -73,6 +76,7 @@
</view>
</view>
</block>
<!--活动即将开始-->
<block wx:elif='{{!activityInfo.isBegin}}'>
<view class='button-container'>
<view class='end-button'>
... ... @@ -80,6 +84,7 @@
</view>
</view>
</block>
<!--活动结束-->
<block wx:elif='{{activityInfo.isEnd}}'>
<view class='button-container' bindtap='joinInQueue'>
<view class='end-button'>
... ...
// pages/queue/myList.js
Page({
import config from '../../common/config';
import api from '../../common/api';
import event from '../../common/event';
import LimitModel from '../../models/limit/index';
import helper from '../../utils/helper';
import wx from '../../utils/wx';
import { Actionsheet } from '../../vendors/zanui/index';
let app = getApp();
let router = global.router;
/**
* method=app.limitProduct.queryHelpInfo(助力信息)
method=app.limitProduct.addhelpUserInfo(添加助力信息)
method=app.drawline.getMyQueueList 获取我的排队列表
*/
Page(Object.assign({
/**
* 页面的初始数据
*/
* 页面的初始数据
*/
data: {
actId: 0,
userInfo: {}, // 用户信息
bgStyle: [ // 排队图片
'../../static/images/limit/queue_bg_1.png',
'../../static/images/limit/queue_bg_2.png',
'../../static/images/limit/queue_bg_3.png',
'../../static/images/limit/queue_bg_4.png',
'../../static/images/limit/queue_bg_5.png',
'../../static/images/limit/queue_bg_6.png',
'../../static/images/limit/queue_bg_7.png',
'../../static/images/limit/queue_bg_8.png'
],
vipImage: [ // 3种用户vip等级小图标
'',
'../../static/images/limit/level-1.png',
'../../static/images/limit/level-2.png',
'../../static/images/limit/level-3.png'
],
defaultAvatar: '../../static/images/icons/default-avatar.png',
api_status: 0, // 用于防止连续点击参加活动 0:没调用接口 1:正在调用接口
giftImage: '../../static/images/limit/gift.png',
hideInviteButton: 1, // 用户显示邀请按钮
queueList: [], // 排队列表
actionSheet: {
componentId: 'shareActionSheet',
show: false,
closeOnClickOverlay: true,
cancelText: '取消',
actions: [{
name: '邀请好友助力',
className: 'action-class',
loading: false,
openType: 'share'
}, {
name: '生成图片分享到朋友圈',
className: 'action-class',
loading: false,
}]
},
},
/**
* 生命周期函数--监听页面加载
*/
* 生命周期函数--监听页面加载
*/
onLoad: function(options) {
console.log(options);
let actId = options.actId;
let uid = app.getUid() || options.uid;
if (actId) {
this.setData({
actId: actId
});
this.getQueueList(actId);
}
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function() {
},
/**
* 生命周期函数--监听页面显示
*/
* 生命周期函数--监听页面显示
*/
onShow: function() {
if (app.getUid()) {
this.setData({
hideInviteButton: 0
});
}
},
/**
* 生命周期函数--监听页面隐藏
*/
* 生命周期函数--监听页面隐藏
*/
onHide: function() {
},
/**
* 生命周期函数--监听页面卸载
*/
* 生命周期函数--监听页面卸载
*/
onUnload: function() {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function() {
let actId = this.data.activityInfo.activityId;
wx.stopPullDownRefresh();
},
/**
* 页面上拉触底事件的处理函数
*/
* 页面上拉触底事件的处理函数
*/
onReachBottom: function() {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function() {
* 用户点击右上角分享
*/
onShareAppMessage: function(res) {
let params = {
FROM: res.from,
SHARE_RESUIL: 0,
TITLE: this.data.productName,
DESC: '我在有货限定频道发现一个不错的商品赶快来看看吧!',
PATH: `/pages/product/detail/detail?limitProductCode=${this.data.limitProductCode}&originUid=${app.getUid()}`,
};
// 用户点击右上角分享
return {
title: params.TITLE, // 分享标题
desc: params.DESC, // 分享描述
path: params.PATH, // 分享路径
success: function() {
params.SHARE_RESUIL = 1;
},
fail: function() {
params.SHARE_RESUIL = 2;
}
};
},
share: function() {
this.setData({
'actionSheet.show': true
});
},
handleZanActionsheetCancel() {
this.setData({
'actionSheet.show': false
});
},
// 当行动按钮中有一个被点击时触发
// index 代表被点击按钮在传入参数 actions 中的位置
handleZanActionsheetClick({index}) {
this.setData({
'actionSheet.show': false
});
let uid = this.data.originUid || this.data.uid;
if (index === 0) {
// detailModel.addShareAction(uid, this.data.limitProductCode);
} else if (index === 1) {
// 生成页面给
// detailModel.addShareAction(uid, this.data.limitProductCode).then(() => {
// router.go('snapShare', this.data.snapData);
// });
}
},
/**
* 邀请好友助力排队按钮
*/
inviteFriends: function(e) {
this.share();
},
/**
* 获取排队列表
*/
getQueueList: function(actId, limit = 10) {
let that = this;
return LimitModel.getMyQueueList(actId, limit).then(res => {
console.log(res);
if (res.data && res.data.length > 0) {
let result = [];
res.data.forEach((item, index) => {
if (!item.headIco) {
item.headIco = that.data.defaultAvatar;
} else {
item.headIco = helper.image(item.headIco, 100, 100, 1);
}
item.nickName = item.nickName || '用户' + item.uid;
item.nickName = item.nickName.length > 12 ? item.nickName.substring(0, 12) + '...' : item.nickName;
item.queueTime = this.formatTimeText(item.queueTime);
item.vipLevel = item.vipLevel || 0;
item.vipImage = this.data.vipImage[item.vipLevel];
let bgStyle = this.data.bgStyle;
let bgIndex = index % bgStyle.length;
item.background = helper.imgView(bgStyle[bgIndex], 340, 162, 1);
result.push(item);
});
this.setData({
queueList: result
});
return Promise.resolve({ code: 200, data: this.data.queueList });
} else {
return Promise.reject({ code: 203, message: '获取失败' });
}
});
},
formatTimeText: function(time) {
let new_time;
if (time < 60) {
new_time = time + 'sec';
} else if (time >= 60 && time < 60 * 60) {
new_time = parseInt(time / 60, 10) + 'min';
} else if (time >= 60 * 60 && time < 60 * 60 * 24) {
new_time = parseInt(time / (60 * 60), 10) + 'hour';
} else if (time >= 60 * 60 * 24) {
new_time = parseInt(time / (60 * 60 * 24), 10) + 'day';
}
return new_time;
}
});
}, Actionsheet));
... ...
{}
\ No newline at end of file
{
"navigationBarTitleText": "我的排队号",
"enablePullDownRefresh": true,
"backgroundColor": "#222",
"backgroundTextStyle": "light"
}
\ No newline at end of file
... ...
<!--pages/queue/myList.wxml-->
<text>pages/queue/myList.wxml</text>
<!--pages/limit/queue.wxml 我的排队号页面-->
<import src="../../vendors/zanui/actionsheet/index.wxml" />
<view class='container'>
<!--排队列表-->
<block class='queue-list' wx:for='{{queueList}}' wx:key='{{item.id}}'>
<view id='item_{{item.uid}}' class='queue-item {{item.uid === userInfo.uid ? "active" : ""}}'>
<view class='item-head-container'>
<!--headImage-->
<image class='item-head' src='{{item.headIco}}'></image>
<block wx:if='{{item.isLucky}}'>
<view class='gift-icon'>
<image src='{{giftImage}}'></image>
</view>
</block>
</view>
<view class='item-info-container'>
<!--itemInfo-->
<view class='item-user-rank'>{{item.sort}}</view>
<view class='item-user-name'>{{item.nickName}}</view>
<view class='item-user-time'>
<view class='item-user-time-icon'></view>
<view class='item-user-time-text'>{{item.queueTime}}</view>
<view class='item-user-vip-level' wx:if='{{item.vipLevel}}'>
<image src='{{item.vipImage}}'></image>
</view>
</view>
</view>
<view class='item-bg'>
<image src='{{item.background}}'></image>
</view>
</view>
</block>
<view class='invite-button' hidden='{{hideInviteButton}}' bindtap='inviteFriends'>
邀请好友助力排队
</view>
</view>
<template is="zan-actionsheet" data="{{...actionSheet}}" />
\ No newline at end of file
... ...
/* pages/limit/queue.wxss */
page {
background-color: #222;
}
.container {
display: flex;
height: 100%;
flex-direction: column;
align-items: center;
justify-content: flex-start;
box-sizing: border-box;
padding: 0;
}
scroll-view {
height: 1206rpx;
}
.queue-title {
display: flex;
flex-direction: column;
justify-content: flex-end;
width: 100%;
height: 352rpx;
background-size: 100% 100%;
}
image {
width: 100%;
height: 100%;
}
.queue-buttons {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
width: 100%;
height: 80rpx;
line-height: 80rpx;
}
.queue-desc-link {
color: #fff;
font-size: 24rpx;
margin-left: 30rpx;
}
.queue-prize-link {
height: 44rpx;
margin-right: 30rpx;
color: #fff;
font-size: 24rpx;
background-color: #a0a0a0;
border-radius: 30rpx;
line-height: 44rpx;
}
.queue-prize-link.active {
background-color: #c30016;
}
.user-container,
.button-container {
display: flex;
position: fixed;
height: 100rpx;
bottom: 42rpx;
right: 32rpx;
flex-direction: row;
align-items: flex-end;
justify-content: space-between;
z-index: 19;
}
/* 用户头像及排名 */
.userrank {
position: relative;
color: #fff;
margin-right: 10rpx;
border-radius: 14rpx 20rpx 0 14rpx;
background-color: #000;
}
.user-container.success .userrank {
background-color: #fed832;
}
.user-container.fail .userrank {
background-color: #b0b0b0;
}
.user-container.success image,
.user-container.fail image {
border: none;
}
/* 头像旁边的特殊形状,使用:after :before实现 */
.userrank .rank-text {
display: flex;
width: 100%;
height: 100%;
left: 0;
top: 0;
padding: 2px 6px;
align-items: center;
justify-content: center;
border: 2px solid #fff;
border-radius: 6px 6px 0rpx 6px;
box-sizing: border-box;
overflow: hidden;
font-size: 28rpx;
line-height: 1.2;
z-index: -1;
}
/* 先做一个圆角矩形,显示左边与下方边框,则左下角为圆角,并设置与父级的右边框对齐 */
.rank-text:after {
content: '';
width: 8px;
height: 50%;
border: none;
border-left: 2px solid #fff;
border-bottom: 2px solid #fff;
border-radius: 0 0 0 20rpx;
position: absolute;
bottom: 0rpx;
right: -5.8px;
box-sizing: border-box;
}
/* 在下面画一个矩形,显示下边框,背景从黑色渐变到透明 */
.rank-text:before {
content: '';
width: 10px;
height: 6px;
border: none;
border-bottom: 2px solid #fff;
border-radius: 2px;
position: absolute;
bottom: 0rpx;
right: -5px;
background: linear-gradient(45deg, #000 40%, transparent 60%);
box-sizing: border-box;
}
.user-container.success .rank-text:before {
background: linear-gradient(45deg, #fed832 40%, transparent 60%);
}
.user-container.fail .rank-text:before {
background: linear-gradient(45deg, #b0b0b0 40%, transparent 60%);
}
.userhead {
width: 108rpx;
height: 108rpx;
}
.userhead image {
border: 4rpx solid #fff;
border-radius: 50%;
box-sizing: border-box;
}
.join-button {
display: flex;
width: 108rpx;
height: 108rpx;
border: 4rpx solid #fff;
border-radius: 50%;
box-sizing: border-box;
background-color: #000;
align-items: center;
justify-content: center;
}
.end-button {
display: flex;
width: 108rpx;
height: 108rpx;
border: 4rpx solid #fff;
border-radius: 50%;
box-sizing: border-box;
background-color: #a0a0a0;
align-items: center;
justify-content: center;
}
.join-button text,
.end-button text {
display: flex;
width: 60rpx;
height: 72rpx;
text-align: center;
align-items: center;
color: #fff;
font-size: 28rpx;
line-height: 1.2;
}
.queue-list { /* 排队列表 */
display: flex;
width: 100%;
flex-direction: column;
}
.queue-item { /* 列表中的item */
display: flex;
position: relative;
width: 100%;
height: 162rpx;
align-items: center;
color: white;
background-color: #444;
box-sizing: border-box;
overflow: hidden;
}
.queue-item.active { /* 用户自身白底渐变 */
background: linear-gradient(90deg, rgba(255, 255, 255, 0.8) 5%, rgba(255, 255, 255, 0.1) 55%, rgba(255, 255, 255, 0.1));
color: #000;
}
.queue-item:after { /* item下方细线 */
content: '';
position: absolute;
width: 100%;
height: 100%;
bottom: 0;
left: 0;
border-bottom: 1rpx solid rgba(34, 34, 34, 0.5);
transform: scaleX(0.6) scaleY(0.3);
transform-origin: 0% 100%;
z-index: 0;
}
.queue-item .item-head-container { /* item头像 */
display: flex;
position: relative;
width: 150rpx;
height: 150rpx;
align-items: center;
justify-content: center;
box-sizing: border-box;
}
.item-head-container .item-head {/* item头像图 */
width: 96rpx;
height: 96rpx;
border-radius: 50%;
}
.item-head-container .gift-icon {
position: absolute;
width: 30rpx;
height: 30rpx;
right: 24rpx;
bottom: 34rpx;
z-index: 5;
}
.item-info-container { /* item用户相关信息 */
display: flex;
flex-flow: column;
width: 260rpx;
height: 150rpx;
align-items: flex-start;
justify-content: center;
box-sizing: border-box;
}
.item-user-rank { /* item 用户排名 */
font-size: 36rpx;
font-weight: bold;
line-height: 40rpx;
}
.item-user-name { /* item 用户名称 */
width: 100%;
font-size: 24rpx;
line-height: 36rpx;
overflow: hidden;
white-space: nowrap;
}
.item-user-time { /* item 用户排队时间 */
display: flex;
justify-content: center;
height: 32rpx;
line-height: 32rpx;
align-items: center;
font-size: 24rpx;
color: rgba(255, 255, 255, 0.7);
}
.item-user-vip-level { /* vip等级 */
width: 52rpx;
height: 32rpx;
}
.item-user-time-icon { /* 时间小图标 */
width: 16rpx;
height: 16rpx;
background-image: url('http://imgboys1.yohobuy.com/staticimg/2018/03/05/10/019d6b2073bc15c96a5ae74b8b73f0d2fc.png');
background-size: 100% 100%;
margin-right: 8rpx;
}
.queue-item.active .item-user-time-icon { /* 用户自身白底时的时间小图标 */
background-image: url('http://imgboys1.yohobuy.com/staticimg/2018/03/05/10/01c72176785481a14216a7eda3786aee01.png');
}
.item-user-time-text { /* 时间文字 */
margin-right: 8rpx;
}
.queue-item.active .item-user-time { /* 用户自身白底时的时间文字 */
color: rgba(0, 0, 0, 0.7);
}
.item-bg { /* 右边的排队图片 */
width: 340rpx;
height: 100%;
box-sizing: border-box;
z-index: 1;
}
.item-bg image {
width: 100%;
height: 100%;
}
.invite-button {
position: fixed;
width: 280rpx;
height: 50rpx;
line-height: 50rpx;
color: white;
text-align: center;
font-size: 26rpx;
left: 66rpx;
bottom: 30rpx;
border-radius: 30rpx;
background-color: #d0021b;
}
... ...
... ... @@ -33,7 +33,7 @@
"list": []
},
"miniprogram": {
"current": 0,
"current": 4,
"list": [
{
"id": 0,
... ... @@ -63,10 +63,10 @@
"id": -1,
"name": "限定商品排队",
"pathName": "pages/queue/index",
"query": "actId=332"
},
{
"id": -1,
"query": "actId=350"
},
{
"id": -1,
"name": "情详页-好友助力",
"pathName": "pages/product/detail/detail",
"query": "limitProductCode=2018062115403668"
... ...