开泵相关界面优化和充值界面

zuoxiao

2024-05-30 7123295bac789011a9dad11938997721149a35ce

开泵相关界面优化和充值界面

开泵相关界面优化和充值界面

 api/request.js

@@ -80,7 +80,7 @@
        if (code === statusCode.SUCCESS) {
          if (res.data.code !== "0001") {
            // 统一处理请求错误
            showToast(res.data.errorMsg)
            // showToast(res.data.errorMsg)
            reject(res.data)
            return
          }
@@ -102,7 +102,7 @@
          wx.hideLoading(); // 隐藏加载动画
        }

        showToast(err.errMsg)
        // showToast(err.errMsg)
        reject(err)
      }
    })

 app.js

@@ -14,7 +14,7 @@
    })
  },
  globalData: {
    sessionId:'2023111514251400001',
    sessionId:'2024042414041300006',
    userInfo: null,
    userId:"",
    userCode:"",

 app.wxss

@@ -8,6 +8,7 @@
  box-sizing: border-box;
} 
.noMore-View {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;

 pages/home/home.js

@@ -74,6 +74,11 @@
    //当开阀成功后调用刷新
    console.log("onLoad：" + options.param);
    if(options.param){
      wx.showToast({
        title: '开泵成功',
        icon: 'success',
        duration: 2000
      })
      getOpenList() ;
    }
  },
@@ -131,13 +136,7 @@
    });
    console.log(this.data.isRefreshing);
    // 数据请求完成后，停止下拉刷新的动画
    var self = this;
    setTimeout(function () {
      self.setData({
        isWXRefreshing: false, // 将triggered属性设置为false，表示下拉刷新已完成
      })
      console.log('下拉刷新已完成');
    }, 3000);
    this.getOpenList();
  },

  /**
@@ -233,10 +232,11 @@
      this.setData({
        listData: data.content,
        isRefreshing: false, // 将triggered属性设置为false，表示下拉刷新已完成
        isWXRefreshing: false, // 将triggered属性设置为false，表示下拉刷新已完成
      })
    }).catch(err => {
      // 错误回调
      console.error('Error:', err);
      
      this.setData({
        isRefreshing: false, // 将triggered属性设置为false，表示下拉刷新已完成
      })

 pages/home/home.wxml

@@ -46,7 +46,7 @@
      <view class="dot"></view>
    </view>
    <view class="scroll-bg">
      <view class="list-item" wx:for="{{listData}}" wx:for-item="item" wx:for-index="index">
      <view  wx:if="{{listData.length > 0}}" class="list-item" wx:for="{{listData}}" wx:for-item="item" wx:for-index="index">
        <view class="item-left">
          <!-- <image class="item-img" src="/images/pipeline.svg" /> -->
          <text>{{item.intakeNum}}</text>
@@ -57,6 +57,10 @@
        </view>
      </view>
    </view>
    <view wx:if="{{listData.length === 0}}" class="noMore-View">
      <image class="noMore-img" src="/images/no_more.svg" />
      <text class="noMore-text">没有数据</text>
    </view>
  </scroll-view>
  <t-dialog class="t-dialog" visible="{{showConfirm}}" content="确认关闭{{waterIntakeName}}吗？" confirm-btn="{{ { content: '确认', variant: 'base', theme: 'danger' } }}" close-on-overlay-click="false" cancel-btn="取消"  bind:confirm="confirmDialog" bind:cancel="closeDialog" />


 pages/home/home.wxss

@@ -215,8 +215,8 @@
  /* 按钮圆角 */
  padding-left: 20rpx;
  padding-right: 20rpx;
  padding-top: 5rpx;
  padding-bottom: 5rpx;
  padding-top: 10rpx;
  padding-bottom: 10rpx;
}

