会员详情

src/shoppingGuid/page/pages/saleTaskInfo/saleTaskInfo.wxml

@@ -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>

src/shoppingGuid/page/pages/userInfo/userInfo.js

@@ -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,
     });
   },
 

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;
+}
+