rk
2026-04-22 2e3ab7fbbb336cf11ed37b8b0a7871976d597564
small-program/shop/pages/wallet/wallet.vue
@@ -5,9 +5,158 @@
            <text class="nav-title">门店钱包</text>
         </view>
      </view>
      <view class="page-content">
         <text>钱包页面</text>
      <view class="data">
         <view class="hezi">
            <view class="hezi-a">
               <text style="margin-right: 10rpx; ">账户余额(元)</text>
               <u-icon v-if="showMoney" name="eye" color="#ffffff" size="18" @click="showMoney = !showMoney"></u-icon>
               <u-icon v-if="!showMoney" name="eye-off" color="#eeeeee" size="18" @click="showMoney = !showMoney"></u-icon>
            </view>
            <view class="hezi-b">
               <view class="hezi-b-price">
                  <text v-if="showMoney">{{(countData.balance / 100 || 0).toFixed(2)}}</text>
                  <text v-if="showMoney"></text>
                  <text  v-if="!showMoney">****</text>
               </view>
               <view class="hezi-b-btn" @click="jumpWithdraw">提现</view>
            </view>
            <view class="hezi-c">
               <view class="hezi-c-item">
                  <text class="hezi-c-item-title">待结算(元)</text>
                  <view class="hezi-c-item-price">
                     <text  v-if="showMoney">{{(countData.pendingAmount / 100 || 0).toFixed(2)}}</text>
                     <text v-if="showMoney"></text>
                     <text  v-if="!showMoney">****</text>
                  </view>
               </view>
               <view class="hezi-c-item">
                  <text class="hezi-c-item-title">累计提现(元)</text>
                  <view class="hezi-c-item-price">
                     <text v-if="showMoney">{{(countData.totalWithdrawn / 100 || 0).toFixed(2)}}</text>
                     <text v-if="showMoney"></text>
                     <text  v-if="!showMoney">****</text>
                  </view>
               </view>
            </view>
         </view>
         <view class="tx">
            <text v-if="showMoney">提现中:¥{{(countData.withdrawingAmount / 100 || 0).toFixed(2)}}</text>
            <text v-if="!showMoney">提现中:****</text>
         </view>
      </view>
      <view class="box-list">
         <view class="item">
            <view class="item-date">
               <view class="item-date-top">
                  <view class="item-date-top-left" @click="show1 = true">
                     <text>{{startDate || defaultStartDate}} 至 {{endDate || defaultEndDate}}</text>
                     <u-icon name="arrow-down" color="#222222" size="13"></u-icon>
                  </view>
                  <view class="sele" :style="'width:'+wordsWidth+'rpx;'" @click="openShow()">
                     <text>{{words}}</text>
                     <u-icon name="arrow-down" color="#222222" size="16"></u-icon>
                  </view>
               </view>
               <view class="item-date-bottom">
                  <text>收入:¥{{(countDataList.totalIncome || 0).toFixed(2)}}</text>
                  <text>支出:¥{{(countDataList.totalExpense || 0).toFixed(2)}}</text>
               </view>
            </view>
            <view class="item-list">
               <view class="item-list-item"  v-for="(item, index) in dataList" :key="index" @click="jumpDetail(item)">
                  <view class="image">
                     <image  v-if="item.type === 0" src="/static/icon/ic_shouru@2x.png" mode="widthFix"></image>
                     <image  v-if="item.type === 1" src="/static/icon/ic_tixian@2x.png" mode="widthFix"></image>
                     <image  v-if="item.type === 2" src="/static/icon/ic_tuikuan@2x.png" mode="widthFix"></image>
                  </view>
                  <view class="info">
                     <view class="info">
                        <view class="info-a">
                           <view class="info-a-label">
                           {{item.type === 0 ? '完成订单' : item.type === 1 ? '提现支出' : item.type === 2 ? '提现退回' : ''}}
                           <template  v-if="item.type === 1">
                              <text style="color: #FF0020;"  v-if="item.withdrawStatus == 2">未通过</text>
                              <text style="color: #004096" v-else-if="item.withdrawStatus == 1">已通过</text>
                              <text style="color: #FF0020;" v-else>审核中</text>
                           </template>
                           </view>
                           <view class="info-a-price">
                              <text>{{item.type==1?'-':'+'}}{{(item.num ||0).toFixed(2)}}</text>
                              <text></text>
                           </view>
                        </view>
                        <view class="info-b">
                           <text>订单编号:{{item.orderNo || ''}}</text>
                        </view>
                        <view class="info-b">
                           <text>{{item.createTime || ''}}</text>
                        </view>
                     </view>
                  </view>
               </view>
               <view v-if="!hasNext" class="nomore">已加载全部</view>
            </view>
         </view>
      </view>
      <!-- 筛选 -->
      <u-popup :show="show" mode="bottom" :safeAreaInsetBottom="false" round="15" :closeable="true" @close="show = false">
         <view class="sear">
            <view class="sear-title">筛选</view>
            <view class="sear-item">
               <view class="sear-item-label">收支类型</view>
               <view class="sear-item-list">
                  <view @click="checkActive(0)" :class="tempActive == 0?'sear-item-list-item active':'sear-item-list-item'">全部</view>
                  <view @click="checkActive(1)" :class="tempActive == 1?'sear-item-list-item active':'sear-item-list-item'">收入</view>
                  <view @click="checkActive(2)" :class="tempActive == 2?'sear-item-list-item active':'sear-item-list-item'">支出</view>
                  <view style="width: 216rpx; height: 0;"></view>
               </view>
            </view>
            <view class="sear-item">
               <view class="sear-item-label">交易类型</view>
               <view class="sear-item-list">
                  <view  @click="checkType(0)" :class="tempType == 0?'sear-item-list-item active':'sear-item-list-item'">全部</view>
                  <view  @click="checkType(1)" :class="tempType == 1?'sear-item-list-item active':'sear-item-list-item'">订单结算</view>
                  <view  @click="checkType(2)" :class="tempType == 2?'sear-item-list-item active':'sear-item-list-item'">提现</view>
                  <view  @click="checkType(4)" :class="tempType == 4?'sear-item-list-item active':'sear-item-list-item'">提现退回</view>
                  <view style="width: 216rpx; height: 0;"></view>
               </view>
            </view>
            <view class="sear-footer">
               <view class="sear-footer-btn1" @click="comfirm(false)">重置</view>
               <view class="sear-footer-btn2" @click="comfirm(true)">确认</view>
            </view>
         </view>
      </u-popup>
      <u-popup :show="show1" mode="bottom" :safeAreaInsetBottom="false"  round="15"  @close="comfirmDate(false)">
         <view class="sear" style="min-height: 500rpx;">
            <view style="display: flex;justify-items: center;align-items: flex-end;text-align: center;">
               <view style="display: flex; flex-direction: column;text-align: center; flex: 1;">
                  <view class="picker3">开始时间</view>
                  <picker :value="tempStartDate" @change="bindChange1" mode="date">
                     <view class="picker2" :class="{ 'picker2-empty': !tempStartDate }">
                        {{ tempStartDate || '请选择开始时间' }}
                     </view>
                  </picker>
               </view>
               <view style="flex-shrink: 0; width: 50rpx;">
                  <view class="picker3"></view>
                  <view class="picker3">至</view>
               </view>
               <view style="display: flex; flex-direction: column;text-align: center; flex: 1;">
                  <view class="picker3">结束时间</view>
                  <picker :value="tempEndDate" @change="bindChange2" mode="date">
                     <view class="picker2" :class="{ 'picker2-empty': !tempEndDate }">
                           {{ tempEndDate || '请选择结束时间' }}
                        </view>
                     </picker>
               </view>
            </view>
             <view class="sear-footer">
               <view class="sear-footer-btn1" @click="comfirmDate(false)">重置</view>
               <view class="sear-footer-btn2" @click="comfirmDate(true)">确认</view>
            </view>
         </view>
      </u-popup>
      <custom-tabbar></custom-tabbar>
   </view>