.refresh-view {

 pages/openCard/openCard.js

@@ -11,57 +11,27 @@
  data: {
    intakeId: 0,

    allCardPoints: [{
        id: 511111111,
        balance: '30',
        state: 1
      },
      {
        id: 411111111,
        balance: '30',
        state: 0
      },
      {
        id: 31111111111,
        balance: '30',
        state: 1
      },
      {
        id: 2,
        balance: '30',
        state: 1
      },
      {
        id: 1,
        balance: '30',
        state: 1
      },
      {
        id: 0,
        balance: '30',
        state: 1
      },
    ] // 常用取水口数据
    allCardPoints: [] // 所有虚拟卡
  },
  openValva(event) {
    const {
      item
    } = event.currentTarget.dataset; // 获取当前点击的 item
    if (item.state === 1) {
    if (item.inUse === 0) {
      // 在页面加载时显示加载动画
      wx.showLoading({
        title: '正在开泵请稍后...', // 加载提示文字
        mask: true // 是否显示透明蒙层，防止触摸穿透，默认为 false
      });
      this.postOpenValva();
      this.postOpenValva(item.vcId);
    }
  },
  //开泵通信
  postOpenValva() {
  postOpenValva(vcId) {
    const app = getApp();
    const data = {
      intakeId: this.data.intakeId, //取水口ID
      vcId: '2023122618460900006', //虚拟卡ID
      vcId: vcId, //虚拟卡ID
      userType: 2, //用户类型1-平台，2-App
      operator: app.globalData.sessionId //操作员
    };
@@ -69,7 +39,7 @@
      url: "comRes/receive",
      data: data
    }).then(response => {
   
    
      // 处理成功响应
      console.log('请求成功:', response);
      // 加载完成后隐藏加载动画
@@ -97,6 +67,7 @@
      intakeId
    })
    console.log('intakeId:' + this.data.intakeId);
    this. getCardList();
  },

  /**
@@ -146,5 +117,26 @@
   */
  onShareAppMessage() {

  },
  //获取虚拟卡列表
  getCardList(){
    get({url:'https://d4x9787456.vicp.fun/sell/virtual_card/get', data: {
      operator: getApp().globalData.sessionId
    }})
    .then((data) => {
      if(data.success&&data.code==="0001"){
        this.setData({
          allCardPoints:  data.content
        });
      }else{
        wx.showToast({
          title: data.msg,
        })
      }
      console.log('Failed to add item:');
    })
    .catch((error) => {
      console.error('Failed to add item:', error);
    });
  }
})

 pages/openCard/openCard.wxml

@@ -3,18 +3,18 @@

  <scroll-view class="list-container" scroll-y="true" scroll-x="false">
    <block wx:for="{{allCardPoints}}" wx:key="index">
      <view class="{{item.state===1?'item':'item-gray'}}">
      <view class="{{item.inUse===0?'item':'item-gray'}}">
        <view class="item-card">
          <text>卡编号：</text>
          <text>{{item.id}}</text>
          <text>{{item.vcNum}}</text>
        </view>
        <view class="item-bottom">
          <image class="item-balance-img" src="/images/balance.svg" />
          <view class="item-balance">
            <text class="item-balance-text">{{item.balance}}</text>
            <text class="item-balance-text">{{item.money}}</text>
            <text class="item-balance-text-yuan">元</text>
          </view>
          <text class="{{item.state===1?'item-button':'item-button-gray'}}" bind:tap="openValva" data-item="{{item}}">{{item.state === 1 ? '选择' : '使用中'}}</text>
          <text class="{{item.inUse===0?'item-button':'item-button-gray'}}" bind:tap="openValva" data-item="{{item}}">{{item.inUse===0 ? '选择' : '使用中'}}</text>
        </view>
      </view>
    </block>

 pages/openCard/openCard.wxss

@@ -19,8 +19,8 @@
}

.item-balance-img {
  width: 60rpx;
  height: 50rpx;
  width: 50rpx;
  height: 40rpx;
}

