Commit 76f33f5d by 谢中龙

会员详情

parent c90280fb
......@@ -67,6 +67,12 @@
<view class='pro-item'>
<image mode='aspectFit' src='https://bigaka-xie.oss-cn-shanghai.aliyuncs.com/1571636466%281%29.jpg'></image>
</view>
<view class='pro-item'>
<image mode='aspectFit' src='https://bigaka-xie.oss-cn-shanghai.aliyuncs.com/1571636466%281%29.jpg'></image>
</view>
<view class='pro-item'>
<image mode='aspectFit' src='https://bigaka-xie.oss-cn-shanghai.aliyuncs.com/1571636466%281%29.jpg'></image>
</view>
</view>
<view class='order-pro-info'>
<label>共5件商品</label>
......
......@@ -6,7 +6,17 @@ wxService.page({
* 页面的初始数据
*/
data: {
navBar: [
{ name: '自动标签', type: 1, isActive: true },
{ name: '手动标签', type: 2, isActive: false },
{ name: '订单信息', type: 3, isActive: false },
{ name: '退单信息', type: 4, isActive: false },
{ name: '优惠券', type: 5, isActive: false },
{ name: '积分', type: 6, isActive: false },
],
current: 1,
onlineOrderStatus: [{ name: '线上订单', type: 1, isActive: true }, { name: '线下订单', type: 2, isActive: false }],
returnOrderStatus: [{ name: '线上订单', type: 1, isActive: true },{ name: '线下订单', type: 2, isActive: false }],
},
/**
......@@ -25,10 +35,48 @@ wxService.page({
},
//点击事件
onTapToMemberInfo(e){
let id = 11;
wx.navigateTo({
url: 'shoppingGuid/page/pages/userInfo/userInfo?id=' + id,
//类型切换
onTopBarTap(e){
let index = e.currentTarget.dataset.index,
item = e.currentTarget.dataset.item;
this.data.navBar.forEach(nav => {
nav.isActive = false;
});
this.data.navBar[index].isActive = true;
this.data.current = this.data.navBar[index].type;
this.setData({
navBar: this.data.navBar,
current: this.data.current
});
},
//线上订单状态切换
onTapChangeOnlineOrderStatus(e){
let index = e.currentTarget.dataset.index,
item = e.currentTarget.dataset.item;
this.data.onlineOrderStatus.forEach(nav => {
nav.isActive = false;
});
this.data.onlineOrderStatus[index].isActive = true;
this.setData({
onlineOrderStatus: this.data.onlineOrderStatus,
});
},
//退单
onTapChangeReturnOrderStatus(e){
let index = e.currentTarget.dataset.index,
item = e.currentTarget.dataset.item;
this.data.returnOrderStatus.forEach(nav => {
nav.isActive = false;
});
this.data.returnOrderStatus[index].isActive = true;
this.setData({
returnOrderStatus: this.data.returnOrderStatus,
});
},
......
/* shoppingGuid/page/pages/userInfo/userInfo.wxss */
\ No newline at end of file
/* shoppingGuid/page/pages/userInfo/userInfo.wxss */
page{
background: #f2f2f2;
box-sizing: border-box;
-webkit-box-sizing: border-box;
font-size: 28rpx;
color: #333333;
}
/* *,*::after,*::before{
box-sizing: border-box;
} */
view{
box-sizing: border-box;
-webkit-box-sizing: border-box;
}
.user-info-container{
width: 100%;
height: 280rpx;
background: #f2f2f2;
padding-bottom: 0;
position: relative;
}
.user-info-container .user-info{
width: 92vw;
height: 280rpx;
position: absolute;
top: 30rpx;
background: #ffffff;
left: 4vw;
box-shadow: 0 0 10rpx 4rpx rgba(0,0,0,0.1);
padding: 30rpx;
display: flex;
}
.user-info-container .user-info .u-logo{
flex: 1;
min-width: 100rpx;
max-width: 100rpx;
height: 100rpx;
border-radius: 50%;
}
.user-info-container .user-info .u-logo image{
width: 100rpx;
height: 100rpx;
}
.user-info-container .user-info .u-rg{
flex: 1;
padding-left: 20rpx;
}
.user-info-container .user-info .u-rg .u-items{
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 10rpx;
}
.user-info-container .user-info .u-rg .u-items .u-item-lf{
display: flex;
align-items: center;
flex: 1;
}
.color-pink{
color: #FF79A4 ;
}
.mg-r-20{
margin-right: 20rpx;
}
.user-info-container .user-info .u-rg .u-items .u-item-lf image{
width: 30rpx;
margin-left: 30rpx;
}
.user-info-container .user-info .u-rg .u-items .u-item-rg{
flex: 0;
min-width: 160rpx;
max-width: 160rpx;
height: 40rpx;
background: #0091FF ;
color: #ffffff;
font-size: 24rpx;
display: flex;
align-items: center;
border-radius: 20rpx;
justify-content: center;
}
.user-info-container .user-info .u-rg .u-items .u-item-rg:active{
opacity: 0.7;
}
/* 导购信息 */
.guider{
width: 100%;
height: auto;
padding: 30rpx;
background: #ffffff;
}
.guider .header{
padding: 30rpx 20rpx;
border-bottom: solid 2rpx #ddd;
display: flex;
align-items: center;
justify-content: space-between;
}
.guider .header label{
color: #999999;
}
.guider .header text{
color: #333333;
font-weight: bold;
}
.month{
width: 100%;
background: #ffffff;
padding: 30rpx;
font-size: 28rpx;
}
.month .month-data{
display: flex;
}
.month .month-data .data-item{
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.month .month-data .data-item .data-item-title{
font-size: 24rpx;
color: #999999;
margin-bottom: 8rpx;
}
.month .month-data .data-item .data-item-number{
font-size: 40rpx;
color: #FA6400 ;
font-weight: 550;
}
/* 其他信息 */
.u-info-filter{
width: 100%;
height: 80rpx;
background: -webkit-linear-gradient(left,rgb(0,145,255),rgba(0,145,255,0.8),rgba(0,145,255,0.3));
padding: 0 30rpx;
display: flex;
overflow-y: auto;
align-items: center;
}
.u-info-filter .info-items{
float: left;
padding: 4rpx 20rpx;
color: #ffffff;
font-size: 24rpx;
min-width: 160rpx;
display: flex;
justify-content: center;
align-items: center;
}
.u-info-filter .info-items.active{
background: #ffffff;
color: #0091FF ;
border-radius: 21rpx;
}
/* 标签 */
.auto-tips{
padding: 30rpx;
background: #ffffff;
}
.auto-tips .tips-groups{
width: 100%;
height: auto;
border-bottom: solid 2rpx #ddd;
padding-bottom: 20rpx;
margin-bottom: 30rpx;
}
.auto-tips .tips-groups:last-child{
border-bottom: none;
}
.auto-tips .tips-groups .tip-group-name{
border-left: 8rpx solid #0091FF;
font-size: 28rpx;
color: #333333;
padding-left: 10rpx;
margin-bottom: 20rpx;
}
.auto-tips .tips-groups .tips{
width: 100%;
height: auto;
display: flex;
flex-wrap: wrap;
}
.auto-tips .tips-groups .tips .tips-item{
height: 60rpx;
padding: 0 30rpx;
background: #f2f2f2;
border-radius: 8rpx;
margin-right: 20rpx;
display: flex;
align-items: center;
margin-bottom: 20rpx;
}
/* 订单信息 */
/* 订单筛选 */
.order-filter{
width: 100%;
height: 80rpx;
background: #ffffff;
display: flex;
align-items: center;
box-shadow: 0 -4rpx 20rpx 4rpx rgba(0,0,0,0.1);
padding: 16rpx 0;
}
.order-filter .filter-item{
flex: 1;
display: flex;
align-items: center;
height: 100%;
justify-content: center;
border-left: solid 2rpx #ddd;
}
.order-filter .filter-item:first-child{
border-left: none;
}
.order-filter .filter-item.active{
color: #0091FF;
}
/* 线上线下订单 */
.list{
width: 100%;
height: auto;
padding: 30rpx;
}
.online-order .order-item{
width: 100%;
height: auto;
padding: 20rpx 30rpx;
background: #ffffff;
border-radius: 10rpx;
border: solid 2rpx #ddd;
color: #999999;
margin-bottom: 20rpx;
}
.online-order .order-item .order-status{
display: flex;
align-items: center;
justify-content: space-between;
padding:0 20rpx;
padding-bottom: 20rpx;
border-bottom: solid 2rpx #ddd;
}
.online-order .order-item .products-list{
width: 100%;
height: auto;
display: flex;
padding: 20rpx 0;
overflow: hidden;
overflow-x: auto;
}
.online-order .order-item .products-list .pro-item{
width: 100rpx;
height: 100rpx;
border: solid 1px #eee;
padding: 10rpx;
margin-right: 20rpx;
}
.online-order .order-item .products-list .pro-item image{
width: 100%;
height: 100%;
}
.online-order .order-item .order-pro-info{
display: flex;
justify-content: space-between;
align-items: center;
}
/* 优惠券 */
.coupons{
padding: 30rpx;
width: 100%;
}
.coupons .coupon-item{
width: 100%;
height: 180rpx;
/* background: #ffffff; */
display: flex;
background-position: center;
background-size: contain;
background-repeat: no-repeat;
margin-bottom: 10rpx;
}
.coupons .coupon-item .coupon-item-lf{
flex: 0;
min-width: 180rpx;
max-width: 180rpx;
height: 180rpx;
padding: 20rpx;
display: flex;
flex-direction: column;
align-items: center;
color: #0091FF ;
font-size: 24rpx;
justify-content: center;
}
.coupon-price{
margin-bottom: 6rpx;
}
.coupon-price text{
font-size: 40rpx;
font-weight: bold;
}
.coupons .coupon-item .coupon-item-rg{
flex: 1;
padding: 30rpx;
position: relative;
}
.coupons .coupon-item .coupon-item-rg .qrcode{
position: absolute;
right: 30rpx;
top: 30rpx;
width: 120rpx;
height: 40rpx;
text-align: right;
}
.can-use{
color: #0091FF ;
}
.cant-use{
color: #999999;
}
.coupons .coupon-item .coupon-item-rg .coupon-title{
font-size: 28rpx;
color: #333333;
font-weight: bold;
margin-bottom: 15rpx;
}
.coupons .coupon-item .coupon-item-rg .op{
display: flex;
width: 100%;
align-items: center;
justify-content: space-between;
color: #999999;
}
.coupons .coupon-item .coupon-item-rg .op .text-btn{
flex: 1;
font-size: 20rpx;
}
.coupons .coupon-item .coupon-item-rg .op .info-btn{
width: 160rpx;
height: 50rpx;
background: #0091FF ;
color: #ffffff;
display: flex;
align-items: center;
font-size: 24rpx;
}
/* 积分 */
.integrate-list{
width: 100%;
height: auto;
background: #ffffff;
padding: 30rpx;
display: flex;
}
.integrate-list .lf-history{
flex: 1;
min-width: 20rpx;
max-width: 20rpx;
height: 100%;
border: solid 1px red;
display: flex;
flex-direction: column;
align-items: center;
}
.integrate-list .lf-history label{
color: #333333;
flex:0;
width: 10rpx;
min-height: 10rpx;
max-height: 10rpx;
background: #666;
border-radius: 50%;
}
.integrate-list .lf-history .line{
width: 2rpx;
background: #ddd;
flex: 1;
height: 100%;
}
.integrate-list .rg-list{
flex: 1;
height: auto;
}
.integrate-list .rg-list .rg-list-item{
width: 100%;
height: auto;
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: dashed 2rpx #ddd;
padding-bottom: 30rpx;
margin-bottom: 30rpx;
}
.integrate-list .rg-list .rg-list-item:last-child{
margin-bottom: 0;
border-bottom: none;
}
.integrate-list .rg-list .rg-list-item .integrate-type{
width: 100%;
color: #999999;
font-size: 24rpx;
}
.integrate-list .rg-list .rg-list-item .integrate-type .title{
color: #333333;
font-size: 28rpx;
margin-bottom: 10rpx;
}
.integrate-list .rg-list .rg-list-item .time{
flex: 0;
min-width: 100rpx;
max-width: 100rpx;
color: #FA6400 ;
display: flex;
align-items: center;
justify-content: center;
font-size: 32rpx;
}
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