将设置页面美化成游玩扣分项目界面风格。设置项目主要是设置默认项目。项目过多时上下滑动。设置页面代码为：<template>
<view class="setting">
<view class="section-title">设置</view>
<view class="section">
<text class="subtitle">游玩项目：</text>
<scroll-view scroll-y class="project-scroll">
<view class="project-list">
<view v-for="(item, index) in projects" :key="index" class="project-item">
<text class="project-name">{{ item.name }}</text>
<text class="project-price">{{ item.price }}币</text>
</view>
</view>
</scroll-view>
</view>
<button class="confirm-btn" @click="saveSettings">确认</button>
</view>
</template>
<script>
export default {
data() {
return {
projects: [
{ id: 1, name: '漫游巴黎', price: 58 },
{ id: 2, name: '摇摇乐', price: 58 },
{ id: 3, name: '牛仔很忙', price: 38 },
{ id: 4, name: '风车蹦床', price: 58 },
{ id: 5, name: '无动力乐园', price: 58 },
{ id: 6, name: '太空探险', price: 68 },
{ id: 7, name: '水上乐园', price: 78 }
]
}
},
methods: {
saveSettings() {
uni.showToast({ title: '设置已保存', icon: 'success' });
uni.navigateBack();
}
}
}
</script>
<style scoped>
.setting {
padding: 30rpx;
}
.section-title {
font-size: 40rpx;
font-weight: bold;
margin-bottom: 40rpx;
}
.section {
margin-bottom: 60rpx;
}
.subtitle {
font-size: 32rpx;
margin-bottom: 20rpx;
display: block;
}
.project-scroll {
height: 800rpx;
}
.project-list {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 30rpx;
}
.project-item {
background-color: #f0f0f0;
border-radius: 16rpx;
padding: 30rpx;
text-align: center;
}
.project-name {
display: block;
font-size: 32rpx;
margin-bottom: 10rpx;
}
.project-price {
font-size: 28rpx;
color: #ff3b30;
}
.confirm-btn {
position: fixed;
bottom: 80rpx;
left: 40rpx;
right: 40rpx;
height: 90rpx;
background-color: #007AFF;
color: white;
font-size: 36rpx;
border-radius: 10rpx;
}
</style>游玩扣分界面代码为：<template>
<view class="play-fee">
<view class="header">
<text class="title">游玩扣费</text>
<uni-icons type="help" size="22" color="#999" />
</view>
<view class="card">
<text class="card-title">选择游玩项目</text>
<scroll-view scroll-x class="project-scroll">
<view class="project-list">
<view v-for="(item, index) in projects" :key="index"
:class="['project-item', { 'active': item.id === selectedProject.id }]"
@click="selectProject(item)">
<text class="project-name">{{ item.name }}</text>
<text class="project-price">{{ item.price }}币</text>
</view>
</view>
</scroll-view>
</view>
<view class="card">
<view class="default-section">
<checkbox-group @change="toggleDefault">
<label class="checkbox-label">
<checkbox :checked="isDefault" color="#007AFF" />
<text>游玩项目设为默认扣费项目</text>
</label>
</checkbox-group>
</view>
<view class="count-section">
<text class="section-title">扣费次数：</text>
<view class="count-selector">
<button v-for="count in countOptions" :key="count.value"
:class="['count-btn', { 'active': count.value === selectedCount }]"
@click="selectCount(count.value)">
{{ count.label }}
</button>
</view>
</view>
</view>
<view class="total-card">
<text class="total-text">扣值数量：</text>
<text class="total-amount">{{ selectedProject.price }} × {{ selectedCount }} =
{{ selectedProject.price * selectedCount }} 币</text>
</view>
<view class="card">
<view class="input-section">
<uni-icons type="search" size="22" color="#999" class="search-icon" />
<input class="member-input" placeholder="请输入卡号/手机号/会员号" />
<button class="fee-btn" @click="handleFee">扣费</button>
</view>
<view class="action-buttons">
<button class="action-btn scan-btn" @click="handleScan">
<uni-icons type="scan" size="22" color="#007AFF" />
<text>扫描会员码</text>
</button>
<button class="action-btn read-card-btn" @click="handleReadCard">
<uni-icons type="card" size="22" color="#007AFF" />
<text>读卡</text>
</button>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
projects: [{
id: 1,
name: '牛仔很忙',
price: 38
},
{
id: 2,
name: '漫游巴黎',
price: 58
},
{
id: 3,
name: '摇摇乐',
price: 58
},
{
id: 4,
name: '风车蹦床',
price: 58
},
{
id: 5,
name: '风车蹦床',
price: 60
},
{
id: 6,
name: '风车蹦床',
price: 61
},
{
id: 7,
name: '风车蹦床',
price: 77
}
],
selectedProject: {
id: 1,
name: '牛仔很忙',
price: 38
},
countOptions: [{
label: '1次',
value: 1
},
{
label: '2次',
value: 2
},
{
label: '3次',
value: 3
},
{
label: '自定义',
value: 'custom'
}
],
selectedCount: 1,
isDefault: false
}
},
methods: {
selectProject(project) {
this.selectedProject = project;
},
selectCount(count) {
this.selectedCount = count;
},
toggleDefault(e) {
this.isDefault = e.detail.value.length > 0;
},
handleFee() {
uni.showToast({
title: '扣费成功',
icon: 'success'
});
},
handleScan() {
uni.scanCode({
success: (res) => {
console.log('扫描结果:', res.result);
}
});
},
handleReadCard() {
uni.showToast({
title: '读卡功能',
icon: 'none'
});
}
}
}
</script>
<style scoped>
.play-fee {
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;
}
.card {
background: #fff;
border-radius: 24rpx;
padding: 30rpx;
margin-bottom: 30rpx;
box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.03);
}
.card-title {
font-size: 34rpx;
font-weight: bold;
color: #333;
margin-bottom: 30rpx;
display: block;
}
.project-scroll {
height: 180rpx;
}
.project-list {
display: flex;
}
.project-item {
width: 240rpx;
height: 160rpx;
background: #f8f9ff;
border-radius: 20rpx;
text-align: center;
margin-right: 25rpx;
border: 2rpx solid #f0f0f0;
transition: all 0.3s;
}
.project-item.active {
width: 200rpx;
background: linear-gradient(to right, #e6f7ff, #d1eeff);
border-color: #b3e0ff;
transform: translateY(-5rpx);
box-shadow: 0 10rpx 20rpx rgba(0, 122, 255, 0.1);
}
.project-name {
margin-top: 20rpx;
width: 200rpx;
display: block;
font-size: 32rpx;
margin-bottom: 15rpx;
color: #333;
}
.project-price {
font-size: 30rpx;
font-weight: bold;
color: #ff6b6b;
}
.default-section {
margin-bottom: 40rpx;
font-size: 32rpx;
}
.checkbox-label {
display: flex;
align-items: center;
}
.count-section {
margin-top: 20rpx;
}
.section-title {
font-size: 34rpx;
font-weight: 500;
margin-bottom: 30rpx;
display: block;
color: #333;
}
.count-selector {
display: flex;
gap: 20rpx;
}
.count-btn {
flex: 1;
height: 80rpx;
font-size: 25rpx;
background: #f8f9ff;
border-radius: 12rpx;
display: flex;
justify-content: center;
align-items: center;
border: 2rpx solid #f0f0f0;
color: #666;
}
.count-btn.active {
background: linear-gradient(to right, #007AFF, #00a8ff);
color: white;
border-color: #007AFF;
box-shadow: 0 6rpx 12rpx rgba(0, 122, 255, 0.2);
}
.total-card {
background: linear-gradient(to right, #007AFF, #00a8ff);
border-radius: 24rpx;
padding: 40rpx 30rpx;
margin-bottom: 30rpx;
box-shadow: 0 10rpx 30rpx rgba(0, 122, 255, 0.2);
}
.total-text {
font-size: 34rpx;
color: rgba(255, 255, 255, 0.9);
display: block;
margin-bottom: 15rpx;
}
.total-amount {
font-size: 46rpx;
font-weight: bold;
color: white;
}
.input-section {
display: flex;
align-items: center;
position: relative;
margin-bottom: 40rpx;
}
.search-icon {
position: absolute;
left: 25rpx;
z-index: 2;
}
.member-input {
flex: 1;
height: 100rpx;
background: #f8f9ff;
border-radius: 16rpx;
padding: 0 30rpx 0 70rpx;
font-size: 32rpx;
border: 2rpx solid #f0f0f0;
}
.fee-btn {
width: 180rpx;
height: 100rpx;
background: linear-gradient(to right, #ff6b6b, #ff8e8e);
color: white;
font-size: 34rpx;
border-radius: 16rpx;
margin-left: 20rpx;
box-shadow: 0 6rpx 12rpx rgba(255, 107, 107, 0.2);
border: none;
}
.action-buttons {
display: flex;
gap: 30rpx;
}
.action-btn {
flex: 1;
height: 100rpx;
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;
}
</style>
扫一扫
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
