版本更新功能，话费充值页面优化

app.js

@@ -3,6 +3,40 @@ import WxAuthor from './utils/WxAuthor'
 
 App({
     onLaunch: function() {
+
+        // 用户版本更新
+      if (wx.canIUse("getUpdateManager")) {
+        let updateManager = wx.getUpdateManager();
+        updateManager.onCheckForUpdate((res) => {
+          // 请求完新版本信息的回调
+          console.log(res.hasUpdate);
+        })
+        updateManager.onUpdateReady(() => {
+          wx.showModal({
+            title: '更新提示',
+            content: '新版本已经准备好，是否重启应用？',
+            success: (res) => {
+              if (res.confirm) {
+                // 新的版本已经下载好，调用 applyUpdate 应用新版本并重启
+                updateManager.applyUpdate();
+              } else if (res.cancel) {
+                return false;
+              }
+            }
+          })
+        })
+        updateManager.onUpdateFailed(() => {
+          // 新的版本下载失败
+          wx.hideLoading();
+          wx.showModal({
+            title: '升级失败',
+            content: '新版本下载失败，请检查网络！',
+            showCancel: false
+          });
+        });
+      }
+
+
         let self = this;
         // 登录
         this.mWxAuthor = new WxAuthor(self,true)

pages/phoneCharges/phoneCharges.js

@@ -20,7 +20,14 @@ Page({
     goods_id:'', //当前选中挡位的goods_id
     card_type: 'phone',
     card_no: '',
-    fromSource: ''
+    fromSource: '',
+    payInfoChecked:true
+  },
+
+  onCheckedPayInfo(){
+    this.setData({
+      payInfoChecked:!this.data.payInfoChecked
+    })
   },
 
   // 页签切换
@@ -122,9 +129,16 @@ Page({
   // 立即充值
   handlerRecharge()
   {
+    if(!this.data.payInfoChecked) {
+      wx.showToast({
+        icon:'none',
+        title: '请同意话费充值服务说明'
+      })
+      return;
+    }
     const { goods_id, card_no, card_type } = this.data
     if(!card_no){
-      app.showToast('卡号不能为空')
+      app.showToast('手机号不能为空')
       return
     }
     buyVGoods(app, goods_id, 1, { card_no, card_type}, (res) => {
@@ -141,6 +155,22 @@ Page({
     })
   },
 
+  onShowPayInfoModal(){
+    wx.showModal({
+      title: '充值代缴服务说明',
+      content: '充值代缴服务说明',
+      showCancel:false,
+      success (res) {
+        if (res.confirm) {
+          console.log('用户点击确定')
+        } else if (res.cancel) {
+          console.log('用户点击取消')
+        }
+      }
+    })
+    
+  },
+
   /**
    * 生命周期函数--监听页面初次渲染完成
    */

pages/phoneCharges/phoneCharges.json

@@ -1,6 +1,6 @@
 {
   "enablePullDownRefresh":true,
   "navigationBarTitleText": "手机充值",
-  "navigationBarBackgroundColor": "#fe7124",
-  "navigationBarTextStyle": "white"
+  "navigationBarBackgroundColor": "#ffffff",
+  "navigationBarTextStyle": "black"
 }

pages/phoneCharges/phoneCharges.wxml

@@ -10,6 +10,10 @@
       <view class="card-no vux-1px-b" bindtap="handlerAddCard">
         {{card_no}}
       </view>
+      <view class="info">
+				<image src="/image/info.png" class="infoIcon"></image>
+				<view class="label">请仔细核对手机号，避免造成不必要的损失</view>
+			</view>
     </view>
   </view>
   
@@ -23,15 +27,32 @@
         <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="handlerRecharge">
-        <text>充值</text>
-      </view>
-    </view>
   </view>
 
-  <view class="rechargeGear">
+  <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" style="background:transparent;padding:0;">
+		<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.如需开发票请至相应的手机运营商官方APP开取电子发票；</view>
+	</view>
+
+  <!-- <view class="rechargeGear">
     <view class="rechargeGear-title">说明</view>
     <view class="rechargeGear-footer">
       <view class="rechargeNow-tips">
@@ -39,8 +60,10 @@
         <view>2.如需开发票请至相应的手机运营商官方APP开取电子发票</view>
       </view>
     </view>
-  </view>
-  <view class="rechargeGear">
+  </view> -->
+
+  
+  <!-- <view class="rechargeGear">
     <view class="rechargeGear-title">分享福利</view>
     <view class="rechargeGear-footer">
       <view class="rechargeNow-tips">
@@ -49,5 +72,5 @@
         <view>3.分享3人可享97折优惠</view>
       </view>
     </view>
-  </view>
+  </view> -->
 </view>

pages/phoneCharges/phoneCharges.wxss

@@ -11,7 +11,7 @@
   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;
 }
 
@@ -29,6 +29,7 @@
 .tabs, .rechargeGear{
   width: 92%;
   margin: 20rpx auto;
+  border-radius: 20rpx;
 }
 
 .tabs-title{
@@ -89,7 +90,7 @@
 }
 
 .tabs-content,.rechargeGear-footer{
-  padding: 30rpx 30rpx 50rpx 30rpx;
+  padding: 30rpx 30rpx 0 70rpx;
   background-color: #fff;
   border-bottom-left-radius: 10rpx;
   border-bottom-right-radius: 10rpx;
@@ -151,16 +152,18 @@
   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{
@@ -180,4 +183,89 @@
 .border-top-radius{
   border-top-left-radius: 10rpx;
   border-top-right-radius: 10rpx;
+}
+
+
+.info {
+  display: flex;
+  align-items: center;
+  height: 80rpx;
+  line-height: 80rpx;
+}
+
+.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;
 }

pages/postage/postage.wxml

@@ -49,7 +49,7 @@
 	</view>
 
 	<view class="payInfo" bindtap="onCheckedPayInfo">
-		<image wx:if="{{!payInfoChecked}}" src="/image/check.png" class="payInfoIcon" ></image>
+		<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>