.item-bottom {
@@ -42,7 +42,7 @@
.item-balance-text {
  color: #fff;
  font-size: 50rpx;
  margin-left: 10rpx;
  margin-left: 5rpx;
}

.item-button {
@@ -56,10 +56,10 @@
  color: white;
  padding-left: 40rpx;
  padding-right: 40rpx;
  padding-bottom: 8rpx;
  padding-top: 8rpx;
  padding-bottom: 10rpx;
  padding-top: 10rpx;
  border-radius: 30rpx;
  font-size: 40rpx;
  font-size: 35rpx;
  border: none;
}

@@ -74,10 +74,10 @@
  color: #FF6A6A;
  padding-left: 40rpx;
  padding-right: 40rpx;
  padding-bottom: 8rpx;
  padding-top: 8rpx;
  padding-bottom: 10rpx;
  padding-top: 10rpx;
  border-radius: 30rpx;
  font-size: 40rpx;
  font-size: 35rpx;
  border: none;
}


 pages/rechargeCard/rechargeCard.js

File was deleted

 pages/rechargeCard/rechargeCard.wxml

@@ -13,44 +13,50 @@
  </view>

  <!-- 虚拟卡 -->
  <scroll-view class="list-container" wx:if="{{currentTab === 0}}" scroll-y="true" scroll-x="false" style="width: 713rpx; height: 465rpx; display: block; box-sizing: border-box">
    <block wx:for="{{allCardPoints}}" wx:key="index">
      <view class="{{item.state===1?'item':'item-gray'}}">
  <scroll-view class="list-container" wx:if="{{currentTab === 0}}" scroll-y="true" scroll-x="false">
    <block wx:if="{{allCardPoints.length > 0}}" wx:for="{{allCardPoints}}" wx:key="index">
      <view class="{{item.inUse===0?'item':'item-gray'}}">
        <view class="item-card">
          <text>卡编号：</text>
          <text>{{item.id}}</text>
          <text wx:if="{{item.state==0}}" class="item-card-state">使用中</text>
          <text class="item-card-text">卡编号：</text>
          <text class="item-card-text">{{item.vcNum}}</text>
          <text wx:if="{{item.inUse==1}}" class="item-card-state">使用中</text>
        </view>
        <view class="item-bottom">
          <image class="item-balance-img" src="/images/balance.svg" />
          <view class="item-balance">
            <text class="item-balance-text">{{item.balance}}</text>
            <text class="item-balance-text">{{item.money}}</text>
            <text class="item-balance-text-yuan">元</text>
          </view>
          <view class="button-view">
            <text wx:if="{{item.state==1}}" class="ruinCard" >销卡</text>
            <text wx:if="{{item.state==1}}" class="recharge">充值</text>
            <text wx:if="{{item.inUse==0}}" class="ruinCard">销卡</text>
            <text wx:if="{{item.inUse==0}}" class="recharge" bind:tap="rechargeCard">充值</text>
          </view>
        </view>
      </view>
    </block>
    <view wx:if="{{allCardPoints.length === 0}}" class="noMore-View">
      <image class="noMore-img" src="/images/no_more.svg" />
      <text class="noMore-text">没有数据</text>
    </view>
  </scroll-view>

  <!-- 水卡 -->
  <view class="all-waterIntake" wx:else>
    <view>
      <scroll-view class="list-container" scroll-y="true" scroll-x="false">
        <block wx:for="{{allWaterPoints}}" wx:key="index">
          <view class="item">
            <view class="item-left">
              <image class="item-img" src="/images/pipeline.svg" /> -->
               <text>{{item}}</text>
              <image class="item-img" src="/images/wifi_no.svg" />
            </view>
            <text class="item-button" bind:tap="choseCard" data-item="{{item}}">选择</text>
    <scroll-view class="list-container" scroll-y="true" scroll-x="false">
      <block wx:if="{{allWaterPoints.length > 0}}" wx:for="{{allWaterPoints}}" wx:key="index">
        <view class="item">
          <view class="item-card">
            <text class="item-card-text">卡编号：</text>
            <text class="item-card-text">{{item.vcNum}}</text>
            <text class="waterIntake-recharge">充值</text>
          </view>
        </block>
      </scroll-view>
    </view>
  </view> 
        </view>
      </block>
      <view wx:if="{{allWaterPoints.length === 0}}" class="noMore-View">
        <image class="noMore-img" src="/images/no_more.svg" />
        <text class="noMore-text">没有数据</text>
      </view>
    </scroll-view>

  </view>