</template>
@@ -22,39 +171,646 @@
      },
      computed: {
         ...mapState(['statusbarHeight'])
      },
      data() {
         return {
            currentPage:1,
            total:0,
            active:0,
            wordsWidth:250,
            tempActive :0,
            type:0,
            words:'全部',
            tempType :0,
            dateType :0,
            dataList:[],
            startDate:null,
            endDate:null,
            defaultStartDate:null,
            defaultEndDate:null,
            showMoney:false,
            countData:{},
            countDataList:{},
            hasNext:true,
            show: false,
            show1:false,
            year:null,
            tempYear:null,
            month:null,
            tempMonth:null,
            tempStartDate:null,
            tempEndDate:null,
         }
      },
      onLoad() {
         this.active=0
         this.wordsWidth=250
         this.words='全部'
         this.tempActive=0
         this.dateType=0
         this.countData={}
         this.tempStartDate=null
         this.tempEndDate=null
         this.countDataList={}
         this.show = false
         this.initDateStr()
         uni.$on('accountListReload', this.getFirstPageData())
      },
      methods:{
         bindChange1 (e) {
            this.tempStartDate = e.detail.value || null
         },
         bindChange2 (e) {
            this.tempEndDate= e.detail.value || null
         },
         formatter(type, value) {
                if (type === 'year') {
                    return `${value}年`
                }
                if (type === 'month') {
                    return `${value}月`
                }
                return value
            },
         getShopPage() {
            if(this.loading || !this.hasNext){
               return
            }
            this.loading=true
            if(this.currentPage == 1){
               this.hasNext = true
               this.dataList=[]
            }
            this.$u.api.shopPage({
               capacity: 10,
               model: {
                  startTime: this.startDate || this.defaultStartDate,
                  endTime: this.endDate || this.defaultEndDate,
                  type: this.active === 1?0:(this.active===2?1:''),
                  objType: this.type === 1?16:( this.type === 2?17:( this.type === 3?25: (this.type === 4?1: ''))),
               },
               page: this.currentPage
            }).then(res => {
               if (res.code == 200) {
                  this.dataList.push(...res.data.records)
                  this.total = res.data.total
                  this.currentPage = this.currentPage+1
                  if (this.dataList.length >= res.data.total) {
                     this.hasNext = false
                  } else {
                     this.hasNext = true
                  }
               }
            })
         },
         getShopSummary() {
            this.$u.api.shopSummary({
               startTime: this.startDate || this.defaultStartDate,
               endTime: this.endDate || this.defaultEndDate,
               type: this.active === 1?0:(this.active===2?1:''),
               objType: this.type === 1?16:( this.type === 2?17:( this.type === 3?25: (this.type === 4?1: ''))),
            }).then(res=>{
               if(res.code == 200){
                  this.countDataList = res.data
               }
            })
         },
         // 获取门店钱包统计
         getShopStatistics(){
            this.$u.api.shopStatistics({}).then(res=>{
               if(res.code == 200){
                  this.countData = res.data
               }
            })
         },
         comfirmDate(flag){
            if (flag) {
               if(new Date(this.tempEndDate+" 00:00:00").getTime() < new Date(this.tempStartDate+" 00:00:00").getTime()){
                  return uni.showToast({
                     title:'日期范围不正确',
                     icon:'error'
                  })
               }
               this.startDate =this.tempStartDate
               this.endDate =this.tempEndDate
            } else {
               this.startDate = null
               this.endDate = null
               this.tempStartDate = this.defaultStartDate
               this.tempEndDate = this.defaultEndDate
            }
            this.getFirstPageData()
            this.show1=false
         },
         openShow(){
            this.tempActive =this.active
            this.tempType =this.type
            this.show=true
         },
         comfirm(flag){
            if(flag){
               this.active = this.tempActive
               this.type = this.tempType
               this.show = false
               this.wordsWidth = 250
               if(this.active === 0 && this.type === 0){
                  this.words = '全部'
               }else {
                  let t1 = this.active === 1 ? '收入 ':(this.active === 2 ? '支出 ' : '');
                  let t2 = this.type === 1 ? '订单结算' : (this.type === 2 ? '提现': (this.type === 3 ? '订单结算退回' : (this.type === 4 ? '提现退回' : '')))
                  if(t1 !='' && t2 !=''){
                     this.wordsWidth = 350
                  }
                  this.words = t1 + t2
               }
               this.getFirstPageData()
            }else{
               this.tempActive = 0
               this.tempType =0
            }
         },
         formattedDateTime(currentDate) {
              const year = currentDate.getFullYear();
              const month = (currentDate.getMonth() + 1).toString().padStart(2, '0'); // 月份从 0 开始,需要加 1,并补齐两位
              const day = currentDate.getDate().toString().padStart(2, '0'); // 补齐两位
              const formattedDate = `${year}-${month}-${day}`;
              console.log(formattedDate); // 输出格式化后的日期,例如 "2023-10-24"
              return formattedDate;
         },
         initDateStr(){
            const now = new Date()
            const firstDay = new Date(now.getFullYear(), now.getMonth(), 1)
            const defaultStart = this.formattedDateTime(firstDay)
            const defaultEnd = this.formattedDateTime(now)
            this.defaultStartDate = defaultStart
            this.defaultEndDate = defaultEnd
            this.startDate = null
            this.endDate = null
            this.getShopStatistics()
            this.getShopSummary()
            this.getShopPage()
         },
         checkActive(index){
            this.tempActive =index
         },
         checkType(index){
            this.tempType =index
         },
         getFirstPageData(){
            this.currentPage = 0
            this.hasNext=true
            this.total=0
            this.dataList=[]
            this.getShopPage()
         },
         jumpWithdraw(){
            uni.navigateTo({
               url: '/shop/pages/withdraw/withdraw'
            })
         },
         jumpDetail(item){
            if(item.objType == 17 ){
               uni.navigateTo({
                  url: '/shop/pages/withdrawal-details/withdrawal-details?id='+item.objId
               })
            }
         }
      }
   }
