xt / xcx-book · Commits

Go to a project

Commit 6df05e7c254601eb09a130f3244f954e323d43bd

Authored by vking
1 parent 5cfc248b
build: skipped

me-index

Inline Side-by-side
Showing 6 changed files with 204 additions and 89 deletions
@@ -26,6 +26,8 @@ @@ -26,6 +26,8 @@
26 color: inherit; 26 color: inherit;
27 width: 100%; 27 width: 100%;
28 position: relative; 28 position: relative;
  29 + border-radius: 0;
  30 + background-color: transparent;
29 } 31 }
30 .layout .button .fixed{ 32 .layout .button .fixed{
31 position:relative; 33 position:relative;
@@ -81,5 +81,10 @@ Page({ @@ -81,5 +81,10 @@ Page({
81 81
82 }) 82 })
83 83
  84 + },
  85 + gotoList(e){
  86 + wx.navigateTo({
  87 + url:'/pages/me/list?type='+util.attr(e,'type')
  88 + })
84 } 89 }
85 }) 90 })
1 { 1 {
2 "navigationBarBackgroundColor": "#ffffff", 2 "navigationBarBackgroundColor": "#ffffff",
3 - "navigationBarTextStyle": "black", 3 + "navigationBarTextStyle": "white",
4 "navigationBarTitleText":"我的", 4 "navigationBarTitleText":"我的",
5 "usingComponents": { 5 "usingComponents": {
6 "nav":"/components/nav/nav", 6 "nav":"/components/nav/nav",
1 <!--pages/me/index.wxml--> 1 <!--pages/me/index.wxml-->
2 -<nav>周到安排</nav>  
3 -<view class="page">  
4 - <view class="header flex-ll"> 2 +<nav backgroundColor="#262628" color="#ffffff">周到安排</nav>
  3 +<layout>
  4 + <view class="meHeader flex-ll" >
5 <view class="avatar"> 5 <view class="avatar">
6 <open-data type="userAvatarUrl"></open-data> 6 <open-data type="userAvatarUrl"></open-data>
7 </view> 7 </view>
@@ -10,66 +10,81 @@ @@ -10,66 +10,81 @@
10 <view class="info">查看并编辑个人资料</view> 10 <view class="info">查看并编辑个人资料</view>
11 </view> 11 </view>
12 </view> 12 </view>
13 - <view class="shadow" >  
14 - <view class="shadow-mask" ></view>  
15 - </view>  
16 -  
17 - <view class="list">  
18 - <formids url="/pages/me/list">  
19 - <view class="item flex-lr">  
20 - <view class="left">我的订单</view>  
21 - <view class="right">  
22 - <image src="http://qn.colorcun.com/custom/lite-yd/image/click.png"></image> 13 + <view class="pages">
  14 + <view class="block-rev">
  15 + <navigator url="/pages/me/list">
  16 + <view class="title flex-lr">
  17 + <view >我的订单</view>
  18 + <view class="more"></view>
23 </view> 19 </view>
24 - </view>  
25 - </formids>  
26 - <!-- <formids url="/pages/me/setting">  
27 - <view class="item flex-lr">  
28 - <view class="left">常用信息</view>  
29 - <view class="right">  
30 - <image src="http://qn.colorcun.com/custom/lite-yd/image/click.png"></image> 20 + </navigator>
  21 + <view class="content flex-ll">
  22 + <view class="flex-vc" bindtap="gotoList" data-type="1">
  23 + <view class="icon o1"></view>
  24 + <view class="text">等待确认</view>
31 </view> 25 </view>
32 - </view>  
33 - </formids> -->  
34 - <formids url="/pages/me/concat">  
35 - <view class="item flex-lr">  
36 - <view class="left">常用联系人</view>  
37 - <view class="right">  
38 - <image src="http://qn.colorcun.com/custom/lite-yd/image/click.png"></image>  
39 - </view>  
40 - </view>  
41 - </formids>  
42 - <formids bindclick="gotoSellerBook" wx:if="{{hasSellerBook}}">  
43 - <view class="item flex-lr">  
44 - <view class="left">切换到商户模式</view>  
45 - <view class="right">  
46 - <image src="http://qn.colorcun.com/custom/lite-yd/image/click.png"></image> 26 + <view class="flex-vc" bindtap="gotoList" data-type="2">
  27 + <view class="icon o2"></view>
  28 + <view class="text">预订成功</view>
47 </view> 29 </view>
48 - </view>  
49 - </formids>  
50 - <formids url="/pages/manager-invitation/index" wx:if="{{hasManagerInvitation}}">  
51 - <view class="item flex-lr">  
52 - <view class="left">客户经理模式</view>  
53 - <view class="right">  
54 - <image src="http://qn.colorcun.com/custom/lite-yd/image/click.png"></image> 30 + <view class="flex-vc" bindtap="gotoList" data-type="3">
  31 + <view class="icon o3"></view>
  32 + <view class="text">历史订单</view>
  33 + </view>
  34 + <view class="flex-vc" bindtap="gotoList" data-type="4">
  35 + <view class="icon o4"></view>
  36 + <view class="text">无效预订</view>
55 </view> 37 </view>
56 </view> 38 </view>
57 - </formids>  
58 - <!--  
59 - <navigator  
60 - target="miniProgram"  
61 - open-type="navigate"  
62 - app-id="wx8abaf00ee8c3202e"  
63 - extra-data="{{extraData}}"  
64 - version="release">  
65 - <view class="item flex-lr">  
66 - <view class="left">吐个槽</view>  
67 - <view class="right">  
68 - <image src="http://qn.colorcun.com/custom/lite-yd/image/click.png"></image> 39 + </view>
  40 + <view class="block-rev">
  41 + <view class="title flex-lr">
  42 + <view >常用操作</view>
  43 + </view>
  44 + <view class="content flex-ll">
  45 + <navigator class="flex-vc" url="/pages/me/concat">
  46 + <view class="icon picon p1"></view>
  47 + <view class="text">常用联系人</view>
  48 + </navigator>
  49 + <view class="flex-vc" bindtap="gotoSellerBook" wx:if="{{hasSellerBook}}">
  50 + <view class="icon picon p2"></view>
  51 + <view class="text">商户模式</view>
69 </view> 52 </view>
  53 + <navigator class="flex-vc" url="/pages/manager-invitation/index" wx:if="{{hasManagerInvitation}}">
  54 + <view class="icon picon p3"></view>
  55 + <view class="text">客户经理模式</view>
  56 + </navigator>
70 </view> 57 </view>
71 - </navigator>  
72 - --> 58 + </view>
  59 + <view class="block-list">
  60 + <button class="button-none"
  61 + open-type="contact">
  62 + <view class="item flex-lr item-border">
  63 + <view class="item-name flex-ll">
  64 + <view class="kefu"></view>
  65 + <view>联系客服</view>
  66 + </view>
  67 + <view class="item-info flex-rr">
  68 + <view>09:00～21:00</view>
  69 + <view class="more"></view>
  70 + </view>
  71 + </view>
  72 + </button>
  73 + <navigator
  74 + target="miniProgram"
  75 + open-type="navigate"
  76 + app-id="wx8abaf00ee8c3202e"
  77 + extra-data="{{extraData}}"
  78 + version="release">
  79 + <view class="item flex-lr">
  80 + <view class="item-name flex-ll">
  81 + <view class="tuco"></view>
  82 + <view>我要吐槽</view>
  83 + </view>
  84 + <view class="more"></view>
  85 + </view>
  86 + </navigator>
  87 + </view>
73 </view> 88 </view>
74 -</view>  
75 -<fb></fb> 89 +</layout>
  90 +<fb></fb>
1 /* pages/me/index.wxss */ 1 /* pages/me/index.wxss */
2 -.page{  
3 - width: 90%;  
4 - margin: 0 5%; 2 +page{
  3 + background-color: #F5F5F5;
  4 +}
  5 +.pages{
  6 + width: calc(100% - 40rpx);
  7 + margin: -24rpx 20rpx 40rpx;
5 color:#353535; 8 color:#353535;
6 - background-color: #ffffff;  
7 } 9 }
8 image{ 10 image{
9 width:100%; 11 width:100%;
10 height: 100%; 12 height: 100%;
11 display: inherit; 13 display: inherit;
12 } 14 }
13 -.header{  
14 - margin-top: 76rpx;  
15 - padding-bottom: 54rpx;  
16 -  
17 -}  
18 -.shadow{  
19 - height: 0rpx;  
20 - margin-left: -5%;  
21 - width: 110%;  
22 - box-shadow: 0 12rpx 14rpx 14rpx RGBA(231, 228, 228, 0.5);  
23 - margin-bottom: 98rpx;  
24 - position: relative;  
25 -}  
26 -.shadow-mask{  
27 - position: relative;  
28 - top:-7rpx;  
29 - height: 20rpx;  
30 - left:-2rpx;  
31 - width: 110%;  
32 - background-color: #ffffff; 15 +.meHeader{
  16 + padding-top: 26rpx;
  17 + padding-bottom: 64rpx;
  18 + padding-left: 40rpx;
  19 + background-color: #262628;
  20 + color:#fff;
  21 + box-sizing: border-box;
  22 + margin-top: -10rpx;
33 } 23 }
34 .avatar{ 24 .avatar{
35 width: 80rpx; 25 width: 80rpx;
@@ -47,16 +37,113 @@ image{ @@ -47,16 +37,113 @@ image{
47 font-size: 26rpx; 37 font-size: 26rpx;
48 margin-top: 4rpx; 38 margin-top: 4rpx;
49 } 39 }
  40 +.block-rev{
  41 + height: 300rpx;
  42 + box-sizing: border-box;
  43 + width: 100%;
  44 + background:rgba(255,255,255,1);
  45 + border-radius:10rpx;
  46 + margin-bottom: 20rpx;
  47 +}
  48 +.block-rev .title{
  49 + box-sizing: border-box;
  50 + height: 100rpx;
  51 + line-height: 100rpx;
  52 + border-bottom: 2rpx solid #F5F5F5;
  53 + width: calc(100% - 80rpx);
  54 + margin: 0 auto;
  55 + font-size:30rpx;
  56 + font-weight:600;
  57 +}
  58 +.block-rev .content{
  59 + height: 198rpx;
  60 + box-sizing: border-box;
  61 + font-size: 24rpx;
  62 +}
  63 +.content .flex-vc{
  64 + width: 25%;
  65 + min-width: 25%;
  66 +}
  67 +
  68 +.block-rev .icon{
  69 + width:36rpx;
  70 + height:42rpx;
  71 + background-size: 100% 100%;
  72 + margin-bottom: 20rpx;
  73 +}
  74 +.icon.o1{
  75 + background-image: url("http://qn.colorcun.com/custom/me/image/o1.png");
  76 +}
  77 +.icon.o2{
  78 + background-image: url("http://qn.colorcun.com/custom/me/image/o2.png");
  79 +}
  80 +.icon.o3{
  81 + background-image: url("http://qn.colorcun.com/custom/me/image/o3.png");
  82 +}
  83 +.icon.o4{
  84 + background-image: url("http://qn.colorcun.com/custom/me/image/o4.png");
  85 +}
  86 +.block-rev .picon{
  87 + width:38rpx;
  88 + height:38rpx;
  89 +}
  90 +.picon.p1{
  91 + background-image: url("http://qn.colorcun.com/custom/me/image/p1.png");
  92 +}
  93 +.picon.p2{
  94 + background-image: url("http://qn.colorcun.com/custom/me/image/p2.png");
  95 +}
  96 +.picon.p3{
  97 + background-image: url("http://qn.colorcun.com/custom/me/image/p3.png");
  98 +}
  99 +.block-rev .width3{
  100 + width: 75%;
  101 +}
  102 +
  103 +
  104 +
  105 +.block-list{
  106 + box-sizing: border-box;
  107 + width: 100%;
  108 + background:rgba(255,255,255,1);
  109 + border-radius:10rpx;
  110 + padding: 0 40rpx;
  111 +}
50 .item{ 112 .item{
51 height: 107rpx; 113 height: 107rpx;
52 line-height: 107rpx; 114 line-height: 107rpx;
53 font-size: 30rpx; 115 font-size: 30rpx;
  116 + box-sizing: border-box;
  117 +}
  118 +.item-border{
  119 + border-bottom: 2rpx solid #F5F5F5;
  120 +}
  121 +.item-name{
  122 + height:42rpx;
  123 + font-size:30rpx;
  124 + color:rgba(53,53,53,1);
  125 + line-height:42rpx;
  126 +}
  127 +.item-info{
  128 + height:34rpx;
  129 + font-size:24rpx;
  130 + color:rgba(53,53,53,1);
  131 + line-height:34rpx;
54 } 132 }
55 -.item .left{  
56 - height: 42rpx;  
57 - line-height: 42rpx; 133 +.item-info .more{
  134 + margin-left: 20rpx;
58 } 135 }
59 -.item .right{  
60 - width: 12rpx;  
61 - height: 22rpx; 136 +.item-name .kefu{
  137 + width: 32rpx;
  138 + height:30rpx;
  139 + background-size: 100%;
  140 + background-image: url("http://qn.colorcun.com/custom/me/image/l1.png");
  141 + margin-right: 20rpx;
  142 +}
  143 +.item-name .tuco{
  144 + width: 34rpx;
  145 + height:26rpx;
  146 + background-size: 100%;
  147 + background-image: url("http://qn.colorcun.com/custom/me/image/l2.png");
  148 + margin-right: 20rpx;
62 } 149 }
@@ -24,6 +24,12 @@ Page({ @@ -24,6 +24,12 @@ Page({
24 * 生命周期函数--监听页面加载 24 * 生命周期函数--监听页面加载
25 */ 25 */
26 onLoad: function (options) { 26 onLoad: function (options) {
  27 + if(options.type){
  28 + this.tabType=options.type
  29 + this.setData({
  30 + tabType:this.tabType
  31 + })
  32 + }
27 this.selectComponent('#getpos').getPos(); 33 this.selectComponent('#getpos').getPos();
28 }, 34 },
29 35