Skip to content

7
7-Eleven
Commit d1867a33 by 高淑倩
Options

我的动态页面

parent 4fb0d2e4
Showing with 966 additions and 603 deletions
src/pages/my/my.js
...@@ -3,131 +3,245 @@ const app = getApp() ...@@ -3,131 +3,245 @@ const app = getApp()
const wxService = require('../../utils/wxService') const wxService = require('../../utils/wxService')
const utils = require('../../utils/util') const utils = require('../../utils/util')
const envInfo = require('../../config/index').envInfo const envInfo = require('../../config/index').envInfo
let renderPage = null // 渲染页面数据对象(安全渲染)
let handlerDataOnPage = null
let config = require('../../configScreen/configScreen');
import { Integer } from '../../utils/integerDigitalConvertion'
wxService.page({ const logger = utils.logger
wxService.page({
/** /**
* 页面的初始数据 * 页面的初始数据
*/ */
data: { data: {
unfold:false, pages: [],
startY:'', render: null, // 渲染页面数据对象(安全渲染)
refreshClass:'', renderPageOver: false, // 渲染页面结束
delBtnWidth:'' integralNum: 0,
couponNum: 0,
isAllScreen: config.isAllScreen,
token: '',
isAuthorization: false,
pageId: 3,
baseUserInfo: null,
pageBackgroundColor: 0,
guidePageModalShow: false,
currHomePageId: '',
skuVOList:[]
}, },
/** /**
* 生命周期函数--监听页面加载 * 生命周期函数--监听页面加载
*/ */
onLoad: function (options) { onLoad() {
// 设置 导航栏背景颜色
}, // wxService.getNavBarBackGroundColor('#000000', '#ff0000')
/** this.setData(
* 生命周期函数--监听页面初次渲染完成 {
*/ pages: [],
onReady () { groupLoadState: 'complete', // 活动分组加载标志
this.animation = wx.createAnimation({ homeApiLoading: true,
duration: 1000, render: null, // 渲染页面数据对象(安全渲染)
timingFunction: 'linear' isLastPage: false, // 页面段落加载完成
}) renderPageOver: false, // 渲染页面结束
}, // isAuthorization: true,
translate () { outoHeigth: 500,
// 平移变换 },
// this.animation.translateY(- 80).step() () => {
this.animation.translateY(- 180).step() // this.loadMore()
this.setData({animation: this.animation.export()}) }
)
handlerDataOnPage = new utils.HandlerDataOnPage()
renderPage = require('../../utils/renderPage').getRenderPage()
handlerDataOnPage.init(this, 'pages')
this.initPage(this.data.pageId)
}, },
reset () { /**
this.animation.translateY(0) * 监听子组件事件
.step({duration: 0}) * */
this.setData({animation: this.animation.export()}) updatePage(ev) {
}, const { pageId } = ev.detail
//点击展开 // this.setData({
onTapUnfold(){ // pages: [],
this.setData({ // pageId
unfold: !this.data.unfold // },()=>{
}) // this.initPage(pageId)
// })
wxService.router(`/subPackage/page/pages/subPage/subPage`).search({ pageId })
}, },
/** /**
* 生命周期函数--监听页面显示 * 生命周期函数--监听页面显示
*/ */
onShow: function () { onShow() {
console.log('0this.data.currentHasUserInfo', this.data.currentHasUserInfo)
// 取会员卡号
const baseUserInfo = wx.getStorageSync('_baseUserInfo')
const cardMember = wx.getStorageSync('_cardMember')
// 登录接口返回err
const reLoginErrFlag = wx.getStorageSync('reLoginErr')
if (baseUserInfo && !reLoginErrFlag) {
this.setData({
token: wx.getStorageSync('token'),
baseUserInfo,
cardMember,
isAuthorization: false
}, () => {
// 积分数量
// this.getMemberPointInfo()
// 优惠券数量
// this.getMemberCouponInfo()
})
}
else if (!baseUserInfo && reLoginErrFlag) {
this.setData({
isAuthorization: true
})
}
else {
this.setData({
isAuthorization: true
})
}
// if (baseUserInfo){
// this.setData({
// token: wx.getStorageSync('token'),
// baseUserInfo,
// // cardMember,
// isAuthorization: false
// })
// // 积分数量
// this.getMemberPointInfo()
// // 优惠券数量
// this.getMemberCouponInfo()
// } else {
// this.setData({
// isAuthorization: true
// })
// }
// 获取plus购买信息
this.getPlusPurchase()
// 获取手机信息
wxService.getSystemInfo().then(res => {
this.setData({
outoHeigth: res.windowHeight
})
})
// 设置当前选中 Tab
if (typeof this.getTabBar === 'function' && if (typeof this.getTabBar === 'function' &&
this.getTabBar()) { this.getTabBar()) {
this.getTabBar().setData({ this.getTabBar().setData({
selected: 3 selected: 0
}) })
} }
},
const query = wx.createSelectorQuery() // page 信息
query.select('#plusImg').boundingClientRect() initPage(pageId) {
query.selectViewport().scrollOffset() this.setData({
var that = this; products: []
query.exec(function (res) {
that.setData({
delBtnWidth: res[0].height
})
}) })
}, wx.showLoading({
title: '加载中'
})
// wxService.post(`/merchant/modelPage/getDetailById?pageId=${pageId}&brandId=${app.globalData.brandId}`).then(res => {
wxService.post(`/merchant/modelPage/mainSetting/mall?brandId=${app.globalData.brandId}`).then(res => {
if (!res) return false
const { result, data } = res.data
if (result == 0) {
this.setData({
pageBackgroundColor: data.page.backgroundColor || 0
})
// 动态设置title
wx.setNavigationBarTitle({
title: data.page.title
})
// 首页 pageId
// data.page.pageId
this.setData({
currHomePageId: data.page.pageId
})
// 开始滑动事件 // 段落
touchS: function (e) { const products = data.paragraphs
console.log('e', e) const filterResult = products.map((res, index) => {
if (e.touches.length == 1) { return {
this.setData({ ...res, index
//设置触摸起始点水平方向位置 }
startY: e.touches[0].clientY }).filter(item => {
}); // wx.hideLoading()
} })
},
touchM: function (e) { const render = renderPage.initPaging(filterResult).initRenderData(products)
console.log('333', e) this.data.render = render
if (e.touches.length == 1) { const renderData = render.next()
//手指移动时y方向位置 this.data.renderPageOver = renderData.done
var moveY = e.touches[0].clientY; this.renderPageFunc({ products: renderData.value })
//手指起始点位置与移动期间的差值
var disY = moveY - this.data.startY;
var delBtnWidth = this.data.delBtnWidth;
var moveDistance = delBtnWidth - disY;
var txtStyle = "";
console.log('------', disY)
if (disY == 0 || disY < 0) { //如果移动距离小于等于0，文本层位置不变
txtStyle = "margin-top:-" + delBtnWidth;
} else if (disY > 0) { //移动距离大于0，文本层left值等于手指移动距离
txtStyle = "margin-top:-" + moveDistance + "px";
console.log('+++', txtStyle)
if (disY >= delBtnWidth) {
//控制手指移动距离最大值为删除按钮的宽度
txtStyle = "margin-top:0px" ;
}
} }
this.setData({
refreshClass: txtStyle }).finally(() => {
wx.hideLoading();
})
},
/**
* 渲染数据(合并之前的数据)
* @param products 数组数据
* @param isLastPage
* @param now
*/
renderPageFunc({ products }) {
// 9 plus(9/5-权重高)
let newProducts = [...products]
let typeArr = []
newProducts.map(item => typeArr.push(item.type))
if (typeArr.includes(9) && typeArr.includes(5)) {
newProducts.forEach((item, index) => {
if (item.type == 5) { newProducts.splice(index, 1) }
}) })
console.log(txtStyle)
} }
// let productData = handlerDataOnPage.handlerArray(products)
let productData = handlerDataOnPage.handlerArray(newProducts)
logger.log('productData.keysNum', productData.keysNum(), productData)
this.setData({
...productData
}, () => {
wx.hideLoading()
})
}, },
// 滑动结束事件
touchE: function (e) { // 获取plus购买信息
if (e.changedTouches.length == 1) { getPlusPurchase() {
//手指移动结束后水平位置 wxService.get(`/sale/premium/query`).then(res => {
var endY = e.changedTouches[0].clientY; const { result, data } = res.data
//触摸开始与结束，手指移动的距离 if (result == 0) {
var disY = endY-this.data.startY;
var delBtnWidth = this.data.delBtnWidth;
//如果距离小于删除按钮的1/2，不显示删除按钮
var txtStyle = "";
console.log('.....', disY)
if (disY > 0){
txtStyle = disY > delBtnWidth ? "margin-top:-" + delBtnWidth : "margin-top:" + disY + "px";
this.setData({ this.setData({
refreshClass: txtStyle skuVOList: data
}) })
} }
}).finally(() => {
console.log('////',txtStyle) })
} else {
}
}, },
/**
* 用户点击右上角分享
*/
onShareAppMessage: function (res) {
let tentacleInfo = {
content: '首页',
title: '首页',
contentType: app.globalData.contants.SHARE_TYPE.HOME,
type: 3// 1:门店,2:员工(暂时不做),3:会员,4:第三方外部渠道,5:智能营销
};
wxService.getTentacleContent(tentacleInfo).then(res => {
if (res && res.tentacleId) {
let tentacleId = Integer.digit(res.tentacleId, 10, 64);
var path = `pages/userCenter/userCenter?t=${tentacleId}`;
console.log(path)
return {
path: path
}
}
});
}
}) })
\ No newline at end of file
src/pages/my/my.json
{ {
"navigationBarTitleText": "我的", "navigationBarTitleText": "",
"disableScroll": true,
"usingComponents": { "usingComponents": {
"bottom-tabs": "./../../component/bottomTabs/bottomTabs", "image-swiper": "/component/imageSwiper/imageSwiper",
"go-home": "/component/goHome/goHome" "person-center": "/component/personCenter/personCenter",
"pic-nav": "/component/picNav/picNav",
"bottom": "/component/bottom/bottom",
"tab-sort": "/component/tabSort/tabSort",
"announcement": "/component/announcement/announcement",
"icon-swiper": "/component/iconSwiper/iconSwiper",
"hot-item": "/component/hotItem/hotItem",
"bannerAd": "/component/bannerAd/bannerAd",
"attention": "/component/attention/attention",
"guide-page-modal": "/component/guidePageModal/guidePageModal",
"bottom-tabs": "/component/bottomTabs/bottomTabs",
"authorization-modal": "/component/authorization-modal/authorization-modal",
"plus": "/component/plus/plus"
} }
} }
\ No newline at end of file
src/pages/my/my.wxml
<!--pages/my/my.wxml--> <view class='user-center' style="background: {{pageBackgroundColor == 1? '#eee': '#fff'}};min-height: {{outoHeigth}}px">
<view class="page-user-center"> <!-- 1 轮播 2 个人中心 3 图片导航 4 底部左划 5 底部 Tab 6 公告 7 分类 8 关注公众号 9 plus(9/5-权重高)-->
<view class="top-content"> <block wx:for="{{pages}}" wx:key="{{index}}" wx:for-item="pItem">
<view class="user-header-wrap"> <view wx:if="{{pItem.type == 1}}">
<view class="header-content"> <image-swiper image-data="{{pItem.rotationchart.images}}" />
<view class="avatar-wrap">
<view class="avatar">
<open-data type="userAvatarUrl" />
</view>
<image class="crown" src="/assets/imgs/crown.png" />
</view>
<view class="user-info">
<text class="member">分享号会员</text>
<text class="name">会员名称</text>
</view>
<view class="method-btn">不会玩看这里
<image class="small-arrow" src="/assets/imgs/small-arrow-right.png" />
</view>
</view>
<view class="opration-wrap">
<view class="opration-list">
<text>2268</text>
<text>积分</text>
</view>
<view class="opration-list">
<text>2268</text>
<text>优惠券</text>
</view>
<view class="opration-list">
<text>2268</text>
<text>分享值</text>
</view>
<view class="opration-list">
<image class="code" src="/assets/imgs/member-code.png" />
<text>会员码</text>
</view>
</view>
</view> </view>
<view class="" wx:if="{{pItem.type == 2}}">
<view class="member-interest"> <person-center person-data="{{pItem.customer}}" />
<!-- 收起 -->
<view class="interest-fold" bindtap="onTapUnfold">
<image src="/assets/imgs/plus-bg.png" />
<view class="interest-top">
<text class="title">PLUS 已为你节省 xxx 元</text>
</view>
<view class="recharge">
<text>一键续费PLUS会员</text>
<image src="/assets/imgs/small-arrow-right.png" />
</view>
</view>
<!-- 普通会员 -->
<view class="interest-fold" bindtap="onTapUnfold" wx:if="{{false}}">
<image src="/assets/imgs/regular-member.png" />
<view class="regular-top">
即刻成为
<text class="regular-title"> PLUS </text>
会员，立享xxx权益
</view>
<view class="recharge">
<!-- <text>一键续费PLUS会员</text> -->
<image src="/assets/imgs/small-arrow-right.png" />
</view>
</view>
<!-- 展开 -->
<view class="interest-unfold" id="plusImg">
<image class="interest-unfold-bg" src="/assets/imgs/interest-unfold.png" />
<view class="interest-title-line">
<image src="/assets/imgs/interest-line.png" />
</view>
<view class="personal-interest">
专属xxx权益
</view>
<view class="interest-name">
<view class="interest-ul">
<view class="interest-list">
<image class="interest-icon" src="/assets/imgs/interest-icon.png" />
<view class="interest-title">
<text>权益名称</text>
</view>
</view>
<view class="interest-list">
<image class="interest-icon" src="/assets/imgs/interest-icon.png" />
<view class="interest-title">
<text>权益名称</text>
</view>
</view>
<view class="interest-list">
<image class="interest-icon" src="/assets/imgs/interest-icon.png" />
<view class="interest-title">
<text>权益名称</text>
</view>
</view>
<view class="interest-list">
<image class="interest-icon" src="/assets/imgs/interest-icon.png" />
<view class="interest-title">
<text>权益名称</text>
</view>
</view>
<view class="interest-list">
<image class="interest-icon" src="/assets/imgs/interest-icon.png" />
<view class="interest-title">
<text>权益名称</text>
</view>
</view>
</view>
</view>
</view>
</view> </view>
</view> <view class="" wx:if="{{pItem.type == 3}}">
<pic-nav pic-nav="{{pItem.navigation.images}}" />
<view
class="main-content"
bindtouchstart="touchS"
bindtouchmove="touchM"
bindtouchend="touchE"
style="{{refreshClass}}"
>
<view class="order-ul">
<view class="order-list">
<view class="my-order">
<text class="order-title">我的订单</text>
<text class="look-all">查看全部订单</text>
</view>
<view class="order-item">
<view class="item">
<image class="order-icon" />
<view class="order-desc">待付款</view>
</view>
<view class="item">
<image class="order-icon" />
<view class="order-desc">待付款</view>
</view>
<view class="item">
<image class="order-icon" />
<view class="order-desc">待付款</view>
</view>
<view class="item">
<image class="order-icon" />
<view class="order-desc">待付款</view>
</view>
</view>
</view>
</view> </view>
<view class="banner"> <view class="" wx:if="{{pItem.type == 4}}">
<image src="/assets/imgs/invitation-bg.png" /> <bottom bottom="{{pItem.bottom}}" />
<view class="banner-title">
<view class="top-title">拉卡萨解放军</view>
<view class="bottom-title">地方的对方水电费第三方第三方</view>
</view>
</view> </view>
<view class="order-ul"> <view class="" wx:if="{{pItem.type == 5}}">
<view class="order-list"> <bottom-tabs currHomePageId="{{currHomePageId}}" currentHasUserInfo="{{currentHasUserInfo}}" tab-bar="{{pItem.tabBar}}" bind:updatePage="updatePage"/>
<view class="my-order">
<text class="order-title">常用工具？</text>
</view>
<view class="order-item">
<view class="item">
<image class="order-icon" />
<view class="order-desc">待付款</view>
</view>
<view class="item">
<image class="order-icon" />
<view class="order-desc">待付款</view>
</view>
<view class="item">
<image class="order-icon" />
<view class="order-desc">待付款</view>
</view>
<view class="item">
<image class="order-icon" />
<view class="order-desc">待付款</view>
</view>
<view class="item">
<image class="order-icon" />
<view class="order-desc">待付款</view>
</view>
</view>
<view class="tool-list" wx:if="{{false}}">
<view class="tool-item">
<image class="tool-icon" />
<view class="tool-desc">待付款</view>
</view>
<view class="tool-item">
<image class="tool-icon" />
<view class="tool-desc">待付款</view>
</view>
<view class="tool-item">
<image class="tool-icon" />
<view class="tool-desc">待付款</view>
</view>
<view class="tool-item">
<image class="tool-icon" />
<view class="tool-desc">待付款</view>
</view>
</view>
</view>
</view> </view>
</view> <view class="" wx:if="{{pItem.type == 6}}">
</view> <announcement notice="{{pItem.notice}}" />
<!--goHome--> </view>
<go-home/> <view class="" wx:if="{{pItem.type == 7}}">
<tab-sort category-type="{{pItem.categoryType}}" />
<!--<view class="animation-element-wrapper"> </view>
<view class="animation-element" animation="{{animation}}"></view> <view class="" wx:if="{{pItem.type == 8}}">
<attention focus-wx="{{pItem.focusWx}}" />
</view>
<view class="" wx:if="{{pItem.type == 9}}">
<plus sku-list="{{skuVOList}}" plus-bgi="{{pItem.plus}}" currentHasUserInfo="{{currentHasUserInfo}}"/>
</view>
</block>
</view> </view>
<view class="animation-buttons" scroll-y="true"> <guide-page-modal show="{{guidePageModalShow}}" />
<button class="animation-button" bindtap="translate">移动</button> <!--<authorization-modal isAuthorization='{{isAuthorization}}'/>-->
<button class="animation-button animation-button-reset" bindtap="reset">还原</button>
</view>-->
src/pages/my/my.wxss
/* pages/my/my.wxss */ /* pages/my/my.wxss */
page{ @import './../../base/base.wxss';
background-color: #F9F9F9; .user-center{
padding-bottom: 30rpx; box-sizing: border-box;
} padding-bottom: 200rpx;
.top-content{ height: 100%;
background-color: #ffffff;
}
.user-header-wrap{
padding: 60rpx 30rpx 0;
}
.avatar{
width: 96rpx;
height: 96rpx;
border-radius: 50%;
overflow: hidden;
}
.user-info{
display: inline-block;
margin-left: 30rpx;
}
.member,.name{
display: block;
}
.member{
font-size: 25rpx;
color: #c09a74;
margin-top: 4rpx;
}
.name{
font-size: 32rpx;
color: #666666;
margin-top: 10rpx;
}
.method-btn{
float: right;
font-size: 18rpx;
width: 160rpx;
height: 36rpx;
line-height: 36rpx;
text-align: center;
color: #c09a74;
border: 1px solid #c09a74;
border-radius: 34rpx;
}
.opration-list{
text-align: center;
min-width: 60rpx;
}
.opration-wrap{
display: flex;
justify-content: space-around;
margin-top: 50rpx;
}
.opration-list text{
display: block;
}
.opration-list text:first-child{
font-size: 32rpx;
color: #666666;
}
.opration-list text:last-child{
margin-top: 20rpx;
font-size: 20rpx;
}
.code{
display: block;
width: 36rpx;
height: 36rpx;
margin: 0 auto;
}
.small-arrow{
width: 18rpx;
height: 12rpx;
}
.avatar-wrap{
width: 93rpx;
height: 93rpx;
display: inline-block;
vertical-align: top;
position: relative;
}
.crown{
width: 26rpx;
height: 23rpx;
position: absolute;
top: -10rpx;
right: 0;
}
.member-interest{
margin-top: 30rpx;
}
.interest-fold{
width: 690rpx;
height: 76rpx;
position: relative;
margin: 0 auto -5rpx;
}
.interest-fold image{
width: 690rpx;
height: 76rpx;
}
.interest-top{
position: absolute;
top: 20rpx;
left: 24rpx;
}
.regular-top{
position: absolute;
top: 24rpx;
left: 24rpx;
font-size: 20rpx;
color: #C09A74;
}
.interest-top .title{
color: #89643f;
font-size: 20rpx;
}
.regular-title{
color: #F7B500;
font-weight: bold;
}
.recharge{
position: absolute;
top: 20rpx;
right: 24rpx;
}
.recharge text{
color: rgba(0,0,0,0.5);
font-size: 20rpx;
}
.recharge image{
width: 23rpx;
height: 16rpx;
margin-left: 9rpx;
}
.interest-unfold{
height: 225rpx;
position: relative;
}
.interest-unfold-bg{
width: 750rpx;
height:225rpx;
}
.interest-name{
position: absolute;
top: 60rpx;
left: 30rpx;
}
.interest-title-line{
position: absolute;
top: 15rpx;
left: 230rpx;
}
.interest-title-line image{
width: 286rpx;
height: 5rpx;
}
.personal-interest{
color: #89643f;
font-size: 20rpx;
position: absolute;
top: 27rpx;
left: 320rpx;
}
.interest-title{
color: #FACEA2;
font-size: 20rpx;
}
.interest-icon{
width: 72rpx;
height: 72rpx;
}
.interest-ul{
width: 630rpx;
padding: 0 30rpx;
display: flex;
justify-content: space-around;
}
.interest-list{
text-align: center;
} }
.main-content{ .main-content{
position: relative; margin-top: 18rpx;
/* margin-top: -4rpx; */
padding: 0 20rpx;
background-color: #F9F9F9;
margin-top: -228rpx;
z-index: 99;
}
.order-list{
width: 664rpx;
border-radius: 10rpx;
background-color: rgba(255, 255, 255, 1);
box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1);
padding: 18rpx 20rpx 43rpx 23rpx;
}
.my-order{
padding-bottom: 7rpx;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
position: relative;
}
.order-title{
font-size: 26rpx;
}
.look-all{
position: absolute;
right: 0;
bottom: 7rpx;
font-size: 21rpx;
color: #C09A74;
} }
.order-icon{ .top-content,.bottom-content{
width: 71rpx;
height: 69rpx;
background-color: #D8D8D8;
}
.order-desc{
font-size: 23rpx;
color: #666660;
}
.order-item{
margin-top: 50rpx;
display: flex; display: flex;
flex-wrap: wrap; flex-direction: row;
flex-wrap: nowrap;
justify-content: space-between;
} }
.item{ .top-content image{
text-align: center; width: 337rpx;
width: 25%;
margin-bottom: 20rpx;
} }
.banner{ .top-left-img image{
width: 710rpx; height: 337rpx;
height: 151rpx;
margin: 17rpx 0;
position: relative;
} }
.banner image{ .top-right-img image{
width: 710rpx; height: 160rpx;
height: 151rpx;
} }
.banner-title{ .bottom-content image{
position: absolute; width: 337rpx;
top: 40rpx; height: 160rpx;
left: 70rpx;
} }
.top-title{ .arrow-left {
font-size: 20rpx; width: 32rpx;
color: #C09A74; height: 32rpx;
}
.bottom-title{
font-size: 30rpx;
margin-top: 7rpx;
}
.tool-item{
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
padding: 23rpx 0;
}
.tool-icon{
width: 58rpx;
height: 58rpx;
background-color: #D8D8D8;
vertical-align: middle; vertical-align: middle;
} }
.tool-desc{ .page-bgc {
font-size: 26rpx; background-color: rgba(255, 255, 255, 1);
color: #666660;
display: inline-block;
margin-left: 23rpx;
vertical-align: middle;
} }
.person-hot {
text-align: center;
padding: 17rpx 0;
.animation-element-wrapper {
display: flex;
width: 100%;
padding-top: 150rpx;
padding-bottom: 150rpx;
justify-content: center;
overflow: hidden;
background-color: #ffffff;
z-index: 8888;
}
.animation-element {
width: 200rpx;
height: 200rpx;
z-index: 8888;
background-color: #1AAD19;
}
.animation-buttons {
padding: 30rpx 50rpx 10rpx;
width: 100%;
height: 700rpx;
box-sizing: border-box;
} }
.animation-button { .person-text {
float: left; height: 32rpx;
line-height: 2; color: rgba(51, 51, 48, 1);
width: 300rpx; font-size: 23rpx;
margin: 15rpx 12rpx; text-align: left;
font-family: PingFangSC-Regular;
} }
.hot {
.animation-button-reset { height: 32rpx;
width: 620rpx; color: rgba(192, 154, 116, 1);
font-size: 23rpx;
text-align: left;
font-family: PingFangSC-Regular;
padding-left: 10rpx;
} }
src/pages/my_11/my.js 0 → 100644
// pages/my/my.js
const app = getApp()
const wxService = require('../../utils/wxService')
const utils = require('../../utils/util')
const envInfo = require('../../config/index').envInfo
wxService.page({
/**
* 页面的初始数据
*/
data: {
unfold:false,
startY:'',
refreshClass:'',
delBtnWidth:''
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady () {
this.animation = wx.createAnimation({
duration: 1000,
timingFunction: 'linear'
})
},
translate () {
// 平移变换
// this.animation.translateY(- 80).step()
this.animation.translateY(- 180).step()
this.setData({animation: this.animation.export()})
},
reset () {
this.animation.translateY(0)
.step({duration: 0})
this.setData({animation: this.animation.export()})
},
//点击展开
onTapUnfold(){
this.setData({
unfold: !this.data.unfold
})
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
if (typeof this.getTabBar === 'function' &&
this.getTabBar()) {
this.getTabBar().setData({
selected: 3
})
}
const query = wx.createSelectorQuery()
query.select('#plusImg').boundingClientRect()
query.selectViewport().scrollOffset()
var that = this;
query.exec(function (res) {
that.setData({
delBtnWidth: res[0].height
})
})
},
// 开始滑动事件
touchS: function (e) {
console.log('e', e)
if (e.touches.length == 1) {
this.setData({
//设置触摸起始点水平方向位置
startY: e.touches[0].clientY
});
}
},
touchM: function (e) {
console.log('333', e)
if (e.touches.length == 1) {
//手指移动时y方向位置
var moveY = e.touches[0].clientY;
//手指起始点位置与移动期间的差值
var disY = moveY - this.data.startY;
var delBtnWidth = this.data.delBtnWidth;
var moveDistance = delBtnWidth - disY;
var txtStyle = "";
console.log('------', disY)
if (disY == 0 || disY < 0) { //如果移动距离小于等于0，文本层位置不变
txtStyle = "margin-top:-" + delBtnWidth;
} else if (disY > 0) { //移动距离大于0，文本层left值等于手指移动距离
txtStyle = "margin-top:-" + moveDistance + "px";
console.log('+++', txtStyle)
if (disY >= delBtnWidth) {
//控制手指移动距离最大值为删除按钮的宽度
txtStyle = "margin-top:0px" ;
}
}
this.setData({
refreshClass: txtStyle
})
console.log(txtStyle)
}
},
// 滑动结束事件
touchE: function (e) {
if (e.changedTouches.length == 1) {
//手指移动结束后水平位置
var endY = e.changedTouches[0].clientY;
//触摸开始与结束，手指移动的距离
var disY = endY-this.data.startY;
var delBtnWidth = this.data.delBtnWidth;
//如果距离小于删除按钮的1/2，不显示删除按钮
var txtStyle = "";
console.log('.....', disY)
if (disY > 0){
txtStyle = disY > delBtnWidth ? "margin-top:-" + delBtnWidth : "margin-top:" + disY + "px";
this.setData({
refreshClass: txtStyle
})
}
console.log('////',txtStyle)
} else {
}
},
})
\ No newline at end of file
src/pages/my_11/my.json 0 → 100644
{
"navigationBarTitleText": "我的",
"disableScroll": true,
"usingComponents": {
"bottom-tabs": "./../../component/bottomTabs/bottomTabs",
"go-home": "/component/goHome/goHome"
}
}
\ No newline at end of file
src/pages/my_11/my.wxml 0 → 100644
<!--pages/my/my.wxml-->
<view class="page-user-center">
<view class="top-content">
<view class="user-header-wrap">
<view class="header-content">
<view class="avatar-wrap">
<view class="avatar">
<open-data type="userAvatarUrl" />
</view>
<image class="crown" src="/assets/imgs/crown.png" />
</view>
<view class="user-info">
<text class="member">分享号会员</text>
<text class="name">会员名称</text>
</view>
<view class="method-btn">不会玩看这里
<image class="small-arrow" src="/assets/imgs/small-arrow-right.png" />
</view>
</view>
<view class="opration-wrap">
<view class="opration-list">
<text>2268</text>
<text>积分</text>
</view>
<view class="opration-list">
<text>2268</text>
<text>优惠券</text>
</view>
<view class="opration-list">
<text>2268</text>
<text>分享值</text>
</view>
<view class="opration-list">
<image class="code" src="/assets/imgs/member-code.png" />
<text>会员码</text>
</view>
</view>
</view>
<view class="member-interest">
<!-- 收起 -->
<view class="interest-fold" bindtap="onTapUnfold">
<image src="/assets/imgs/plus-bg.png" />
<view class="interest-top">
<text class="title">PLUS 已为你节省 xxx 元</text>
</view>
<view class="recharge">
<text>一键续费PLUS会员</text>
<image src="/assets/imgs/small-arrow-right.png" />
</view>
</view>
<!-- 普通会员 -->
<view class="interest-fold" bindtap="onTapUnfold" wx:if="{{false}}">
<image src="/assets/imgs/regular-member.png" />
<view class="regular-top">
即刻成为
<text class="regular-title"> PLUS </text>
会员，立享xxx权益
</view>
<view class="recharge">
<!-- <text>一键续费PLUS会员</text> -->
<image src="/assets/imgs/small-arrow-right.png" />
</view>
</view>
<!-- 展开 -->
<view class="interest-unfold" id="plusImg">
<image class="interest-unfold-bg" src="/assets/imgs/interest-unfold.png" />
<view class="interest-title-line">
<image src="/assets/imgs/interest-line.png" />
</view>
<view class="personal-interest">
专属xxx权益
</view>
<view class="interest-name">
<view class="interest-ul">
<view class="interest-list">
<image class="interest-icon" src="/assets/imgs/interest-icon.png" />
<view class="interest-title">
<text>权益名称</text>
</view>
</view>
<view class="interest-list">
<image class="interest-icon" src="/assets/imgs/interest-icon.png" />
<view class="interest-title">
<text>权益名称</text>
</view>
</view>
<view class="interest-list">
<image class="interest-icon" src="/assets/imgs/interest-icon.png" />
<view class="interest-title">
<text>权益名称</text>
</view>
</view>
<view class="interest-list">
<image class="interest-icon" src="/assets/imgs/interest-icon.png" />
<view class="interest-title">
<text>权益名称</text>
</view>
</view>
<view class="interest-list">
<image class="interest-icon" src="/assets/imgs/interest-icon.png" />
<view class="interest-title">
<text>权益名称</text>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
<view
class="main-content"
bindtouchstart="touchS"
bindtouchmove="touchM"
bindtouchend="touchE"
style="{{refreshClass}}"
>
<view class="order-ul">
<view class="order-list">
<view class="my-order">
<text class="order-title">我的订单</text>
<text class="look-all">查看全部订单</text>
</view>
<view class="order-item">
<view class="item">
<image class="order-icon" />
<view class="order-desc">待付款</view>
</view>
<view class="item">
<image class="order-icon" />
<view class="order-desc">待付款</view>
</view>
<view class="item">
<image class="order-icon" />
<view class="order-desc">待付款</view>
</view>
<view class="item">
<image class="order-icon" />
<view class="order-desc">待付款</view>
</view>
</view>
</view>
</view>
<view class="banner">
<image src="/assets/imgs/invitation-bg.png" />
<view class="banner-title">
<view class="top-title">拉卡萨解放军</view>
<view class="bottom-title">地方的对方水电费第三方第三方</view>
</view>
</view>
<view class="order-ul">
<view class="order-list">
<view class="my-order">
<text class="order-title">常用工具？</text>
</view>
<view class="order-item">
<view class="item">
<image class="order-icon" />
<view class="order-desc">待付款</view>
</view>
<view class="item">
<image class="order-icon" />
<view class="order-desc">待付款</view>
</view>
<view class="item">
<image class="order-icon" />
<view class="order-desc">待付款</view>
</view>
<view class="item">
<image class="order-icon" />
<view class="order-desc">待付款</view>
</view>
<view class="item">
<image class="order-icon" />
<view class="order-desc">待付款</view>
</view>
</view>
<view class="tool-list" wx:if="{{false}}">
<view class="tool-item">
<image class="tool-icon" />
<view class="tool-desc">待付款</view>
</view>
<view class="tool-item">
<image class="tool-icon" />
<view class="tool-desc">待付款</view>
</view>
<view class="tool-item">
<image class="tool-icon" />
<view class="tool-desc">待付款</view>
</view>
<view class="tool-item">
<image class="tool-icon" />
<view class="tool-desc">待付款</view>
</view>
</view>
</view>
</view>
</view>
</view>
<!--goHome-->
<go-home/>
<!--<view class="animation-element-wrapper">
<view class="animation-element" animation="{{animation}}"></view>
</view>
<view class="animation-buttons" scroll-y="true">
<button class="animation-button" bindtap="translate">移动</button>
<button class="animation-button animation-button-reset" bindtap="reset">还原</button>
</view>-->
src/pages/my_11/my.wxss 0 → 100644
/* pages/my/my.wxss */
page{
background-color: #F9F9F9;
padding-bottom: 30rpx;
}
.top-content{
background-color: #ffffff;
}
.user-header-wrap{
padding: 60rpx 30rpx 0;
}
.avatar{
width: 96rpx;
height: 96rpx;
border-radius: 50%;
overflow: hidden;
}
.user-info{
display: inline-block;
margin-left: 30rpx;
}
.member,.name{
display: block;
}
.member{
font-size: 25rpx;
color: #c09a74;
margin-top: 4rpx;
}
.name{
font-size: 32rpx;
color: #666666;
margin-top: 10rpx;
}
.method-btn{
float: right;
font-size: 18rpx;
width: 160rpx;
height: 36rpx;
line-height: 36rpx;
text-align: center;
color: #c09a74;
border: 1px solid #c09a74;
border-radius: 34rpx;
}
.opration-list{
text-align: center;
min-width: 60rpx;
}
.opration-wrap{
display: flex;
justify-content: space-around;
margin-top: 50rpx;
}
.opration-list text{
display: block;
}
.opration-list text:first-child{
font-size: 32rpx;
color: #666666;
}
.opration-list text:last-child{
margin-top: 20rpx;
font-size: 20rpx;
}
.code{
display: block;
width: 36rpx;
height: 36rpx;
margin: 0 auto;
}
.small-arrow{
width: 18rpx;
height: 12rpx;
}
.avatar-wrap{
width: 93rpx;
height: 93rpx;
display: inline-block;
vertical-align: top;
position: relative;
}
.crown{
width: 26rpx;
height: 23rpx;
position: absolute;
top: -10rpx;
right: 0;
}
.member-interest{
margin-top: 30rpx;
}
.interest-fold{
width: 690rpx;
height: 76rpx;
position: relative;
margin: 0 auto -5rpx;
}
.interest-fold image{
width: 690rpx;
height: 76rpx;
}
.interest-top{
position: absolute;
top: 20rpx;
left: 24rpx;
}
.regular-top{
position: absolute;
top: 24rpx;
left: 24rpx;
font-size: 20rpx;
color: #C09A74;
}
.interest-top .title{
color: #89643f;
font-size: 20rpx;
}
.regular-title{
color: #F7B500;
font-weight: bold;
}
.recharge{
position: absolute;
top: 20rpx;
right: 24rpx;
}
.recharge text{
color: rgba(0,0,0,0.5);
font-size: 20rpx;
}
.recharge image{
width: 23rpx;
height: 16rpx;
margin-left: 9rpx;
}
.interest-unfold{
height: 225rpx;
position: relative;
}
.interest-unfold-bg{
width: 750rpx;
height:225rpx;
}
.interest-name{
position: absolute;
top: 60rpx;
left: 30rpx;
}
.interest-title-line{
position: absolute;
top: 15rpx;
left: 230rpx;
}
.interest-title-line image{
width: 286rpx;
height: 5rpx;
}
.personal-interest{
color: #89643f;
font-size: 20rpx;
position: absolute;
top: 27rpx;
left: 320rpx;
}
.interest-title{
color: #FACEA2;
font-size: 20rpx;
}
.interest-icon{
width: 72rpx;
height: 72rpx;
}
.interest-ul{
width: 630rpx;
padding: 0 30rpx;
display: flex;
justify-content: space-around;
}
.interest-list{
text-align: center;
}
.main-content{
position: relative;
/* margin-top: -4rpx; */
padding: 0 20rpx;
background-color: #F9F9F9;
margin-top: -228rpx;
z-index: 99;
}
.order-list{
width: 664rpx;
border-radius: 10rpx;
background-color: rgba(255, 255, 255, 1);
box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1);
padding: 18rpx 20rpx 43rpx 23rpx;
}
.my-order{
padding-bottom: 7rpx;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
position: relative;
}
.order-title{
font-size: 26rpx;
}
.look-all{
position: absolute;
right: 0;
bottom: 7rpx;
font-size: 21rpx;
color: #C09A74;
}
.order-icon{
width: 71rpx;
height: 69rpx;
background-color: #D8D8D8;
}
.order-desc{
font-size: 23rpx;
color: #666660;
}
.order-item{
margin-top: 50rpx;
display: flex;
flex-wrap: wrap;
}
.item{
text-align: center;
width: 25%;
margin-bottom: 20rpx;
}
.banner{
width: 710rpx;
height: 151rpx;
margin: 17rpx 0;
position: relative;
}
.banner image{
width: 710rpx;
height: 151rpx;
}
.banner-title{
position: absolute;
top: 40rpx;
left: 70rpx;
}
.top-title{
font-size: 20rpx;
color: #C09A74;
}
.bottom-title{
font-size: 30rpx;
margin-top: 7rpx;
}
.tool-item{
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
padding: 23rpx 0;
}
.tool-icon{
width: 58rpx;
height: 58rpx;
background-color: #D8D8D8;
vertical-align: middle;
}
.tool-desc{
font-size: 26rpx;
color: #666660;
display: inline-block;
margin-left: 23rpx;
vertical-align: middle;
}
.animation-element-wrapper {
display: flex;
width: 100%;
padding-top: 150rpx;
padding-bottom: 150rpx;
justify-content: center;
overflow: hidden;
background-color: #ffffff;
z-index: 8888;
}
.animation-element {
width: 200rpx;
height: 200rpx;
z-index: 8888;
background-color: #1AAD19;
}
.animation-buttons {
padding: 30rpx 50rpx 10rpx;
width: 100%;
height: 700rpx;
box-sizing: border-box;
}
.animation-button {
float: left;
line-height: 2;
width: 300rpx;
margin: 15rpx 12rpx;
}
.animation-button-reset {
width: 620rpx;
}
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