<template>
<view class="member-query">
<view class="header">
<text class="title">会员查询</text>
<uni-icons type="help" size="22" color="#999" />
</view>
<view class="search-card">
<view class="input-box">
<uni-icons type="search" size="22" color="#999" class="search-icon" />
<input class="search-input" placeholder="请输入卡号/手机号/会员号" />
</view>
<button class="search-btn">搜索</button>
</view>
<view class="action-buttons">
<button class="action-btn" @click="handleScan">
<uni-icons type="scan" size="22" color="#007AFF" />
<text>扫描会员码</text>
</button>
<button class="action-btn" @click="handleReadCard">
<uni-icons type="card" size="22" color="#007AFF" />
<text>读卡</text>
</button>
</view>
<view class="info-card" v-if="memberInfo">
<view class="info-header">
<text class="name">{{ memberInfo.name }}</text>
<view class="status-badge">
<text>{{ memberInfo.status }}</text>
</view>
</view>
<view class="info-grid">
<view class="info-item">
<text class="label">等级</text>
<text class="value">{{ memberInfo.level }}</text>
</view>
<view class="info-item">
<text class="label">手机</text>
<text class="value">{{ memberInfo.phone }}</text>
</view>
<view class="info-item">
<text class="label">性别</text>
<text class="value">{{ memberInfo.gender }}</text>
</view>
<view class="info-item">
<text class="label">注册时间</text>
<text class="value">{{ memberInfo.registerDate }}</text>
</view>
</view>
<view class="assets-section">
<text class="section-title">账户资产</text>
<view class="log-section">
<view class="log-header">
<text>所属门店</text>
<text>本币</text>
<text>赠币</text>
</view>
<view v-for="(log, index) in huiyuanlogs" :key="index" class="huiyuanlog-row">
<text>{{ log.name }}</text>
<text>{{ log.currency }}</text>
<text>{{ log.giftCurrency }}</text>
</view>
</view>
</view>
</view>
<view class="log-section" v-if="logs.length > 0">
<text class="section-title">会员日志</text>
<view class="log-header">
<text>序号</text>
<text>本币</text>
<text>赠币</text>
<text>备注</text>
<text>时间</text>
</view>
<view v-for="(log, index) in logs" :key="index" class="log-row">
<text>{{ log.id }}</text>
<text>{{ log.currency }}</text>
<text>{{ log.giftCurrency }}</text>
<text>{{ log.remark }}</text>
<text>{{ log.time }}</text>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
memberInfo: {
level: '普通会员',
phone: '132****3113',
gender: '男',
registerDate: '2025-07-18',
name: '张会员',
status: '状态：正常',
store: '卡皮巴拉乐园（宜兴店）',
currency: '100',
giftCurrency: '100'
},
logs: [
{ id: 1, currency: '+180', giftCurrency: '+100', remark: '游客转会员', time: '2025.7.18 14:30' },
{ id: 2, currency: '-38', giftCurrency: '0', remark: '消耗币数：牛仔很忙', time: '2025.7.19 10:15' },
{ id: 3, currency: '-38', giftCurrency: '0', remark: '消耗币数：牛仔很忙', time: '2025.7.20 15:20' }
],
huiyuanlogs: [
{ id: 1, currency: '180', giftCurrency: '100', name: '卡皮巴拉乐园（无锡宜兴店）' },
{ id: 2, currency: '38', giftCurrency: '0', name: '卡皮巴拉乐园（无锡宜兴店）' },
{ id: 3, currency: '38', giftCurrency: '0', name: '卡皮巴拉乐园（无锡宜兴店）' }
]
}
},
methods: {
handleScan() {
uni.scanCode({
success: (res) => {
console.log('扫描结果:', res.result);
}
});
},
handleReadCard() {
uni.showToast({ title: '读卡功能', icon: 'none' });
}
}
}
</script>
<style scoped>
.member-query {
padding: 30rpx;
background: #f8fcff;
min-height: 100vh;
}
.header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 40rpx;
}
.title {
font-size: 46rpx;
font-weight: bold;
color: #333;
}
.search-card {
display: flex;
background: #fff;
border-radius: 24rpx;
padding: 20rpx;
margin-bottom: 30rpx;
box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.03);
}
.input-box {
flex: 1;
position: relative;
}
.search-icon {
position: absolute;
left: 25rpx;
top: 50%;
transform: translateY(-50%);
z-index: 2;
}
.search-input {
width: 100%;
height: 90rpx;
background: #f8f9ff;
border-radius: 16rpx;
padding: 0 30rpx 0 70rpx;
font-size: 32rpx;
border: 2rpx solid #f0f0f0;
}
.search-btn {
width: 160rpx;
height: 90rpx;
background: linear-gradient(to right, #007AFF, #00a8ff);
color: white;
font-size: 32rpx;
border-radius: 16rpx;
margin-left: 120rpx;
box-shadow: 0 6rpx 12rpx rgba(0, 122, 255, 0.2);
border: none;
}
.action-buttons {
display: flex;
gap: 30rpx;
margin-bottom: 40rpx;
}
.action-btn {
flex: 1;
height: 90rpx;
background: #f8f9ff;
color: #007AFF;
font-size: 32rpx;
border-radius: 16rpx;
display: flex;
justify-content: center;
align-items: center;
border: 2rpx solid #e6f7ff;
}
.action-btn text {
margin-left: 15rpx;
}
.info-card {
background: #fff;
border-radius: 24rpx;
padding: 40rpx 30rpx;
margin-bottom: 40rpx;
box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.03);
}
.info-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 40rpx;
padding-bottom: 30rpx;
border-bottom: 2rpx solid #f8f8f8;
}
.name {
font-size: 42rpx;
font-weight: bold;
color: #333;
}
.status-badge {
background: #e6f7ff;
border-radius: 30rpx;
padding: 10rpx 25rpx;
font-size: 28rpx;
color: #007AFF;
border: 2rpx solid #b3e0ff;
}
.info-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 30rpx;
margin-bottom: 40rpx;
}
.info-item {
background: #f8f9ff;
border-radius: 16rpx;
padding: 25rpx;
border: 2rpx solid #f0f0f0;
}
.label {
font-size: 28rpx;
color: #999;
display: block;
margin-bottom: 10rpx;
}
.value {
font-size: 32rpx;
font-weight: 500;
color: #333;
}
.section-title {
font-size: 36rpx;
font-weight: bold;
color: #333;
margin-bottom: 30rpx;
display: block;
}
.assets-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20rpx;
}
.asset-item {
background: #f8f9ff;
border-radius: 16rpx;
padding: 25rpx;
text-align: center;
border: 2rpx solid #f0f0f0;
}
.asset-label {
font-size: 28rpx;
color: #999;
display: block;
margin-bottom: 15rpx;
}
.asset-value {
font-size: 36rpx;
font-weight: bold;
display: block;
}
.currency {
color: #007AFF;
}
.gift {
color: #ff6b6b;
}
.assets-section .log-header,
.assets-section .huiyuanlog-row {
grid-template-columns: 10fr 1.5fr 1.5fr; /* 调整比例 */
padding: 20rpx 30rpx; /* 增加左右内边距 */
}
.log-section {
background: #fff;
border-radius: 24rpx;
padding: 40rpx 30rpx;
box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.03);
}
.log-header, .log-row {
display: grid;
grid-template-columns: 0.8fr 1fr 1fr 2fr 1.5fr;
gap: 15rpx;
font-size: 28rpx;
padding: 20rpx 0;
}
.log-header {
font-weight: bold;
color: #333;
border-bottom: 2rpx solid #f8f8f8;
margin-bottom: 10rpx;
}
.log-row:nth-child(odd) {
background-color: #f8f9ff;
border-radius: 12rpx;
}
.log-row text:nth-child(2) {
color: #ff6b6b;
font-weight: bold;
}
</style>账户资产列表隔行设置变色
本文介绍了微信小程序中自定义的css单位rpx，这是一种能够根据屏幕宽度进行自适应的单位。详细解释了rpx的计算方式及不同设备屏幕宽度与rpx的关系。
扫一扫
1171
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
