Skip to content

7
7-Eleven
Commit 76f33f5d by 谢中龙
Options

会员详情

parent c90280fb
Showing with 870 additions and 8 deletions
src/shoppingGuid/page/pages/saleTaskInfo/saleTaskInfo.wxml
...@@ -67,6 +67,12 @@ ...@@ -67,6 +67,12 @@
<view class='pro-item'> <view class='pro-item'>
<image mode='aspectFit' src='https://bigaka-xie.oss-cn-shanghai.aliyuncs.com/1571636466%281%29.jpg'></image> <image mode='aspectFit' src='https://bigaka-xie.oss-cn-shanghai.aliyuncs.com/1571636466%281%29.jpg'></image>
</view> </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>
<view class='order-pro-info'> <view class='order-pro-info'>
<label>共5件商品</label> <label>共5件商品</label>
......
src/shoppingGuid/page/pages/userInfo/userInfo.js
...@@ -6,7 +6,17 @@ wxService.page({ ...@@ -6,7 +6,17 @@ wxService.page({
* 页面的初始数据 * 页面的初始数据
*/ */
data: { 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({ ...@@ -25,10 +35,48 @@ wxService.page({
}, },
//点击事件 //点击事件
onTapToMemberInfo(e){ //类型切换
let id = 11; onTopBarTap(e){
wx.navigateTo({ let index = e.currentTarget.dataset.index,
url: 'shoppingGuid/page/pages/userInfo/userInfo?id=' + id, 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,
}); });
}, },
......
src/shoppingGuid/page/pages/userInfo/userInfo.wxml
<!--shoppingGuid/page/pages/userInfo/userInfo.wxml--> <!--shoppingGuid/page/pages/userInfo/userInfo.wxml-->
<text>shoppingGuid/page/pages/userInfo/userInfo.wxml</text> <view class='user-info-container'>
<view class='user-info'>
<view class='u-logo'>
<image src='https://bigaka-xie.oss-cn-shanghai.aliyuncs.com/biaka_default_u_logo.png' mode='aspectFit'></image>
</view>
<view class='u-rg'>
<view class='u-items'>
<view class='u-item-lf'>
<label>139xxxx9875</label>
<image src='/assets/imgs/shoppingGuide/phone.png' mode='widthFix'></image>
</view>
<view class='u-item-rg'>立即联系</view>
</view>
<view class='u-items'>
<view class='u-item-lf'>
<label class='color-pink mg-r-20'>女</label>
<text>27岁</text>
</view>
</view>
<view class='u-items'>
<view class='u-item-lf'>
<label>程楠大肚子</label>
</view>
</view>
<view class='u-items'>
<view class='u-item-lf'>
<label>注册时间：</label>
<text>2019-10-29 17:28:45</text>
</view>
</view>
</view>
</view>
</view>
<!-- 导购信息 -->
<view class='guider'>
<view class='header'>
<label>所属导购：</label>
<text>张三三</text>
</view>
<view class='month'>
<view class='month-data'>
<view class='data-item'>
<text class='data-item-title'>累计消费（元）</text>
<text class='data-item-number'>11356.59</text>
</view>
<view class='data-item'>
<text class='data-item-title'>当前积分</text>
<text class='data-item-number'>21132</text>
</view>
<view class='data-item'>
<text class='data-item-title'>当前经验值</text>
<text class='data-item-number'>228</text>
</view>
</view>
</view>
</view>
<!-- 标签信息 -->
<view class='u-info-filter'>
<view class='info-items {{item.isActive ? "active" : ""}}'
wx:for="{{navBar}}"
wx:key="topbar"
wx:for-index="idx"
bindtap='onTopBarTap'
data-index="{{idx}}"
data-item="{{item}}"
wx:for-item="item"
>{{item.name}}</view>
</view>
<!-- 自动标签 -->
<view class='auto-tips' wx:if="{{current == 1}}">
<view class='tips-groups'>
<view class='tip-group-name'>标签分组名称</view>
<view class='tips'>
<view class='tips-item'>标签名称</view>
<view class='tips-item'>标签名称</view>
<view class='tips-item'>标签名称</view>
<view class='tips-item'>标签名称</view>
<view class='tips-item'>标签名称</view>
</view>
</view>
<view class='tips-groups'>
<view class='tip-group-name'>标签分组名称</view>
<view class='tips'>
<view class='tips-item'>标签名称</view>
<view class='tips-item'>标签名称</view>
<view class='tips-item'>标签名称</view>
<view class='tips-item'>标签名称</view>
<view class='tips-item'>标签名称</view>
</view>
</view>
<view class='tips-groups'>
<view class='tip-group-name'>标签分组名称</view>
<view class='tips'>
<view class='tips-item'>标签名称</view>
<view class='tips-item'>标签名称</view>
<view class='tips-item'>标签名称</view>
<view class='tips-item'>标签名称</view>
<view class='tips-item'>标签名称</view>
</view>
</view>
</view>
<!-- 手动标签 -->
<view class='auto-tips' wx:if="{{current == 2}}">
<view class='tips-groups'>
<view class='tip-group-name'>标签分组名称</view>
<view class='tips'>
<view class='tips-item'>标签名称</view>
<view class='tips-item'>标签名称</view>
<view class='tips-item'>标签名称</view>
<view class='tips-item'>标签名称</view>
<view class='tips-item'>标签名称</view>
</view>
</view>
<view class='tips-groups'>
<view class='tip-group-name'>标签分组名称</view>
<view class='tips'>
<view class='tips-item'>标签名称</view>
<view class='tips-item'>标签名称</view>
<view class='tips-item'>标签名称</view>
<view class='tips-item'>标签名称</view>
<view class='tips-item'>标签名称</view>
</view>
</view>
<view class='tips-groups'>
<view class='tip-group-name'>标签分组名称</view>
<view class='tips'>
<view class='tips-item'>标签名称</view>
<view class='tips-item'>标签名称</view>
<view class='tips-item'>标签名称</view>
<view class='tips-item'>标签名称</view>
<view class='tips-item'>标签名称</view>
</view>
</view>
</view>
<!-- 订单信息 -->
<view wx:if="{{current == 3}}">
<view class='order-filter'>
<view
class='filter-item {{item.isActive ? "active" : ""}}'
wx:for="{{onlineOrderStatus}}"
wx:key="topbar"
wx:for-index="idx"
bindtap='onTapChangeOnlineOrderStatus'
data-index="{{idx}}"
data-item="{{item}}"
wx:for-item="item">{{item.name}}</view>
</view>
<!-- 订单列表信息 -->
<view class='list online-order'>
<!-- order item -->
<view class='order-item'>
<view class='order-status'>
<text>订单号 7878327513490</text>
<text>待付款</text>
</view>
<view class='products-list'>
<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>
<view>
实付 <label class='theme-text-color bolder'>￥385</label>
</view>
</view>
</view>
<view class='order-item'>
<view class='order-status'>
<text>订单号 7878327513490</text>
<text>待付款</text>
</view>
<view class='products-list'>
<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>
<view>
实付 <label class='theme-text-color bolder'>￥385</label>
</view>
</view>
</view>
</view>
</view>
<!-- 退单信息 -->
<view wx:if="{{current == 4}}">
<view class='order-filter'>
<view
class='filter-item {{item.isActive ? "active" : ""}}'
wx:for="{{returnOrderStatus}}"
wx:key="topbar"
wx:for-index="idx"
bindtap='onTapChangeReturnOrderStatus'
data-index="{{idx}}"
data-item="{{item}}"
wx:for-item="item">{{item.name}}</view>
</view>
<!-- 退单列表信息 -->
<view class='list online-order'>
<!-- order item -->
<view class='order-item'>
<view class='order-status'>
<text>订单号 7878327513490</text>
<text>待付款</text>
</view>
<view class='products-list'>
<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>
<view>
实付 <label class='theme-text-color bolder'>￥385</label>
</view>
</view>
</view>
<view class='order-item'>
<view class='order-status'>
<text>订单号 7878327513490</text>
<text>待付款</text>
</view>
<view class='products-list'>
<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>
<view>
实付 <label class='theme-text-color bolder'>￥385</label>
</view>
</view>
</view>
</view>
</view>
<!-- 优惠券 -->
<view class='coupons' wx:if="{{current == 5}}">
<!-- items -->
<view class='coupon-item' style='background-image:url(https://bigaka-xie.oss-cn-shanghai.aliyuncs.com/coupon_bg.png)'>
<view class='coupon-item-lf'>
<view class='coupon-price'>
￥ <text>5</text>
</view>
<view>抵用券</view>
</view>
<view class='coupon-item-rg'>
<!-- cant-use -->
<view class='qrcode can-use'>可使用</view>
<view class='coupon-title'>满10减5抵用券</view>
<view class='op'>
<view class='text-btn'>有效期： 2019-03-24 至 2019-06-23</view>
</view>
<view class='op'>
<view class='text-btn'>拼团及特殊商品不可用</view>
</view>
</view>
</view>
<!-- items -->
<view class='coupon-item' style='background-image:url(https://bigaka-xie.oss-cn-shanghai.aliyuncs.com/coupon_bg_cantUse.png)'>
<view class='coupon-item-lf'>
<view class='coupon-price cant-use'>
￥ <text>5</text>
</view>
<view class='cant-use'>抵用券</view>
</view>
<view class='coupon-item-rg'>
<!-- cant-use -->
<view class='qrcode cant-use'>已过期</view>
<view class='coupon-title cant-use'>满10减5抵用券</view>
<view class='op'>
<view class='text-btn'>有效期： 2019-03-24 至 2019-06-23</view>
</view>
<view class='op'>
<view class='text-btn '>拼团及特殊商品不可用</view>
</view>
</view>
</view>
</view>
<!-- 积分 -->
<view class='integrate-list' wx:if="{{current == 6}}">
<!-- <view class='lf-history'>
<label></label>
<view class='line'></view>
</view> -->
<view class='rg-list'>
<view class='rg-list-item'>
<view class='integrate-type'>
<view class='title'>购物送积分</view>
<view>2019-12-11 14:23:32</view>
</view>
<view class='time'>+30</view>
</view>
<view class='rg-list-item'>
<view class='integrate-type'>
<view class='title'>购物送积分</view>
<view>2019-12-11 14:23:32</view>
</view>
<view class='time'>+30</view>
</view>
<view class='rg-list-item'>
<view class='integrate-type'>
<view class='title'>购物送积分</view>
<view>2019-12-11 14:23:32</view>
</view>
<view class='time'>+30</view>
</view>
</view>
</view>
\ No newline at end of file
src/shoppingGuid/page/pages/userInfo/userInfo.wxss
/* shoppingGuid/page/pages/userInfo/userInfo.wxss */ /* shoppingGuid/page/pages/userInfo/userInfo.wxss */
\ No newline at end of file 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