|
@@ -31,8 +31,10 @@
|
|
|
:class="{'member-selected': member.selected}"
|
|
:class="{'member-selected': member.selected}"
|
|
|
@tap="toggleMember(meal.value, member.id)">
|
|
@tap="toggleMember(meal.value, member.id)">
|
|
|
<view class="member-check" v-if="member.selected">✓</view>
|
|
<view class="member-check" v-if="member.selected">✓</view>
|
|
|
- <text class="member-avatar" :class="member._avatarCls">{{ member.nickname ? member.nickname.substring(0, 1) : '?' }}</text>
|
|
|
|
|
- <text class="member-name">{{ member.nickname || '未知' }}</text>
|
|
|
|
|
|
|
+ <view class="member-info">
|
|
|
|
|
+ <text class="member-avatar" :class="member._avatarCls">{{ member.nickname ? member.nickname.substring(0, 1) : '?' }}</text>
|
|
|
|
|
+ <text class="member-name">{{ member.nickname || '未知' }}</text>
|
|
|
|
|
+ </view>
|
|
|
</view>
|
|
</view>
|
|
|
<view class="member-empty" v-if="meal.members.length === 0">
|
|
<view class="member-empty" v-if="meal.members.length === 0">
|
|
|
<text class="member-empty-text">暂无可选的共餐人</text>
|
|
<text class="member-empty-text">暂无可选的共餐人</text>
|
|
@@ -135,7 +137,7 @@ export default {
|
|
|
this.mealTypes.forEach(function(meal) {
|
|
this.mealTypes.forEach(function(meal) {
|
|
|
getMealConfig({ date_type: self.dateType, meal_type: meal.value }).then(function(config) {
|
|
getMealConfig({ date_type: self.dateType, meal_type: meal.value }).then(function(config) {
|
|
|
if (config) {
|
|
if (config) {
|
|
|
- self.mealConfigs[meal.value] = config
|
|
|
|
|
|
|
+ self.$set(self.mealConfigs, meal.value, config)
|
|
|
}
|
|
}
|
|
|
})
|
|
})
|
|
|
})
|
|
})
|
|
@@ -169,18 +171,21 @@ export default {
|
|
|
var self = this
|
|
var self = this
|
|
|
this.saving = true
|
|
this.saving = true
|
|
|
|
|
|
|
|
- var promises = this.mealTypes.map(function(meal) {
|
|
|
|
|
|
|
+ var configs = {}
|
|
|
|
|
+ this.mealTypes.forEach(function(meal) {
|
|
|
var config = self.mealConfigs[meal.value] || {}
|
|
var config = self.mealConfigs[meal.value] || {}
|
|
|
- return saveMealConfig({
|
|
|
|
|
- date_type: self.dateType,
|
|
|
|
|
- meal_type: meal.value,
|
|
|
|
|
- participant_member_ids: JSON.stringify(config.participantMemberIds || '[]')
|
|
|
|
|
- })
|
|
|
|
|
|
|
+ configs[meal.value] = config.participantMemberIds || '[]'
|
|
|
})
|
|
})
|
|
|
|
|
|
|
|
- Promise.all(promises).then(function() {
|
|
|
|
|
|
|
+ saveMealConfig({
|
|
|
|
|
+ date_type: self.dateType,
|
|
|
|
|
+ configs: configs
|
|
|
|
|
+ }).then(function() {
|
|
|
self.saving = false
|
|
self.saving = false
|
|
|
uni.showToast({ title: '保存成功', icon: 'success' })
|
|
uni.showToast({ title: '保存成功', icon: 'success' })
|
|
|
|
|
+ setTimeout(function() {
|
|
|
|
|
+ uni.navigateBack()
|
|
|
|
|
+ }, 1000)
|
|
|
}).catch(function() {
|
|
}).catch(function() {
|
|
|
self.saving = false
|
|
self.saving = false
|
|
|
uni.showToast({ title: '保存失败', icon: 'none' })
|
|
uni.showToast({ title: '保存失败', icon: 'none' })
|
|
@@ -194,13 +199,11 @@ export default {
|
|
|
</script>
|
|
</script>
|
|
|
|
|
|
|
|
<style scoped>
|
|
<style scoped>
|
|
|
-/* ===== 页面令牌(暖灶·家的味道) ===== */
|
|
|
|
|
|
|
+/* ===== 页面令牌(品牌蓝·专业信任) ===== */
|
|
|
.meal-config-page {
|
|
.meal-config-page {
|
|
|
box-sizing: border-box;
|
|
box-sizing: border-box;
|
|
|
-}
|
|
|
|
|
-.meal-config-page {
|
|
|
|
|
min-height: 100vh;
|
|
min-height: 100vh;
|
|
|
- background: linear-gradient(180deg, #FFF7ED 0%, #FFF3E6 100%);
|
|
|
|
|
|
|
+ background: #F5F9FC;
|
|
|
overflow: hidden;
|
|
overflow: hidden;
|
|
|
}
|
|
}
|
|
|
.content {
|
|
.content {
|
|
@@ -210,101 +213,112 @@ export default {
|
|
|
overflow: hidden;
|
|
overflow: hidden;
|
|
|
}
|
|
}
|
|
|
.date-tabs {
|
|
.date-tabs {
|
|
|
- display: flex; background: #FFF1E6; border-radius: 999rpx;
|
|
|
|
|
|
|
+ display: flex; background: #E2E8F0; border-radius: 999rpx;
|
|
|
padding: 6rpx; margin-bottom: 30rpx;
|
|
padding: 6rpx; margin-bottom: 30rpx;
|
|
|
}
|
|
}
|
|
|
.tab-item {
|
|
.tab-item {
|
|
|
flex: 1; text-align: center; padding: 18rpx 0;
|
|
flex: 1; text-align: center; padding: 18rpx 0;
|
|
|
- border-radius: 999rpx; font-size: 28rpx; color: #C2410C;
|
|
|
|
|
|
|
+ border-radius: 999rpx; font-size: 28rpx; color: #64748B;
|
|
|
|
|
+ transition: all 0.2s ease;
|
|
|
}
|
|
}
|
|
|
.tab-active {
|
|
.tab-active {
|
|
|
- background: linear-gradient(135deg, #FF8C42, #FFB366);
|
|
|
|
|
|
|
+ background: linear-gradient(135deg, #5B9BD5, #8FC5E8);
|
|
|
color: #FFFFFF; font-weight: 600;
|
|
color: #FFFFFF; font-weight: 600;
|
|
|
- box-shadow: 0 4rpx 12rpx rgba(255, 140, 66, 0.3);
|
|
|
|
|
|
|
+ box-shadow: 0 4rpx 12rpx rgba(91, 155, 213, 0.3);
|
|
|
}
|
|
}
|
|
|
.meal-section {
|
|
.meal-section {
|
|
|
background-color: #FFFFFF;
|
|
background-color: #FFFFFF;
|
|
|
- border-radius: 20rpx;
|
|
|
|
|
|
|
+ border-radius: 24rpx;
|
|
|
margin-bottom: 30rpx;
|
|
margin-bottom: 30rpx;
|
|
|
overflow: hidden;
|
|
overflow: hidden;
|
|
|
- box-shadow: 0 2rpx 12rpx rgba(255, 140, 66, 0.10);
|
|
|
|
|
|
|
+ box-shadow: 0 4rpx 16rpx rgba(91, 155, 213, 0.08);
|
|
|
}
|
|
}
|
|
|
.meal-header {
|
|
.meal-header {
|
|
|
display: flex;
|
|
display: flex;
|
|
|
align-items: center;
|
|
align-items: center;
|
|
|
padding: 24rpx 30rpx;
|
|
padding: 24rpx 30rpx;
|
|
|
- border-bottom: 1rpx solid #FDE8D0;
|
|
|
|
|
|
|
+ border-bottom: 1rpx solid #E2E8F0;
|
|
|
}
|
|
}
|
|
|
.meal-icon-wrap { width: 72rpx; height: 72rpx; border-radius: 22rpx; display: flex; align-items: center; justify-content: center; margin-right: 16rpx; }
|
|
.meal-icon-wrap { width: 72rpx; height: 72rpx; border-radius: 22rpx; display: flex; align-items: center; justify-content: center; margin-right: 16rpx; }
|
|
|
-.meal-icon-breakfast { background: linear-gradient(135deg, #FFB366, #FFD48A); }
|
|
|
|
|
|
|
+.meal-icon-breakfast { background: linear-gradient(135deg, #8FC5E8, #D6EAF8); }
|
|
|
.meal-icon-lunch { background: linear-gradient(135deg, #FBBF24, #FCD34D); }
|
|
.meal-icon-lunch { background: linear-gradient(135deg, #FBBF24, #FCD34D); }
|
|
|
.meal-icon-dinner { background: linear-gradient(135deg, #A78BFA, #C4B5FD); }
|
|
.meal-icon-dinner { background: linear-gradient(135deg, #A78BFA, #C4B5FD); }
|
|
|
-.meal-count { font-size: 24rpx; color: #C2410C; }
|
|
|
|
|
|
|
+.meal-count { font-size: 24rpx; color: #5B9BD5; margin-left: auto; }
|
|
|
.meal-name {
|
|
.meal-name {
|
|
|
font-size: 28rpx;
|
|
font-size: 28rpx;
|
|
|
font-weight: 600;
|
|
font-weight: 600;
|
|
|
- color: #333;
|
|
|
|
|
|
|
+ color: #1E293B;
|
|
|
}
|
|
}
|
|
|
.member-list {
|
|
.member-list {
|
|
|
display: flex;
|
|
display: flex;
|
|
|
flex-wrap: wrap;
|
|
flex-wrap: wrap;
|
|
|
- gap: 16rpx;
|
|
|
|
|
|
|
+ gap: 20rpx;
|
|
|
padding: 24rpx 30rpx;
|
|
padding: 24rpx 30rpx;
|
|
|
}
|
|
}
|
|
|
.member-item {
|
|
.member-item {
|
|
|
box-sizing: border-box; position: relative;
|
|
box-sizing: border-box; position: relative;
|
|
|
- display: flex; flex-direction: column; align-items: center; justify-content: center;
|
|
|
|
|
- padding: 16rpx 20rpx; border: 2rpx solid #E0E0E0; border-radius: 20rpx;
|
|
|
|
|
- background: #FAFAFA; min-width: 132rpx;
|
|
|
|
|
- transition: all 0.15s ease;
|
|
|
|
|
|
|
+ display: flex; align-items: center;
|
|
|
|
|
+ padding: 16rpx 24rpx; border: 2rpx solid #E2E8F0; border-radius: 20rpx;
|
|
|
|
|
+ background: #FFFFFF; min-width: 160rpx;
|
|
|
|
|
+ transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
|
|
|
|
+}
|
|
|
|
|
+.member-info {
|
|
|
|
|
+ display: flex; align-items: center; gap: 12rpx;
|
|
|
}
|
|
}
|
|
|
.member-selected {
|
|
.member-selected {
|
|
|
- border-color: #FF8C42; border-width: 3rpx;
|
|
|
|
|
- background: #FFF5EB; box-shadow: 0 0 0 4rpx rgba(255, 140, 66, 0.18);
|
|
|
|
|
|
|
+ border-color: #5B9BD5;
|
|
|
|
|
+ background: #5B9BD5;
|
|
|
|
|
+ box-shadow: 0 4rpx 12rpx rgba(91, 155, 213, 0.3);
|
|
|
|
|
+ transform: translateY(-2rpx);
|
|
|
}
|
|
}
|
|
|
.member-check {
|
|
.member-check {
|
|
|
position: absolute;
|
|
position: absolute;
|
|
|
- top: -10rpx;
|
|
|
|
|
- right: -10rpx;
|
|
|
|
|
- width: 36rpx;
|
|
|
|
|
- height: 36rpx;
|
|
|
|
|
|
|
+ top: -8rpx;
|
|
|
|
|
+ right: -8rpx;
|
|
|
|
|
+ width: 32rpx;
|
|
|
|
|
+ height: 32rpx;
|
|
|
border-radius: 50%;
|
|
border-radius: 50%;
|
|
|
- background-color: #FF8C42;
|
|
|
|
|
- color: #FFFFFF;
|
|
|
|
|
- font-size: 22rpx;
|
|
|
|
|
- font-weight: 700;
|
|
|
|
|
|
|
+ background-color: #FFFFFF;
|
|
|
|
|
+ color: #5B9BD5;
|
|
|
|
|
+ font-size: 20rpx;
|
|
|
|
|
+ font-weight: 900;
|
|
|
display: flex;
|
|
display: flex;
|
|
|
align-items: center;
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
justify-content: center;
|
|
|
z-index: 2;
|
|
z-index: 2;
|
|
|
|
|
+ box-shadow: 0 2rpx 4rpx rgba(0,0,0,0.1);
|
|
|
}
|
|
}
|
|
|
.member-avatar {
|
|
.member-avatar {
|
|
|
- width: 60rpx; height: 60rpx; border-radius: 50%;
|
|
|
|
|
|
|
+ width: 48rpx; height: 48rpx; border-radius: 50%;
|
|
|
color: #FFFFFF; display: flex; align-items: center; justify-content: center;
|
|
color: #FFFFFF; display: flex; align-items: center; justify-content: center;
|
|
|
- font-size: 24rpx; font-weight: 600; margin-bottom: 8rpx;
|
|
|
|
|
|
|
+ font-size: 24rpx; font-weight: 600;
|
|
|
}
|
|
}
|
|
|
.member-avatar-male { background: linear-gradient(135deg, #5B9BD5, #8FC5E8); }
|
|
.member-avatar-male { background: linear-gradient(135deg, #5B9BD5, #8FC5E8); }
|
|
|
.member-avatar-female { background: linear-gradient(135deg, #F472B6, #F9A8D4); }
|
|
.member-avatar-female { background: linear-gradient(135deg, #F472B6, #F9A8D4); }
|
|
|
-.member-avatar-unknown{ background: linear-gradient(135deg, #FF8C42, #FFB366); }
|
|
|
|
|
|
|
+.member-avatar-unknown{ background: linear-gradient(135deg, #CBD5E1, #E2E8F0); }
|
|
|
.member-name {
|
|
.member-name {
|
|
|
- font-size: 22rpx;
|
|
|
|
|
- color: #666;
|
|
|
|
|
- max-width: 120rpx;
|
|
|
|
|
|
|
+ font-size: 24rpx;
|
|
|
|
|
+ color: #64748B;
|
|
|
|
|
+ max-width: 80rpx;
|
|
|
overflow: hidden;
|
|
overflow: hidden;
|
|
|
text-overflow: ellipsis;
|
|
text-overflow: ellipsis;
|
|
|
white-space: nowrap;
|
|
white-space: nowrap;
|
|
|
}
|
|
}
|
|
|
.member-selected .member-name {
|
|
.member-selected .member-name {
|
|
|
- color: #FF8C42;
|
|
|
|
|
|
|
+ color: #FFFFFF;
|
|
|
font-weight: 600;
|
|
font-weight: 600;
|
|
|
}
|
|
}
|
|
|
|
|
+.member-selected .member-avatar {
|
|
|
|
|
+ border: 2rpx solid #FFFFFF;
|
|
|
|
|
+}
|
|
|
.member-empty {
|
|
.member-empty {
|
|
|
width: 100%;
|
|
width: 100%;
|
|
|
padding: 20rpx 0;
|
|
padding: 20rpx 0;
|
|
|
|
|
+ text-align: center;
|
|
|
}
|
|
}
|
|
|
.member-empty-text {
|
|
.member-empty-text {
|
|
|
font-size: 24rpx;
|
|
font-size: 24rpx;
|
|
|
- color: #999;
|
|
|
|
|
|
|
+ color: #94A3B8;
|
|
|
}
|
|
}
|
|
|
.add-member-entry {
|
|
.add-member-entry {
|
|
|
box-sizing: border-box;
|
|
box-sizing: border-box;
|
|
@@ -312,35 +326,53 @@ export default {
|
|
|
align-items: center;
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
justify-content: center;
|
|
|
background-color: #FFFFFF;
|
|
background-color: #FFFFFF;
|
|
|
- border: 2rpx dashed #FF8C42;
|
|
|
|
|
|
|
+ border: 2rpx dashed #5B9BD5;
|
|
|
border-radius: 20rpx;
|
|
border-radius: 20rpx;
|
|
|
padding: 24rpx 30rpx;
|
|
padding: 24rpx 30rpx;
|
|
|
margin-bottom: 30rpx;
|
|
margin-bottom: 30rpx;
|
|
|
|
|
+ transition: all 0.2s ease;
|
|
|
|
|
+}
|
|
|
|
|
+.add-member-entry:active {
|
|
|
|
|
+ background-color: #F0F7FF;
|
|
|
}
|
|
}
|
|
|
.add-member-entry-icon {
|
|
.add-member-entry-icon {
|
|
|
font-size: 30rpx;
|
|
font-size: 30rpx;
|
|
|
- color: #FF8C42;
|
|
|
|
|
|
|
+ color: #5B9BD5;
|
|
|
margin-right: 12rpx;
|
|
margin-right: 12rpx;
|
|
|
}
|
|
}
|
|
|
.add-member-entry-text {
|
|
.add-member-entry-text {
|
|
|
font-size: 28rpx;
|
|
font-size: 28rpx;
|
|
|
- color: #FF8C42;
|
|
|
|
|
|
|
+ color: #5B9BD5;
|
|
|
font-weight: 600;
|
|
font-weight: 600;
|
|
|
}
|
|
}
|
|
|
.add-member-entry-arrow {
|
|
.add-member-entry-arrow {
|
|
|
font-size: 30rpx;
|
|
font-size: 30rpx;
|
|
|
- color: #FF8C42;
|
|
|
|
|
|
|
+ color: #5B9BD5;
|
|
|
margin-left: 8rpx;
|
|
margin-left: 8rpx;
|
|
|
}
|
|
}
|
|
|
-.tip-card { background: #FFF1E6; border-radius: 16rpx; padding: 24rpx 30rpx; margin-bottom: 30rpx; }
|
|
|
|
|
-.tip-text { font-size: 24rpx; color: #C2410C; line-height: 1.6; }
|
|
|
|
|
|
|
+.tip-card {
|
|
|
|
|
+ background: #D6EAF8;
|
|
|
|
|
+ border-radius: 16rpx;
|
|
|
|
|
+ padding: 24rpx 30rpx;
|
|
|
|
|
+ margin-bottom: 30rpx;
|
|
|
|
|
+}
|
|
|
|
|
+.tip-text {
|
|
|
|
|
+ font-size: 24rpx;
|
|
|
|
|
+ color: #3A7CC4;
|
|
|
|
|
+ line-height: 1.6;
|
|
|
|
|
+}
|
|
|
.save-area {
|
|
.save-area {
|
|
|
padding: 40rpx 30rpx;
|
|
padding: 40rpx 30rpx;
|
|
|
}
|
|
}
|
|
|
.save-btn {
|
|
.save-btn {
|
|
|
- background: linear-gradient(135deg, #FF8C42, #FFB366);
|
|
|
|
|
|
|
+ background: linear-gradient(135deg, #5B9BD5, #3A7CC4);
|
|
|
color: #FFFFFF; text-align: center; padding: 28rpx 0; border-radius: 999rpx;
|
|
color: #FFFFFF; text-align: center; padding: 28rpx 0; border-radius: 999rpx;
|
|
|
font-size: 30rpx; font-weight: 600;
|
|
font-size: 30rpx; font-weight: 600;
|
|
|
- box-shadow: 0 6rpx 20rpx rgba(255, 140, 66, 0.25);
|
|
|
|
|
|
|
+ box-shadow: 0 6rpx 20rpx rgba(91, 155, 213, 0.3);
|
|
|
|
|
+ transition: all 0.2s ease;
|
|
|
|
|
+}
|
|
|
|
|
+.save-btn:active {
|
|
|
|
|
+ opacity: 0.9;
|
|
|
|
|
+ transform: scale(0.98);
|
|
|
}
|
|
}
|
|
|
</style>
|
|
</style>
|