baodeng_xcx/page_shanghu/yonghu/index.vue

<template>
  <view class="page">
    <u-navbar title="用户管理" :border-bottom="false" :background="bgc" title-color='#fff' back-icon-color="#fff"
    	title-size='36' height='50'></u-navbar>

    <!-- 搜索区域 -->
    <view class="search-area">
      <view class="store-name">
        <text>店铺名称</text>
      <u-icon name="arrow-right" color="#FF8998;" size="28"></u-icon>
      </view>
      <view class="search-box">
        <uni-icons type="search" size="16" color="#8a8a8a"></uni-icons>
        <input type="text" placeholder="请输入手机号" placeholder-style="color: #8a8a8a;" />
      </view>
    </view>

    <!-- 用户列表 -->
    <scroll-view class="user-list" scroll-y>
      <view v-for="(item, index) in userList" :key="index" class="user-card" @click="btnxq">
        <view class="user-info">
          <image class="avatar" :src="item.avatar" mode="aspectFill"></image>
          <view class="info-content">
            <view class="user-name">{{ item.name }}</view> 
            <view class="user-phone">{{ item.phone }}</view>
          </view>
        <u-icon name="arrow-right" color="#B8B8B8;" size="28"></u-icon>
        </view>
        <view class="settlement-info">
          <view class="settlement-item">
            <text class="label">最近清算时间</text>
            <text class="value">{{ item.lastSettleTime }}</text>
          </view>
          <view class="settlement-item">
            <text class="label">总充值（元）</text>
            <text class="value highlight">{{ item.totalRecharge }}</text>
          </view>
          <view class="settlement-item">
            <text class="label">累计清算（元）</text>
            <text class="value highlight">{{ item.totalSettle }}</text>
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      userList: [
        {
          avatar: 'https://ai-public.mastergo.com/ai/img_res/6b53b3077874422e48ed9a567006aefc.jpg',
          name: '微信用户',
          phone: '123****1234',
          lastSettleTime: '2025-03-23 15:25:48',
          totalRecharge: '150.23',
          totalSettle: '100.23'
        },
        {
          avatar: 'https://ai-public.mastergo.com/ai/img_res/f40036223096d51132bfe234bd5ab9ab.jpg',
          name: '微信用户',
          phone: '123****1234',
          lastSettleTime: '2025-03-23 15:25:48',
          totalRecharge: '150.23',
          totalSettle: '100.23'
        }
      ]
    }
  },
  onLoad() {
  	
  },
  onShow() {
  	
  },
  methods:{
	  // 点击跳转到详情
	  btnxq(){
		  uni.navigateTo({
		  	url:'/page_shanghu/yonghu/yonghuxq'
		  })
	  }
  },
}
</script>

<style>
page {
  height: 100%;
  background-color: #1a1b1f;
}

.page {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.nav-bar {
  height: 88rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 32rpx;
  background-color: #1a1b1f;
  border-bottom: 1px solid #2a2b30;
}

.nav-title {
  color: #ffffff;
  font-size: 16px;
  font-weight: 500;
}

.nav-left, .nav-right {
  width: 44rpx;
  height: 44rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.search-area {
  padding: 24rpx 32rpx;
  background-color: #1a1b1f;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.store-name {
  display: flex;
  align-items: center;
  font-size: 28rpx;
  color: #FF8998;
}

.search-box {
  display: flex;
  align-items: center;
  width: 540rpx;
  height: 72rpx;
  padding: 0 24rpx;
  background-color: #2a2b30;
  border-radius: 36rpx;
}

.search-box input {
  flex: 1;
  margin-left: 16rpx;
  font-size: 14px;
  color: #ffffff;
}

.user-list {
  padding: 0 32rpx;
  box-sizing: border-box;
}

.user-card {
  margin-bottom: 24rpx;
  padding: 24rpx;
  background-color: #2a2b30;
  border-radius: 16rpx;
}

.user-info {
  display: flex;
  align-items: center;
  margin-bottom: 24rpx;
}

.avatar {
  width: 80rpx;
  height: 80rpx;
  border-radius: 40rpx;
}

.info-content {
  flex: 1;
  margin-left: 24rpx;
}

.user-name {
  color: #ffffff;
  font-size: 16px;
  margin-bottom: 8rpx;
}

.user-phone {
  color: #8a8a8a;
  font-size: 14px;
}

.settlement-info {
  display: flex;
  flex-direction: column;
  gap: 16rpx;
}

.settlement-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.label {
  color: #8a8a8a;
  font-size: 14px;
}

.value {
  color: #ffffff;
  font-size: 14px;
}

.value.highlight {
  color: #ff6b84;
}
</style>