ow
This commit is contained in:
owenchen committed
1 parent
b858386e86
commit
3b2ee8523b
28 files changed
+2285
-1496
No files matched your search
@@ -6,7 +6,8 @@
|
||||
* loading 显示转圈占位，items 空且不在 loading 时显示 emptyText。
|
||||
*/
|
||||
import { useLocale } from "uview-pro";
|
||||
import { ref, watch } from "vue";
|
||||
import { computed, ref, watch } from "vue";
|
||||
import { useThemeTokens } from "@/composables";
|
||||
|
||||
export interface PickerOption {
|
||||
key: string;
|
||||
@@ -14,6 +15,8 @@ export interface PickerOption {
|
||||
label: string;
|
||||
/** 次要说明（如共享路径 / 专辑描述），缺省不占行 */
|
||||
sub?: string;
|
||||
/** 行首图标（如相册=photo），缺省不占位 */
|
||||
icon?: string;
|
||||
}
|
||||
|
||||
const props = defineProps({
|
||||
@@ -41,6 +44,16 @@ const props = defineProps({
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
/** 确认键文案：发布场景传「发布相册」等，缺省仍用「创建」 */
|
||||
confirmText: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
/** 附加「新建」行文案（如 新建相册）：非空即渲染，点按 emit create */
|
||||
createText: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
});
|
||||
|
||||
const emit = defineEmits<{
|
||||
@@ -48,12 +61,22 @@ const emit = defineEmits<{
|
||||
(e: "close"): void;
|
||||
/** 确认并带上选中项 key */
|
||||
(e: "confirm", key: string): void;
|
||||
/** 点了附加的「新建」行 */
|
||||
(e: "create"): void;
|
||||
}>();
|
||||
|
||||
const { t } = useLocale();
|
||||
|
||||
// 勾选色与确认钮随主题；确认钮用纯色（渐变浅档在白字下发糊），未选择/提交中用透明度做置灰态
|
||||
const { primary } = useThemeTokens();
|
||||
|
||||
const picked = ref("");
|
||||
|
||||
const confirmStyle = computed(() => ({
|
||||
background: primary.value,
|
||||
opacity: picked.value && !props.loading ? 1 : 0.45,
|
||||
}));
|
||||
|
||||
// 每次展开清掉上次选择
|
||||
watch(
|
||||
() => props.visible,
|
||||
@@ -79,41 +102,52 @@ function onConfirm(): void {
|
||||
<text class="option-picker__title">
|
||||
{{ props.title }}
|
||||
</text>
|
||||
<scroll-view scroll-y class="option-picker__list">
|
||||
<view v-if="props.loading" class="option-picker__empty">
|
||||
<u-loading mode="circle" />
|
||||
</view>
|
||||
<template v-else>
|
||||
<view v-if="!props.items.length" class="option-picker__empty">
|
||||
<text class="option-picker__empty-text">
|
||||
{{ props.emptyText || t("FilePage.pickerEmpty") }}
|
||||
</text>
|
||||
<!-- 列表白卡（底部抽屉统一风格：灰底上的白色圆角分块） -->
|
||||
<view class="option-picker__card">
|
||||
<scroll-view scroll-y class="option-picker__list">
|
||||
<view v-if="props.loading" class="option-picker__empty">
|
||||
<u-loading mode="circle" />
|
||||
</view>
|
||||
<view v-for="item in props.items" :key="item.key" class="option-picker__row"
|
||||
:class="{ 'option-picker__row--picked': picked === item.key }" @tap="picked = item.key">
|
||||
<view class="option-picker__row-main">
|
||||
<text class="option-picker__row-label">
|
||||
{{ item.label }}
|
||||
</text>
|
||||
<text v-if="item.sub" class="option-picker__row-sub">
|
||||
{{ item.sub }}
|
||||
<template v-else>
|
||||
<view v-if="!props.items.length" class="option-picker__empty">
|
||||
<text class="option-picker__empty-text">
|
||||
{{ props.emptyText || t("FilePage.pickerEmpty") }}
|
||||
</text>
|
||||
</view>
|
||||
<u-icon v-if="picked === item.key" name="checkmark" size="36" color="#2b8fff" />
|
||||
<view v-else class="option-picker__radio" />
|
||||
</view>
|
||||
</template>
|
||||
</scroll-view>
|
||||
<view v-for="item in props.items" :key="item.key" class="option-picker__row"
|
||||
:class="{ 'option-picker__row--picked': picked === item.key }" @tap="picked = item.key">
|
||||
<u-icon v-if="item.icon" :name="item.icon" size="40" :color="primary" />
|
||||
<view class="option-picker__row-main">
|
||||
<text class="option-picker__row-label">
|
||||
{{ item.label }}
|
||||
</text>
|
||||
<text v-if="item.sub" class="option-picker__row-sub">
|
||||
{{ item.sub }}
|
||||
</text>
|
||||
</view>
|
||||
<u-icon v-if="picked === item.key" name="checkmark-circle-fill" size="40" :color="primary" />
|
||||
<view v-else class="option-picker__radio" />
|
||||
</view>
|
||||
</template>
|
||||
</scroll-view>
|
||||
</view>
|
||||
<!-- 附加「新建」行（如 新建相册）：点按跳创建页 -->
|
||||
<view v-if="props.createText" class="option-picker__create" @tap="emit('create')">
|
||||
<u-icon name="plus-circle-fill" size="40" :color="primary" />
|
||||
<text class="option-picker__create-text">
|
||||
{{ props.createText }}
|
||||
</text>
|
||||
<u-icon name="arrow-right" size="26" color="#c0c4cc" />
|
||||
</view>
|
||||
<view class="option-picker__footer">
|
||||
<view class="option-picker__btn" @tap="emit('close')">
|
||||
<text class="option-picker__btn-text">
|
||||
{{ t("FilePage.folderCancel") }}
|
||||
</text>
|
||||
</view>
|
||||
<view class="option-picker__btn option-picker__btn--primary"
|
||||
:class="{ 'option-picker__btn--muted': !picked || props.loading }" @tap="onConfirm">
|
||||
<view class="option-picker__btn option-picker__btn--primary" :style="confirmStyle" @tap="onConfirm">
|
||||
<text class="option-picker__btn-text option-picker__btn-text--primary">
|
||||
{{ t("FilePage.folderConfirm") }}
|
||||
{{ props.confirmText || t("FilePage.folderConfirm") }}
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
@@ -123,17 +157,26 @@ function onConfirm(): void {
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
/* 底部抽屉统一风格：浅灰面板底 + 白色圆角卡分块 */
|
||||
.option-picker {
|
||||
padding: 40rpx 32rpx 0;
|
||||
background-color: #ffffff;
|
||||
padding: 32rpx 24rpx 0;
|
||||
background-color: #f2f3f5;
|
||||
|
||||
&__title {
|
||||
display: block;
|
||||
padding-bottom: 24rpx;
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
padding: 8rpx 8rpx 28rpx;
|
||||
font-size: 36rpx;
|
||||
font-weight: 700;
|
||||
color: #1f2329;
|
||||
text-align: center;
|
||||
border-bottom: 2rpx solid #e8eaed;
|
||||
margin-bottom: 24rpx;
|
||||
}
|
||||
|
||||
&__card {
|
||||
padding: 8rpx;
|
||||
border-radius: 20rpx;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
&__list {
|
||||
@@ -156,6 +199,7 @@ function onConfirm(): void {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 20rpx;
|
||||
padding: 24rpx 20rpx;
|
||||
border-radius: 16rpx;
|
||||
|
||||
@@ -170,7 +214,6 @@ function onConfirm(): void {
|
||||
min-width: 0;
|
||||
flex-direction: column;
|
||||
gap: 4rpx;
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
|
||||
&__row-label {
|
||||
@@ -198,36 +241,52 @@ function onConfirm(): void {
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
/* 附加「新建」行：与列表卡同款白卡（图标 + 文案 + 右尖角） */
|
||||
&__create {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 20rpx;
|
||||
margin-top: 20rpx;
|
||||
padding: 28rpx 32rpx;
|
||||
border-radius: 20rpx;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
&__create-text {
|
||||
flex: 1;
|
||||
font-size: 28rpx;
|
||||
color: #1f2329;
|
||||
}
|
||||
|
||||
&__footer {
|
||||
display: flex;
|
||||
gap: 20rpx;
|
||||
margin-top: 28rpx;
|
||||
}
|
||||
|
||||
/* 按键版式对齐设计图：等高圆角矩形 + 细描边，非胶囊 */
|
||||
&__btn {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 76rpx;
|
||||
border-radius: 999rpx;
|
||||
background-color: #f5f6f8;
|
||||
height: 96rpx;
|
||||
border: 2rpx solid #e5e6eb;
|
||||
border-radius: 24rpx;
|
||||
background-color: #ffffff;
|
||||
|
||||
&--primary {
|
||||
border-color: transparent;
|
||||
background-color: #2b8fff;
|
||||
}
|
||||
|
||||
/* 未选择或提交中：主按钮置灰（仍可点，由 onConfirm 拦截） */
|
||||
&--muted {
|
||||
background-color: #b9d6ff;
|
||||
}
|
||||
}
|
||||
|
||||
&__btn-text {
|
||||
font-size: 28rpx;
|
||||
font-size: 32rpx;
|
||||
color: #5c626b;
|
||||
|
||||
&--primary {
|
||||
font-weight: 600;
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in new issue
Block a user