gang.huang 4 years ago
parent
commit
89f724f3f9

BIN
image/completed.png


BIN
image/crown.png


BIN
image/friends.png


BIN
image/paying.png


BIN
image/petrochina.png


BIN
image/phone.png


BIN
image/sinopec.png


BIN
image/wait_pay.png


+ 2 - 2
pages/components/auth/auth.wxml

@@ -9,11 +9,11 @@
   </view>
 
   <button wx:if="{{showAuthName}}" 
-          style='margin-top:160rpx;width:82%;height: 92rpx;border:none;  background-color: #fe7124; background: linear-gradient(to right, #ff7a21 0%,#feb25a 100%);color: #fff;' 
+          style='margin-top:160rpx;width:580rpx;height: 80rpx;border:none;  background-color: #fe7124; background: linear-gradient(to right, #ff7a21 0%,#feb25a 100%);color: #fff;' 
           open-type="getUserInfo"
           bindgetuserinfo="userInfoHandler">授权登录</button>
   <button wx:if="{{showAuthPhone}}" 
-          style='margin-top:160rpx;width:82%;height: 92rpx;  background-color: #fe7124; background: linear-gradient(to right, #ff7a21 0%,#feb25a 100%);color: #fff;'
+          style='margin-top:160rpx;width:580rpx;height: 80rpx;  background-color: #fe7124; background: linear-gradient(to right, #ff7a21 0%,#feb25a 100%);color: #fff;'
           open-type="getPhoneNumber" 
     		  bindgetphonenumber="userPhoneHandler">授权手机号码</button>
 </view>

+ 97 - 80
pages/myhome/myhome.wxml

@@ -1,84 +1,101 @@
 <!--pages/myhome/myhome.wxml-->
 <view class="myhome-wrp">
-  <auth wx:if="{{!userInfo}}" bind:getAuth="getAuth"></auth>
-  <view class="topbg"></view>
-  <view class="header">
-    <image src="{{memberInfo.member_avatar}}" class="avtor"></image>
-    <view class="info">
-      <text class="nickname">{{memberInfo.member_nickname}}</text>
-      <text class="other" wx:if="{{memberInfo.is_vip}}">会员额度还剩下:{{memberInfo.vip_left_amount}}元</text>
-    </view>
-  </view>
+	<auth wx:if="{{!userInfo}}" bind:getAuth="getAuth"></auth>
+	<view class="topbg"></view>
+	<view class="header">
+		<image src="{{memberInfo.member_avatar}}" class="avtor"></image>
+		<view class="info">
+			<view class="leftContent">
+				<text class="nickname">{{memberInfo.member_nickname}}</text>
+				<text class="qrcodeLabel">点击分享二维码</text>
+			</view>
+			<image src="/image/myhome/arrow-right.png" class="link"></image>
+			<!-- <text class="other" wx:if="{{memberInfo.is_vip}}">会员额度还剩下:{{memberInfo.vip_left_amount}}元</text> -->
+		</view>
+	</view>
 
-  <view class="order_list">
-    <view class='order_title flex_1px_d' bindtap='skip_all_order'>
-      <text>我的订单</text>
-    </view>
-    <view class='order_info'>
-      <view>
-        <navigator url="/pages/vorderList/orderTabs?state_type=state_new" hover-class="none" class="pos_rel">
-          <image style='width:35rpx;height: 35rpx;' src='../../image/person/payments_due_icon.png'></image>
-          <view class="mt8">
-            <text>待付款</text>
-          </view>
-          <view class="sub_count" wx:if="{{pre_pay_count}}">{{pre_pay_count}}</view>
-        </navigator>
-      </view>
-      <view>
-        <navigator url="/pages/vorderList/orderTabs?state_type=state_pay" hover-class="none" class="pos_rel">
-          <image style='width:35rpx;height: 35rpx;' src='../../image/person/shipping_term_icon.png'></image>
-          <view class="mt8">
-            <text>充值中</text>
-          </view>
-          <view class="sub_count" wx:if="{{pre_send_count}}">{{pre_send_count}}</view>
-        </navigator>
-      </view>
-      <view>
-        <navigator url="/pages/vorderList/orderTabs?state_type=state_success" hover-class="none" class="pos_rel">
-          <image style='width:35rpx;height: 35rpx;' src='../../image/person/evaluated_icon.png'></image>
-          <view class="mt8">
-            <text>已完成</text>
-          </view>
-          <view class="sub_count" wx:if="{{evaluate_count}}">{{evaluate_count}}</view>
-        </navigator>
-      </view>
-    </view>
-  </view>
+	<view class="limit" wx:if="{{memberInfo.is_vip}}">
+		<image src="../../image/crown.png" class="crown"></image>
+		<text class="label">尊敬的椰子会员</text>
+		<text>您还剩{{memberInfo.vip_left_amount}}元额度</text>
+	</view>
 
