diff --git a/app/app.json b/app/app.json index 48b113b..7bc16a9 100644 --- a/app/app.json +++ b/app/app.json @@ -6,7 +6,10 @@ "pages/account/bindMobile", "pages/product/detail/detail", "pages/webview/webview", - "pages/snapshootShare/snapshootShare" + "pages/snapshootShare/snapshootShare", + "pages/queue/index", + "pages/queue/myList", + "pages/queue/prizeUserList" ], "window": { "backgroundTextStyle": "dark", diff --git a/app/models/limit/index.js b/app/models/limit/index.js index cba77e8..ca2c55b 100644 --- a/app/models/limit/index.js +++ b/app/models/limit/index.js @@ -1,10 +1,114 @@ import api from '../../common/api'; export default { + /** + * + */ getLimitSaleList(data) { // 获取限定发售列表 return api.get({ url: '', data: data }); + }, + + /** + * 获取活动信息 + */ + getActivityInfo(actId) { + if (!actId) { + return Promise.reject({ + code: 403, + message: '缺少actId参数' + }); + } + return api.get({ + url: '', + data: { + method: 'app.drawline.getActivityInfo', + activityId: actId + } + }); + }, + + /** + * 获取用户参与排队的信息 + */ + getUserActivityInfo(actId) { + if (!actId) { + return Promise.reject({ + code: 403, + message: '缺少actId参数' + }); + } + return api.get({ + url: '', + data: { + method: 'app.drawline.getUserActivityInfo', + activityId: actId + } + }); + }, + + /** + * 获取排队列表 + */ + getQueueList(actId, start = 0, limit = 50) { + if (!actId) { + return Promise.reject({ + code: 403, + message: '缺少actId参数' + }); + } + + return api.get({ + url: '', + data: { + activityId: actId, + sort: start, + limit: limit, + method: 'app.drawline.getQueueList', + randCode: (new Date()).getTime() + } + }); + }, + + /** + * 加入排队 + */ + addQueue(actId) { + if (!actId) { + return Promise.reject({ + code: 403, + message: '缺少actId参数' + }); + } + return api.post({ + url: '', + data: { + method: 'app.drawline.addQueue', + activityId: actId + } + }); + }, + + /** + * 获取中奖名单 + */ + getPrizeUserList(actId, limit = 30, 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.getLuckyUserList' + } + }); } }; diff --git a/app/pages/home/index.js b/app/pages/home/index.js index f5d9284..129c68e 100644 --- a/app/pages/home/index.js +++ b/app/pages/home/index.js @@ -215,11 +215,19 @@ Page({ goReferer: function() { // 无需绑定的获取用户信息后返回 if (this.data.referer && !this.data.needBind) { router.goUrl(`${config.MINI_APP_DOMAIN}${this.data.referer}`); + this.setData({ + referer: '', + needBind: 1 + }); } }, goBack: function() { if (this.data.referer) { router.goUrl(`${config.MINI_APP_DOMAIN}${this.data.referer}`); + this.setData({ + referer: '', + needBind: 1 + }); } } }); diff --git a/app/pages/product/detail/detail.js b/app/pages/product/detail/detail.js index e0119c4..b0d114a 100644 --- a/app/pages/product/detail/detail.js +++ b/app/pages/product/detail/detail.js @@ -117,6 +117,7 @@ Page(Object.assign({ let originUid = options.originUid ? options.originUid : ''; let uid = app.getUid(); + // let uid = '500027570'; // originUid = '500027570'; @@ -429,4 +430,4 @@ Page(Object.assign({ }); } -}, Actionsheet)); \ No newline at end of file +}, Actionsheet)); diff --git a/app/pages/queue/index.js b/app/pages/queue/index.js new file mode 100644 index 0000000..0a8da76 --- /dev/null +++ b/app/pages/queue/index.js @@ -0,0 +1,480 @@ +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'; + + +let app = getApp(); +let router = global.router; + +/** + * method=app.limitProduct.queryHelpInfo(助力信息) +method=app.limitProduct.addhelpUserInfo(添加助力信息) +method=app.drawline.getMyQueueList 获取我的排队列表 + */ +/** + * 接口:获取用户排队信息 + * https://api.yoho.cn/?activityId=179&app_version=6.4.0&client_secret=ee1114702f3db67327afe9eeeac92b5a&client_type=iphone&fromPage=iFP_Queue&method=app.drawline.getUserActivityInfo&os_version=11.2.5&physical_channel=1&screen_size=375x667&session_key=3c9a644c3d95d9a7453c61f3009b2884&udid=1a61c0b4db7b6e27999b1237977b5347eb503956&uid=349709&v=7 + * + * 接口:获取排队用户信息 + * https://api.yoho.cn/?activityId=179&app_version=6.4.0&client_secret=e8f42148d30976fb44dfff1d89ea7a60&client_type=iphone&fromPage=iFP_Queue&limit=50&method=app.drawline.getQueueList&os_version=11.2.5&physical_channel=1&screen_size=375x667&session_key=3c9a644c3d95d9a7453c61f3009b2884&sort=0&udid=1a61c0b4db7b6e27999b1237977b5347eb503956&uid=349709&v=7 + * + * 接口:排队活动 + * https://api.yoho.cn/?activityId=179&app_version=6.4.0&client_secret=52db394bdb79e2dcf0e2a2782496ee78&client_type=iphone&fromPage=iFP_Queue&method=app.drawline.getActivityInfo&os_version=11.2.5&physical_channel=1&screen_size=375x667&session_key=3c9a644c3d95d9a7453c61f3009b2884&udid=1a61c0b4db7b6e27999b1237977b5347eb503956&uid=349709&v=7 + * + * 接口:中奖列表 + * https://api.yoho.cn/?activityId=179&app_version=6.4.0&client_secret=936b01c80de696e81c59fee6ea64fd50&client_type=iphone&fromPage=iFP_QueueResult&limit=20&method=app.drawline.getLuckyUserList&os_version=11.2.6&page=1&physical_channel=1&screen_size=375x667&session_key=3c9a644c3d95d9a7453c61f3009b2884&udid=1a61c0b4db7b6e27999b1237977b5347eb503956&uid=349709&v=7 + * + * 接口:添加用户分享记录 + * https://api.yoho.cn/?activityId=294&app_version=6.4.0&client_secret=e7ecfcd3410f5c8b0054c07b8366a700&client_type=iphone&fromPage=iFP_LimitPurchaseDetail&method=app.limitProduct.addUserShare&os_version=11.2.6&physical_channel=1&screen_size=375x667&session_key=d4c06294461b138058ce3aa2978cd602&udid=1a61c0b4db7b6e27999b1237977b5347eb503956&uid=349709&v=7 HTTP/1.1 + */ + +Page({ + + /** + * 页面的初始数据 + */ + data: { + userInfo: {}, // 用户信息 + activityInfo: {}, // 活动信息 + test_uid: [349709, // 测试用 + 500030924, + 500030922, + 500030918, + 500030916, + 500030914, + 500030912, + 500030910, + 500030908, + 500030906, + 500030904, + 500030890, + 500030888, + 500030886, + 500030884, + 500030876, + 500030830, + 500030694, + 500030690, + 500030688 + ], + now_test_uid_index: 15, + h5PageUrl: [ + { + title: '排队活动说明', + url: 'https://activity.yoho.cn/feature/249.html?nodownload=1' + } + ], + 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', + resultHead: [ + '../../static/images/limit/fail-head.png', + '../../static/images/limit/success-head.png' + ], + api_status: 0, // 用于防止连续点击参加活动 0:没调用接口 1:正在调用接口 + giftImage: '../../static/images/limit/gift.png', + queueList: [], // 排队列表 + scrollTop: 0, // 控制scroll-view滚动的实际位置 + tempScrollTop: 0, // 手动滚动页面时保存当前滚动的位置 + showMsg: 0 // 0不显示提示框, 1显示提示框 + }, + + /** + * 生命周期函数--监听页面加载 + */ + onLoad: function(options) { + console.log(options); + let actId = options.actId; + let uid = app.getUid() || this.data.test_uid[this.data.now_test_uid_index]; + + if (actId) { + this.getActivityInfo(actId).then(res => { + console.log('res', res); + if (res.code === 200) { + this.getQueueList(actId, 0); + } + if (uid) { + this.getUserActivityInfo(actId, uid); + } + }); // 获取活动信息 + } + + + }, + + /** + * 生命周期函数--监听页面初次渲染完成 + */ + onReady: function() { + + }, + + /** + * 生命周期函数--监听页面显示 + */ + onShow: function() { + }, + + /** + * 生命周期函数--监听页面隐藏 + */ + onHide: function() { + }, + + /** + * 生命周期函数--监听页面卸载 + */ + onUnload: function() { + }, + + /** + * 页面相关事件处理函数--监听用户下拉动作 + */ + onPullDownRefresh: function() { + let actId = this.data.activityInfo.activityId; + + if (actId) { + this.getActivityInfo(actId).then(res => { + console.log('res', res); + if (res.code === 200) { + this.getQueueList(actId, 0); + wx.stopPullDownRefresh(); + } + }); // 获取活动信息 + } + }, + + /** + * 页面上拉触底事件的处理函数 + */ + onReachBottom: function() { + console.log('到底部啦'); + let actId = this.data.activityInfo.activityId; + let sort = this.data.queueList[this.data.queueList.length - 1].sort; + let limit = 50; + + if (sort > 1) { + if (sort - 1 < limit) { + limit = sort - 1; + } + this.getQueueList(actId, sort - 1, limit, true); + } + }, + + /** + * 用户点击右上角分享 + */ + onShareAppMessage: function(res) { + return { + title: this.data.activityInfo.activityName || '排队活动', + path: './?actId=' + this.data.activityInfo.activityId, + success: function(data) { + console.log(data); + }, + fail: function(data) { + console.log(data); + } + }; + }, + + /** + * scroll-view滚动事件 + */ + scroll: function(e) { + console.log(e); + let scrollTop = e.detail.scrollTop; + + this.setData({ + tempScrollTop: scrollTop + }); + }, + + /** + * 点击用户头像,跳转到用户对应位置<已取消该功能> + */ + userTap: function(e) { + console.log(this.data.userInfo); + let uid = this.data.userInfo.uid; + let sort = this.data.userInfo.sort || 0; + let limit = sort >= 50 ? 50 : sort; + let actId = this.data.activityInfo.activityId; + let list_length = this.data.queueList.length > 200 ? 200 : this.data.queueList.length; + + for (let i = 0; i < list_length; i++) { + let item = this.data.queueList[i]; + + if (item.uid === uid) { + this.scrollPage('item_' + item.uid); + console.log(item.uid); + break; + } else if (i === list_length - 1) { + console.log(i); + this.getQueueList(actId, sort, limit).then(res => { + console.log('111', res); + if (res.code === 200) { + let item_id = 'item_' + uid; + + this.scrollPage(item_id); + } + }); + } + } + }, + + /** + * 关闭提示框 + */ + closeMsg: function(e) { + this.setData({ + showMsg: 0 + }); + }, + + /** + * 点击参加活动按钮 + */ + joinInQueue: function(e) { + let uid = app.getUid() || this.data.test_uid[this.data.now_test_uid_index]; + let activityId = this.data.activityInfo.activityId; + let isEnd = this.data.activityInfo.isEnd === 0 ? 0 : 1; + + if (activityId && uid && !isEnd) { + this.addQueue(this.data.activityInfo.activityId, uid); + } else if (isEnd) { + + this.setData({ + showMsg: 1 + }); + } + }, + + /** + * 获取活动信息 + */ + getActivityInfo: function(actId) { + return LimitModel.getActivityInfo(actId).then(res => { // 获取活动信息 + console.log(res); + if (res.code === 200) { + let topBanner = helper.image(res.data.topBanner, 750, 352, 1); + let isBegin = res.data.isBegin; + let isDrawEnd = res.data.isDrawEnd; + let isEnd = res.data.isEnd; + let prizeType = res.data.prizeType; + let activityName = res.data.activityName; + let activityId = res.data.activityId; + let bgStyle = res.data.bgStyle && res.data.bgStyle.length > 0 ? res.data.bgStyle : this.data.bgStyle; + + this.setData({ + activityInfo: { + topBanner: topBanner, + isBegin: isBegin, // 是否已开始 0-未开始 1-进行中 2-已结束 + isDrawEnd: isDrawEnd, // 是否已开奖 1-开奖 0-未开奖 + isEnd: isEnd, // 是否已结束 1-结束 0-未结束 + prizeType: prizeType, // 奖品类型1-有货币 2-优惠券 3-限购码 + activityId: activityId, + activityName: activityName + }, + bgStyle: bgStyle + }); + return Promise.resolve({code: res.code}); + } else { + return Promise.reject({code: res.code}); + } + }); + }, + + /** + * 加入排队 + */ + addQueue: function(actId, uid) { + + if (!this.data.api_status) { + this.setData({ + api_status: 1 + }); + LimitModel.addQueue(actId).then((res) => { + console.log('加入排队', res); + if (res.code === 200 && res.data) { + let sort = res.data.sort; + + this.setData({ + userInfo: Object.assign(this.data.userInfo, {sort: sort, isDrawline: 1}), + showMsg: 1, + api_status: 0 + }); + setTimeout(this.getQueueList, 1000); + + // this.getQueueList(this.data.activityInfo.activityId, 0); + } + }).catch(() => { + console.log('错误'); + this.setData({ + api_status: 0 + }); + }); + } + + + }, + + /** + * 获取用户参与排队的信息 + */ + getUserActivityInfo: function(actId) { + LimitModel.getUserActivityInfo(actId).then(res => { + console.log('getUserActivityInfo:', res); + this.setData({ + userInfo: { + uid: res.data.uid, + headIco: helper.image(res.data.headIco, 128, 128, 1) || this.data.defaultAvatar, + isDrawline: res.data.isDrawline, + isLucky: res.data.isLucky, + sort: res.data.sort + } + }); + + if (this.data.activityInfo.isDrawEnd) { + this.setData({ + showMsg: 1 + }); + } + }); + }, + + /** + * 获取排队列表 + */ + getQueueList: function(actId, start = 0, limit = 50, isAdd = false) { + let that = this; + + actId = actId || this.data.activityInfo.activityId; + + return LimitModel.getQueueList(actId, start, 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); + }); + if (isAdd) { // 如果是下拉则添加数据 + this.setData({ + queueList: this.data.queueList.concat(result) + }); + } else { // 普通情况下覆盖 + this.setData({ + queueList: result + }); + } + return Promise.resolve({code: 200, data: this.data.queueList}); + } else { + return Promise.reject({code: 203, message: '获取失败'}); + } + }); + }, + scrollPage: function(id) { // 滚动页面到对应位置 + if (id) { + let item_query = wx.createSelectorQuery(); + + item_query.select('#' + id).boundingClientRect(); + item_query.selectViewport().scrollOffset(); + item_query.exec(res => { + console.log('scroll:', res); + if (res.length > 0 && this.data.queueList.length > 6 && res[0].top !== 0) { + wx.pageScrollTo({ + scrollTop: res[0].top + res[1].scrollTop, + duration: 500 + }); + + // this.setData({ + // scrollTop: res[0].top + this.data.tempScrollTop + // }) + } + }); + } + + }, + + /** + * 跳转到活动说明的H5页面 + */ + navigateToDescPage: function() { + wx.navigateTo({ + url: '../webview/webview?url=' + this.data.h5PageUrl[0].url + '&title=' + this.data.h5PageUrl[0].title + }); + + }, + + /** + *跳转到中奖名单页面 + */ + navigateToPrizeUserList: function() { + if (this.data.activityInfo.isDrawEnd) { + + router.go('prizeUserList', {actId: this.data.activityInfo.activityId}); + } + }, + + /** + * 跳转到个人中心限购码页面 + */ + navigateToUserCodePage: function() { + if (this.data.userInfo.isLucky) { + router.go('userCenter'); + } + + }, + + /** + * 处理接口返回的图片url + */ + formatImgUrl: function(url, mode, width, height) { + return url.replace(/{mode}/g, mode).replace(/{width}/g, width).replace(/{height}/g, height); + }, + + 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; + } +}); diff --git a/app/pages/queue/index.json b/app/pages/queue/index.json new file mode 100644 index 0000000..1c57f01 --- /dev/null +++ b/app/pages/queue/index.json @@ -0,0 +1,6 @@ +{ + "navigationBarTitleText": "参加排队", + "enablePullDownRefresh": true, + "backgroundColor": "#222", + "backgroundTextStyle": "light" +} \ No newline at end of file diff --git a/app/pages/queue/index.wxml b/app/pages/queue/index.wxml new file mode 100644 index 0000000..635e2d8 --- /dev/null +++ b/app/pages/queue/index.wxml @@ -0,0 +1,139 @@ +<!--pages/limit/queue.wxml 限定商品用户排队页面--> +<view class='container'> + <!--头部--> + <!-- <scroll-view scroll-y scroll-top='{{scrollTop}}' bindscroll='scroll' bindscrolltolower='onReachBottom' scroll-with-animation> --> + <view class='queue-title' style='background-image: url("{{activityInfo.topBanner}}")'> + <view class='queue-buttons'> + <text class='queue-desc-link' bindtap='navigateToDescPage'>点击查看活动说明>></text> + <button class='queue-prize-link {{activityInfo.isDrawEnd ? "active" : ""}}' bindtap='navigateToPrizeUserList'>{{activityInfo.isDrawEnd ? '查看中奖名单' : '等待开奖中'}}</button> + </view> + </view> + <!--排队列表--> + <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> + <!-- </scroll-view> --> + + + <!--悬浮按钮--> + <block wx:if="{{userInfo.isDrawline && !activityInfo.isEnd}}"> + <view class='user-container' bindtap='userTap'> + <view class='userrank'> + <view class='rank-text'> + <!-- {{userInfo.sort}} --> + 查看我的排队号 + </view> + </view> + <view class='userhead'> + <image src='{{userInfo.headIco}}'></image> + </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='rank-text'> + {{userInfo.sort}} + </view> + </view> + <view class='userhead'> + <image src='{{resultHead[userInfo.isLucky]}}'></image> + </view> + </view> + </block> + <block wx:elif='{{activityInfo.isBegin === 1 && !activityInfo.isEnd}}'> + <view class='button-container' bindtap='joinInQueue'> + <view class='join-button'> + <text>参加活动</text> + </view> + </view> + </block> + <block wx:elif='{{!activityInfo.isBegin}}'> + <view class='button-container'> + <view class='end-button'> + <text>即将开售</text> + </view> + </view> + </block> + <block wx:elif='{{activityInfo.isEnd}}'> + <view class='button-container' bindtap='joinInQueue'> + <view class='end-button'> + <text>活动结束</text> + </view> + </view> + </block> + + <!--弹出消息框--> + <view class='msg-container' hidden='{{!showMsg ? true : false}}'> + <block wx:if='{{userInfo.sort}}'><!--用户有排队信息的情况下--> + <block wx:if='{{activityInfo.isDrawEnd}}'><!--如果活动结束,并开奖--> + <block wx:if='{{userInfo.isLucky}}'><!--中奖弹框--> + <text class='title'>恭喜!</text> + <text class='queue-text lucky'> + <text>恭喜您限购码GET,请到个人中心查看明细。</text> + </text> + <view class='msg-button-container'> + <view class='button-close' bindtap='closeMsg'>关闭</view> + <button class='button-share' plain='true' bindtap='navigateToUserCodePage'>去看看</button> + </view> + </block> + <block wx:else><!--没中奖弹框--> + <text class='title'>OOPS!</text> + <text class='queue-text lucky'> + <text>幸运女神擦肩而过,不要灰心下次就是您!</text> + </text> + <view class='msg-button-container fail'> + <view class='button-close' bindtap='closeMsg'>关闭</view> + </view> + </block> + </block> + <block wx:else><!--活动没结束,排队成功弹框--> + <text class='title'>排队成功</text> + <text class='queue-text'> + <text>您的排队号为: </text> + <text class='queue-num'>{{userInfo.sort}}</text> + </text> + <text class='share-text'>分享给小伙伴,中奖几率更高哦~</text> + <view class='msg-button-container'> + <view class='button-close' bindtap='closeMsg'>关闭</view> + <button class='button-share' open-type="share" plain='true'>去分享</button> + </view> + </block> + </block> + <block wx:else><!--活动结束弹框--> + <text class='title'>OOPS!</text> + <text class='queue-text fail'> + <text>您来晚啦,下次早点哦</text> + </text> + <view class='msg-button-container fail'> + <view class='button-close' bindtap='closeMsg'>关闭</view> + </view> + </block> + + </view> +</view> \ No newline at end of file diff --git a/app/pages/queue/index.wxss b/app/pages/queue/index.wxss new file mode 100644 index 0000000..9390a11 --- /dev/null +++ b/app/pages/queue/index.wxss @@ -0,0 +1,452 @@ +/* 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%; +} + +.msg-container { + display: flex; + position: fixed; + flex-direction: column; + align-items: center; + justify-content: flex-start; + width: 540rpx; + height: 326rpx; + left: 106rpx; + top: 376rpx; + border-radius: 10rpx; + background-color: #fff; + z-index: 19; +} + +.msg-container .title { + width: 100%; + font-size: 36rpx; + text-align: center; + padding-top: 41rpx; + padding-bottom: 17rpx; + color: #d0021b; +} + +.msg-container .queue-text { + display: flex; + width: 100%; + height: 46rpx; + justify-content: center; + align-items: center; + font-size: 30rpx; +} + +.queue-text.fail { + height: 92rpx; + line-height: 46rpx; +} + +.queue-text.lucky { + width: 86%; + height: 92rpx; + line-height: 46rpx; + text-align: center; +} + +.queue-text .queue-num { + color: #d0021b; +} + +.msg-container .share-text { + display: flex; + width: 100%; + height: 46rpx; + justify-content: center; + align-items: center; + font-size: 30rpx; +} + +.msg-container .msg-button-container { + display: flex; + position: relative; + width: 100%; + height: 89rpx; + margin-top: 39rpx; + box-sizing: border-box; +} + +.msg-button-container:before { + content: ''; + position: absolute; + width: 100%; + height: 10%; + top: 0; + left: 0; + border-top: 1rpx solid rgba(34, 34, 34, 0.5); + transform: scaleY(0.2); + transform-origin: 0% 0%; + z-index: 0; +} + +.msg-button-container view { + position: relative; + width: 50%; + height: 100%; + border: none; + text-align: center; + line-height: 89rpx; + font-size: 32rpx; + box-sizing: border-box; +} + +.msg-button-container.fail view { + width: 100%; + color: #d0021b; +} + +.msg-button-container .button-share:before { + content: ''; + position: absolute; + width: 10%; + height: 100%; + top: 0; + left: 0; + border-left: 1rpx solid rgba(34, 34, 34, 0.5); + transform: scaleX(0.2); + transform-origin: 0% 50%; + z-index: 1; +} + +.msg-button-container .button-share { + width: 50%; + height: 100%; + margin: 0; + padding: 0; + border-color: rgba(255, 255, 255, 0); + color: #d0021b; +} diff --git a/app/pages/queue/myList.js b/app/pages/queue/myList.js new file mode 100644 index 0000000..c6ea9b9 --- /dev/null +++ b/app/pages/queue/myList.js @@ -0,0 +1,66 @@ +// pages/queue/myList.js +Page({ + + /** + * 页面的初始数据 + */ + data: { + + }, + + /** + * 生命周期函数--监听页面加载 + */ + onLoad: function(options) { + + }, + + /** + * 生命周期函数--监听页面初次渲染完成 + */ + onReady: function() { + + }, + + /** + * 生命周期函数--监听页面显示 + */ + onShow: function() { + + }, + + /** + * 生命周期函数--监听页面隐藏 + */ + onHide: function() { + + }, + + /** + * 生命周期函数--监听页面卸载 + */ + onUnload: function() { + + }, + + /** + * 页面相关事件处理函数--监听用户下拉动作 + */ + onPullDownRefresh: function() { + + }, + + /** + * 页面上拉触底事件的处理函数 + */ + onReachBottom: function() { + + }, + + /** + * 用户点击右上角分享 + */ + onShareAppMessage: function() { + + } +}); diff --git a/app/pages/queue/myList.json b/app/pages/queue/myList.json new file mode 100644 index 0000000..9e26dfe --- /dev/null +++ b/app/pages/queue/myList.json @@ -0,0 +1 @@ +{} \ No newline at end of file diff --git a/app/pages/queue/myList.wxml b/app/pages/queue/myList.wxml new file mode 100644 index 0000000..b1c9dd2 --- /dev/null +++ b/app/pages/queue/myList.wxml @@ -0,0 +1,2 @@ +<!--pages/queue/myList.wxml--> +<text>pages/queue/myList.wxml</text> diff --git a/app/pages/queue/myList.wxss b/app/pages/queue/myList.wxss new file mode 100644 index 0000000..e69de29 --- /dev/null +++ b/app/pages/queue/myList.wxss diff --git a/app/pages/queue/prizeUserList.js b/app/pages/queue/prizeUserList.js new file mode 100644 index 0000000..5d29406 --- /dev/null +++ b/app/pages/queue/prizeUserList.js @@ -0,0 +1,123 @@ +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'; + +let app = getApp(); +let router = global.router; + +Page({ + + /** + * 页面的初始数据 + */ + data: { + actId: 0, + prizeUserList: [], + vipImage: [ // 3种用户vip等级小图标 + '', + '../../static/images/limit/level-1.png', + '../../static/images/limit/level-2.png', + '../../static/images/limit/level-3.png' + ], + giftImage: '../../static/images/limit/gift.png' + }, + + /** + * 生命周期函数--监听页面加载 + */ + onLoad: function(options) { + let actId = options.actId; + + this.setData({ + actId: actId + }); + + if (actId) { + this.getPrizeUserList(actId); + } + + }, + + /** + * 生命周期函数--监听页面初次渲染完成 + */ + onReady: function() { + + }, + + /** + * 生命周期函数--监听页面显示 + */ + onShow: function() { + + }, + + /** + * 生命周期函数--监听页面隐藏 + */ + onHide: function() { + + }, + + /** + * 生命周期函数--监听页面卸载 + */ + onUnload: function() { + + }, + + /** + * 页面相关事件处理函数--监听用户下拉动作 + */ + onPullDownRefresh: function() { + wx.stopPullDownRefresh(); + }, + + /** + * 页面上拉触底事件的处理函数 + */ + onReachBottom: function() { + + }, + + getPrizeUserList: function(actId, limit = 30, page = 1) { + actId = actId || this.data.actId; + + return LimitModel.getPrizeUserList(actId, limit, page).then(res => { + console.log(res); + if (res.data && res.data.list.length > 0) { + let result = []; + + res.data.list.forEach((item, index) => { + if (!item.headIco) { + item.headIco = '../../static/images/icons/default-avatar.png'; + } 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.vipLevel = item.vipLevel || 0; + item.vipImage = this.data.vipImage[item.vipLevel]; + result.push(item); + }); + console.log('prize', result); + this.setData({ + prizeUserList: result + }); + return Promise.resolve({ code: 200, data: this.data.prizeUserList }); + } else { + return Promise.reject({ code: 203, message: '获取失败' }); + } + }); + }, + + /** + * 处理接口返回的图片url + */ + formatImgUrl: function(url, mode, width, height) { + return url.replace(/{mode}/g, mode).replace(/{width}/g, width).replace(/{height}/g, height); + } +}); diff --git a/app/pages/queue/prizeUserList.json b/app/pages/queue/prizeUserList.json new file mode 100644 index 0000000..26b3261 --- /dev/null +++ b/app/pages/queue/prizeUserList.json @@ -0,0 +1,6 @@ +{ + "navigationBarTitleText": "中奖名单", + "enablePullDownRefresh": true, + "backgroundColor": "#222", + "backgroundTextStyle": "light" +} \ No newline at end of file diff --git a/app/pages/queue/prizeUserList.wxml b/app/pages/queue/prizeUserList.wxml new file mode 100644 index 0000000..abdd05b --- /dev/null +++ b/app/pages/queue/prizeUserList.wxml @@ -0,0 +1,20 @@ +<!--排队活动中奖名单列表--> +<view class='container'> + <view class='queue-list'> + <view class='queue-item' wx:for='{{prizeUserList}}' wx:key='{{item.id}}'> + <view class='head-container'> + <image src='{{item.headIco}}'></image> + <view class='gift-icon'> + <image src='{{giftImage}}'></image> + </view> + </view> + <view class='info-container'> + <text class='user-rank'>{{item.sort}}</text> + <text class='user-name'>{{item.nickName}}</text> + <view class='user-vip-level'> + <image src='{{item.vipImage}}'></image> + </view> + </view> + </view> + </view> +</view> \ No newline at end of file diff --git a/app/pages/queue/prizeUserList.wxss b/app/pages/queue/prizeUserList.wxss new file mode 100644 index 0000000..04e5f13 --- /dev/null +++ b/app/pages/queue/prizeUserList.wxss @@ -0,0 +1,104 @@ +page { + background-color: #222; +} + +image { + width: 100%; + height: 100%; +} + +.container { + display: flex; + height: 100%; + flex-direction: column; + align-items: center; + justify-content: flex-start; + box-sizing: border-box; + padding: 0; +} + +.queue-list { + width: 100%; + display: flex; + flex-direction: row; + align-content: flex-start; + flex-wrap: wrap; + box-sizing: border-box; +} + +.queue-item { + display: flex; + flex-shrink: 0; + flex-direction: row; + align-items: center; + width: 374rpx; + height: 176rpx; + border-top: 1rpx solid #222; + background-color: #3a3a3a; + font-size: 24rpx; + color: #fff; +} + +.queue-item:nth-child(odd) { + margin-right: 1rpx; +} + +.queue-item .head-container { + display: flex; + position: relative; + align-items: center; + justify-content: center; + width: 156rpx; + height: 156rpx; +} + +.head-container image { + width: 96rpx; + height: 96rpx; + border-radius: 50%; + box-sizing: border-box; +} + +.head-container .gift-icon { + position: absolute; + width: 30rpx; + height: 30rpx; + right: 24rpx; + bottom: 34rpx; + z-index: 5; +} + +.gift-icon image { + width: 100%; + height: 100%; + border: none; +} + +.queue-item .info-container { + display: flex; + flex-direction: column; + align-items: flex-start; + justify-content: center; + width: 210rpx; + height: 156rpx; + overflow: hidden; +} + +.user-rank { /* item 用户排名 */ + font-size: 36rpx; + font-weight: bold; + line-height: 40rpx; +} + +.user-name { + width: 100%; + font-size: 24rpx; + line-height: 36rpx; + overflow: hidden; + white-space: nowrap; +} + +.info-container .user-vip-level { + width: 40rpx; + height: 25rpx; +} diff --git a/app/pages/snapshootShare/snapshootShare.js b/app/pages/snapshootShare/snapshootShare.js index e06735a..865b7b8 100644 --- a/app/pages/snapshootShare/snapshootShare.js +++ b/app/pages/snapshootShare/snapshootShare.js @@ -2,8 +2,8 @@ let app = getApp(); const windowWidth = app.globalData.systemInfo.windowWidth; const windowHeight = app.globalData.systemInfo.windowHeight; const screenHeight = app.globalData.systemInfo.screenHeight; + const scale = windowWidth / 375; -// const scale = 0.6 var Point = function(x, y) { return { @@ -235,4 +235,4 @@ Page({ hidden() { wx.navigateBack(); } -}); \ No newline at end of file +}); diff --git a/app/project.config.json b/app/project.config.json index f46977f..6136870 100644 --- a/app/project.config.json +++ b/app/project.config.json @@ -45,7 +45,7 @@ "id": -1, "name": "个人中心首页", "pathName": "pages/home/index", - "query": "f" + "query": "" }, { "id": 2, @@ -61,6 +61,12 @@ }, { "id": -1, + "name": "限定商品排队", + "pathName": "pages/queue/index", + "query": "actId=332" + }, + { + "id": -1, "name": "情详页-好友助力", "pathName": "pages/product/detail/detail", "query": "limitProductCode=2018062115403668" diff --git a/app/router/rules.js b/app/router/rules.js index f6d11d7..66d9de9 100644 --- a/app/router/rules.js +++ b/app/router/rules.js @@ -5,4 +5,7 @@ export default { productDetail: {path: '/pages/product/detail/detail'}, userCenter: {path: '/pages/home/index'}, snapShare: {path: '/pages/snapshootShare/snapshootShare'}, + queueList: {path: '/pages/queue/index'}, + prizeUserList: {path: '/pages/queue/prizeUserList'}, + myList: {path: '/pages/queue/myList'} }; diff --git a/app/static/images/limit/queue_bg_1.png b/app/static/images/limit/queue_bg_1.png new file mode 100644 index 0000000..e237f2d Binary files /dev/null and b/app/static/images/limit/queue_bg_1.png differ diff --git a/app/static/images/limit/queue_bg_2.png b/app/static/images/limit/queue_bg_2.png new file mode 100644 index 0000000..01853af Binary files /dev/null and b/app/static/images/limit/queue_bg_2.png differ diff --git a/app/static/images/limit/queue_bg_3.png b/app/static/images/limit/queue_bg_3.png new file mode 100644 index 0000000..7f066f3 Binary files /dev/null and b/app/static/images/limit/queue_bg_3.png differ diff --git a/app/static/images/limit/queue_bg_4.png b/app/static/images/limit/queue_bg_4.png new file mode 100644 index 0000000..8c16f63 Binary files /dev/null and b/app/static/images/limit/queue_bg_4.png differ diff --git a/app/static/images/limit/queue_bg_5.png b/app/static/images/limit/queue_bg_5.png new file mode 100644 index 0000000..eb4a2e8 Binary files /dev/null and b/app/static/images/limit/queue_bg_5.png differ diff --git a/app/static/images/limit/queue_bg_6.png b/app/static/images/limit/queue_bg_6.png new file mode 100644 index 0000000..bca735e Binary files /dev/null and b/app/static/images/limit/queue_bg_6.png differ diff --git a/app/static/images/limit/queue_bg_7.png b/app/static/images/limit/queue_bg_7.png new file mode 100644 index 0000000..ba7e90c Binary files /dev/null and b/app/static/images/limit/queue_bg_7.png differ diff --git a/app/static/images/limit/queue_bg_8.png b/app/static/images/limit/queue_bg_8.png new file mode 100644 index 0000000..3b4d7a1 Binary files /dev/null and b/app/static/images/limit/queue_bg_8.png differ diff --git a/app/utils/helper.js b/app/utils/helper.js index fd2d963..df2e309 100644 --- a/app/utils/helper.js +++ b/app/utils/helper.js @@ -61,8 +61,8 @@ function image(imgUrl, w, h, mode, q) { // 如果图片没有imageView2,则默认添加imageView2 function imgView(imgSrc, w, h, mode, q) { - var imgUrl = imgSrc || ''; - var indexOf = imgUrl.indexOf('?'); + let imgUrl = imgSrc || ''; + let indexOf = imgUrl.indexOf('?'); if (!imgUrl) { return ''; @@ -72,10 +72,6 @@ function imgView(imgSrc, w, h, mode, q) { return imgUrl; } - if (['http://', 'https://'].indexOf((imgUrl || '')) === -1) { - return imgUrl; - } - if (indexOf === -1) { imgUrl += '?imageView2/{mode}/w/{width}/h/{height}'; return image(imgUrl, w, h, mode, q);