添加油卡页面

app.json

@@ -1,5 +1,6 @@
 {
   "pages": [
+    "pages/postage/postage",
     "pages/index/index",
     "pages/discover/discover",
     "pages/shopCart/shopCart",
@@ -48,7 +49,7 @@
       {
         "iconPath": "./image/tabbar/phone.png",
         "selectedIconPath": "./image/tabbar/phoned.png",
-        "pagePath": "pages/shopCart/shopCart",
+        "pagePath": "pages/postage/postage",
         "text": "油费"
       },
       {

config.js

@@ -1,6 +1,6 @@
 // let api = "https://passport.lrlz.com/mobile/index.php";
-// let api = "http://www.xyzshops.cn/mobile/index.php";
-let api = "http://192.168.1.200/mobile/index.php";
+let api = "http://www.xyzshops.cn/mobile/index.php";
+// let api = "http://192.168.1.200/mobile/index.php";
 
 function getReq(data, callback, method) 
 {

pages/addAddress/addAddress.wxml

@@ -1,5 +1,5 @@
 <!--pages/addAddress/addAddress.wxml-->
-<import src="../components/template/loadAnimation/loadAnimation.wxml" />
+<!-- <import src="../components/template/loadAnimation/loadAnimation.wxml" /> -->
 <template is="addressLoad" wx:if="{{show}}"/>
 <view>
 

pages/components/select/select.js

@@ -0,0 +1,60 @@
+// Componet/Componet.js
+Component({
+  /**
+   * 组件的属性列表
+   */
+    properties: {
+        propArray:{
+            type:Array,
+        }
+    },
+  /**
+   * 组件的初始数据
+   */
+    data: {
+        selectShow:false,//初始option不显示
+        nowText:"请选择",//初始内容
+        animationData:{}//右边箭头的动画
+    },
+  /**
+   * 组件的方法列表
+   */
+    methods: {
+　　　//option的显示与否
+        selectToggle:function(){
+            var nowShow=this.data.selectShow;//获取当前option显示的状态
+            //创建动画
+            var animation = wx.createAnimation({
+                timingFunction:"ease"
+            })
+            this.animation=animation;
+            if(nowShow){
+                animation.rotate(0).step();
+                this.setData({
+                    animationData: animation.export()
+                })
+            }else{
+                animation.rotate(180).step();                
+                this.setData({
+                    animationData: animation.export()
+                })
+            }
+            this.setData({
+                selectShow: !nowShow
+            })
+        },
+        //设置内容
+        setText:function(e){
+            var nowData = this.properties.propArray;//当前option的数据是引入组件的页面传过来的，所以这里获取数据只有通过this.properties
+            var nowIdx = e.target.dataset.index;//当前点击的索引
+            var nowText = nowData[nowIdx].text;//当前点击的内容
+            //再次执行动画，注意这里一定，一定，一定是this.animation来使用动画
+            this.animation.rotate(0).step();
+            this.setData({
+                selectShow: false,
+                nowText:nowText,
+                animationData: this.animation.export()
+            })
+        }
+    }
+})

pages/components/select/select.json

@@ -0,0 +1,4 @@
+{
+  "component": true,
+  "usingComponents": {}
+}

pages/components/select/select.wxml

@@ -0,0 +1,10 @@
+<!--pages/components/select.wxml-->
+<view class='com-selectBox'>
+    <view class='com-sContent' bindtap='selectToggle'>
+        <view class='com-sTxt {{nowText === "请选择" ? "noText" : ""}}'>{{nowText}}</view>
+        <image src='/image/postage/arrow-bottom.png'  class='com-sImg'  animation="{{animationData}}"></image>
+    </view>
+    <view class='com-sList' wx:if="{{selectShow}}">
+        <view wx:for="{{propArray}}" data-index="{{index}}" wx:key='index' class='com-sItem' bindtap='setText'>{{item.text}}</view>
+    </view>
+</view>

pages/components/select/select.wxss

@@ -0,0 +1,60 @@
+.com-selectBox{
+  width: 100%;
+}
+.com-sContent{
+  border-bottom: 1px solid #e2e2e2;
+  background: white;
+  font-size: 16px;
+  position: relative;
+  height: 45px;
+  line-height: 45px;
+}
+.com-sImg{
+  position: absolute;
+  right: 0;
+  top: 12px;
+  width: 20px;
+  height: 20px;
+  transition: all .3s ease;
+}
+.com-sTxt{
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  padding:0 20px 0 0;
+  font-size: 22px;
+  color: #2b2b2b;
+}
+
+.com-sTxt.noText{
+  font-size: 14px;
+  color: #848799;
+}
+
+.com-sList{
+  background: white;
+  width: 85%;
+  position: absolute;
+  border-bottom: 1px dotted #e2e2e2;
+  /* border-top: none; */
+  box-sizing: border-box;
+  z-index: 3;
+  max-height: 120px;
+  overflow: auto;
+}
+.com-sItem{
+  /* left: 15px;
+  right: 15px; */
+  height: 45px;
+  line-height: 45px;
+  border-top: 1px solid #e2e2e2;
+  padding: 0 6px;
+  text-align: left;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 14px;
+}
+.com-sItem:first-child{
+  border-top: none;
+}

pages/postage/postage.js

@@ -0,0 +1,100 @@
+// pages/postage/postage.js
+const getReq = require('../../config.js').getReq
+let appInstance = getApp()
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+    currentIndex: 0,
+    rechargeGearActiveIndex: 0,
+    tabsData: [
+      { id: 0, icon: '/image/postage/sinopec.png', title: '中国石化', tips: '选择油卡:(一人最多十张油卡)' },
+      { id: 1, icon: '/image/postage/petrochina.png', title: '中国石油', tips: '选择油卡:(一人最多八张油卡)' }
+    ],
+    selectArray: [{
+        "id": "10",
+        "text": "9066666888"
+    }, {
+        "id": "21",
+        "text": "25288888556"
+    }],
+    gearData: [
+      { faceValue: 100, price: 95 },
+      { faceValue: 200, price: 190 },
+      { faceValue: 500, price: 475 },
+      { faceValue: 1000, price: 950 }
+    ]
+  },
+
+  handlerClickTabItem(e) {
+    this.setData({
+      currentIndex: e.currentTarget.dataset.activeindex
+    });
+  },
+
+  handlerClickRechargeGear(e) {
+    this.setData({
+      rechargeGearActiveIndex: e.currentTarget.dataset.activeindex
+    });
+  },
+
+  handlerClickAdd(e){
+    wx.showToast({
+      title: '尚未实现',
+      icon: 'none',
+      duration: 2000,
+      mask: true
+    });
+  },
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad: function (options) {
+    
+  },
+
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow: function () {
+    
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload: function () {
+
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh: function () {
+
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom: function () {
+
+  }
+})

pages/postage/postage.json

@@ -0,0 +1,7 @@
+{
+  "navigationBarTitleText": "油卡充值",
+  "navigationBarBackgroundColor": "#fe7124",
+  "usingComponents": {
+    "Select": "../components/select/select"
+  }
+}

pages/postage/postage.wxml

@@ -0,0 +1,40 @@
+<!--pages/address/address.wxml-->
+<view class="postage">
+  <view class="tips">您好！尊敬的会员，您正享受商城促销活动9.6折</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}}">
+        <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" catchtap="handlerClickAdd">
+        <text class="tabs-content__tips-text">{{item.tips}}</text>
+        <image class="tabs-content__tips-add" src="/image/postage/add.png"></image>
+      </view>
+      <Select prop-array='{{selectArray}}'></Select>
+    </view>
+  </view>
+  
+  <!-- 充值挡位 -->
+  <view class="rechargeGear" wx:if="{{gearData.length}}">
+    <view class="rechargeGear-title">充值挡位</view>
+    <view class="rechargeGear-content">
+      <view class="rechargeGear-content__item {{rechargeGearActiveIndex == index ? 'active' : ''}}" wx:for="{{gearData}}" wx:key="index" 
+      bindtap="handlerClickRechargeGear" data-activeindex="{{index}}">
+        <view class="faceValue">{{item.faceValue}}元</view>
+        <view class="price">售价 {{item.price}} 元</view>
+      </view>
+    </view>
+    <view class="rechargeGear-footer">
+      <navigator class="btn-rechargeNow" url="/pages/addAddress/addAddress">
+        <text>立即充值</text>
+      </navigator>
+      <view class="rechargeNow-tips">充值后，即时到账</view>
+    </view>
+  </view>
+</view>

pages/postage/postage.wxss

@@ -0,0 +1,158 @@
+.postage{
+  position: relative;
+  padding: 10px 0;
+  color: #848799;
+}
+
+.postage::before{
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 165px;
+  background: linear-gradient(to bottom, #fd7428 0%,#fc8f4a 100%);
+  z-index: -1;
+}
+
+.tips{
+  padding: 5px 10px;
+  width: 92%;
+  margin: 0 auto;
+  background-color: #ffd900;
+  color: #786700;
+  border-radius: 10px;
+  box-sizing: border-box;
+  font-size: 14px;
+}
+
+.tabs, .rechargeGear{
+  width: 92%;
+  margin: 10px auto;
+}
+
+.tabs-title{
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  height: 42px;
+  line-height: 42px;
+  background-color: #fff;
+  border-top-left-radius: 10px;
+  border-top-right-radius: 10px;
+}
+
+.tabs-title-item{
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 50%;
+}
+
+.tabs-title-item__icon{
+  width: 20px;
+  height: 20px;
+  margin-right: 5px;
+}
+
+.tabs-title-item__text{}
+
+.tabs-title-item.active{
+  position: relative;
+  color: #fe7124;
+}
+
+.tabs-title-item.active::before{
+  content: "";
+  position: absolute;
+  bottom: 0;
+  left: 15%;
+  right: 10%;
+  height: 2px;
+  background-color: #fe7124;
+}
+
+.tabs-content__tips{
+  display: flex;
+  height: 40px;
+  align-items: center;
+}
+
+.tabs-content__tips-text{
+  font-size: 14px;  
+}
+
+.tabs-content__tips-add{
+  width: 20px;
+  height: 20px;
+  margin-left: 25px;
+}
+
+.tabs-content,.rechargeGear-footer{
+  padding: 15px 15px 25px 15px;
+  background-color: #fff;
+  border-bottom-left-radius: 10px;
+  border-bottom-right-radius: 10px;
+}
+
+.btn-rechargeNow{
+  width: 85%;
+  padding: 13px;
+  margin: 0 auto 15px;
+  background-color: #fe7124;
+  background: linear-gradient(to right, #ff7a21 0%,#feb25a 100%);
+  text-align: center;
+  color: #fff;
+  border-radius: 10px;
+}
+
+.rechargeNow-tips{
+  text-align: center;
+}
+
+/* 充值挡位 */
+.rechargeGear-title{
+  height: 42px;
+  line-height: 42px;
+  background-color: #fff;
+  color: #1e242e;
+  padding-left: 15px;
+  border-top-left-radius: 10px;
+  border-top-right-radius: 10px;
+}
+
+.rechargeGear-content{
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  background-color: #fff;
+  box-sizing: border-box;
+  padding: 0 15px;
+}
+
+.rechargeGear-content__item{
+  width: 30%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 10px 0;
+  border: 1px solid #fe7124;
+  border-radius: 10px;
+  color: #fe7124;
+  background-color: #fff;
+  margin-bottom: 15px;
+}
+
+.rechargeGear-content__item.active{
+  background-color: #fe7124;
+  color: #fff;
+}
+
+.faceValue{
+  margin-bottom: 5px;
+}
+
+.price{
+  font-size: 12px;
+}

project.config.json

@@ -24,7 +24,7 @@
 			"outputPath": ""
 		},
 		"useIsolateContext": true,
-		"useCompilerModule": true,
+		"useCompilerModule": false,
 		"userConfirmedUseCompilerModuleSwitch": false
 	},
 	"compileType": "miniprogram",