-  <view class="card">
-    <view class="card-title" bindtap="handleMore" data-cardtype="phone">
-      <image src="/image/myhome/icon-phone.png" class="icon icon-phone"></image>
-      <text class="text">我的手机号</text>
-      <image src="/image/myhome/arrow-right.png" class="more"></image>
-    </view>
-    <view class="card-body">
-      <view wx:if="{{phone.card_type==='phone'}}" class="card-item bg-blue">{{phone.card_no}}</view>
-    </view>
-  </view>
-  <view class="card">
-    <view class="card-title" bindtap="handleMore" data-cardtype="petrochina">
-      <image src="/image/myhome/petrochina.png" class="icon icon-postage"></image>
-      <text class="text">我的中石油油卡</text>
-      <image src="/image/myhome/arrow-right.png" class="more"></image>
-    </view>
-    <view class="card-body">
-      <view wx:if="{{petrochina.card_type==='petrochina'}}" class="card-item bg-orange">{{petrochina.card_no}}</view>
-    </view>
-  </view>
-  <view class="card">
-    <view class="card-title" bindtap="handleMore" data-cardtype="sinopec">
-      <image src="/image/myhome/sinopec.png" class="icon icon-postage"></image>
-      <text class="text">我的中石化油卡</text>
-      <image src="/image/myhome/arrow-right.png" class="more"></image>
-    </view>
-    <view class="card-body">
-      <view wx:if="{{sinopec.card_type==='sinopec'}}" class="card-item bg-orange">{{sinopec.card_no}}</view>
-    </view>
-  </view>
-  <view class="card">
-    <view class="card-title" bindtap="handleMore" data-cardtype="invitees">
-      <text class="text">我的好友列表</text>
-      <image src="/image/myhome/arrow-right.png" class="more"></image>
-    </view>
-  </view>
-</view>
+	<view class="order_list">
+		<view class="order_list_box">
+			<view class='order_title' bindtap='skip_all_order'>
+				<text>我的订单</text>
+			</view>
+			<view class='order_info'>
+				<view>
+					<navigator url="/pages/vorderList/orderTabs?state_type=state_new" hover-class="none" class="pos_rel">
+						<image style='width:70rpx;height: 70rpx;' src='../../image/wait_pay.png'></image>
+						<view class="mt8">
+							<text class="label">待付款</text>
+						</view>
+						<view class="sub_count" wx:if="{{pre_pay_count}}">{{pre_pay_count}}</view>
+					</navigator>
+				</view>
+				<view>
+					<navigator url="/pages/vorderList/orderTabs?state_type=state_pay" hover-class="none" class="pos_rel">
+						<image style='width:70rpx;height: 70rpx;' src='../../image/paying.png'></image>
+						<view class="mt8">
+							<text class="label">充值中</text>
+						</view>
+						<view class="sub_count" wx:if="{{pre_send_count}}">{{pre_send_count}}</view>
+					</navigator>
+				</view>
+				<view>
+					<navigator url="/pages/vorderList/orderTabs?state_type=state_success" hover-class="none" class="pos_rel">
+						<image style='width:70rpx;height: 70rpx;' src='../../image/completed.png'></image>
+						<view class="mt8">
+							<text class="label">已完成</text>
+						</view>
+						<view class="sub_count" wx:if="{{evaluate_count}}">{{evaluate_count}}</view>
+					</navigator>
+				</view>
+			</view>
+		</view>
+	</view>
+
+
+	<view class="cardList">
+		<view class="card">
+			<view class="card-title" bindtap="handleMore" data-cardtype="phone">
+				<image src="/image/phone.png" class="icon icon-phone"></image>
+				<text class="text">我的手机号</text>
+				<image src="/image/myhome/arrow-right.png" class="more"></image>
+			</view>
+			<view class="card-body">
+				<view wx:if="{{phone.card_type==='phone'}}" class="card-item bg-blue">{{phone.card_no}}</view>
+			</view>
+		</view>
+		<view class="card">
+			<view class="card-title" bindtap="handleMore" data-cardtype="petrochina">
+				<image src="/image/petrochina.png" class="icon icon-postage"></image>
+				<text class="text">我的中石油油卡</text>
+				<image src="/image/myhome/arrow-right.png" class="more"></image>
+			</view>
+			<view class="card-body">
+				<view wx:if="{{petrochina.card_type==='petrochina'}}" class="card-item bg-orange">{{petrochina.card_no}}</view>
+			</view>
+		</view>
+		<view class="card">
+			<view class="card-title" bindtap="handleMore" data-cardtype="sinopec">
+				<image src="/image/sinopec.png" class="icon icon-postage"></image>
+				<text class="text">我的中石化油卡</text>
+				<image src="/image/myhome/arrow-right.png" class="more"></image>
+			</view>
+			<view class="card-body">
+				<view wx:if="{{sinopec.card_type==='sinopec'}}" class="card-item bg-orange">{{sinopec.card_no}}</view>
+			</view>
+		</view>
+		<view class="card">
+			<view class="card-title" bindtap="handleMore" data-cardtype="invitees">
+				<image src="/image/friends.png" class="icon more"></image>
+				<text class="text">我的好友列表</text>
+				<image src="/image/myhome/arrow-right.png" class="more"></image>
+			</view>
+		</view>
+	</view>
+
+</view>

