chuangte_bike_newxcx/page_user/shoukuan/index.vue

<template>
  <view class="page">
    <u-navbar title="收款账户" :border-bottom="false" :background="bgc" back-icon-color="#262B37" title-color='#262B37' 
      title-size='36' height='36' id="navbar"></u-navbar>

    <view class="container">
      <!-- 添加账户按钮 -->
      <view class="add-account" @click="showAddModal">
        <u-icon name="plus-circle" size="40" color="#4C97E7"></u-icon>
        <text style="margin-top: 22rpx;">添加收款账户</text>
      </view>
      <!-- 账户列表 -->
      <view class="account-list">
        <!-- 银行卡账户 -->
        <view class="account-card" v-for="(item, index) in bankAccounts" :key="index">
          <view class="account-header">
            <u-icon name="account-fill" size="40" color="#4C97E7"></u-icon>
            <text class="account-name" v-if="item.type == 'BANK'">{{item.no}}</text>
			<text class="account-name" v-else>线下收款码</text>
          </view>
          <view class="account-detail">
            <view class="detail-item">
              <text class="label">收款人</text>
              <text class="value">{{item.name}}</text>
            </view>
            <view class="detail-item">
              <text class="label">手机号</text>
              <text class="value">{{item.mobile}}</text>
            </view>
			<image style="width: 160rpx;height: 160rpx;" v-if="item.type == 'QR'" :src="item.no" mode=""></image>
          </view>
        <view class="account-actions">
          <view class="action-btn" @click="deleteAccount(item.id)" style="color: #FF4D4F;">
            <u-icon name="trash" size="32" color="#FF4D4F"></u-icon>删除
          </view>
        </view>
        </view>
        <!-- 空状态 -->
        <view class="empty-state" v-if="bankAccounts.length === 0">
          <u-icon name="account" size="120" color="#CCCCCC"></u-icon>
          <text class="empty-text">暂无收款账户</text>
          <text class="empty-tip">点击上方按钮添加收款账户</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      bgc: {
        backgroundColor: "#fff",
      },
      bankAccounts: [
        {
          id: 1,
          name: "****",
          cardNumber: "*****",
          bankName: "*****",
          branch: "*****",
          isDefault: true
        } 
      ],
    }
  },
  onShow() {
  	this.getlist()
  },
  methods: {
	// 请求收款账户列表
	getlist(){
		this.$u.get(`/bst/account/list`).then((res) => {
			if (res.code == 200) {
				this.bankAccounts = res.rows
			}
		})
	},
	
	  // 点击去新建
    showAddModal() {
        uni.navigateTo({
        	url:'/page_user/shoukuan/addsk'
        })
    },
	// 点击提示删除
    deleteAccount(id) {
		let that = this
      uni.showModal({
        title: '提示',
        content: '确定要删除该收款账户吗？',
        success: (res) => {
          if (res.confirm) {
			this.$u.delete(`/bst/account/${id}`).then((res) => {
				if (res.code == 200) {
					this.getlist()
					uni.showToast({
					  title: '删除成功',
					  icon: 'success'
					})
				}
			})
          }
        }
      })
    }
  }
}
</script>

<style lang="scss">
page {
  background: #F7F8FA;
}

.container {
  padding: 30rpx;
}

.add-account {
  display: flex;
  justify-content: center;
  height: 90rpx;
  background: #fff;
  border-radius: 16rpx;
  margin-bottom: 30rpx;
  color: #4C97E7;
  font-size: 32rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.04);
  text {
    margin-left: 16rpx;
  }
}

.account-list {
  .account-card {
    background: #fff;
    border-radius: 16rpx;
    padding: 30rpx;
    margin-bottom: 30rpx;
    box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.04);
    
    .account-header {
      display: flex;
      align-items: center;
      margin-bottom: 30rpx;
      .account-name {
        flex: 1;
        font-size: 32rpx;
        font-weight: 600;
        color: #262B37;
        margin-left: 20rpx;
      }
      
      .account-status {
        padding: 8rpx 20rpx;
        background: #F7F8FA;
        border-radius: 20rpx;
        font-size: 24rpx;
        color: #999;
        
        &.default {
          background: #E6F0FF;
          color: #4C97E7;
        }
      }
    }
    
    .account-detail {
      .detail-item {
        display: flex;
        margin-bottom: 20rpx;
        
        .label {
          width: 120rpx;
          font-size: 28rpx;
          color: #999;
        }
        
        .value {
          flex: 1;
          font-size: 28rpx;
          color: #262B37;
        }
      }
      
      .qrcode-preview {
        margin-top: 20rpx;
        height: 200rpx;
        background: #F7F8FA;
        border-radius: 12rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        
        image {
          height: 180rpx;
          width: 180rpx;
        }
      }
    }
    
    .account-actions {
      display: flex;
      justify-content: flex-end;
      margin-top: 30rpx;
      padding-top: 20rpx;
      border-top: 1rpx solid #F0F0F0;
      
      .action-btn {
        margin-left: 40rpx;
      }
    }
  }
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80rpx 0;
  
  .empty-text {
    font-size: 32rpx;
    color: #999;
    margin-top: 20rpx;
  }
  
  .empty-tip {
    font-size: 28rpx;
    color: #CCCCCC;
    margin-top: 10rpx;
  }
}

.add-modal-content {
  padding: 40rpx;
  
  .add-option {
    display: flex;
    align-items: center;
    height: 100rpx;
    border-bottom: 1rpx solid #F0F0F0;
    font-size: 32rpx;
    color: #262B37;
    
    text {
      margin-left: 20rpx;
    }
  }
}
</style>