Authored by 邱骏

限定发售列表

... ... @@ -9,7 +9,8 @@
"radix": "off",
"array-callback-return": "off",
"no-unused-vars": "off",
"guard-for-in": "off"
"guard-for-in": "off",
"indentation": "off"
},
"globals": {
"App": true,
... ...
... ... @@ -10,6 +10,8 @@
"rpx"
]
}
]
],
"indentation": null,
"selector-type-no-unknown": false
}
}
... ...
... ... @@ -5,11 +5,12 @@
"pages/account/bindMobile"
],
"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#fff",
"backgroundTextStyle": "dark",
"navigationBarBackgroundColor": "#3a3a3a",
"navigationBarTitleText": "限定发售",
"navigationBarTextStyle": "black",
"backgroundColor": "#f0f0f0"
"navigationBarTextStyle": "white",
"backgroundColor": "#fff",
"onReachBottomDistance": 200
},
"debug": true
}
... ...
... ... @@ -139,7 +139,7 @@ const api = {
app_version: config.apiParams.app_version,
miniapp_version: config.apiParams.miniapp_version,
udid: udid.get(),
business_line: 'miniappOffshop'
business_line: config.business_line
}, params);
},
get(params) {
... ...
... ... @@ -23,8 +23,8 @@ const config = {
},
unionType: '', // 渠道号
MINI_APP_DOMAIN: 'miniapp.yohobuy.com',
appid: 'wx39f299b6485cf97a', // 业务中使用、与package.config.json内appid保持一致
business_line: 'miniappLimitSale' // 业务线
appid: 'wx39f299b6485cf97a', // 业务中使用、与package.config.json内appid保持一致wx39f299b6485cf97a
business_line: 'miniappOffshop' // 业务线
};
export default config;
... ...
... ... @@ -179,10 +179,12 @@ function wechatAuthLogin() {
let app = getApp();
return wx.login().then(res => {
console.log('wechatAuthLogin:', res);
if (res.code) {
return accountModel.wechatMiniAppLogin(res.code);
}
}).then(data => {
console.log('wechatAuthLogin.then=>', data);
if (data.code !== 200) {
return Promise.reject({
succeed: false,
... ...
... ... @@ -49,7 +49,7 @@ export default {
data: {
method: 'wechat.smallProgram.onLogin',
jsCode: code,
miniapp_type: '3'
miniapp_type: '4'
}
});
},
... ...
import api from '../../common/api';
export default {
getLimitSaleList(data) { // 获取限定发售列表
return api.get({
url: '',
data: data
});
}
};
... ...
... ... @@ -137,10 +137,7 @@ Page({
});
}
},
1000
)
;
1000);
this.setData({
btnText: '60s',
... ...
import wx from '../../utils/wx';
import config from '../../common/config';
import Yas from '../../common/yas';
import AccountModel from '../../models/account/index';
import LimitModel from '../../models/limit/index';
// 获取应用实例
let app = getApp();
... ... @@ -10,8 +10,35 @@ let router = global.router;
Page({
data: {
tabSelected: 0,
refreshText: '下拉刷新',
userInfo: {},
hasUserInfo: false
tabBarArr: [
{
icon: '../../static/images/icon_rmfs_n@3x.png',
iconSelected: '../../static/images/icon_rmfs_p@3x.png',
name: '热门发售',
method: 'app.limitProduct.hotLimitProduct'
},
{
icon: '../../static/images/icon_jjfs_n@3x.png',
iconSelected: '../../static/images/icon_jjfs_p@3x.png',
name: '即将发售',
method: 'app.limitProduct.soonToSaleLimitProduct'
},
{
icon: '../../static/images/icon_yjfs_n@3x.png',
iconSelected: '../../static/images/icon_yjfs_p@3x.png',
name: '已经发售',
method: 'app.limitProduct.alreadySaleLimitProduct'
}
],
listData: [
{}, {}, {}
],
icon: {
clock: '../../static/images/clock_left.png'
}
},
onLoad: function() {
yas = new Yas(app);
... ... @@ -22,27 +49,89 @@ Page({
hasUserInfo: true
});
}
},
onReady: function() {
this.getList(0, 1, 20, false);
},
onShow: function() {
yas.pageOpenReport();
},
onPullDownRefresh: function() {
this.setData({
refreshText: '加载中...'
});
this.getList(this.data.tabSelected, 1, 20, false).then(() => {
wx.stopPullDownRefresh();
});
},
onReachBottom: function() {
let page = this.data.listData[this.data.tabSelected].page;
let page_total = this.data.listData[this.data.tabSelected].page_total;
if (page < page_total) {
page += 1;
this.getList(this.data.tabSelected, page, 20, true);
}
},
getUserInfo: function(e) {
console.log(e);
if (e.detail.errMsg === 'getUserInfo:ok') {
app.setUserInfo(e.detail.userInfo);
// AccountModel.decodeUserInfo();
}
app.setUserInfo(e.detail.userInfo);
this.setData({
userInfo: e.detail.userInfo,
hasUserInfo: true
});
},
tabChange: function(e) {
let index = e.currentTarget.dataset.index;
if (index !== this.data.tabSelected) {
this.setData({
tabSelected: index
});
if (!this.data.listData[index].limitProductVoList || this.data.listData[index].limitProductVoList.length === 0) {
this.getList(index, 1, 20, false);
}
}
},
/**
* index: tab的index,page:分页,limit: 每页数量, isBottom:是否是到达底部后触发
*/
getList: function(index, page, limit, isBottom) { // 获取限定发售列表
let method = this.data.tabBarArr[index].method;
let that = this;
return LimitModel.getLimitSaleList({
method: method,
page: page,
limit: limit
}).then(res => {
console.log(res.data);
if (res.data && res.data.limitProductVoList) {
let list = that.data.listData;
if (isBottom) {
list[index].page = page;
list[index].limitProductVoList = list[index].limitProductVoList.concat(res.data.limitProductVoList);
} else {
list[index] = res.data;
}
that.setData({
listData: list
});
}
});
},
navigateToDetail: function(e) { // 跳转到详情页
console.log(e);
let id = e.currentTarget.dataset.id;
let limitProductCode = e.currentTarget.dataset.code;
}
});
... ...
{
"navigationBarTitleText": "有货限定频道",
"enablePullDownRefresh": true,
"backgroundColor": "#ebebeb",
"backgroundTextStyle": "light",
"usingComponents": {
}
}
\ No newline at end of file
... ...
<wxs src="../../wxs/helper.wxs" module="helper" />
<view class="container">
<button wx:if="{{!hasUserInfo}}" open-type="getUserInfo"
bindgetuserinfo="getUserInfo"
class="user-button-type" class='login-button'>登录</button>
<block wx:else>
<image class='userinfo-avatar' src='{{userInfo.avatarUrl}}' mode='cover'></image>
<text class='userinfo-nickname'>{{userInfo.nickName}}</text>
</block>
<!--顶部tab切换-->
<view class='tab-bar-container'>
<view wx:for="{{tabBarArr}}" wx:key="name" class='tab-bar-item' bindtap='tabChange' data-index="{{index}}">
<block wx:if="{{tabSelected === index}}"><!--选中的tabBarIndex和循环里的index相同时-->
<image src="{{item.iconSelected}}"></image>
<text class='selected'>{{item.name}}</text>
</block>
<block wx:else>
<image src="{{item.icon}}"></image>
<text>{{item.name}}</text>
</block>
</view>
</view>
<!--列表内容-->
<view class='list-wrapper'>
<view class='list-top-blank'>{{refreshText}}</view>
<view class='list-container'>
<block wx:for='{{listData}}' wx:key='index' wx:for-item='nowList'>
<block wx:if='{{index === tabSelected}}'>
<view class='item-container' wx:for='{{nowList.limitProductVoList}}' wx:key="listItem.id" wx:for-item='listItem' data-id='{{listItem.id}}' data-code='{{listItem.limitProductCode}}' bindtap='navigateToDetail'>
<image src="{{helper.image(listItem.defaultUrl, 690, 432, 1)}}"></image>
<view class='item-content'>
<text class='item-name'>{{listItem.productName}}</text>
<view class='item-info'>
<text class='item-price'>{{listItem.price || '¥0.00'}}</text>
<view class='item-date'>
<image src='{{icon.clock}}'></image>
<text>{{listItem.saleTime}}发售</text>
</view>
</view>
</view>
</view>
</block>
</block>
</view>
<view class='list-foot-blank'>暂无内容</view>
</view>
<!--我的限购码按钮-->
<view class='my-code-button'>
我的限购码
</view>
</view>
... ...
.container {
background-color: white;
display: flex;
flex-direction: column;
padding-top: 105rpx;
align-items: center;
background-color: #ebebeb;
}
.login-button {
page {
background-color: #ebebeb;
}
/* 顶部TAB切换 START */
.tab-bar-container {
display: flex;
justify-content: center;
position: fixed;
left: 0;
top: 0;
flex-direction: row;
align-items: center;
width: 100%;
height: 88rpx;
background-color: #fff;
border-bottom: 1px solid #e0e0e0;
}
.tab-bar-item {
display: flex;
flex-direction: row;
align-items: center;
width: 200rpx;
height: 100rpx;
background-color: #f0f0f0;
justify-content: center;
width: 33.3%;
height: 40rpx;
text-align: center;
}
.tab-bar-item text {
margin-left: 4rpx;
font-size: 28rpx;
color: #afafaf;
}
.tab-bar-item text.selected {
color: #000;
}
.userinfo-avatar {
.tab-bar-item image {
height: 30rpx;
width: 30rpx;
}
.tab-bar-item:nth-child(n + 2) {
border-left: 2rpx solid #afafaf;
}
/* END */
/* 限定发售列表 START */
.list-wrapper {
width: 100%;
}
/* 顶部底部留出的空白区 */
.list-wrapper .list-top-blank,
.list-wrapper .list-foot-blank {
width: 100%;
height: 88rpx;
text-align: center;
line-height: 88rpx;
font-size: 30rpx;
}
/* 列表外层容器 */
.list-wrapper .list-container {
display: flex;
width: 120rpx;
height: 120rpx;
border-radius: 60rpx;
width: 100%;
flex-direction: column;
align-items: center;
}
.userinfo-nickname {
/* 列表元素容器 */
.list-wrapper .list-container .item-container {
display: flex;
margin-top: 20rpx;
}
\ No newline at end of file
flex-direction: column;
width: 690rpx;
margin-top: 30rpx;
margin-bottom: 10rpx;
}
/* 列表item大图 */
.item-container image {
width: 100%;
height: 432rpx;
border-radius: 20rpx 20rpx 0 0;
margin: 0;
padding: 0;
}
/* 列表item文字及价格等信息容器 */
.item-container .item-content {
display: flex;
width: 100%;
flex-direction: column;
border-radius: 0 0 20rpx 20rpx;
background-color: #fff;
line-height: 42rpx;
font-size: 30rpx;
}
/* 列表item标题文字 */
.item-content .item-name {
padding: 20rpx 30rpx 22rpx 30rpx;
}
/* 价格及时间容器 */
.item-content .item-info {
display: flex;
width: 100%;
flex-direction: row;
justify-content: space-between;
}
/* 价格 */
.item-info .item-price {
padding: 0 0 40rpx 30rpx;
}
/* 发售时间 */
.item-info .item-date {
display: flex;
flex-direction: row;
background-color: #444;
line-height: 40rpx;
height: 40rpx;
border-radius: 20rpx;
margin-right: 30rpx;
}
/* 发售时间内文字 */
.item-info .item-date text {
color: #fff;
font-size: 24rpx;
padding: 0 14rpx 0 2rpx;
}
/* 发售时间小图标 */
.item-info .item-date image {
width: 24rpx;
height: 24rpx;
padding: 8rpx;
}
/* END */
.my-code-button {
position: fixed;
bottom: 0;
width: 100%;
height: 88rpx;
text-align: center;
font-size: 30rpx;
line-height: 88rpx;
background-color: #fff;
}
... ...