Commit 8fbc7196 by 赵雅纹

Merge branch 'dev_7.1.0' into feature-zyw-sc

# Conflicts:
#	src/app.json
parents 28e0ebf8 98609b94
...@@ -24,7 +24,8 @@ ...@@ -24,7 +24,8 @@
"pages/myShare/myShare", "pages/myShare/myShare",
"pages/user-center/user-center", "pages/user-center/user-center",
"pages/productDetail/productDetail", "pages/productDetail/productDetail",
"pages/confirmOrder/confirmOrder" "pages/confirmOrder/confirmOrder",
"pages/productDetail/productDetail"
], ],
"subPackages": [ "subPackages": [
{ {
......
...@@ -9,7 +9,7 @@ ...@@ -9,7 +9,7 @@
<view class="auto-old"><span class="auto-old-num">2. </span>若在领取新会员卡过程中输入新手机号,会造成原会员及积分信息的更替。</view> <view class="auto-old"><span class="auto-old-num">2. </span>若在领取新会员卡过程中输入新手机号,会造成原会员及积分信息的更替。</view>
<view class="auto-old"><span class="auto-old-num">3. </span>领取后的新会员卡,将存放在"微信-卡包"。</view> <view class="auto-old"><span class="auto-old-num">3. </span>领取后的新会员卡,将存放在"微信-卡包"。</view>
</view> </view>
<view class='auth-shop' wx:else>广东7-Eleven申请获取授权,用于会员服务</view> <view class='auth-shop' wx:else>微商城申请获取授权,用于会员服务</view>
<button type='primary' wx:if="{{!isAuthorizationActiveText}}" bindgetuserinfo="_getUserInfo" open-type='getUserInfo' class='agree' disabled='{{!checkAll}}'>同意</button> <button type='primary' wx:if="{{!isAuthorizationActiveText}}" bindgetuserinfo="_getUserInfo" open-type='getUserInfo' class='agree' disabled='{{!checkAll}}'>同意</button>
<button type='primary' wx:else class='agree' disabled='{{!checkAll}}' bindtap="handleActiveAgree">同意并领取新会员卡</button> <button type='primary' wx:else class='agree' disabled='{{!checkAll}}' bindtap="handleActiveAgree">同意并领取新会员卡</button>
<view class='rule-wrap'> <view class='rule-wrap'>
......
// component/selectCoupon/selectCoupon.js
Component({
/**
* 组件的属性列表
*/
properties: {
show: { // 显示标识
type: Boolean,
value: false
}
},
/**
* 组件的初始数据
*/
data: {
},
/**
* 组件的方法列表
*/
methods: {
},
hidePopup: function () { // 隐藏弹出框
this.setData({
show: false
})
},
})
<view class="modal-container{{show ? ' active' : ''}}" bindtap="hidePopup"></view>
<view class="modal-content{{show ? ' active' : ''}}">
<view class="modal-header">
<image src="/assets/imgs/7_1_0/arrow-right.png" class="modal-to-back" mode="widthFix"></image>
<text class="modal-title">选择优惠券</text>
<image class="modal-close" mode="widthFix" src="/assets/imgs/7_1_0/arrow-right.png" bindtap="hidePopup"></image>
</view>
<view class="modal-info">
<view class="coupon-list">
<image class="coupon-bg" src="/assets/imgs/7_1_0/coupon-bg.png" mode="widthFix"></image>
<view class="coupon-info">
<view class="left-price">
<view class="top-price">
<text>¥</text>
<text class="amount">50</text>
</view>
<view class="bottom-desc">
满99可用
</view>
</view>
<view class="right-info">
<view class="coupon-title">新人礼包劵</view>
<view class="coupon-time">有效期</view>
<view class="coupon-desc">拼团及特殊商品不可用</view>
</view>
<view></view>
</view>
</view>
<!-- <view class="coupon-list">
<image class="coupon-bg" src="/assets/imgs/7_1_0/coupon-bg.png" mode="widthFix"></image>
<view class="coupon-info">
<view class="left-price">
<view class="top-price">
<text>¥</text>
<text class="amount">50</text>
</view>
<view class="bottom-desc">
满99可用
</view>
</view>
<view class="right-info">
<view class="coupon-title">新人礼包劵</view>
<view class="coupon-time">有效期</view>
<view class="coupon-desc">拼团及特殊商品不可用</view>
</view>
<view></view>
</view>
</view>
<view class="coupon-list">
<image class="coupon-bg" src="/assets/imgs/7_1_0/coupon-bg.png" mode="widthFix"></image>
<view class="coupon-info">
<view class="left-price">
<view class="top-price">
<text>¥</text>
<text class="amount">50</text>
</view>
<view class="bottom-desc">
满99可用
</view>
</view>
<view class="right-info">
<view class="coupon-title">新人礼包劵</view>
<view class="coupon-time">有效期</view>
<view class="coupon-desc">拼团及特殊商品不可用</view>
</view>
<view></view>
</view>
</view> -->
<view class="empty-coupon">
暂无可用优惠券
</view>
</view>
</view>
/* component/selectCoupon/selectCoupon.wxss */
.modal-container {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.5);
transform: translateY(100%);
opacity: 0;
transition: opacity 200ms;
z-index: 98;
}
.modal-container.active {
opacity: 1;
transform: translateY(0); }
.modal-content.active {
transform: translateY(0); }
.out-stock {
background: #FFB400!important;
}
.modal-content {
position: fixed;
z-index: 99;
width: 100%;
bottom: 0;
left: 0;
background: #ffffff;
transition: transform 300ms;
transform: translateY(100%);
height: 1000rpx;
}
.modal-content .modal-close {
position: absolute;
right: 24rpx;
top: 35rpx;
width: 18rpx;
}
.modal-to-back{
width: 18rpx;
position: absolute;
left: 24rpx;
top: 35rpx;
}
.modal-title{
color: #333333;
font-size: 32rpx;
position: absolute;
left: 295rpx;
top: 28rpx;
}
.coupon-list{
width: 702rpx;
height: 174rpx;
position: relative;
margin-bottom: 25rpx;
}
.coupon-bg{
width: 100%;
position: absolute;
top: 0;
left: 0;
z-index: -1;
}
.modal-info{
padding: 0 24rpx;
margin-top: 95rpx;
}
.left-price,.right-info{
display: inline-block;
}
.left-price{
font-size: 18rpx;
color:#CB3C3C;
position: absolute;
top: 36rpx;
left: 48rpx;
}
.amount{
font-size: 54rpx;
}
.right-info{
position: absolute;
top: 33rpx;
left: 205rpx;
}
.coupon-title{
font-size: 28rpx;
color: #333333;
}
.coupon-time{
color: #aaaaaa;
font-size: 20rpx;
}
.coupon-desc{
color: #aaaaaa;
font-size: 22rpx;
margin-top: 12rpx;
}
.modal-info{
max-height: 900rpx;
overflow: scroll;
}
.empty-coupon{
width: 100%;
color: #aaaaaa;
margin-top:211rpx ;
text-align: center;
}
...@@ -37,6 +37,15 @@ Component({ ...@@ -37,6 +37,15 @@ Component({
}, },
{ {
label: '分类6' label: '分类6'
},
{
label: '分类7'
},
{
label: '分类8'
},
{
label: '分类9'
} }
] ]
}, },
......
const app = getApp(); const app = getApp();
const utils = require('../utils/util')
const wxService = require('../utils/wxService')
Component({ Component({
//数据 //数据
data: { data: {
currentHeight: 52,
currentMarginTop: 25,
currentPaddingTop: 5,
selected: 0,//当前tabBar页面 selected: 0,//当前tabBar页面
color: "#cdcdcd",//未选中tabBar时的文字颜色 color: "#cdcdcd",//未选中tabBar时的文字颜色
selectedColor: "#22385d",//选中时tabBar文字颜色 selectedColor: "#22385d",//选中时tabBar文字颜色
...@@ -36,6 +41,15 @@ Component({ ...@@ -36,6 +41,15 @@ Component({
] ]
}, },
ready() { ready() {
wxService.getSystemInfo().then(res => {
const {statusBarHeight} = res
const {currentHeight,currentMarginTop,currentPaddingTop} = this.data
this.setData({
currentHeight: currentHeight + statusBarHeight,
currentMarginTop: currentMarginTop + (statusBarHeight) / 6,
currentPaddingTop: statusBarHeight== 44 ? currentPaddingTop + 5 : currentPaddingTop,
})
})
}, },
methods: { methods: {
......
<cover-view class="tab-bar"> <cover-view class="tab-bar" style="height:{{currentHeight}}px">
<!-- 背景图片 --> <!-- 背景图片 -->
<cover-image class='tab-bar-bg' src='/assets/imgs/7_1_0/bg.png' /> <cover-image class='tab-bar-bg' src='/assets/imgs/7_1_0/bg.png' />
<!-- 首页 --> <!-- 首页 -->
<cover-view <cover-view
class='tab-bar-index' class='tab-bar-index'
style="margin-top:{{currentMarginTop}}px"
data-index='0' data-index='0'
data-path='{{list[0].pagePath}}' data-path='{{list[0].pagePath}}'
bindtap='tab_bar_index' bindtap='tab_bar_index'
...@@ -21,6 +22,7 @@ ...@@ -21,6 +22,7 @@
data-index='1' data-index='1'
data-path='{{list[1].pagePath}}' data-path='{{list[1].pagePath}}'
bindtap='tab_bar_index' bindtap='tab_bar_index'
style="margin-top:{{currentMarginTop}}px"
> >
<cover-view class='tab-bar-icon'> <cover-view class='tab-bar-icon'>
<cover-image src='{{selected == 1 ? list[1].selectedIconPath : list[1].iconPath}}' class='tab-bar-img' /> <cover-image src='{{selected == 1 ? list[1].selectedIconPath : list[1].iconPath}}' class='tab-bar-img' />
...@@ -35,12 +37,13 @@ ...@@ -35,12 +37,13 @@
<cover-view style='width:100%;height:42rpx;' /> <cover-view style='width:100%;height:42rpx;' />
<cover-image class='tab-bar-img-add' src='{{addImgPath}}' /> <cover-image class='tab-bar-img-add' src='{{addImgPath}}' />
</cover-view> </cover-view>
<cover-view class="share-text">分享号</cover-view> <cover-view class="share-text" style="padding-top:{{currentPaddingTop}}px">分享号</cover-view>
</cover-view> </cover-view>
<!-- 购物车 --> <!-- 购物车 -->
<cover-view <cover-view
class='tab-bar-index' class='tab-bar-index'
style="margin-top:{{currentMarginTop}}px"
data-index='2' data-index='2'
data-path='{{list[2].pagePath}}' data-path='{{list[2].pagePath}}'
bindtap='tab_bar_index' bindtap='tab_bar_index'
...@@ -55,6 +58,7 @@ ...@@ -55,6 +58,7 @@
<!-- 我的 --> <!-- 我的 -->
<cover-view <cover-view
class='tab-bar-index' class='tab-bar-index'
style="margin-top:{{currentMarginTop}}px"
data-index='3' data-index='3'
data-path='{{list[3].pagePath}}' data-path='{{list[3].pagePath}}'
bindtap='tab_bar_index' bindtap='tab_bar_index'
......
...@@ -6,13 +6,14 @@ ...@@ -6,13 +6,14 @@
flex-direction: row; flex-direction: row;
position: fixed; position: fixed;
bottom: 0; bottom: 0;
background-color: #fff;
} }
/* 背景图片 */ /* 背景图片 */
.tab-bar-bg{ .tab-bar-bg{
display: flex; display: flex;
position: absolute; position: absolute;
width: 100%; width: 100%;
height: 100%; height: 80%;
z-index: -1; z-index: -1;
} }
/* 背景一条线 */ /* 背景一条线 */
...@@ -30,7 +31,7 @@ ...@@ -30,7 +31,7 @@
flex: 1; flex: 1;
font-size: 30rpx; font-size: 30rpx;
height: 50px; height: 50px;
margin-top: 50rpx; margin-top: 25px;
z-index: 1; z-index: 1;
box-sizing: border-box; box-sizing: border-box;
} }
...@@ -38,7 +39,7 @@ ...@@ -38,7 +39,7 @@
.tab-bar-index-add{ .tab-bar-index-add{
font-size: 30rpx; font-size: 30rpx;
z-index: 1; z-index: 1;
height: 70px; height: 150rpx;
text-align: center; text-align: center;
} }
/* 图标字体结合内容快 */ /* 图标字体结合内容快 */
...@@ -52,7 +53,7 @@ ...@@ -52,7 +53,7 @@
/* 图标字体结合内容快添加发布单独设置 */ /* 图标字体结合内容快添加发布单独设置 */
.tab-bar-icon_add{ .tab-bar-icon_add{
width: 100%; width: 100%;
height: 50px; height: 66%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
...@@ -62,10 +63,10 @@ ...@@ -62,10 +63,10 @@
height: 37rpx; height: 37rpx;
margin: 0 auto; margin: 0 auto;
} }
/* 内容添加发布单独图片设置 */ /* 内容添加发布单独图片设置 */
.tab-bar-img-add{ .tab-bar-img-add{
width: 74rpx; width: 80rpx;
height: 74rpx; height: 80rpx;
margin: 0 auto; margin: 0 auto;
} }
/* 内容快挤位置 */ /* 内容快挤位置 */
......
// pages/confirmOrder/confirmOrder.js
Page({
/**
* 页面的初始数据
*/
data: {
addressInfo:'',
showSelectCoupon:false
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
//获取微信地址
chooseWxAddress(){
wx.chooseAddress({
success: (res) => {
console.log(res)
this.setData({
addressInfo:res
})
},
fail: function (err) {
console.log(err)
}
})
},
//选择优惠券
selectCoupon(){
this.setData({
showSelectCoupon:true
})
}
})
\ No newline at end of file
{
"navigationBarTitleText": "确认订单",
"usingComponents": {
"select-coupon": "/component/selectCoupon/selectCoupon"
}
}
\ No newline at end of file
<!--pages/confirmOrder/confirmOrder.wxml-->
<view class="page-confirm-order">
<view class="address-wrap">
<block wx:if="{{false}}">
<view class="address-section">
<input class="address-input" placeholder="请输入收货人姓名"></input>
<input class="address-input" placeholder="请输入手机号码"></input>
</view>
<view class="address-section">
<!-- <view class="">所在区域</view> -->
<picker class="address-input address-picker" mode="region" bindchange="bindRegionChange" value="{{region}}" custom-item="{{customItem}}">
<view class="picker-choose">
</view>
</picker>
</view>
<view class="address-section">
<input class="address-input address-detail" placeholder="请输入路名门牌号"></input>
</view>
</block>
<block>
<view class="address-list">
<view class="address-info">
<view>
<text class="user-name">{{addressInfo.userName}}</text>
<text class="phone-number">{{addressInfo.telNumber}}</text>
</view>
<view class="address-list-detail">
{{addressInfo.provinceName}} {{addressInfo.cityName}} {{addressInfo.countyName}} {{addressInfo.detailInfo}}
</view>
<view class="arrow-right-wrap">
<image class="arrow-right" src="/assets/imgs/7_1_0/arrow-right.png"></image>
</view>
</view>
</view>
</block>
<view class="wx-address" bindtap="chooseWxAddress">
+ 使用微信地址
</view>
</view>
<view class="address-line">
<image src="/assets/imgs/7_1_0/address-line.png"></image>
</view>
<!-- 分割线 -->
<view class="gray-line"></view>
<!-- 商品列表 -->
<view class="pro-wrap">
<view class="pro-list">
<image class="pro-img" src="/assets/imgs/7_1_0/address-line.png"></image>
<view class="pro-info">
<view class="pro-name">商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名</view>
<view class="pro-desc">
规格
</view>
<view class="pro-price">
<text class="price">¥258</text>
<text class="number">x 1</text>
</view>
</view>
</view>
<view class="pro-list">
<image class="pro-img" src="/assets/imgs/7_1_0/address-line.png"></image>
<view class="pro-info">
<view class="pro-name">商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名</view>
<view class="pro-desc">
规格
</view>
<view class="pro-price">
<text class="price">¥258</text>
<text class="number">x 1</text>
</view>
</view>
</view>
</view>
<!-- 分割线 -->
<view class="gray-line"></view>
<!-- 商品合计 -->
<view class="pro-sum">
<view class="plus-wrap">
<view class="plus-top-text">
<image src="/assets/imgs/7_1_0/plus-icon.png"></image>
<text>现在勾选</text>
</view>
<view class="plus-bottom-text">
<text>vip可尊享N大权益</text>
<image src="/assets/imgs/7_1_0/explain.png"></image>
</view>
<view class="select-desc">
<!-- <image src="{{isSelect ? '/assets/imgs/7_1_0/selected.png' : '/assets/imgs/7_1_0/unselect.png'}}" class="{{isSelect ? 'select-tip' : 'unselect-tip'}}"></image> -->
<text>{{isSelect ? '已勾选,即享优惠' : '勾选开通'}}</text>
</view>
<view class="select-type {{isSelect ? 'theme-color' : ''}}">
<image src="{{isSelect ? '/assets/imgs/7_1_0/tick-success.png' : '/assets/imgs/7_1_0/tick.png'}}"></image>
</view>
</view>
<view class="order-sum">
<view class="order-price">
<view class="pro-total-price">
<text class="price-label">商品合计</text>
<text class="total-price">¥306</text>
</view>
<view class="plus-price">
<view class="plus-info">
<text class="price-label">plus会员价</text>
<text class="member-price">-¥20</text>
</view>
<text class="plus-member-price">¥289</text>
</view>
</view>
<view class="coupon">
<view>
<text class="price-label">优惠券</text>
<view class="select-coupon" bindtap="selectCoupon">
<text class="{{haveCoupon ? 'coupon-price' : 'no-coupon'}}">{{haveCoupon ? '-¥100' : '无可用优惠券'}}</text>
<image class="arrow-right" src="/assets/imgs/7_1_0/arrow-right.png"></image>
</view>
</view>
</view>
<view class="coupon">
<view>
<text class="price-label">VIP会员年费</text>
<text class="vip-desc"> (不可使用任何优惠或积分)</text>
<view class="select-coupon">
<text class="coupon-price">+¥100</text>
<image class="arrow-right" src="/assets/imgs/7_1_0/arrow-right.png"></image>
</view>
</view>
</view>
<!-- <view class="total">
<text class="total-label">小计:</text>
<text class="total-numer">¥186</text>
</view> -->
</view>
</view>
<view class="pro-footer">
<view class="cost">
<text class="cost-label">实付款:</text>
<text class="cost-price">¥306</text>
</view>
<view class="theme-color buy-btn">立即购买</view>
</view>
</view>
<select-coupon
show="{{showSelectCoupon}}"
/>
\ No newline at end of file
/* pages/confirmOrder/confirmOrder.wxss */
.address-wrap{
padding: 0 30rpx;
}
.address-section{
display: flex;
justify-content: space-between;
}
.address-input{
width: 293rpx;
height: 60rpx;
border-radius: 5rpx;
background-color: rgba(238, 238, 238, 1);
opacity: 0.5;
padding: 0 20rpx;
color: rgba(0, 0, 0, 0.25);
font-size: 28rpx;
margin-bottom: 18rpx;
}
.address-detail{
flex: 1;
}
.address-picker{
flex: 1;
}
.picker-choose{
color: rgba(0, 0, 0, 0.25);
font-size: 28rpx;
line-height: 60rpx;
}
.wx-address{
width: 244rpx;
height: 46rpx;
line-height: 46rpx;
margin: 4rpx auto 22rpx;
color: #C09A74;
font-size: 24rpx;
text-align: center;
}
.address-line{
height: 6rpx;
position: relative;
}
.address-line image{
width: 750rpx;
height: 6rpx;
position: absolute;
}
.gray-line{
width: 750rpx;
height: 22rpx;
background-color: rgba(249, 249, 249, 1);
}
.pro-wrap{
padding: 0 32rpx 0 30rpx;
}
.pro-list{
border-bottom: 1px solid rgba(151,151,151,0.3);
padding:31rpx 0 25rpx;
}
.pro-list:last-child{
border-bottom: none;
}
.pro-img{
width: 160rpx;
height: 160rpx;
vertical-align: top;
}
.pro-info{
display: inline-block;
margin-left: 28rpx;
vertical-align: top;
}
.pro-name{
font-size: 25rpx;
color: #333333;
width: 500rpx;
line-height:36rpx;
}
.pro-desc{
font-size: 22rpx;
color: #aaaaaa;
margin-top: 10rpx;
}
.pro-price{
margin-top: 16rpx;
}
.price{
color: #cb3c3c;
font-size: 32rpx;
}
.number{
float: right;
font-size: 26rpx;
color: #808080;
}
.pro-sum{
padding: 0 20rpx 90rpx;
}
.plus-wrap{
background-color: rgba(192, 154, 116, 0.07);
margin-top: 21rpx;
padding: 21rpx 29rpx 15rpx 33rpx;
position: relative;
}
.plus-top-text image{
width: 36rpx;
height: 20rpx;
vertical-align: middle;
}
.plus-top-text text{
color: #333333;
font-size: 23rpx;
margin-left: 16rpx;
vertical-align: middle;
}
.plus-bottom-text{
margin-top: 7rpx;
}
.plus-bottom-text text{
font-size: 20rpx;
color: #c09a74;
vertical-align: middle;
}
.plus-bottom-text image{
width: 16rpx;
height: 16rpx;
vertical-align: middle;
margin-left: 7rpx;
}
.select-type{
width: 32rpx;
height: 32rpx;
background-color: #D8D8D8;
border-radius: 50%;
position: absolute;
top: 34rpx;
right: 29rpx;
}
.select-type image{
width: 18rpx;
height: 12rpx;
position: absolute;
top: 10rpx;
left: 7rpx;
}
/* .select-info{
position: absolute;
right: 0
} */
.select-desc{
}
.select-desc text{
font-size: 18rpx;
color: #ffffff;
position: absolute;
top: 6rpx;
}
.select-desc image{
/* position: absolute; */
position: absolute;
top: 0;
left: 0;
}
.select-desc .unselect-tip{
width: 112rpx;
height: 50rpx;
}
.order-price,.coupon{
padding: 24rpx 20rpx;
border-bottom: 1px solid rgba(151, 151, 151, 0.3);
}
.coupon:last-child{
border-bottom: none;
}
.price-label{
color: #333333;
font-size: 28rpx;
}
.total-price{
float: right;
color: #aaaaaa;
}
.member-price{
color: #CB3C3C;
font-size: 22rpx;
margin-left: 24rpx;
}
.plus-price{
margin-top: 20rpx;
}
.plus-info{
display: inline-block;
}
.plus-member-price{
float: right;
}
.select-coupon{
float: right;
}
.coupon-price{
color: #cb3c3c;
font-size: 22rpx;
}
.no-coupon{
color: #aaaaaa;
font-size: 22rpx;
}
.arrow-right{
width: 13rpx;
height: 21rpx;
vertical-align: middle;
margin-left: 14rpx;
}
.total{
float: right;
margin: 22rpx 0;
}
.total-numer{
font-size: 36rpx;
color: #cb3c3c;
font-weight: 600;
}
.address-list{
padding: 45rpx 0 42rpx 25rpx;
}
.user-name{
font-size: 28rpx;
color: #333333;
margin-left: 42rpx;
}
.phone-number{
font-size: 28rpx;
color: #333333;
margin-left: 37rpx;
}
.address-list-detail{
color: #787878;
font-size: 26rpx;
margin-top: 12rpx;
}
.address-info{
position: relative;
}
.arrow-right-wrap{
position: absolute;
right: 0;
top: 20rpx;
}
.pro-footer{
position: fixed;
bottom: 0;
height: 88rpx;
/* margin-top: 100rpx; */
}
.cost{
width: 497rpx;
height: 88rpx;
line-height: 80rpx;
display: inline-block;
border-top: 1px solid rgba(151, 151, 151, 0.3);
text-align: right;
padding-right: 39rpx;
background-color: #ffffff;
}
.cost-label{
font-size: 26rpx;
color: #808080;
}
.cost-price{
color: #cb3c3c;
font-size: 32rpx;
}
.buy-btn{
width: 214rpx;
height: 88rpx;
text-align: center;
line-height: 88rpx;
color: #ffffff;
display: inline-block;
font-size: 25rpx;
}
.vip-desc{
font-size: 22rpx;
color: #aaaaaa;
}
\ No newline at end of file
// pages/my/my.js // pages/my/my.js
Page({ const app = getApp()
const wxService = require('../../utils/wxService')
const utils = require('../../utils/util')
const envInfo = require('../../config/index').envInfo
wxService.page({
/** /**
* 页面的初始数据 * 页面的初始数据
*/ */
data: { data: {
unfold:false
}, },
/** /**
...@@ -21,7 +26,12 @@ Page({ ...@@ -21,7 +26,12 @@ Page({
onReady: function () { onReady: function () {
}, },
//点击展开
onTapUnfold(){
this.setData({
unfold: !this.data.unfold
})
},
/** /**
* 生命周期函数--监听页面显示 * 生命周期函数--监听页面显示
*/ */
......
{ {
"navigationBarTitleText": "我的",
"usingComponents": {} "usingComponents": {}
} }
\ No newline at end of file
<!--pages/my/my.wxml--> <!--pages/my/my.wxml-->
<text>pages/my/my.wxml</text> <view class="page-user-center">
<view class="top-content">
<view class="user-header-wrap">
<view class="header-content">
<view class="avatar-wrap">
<image class="avatar" src="/assets/imgs/sc-avatar.png"></image>
<image class="crown" src="/assets/imgs/crown.png"></image>
</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"></image>
</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"></image>
<text>会员码</text>
</view>
</view>
</view>
<view class="member-interest">
<!-- 收起 -->
<view class="interest-fold" bindtap="onTapUnfold">
<image src="/assets/imgs/plus-bg.png"></image>
<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"></image>
</view>
</view>
<!-- 普通会员 -->
<view class="interest-fold" bindtap="onTapUnfold" wx:if="{{false}}">
<image src="/assets/imgs/regular-member.png"></image>
<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"></image>
</view>
</view>
<!-- 展开 -->
<view class="interest-unfold" wx:if="{{unfold}}">
<image class="interest-unfold-bg" src="/assets/imgs/interest-unfold.png"></image>
<view class="interest-title-line">
<image src="/assets/imgs/interest-line.png"></image>
</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"></image>
<view class="interest-title">
<text>权益名称</text>
</view>
</view>
<view class="interest-list">
<image class="interest-icon" src="/assets/imgs/interest-icon.png"></image>
<view class="interest-title">
<text>权益名称</text>
</view>
</view>
<view class="interest-list">
<image class="interest-icon" src="/assets/imgs/interest-icon.png"></image>
<view class="interest-title">
<text>权益名称</text>
</view>
</view>
<view class="interest-list">
<image class="interest-icon" src="/assets/imgs/interest-icon.png"></image>
<view class="interest-title">
<text>权益名称</text>
</view>
</view>
<view class="interest-list">
<image class="interest-icon" src="/assets/imgs/interest-icon.png"></image>
<view class="interest-title">
<text>权益名称</text>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
<view class="main-content {{unfold ? '' : 'content'}}">
<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"></image>
<view class="order-desc">待付款</view>
</view>
<view class="item">
<image class="order-icon"></image>
<view class="order-desc">待付款</view>
</view>
<view class="item">
<image class="order-icon"></image>
<view class="order-desc">待付款</view>
</view>
<view class="item">
<image class="order-icon"></image>
<view class="order-desc">待付款</view>
</view>
</view>
</view>
</view>
<view class="banner">
<image src="/assets/imgs/invitation-bg.png"></image>
<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"></image>
<view class="order-desc">待付款</view>
</view>
<view class="item">
<image class="order-icon"></image>
<view class="order-desc">待付款</view>
</view>
<view class="item">
<image class="order-icon"></image>
<view class="order-desc">待付款</view>
</view>
<view class="item">
<image class="order-icon"></image>
<view class="order-desc">待付款</view>
</view>
<view class="item">
<image class="order-icon"></image>
<view class="order-desc">待付款</view>
</view>
</view>
<view class="tool-list" wx:if="{{false}}">
<view class="tool-item">
<image class="tool-icon"></image>
<view class="tool-desc">待付款</view>
</view>
<view class="tool-item">
<image class="tool-icon"></image>
<view class="tool-desc">待付款</view>
</view>
<view class="tool-item">
<image class="tool-icon"></image>
<view class="tool-desc">待付款</view>
</view>
<view class="tool-item">
<image class="tool-icon"></image>
<view class="tool-desc">待付款</view>
</view>
</view>
</view>
</view>
</view>
</view>
/* pages/my/my.wxss */ /* pages/my/my.wxss */
\ No newline at end of file page{
background-color: #F9F9F9;
padding-bottom: 30rpx;
}
.top-content{
background-color: #ffffff;
}
.user-header-wrap{
padding: 60rpx 30rpx 0;
}
.avatar{
width: 93rpx;
height: 93rpx;
border-radius: 50%;
border: 1px solid #000000;
}
.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{
margin-top: -4rpx;
padding: 0 20rpx;
}
.content{
margin-top: 28rpx;
}
.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;
}
\ No newline at end of file
// pages/user-center/user-center.js
Page({
/**
* 页面的初始数据
*/
data: {
unfold:false
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
//点击展开
onTapUnfold(){
this.setData({
unfold: !this.data.unfold
})
}
})
\ No newline at end of file
{
"navigationBarTitleText": "我的",
"usingComponents": {}
}
\ No newline at end of file
<!--pages/user-center/user-center.wxml-->
<view class="page-user-center">
<view class="top-content">
<view class="user-header-wrap">
<view class="header-content">
<view class="avatar-wrap">
<image class="avatar" src="/assets/imgs/sc-avatar.png"></image>
<image class="crown" src="/assets/imgs/crown.png"></image>
</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"></image>
</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"></image>
<text>会员码</text>
</view>
</view>
</view>
<view class="member-interest">
<!-- 收起 -->
<view class="interest-fold" bindtap="onTapUnfold">
<image src="/assets/imgs/plus-bg.png"></image>
<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"></image>
</view>
</view>
<!-- 普通会员 -->
<view class="interest-fold" bindtap="onTapUnfold" wx:if="{{false}}">
<image src="/assets/imgs/regular-member.png"></image>
<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"></image>
</view>
</view>
<!-- 展开 -->
<view class="interest-unfold" wx:if="{{unfold}}">
<image class="interest-unfold-bg" src="/assets/imgs/interest-unfold.png"></image>
<view class="interest-title-line">
<image src="/assets/imgs/interest-line.png"></image>
</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"></image>
<view class="interest-title">
<text>权益名称</text>
</view>
</view>
<view class="interest-list">
<image class="interest-icon" src="/assets/imgs/interest-icon.png"></image>
<view class="interest-title">
<text>权益名称</text>
</view>
</view>
<view class="interest-list">
<image class="interest-icon" src="/assets/imgs/interest-icon.png"></image>
<view class="interest-title">
<text>权益名称</text>
</view>
</view>
<view class="interest-list">
<image class="interest-icon" src="/assets/imgs/interest-icon.png"></image>
<view class="interest-title">
<text>权益名称</text>
</view>
</view>
<view class="interest-list">
<image class="interest-icon" src="/assets/imgs/interest-icon.png"></image>
<view class="interest-title">
<text>权益名称</text>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
<view class="main-content {{unfold ? '' : 'content'}}">
<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"></image>
<view class="order-desc">待付款</view>
</view>
<view class="item">
<image class="order-icon"></image>
<view class="order-desc">待付款</view>
</view>
<view class="item">
<image class="order-icon"></image>
<view class="order-desc">待付款</view>
</view>
<view class="item">
<image class="order-icon"></image>
<view class="order-desc">待付款</view>
</view>
</view>
</view>
</view>
<view class="banner">
<image src="/assets/imgs/invitation-bg.png"></image>
<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"></image>
<view class="order-desc">待付款</view>
</view>
<view class="item">
<image class="order-icon"></image>
<view class="order-desc">待付款</view>
</view>
<view class="item">
<image class="order-icon"></image>
<view class="order-desc">待付款</view>
</view>
<view class="item">
<image class="order-icon"></image>
<view class="order-desc">待付款</view>
</view>
<view class="item">
<image class="order-icon"></image>
<view class="order-desc">待付款</view>
</view>
</view>
<view class="tool-list" wx:if="{{false}}">
<view class="tool-item">
<image class="tool-icon"></image>
<view class="tool-desc">待付款</view>
</view>
<view class="tool-item">
<image class="tool-icon"></image>
<view class="tool-desc">待付款</view>
</view>
<view class="tool-item">
<image class="tool-icon"></image>
<view class="tool-desc">待付款</view>
</view>
<view class="tool-item">
<image class="tool-icon"></image>
<view class="tool-desc">待付款</view>
</view>
</view>
</view>
</view>
</view>
</view>
/* pages/user-center/user-center.wxss */
page{
background-color: #F9F9F9;
padding-bottom: 30rpx;
}
.top-content{
background-color: #ffffff;
}
.user-header-wrap{
padding: 60rpx 30rpx 0;
}
.avatar{
width: 93rpx;
height: 93rpx;
border-radius: 50%;
border: 1px solid #000000;
}
.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{
margin-top: -4rpx;
padding: 0 20rpx;
}
.content{
margin-top: 28rpx;
}
.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;
}
\ No newline at end of file
...@@ -14,7 +14,7 @@ ...@@ -14,7 +14,7 @@
"compileType": "miniprogram", "compileType": "miniprogram",
"libVersion": "2.6.6", "libVersion": "2.6.6",
"appid": "wx700028bf32a3be66", "appid": "wx700028bf32a3be66",
"projectname": "7-Eleven", "projectname": "微商城",
"debugOptions": { "debugOptions": {
"hidedInDevtools": [] "hidedInDevtools": []
}, },
...@@ -141,13 +141,6 @@ ...@@ -141,13 +141,6 @@
}, },
{ {
"id": -1, "id": -1,
"name": "我的",
"pathName": "pages/user-center/user-center",
"query": "",
"scene": null
},
{
"id": -1,
"name": "商品详情页", "name": "商品详情页",
"pathName": "pages/productDetail/productDetail", "pathName": "pages/productDetail/productDetail",
"query": "", "query": "",
......
...@@ -116,21 +116,6 @@ function aspectRatio(h,w) { ...@@ -116,21 +116,6 @@ function aspectRatio(h,w) {
} }
/** /**
* 全面屏
*/
// function checkFullSucreen () {
// const self = this
// wxService.getSystemInfo().then(res => {
// debugger
// if ((res.screenHeight - res.windowHeight - res.statusBarHeight - 32) > 72) {
//      // 处理相关逻辑
// self.globalData.isFullSucreen = true
// // setGlobalData('fullScreen', true)
// }
// })
// }
/**
* 解析 url 参数 * 解析 url 参数
*/ */
function parseUrl(query){ function parseUrl(query){
...@@ -320,5 +305,4 @@ module.exports = { ...@@ -320,5 +305,4 @@ module.exports = {
aspectRatio, aspectRatio,
imageUtil, imageUtil,
validateEmail validateEmail
// checkFullSucreen
} }
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