充值优化

mallApp/src/pages/home/recent.vue

@@ -30,13 +30,15 @@
                 <view class="more-options-popup" v-if="activePopupIndex === index" @click.stop>
                   <view class="popup-overlay" @click="hideMoreOptions"></view>
                   <view class="popup-content">
-                    <view class="popup-item" @click="handlePopupAction('recharge', item)">
-                      <text>{{ Number(item.balance) < 0 ? '结账' : '充值' }}</text>
+                    <view class="popup-item" @click="toRechargeClear(item)">
+                      <text>充值结账</text>
                     </view>
                     <view class="popup-item" @click="getRechargeList(item)">
                       <text>充值记录</text>
                     </view>
-
+                    <view class="popup-item" @click="hideMoreOptions()">
+                      <text>取消</text>
+                    </view>
                   </view>
                 </view>
 
@@ -193,30 +195,12 @@ export default {
       this.activePopupIndex = -1;
     },
     getRechargeList(item){
-      this.pageTo({ url:'/pages/recharge/list?account='+item.shopId+'&hdId='+item.id})
+      this.hideMoreOptions()
+      this.pageTo({ url:'/pages/recharge/list?account='+item.shopId+'&hdId='+item.id+'&hdName='+item.name})
     },
-    handlePopupAction(action, item) {
-      // 先关闭弹出菜单
-      this.hideMoreOptions();
-      
-      // 根据动作类型调用相应的方法
-      switch(action) {
-        case 'getLevelChange':
-          this.getLevelChange(item);
-          break;
-        case 'getBalanceChange':
-          this.getBalanceChange(item);
-          break;
-        case 'getSettleList':
-          this.getSettleList(item);
-          break;
-        case 'getBuyList':
-          this.getBuyList(item);
-          break;
-        case 'recharge':
-          this.recharge(item);
-          break;
-      }
+    toRechargeClear(item) {
+      this.hideMoreOptions()
+      this.recharge(item)
     }
   }
 };

mallApp/src/pages/recharge/list.vue

@@ -1,80 +1,87 @@
 <template>
-  <view class="recharge-page">
+  <view class="order-page">
     <app-tabs :tabs="tabs" :isFixed="true" :currentTab="tabIndex" @change="change" itemWidth="20%"/>
 
-    <view style="margin-left:60upx;margin-top:110upx;padding-bottom:30upx;position: relative;">
-      <DateSelect @selectDateFn="selectDateFn" defaultShowName='时间' />
-      <button class="admin-button-com mini-btn blue" style="position: absolute;right:80upx;top:-8upx;" @click="resetSearch()">重置搜索</button>
-    </view>
+			<view style="margin-left:60upx;margin-top:110upx;padding-bottom:30upx;position: relative;">
+				<DateSelect @selectDateFn="selectDateFn" defaultShowName='时间' />
+        <button class="admin-button-com mini-btn blue" style="position: absolute;right:300upx;top:-8upx;" @click="selGhs()">{{ hdName==''?'选花店':hdName }}</button>
+        <button class="admin-button-com mini-btn blue" style="position: absolute;right:80upx;top:-8upx;" @click="resetSearch()">重置搜索</button>
+			</view>
 
     <block v-if="!$util.isEmpty(list.data)">
-      <view class="recharge_list">
-        <RechargeItem v-for="(item, index) in list.data" :key="index" :info="item" @click="goToDetail"></RechargeItem>
-      </view>
+    <view class="pay_list">
+        <OrderItem v-for="(item, index) in list.data" :key="index" :info="item" @click="goToDetail"></OrderItem>
+    </view>
     </block>
     <block v-else>
-      <view>
-        <AppWrapperEmpty title="暂无数据" :is-empty="$util.isEmpty(list.data)"/>
-      </view>
+    <view>
+      <AppWrapperEmpty title="暂无数据" :is-empty="$util.isEmpty(list.data)"/>
+    </view>
     </block>
 
   </view>
 </template>
-
 <script>
 import AppTabs from "@/components/plugin/tabs";
-import RechargeItem from "./rechargeItem";
+import OrderItem from "./rechargeItem";
 import { list } from "@/mixins";
 import AppWrapperEmpty from "@/components/app-wrapper-empty";
 import { getRechargeList } from "@/api/recharge";
 import DateSelect from "@/components/module/dateSelect";
