Skip to content

7
7-Eleven
Commit f207758f by 高淑倩
Options

add:会员中心

parent e3062f85
Showing with 502 additions and 74 deletions
src/app.json
{
"pages": [
"pages/mySpend/mySpend",
"pages/welcome/welcome",
"pages/mySpend/mySpend",
"pages/memberOfOwn/memberOfOwn",
"pages/userCenter/userCenter",
"pages/memberRules/memberRules",
......@@ -11,7 +11,8 @@
"pages/couponDetail/couponDetail",
"pages/consumptionDetails/consumptionDetails",
"pages/IntegralMall/IntegralMall",
"pages/integralMallDetail/integralMallDetail"
"pages/integralMallDetail/integralMallDetail",
"component/personCenter/personCenter"
],
"window": {
"backgroundTextStyle": "light",
......
src/component/authorization-modal/authorization-modal.js
......@@ -47,7 +47,7 @@ Component({
wx.setStorageSync('_accreditUserInfo', userInfo)
wx.hideNavigationBarLoading()
if (token) {
app.globalData.userNo = token.split('###')[0]
// app.globalData.userNo = token.split('###')[0]
wx.setStorageSync('token', token)
} else {
wx.setStorageSync('token', '')
......
src/component/imageSwiper/imageSwiper.js
......@@ -9,7 +9,13 @@ Component({
* 组件的属性列表
*/
properties: {
imageData: {
type: Array,
value: [],
},
},
attached () {
// console.log('this.data', this.data)
},
/**
* 组件的初始数据
......
src/component/personCenter/personCenter.js 0 → 100644
// component/personCenter/personCenter.js
var app = getApp()
const wxService = require('../../utils/wxService')
const envInfo = require('../../config/index').envInfo
Component({
properties: {
personData: {
type: Object,
value: {},
},
},
/**
* 页面的初始数据
*/
data: {
personCenterObj: {}
},
attached () {
this.setData({
personCenterObj: this.data.personData
})
},
methods: {
// 点击编辑
handelPersonCenter() {
console.log('点击编辑')
},
handleGoWxCard() {
console.log('kabao')
if (wx.openCard) {
wx.openCard({
cardList: [{
cardId: '',
code: ''
}, {
cardId: '',
code: ''
}],
success (res) { }
})
} else {
// 如果希望用户在最新版本的客户端上体验您的小程序，可以这样子提示
wx.showModal({
title: '提示',
content: '当前微信版本过低，无法使用该功能，请升级到最新微信版本后重试。'
})
}
}
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
\ No newline at end of file
src/component/personCenter/personCenter.json 0 → 100644
{
"usingComponents": {}
}
\ No newline at end of file
src/component/personCenter/personCenter.wxml 0 → 100644
<!--component/personCenter/personCenter.wxml-->
<view class="activation-content {{true ? 'user-content' : ''}}">
<image class='activation-bg' src='/assets/imgs/user-bg.png'></image>
<button type="primary" plain='false' wx:if='{{false}}'>激活立享会员特权</button>
<view class='user-info' wx:if='{{true}}'>
<view class="user-avatar">
<open-data type="userAvatarUrl"></open-data>
</view>
<view class='user-name-content'>
<view class='user-name'>
<open-data type="userNickName" class="userinfo-nickname" lang="zh_CN"></open-data>
<navigator url='/pages/memberOfOwn/memberOfOwn' style='display:inline-block' hover-class="none">
<image class='icon-edit' src='/assets/imgs/icon-edit.png' bindtap="handelPersonCenter"></image>
</navigator>
</view>
<view class='user-id'>34765736454</view>
</view>
<view class='qr-code pr'>
<image src='/assets/imgs/qr-code.png' bindtap="handleGoWxCard"></image>
</view>
</view>
</view>
<view class='df tc'>
<view class='df-1 point'>
<view class='point-desc'>积分</view>
<view class='point-number'>{{personCenterObj.bonus}}</view>
</view>
<view class='df-1 point'>
<view class='point-desc'>优惠券</view>
<view class='point-number'>{{personCenterObj.coupon}}</view>
</view>
</view>
<!-- <view class="activation-content {{true ? 'user-content' : ''}}">
<image class='activation-bg' src='/assets/imgs/user-bg.png'></image>
<button type="primary" plain='false' wx:if='{{false}}'>激活立享会员特权</button>
<view class='user-info' wx:if='{{true}}'>
<view class="user-avatar">
<open-data type="userAvatarUrl"></open-data>
</view>
<view class='user-name-content'>
<view class='user-name'>
<open-data type="userNickName" class="userinfo-nickname" lang="zh_CN"></open-data>
<navigator url='/pages/memberOfOwn/memberOfOwn' style='display:inline-block' hover-class="none">
<image class='icon-edit' src='/assets/imgs/icon-edit.png'></image>
</navigator>
</view>
<view class='user-id'>34765736454</view>
</view>
<view class='qr-code pr'>
<image src='/assets/imgs/qr-code.png'></image>
</view>
</view>
</view>
<view class='df tc'>
<view class='df-1 point'>
<view class='point-desc'>积分</view>
<view class='point-number'>{{pItem.customer.bonus}}</view>
</view>
<view class='df-1 point'>
<view class='point-desc'>优惠券</view>
<view class='point-number'>{{pItem.customer.coupon}}</view>
</view>
</view>-->
src/component/personCenter/personCenter.wxss 0 → 100644
/* component/personCenter/personCenter.wxss */
@import './../../base/base.wxss';
.user-content{
height: 92rpx;
/* width: 598rpx; */
padding: 37rpx 46rpx;
box-sizing: border-box;
}
.activation-content{
position: relative;
width: 690rpx;
height: 166rpx;
margin-top: 18rpx;
border-radius: 7rpx;
}
.point{
padding:36rpx 0 25rpx 0;
}
.point-desc{
font-size: 20rpx;
color: #666666;
}
.point-number{
font-size: 30rpx;
font-weight: bold;
color: #333333;
margin-bottom: 15rpx;
}
.activation-content button{
width: 400rpx;
height: 68rpx;
border-radius: 68rpx;
line-height: 68rpx;
font-size: 30rpx;
position: absolute;
top: 49rpx;
left: 144rpx;
}
.activation-bg{
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
border-radius: 7rpx;
z-index: -1;
}
.user-avatar{
width: 100rpx;
height: 100rpx;
overflow:hidden;
border-radius: 50%;
display: inline-block;
margin-right: 46rpx;
}
.user-name-content{
display: inline-block;
}
.user-name{
margin-bottom: 25rpx;
}
.icon-edit{
width: 28rpx;
height: 28rpx;
vertical-align: middle;
margin-left: 8rpx;
}
.user-id{
color: #666666;
font-size: 24rpx;
}
.qr-code image{
width: 100rpx;
height: 100rpx;
}
\ No newline at end of file
src/pages/userCenter/userCenter.js
......@@ -3,20 +3,40 @@ const app = getApp()
const wxService = require('../../utils/wxService')
const utils = require('../../utils/util')
const envInfo = require('../../config/index').envInfo
let renderPage = null // 渲染页面数据对象(安全渲染)
let handlerDataOnPage = null
const logger = utils.logger
wxService.page({
/**
* 页面的初始数据
*/
data: {
pages:[],
render: null, // 渲染页面数据对象(安全渲染)
renderPageOver: false, // 渲染页面结束
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
this.setData(
{
pages: [],
groupLoadState: 'complete', // 活动分组加载标志
homeApiLoading: true,
render: null, // 渲染页面数据对象(安全渲染)
isLastPage: false, // 页面段落加载完成
renderPageOver: false // 渲染页面结束
},
() => {
// this.loadMore()
}
)
handlerDataOnPage = new utils.HandlerDataOnPage()
renderPage = require('../../utils/renderPage').getRenderPage()
handlerDataOnPage.init(this, 'pages')
},
/**
......@@ -46,8 +66,8 @@ wxService.page({
title: data.page.title
})
// 段落
const product = data.paragraphs
const filterResult = product.map((res,index)=>{
const products = data.paragraphs
const filterResult = products.map((res,index)=>{
return {
...res,index
}
......@@ -55,13 +75,32 @@ wxService.page({
})
const render = renderPage.initPaging(filterResult).initRenderData(products)
this.data.render = render
const renderData = render.next()
this.data.renderPageOver = renderData.done
this.renderPageFunc({ products: renderData.value })
}
}).finally(() => {
wx.hideLoading();
})
},
/**
* 渲染数据(合并之前的数据)
* @param products 数组数据
* @param isLastPage
* @param now
*/
renderPageFunc ({ products }) {
let productData = handlerDataOnPage.handlerArray(products)
logger.log('productData.keysNum', productData.keysNum(), productData)
this.setData({
...productData
})
},
/**
* 生命周期函数--监听页面隐藏
*/
......
src/pages/userCenter/userCenter.json
{
"navigationBarTitleText": "广东7-Eleven会员专区",
"usingComponents": {
"image-swiper": "./../../component/imageSwiper/imageSwiper"
"image-swiper": "/component/imageSwiper/imageSwiper",
"person-center": "/component/personCenter/personCenter"
}
}
\ No newline at end of file
src/pages/userCenter/userCenter.wxml
<!--pages/userCenter.wxml-->
<view class='user-center'>
<image-swiper />
<!-- 1 轮播 2 个人中心 3 图片导航 4 底部-->
<block wx:for="{{pages}}" wx:key="{{index}}" wx:for-item="pItem">
<!--{{pItem.type}}-->
<!-- 轮播 -->
<view class="images-tab" wx:if="{{pItem.type == 1}}">
<image-swiper image-data="{{pItem.rotationchart.images}}" />
</view>
<!-- 个人中心 {{pItem.customer}}-->
<view class="images-tab" wx:if="{{pItem.type == 2}}">
<person-center person-data="{{pItem.customer}}"/>
</view>
<!-- 图片导航 {{pItem.navigation.images}}-->
<view class="images-tab" wx:if="{{pItem.type == 3}}">
<view class='main-content'>
<view class='top-content'>
<view class='top-left-img'>
<image src='/assets/imgs/user-bg.png'></image>
</view>
<view class='top-right-img'>
<view>
<image src='/assets/imgs/user-bg.png'></image>
</view>
<view>
<image src='/assets/imgs/user-bg.png'></image>
</view>
</view>
</view>
<view class='bottom-content'>
<image src='/assets/imgs/user-bg.png'></image>
<image src='/assets/imgs/user-bg.png'></image>
</view>
</view>
</view>
<!-- 底部 -->
<view class="images-tab" wx:if="{{pItem.type == 4}}">
<image-proportion images="{{pItem.bottom}}"></image-proportion>
<view class='footer-content'>
<image class='arrow-left' src='/assets/imgs/arrow-left.png'></image>
<text class='footer-text'>{{pItem.bottom.title}}</text>
</view>
</view>
<!--<image-swiper />
<view class="activation-content {{true ? 'user-content' : ''}}">
<image class='activation-bg' src='/assets/imgs/user-bg.png'></image>
<button type="primary" plain='false' wx:if='{{false}}'>激活立享会员特权</button>
......@@ -51,8 +99,12 @@
<image src='/assets/imgs/user-bg.png'></image>
</view>
</view>
</view>
<view class='footer-content'>
<view class='footer-content'>
<image class='arrow-left' src='/assets/imgs/arrow-left.png'></image>
<text class='footer-text'>往左滑更有料</text>
</view>
-->
</block>
</view>
src/pages/userCenter/userCenter.wxss
/* pages/userCenter.wxss */
@import './../../base/base.wxss';
.user-center{
padding: 15rpx 30rpx;
margin-bottom: 120rpx;
}
.activation-content{
/* .activation-content{
position: relative;
width: 690rpx;
height: 166rpx;
margin-top: 18rpx;
border-radius: 7rpx;
}
.activation-bg{
} */
/* .activation-bg{
width: 100%;
height: 100%;
position: absolute;
......@@ -20,11 +21,11 @@
border-radius: 7rpx;
z-index: -1;
}
} */
.main-content{
margin-top: 18rpx;
}
.activation-content button{
/* .activation-content button{
width: 400rpx;
height: 68rpx;
border-radius: 68rpx;
......@@ -33,7 +34,7 @@
position: absolute;
top: 49rpx;
left: 144rpx;
}
} */
.top-content,.bottom-content{
display: flex;
flex-direction: row;
......@@ -54,11 +55,11 @@
height: 160rpx;
}
.footer-content{
width: 100%;
height: 100rpx;
/* width: 100%; */
/* height: 100rpx; */
background-color: rgb(5, 195, 90);
position: fixed;
bottom: 0;
/* position: fixed; */
/* bottom: 0; */
line-height: 100rpx;
padding: 0 54rpx;
}
......@@ -72,52 +73,3 @@
font-size: 32rpx;
margin-left: 208rpx;
}
/* 会员信息 */
.user-content{
height: 92rpx;
width: 598rpx;
padding: 37rpx 46rpx;
}
.user-avatar{
width: 100rpx;
height: 100rpx;
overflow:hidden;
border-radius: 50%;
display: inline-block;
margin-right: 46rpx;
}
.user-name-content{
display: inline-block;
}
.user-name{
margin-bottom: 25rpx;
}
.icon-edit{
width: 28rpx;
height: 28rpx;
vertical-align: middle;
margin-left: 8rpx;
}
.user-id{
color: #666666;
font-size: 24rpx;
}
.qr-code image{
width: 100rpx;
height: 100rpx;
}
.point{
padding:36rpx 0 25rpx 0;
}
.point-number{
font-size: 30rpx;
font-weight: bold;
color: #333333;
margin-bottom: 15rpx;
}
.point-desc{
font-size: 20rpx;
color: #666666;
}
\ No newline at end of file
src/project.config.json
......@@ -37,7 +37,7 @@
"list": []
},
"miniprogram": {
"current": 9,
"current": 10,
"list": [
{
"id": -1,
......@@ -98,6 +98,12 @@
"name": "我的消费",
"pathName": "pages/mySpend/mySpend",
"query": ""
},
{
"id": -1,
"name": "我的会员",
"pathName": "pages/memberOfOwn/memberOfOwn",
"query": ""
}
]
}
......
src/utils/Http.js
......@@ -97,7 +97,7 @@ class Http {
url,
method: 'POST',
header: {
// 'buyer-token': wx.getStorageSync('token')
// 'buyer-token': this.getToken()
'buyer-token':'3e15b819c551713ae210adc525da028b'
// 'seller-token': 'f80d09122733517ea4a0c2628c4eb0e9'
},
......
src/utils/renderPage.js 0 → 100644
class RenderPage {
constructor () {
this.pagingPoint = [] // 需要被渲染的节点段
this.previousPoint = 0 // 已渲染数据的索引
this.groupTabsIndex = -1
this.previousRenderData = [] // 已渲染的数据
}
initPaging (pagingPoint) {
if (toString.call(pagingPoint) !== '[object Array]') {
throw new Error('pagingPoint is not array')
}
this.pagingPoint = pagingPoint
this.previousPoint = 0
this.hiddenGroupsTab = []
this.groupTabsIndex = -1
return this
}
initRenderData (data) {
if (toString.call(data) !== '[object Array]') {
throw new Error('data is not Array')
}
this.renderData = data
return this
}
/**
* 获取比index大的缓存数据
* @param index
* @returns {*|Array}
*/
getCacheDataByGroupTabsIndex (index) {
if (index > -1) {
this.groupTabsIndex = index
const res = this.previousRenderData.reduce((total, item) => {
total.count += item.length
if (total.count > index) {
total.temp = total.temp.concat(item.map((it) => {
return {
hidden: true,
...it
}
}))
}
return {
...total
}
}, { count: 0, temp: [] })
this.hiddenGroupsTab = res.temp
return res.temp
} else {
throw new Error('setGroupTabsIndex index is invalidate')
}
}
/**
* 获取下一个节点的数据
*/
next () {
const pagingPoint = this.pagingPoint
let res = { done: true, value: [] }
let renderPoint = []
const showRes = this.showHiddenRes()
if (showRes.length) {
this.hiddenGroupsTab = []
const index = this.groupTabsIndex
res = {
done: true,
value: showRes,
type: 'showResult',
index
}
return res
}
if (pagingPoint.length) {
const item = this.pagingPoint.shift()
renderPoint = this.renderData.slice(this.previousPoint, item.index + 1)
res = {
value: renderPoint,
done: false
}
this.previousPoint = item.index + 1
} else {
renderPoint = this.renderData.slice(this.previousPoint)
res = {
value: renderPoint,
done: true
}
}
this.cacheRenderData(renderPoint)
return res
}
showHiddenRes () {
return this.hiddenGroupsTab.map(item => {
return {
...item,
hidden: false
}
})
}
/**
* 缓存分页的数据
* @param index
* @param renderData
*/
cacheRenderData (renderData) {
this.previousRenderData.push(renderData)
}
}
module.exports = {
renderPage: new RenderPage(),
getRenderPage: () => new RenderPage()
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment