小程序初始提交

This commit is contained in:
jdc
2025-11-13 10:36:23 +08:00
parent f26b4f9a2f
commit 5db3b180eb
447 changed files with 83351 additions and 0 deletions

View File

@@ -0,0 +1,80 @@
<template>
<cl-page>
<view class="p-3">
<demo-item :label="t('基础用法')">
<view class="flex flex-row overflow-visible">
<cl-badge type="primary" value="1" class="mr-2"></cl-badge>
<cl-badge type="success" value="12" class="mr-2"></cl-badge>
<cl-badge type="warn" value="31" class="mr-2"></cl-badge>
<cl-badge type="error" value="24" class="mr-2"></cl-badge>
<cl-badge type="info" value="17" class="mr-2"></cl-badge>
<cl-badge type="primary" value="41" class="mr-2"></cl-badge>
<cl-badge type="success" value="56" class="mr-2"></cl-badge>
</view>
</demo-item>
<demo-item :label="t('结合按钮')">
<view class="flex flex-row overflow-visible">
<cl-button>
{{ t("购买") }}
<template #content>
<cl-badge type="error" value="1" position> </cl-badge>
</template>
</cl-button>
<cl-button :pt="{ className: '!ml-5' }">
{{ t("消息") }}
<template #content>
<cl-badge type="error" dot position> </cl-badge>
</template>
</cl-button>
</view>
</demo-item>
<demo-item :label="t('结合图片')">
<view class="flex flex-row overflow-visible">
<cl-image
:pt="{
className: 'overflow-visible'
}"
src="https://unix.cool-js.com/images/demo/bg1.png"
>
<cl-badge type="error" value="+9" position> </cl-badge>
</cl-image>
</view>
</demo-item>
<demo-item :label="t('结合图标')">
<view class="flex flex-row overflow-visible">
<view class="relative overflow-visible">
<cl-icon name="mail-line"> </cl-icon>
<cl-badge
type="error"
dot
position
:pt="{
className: '!top-[-6rpx] !right-[-6rpx]'
}"
>
</cl-badge>
</view>
</view>
</demo-item>
<demo-item :label="t('自定义样式')">
<view class="flex flex-row overflow-visible">
<cl-badge
type="info"
:pt="{ className: '!rounded-bl-none' }"
value="1"
></cl-badge>
</view>
</demo-item>
</view>
</cl-page>
</template>
<script lang="ts" setup>
import { t } from "@/locale";
import DemoItem from "../components/item.uvue";
</script>

View File

@@ -0,0 +1,84 @@
<template>
<cl-page>
<view class="p-3">
<demo-item :label="t('基础用法')">
<cl-countdown :datetime="datetime"></cl-countdown>
</demo-item>
<demo-item :label="t('隐藏为 00 的值')">
<cl-countdown :minute="60" hide-zero></cl-countdown>
</demo-item>
<demo-item :label="t('指定天数')">
<cl-countdown :day="2" format="{d}天{h}:{m}:{s}"></cl-countdown>
</demo-item>
<demo-item :label="t('自定义模板')">
<cl-countdown :day="1" format="{d}天{h}时{m}分{s}秒"></cl-countdown>
</demo-item>
<demo-item :label="t('指定小时')">
<cl-countdown :hour="2"></cl-countdown>
</demo-item>
<demo-item :label="t('指定分钟')">
<cl-countdown :minute="2"></cl-countdown>
</demo-item>
<demo-item :label="t('指定秒')">
<cl-countdown :second="10"></cl-countdown>
</demo-item>
<demo-item :label="t('完成后提示')">
<cl-countdown :second="5" @done="onDone"></cl-countdown>
</demo-item>
<demo-item :label="t('3秒后开始倒计时')">
<cl-countdown ref="countdownRef" :second="5" :auto="false"></cl-countdown>
</demo-item>
<demo-item :label="t('自定义样式')">
<cl-countdown
:hour="10"
:pt="{
text: {
className: parseClass([
'px-2 py-1 rounded-md',
[isDark, 'bg-surface-700', 'bg-surface-100']
])
},
splitor: {
className: 'px-2'
}
}"
></cl-countdown>
</demo-item>
</view>
</cl-page>
</template>
<script lang="ts" setup>
import { t } from "@/locale";
import DemoItem from "../components/item.uvue";
import { onMounted, ref } from "vue";
import { dayUts, isDark, parseClass } from "@/cool";
import { useUi } from "@/uni_modules/cool-ui";
const ui = useUi();
const datetime = ref(dayUts().add(1, "minute").toDate());
function onDone() {
ui.showToast({
message: "倒计时完成"
});
}
const countdownRef = ref<ClCountdownComponentPublicInstance | null>(null);
onMounted(() => {
setTimeout(() => {
countdownRef.value!.next();
}, 3000);
});
</script>

View File

@@ -0,0 +1,29 @@
<template>
<cl-page>
<view class="p-3">
<demo-item :label="t('基础用法')">
<cl-loadmore loading></cl-loadmore>
</demo-item>
<demo-item :label="t('3秒后加载完成')">
<cl-loadmore :loading="loading" :finish="finish"></cl-loadmore>
</demo-item>
</view>
</cl-page>
</template>
<script lang="ts" setup>
import { t } from "@/locale";
import DemoItem from "../components/item.uvue";
import { onMounted, ref } from "vue";
const loading = ref(true);
const finish = ref(false);
onMounted(() => {
setTimeout(() => {
loading.value = false;
finish.value = true;
}, 3000);
});
</script>

View File

@@ -0,0 +1,46 @@
<template>
<cl-page>
<view class="p-3">
<demo-item :label="t('基础用法')">
<cl-noticebar
text="云想衣裳花想容,春风拂槛露华浓。若非群玉山头见,会向瑶台月下逢。"
></cl-noticebar>
</demo-item>
<demo-item :label="t('带图标')">
<view class="flex flex-row items-center">
<cl-icon name="notification-4-line" class="mr-2"></cl-icon>
<cl-noticebar
text="云想衣裳花想容,春风拂槛露华浓。若非群玉山头见,会向瑶台月下逢。"
></cl-noticebar>
</view>
</demo-item>
<demo-item :label="t('设置速度')">
<cl-noticebar
:speed="40"
text="云想衣裳花想容,春风拂槛露华浓。若非群玉山头见,会向瑶台月下逢。"
></cl-noticebar>
</demo-item>
<demo-item :label="t('垂直方向')">
<cl-noticebar
direction="vertical"
:text="[
'江南可采莲,莲叶何田田',
'鱼戏莲叶间',
'鱼戏莲叶东',
'鱼戏莲叶西',
'鱼戏莲叶南',
'鱼戏莲叶北'
]"
></cl-noticebar>
</demo-item>
</view>
</cl-page>
</template>
<script lang="ts" setup>
import { t } from "@/locale";
import DemoItem from "../components/item.uvue";
</script>

View File

@@ -0,0 +1,69 @@
<template>
<cl-page>
<view class="p-3">
<demo-item :label="t('自定义')">
<cl-progress-circle
:value="value"
:color="isColor ? 'red' : null"
:un-color="isColor ? '#f7bfbf' : null"
:size="isSize ? 80 : 120"
:show-text="isText"
:duration="isDuration ? 200 : 500"
></cl-progress-circle>
<cl-list
border
:pt="{
className: 'mt-5'
}"
>
<cl-list-item :label="t('改个颜色')">
<cl-switch v-model="isColor"></cl-switch>
</cl-list-item>
<cl-list-item :label="t('显示文本')">
<cl-switch v-model="isText"></cl-switch>
</cl-list-item>
<cl-list-item :label="t('快一些')">
<cl-switch v-model="isDuration"></cl-switch>
</cl-list-item>
<cl-list-item :label="t('显示文本')">
<cl-button type="light" size="small" icon="add-line" @tap="add"></cl-button>
<cl-button
type="light"
size="small"
icon="subtract-line"
@tap="sub"
></cl-button>
</cl-list-item>
</cl-list>
</demo-item>
</view>
</cl-page>
</template>
<script lang="ts" setup>
import { ref } from "vue";
import { t } from "@/locale";
import DemoItem from "../components/item.uvue";
const isSize = ref(false);
const isText = ref(true);
const isColor = ref(false);
const isDuration = ref(false);
const value = ref(70);
function add() {
if (value.value < 100) {
value.value += 10;
}
}
function sub() {
if (value.value > 0) {
value.value -= 10;
}
}
</script>

View File

@@ -0,0 +1,26 @@
<template>
<cl-page>
<view class="p-3">
<demo-item :label="t('基础用法')">
<cl-progress :value="50"></cl-progress>
</demo-item>
<demo-item :label="t('自定义颜色')">
<cl-progress :value="30" color="red" un-color="#f7bfbf"></cl-progress>
</demo-item>
<demo-item :label="t('自定义宽度')">
<cl-progress :value="30" :stroke-width="20"></cl-progress>
</demo-item>
<demo-item :label="t('不显示文本')">
<cl-progress :value="75" :show-text="false"></cl-progress>
</demo-item>
</view>
</cl-page>
</template>
<script lang="ts" setup>
import { t } from "@/locale";
import DemoItem from "../components/item.uvue";
</script>

View File

@@ -0,0 +1,77 @@
<template>
<cl-page>
<view class="p-3">
<demo-item :label="t('基础用法')">
<cl-rolling-number :value="value"></cl-rolling-number>
<view class="flex flex-row mt-2">
<cl-button icon="add-line" size="small" @tap="add"></cl-button>
<cl-button
icon="subtract-line"
type="light"
size="small"
@tap="sub"
></cl-button>
</view>
</demo-item>
<demo-item :label="t('自定义')">
<view class="flex flex-col items-center">
<cl-rolling-number
:value="value"
:pt="{
className: parseClass([[isCustom, '!text-3xl']]),
color: isCustom ? 'primary' : ''
}"
:duration="isSpeed ? 300 : 1000"
:decimals="isDecimals ? 2 : 0"
></cl-rolling-number>
<view class="flex flex-row mt-2">
<cl-button icon="add-line" size="small" @tap="add"></cl-button>
<cl-button
icon="subtract-line"
type="light"
size="small"
@tap="sub"
></cl-button>
</view>
</view>
<cl-list border class="mt-3">
<cl-list-item :label="t('加快滚动速度')">
<cl-switch v-model="isSpeed"></cl-switch>
</cl-list-item>
<cl-list-item :label="t('显示小数位数')">
<cl-switch v-model="isDecimals"></cl-switch>
</cl-list-item>
<cl-list-item :label="t('自定义样式')">
<cl-switch v-model="isCustom"></cl-switch>
</cl-list-item>
</cl-list>
</demo-item>
</view>
</cl-page>
</template>
<script lang="ts" setup>
import { t } from "@/locale";
import DemoItem from "../components/item.uvue";
import { ref } from "vue";
import { parseClass } from "@/cool";
const value = ref(100);
const isSpeed = ref(false);
const isDecimals = ref(false);
const isCustom = ref(false);
function add() {
value.value += 100;
}
function sub() {
value.value -= 100;
}
</script>

View File

@@ -0,0 +1,61 @@
<template>
<cl-page>
<view class="p-3">
<demo-item :label="t('文本')">
<cl-skeleton :loading="loading">
<cl-text>云想衣裳花想容,春风拂槛露华浓。</cl-text>
</cl-skeleton>
</demo-item>
<demo-item :label="t('按钮')">
<view class="flex flex-row">
<cl-skeleton type="button" :loading="loading">
<cl-button>立即购买</cl-button>
</cl-skeleton>
</view>
</demo-item>
<demo-item :label="t('图片')">
<cl-skeleton type="image" :loading="loading">
<cl-image
src="https://unix.cool-js.com/images/demo/bg1.png"
></cl-image>
</cl-skeleton>
</demo-item>
<demo-item :label="t('圆形')">
<cl-skeleton type="circle" :loading="loading">
<cl-image
:radius="100"
src="https://unix.cool-js.com/images/demo/bg1.png"
></cl-image>
</cl-skeleton>
</demo-item>
<demo-item :label="t('组合')">
<view class="flex flex-row">
<cl-skeleton type="image" loading> </cl-skeleton>
<view class="flex-1 ml-2">
<cl-skeleton type="text" loading> </cl-skeleton>
<cl-skeleton type="text" loading class="mt-2 !w-[160rpx]"> </cl-skeleton>
</view>
</view>
</demo-item>
</view>
</cl-page>
</template>
<script lang="ts" setup>
import { t } from "@/locale";
import DemoItem from "../components/item.uvue";
import { ref } from "vue";
const loading = ref(true);
onReady(() => {
setTimeout(() => {
loading.value = false;
}, 3000);
});
</script>