暂存商城修改

pages/home/index.js

@@ -4,7 +4,6 @@ import { alertInfo, alertSuccess } from "../../utils/index";
 import request from '../../utils/request';
 import { getDot } from "../../utils/system";
 import { getUserInfo } from "../../service/user"
-import { requestRecharge } from "../../service/recharge";
 const { OK } = request;
 // pages/home/index.js
 Page({
@@ -23,10 +22,7 @@ Page({
     meterList: [],
     meterIndex: 0,
     rechargeVisible: false,
-    actions: [
+    background: ['demo-text-1', 'demo-text-2', 'demo-text-3'],
-      { name: '微信支付', },
-      { name: '对公支付', disabled: true },
-    ],
   },
   
   /**
@@ -57,18 +53,24 @@ Page({
   onReady() {
 
   },
-  async changeMeter() {
+  jumpToRecharge() {
-    const { meterList = [] } = this.data;
+    wx.navigateTo({
-    const newColumns = meterList.map(item => { item.id = item.code; item.name = `${item.code} - ${item.address}`; return item; })
+      url: '/pages/recharge/index',
-    this.setData({
-      columns: newColumns,
-      show: true,
-      pickerType: "meter"
     })
   },
-  async refreshMeter() {
+
-    const { meter } = this.data;
+  async setUser() {
-    this.handleGetMeterDetail(meter.id);
+    const result = await getUserInfo();
+    if (result.code !== OK) {
+      // alertInfo(result.message)
+      const user = wx.getStorageSync('user')
+      this.setData({ user: user })
+      return;
+    }
+    this.setData({ user: result.data })
+    wx.setStorageSync('user', result.data)
+    // const user = wx.getStorageSync('user')
+    // this.setData({ user: user })
   },
   onOk(e) {
     const { type, index, value } = e.detail;
@@ -100,10 +102,6 @@ Page({
           tenement: value
         })
 
-        break;
-      case "meter":
-        const { code, id } = e.detail.value;
-        this.handleGetMeterDetail(id)
         break;
     }
   },
@@ -124,45 +122,9 @@ Page({
       show: false,
     })
   },
-  changeMoney(e) {
-    const { money } = e.currentTarget.dataset;
-    this.setData({
-      money: money
-    })
-  },
-  onChangeMoney(e) {
-    this.setData({ money: e.detail })
-  },
-  async recharge() {
-    const { user, money, meter, tenement, park } = this.data;
-    const that  = this;
-    if (!user || !user.id) {
-      alertInfo("请先登录")
-      return
-    }
-    if (!money) {
-      alertInfo("请先输入金额")
 
-      return;
+  
-    }
+
-    if (!meter?.code) {
-      alertInfo("没有选择表计")
-      return;
-    }
-    if (money < 0.01) {
-      alertInfo("最少为1分")
-      return
-    }
-    // wx.navigateTo({
-    //   url: `/pages/rechargeWay/index?money=${money}&address=${meter.address}&id=${meter?.id}&tenement=${tenement?.id}&park=${park.id}`,
-    // })
-    this.setData({ rechargeVisible: true })
-  },
-  jumpToInvoice() {
-    wx.navigateTo({
-      url: '/pages/invoiceList/index',
-    })
-  },
   jumpToLogin() {
     wx.navigateTo({
       url: '/pages/login/index',
@@ -172,7 +134,6 @@ Page({
    * 生命周期函数--监听页面显示
    */
   onShow() {
-
     this.getAllList();
     this.watchTenement();
     this.watchPark();
@@ -192,8 +153,8 @@ Page({
       set: function (newVal) {
         // const oldValue = value;
         wx.setStorageSync('tenement', newVal)
-        that.getMeters(newVal);
         that.setUser();
+        // that.getMeters(newVal);
         value = newVal;
       }
     });
@@ -250,24 +211,7 @@ Page({
       wx.setStorageSync('meter', data?.[0] || {} )
     // }
   },
-  jumpToElectric() {
+
-    wx.navigateTo({
-      url: '/pages/electricQuery/index',
-    })
-  },
-  async setUser() {
-    const result = await getUserInfo();
-    if (result.code !== OK) {
-      // alertInfo(result.message)
-      const user = wx.getStorageSync('user')
-      this.setData({ user: user })
-      return;
-    }
-    this.setData({ user: result.data })
-    wx.setStorageSync('user', result.data)
-    // const user = wx.getStorageSync('user')
-    // this.setData({ user: user })
-  },
   async getAllList() {
     const { code, message, data } = await getOwnTenementList()
     if (code !== OK) {
@@ -299,64 +243,11 @@ Page({
     updateDatas.all = data;
     this.setData({
       ...updateDatas
-    }, () => {
-      if (updateDatas?.tenement?.id) {
-        this.getMeters({ id: updateDatas?.tenement?.id })
-      }
     })
   },
-  jumpToRecord() {
+
-    wx.navigateTo({
+  jumpToShop() {
-      url: '/pages/rechargeRecord/index',
+    alertInfo("开发中");
-    })
-  },
-  jumpToOrder() {
-    // alertInfo("尚未完成")
-    wx.navigateTo({
-      url: '/pages/billList/index',
-    })
-  },
-  onCloseRechargeWay() {
-    this.setData({ rechargeVisible: false })
-  },
-  onSelectRechargeWay(e) {
-    switch(e.detail.name) {
-      case "对公支付":
-        alertInfo("开发中")
-        break;
-      default:
-        this.wxRecharge();
-        break;
-    }
-  },
-  async wxRecharge() {
-    const { money, meter, tenement, park } = this.data;
-    const { code, message, data } = await requestRecharge({ money: Number(money), id: meter?.id, tenement: tenement?.id, park: park?.id })
-    if (code !== OK) {
-      alertInfo(message)
-      return;
-    }
-    wx.requestPayment({
-      timeStamp: data?.time,
-      nonceStr: data?.nonceStr,
-      package: "prepay_id=" + data?.prepay_id,
-      paySign: data?.paySign,
-      signType: 'RSA',
-      success: (res) => {
-        alertSuccess("充值成功")
-        that.setData({
-          money: null
-        })
-      },
-      fail: (res) => {
-        console.log('fail', res)
-        alertInfo("请稍后重试")
-      },
-      complete: (res) => {
-        console.log('complete')
-        that.handleGetMeterDetail(meter.id)
-      }
-    })
   },
   /**
    * 生命周期函数--监听页面隐藏

pages/home/index.json

@@ -2,7 +2,6 @@
   "usingComponents": {
     "custom-status-bar": "/components/customStatusBar/index",
     "van-icon": "@vant/weapp/icon/index",
-    "van-button": "@vant/weapp/button/index",
     "van-image": "@vant/weapp/image/index",
     "avatar": "/components/avatar/index",
     "van-field": "@vant/weapp/field/index",

pages/home/index.wxml

@@ -33,83 +33,20 @@
     <view class="welcome"> 欢迎使用华昌宝能用电管理系统！ </view>
   </view>
 </view>
-<view class="rechargeWrapper">
+<swiper indicator-dots="{{true}}" autoplay="{{true}}" interval="{{8000}}" duration="{{300}}">
-  <view class="card">
+  <block wx:for="{{background}}" wx:key="*this">
-    <view class="cardTop">
+    <swiper-item>
-      <view class="cardTopLeft">
+      <view class="swiper-item {{item}}">
-        <view wx:if="{{user.id}}"> {{  tenement.shortName}} - {{ meter.address }} </view>
+        {{item}}
-        <view wx:else> -- </view>
       </view>
-      <van-button type="info" size="small" plain="{{true}}" class="loginBtn" bind:click="changeMeter" wx:if="{{user.id}}">
+    </swiper-item>
-        <van-icon name="exchange" />
+  </block>
-        切换电表
+</swiper>
-      </van-button>
+<van-grid column-num="2" direction="horizontal">
-    </view>
+  <van-grid-item icon="balance-list-o" text="充值" bind:tap="jumpToRecharge" />
-    <view class="cardContent">
+  <van-grid-item icon="shop-o" text="商城" bind:tap="jumpToShop" />
-      <view class="cardItem">
-        <view class="cardItemLabel"> 电表编号： </view>
-        <view class="cardItemValue" wx:if="{{user.id}}"> {{meter.code}} </view>
-        <view class="cardItemValue" wx:else> -- </view>
-      </view>
-      <view class="cardItem">
-        <view class="cardItemLabel"> 电表地址： </view>
-        <view class="cardItemValue" wx:if="{{user.id}}"> {{meter.address}} </view>
-        <view class="cardItemValue" wx:else> -- </view>
-      </view>
-      <view class="cardItem">
-        <view class="cardItemLabel"> 电表余额： </view>
-        <view class="cardItemValue" style="position: relative;">
-          <view class="text"  wx:if="{{user.id}}"> {{meter.money}} </view>
-          <view class="text"  wx:else> --- </view>
-          <van-button type="info" size="small" plain="{{true}}" custom-style="position: absolute; right: 0; bottom: 0;z-index: 99;" bind:click="refreshMeter"  wx:if="{{user.id}}">
-            <van-icon name="replay" />
-            刷新
-          </van-button>
-        </view>
-      </view>
-    </view>
-  </view>
-  <view class="recharge">
-    <view> 请输入金额： </view>
-    <view class="moneyBox">
-      <view class="money" bind:tap="changeMoney" data-money="30"> ￥30 </view>
-      <view class="money" bind:tap="changeMoney" data-money="50"> ￥50 </view>
-      <view class="money" bind:tap="changeMoney" data-money="100"> ￥100 </view>
-      <view class="money" style="margin-right: 0;" bind:tap="changeMoney" data-money="200"> ￥200 </view>
-    </view>
-    <view class="moneyInput">
-      <van-field
-        value="{{ money }}"
-        placeholder="请输入充值金额"
-        border="{{true}}"
-        bind:change="onChangeMoney"
-        size="large"
-        type="digit"
-      />
-    </view>
-  </view>
-  <view class="operate">
-    <van-button color="rgb(88, 165, 141)" block bind:click="recharge">去缴费</van-button>
-  </view>
-  <view class="others">
-    <van-grid direction="horizontal" column-num="2">
-      <van-grid-item icon="balance-list-o" text="电费账单" bind:click="jumpToOrder">
-        <!-- <view slot="icon"> 111 </view> -->
-        <!-- <van-icon slot="icom" name="balance-list-o" /> -->
-      </van-grid-item>
-      <van-grid-item icon="after-sale" text="缴费记录" bind:click="jumpToRecord" />
-      <van-grid-item icon="bar-chart-o" text="用电查询" bind:click="jumpToElectric" />
-      <van-grid-item icon="bill-o" text="去开票" bind:click="jumpToInvoice" />
 </van-grid>
 </view>
-
-</view>
-</view>
 <picker show="{{show}}" valueKey="name" columns="{{columns}}" bind:ok="onOk" bind:cancel="onCancel" type="{{pickerType}}" />
 
-<van-action-sheet
+
-  show="{{ rechargeVisible }}"
-  actions="{{ actions }}"
-  bind:close="onCloseRechargeWay"
-  bind:select="onSelectRechargeWay"
-/>

pages/home/index.wxss

@@ -59,105 +59,9 @@
   white-space: nowrap;
 }
 
-.rechargeWrapper {
-  background: linear-gradient(to bottom, var(--middle-green), #fff );
-  overflow: hidden;
-}
-
-.card {
-  margin-top: 0rpx;
-  margin-left: 46rpx;
-  margin-right: 46rpx;
-  border-radius: 30rpx;
-  padding: 22rpx 30rpx;
-  /* background-color: rgb(173, 217, 203); */
-  background: linear-gradient(to bottom right, rgb(212, 240, 231), rgb(145, 206, 185));
-}
-
-.cardTop {
-  display: flex;
-  align-items: center;
-}
-
-.cardTopLeft {
-  display: flex;
-  align-items: center;
-  flex: 1;
-  font-size: 33rpx;
-}
-
-.cardContent {
-  margin: 30rpx 20rpx 0;
-}
-
-.cardItem {
-  display: flex;
-  align-items: center;
-  margin-bottom: 30rpx;
-  font-size: 32rpx;
-}
-
-.cardItem:last-child {
-  margin-bottom: 12rpx;
-}
-
-.cardItemValue {
-  display: flex;
-  flex: 1;
-  align-items: center;
-}
-
-.cardItemValue .text {
-  flex: 1;
-}
-
-.recharge {
-  background: #fff;
-  padding: 20rpx 30rpx;
-  margin-top: 24rpx;
-  margin-left: 46rpx;
-  margin-right: 46rpx;
-  margin-bottom: 30rpx;
-  border-radius: 30rpx;
-}
-
-.operate {
-  margin-left: 46rpx;
-  margin-right: 46rpx;
-  margin-bottom: 24rpx;
-}
-
 .welcome {
   margin-top: 20rpx;
   margin-left: 30rpx;
   font-size: 30rpx;
   color: rgba(255,255,255, .85);
 }
-
-.moneyBox {
-  display: flex;
-  justify-content: space-between;
-  margin-top: 30rpx;
-}
-
-.money {
-  flex: 1;
-  padding: 16rpx;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  border: 1rpx solid #ccc;
-  margin-right: 30rpx;
-}
-
-.moneyInput {
-  margin-top: 24rpx;
-  margin-bottom: 24rpx;
-}
-
-.others {
-  margin-left: 46rpx;
-  margin-right: 46rpx;
-  margin-top: 10rpx;
-  margin-bottom: 40rpx;
-}

pages/recharge/index.js

@@ -1,32 +1,202 @@
-import { getMeterDetail } from "../../service/meter";
+import { getMeterDetail, getTenementMeterList } from "../../service/meter";
-import { getGlobalData, showModal } from "../../utils/index";
+import request from '../../utils/request';
+import { getUserInfo } from "../../service/user"
+import { alertInfo, alertSuccess, loadingFunc } from "../../utils/index";
+import { requestRecharge } from "../../service/recharge";
+const { OK } = request;
 
 // pages/recharge/index.js
 Page({
-
   /**
    * 页面的初始数据
    */
   data: {
-    money: 0,
+    meterList: [],
-    moneyIndex: -1,
+    meter: {},
-    primaryColor: getGlobalData().primaryColor,
+    actions: [
-    defaultMoneyArray: [100, 200, 500, 1000, 2000],
+      { name: '微信支付', },
-    customFlag: false,
+      { name: '对公支付', disabled: true },
-    detail: {}
+    ],
+    user: {},
   },
 
   /**
    * 生命周期函数--监听页面加载
    */
-  onLoad(options) {
+  onLoad() {
-    const { tenement, code } = options
+    const tenement = wx.getStorageSync('tenement')
-    this.init({ tenement, code })
+    const park = wx.getStorageSync('park')
-  },
-  async init(options) {
-    const { code, message, data = {}} = await getMeterDetail(options)
     this.setData({
-      detail: data
+      tenement, park
+    })
+    this.init(park, tenement)
+  },
+  async changeMeter() {
+    const { meterList = [] } = this.data;
+    const newColumns = meterList.map(item => { item.id = item.code; item.name = `${item.code} - ${item.address}`; return item; })
+    this.setData({
+      columns: newColumns,
+      show: true,
+      pickerType: "meter"
+    })
+  },
+  onOk(e) {
+    const { type } = e.detail;
+    switch(type) {
+      case "meter":
+        const { id } = e.detail.value;
+        this.handleGetMeterDetail(id)
+        break;
+    }
+  },
+  async init(park, tenement) {
+    this.getMeters({ id: tenement?.id })
+  },
+  async refreshMeter() {
+    const { meter } = this.data;
+    this.handleGetMeterDetail(meter.id);
+  },
+  async handleGetMeterDetail(meterId) {
+    const { tenement } = this.data;
+    const { code, message, data } = await getMeterDetail({ tenement: tenement?.id, id: meterId });
+    if (code !== OK) {
+      alertInfo(message);
+      return;
+    }
+    this.setData({
+      meter: data,
+      show: false,
+    })
+  },
+  onCancel() {
+    this.setData({
+      show: false,
+    })
+  },
+  async setUser() {
+    const result = await getUserInfo();
+    if (result.code !== OK) {
+      const user = wx.getStorageSync('user')
+      this.setData({ user: user })
+      return;
+    }
+    this.setData({ user: result.data })
+    wx.setStorageSync('user', result.data)
+  },
+  async recharge() {
+    const { user, money, meter, tenement, park } = this.data;
+    if (!user || !user.id) {
+      alertInfo("请先登录")
+      return
+    }
+    if (!money) {
+      alertInfo("请先输入金额")
+      return;
+    }
+    if (!meter?.code) {
+      alertInfo("没有选择表计")
+      return;
+    }
+    if (money < 0.01) {
+      alertInfo("最少为1分")
+      return
+    }
+    // wx.navigateTo({
+    //   url: `/pages/rechargeWay/index?money=${money}&address=${meter.address}&id=${meter?.id}&tenement=${tenement?.id}&park=${park.id}`,
+    // })
+    this.setData({ rechargeVisible: true })
+  },
+  async getMeters({ id }) {
+    const { code, message, data } = await getTenementMeterList(id);
+    if (code !== OK) {
+      alertInfo(message)
+      this.setData({ meterList: [], meter: {} })
+      wx.setStorageSync('meter', {})
+      return;
+    }
+    this.setData({
+      meterList: data || [],
+      meter:  (data?.[0] || {})
+    })
+    // if (!storageMeter) {
+      wx.setStorageSync('meter', data?.[0] || {} )
+    // }
+  },
+  changeMoney(e) {
+    const { money } = e.currentTarget.dataset;
+    this.setData({
+      money: money
+    })
+  },
+  onChangeMoney(e) {
+    this.setData({ money: e.detail })
+  },
+  onCloseRechargeWay() {
+    this.setData({ rechargeVisible: false })
+  },
+  
+  onSelectRechargeWay(e) {
+    const that = this;
+    switch(e.detail.name) {
+      case "对公支付":
+        alertInfo("开发中")
+        break;
+      default:
+        loadingFunc(async () => {
+          await that.wxRecharge();
+        })
+        break;
+    }
+  },
+  jumpToRecord() {
+    wx.navigateTo({
+      url: '/pages/rechargeRecord/index',
+    })
+  },
+  jumpToOrder() {
+    // alertInfo("尚未完成")
+    wx.navigateTo({
+      url: '/pages/billList/index',
+    })
+  },
+  jumpToElectric() {
+    wx.navigateTo({
+      url: '/pages/electricQuery/index',
+    })
+  },
+  jumpToInvoice() {
+    wx.navigateTo({
+      url: '/pages/invoiceList/index',
+    })
+  },
+  async wxRecharge() {
+    const { money, meter, tenement, park } = this.data;
+    const that = this;
+    const { code, message, data } = await requestRecharge({ money: Number(money), id: meter?.id, tenement: tenement?.id, park: park?.id })
+    if (code !== OK) {
+      alertInfo(message)
+      return;
+    }
+    wx.requestPayment({
+      timeStamp: data?.time,
+      nonceStr: data?.nonceStr,
+      package: "prepay_id=" + data?.prepay_id,
+      paySign: data?.paySign,
+      signType: 'RSA',
+      success: (res) => {
+        alertSuccess("充值成功")
+        that.setData({
+          money: null
+        })
+      },
+      fail: (res) => {
+        console.log('fail', res)
+        alertInfo("请稍后重试")
+      },
+      complete: (res) => {
+        console.log('complete')
+        that.handleGetMeterDetail(meter.id)
+      }
     })
   },
   /**
@@ -40,7 +210,7 @@ Page({
    * 生命周期函数--监听页面显示
    */
   onShow() {
-
+    this.setUser();
   },
   chooseMoney(e) {
     const { money, index } = e.currentTarget.dataset;
@@ -69,13 +239,6 @@ Page({
       money: money,
     })
   },
-  async recharge() {
-    const { detail = {}, money } = this.data;
-    const confirmResult = await showModal({ title: "充值确认", content: `确认充值表号为${detail?.meter?.code}的表计${money}元吗？` });
-    if (!confirmResult) {
-      return;
-    }
-  },
   /**
    * 生命周期函数--监听页面隐藏
    */

pages/recharge/index.json

@@ -4,7 +4,12 @@
     "van-grid": "@vant/weapp/grid/index",
     "van-grid-item": "@vant/weapp/grid-item/index",
     "van-row": "@vant/weapp/row/index",
+    "van-button": "@vant/weapp/button/index",
+    "picker": "/components/picker/index",
+    "van-field": "@vant/weapp/field/index",
+    "van-action-sheet": "@vant/weapp/action-sheet/index",
     "van-col": "@vant/weapp/col/index"
   },
-  "navigationBarTitleText": "充值"
+  "navigationBarTitleText": "充值",
+  "navigationStyle": "custom"
 }

pages/recharge/index.wxml

@@ -1,76 +1,77 @@
-<!--pages/recharge/index.wxml-->
+<navigator title="充值" canBack="true" />
-
+<view class="rechargeWrapper">
-<view class="wrapper">
+  <view class="card">
-  <!-- <van-grid column-num="2" center="{{false}}">
+    <view class="cardTop">
-    <van-grid-item icon="photo-o" text="文字" use-slot>
+      <view class="cardTopLeft">
-      <view>
+        <view wx:if="{{user.id}}"> {{  tenement.shortName}} - {{ meter.address }} </view>
-        <view class="gridTitle"> 充值表号： </view>
+        <view wx:else> -- </view>
-        <view class="gridContent"> {{ detail.meter.code }} </view>
       </view>
-    </van-grid-item>
+      <van-button type="info" size="small" plain="{{true}}" class="loginBtn" bind:click="changeMeter" wx:if="{{user.id}}">
-    <van-grid-item icon="photo-o" text="文字" use-slot>
+        <van-icon name="exchange" />
-      <view>
+        切换电表
-        <view class="gridTitle"> 表计地址： </view>
+      </van-button>
-        <view class="gridContent"> {{ detail.meter.address }} </view>
     </view>
-    </van-grid-item>
+    <view class="cardContent">
-    <van-grid-item icon="photo-o" text="文字" use-slot>
+      <view class="cardItem">
-      <view>
+        <view class="cardItemLabel"> 电表编号： </view>
-        <view class="gridTitle"> 剩余金额： </view>
+        <view class="cardItemValue" wx:if="{{user.id}}"> {{meter.code}} </view>
-        <view class="gridContent"> {{ detail.money }} </view>
+        <view class="cardItemValue" wx:else> -- </view>
       </view>
-    </van-grid-item>
+      <view class="cardItem">
-    <van-grid-item icon="photo-o" text="文字" use-slot>
+        <view class="cardItemLabel"> 电表地址： </view>
-      <view>
+        <view class="cardItemValue" wx:if="{{user.id}}"> {{meter.address}} </view>
-        <view class="gridTitle"> 公司名称： </view>
+        <view class="cardItemValue" wx:else> -- </view>
-        <view class="gridContent"> {{ detail.tenement.name }} </view>
       </view>
-    </van-grid-item>
+      <view class="cardItem">
-  </van-grid> -->
+        <view class="cardItemLabel"> 电表余额： </view>
-  <van-row gutter="10">
+        <view class="cardItemValue" style="position: relative;">
-    <van-col span="12">
+          <view class="text"  wx:if="{{user.id}}"> {{meter.money}} </view>
-      <view class="title">充值表号：</view>
+          <view class="text"  wx:else> --- </view>
-      <view class="content">{{ detail.meter.code }}</view>
+          <van-button type="info" size="small" plain="{{true}}" custom-style="position: absolute; right: 0; bottom: 0;z-index: 99;" bind:click="refreshMeter"  wx:if="{{user.id}}">
-    </van-col>
+            <van-icon name="replay" />
-    <van-col span="12">
+            刷新
-      <view class="title">表计地址：</view>
+          </van-button>
-      <view class="content">{{ detail.meter.address }}</view>
-    </van-col>
-  
-      <van-col span="12"  custom-class="colBottom">
-        <view class="title">剩余金额：</view>
-        <view class="content">{{ detail.money }}</view>
-      </van-col>
-      <van-col span="12" custom-class="colBottom">
-        <view class="title">公司名称：</view>
-        <view class="content">{{ detail.tenement.name }}</view>
-      </van-col>
-
-  </van-row>
-  <view class="moneyBoxs">
-    <view 
-      wx:for="{{defaultMoneyArray}}" 
-      class="moneyBox border radius12" 
-      style="background-color: {{moneyIndex === index ? primaryColor : ''}};" 
-      wx:key="index" 
-      bind:tap="chooseMoney" 
-      data-money="{{item}}" 
-      data-index="{{index}}"
-    > {{item}} </view>
-    <view class="moneyBox border radius12" bind:tap="custom"> 自定义 </view>
         </view>
-  <view 
+      </view>
-    class="customInput border radius12" 
+    </view>
-    wx:if="{{customFlag}}"
+  </view>
-  > 
+  <view class="recharge">
-    <input 
+    <view> 请输入金额： </view>
-      type="number" 
+    <view class="moneyBox">
-      focus 
+      <view class="money" bind:tap="changeMoney" data-money="30"> ￥30 </view>
-      placeholder="请输入要充值的金额" 
+      <view class="money" bind:tap="changeMoney" data-money="50"> ￥50 </view>
-      bindinput="onChangeCustomMoney" 
+      <view class="money" bind:tap="changeMoney" data-money="100"> ￥100 </view>
+      <view class="money" style="margin-right: 0;" bind:tap="changeMoney" data-money="200"> ￥200 </view>
+    </view>
+    <view class="moneyInput">
+      <van-field
+        value="{{ money }}"
+        placeholder="请输入充值金额"
+        border="{{true}}"
+        bind:change="onChangeMoney"
+        size="large"
+        type="digit"
       />
     </view>
+  </view>
   <view class="operate">
-    <button type="primary" bind:tap="recharge" disabled="{{!money}}"> 充值 </button>
+    <van-button color="rgb(88, 165, 141)" block bind:click="recharge">去缴费</van-button>
+  </view>
+  <view class="others">
+    <van-grid direction="horizontal" column-num="2">
+      <van-grid-item icon="balance-list-o" text="电费账单" bind:click="jumpToOrder">
+      </van-grid-item>
+      <van-grid-item icon="after-sale" text="缴费记录" bind:click="jumpToRecord" />
+      <van-grid-item icon="bar-chart-o" text="用电查询" bind:click="jumpToElectric" />
+      <van-grid-item icon="bill-o" text="去开票" bind:click="jumpToInvoice" />
+    </van-grid>
   </view>
 </view>
+
+<van-action-sheet
+  show="{{ rechargeVisible }}"
+  actions="{{ actions }}"
+  bind:close="onCloseRechargeWay"
+  bind:select="onSelectRechargeWay"
+/>
+<picker show="{{show}}" valueKey="name" columns="{{columns}}" bind:ok="onOk" bind:cancel="onCancel" type="{{pickerType}}" />

pages/recharge/index.wxss

@@ -1,62 +1,99 @@
 /* pages/recharge/index.wxss */
-.moneyBoxs {
+.rechargeWrapper {
-  margin-top: 32rpx;
+  background: linear-gradient(to bottom, var(--middle-green), #fff );
-  display: flex;
+  overflow: hidden;
-  justify-content: space-between;
+  padding-top: 30rpx;
-  align-items: center;
-  flex-wrap: wrap;
 }
 
-.moneyBox {
+.card {
-  width: 30%;
+  margin-top: 0rpx;
-  height: 140rpx;
+  margin-left: 46rpx;
-  display: flex;
+  margin-right: 46rpx;
-  justify-content: center;
+  border-radius: 30rpx;
-  align-items: center;
+  padding: 22rpx 30rpx;
-  margin-bottom: 24rpx;
+  /* background-color: rgb(173, 217, 203); */
+  background: linear-gradient(to bottom right, rgb(212, 240, 231), rgb(145, 206, 185));
 }
 
-.chooseMeter {
+.cardTop {
   display: flex;
   align-items: center;
-  margin-top: 10rpx;
 }
 
-.selectMeter {
+.cardTopLeft {
-  margin-left: 24rpx;
+  display: flex;
+  align-items: center;
+  flex: 1;
+  font-size: 33rpx;
+}
+
+.cardContent {
+  margin: 30rpx 20rpx 0;
+}
+
+.cardItem {
+  display: flex;
+  align-items: center;
+  margin-bottom: 30rpx;
+  font-size: 32rpx;
+}
+
+.cardItem:last-child {
+  margin-bottom: 12rpx;
+}
+
+.cardItemValue {
+  display: flex;
+  flex: 1;
+  align-items: center;
+}
+
+.cardItemValue .text {
+  flex: 1;
+}
+
+.recharge {
+  background: #fff;
+  padding: 20rpx 30rpx;
+  margin-top: 24rpx;
+  margin-left: 46rpx;
+  margin-right: 46rpx;
+  margin-bottom: 30rpx;
+  border-radius: 30rpx;
 }
 
 .operate {
-  margin-top: 24rpx;
+  margin-left: 46rpx;
-}
+  margin-right: 46rpx;
-
-.input {
-  height: 40rpx;
-  width: 400rpx;
-  line-height: 40rpx;
-  border-radius: 20rpx;
-  padding: 12rpx 14rpx 16rpx;
-  /* border: 1rpx solid #ccc; */
-}
-
-.customInput {
-  padding: 16rpx 24rpx;
-}
-
-.gridTitle {
   margin-bottom: 24rpx;
 }
 
-.colBottom {
+
-  margin-top: 40rpx;
+
+.moneyBox {
+  display: flex;
+  justify-content: space-between;
+  margin-top: 30rpx;
 }
 
-.title {
+.money {
-  font-weight: 600;
+  flex: 1;
-  font-size: 40rpx;
+  padding: 16rpx;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border: 1rpx solid #ccc;
+  margin-right: 30rpx;
+}
+
+.moneyInput {
+  margin-top: 20rpx;
   margin-bottom: 20rpx;
 }
 
-.content {
+.others {
-  font-size: 32rpx;
+  margin-left: 46rpx;
+  margin-right: 46rpx;
+  margin-top: 10rpx;
+  margin-bottom: 40rpx;
 }