-
 export default {
   components: {
     AppWrapperEmpty,
-    RechargeItem,
+    OrderItem,
     AppTabs,
     DateSelect
   },
   mixins: [list],
   data () {
     return {
-      tabs: [
+       tabs: [
         {
           name: "全部",
           value: 0,
           key: '0'
         },
         {
-          name: "充值中",
+          name: "待付款",
           value: 0,
           key: '1'
         },
         {
-          name: "充值成功",
+          name: "待发货",
           value: 0,
           key: '2'
         },
         {
-          name: "充值失败",
+          name: "待收货",
           value: 0,
           key: '3'
+        },
+        {
+          name: "已完成",
+          value: 0,
+          key: '4'
         }
       ],
       list: {
         data: []
       },
+      supplierList: [],
       tabIndex: 0,
       status: '0',
-      refreshPage: 0,
-      searchTime: '',
-      startTime: '',
-      endTime: ''
+      refreshPage:0,
+			searchContent:'',			
+			searchTime:'',
+			startTime:'',
+      hdId:0,
+      hdName:''
     }
   },
   onReachBottom () {
     if (!this.list.finished) {
-      this.getRechargeList().then(res => {
+      this.getMyRecharge().then(res => {
         uni.stopPullDownRefresh()
       });
     } else {
@@ -83,61 +90,58 @@ export default {
   },
   onPullDownRefresh () {
     this.resetList();
-    this.getRechargeList().then(res => {
+    this.getMyRecharge().then(res => {
       uni.stopPullDownRefresh()
     })
   },
   onShow(){
     if(this.refreshPage == 1){
       this.resetList()
-      this.getRechargeList()
+      this.getMyRecharge()
       this.refreshPage = 0
     }
   },
-  onLoad() {
-    this.init()
-  },
   methods: {
+    selGhs(){
+      this.$util.pageTo({ url: "/pagesPurchase/selectGhs"})
+    },
     resetSearch(){
+      this.hdId = 0
+      this.hdName=''
       this.searchTime = ''
       this.startTime = ''
       this.endTime = ''
       this.resetList()
-      this.getRechargeList()      
+      this.getMyRecharge()      
     },
-    selectDateFn(val) {
-      this.searchTime = val.searchTime
-      this.startTime = val.startTime
-      this.endTime = val.endTime
+		selectDateFn(val) {
+			this.searchTime = val.searchTime
+			this.startTime = val.startTime
+			this.endTime = val.endTime
       this.resetList()
-      this.getRechargeList()
-    },	
+      this.getMyRecharge()
+		},	
     change(e) {
       if (this.tabIndex != e.index) {
-        uni.pageScrollTo({
-          scrollTop: 0,
-          duration: 0
-        });
+        uni.pageScrollTo({ scrollTop: 0, duration: 0 })
         this.resetList();
         this.list.finished = true;
         this.tabIndex = e.index;
         this.status = e.item.key;
-        this.getRechargeList().then(() => {
+        this.getMyRecharge().then(() => {
           this.list.finished = false;
         });
       }
     },
     init() {
-      this.getRechargeList()
+      if(this.option.hdId){
+        this.hdId = this.option.hdId?this.option.hdId:0
+        this.hdName = this.option.hdName?this.option.hdName:''
+      }
+      this.getMyRecharge()
     },
-    getRechargeList () {
-      return getRechargeList({ 
-        status: this.status,
-        page: this.list.page,
-        searchTime: this.searchTime,
-        startTime: this.startTime,
-        endTime: this.endTime
-      }).then(res => {
+    getMyRecharge () {
+      return getRechargeList({ status: this.status,page: this.list.page,searchTime: this.searchTime,startTime: this.startTime,endTime: this.endTime,hdId:this.hdId}).then(res => {
         this.completes(res)
         if (this.$util.isEmpty(res.data)){
           return false
@@ -152,11 +156,12 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.recharge-page {
+.order-page {
   .tabs {
     height: 80upx;
     line-height: 80upx;
     & > view {
+      // padding: 0 80upx;
       width: 50%;
       text-align: center;
       font-size: 28upx;
@@ -179,10 +184,63 @@ export default {
       background: #3385ff;
     }
   }
-  .recharge_list {
-    padding-top: 20upx;
+  .order_list {
+    // height: 200upx;
+    height: 100%;
+    background: #f0f2f6;
+    padding: 0 0 20upx;
+    .list_item {
+      margin: 20upx 0 0;
+      // padding-left: 20upx;
+      position: relative;
+      height: 180upx;
+      width: 100vw;
+      background: #fff;
+      display: flex;
+      align-items: center;
+      & > image {
+        margin-left: 30upx;
+        width: 120upx;
+        height: 120upx;
+        border-radius: 60upx;
+      }
+      & > .store_name {
+        margin-left: 30upx;
+        & > .store_title {
+          margin-bottom: 30upx;
+          font-size: 32upx;
+          font-weight: 700;
+          color: #333;
+        }
+        & > .accumulative {
+          font-size: 26upx;
+          color: #999;
+        }
+      }
+      & > .store_btn {
+        position: absolute;
+        right: 30upx;
+        // padding-right: 30upx;
+        & > .btn_entrance {
+          display: inline-block;
+          font-size: 26upx;
+          color: #3385ff;
+          border: 1px solid #3385ff;
+          border-radius: 8upx;
+          padding: 15upx 30upx;
+          margin-left: 30upx;
+        }
+        & > .btn_forbid {
+          border: 1px solid #999;
+          color: #999;
+        }
+      }
+    }
+  }
+  .pay_list {
+    padding-top:20upx;
     padding-bottom: 100upx;
     background-color: #f0f2f6;
   }
 }
-</style> 
+</style>

mallApp/src/pages/recharge/rechargeItem.vue

@@ -1,47 +1,46 @@
 <template>
-  <view class="recharge-item-view" @click="clickItemEvent">
+  <view class="order-item-view" @click="clickItemEvent">
     <view class="item-header">
       <view class="title">
-        <image class="icon" src="/static/images/recharge-icon.png" alt="" />
-        <text class="name">充值记录</text>
+        <image class="icon" :src="info.hdSmallAvatar" alt="" />
+        <text class="name">
+          <text v-if="info.status == 3" style="color:green;font-weight:bold;">{{ info.hdName}}</text>
+          <text v-else>{{ info.hdName}}</text>
+        </text>
       </view>
-      <view class="status" :class="getStatusClass">{{ getStatusName }}</view>
+      <view class="status" v-if="info.status == 1" style="color:green;font-weight:bold;">{{ getStatusName }} </view>
+      <view class="status" v-else-if="info.status == 2" style="color:red;font-weight:bold;font-size:30upx;">{{ getStatusName }} </view>
+      <view class="status" v-else>{{ getStatusName }} </view>
     </view>
-    <view class="item-main">
+    <view class="item-main" >
       <view class="item-info">
+
         <view class="info-row">
-          <text class="info-label">充值时间：</text>
-          <text class="info-value">{{ info.createTime ? info.createTime.substring(5, 16) : '' }}</text>
+          <text class="info-label"> 创建：</text>
+          <text class="info-value">{{ info.addTime ? info.addTime.substring(5, 16) : '' }}</text>
         </view>
 
-        <view class="info-row" v-if="info.payTime && info.payTime != '0000-00-00 00:00:00'">
-          <text class="info-label">支付时间：</text>
+        <view class="info-row" v-if="info.payTime!='0000-00-00 00:00:00'">
+          <text class="info-label"> 支付：</text>
           <text class="info-value">{{ info.payTime ? info.payTime.substring(5, 16) : '' }}</text>
         </view>
 
         <view class="info-row">
-          <text class="info-label">订单号：</text>
-          <text class="info-value">{{ info.orderSn }}</text>
+          <text class="info-label"> 单号：</text>
+          <text class="info-value">{{ info.orderSn }} </text>
         </view>
-
         <view class="info-row">
-          <text class="info-label">支付方式：</text>
-          <text class="info-value">{{ getPayMethodName }}</text>
-        </view>
-
-        <view class="info-row" v-if="info.remark">
-          <text class="info-label">备注：</text>
-          <text class="info-value">{{ info.remark }}</text>
+          <text class="info-label"> 操作：</text>
+          <text class="info-value">{{ info.staffName!=''?'商家':'自己' }} </text>
         </view>
       </view>
       <view class="item-price">
-        <view class="amount">¥{{ info.amount ? parseFloat(info.amount).toFixed(2) : '0.00' }}</view>
+          <view>¥{{ info.amount ? parseFloat(info.amount):0 }}</view>
         <text class="iconfont iconxiangyou"></text>
       </view>
     </view>
   </view>
 </template>
-
 <script>
 export default {
   props: {
@@ -49,60 +48,28 @@ export default {
       required: true
     }
   },
+  data () {
+    return {
+    };
+  },
   computed: {
     getStatusName () {
       let statusName = "";
       switch (this.info.status) {
-        case '1':
-          statusName = "充值中";
-          break;
-        case '2':
-          statusName = "充值成功";
-          break;
-        case '3':
-          statusName = "充值失败";
-          break;
-        default:
-          statusName = "未知状态";
-          break;
-      }
-      return statusName;
-    },
-    getStatusClass () {
-      let statusClass = "";
-      switch (this.info.status) {
-        case '1':
-          statusClass = "status-processing";
+        case '0':
+          statusName = "待付款";
           break;
-        case '2':
-          statusClass = "status-success";
-          break;
-        case '3':
-          statusClass = "status-failed";
-          break;
-        default:
-          statusClass = "status-default";
-          break;
-      }
-      return statusClass;
-    },
-    getPayMethodName () {
-      let methodName = "";
-      switch (this.info.payMethod) {
         case '1':
-          methodName = "微信支付";
+          statusName = "已充值";
           break;
         case '2':
-          methodName = "支付宝";
-          break;
-        case '3':
-          methodName = "余额支付";
+          statusName = "已取消";
           break;
         default:
-          methodName = "未知方式";
+          statusName = "待付款";
           break;
       }
-      return methodName;
+      return statusName;
     }
   },
   methods: {
@@ -112,112 +79,69 @@ export default {
   }
 };
 </script>
-
 <style lang="scss" scoped>
-.recharge-item-view {
+.order-item-view {
   padding: 30upx 0;
   margin-bottom: 20upx;
   width: 100%;
   background-color: #fff;
-  
   .item-header {
     display: flex;
     justify-content: space-between;
     align-items: center;
     margin-bottom: 20upx;
-    
     .title {
       display: flex;
       align-items: center;
       flex: 1;
-      
       .icon {
         margin: 0 20upx;
         width: 50upx;
         height: 50upx;
         border-radius: 25upx;
+        border-radius: 50%;
       }
-      
       .name {
         font-size: 32upx;
         font-weight: 600;
         color: #333333;
       }
     }
-    
     .status {
       flex-shrink: 0;
       margin-right: 20upx;
-      padding: 5upx 12upx;
-      border-radius: 20upx;
-      font-size: 20upx;
-      
-      &.status-processing {
-        color: #ff9500;
-        border: 1px solid #ff9500;
-        background-color: #fff7e6;
-      }
-      
-      &.status-success {
-        color: #52c41a;
-        border: 1px solid #52c41a;
-        background-color: #f6ffed;
-      }
-      
-      &.status-failed {
-        color: #ff4d4f;
-        border: 1px solid #ff4d4f;
-        background-color: #fff2f0;
-      }
-      
-      &.status-default {
-        color: #999999;
-        border: 1px solid #999999;
-        background-color: #f5f5f5;
-      }
+      color: $mainColor;
     }
   }
-  
   .item-main {
     display: flex;
     padding: 0 20upx;
     box-sizing: border-box;
     align-items: flex-end;
-    
     .item-info {
       flex: 1;
       font-size: 26upx;
-      
       .info-row {
         margin-top: 12upx;
         display: flex;
         align-items: center;
       }
-      
       .info-label {
         font-weight: 400;
         color: #999999;
-        min-width: 140upx;
       }
-      
       .info-value {
         font-weight: 400;
         color: #333333;
-        flex: 1;
       }
     }
-    
     .item-price {
       display: flex;
       align-items: center;
       flex-shrink: 0;
-      
-      .amount {
-        font-size: 32upx;
-        font-weight: 600;
-        color: #ff6b35;
-      }
-      
+      font-size: 30upx;
+      font-weight: 600;
+      color: #333333;
       .iconfont {
         font-size: 28upx;
         color: #999999;
@@ -226,4 +150,4 @@ export default {
     }
   }
 }
-</style> 
+</style>