个人中心 和充值界面逻辑更改

app.json

@@ -1,11 +1,12 @@
 {
   "pages": [
-    "pages/index/index",
-    "pages/postageDetail/postageDetail",
+    "pages/postage/postage",
     "pages/postageManage/postageManage",
+    "pages/postageDetail/postageDetail",
+    "pages/index/index",
+    "pages/myhome/myhome",
     "pages/address/address",
     "pages/phoneCharges/phoneCharges",
-    "pages/postage/postage",
     "pages/discover/discover",
     "pages/shopCart/shopCart",
     "pages/person/person",
@@ -49,11 +50,10 @@
         "pagePath": "pages/postage/postage",
         "text": "加油"
       },
-      
       {
         "iconPath": "./image/tabbar/me.png",
         "selectedIconPath": "./image/tabbar/med.png",
-        "pagePath": "pages/person/person",
+        "pagePath": "pages/myhome/myhome",
         "text": "我的"
       }
     ]

pages/components/blockItem/blockItem.js

@@ -177,7 +177,7 @@ Component({
                 })
                 break;
               case "phone" : 
-                wx.switchTab({
+                wx.navigateTo({
                   url: '/pages/phoneCharges/phoneCharges'
                 })
                 break;

pages/myhome/myhome.js

@@ -0,0 +1,75 @@
+// pages/myhome/myhome.js
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+    personInfo: {
+      avtor: '/image/myhome/avtor.jpg', nickname: '燕子', weixin: 'xiaoyanzi', money: 500, postage: '31451345315', phone: '13122223333'
+    }
+  },
+
+  handleMore(e) {
+    const { cardtype } = e.currentTarget.dataset
+    wx.navigateTo({
+      url: `/pages/postageManage/postageManage?card_type=${cardtype}`,
+    })
+  },
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad: function (options) {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload: function () {
+
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh: function () {
+
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom: function () {
+
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage: function () {
+
+  }
+})

pages/myhome/myhome.json

@@ -0,0 +1,5 @@
+{
+  "navigationBarTitleText": "个人中心",
+  "navigationBarBackgroundColor": "#fe7124",
+  "navigationBarTextStyle": "white"
+}

pages/myhome/myhome.wxml

@@ -0,0 +1,34 @@
+<!--pages/myhome/myhome.wxml-->
+<view class="myhome-wrp">
+  <view class="topbg"></view>
+  <view class="header">
+    <image src="{{personInfo.avtor}}" class="avtor"></image>
+    <view class="info">
+      <text class="nickname">{{personInfo.nickname}}</text>
+      <text class="weixin">微信号: {{personInfo.weixin}}</text>
+      <text class="other">已经为您节省 <text class="money">{{personInfo.money}}</text> 元</text>
+    </view>
+  </view>
+
+  <view class="card">
+    <view class="card-title" bindtap="handleMore" data-cardtype="sinopec">
+      <image src="/image/myhome/icon-postage.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 class="card-item bg-orange">{{personInfo.postage}}</view>
+    </view>
+  </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 class="card-item bg-blue">{{personInfo.phone}}</view>
+    </view>
+  </view>
+</view>

pages/myhome/myhome.wxss

@@ -0,0 +1,109 @@
+/* pages/myhome/myhome.wxss */
+
+.myhome-wrp{
+  position: relative;
+}
+.topbg{
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 80rpx;
+  background-color: #fe7124;
+  z-index: 1;
+}
+.header{
+  position: relative;
+  z-index: 2;
+  display: flex;
+  width: 690rpx;
+  margin: 0 auto;
+  padding: 40rpx;
+  border-radius: 15rpx;
+  background-color: #fff;
+  box-sizing: border-box;
+}
+.header .avtor{
+  width: 120rpx;
+  height: 120rpx;
+  border-radius: 50%;
+  margin-right: 30rpx;
+}
+.header .info{
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+}
+
+.header .info .nickname {
+  font-size: 34rpx;
+  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(255, 238, 211);
+}
+.header .info .other .money {
+  color: #fe7124;
+}
+
+.card{
+  margin: 20rpx;
+  background-color: #fff;
+  box-sizing: border-box;
+  border-radius: 15rpx;
+}
+.card-title{
+  display: flex;
+  padding: 30rpx 20rpx;
+  align-items: center;
+  border-radius: 15rpx;
+}
+.card-title:active{
+  background-color: #eee;
+}
+.card-title .icon{
+  margin-right: 15rpx;
+}
+.icon-postage{
+  width: 50rpx;
+  height: 40rpx;
+}
+.icon-phone{
+  width: 32rpx;
+  height: 44rpx;
+}
+.card-title .text{
+  flex: 1
+}
+.card-title .more{
+  font-size: 24rpx;
+  color: #8e8e8e;
+  width: 50rpx;
+  height: 50rpx;
+}
+.card-body{
+  padding: 20rpx 20rpx 40rpx;
+}
+.card-item{
+  padding: 30rpx;
+  border-radius: 15rpx;
+  color: #fff;
+}
+.card-item:active{
+  /* opacity: .8; */
+}
+.bg-orange{
+  background: linear-gradient(to right, #ff7a21 0%,#feb25a 100%);
+}
+.bg-blue{
+  background: linear-gradient(to right, #006ec9 0%,#2599d8 100%);
+}

pages/postage/postage.js

@@ -17,6 +17,9 @@ Page({
     goods_id:'', //当前选中挡位的goods_id
     card_type: 'sinopec', //油卡类型 （中石化/中石油）
     card_no: '', //油卡号
+    cards: [],
+    sinopec: {},
+    petrochina: {},
     firstLoad: true,
     tabsData: [
       { id: 0, icon: '/image/postage/sinopec.png', title: '中国石化', tips: '选择油卡', card_type: 'sinopec', card_no: '' },
@@ -28,9 +31,11 @@ Page({
   // 页签切换
   handlerClickTabItem(e) {
     var dataset = e.currentTarget.dataset
+    const { activeindex, cardtype } = dataset
+    const { cards } = this.data
     this.setData({
       currentIndex: dataset.activeindex,
-      card_no: dataset.cardno
+      card_no: this.getValueBykey(cardtype ,cards).card_no
     });
   },
 
@@ -56,47 +61,41 @@ Page({
    * 生命周期函数--监听页面加载
    */
   onLoad: function (options) {
+    
     let fromSource = recordSource(app, `act=index&op=card_goods`)
     this.setData({
       fromSource: app.globalData.fromSource,
-      card_no: this.data.tabsData[0].card_no
+      // card_no: this.data.tabsData[0].card_no
     });
-    var self = this;
     getReq({
       act: 'index',
       op: 'card_goods',
       page_type: 'oil',
       from: fromSource
-    }, function (res) {
-      self.setData({
+    }, (res) => {
+      this.setData({
         firstLoad: false
       });
       if (res.code == 200) {
         if(res.datas && res.datas.goods){
-          var datas = res.datas
-          self.setData({
-            tips: datas.tips,
-            goods: datas.goods,
-            goods_id: datas.goods[0].goods_id
-          });
+          const datas = res.datas
+          const { tips = '', goods = [], cards = [], } = datas
+          const sinopec = this.getValueBykey('sinopec', cards)
+          const petrochina = this.getValueBykey('petrochina', cards)
+          this.setData({ tips, goods, cards, sinopec, petrochina, card_no: sinopec.card_no, goods_id: datas.goods[0].goods_id });
         }
-      }else {
-        wx.showToast({
-          icon: 'none',
-          title: res.message,
-          duration: 2000
-        })
+      } else {
+        app.showToast(res.message)
       }
     })
   },
+  // 通过键取值
+  getValueBykey(key = '', data = []){
+    return data.filter(val => val.card_type === key)[0]
+  },
 
   // 立即充值
   handlerRecharge(){
-    // wx.showToast({
-    //   icon: 'none',
-    //   title: `goods_id: ${this.data.goods_id}, card_no: ${this.data.card_no}`,
-    //   duration: 2000
-    // })
     const { goods_id, card_no, card_type } = this.data
     if(!card_no){
       app.showToast('卡号不能为空')

pages/postage/postage.wxml

@@ -4,7 +4,7 @@
   <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-cardno="{{item.card_no}}">
+      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>
@@ -15,7 +15,8 @@
         <!-- <image class="tabs-content__tips-add" src="/image/postage/add.png"></image> -->
       </view>
       <view class="card-no vux-1px-b" bindtap="handlerAddCard" data-cardtype="{{item.card_type}}">
-        {{ card_no || item.card_no}}
+        <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>

pages/postageManage/postageManage.js

@@ -24,7 +24,7 @@ Page({
     this.getDatas()
     let len = getCurrentPages().length
     let prev = getCurrentPages()[len - 2] 
-    if(prev['route'].indexOf('/person/person') != -1) {
+    if(prev['route'].indexOf('/myhome/myhome') != -1) {
       this.setData({
         fromPerson: true
       })