</view>

 pages/rechargeCard/rechargeCard.wxss

@@ -23,9 +23,11 @@
.item-card {
  display: flex;
  margin-left: 10rpx;
  align-items: center;
  /* 垂直居中对齐 */
}

.item-card text {
.item-card-text {
  font-size: 35rpx;
  color: #fff;
}
@@ -66,7 +68,7 @@
  display: flex;
  margin-top: 20rpx;
  align-items: center;
  

  /* 垂直居中 */
}

@@ -106,6 +108,9 @@
  margin-left: auto;
  /* 将按钮固定在右边 */
  display: flex;
  color: rgb(238, 153, 153);
  margin-bottom: 2rpx;
  font-size: 35rpx;
}

.list-container {
@@ -117,7 +122,8 @@
.button-view {
  display: flex;
  width: 50%;
  margin-left: auto; /* 将按钮组推到右边 */
  margin-left: auto;
  /* 将按钮组推到右边 */
  justify-content: space-around;
  align-items: flex-end;
  /* 让按钮在容器中水平平分空间 */
@@ -152,4 +158,23 @@
  font-size: 30rpx;
  border: none;

}

.all-waterIntake {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  /* 确保内容居上 */
  height: 100%;
  width: 100%;
}

.waterIntake-recharge {
  margin-left: auto; /* 将按钮推到容器最右侧 */
  cursor: pointer;
  background-color: #32CD32;
  color: white;
  padding: 15rpx 30rpx;
  border-radius: 30rpx;
  font-size: 30rpx;
}

 pages/rechargeMoney/rechargMoney.js

@@ -66,5 +66,15 @@
   */
  onShareAppMessage() {

  }
  },
  handleMoneyWrapperTap: function (e) { 
    const index = e.currentTarget.dataset.index; 
    console.log(index) 
    if (index !== undefined) { 
      this.setData({ 
        activeIndex: parseInt(index), 
      }); 
    } 
 
  }, 
})

 pages/rechargeMoney/rechargMoney.json

@@ -1,3 +1,5 @@
{
  "usingComponents": {}
  "component": true,
  "navigationBarTitleText": "充值虚拟卡",
  "navigationBarTextStyle": "white"
}

 pages/rechargeMoney/rechargMoney.wxml

@@ -1,6 +1,7 @@
<!--pages/recharge/recharge.wxml--> 
<view class="base-wrapper"> 
  <!-- <view class="user-wrapper"> 
<!-- pages/recharge/recharge.wxml -->
<view class="base-wrapper">
  <!-- 
  <view class="user-wrapper"> 
    <view> 
      <text>虚拟卡编号：</text> 
      <text>{{userCode}}</text> 