</script>
<style lang="scss" scoped>
   .wallet-page {
      min-height: 100vh;
      background: #f8f8f8;
<style>
   .picker-view {
      width: 750rpx;
      height: 600rpx;
      margin-top: 20rpx;
   }
   .nav-bar {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      background: #ffffff;
      z-index: 100;
   .picker-item {
      line-height: 72rpx;
      text-align: center;
   }
   .nav-content {
      height: 44px;
      display: flex;
      align-items: center;
      justify-content: center;
   .picker2{
      line-height: 72rpx;
      text-align: center;
      background: rgba(0,64,150,0.1) !important;
      border-radius: 8rpx;
      font-weight: 400;
      font-size: 28rpx;
      color: #004096 !important;
   }
   .nav-title {
      font-size: 34rpx;
      font-weight: 600;
   .picker2-empty{
      background: #F7F7F7 !important;
      color: #999999 !important;
   }
   .picker3{
      line-height: 72rpx;
      text-align: center;
      border-radius: 8rpx;
      font-weight: 400;
      font-size: 28rpx;
      color: #333333;
   }
</style>
   .page-content {
      padding-top: calc(44px + 44px);
<style lang="scss" scoped>
   .wallet-page {
      width: 100%;
      min-height: 100vh;
      background: #f8f8f8;
      .nav-bar {
         position: fixed;
         top: 0;
         left: 0;
         right: 0;
         background: #ffffff;
         z-index: 100;
         .nav-content {
            height: 44px;
            display: flex;
            align-items: center;
            justify-content: center;
            .nav-title {
               font-size: 34rpx;
               font-weight: 600;
               color: #333333;
            }
         }
      }
      .sear {
         width: 100%;
         padding: 30rpx;
         box-sizing: border-box;
         .sear-title {
            width: 100%;
            text-align: center;
            font-weight: 500;
            font-size: 32rpx;
            color: #111111;
         }
         .sear-item {
            width: 100%;
            display: flex;
            flex-direction: column;
            margin-top: 48rpx;
            .sear-item-label {
               font-weight: 500;
               font-size: 32rpx;
               color: #111111;
            }
            .sear-item-list {
               margin-top: 30rpx;
               display: flex;
               align-items: center;
               justify-content: space-between;
               flex-wrap: wrap;
               .active {
                  background: rgba(0,64,150,0.1) !important;
                  color: #004096 !important;
               }
               .active1 {
                  border-bottom: 2rpx solid #004096 !important;
                  color: #004096 !important;
               }
               .sear-item-list-item {
                  width: 216rpx;
                  height: 72rpx;
                  line-height: 72rpx;
                  text-align: center;
                  background: #F7F7F7;
                  border-radius: 8rpx;
                  font-weight: 400;
                  font-size: 28rpx;
                  color: #333333;
                  margin-bottom: 20rpx;
               }
               .sear-item-list-item1 {
                  width: 216rpx;
                  height: 72rpx;
                  line-height: 72rpx;
                  text-align: center;
                  font-weight: 400;
                  font-size: 28rpx;
                  color: #333333;
                  margin-bottom: 20rpx;
               }
            }
         }
         .sear-footer {
            width: 100%;
            height: 88rpx;
            margin-top: 80rpx;
            display: flex;
            align-items: center;
            justify-content: space-between;
            .sear-footer-btn1 {
               width: 334rpx;
               height: 88rpx;
               line-height: 88rpx;
               text-align: center;
               background: #E5E5E5;
               border-radius: 44rpx;
               font-weight: 500;
               font-size: 32rpx;
               color: #333333;
            }
            .sear-footer-btn2 {
               width: 334rpx;
               height: 88rpx;
               line-height: 88rpx;
               text-align: center;
               background: #004096;
               border-radius: 44rpx;
               font-weight: 500;
               font-size: 32rpx;
               color: #FFFFFF;
            }
         }
      }
      .box-list {
         width: 100%;
         display: flex;
         padding-bottom: 30rpx;
         flex-direction: column;
         .item {
            width: 100%;
            .item-date {
               width: 100%;
               display: flex;
               flex-direction: column;
               padding: 0 30rpx 30rpx 30rpx;
               box-sizing: border-box;
               .item-date-top {
                  width: 100%;
                  display: flex;
                  align-items: center;
                  justify-content: space-between;
                  .item-date-top-left {
                     display: flex;
                     align-items: center;
                     image {
                        width: 26rpx;
                        height: 26rpx;
                        margin-left: 12rpx;
                     }
                     text {
                        font-weight: 600;
                        font-size: 28rpx;
                        color: #222222;
                        margin-right: 8rpx;
                     }
                  }
                  .sele {
                     width: 200rpx;
                     height: 64rpx;
                     padding: 0 24rpx;
                     box-sizing: border-box;
                     background: #FFFFFF;
                     border-radius: 32rpx;
                     border: 1rpx solid #EEEEEE;
                     display: flex;
                     align-items: center;
                     justify-content: space-between;
                     margin-left: 30rpx;
                     text {
                        width: auto;
                        font-weight: 400;
                        font-size: 26rpx;
                        color: #333333;
                     }
                  }
               }
               .item-date-bottom {
                  width: 100%;
                  display: flex;
                  align-items: center;
                  margin-top: 20rpx;
                  text {
                     font-weight: 400;
                     font-size: 26rpx;
                     color: #777777;
                     &:nth-child(2) {
                        margin-left: 62rpx;
                     }
                  }
               }
            }
            .item-list {
               width: 100%;
               display: flex;
               flex-direction: column;
               padding: 0 30rpx;
               box-sizing: border-box;
               background-color: #ffffff;
               .nomore {
                  text-align: center;
                  color: #999999;
                  font-size: 30rpx;
                  font-weight: 400;
                  margin-top: 30rpx;
               }
               .item-list-item {
                  width: 100%;
                  padding: 30rpx 0;
                  box-sizing: border-box;
                  border-bottom: 1rpx solid #E5E5E5;
                  display: flex;
                  align-items: flex-start;
                  justify-content: center;
                  .image {
                     flex-shrink: 0;
                     width: 72rpx;
                     height: 72rpx;
                     border-radius: 50%;
                     overflow: hidden;
                     margin-right: 20rpx;
                     image {
                        width: 100%;
                     }
                  }
                  .info {
                     flex: 1;
                     display: flex;
                     flex-direction: column;
                     .info-a {
                        width: 100%;
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                        .info-a-label {
                           font-weight: 500;
                           font-size: 30rpx;
                           color: #222222;
                           display: flex;
                           text {
                              font-weight: 400;
                              font-size: 24rpx;
                              color: #999999;
                              margin-left: 20rpx;
                           }
                        }
                        .info-a-price {
                           display: flex;
                           align-items: baseline;
                           text {
                                 font-weight: 600;
                                 font-size: 32rpx;
                                 color: #222222;
                           }
                        }
                     }
                     .info-b {
                        width: 100%;
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                        margin-top: 12rpx;
                        text {
                           font-weight: 400;
                           font-size: 24rpx;
                           color: #999999;
                        }
                     }
                  }
               }
            }
         }
      }
      // .sele {
      //    width: 200rpx;
      //    height: 64rpx;
      //    padding: 0 24rpx;
      //    box-sizing: border-box;
      //    background: #FFFFFF;
      //    border-radius: 32rpx;
      //    border: 1rpx solid #EEEEEE;
      //    display: flex;
      //    align-items: center;
      //    justify-content: space-between;
      //    margin-left: 30rpx;
      //    text {
      //       width: auto;
      //       font-weight: 400;
      //       font-size: 26rpx;
      //       color: #333333;
      //    }
      // }
      .data {
         width: 100%;
         // padding: 20rpx 30rpx;
         padding: calc(44px + 44px) 30rpx 0 30rpx;
         box-sizing: border-box;
         .hezi {
            width: 100%;
            height: 304rpx;
            padding: 30rpx;
            box-sizing: border-box;
            background: #004096;
            border-radius: 16rpx;
            .hezi-a {
               width: 100%;
               display: flex;
               align-items: center;
               text {
                  font-weight: 400;
                  font-size: 24rpx;
                  color: rgba(255,255,255,0.7);
                  margin-right: 20rpx;
               }
            }
            .hezi-b {
               width: 100%;
               display: flex;
               align-items: center;
               justify-content: space-between;
               margin-top: 14rpx;
               .hezi-b-price {
                  display: flex;
                  align-items: baseline;
                  text {
                     &:nth-child(1) {
                        font-weight: 600;
                        font-size: 44rpx;
                        color: #FFFFFF;
                     }
                     &:nth-child(2) {
                        font-weight: 600;
                        font-size: 26rpx;
                        color: #FFFFFF;
                     }
                  }
               }
               .hezi-b-btn {
                  width: 100rpx;
                  height: 52rpx;
                  line-height: 52rpx;
                  text-align: center;
                  background: #FFFFFF;
                  border-radius: 26rpx;
                  font-weight: 500;
                  font-size: 26rpx;
                  color: #004096;
               }
            }
            .hezi-c {
               width: 100%;
               height: 138rpx;
               margin-top: 24rpx;
               display: flex;
               align-items: center;
               border-top: 1rpx solid rgba(255,255,255,0.09);
               .hezi-c-item {
                  flex: 1;
                  height: 100%;
                  display: flex;
                  flex-direction: column;
                  align-items: center;
                  justify-content: center;
                  &:first-child {
                     border-right: 1rpx solid rgba(255,255,255,0.09);
                  }
                  .hezi-c-item-title {
                     font-weight: 400;
                     font-size: 24rpx;
                     color: rgba(255,255,255,0.7);
                  }
                  .hezi-c-item-price {
                     display: flex;
                     align-items: baseline;
                     margin-top: 8rpx;
                     text {
                        &:nth-child(1) {
                           font-weight: 600;
                           font-size: 30rpx;
                           color: #FFFFFF;
                        }
                        &:nth-child(2) {
                           font-weight: 600;
                           font-size: 26rpx;
                           color: #FFFFFF;
                        }
                     }
                  }
               }
            }
         }
         .tx {
            width: 100%;
            height: 104rpx;
            background: rgba(0,64,150,0.12);
            border-radius: 16rpx;
            position: relative;
            top: -20rpx;
            font-weight: 400;
            font-size: 26rpx;
            color: #004096;
            padding: 40rpx 30rpx 0 30rpx;
            box-sizing: border-box;
         }
      }
   }
</style>