+ 127 - 39
pages/myhome/myhome.wxss

@@ -1,9 +1,10 @@
 /* pages/myhome/myhome.wxss */
 
-.myhome-wrp{
+.myhome-wrp {
   position: relative;
 }
-.topbg{
+
+.topbg {
   position: absolute;
   top: 0;
   left: 0;
@@ -12,29 +13,43 @@
   /* background-color: #fe7124; */
   z-index: 1;
 }
-.header{
+
+.header {
   position: relative;
   z-index: 2;
   display: flex;
-  width: 690rpx;
-  margin: 22rpx auto;
   margin-bottom: 0;
   padding: 40rpx;
-  border-radius: 15rpx;
+  /* border-radius: 15rpx; */
   background-color: #fff;
   box-sizing: border-box;
 }
-.header .avtor{
+
+.header .avtor {
   width: 120rpx;
   height: 120rpx;
   border-radius: 50%;
   margin-right: 30rpx;
 }
-.header .info{
+
+.header .info {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex: 1;
+}
+
+.header .leftContent {
   display: flex;
   flex-direction: column;
   justify-content: center;
-  flex: 1;
+}
+
+.link {
+  font-size: 24rpx;
+  color: #8e8e8e;
+  width: 45rpx;
+  height: 45rpx;
 }
 
 .header .info .nickname {
@@ -42,78 +57,101 @@
   font-weight: bold;
   margin-bottom: 10rpx;
 }
+
 .header .info .weixin {
   font-size: 24rpx;
   color: #8e8e8e;
   margin-bottom: 10rpx;
 }
+
 .header .info .other {
   width: 350rpx;
   font-size: 26rpx;
   color: #8e8e8e;
   background-color: rgb(FF, FF, FF);
 }
+
 .header .info .other .money {
   color: #000000;
 }
 
-.card{
-  margin: 20rpx;
+.card {
+  width: 690rpx;
+  margin: 0 auto;
   background-color: #fff;
   box-sizing: border-box;
-  border-radius: 15rpx;
 }
-.card-title{
+
+.card-title {
   display: flex;
   padding: 30rpx 20rpx;
   align-items: center;
   border-radius: 15rpx;
 }
-.card-title:active{
+
+.card-title:active {
   background-color: #eee;
 }
-.card-title .icon{
+
+.card-title .icon {
   margin-right: 15rpx;
 }
-.icon-postage{
-  width: 40rpx;
-  height: 40rpx;
+
+.icon-postage {
+  width: 45rpx;
+  height: 45rpx;
 }
-.icon-phone{
-  width: 32rpx;
-  height: 44rpx;
+
+.icon-phone {
+  width: 45rpx;
+  height: 45rpx;
 }
-.card-title .text{
+
+.card-title .text {
   flex: 1
 }
-.card-title .more{
+
+.card-title .more {
   font-size: 24rpx;
   color: #8e8e8e;
-  width: 50rpx;
-  height: 50rpx;
+  width: 45rpx;
+  height: 45rpx;
 }
-.card-body{
+
+.card-body {
   padding: 0 20rpx 20rpx;
 }
-.card-item{
+
+.card-item {
   padding: 30rpx;
   margin: 20rpx 0;
   border-radius: 15rpx;
   color: #fff;
 }
-.card-item:active{
+
+.card-item:active {
   /* opacity: .8; */
 }
-.bg-orange{
-  background: linear-gradient(to right, #ff7a21 0%,#feb25a 100%);
+
+.bg-orange {
+  background: linear-gradient(to right, #ff7a21 0%, #feb25a 100%);
 }
-.bg-blue{
-  background: linear-gradient(to right, #006ec9 0%,#2599d8 100%);
+
+.bg-blue {
+  background: linear-gradient(to right, #006ec9 0%, #2599d8 100%);
 }
+
 .order_list {
   position: relative;
-  margin-top: 22rpx;
+  padding-top: 28rpx;
   font-size: 30rpx;
+  box-shadow: 0 -5rpx 10rpx #ccc;
+}
+
+.order_list_box {
+  width: 690rpx;
+  margin: 0 auto;
+  border-radius: 10rpx;
   background: #ffffff;
 }
 
@@ -125,9 +163,12 @@
   line-height: 104rpx;
   padding: 0 40rpx;
 }
+
 .order_list .order_title text {
-  color: #666;
+  color: #1E242E;
   flex: 1;
+  font-weight: bolder;
+  font-size: 36rpx;
 }
 
 .order_list .order_title .look_all_order {
@@ -138,7 +179,8 @@
 
 .order_list .order_info {
   display: flex;
-  padding: 40rpx;
+  padding: 0 30rpx;
+  padding-bottom: 30rpx;
 }
 
 .order_list .order_info>view {
@@ -147,13 +189,14 @@
   font-size: 20rpx;
   color: #999;
 }
+
 .order_list .order_info image {
   vertical-align: middle;
 }
+
 .order_list .order_info text {
-   display: inline-block;
-   height: 30rpx;
-   margin-top: 10rpx; 
+  display: inline-block;
+  height: 30rpx;
 }
 
 .sub_count {
@@ -169,4 +212,49 @@
   font-size: 20rpx;
   border-radius: 50%;
   transform: scale(.8);
-}
+}
+
+.mt8 .label {
+  font-size: 28rpx;
+  color: #333;
+}
+
+.qrcodeLabel {
+  font-size: 26rpx;
+  color: #999;
+}
+
+.cardList {
+  width: 690rpx;
+  border-radius: 10rpx;
+  margin: 0 auto;
+  margin-top: 30rpx;
+}
+
+.limit {
+  position: relative;
+  height: 90rpx;
+  width: 690rpx;
+  margin: 0 auto;
+  background-image: linear-gradient(150deg, #77C7FF 0%, #2E8EFD 100%);
+  border-radius: 9rpx 9rpx 0 0;
+  display: flex;
+  align-items: center;
+  font-size: 26rpx;
+  color: #fff;
+  padding-left: 30rpx;
+  box-sizing: border-box;
+  z-index: 10;
+}
+
+.limit .label {
+  font-size: 30rpx;
+  color: #fff;
+  margin-left: 10rpx;
+  margin-right: 17rpx;
+}
+
+.crown {
+  width: 46rpx;
+  height: 38rpx;
+}