@@ -9,58 +10,59 @@
      <text>余额：</text> 
      <text>{{balance}}</text> 
    </view> 
  </view>  -->
 
  <view class="money-base-wrapper"> 
    <view class="row"> 
      <view class="item{{activeIndex === 0 ? 'active' : ''}}" bindtap="handleMoneyWrapperTap" data-index="0"> 
      <view class="money-wrapper"> 
        <text class="money-number">100</text> 
        <text class="money-label">元</text> 
      </view> 
      </view> 
      <view class="item{{activeIndex === 1 ? 'active' : ''}}" bindtap="handleMoneyWrapperTap" data-index="1"> 
        <view class="money-wrapper"> 
        <text class="money-number">200</text> 
        <text class="money-label">元</text> 
      </view> 
      </view> 
      <view class="item{{activeIndex === 2 ? 'active' : ''}}" bindtap="handleMoneyWrapperTap" data-index="2"> 
        <view class="money-wrapper"> 
        <text class="money-number">300</text> 
        <text class="money-label">元</text> 
        </view> 
      </view> 
    </view> 
    <view class="row"> 
      <view class="item{{activeIndex === 3 ? 'active' : ''}}" bindtap="handleMoneyWrapperTap" data-index="3"> 
        <view class="money-wrapper"> 
        <text class="money-number">400</text> 
        <text class="money-label">元</text> 
        </view> 
      </view> 
      <view class="item{{activeIndex === 4 ? 'active' : ''}}" bindtap="handleMoneyWrapperTap" data-index="4"> 
        <view class="money-wrapper"> 
        <text class="money-number">500</text> 
        <text class="money-label">元</text> 
        </view> 
      </view> 
      <view class="item{{activeIndex === 5 ? 'active' : ''}}" bindtap="handleMoneyWrapperTap" data-index="5"> 
        <view class="money-wrapper"> 
        <text class="money-number">600</text> 
        <text class="money-label">元</text> 
        </view> 
      </view> 
    </view> 
  </view> 
 
<view class="rechage-view"> 
  <view class="rechage{{activeIndex === -1 ? 'active' : ''}}"> 
  <text >充值</text> 
  </view> 
  -->

</view> 
<view class="rechageList-view"> 
  <view class="money-base-wrapper">
    <view class="row">
      <view class="item {{activeIndex === 0 ? 'active' : ''}}" bindtap="handleMoneyWrapperTap" data-index="0">
        <view class="money-wrapper">
          <text class="money-number">100</text>
          <text class="money-label">元</text>
        </view>
      </view>
      <view class="item {{activeIndex === 1 ? 'active' : ''}}" bindtap="handleMoneyWrapperTap" data-index="1">
        <view class="money-wrapper">
          <text class="money-number">200</text>
          <text class="money-label">元</text>
        </view>
      </view>
      <view class="item {{activeIndex === 2 ? 'active' : ''}}" bindtap="handleMoneyWrapperTap" data-index="2">
        <view class="money-wrapper">
          <text class="money-number">300</text>
          <text class="money-label">元</text>
        </view>
      </view>
    </view>
    <view class="row">
      <view class="item {{activeIndex === 3 ? 'active' : ''}}" bindtap="handleMoneyWrapperTap" data-index="3">
        <view class="money-wrapper">
          <text class="money-number">400</text>
          <text class="money-label">元</text>
        </view>
      </view>
      <view class="item {{activeIndex === 4 ? 'active' : ''}}" bindtap="handleMoneyWrapperTap" data-index="4">
        <view class="money-wrapper">
          <text class="money-number">500</text>
          <text class="money-label">元</text>
        </view>
      </view>
      <view class="item {{activeIndex === 5 ? 'active' : ''}}" bindtap="handleMoneyWrapperTap" data-index="5">
        <view class="money-wrapper">
          <text class="money-number">600</text>
          <text class="money-label">元</text>
        </view>
      </view>
    </view>
  </view>

  <view class="rechage-view">
    <view class="rechage {{activeIndex === -1 ? 'active' : ''}}">
      <text>充值</text>
    </view>
  </view>
  <!-- 
  <view class="rechageList-view">
  </view> 
 
</view>
  -->
</view>

 pages/rechargeMoney/rechargMoney.wxss

@@ -122,7 +122,7 @@
 
.rechage { 
  display: flex; 
  width: 50%; 
  width: 80%; 
  background-color: #2D8BF7; 
  align-items: center; 
  justify-content: center; 
@@ -137,7 +137,7 @@
  margin-top: 45rpx; 
  align-items: center; 
  justify-content: center; 
  width: 50%; 
  width: 80%; 
  background-color: #bababa; 
  padding-top: 15rpx; 
  padding-bottom: 15rpx;