优化加油页

pages/postage/postage.js

@@ -27,7 +27,30 @@ Page({
       { id: 0, icon: '/image/postage/sinopec.png', title: '中国石化',  tips: '选择油卡',   card_type: 'sinopec',    card_no: '' },
       { id: 1, icon: '/image/postage/petrochina.png', title: '中国石油', tips: '选择油卡', card_type: 'petrochina', card_no: '' }
     ],
-    fromSource: ''
+    fromSource: '',
+    payInfoChecked:true
+  },
+
+  onCheckedPayInfo(){
+    this.setData({
+      payInfoChecked:!this.data.payInfoChecked
+    })
+  },
+
+  onShowPayInfoModal(){
+    wx.showModal({
+      title: '充值代缴服务说明',
+      content: '充值代缴服务说明',
+      showCancel:false,
+      success (res) {
+        if (res.confirm) {
+          console.log('用户点击确定')
+        } else if (res.cancel) {
+          console.log('用户点击取消')
+        }
+      }
+    })
+    
   },
 
   // 页签切换
@@ -123,6 +146,13 @@ Page({
   // 立即充值
   handlerRecharge()
   {
+    if(!this.data.payInfoChecked) {
+      wx.showToast({
+        icon:'none',
+        title: '请同意充值代缴服务说明'
+      })
+      return;
+    }
     if (!app.globalData.hasmobile) {
       app.navigateto('/pages/auth/auth')
       return;

pages/postage/postage.json

@@ -1,6 +1,5 @@
 {
   "enablePullDownRefresh":true,
-  "navigationBarTitleText": "油卡充值",
-  "navigationBarBackgroundColor": "#fe7124",
-  "navigationBarTextStyle": "white"
+  "navigationBarTitleText": "加油卡充值",
+  "navigationBarTextStyle": "black"
 }

pages/postage/postage.wxml

@@ -1,63 +1,77 @@
 <view class="postage">
-  <view class="tips" wx:if="{{tips}}">{{tips}}</view>
-  <!-- 选择油卡 -->
-  <view class="tabs" wx:if="{{tabsData.length}}">
-    <view class="tabs-title">
-      <view class="tabs-title-item {{currentIndex == index ? 'active' : ''}}" wx:for="{{tabsData}}" wx:key="index" 
-      bindtap="handlerClickTabItem" data-activeindex="{{index}}" data-cardtype="{{item.card_type}}">
-        <image class="tabs-title-item__icon" src="{{item.icon}}"></image>
-        <text class="tabs-title-item__text">{{ item.title}}</text>
-      </view>
-    </view>
-    <view class="tabs-content" wx:for="{{tabsData}}" wx:key="index"  style='display:{{currentIndex !== index ? "none" : "block"}}'>
-      <view class="tabs-content__tips">
-        <text class="tabs-content__tips-text">{{item.tips}}</text>
-      </view>
-      <view class="card-no vux-1px-b" bindtap="handlerAddCard" data-cardtype="{{item.card_type}}">
-        <block wx:if="{{ item.card_type === 'sinopec' }}">{{sinopec.card_no || '请输入卡号' }} </block>
-        <block wx:if="{{ item.card_type === 'petrochina' }}">{{petrochina.card_no || '请输入卡号'}}</block>
-      </view>
-    </view>
-  </view>
+	<view class="tips" wx:if="{{tips}}">{{tips}}</view>
+	<!-- 选择油卡 -->
+	<view class="tabs" wx:if="{{tabsData.length}}">
+		<view class="tabs-title">
+			<view class="tabs-title-item {{currentIndex == index ? 'active' : ''}}" wx:for="{{tabsData}}" wx:key="index" bindtap="handlerClickTabItem" data-activeindex="{{index}}" data-cardtype="{{item.card_type}}">
+				<image class="tabs-title-item__icon" src="{{item.icon}}"></image>
+				<text class="tabs-title-item__text">{{ item.title}}</text>
+			</view>
+		</view>
+		<view class="bindMobileBox">
+			<view class="progressBar">
+				<view class="dotBox dotBox1">
+					<view class="dot"></view>
+				</view>
+				<view class="dotBox dotBox2">
+					<view class="dot"></view>
+				</view>
+			</view>
+			<view class="bindMobileLabel">手机号码</view>
+			<view class="bindMobile">短信接收号码</view>
+		</view>
+		<view class="tabContent">
+			<view class="tabs-content" wx:for="{{tabsData}}" wx:key="index" style='display:{{currentIndex !== index ? "none" : "block"}}'>
+				<view class="tabs-content__tips">
+					<text class="tabs-content__tips-text">{{item.tips}}</text>
+				</view>
+				<view class="card-no vux-1px-b" bindtap="handlerAddCard" data-cardtype="{{item.card_type}}">
+					<block wx:if="{{ item.card_type === 'sinopec' }}">{{sinopec.card_no || '请输入卡号' }} </block>
+					<block wx:if="{{ item.card_type === 'petrochina' }}">{{petrochina.card_no || '请输入卡号'}}</block>
+				</view>
+			</view>
+			<view class="info">
+				<image src="/image/info.png" class="infoIcon"></image>
+				<view class="label">请仔细核对卡号，避免造成不必要的损失</view>
+			</view>
+		</view>
+	</view>
 
-  <!--充值金额 -->
-  <view class="rechargeGear" wx:if="{{goods.length}}">
-    <view class="rechargeGear-title">充值金额</view>
-    <view class="rechargeGear-content">
-      <view class="rechargeGear-content__item {{rechargeGearActiveIndex == index ? 'active' : ''}}" wx:for="{{goods}}" wx:key="index" 
-      bindtap="handlerClickRechargeGear" data-activeindex="{{index}}" data-currentvalue="{{item.goods_id}}">
-        <view class="faceValue">{{item.goods_spec}}</view>
-        <view class="price">{{item.price_des}} {{item.accu_price}} 元</view>
-      </view>
-    </view>
-    <view class="rechargeGear-footer">
-      <view class="text-center"  wx:if="{{inviter_tip}}">{{inviter_tip}}</view>
-      <view class="btn-rechargeNow" bindtap="handlerShare">
-        <text>分享好友</text>
-      </view>
-      <view class="btn-rechargeNow" bindtap="handlerRecharge">
-        <text>充值</text>
-      </view>
-    </view>
-  </view>
+	<!--充值金额 -->
+	<view class="rechargeGear" wx:if="{{goods.length}}">
+		<view class="rechargeGear-title">充值金额</view>
+		<view class="rechargeGear-content">
+			<view class="rechargeGear-content__item {{rechargeGearActiveIndex == index ? 'active' : ''}}" wx:for="{{goods}}" wx:key="index" bindtap="handlerClickRechargeGear" data-activeindex="{{index}}" data-currentvalue="{{item.goods_id}}">
+				<view class="faceValue">{{item.goods_spec}}</view>
+				<view class="price">{{item.price_des}} {{item.accu_price}} 元</view>
+			</view>
+		</view>
+	</view>
 
-  <view class="rechargeGear">
-    <view class="rechargeGear-title">说明</view>
-    <view class="rechargeGear-footer">
-      <view class="rechargeNow-tips">
-        <view>1.充值后1-10分钟左右到账，中石油或者中石化公众号将发充值成功信息至加油卡捆绑微信；</view>
-        <view>2.充值到账后，需要去加油站进行圈存；本平台加油暂时不提供发票，请知悉。</view>
-      </view>
-    </view>
-  </view>
-  <view class="rechargeGear">
-    <view class="rechargeGear-title">分享福利</view>
-    <view class="rechargeGear-footer">
-      <view class="rechargeNow-tips">
-        <view>1.分享10人可享95折优惠</view>
-        <view>2.分享5人可享96折优惠</view>
-        <view>3.分享3人可享97折优惠</view>
-      </view>
-    </view>
-  </view>
+	<view class="payInfo" bindtap="onCheckedPayInfo">
+		<image wx:if="{{!payInfoChecked}}" src="/image/check.png" class="payInfoIcon" ></image>
+		<image wx:else src="/image/checked.png" class="payInfoIcon"></image>
+		<view class="label">已阅读并同意<text class="explain" catchtap="onShowPayInfoModal">《充值代缴服务说明》</text></view>
+	</view>
+
+	<view class="info" wx:if="{{inviter_tip}}" style="padding-left:40rpx;">
+		<image src="/image/info.png" class="infoIcon"></image>
+		<view class="label">{{inviter_tip}}</view>
+	</view>
+
+	<view class="rechargeGear-footer">
+		<view class="btn-rechargeNow btn-rechargeNow___share" bindtap="handlerShare">
+			<text>分享好友</text>
+		</view>
+		<view class="btn-rechargeNow" bindtap="handlerRecharge">
+			<text>充值</text>
+		</view>
+	</view>
+
+	<view class="footerInfo">
+		<view class="title">充值说明</view>
+		<view class="clause">1.充值后1-10分钟左右到账，中石油或者中石化公众号将发充值成功信息至加油卡捆绑微信；</view>
+		<view class="clause">2.本服务为全国加油卡代充服务、故<text>不提供充值发票</text>；</view>
+		<view class="clause">3.支付成功后，需收到充值成功通知短信后，方可到<text>加油站圈存</text>后加油使用；</view>
+	</view>
 </view>

pages/postage/postage.wxss

@@ -1,21 +1,21 @@
-.postage{
+.postage {
   position: relative;
   padding: 20rpx 0;
   color: #848799;
 }
 
-.postage::before{
+.postage::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 165rpx;
-  background: linear-gradient(to bottom, #fd7428 0%,#fc8f4a 100%);
+  /* background: linear-gradient(to bottom, #fd7428 0%,#fc8f4a 100%); */
   z-index: -1;
 }
 
-.tips{
+.tips {
   padding: 15rpx 20rpx;
   width: 92%;
   margin: 0 auto;
@@ -26,43 +26,47 @@
   font-size: 26rpx;
 }
 
-.tabs, .rechargeGear{
+.tabs,
+.rechargeGear {
   width: 92%;
   margin: 20rpx auto;
+  border-radius: 20rpx;
+  overflow: hidden;
 }
 
-.tabs-title{
+.tabs-title {
   display: flex;
   justify-content: space-between;
   align-items: center;
   height: 90rpx;
   line-height: 90rpx;
-  background-color: #fff;
-  border-top-left-radius: 10rpx;
-  border-top-right-radius: 10rpx;
+  /* border-top-left-radius: 10rpx;
+  border-top-right-radius: 10rpx; */
+  margin-bottom: 1rpx;
 }
 
-.tabs-title-item{
+.tabs-title-item {
   display: flex;
   justify-content: center;
   align-items: center;
   width: 50%;
 }
 
-.tabs-title-item__icon{
+.tabs-title-item__icon {
   width: 40rpx;
   height: 40rpx;
   margin-right: 10rpx;
 }
 
-.tabs-title-item__text{}
+.tabs-title-item__text {}
 
-.tabs-title-item.active{
+.tabs-title-item.active {
   position: relative;
   color: #fe7124;
+  background-color: #fff;
 }
 
-.tabs-title-item.active::before{
+/* .tabs-title-item.active::before{
   content: "";
   position: absolute;
   bottom: 0;
@@ -70,62 +74,77 @@
   right: 10%;
   height: 6rpx;
   background-color: #fe7124;
-}
+} */
 
-.tabs-content__tips{
+.tabs-content__tips {
   display: flex;
   height: 80rpx;
   align-items: center;
+  color: #333;
 }
 
-.tabs-content__tips-text{
-  font-size: 26rpx;  
+.tabs-content__tips-text {
+  font-size: 26rpx;
 }
 
-.tabs-content__tips-add{
+.tabs-content__tips-add {
   width: 40rpx;
   height: 40rpx;
   margin-left: 50rpx;
 }
 
-.tabs-content,.rechargeGear-footer{
-  padding: 30rpx 30rpx 30rpx 30rpx;
-  background-color: #fff;
+.tabs-content,
+.rechargeGear-footer {
+  padding: 30rpx 30rpx 0 70rpx;
   border-bottom-left-radius: 10rpx;
   border-bottom-right-radius: 10rpx;
 }
 
-.btn-rechargeNow{
-  width: 85%;
-  padding: 22rpx;
-  margin: 0 auto 30rpx;
+.rechargeGear-footer {
+  display: flex;
+  justify-content: space-evenly;
+  align-items: center;
+  padding: 0;
+}
+
+.btn-rechargeNow {
+  width: 328rpx;
+  height: 70rpx;
+  line-height: 70rpx;
+  text-align: center;
   background-color: #fe7124;
-  background: linear-gradient(to right, #ff7a21 0%,#feb25a 100%);
+  background: linear-gradient(to right, #ff7a21 0%, #feb25a 100%);
   text-align: center;
   color: #fff;
-  border-radius: 10rpx;
+  border-radius: 16rpx;
+}
+
+.btn-rechargeNow___share {
+  background: #fff;
+  color: #EE7530;
+  border: 1rpx solid #EE7530;
 }
 
-.btn-rechargeNow:active{
+.btn-rechargeNow:active {
   opacity: .8;
 }
 
-.rechargeNow-tips{
+.rechargeNow-tips {
   text-align: left;
   font-size: 26rpx;
   line-height: 1.8;
 }
 
-.rechargeNow-tips view{
+.rechargeNow-tips view {
   margin-bottom: 20rpx
 }
 
-.rechargeNow-tips view:last-child{
+.rechargeNow-tips view:last-child {
   margin-bottom: 0
 }
 
 /* 充值挡位 */
-.rechargeGear-title{
+.rechargeGear-title {
   height: 84rpx;
   line-height: 84rpx;
   background-color: #fff;
@@ -135,7 +154,7 @@
   border-top-right-radius: 10rpx;
 }
 
-.rechargeGear-content{
+.rechargeGear-content {
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
@@ -144,35 +163,202 @@
   padding: 0 30rpx;
 }
 
-.rechargeGear-content__item{
+.rechargeGear-content__item {
   width: 30%;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   padding: 20rpx 0;
-  border: 1rpx solid #fe7124;
-  border-radius: 10rpx;
-  color: #fe7124;
+  border: 1rpx solid #ddd;
+  border-radius: 4rpx;
+  color: #333;
   background-color: #fff;
   margin-bottom: 30rpx;
+  font-weight: bolder;
 }
 
-.rechargeGear-content__item.active{
-  background-color: #fe7124;
-  color: #fff;
+.rechargeGear-content__item.active {
+  background-color: rgba(238,117,48,0.08);
+  color: #EE7530;
+  border: 1rpx solid #EE7530;
 }
 
-.faceValue{
+.faceValue {
   margin-bottom: 10rpx;
 }
 
-.price{
+.price {
   font-size: 24rpx;
+  font-weight: 300;
+  color: #999;
 }
 
-.card-no{
+.card-no {
   height: 70rpx;
-  font-size: 40rpx;
+  line-height: 70rpx;
+  font-size: 28rpx;
   color: #2b2b2b;
-}
+}
+
+.bindMobileBox {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  height: 176rpx;
+  padding-left: 70rpx;
+  padding-top: 36rpx;
+  box-sizing: border-content;
+  background: #fff;
+}
+
+.progressBar {
+  position: absolute;
+  top: 70rpx;
+  left: 35rpx;
+  width: 1px;
+  height: 220rpx;
+  background: #EE7530;
+}
+
+.dotBox {
+  position: absolute;
+  left: 50%;
+  width: 14rpx;
+  height: 14rpx;
+  border-radius: 50%;
+  background: rgba(238,117,48,0.2);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transform: translateX(-50%);
+  z-index: 10;
+}
+
+.dotBox1 {
+  top: -5rpx;
+}
+
+.dotBox2 {
+  bottom: -5rpx;
+}
+
+.dotBox .dot {
+  width: 7rpx;
+  height: 7rpx;
+  border-radius: 50%;
+  background: #EE7530;
+}
+
+.bindMobileBox .line {
+  position: absolute;
+  left: 35rpx;
+  top: 60rpx;
+  width: 1rpx;
+  height: ;
+}
+
+.bindMobileLabel {
+  margin-bottom: 16rpx;
+  font-size: 28rpx;
+  color: #333;
+}
+
+.bindMobile {
+  display: flex;
+  align-items: center;
+  height: 50%;
+  font-size: 28rpx;
+  color: #ccc;
+  border-bottom: 1rpx solid #EFF0F1;
+}
+
+.tabContent {
+  background: #fff;
+}
+
+.info {
+  display: flex;
+  align-items: center;
+  height: 80rpx;
+  line-height: 80rpx;
+  padding-left: 70rpx;
+}
+
+.infoIcon {
+  width: 24rpx;
+  height: 24rpx;
+  margin-right: 8rpx;
+}
+
+.info .label {
+  font-size: 24rpx;
+  color: #EE7530;
+}
+
+.payInfo {
+  display: flex;
+  align-items: center;
+  color: #999;
+  font-size: 28rpx;
+}
+
+.payInfoIcon {
+  width: 40rpx;
+  height: 40rpx;
+  padding-left: 30rpx;
+  margin-right: 13rpx;
+}
+
+.explain {
+  color: rgb(65,118,220);
+}
+
+.footerInfo {
+  width: 660rpx;
+  margin: 0 auto;
+  font-size: 28rpx;
+  color: #848799;
+}
+
+.footerInfo .clause {
+  line-height: 64rpx;
+}
+
+.footerInfo .title {
+  width: 150rpx;
+  position: relative;
+  margin: 0 auto;
+  margin-top: 60rpx;
+  margin-bottom: 32rpx;
+  text-align: center;
+  font-size: 28rpx;
+  color: #999;
+}
+
+.footerInfo .title::after {
+  content: "";
+  position: absolute;
+  left:-240rpx;
+  top: 50%;
+  height: 1rpx;
+  width: 240rpx;
+  transform: translateY(-50%);
+  background: linear-gradient(to right, #fff 0%, #999 100%);
+}
+
+.footerInfo .title::before {
+  content: "";
+  position: absolute;
+  right:-240rpx;
+  top: 50%;
+  height: 1rpx;
+  width: 240rpx;
+  transform: translateY(-50%);
+  background:linear-gradient(to left, #fff 0%, #999 100%);
+}
+
+.footerInfo text {
+  color: #EE7530;
+}