Compare commits

..
15 Commits
Author SHA1 Message Date
yzy 62c8d25fcc 优化 2026-01-21 15:32:19 +08:00
yzy d0b5a3d582 添加找回密码功能 2026-01-21 11:34:37 +08:00
yzy a4e01d96b8 优化 2026-01-21 11:32:19 +08:00
yzy 01af5542b8 优化 2026-01-21 11:31:56 +08:00
yzy fb4888188f 优化页面 2026-01-21 11:07:37 +08:00
yzy 6a822548b1 优化 2026-01-21 10:45:29 +08:00
yzy e2b5ae4d00 更新组件库版本 2026-01-20 19:38:01 +08:00
yzy 4187454008 优化头像上传功能 2026-01-20 19:37:12 +08:00
yzy 9392fe9938 添加修改用户名功能 2026-01-20 18:10:52 +08:00
yzy a5f3947188 优化 2026-01-20 17:24:14 +08:00
yzy c431afac2b 初始化页面 2026-01-20 16:10:29 +08:00
yzy 2c6d011736 优化 2026-01-16 19:14:26 +08:00
yzy 76ba02d29b 初始化登录功能,注册功能 2026-01-14 18:36:31 +08:00
yzy 63726d8200 优化 2026-01-12 19:06:24 +08:00
yzy 85c436551f ;优化,添加组件库 2026-01-08 11:07:35 +08:00
553 changed files with 57119 additions and 1165 deletions

No files matched your search

+1 -1
View File
@@ -1,4 +1,4 @@
# .env.development
NODE_ENV=development
VITE_APP_RUN_ENV=development
VITE_APP_BASE_URL="http://127.0.0.1:8000"
VITE_APP_BASE_URL="https://takway-ai.top/test"
+20 -2
View File
@@ -18,7 +18,13 @@ export const editMobileInit = (params) => {
* @desc 发送验证码
*/
export const sendCode = (params) => {
return get('/sale/login/send-mb-verify-code', params);
return post('/app-api/member/auth/send-sms-code', params);
};
/**
* @desc 发送邮箱验证码
*/
export const sendCodeToEmail = (params) => {
return get('/app-api/member/auth/code', params);
};
/**
* @desc 发送验证码初始化
@@ -26,11 +32,23 @@ export const sendCode = (params) => {
export const loginLRInit = (params) => {
return get('/sale/login/send-mb-verify-code-init', params);
};
/**
* @desc 邮箱注册
*/
export const registerByEmail = (params) => {
return post('/app-api/member/auth/email-register', params);
};
/**
* @desc 邮箱登录
*/
export const loginByEmail = (params) => {
return post('/app-api/member/auth/email-login', params);
};
/**
* @desc 登录
*/
export const login = (params) => {
return get('/sale/login/login', params);
return post('/app-api/member/auth/weixin-mini-app-login', params);
};
/**
* @desc 注册
+42 -8
View File
@@ -3,23 +3,44 @@
<view class="custom-tab-bar">
<!-- 首页 -->
<view class="tab-bar-item" @click="switchTab(homeTab.pagePath)">
<image class="icon" :src="currentPath === homeTab.pagePath ? homeTab.selectedIconPath : homeTab.iconPath"></image>
<image class="icon" :src="currentPath === homeTab.pagePath ? homeTab.selectedIconPath : homeTab.iconPath">
</image>
<text class="text" :style="{color: currentPath === homeTab.pagePath ? selectedColor : color}">
{{ homeTab.text }}
</text>
</view>
<!-- 回忆 -->
<view class="tab-bar-item" @click="switchTab(memoryTab.pagePath)">
<image class="icon" :src="currentPath === memoryTab.pagePath ? memoryTab.selectedIconPath : memoryTab.iconPath">
</image>
<text class="text" :style="{color: currentPath === memoryTab.pagePath ? selectedColor : color}">
{{ memoryTab.text }}
</text>
</view>
<!-- 发现页 -->
<view class="tab-bar-item relative" @click="switchTab(findTab.pagePath)">
<image class="absolute top-[-10px] w-[36px] h-[36px]" :src="currentPath === findTab.pagePath ? findTab.selectedIconPath : findTab.iconPath"></image>
<image class="absolute top-[-10px] w-[40px] h-[40px]"
:src="currentPath === findTab.pagePath ? findTab.selectedIconPath : findTab.iconPath"></image>
<!-- <text class="text" :style="{color: currentPath === findTab.pagePath ? selectedColor : color}">
{{ findTab.text }}
</text> -->
</view>
<!-- MBIT -->
<view class="tab-bar-item" @click="switchTab(mbitTab.pagePath)">
<image class="icon" :src="currentPath === mbitTab.pagePath ? mbitTab.selectedIconPath : mbitTab.iconPath">
</image>
<text class="text" :style="{color: currentPath === mbitTab.pagePath ? selectedColor : color}">
{{ mbitTab.text }}
</text>
</view>
<!-- 个人页面 -->
<view class="tab-bar-item" @click="switchTab(mineTab.pagePath)">
<image class="icon" :src="currentPath === mineTab.pagePath ? mineTab.selectedIconPath : mineTab.iconPath"></image>
<image class="icon" :src="currentPath === mineTab.pagePath ? mineTab.selectedIconPath : mineTab.iconPath">
</image>
<text class="text" :style="{color: currentPath === mineTab.pagePath ? selectedColor : color}">
{{ mineTab.text }}
@@ -37,16 +58,22 @@
onLoad
} from '@dcloudio/uni-app'
// ========== 配置数据 ==========
// 从你原来的配置迁移过来的数据
const color = '#999999'
const selectedColor = '#000'
const color = '#cdcdcd'
const selectedColor = '#2c2c2c'
//首页配置
const homeTab = {
pagePath: "pages/index/index",
iconPath: "/static/tabbar/home.png",
selectedIconPath: "/static/tabbar/active-home.png",
text: "首页"
text: "home"
}
//记忆
const memoryTab = {
pagePath: "pages/memory/index",
iconPath: "/static/tabbar/love.png",
selectedIconPath: "/static/tabbar/active-love.png",
text: "memory"
}
//发现页
@@ -54,7 +81,14 @@
pagePath: "pages/order/index",
iconPath: "/static/tabbar/find.png",
selectedIconPath: "/static/tabbar/active-find.png",
text: "发现"
text: "find"
}
//mbit
const mbitTab = {
pagePath: "pages/mbti/index",
iconPath: "/static/tabbar/head.png",
selectedIconPath: "/static/tabbar/active-head.png",
text: "MBIT"
}
//个人页
const mineTab = {
-44
View File
@@ -1,44 +0,0 @@
<template>
<up-popup :show="showPicker" :closeable="true" round="10" mode="bottom" @close="onClose">
<view class="login">
<view class="logo mb-[10rpx] mt-[50rpx] flex justify-center text-center">
<image class="h-[140rpx] rounded-full" src="/static/common/logo.png" mode="heightFix"></image>
</view>
<Login @close="onClose"></Login>
</view>
</up-popup>
</template>
<script setup>
import { ref, watch } from 'vue';
import Login from './login.vue';
const props = defineProps({
show: {
// 展示狀態
type: Boolean,
default: () => {
return false;
},
},
});
const emit = defineEmits(['close']);
const onClose = () => {
emit('close');
};
const showPicker = ref(false);
watch(
() => props.show,
(newVal) => {
showPicker.value = newVal;
},
{
immediate: true,
deep: true,
}
);
</script>
<style lang="scss" scoped></style>
+798 -819
View File
File diff suppressed because it is too large. Load diff
+1 -1
View File
@@ -8,7 +8,7 @@ export default {
* 边框色系(border-theme)
* 页面:首页/pages/index/index、产品列表页/pages/product/index、客服页/pages/customer/index、个人中心/pages/mine/index
*/
theme: '#00A88E',
theme: '#2c2c2c',
/**
* 用法: 浅背景主题色(bg-theme-opacity)
* 页面: 产品列表页/pages/product/index
+3 -2
View File
@@ -1,6 +1,6 @@
{
"name" : "sweekar-app",
"appid" : "__UNI__AB3EDCE",
"appid" : "__UNI__308E2A1",
"description" : "",
"versionName" : "1.1.3",
"versionCode" : 113,
@@ -45,7 +45,8 @@
},
/* ios打包配置 */
"ios" : {
"idfa" : false
"idfa" : false,
"dSYMs" : false
},
/* SDK配置 */
"sdkConfigs" : {}
+6 -4
View File
@@ -3808,15 +3808,17 @@
"dev": true
},
"node_modules/uview-plus": {
"version": "3.4.20",
"resolved": "https://registry.npmmirror.com/uview-plus/-/uview-plus-3.4.20.tgz",
"integrity": "sha512-BlaDXfxVywdAyxilqLQJJ4FNtDaS74Tu0JUZAF1RW6bdX3PYquBYhPKBZKQqGd2aqaKHwMN6TBuhpm1fMOm/9g==",
"version": "3.6.29",
"resolved": "https://registry.npmmirror.com/uview-plus/-/uview-plus-3.6.29.tgz",
"integrity": "sha512-zK522LR074rB4k3EARysmjsoOh+WjtFevIpvmV1wjVFqS3TT6brLZLd+gKa1ewxBsIgIPDTAabmnHWPsW9DWkQ==",
"dependencies": {
"clipboard": "^2.0.11",
"dayjs": "^1.11.3"
},
"engines": {
"HBuilderX": "^3.1.0"
"HBuilderX": "^3.1.0",
"uni-app": "^4.66",
"uni-app-x": ""
}
},
"node_modules/validate-npm-package-name": {
+40 -2
View File
@@ -12,7 +12,7 @@
{
"path": "pages/index/index",
"style": {
"navigationStyle": "custom"
}
},
{
@@ -35,12 +35,48 @@
"style": {
"navigationStyle": "custom"
}
},
{
"path": "pages/memory/index",
"style": {
"navigationStyle": "custom"
}
},
{
"path": "pages/mbti/index",
"style": {
"navigationStyle": "custom"
}
},
{
"path": "pages/login/index",
"style": {
"navigationBarTitleText": "登录"
}
},
{
"path": "pages/login/register",
"style": {
"navigationBarTitleText": ""
}
},
{
"path": "pages/login/changePassword",
"style": {
"navigationBarTitleText": ""
}
},
{
"path": "pages/control/index",
"style": {
"navigationStyle": "custom"
}
}
],
"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "跳跳糖",
"navigationBarTitleText": "话话糖",
"navigationBarBackgroundColor": "#fff",
"backgroundColor": "#F2F3F9"
},
@@ -53,7 +89,9 @@
"backgroundColor": "#ffffff",
"list": [
{"pagePath": "pages/index/index"},
{"pagePath": "pages/memory/index"},
{"pagePath": "pages/order/index"},
{"pagePath": "pages/mbti/index"},
{"pagePath": "pages/mine/index"}
]
}
+7
View File
@@ -0,0 +1,7 @@
import { get, post, put, dele } from '@/utils/request';
/**
* @desc 获取产品列表
*/
export const getProducts = (params) => {
return get('/api/products/', params)
}
+117
View File
@@ -0,0 +1,117 @@
<script setup>
import { ref, onMounted } from 'vue';
import { onLoad, onShow, onReady, onHide, onPullDownRefresh } from '@dcloudio/uni-app';
import { getProducts } from './api.js';
import { useUserStore } from '@/store/user.js';
import { useI18n } from 'vue-i18n';
const { t, locale } = useI18n();
const userStore = useUserStore();
/**
* @desc 跳转至详情页面
*/
const toDetailPage = (productId) => {
uni.navigateTo({
url: '/pages/product/detail',
});
};
//获取首页数据
const getProductList = async()=>{
const res = await getProducts();
productData.value=res.data;
console.log("商品数据",productData.value);
}
onLoad(()=>{
});
// 模拟数据
/**
* @desc 处理预订事件
*/
const handleBook = (productId) => {
// 这里可以添加预订逻辑,比如跳转到详情页
uni.navigateTo({
url: `/pages/product/detail?id=${productId}`,
});
};
</script>
<template>
<view class="h-[100vh] ">
<view class="sticky top-0 w-full pt-6 flex flex-col bg-white">
<view class="flex gap-2 px-6">
<!-- 返回按钮 -->
<u-icon name="arrow-leftward" size="50"></u-icon>
<!-- title & 状态 -->
<view class="flex flex-col gap-[10px]">
<text class="text-2xl font-bold">Control Console</text>
<view class="flex items-center gap-2">
<view class="w-2 h-2 bg-[#5ac725] rounded-full" />
<text class="text-sm">CONNECTED</text>
</view>
</view>
</view>
<uv-divider line-color="#333333" hairline="false"></uv-divider>
</view>
<view class="flex flex-col px-6 pt-2 gap-2">
<!-- title -->
<text class="text-lg text-[#808080]">TEXT TO SPEECH</text>
<!-- 输入框 -->
<view class="flex gap-2">
<view class="flex flex-1 border border-solid border-theme border-[3px] rounded-lg p-2">
<u-icon name="mic" size="30"></u-icon>
<u-input placeholder="Type what Sweekar should say..."></u-input>
</view>
<view class="rounded-lg bg-[#808080] w-4 flex justify-center items-center">
<u-icon name="chat"></u-icon>
</view>
</view>
</view>
</view>
</template>
<style scoped lang="scss">
:deep(.u-count-down__text) {
color: #ab002d !important;
font-size: 13px !important;
}
.navigation {
border-bottom: 1px solid #f2f2f2;
}
.navi-title-center {
left: 50%;
transform: translateX(-50%);
}
.line {
transition: 0.3s all;
}
.search {
:deep(.u-search) {
flex: 1;
}
}
</style>
+134 -24
View File
@@ -3,7 +3,7 @@ import { ref, onMounted, getCurrentInstance, nextTick } from 'vue';
import { onLoad, onShow, onReady, onHide, onPullDownRefresh } from '@dcloudio/uni-app';
import CustomTabBar from '@/components/CustomTabBar.vue'
import { getSystemSafeArea, getSystemInfo, isEmpty, showToast, showLoadingToast, closeToast } from '@/common/common.js';
import LoginPopup from '@/components/login-popup.vue';
import LoginPopup from '@/components/login.vue';
import { getProducts } from './api.js';
import { useUserStore } from '@/store/user.js';
@@ -79,35 +79,145 @@ const handleBook = (productId) => {
</script>
<template>
<view class="h-[100vh] bg-[#fff]">
<view class=" bg-[#fff] flex flex-col mx-[30rpx] items-center">
<!-- title -->
<view class="bg-[#fff] flex justify-between items-center w-full">
<view class="w-full flex items-center gap-[10px]">
<text class="text-[#33333] text-[20px] font-bold" >Sweekar Alpha</text>
<u-icon name="level" color="#fff" class="bg-theme border-round-theme rounded-full"></u-icon>
</view>
<view class="w-[80px] border-round-theme border-[2px] rounded-full flex justify-center py-[3px] shadow-[4px_4px_1px_0_rgba(0,0,0,1)]">
<u-icon name="level"></u-icon>
<text class="text-[13px]">1205</text>
</view>
</view>
<!-- row2 -->
<view class="flex justify-between items-center mt-[15px] w-full">
<!-- 状态 -->
<view class=" bg-[#fff] border-solid border py-[6px] px-[6px] rounded-full flex items-center gap-[10px] shadow-[4px_4px_1px_0_rgba(0,0,0,1)]">
<view class="border-bottom-theme rounded-full flex justify-center items-center h-[30px] w-[30px] bg-theme">
<text class="text-[#fff]">5</text>
</view>
<view class="flex flex-col">
<text class="text-[10px]">STAGE</text>
<text class="text-[13px] font-bold">CHILDHOOD</text>
</view>
</view>
<!-- 日期 -->
<view class="border border-solid border-[#cdcdcd] bg-[#fff] py-[2px] px-[4px] gap-[2px] flex items-center text-[10px]">
<u-icon name="clock" size="10" bold=""></u-icon>
<text>42</text>
<text>DAYS</text>
</view>
</view>
<!-- EXP -->
<view class="flex items-center gap-[10px] mt-[20px] w-full ">
<text class="text-[8px]">EXP</text>
<view class="w-[100px]">
<uv-line-progress :percentage="30" height="6" activeColor="#333333" :showText="false" class="border-round-theme"></uv-line-progress>
</view>
</view>
<!-- MODEL X -->
<view class="relative border border-solid border-[#cdcdcd] bg-[#FBFAFA] rounded-full h-[220px] w-[220px] mt-[70px] mb-[20px] p-[10px] flex justify-center items-center">
<!-- 中心圆圈 -->
<view class="border-[3px] border-solid border-theme rounded-full h-[160px] bg-[#fff] w-[160px] p-[20px] flex justify-center items-center">
<view class="flex flex-col justify-center items-center">
<u-icon name="star" size="80"></u-icon>
<text>MODEL X</text>
</view>
</view>
<!-- 交流栏 -->
<view class="absolute top-[-60px] right-[-30px] w-[120px] flex flex-col justify-center items-center px-[10px] border border-solid border-theme bg-[#fff] rounded-t-lg rounded-br-lg h-[70px] border-[2px] shadow-[4px_4px_1px_0_rgba(0,0,0,1)] animate-bounce"
style="animation: bounce 1.5s infinite;">
<view class="text-[12px]">
Master,I missed you! Let's play together!
</view>
</view>
</view>
<uv-divider dashed="true" class="w-full"></uv-divider>
<!-- 四宫格 -->
<view class="w-full p-[20px] flex flex-col gap-[10px]">
<!-- 第一行 -->
<view class="w-full flex justify-between items-center gap-[10px]">
<!-- item -->
<view class="flex flex-col w-1/2 rounded-lg border border-solid border-[2px] border-theme p-[10px] gap-[10px]">
<view class="flex justify-between">
<text class="text-[12px] font-bold">HYNGER</text>
<u-icon name="star"></u-icon>
</view>
<text class="text-[18px] font-bold">72%</text>
<view class="w-full">
<uv-line-progress :percentage="60" :height="8" activeColor="#333333" :showText="false" class="border-round-theme"></uv-line-progress>
</view>
</view>
<view class="flex flex-col w-1/2 rounded-lg border border-solid border-[2px] border-theme p-[10px] gap-[10px]">
<view class="flex justify-between">
<text class="text-[12px] font-bold">HYNGER</text>
<u-icon name="star"></u-icon>
</view>
<text class="text-[18px] font-bold">72%</text>
<view class="w-full">
<uv-line-progress :percentage="60" :height="8" activeColor="#333333" :showText="false" class="border-round-theme"></uv-line-progress>
</view>
</view>
</view>
<!-- 第二行 -->
<view class="w-full flex justify-between items-center gap-[10px]">
<!-- item -->
<view class="flex flex-col w-1/2 rounded-lg border border-solid border-[2px] border-theme p-[10px] gap-[10px]">
<view class="flex justify-between">
<text class="text-[12px] font-bold">HYNGER</text>
<u-icon name="star"></u-icon>
</view>
<text class="text-[18px] font-bold">72%</text>
<view class="w-full">
<uv-line-progress :percentage="60" :height="8" activeColor="#333333" :showText="false" class="border-round-theme"></uv-line-progress>
</view>
</view>
<view class="flex flex-col w-1/2 rounded-lg border border-solid border-[2px] border-theme p-[10px] gap-[10px]">
<view class="flex justify-between">
<text class="text-[12px] font-bold">HYNGER</text>
<u-icon name="star"></u-icon>
</view>
<text class="text-[18px] font-bold">72%</text>
<view class="w-full">
<uv-line-progress :percentage="60" :height="8" activeColor="#333333" :showText="false" class="border-round-theme"></uv-line-progress>
</view>
</view>
</view>
</view>
<CustomTabBar />
</view>
</template>
<style scoped lang="scss">
:deep(.u-count-down__text) {
color: #ab002d !important;
font-size: 13px !important;
}
.navigation {
border-bottom: 1px solid #f2f2f2;
}
.navi-title-center {
left: 50%;
transform: translateX(-50%);
}
.line {
transition: 0.3s all;
}
.search {
:deep(.u-search) {
flex: 1;
<style>
/* 定义弹跳动画 */
@keyframes bounce {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-5px);
}
}
.animate-bounce {
animation: bounce 1.5s infinite;
}
</style>
+46
View File
@@ -0,0 +1,46 @@
import { get, post, put, dele } from '@/utils/request';
/**
* @desc 发送邮箱验证码
*/
export const sendCodeToEmail = (params) => {
return get('/app-api/member/auth/code', params);
};
/**
* @desc 发送验证码初始化
*/
export const loginLRInit = (params) => {
return get('/sale/login/send-mb-verify-code-init', params);
};
/**
* @desc 邮箱注册
*/
export const registerByEmail = (params) => {
return post('/app-api/member/auth/email-register', params);
};
/**
* @desc 邮箱登录
*/
export const loginByEmail = (params) => {
return post('/app-api/member/auth/email-login', params);
};
/**
* @desc 登录
*/
export const login = (params) => {
return post('/app-api/member/auth/weixin-mini-app-login', params);
};
/**
* @desc 注册
*/
export const register = (params) => {
return get('/front/user/login/register', params);
};
/**
* @desc 忘记密码
*/
export const forgetPassword = (params) => {
return post('/app-api/member/auth/password-reset', params);
};
+307
View File
@@ -0,0 +1,307 @@
<script setup>
import { ref } from 'vue';
import { forgetPassword, sendCodeToEmail } from './api';
// Password reset related variables
const email = ref('');
const newPassword = ref('');
const confirmPassword = ref('');
const verificationCode = ref('');
const codeBtnText = ref('Get Code');
const codeBtnDisabled = ref(false);
let countdownTimer = null;
// Email format validation
const validateEmail = (email) => {
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
return emailRegex.test(email);
};
// Get verification code
const getVerificationCode = async () => {
if (!email.value) {
uni.showToast({
title: 'Please enter email',
icon: 'none',
});
return;
}
if (!validateEmail(email.value)) {
uni.showToast({
title: 'Please enter a valid email',
icon: 'none',
});
return;
}
// Send verification code
try {
uni.showLoading({
title: 'Sending...',
mask: true,
});
const params = {
email: email.value,
register: false // Not for registration, but for password reset
};
const res = await sendCodeToEmail(params);
if (res && res.code === 0) {
uni.hideLoading();
uni.showToast({
title: 'Verification code sent',
icon: 'success',
});
// Start countdown
let timeLeft = 60;
codeBtnDisabled.value = true;
codeBtnText.value = `${timeLeft}s`;
countdownTimer = setInterval(() => {
timeLeft--;
codeBtnText.value = `${timeLeft}s`;
if (timeLeft <= 0) {
clearInterval(countdownTimer);
codeBtnText.value = 'Resend';
codeBtnDisabled.value = false;
}
}, 1000);
} else {
uni.hideLoading();
uni.showToast({
title: res.msg || 'Send failed',
icon: 'error',
});
}
} catch (error) {
uni.hideLoading();
uni.showToast({
title: error.message || 'Send failed, please try again',
icon: 'error',
});
}
};
// Submit password reset
const onResetPassword = async () => {
if (!email.value) {
uni.showToast({
title: 'Please enter email',
icon: 'none',
});
return;
}
if (!validateEmail(email.value)) {
uni.showToast({
title: 'Please enter a valid email',
icon: 'none',
});
return;
}
if (!verificationCode.value) {
uni.showToast({
title: 'Please enter verification code',
icon: 'none',
});
return;
}
if (!newPassword.value) {
uni.showToast({
title: 'Please enter new password',
icon: 'none',
});
return;
}
if (newPassword.value !== confirmPassword.value) {
uni.showToast({
title: 'Passwords do not match',
icon: 'none',
});
return;
}
if (newPassword.value.length < 6) {
uni.showToast({
title: 'Password must be at least 6 characters',
icon: 'none',
});
return;
}
try {
uni.showLoading({
title: 'Resetting password...',
mask: true,
});
// Call password reset API
const resetParams = {
email: email.value,
verificationCode: verificationCode.value,
password: newPassword.value,
confirmPassword: confirmPassword.value
};
const res = await forgetPassword(resetParams);
if (res && res.code === 0) {
uni.hideLoading();
uni.showToast({
title: 'Password reset successful',
icon: 'success',
});
// Navigate back to login page after success
setTimeout(() => {
uni.navigateBack();
}, 1500);
} else {
uni.hideLoading();
uni.showToast({
title: res.msg || 'Password reset failed',
icon: 'error',
});
}
} catch (error) {
uni.hideLoading();
uni.showToast({
title: error.message || 'Password reset failed, please try again',
icon: 'error',
});
}
};
// Clear input field
const clearInput = (type) => {
if (type === 'email') {
email.value = '';
} else if (type === 'newPassword') {
newPassword.value = '';
} else if (type === 'confirmPassword') {
confirmPassword.value = '';
} else if (type === 'verificationCode') {
verificationCode.value = '';
}
};
// Go back to login page
const goLoginPage = function() {
uni.navigateTo({
url: '/pages/login/index'
})
}
</script>
<template>
<view class="p-4 min-h-screen bg-white flex flex-col justify-center">
<!-- Title -->
<view class="mb-12 text-center">
<image src="/static/tabbar/find.png" class="w-20 h-20 mb-8" mode="aspectFit"></image>
<text class="block text-3xl font-bold text-gray-800 mb-4">RESET PASSWORD</text>
<text class="text-sm text-gray-500">Enter your email and new password</text>
</view>
<!-- Email input -->
<view class="mb-6">
<view class=" flex items-center h-12 bg-gray-100 rounded-lg px-6 gap-1 border border-solid border-round-theme">
<u-icon name="email" class="h-10" color="black" bold="true"></u-icon>
<input
class="w-full text-base text-gray-800 bg-transparent"
type="email"
placeholder="Email Address"
v-model="email"
/>
<view
v-if="email"
class="absolute right-6 w-8 h-8 flex items-center justify-center bg-gray-400 rounded-full text-black font-bold"
@tap="clearInput('email')"
>
×
</view>
</view>
</view>
<!-- Verification code input -->
<view class="mb-6 relative">
<view class=" flex items-center h-12 bg-gray-100 rounded-lg px-6 gap-1 border border-solid border-round-theme">
<u-icon name="chat" class="h-10" color="black" bold="true"></u-icon>
<input
class="w-full text-base text-gray-800 bg-transparent pr-32"
type="text"
placeholder="Verification Code"
v-model="verificationCode"
/>
</view>
<button
class="absolute right-2 top-1/2 transform -translate-y-1/2 h-10 px-4 bg-theme text-white text-xs rounded-full disabled:bg-gray-400 disabled:text-gray-300 flex items-center justify-center"
:disabled="codeBtnDisabled"
@tap="getVerificationCode"
>
{{ codeBtnText }}
</button>
</view>
<!-- New password input -->
<view class="mb-6">
<view class=" flex items-center h-12 bg-gray-100 rounded-lg px-6 gap-1 border border-solid border-round-theme">
<u-icon name="lock" class="h-10" color="black" bold="true"></u-icon>
<input
class="w-full text-base text-gray-800 bg-transparent"
type="password"
placeholder="New Password"
v-model="newPassword"
/>
<view
v-if="newPassword"
class="absolute right-6 w-8 h-8 flex items-center justify-center bg-gray-400 rounded-full text-white font-bold"
@tap="clearInput('newPassword')"
>
×
</view>
</view>
</view>
<!-- Confirm password input -->
<view class="mb-8">
<view class=" flex items-center h-12 bg-gray-100 rounded-lg px-6 gap-1 border border-solid border-round-theme">
<u-icon name="lock" class="h-10" color="black" bold="true"></u-icon>
<input
class="w-full text-base text-gray-800 bg-transparent"
type="password"
placeholder="Confirm Password"
v-model="confirmPassword"
/>
<view
v-if="confirmPassword"
class="absolute right-6 w-8 h-8 flex items-center justify-center bg-gray-400 rounded-full text-white font-bold"
@tap="clearInput('confirmPassword')"
>
×
</view>
</view>
</view>
<!-- Reset password button -->
<view
class="w-full h-12 bg-theme rounded-lg text-white text-xl flex items-center justify-center"
@click="onResetPassword"
>
<text>RESET PASSWORD</text>
</view>
<!-- Back to login link -->
<view class="flex justify-center items-center my-8 text-gray-500 text-sm">
<text>Remember your password?</text>
<text class="text-green-500 ml-2" @click="goLoginPage">Back to Sign in</text>
</view>
</view>
</template>
+256
View File
@@ -0,0 +1,256 @@
<script setup>
import { ref } from 'vue';
import { loginByEmail } from './api';
import { useUserStore } from '@/store/user.js';
const email = ref(''); // 邮箱
const password = ref(''); // 密码
const checked = ref(true); // 同意条款,默认勾选
const isLoading = ref(false); // 加载状态
const userStore = useUserStore();
// 邮箱格式验证
const validateEmail = (email) => {
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
return emailRegex.test(email);
};
// 登录函数
const onLogin = async() => {
if (!checked.value) {
uni.showToast({
title: 'Please agree to the user agreement',
icon: 'none',
duration: 2000,
});
return;
}
if (!email.value) {
uni.showToast({
title: 'Please enter email',
icon: 'none',
});
return;
}
if (!password.value) {
uni.showToast({
title: 'Please enter password',
icon: 'none',
});
return;
}
// 邮箱格式验证
if (!validateEmail(email.value)) {
uni.showToast({
title: 'Please enter a valid email',
icon: 'none',
});
return;
}
// 密码长度验证
if (password.value.length < 6) {
uni.showToast({
title: 'Password must be at least 6 characters',
icon: 'none',
});
return;
}
// 防止重复提交
if (isLoading.value) return;
isLoading.value = true;
try {
uni.showLoading({
title: 'Logging in...',
mask: true,
});
const params = {
email: email.value,
password: password.value
};
const res = await loginByEmail(params);
if (res && res.code === 0) { // 修改为code===0判断
// 存储用户信息到全局状态
userStore.setUserInfo(res.data);
userStore.setToken(res.data.accessToken);
userStore.setLoginStatus(true);
uni.showToast({
title: 'Login successful',
icon: 'success',
});
uni.switchTab({
url:'/pages/mine/index'
})
} else {
uni.showToast({
title: res.msg || 'Login failed',
icon: 'error',
});
}
} catch (error) {
console.error('Login error:', error);
uni.showToast({
title: error.message || 'Login failed, please try again',
icon: 'error',
});
} finally {
uni.hideLoading();
isLoading.value = false;
}
};
// 同意条款切换
const onChange = (e) => {
checked.value = e.detail.value; // 更新checked值
};
// 显示用户协议
const showAgreement = () => {
uni.showModal({
title: 'User Agreement',
content: 'Welcome to our service!\n\nThis agreement sets forth the terms and conditions for your use of our services, please read carefully.\n\n1. Terms of Service\n2. Privacy Policy\n3. Account Security\n4. Disclaimer\n\nContinuing to use means you agree to comply with these terms.',
showCancel: true,
confirmText: 'Agree',
cancelText: 'Cancel',
success: (res) => {
if (res.confirm) {
checked.value = true;
}
}
});
};
// 忘记密码
const forgetPassword = function() {
uni.navigateTo({
url: '/pages/login/changePassword'
});
};
//跳转到注册页面
const goRegisterPage = function() {
uni.navigateTo({
url:'/pages/login/register'
})
}
// 清空输入框
const clearInput = (type) => {
if (type === 'email') {
email.value = '';
} else if (type === 'password') {
password.value = '';
}
};
// 监听输入变化,清除错误状态
const onInputChange = (type) => {
if (type === 'email') {
// 移除邮箱错误状态
} else if (type === 'password') {
// 移除密码错误状态
}
};
</script>
<template>
<view class="h-[120vh] p-4 min-h-screen bg-white flex flex-col justify-center">
<!-- 标题 -->
<view class="mb-12 mt-20 text-center">
<image src="/static/tabbar/find.png" class="w-20 h-20 mb-8" mode="aspectFit"></image>
<text class="block text-3xl font-bold text-gray-800 mb-4">WELCOME BACK</text>
<text class="text-sm text-gray-500">Sign in to connect with Sweekar</text>
</view>
<!-- 邮箱输入 -->
<view class="mb-8">
<view class=" flex items-center h-12 bg-gray-100 rounded-lg px-6 gap-1 border border-solid border-round-theme">
<u-icon name="email" class="h-10" color="black" bold="true"></u-icon>
<input
class="w-full text-base text-gray-800 bg-transparent"
type="email"
placeholder="Email Address"
v-model="email"
@input="onInputChange('email')"
/>
<view
v-if="email"
class="absolute right-6 w-8 h-8 flex items-center justify-center bg-gray-400 rounded-full text-black font-bold"
@tap="clearInput('email')"
>
×
</view>
</view>
</view>
<!-- 密码输入 -->
<view class="mb-8">
<view class=" flex items-center h-12 bg-gray-100 rounded-lg px-6 gap-1 border border-solid border-round-theme">
<u-icon name="lock" class="h-10" color="black" bold="true"></u-icon>
<input
class="w-full text-base text-gray-800 bg-transparent"
type="password"
placeholder="Password"
v-model="password"
@input="onInputChange('password')"
/>
<view
v-if="password"
class="absolute right-6 w-8 h-8 flex items-center justify-center bg-gray-400 rounded-full text-white font-bold"
@tap="clearInput('password')"
>
×
</view>
</view>
</view>
<!-- 忘记密码链接 -->
<view class="flex justify-end mb-8">
<text class="text-blue-500 text-sm" @tap="forgetPassword">Forget Password?</text>
</view>
<!-- 登录按钮 -->
<view
class="w-full h-12 bg-theme rounded-lg text-white text-xl flex items-center justify-center "
:disabled="isLoading"
@click="onLogin"
>
<text v-if="!isLoading">SIGN IN</text>
<view v-else class="w-8 h-8 border-2 border-white border-t-transparent rounded-full animate-spin"></view>
</view>
<!-- 注册链接 -->
<view class="flex justify-center items-center my-8 text-gray-500 text-sm">
<text>Don't have an account?</text>
<text class="text-green-500 ml-2" @tap="goRegisterPage">Create one</text>
</view>
<!-- 同意条款 -->
<view class="mt-auto text-center">
<label class="flex items-center justify-center text-xs text-gray-500 leading-loose">
<checkbox
class="scale-75 mr-2"
:checked="checked"
@change="onChange"
/>
I have read and agree to the
<text class="text-green-500 underline" @tap="showAgreement"> User Agreement</text>
and
<text class="text-green-500 underline" @tap="showAgreement"> Privacy Policy</text>
</label>
</view>
</view>
</template>
+402
View File
@@ -0,0 +1,402 @@
<script setup>
import { ref } from 'vue';
import { register, sendCodeToEmail, loginByEmail } from './api';
import { useUserStore } from '@/store/user.js';
const userStore = useUserStore();
// Registration related variables
const registerEmail = ref(''); // Email for registration
const registerPassword = ref(''); // Password for registration
const confirmPassword = ref(''); // Confirm password
const verificationCode = ref(''); // Verification code
const codeBtnText = ref('Get Code');
const codeBtnDisabled = ref(false);
const checked = ref(true); // Agree to terms, default checked
let countdownTimer = null;
// Email format validation
const validateEmail = (email) => {
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
return emailRegex.test(email);
};
// Toggle agreement to terms
const onChange = (e) => {
checked.value = e.detail.value; // Update checked value
};
// 显示用户协议
const showAgreement = () => {
uni.showModal({
title: 'User Agreement',
content: 'Welcome to our service!\n\nThis agreement sets forth the terms and conditions for your use of our services, please read carefully.\n\n1. Terms of Service\n2. Privacy Policy\n3. Account Security\n4. Disclaimer\n\nContinuing to use means you agree to comply with these terms.',
showCancel: true,
confirmText: 'Agree',
cancelText: 'Cancel',
success: (res) => {
if (res.confirm) {
checked.value = true;
}
}
});
};
// 获取验证码
const getVerificationCode = async () => {
if (!registerEmail.value) {
uni.showToast({
title: 'Please enter email',
icon: 'none',
});
return;
}
if (!validateEmail(registerEmail.value)) {
uni.showToast({
title: 'Please enter a valid email',
icon: 'none',
});
return;
}
// Send verification code
try {
uni.showLoading({
title: 'Sending...',
mask: true,
});
const params = {
email: registerEmail.value,
register: true
};
const res = await sendCodeToEmail(params);
if (res && res.code === 0) {
uni.hideLoading();
uni.showToast({
title: 'Verification code sent',
icon: 'success',
});
// Start countdown
let timeLeft = 60;
codeBtnDisabled.value = true;
codeBtnText.value = `${timeLeft}s`;
countdownTimer = setInterval(() => {
timeLeft--;
codeBtnText.value = `${timeLeft}s`;
if (timeLeft <= 0) {
clearInterval(countdownTimer);
codeBtnText.value = 'Resend';
codeBtnDisabled.value = false;
}
}, 1000);
} else {
uni.hideLoading();
uni.showToast({
title: res.msg || 'Send failed',
icon: 'error',
});
}
} catch (error) {
uni.hideLoading();
uni.showToast({
title: error.message || 'Send failed, please try again',
icon: 'error',
});
}
};
// 注册提交
const onRegister = async () => {
if (!registerEmail.value) {
uni.showToast({
title: 'Please enter email',
icon: 'none',
});
return;
}
if (!validateEmail(registerEmail.value)) {
uni.showToast({
title: 'Please enter a valid email',
icon: 'none',
});
return;
}
if (!verificationCode.value) {
uni.showToast({
title: 'Please enter verification code',
icon: 'none',
});
return;
}
if (!registerPassword.value) {
uni.showToast({
title: 'Please enter password',
icon: 'none',
});
return;
}
if (registerPassword.value !== confirmPassword.value) {
uni.showToast({
title: 'Passwords do not match',
icon: 'none',
});
return;
}
if (registerPassword.value.length < 6) {
uni.showToast({
title: 'Password must be at least 6 characters',
icon: 'none',
});
return;
}
if (!checked.value) {
uni.showToast({
title: 'Please agree to the user agreement',
icon: 'none',
duration: 2000,
});
return;
}
try {
uni.showLoading({
title: 'Registering...',
mask: true,
});
// Call registration API
const registerParams = {
email: registerEmail.value,
verificationCode: verificationCode.value,
password: registerPassword.value,
confirmPassword: confirmPassword.value
};
const res = await register(registerParams);
if (res && res.code === 0) {
uni.hideLoading();
uni.showToast({
title: 'Registration successful',
icon: 'success',
});
// Auto login after successful registration
setTimeout(async () => {
try {
const loginRes = await loginByEmail({
email: registerEmail.value,
password: registerPassword.value
});
if (loginRes && loginRes.code === 0) {
// Store user info to global state
userStore.setUserInfo(loginRes.data);
userStore.setToken(loginRes.data.accessToken);
userStore.setLoginStatus(true);
uni.showToast({
title: 'Login successful',
icon: 'success',
});
// Navigate to home page
uni.switchTab({
url: '/pages/mine/index'
});
} else {
uni.showToast({
title: loginRes.msg || 'Auto login failed',
icon: 'none',
});
// Navigate to home page even if auto login fails, so user can login manually
uni.switchTab({
url: '/pages/mine/index'
});
}
} catch (error) {
console.error('Auto login failed:', error);
uni.showToast({
title: 'Auto login failed, please login manually',
icon: 'none',
});
// Navigate to home page
uni.switchTab({
url: '/pages/mine/index'
});
}
}, 1000);
} else {
uni.hideLoading();
uni.showToast({
title: res.msg || 'Registration failed',
icon: 'error',
});
}
} catch (error) {
uni.hideLoading();
uni.showToast({
title: error.message || 'Registration failed, please try again',
icon: 'error',
});
}
};
// Clear input field
const clearInput = (type) => {
if (type === 'registerEmail') {
registerEmail.value = '';
} else if (type === 'registerPassword') {
registerPassword.value = '';
} else if (type === 'confirmPassword') {
confirmPassword.value = '';
} else if (type === 'verificationCode') {
verificationCode.value = '';
}
};
//跳转到登录页面
//跳转到注册页面
const goLoginPage = function() {
uni.navigateTo({
url:'/pages/login/index'
})
}
</script>
<template>
<view class="p-4 min-h-screen bg-white flex flex-col justify-center">
<!-- 标题 -->
<view class="mb-12 text-center">
<image src="/static/tabbar/find.png" class="w-20 h-20 mb-8" mode="aspectFit"></image>
<text class="block text-3xl font-bold text-gray-800 mb-4">CREATE ACCOUNT</text>
<text class="text-sm text-gray-500">Join Sweekar to get started</text>
</view>
<!-- 注册邮箱输入 -->
<view class="mb-6">
<view class=" flex items-center h-12 bg-gray-100 rounded-lg px-6 gap-1 border border-solid border-round-theme">
<u-icon name="email" class="h-10" color="black" bold="true"></u-icon>
<input
class="w-full text-base text-gray-800 bg-transparent"
type="email"
placeholder="Email Address"
v-model="registerEmail"
/>
<view
v-if="registerEmail"
class="absolute right-6 w-8 h-8 flex items-center justify-center bg-gray-400 rounded-full text-black font-bold"
@tap="clearInput('registerEmail')"
>
×
</view>
</view>
</view>
<!-- 验证码输入 -->
<view class="mb-6 relative">
<view class=" flex items-center h-12 bg-gray-100 rounded-lg px-6 gap-1 border border-solid border-round-theme">
<u-icon name="chat" class="h-10" color="black" bold="true"></u-icon>
<input
class="w-full text-base text-gray-800 bg-transparent pr-32"
type="text"
placeholder="Verification Code"
v-model="verificationCode"
/>
</view>
<button
class="absolute right-2 top-1/2 transform -translate-y-1/2 h-10 px-4 bg-theme text-white text-xs rounded-full disabled:bg-gray-400 disabled:text-gray-300 flex items-center justify-center"
:disabled="codeBtnDisabled"
@tap="getVerificationCode"
>
{{ codeBtnText }}
</button>
</view>
<!-- 注册密码输入 -->
<view class="mb-6">
<view class=" flex items-center h-12 bg-gray-100 rounded-lg px-6 gap-1 border border-solid border-round-theme">
<u-icon name="lock" class="h-10" color="black" bold="true"></u-icon>
<input
class="w-full text-base text-gray-800 bg-transparent"
type="password"
placeholder="Password"
v-model="registerPassword"
/>
<view
v-if="registerPassword"
class="absolute right-6 w-8 h-8 flex items-center justify-center bg-gray-400 rounded-full text-white font-bold"
@tap="clearInput('registerPassword')"
>
×
</view>
</view>
</view>
<!-- 确认密码输入 -->
<view class="mb-8">
<view class=" flex items-center h-12 bg-gray-100 rounded-lg px-6 gap-1 border border-solid border-round-theme">
<u-icon name="lock" class="h-10" color="black" bold="true"></u-icon>
<input
class="w-full text-base text-gray-800 bg-transparent"
type="password"
placeholder="Confirm Password"
v-model="confirmPassword"
/>
<view
v-if="confirmPassword"
class="absolute right-6 w-8 h-8 flex items-center justify-center bg-gray-400 rounded-full text-white font-bold"
@tap="clearInput('confirmPassword')"
>
×
</view>
</view>
</view>
<!-- 注册按钮 -->
<view
class="w-full h-12 bg-theme rounded-lg text-white text-xl flex items-center justify-center"
@click="onRegister"
>
<text>SIGN UP</text>
</view>
<!-- 登录链接 -->
<view class="flex justify-center items-center my-8 text-gray-500 text-sm">
<text>Already have an account?</text>
<text class="text-green-500 ml-2" @click="goLoginPage">Sign in</text>
</view>
<!-- 同意条款 -->
<!-- <view class="mt-auto text-center">
<label class="flex items-center justify-center text-xs text-gray-500 leading-loose">
<checkbox
class="scale-75 mr-2"
:checked="checked"
@change="onChange"
/>
I have read and agree to the
<text class="text-green-500 underline" @tap="showAgreement"> User Agreement</text>
and
<text class="text-green-500 underline" @tap="showAgreement"> Privacy Policy</text>
</label>
</view> -->
</view>
</template>
+7
View File
@@ -0,0 +1,7 @@
import { get, post, put, dele } from '@/utils/request';
/**
* @desc 获取产品列表
*/
export const getProducts = (params) => {
return get('/api/products/', params)
}
+83
View File
@@ -0,0 +1,83 @@
<script setup>
import { ref, onMounted } from 'vue';
import { onLoad, onShow, onReady, onHide, onPullDownRefresh } from '@dcloudio/uni-app';
import CustomTabBar from '@/components/CustomTabBar.vue'
import { getProducts } from './api.js';
import { useUserStore } from '@/store/user.js';
import { useI18n } from 'vue-i18n';
const { t, locale } = useI18n();
const userStore = useUserStore();
/**
* @desc 跳转至详情页面
*/
const toDetailPage = (productId) => {
uni.navigateTo({
url: '/pages/product/detail',
});
};
//获取首页数据
const getProductList = async()=>{
const res = await getProducts();
productData.value=res.data;
console.log("商品数据",productData.value);
}
onLoad(()=>{
});
// 模拟数据
/**
* @desc 处理预订事件
*/
const handleBook = (productId) => {
// 这里可以添加预订逻辑,比如跳转到详情页
uni.navigateTo({
url: `/pages/product/detail?id=${productId}`,
});
};
</script>
<template>
<view class="h-[100vh] bg-[#9C032D]">
<CustomTabBar />
</view>
</template>
<style scoped lang="scss">
:deep(.u-count-down__text) {
color: #ab002d !important;
font-size: 13px !important;
}
.navigation {
border-bottom: 1px solid #f2f2f2;
}
.navi-title-center {
left: 50%;
transform: translateX(-50%);
}
.line {
transition: 0.3s all;
}
.search {
:deep(.u-search) {
flex: 1;
}
}
</style>
+7
View File
@@ -0,0 +1,7 @@
import { get, post, put, dele } from '@/utils/request';
/**
* @desc 获取产品列表
*/
export const getProducts = (params) => {
return get('/api/products/', params)
}
+83
View File
@@ -0,0 +1,83 @@
<script setup>
import { ref, onMounted } from 'vue';
import { onLoad, onShow, onReady, onHide, onPullDownRefresh } from '@dcloudio/uni-app';
import CustomTabBar from '@/components/CustomTabBar.vue'
import { getProducts } from './api.js';
import { useUserStore } from '@/store/user.js';
import { useI18n } from 'vue-i18n';
const { t, locale } = useI18n();
const userStore = useUserStore();
/**
* @desc 跳转至详情页面
*/
const toDetailPage = (productId) => {
uni.navigateTo({
url: '/pages/product/detail',
});
};
//获取首页数据
const getProductList = async()=>{
const res = await getProducts();
productData.value=res.data;
console.log("商品数据",productData.value);
}
onLoad(()=>{
});
// 模拟数据
/**
* @desc 处理预订事件
*/
const handleBook = (productId) => {
// 这里可以添加预订逻辑,比如跳转到详情页
uni.navigateTo({
url: `/pages/product/detail?id=${productId}`,
});
};
</script>
<template>
<view class="h-[100vh] bg-[#9C032D]">
<CustomTabBar />
</view>
</template>
<style scoped lang="scss">
:deep(.u-count-down__text) {
color: #ab002d !important;
font-size: 13px !important;
}
.navigation {
border-bottom: 1px solid #f2f2f2;
}
.navi-title-center {
left: 50%;
transform: translateX(-50%);
}
.line {
transition: 0.3s all;
}
.search {
:deep(.u-search) {
flex: 1;
}
}
</style>
+23 -3
View File
@@ -1,7 +1,27 @@
import { get, post, put, dele } from '@/utils/request';
/**
* @desc 获取产品列表
* @desc 上传头像
*/
export const getProducts = (params) => {
return get('/api/products/', params)
export const uploadAvatar = (params) => {
return post('/app-api/member/user/upload-avatar', params)
}
/**
* @desc 昵称修改
*/
export const updateNickname = (params) => {
return put('/app-api/member/user/update-nickname', params)
}
/**
* @desc 用户登出
*/
export const userLogout = (params) => {
return post('/app-api/member/auth/logout', params)
}
/**
* @desc 用户个人信息
*/
export const getUserInfo = (params) => {
return get('/app-api/member/user/get', params)
}
+483 -85
View File
@@ -1,113 +1,511 @@
<script setup>
import { ref, onMounted, getCurrentInstance, nextTick } from 'vue';
import { onLoad, onShow, onReady, onHide, onPullDownRefresh } from '@dcloudio/uni-app';
import CustomTabBar from '@/components/CustomTabBar.vue'
import { getSystemSafeArea, getSystemInfo, isEmpty, showToast, showLoadingToast, closeToast } from '@/common/common.js';
import LoginPopup from '@/components/login-popup.vue';
import { getProducts } from './api.js';
import { useUserStore } from '@/store/user.js';
import { useI18n } from 'vue-i18n';
const { t, locale } = useI18n();
const props = defineProps(['status']);
const { proxy } = getCurrentInstance();
const userStore = useUserStore();
const tabList = ref([]); //tab列表
const tabsIndex = ref(0); //当前选中的tab索引
// const modelTypeList = ref([]);
const tabsLeft = ref(0); //下划线移动的距离
const finished = ref(false); //数据是否全部加载完成
const windowWidth = ref(0); //tab元素的宽度
const orderRows = ref([]); //订单列表
const showLogin = ref(false); //显示登录
const triggered = ref(false); //是否下拉刷新状态,true为是
const loading = ref(false); // 添加loading状态
const productData = ref();
const scrollHeight = ref(0); //scroll-view滚动高度
const pageView = ref({});
/**
* @desc 获取可视内容高度
*/
const getContentHeight = (e) => {
pageView.value = e;
};
import {
ref,
onMounted,
getCurrentInstance,
nextTick
} from 'vue';
import {
onLoad,
onShow,
onReady,
onHide,
onPullDownRefresh
} from '@dcloudio/uni-app';
import CustomTabBar from '@/components/CustomTabBar.vue'
import {
getUserInfo,updateNickname,uploadAvatar
} from './api.js';
import {
useUserStore
} from '@/store/user.js';
import {
useI18n
} from 'vue-i18n';
const {
t,
locale
} = useI18n();
const props = defineProps(['status']);
const {
proxy
} = getCurrentInstance();
/**
* @desc 跳转至详情页面
*/
const toDetailPage = (productId) => {
uni.navigateTo({
url: '/pages/product/detail',
});
};
//获取首页数据
const getProductList = async()=>{
const res = await getProducts();
const userStore = useUserStore();
productData.value=res.data;
console.log("商品数据",productData.value);
}
// 控制登录弹窗显示
const toggleLoginPopup = () => {
showLogin.value = !showLogin.value;
};
//用户信息
const userName = ref();
onLoad(()=>{
// getProductList();
// 设备数据数组
const deviceList = ref([
{
id: 1,
name: 'Sweekar Alpha',
level: 'Lv.5 Childhood',
battery: '92%',
bluetooth: 'ON',
isCurrent: true
},
{
id: 2,
name: 'Little Beta',
level: 'Lv.1 Infancy',
battery: '92%',
bluetooth: 'ON',
isCurrent: false
}
]);
});
/**
* @desc 处理设备点击事件
*/
const handleDeviceClick = (clickedDeviceId) => {
deviceList.value.forEach(device => {
device.isCurrent = device.id === clickedDeviceId;
});
};
// 模拟数据
const userData = ref();
//获取首页数据
const getUserInformation = async () => {
const res = await getUserInfo();
userData.value = res.data;
userStore.updateUserInfo('nickname', userData.value.nickname);
console.log('用户名', userStore.userName);
userName.value = userData.value.nickname;
/**
* @desc 处理预订事件
*/
const handleBook = (productId) => {
// 这里可以添加预订逻辑,比如跳转到详情页
uni.navigateTo({
url: `/pages/product/detail?id=${productId}`,
});
};
}
//更改用户名
const changeName = async(userName) =>{
const res = await updateNickname(userName);
if (res.data){
uni.showToast({
title:'success',
duration:2000
})
}else {
uni.showToast({
title:'fail',
duration:2000
})
}
}
// 选择并上传头像
const chooseAndUploadAvatar = async () => {
uni.chooseImage({
count: 1, // 最多选择一张图片
sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图
sourceType: ['album', 'camera'], // 从相册选择或拍照
success: async (res) => {
const tempFilePaths = res.tempFilePaths;
if (tempFilePaths.length > 0) {
const filePath = tempFilePaths[0];
// 显示上传中提示
uni.showLoading({
title: 'Uploading...'
});
try {
const uploadRes = await new Promise((resolve, reject) => {
uni.uploadFile({
url: 'https://takway-ai.top/test/app-api/member/user/upload-avatar',
filePath: filePath,
name: 'avatarFile',
header: {
'Authorization': `Bearer ${userStore.token}`
},
success: (uploadResult) => {
try {
const data = JSON.parse(uploadResult.data);
resolve(data);
} catch (e) {
console.error('Failed to parse upload response:', uploadResult.data);
reject(new Error(`Failed to parse response: ${uploadResult.data}`));
}
},
fail: (error) => {
console.error('Upload failed:', error);
reject(error);
}
});
});
if (uploadRes && uploadRes.code === 0) { // 假设成功状态码为0
// 更新用户数据中的头像URL
userData.value.avatar = uploadRes.data;
userStore.updateUserInfo('avatar', uploadRes.data);
getUserInformation();
uni.showToast({
title: 'Upload success',
icon: 'success'
});
} else {
uni.showToast({
title: uploadRes?.message || 'Upload failed',
icon: 'none'
});
}
} catch (error) {
console.error('Upload error:', error);
uni.showToast({
title: error?.message || 'Upload failed',
icon: 'none'
});
} finally {
uni.hideLoading();
}
}
},
fail: (error) => {
console.error('Choose image error:', error);
uni.showToast({
title: 'Failed to select image',
icon: 'none'
});
}
});
}
/**
* @desc 跳转至登录页面
*/
const toLoginPage = () => {
userStore.logout()
uni.navigateTo({
url: '/pages/login/index',
});
};
/**
* @desc 跳转至登录页面
*/
const toControlPage = ()=> {
uni.navigateTo({
url: '/pages/control/index',
});
};
onMounted(() => {
// getUserInformation();
});
onLoad(() => {
// getUserInformation();
});
onShow(()=>{
getUserInformation();
})
// 测试缓存中的数据
const test = () => {
console.log('登录数据', userStore.token);
}
//弹窗控制
const show = ref(false)
const newNickname = ref('')
const showPopup = () => {
newNickname.value = userName.value || ''
show.value = true
}
// 关闭弹窗方法
const hidePopup = () => {
show.value = false
}
// 确认修改用户名
const confirmUpdateNickname = async () => {
if (!newNickname.value.trim()) {
uni.showToast({
title: 'Username cannot be empty',
icon: 'none'
})
return
}
try {
const res = await updateNickname({ nickname: newNickname.value })
if (res.data) {
userName.value = newNickname.value
userStore.updateUserInfo('nickname', newNickname.value)
hidePopup()
uni.showToast({
title: 'Update success',
icon: 'success'
})
} else {
uni.showToast({
title: 'Update failed',
icon: 'none'
})
}
} catch (error) {
uni.showToast({
title: 'Update failed',
icon: 'none'
})
}
}
</script>
<template>
<view class="h-[100vh] bg-[#9C032D]">
<view class="bg-[#fff]">
<!-- 页面内容区域 -->
<view class="flex flex-col">
<!-- 个人页头部区域 -->
<view class="profile-header px-4 pt-4 bg-gradient-to-r from-blue-500 to-purple-600">
<view class="flex items-center text-thme">
<view
class="w-20 h-20 rounded-full border-2 border-theme border-solid mr-4 bg-[#ddd] overflow-hidden">
<!-- 直接使用原生 image 标签 -->
<image :src="userData?.avatarUrl || '/static/image/head.png'" class="w-full h-full object-cover" @click="chooseAndUploadAvatar" />
</view>
<CustomTabBar />
</view>
<view class="flex flex-col justify-center items-start gap-1">
<view class="font-bold text-lg text-black" v-if="!userStore.isLogin" @click="toLoginPage">login now</view>
<view class="font-bold text-lg text-black" v-if="userStore.isLogin" @click="showPopup">{{userName}}</view>
<view class="text-sm opacity-80 text-black">Sweekar Guardian since 2023</view>
<!-- 在线状态 -->
<view class="border-round-theme rounded-lg flex justify-center p-1 items-center">
<text class="text-[10px]">Online</text>
</view>
</view>
</view>
</view>
<!-- 功能区域分割线 -->
<uv-divider line-color="#333333" hairline="false"></uv-divider>
<!-- 功能列表 -->
<view class="p-4 flex flex-col">
<!-- MY DEVICES -->
<view class="flex flex-col p-1 gap-3">
<!-- title -->
<view class="flex gap-1 justify-between">
<view class="flex gap-2 items-center">
<text class="font-bold">|</text>
<text class="text-sm font-bold">MY DEVICES</text>
</view>
<text class="text-sm text-[#808080]">{{deviceList.length}} Active</text>
</view>
<!-- 功能模块 -->
<view
v-for="(device, index) in deviceList"
:key="device.id"
class="border-round-theme rounded-lg flex flex-col justify-center items-start p-4 gap-2 cursor-pointer"
:class="device.isCurrent?'shadow-[4px_4px_1px_0_rgba(0,0,0,1)]':''"
@click="handleDeviceClick(device.id)"
>
<!-- 上半部分 -->
<view class="flex items-center gap-2 w-full">
<!-- 图标部分 -->
<view
class="border-round-theme bg-[#ddd] rounded-lg w-10 h-10 flex justify-center items-center">
<u-icon name="phone"></u-icon>
</view>
<!-- 设备信息 -->
<view class="flex flex-col flex-1">
<text class="font-bold text-[16px] break-words">{{device.name}}</text>
<text class="text-xs text-[#808080]">{{device.level}}</text>
</view>
<!-- 电量和蓝牙 -->
<view class="flex">
<!-- tag -->
<view
v-if="device.isCurrent"
class="flex justify-center items-center border-round-theme bg-theme h-4 w-10 rounded-full ">
<text class="text-[8px] text-white">CURRENT</text>
</view>
<view
class="border-round-theme rounded-lg w-10 h-10 flex flex-col justify-center items-center mr-1">
<u-icon name="phone"></u-icon>
<text class="text-[8px]">{{device.battery}}</text>
</view>
<view
class="border-round-theme rounded-lg w-10 h-10 flex flex-col justify-center items-center mr-1">
<u-icon name="phone"></u-icon>
<text class="text-[8px]">{{device.bluetooth}}</text>
</view>
</view>
</view>
<!-- 底部按钮 -->
<view class="w-full" v-if="device.isCurrent">
<view class="border-round-theme rounded-lg bg-theme flex justify-center items-center p-2 gap-1" @click="toControlPage()">
<u-icon name="list" color="#fff"></u-icon>
<text class="text-white text-sm">CONTROL CONSOLE</text>
</view>
</view>
</view>
<!-- 添加模块 -->
<view class="border border-dashed border-[#808080] rounded-lg flex justify-center items-center p-2 gap-2 cursor-pointer">
<uv-icon name="plus" color="#808080"></uv-icon>
<text class="text-[#808080]">Link New Sweekar</text>
</view>
<!-- GENERAL -->
<view class="flex flex-col p-1 gap-3">
<!-- title -->
<view class="flex gap-1 justify-between">
<view class="flex gap-2 items-center">
<text class="font-bold">|</text>
<text class="text-sm font-bold">GENERAL</text>
</view>
</view>
<!-- 功能模块 -->
<view class="flex flex-col border border-round-theme rounded-lg p-4">
<view class="flex justify-between">
<!-- icon + name -->
<view class="flex gap-2">
<uv-icon name="account" size="20" bold="true"></uv-icon>
<text class="font-bold text-sm"> Account Info</text>
</view>
<uv-icon name="arrow-right" size="20" bold="true"></uv-icon>
</view>
<uv-divider line-color="#808080" hairline="false"></uv-divider>
<view class="flex justify-between">
<!-- icon + name -->
<view class="flex gap-2">
<uv-icon name="setting" size="20" bold="true"></uv-icon>
<text class="font-bold text-sm"> App Settings</text>
</view>
<uv-icon name="arrow-right" size="20" bold="true"></uv-icon>
</view>
<uv-divider line-color="#808080" hairline="false"></uv-divider>
<view class="flex justify-between">
<!-- icon + name -->
<view class="flex gap-2">
<uv-icon name="empty-permission" size="20" bold="true"></uv-icon>
<text class="font-bold text-sm"> Privacy & Data</text>
</view>
<uv-icon name="arrow-right" size="20" bold="true"></uv-icon>
</view>
</view>
</view>
<!-- SUPPORT -->
<view class="flex flex-col p-1 gap-3">
<!-- title -->
<view class="flex gap-1 justify-between">
<view class="flex gap-2 items-center">
<text class="font-bold">|</text>
<text class="text-sm font-bold">SUPPORT</text>
</view>
</view>
<!-- 功能模块 -->
<view class="flex flex-col border border-round-theme rounded-lg p-4">
<view class="flex justify-between">
<!-- icon + name -->
<view class="flex gap-2">
<uv-icon name="question-circle" size="20" bold="true"></uv-icon>
<text class="font-bold text-sm"> Help Center</text>
</view>
<uv-icon name="arrow-right" size="20" bold="true"></uv-icon>
</view>
<uv-divider line-color="#808080" hairline="false" ></uv-divider>
<view class="flex justify-between" @click="toLoginPage">
<!-- icon + name -->
<view class="flex gap-2">
<uv-icon name="lock" size="20" bold="true"></uv-icon>
<text class="font-bold text-sm"> {{ userStore.isLogin ? 'Log Out' : 'Log In' }}</text>
</view>
<uv-icon name="arrow-right" size="20" bold="true"></uv-icon>
</view>
</view>
</view>
</view>
</view>
</view>
<u-popup :show="show" @close="hidePopup" round="10" :closeable="true">
<view class="p-6">
<view class="text-lg font-bold mb-4 text-center">Edit Username</view>
<input
v-model="newNickname"
class="border border-gray-300 rounded-lg p-3 mb-4"
placeholder="Enter new username"
maxlength="20"
/>
<view class="flex gap-3">
<button
class="flex-1 py-2 rounded-lg bg-gray-200 text-gray-700"
@click="hidePopup"
>
Cancel
</button>
<button
class="flex-1 py-2 rounded-lg bg-theme text-white"
@click="confirmUpdateNickname"
>
Confirm
</button>
</view>
</view>
</u-popup>
<CustomTabBar />
</view>
</template>
<style scoped lang="scss">
:deep(.u-count-down__text) {
color: #ab002d !important;
font-size: 13px !important;
}
:deep(.u-count-down__text) {
color: #ab002d !important;
font-size: 13px !important;
}
.navigation {
border-bottom: 1px solid #f2f2f2;
}
.navigation {
border-bottom: 1px solid #f2f2f2;
}
.navi-title-center {
left: 50%;
transform: translateX(-50%);
}
.navi-title-center {
left: 50%;
transform: translateX(-50%);
}
.line {
transition: 0.3s all;
}
.line {
transition: 0.3s all;
}
.search {
:deep(.u-search) {
flex: 1;
}
}
.search {
:deep(.u-search) {
flex: 1;
}
}
.profile-header {
min-height: 200rpx;
display: flex;
align-items: center;
}
</style>
+3 -33
View File
@@ -1,45 +1,16 @@
<script setup>
import { ref, onMounted, getCurrentInstance, nextTick } from 'vue';
import { ref, onMounted } from 'vue';
import { onLoad, onShow, onReady, onHide, onPullDownRefresh } from '@dcloudio/uni-app';
import CustomTabBar from '@/components/CustomTabBar.vue'
import { getSystemSafeArea, getSystemInfo, isEmpty, showToast, showLoadingToast, closeToast } from '@/common/common.js';
import LoginPopup from '@/components/login-popup.vue';
import { getProducts } from './api.js';
import { useUserStore } from '@/store/user.js';
import { useI18n } from 'vue-i18n';
const { t, locale } = useI18n();
const props = defineProps(['status']);
const { proxy } = getCurrentInstance();
const userStore = useUserStore();
const tabList = ref([]); //tab列表
const tabsIndex = ref(0); //当前选中的tab索引
// const modelTypeList = ref([]);
const tabsLeft = ref(0); //下划线移动的距离
const finished = ref(false); //数据是否全部加载完成
const windowWidth = ref(0); //tab元素的宽度
const orderRows = ref([]); //订单列表
const showLogin = ref(false); //显示登录
const triggered = ref(false); //是否下拉刷新状态,true为是
const loading = ref(false); // 添加loading状态
const productData = ref();
const scrollHeight = ref(0); //scroll-view滚动高度
const pageView = ref({});
/**
* @desc 获取可视内容高度
*/
const getContentHeight = (e) => {
pageView.value = e;
};
/**
* @desc 跳转至详情页面
@@ -59,7 +30,6 @@ const getProductList = async()=>{
onLoad(()=>{
// getProductList();
});
+1 -1
View File
@@ -3,7 +3,7 @@ import { ref, onMounted, getCurrentInstance, nextTick } from 'vue';
import { onLoad, onShow, onReady, onHide, onPullDownRefresh } from '@dcloudio/uni-app';
import CustomTabBar from '@/components/CustomTabBar.vue'
import { getSystemSafeArea, getSystemInfo, isEmpty, showToast, showLoadingToast, closeToast } from '@/common/common.js';
import LoginPopup from '@/components/login-popup.vue';
import LoginPopup from '@/components/login.vue';
import { getProducts } from './api.js';
import { useUserStore } from '@/store/user.js';
Binary file not shown.

After

Width:  |  Height:  |  Size: 5.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.2 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 5.4 KiB

After

Width:  |  Height:  |  Size: 5.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.4 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 4.0 KiB

After

Width:  |  Height:  |  Size: 4.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.0 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 4.7 KiB

After

Width:  |  Height:  |  Size: 4.9 KiB

+160 -59
View File
@@ -1,27 +1,77 @@
// 引用pinia商店
import { ref, reactive } from 'vue';
import { ref, computed } from 'vue';
import { defineStore } from 'pinia';
import { parse, stringify } from 'zipson';
export const useUserStore = defineStore(
'user',
() => {
const userInfo = ref({});
const platform = ref('');
const userToken = ref('');
// 用户基础信息
const userInfo = ref({
areaCode: '',
avatar: '',
birthday: null,
email: null,
gender: null,
mobile: '',
nickName: '',
trueName: null,
userId: null,
});
// 认证相关信息
const token = ref('');
const isLogin = ref(false);
// 平台配置信息
const platform = ref('');
const currency = ref('HKD');
const lang = ref('');
// 客服联系方式
const kfTelCN = ref('');
const kfTelHK = ref('');
const wxLink = ref('');
const lang = ref('');
const setProfile = (val) => {
userInfo.value = {
...val,
};
console.log(userInfo.value);
// 计算属性 - 是否已登录
const isLoggedIn = computed(() => isLogin.value && token.value !== '');
// 计算属性 - 用户头像
const userAvatar = computed(() => userInfo.value.avatar || '/static/avatar.png');
// 计算属性 - 用户昵称
const userName = computed(() => userInfo.value.nickName || userInfo.value.trueName || '游客');
// 设置用户信息
const setUserInfo = (data) => {
if (data && typeof data === 'object') {
userInfo.value = {
...userInfo.value,
...data,
};
}
};
//清理用户信息,退出时使用
const clearProfile = () => {
// 设置认证令牌
const setToken = (tokenValue) => {
token.value = tokenValue || '';
isLogin.value = !!tokenValue;
};
// 设置登录状态
const setLoginStatus = (status) => {
isLogin.value = Boolean(status);
};
// 用户登录 - 合并设置用户信息和令牌
const login = (userData, accessToken) => {
setUserInfo(userData);
setToken(accessToken);
setLoginStatus(true);
};
// 用户登出 - 清理所有用户相关数据
const logout = () => {
userInfo.value = {
areaCode: '',
avatar: '',
@@ -33,80 +83,131 @@ export const useUserStore = defineStore(
trueName: null,
userId: null,
};
token.value = '';
isLogin.value = false;
};
// 更新用户特定字段
const updateUserInfo = (field, value) => {
if (userInfo.value.hasOwnProperty(field)) {
userInfo.value[field] = value;
}
};
// 批量更新用户信息
const batchUpdateUserInfo = (updates) => {
if (updates && typeof updates === 'object') {
Object.keys(updates).forEach(key => {
if (userInfo.value.hasOwnProperty(key)) {
userInfo.value[key] = updates[key];
}
});
}
};
// 获取用户权限列表(如果有的话)
const getUserPermissions = computed(() => {
// 这里可以根据实际业务逻辑返回用户权限
return userInfo.value.permissions || [];
});
// 检查用户是否有特定权限
const hasPermission = (permission) => {
if (!isLoggedIn.value) return false;
return getUserPermissions.value.includes(permission);
};
return {
isLogin,
// 状态
userInfo,
userToken,
token,
isLogin,
platform,
currency,
kfTelCN,
kfTelHK,
wxLink,
lang,
setProfile,
clearProfile,
// 计算属性
isLoggedIn,
userAvatar,
userName,
getUserPermissions,
// 动作
setUserInfo,
setToken,
setLoginStatus,
login,
logout,
updateUserInfo,
batchUpdateUserInfo,
hasPermission,
};
},
{
persist: {
key: 'user-store', // 自定义存储键名
storage: {
getItem(key) {
return uni.getStorageSync(key);
try {
const storedData = uni.getStorageSync(key);
return storedData;
} catch (error) {
console.error('读取用户存储数据失败:', error);
return null;
}
},
setItem(key, value) {
uni.setStorageSync(key, value);
try {
uni.setStorageSync(key, value);
} catch (error) {
console.error('保存用户数据失败:', error);
}
},
},
serializer: {
deserialize: parse,
serialize: stringify,
deserialize: (data) => {
try {
return parse(data);
} catch (error) {
console.error('反序列化用户数据失败:', error);
return null;
}
},
serialize: (data) => {
try {
return stringify(data);
} catch (error) {
console.error('序列化用户数据失败:', error);
return '{}';
}
},
},
// 指定需要持久化的状态
paths: ['userInfo', 'token', 'isLogin', 'platform', 'currency', 'kfTelCN', 'kfTelHK', 'wxLink', 'lang'],
},
}
);
/*
页面内使用pinia
使用示例:
1. 在组件中导入
import { useUserStore } from '@/store/user.js'
1、引用你定义的store实例
import { useUserStore } from '@/stores/user'
2. 使用方式
const userStore = useUserStore();
2、实例化useUserStore
const user = useUserStore()
// 获取计算属性
const { isLoggedIn, userName } = storeToRefs(userStore);
3、引入 storeToRefs 用于 给实例的属性创建refs,即响应式
import { storeToRefs } from 'pinia'
例如:const {count} = storeToRefs(user)
count.value 此时为响应式
// 调用动作
userStore.login(userData, accessToken);
userStore.logout();
4、修改state 方式共两种 如下
user.count++
4-1、
// 带自动补全 ✨
user.$patch({ count: counter.count + 1 })
$patch()可批量修改state的属性值
例如:
批量修改
const pathState = () => {
store.$patch({
user: { name: 'ks', age: 20 },
});
};
其他操作state的方法如下:
替换State
const replaceState = () => {
store.$state.user = { age: 20, name: 'eee', sex: 'women' };
};
重置state的值
const reset = () => {
store.$reset();
};
4-2、
// 或使用 action 代替
user.increment()
*/
// 检查权限
if (userStore.hasPermission('admin')) {
// 执行管理员操作
}
*/
+7
View File
@@ -0,0 +1,7 @@
## 1.0.2(2023-07-02)
uv-action-sheet 由于弹出层uv-popup的修改,打开和关闭方法更改,详情参考文档:https://www.uvui.cn/components/actionSheet.html
## 1.0.1(2023-05-16)
1. 优化组件依赖,修改后无需全局引入,组件导入即可使用
2. 优化部分功能
## 1.0.0(2023-05-10)
uv-action-sheet 底部操作菜单
@@ -0,0 +1,50 @@
export default {
props: {
// 标题,有值则显示,同时会显示关闭按钮
title: {
type: String,
default: ''
},
// 选项上方的描述信息
description: {
type: String,
default: ''
},
// 数据
actions: {
type: Array,
default: () => []
},
// 取消按钮的文字,不为空时显示按钮
cancelText: {
type: String,
default: ''
},
// 点击某个菜单项时是否关闭弹窗
closeOnClickAction: {
type: Boolean,
default: true
},
// 处理底部安全区(默认true)
safeAreaInsetBottom: {
type: Boolean,
default: true
},
// 小程序的打开方式
openType: {
type: String,
default: ''
},
// 点击遮罩是否允许关闭 (默认true)
closeOnClickOverlay: {
type: Boolean,
default: true
},
// 圆角值
round: {
type: [Boolean, String, Number],
default: 0
},
...uni.$uv?.props?.actionSheet
}
}
@@ -0,0 +1,280 @@
<template>
<uv-popup
ref="popup"
mode="bottom"
:safeAreaInsetBottom="safeAreaInsetBottom"
:round="round"
:close-on-click-overlay="closeOnClickOverlay"
@change="popupChange"
>
<view class="uv-action-sheet">
<view
class="uv-action-sheet__header"
v-if="title"
>
<text class="uv-action-sheet__header__title uv-line-1">{{title}}</text>
<view
class="uv-action-sheet__header__icon-wrap"
@tap.stop="cancel"
>
<uv-icon
name="close"
size="17"
color="#c8c9cc"
bold
></uv-icon>
</view>
</view>
<text
class="uv-action-sheet__description"
:style="[{
marginTop: `${title && description ? 0 : '18px'}`
}]"
v-if="description"
>{{description}}</text>
<slot>
<uv-line v-if="description"></uv-line>
<view class="uv-action-sheet__item-wrap">
<view v-for="(item, index) in actions" :key="index">
<!-- #ifdef MP -->
<button
class="uv-reset-button"
:openType="item.openType"
@getuserinfo="onGetUserInfo"
@contact="onContact"
@getphonenumber="onGetPhoneNumber"
@error="onError"
@launchapp="onLaunchApp"
@opensetting="onOpenSetting"
:lang="lang"
:session-from="sessionFrom"
:send-message-title="sendMessageTitle"
:send-message-path="sendMessagePath"
:send-message-img="sendMessageImg"
:show-message-card="showMessageCard"
:app-parameter="appParameter"
@tap="selectHandler(index)"
:hover-class="!item.disabled && !item.loading ? 'uv-action-sheet--hover' : ''"
>
<!-- #endif -->
<view
class="uv-action-sheet__item-wrap__item"
@tap.stop="selectHandler(index)"
:hover-class="!item.disabled && !item.loading ? 'uv-action-sheet--hover' : ''"
:hover-stay-time="150"
>
<template v-if="!item.loading">
<text
class="uv-action-sheet__item-wrap__item__name"
:style="[itemStyle(index)]"
>{{ item.name }}</text>
<text
v-if="item.subname"
class="uv-action-sheet__item-wrap__item__subname"
>{{ item.subname }}</text>
</template>
<uv-loading-icon
v-else
custom-class="van-action-sheet__loading"
size="18"
mode="circle"
/>
</view>
<!-- #ifdef MP -->
</button>
<!-- #endif -->
<uv-line v-if="index !== actions.length - 1"></uv-line>
</view>
</view>
</slot>
<uv-gap
bgColor="#eaeaec"
height="6"
v-if="cancelText"
></uv-gap>
<view hover-class="uv-action-sheet--hover">
<text
@touchmove.stop.prevent
:hover-stay-time="150"
v-if="cancelText"
class="uv-action-sheet__cancel-text"
@tap="cancel"
>{{cancelText}}</text>
</view>
</view>
</uv-popup>
</template>
<script>
import mpMixin from '@/uni_modules/uv-ui-tools/libs/mixin/mpMixin.js'
import mixin from '@/uni_modules/uv-ui-tools/libs/mixin/mixin.js'
import button from '@/uni_modules/uv-ui-tools/libs/mixin/button.js'
import openType from '@/uni_modules/uv-ui-tools/libs/mixin/openType.js'
import props from './props.js';
/**
* ActionSheet 操作菜单
* @description 本组件用于从底部弹出一个操作菜单,供用户选择并返回结果。本组件功能类似于uni的uni.showActionSheetAPI,配置更加灵活,所有平台都表现一致。
* @tutorial https://www.uvui.cn/components/actionSheet.html
* @property {Boolean} show 操作菜单是否展示 (默认 false )
* @property {String} title 操作菜单标题
* @property {String} description 选项上方的描述信息
* @property {Array<Object>} actions 按钮的文字数组,见官方文档示例
* @property {String} cancelText 取消按钮的提示文字,不为空时显示按钮
* @property {Boolean} closeOnClickAction 点击某个菜单项时是否关闭弹窗 (默认 true )
* @property {Boolean} safeAreaInsetBottom 处理底部安全区 (默认 true )
* @property {String} openType 小程序的打开方式 (contact | launchApp | getUserInfo | openSetting |getPhoneNumber |error )
* @property {Boolean} closeOnClickOverlay 点击遮罩是否允许关闭 (默认 true )
* @property {String} lang 指定返回用户信息的语言,zh_CN 简体中文,zh_TW 繁体中文,en 英文
* @property {String} sessionFrom 会话来源,openType="contact"时有效
* @property {String} sendMessageTitle 会话内消息卡片标题,openType="contact"时有效
* @property {String} sendMessagePath 会话内消息卡片点击跳转小程序路径,openType="contact"时有效
* @property {String} sendMessageImg 会话内消息卡片图片,openType="contact"时有效
* @property {Boolean} showMessageCard 是否显示会话内消息卡片,设置此参数为 true,用户进入客服会话会在右下角显示"可能要发送的小程序"提示,用户点击后可以快速发送小程序消息,openType="contact"时有效 (默认 false )
* @property {String} appParameter 打开 APP 时,向 APP 传递的参数,openType=launchApp 时有效
*
* @event {Function} select 点击ActionSheet列表项时触发
* @event {Function} close 点击取消按钮时触发
* @event {Function} getuserinfo 用户点击该按钮时,会返回获取到的用户信息,回调的 detail 数据与 wx.getUserInfo 返回的一致,openType="getUserInfo"时有效
* @event {Function} contact 客服消息回调,openType="contact"时有效
* @event {Function} getphonenumber 获取用户手机号回调,openType="getPhoneNumber"时有效
* @event {Function} error 当使用开放能力时,发生错误的回调,openType="error"时有效
* @event {Function} launchapp 打开 APP 成功的回调,openType="launchApp"时有效
* @event {Function} opensetting 在打开授权设置页后回调,openType="openSetting"时有效
* @example <uv-action-sheet ref="actionSheet" :actions="list" :title="title" ></uv-action-sheet>
*/
export default {
name: "uv-action-sheet",
mixins: [openType, button, mpMixin , mixin, props],
emits: ['close', 'select'],
computed: {
// 操作项目的样式
itemStyle() {
return (index) => {
let style = {};
if (this.actions[index].color) style.color = this.actions[index].color
if (this.actions[index].fontSize) style.fontSize = this.$uv.addUnit(this.actions[index].fontSize)
// 选项被禁用的样式
if (this.actions[index].disabled) style.color = '#c0c4cc'
return style;
}
},
},
methods: {
open() {
this.$refs.popup.open();
},
close() {
this.$refs.popup.close();
},
popupChange(e) {
if(!e.show) this.$emit('close');
},
// 点击取消按钮
cancel() {
this.close();
},
selectHandler(index) {
const item = this.actions[index]
if (item && !item.disabled && !item.loading) {
this.$emit('select', item)
if (this.closeOnClickAction) {
this.close();
}
}
},
}
}
</script>
<style lang="scss" scoped>
$show-lines: 1;
$show-reset-button: 1;
@import '@/uni_modules/uv-ui-tools/libs/css/variable.scss';
@import '@/uni_modules/uv-ui-tools/libs/css/components.scss';
@import '@/uni_modules/uv-ui-tools/libs/css/color.scss';
$uv-action-sheet-reset-button-width:100% !default;
$uv-action-sheet-title-font-size: 16px !default;
$uv-action-sheet-title-padding: 12px 30px !default;
$uv-action-sheet-title-color: $uv-main-color !default;
$uv-action-sheet-header-icon-wrap-right:15px !default;
$uv-action-sheet-header-icon-wrap-top:15px !default;
$uv-action-sheet-description-font-size:13px !default;
$uv-action-sheet-description-color:14px !default;
$uv-action-sheet-description-margin: 18px 15px !default;
$uv-action-sheet-item-wrap-item-padding:15px !default;
$uv-action-sheet-item-wrap-name-font-size:16px !default;
$uv-action-sheet-item-wrap-subname-font-size:13px !default;
$uv-action-sheet-item-wrap-subname-color: #c0c4cc !default;
$uv-action-sheet-item-wrap-subname-margin-top:10px !default;
$uv-action-sheet-cancel-text-font-size:16px !default;
$uv-action-sheet-cancel-text-color:$uv-content-color !default;
$uv-action-sheet-cancel-text-font-size:15px !default;
$uv-action-sheet-cancel-text-hover-background-color:rgb(242, 243, 245) !default;
.uv-reset-button {
width: $uv-action-sheet-reset-button-width;
}
.uv-action-sheet {
text-align: center;
&__header {
position: relative;
padding: $uv-action-sheet-title-padding;
&__title {
font-size: $uv-action-sheet-title-font-size;
color: $uv-action-sheet-title-color;
font-weight: bold;
text-align: center;
}
&__icon-wrap {
position: absolute;
right: $uv-action-sheet-header-icon-wrap-right;
top: $uv-action-sheet-header-icon-wrap-top;
}
}
&__description {
font-size: $uv-action-sheet-description-font-size;
color: $uv-tips-color;
margin: $uv-action-sheet-description-margin;
text-align: center;
}
&__item-wrap {
&__item {
padding: $uv-action-sheet-item-wrap-item-padding;
@include flex;
align-items: center;
justify-content: center;
flex-direction: column;
&__name {
font-size: $uv-action-sheet-item-wrap-name-font-size;
color: $uv-main-color;
text-align: center;
}
&__subname {
font-size: $uv-action-sheet-item-wrap-subname-font-size;
color: $uv-action-sheet-item-wrap-subname-color;
margin-top: $uv-action-sheet-item-wrap-subname-margin-top;
text-align: center;
}
}
}
&__cancel-text {
font-size: $uv-action-sheet-cancel-text-font-size;
color: $uv-action-sheet-cancel-text-color;
text-align: center;
padding: $uv-action-sheet-cancel-text-font-size;
}
&--hover {
background-color: $uv-action-sheet-cancel-text-hover-background-color;
}
}
</style>
+92
View File
@@ -0,0 +1,92 @@
{
"id": "uv-action-sheet",
"displayName": "uv-action-sheet 底部操作菜单 全面兼容小程序、nvue、vue2、vue3等多端",
"version": "1.0.2",
"description": "该组件用于从底部弹出一个操作菜单,供用户选择并返回结果。本组件功能类似于uni的uni.showActionSheet API,配置更加灵活,所有平台都表现一致。",
"keywords": [
"action-sheet",
"uvui",
"uv-ui",
"操作菜单",
"菜单选择"
],
"repository": "",
"engines": {
"HBuilderX": "^3.1.0"
},
"dcloudext": {
"type": "component-vue",
"sale": {
"regular": {
"price": "0.00"
},
"sourcecode": {
"price": "0.00"
}
},
"contact": {
"qq": ""
},
"declaration": {
"ads": "无",
"data": "插件不采集任何数据",
"permissions": "无"
},
"npmurl": ""
},
"uni_modules": {
"dependencies": [
"uv-ui-tools",
"uv-popup",
"uv-icon",
"uv-line",
"uv-loading-icon",
"uv-gap"
],
"encrypt": [],
"platforms": {
"cloud": {
"tcb": "y",
"aliyun": "y"
},
"client": {
"Vue": {
"vue2": "y",
"vue3": "y"
},
"App": {
"app-vue": "y",
"app-nvue": "y"
},
"H5-mobile": {
"Safari": "y",
"Android Browser": "y",
"微信浏览器(Android)": "y",
"QQ浏览器(Android)": "y"
},
"H5-pc": {
"Chrome": "y",
"IE": "y",
"Edge": "y",
"Firefox": "y",
"Safari": "y"
},
"小程序": {
"微信": "y",
"阿里": "y",
"百度": "y",
"字节跳动": "y",
"QQ": "y",
"钉钉": "u",
"快手": "u",
"飞书": "u",
"京东": "u"
},
"快应用": {
"华为": "u",
"联盟": "u"
}
}
}
}
}
+13
View File
@@ -0,0 +1,13 @@
## ActionSheet 操作菜单
> **组件名:uv-action-sheet**
本组件用于从底部弹出一个操作菜单,供用户选择并返回结果。
本组件功能类似于uni的uni.showActionSheet API,配置更加灵活,所有平台都表现一致。
### <a href="https://www.uvui.cn/components/actionSheet.html" target="_blank">查看文档</a>
### [完整示例项目下载 | 关注更多组件](https://ext.dcloud.net.cn/plugin?name=uv-ui)
#### 如使用过程中有任何问题,或者您对uv-ui有一些好的建议,欢迎加入 uv-ui 交流群:<a href="https://ext.dcloud.net.cn/plugin?id=12287" target="_blank">uv-ui</a>、<a href="https://www.uvui.cn/components/addQQGroup.html" target="_blank">官方QQ群</a>
+10
View File
@@ -0,0 +1,10 @@
## 1.0.4(2023-12-06)
1. 阻止事件冒泡处理
## 1.0.3(2023-10-23)
1. 修复报错的BUG
## 1.0.2(2023-10-23)
1. 修复设置singleSize、multipleSize、space等值带单位,存在不显示的BUG
## 1.0.1(2023-09-13)
1. 添加依赖
## 1.0.0(2023-08-30)
1. 新增uv-album相册组件
@@ -0,0 +1,312 @@
<template>
<view class="uv-album">
<view
class="uv-album__row"
ref="uv-album__row"
v-for="(arr, index) in showUrls"
:forComputedUse="albumWidth"
:key="index"
>
<view
class="uv-album__row__wrapper"
v-for="(item, index1) in arr"
:key="index1"
:style="[imageStyle(index + 1, index1 + 1)]"
@tap.stop="previewFullImage ? onPreviewTap(getSrc(item)) : ''"
>
<image
:src="getSrc(item)"
:mode="
urls.length === 1
? imageHeight > 0
? singleMode
: 'widthFix'
: multipleMode
"
:style="[
{
width: imageWidth,
height: imageHeight
}
]"
></image>
<view
v-if="
showMore &&
urls.length > rowCount * showUrls.length &&
index === showUrls.length - 1 &&
index1 === showUrls[showUrls.length - 1].length - 1
"
class="uv-album__row__wrapper__text"
>
<uv-text
:text="`+${urls.length - maxCount}`"
color="#fff"
:size="$uv.getPx(multipleSize) * 0.3"
align="center"
customStyle="justify-content: center"
></uv-text>
</view>
</view>
</view>
</view>
</template>
<script>
import mpMixin from '@/uni_modules/uv-ui-tools/libs/mixin/mpMixin.js'
import mixin from '@/uni_modules/uv-ui-tools/libs/mixin/mixin.js'
// #ifdef APP-NVUE
// 由于weex为阿里的KPI业绩考核的产物,所以不支持百分比单位,这里需要通过dom查询组件的宽度
const dom = uni.requireNativePlugin('dom')
// #endif
/**
* Album 相册
* @description 本组件提供一个类似相册的功能,让开发者开发起来更加得心应手。减少重复的模板代码
* @tutorial https://www.uvui.cn/components/album.html
* @property {Array} urls 图片地址列表 Array<String>|Array<Object>形式
* @property {String} keyName 指定从数组的对象元素中读取哪个属性作为图片地址
* @property {String | Number} singleSize 单图时,图片长边的长度 (默认 180 )
* @property {String | Number} multipleSize 多图时,图片边长 (默认 70 )
* @property {String | Number} space 多图时,图片水平和垂直之间的间隔 (默认 6 )
* @property {String} singleMode 单图时,图片缩放裁剪的模式 (默认 'scaleToFill' )
* @property {String} multipleMode 多图时,图片缩放裁剪的模式 (默认 'aspectFill' )
* @property {String | Number} maxCount 取消按钮的提示文字 (默认 9 )
* @property {Boolean} previewFullImage 是否可以预览图片 (默认 true )
* @property {String | Number} rowCount 每行展示图片数量,如设置,singleSize和multipleSize将会无效 (默认 3 )
* @property {Boolean} showMore 超出maxCount时是否显示查看更多的提示 (默认 true )
*
* @event {Function} albumWidth 某些特殊的情况下,需要让文字与相册的宽度相等,这里事件的形式对外发送 (回调参数 width )
* @example <uv-album :urls="urls2" @albumWidth="width => albumWidth = width" multipleSize="68" ></uv-album>
*/
export default {
name: 'uv-album',
mixins: [mpMixin, mixin],
emits: ['albumWidth'],
props: {
// 图片地址,Array<String>|Array<Object>形式
urls: {
type: Array,
default: () => []
},
// 指定从数组的对象元素中读取哪个属性作为图片地址
keyName: {
type: String,
default: ''
},
// 单图时,图片长边的长度
singleSize: {
type: [String, Number],
default: 180
},
// 多图时,图片边长
multipleSize: {
type: [String, Number],
default: 70
},
// 多图时,图片水平和垂直之间的间隔
space: {
type: [String, Number],
default: 6
},
// 单图时,图片缩放裁剪的模式
singleMode: {
type: String,
default: 'scaleToFill'
},
// 多图时,图片缩放裁剪的模式
multipleMode: {
type: String,
default: 'aspectFill'
},
// 最多展示的图片数量,超出时最后一个位置将会显示剩余图片数量
maxCount: {
type: [String, Number],
default: 9
},
// 是否可以预览图片
previewFullImage: {
type: Boolean,
default: true
},
// 每行展示图片数量,如设置,singleSize和multipleSize将会无效
rowCount: {
type: [String, Number],
default: 3
},
// 超出maxCount时是否显示查看更多的提示
showMore: {
type: Boolean,
default: true
},
...uni.$uv?.props?.album
},
data() {
return {
// 单图的宽度
singleWidth: 0,
// 单图的高度
singleHeight: 0,
// 单图时,如果无法获取图片的尺寸信息,让图片宽度默认为容器的一定百分比
singlePercent: 0.6
}
},
watch: {
urls: {
immediate: true,
handler(newVal) {
if (newVal.length === 1) {
this.getImageRect()
}
}
}
},
computed: {
imageStyle() {
return (index1, index2) => {
const { space, rowCount, multipleSize, urls } = this;
const rowLen = this.showUrls.length;
const allLen = this.urls.length;
const style = {
marginRight: this.$uv.addUnit(space),
marginBottom: this.$uv.addUnit(space)
}
// 如果为最后一行,则每个图片都无需下边框
if (index1 === rowLen) style.marginBottom = 0
// 每行的最右边一张和总长度的最后一张无需右边框
if (
index2 === rowCount ||
(index1 === rowLen &&
index2 === this.showUrls[index1 - 1].length)
)
style.marginRight = 0
return style
}
},
// 将数组划分为二维数组
showUrls() {
const arr = []
this.urls.map((item, index) => {
// 限制最大展示数量
if (index + 1 <= this.maxCount) {
// 计算该元素为第几个素组内
const itemIndex = Math.floor(index / this.rowCount)
// 判断对应的索引是否存在
if (!arr[itemIndex]) {
arr[itemIndex] = []
}
arr[itemIndex].push(item)
}
})
return arr
},
imageWidth() {
return this.$uv.addUnit(
this.urls.length === 1 ? this.singleWidth : this.multipleSize
)
},
imageHeight() {
return this.$uv.addUnit(
this.urls.length === 1 ? this.singleHeight : this.multipleSize
)
},
// 此变量无实际用途,仅仅是为了利用computed特性,让其在urls长度等变化时,重新计算图片的宽度
// 因为用户在某些特殊的情况下,需要让文字与相册的宽度相等,所以这里事件的形式对外发送
albumWidth() {
let width = 0
if (this.urls.length === 1) {
width = this.singleWidth
} else {
width =
this.showUrls[0].length * this.$uv.getPx(this.multipleSize) +
this.$uv.getPx(this.space) * (this.showUrls[0].length - 1)
}
this.$emit('albumWidth', width)
return width
}
},
methods: {
// 预览图片
onPreviewTap(url) {
const urls = this.urls.map((item) => {
return this.getSrc(item)
})
uni.previewImage({
current: url,
urls
})
},
// 获取图片的路径
getSrc(item) {
return this.$uv.test.object(item) ?
(this.keyName && item[this.keyName]) || item.src :
item
},
// 单图时,获取图片的尺寸
// 在小程序中,需要将网络图片的的域名添加到小程序的download域名才可能获取尺寸
// 在没有添加的情况下,让单图宽度默认为盒子的一定宽度(singlePercent)
getImageRect() {
const src = this.getSrc(this.urls[0])
uni.getImageInfo({
src,
success: (res) => {
// 判断图片横向还是竖向展示方式
const isHorizotal = res.width >= res.height
this.singleWidth = isHorizotal ?
this.singleSize :
(res.width / res.height) * this.$uv.getPx(this.singleSize)
this.singleHeight = !isHorizotal ?
this.singleSize :
(res.height / res.width) * this.singleWidth
},
fail: () => {
this.getComponentWidth()
}
})
},
// 获取组件的宽度
async getComponentWidth() {
// 延时一定时间,以获取dom尺寸
await this.$uv.sleep(30)
// #ifndef APP-NVUE
this.$uGetRect('.uv-album__row').then((size) => {
this.singleWidth = size.width * this.singlePercent
})
// #endif
// #ifdef APP-NVUE
// 这里ref="uv-album__row"所在的标签为通过for循环出来,导致this.$refs['uv-album__row']是一个数组
const ref = this.$refs['uv-album__row'][0]
ref &&
dom.getComponentRect(ref, (res) => {
this.singleWidth = res.size.width * this.singlePercent
})
// #endif
}
}
}
</script>
<style lang="scss" scoped>
@import '@/uni_modules/uv-ui-tools/libs/css/components.scss';
.uv-album {
@include flex(column);
&__row {
@include flex(row);
flex-wrap: wrap;
&__wrapper {
position: relative;
&__text {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.3);
@include flex(row);
justify-content: center;
align-items: center;
}
}
}
}
</style>
+88
View File
@@ -0,0 +1,88 @@
{
"id": "uv-album",
"displayName": "uv-album 相册 全面兼容vue3+2、app、h5、小程序等多端",
"version": "1.0.4",
"description": "本组件提供一个类似相册的功能,让开发者开发起来更加得心应手,功能齐全,灵活配置可以,开箱即用。减少重复的模板代码",
"keywords": [
"album",
"uv-ui",
"uvui",
"相册",
"图片"
],
"repository": "",
"engines": {
"HBuilderX": "^3.1.0"
},
"dcloudext": {
"type": "component-vue",
"sale": {
"regular": {
"price": "0.00"
},
"sourcecode": {
"price": "0.00"
}
},
"contact": {
"qq": ""
},
"declaration": {
"ads": "无",
"data": "插件不采集任何数据",
"permissions": "无"
},
"npmurl": ""
},
"uni_modules": {
"dependencies": [
"uv-ui-tools",
"uv-text"
],
"encrypt": [],
"platforms": {
"cloud": {
"tcb": "y",
"aliyun": "y"
},
"client": {
"Vue": {
"vue2": "y",
"vue3": "y"
},
"App": {
"app-vue": "y",
"app-nvue": "y"
},
"H5-mobile": {
"Safari": "y",
"Android Browser": "y",
"微信浏览器(Android)": "y",
"QQ浏览器(Android)": "y"
},
"H5-pc": {
"Chrome": "y",
"IE": "y",
"Edge": "y",
"Firefox": "y",
"Safari": "y"
},
"小程序": {
"微信": "y",
"阿里": "y",
"百度": "y",
"字节跳动": "y",
"QQ": "y",
"钉钉": "u",
"快手": "u",
"飞书": "u",
"京东": "u"
},
"快应用": {
"华为": "u",
"联盟": "u"
}
}
}
}
}
+21
View File
@@ -0,0 +1,21 @@
# Album 相册
> **组件名:uv-album**
本组件提供一个类似相册的功能,让开发者开发起来更加得心应手。
功能齐全,灵活配置可以,开箱即用。减少重复的模板代码。
# <a href="https://www.uvui.cn/components/album.html" target="_blank">查看文档</a>
## [下载完整示例项目](https://ext.dcloud.net.cn/plugin?name=uv-ui) <small>(请不要 下载插件ZIP)</small>
### [更多插件,请关注uv-ui组件库](https://ext.dcloud.net.cn/plugin?name=uv-ui)
<a href="https://ext.dcloud.net.cn/plugin?name=uv-ui" target="_blank">
![image](https://mp-a667b617-c5f1-4a2d-9a54-683a67cff588.cdn.bspapp.com/uv-ui/banner.png)
</a>
#### 如使用过程中有任何问题反馈,或者您对uv-ui有一些好的建议,欢迎加入uv-ui官方交流群:<a href="https://www.uvui.cn/components/addQQGroup.html" target="_blank">官方QQ群</a>
+7
View File
@@ -0,0 +1,7 @@
## 1.0.2(2023-06-01)
1. 修复点击触发两次实践的BUG
## 1.0.1(2023-05-16)
1. 优化组件依赖,修改后无需全局引入,组件导入即可使用
2. 优化部分功能
## 1.0.0(2023-05-10)
uv-alert 警告提示组件
@@ -0,0 +1,45 @@
export default {
props: {
// 显示文字
title: {
type: String,
default: ''
},
// 主题,success/warning/info/error
type: {
type: String,
default: 'warning'
},
// 辅助性文字
description: {
type: String,
default: ''
},
// 是否可关闭
closable: {
type: Boolean,
default: false
},
// 是否显示图标
showIcon: {
type: Boolean,
default: false
},
// 浅或深色调,light-浅色,dark-深色
effect: {
type: String,
default: 'light'
},
// 文字是否居中
center: {
type: Boolean,
default: false
},
// 字体大小
fontSize: {
type: [String, Number],
default: 14
},
...uni.$uv?.props?.alert
}
}
@@ -0,0 +1,246 @@
<template>
<uv-transition
mode="fade"
:show="show"
>
<view
class="uv-alert"
:class="[`uv-alert--${type}--${effect}`]"
@tap.stop="clickHandler"
:style="[$uv.addStyle(customStyle)]"
>
<view
class="uv-alert__icon"
v-if="showIcon"
>
<uv-icon
:name="iconName"
size="18"
:color="iconColor"
></uv-icon>
</view>
<view
class="uv-alert__content"
:style="[{
paddingRight: closable ? '20px' : 0
}]"
>
<text
class="uv-alert__content__title"
v-if="title"
:style="[{
fontSize: $uv.addUnit(fontSize),
textAlign: center ? 'center' : 'left'
}]"
:class="[effect === 'dark' ? 'uv-alert__text--dark' : `uv-alert__text--${type}--light`]"
>{{ title }}</text>
<text
class="uv-alert__content__desc"
v-if="description"
:style="[{
fontSize: $uv.addUnit(fontSize),
textAlign: center ? 'center' : 'left'
}]"
:class="[effect === 'dark' ? 'uv-alert__text--dark' : `uv-alert__text--${type}--light`]"
>{{ description }}</text>
</view>
<view
class="uv-alert__close"
v-if="closable"
@tap.stop="closeHandler"
>
<uv-icon
name="close"
:color="iconColor"
size="15"
></uv-icon>
</view>
</view>
</uv-transition>
</template>
<script>
import mpMixin from '@/uni_modules/uv-ui-tools/libs/mixin/mpMixin.js'
import mixin from '@/uni_modules/uv-ui-tools/libs/mixin/mixin.js'
import props from './props.js';
/**
* Alert 警告提示
* @description 警告提示,展现需要关注的信息。
* @tutorial https://www.uvui.cn/components/alertTips.html
*
* @property {String} title 显示的文字
* @property {String} type 使用预设的颜色 (默认 'warning' )
* @property {String} description 辅助性文字,颜色比title浅一点,字号也小一点,可选
* @property {Boolean} closable 关闭按钮(默认为叉号icon图标) (默认 false )
* @property {Boolean} showIcon 是否显示左边的辅助图标 ( 默认 false )
* @property {String} effect 多图时,图片缩放裁剪的模式 (默认 'light' )
* @property {Boolean} center 文字是否居中 (默认 false )
* @property {String | Number} fontSize 字体大小 (默认 14 )
* @property {Object} customStyle 定义需要用到的外部样式
* @event {Function} click 点击组件时触发
* @example <uv-alert :title="title" type = "warning" :closable="closable" :description = "description"></uv-alert>
*/
export default {
name: 'uv-alert',
mixins: [mpMixin, mixin, props],
emits: ['click'],
data() {
return {
show: true
}
},
computed: {
iconColor() {
return this.effect === 'light' ? this.type : '#fff'
},
// 不同主题对应不同的图标
iconName() {
switch (this.type) {
case 'success':
return 'checkmark-circle-fill';
break;
case 'error':
return 'close-circle-fill';
break;
case 'warning':
return 'error-circle-fill';
break;
case 'info':
return 'info-circle-fill';
break;
case 'primary':
return 'more-circle-fill';
break;
default:
return 'error-circle-fill';
}
}
},
methods: {
// 点击内容
clickHandler() {
this.$emit('click')
},
// 点击关闭按钮
closeHandler() {
this.show = false
}
}
}
</script>
<style lang="scss" scoped>
@import '@/uni_modules/uv-ui-tools/libs/css/components.scss';
@import '@/uni_modules/uv-ui-tools/libs/css/color.scss';
.uv-alert {
position: relative;
background-color: $uv-primary;
padding: 8px 10px;
@include flex(row);
align-items: center;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
&--primary--dark {
background-color: $uv-primary;
}
&--primary--light {
background-color: #ecf5ff;
}
&--error--dark {
background-color: $uv-error;
}
&--error--light {
background-color: #FEF0F0;
}
&--success--dark {
background-color: $uv-success;
}
&--success--light {
background-color: #f5fff0;
}
&--warning--dark {
background-color: $uv-warning;
}
&--warning--light {
background-color: #FDF6EC;
}
&--info--dark {
background-color: $uv-info;
}
&--info--light {
background-color: #f4f4f5;
}
&__icon {
margin-right: 5px;
}
&__content {
@include flex(column);
flex: 1;
&__title {
color: $uv-main-color;
font-size: 14px;
font-weight: bold;
color: #fff;
margin-bottom: 2px;
}
&__desc {
color: $uv-main-color;
font-size: 14px;
flex-wrap: wrap;
color: #fff;
}
}
&__title--dark,
&__desc--dark {
color: #FFFFFF;
}
&__text--primary--light,
&__text--primary--light {
color: $uv-primary;
}
&__text--success--light,
&__text--success--light {
color: $uv-success;
}
&__text--warning--light,
&__text--warning--light {
color: $uv-warning;
}
&__text--error--light,
&__text--error--light {
color: $uv-error;
}
&__text--info--light,
&__text--info--light {
color: $uv-info;
}
&__close {
position: absolute;
top: 11px;
right: 10px;
}
}
</style>
+88
View File
@@ -0,0 +1,88 @@
{
"id": "uv-alert",
"displayName": "uv-alert 警告提示 全面兼容小程序、nvue、vue2、vue3等多端",
"version": "1.0.2",
"description": "uv-alert 警告提示,展现需要关注的信息。灵活配置,功能齐全,兼容全端",
"keywords": [
"alert",
"uvui",
"uv-ui",
"警告提示"
],
"repository": "",
"engines": {
"HBuilderX": "^3.1.0"
},
"dcloudext": {
"type": "component-vue",
"sale": {
"regular": {
"price": "0.00"
},
"sourcecode": {
"price": "0.00"
}
},
"contact": {
"qq": ""
},
"declaration": {
"ads": "无",
"data": "插件不采集任何数据",
"permissions": "无"
},
"npmurl": ""
},
"uni_modules": {
"dependencies": [
"uv-ui-tools",
"uv-transition",
"uv-icon"
],
"encrypt": [],
"platforms": {
"cloud": {
"tcb": "y",
"aliyun": "y"
},
"client": {
"Vue": {
"vue2": "y",
"vue3": "y"
},
"App": {
"app-vue": "y",
"app-nvue": "y"
},
"H5-mobile": {
"Safari": "y",
"Android Browser": "y",
"微信浏览器(Android)": "y",
"QQ浏览器(Android)": "y"
},
"H5-pc": {
"Chrome": "y",
"IE": "y",
"Edge": "y",
"Firefox": "y",
"Safari": "y"
},
"小程序": {
"微信": "y",
"阿里": "y",
"百度": "y",
"字节跳动": "y",
"QQ": "y",
"钉钉": "u",
"快手": "u",
"飞书": "u",
"京东": "u"
},
"快应用": {
"华为": "u",
"联盟": "u"
}
}
}
}
}
+15
View File
@@ -0,0 +1,15 @@
## Alert 警告提示
> **组件名:uv-alert**
警告提示,展现需要关注的信息。
当某个页面需要向用户显示警告的信息时。
非浮层的静态展现形式,始终展现,不会自动消失,用户可以点击关闭。
### <a href="https://www.uvui.cn/components/alert.html" target="_blank">查看文档</a>
### [完整示例项目下载 | 关注更多组件](https://ext.dcloud.net.cn/plugin?name=uv-ui)
#### 如使用过程中有任何问题,或者您对uv-ui有一些好的建议,欢迎加入 uv-ui 交流群:<a href="https://ext.dcloud.net.cn/plugin?id=12287" target="_blank">uv-ui</a>、<a href="https://www.uvui.cn/components/addQQGroup.html" target="_blank">官方QQ群</a>
+13
View File
@@ -0,0 +1,13 @@
## 1.0.5(2023-12-06)
1. 优化
## 1.0.4(2023-12-06)
1. 优化
## 1.0.3(2023-12-06)
1. 阻止事件冒泡处理,单个头像模式
## 1.0.2(2023-12-06)
1. 阻止事件冒泡处理
## 1.0.1(2023-05-16)
1. 优化组件依赖,修改后无需全局引入,组件导入即可使用
2. 优化部分功能
## 1.0.0(2023-05-10)
uv-avatar 头像组件
@@ -0,0 +1,53 @@
export default {
props: {
// 头像图片组
urls: {
type: Array,
default: () => []
},
// 最多展示的头像数量
maxCount: {
type: [String, Number],
default: 5
},
// 头像形状
shape: {
type: String,
default: 'circle'
},
// 图片裁剪模式
mode: {
type: String,
default: 'scaleToFill'
},
// 超出maxCount时是否显示查看更多的提示
showMore: {
type: Boolean,
default: true
},
// 头像大小
size: {
type: [String, Number],
default: 40
},
// 指定从数组的对象元素中读取哪个属性作为图片地址
keyName: {
type: String,
default: ''
},
// 头像之间的遮挡比例
gap: {
type: [String, Number],
validator(value) {
return value >= 0 && value <= 1
},
default: 0.5
},
// 需额外显示的值
extraValue: {
type: [Number, String],
default: 0
},
...uni.$uv?.props?.avatarGroup
}
}
@@ -0,0 +1,106 @@
<template>
<view class="uv-avatar-group">
<view
class="uv-avatar-group__item"
v-for="(item, index) in showUrl"
:key="index"
:style="{
marginLeft: index === 0 ? 0 : $uv.addUnit(-size * gap)
}"
>
<uv-avatar
:size="size"
:shape="shape"
:mode="mode"
:src="$uv.test.object(item) ? keyName && item[keyName] || item.url : item"
></uv-avatar>
<view
class="uv-avatar-group__item__show-more"
v-if="showMore && index === showUrl.length - 1 && (urls.length > maxCount || extraValue > 0)"
@tap="clickHandler"
>
<uv-text
color="#ffffff"
:size="size * 0.4"
:text="`+${extraValue || urls.length - showUrl.length}`"
align="center"
customStyle="justify-content: center"
></uv-text>
</view>
</view>
</view>
</template>
<script>
import mpMixin from '@/uni_modules/uv-ui-tools/libs/mixin/mpMixin.js'
import mixin from '@/uni_modules/uv-ui-tools/libs/mixin/mixin.js'
import props from './props.js';
/**
* AvatarGroup 头像组
* @description 本组件一般用于展示头像的地方,如个人中心,或者评论列表页的用户头像展示等场所。
* @tutorial https://www.uvui.cn/components/avatar.html
*
* @property {Array} urls 头像图片组 (默认 [] )
* @property {String | Number} maxCount 最多展示的头像数量 ( 默认 5 )
* @property {String} shape 头像形状( 'circle' (默认) | 'square' )
* @property {String} mode 图片裁剪模式(默认 'scaleToFill' )
* @property {Boolean} showMore 超出maxCount时是否显示查看更多的提示 (默认 true )
* @property {String | Number} size 头像大小 (默认 40 )
* @property {String} keyName 指定从数组的对象元素中读取哪个属性作为图片地址
* @property {String | Number} gap 头像之间的遮挡比例(0.4代表遮挡40%) (默认 0.5 )
* @property {String | Number} extraValue 需额外显示的值
* @event {Function} showMore 头像组更多点击
* @example <uv-avatar-group:urls="urls" size="35" gap="0.4" ></uv-avatar-group:urls=>
*/
export default {
name: 'uv-avatar-group',
mixins: [mpMixin, mixin, props],
data() {
return {
}
},
computed: {
showUrl() {
return this.urls.slice(0, this.maxCount)
}
},
methods: {
clickHandler() {
this.$emit('showMore')
}
},
}
</script>
<style lang="scss" scoped>
@import '@/uni_modules/uv-ui-tools/libs/css/components.scss';
@import '@/uni_modules/uv-ui-tools/libs/css/color.scss';
.uv-avatar-group {
@include flex;
&__item {
margin-left: -10px;
position: relative;
&--no-indent {
// 如果你想质疑作者不会使用:first-child,说明你太年轻,因为nvue不支持
margin-left: 0;
}
&__show-more {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: rgba(0, 0, 0, 0.3);
@include flex;
align-items: center;
justify-content: center;
border-radius: 100px;
}
}
}
</style>
@@ -0,0 +1,80 @@
import { range } from '@/uni_modules/uv-ui-tools/libs/function/test.js'
export default {
props: {
// 头像图片路径(不能为相对路径)
src: {
type: String,
default: ''
},
// 头像形状,circle-圆形,square-方形
shape: {
type: String,
default: 'circle'
},
// 头像尺寸
size: {
type: [String, Number],
default: 40
},
// 裁剪模式
mode: {
type: String,
default: 'scaleToFill'
},
// 显示的文字
text: {
type: String,
default: ''
},
// 背景色
bgColor: {
type: String,
default: '#c0c4cc'
},
// 文字颜色
color: {
type: String,
default: '#fff'
},
// 文字大小
fontSize: {
type: [String, Number],
default: 18
},
// 显示的图标
icon: {
type: String,
default: ''
},
// 显示小程序头像,只对百度,微信,QQ小程序有效
mpAvatar: {
type: Boolean,
default: false
},
// 是否使用随机背景色
randomBgColor: {
type: Boolean,
default: false
},
// 加载失败的默认头像(组件有内置默认图片)
defaultUrl: {
type: String,
default: ''
},
// 如果配置了randomBgColor为true,且配置了此值,则从默认的背景色数组中取出对应索引的颜色值,取值0-19之间
colorIndex: {
type: [String, Number],
// 校验参数规则,索引在0-19之间
validator(n) {
return range(n, [0, 19]) || n === ''
},
default: ''
},
// 组件标识符
name: {
type: String,
default: ''
},
...uni.$uv?.props?.avatar
}
}
@@ -0,0 +1,175 @@
<template>
<view
class="uv-avatar"
:class="[`uv-avatar--${shape}`]"
:style="[{
backgroundColor: (text || icon) ? (randomBgColor ? colors[colorIndex !== '' ? colorIndex : $uv.random(0, 19)] : bgColor) : 'transparent',
width: $uv.addUnit(size),
height: $uv.addUnit(size),
}, $uv.addStyle(customStyle)]"
@tap="clickHandler"
>
<slot>
<!-- #ifdef MP-WEIXIN || MP-QQ || MP-BAIDU -->
<open-data
v-if="mpAvatar && allowMp"
type="userAvatarUrl"
:style="[{
width: $uv.addUnit(size),
height: $uv.addUnit(size)
}]"
/>
<!-- #endif -->
<!-- #ifndef MP-WEIXIN && MP-QQ && MP-BAIDU -->
<template v-if="mpAvatar && allowMp"></template>
<!-- #endif -->
<uv-icon
v-else-if="icon"
:name="icon"
:size="fontSize"
:color="color"
></uv-icon>
<uv-text
v-else-if="text"
:text="text"
:size="fontSize"
:color="color"
align="center"
customStyle="justify-content: center"
></uv-text>
<image
class="uv-avatar__image"
v-else
:class="[`uv-avatar__image--${shape}`]"
:src="avatarUrl || defaultUrl"
:mode="mode"
@error="errorHandler"
:style="[{
width: $uv.addUnit(size),
height: $uv.addUnit(size)
}]"
></image>
</slot>
</view>
</template>
<script>
import mpMixin from '@/uni_modules/uv-ui-tools/libs/mixin/mpMixin.js'
import mixin from '@/uni_modules/uv-ui-tools/libs/mixin/mixin.js'
import props from './props.js';
const base64Avatar =
"data:image/jpg;base64,/9j/4QAYRXhpZgAASUkqAAgAAAAAAAAAAAAAAP/sABFEdWNreQABAAQAAAA8AAD/4QMraHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLwA8P3hwYWNrZXQgYmVnaW49Iu+7vyIgaWQ9Ilc1TTBNcENlaGlIenJlU3pOVGN6a2M5ZCI/PiA8eDp4bXBtZXRhIHhtbG5zOng9ImFkb2JlOm5zOm1ldGEvIiB4OnhtcHRrPSJBZG9iZSBYTVAgQ29yZSA1LjMtYzAxMSA2Ni4xNDU2NjEsIDIwMTIvMDIvMDYtMTQ6NTY6MjcgICAgICAgICI+IDxyZGY6UkRGIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyI+IDxyZGY6RGVzY3JpcHRpb24gcmRmOmFib3V0PSIiIHhtbG5zOnhtcD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLyIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bXA6Q3JlYXRvclRvb2w9IkFkb2JlIFBob3Rvc2hvcCBDUzYgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjREMEQwRkY0RjgwNDExRUE5OTY2RDgxODY3NkJFODMxIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjREMEQwRkY1RjgwNDExRUE5OTY2RDgxODY3NkJFODMxIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6NEQwRDBGRjJGODA0MTFFQTk5NjZEODE4Njc2QkU4MzEiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NEQwRDBGRjNGODA0MTFFQTk5NjZEODE4Njc2QkU4MzEiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7/7gAOQWRvYmUAZMAAAAAB/9sAhAAGBAQEBQQGBQUGCQYFBgkLCAYGCAsMCgoLCgoMEAwMDAwMDBAMDg8QDw4MExMUFBMTHBsbGxwfHx8fHx8fHx8fAQcHBw0MDRgQEBgaFREVGh8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx//wAARCADIAMgDAREAAhEBAxEB/8QAcQABAQEAAwEBAAAAAAAAAAAAAAUEAQMGAgcBAQAAAAAAAAAAAAAAAAAAAAAQAAIBAwICBgkDBQAAAAAAAAABAhEDBCEFMVFBYXGREiKBscHRMkJSEyOh4XLxYjNDFBEBAAAAAAAAAAAAAAAAAAAAAP/aAAwDAQACEQMRAD8A/fAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHbHFyZ/Dam+yLA+Z2L0Pjtyj2poD4AAAAAAAAAAAAAAAAAAAAAAAAKWFs9y6lcvvwQeqj8z9wFaziY1n/HbUX9XF97A7QAGXI23EvJ1goyfzR0YEfN269jeZ+a03pNe0DIAAAAAAAAAAAAAAAAAAAACvtO3RcVkXlWutuL9YFYAAAAAOJRjKLjJVi9GmB5/csH/mu1h/in8PU+QGMAAAAAAAAAAAAAAAAAAaMDG/6MmMH8C80+xAelSSVFolwQAAAAAAAHVlWI37ErUulaPk+hgeYnCUJuElSUXRrrQHAAAAAAAAAAAAAAAAABa2Oz4bM7r4zdF2ICmAAAAAAAAAg7zZ8GX41wuJP0rRgYAAAAAAAAAAAAAAAAAD0m2R8ODaXU33tsDSAAAAAAAAAlb9HyWZcnJd9PcBHAAAAAAAAAAAAAAAAAPS7e64Vn+KA0AAAAAAAAAJm+v8Ftf3ewCKAAAAAAAAAAAAAAAAAX9muqeGo9NttP06+0DcAAAAAAAAAjb7dTu2ra+VOT9P8AQCWAAAAAAAAAAAAAAAAAUNmyPt5Ltv4bui/kuAF0AAAAAAADiUlGLlJ0SVW+oDzOXfd/Ind6JPRdS0QHSAAAAAAAAAAAAAAAAAE2nVaNcGB6Lbs6OTao9LsF51z60BrAAAAAABJ3jOVHjW3r/sa9QEgAAAAAAAAAAAAAAAAAAAPu1duWriuW34ZR4MC9hbnZyEoy8l36XwfYBsAAADaSq9EuLAlZ+7xSdrGdW9Hc5dgEdtt1erfFgAAAAAAAAAAAAAAAAADVjbblX6NR8MH80tEBRs7HYivyzlN8lovaBPzduvY0m6eK10TXtAyAarO55lpJK54orolr+4GqO/Xaea1FvqbXvA+Z77kNeW3GPbV+4DJfzcm/pcm3H6Vou5AdAFLC2ed2Pjv1txa8sV8T6wOL+yZEKu1JXFy4MDBOE4ScZxcZLinoB8gAAAAAAAAAAAB242LeyJ+C3GvN9C7QLmJtePYpKS+5c+p8F2IDYAANJqj1T4oCfk7Nj3G5Wn9qXJax7gJ93Z82D8sVNc4v30A6Xg5i42Z+iLfqARwcyT0sz9MWvWBps7LlTf5Grce9/oBTxdtxseklHxT+uWr9AGoAB138ezfj4bsFJdD6V2MCPm7RdtJzs1uW1xXzL3gTgAAAAAAAAADRhYc8q74I6RWs5ckB6GxYtWLat21SK731sDsAAAAAAAAAAAAAAAASt021NO/YjrxuQXT1oCOAAAAAAABzGLlJRSq26JAelwsWONYjbXxcZvmwO8AAAAAAAAAAAAAAAAAAef3TEWPkVivx3NY9T6UBiAAAAAABo2+VmGXblddIJ8eivRUD0oAAAAAAAAAAAAAAAAAAAYt4tKeFKVNYNSXfRgefAAAAAAAAr7VuSSWPedKaW5v1MCsAAAAAAAAAAAAAAAAAAIe6bj96Ts2n+JPzSXzP3ATgAAAAAAAAFbbt1UUrOQ9FpC4/UwK6aaqtU+DAAAAAAAAAAAAAAA4lKMIuUmoxWrb4ARNx3R3q2rLpa4Sl0y/YCcAAAAAAAAAAANmFud7G8r89r6X0dgFvGzLGRGtuWvTF6NAdwAAAAAAAAAAAy5W442PVN+K59EePp5ARMvOv5MvO6QXCC4AZwAAAAAAAAAAAAAcxlKLUotprg1owN+PvORborq+7Hnwl3gUbO74VzRydt8pKn68ANcJwmqwkpLmnUDkAAAAfNy9atqtyagut0AxXt5xIV8Fbj6lRd7Am5G65V6qUvtwfyx94GMAAAAAAAAAAAAAAAAAAAOU2nVOj5gdsc3LiqRvTpyqwOxbnnrhdfpSfrQB7pnv/AGvuS9gHXPMy5/Fem1yq0v0A6W29XqwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAf//Z";
/**
* Avatar 头像
* @description 本组件一般用于展示头像的地方,如个人中心,或者评论列表页的用户头像展示等场所。
* @tutorial https://www.uvui.cn/components/avatar.html
*
* @property {String} src 头像路径,如加载失败,将会显示默认头像(不能为相对路径)
* @property {String} shape 头像形状 ( circle (默认) | square)
* @property {String | Number} size 头像尺寸,可以为指定字符串(large, default, mini),或者数值 (默认 40 )
* @property {String} mode 头像图片的裁剪类型,与uni的image组件的mode参数一致,如效果达不到需求,可尝试传widthFix值 (默认 'scaleToFill' )
* @property {String} text 用文字替代图片,级别优先于src
* @property {String} bgColor 背景颜色,一般显示文字时用 (默认 '#c0c4cc' )
* @property {String} color 文字颜色 (默认 '#ffffff' )
* @property {String | Number} fontSize 文字大小 (默认 18 )
* @property {String} icon 显示的图标
* @property {Boolean} mpAvatar 显示小程序头像,只对百度,微信,QQ小程序有效 (默认 false )
* @property {Boolean} randomBgColor 是否使用随机背景色 (默认 false )
* @property {String} defaultUrl 加载失败的默认头像(组件有内置默认图片)
* @property {String | Number} colorIndex 如果配置了randomBgColor为true,且配置了此值,则从默认的背景色数组中取出对应索引的颜色值,取值0-19之间
* @property {String} name 组件标识符 (默认 'level' )
* @property {Object} customStyle 定义需要用到的外部样式
*
* @event {Function} click 点击组件时触发 index: 用户传递的标识符
* @example <uv-avatar :src="src" mode="square"></uv-avatar>
*/
export default {
name: 'uv-avatar',
emits: ['click'],
mixins: [mpMixin, mixin, props],
data() {
return {
// 如果配置randomBgColor参数为true,在图标或者文字的模式下,会随机从中取出一个颜色值当做背景色
colors: ['#ffb34b', '#f2bba9', '#f7a196', '#f18080', '#88a867', '#bfbf39', '#89c152', '#94d554', '#f19ec2',
'#afaae4', '#e1b0df', '#c38cc1', '#72dcdc', '#9acdcb', '#77b1cc', '#448aca', '#86cefa', '#98d1ee',
'#73d1f1',
'#80a7dc'
],
avatarUrl: this.src,
allowMp: false
}
},
watch: {
// 监听头像src的变化,赋值给内部的avatarUrl变量,因为图片加载失败时,需要修改图片的src为默认值
// 而组件内部不能直接修改props的值,所以需要一个中间变量
src: {
immediate: true,
handler(newVal) {
this.avatarUrl = newVal
// 如果没有传src,则主动触发error事件,用于显示默认的头像,否则src为''空字符等的时候,会无内容展示
if(!newVal) {
this.errorHandler()
}
}
}
},
computed: {
imageStyle() {
const style = {}
return style
}
},
created() {
this.init()
},
methods: {
init() {
// 目前只有这几个小程序平台具有open-data标签
// 其他平台可以通过uni.getUserInfo类似接口获取信息,但是需要弹窗授权(首次),不合符组件逻辑
// 故目前自动获取小程序头像只支持这几个平台
// #ifdef MP-WEIXIN || MP-QQ || MP-BAIDU
this.allowMp = true
// #endif
},
// 判断传入的name属性,是否图片路径,只要带有"/"均认为是图片形式
isImg() {
return this.src.indexOf('/') !== -1
},
// 图片加载时失败时触发
errorHandler() {
this.avatarUrl = this.defaultUrl || base64Avatar
},
clickHandler() {
this.$emit('click', this.name)
}
}
}
</script>
<style lang="scss" scoped>
@import '@/uni_modules/uv-ui-tools/libs/css/components.scss';
.uv-avatar {
@include flex;
align-items: center;
justify-content: center;
&--circle {
border-radius: 100px;
}
&--square {
border-radius: 4px;
}
&__image {
&--circle {
border-radius: 100px;
}
&--square {
border-radius: 4px;
}
}
}
</style>
+89
View File
@@ -0,0 +1,89 @@
{
"id": "uv-avatar",
"displayName": "uv-avatar 头像 全面兼容小程序、nvue、vue2、vue3等多端",
"version": "1.0.5",
"description": "uv-avatar 本组件一般用于展示头像的地方,如个人中心,或者评论列表页的用户头像展示等场所。",
"keywords": [
"uv-avatar",
"uvui",
"uv-ui",
"avatar",
"头像"
],
"repository": "",
"engines": {
"HBuilderX": "^3.1.0"
},
"dcloudext": {
"type": "component-vue",
"sale": {
"regular": {
"price": "0.00"
},
"sourcecode": {
"price": "0.00"
}
},
"contact": {
"qq": ""
},
"declaration": {
"ads": "无",
"data": "插件不采集任何数据",
"permissions": "无"
},
"npmurl": ""
},
"uni_modules": {
"dependencies": [
"uv-ui-tools",
"uv-icon",
"uv-text"
],
"encrypt": [],
"platforms": {
"cloud": {
"tcb": "y",
"aliyun": "y"
},
"client": {
"Vue": {
"vue2": "y",
"vue3": "y"
},
"App": {
"app-vue": "y",
"app-nvue": "y"
},
"H5-mobile": {
"Safari": "y",
"Android Browser": "y",
"微信浏览器(Android)": "y",
"QQ浏览器(Android)": "y"
},
"H5-pc": {
"Chrome": "y",
"IE": "y",
"Edge": "y",
"Firefox": "y",
"Safari": "y"
},
"小程序": {
"微信": "y",
"阿里": "y",
"百度": "y",
"字节跳动": "y",
"QQ": "y",
"钉钉": "u",
"快手": "u",
"飞书": "u",
"京东": "u"
},
"快应用": {
"华为": "u",
"联盟": "u"
}
}
}
}
}
+11
View File
@@ -0,0 +1,11 @@
## Avatar 头像
> **组件名:uv-avatar**
本组件一般用于展示头像的地方,如个人中心,或者评论列表页的用户头像展示等场所。
### <a href="https://www.uvui.cn/components/avatar.html" target="_blank">查看文档</a>
### [完整示例项目下载 | 关注更多组件](https://ext.dcloud.net.cn/plugin?name=uv-ui)
#### 如使用过程中有任何问题,或者您对uv-ui有一些好的建议,欢迎加入 uv-ui 交流群:<a href="https://ext.dcloud.net.cn/plugin?id=12287" target="_blank">uv-ui</a>、<a href="https://www.uvui.cn/components/addQQGroup.html" target="_blank">官方QQ群</a>
+8
View File
@@ -0,0 +1,8 @@
## 1.0.2(2023-07-03)
1. 优化插槽自定义内容部分
2. 增加backToTop方法说明
## 1.0.1(2023-05-16)
1. 优化组件依赖,修改后无需全局引入,组件导入即可使用
2. 优化部分功能
## 1.0.0(2023-05-10)
uv-back-top 返回顶部
@@ -0,0 +1,58 @@
export default {
props: {
// 返回顶部的形状,circle-圆形,square-方形
mode: {
type: String,
default: 'circle'
},
// 自定义图标
icon: {
type: String,
default: 'arrow-upward'
},
// 提示文字
text: {
type: String,
default: ''
},
// 返回顶部滚动时间
duration: {
type: [String, Number],
default: 100
},
// 滚动距离
scrollTop: {
type: [String, Number],
default: 0
},
// 距离顶部多少距离显示,单位px
top: {
type: [String, Number],
default: 400
},
// 返回顶部按钮到底部的距离,单位px
bottom: {
type: [String, Number],
default: 100
},
// 返回顶部按钮到右边的距离,单位px
right: {
type: [String, Number],
default: 20
},
// 层级
zIndex: {
type: [String, Number],
default: 9
},
// 图标的样式,对象形式
iconStyle: {
type: Object,
default: () => ({
color: '#909399',
fontSize: '19px'
})
},
...uni.$uv?.props?.backtop
}
}
@@ -0,0 +1,116 @@
<template>
<uv-transition mode="fade" :customStyle="backTopStyle" :show="show">
<slot>
<view class="uv-back-top" :style="[contentStyle]" @click="backToTop">
<uv-icon :name="icon" :custom-style="iconStyle"></uv-icon>
<text v-if="text" class="uv-back-top__text">{{text}}</text>
</view>
</slot>
</uv-transition>
</template>
<script>
import mpMixin from '@/uni_modules/uv-ui-tools/libs/mixin/mpMixin.js'
import mixin from '@/uni_modules/uv-ui-tools/libs/mixin/mixin.js'
import props from './props.js';
// #ifdef APP-NVUE
const dom = weex.requireModule('dom')
// #endif
/**
* backTop 返回顶部
* @description 本组件一个用于长页面,滑动一定距离后,出现返回顶部按钮,方便快速返回顶部的场景。
* @tutorial https://www.uvui.cn/components/backTop.html
* @property {String} mode 返回顶部的形状,circle-圆形,square-方形 (默认 'circle' )
* @property {String} icon 自定义图标 (默认 'arrow-upward' ) 见官方文档示例
* @property {String} text 提示文字
* @property {String | Number} duration 返回顶部滚动时间 (默认 100)
* @property {String | Number} scrollTop 滚动距离 (默认 0 )
* @property {String | Number} top 距离顶部多少距离显示,单位px (默认 400 )
* @property {String | Number} bottom 返回顶部按钮到底部的距离,单位px (默认 100 )
* @property {String | Number} right 返回顶部按钮到右边的距离,单位px (默认 20 )
* @property {String | Number} zIndex 层级 (默认 9 )
* @property {Object<Object>} iconStyle 图标的样式,对象形式 (默认 {color: '#909399',fontSize: '19px'})
* @property {Object} customStyle 定义需要用到的外部样式
*
* @example <uv-back-top :scrollTop="scrollTop"></uv-back-top>
*/
export default {
name: 'uv-back-top',
emits: ['click'],
mixins: [mpMixin, mixin, props],
computed: {
backTopStyle() {
// 动画组件样式
const style = {
bottom: this.$uv.addUnit(this.bottom),
right: this.$uv.addUnit(this.right),
width: '40px',
height: '40px',
position: 'fixed',
zIndex: 10,
}
return style
},
show() {
return this.$uv.getPx(this.scrollTop) > this.$uv.getPx(this.top)
},
contentStyle() {
const style = {}
let radius = 0
// 是否圆形
if (this.mode === 'circle') {
radius = '100px'
} else {
radius = '4px'
}
// 为了兼容安卓nvue,只能这么分开写
style.borderTopLeftRadius = radius
style.borderTopRightRadius = radius
style.borderBottomLeftRadius = radius
style.borderBottomRightRadius = radius
return this.$uv.deepMerge(style, this.$uv.addStyle(this.customStyle))
}
},
methods: {
backToTop() {
// #ifdef APP-NVUE
if (!this.$parent.$refs['uv-back-top']) {
this.$uv.error(`nvue页面需要给页面最外层元素设置"ref='uv-back-top'`)
}
dom.scrollToElement(this.$parent.$refs['uv-back-top'], {
offset: 0
})
// #endif
// #ifndef APP-NVUE
uni.pageScrollTo({
scrollTop: 0,
duration: this.duration
});
// #endif
this.$emit('click')
}
}
}
</script>
<style lang="scss" scoped>
@import '@/uni_modules/uv-ui-tools/libs/css/components.scss';
$uv-back-top-flex: 1 !default;
$uv-back-top-height: 100% !default;
$uv-back-top-background-color: #E1E1E1 !default;
$uv-back-top-tips-font-size: 12px !default;
.uv-back-top {
@include flex;
flex-direction: column;
align-items: center;
flex: $uv-back-top-flex;
height: $uv-back-top-height;
justify-content: center;
background-color: $uv-back-top-background-color;
&__tips {
font-size: $uv-back-top-tips-font-size;
transform: scale(0.8);
}
}
</style>
+89
View File
@@ -0,0 +1,89 @@
{
"id": "uv-back-top",
"displayName": "uv-back-top 返回顶部 全面兼容小程序、nvue、vue2、vue3等多端",
"version": "1.0.2",
"description": "返回顶部 组件一个用于长页面,滑动一定距离后,出现返回顶部按钮,方便快速返回顶部的场景。",
"keywords": [
"uv-back-top",
"uvui",
"uv-ui",
"avatar",
"返回顶部"
],
"repository": "",
"engines": {
"HBuilderX": "^3.1.0"
},
"dcloudext": {
"type": "component-vue",
"sale": {
"regular": {
"price": "0.00"
},
"sourcecode": {
"price": "0.00"
}
},
"contact": {
"qq": ""
},
"declaration": {
"ads": "无",
"data": "插件不采集任何数据",
"permissions": "无"
},
"npmurl": ""
},
"uni_modules": {
"dependencies": [
"uv-ui-tools",
"uv-icon",
"uv-transition"
],
"encrypt": [],
"platforms": {
"cloud": {
"tcb": "y",
"aliyun": "y"
},
"client": {
"Vue": {
"vue2": "y",
"vue3": "y"
},
"App": {
"app-vue": "y",
"app-nvue": "y"
},
"H5-mobile": {
"Safari": "y",
"Android Browser": "y",
"微信浏览器(Android)": "y",
"QQ浏览器(Android)": "y"
},
"H5-pc": {
"Chrome": "y",
"IE": "y",
"Edge": "y",
"Firefox": "y",
"Safari": "y"
},
"小程序": {
"微信": "y",
"阿里": "y",
"百度": "y",
"字节跳动": "y",
"QQ": "y",
"钉钉": "u",
"快手": "u",
"飞书": "u",
"京东": "u"
},
"快应用": {
"华为": "u",
"联盟": "u"
}
}
}
}
}
+11
View File
@@ -0,0 +1,11 @@
## BackTop 返回顶部
> **组件名:uv-back-top**
该组件一个用于长页面,滑动一定距离后,出现返回顶部按钮,方便快速返回顶部的场景。
### <a href="https://www.uvui.cn/components/backTop.html" target="_blank">查看文档</a>
### [完整示例项目下载 | 关注更多组件](https://ext.dcloud.net.cn/plugin?name=uv-ui)
#### 如使用过程中有任何问题,或者您对uv-ui有一些好的建议,欢迎加入 uv-ui 交流群:<a href="https://ext.dcloud.net.cn/plugin?id=12287" target="_blank">uv-ui</a>、<a href="https://www.uvui.cn/components/addQQGroup.html" target="_blank">官方QQ群</a>
+7
View File
@@ -0,0 +1,7 @@
## 1.0.2(2023-06-04)
1. 修复type等属性为null的时候不显示徽标的BUG
## 1.0.1(2023-05-16)
1. 优化组件依赖,修改后无需全局引入,组件导入即可使用
2. 优化部分功能
## 1.0.0(2023-05-10)
uv-badge 徽标数,数字角标
@@ -0,0 +1,73 @@
export default {
props: {
// 是否显示圆点
isDot: {
type: Boolean,
default: false
},
// 显示的内容
value: {
type: [Number, String],
default: ''
},
// 是否显示
show: {
type: Boolean,
default: true
},
// 最大值,超过最大值会显示 '{max}+'
max: {
type: [Number, String],
default: 999
},
// 主题类型,error|warning|success|primary
type: {
type: [String,undefined,null],
default: 'error'
},
// 当数值为 0 时,是否展示 Badge
showZero: {
type: Boolean,
default: false
},
// 背景颜色,优先级比type高,如设置,type参数会失效
bgColor: {
type: [String, null],
default: null
},
// 字体颜色
color: {
type: [String, null],
default: null
},
// 徽标形状,circle-四角均为圆角,horn-左下角为直角
shape: {
type: [String,undefined,null],
default: 'circle'
},
// 设置数字的显示方式,overflow|ellipsis|limit
// overflow会根据max字段判断,超出显示`${max}+`
// ellipsis会根据max判断,超出显示`${max}...`
// limit会依据1000作为判断条件,超出1000,显示`${value/1000}K`,比如2.2k、3.34w,最多保留2位小数
numberType: {
type: [String,undefined,null],
default: 'overflow'
},
// 设置badge的位置偏移,格式为 [x, y],也即设置的为top和right的值,absolute为true时有效
offset: {
type: Array,
default: () => []
},
// 是否反转背景和字体颜色
inverted: {
type: Boolean,
default: false
},
// 是否绝对定位
absolute: {
type: Boolean,
default: false
},
...uni.$uv?.props?.badge
}
}
@@ -0,0 +1,176 @@
<template>
<text
v-if="show && ((Number(value) === 0 ? showZero : true) || isDot)"
:class="[isDot ? 'uv-badge--dot' : 'uv-badge--not-dot', inverted && 'uv-badge--inverted', shape === 'horn' && 'uv-badge--horn', `uv-badge--${propsType}${inverted ? '--inverted' : ''}`]"
:style="[$uv.addStyle(customStyle), badgeStyle]"
class="uv-badge"
>{{ isDot ? '' :showValue }}</text>
</template>
<script>
import mpMixin from '@/uni_modules/uv-ui-tools/libs/mixin/mpMixin.js'
import mixin from '@/uni_modules/uv-ui-tools/libs/mixin/mixin.js'
import props from './props.js';
/**
* badge 徽标数
* @description 该组件一般用于图标右上角显示未读的消息数量,提示用户点击,有圆点和圆包含文字两种形式。
* @tutorial https://www.uvui.cn/components/badge.html
*
* @property {Boolean} isDot 是否显示圆点 (默认 false )
* @property {String | Number} value 显示的内容
* @property {Boolean} show 是否显示 (默认 true )
* @property {String | Number} max 最大值,超过最大值会显示 '{max}+' (默认999)
* @property {String} type 主题类型,error|warning|success|primary (默认 'error' )
* @property {Boolean} showZero 当数值为 0 时,是否展示 Badge (默认 false )
* @property {String} bgColor 背景颜色,优先级比type高,如设置,type参数会失效
* @property {String} color 字体颜色 (默认 '#ffffff' )
* @property {String} shape 徽标形状,circle-四角均为圆角,horn-左下角为直角 (默认 'circle' )
* @property {String} numberType 设置数字的显示方式,overflow|ellipsis|limit (默认 'overflow' )
* @property {Array}} offset 设置badge的位置偏移,格式为 [x, y],也即设置的为top和right的值,absolute为true时有效
* @property {Boolean} inverted 是否反转背景和字体颜色(默认 false )
* @property {Boolean} absolute 是否绝对定位(默认 false )
* @property {Object} customStyle 定义需要用到的外部样式
* @example <uv-badge :type="type" :count="count"></uv-badge>
*/
export default {
name: 'uv-badge',
mixins: [mpMixin, mixin, props],
computed: {
// 是否将badge中心与父组件右上角重合
boxStyle() {
let style = {};
return style;
},
// 整个组件的样式
badgeStyle() {
const style = {}
if(this.color) {
style.color = this.color
}
if (this.bgColor && !this.inverted) {
style.backgroundColor = this.bgColor
}
if (this.absolute) {
style.position = 'absolute'
// 如果有设置offset参数
if(this.offset.length) {
// top和right分为为offset的第一个和第二个值,如果没有第二个值,则right等于top
const top = this.offset[0]
const right = this.offset[1] || top
style.top = this.$uv.addUnit(top)
style.right = this.$uv.addUnit(right)
}
}
return style
},
showValue() {
switch (this.numberType) {
case "overflow":
return Number(this.value) > Number(this.max) ? this.max + "+" : this.value
break;
case "ellipsis":
return Number(this.value) > Number(this.max) ? "..." : this.value
break;
case "limit":
return Number(this.value) > 999 ? Number(this.value) >= 9999 ?
Math.floor(this.value / 1e4 * 100) / 100 + "w" : Math.floor(this.value /
1e3 * 100) / 100 + "k" : this.value
break;
default:
return Number(this.value)
}
},
propsType(){
return this.type || 'error'
}
}
}
</script>
<style lang="scss" scoped>
@import '@/uni_modules/uv-ui-tools/libs/css/components.scss';
@import '@/uni_modules/uv-ui-tools/libs/css/color.scss';
$uv-badge-primary: $uv-primary !default;
$uv-badge-error: $uv-error !default;
$uv-badge-success: $uv-success !default;
$uv-badge-info: $uv-info !default;
$uv-badge-warning: $uv-warning !default;
$uv-badge-dot-radius: 100px !default;
$uv-badge-dot-size: 8px !default;
$uv-badge-dot-right: 4px !default;
$uv-badge-dot-top: 0 !default;
$uv-badge-text-font-size: 11px !default;
$uv-badge-text-right: 10px !default;
$uv-badge-text-padding: 2px 5px !default;
$uv-badge-text-align: center !default;
$uv-badge-text-color: #FFFFFF !default;
.uv-badge {
border-top-right-radius: $uv-badge-dot-radius;
border-top-left-radius: $uv-badge-dot-radius;
border-bottom-left-radius: $uv-badge-dot-radius;
border-bottom-right-radius: $uv-badge-dot-radius;
@include flex;
line-height: $uv-badge-text-font-size;
text-align: $uv-badge-text-align;
font-size: $uv-badge-text-font-size;
color: $uv-badge-text-color;
&--dot {
height: $uv-badge-dot-size;
width: $uv-badge-dot-size;
}
&--inverted {
font-size: 13px;
}
&--not-dot {
padding: $uv-badge-text-padding;
}
&--horn {
border-bottom-left-radius: 0;
}
&--primary {
background-color: $uv-badge-primary;
}
&--primary--inverted {
color: $uv-badge-primary;
}
&--error {
background-color: $uv-badge-error;
}
&--error--inverted {
color: $uv-badge-error;
}
&--success {
background-color: $uv-badge-success;
}
&--success--inverted {
color: $uv-badge-success;
}
&--info {
background-color: $uv-badge-info;
}
&--info--inverted {
color: $uv-badge-info;
}
&--warning {
background-color: $uv-badge-warning;
}
&--warning--inverted {
color: $uv-badge-warning;
}
}
</style>
+87
View File
@@ -0,0 +1,87 @@
{
"id": "uv-badge",
"displayName": "uv-badge 徽标数,数字角标 全面兼容小程序、nvue、vue2、vue3等多端",
"version": "1.0.2",
"description": "徽标数一般用于图标右上角显示未读的消息数量,提示用户点击,有圆点和圆包含文字两种形式。",
"keywords": [
"uv-badge",
"uvui",
"uv-ui",
"徽标数",
"数字角标"
],
"repository": "",
"engines": {
"HBuilderX": "^3.1.0"
},
"dcloudext": {
"type": "component-vue",
"sale": {
"regular": {
"price": "0.00"
},
"sourcecode": {
"price": "0.00"
}
},
"contact": {
"qq": ""
},
"declaration": {
"ads": "无",
"data": "插件不采集任何数据",
"permissions": "无"
},
"npmurl": ""
},
"uni_modules": {
"dependencies": [
"uv-ui-tools"
],
"encrypt": [],
"platforms": {
"cloud": {
"tcb": "y",
"aliyun": "y"
},
"client": {
"Vue": {
"vue2": "y",
"vue3": "y"
},
"App": {
"app-vue": "y",
"app-nvue": "y"
},
"H5-mobile": {
"Safari": "y",
"Android Browser": "y",
"微信浏览器(Android)": "y",
"QQ浏览器(Android)": "y"
},
"H5-pc": {
"Chrome": "y",
"IE": "y",
"Edge": "y",
"Firefox": "y",
"Safari": "y"
},
"小程序": {
"微信": "y",
"阿里": "y",
"百度": "y",
"字节跳动": "y",
"QQ": "y",
"钉钉": "u",
"快手": "u",
"飞书": "u",
"京东": "u"
},
"快应用": {
"华为": "u",
"联盟": "u"
}
}
}
}
}
+11
View File
@@ -0,0 +1,11 @@
## Badge 徽标数
> **组件名:uv-badge**
该组件一般用于图标右上角显示未读的消息数量,提示用户点击,有圆点和圆包含文字两种形式。
### <a href="https://www.uvui.cn/components/badge.html" target="_blank">查看文档</a>
### [完整示例项目下载 | 关注更多组件](https://ext.dcloud.net.cn/plugin?name=uv-ui)
#### 如使用过程中有任何问题,或者您对uv-ui有一些好的建议,欢迎加入 uv-ui 交流群:<a href="https://ext.dcloud.net.cn/plugin?id=12287" target="_blank">uv-ui</a>、<a href="https://www.uvui.cn/components/addQQGroup.html" target="_blank">官方QQ群</a>
+33
View File
@@ -0,0 +1,33 @@
## 1.0.15(2023-12-20)
1. 优化
## 1.0.14(2023-12-06)
1. 优化
## 1.0.13(2023-12-06)
1. 阻止事件冒泡处理
## 1.0.12(2023-10-19)
1. 增加后置插槽
## 1.0.11(2023-09-21)
1. 修复通过customStyle修改按钮宽度,组件中最外层节点不改变的问题
## 1.0.10(2023-09-15)
1. 按钮支持open-type="agreePrivacyAuthorization"
## 1.0.9(2023-09-11)
1. 增加参数iconSize,用于控制图标的大小
## 1.0.8(2023-09-10)
1. 修复多个按钮在一行宽度不正常的BUG
## 1.0.7(2023-09-07)
1. 修复warning颜色对应错误的BUG
## 1.0.6(2023-07-25)
1. 增加customTextStyle属性,方便自定义文字样式
## 1.0.5(2023-07-20)
1. 解决微信小程序动态设置hover-class点击态不消失的BUG
## 1.0.4(2023-06-29)
1. 修改上次更新出现nvue报错异常
## 1.0.3(2023-06-28)
修复:设置open-type="chooseAvatar"等值不生效的BUG
## 1.0.2(2023-06-01)
1. 修复按钮点击触发两次的BUG
## 1.0.1(2023-05-16)
1. 优化组件依赖,修改后无需全局引入,组件导入即可使用
2. 优化部分功能
## 1.0.0(2023-05-10)
uv-button 按钮
@@ -0,0 +1,46 @@
$uv-button-active-opacity:0.75 !default;
$uv-button-loading-text-margin-left:4px !default;
$uv-button-text-color: #FFFFFF !default;
$uv-button-text-plain-error-color:$uv-error !default;
$uv-button-text-plain-warning-color:$uv-warning !default;
$uv-button-text-plain-success-color:$uv-success !default;
$uv-button-text-plain-info-color:$uv-info !default;
$uv-button-text-plain-primary-color:$uv-primary !default;
.uv-button {
&--active {
opacity: $uv-button-active-opacity;
}
&--active--plain {
background-color: rgb(217, 217, 217);
}
&__loading-text {
margin-left:$uv-button-loading-text-margin-left;
}
&__text,
&__loading-text {
color:$uv-button-text-color;
}
&__text--plain--error {
color:$uv-button-text-plain-error-color;
}
&__text--plain--warning {
color:$uv-button-text-plain-warning-color;
}
&__text--plain--success{
color:$uv-button-text-plain-success-color;
}
&__text--plain--info {
color:$uv-button-text-plain-info-color;
}
&__text--plain--primary {
color:$uv-button-text-plain-primary-color;
}
}
@@ -0,0 +1,163 @@
export default {
props: {
// 是否细边框
hairline: {
type: Boolean,
default: true
},
// 按钮的预置样式,info,primary,error,warning,success
type: {
type: String,
default: 'info'
},
// 按钮尺寸,large,normal,small,mini
size: {
type: String,
default: 'normal'
},
// 按钮形状,circle(两边为半圆),square(带圆角)
shape: {
type: String,
default: 'square'
},
// 按钮是否镂空
plain: {
type: Boolean,
default: false
},
// 是否禁止状态
disabled: {
type: Boolean,
default: false
},
// 是否加载中
loading: {
type: Boolean,
default: false
},
// 加载中提示文字
loadingText: {
type: [String, Number],
default: ''
},
// 加载状态图标类型
loadingMode: {
type: String,
default: 'spinner'
},
// 加载图标大小
loadingSize: {
type: [String, Number],
default: 14
},
// 开放能力,具体请看uniapp稳定关于button组件部分说明
// https://uniapp.dcloud.io/component/button
openType: {
type: String,
default: ''
},
// 用于 <form> 组件,点击分别会触发 <form> 组件的 submit/reset 事件
// 取值为submit(提交表单),reset(重置表单)
formType: {
type: String,
default: ''
},
// 打开 APP 时,向 APP 传递的参数,open-type=launchApp时有效
// 只微信小程序、QQ小程序有效
appParameter: {
type: String,
default: ''
},
// 指定是否阻止本节点的祖先节点出现点击态,微信小程序有效
hoverStopPropagation: {
type: Boolean,
default: true
},
// 指定返回用户信息的语言,zh_CN 简体中文,zh_TW 繁体中文,en 英文。只微信小程序有效
lang: {
type: String,
default: 'en'
},
// 会话来源,open-type="contact"时有效。只微信小程序有效
sessionFrom: {
type: String,
default: ''
},
// 会话内消息卡片标题,open-type="contact"时有效
// 默认当前标题,只微信小程序有效
sendMessageTitle: {
type: String,
default: ''
},
// 会话内消息卡片点击跳转小程序路径,open-type="contact"时有效
// 默认当前分享路径,只微信小程序有效
sendMessagePath: {
type: String,
default: ''
},
// 会话内消息卡片图片,open-type="contact"时有效
// 默认当前页面截图,只微信小程序有效
sendMessageImg: {
type: String,
default: ''
},
// 是否显示会话内消息卡片,设置此参数为 true,用户进入客服会话会在右下角显示"可能要发送的小程序"提示,
// 用户点击后可以快速发送小程序消息,open-type="contact"时有效
showMessageCard: {
type: Boolean,
default: true
},
// 额外传参参数,用于小程序的data-xxx属性,通过target.dataset.name获取
dataName: {
type: String,
default: ''
},
// 节流,一定时间内只能触发一次
throttleTime: {
type: [String, Number],
default: 0
},
// 按住后多久出现点击态,单位毫秒
hoverStartTime: {
type: [String, Number],
default: 0
},
// 手指松开后点击态保留时间,单位毫秒
hoverStayTime: {
type: [String, Number],
default: 200
},
// 按钮文字,之所以通过props传入,是因为slot传入的话
// nvue中无法控制文字的样式
text: {
type: [String, Number],
default: ''
},
// 按钮图标
icon: {
type: String,
default: ''
},
// 按钮图标大小
iconSize: {
type: [String, Number],
default: ''
},
// 按钮图标颜色
iconColor: {
type: String,
default: '#000000'
},
// 按钮颜色,支持传入linear-gradient渐变色
color: {
type: String,
default: ''
},
// 自定义按钮文本样式
customTextStyle: {
type: [Object,String],
default: ''
},
...uni.$uv?.props?.button
}
}
@@ -0,0 +1,528 @@
<template>
<view
class="uv-button-wrapper"
:style="[btnWrapperStyle]"
>
<!-- #ifndef APP-NVUE -->
<!-- #ifdef MP -->
<!-- 为了解决微信小程序动态设置hover-class点击态不消失的BUG -->
<view class="uv-button-wrapper--dis" v-if="disabled || loading"></view>
<button
:hover-start-time="Number(hoverStartTime)"
:hover-stay-time="Number(hoverStayTime)"
:form-type="formType"
:open-type="openType"
:app-parameter="appParameter"
:hover-stop-propagation="hoverStopPropagation"
:send-message-title="sendMessageTitle"
:send-message-path="sendMessagePath"
:lang="lang"
:data-name="dataName"
:session-from="sessionFrom"
:send-message-img="sendMessageImg"
:show-message-card="showMessageCard"
@getphonenumber="onGetPhoneNumber"
@getuserinfo="onGetUserInfo"
@error="onError"
@opensetting="onOpenSetting"
@launchapp="onLaunchApp"
@contact="onContact"
@chooseavatar="onChooseavatar"
@agreeprivacyauthorization="onAgreeprivacyauthorization"
@addgroupapp="onAddgroupapp"
@chooseaddress="onChooseaddress"
@subscribe="onSubscribe"
@login="onLogin"
@im="onIm"
hover-class="uv-button--active"
class="uv-button uv-reset-button"
:style="[baseColor, $uv.addStyle(customStyle)]"
@tap="clickHandler"
:class="bemClass"
>
<!-- #endif -->
<!-- #ifndef MP -->
<button
:hover-start-time="Number(hoverStartTime)"
:hover-stay-time="Number(hoverStayTime)"
:form-type="formType"
:open-type="openType"
:app-parameter="appParameter"
:hover-stop-propagation="hoverStopPropagation"
:send-message-title="sendMessageTitle"
:send-message-path="sendMessagePath"
:lang="lang"
:data-name="dataName"
:session-from="sessionFrom"
:send-message-img="sendMessageImg"
:show-message-card="showMessageCard"
:hover-class="!disabled && !loading ? 'uv-button--active' : ''"
class="uv-button uv-reset-button"
:style="[baseColor, $uv.addStyle(customStyle)]"
@tap="clickHandler"
:class="bemClass"
>
<!-- #endif -->
<template v-if="loading">
<uv-loading-icon
:mode="loadingMode"
:size="loadingSize * 1.15"
:color="loadingColor"
></uv-loading-icon>
<text
class="uv-button__loading-text"
:style="[
{ fontSize: textSize + 'px' },
$uv.addStyle(customTextStyle)
]"
>{{ loadingText || text }}</text>
</template>
<template v-else>
<uv-icon
v-if="icon"
:name="icon"
:color="iconColorCom"
:size="getIconSize"
:customStyle="{ marginRight: '2px' }"
></uv-icon>
<slot>
<text
class="uv-button__text"
:style="[
{ fontSize: textSize + 'px' },
$uv.addStyle(customTextStyle)
]"
>{{ text }}</text>
</slot>
<slot name="suffix"></slot>
</template>
</button>
<!-- #endif -->
<!-- #ifdef APP-NVUE -->
<view
:hover-start-time="Number(hoverStartTime)"
:hover-stay-time="Number(hoverStayTime)"
class="uv-button"
:hover-class="
!disabled && !loading && !color && (plain || type === 'info')
? 'uv-button--active--plain'
: !disabled && !loading && !plain
? 'uv-button--active'
: ''
"
@tap="clickHandler"
:class="bemClass"
:style="[baseColor, $uv.addStyle(customStyle)]"
>
<template v-if="loading">
<uv-loading-icon
:mode="loadingMode"
:size="loadingSize * 1.15"
:color="loadingColor"
></uv-loading-icon>
<text
class="uv-button__loading-text"
:style="[nvueTextStyle,$uv.addStyle(customTextStyle)]"
:class="[plain && `uv-button__text--plain--${type}`]"
>{{ loadingText || text }}</text>
</template>
<template v-else>
<uv-icon
v-if="icon"
:name="icon"
:color="iconColorCom"
:size="getIconSize"
></uv-icon>
<text
class="uv-button__text"
:style="[
{
marginLeft: icon ? '2px' : 0,
},
nvueTextStyle,
$uv.addStyle(customTextStyle)
]"
:class="[plain && `uv-button__text--plain--${type}`]"
>{{ text }}</text>
<slot name="suffix"></slot>
</template>
</view>
<!-- #endif -->
</view>
</template>
<script>
import throttle from '@/uni_modules/uv-ui-tools/libs/function/throttle.js';
import mpMixin from '@/uni_modules/uv-ui-tools/libs/mixin/mpMixin.js'
import mixin from '@/uni_modules/uv-ui-tools/libs/mixin/mixin.js'
import button from '@/uni_modules/uv-ui-tools/libs/mixin/button.js'
import openType from '@/uni_modules/uv-ui-tools/libs/mixin/openType.js'
import props from "./props.js";
/**
* button 按钮
* @description Button 按钮
* @tutorial https://www.uvui.cn/components/button.html
* @property {Boolean} hairline 是否显示按钮的细边框 (默认 true )
* @property {String} type 按钮的预置样式,info,primary,error,warning,success (默认 'info' )
* @property {String} size 按钮尺寸,large,normal,mini (默认 normal)
* @property {String} shape 按钮形状,circle(两边为半圆),square(带圆角) (默认 'square' )
* @property {Boolean} plain 按钮是否镂空,背景色透明 (默认 false)
* @property {Boolean} disabled 是否禁用 (默认 false)
* @property {Boolean} loading 按钮名称前是否带 loading 图标(App-nvue 平台,在 ios 上为雪花,Android上为圆圈) (默认 false)
* @property {String | Number} loadingText 加载中提示文字
* @property {String} loadingMode 加载状态图标类型 (默认 'spinner' )
* @property {String | Number} loadingSize 加载图标大小 (默认 15 )
* @property {String} openType 开放能力,具体请看uniapp稳定关于button组件部分说明
* @property {String} formType 用于 <form> 组件,点击分别会触发 <form> 组件的 submit/reset 事件
* @property {String} appParameter 打开 APP 时,向 APP 传递的参数,open-type=launchApp时有效 (注:只微信小程序、QQ小程序有效)
* @property {Boolean} hoverStopPropagation 指定是否阻止本节点的祖先节点出现点击态,微信小程序有效(默认 true )
* @property {String} lang 指定返回用户信息的语言,zh_CN 简体中文,zh_TW 繁体中文,en 英文(默认 en )
* @property {String} sessionFrom 会话来源,openType="contact"时有效
* @property {String} sendMessageTitle 会话内消息卡片标题,openType="contact"时有效
* @property {String} sendMessagePath 会话内消息卡片点击跳转小程序路径,openType="contact"时有效
* @property {String} sendMessageImg 会话内消息卡片图片,openType="contact"时有效
* @property {Boolean} showMessageCard 是否显示会话内消息卡片,设置此参数为 true,用户进入客服会话会在右下角显示"可能要发送的小程序"提示,用户点击后可以快速发送小程序消息,openType="contact"时有效(默认false)
* @property {String} dataName 额外传参参数,用于小程序的data-xxx属性,通过target.dataset.name获取
* @property {String | Number} throttleTime 节流,一定时间内只能触发一次 (默认 0 )
* @property {String | Number} hoverStartTime 按住后多久出现点击态,单位毫秒 (默认 0 )
* @property {String | Number} hoverStayTime 手指松开后点击态保留时间,单位毫秒 (默认 200 )
* @property {String | Number} text 按钮文字,之所以通过props传入,是因为slot传入的话(注:nvue中无法控制文字的样式)
* @property {String} icon 按钮图标
* @property {String} iconColor 按钮图标颜色
* @property {String} color 按钮颜色,支持传入linear-gradient渐变色
* @property {Object} customStyle 定义需要用到的外部样式
* @event {Function} click 非禁止并且非加载中,才能点击
* @event {Function} getphonenumber open-type="getPhoneNumber"时有效
* @event {Function} getuserinfo 用户点击该按钮时,会返回获取到的用户信息,从返回参数的detail中获取到的值同uni.getUserInfo
* @event {Function} error 当使用开放能力时,发生错误的回调
* @event {Function} opensetting 在打开授权设置页并关闭后回调
* @event {Function} launchapp 打开 APP 成功的回调
* @example <uv-button>月落</uv-button>
*/
export default {
name: "uv-button",
// #ifdef MP
mixins: [mpMixin, mixin, button, openType, props],
// #endif
// #ifndef MP
mixins: [mpMixin, mixin, props],
// #endif
emits: ['click'],
data() {
return {};
},
computed: {
// 生成bem风格的类名
bemClass() {
// this.bem为一个computed变量,在mixin中
if (!this.color) {
return this.bem("button",
["type", "shape", "size"],
["disabled", "plain", "hairline"]);
} else {
// 由于nvue的原因,在有color参数时,不需要传入type,否则会生成type相关的类型,影响最终的样式
return this.bem("button",
["shape", "size"],
["disabled", "plain", "hairline"]);
}
},
loadingColor() {
if (this.plain) {
// 如果有设置color值,则用color值,否则使用type主题颜色
return this.color ? this.color : '#3c9cff';
}
if (this.type === "info") {
return "#c9c9c9";
}
return "rgb(200, 200, 200)";
},
iconColorCom() {
// 如果是镂空状态,设置了color就用color值,否则使用主题颜色,
// uv-icon的color能接受一个主题颜色的值
if (this.iconColor) return this.iconColor;
if (this.plain) {
return this.color ? this.color : this.type;
} else {
return this.type === "info" ? "#000000" : "#ffffff";
}
},
baseColor() {
let style = {};
if (this.color) {
// 针对自定义了color颜色的情况,镂空状态下,就是用自定义的颜色
style.color = this.plain ? this.color : "white";
if (!this.plain) {
// 非镂空,背景色使用自定义的颜色
style["background-color"] = this.color;
}
if (this.color.indexOf("gradient") !== -1) {
// 如果自定义的颜色为渐变色,不显示边框,以及通过backgroundImage设置渐变色
// weex文档说明可以写borderWidth的形式,为什么这里需要分开写?
// 因为weex是阿里巴巴为了部门业绩考核而做的你懂的东西,所以需要这么写才有效
style.borderTopWidth = 0;
style.borderRightWidth = 0;
style.borderBottomWidth = 0;
style.borderLeftWidth = 0;
if (!this.plain) {
style.backgroundImage = this.color;
}
} else {
// 非渐变色,则设置边框相关的属性
style.borderColor = this.color;
style.borderWidth = "1px";
style.borderStyle = "solid";
}
}
return style;
},
// nvue版本按钮的字体不会继承父组件的颜色,需要对每一个text组件进行单独的设置
nvueTextStyle() {
let style = {};
// 针对自定义了color颜色的情况,镂空状态下,就是用自定义的颜色
if (this.type === "info") {
style.color = "#323233";
}
if (this.color) {
style.color = this.plain ? this.color : "white";
}
style.fontSize = this.textSize + "px";
return style;
},
// 字体大小
textSize() {
let fontSize = 14,
{ size } = this;
if (size === "large") fontSize = 16;
if (size === "normal") fontSize = 14;
if (size === "small") fontSize = 12;
if (size === "mini") fontSize = 10;
return fontSize;
},
// 设置图标大小
getIconSize() {
const size = this.iconSize ? this.iconSize : this.textSize * 1.35;
return this.$uv.addUnit(size);
},
// 设置外层盒子的宽度,其他样式不需要
btnWrapperStyle() {
const style = {};
const customStyle = this.$uv.addStyle(this.customStyle);
if(customStyle.width) style.width = customStyle.width;
return style;
}
},
methods: {
clickHandler() {
// 非禁止并且非加载中,才能点击
if (!this.disabled && !this.loading) {
// 进行节流控制,每this.throttle毫秒内,只在开始处执行
throttle(() => {
this.$emit("click");
}, this.throttleTime);
}
}
}
}
</script>
<style lang="scss" scoped>
$show-reset-button: 1;
@import '@/uni_modules/uv-ui-tools/libs/css/variable.scss';
@import '@/uni_modules/uv-ui-tools/libs/css/components.scss';
@import '@/uni_modules/uv-ui-tools/libs/css/color.scss';
/* #ifndef APP-NVUE */
@import "./vue.scss";
/* #endif */
/* #ifdef APP-NVUE */
@import "./nvue.scss";
/* #endif */
$uv-button-uv-button-height: 40px !default;
$uv-button-text-font-size: 15px !default;
$uv-button-loading-text-font-size: 15px !default;
$uv-button-loading-text-margin-left: 4px !default;
$uv-button-large-width: 100% !default;
$uv-button-large-height: 50px !default;
$uv-button-normal-padding: 0 12px !default;
$uv-button-large-padding: 0 15px !default;
$uv-button-normal-font-size: 14px !default;
$uv-button-small-min-width: 60px !default;
$uv-button-small-height: 30px !default;
$uv-button-small-padding: 0px 8px !default;
$uv-button-mini-padding: 0px 8px !default;
$uv-button-small-font-size: 12px !default;
$uv-button-mini-height: 22px !default;
$uv-button-mini-font-size: 10px !default;
$uv-button-mini-min-width: 50px !default;
$uv-button-disabled-opacity: 0.5 !default;
$uv-button-info-color: #323233 !default;
$uv-button-info-background-color: #fff !default;
$uv-button-info-border-color: #ebedf0 !default;
$uv-button-info-border-width: 1px !default;
$uv-button-info-border-style: solid !default;
$uv-button-success-color: #fff !default;
$uv-button-success-background-color: $uv-success !default;
$uv-button-success-border-color: $uv-button-success-background-color !default;
$uv-button-success-border-width: 1px !default;
$uv-button-success-border-style: solid !default;
$uv-button-primary-color: #fff !default;
$uv-button-primary-background-color: $uv-primary !default;
$uv-button-primary-border-color: $uv-button-primary-background-color !default;
$uv-button-primary-border-width: 1px !default;
$uv-button-primary-border-style: solid !default;
$uv-button-error-color: #fff !default;
$uv-button-error-background-color: $uv-error !default;
$uv-button-error-border-color: $uv-button-error-background-color !default;
$uv-button-error-border-width: 1px !default;
$uv-button-error-border-style: solid !default;
$uv-button-warning-color: #fff !default;
$uv-button-warning-background-color: $uv-warning !default;
$uv-button-warning-border-color: $uv-button-warning-background-color !default;
$uv-button-warning-border-width: 1px !default;
$uv-button-warning-border-style: solid !default;
$uv-button-block-width: 100% !default;
$uv-button-circle-border-top-right-radius: 100px !default;
$uv-button-circle-border-top-left-radius: 100px !default;
$uv-button-circle-border-bottom-left-radius: 100px !default;
$uv-button-circle-border-bottom-right-radius: 100px !default;
$uv-button-square-border-top-right-radius: 3px !default;
$uv-button-square-border-top-left-radius: 3px !default;
$uv-button-square-border-bottom-left-radius: 3px !default;
$uv-button-square-border-bottom-right-radius: 3px !default;
$uv-button-icon-min-width: 1em !default;
$uv-button-plain-background-color: #fff !default;
$uv-button-hairline-border-width: 0.5px !default;
.uv-button {
height: $uv-button-uv-button-height;
position: relative;
align-items: center;
justify-content: center;
@include flex;
/* #ifndef APP-NVUE */
box-sizing: border-box;
/* #endif */
flex-direction: row;
&__text {
font-size: $uv-button-text-font-size;
}
&__loading-text {
font-size: $uv-button-loading-text-font-size;
margin-left: $uv-button-loading-text-margin-left;
}
&--large {
/* #ifndef APP-NVUE */
width: $uv-button-large-width;
/* #endif */
height: $uv-button-large-height;
padding: $uv-button-large-padding;
}
&--normal {
padding: $uv-button-normal-padding;
font-size: $uv-button-normal-font-size;
}
&--small {
/* #ifndef APP-NVUE */
min-width: $uv-button-small-min-width;
/* #endif */
height: $uv-button-small-height;
padding: $uv-button-small-padding;
font-size: $uv-button-small-font-size;
}
&--mini {
height: $uv-button-mini-height;
font-size: $uv-button-mini-font-size;
/* #ifndef APP-NVUE */
min-width: $uv-button-mini-min-width;
/* #endif */
padding: $uv-button-mini-padding;
}
&--disabled {
opacity: $uv-button-disabled-opacity;
}
&--info {
color: $uv-button-info-color;
background-color: $uv-button-info-background-color;
border-color: $uv-button-info-border-color;
border-width: $uv-button-info-border-width;
border-style: $uv-button-info-border-style;
}
&--success {
color: $uv-button-success-color;
background-color: $uv-button-success-background-color;
border-color: $uv-button-success-border-color;
border-width: $uv-button-success-border-width;
border-style: $uv-button-success-border-style;
}
&--primary {
color: $uv-button-primary-color;
background-color: $uv-button-primary-background-color;
border-color: $uv-button-primary-border-color;
border-width: $uv-button-primary-border-width;
border-style: $uv-button-primary-border-style;
}
&--error {
color: $uv-button-error-color;
background-color: $uv-button-error-background-color;
border-color: $uv-button-error-border-color;
border-width: $uv-button-error-border-width;
border-style: $uv-button-error-border-style;
}
&--warning {
color: $uv-button-warning-color;
background-color: $uv-button-warning-background-color;
border-color: $uv-button-warning-border-color;
border-width: $uv-button-warning-border-width;
border-style: $uv-button-warning-border-style;
}
&--block {
@include flex;
width: $uv-button-block-width;
}
&--circle {
border-top-right-radius: $uv-button-circle-border-top-right-radius;
border-top-left-radius: $uv-button-circle-border-top-left-radius;
border-bottom-left-radius: $uv-button-circle-border-bottom-left-radius;
border-bottom-right-radius: $uv-button-circle-border-bottom-right-radius;
}
&--square {
border-bottom-left-radius: $uv-button-square-border-top-right-radius;
border-bottom-right-radius: $uv-button-square-border-top-left-radius;
border-top-left-radius: $uv-button-square-border-bottom-left-radius;
border-top-right-radius: $uv-button-square-border-bottom-right-radius;
}
&__icon {
/* #ifndef APP-NVUE */
min-width: $uv-button-icon-min-width;
line-height: inherit !important;
vertical-align: top;
/* #endif */
}
&--plain {
background-color: $uv-button-plain-background-color;
}
&--hairline {
border-width: $uv-button-hairline-border-width !important;
}
}
</style>
@@ -0,0 +1,93 @@
@import '@/uni_modules/uv-ui-tools/libs/css/color.scss';
// nvue下hover-class无效
$uv-button-before-top:50% !default;
$uv-button-before-left:50% !default;
$uv-button-before-width:100% !default;
$uv-button-before-height:100% !default;
$uv-button-before-transform:translate(-50%, -50%) !default;
$uv-button-before-opacity:0 !default;
$uv-button-before-background-color:#000 !default;
$uv-button-before-border-color:#000 !default;
$uv-button-active-before-opacity:.15 !default;
$uv-button-icon-margin-left:4px !default;
$uv-button-plain-uv-button-info-color:$uv-info;
$uv-button-plain-uv-button-success-color:$uv-success;
$uv-button-plain-uv-button-error-color:$uv-error;
$uv-button-plain-uv-button-warning-color:$uv-warning;
.uv-button-wrapper {
position: relative;
&--dis {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
z-index: 9;
}
}
.uv-button {
width: 100%;
&__text {
white-space: nowrap;
line-height: 1;
}
&:before {
position: absolute;
top:$uv-button-before-top;
left:$uv-button-before-left;
width:$uv-button-before-width;
height:$uv-button-before-height;
border: inherit;
border-radius: inherit;
transform:$uv-button-before-transform;
opacity:$uv-button-before-opacity;
content: " ";
background-color:$uv-button-before-background-color;
border-color:$uv-button-before-border-color;
}
&--active {
&:before {
opacity: .15
}
}
&__icon+&__text:not(:empty),
&__loading-text {
margin-left:$uv-button-icon-margin-left;
}
&--plain {
&.uv-button--primary {
color: $uv-primary;
}
}
&--plain {
&.uv-button--info {
color:$uv-button-plain-uv-button-info-color;
}
}
&--plain {
&.uv-button--success {
color:$uv-button-plain-uv-button-success-color;
}
}
&--plain {
&.uv-button--error {
color:$uv-button-plain-uv-button-error-color;
}
}
&--plain {
&.uv-button--warning {
color:$uv-button-plain-uv-button-warning-color;
}
}
}
+89
View File
@@ -0,0 +1,89 @@
{
"id": "uv-button",
"displayName": "uv-button 按钮 全面兼容vue3+2、app、h5、小程序等多端",
"version": "1.0.15",
"description": "按钮组件内部实现以uni-app的button组件为基础,进行二次封装,灵活配置,功能齐全,兼容全端。",
"keywords": [
"uv-button",
"uvui",
"uv-ui",
"button",
"按钮"
],
"repository": "",
"engines": {
"HBuilderX": "^3.1.0"
},
"dcloudext": {
"type": "component-vue",
"sale": {
"regular": {
"price": "0.00"
},
"sourcecode": {
"price": "0.00"
}
},
"contact": {
"qq": ""
},
"declaration": {
"ads": "无",
"data": "插件不采集任何数据",
"permissions": "无"
},
"npmurl": ""
},
"uni_modules": {
"dependencies": [
"uv-ui-tools",
"uv-loading-icon",
"uv-icon"
],
"encrypt": [],
"platforms": {
"cloud": {
"tcb": "y",
"aliyun": "y"
},
"client": {
"Vue": {
"vue2": "y",
"vue3": "y"
},
"App": {
"app-vue": "y",
"app-nvue": "y"
},
"H5-mobile": {
"Safari": "y",
"Android Browser": "y",
"微信浏览器(Android)": "y",
"QQ浏览器(Android)": "y"
},
"H5-pc": {
"Chrome": "y",
"IE": "y",
"Edge": "y",
"Firefox": "y",
"Safari": "y"
},
"小程序": {
"微信": "y",
"阿里": "y",
"百度": "y",
"字节跳动": "y",
"QQ": "y",
"钉钉": "u",
"快手": "u",
"飞书": "u",
"京东": "u"
},
"快应用": {
"华为": "u",
"联盟": "u"
}
}
}
}
}
+19
View File
@@ -0,0 +1,19 @@
## Button 按钮
> **组件名:uv-button**
该组件内部实现以`uni-app`的`button`组件为基础,进行二次封装,灵活配置,功能齐全,兼容全端。灵活配置,内置状态设置,开箱即用。
# <a href="https://www.uvui.cn/components/button.html" target="_blank">查看文档</a>
## [下载完整示例项目](https://ext.dcloud.net.cn/plugin?name=uv-ui) <small>(请不要 下载插件ZIP)</small>
### [更多插件,请关注uv-ui组件库](https://ext.dcloud.net.cn/plugin?name=uv-ui)
<a href="https://ext.dcloud.net.cn/plugin?name=uv-ui" target="_blank">
![image](https://mp-a667b617-c5f1-4a2d-9a54-683a67cff588.cdn.bspapp.com/uv-ui/banner.png)
</a>
#### 如使用过程中有任何问题反馈,或者您对uv-ui有一些好的建议,欢迎加入uv-ui官方交流群:<a href="https://www.uvui.cn/components/addQQGroup.html" target="_blank">官方QQ群</a>
+16
View File
@@ -0,0 +1,16 @@
## 1.0.6(2023-11-03)
1. **该版本不再维护**,推荐使用新版本[https://ext.dcloud.net.cn/plugin?name=uv-calendars](https://ext.dcloud.net.cn/plugin?name=uv-calendars)
## 1.0.5(2023-07-02)
uv-calendar 由于弹出层uv-popup的修改,打开和关闭方法更改,详情参考文档:https://www.uvui.cn/components/calendar.html
## 1.0.4(2023-06-15)
1. formatter格式化中增加topInfo参数
## 1.0.3(2023-06-08)
1. 增加点击日期change回调
2. 优化
## 1.0.2(2023-06-05)
1. 修改多个时间选择的时候存在反选的BUG
## 1.0.1(2023-05-16)
1. 优化组件依赖,修改后无需全局引入,组件导入即可使用
2. 优化部分功能
## 1.0.0(2023-05-10)
uv-calendar 日历
@@ -0,0 +1,546 @@
/**
* @1900-2100区间内的公历、农历互转
* @charset UTF-8
* @github https://github.com/jjonline/calendar.js
* @Author Jea杨(JJonline@JJonline.Cn)
* @Time 2014-7-21
* @Time 2016-8-13 Fixed 2033hex、Attribution Annals
* @Time 2016-9-25 Fixed lunar LeapMonth Param Bug
* @Time 2017-7-24 Fixed use getTerm Func Param Error.use solar year,NOT lunar year
* @Version 1.0.3
* @公历转农历:calendar.solar2lunar(1987,11,01); //[you can ignore params of prefix 0]
* @农历转公历:calendar.lunar2solar(1987,09,10); //[you can ignore params of prefix 0]
*/
/* eslint-disable */
var calendar = {
/**
* 农历1900-2100的润大小信息表
* @Array Of Property
* @return Hex
*/
lunarInfo: [0x04bd8, 0x04ae0, 0x0a570, 0x054d5, 0x0d260, 0x0d950, 0x16554, 0x056a0, 0x09ad0, 0x055d2, // 1900-1909
0x04ae0, 0x0a5b6, 0x0a4d0, 0x0d250, 0x1d255, 0x0b540, 0x0d6a0, 0x0ada2, 0x095b0, 0x14977, // 1910-1919
0x04970, 0x0a4b0, 0x0b4b5, 0x06a50, 0x06d40, 0x1ab54, 0x02b60, 0x09570, 0x052f2, 0x04970, // 1920-1929
0x06566, 0x0d4a0, 0x0ea50, 0x06e95, 0x05ad0, 0x02b60, 0x186e3, 0x092e0, 0x1c8d7, 0x0c950, // 1930-1939
0x0d4a0, 0x1d8a6, 0x0b550, 0x056a0, 0x1a5b4, 0x025d0, 0x092d0, 0x0d2b2, 0x0a950, 0x0b557, // 1940-1949
0x06ca0, 0x0b550, 0x15355, 0x04da0, 0x0a5b0, 0x14573, 0x052b0, 0x0a9a8, 0x0e950, 0x06aa0, // 1950-1959
0x0aea6, 0x0ab50, 0x04b60, 0x0aae4, 0x0a570, 0x05260, 0x0f263, 0x0d950, 0x05b57, 0x056a0, // 1960-1969
0x096d0, 0x04dd5, 0x04ad0, 0x0a4d0, 0x0d4d4, 0x0d250, 0x0d558, 0x0b540, 0x0b6a0, 0x195a6, // 1970-1979
0x095b0, 0x049b0, 0x0a974, 0x0a4b0, 0x0b27a, 0x06a50, 0x06d40, 0x0af46, 0x0ab60, 0x09570, // 1980-1989
0x04af5, 0x04970, 0x064b0, 0x074a3, 0x0ea50, 0x06b58, 0x05ac0, 0x0ab60, 0x096d5, 0x092e0, // 1990-1999
0x0c960, 0x0d954, 0x0d4a0, 0x0da50, 0x07552, 0x056a0, 0x0abb7, 0x025d0, 0x092d0, 0x0cab5, // 2000-2009
0x0a950, 0x0b4a0, 0x0baa4, 0x0ad50, 0x055d9, 0x04ba0, 0x0a5b0, 0x15176, 0x052b0, 0x0a930, // 2010-2019
0x07954, 0x06aa0, 0x0ad50, 0x05b52, 0x04b60, 0x0a6e6, 0x0a4e0, 0x0d260, 0x0ea65, 0x0d530, // 2020-2029
0x05aa0, 0x076a3, 0x096d0, 0x04afb, 0x04ad0, 0x0a4d0, 0x1d0b6, 0x0d250, 0x0d520, 0x0dd45, // 2030-2039
0x0b5a0, 0x056d0, 0x055b2, 0x049b0, 0x0a577, 0x0a4b0, 0x0aa50, 0x1b255, 0x06d20, 0x0ada0, // 2040-2049
/** Add By JJonline@JJonline.Cn**/
0x14b63, 0x09370, 0x049f8, 0x04970, 0x064b0, 0x168a6, 0x0ea50, 0x06b20, 0x1a6c4, 0x0aae0, // 2050-2059
0x0a2e0, 0x0d2e3, 0x0c960, 0x0d557, 0x0d4a0, 0x0da50, 0x05d55, 0x056a0, 0x0a6d0, 0x055d4, // 2060-2069
0x052d0, 0x0a9b8, 0x0a950, 0x0b4a0, 0x0b6a6, 0x0ad50, 0x055a0, 0x0aba4, 0x0a5b0, 0x052b0, // 2070-2079
0x0b273, 0x06930, 0x07337, 0x06aa0, 0x0ad50, 0x14b55, 0x04b60, 0x0a570, 0x054e4, 0x0d160, // 2080-2089
0x0e968, 0x0d520, 0x0daa0, 0x16aa6, 0x056d0, 0x04ae0, 0x0a9d4, 0x0a2d0, 0x0d150, 0x0f252, // 2090-2099
0x0d520], // 2100
/**
* 公历每个月份的天数普通表
* @Array Of Property
* @return Number
*/
solarMonth: [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31],
/**
* 天干地支之天干速查表
* @Array Of Property trans["甲","乙","丙","丁","戊","己","庚","辛","壬","癸"]
* @return Cn string
*/
Gan: ['\u7532', '\u4e59', '\u4e19', '\u4e01', '\u620a', '\u5df1', '\u5e9a', '\u8f9b', '\u58ec', '\u7678'],
/**
* 天干地支之地支速查表
* @Array Of Property
* @trans["子","丑","寅","卯","辰","巳","午","未","申","酉","戌","亥"]
* @return Cn string
*/
Zhi: ['\u5b50', '\u4e11', '\u5bc5', '\u536f', '\u8fb0', '\u5df3', '\u5348', '\u672a', '\u7533', '\u9149', '\u620c', '\u4ea5'],
/**
* 天干地支之地支速查表<=>生肖
* @Array Of Property
* @trans["鼠","牛","虎","兔","龙","蛇","马","羊","猴","鸡","狗","猪"]
* @return Cn string
*/
Animals: ['\u9f20', '\u725b', '\u864e', '\u5154', '\u9f99', '\u86c7', '\u9a6c', '\u7f8a', '\u7334', '\u9e21', '\u72d7', '\u732a'],
/**
* 24节气速查表
* @Array Of Property
* @trans["小寒","大寒","立春","雨水","惊蛰","春分","清明","谷雨","立夏","小满","芒种","夏至","小暑","大暑","立秋","处暑","白露","秋分","寒露","霜降","立冬","小雪","大雪","冬至"]
* @return Cn string
*/
solarTerm: ['\u5c0f\u5bd2', '\u5927\u5bd2', '\u7acb\u6625', '\u96e8\u6c34', '\u60ca\u86f0', '\u6625\u5206', '\u6e05\u660e', '\u8c37\u96e8', '\u7acb\u590f', '\u5c0f\u6ee1', '\u8292\u79cd', '\u590f\u81f3', '\u5c0f\u6691', '\u5927\u6691', '\u7acb\u79cb', '\u5904\u6691', '\u767d\u9732', '\u79cb\u5206', '\u5bd2\u9732', '\u971c\u964d', '\u7acb\u51ac', '\u5c0f\u96ea', '\u5927\u96ea', '\u51ac\u81f3'],
/**
* 1900-2100各年的24节气日期速查表
* @Array Of Property
* @return 0x string For splice
*/
sTermInfo: ['9778397bd097c36b0b6fc9274c91aa', '97b6b97bd19801ec9210c965cc920e', '97bcf97c3598082c95f8c965cc920f',
'97bd0b06bdb0722c965ce1cfcc920f', 'b027097bd097c36b0b6fc9274c91aa', '97b6b97bd19801ec9210c965cc920e',
'97bcf97c359801ec95f8c965cc920f', '97bd0b06bdb0722c965ce1cfcc920f', 'b027097bd097c36b0b6fc9274c91aa',
'97b6b97bd19801ec9210c965cc920e', '97bcf97c359801ec95f8c965cc920f', '97bd0b06bdb0722c965ce1cfcc920f',
'b027097bd097c36b0b6fc9274c91aa', '9778397bd19801ec9210c965cc920e', '97b6b97bd19801ec95f8c965cc920f',
'97bd09801d98082c95f8e1cfcc920f', '97bd097bd097c36b0b6fc9210c8dc2', '9778397bd197c36c9210c9274c91aa',
'97b6b97bd19801ec95f8c965cc920e', '97bd09801d98082c95f8e1cfcc920f', '97bd097bd097c36b0b6fc9210c8dc2',
'9778397bd097c36c9210c9274c91aa', '97b6b97bd19801ec95f8c965cc920e', '97bcf97c3598082c95f8e1cfcc920f',
'97bd097bd097c36b0b6fc9210c8dc2', '9778397bd097c36c9210c9274c91aa', '97b6b97bd19801ec9210c965cc920e',
'97bcf97c3598082c95f8c965cc920f', '97bd097bd097c35b0b6fc920fb0722', '9778397bd097c36b0b6fc9274c91aa',
'97b6b97bd19801ec9210c965cc920e', '97bcf97c3598082c95f8c965cc920f', '97bd097bd097c35b0b6fc920fb0722',
'9778397bd097c36b0b6fc9274c91aa', '97b6b97bd19801ec9210c965cc920e', '97bcf97c359801ec95f8c965cc920f',
'97bd097bd097c35b0b6fc920fb0722', '9778397bd097c36b0b6fc9274c91aa', '97b6b97bd19801ec9210c965cc920e',
'97bcf97c359801ec95f8c965cc920f', '97bd097bd097c35b0b6fc920fb0722', '9778397bd097c36b0b6fc9274c91aa',
'97b6b97bd19801ec9210c965cc920e', '97bcf97c359801ec95f8c965cc920f', '97bd097bd07f595b0b6fc920fb0722',
'9778397bd097c36b0b6fc9210c8dc2', '9778397bd19801ec9210c9274c920e', '97b6b97bd19801ec95f8c965cc920f',
'97bd07f5307f595b0b0bc920fb0722', '7f0e397bd097c36b0b6fc9210c8dc2', '9778397bd097c36c9210c9274c920e',
'97b6b97bd19801ec95f8c965cc920f', '97bd07f5307f595b0b0bc920fb0722', '7f0e397bd097c36b0b6fc9210c8dc2',
'9778397bd097c36c9210c9274c91aa', '97b6b97bd19801ec9210c965cc920e', '97bd07f1487f595b0b0bc920fb0722',
'7f0e397bd097c36b0b6fc9210c8dc2', '9778397bd097c36b0b6fc9274c91aa', '97b6b97bd19801ec9210c965cc920e',
'97bcf7f1487f595b0b0bb0b6fb0722', '7f0e397bd097c35b0b6fc920fb0722', '9778397bd097c36b0b6fc9274c91aa',
'97b6b97bd19801ec9210c965cc920e', '97bcf7f1487f595b0b0bb0b6fb0722', '7f0e397bd097c35b0b6fc920fb0722',
'9778397bd097c36b0b6fc9274c91aa', '97b6b97bd19801ec9210c965cc920e', '97bcf7f1487f531b0b0bb0b6fb0722',
'7f0e397bd097c35b0b6fc920fb0722', '9778397bd097c36b0b6fc9274c91aa', '97b6b97bd19801ec9210c965cc920e',
'97bcf7f1487f531b0b0bb0b6fb0722', '7f0e397bd07f595b0b6fc920fb0722', '9778397bd097c36b0b6fc9274c91aa',
'97b6b97bd19801ec9210c9274c920e', '97bcf7f0e47f531b0b0bb0b6fb0722', '7f0e397bd07f595b0b0bc920fb0722',
'9778397bd097c36b0b6fc9210c91aa', '97b6b97bd197c36c9210c9274c920e', '97bcf7f0e47f531b0b0bb0b6fb0722',
'7f0e397bd07f595b0b0bc920fb0722', '9778397bd097c36b0b6fc9210c8dc2', '9778397bd097c36c9210c9274c920e',
'97b6b7f0e47f531b0723b0b6fb0722', '7f0e37f5307f595b0b0bc920fb0722', '7f0e397bd097c36b0b6fc9210c8dc2',
'9778397bd097c36b0b70c9274c91aa', '97b6b7f0e47f531b0723b0b6fb0721', '7f0e37f1487f595b0b0bb0b6fb0722',
'7f0e397bd097c35b0b6fc9210c8dc2', '9778397bd097c36b0b6fc9274c91aa', '97b6b7f0e47f531b0723b0b6fb0721',
'7f0e27f1487f595b0b0bb0b6fb0722', '7f0e397bd097c35b0b6fc920fb0722', '9778397bd097c36b0b6fc9274c91aa',
'97b6b7f0e47f531b0723b0b6fb0721', '7f0e27f1487f531b0b0bb0b6fb0722', '7f0e397bd097c35b0b6fc920fb0722',
'9778397bd097c36b0b6fc9274c91aa', '97b6b7f0e47f531b0723b0b6fb0721', '7f0e27f1487f531b0b0bb0b6fb0722',
'7f0e397bd097c35b0b6fc920fb0722', '9778397bd097c36b0b6fc9274c91aa', '97b6b7f0e47f531b0723b0b6fb0721',
'7f0e27f1487f531b0b0bb0b6fb0722', '7f0e397bd07f595b0b0bc920fb0722', '9778397bd097c36b0b6fc9274c91aa',
'97b6b7f0e47f531b0723b0787b0721', '7f0e27f0e47f531b0b0bb0b6fb0722', '7f0e397bd07f595b0b0bc920fb0722',
'9778397bd097c36b0b6fc9210c91aa', '97b6b7f0e47f149b0723b0787b0721', '7f0e27f0e47f531b0723b0b6fb0722',
'7f0e397bd07f595b0b0bc920fb0722', '9778397bd097c36b0b6fc9210c8dc2', '977837f0e37f149b0723b0787b0721',
'7f07e7f0e47f531b0723b0b6fb0722', '7f0e37f5307f595b0b0bc920fb0722', '7f0e397bd097c35b0b6fc9210c8dc2',
'977837f0e37f14998082b0787b0721', '7f07e7f0e47f531b0723b0b6fb0721', '7f0e37f1487f595b0b0bb0b6fb0722',
'7f0e397bd097c35b0b6fc9210c8dc2', '977837f0e37f14998082b0787b06bd', '7f07e7f0e47f531b0723b0b6fb0721',
'7f0e27f1487f531b0b0bb0b6fb0722', '7f0e397bd097c35b0b6fc920fb0722', '977837f0e37f14998082b0787b06bd',
'7f07e7f0e47f531b0723b0b6fb0721', '7f0e27f1487f531b0b0bb0b6fb0722', '7f0e397bd097c35b0b6fc920fb0722',
'977837f0e37f14998082b0787b06bd', '7f07e7f0e47f531b0723b0b6fb0721', '7f0e27f1487f531b0b0bb0b6fb0722',
'7f0e397bd07f595b0b0bc920fb0722', '977837f0e37f14998082b0787b06bd', '7f07e7f0e47f531b0723b0b6fb0721',
'7f0e27f1487f531b0b0bb0b6fb0722', '7f0e397bd07f595b0b0bc920fb0722', '977837f0e37f14998082b0787b06bd',
'7f07e7f0e47f149b0723b0787b0721', '7f0e27f0e47f531b0b0bb0b6fb0722', '7f0e397bd07f595b0b0bc920fb0722',
'977837f0e37f14998082b0723b06bd', '7f07e7f0e37f149b0723b0787b0721', '7f0e27f0e47f531b0723b0b6fb0722',
'7f0e397bd07f595b0b0bc920fb0722', '977837f0e37f14898082b0723b02d5', '7ec967f0e37f14998082b0787b0721',
'7f07e7f0e47f531b0723b0b6fb0722', '7f0e37f1487f595b0b0bb0b6fb0722', '7f0e37f0e37f14898082b0723b02d5',
'7ec967f0e37f14998082b0787b0721', '7f07e7f0e47f531b0723b0b6fb0722', '7f0e37f1487f531b0b0bb0b6fb0722',
'7f0e37f0e37f14898082b0723b02d5', '7ec967f0e37f14998082b0787b06bd', '7f07e7f0e47f531b0723b0b6fb0721',
'7f0e37f1487f531b0b0bb0b6fb0722', '7f0e37f0e37f14898082b072297c35', '7ec967f0e37f14998082b0787b06bd',
'7f07e7f0e47f531b0723b0b6fb0721', '7f0e27f1487f531b0b0bb0b6fb0722', '7f0e37f0e37f14898082b072297c35',
'7ec967f0e37f14998082b0787b06bd', '7f07e7f0e47f531b0723b0b6fb0721', '7f0e27f1487f531b0b0bb0b6fb0722',
'7f0e37f0e366aa89801eb072297c35', '7ec967f0e37f14998082b0787b06bd', '7f07e7f0e47f149b0723b0787b0721',
'7f0e27f1487f531b0b0bb0b6fb0722', '7f0e37f0e366aa89801eb072297c35', '7ec967f0e37f14998082b0723b06bd',
'7f07e7f0e47f149b0723b0787b0721', '7f0e27f0e47f531b0723b0b6fb0722', '7f0e37f0e366aa89801eb072297c35',
'7ec967f0e37f14998082b0723b06bd', '7f07e7f0e37f14998083b0787b0721', '7f0e27f0e47f531b0723b0b6fb0722',
'7f0e37f0e366aa89801eb072297c35', '7ec967f0e37f14898082b0723b02d5', '7f07e7f0e37f14998082b0787b0721',
'7f07e7f0e47f531b0723b0b6fb0722', '7f0e36665b66aa89801e9808297c35', '665f67f0e37f14898082b0723b02d5',
'7ec967f0e37f14998082b0787b0721', '7f07e7f0e47f531b0723b0b6fb0722', '7f0e36665b66a449801e9808297c35',
'665f67f0e37f14898082b0723b02d5', '7ec967f0e37f14998082b0787b06bd', '7f07e7f0e47f531b0723b0b6fb0721',
'7f0e36665b66a449801e9808297c35', '665f67f0e37f14898082b072297c35', '7ec967f0e37f14998082b0787b06bd',
'7f07e7f0e47f531b0723b0b6fb0721', '7f0e26665b66a449801e9808297c35', '665f67f0e37f1489801eb072297c35',
'7ec967f0e37f14998082b0787b06bd', '7f07e7f0e47f531b0723b0b6fb0721', '7f0e27f1487f531b0b0bb0b6fb0722'],
/**
* 数字转中文速查表
* @Array Of Property
* @trans ['日','一','二','三','四','五','六','七','八','九','十']
* @return Cn string
*/
nStr1: ['\u65e5', '\u4e00', '\u4e8c', '\u4e09', '\u56db', '\u4e94', '\u516d', '\u4e03', '\u516b', '\u4e5d', '\u5341'],
/**
* 日期转农历称呼速查表
* @Array Of Property
* @trans ['初','十','廿','卅']
* @return Cn string
*/
nStr2: ['\u521d', '\u5341', '\u5eff', '\u5345'],
/**
* 月份转农历称呼速查表
* @Array Of Property
* @trans ['正','一','二','三','四','五','六','七','八','九','十','冬','腊']
* @return Cn string
*/
nStr3: ['\u6b63', '\u4e8c', '\u4e09', '\u56db', '\u4e94', '\u516d', '\u4e03', '\u516b', '\u4e5d', '\u5341', '\u51ac', '\u814a'],
/**
* 返回农历y年一整年的总天数
* @param lunar Year
* @return Number
* @eg:var count = calendar.lYearDays(1987) ;//count=387
*/
lYearDays: function (y) {
var i; var sum = 348
for (i = 0x8000; i > 0x8; i >>= 1) { sum += (this.lunarInfo[y - 1900] & i) ? 1 : 0 }
return (sum + this.leapDays(y))
},
/**
* 返回农历y年闰月是哪个月;若y年没有闰月 则返回0
* @param lunar Year
* @return Number (0-12)
* @eg:var leapMonth = calendar.leapMonth(1987) ;//leapMonth=6
*/
leapMonth: function (y) { // 闰字编码 \u95f0
return (this.lunarInfo[y - 1900] & 0xf)
},
/**
* 返回农历y年闰月的天数 若该年没有闰月则返回0
* @param lunar Year
* @return Number (0、29、30)
* @eg:var leapMonthDay = calendar.leapDays(1987) ;//leapMonthDay=29
*/
leapDays: function (y) {
if (this.leapMonth(y)) {
return ((this.lunarInfo[y - 1900] & 0x10000) ? 30 : 29)
}
return (0)
},
/**
* 返回农历y年m月(非闰月)的总天数,计算m为闰月时的天数请使用leapDays方法
* @param lunar Year
* @return Number (-1、29、30)
* @eg:var MonthDay = calendar.monthDays(1987,9) ;//MonthDay=29
*/
monthDays: function (y, m) {
if (m > 12 || m < 1) { return -1 }// 月份参数从1至12,参数错误返回-1
return ((this.lunarInfo[y - 1900] & (0x10000 >> m)) ? 30 : 29)
},
/**
* 返回公历(!)y年m月的天数
* @param solar Year
* @return Number (-1、28、29、30、31)
* @eg:var solarMonthDay = calendar.leapDays(1987) ;//solarMonthDay=30
*/
solarDays: function (y, m) {
if (m > 12 || m < 1) { return -1 } // 若参数错误 返回-1
var ms = m - 1
if (ms == 1) { // 2月份的闰平规律测算后确认返回28或29
return (((y % 4 == 0) && (y % 100 != 0) || (y % 400 == 0)) ? 29 : 28)
} else {
return (this.solarMonth[ms])
}
},
/**
* 农历年份转换为干支纪年
* @param lYear 农历年的年份数
* @return Cn string
*/
toGanZhiYear: function (lYear) {
var ganKey = (lYear - 3) % 10
var zhiKey = (lYear - 3) % 12
if (ganKey == 0) ganKey = 10// 如果余数为0则为最后一个天干
if (zhiKey == 0) zhiKey = 12// 如果余数为0则为最后一个地支
return this.Gan[ganKey - 1] + this.Zhi[zhiKey - 1]
},
/**
* 公历月、日判断所属星座
* @param cMonth [description]
* @param cDay [description]
* @return Cn string
*/
toAstro: function (cMonth, cDay) {
var s = '\u9b54\u7faf\u6c34\u74f6\u53cc\u9c7c\u767d\u7f8a\u91d1\u725b\u53cc\u5b50\u5de8\u87f9\u72ee\u5b50\u5904\u5973\u5929\u79e4\u5929\u874e\u5c04\u624b\u9b54\u7faf'
var arr = [20, 19, 21, 21, 21, 22, 23, 23, 23, 23, 22, 22]
return s.substr(cMonth * 2 - (cDay < arr[cMonth - 1] ? 2 : 0), 2) + '\u5ea7'// 座
},
/**
* 传入offset偏移量返回干支
* @param offset 相对甲子的偏移量
* @return Cn string
*/
toGanZhi: function (offset) {
return this.Gan[offset % 10] + this.Zhi[offset % 12]
},
/**
* 传入公历(!)y年获得该年第n个节气的公历日期
* @param y公历年(1900-2100);n二十四节气中的第几个节气(1~24);从n=1(小寒)算起
* @return day Number
* @eg:var _24 = calendar.getTerm(1987,3) ;//_24=4;意即1987年2月4日立春
*/
getTerm: function (y, n) {
if (y < 1900 || y > 2100) { return -1 }
if (n < 1 || n > 24) { return -1 }
var _table = this.sTermInfo[y - 1900]
var _info = [
parseInt('0x' + _table.substr(0, 5)).toString(),
parseInt('0x' + _table.substr(5, 5)).toString(),
parseInt('0x' + _table.substr(10, 5)).toString(),
parseInt('0x' + _table.substr(15, 5)).toString(),
parseInt('0x' + _table.substr(20, 5)).toString(),
parseInt('0x' + _table.substr(25, 5)).toString()
]
var _calday = [
_info[0].substr(0, 1),
_info[0].substr(1, 2),
_info[0].substr(3, 1),
_info[0].substr(4, 2),
_info[1].substr(0, 1),
_info[1].substr(1, 2),
_info[1].substr(3, 1),
_info[1].substr(4, 2),
_info[2].substr(0, 1),
_info[2].substr(1, 2),
_info[2].substr(3, 1),
_info[2].substr(4, 2),
_info[3].substr(0, 1),
_info[3].substr(1, 2),
_info[3].substr(3, 1),
_info[3].substr(4, 2),
_info[4].substr(0, 1),
_info[4].substr(1, 2),
_info[4].substr(3, 1),
_info[4].substr(4, 2),
_info[5].substr(0, 1),
_info[5].substr(1, 2),
_info[5].substr(3, 1),
_info[5].substr(4, 2)
]
return parseInt(_calday[n - 1])
},
/**
* 传入农历数字月份返回汉语通俗表示法
* @param lunar month
* @return Cn string
* @eg:var cnMonth = calendar.toChinaMonth(12) ;//cnMonth='腊月'
*/
toChinaMonth: function (m) { // 月 => \u6708
if (m > 12 || m < 1) { return -1 } // 若参数错误 返回-1
var s = this.nStr3[m - 1]
s += '\u6708'// 加上月字
return s
},
/**
* 传入农历日期数字返回汉字表示法
* @param lunar day
* @return Cn string
* @eg:var cnDay = calendar.toChinaDay(21) ;//cnMonth='廿一'
*/
toChinaDay: function (d) { // 日 => \u65e5
var s
switch (d) {
case 10:
s = '\u521d\u5341'; break
case 20:
s = '\u4e8c\u5341'; break
break
case 30:
s = '\u4e09\u5341'; break
break
default:
s = this.nStr2[Math.floor(d / 10)]
s += this.nStr1[d % 10]
}
return (s)
},
/**
* 年份转生肖[!仅能大致转换] => 精确划分生肖分界线是“立春”
* @param y year
* @return Cn string
* @eg:var animal = calendar.getAnimal(1987) ;//animal='兔'
*/
getAnimal: function (y) {
return this.Animals[(y - 4) % 12]
},
/**
* 传入阳历年月日获得详细的公历、农历object信息 <=>JSON
* @param y solar year
* @param m solar month
* @param d solar day
* @return JSON object
* @eg:console.log(calendar.solar2lunar(1987,11,01));
*/
solar2lunar: function (y, m, d) { // 参数区间1900.1.31~2100.12.31
// 年份限定、上限
if (y < 1900 || y > 2100) {
return -1// undefined转换为数字变为NaN
}
// 公历传参最下限
if (y == 1900 && m == 1 && d < 31) {
return -1
}
// 未传参 获得当天
if (!y) {
var objDate = new Date()
} else {
var objDate = new Date(y, parseInt(m) - 1, d)
}
var i; var leap = 0; var temp = 0
// 修正ymd参数
var y = objDate.getFullYear()
var m = objDate.getMonth() + 1
var d = objDate.getDate()
var offset = (Date.UTC(objDate.getFullYear(), objDate.getMonth(), objDate.getDate()) - Date.UTC(1900, 0, 31)) / 86400000
for (i = 1900; i < 2101 && offset > 0; i++) {
temp = this.lYearDays(i)
offset -= temp
}
if (offset < 0) {
offset += temp; i--
}
// 是否今天
var isTodayObj = new Date()
var isToday = false
if (isTodayObj.getFullYear() == y && isTodayObj.getMonth() + 1 == m && isTodayObj.getDate() == d) {
isToday = true
}
// 星期几
var nWeek = objDate.getDay()
var cWeek = this.nStr1[nWeek]
// 数字表示周几顺应天朝周一开始的惯例
if (nWeek == 0) {
nWeek = 7
}
// 农历年
var year = i
var leap = this.leapMonth(i) // 闰哪个月
var isLeap = false
// 效验闰月
for (i = 1; i < 13 && offset > 0; i++) {
// 闰月
if (leap > 0 && i == (leap + 1) && isLeap == false) {
--i
isLeap = true; temp = this.leapDays(year) // 计算农历闰月天数
} else {
temp = this.monthDays(year, i)// 计算农历普通月天数
}
// 解除闰月
if (isLeap == true && i == (leap + 1)) { isLeap = false }
offset -= temp
}
// 闰月导致数组下标重叠取反
if (offset == 0 && leap > 0 && i == leap + 1) {
if (isLeap) {
isLeap = false
} else {
isLeap = true; --i
}
}
if (offset < 0) {
offset += temp; --i
}
// 农历月
var month = i
// 农历日
var day = offset + 1
// 天干地支处理
var sm = m - 1
var gzY = this.toGanZhiYear(year)
// 当月的两个节气
// bugfix-2017-7-24 11:03:38 use lunar Year Param `y` Not `year`
var firstNode = this.getTerm(y, (m * 2 - 1))// 返回当月「节」为几日开始
var secondNode = this.getTerm(y, (m * 2))// 返回当月「节」为几日开始
// 依据12节气修正干支月
var gzM = this.toGanZhi((y - 1900) * 12 + m + 11)
if (d >= firstNode) {
gzM = this.toGanZhi((y - 1900) * 12 + m + 12)
}
// 传入的日期的节气与否
var isTerm = false
var Term = null
if (firstNode == d) {
isTerm = true
Term = this.solarTerm[m * 2 - 2]
}
if (secondNode == d) {
isTerm = true
Term = this.solarTerm[m * 2 - 1]
}
// 日柱 当月一日与 1900/1/1 相差天数
var dayCyclical = Date.UTC(y, sm, 1, 0, 0, 0, 0) / 86400000 + 25567 + 10
var gzD = this.toGanZhi(dayCyclical + d - 1)
// 该日期所属的星座
var astro = this.toAstro(m, d)
return { 'lYear': year, 'lMonth': month, 'lDay': day, 'Animal': this.getAnimal(year), 'IMonthCn': (isLeap ? '\u95f0' : '') + this.toChinaMonth(month), 'IDayCn': this.toChinaDay(day), 'cYear': y, 'cMonth': m, 'cDay': d, 'gzYear': gzY, 'gzMonth': gzM, 'gzDay': gzD, 'isToday': isToday, 'isLeap': isLeap, 'nWeek': nWeek, 'ncWeek': '\u661f\u671f' + cWeek, 'isTerm': isTerm, 'Term': Term, 'astro': astro }
},
/**
* 传入农历年月日以及传入的月份是否闰月获得详细的公历、农历object信息 <=>JSON
* @param y lunar year
* @param m lunar month
* @param d lunar day
* @param isLeapMonth lunar month is leap or not.[如果是农历闰月第四个参数赋值true即可]
* @return JSON object
* @eg:console.log(calendar.lunar2solar(1987,9,10));
*/
lunar2solar: function (y, m, d, isLeapMonth) { // 参数区间1900.1.31~2100.12.1
var isLeapMonth = !!isLeapMonth
var leapOffset = 0
var leapMonth = this.leapMonth(y)
var leapDay = this.leapDays(y)
if (isLeapMonth && (leapMonth != m)) { return -1 }// 传参要求计算该闰月公历 但该年得出的闰月与传参的月份并不同
if (y == 2100 && m == 12 && d > 1 || y == 1900 && m == 1 && d < 31) { return -1 }// 超出了最大极限值
var day = this.monthDays(y, m)
var _day = day
// bugFix 2016-9-25
// if month is leap, _day use leapDays method
if (isLeapMonth) {
_day = this.leapDays(y, m)
}
if (y < 1900 || y > 2100 || d > _day) { return -1 }// 参数合法性效验
// 计算农历的时间差
var offset = 0
for (var i = 1900; i < y; i++) {
offset += this.lYearDays(i)
}
var leap = 0; var isAdd = false
for (var i = 1; i < m; i++) {
leap = this.leapMonth(y)
if (!isAdd) { // 处理闰月
if (leap <= i && leap > 0) {
offset += this.leapDays(y); isAdd = true
}
}
offset += this.monthDays(y, i)
}
// 转换闰月农历 需补充该年闰月的前一个月的时差
if (isLeapMonth) { offset += day }
// 1900年农历正月一日的公历时间为1900年1月30日0时0分0秒(该时间也是本农历的最开始起始点)
var stmap = Date.UTC(1900, 1, 30, 0, 0, 0)
var calObj = new Date((offset + d - 31) * 86400000 + stmap)
var cY = calObj.getUTCFullYear()
var cM = calObj.getUTCMonth() + 1
var cD = calObj.getUTCDate()
return this.solar2lunar(cY, cM, cD)
}
}
export default calendar
@@ -0,0 +1,104 @@
<template>
<view class="uv-calendar-header uv-border-bottom">
<text
class="uv-calendar-header__title"
v-if="showTitle"
>{{ title }}</text>
<text
class="uv-calendar-header__subtitle"
v-if="showSubtitle"
>{{ subtitle }}</text>
<view class="uv-calendar-header__weekdays">
<text class="uv-calendar-header__weekdays__weekday">一</text>
<text class="uv-calendar-header__weekdays__weekday">二</text>
<text class="uv-calendar-header__weekdays__weekday">三</text>
<text class="uv-calendar-header__weekdays__weekday">四</text>
<text class="uv-calendar-header__weekdays__weekday">五</text>
<text class="uv-calendar-header__weekdays__weekday">六</text>
<text class="uv-calendar-header__weekdays__weekday">日</text>
</view>
</view>
</template>
<script>
import mpMixin from '@/uni_modules/uv-ui-tools/libs/mixin/mpMixin.js'
import mixin from '@/uni_modules/uv-ui-tools/libs/mixin/mixin.js'
export default {
name: 'uv-calendar-header',
mixins: [mpMixin, mixin],
props: {
// 标题
title: {
type: String,
default: ''
},
// 副标题
subtitle: {
type: [String,null],
default: ''
},
// 是否显示标题
showTitle: {
type: Boolean,
default: true
},
// 是否显示副标题
showSubtitle: {
type: Boolean,
default: true
},
},
data() {
return {
}
},
methods: {
name() {
}
},
}
</script>
<style lang="scss" scoped>
$show-border: 1;
$show-border-bottom: 1;
@import '@/uni_modules/uv-ui-tools/libs/css/variable.scss';
@import '@/uni_modules/uv-ui-tools/libs/css/components.scss';
@import '@/uni_modules/uv-ui-tools/libs/css/color.scss';
.uv-calendar-header {
padding-bottom: 4px;
&__title {
font-size: 16px;
color: $uv-main-color;
text-align: center;
height: 42px;
line-height: 42px;
font-weight: bold;
}
&__subtitle {
font-size: 14px;
color: $uv-main-color;
height: 40px;
text-align: center;
line-height: 40px;
font-weight: bold;
}
&__weekdays {
@include flex;
justify-content: space-between;
&__weekday {
font-size: 13px;
color: $uv-main-color;
line-height: 30px;
flex: 1;
text-align: center;
}
}
}
</style>
@@ -0,0 +1,616 @@
<template>
<view class="uv-calendar-month-wrapper" ref="uv-calendar-month-wrapper">
<view v-for="(item, index) in months" :key="index" :class="[`uv-calendar-month-${index}`]"
:ref="`uv-calendar-month-${index}`" :id="`month-${index}`">
<text v-if="index !== 0" class="uv-calendar-month__title">{{ item.year }}年{{ item.month }}月</text>
<view class="uv-calendar-month__days">
<view v-if="showMark" class="uv-calendar-month__days__month-mark-wrapper">
<text class="uv-calendar-month__days__month-mark-wrapper__text">{{ item.month }}</text>
</view>
<view class="uv-calendar-month__days__day" v-for="(item1, index1) in item.date" :key="index1"
:style="[dayStyle(index, index1, item1)]" @tap="clickHandler(index, index1, item1)"
:class="[item1.selected && 'uv-calendar-month__days__day__select--selected']">
<view class="uv-calendar-month__days__day__select" :style="[daySelectStyle(index, index1, item1)]">
<text v-if="getTopInfo(index, index1, item1)"
class="uv-calendar-month__days__day__select__top-info"
:class="[item1.disabled && 'uv-calendar-month__days__day__select__top-info--disabled']"
:style="[textStyle(item1)]"
>{{ getTopInfo(index, index1, item1) }}</text>
<text class="uv-calendar-month__days__day__select__info"
:class="[item1.disabled && 'uv-calendar-month__days__day__select__info--disabled']"
:style="[textStyle(item1)]">{{ item1.day }}</text>
<text v-if="getBottomInfo(index, index1, item1)"
class="uv-calendar-month__days__day__select__buttom-info"
:class="[item1.disabled && 'uv-calendar-month__days__day__select__buttom-info--disabled']"
:style="[textStyle(item1)]">{{ getBottomInfo(index, index1, item1) }}</text>
<text v-if="item1.dot" class="uv-calendar-month__days__day__select__dot"></text>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
// #ifdef APP-NVUE
// 由于nvue不支持百分比单位,需要查询宽度来计算每个日期的宽度
const dom = uni.requireNativePlugin('dom')
// #endif
import { colorGradient } from '@/uni_modules/uv-ui-tools/libs/function/colorGradient.js';
import mpMixin from '@/uni_modules/uv-ui-tools/libs/mixin/mpMixin.js'
import mixin from '@/uni_modules/uv-ui-tools/libs/mixin/mixin.js'
import dayjs from '@/uni_modules/uv-ui-tools/libs/util/dayjs.js'
export default {
name: 'uv-calendar-month',
emits:['monthSelected','updateMonthTop','change'],
mixins: [mpMixin, mixin],
props: {
// 是否显示月份背景色
showMark: {
type: Boolean,
default: true
},
// 主题色,对底部按钮和选中日期有效
color: {
type: String,
default: '#3c9cff'
},
// 月份数据
months: {
type: Array,
default: () => []
},
// 日期选择类型
mode: {
type: String,
default: 'single'
},
// 日期行高
rowHeight: {
type: [String, Number],
default: 58
},
// mode=multiple时,最多可选多少个日期
maxCount: {
type: [String, Number],
default: Infinity
},
// mode=range时,第一个日期底部的提示文字
startText: {
type: String,
default: '开始'
},
// mode=range时,最后一个日期底部的提示文字
endText: {
type: String,
default: '结束'
},
// 默认选中的日期,mode为multiple或range是必须为数组格式
defaultDate: {
type: [Array, String, Date],
default: null
},
// 最小的可选日期
minDate: {
type: [String, Number],
default: 0
},
// 最大可选日期
maxDate: {
type: [String, Number],
default: 0
},
// 如果没有设置maxDate,则往后推多少个月
maxMonth: {
type: [String, Number],
default: 2
},
// 是否为只读状态,只读状态下禁止选择日期
readonly: {
type: Boolean,
default: false
},
// 日期区间最多可选天数,默认无限制,mode = range时有效
maxRange: {
type: [Number, String],
default: Infinity
},
// 范围选择超过最多可选天数时的提示文案,mode = range时有效
rangePrompt: {
type: String,
default: ''
},
// 范围选择超过最多可选天数时,是否展示提示文案,mode = range时有效
showRangePrompt: {
type: Boolean,
default: true
},
// 是否允许日期范围的起止时间为同一天,mode = range时有效
allowSameDay: {
type: Boolean,
default: false
}
},
data() {
return {
// 每个日期的宽度
width: 0,
// 当前选中的日期item
item: {},
selected: []
}
},
watch: {
selectedChange: {
immediate: true,
handler(n) {
this.setDefaultDate()
}
}
},
computed: {
// 多个条件的变化,会引起选中日期的变化,这里统一管理监听
selectedChange() {
return [this.minDate, this.maxDate, this.defaultDate]
},
dayStyle(index1, index2, item) {
return (index1, index2, item) => {
const style = {}
let week = item.week
// 不进行四舍五入的形式保留2位小数
const dayWidth = Number(parseFloat(this.width / 7).toFixed(3).slice(0, -1))
// 得出每个日期的宽度
// #ifdef APP-NVUE
style.width = this.$uv.addUnit(dayWidth)
// #endif
style.height = this.$uv.addUnit(this.rowHeight)
if (index2 === 0) {
// 获取当前为星期几,如果为0,则为星期天,减一为每月第一天时,需要向左偏移的item个数
week = (week === 0 ? 7 : week) - 1
style.marginLeft = this.$uv.addUnit(week * dayWidth)
}
if (this.mode === 'range') {
// 之所以需要这么写,是因为DCloud公司的iOS客户端的开发者能力有限导致的bug
style.paddingLeft = 0
style.paddingRight = 0
style.paddingBottom = 0
style.paddingTop = 0
}
return style
}
},
daySelectStyle() {
return (index1, index2, item) => {
let date = dayjs(item.date).format("YYYY-MM-DD"),
style = {}
// 判断date是否在selected数组中,因为月份可能会需要补0,所以使用dateSame判断,而不用数组的includes判断
if (this.selected.some(item => this.dateSame(item, date))) {
style.backgroundColor = this.color
}
if (this.mode === 'single') {
if (date === this.selected[0]) {
// 因为需要对nvue的兼容,只能这么写,无法缩写,也无法通过类名控制等等
style.borderTopLeftRadius = '3px'
style.borderBottomLeftRadius = '3px'
style.borderTopRightRadius = '3px'
style.borderBottomRightRadius = '3px'
}
} else if (this.mode === 'range') {
if (this.selected.length >= 2) {
const len = this.selected.length - 1
// 第一个日期设置左上角和左下角的圆角
if (this.dateSame(date, this.selected[0])) {
style.borderTopLeftRadius = '3px'
style.borderBottomLeftRadius = '3px'
}
// 最后一个日期设置右上角和右下角的圆角
if (this.dateSame(date, this.selected[len])) {
style.borderTopRightRadius = '3px'
style.borderBottomRightRadius = '3px'
}
// 处于第一和最后一个之间的日期,背景色设置为浅色,通过将对应颜色进行等分,再取其尾部的颜色值
if (dayjs(date).isAfter(dayjs(this.selected[0])) && dayjs(date).isBefore(dayjs(this
.selected[len]))) {
style.backgroundColor = colorGradient(this.color, '#ffffff', 100)[90]
// 增加一个透明度,让范围区间的背景色也能看到底部的mark水印字符
style.opacity = 0.7
}
} else if (this.selected.length === 1) {
// 之所以需要这么写,是因为DCloud公司的iOS客户端的开发者能力有限导致的bug
// 进行还原操作,否则在nvue的iOS,uni-app有bug,会导致诡异的表现
style.borderTopLeftRadius = '3px'
style.borderBottomLeftRadius = '3px'
}
} else {
if (this.selected.some(item => this.dateSame(item, date))) {
style.borderTopLeftRadius = '3px'
style.borderBottomLeftRadius = '3px'
style.borderTopRightRadius = '3px'
style.borderBottomRightRadius = '3px'
}
}
return style
}
},
// 某个日期是否被选中
textStyle() {
return (item) => {
const date = dayjs(item.date).format("YYYY-MM-DD"),
style = {}
// 选中的日期,提示文字设置白色
if (this.selected.some(item => this.dateSame(item, date))) {
style.color = '#ffffff'
}
if (this.mode === 'range') {
const len = this.selected.length - 1
// 如果是范围选择模式,第一个和最后一个之间的日期,文字颜色设置为高亮的主题色
if (dayjs(date).isAfter(dayjs(this.selected[0])) && dayjs(date).isBefore(dayjs(this
.selected[len]))) {
style.color = this.color
}
}
return style
}
},
// 获取顶部的提示文字
getTopInfo() {
return (index1, index2, item) => {
return item.topInfo;
}
},
// 获取底部的提示文字
getBottomInfo() {
return (index1, index2, item) => {
const date = dayjs(item.date).format("YYYY-MM-DD")
const bottomInfo = item.bottomInfo
// 当为日期范围模式时,且选择的日期个数大于0时
if (this.mode === 'range' && this.selected.length > 0) {
if (this.selected.length === 1) {
// 选择了一个日期时,如果当前日期为数组中的第一个日期,则显示底部文字为“开始”
if (this.dateSame(date, this.selected[0])) return this.startText
else return bottomInfo
} else {
const len = this.selected.length - 1
// 如果数组中的日期大于2个时,第一个和最后一个显示为开始和结束日期
if (this.dateSame(date, this.selected[0]) && this.dateSame(date, this.selected[1]) &&
len === 1) {
// 如果长度为2,且第一个等于第二个日期,则提示语放在同一个item中
return `${this.startText}/${this.endText}`
} else if (this.dateSame(date, this.selected[0])) {
return this.startText
} else if (this.dateSame(date, this.selected[len])) {
return this.endText
} else {
return bottomInfo
}
}
} else {
return bottomInfo
}
}
}
},
mounted() {
this.init()
},
methods: {
init() {
// 初始化默认选中
this.$emit('monthSelected', this.selected)
this.$nextTick(() => {
// 这里需要另一个延时,因为获取宽度后,会进行月份数据渲染,只有渲染完成之后,才有真正的高度
// 因为nvue下,$nextTick并不是100%可靠的
this.$uv.sleep(10).then(() => {
this.getWrapperWidth()
this.getMonthRect()
})
})
},
// 判断两个日期是否相等
dateSame(date1, date2) {
return dayjs(date1).isSame(dayjs(date2))
},
// 获取月份数据区域的宽度,因为nvue不支持百分比,所以无法通过css设置每个日期item的宽度
getWrapperWidth() {
// #ifdef APP-NVUE
dom.getComponentRect(this.$refs['uv-calendar-month-wrapper'], res => {
this.width = res.size.width
})
// #endif
// #ifndef APP-NVUE
this.$uvGetRect('.uv-calendar-month-wrapper').then(size => {
this.width = size.width
})
// #endif
},
getMonthRect() {
// 获取每个月份数据的尺寸,用于父组件在scroll-view滚动事件中,监听当前滚动到了第几个月份
const promiseAllArr = this.months.map((item, index) => this.getMonthRectByPromise(
`uv-calendar-month-${index}`))
// 一次性返回
Promise.all(promiseAllArr).then(
sizes => {
let height = 1
const topArr = []
for (let i = 0; i < this.months.length; i++) {
// 添加到months数组中,供scroll-view滚动事件中,判断当前滚动到哪个月份
topArr[i] = height
height += sizes[i].height
}
// 由于微信下,无法通过this.months[i].top的形式(引用类型)去修改父组件的month的top值,所以使用事件形式对外发出
this.$emit('updateMonthTop', topArr)
})
},
// 获取每个月份区域的尺寸
getMonthRectByPromise(el) {
// #ifndef APP-NVUE
// $uvGetRect为uvui自带的节点查询简化方法,详见文档介绍:https://www.uvui.cn/js/getRect.html
// 组件内部一般用this.$uvGetRect,对外的为getRect,二者功能一致,名称不同
return new Promise(resolve => {
this.$uvGetRect(`.${el}`).then(size => {
resolve(size)
})
})
// #endif
// #ifdef APP-NVUE
// nvue下,使用dom模块查询元素高度
// 返回一个promise,让调用此方法的主体能使用then回调
return new Promise(resolve => {
dom.getComponentRect(this.$refs[el][0], res => {
resolve(res.size)
})
})
// #endif
},
// 点击某一个日期
clickHandler(index1, index2, item) {
if (this.readonly) {
return;
}
this.item = item
const date = dayjs(item.date).format("YYYY-MM-DD")
if (item.disabled) return
// 对上一次选择的日期数组进行深度克隆
let selected = this.$uv.deepClone(this.selected)
if (this.mode === 'single') {
// 单选情况下,让数组中的元素为当前点击的日期
selected = [date]
} else if (this.mode === 'multiple') {
if (selected.some(item => this.dateSame(item, date))) {
// 如果点击的日期已在数组中,则进行移除操作,也就是达到反选的效果
const itemIndex = selected.findIndex(item => dayjs(item).format("YYYY-MM-DD") === dayjs(date).format("YYYY-MM-DD"))
selected.splice(itemIndex, 1)
} else {
// 如果点击的日期不在数组中,且已有的长度小于总可选长度时,则添加到数组中去
if (selected.length < this.maxCount) selected.push(date)
}
} else {
// 选择区间形式
if (selected.length === 0 || selected.length >= 2) {
// 如果原来就为0或者大于2的长度,则当前点击的日期,就是开始日期
selected = [date]
} else if (selected.length === 1) {
// 如果已经选择了开始日期
const existsDate = selected[0]
// 如果当前选择的日期小于上一次选择的日期,则当前的日期定为开始日期
if (dayjs(date).isBefore(existsDate)) {
selected = [date]
} else if (dayjs(date).isAfter(existsDate)) {
// 当前日期减去最大可选的日期天数,如果大于起始时间,则进行提示
if(dayjs(dayjs(date).subtract(this.maxRange, 'day')).isAfter(dayjs(selected[0])) && this.showRangePrompt) {
if(this.rangePrompt) {
this.$uv.toast(this.rangePrompt)
} else {
this.$uv.toast(`选择天数不能超过 ${this.maxRange} 天`)
}
return
}
// 如果当前日期大于已有日期,将当前的添加到数组尾部
selected.push(date)
const startDate = selected[0]
const endDate = selected[1]
const arr = []
let i = 0
do {
// 将开始和结束日期之间的日期添加到数组中
arr.push(dayjs(startDate).add(i, 'day').format("YYYY-MM-DD"))
i++
// 累加的日期小于结束日期时,继续下一次的循环
} while (dayjs(startDate).add(i, 'day').isBefore(dayjs(endDate)))
// 为了一次性修改数组,避免computed中多次触发,这里才用arr变量一次性赋值的方式,同时将最后一个日期添加近来
arr.push(endDate)
selected = arr
} else {
// 选择区间时,只有一个日期的情况下,且不允许选择起止为同一天的话,不允许选择自己
if (selected[0] === date && !this.allowSameDay) return
selected.push(date)
}
}
}
this.setSelected(selected)
this.$emit('change',{
day: date,
selected: selected
});
},
// 设置默认日期
setDefaultDate() {
if (!this.defaultDate) {
// 如果没有设置默认日期,则将当天日期设置为默认选中的日期
const selected = [dayjs().format("YYYY-MM-DD")]
return this.setSelected(selected, false)
}
let defaultDate = []
const minDate = this.minDate || dayjs().format("YYYY-MM-DD")
const maxDate = this.maxDate || dayjs(minDate).add(this.maxMonth - 1, 'month').format("YYYY-MM-DD")
if (this.mode === 'single') {
// 单选模式,可以是字符串或数组,Date对象等
if (!this.$uv.test.array(this.defaultDate)) {
defaultDate = [dayjs(this.defaultDate).format("YYYY-MM-DD")]
} else {
defaultDate = [this.defaultDate[0]]
}
} else {
// 如果为非数组,则不执行
if (!this.$uv.test.array(this.defaultDate)) return
defaultDate = this.defaultDate
}
// 过滤用户传递的默认数组,取出只在可允许最大值与最小值之间的元素
defaultDate = defaultDate.filter(item => {
return dayjs(item).isAfter(dayjs(minDate).subtract(1, 'day')) && dayjs(item).isBefore(dayjs(
maxDate).add(1, 'day'))
})
this.setSelected(defaultDate, false)
},
setSelected(selected, event = true) {
this.selected = selected
event && this.$emit('monthSelected', this.selected)
}
}
}
</script>
<style lang="scss" scoped>
@import '@/uni_modules/uv-ui-tools/libs/css/components.scss';
@import '@/uni_modules/uv-ui-tools/libs/css/color.scss';
.uv-calendar-month-wrapper {
margin-top: 4px;
}
.uv-calendar-month {
&__title {
font-size: 14px;
line-height: 42px;
height: 42px;
color: $uv-main-color;
text-align: center;
font-weight: bold;
}
&__days {
position: relative;
@include flex;
flex-wrap: wrap;
&__month-mark-wrapper {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
@include flex;
justify-content: center;
align-items: center;
&__text {
font-size: 155px;
color: rgba(231, 232, 234, 0.83);
}
}
&__day {
@include flex;
padding: 2px;
/* #ifndef APP-NVUE */
// vue下使用css进行宽度计算,因为某些安卓机会无法进行js获取父元素宽度进行计算得出,会有偏移
width: calc(100% / 7);
box-sizing: border-box;
/* #endif */
&__select {
flex: 1;
@include flex;
align-items: center;
justify-content: center;
position: relative;
&__dot {
width: 7px;
height: 7px;
border-radius: 100px;
background-color: $uv-error;
position: absolute;
top: 12px;
right: 7px;
}
&__top-info {
color: $uv-content-color;
text-align: center;
position: absolute;
top: 2px;
font-size: 10px;
text-align: center;
left: 0;
right: 0;
&--selected {
color: #ffffff;
}
&--disabled {
color: #cacbcd;
}
}
&__buttom-info {
color: $uv-content-color;
text-align: center;
position: absolute;
bottom: 5px;
font-size: 10px;
text-align: center;
left: 0;
right: 0;
&--selected {
color: #ffffff;
}
&--disabled {
color: #cacbcd;
}
}
&__info {
text-align: center;
font-size: 16px;
&--selected {
color: #ffffff;
}
&--disabled {
color: #cacbcd;
}
}
&--selected {
background-color: $uv-primary;
@include flex;
justify-content: center;
align-items: center;
flex: 1;
border-radius: 3px;
}
&--range-selected {
opacity: 0.3;
border-radius: 0;
}
&--range-start-selected {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
&--range-end-selected {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
}
}
}
}
</style>
@@ -0,0 +1,145 @@
export default {
props: {
// 日历顶部标题
title: {
type: String,
default: '日期选择'
},
// 是否显示标题
showTitle: {
type: Boolean,
default: true
},
// 是否显示副标题
showSubtitle: {
type: Boolean,
default: true
},
// 日期类型选择,single-选择单个日期,multiple-可以选择多个日期,range-选择日期范围
mode: {
type: String,
default: 'single'
},
// mode=range时,第一个日期底部的提示文字
startText: {
type: String,
default: '开始'
},
// mode=range时,最后一个日期底部的提示文字
endText: {
type: String,
default: '结束'
},
// 自定义列表
customList: {
type: Array,
default: () => []
},
// 主题色,对底部按钮和选中日期有效
color: {
type: String,
default: '#3c9cff'
},
// 最小的可选日期
minDate: {
type: [String, Number],
default: 0
},
// 最大可选日期
maxDate: {
type: [String, Number],
default: 0
},
// 默认选中的日期,mode为multiple或range是必须为数组格式
defaultDate: {
type: [Array, String, Date, null],
default: null
},
// mode=multiple时,最多可选多少个日期
maxCount: {
type: [String, Number],
default: Number.MAX_SAFE_INTEGER
},
// 日期行高
rowHeight: {
type: [String, Number],
default: 56
},
// 日期格式化函数
formatter: {
type: [Function, null],
default: null
},
// 是否显示农历
showLunar: {
type: Boolean,
default: false
},
// 是否显示月份背景色
showMark: {
type: Boolean,
default: true
},
// 确定按钮的文字
confirmText: {
type: String,
default: '确定'
},
// 确认按钮处于禁用状态时的文字
confirmDisabledText: {
type: String,
default: '确定'
},
// 是否允许点击遮罩关闭日历
closeOnClickOverlay: {
type: Boolean,
default: false
},
// 是否允许点击确认按钮关闭日历
closeOnClickConfirm: {
type: Boolean,
default: true
},
// 是否为只读状态,只读状态下禁止选择日期
readonly: {
type: Boolean,
default: false
},
// 是否展示确认按钮
showConfirm: {
type: Boolean,
default: true
},
// 日期区间最多可选天数,默认无限制,mode = range时有效 Infinity
maxRange: {
type: [Number, String],
default: Number.MAX_SAFE_INTEGER
},
// 范围选择超过最多可选天数时的提示文案,mode = range时有效
rangePrompt: {
type: String,
default: ''
},
// 范围选择超过最多可选天数时,是否展示提示文案,mode = range时有效
showRangePrompt: {
type: Boolean,
default: true
},
// 是否允许日期范围的起止时间为同一天,mode = range时有效
allowSameDay: {
type: Boolean,
default: false
},
// 圆角值
round: {
type: [Boolean, String, Number],
default: 0
},
// 最多展示月份数量
monthNum: {
type: [Number, String],
default: 3
},
...uni.$uv?.props?.calendar
}
}
@@ -0,0 +1,390 @@
<template>
<uv-popup
ref="calendarPopup"
mode="bottom"
closeable
:round="round"
:closeOnClickOverlay="closeOnClickOverlay"
@change="popupChange"
>
<view class="uv-calendar">
<uvHeader
:title="title"
:subtitle="subtitle"
:showSubtitle="showSubtitle"
:showTitle="showTitle"
></uvHeader>
<scroll-view
:style="{ height: $uv.addUnit(listHeight) }"
scroll-y
@scroll="onScroll"
:scroll-top="scrollTop"
:scrollIntoView="scrollIntoView"
>
<uvMonth
:color="color"
:rowHeight="rowHeight"
:showMark="showMark"
:months="months"
:mode="mode"
:maxCount="maxCount"
:startText="startText"
:endText="endText"
:defaultDate="defaultDate"
:minDate="innerMinDate"
:maxDate="innerMaxDate"
:maxMonth="monthNum"
:readonly="readonly"
:maxRange="maxRange"
:rangePrompt="rangePrompt"
:showRangePrompt="showRangePrompt"
:allowSameDay="allowSameDay"
ref="month"
@monthSelected="monthSelected"
@updateMonthTop="updateMonthTop"
@change="changeDay"
></uvMonth>
</scroll-view>
<slot name="footer" v-if="showConfirm">
<view class="uv-calendar__confirm">
<uv-button
shape="circle"
:text="buttonDisabled ? confirmDisabledText : confirmText"
:color="color"
@click="confirm"
:disabled="buttonDisabled"
></uv-button>
</view>
</slot>
</view>
</uv-popup>
</template>
<script>
import mpMixin from '@/uni_modules/uv-ui-tools/libs/mixin/mpMixin.js'
import mixin from '@/uni_modules/uv-ui-tools/libs/mixin/mixin.js'
import uvHeader from './header.vue'
import uvMonth from './month.vue'
import props from './props.js'
import dayjs from '@/uni_modules/uv-ui-tools/libs/util/dayjs.js'
import Calendar from './calendar.js'
/**
* Calendar 日历
* @description 此组件用于单个选择日期,范围选择日期等,日历被包裹在底部弹起的容器中.
* @tutorial https://www.uvui.cn/components/calendar.html
*
* @property {String} title 标题内容 (默认 日期选择 )
* @property {Boolean} showTitle 是否显示标题 (默认 true )
* @property {Boolean} showSubtitle 是否显示副标题 (默认 true )
* @property {String} mode 日期类型选择 single-选择单个日期,multiple-可以选择多个日期,range-选择日期范围 ( 默认 'single' )
* @property {String} startText mode=range时,第一个日期底部的提示文字 (默认 '开始' )
* @property {String} endText mode=range时,最后一个日期底部的提示文字 (默认 '结束' )
* @property {Array} customList 自定义列表
* @property {String} color 主题色,对底部按钮和选中日期有效 (默认 ‘#3c9cff' )
* @property {String | Number} minDate 最小的可选日期 (默认 0 )
* @property {String | Number} maxDate 最大可选日期 (默认 0 )
* @property {Array | String| Date} defaultDate 默认选中的日期,mode为multiple或range是必须为数组格式
* @property {String | Number} maxCount mode=multiple时,最多可选多少个日期 (默认 Number.MAX_SAFE_INTEGER )
* @property {String | Number} rowHeight 日期行高 (默认 56 )
* @property {Function} formatter 日期格式化函数
* @property {Boolean} showLunar 是否显示农历 (默认 false )
* @property {Boolean} showMark 是否显示月份背景色 (默认 true )
* @property {String} confirmText 确定按钮的文字 (默认 '确定' )
* @property {String} confirmDisabledText 确认按钮处于禁用状态时的文字 (默认 '确定' )
* @property {Boolean} show 是否显示日历弹窗 (默认 false )
* @property {Boolean} closeOnClickOverlay 是否允许点击遮罩关闭日历 (默认 false )
* @property {Boolean} closeOnClickConfirm 是否允许点击确认按钮关闭日历,设置为false不影响confirm事件返回 (默认 true )
* @property {Boolean} readonly 是否为只读状态,只读状态下禁止选择日期 (默认 false )
* @property {String | Number} maxRange 日期区间最多可选天数,默认无限制,mode = range时有效
* @property {String} rangePrompt 范围选择超过最多可选天数时的提示文案,mode = range时有效
* @property {Boolean} showRangePrompt 范围选择超过最多可选天数时,是否展示提示文案,mode = range时有效 (默认 true )
* @property {Boolean} allowSameDay 是否允许日期范围的起止时间为同一天,mode = range时有效 (默认 false )
* @property {Number|String} round 圆角值,默认无圆角 (默认 0 )
* @property {Number|String} monthNum 最多展示的月份数量 (默认 3 )
*
* @event {Function()} confirm 点击确定按钮时触发 选择日期相关的返回参数
* @event {Function()} close 日历关闭时触发 可定义页面关闭时的回调事件
* @example <uv-calendar ref="calendar" :defaultDate="defaultDateMultiple" mode="multiple" @confirm="confirm">
</uv-calendar>
* */
export default {
name: 'uv-calendar',
emits:['confirm','close','change'],
mixins: [mpMixin, mixin, props],
components: {
uvHeader,
uvMonth
},
data() {
return {
// 需要显示的月份的数组
months: [],
// 在月份滚动区域中,当前视图中月份的index索引
monthIndex: 0,
// 月份滚动区域的高度
listHeight: 0,
// month组件中选择的日期数组
selected: [],
scrollIntoView: '',
scrollTop:0,
// 过滤处理方法
innerFormatter: (value) => value
}
},
watch: {
selectedChange: {
immediate: true,
handler(n) {
this.setMonth()
}
}
},
computed: {
// 由于maxDate和minDate可以为字符串(2021-10-10),或者数值(时间戳),但是dayjs如果接受字符串形式的时间戳会有问题,这里进行处理
innerMaxDate() {
return this.$uv.test.number(this.maxDate)
? Number(this.maxDate)
: this.maxDate
},
innerMinDate() {
return this.$uv.test.number(this.minDate)
? Number(this.minDate)
: this.minDate
},
// 多个条件的变化,会引起选中日期的变化,这里统一管理监听
selectedChange() {
return [this.innerMinDate, this.innerMaxDate, this.defaultDate]
},
subtitle() {
// 初始化时,this.months为空数组,所以需要特别判断处理
if (this.months.length) {
return `${this.months[this.monthIndex].year}年${
this.months[this.monthIndex].month
}月`
} else {
return ''
}
},
buttonDisabled() {
// 如果为range类型,且选择的日期个数不足1个时,让底部的按钮出于disabled状态
if (this.mode === 'range') {
if (this.selected.length <= 1) {
return true
} else {
return false
}
} else {
return false
}
}
},
mounted() {
this.start = Date.now()
this.init()
},
methods: {
// 在微信小程序中,不支持将函数当做props参数,故只能通过ref形式调用
setFormatter(e) {
this.innerFormatter = e
},
// 点击日期框触发
changeDay(e) {
this.$emit('change',e);
},
// month组件内部选择日期后,通过事件通知给父组件
monthSelected(e) {
this.selected = e
if (!this.showConfirm) {
// 在不需要确认按钮的情况下,如果为单选,或者范围多选且已选长度大于2,则直接进行返还
if (
this.mode === 'multiple' ||
this.mode === 'single' ||
(this.mode === 'range' && this.selected.length >= 2)
) {
this.$emit('confirm', this.selected)
}
}
},
init() {
// 校验maxDate,不能小于minDate
if (
this.innerMaxDate &&
this.innerMinDate &&
new Date(this.innerMaxDate).getTime() < new Date(this.innerMinDate).getTime()
) {
return this.$uv.error('maxDate不能小于minDate')
}
// 滚动区域的高度
this.listHeight = this.rowHeight * 5 + 30
this.setMonth()
},
open() {
this.setMonth()
this.$refs.calendarPopup.open();
},
popupChange(e) {
if(!e.show) {
this.$emit('close');
}
},
// 点击确定按钮
confirm() {
if (!this.buttonDisabled) {
this.$emit('confirm', this.selected)
}
if (this.closeOnClickConfirm) {
this.$refs.calendarPopup.close();
}
},
// 获得两个日期之间的月份数
getMonths(minDate, maxDate) {
const minYear = dayjs(minDate).year()
const minMonth = dayjs(minDate).month() + 1
const maxYear = dayjs(maxDate).year()
const maxMonth = dayjs(maxDate).month() + 1
return (maxYear - minYear) * 12 + (maxMonth - minMonth) + 1
},
// 设置月份数据
setMonth() {
// 最小日期的毫秒数
const minDate = this.innerMinDate || dayjs().valueOf()
// 如果没有指定最大日期,则往后推3个月
const maxDate =
this.innerMaxDate ||
dayjs(minDate)
.add(this.monthNum - 1, 'month')
.valueOf()
// 最大最小月份之间的共有多少个月份,
const months = this.$uv.range(
1,
this.monthNum,
this.getMonths(minDate, maxDate)
)
// 先清空数组
this.months = []
for (let i = 0; i < months; i++) {
this.months.push({
date: new Array(
dayjs(minDate).add(i, 'month').daysInMonth()
)
.fill(1)
.map((item, index) => {
// 日期,取值1-31
let day = index + 1
// 星期,0-6,0为周日
const week = dayjs(minDate)
.add(i, 'month')
.date(day)
.day()
const date = dayjs(minDate)
.add(i, 'month')
.date(day)
.format('YYYY-MM-DD')
let topInfo = ''
let bottomInfo = ''
if (this.showLunar) {
// 将日期转为农历格式
const lunar = Calendar.solar2lunar(
dayjs(date).year(),
dayjs(date).month() + 1,
dayjs(date).date()
)
bottomInfo = lunar.IDayCn
}
let config = {
day,
week,
// 小于最小允许的日期,或者大于最大的日期,则设置为disabled状态
disabled:
dayjs(date).isBefore(
dayjs(minDate).format('YYYY-MM-DD')
) ||
dayjs(date).isAfter(
dayjs(maxDate).format('YYYY-MM-DD')
),
// 返回一个日期对象,供外部的formatter获取当前日期的年月日等信息,进行加工处理
date: new Date(date),
topInfo,
bottomInfo,
dot: false,
month:
dayjs(minDate).add(i, 'month').month() + 1
}
const formatter =
this.formatter || this.innerFormatter
return formatter(config)
}),
// 当前所属的月份
month: dayjs(minDate).add(i, 'month').month() + 1,
// 当前年份
year: dayjs(minDate).add(i, 'month').year()
})
}
},
// 滚动到默认设置的月份
scrollIntoDefaultMonth(selected) {
// 查询默认日期在可选列表的下标
const _index = this.months.findIndex(({
year,
month
}) => {
month = this.$uv.padZero(month)
return `${year}-${month}` === selected
})
if (_index !== -1) {
// #ifndef MP-WEIXIN
this.$nextTick(() => {
this.scrollIntoView = `month-${_index}`
})
// #endif
// #ifdef MP-WEIXIN
this.scrollTop = this.months[_index].top || 0;
// #endif
}
},
// scroll-view滚动监听
onScroll(event) {
// 不允许小于0的滚动值,如果scroll-view到顶了,继续下拉,会出现负数值
const scrollTop = Math.max(0, event.detail.scrollTop)
// 将当前滚动条数值,除以滚动区域的高度,可以得出当前滚动到了哪一个月份的索引
for (let i = 0; i < this.months.length; i++) {
if (scrollTop >= (this.months[i].top || this.listHeight)) {
this.monthIndex = i
}
}
},
// 更新月份的top值
updateMonthTop(topArr = []) {
// 设置对应月份的top值,用于onScroll方法更新月份
topArr.map((item, index) => {
this.months[index].top = item
})
// 获取默认日期的下标
if (!this.defaultDate) {
// 如果没有设置默认日期,则将当天日期设置为默认选中的日期
const selected = dayjs().format("YYYY-MM")
this.scrollIntoDefaultMonth(selected)
return
}
let selected = dayjs().format("YYYY-MM");
// 单选模式,可以是字符串或数组,Date对象等
if (!this.$uv.test.array(this.defaultDate)) {
selected = dayjs(this.defaultDate).format("YYYY-MM")
} else {
selected = dayjs(this.defaultDate[0]).format("YYYY-MM");
}
this.scrollIntoDefaultMonth(selected)
}
}
}
</script>
<style lang="scss" scoped>
.uv-calendar {
&__confirm {
padding: 7px 18px;
}
}
</style>
+89
View File
@@ -0,0 +1,89 @@
{
"id": "uv-calendar",
"displayName": "uv-calendar 日历 全面兼容vue3+2、app、h5、小程序等多端",
"version": "1.0.6",
"description": "日历组件用于单个选择日期,范围选择日期等,日历被包裹在底部弹起的容器中,灵活配置,功能齐全,兼容全端。强烈推荐使用最新版日历组件,在下方跳入。",
"keywords": [
"uv-calendar",
"uvui",
"uv-ui",
"calendar",
"日历"
],
"repository": "",
"engines": {
"HBuilderX": "^3.1.0"
},
"dcloudext": {
"type": "component-vue",
"sale": {
"regular": {
"price": "0.00"
},
"sourcecode": {
"price": "0.00"
}
},
"contact": {
"qq": ""
},
"declaration": {
"ads": "无",
"data": "插件不采集任何数据",
"permissions": "无"
},
"npmurl": ""
},
"uni_modules": {
"dependencies": [
"uv-ui-tools",
"uv-button",
"uv-popup"
],
"encrypt": [],
"platforms": {
"cloud": {
"tcb": "y",
"aliyun": "y"
},
"client": {
"Vue": {
"vue2": "y",
"vue3": "y"
},
"App": {
"app-vue": "y",
"app-nvue": "y"
},
"H5-mobile": {
"Safari": "y",
"Android Browser": "y",
"微信浏览器(Android)": "y",
"QQ浏览器(Android)": "y"
},
"H5-pc": {
"Chrome": "y",
"IE": "y",
"Edge": "y",
"Firefox": "y",
"Safari": "y"
},
"小程序": {
"微信": "y",
"阿里": "y",
"百度": "y",
"字节跳动": "y",
"QQ": "y",
"钉钉": "u",
"快手": "u",
"飞书": "u",
"京东": "u"
},
"快应用": {
"华为": "u",
"联盟": "u"
}
}
}
}
}
+21
View File
@@ -0,0 +1,21 @@
## Calendar 日历
> **组件名:uv-calendar**
此组件用于单个选择日期,范围选择日期等,日历被包裹在底部弹起的容器中。灵活配置,功能齐全,兼容全端。
## 温馨提示:该组件不再更新,强烈推荐使用最新版日历组件:[https://www.uvui.cn/components/calendars.html](https://www.uvui.cn/components/calendars.html)。基于 `uv-ui` 插件市场首款多功能日历组件,不仅可以查看、选择日期,还可以选择任意范围内的日期、打点操作、自定义主题颜色、自定义文案、农历显示等。追求的就是完美。
# <a href="https://www.uvui.cn/components/calendar.html" target="_blank">查看文档</a>
## [下载完整示例项目](https://ext.dcloud.net.cn/plugin?name=uv-ui) <small>(请不要 下载插件ZIP)</small>
### [更多插件,请关注uv-ui组件库](https://ext.dcloud.net.cn/plugin?name=uv-ui)
<a href="https://ext.dcloud.net.cn/plugin?name=uv-ui" target="_blank">
![image](https://mp-a667b617-c5f1-4a2d-9a54-683a67cff588.cdn.bspapp.com/uv-ui/banner.png)
</a>
#### 如使用过程中有任何问题反馈,或者您对uv-ui有一些好的建议,欢迎加入uv-ui官方交流群:<a href="https://www.uvui.cn/components/addQQGroup.html" target="_blank">官方QQ群</a>
+40
View File
@@ -0,0 +1,40 @@
## 1.0.15(2023-11-08)
1. 增加readonly属性,是否为只读状态,只读状态下禁止选择日期
## 1.0.14(2023-10-12)
1. 修复selected没有设置了info或者info设置为空字符串后,文本则无法恢复BUG
## 1.0.13(2023-09-19)
1. 修复range模式下,selected设置了info后选中后,导致文本不恢复的问题
2. 修复multiple模式下,selected自定义信息的颜色没变,依然是白色
## 1.0.12(2023-09-14)
1. 优化
## 1.0.11(2023-09-14)
1. 增加allowSameDay参数,是否允许日期范围的起止时间为同一天,mode = range时有效
2. 修复在vue2+小程序渲染时闪烁的问题
## 1.0.10(2023-09-07)
1. 修复国际化失效的BUG
## 1.0.9(2023-09-01)
1. 修复在pages.json中设置easycom会报错的BUG
## 1.0.8(2023-08-29)
1. 修复mainjs中设置setConfig修改属性不生效的问题,出自评论区:https://ext.dcloud.net.cn/plugin?id=12287
## 1.0.7(2023-08-26)
1. 去除range参数,由mode="range"替换
2. 新增mode参数,不传 / multiple / range,分别为单日期, 多个日期,选择日期范围
3. 与uv-calendar选择日期的功能保持一致
## 1.0.6(2023-08-25)
1. 修复点击返回今天按钮时,monthSwitch方法回调参数返回月份不是当天对应月份:https://github.com/climblee/uv-ui/issues/7
## 1.0.5(2023-08-13)
1. 修复选择月份弹窗层级的问题
## 1.0.4(2023-08-06)
1. 优化
## 1.0.3(2023-08-06)
1. 修复高度不对的BUG
2. 修复文案在小屏幕的BUG
## 1.0.2(2023-08-05)
1. 增加startText参数
2. 增加endText参数
3. 增加selected中的参数
4. 优化日历范围选择
## 1.0.1(2023-08-04)
1. 修复 自定义主题时 颜色错误的BUG
## 1.0.0(2023-08-03)
1. 新增 uv-calendars 新版日历发布
@@ -0,0 +1,376 @@
<template>
<view class="uv-calendar-body">
<view class="uv-calendar__header">
<view class="uv-calendar__header-btn-box" @click.stop="pre">
<view class="uv-calendar__header-btn uv-calendar--left"></view>
</view>
<picker mode="date" :value="getDate" fields="month" @change="bindDateChange">
<text class="uv-calendar__header-text">{{ (nowDate.year||'') +' / '+( nowDate.month||'')}}</text>
</picker>
<view class="uv-calendar__header-btn-box" @click.stop="next">
<view class="uv-calendar__header-btn uv-calendar--right"></view>
</view>
<text class="uv-calendar__backtoday" @click="backToday">{{todayText}}</text>
</view>
<view class="uv-calendar__box">
<view v-if="showMonth" class="uv-calendar__box-bg">
<text class="uv-calendar__box-bg-text">{{nowDate.month}}</text>
</view>
<view class="uv-calendar__weeks uv-calendar__weeks-week">
<view class="uv-calendar__weeks-day">
<text class="uv-calendar__weeks-day-text">{{SUNText}}</text>
</view>
<view class="uv-calendar__weeks-day">
<text class="uv-calendar__weeks-day-text">{{monText}}</text>
</view>
<view class="uv-calendar__weeks-day">
<text class="uv-calendar__weeks-day-text">{{TUEText}}</text>
</view>
<view class="uv-calendar__weeks-day">
<text class="uv-calendar__weeks-day-text">{{WEDText}}</text>
</view>
<view class="uv-calendar__weeks-day">
<text class="uv-calendar__weeks-day-text">{{THUText}}</text>
</view>
<view class="uv-calendar__weeks-day">
<text class="uv-calendar__weeks-day-text">{{FRIText}}</text>
</view>
<view class="uv-calendar__weeks-day">
<text class="uv-calendar__weeks-day-text">{{SATText}}</text>
</view>
</view>
<view class="uv-calendar__weeks" v-for="(item,weekIndex) in weeks" :key="weekIndex">
<view class="uv-calendar__weeks-item" v-for="(weeks,weeksIndex) in item" :key="weeksIndex">
<calendar-item class="uv-calendar-item--hook" :weeks="weeks" :rangeInfoText="rangeInfoText(weeks)" :multiple="multiple" :range="range" :calendar="calendar" :selected="selected" :lunar="lunar" :color="color" @change="choiceDate"></calendar-item>
</view>
</view>
</view>
</view>
</template>
<script>
import mpMixin from '@/uni_modules/uv-ui-tools/libs/mixin/mpMixin.js';
import mixin from '@/uni_modules/uv-ui-tools/libs/mixin/mixin.js';
import CalendarItem from './calendar-item.vue';
import { initVueI18n } from '@dcloudio/uni-i18n';
import i18nMessages from './i18n/index.js';
const { t } = initVueI18n(i18nMessages);
export default {
mixins: [mpMixin, mixin],
components: {
CalendarItem
},
props: {
date: {
type: [String,Array],
default: ''
},
nowDate: {
type: [String, Object],
default: ''
},
weeks: {
type: [Array, Object],
default () {
return []
}
},
calendar: {
type: Object,
default () {
return {}
}
},
selected: {
type: Array,
default () {
return []
}
},
lunar: {
type: Boolean,
default: false
},
showMonth: {
type: Boolean,
default: true
},
color: {
type: String,
default: '#3c9cff'
},
startText: {
type: String,
default: '开始'
},
endText: {
type: String,
default: '结束'
},
range: {
type: Boolean,
default: false
},
multiple: {
type: Boolean,
default: false
},
// 是否允许日期范围的起止时间为同一天,mode = range时有效
allowSameDay: {
type: Boolean,
default: false
}
},
computed: {
getDate() {
return Array.isArray(this.date) ? this.date[0] : this.date;
},
/**
* for i18n
*/
todayText() {
return t("uv-calender.today")
},
monText() {
return t("uv-calender.MON")
},
TUEText() {
return t("uv-calender.TUE")
},
WEDText() {
return t("uv-calender.WED")
},
THUText() {
return t("uv-calender.THU")
},
FRIText() {
return t("uv-calender.FRI")
},
SATText() {
return t("uv-calender.SAT")
},
SUNText() {
return t("uv-calender.SUN")
},
rangeInfoText(weeks) {
return weeks=> {
if(this.allowSameDay && weeks.beforeRange && weeks.afterRange && weeks.dateEqual) {
return this.setInfo(weeks,`${this.startText}/${this.endText}`);
}
if(weeks.beforeRange) {
return this.setInfo(weeks,this.startText);
}
if(weeks.afterRange) {
return this.setInfo(weeks,this.endText);
}
if(weeks.extraInfo?.info_old == ' ') {
weeks.extraInfo.info = null;
}else if(weeks.extraInfo?.info_old) {
weeks.extraInfo.info = weeks.extraInfo.info_old;
}
}
}
},
methods: {
setInfo(weeks,text) {
this.setInfoOld(weeks);
if(weeks.extraInfo) {
weeks.extraInfo.info = text;
}else {
weeks.extraInfo = {
info: text
}
}
},
setInfoOld(weeks) {
if(weeks.extraInfo) {
weeks.extraInfo.info_old = weeks.extraInfo.info ? weeks.extraInfo.info_old || weeks.extraInfo.info : ' ';
}
},
bindDateChange(e) {
this.$emit('bindDateChange', e);
},
backToday() {
this.$emit('backToday');
},
pre() {
this.$emit('pre');
},
next() {
this.$emit('next');
},
choiceDate(e) {
this.$emit('choiceDate', e);
}
}
}
</script>
<style scoped lang="scss">
@mixin flex($direction: row) {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: $direction;
}
$uv-bg-color-mask: rgba($color: #000000, $alpha: 0.4);
$uv-border-color: #EDEDED !default;
$uv-text-color: #333;
$uv-bg-color-hover: #f1f1f1;
$uv-font-size-base: 14px;
$uv-text-color-placeholder: #808080;
$uv-color-subtitle: #555555;
$uv-text-color-grey: #999;
.uv-calendar {
@include flex(column);
}
.uv-calendar__mask {
position: fixed;
bottom: 0;
top: 0;
left: 0;
right: 0;
background-color: $uv-bg-color-mask;
transition-property: opacity;
transition-duration: 0.3s;
opacity: 0;
/* #ifndef APP-NVUE */
z-index: 99;
/* #endif */
}
.uv-calendar--mask-show {
opacity: 1
}
.uv-calendar--fixed {
position: fixed;
/* #ifdef APP-NVUE */
bottom: 0;
/* #endif */
left: 0;
right: 0;
transition-property: transform;
transition-duration: 0.3s;
transform: translateY(460px);
/* #ifndef APP-NVUE */
bottom: calc(var(--window-bottom));
z-index: 99;
/* #endif */
}
.uv-calendar--ani-show {
transform: translateY(0);
}
.uv-calendar__content {
background-color: #fff;
}
.uv-calendar__header {
position: relative;
@include flex;
justify-content: center;
align-items: center;
height: 50px;
border-bottom-color: $uv-border-color;
border-bottom-style: solid;
border-bottom-width: 1px;
}
.uv-calendar--fixed-top {
@include flex;
justify-content: space-between;
border-top-color: $uv-border-color;
border-top-style: solid;
border-top-width: 1px;
}
.uv-calendar--fixed-width {
width: 50px;
}
.uv-calendar__backtoday {
position: absolute;
right: 0;
top: 25rpx;
padding: 0 5px;
padding-left: 10px;
height: 25px;
line-height: 25px;
font-size: 12px;
border-top-left-radius: 25px;
border-bottom-left-radius: 25px;
color: $uv-text-color;
background-color: $uv-bg-color-hover;
}
.uv-calendar__header-text {
text-align: center;
width: 100px;
font-size: $uv-font-size-base;
color: $uv-text-color;
}
.uv-calendar__header-btn-box {
@include flex;
align-items: center;
justify-content: center;
width: 50px;
height: 50px;
}
.uv-calendar__header-btn {
width: 10px;
height: 10px;
border-left-color: $uv-text-color-placeholder;
border-left-style: solid;
border-left-width: 2px;
border-top-color: $uv-color-subtitle;
border-top-style: solid;
border-top-width: 2px;
}
.uv-calendar--left {
transform: rotate(-45deg);
}
.uv-calendar--right {
transform: rotate(135deg);
}
.uv-calendar__weeks {
position: relative;
@include flex;
}
.uv-calendar__weeks-week {
padding: 0 0 2rpx;
}
.uv-calendar__weeks-item {
flex: 1;
}
.uv-calendar__weeks-day {
flex: 1;
@include flex(column);
justify-content: center;
align-items: center;
height: 45px;
border-bottom-color: #F5F5F5;
border-bottom-style: solid;
border-bottom-width: 1px;
}
.uv-calendar__weeks-day-text {
font-size: 14px;
}
.uv-calendar__box {
position: relative;
}
.uv-calendar__box-bg {
@include flex(column);
justify-content: center;
align-items: center;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.uv-calendar__box-bg-text {
font-size: 200px;
font-weight: bold;
color: $uv-text-color-grey;
opacity: 0.1;
text-align: center;
/* #ifndef APP-NVUE */
line-height: 1;
/* #endif */
}
</style>
@@ -0,0 +1,248 @@
<template>
<view class="uv-calendar-item__weeks-box" :class="{
'uv-calendar-item--disable':weeks.disable || (weeks.extraInfo&&weeks.extraInfo.disable),
'uv-calendar-item--isDay':calendar.fullDate === weeks.fullDate && weeks.isDay && !multiple,
'uv-calendar-item--checked':(calendar.fullDate === weeks.fullDate && !weeks.isDay && !multiple) ,
'uv-calendar-item--before-checked':weeks.beforeRange,
'uv-calendar-item--range': weeks.range,
'uv-calendar-item--after-checked':weeks.afterRange,
'uv-calendar-item--multiple':weeks.multiple
}" :style="[itemBoxStyle]" @click="choiceDate(weeks)">
<view class="uv-calendar-item__weeks-box-item">
<text v-if="selected&&weeks.extraInfo&&weeks.extraInfo.badge" class="uv-calendar-item__weeks-box-circle"></text>
<text class="uv-calendar-item__weeks-top-text" v-if="weeks.extraInfo&&weeks.extraInfo.topinfo" :style="[infoStyle('top')]">{{weeks.extraInfo&&weeks.extraInfo.topinfo}}</text>
<text class="uv-calendar-item__weeks-box-text" :class="{
'uv-calendar-item--isDay-text': weeks.isDay,
'uv-calendar-item--isDay':calendar.fullDate === weeks.fullDate && weeks.isDay && !multiple,
'uv-calendar-item--checked':calendar.fullDate === weeks.fullDate && !weeks.isDay && !multiple,
'uv-calendar-item--before-checked':weeks.beforeRange,
'uv-calendar-item--range': weeks.range,
'uv-calendar-item--after-checked':weeks.afterRange,
'uv-calendar-item--multiple':weeks.multiple,
'uv-calendar-item--disable':weeks.disable || (weeks.extraInfo&&weeks.extraInfo.disable)
}" :style="[itemBoxStyle]">{{weeks.date}}</text>
<text v-if="!lunar&&!weeks.extraInfo && weeks.isDay" class="uv-calendar-item__weeks-lunar-text" :class="{
'uv-calendar-item--isDay-text':weeks.isDay,
'uv-calendar-item--isDay':calendar.fullDate === weeks.fullDate && weeks.isDay && !multiple,
'uv-calendar-item--checked':calendar.fullDate === weeks.fullDate && !weeks.isDay && !multiple,
'uv-calendar-item--before-checked':weeks.beforeRange,
'uv-calendar-item--range': weeks.range,
'uv-calendar-item--after-checked':weeks.afterRange,
'uv-calendar-item--multiple':weeks.multiple
}" :style="[itemBoxStyle]">{{todayText}}</text>
<text v-if="lunar&&!weeks.extraInfo" class="uv-calendar-item__weeks-lunar-text" :class="{
'uv-calendar-item--isDay-text':weeks.isDay,
'uv-calendar-item--isDay':calendar.fullDate === weeks.fullDate && weeks.isDay && !multiple,
'uv-calendar-item--checked':calendar.fullDate === weeks.fullDate && !weeks.isDay && !multiple,
'uv-calendar-item--before-checked':weeks.beforeRange,
'uv-calendar-item--range': weeks.range,
'uv-calendar-item--after-checked':weeks.afterRange,
'uv-calendar-item--multiple':weeks.multiple,
'uv-calendar-item--disable':weeks.disable || (weeks.extraInfo&&weeks.extraInfo.disable)
}" :style="[itemBoxStyle]">{{weeks.isDay ? todayText : (weeks.lunar.IDayCn === '初一'?weeks.lunar.IMonthCn:weeks.lunar.IDayCn)}}</text>
<text v-if="weeks.extraInfo&&weeks.extraInfo.info" class="uv-calendar-item__weeks-lunar-text" :class="{
'uv-calendar-item__weeks-lunar-text--equal': weeks.dateEqual
}" :style="[infoStyle('bottom')]">{{weeks.extraInfo.info}}</text>
</view>
</view>
</template>
<script>
import { colorGradient } from '@/uni_modules/uv-ui-tools/libs/function/colorGradient.js';
import { initVueI18n } from '@dcloudio/uni-i18n'
import i18nMessages from './i18n/index.js'
const { t } = initVueI18n(i18nMessages)
export default {
emits: ['change'],
props: {
weeks: {
type: Object,
default () {
return {}
}
},
calendar: {
type: Object,
default: () => {
return {}
}
},
selected: {
type: Array,
default: () => {
return []
}
},
lunar: {
type: Boolean,
default: false
},
color: {
type: String,
default: '#3c9cff'
},
range: {
type: Boolean,
default: false
},
multiple: {
type: Boolean,
default: false
}
},
computed: {
todayText() {
return t("uv-calender.today")
},
itemBoxStyle() {
const style = {};
if (this.multiple) { // 多选状态
if (this.weeks.multiple) {
style.backgroundColor = this.color;
style.color = '#fff';
} else if (this.weeks.isDay) {
style.color = this.color;
}
} else if (this.range) { // 范围选择
if (this.weeks.beforeRange || this.weeks.afterRange) {
style.backgroundColor = this.color;
} else if (this.weeks.range) {
style.backgroundColor = colorGradient(this.color, '#ffffff', 100)[90]
style.color = this.color;
style.opacity = 0.8;
style.borderRadius = 0;
}
} else {
if (this.weeks.isDay) {
style.color = this.color;
}
if (this.calendar.fullDate === this.weeks.fullDate) {
style.backgroundColor = this.color;
style.color = '#fff';
}
}
return style;
},
infoStyle(val) {
return val => {
const style = {};
if (!this.weeks.multiple) {
if (val == 'top') {
style.color = this.weeks.extraInfo.topinfoColor ? this.weeks.extraInfo.topinfoColor : '#606266';
} else if (val == 'bottom') {
style.color = this.weeks.extraInfo.infoColor ? this.weeks.extraInfo.infoColor : '#f56c6c';
}
if (this.weeks.range) {
style.color = this.color;
}
if (this.calendar.fullDate === this.weeks.fullDate || this.weeks.beforeRange || this.weeks.afterRange) {
style.color = this.multiple ? style.color : '#fff';
}
} else {
style.color = '#fff';
}
return style;
}
}
},
methods: {
choiceDate(weeks) {
if (this.weeks.extraInfo && this.weeks.extraInfo.disable) return;
this.$emit('change', weeks)
}
}
}
</script>
<style lang="scss" scoped>
@mixin flex($direction: row) {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: $direction;
}
$uv-font-size-base: 14px;
$uv-text-color: #333;
$uv-font-size-sm: 24rpx;
$uv-error: #f56c6c !default;
$uv-opacity-disabled: 0.3;
$uv-text-color-disable: #c0c0c0;
$uv-primary: #3c9cff !default;
$info-height: 32rpx;
.uv-calendar-item__weeks-box {
flex: 1;
@include flex(column);
justify-content: center;
align-items: center;
border-radius: 4px;
}
.uv-calendar-item__weeks-top-text {
height: $info-height;
line-height: $info-height;
font-size: $uv-font-size-sm;
}
.uv-calendar-item__weeks-box-text {
font-size: $uv-font-size-base;
color: $uv-text-color;
}
.uv-calendar-item__weeks-lunar-text {
height: $info-height;
line-height: $info-height;
font-size: $uv-font-size-sm;
color: $uv-text-color;
}
.uv-calendar-item__weeks-lunar-text--equal {
/* #ifdef H5 */
white-space: nowrap;
transform: scale(.8);
/* #endif */
/* #ifndef H5 */
font-size: 20rpx;
/* #endif */
}
.uv-calendar-item__weeks-box-item {
position: relative;
@include flex(column);
justify-content: center;
align-items: center;
width: 106rpx;
height: 56px;
}
.uv-calendar-item__weeks-box-circle {
position: absolute;
top: 5px;
right: 5px;
width: 8px;
height: 8px;
border-radius: 8px;
background-color: $uv-error;
}
.uv-calendar-item--disable {
background-color: rgba(249, 249, 249, $uv-opacity-disabled);
color: $uv-text-color-disable;
}
.uv-calendar-item--isDay-text {
color: $uv-primary;
}
.uv-calendar-item--isDay {
background-color: $uv-primary;
color: #fff;
}
.uv-calendar-item--checked {
background-color: $uv-primary;
color: #fff;
border-radius: 4px;
}
// .uv-calendar-item--range {
// background-color: $uv-primary;
// color: #fff;
// }
.uv-calendar-item--before-checked {
color: #fff;
}
.uv-calendar-item--after-checked {
color: #fff;
}
.uv-calendar-item--multiple {
background-color: $uv-primary;
color: #fff;
}
</style>
@@ -0,0 +1,546 @@
/**
* @1900-2100区间内的公历、农历互转
* @charset UTF-8
* @github https://github.com/jjonline/calendar.js
* @Author Jea杨(JJonline@JJonline.Cn)
* @Time 2014-7-21
* @Time 2016-8-13 Fixed 2033hex、Attribution Annals
* @Time 2016-9-25 Fixed lunar LeapMonth Param Bug
* @Time 2017-7-24 Fixed use getTerm Func Param Error.use solar year,NOT lunar year
* @Version 1.0.3
* @公历转农历:calendar.solar2lunar(1987,11,01); //[you can ignore params of prefix 0]
* @农历转公历:calendar.lunar2solar(1987,09,10); //[you can ignore params of prefix 0]
*/
/* eslint-disable */
var calendar = {
/**
* 农历1900-2100的润大小信息表
* @Array Of Property
* @return Hex
*/
lunarInfo: [0x04bd8, 0x04ae0, 0x0a570, 0x054d5, 0x0d260, 0x0d950, 0x16554, 0x056a0, 0x09ad0, 0x055d2, // 1900-1909
0x04ae0, 0x0a5b6, 0x0a4d0, 0x0d250, 0x1d255, 0x0b540, 0x0d6a0, 0x0ada2, 0x095b0, 0x14977, // 1910-1919
0x04970, 0x0a4b0, 0x0b4b5, 0x06a50, 0x06d40, 0x1ab54, 0x02b60, 0x09570, 0x052f2, 0x04970, // 1920-1929
0x06566, 0x0d4a0, 0x0ea50, 0x06e95, 0x05ad0, 0x02b60, 0x186e3, 0x092e0, 0x1c8d7, 0x0c950, // 1930-1939
0x0d4a0, 0x1d8a6, 0x0b550, 0x056a0, 0x1a5b4, 0x025d0, 0x092d0, 0x0d2b2, 0x0a950, 0x0b557, // 1940-1949
0x06ca0, 0x0b550, 0x15355, 0x04da0, 0x0a5b0, 0x14573, 0x052b0, 0x0a9a8, 0x0e950, 0x06aa0, // 1950-1959
0x0aea6, 0x0ab50, 0x04b60, 0x0aae4, 0x0a570, 0x05260, 0x0f263, 0x0d950, 0x05b57, 0x056a0, // 1960-1969
0x096d0, 0x04dd5, 0x04ad0, 0x0a4d0, 0x0d4d4, 0x0d250, 0x0d558, 0x0b540, 0x0b6a0, 0x195a6, // 1970-1979
0x095b0, 0x049b0, 0x0a974, 0x0a4b0, 0x0b27a, 0x06a50, 0x06d40, 0x0af46, 0x0ab60, 0x09570, // 1980-1989
0x04af5, 0x04970, 0x064b0, 0x074a3, 0x0ea50, 0x06b58, 0x05ac0, 0x0ab60, 0x096d5, 0x092e0, // 1990-1999
0x0c960, 0x0d954, 0x0d4a0, 0x0da50, 0x07552, 0x056a0, 0x0abb7, 0x025d0, 0x092d0, 0x0cab5, // 2000-2009
0x0a950, 0x0b4a0, 0x0baa4, 0x0ad50, 0x055d9, 0x04ba0, 0x0a5b0, 0x15176, 0x052b0, 0x0a930, // 2010-2019
0x07954, 0x06aa0, 0x0ad50, 0x05b52, 0x04b60, 0x0a6e6, 0x0a4e0, 0x0d260, 0x0ea65, 0x0d530, // 2020-2029
0x05aa0, 0x076a3, 0x096d0, 0x04afb, 0x04ad0, 0x0a4d0, 0x1d0b6, 0x0d250, 0x0d520, 0x0dd45, // 2030-2039
0x0b5a0, 0x056d0, 0x055b2, 0x049b0, 0x0a577, 0x0a4b0, 0x0aa50, 0x1b255, 0x06d20, 0x0ada0, // 2040-2049
/** Add By JJonline@JJonline.Cn**/
0x14b63, 0x09370, 0x049f8, 0x04970, 0x064b0, 0x168a6, 0x0ea50, 0x06b20, 0x1a6c4, 0x0aae0, // 2050-2059
0x0a2e0, 0x0d2e3, 0x0c960, 0x0d557, 0x0d4a0, 0x0da50, 0x05d55, 0x056a0, 0x0a6d0, 0x055d4, // 2060-2069
0x052d0, 0x0a9b8, 0x0a950, 0x0b4a0, 0x0b6a6, 0x0ad50, 0x055a0, 0x0aba4, 0x0a5b0, 0x052b0, // 2070-2079
0x0b273, 0x06930, 0x07337, 0x06aa0, 0x0ad50, 0x14b55, 0x04b60, 0x0a570, 0x054e4, 0x0d160, // 2080-2089
0x0e968, 0x0d520, 0x0daa0, 0x16aa6, 0x056d0, 0x04ae0, 0x0a9d4, 0x0a2d0, 0x0d150, 0x0f252, // 2090-2099
0x0d520], // 2100
/**
* 公历每个月份的天数普通表
* @Array Of Property
* @return Number
*/
solarMonth: [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31],
/**
* 天干地支之天干速查表
* @Array Of Property trans["甲","乙","丙","丁","戊","己","庚","辛","壬","癸"]
* @return Cn string
*/
Gan: ['\u7532', '\u4e59', '\u4e19', '\u4e01', '\u620a', '\u5df1', '\u5e9a', '\u8f9b', '\u58ec', '\u7678'],
/**
* 天干地支之地支速查表
* @Array Of Property
* @trans["子","丑","寅","卯","辰","巳","午","未","申","酉","戌","亥"]
* @return Cn string
*/
Zhi: ['\u5b50', '\u4e11', '\u5bc5', '\u536f', '\u8fb0', '\u5df3', '\u5348', '\u672a', '\u7533', '\u9149', '\u620c', '\u4ea5'],
/**
* 天干地支之地支速查表<=>生肖
* @Array Of Property
* @trans["鼠","牛","虎","兔","龙","蛇","马","羊","猴","鸡","狗","猪"]
* @return Cn string
*/
Animals: ['\u9f20', '\u725b', '\u864e', '\u5154', '\u9f99', '\u86c7', '\u9a6c', '\u7f8a', '\u7334', '\u9e21', '\u72d7', '\u732a'],
/**
* 24节气速查表
* @Array Of Property
* @trans["小寒","大寒","立春","雨水","惊蛰","春分","清明","谷雨","立夏","小满","芒种","夏至","小暑","大暑","立秋","处暑","白露","秋分","寒露","霜降","立冬","小雪","大雪","冬至"]
* @return Cn string
*/
solarTerm: ['\u5c0f\u5bd2', '\u5927\u5bd2', '\u7acb\u6625', '\u96e8\u6c34', '\u60ca\u86f0', '\u6625\u5206', '\u6e05\u660e', '\u8c37\u96e8', '\u7acb\u590f', '\u5c0f\u6ee1', '\u8292\u79cd', '\u590f\u81f3', '\u5c0f\u6691', '\u5927\u6691', '\u7acb\u79cb', '\u5904\u6691', '\u767d\u9732', '\u79cb\u5206', '\u5bd2\u9732', '\u971c\u964d', '\u7acb\u51ac', '\u5c0f\u96ea', '\u5927\u96ea', '\u51ac\u81f3'],
/**
* 1900-2100各年的24节气日期速查表
* @Array Of Property
* @return 0x string For splice
*/
sTermInfo: ['9778397bd097c36b0b6fc9274c91aa', '97b6b97bd19801ec9210c965cc920e', '97bcf97c3598082c95f8c965cc920f',
'97bd0b06bdb0722c965ce1cfcc920f', 'b027097bd097c36b0b6fc9274c91aa', '97b6b97bd19801ec9210c965cc920e',
'97bcf97c359801ec95f8c965cc920f', '97bd0b06bdb0722c965ce1cfcc920f', 'b027097bd097c36b0b6fc9274c91aa',
'97b6b97bd19801ec9210c965cc920e', '97bcf97c359801ec95f8c965cc920f', '97bd0b06bdb0722c965ce1cfcc920f',
'b027097bd097c36b0b6fc9274c91aa', '9778397bd19801ec9210c965cc920e', '97b6b97bd19801ec95f8c965cc920f',
'97bd09801d98082c95f8e1cfcc920f', '97bd097bd097c36b0b6fc9210c8dc2', '9778397bd197c36c9210c9274c91aa',
'97b6b97bd19801ec95f8c965cc920e', '97bd09801d98082c95f8e1cfcc920f', '97bd097bd097c36b0b6fc9210c8dc2',
'9778397bd097c36c9210c9274c91aa', '97b6b97bd19801ec95f8c965cc920e', '97bcf97c3598082c95f8e1cfcc920f',
'97bd097bd097c36b0b6fc9210c8dc2', '9778397bd097c36c9210c9274c91aa', '97b6b97bd19801ec9210c965cc920e',
'97bcf97c3598082c95f8c965cc920f', '97bd097bd097c35b0b6fc920fb0722', '9778397bd097c36b0b6fc9274c91aa',
'97b6b97bd19801ec9210c965cc920e', '97bcf97c3598082c95f8c965cc920f', '97bd097bd097c35b0b6fc920fb0722',
'9778397bd097c36b0b6fc9274c91aa', '97b6b97bd19801ec9210c965cc920e', '97bcf97c359801ec95f8c965cc920f',
'97bd097bd097c35b0b6fc920fb0722', '9778397bd097c36b0b6fc9274c91aa', '97b6b97bd19801ec9210c965cc920e',
'97bcf97c359801ec95f8c965cc920f', '97bd097bd097c35b0b6fc920fb0722', '9778397bd097c36b0b6fc9274c91aa',
'97b6b97bd19801ec9210c965cc920e', '97bcf97c359801ec95f8c965cc920f', '97bd097bd07f595b0b6fc920fb0722',
'9778397bd097c36b0b6fc9210c8dc2', '9778397bd19801ec9210c9274c920e', '97b6b97bd19801ec95f8c965cc920f',
'97bd07f5307f595b0b0bc920fb0722', '7f0e397bd097c36b0b6fc9210c8dc2', '9778397bd097c36c9210c9274c920e',
'97b6b97bd19801ec95f8c965cc920f', '97bd07f5307f595b0b0bc920fb0722', '7f0e397bd097c36b0b6fc9210c8dc2',
'9778397bd097c36c9210c9274c91aa', '97b6b97bd19801ec9210c965cc920e', '97bd07f1487f595b0b0bc920fb0722',
'7f0e397bd097c36b0b6fc9210c8dc2', '9778397bd097c36b0b6fc9274c91aa', '97b6b97bd19801ec9210c965cc920e',
'97bcf7f1487f595b0b0bb0b6fb0722', '7f0e397bd097c35b0b6fc920fb0722', '9778397bd097c36b0b6fc9274c91aa',
'97b6b97bd19801ec9210c965cc920e', '97bcf7f1487f595b0b0bb0b6fb0722', '7f0e397bd097c35b0b6fc920fb0722',
'9778397bd097c36b0b6fc9274c91aa', '97b6b97bd19801ec9210c965cc920e', '97bcf7f1487f531b0b0bb0b6fb0722',
'7f0e397bd097c35b0b6fc920fb0722', '9778397bd097c36b0b6fc9274c91aa', '97b6b97bd19801ec9210c965cc920e',
'97bcf7f1487f531b0b0bb0b6fb0722', '7f0e397bd07f595b0b6fc920fb0722', '9778397bd097c36b0b6fc9274c91aa',
'97b6b97bd19801ec9210c9274c920e', '97bcf7f0e47f531b0b0bb0b6fb0722', '7f0e397bd07f595b0b0bc920fb0722',
'9778397bd097c36b0b6fc9210c91aa', '97b6b97bd197c36c9210c9274c920e', '97bcf7f0e47f531b0b0bb0b6fb0722',
'7f0e397bd07f595b0b0bc920fb0722', '9778397bd097c36b0b6fc9210c8dc2', '9778397bd097c36c9210c9274c920e',
'97b6b7f0e47f531b0723b0b6fb0722', '7f0e37f5307f595b0b0bc920fb0722', '7f0e397bd097c36b0b6fc9210c8dc2',
'9778397bd097c36b0b70c9274c91aa', '97b6b7f0e47f531b0723b0b6fb0721', '7f0e37f1487f595b0b0bb0b6fb0722',
'7f0e397bd097c35b0b6fc9210c8dc2', '9778397bd097c36b0b6fc9274c91aa', '97b6b7f0e47f531b0723b0b6fb0721',
'7f0e27f1487f595b0b0bb0b6fb0722', '7f0e397bd097c35b0b6fc920fb0722', '9778397bd097c36b0b6fc9274c91aa',
'97b6b7f0e47f531b0723b0b6fb0721', '7f0e27f1487f531b0b0bb0b6fb0722', '7f0e397bd097c35b0b6fc920fb0722',
'9778397bd097c36b0b6fc9274c91aa', '97b6b7f0e47f531b0723b0b6fb0721', '7f0e27f1487f531b0b0bb0b6fb0722',
'7f0e397bd097c35b0b6fc920fb0722', '9778397bd097c36b0b6fc9274c91aa', '97b6b7f0e47f531b0723b0b6fb0721',
'7f0e27f1487f531b0b0bb0b6fb0722', '7f0e397bd07f595b0b0bc920fb0722', '9778397bd097c36b0b6fc9274c91aa',
'97b6b7f0e47f531b0723b0787b0721', '7f0e27f0e47f531b0b0bb0b6fb0722', '7f0e397bd07f595b0b0bc920fb0722',
'9778397bd097c36b0b6fc9210c91aa', '97b6b7f0e47f149b0723b0787b0721', '7f0e27f0e47f531b0723b0b6fb0722',
'7f0e397bd07f595b0b0bc920fb0722', '9778397bd097c36b0b6fc9210c8dc2', '977837f0e37f149b0723b0787b0721',
'7f07e7f0e47f531b0723b0b6fb0722', '7f0e37f5307f595b0b0bc920fb0722', '7f0e397bd097c35b0b6fc9210c8dc2',
'977837f0e37f14998082b0787b0721', '7f07e7f0e47f531b0723b0b6fb0721', '7f0e37f1487f595b0b0bb0b6fb0722',
'7f0e397bd097c35b0b6fc9210c8dc2', '977837f0e37f14998082b0787b06bd', '7f07e7f0e47f531b0723b0b6fb0721',
'7f0e27f1487f531b0b0bb0b6fb0722', '7f0e397bd097c35b0b6fc920fb0722', '977837f0e37f14998082b0787b06bd',
'7f07e7f0e47f531b0723b0b6fb0721', '7f0e27f1487f531b0b0bb0b6fb0722', '7f0e397bd097c35b0b6fc920fb0722',
'977837f0e37f14998082b0787b06bd', '7f07e7f0e47f531b0723b0b6fb0721', '7f0e27f1487f531b0b0bb0b6fb0722',
'7f0e397bd07f595b0b0bc920fb0722', '977837f0e37f14998082b0787b06bd', '7f07e7f0e47f531b0723b0b6fb0721',
'7f0e27f1487f531b0b0bb0b6fb0722', '7f0e397bd07f595b0b0bc920fb0722', '977837f0e37f14998082b0787b06bd',
'7f07e7f0e47f149b0723b0787b0721', '7f0e27f0e47f531b0b0bb0b6fb0722', '7f0e397bd07f595b0b0bc920fb0722',
'977837f0e37f14998082b0723b06bd', '7f07e7f0e37f149b0723b0787b0721', '7f0e27f0e47f531b0723b0b6fb0722',
'7f0e397bd07f595b0b0bc920fb0722', '977837f0e37f14898082b0723b02d5', '7ec967f0e37f14998082b0787b0721',
'7f07e7f0e47f531b0723b0b6fb0722', '7f0e37f1487f595b0b0bb0b6fb0722', '7f0e37f0e37f14898082b0723b02d5',
'7ec967f0e37f14998082b0787b0721', '7f07e7f0e47f531b0723b0b6fb0722', '7f0e37f1487f531b0b0bb0b6fb0722',
'7f0e37f0e37f14898082b0723b02d5', '7ec967f0e37f14998082b0787b06bd', '7f07e7f0e47f531b0723b0b6fb0721',
'7f0e37f1487f531b0b0bb0b6fb0722', '7f0e37f0e37f14898082b072297c35', '7ec967f0e37f14998082b0787b06bd',
'7f07e7f0e47f531b0723b0b6fb0721', '7f0e27f1487f531b0b0bb0b6fb0722', '7f0e37f0e37f14898082b072297c35',
'7ec967f0e37f14998082b0787b06bd', '7f07e7f0e47f531b0723b0b6fb0721', '7f0e27f1487f531b0b0bb0b6fb0722',
'7f0e37f0e366aa89801eb072297c35', '7ec967f0e37f14998082b0787b06bd', '7f07e7f0e47f149b0723b0787b0721',
'7f0e27f1487f531b0b0bb0b6fb0722', '7f0e37f0e366aa89801eb072297c35', '7ec967f0e37f14998082b0723b06bd',
'7f07e7f0e47f149b0723b0787b0721', '7f0e27f0e47f531b0723b0b6fb0722', '7f0e37f0e366aa89801eb072297c35',
'7ec967f0e37f14998082b0723b06bd', '7f07e7f0e37f14998083b0787b0721', '7f0e27f0e47f531b0723b0b6fb0722',
'7f0e37f0e366aa89801eb072297c35', '7ec967f0e37f14898082b0723b02d5', '7f07e7f0e37f14998082b0787b0721',
'7f07e7f0e47f531b0723b0b6fb0722', '7f0e36665b66aa89801e9808297c35', '665f67f0e37f14898082b0723b02d5',
'7ec967f0e37f14998082b0787b0721', '7f07e7f0e47f531b0723b0b6fb0722', '7f0e36665b66a449801e9808297c35',
'665f67f0e37f14898082b0723b02d5', '7ec967f0e37f14998082b0787b06bd', '7f07e7f0e47f531b0723b0b6fb0721',
'7f0e36665b66a449801e9808297c35', '665f67f0e37f14898082b072297c35', '7ec967f0e37f14998082b0787b06bd',
'7f07e7f0e47f531b0723b0b6fb0721', '7f0e26665b66a449801e9808297c35', '665f67f0e37f1489801eb072297c35',
'7ec967f0e37f14998082b0787b06bd', '7f07e7f0e47f531b0723b0b6fb0721', '7f0e27f1487f531b0b0bb0b6fb0722'],
/**
* 数字转中文速查表
* @Array Of Property
* @trans ['日','一','二','三','四','五','六','七','八','九','十']
* @return Cn string
*/
nStr1: ['\u65e5', '\u4e00', '\u4e8c', '\u4e09', '\u56db', '\u4e94', '\u516d', '\u4e03', '\u516b', '\u4e5d', '\u5341'],
/**
* 日期转农历称呼速查表
* @Array Of Property
* @trans ['初','十','廿','卅']
* @return Cn string
*/
nStr2: ['\u521d', '\u5341', '\u5eff', '\u5345'],
/**
* 月份转农历称呼速查表
* @Array Of Property
* @trans ['正','一','二','三','四','五','六','七','八','九','十','冬','腊']
* @return Cn string
*/
nStr3: ['\u6b63', '\u4e8c', '\u4e09', '\u56db', '\u4e94', '\u516d', '\u4e03', '\u516b', '\u4e5d', '\u5341', '\u51ac', '\u814a'],
/**
* 返回农历y年一整年的总天数
* @param lunar Year
* @return Number
* @eg:var count = calendar.lYearDays(1987) ;//count=387
*/
lYearDays: function (y) {
var i; var sum = 348
for (i = 0x8000; i > 0x8; i >>= 1) { sum += (this.lunarInfo[y - 1900] & i) ? 1 : 0 }
return (sum + this.leapDays(y))
},
/**
* 返回农历y年闰月是哪个月;若y年没有闰月 则返回0
* @param lunar Year
* @return Number (0-12)
* @eg:var leapMonth = calendar.leapMonth(1987) ;//leapMonth=6
*/
leapMonth: function (y) { // 闰字编码 \u95f0
return (this.lunarInfo[y - 1900] & 0xf)
},
/**
* 返回农历y年闰月的天数 若该年没有闰月则返回0
* @param lunar Year
* @return Number (0、29、30)
* @eg:var leapMonthDay = calendar.leapDays(1987) ;//leapMonthDay=29
*/
leapDays: function (y) {
if (this.leapMonth(y)) {
return ((this.lunarInfo[y - 1900] & 0x10000) ? 30 : 29)
}
return (0)
},
/**
* 返回农历y年m月(非闰月)的总天数,计算m为闰月时的天数请使用leapDays方法
* @param lunar Year
* @return Number (-1、29、30)
* @eg:var MonthDay = calendar.monthDays(1987,9) ;//MonthDay=29
*/
monthDays: function (y, m) {
if (m > 12 || m < 1) { return -1 }// 月份参数从1至12,参数错误返回-1
return ((this.lunarInfo[y - 1900] & (0x10000 >> m)) ? 30 : 29)
},
/**
* 返回公历(!)y年m月的天数
* @param solar Year
* @return Number (-1、28、29、30、31)
* @eg:var solarMonthDay = calendar.leapDays(1987) ;//solarMonthDay=30
*/
solarDays: function (y, m) {
if (m > 12 || m < 1) { return -1 } // 若参数错误 返回-1
var ms = m - 1
if (ms == 1) { // 2月份的闰平规律测算后确认返回28或29
return (((y % 4 == 0) && (y % 100 != 0) || (y % 400 == 0)) ? 29 : 28)
} else {
return (this.solarMonth[ms])
}
},
/**
* 农历年份转换为干支纪年
* @param lYear 农历年的年份数
* @return Cn string
*/
toGanZhiYear: function (lYear) {
var ganKey = (lYear - 3) % 10
var zhiKey = (lYear - 3) % 12
if (ganKey == 0) ganKey = 10// 如果余数为0则为最后一个天干
if (zhiKey == 0) zhiKey = 12// 如果余数为0则为最后一个地支
return this.Gan[ganKey - 1] + this.Zhi[zhiKey - 1]
},
/**
* 公历月、日判断所属星座
* @param cMonth [description]
* @param cDay [description]
* @return Cn string
*/
toAstro: function (cMonth, cDay) {
var s = '\u9b54\u7faf\u6c34\u74f6\u53cc\u9c7c\u767d\u7f8a\u91d1\u725b\u53cc\u5b50\u5de8\u87f9\u72ee\u5b50\u5904\u5973\u5929\u79e4\u5929\u874e\u5c04\u624b\u9b54\u7faf'
var arr = [20, 19, 21, 21, 21, 22, 23, 23, 23, 23, 22, 22]
return s.substr(cMonth * 2 - (cDay < arr[cMonth - 1] ? 2 : 0), 2) + '\u5ea7'// 座
},
/**
* 传入offset偏移量返回干支
* @param offset 相对甲子的偏移量
* @return Cn string
*/
toGanZhi: function (offset) {
return this.Gan[offset % 10] + this.Zhi[offset % 12]
},
/**
* 传入公历(!)y年获得该年第n个节气的公历日期
* @param y公历年(1900-2100);n二十四节气中的第几个节气(1~24);从n=1(小寒)算起
* @return day Number
* @eg:var _24 = calendar.getTerm(1987,3) ;//_24=4;意即1987年2月4日立春
*/
getTerm: function (y, n) {
if (y < 1900 || y > 2100) { return -1 }
if (n < 1 || n > 24) { return -1 }
var _table = this.sTermInfo[y - 1900]
var _info = [
parseInt('0x' + _table.substr(0, 5)).toString(),
parseInt('0x' + _table.substr(5, 5)).toString(),
parseInt('0x' + _table.substr(10, 5)).toString(),
parseInt('0x' + _table.substr(15, 5)).toString(),
parseInt('0x' + _table.substr(20, 5)).toString(),
parseInt('0x' + _table.substr(25, 5)).toString()
]
var _calday = [
_info[0].substr(0, 1),
_info[0].substr(1, 2),
_info[0].substr(3, 1),
_info[0].substr(4, 2),
_info[1].substr(0, 1),
_info[1].substr(1, 2),
_info[1].substr(3, 1),
_info[1].substr(4, 2),
_info[2].substr(0, 1),
_info[2].substr(1, 2),
_info[2].substr(3, 1),
_info[2].substr(4, 2),
_info[3].substr(0, 1),
_info[3].substr(1, 2),
_info[3].substr(3, 1),
_info[3].substr(4, 2),
_info[4].substr(0, 1),
_info[4].substr(1, 2),
_info[4].substr(3, 1),
_info[4].substr(4, 2),
_info[5].substr(0, 1),
_info[5].substr(1, 2),
_info[5].substr(3, 1),
_info[5].substr(4, 2)
]
return parseInt(_calday[n - 1])
},
/**
* 传入农历数字月份返回汉语通俗表示法
* @param lunar month
* @return Cn string
* @eg:var cnMonth = calendar.toChinaMonth(12) ;//cnMonth='腊月'
*/
toChinaMonth: function (m) { // 月 => \u6708
if (m > 12 || m < 1) { return -1 } // 若参数错误 返回-1
var s = this.nStr3[m - 1]
s += '\u6708'// 加上月字
return s
},
/**
* 传入农历日期数字返回汉字表示法
* @param lunar day
* @return Cn string
* @eg:var cnDay = calendar.toChinaDay(21) ;//cnMonth='廿一'
*/
toChinaDay: function (d) { // 日 => \u65e5
var s
switch (d) {
case 10:
s = '\u521d\u5341'; break
case 20:
s = '\u4e8c\u5341'; break
break
case 30:
s = '\u4e09\u5341'; break
break
default :
s = this.nStr2[Math.floor(d / 10)]
s += this.nStr1[d % 10]
}
return (s)
},
/**
* 年份转生肖[!仅能大致转换] => 精确划分生肖分界线是“立春”
* @param y year
* @return Cn string
* @eg:var animal = calendar.getAnimal(1987) ;//animal='兔'
*/
getAnimal: function (y) {
return this.Animals[(y - 4) % 12]
},
/**
* 传入阳历年月日获得详细的公历、农历object信息 <=>JSON
* @param y solar year
* @param m solar month
* @param d solar day
* @return JSON object
* @eg:console.log(calendar.solar2lunar(1987,11,01));
*/
solar2lunar: function (y, m, d) { // 参数区间1900.1.31~2100.12.31
// 年份限定、上限
if (y < 1900 || y > 2100) {
return -1// undefined转换为数字变为NaN
}
// 公历传参最下限
if (y == 1900 && m == 1 && d < 31) {
return -1
}
// 未传参 获得当天
if (!y) {
var objDate = new Date()
} else {
var objDate = new Date(y, parseInt(m) - 1, d)
}
var i; var leap = 0; var temp = 0
// 修正ymd参数
var y = objDate.getFullYear()
var m = objDate.getMonth() + 1
var d = objDate.getDate()
var offset = (Date.UTC(objDate.getFullYear(), objDate.getMonth(), objDate.getDate()) - Date.UTC(1900, 0, 31)) / 86400000
for (i = 1900; i < 2101 && offset > 0; i++) {
temp = this.lYearDays(i)
offset -= temp
}
if (offset < 0) {
offset += temp; i--
}
// 是否今天
var isTodayObj = new Date()
var isToday = false
if (isTodayObj.getFullYear() == y && isTodayObj.getMonth() + 1 == m && isTodayObj.getDate() == d) {
isToday = true
}
// 星期几
var nWeek = objDate.getDay()
var cWeek = this.nStr1[nWeek]
// 数字表示周几顺应天朝周一开始的惯例
if (nWeek == 0) {
nWeek = 7
}
// 农历年
var year = i
var leap = this.leapMonth(i) // 闰哪个月
var isLeap = false
// 效验闰月
for (i = 1; i < 13 && offset > 0; i++) {
// 闰月
if (leap > 0 && i == (leap + 1) && isLeap == false) {
--i
isLeap = true; temp = this.leapDays(year) // 计算农历闰月天数
} else {
temp = this.monthDays(year, i)// 计算农历普通月天数
}
// 解除闰月
if (isLeap == true && i == (leap + 1)) { isLeap = false }
offset -= temp
}
// 闰月导致数组下标重叠取反
if (offset == 0 && leap > 0 && i == leap + 1) {
if (isLeap) {
isLeap = false
} else {
isLeap = true; --i
}
}
if (offset < 0) {
offset += temp; --i
}
// 农历月
var month = i
// 农历日
var day = offset + 1
// 天干地支处理
var sm = m - 1
var gzY = this.toGanZhiYear(year)
// 当月的两个节气
// bugfix-2017-7-24 11:03:38 use lunar Year Param `y` Not `year`
var firstNode = this.getTerm(y, (m * 2 - 1))// 返回当月「节」为几日开始
var secondNode = this.getTerm(y, (m * 2))// 返回当月「节」为几日开始
// 依据12节气修正干支月
var gzM = this.toGanZhi((y - 1900) * 12 + m + 11)
if (d >= firstNode) {
gzM = this.toGanZhi((y - 1900) * 12 + m + 12)
}
// 传入的日期的节气与否
var isTerm = false
var Term = null
if (firstNode == d) {
isTerm = true
Term = this.solarTerm[m * 2 - 2]
}
if (secondNode == d) {
isTerm = true
Term = this.solarTerm[m * 2 - 1]
}
// 日柱 当月一日与 1900/1/1 相差天数
var dayCyclical = Date.UTC(y, sm, 1, 0, 0, 0, 0) / 86400000 + 25567 + 10
var gzD = this.toGanZhi(dayCyclical + d - 1)
// 该日期所属的星座
var astro = this.toAstro(m, d)
return { 'lYear': year, 'lMonth': month, 'lDay': day, 'Animal': this.getAnimal(year), 'IMonthCn': (isLeap ? '\u95f0' : '') + this.toChinaMonth(month), 'IDayCn': this.toChinaDay(day), 'cYear': y, 'cMonth': m, 'cDay': d, 'gzYear': gzY, 'gzMonth': gzM, 'gzDay': gzD, 'isToday': isToday, 'isLeap': isLeap, 'nWeek': nWeek, 'ncWeek': '\u661f\u671f' + cWeek, 'isTerm': isTerm, 'Term': Term, 'astro': astro }
},
/**
* 传入农历年月日以及传入的月份是否闰月获得详细的公历、农历object信息 <=>JSON
* @param y lunar year
* @param m lunar month
* @param d lunar day
* @param isLeapMonth lunar month is leap or not.[如果是农历闰月第四个参数赋值true即可]
* @return JSON object
* @eg:console.log(calendar.lunar2solar(1987,9,10));
*/
lunar2solar: function (y, m, d, isLeapMonth) { // 参数区间1900.1.31~2100.12.1
var isLeapMonth = !!isLeapMonth
var leapOffset = 0
var leapMonth = this.leapMonth(y)
var leapDay = this.leapDays(y)
if (isLeapMonth && (leapMonth != m)) { return -1 }// 传参要求计算该闰月公历 但该年得出的闰月与传参的月份并不同
if (y == 2100 && m == 12 && d > 1 || y == 1900 && m == 1 && d < 31) { return -1 }// 超出了最大极限值
var day = this.monthDays(y, m)
var _day = day
// bugFix 2016-9-25
// if month is leap, _day use leapDays method
if (isLeapMonth) {
_day = this.leapDays(y, m)
}
if (y < 1900 || y > 2100 || d > _day) { return -1 }// 参数合法性效验
// 计算农历的时间差
var offset = 0
for (var i = 1900; i < y; i++) {
offset += this.lYearDays(i)
}
var leap = 0; var isAdd = false
for (var i = 1; i < m; i++) {
leap = this.leapMonth(y)
if (!isAdd) { // 处理闰月
if (leap <= i && leap > 0) {
offset += this.leapDays(y); isAdd = true
}
}
offset += this.monthDays(y, i)
}
// 转换闰月农历 需补充该年闰月的前一个月的时差
if (isLeapMonth) { offset += day }
// 1900年农历正月一日的公历时间为1900年1月30日0时0分0秒(该时间也是本农历的最开始起始点)
var stmap = Date.UTC(1900, 1, 30, 0, 0, 0)
var calObj = new Date((offset + d - 31) * 86400000 + stmap)
var cY = calObj.getUTCFullYear()
var cM = calObj.getUTCMonth() + 1
var cD = calObj.getUTCDate()
return this.solar2lunar(cY, cM, cD)
}
}
export default calendar
@@ -0,0 +1,12 @@
{
"uv-calender.ok": "ok",
"uv-calender.cancel": "cancel",
"uv-calender.today": "today",
"uv-calender.MON": "MON",
"uv-calender.TUE": "TUE",
"uv-calender.WED": "WED",
"uv-calender.THU": "THU",
"uv-calender.FRI": "FRI",
"uv-calender.SAT": "SAT",
"uv-calender.SUN": "SUN"
}
@@ -0,0 +1,8 @@
import en from './en.json'
import zhHans from './zh-Hans.json'
import zhHant from './zh-Hant.json'
export default {
en,
'zh-Hans': zhHans,
'zh-Hant': zhHant
}
@@ -0,0 +1,12 @@
{
"uv-calender.ok": "确定",
"uv-calender.cancel": "取消",
"uv-calender.today": "今日",
"uv-calender.SUN": "日",
"uv-calender.MON": "一",
"uv-calender.TUE": "二",
"uv-calender.WED": "三",
"uv-calender.THU": "四",
"uv-calender.FRI": "五",
"uv-calender.SAT": "六"
}
@@ -0,0 +1,12 @@
{
"uv-calender.ok": "確定",
"uv-calender.cancel": "取消",
"uv-calender.today": "今日",
"uv-calender.SUN": "日",
"uv-calender.MON": "一",
"uv-calender.TUE": "二",
"uv-calender.WED": "三",
"uv-calender.THU": "四",
"uv-calender.FRI": "五",
"uv-calender.SAT": "六"
}
@@ -0,0 +1,435 @@
import CALENDAR from './calendar.js'
class Calendar {
constructor({
date,
selected,
startDate,
endDate,
range,
multiple,
allowSameDay
} = {}) {
// 当前日期
this.date = this.getDate(new Date()) // 当前初入日期
// 打点信息
this.selected = selected || [];
// 范围开始
this.startDate = startDate
// 范围结束
this.endDate = endDate
this.range = range
this.multiple = multiple
this.allowSameDay = allowSameDay
// 多选状态
this.cleanRangeStatus()
// 范围状态
this.cleanMultipleStatus()
// 每周日期
this.weeks = {}
// this._getWeek(this.date.fullDate)
}
/**
* 设置日期
* @param {Object} date
*/
setDate(date, status) {
if (this.range && status == 'init') {
this.cleanRangeStatus();
if (Array.isArray(date)) {
this.rangeStatus.before = date[0];
this.rangeStatus.after = date.length > 1 ? date[date.length - 1] : '';
if (this.rangeStatus.after && this.dateCompare(this.rangeStatus.before, this.rangeStatus.after)) {
this.rangeStatus.data = this.geDateAll(this.rangeStatus.before, this.rangeStatus.after)
}
this.selectDate = this.getDate(date[0])
this._getWeek(this.selectDate.fullDate)
} else {
this.selectDate = this.getDate(date)
this.rangeStatus.before = this.selectDate.fullDate;
this._getWeek(this.selectDate.fullDate)
}
} else if (this.multiple && status == 'init') {
this.cleanMultipleStatus();
if (Array.isArray(date)) {
this.multipleStatus.data = date;
this.selectDate = this.getDate(date[0])
this._getWeek(this.selectDate.fullDate)
} else {
this.selectDate = this.getDate(date)
this.multipleStatus.data = [this.selectDate.fullDate];
this._getWeek(this.selectDate.fullDate)
}
} else {
if (Array.isArray(date)) {
this.selectDate = this.getDate(date[0])
this._getWeek(this.selectDate.fullDate)
} else {
this.selectDate = this.getDate(date)
this._getWeek(this.selectDate.fullDate)
}
}
}
/**
* 清理多选状态
*/
cleanRangeStatus() {
this.rangeStatus = {
before: '',
after: '',
data: []
}
}
/**
* 清理多选状态
*/
cleanMultipleStatus() {
this.multipleStatus = {
data: []
}
}
/**
* 重置开始日期
*/
resetSatrtDate(startDate) {
// 范围开始
this.startDate = startDate
}
/**
* 重置结束日期
*/
resetEndDate(endDate) {
// 范围结束
this.endDate = endDate
}
/**
* 获取任意时间
*/
getDate(date, AddDayCount = 0, str = 'day') {
if (!date) {
date = new Date()
}
if (typeof date !== 'object') {
date = date.replace(/-/g, '/')
}
const dd = new Date(date)
switch (str) {
case 'day':
dd.setDate(dd.getDate() + AddDayCount) // 获取AddDayCount天后的日期
break
case 'month':
if (dd.getDate() === 31 && AddDayCount > 0) {
dd.setDate(dd.getDate() + AddDayCount)
} else {
const preMonth = dd.getMonth()
dd.setMonth(preMonth + AddDayCount) // 获取AddDayCount天后的日期
const nextMonth = dd.getMonth()
// 处理 pre 切换月份目标月份为2月没有当前日(30 31) 切换错误问题
if (AddDayCount < 0 && preMonth !== 0 && nextMonth - preMonth > AddDayCount) {
dd.setMonth(nextMonth + (nextMonth - preMonth + AddDayCount))
}
// 处理 next 切换月份目标月份为2月没有当前日(30 31) 切换错误问题
if (AddDayCount > 0 && nextMonth - preMonth > AddDayCount) {
dd.setMonth(nextMonth - (nextMonth - preMonth - AddDayCount))
}
}
break
case 'year':
dd.setFullYear(dd.getFullYear() + AddDayCount) // 获取AddDayCount天后的日期
break
}
const y = dd.getFullYear()
const m = dd.getMonth() + 1 < 10 ? '0' + (dd.getMonth() + 1) : dd.getMonth() + 1 // 获取当前月份的日期,不足10补0
const d = dd.getDate() < 10 ? '0' + dd.getDate() : dd.getDate() // 获取当前几号,不足10补0
return {
fullDate: y + '-' + m + '-' + d,
year: y,
month: m,
date: d,
day: dd.getDay()
}
}
/**
* 获取上月剩余天数
*/
_getLastMonthDays(firstDay, full) {
let dateArr = []
for (let i = firstDay; i > 0; i--) {
const beforeDate = new Date(full.year, full.month - 1, -i + 1).getDate()
dateArr.push({
date: beforeDate,
month: full.month - 1,
lunar: this.getlunar(full.year, full.month - 1, beforeDate),
disable: true
})
}
return dateArr
}
/**
* 获取本月天数
*/
_currentMonthDys(dateData, full) {
let dateArr = []
let fullDate = this.date.fullDate
for (let i = 1; i <= dateData; i++) {
let nowDate = full.year + '-' + (full.month < 10 ? full.month : full.month) + '-' + (i < 10 ? '0' + i : i)
// 是否今天
let isDay = fullDate === nowDate
// 获取打点信息
let info = this.selected && this.selected.find((item) => {
if (this.dateEqual(nowDate, item.date)) {
return item
}
})
// 日期禁用
let disableBefore = true
let disableAfter = true
if (this.startDate) {
// let dateCompBefore = this.dateCompare(this.startDate, fullDate)
// disableBefore = this.dateCompare(dateCompBefore ? this.startDate : fullDate, nowDate)
disableBefore = this.dateCompare(this.startDate, nowDate)
}
if (this.endDate) {
// let dateCompAfter = this.dateCompare(fullDate, this.endDate)
// disableAfter = this.dateCompare(nowDate, dateCompAfter ? this.endDate : fullDate)
disableAfter = this.dateCompare(nowDate, this.endDate)
}
let ranges = this.rangeStatus.data
let checked = false
let rangesStatus = -1
if (this.range) {
if (ranges) {
rangesStatus = ranges.findIndex((item) => {
return this.dateEqual(item, nowDate)
})
}
if (rangesStatus !== -1) {
checked = true
}
}
let multiples = this.multipleStatus.data
let checked_multiple = false
let multiplesStatus = -1
if (this.multiple) {
if (multiples) {
multiplesStatus = multiples.findIndex((item) => {
return this.dateEqual(item, nowDate)
})
}
if (multiplesStatus !== -1) {
checked_multiple = true
}
}
let data = {
fullDate: nowDate,
year: full.year,
date: i,
range: this.range ? checked : false,
multiple: this.multiple ? checked_multiple : false,
beforeRange: this.dateEqual(this.rangeStatus.before, nowDate),
afterRange: this.dateEqual(this.rangeStatus.after, nowDate),
dateEqual: this.range && checked && this.dateEqual(this.rangeStatus.before, this.rangeStatus.after),
month: full.month,
lunar: this.getlunar(full.year, full.month, i),
disable: !(disableBefore && disableAfter),
isDay
}
if (info) {
data.extraInfo = info
}
dateArr.push(data)
}
return dateArr
}
/**
* 获取下月天数
*/
_getNextMonthDays(surplus, full) {
let dateArr = []
for (let i = 1; i < surplus + 1; i++) {
dateArr.push({
date: i,
month: Number(full.month) + 1,
lunar: this.getlunar(full.year, Number(full.month) + 1, i),
disable: true
})
}
return dateArr
}
/**
* 获取当前日期详情
* @param {Object} date
*/
getInfo(date) {
if (!date) {
date = new Date()
} else if (Array.isArray(date)) {
date = date[0]
}
const dateInfo = this.canlender.find(item => item.fullDate === this.getDate(date).fullDate)
return dateInfo
}
/**
* 比较时间大小
*/
dateCompare(startDate, endDate) {
// 计算截止时间
startDate = new Date(startDate.replace('-', '/').replace('-', '/'))
// 计算详细项的截止时间
endDate = new Date(endDate.replace('-', '/').replace('-', '/'))
if (startDate <= endDate) {
return true
} else {
return false
}
}
/**
* 比较时间是否相等
*/
dateEqual(before, after) {
// 计算截止时间
before = new Date(before.replace('-', '/').replace('-', '/'))
// 计算详细项的截止时间
after = new Date(after.replace('-', '/').replace('-', '/'))
if (before.getTime() - after.getTime() === 0) {
return true
} else {
return false
}
}
/**
* 比较after时间是否大于before时间
*/
dateAfterLgBefore(before, after) {
// 计算截止时间
before = new Date(before.replace('-', '/').replace('-', '/'))
// 计算详细项的截止时间
after = new Date(after.replace('-', '/').replace('-', '/'))
if (after.getTime() - before.getTime() > 0) {
return true
} else {
return false
}
}
/**
* 获取日期范围内所有日期
* @param {Object} begin
* @param {Object} end
*/
geDateAll(begin, end) {
var arr = []
var ab = begin.split('-')
var ae = end.split('-')
var db = new Date()
db.setFullYear(ab[0], ab[1] - 1, ab[2])
var de = new Date()
de.setFullYear(ae[0], ae[1] - 1, ae[2])
var unixDb = db.getTime() - 24 * 60 * 60 * 1000
var unixDe = de.getTime() - 24 * 60 * 60 * 1000
for (var k = unixDb; k <= unixDe;) {
k = k + 24 * 60 * 60 * 1000
arr.push(this.getDate(new Date(parseInt(k))).fullDate)
}
return arr
}
/**
* 计算阴历日期显示
*/
getlunar(year, month, date) {
return CALENDAR.solar2lunar(year, month, date)
}
/**
* 设置打点
*/
setSelectInfo(data, value) {
this.selected = value
this._getWeek(data)
}
/**
* 获取多选状态
*/
setMultiple(fullDate) {
if (!this.multiple) return
let multiples = this.multipleStatus.data;
const findIndex = multiples.findIndex(item => this.dateEqual(fullDate, item));
if (findIndex < 0) {
this.multipleStatus.data = this.multipleStatus.data.concat([fullDate]);
} else {
this.multipleStatus.data.splice(findIndex, 1);
}
this._getWeek(fullDate)
}
/**
* 获取范围状态
*/
setRange(fullDate) {
let {
before,
after
} = this.rangeStatus
if (!this.range) return
if (before && after) {
this.cleanRangeStatus();
this.rangeStatus.before = fullDate
} else {
if (!before) {
this.rangeStatus.before = fullDate
} else {
if (this.allowSameDay && this.dateEqual(before, fullDate)) {
this.rangeStatus.after = fullDate
} else if (!this.dateAfterLgBefore(this.rangeStatus.before, fullDate)) {
this.cleanRangeStatus();
this.rangeStatus.before = fullDate
this._getWeek(fullDate)
return;
}
this.rangeStatus.after = fullDate
if (this.dateCompare(this.rangeStatus.before, this.rangeStatus.after)) {
this.rangeStatus.data = this.geDateAll(this.rangeStatus.before, this.rangeStatus.after);
} else {
this.rangeStatus.data = this.geDateAll(this.rangeStatus.after, this.rangeStatus.before);
}
}
}
this._getWeek(fullDate)
}
/**
* 获取每周数据
* @param {Object} dateData
*/
_getWeek(dateData) {
const {
year,
month
} = this.getDate(dateData)
let firstDay = new Date(year, month - 1, 1).getDay()
let currentDay = new Date(year, month, 0).getDate()
let dates = {
lastMonthDays: this._getLastMonthDays(firstDay, this.getDate(dateData)), // 上个月末尾几天
currentMonthDys: this._currentMonthDys(currentDay, this.getDate(dateData)), // 本月天数
nextMonthDays: [], // 下个月开始几天
weeks: []
}
let canlender = []
const surplus = 42 - (dates.lastMonthDays.length + dates.currentMonthDys.length)
dates.nextMonthDays = this._getNextMonthDays(surplus, this.getDate(dateData))
canlender = canlender.concat(dates.lastMonthDays, dates.currentMonthDys, dates.nextMonthDays)
let weeks = {}
// 拼接数组 上个月开始几天 + 本月天数+ 下个月开始几天
for (let i = 0; i < canlender.length; i++) {
if (i % 7 === 0) {
weeks[parseInt(i / 7)] = new Array(7)
}
weeks[parseInt(i / 7)][i % 7] = canlender[i]
}
this.canlender = canlender
this.weeks = weeks
}
//静态方法
// static init(date) {
// if (!this.instance) {
// this.instance = new Calendar(date);
// }
// return this.instance;
// }
}
export default Calendar
@@ -0,0 +1,452 @@
<template>
<view class="uv-calendar">
<view class="uv-calendar__content" v-if="insert">
<calendar-body
:date="date"
:nowDate="nowDate"
:weeks="weeks"
:calendar="calendar"
:selected="selected"
:lunar="lunar"
:showMonth="showMonth"
:color="color"
:startText="startText"
:endText="endText"
:range="range"
:multiple="multiple"
:allowSameDay="allowSameDay"
@bindDateChange="bindDateChange"
@pre="pre"
@next="next"
@backToday="backToday"
@choiceDate="choiceDate"
></calendar-body>
</view>
<uv-popup ref="popup" mode="bottom" v-else :round="round" z-index="998" :close-on-click-overlay="closeOnClickOverlay" @maskClick="maskClick">
<view style="min-height: 100px;">
<uv-toolbar
:show="true"
:cancelColor="cancelColor"
:confirmColor="getConfirmColor"
:cancelText="cancelText"
:confirmText="confirmText"
:title="title"
@cancel="close"
@confirm="confirm"></uv-toolbar>
<view class="line"></view>
<calendar-body
:nowDate="nowDate"
:weeks="weeks"
:calendar="calendar"
:selected="selected"
:lunar="lunar"
:showMonth="showMonth"
:color="color"
:startText="startText"
:endText="endText"
:range="range"
:multiple="multiple"
:allowSameDay="allowSameDay"
@bindDateChange="bindDateChange"
@pre="pre"
@next="next"
@backToday="backToday"
@choiceDate="choiceDate"
></calendar-body>
</view>
</uv-popup>
</view>
</template>
<script>
/**
* Calendar 日历
* @description 日历组件可以查看日期,选择任意范围内的日期,打点操作。常用场景如:酒店日期预订、火车机票选择购买日期、上下班打卡等
* @tutorial https://ext.dcloud.net.cn/plugin?name=uv-calendar
* @property {String} date 自定义当前时间,默认为今天
* @property {Boolean} lunar 显示农历
* @property {String} startDate 日期选择范围-开始日期
* @property {String} endDate 日期选择范围-结束日期
* @property {String} mode = [不传 | multiple | range ] 多个日期 | 选择日期范围 默认单日期
* @property {Boolean} insert = [true|false] 插入模式,默认为false
* @value true 弹窗模式
* @value false 插入模式
* @property {Boolean} clearDate = [true|false] 弹窗模式是否清空上次选择内容
* @property {Array} selected 打点,期待格式[{date: '2019-06-27', info: '签到', data: { custom: '自定义信息', name: '自定义消息头',xxx:xxx... }}]
* @property {String} cancelColor 取消按钮颜色
* @property {String} confirmColor 确认按钮颜色,默认#3c9cff
* @property {String} title 头部工具条中间的标题文字
* @property {String} color 主题色,默认#3c9cff
* @property {Number} round :insert="false"时的圆角
* @property {Boolean} closeOnClickOverlay 点击遮罩是否关闭
* @property {String} startText range为true时,第一个日期底部的提示文字
* @property {String} endText range为true时,最后一个日期底部的提示文字
* @property {String} readonly 是否为只读状态,只读状态下禁止选择日期,默认false
*
* @event {Function} change 日期改变,`insert :ture` 时生效
* @event {Function} confirm 确认选择`insert :false` 时生效
* @event {Function} monthSwitch 切换月份时触发
*
* @example <uv-calendar :insert="true":lunar="true" :start-date="'2019-3-2'":end-date="'2019-5-20'"@change="change" />
*/
import mpMixin from '@/uni_modules/uv-ui-tools/libs/mixin/mpMixin.js';
import mixin from '@/uni_modules/uv-ui-tools/libs/mixin/mixin.js';
import Calendar from './util.js';
import calendarBody from './calendar-body.vue';
import { initVueI18n } from '@dcloudio/uni-i18n';
import i18nMessages from './i18n/index.js';
const { t } = initVueI18n(i18nMessages);
export default {
components: {
calendarBody
},
mixins: [mpMixin, mixin],
emits: ['close', 'confirm', 'change', 'monthSwitch'],
props: {
// 取消按钮颜色
cancelColor: {
type: String,
default: ''
},
// 确认按钮颜色,range模式下未选全显示灰色
confirmColor: {
type: String,
default: '#3c9cff'
},
// 标题
title: {
type: String,
default: ''
},
// 主题色
color: {
type: String,
default: '#3c9cff'
},
// 默认显示日期
date: {
type: [String,Array],
default: ''
},
// 打点等设置
selected: {
type: Array,
default () {
return []
}
},
// 是否显示农历
lunar: {
type: Boolean,
default: false
},
// 可选择的起始日期
startDate: {
type: String,
default: ''
},
// 可选择的结束日期
endDate: {
type: String,
default: ''
},
// multiple - 选择多日期 range - 选择日期范围
mode: {
type: String,
default: ''
},
// 是否插入模式
insert: {
type: Boolean,
default: false
},
// 是否显示月份为背景
showMonth: {
type: Boolean,
default: true
},
// 弹窗模式是否清空上次选择内容
clearDate: {
type: Boolean,
default: true
},
// 弹窗圆角
round: {
type: [Number,String],
default: 8
},
// 点击遮罩是否关闭弹窗
closeOnClickOverlay: {
type: Boolean,
default: true
},
// range为true时,第一个日期底部的提示文字
startText: {
type: String,
default: '开始'
},
// range为true时,最后一个日期底部的提示文字
endText: {
type: String,
default: '结束'
},
// 是否允许日期范围的起止时间为同一天,mode = range时有效
allowSameDay: {
type: Boolean,
default: false
},
// 是否禁用
readonly: {
type: Boolean,
default: false
},
...uni.$uv?.props?.calendars
},
data(){
return {
weeks: [],
calendar: {},
nowDate: '',
allowConfirm: false,
multiple: false,
range: false
}
},
computed:{
/**
* for i18n
*/
confirmText() {
return t("uv-calender.ok")
},
cancelText() {
return t("uv-calender.cancel")
},
getConfirmColor() {
if(this.range || this.multiple || this.readonly) {
return this.allowConfirm? this.confirmColor: '#999'
}else {
return this.confirmColor;
}
}
},
watch: {
date(newVal) {
this.init(newVal)
},
startDate(val) {
this.cale.resetSatrtDate(val)
this.cale.setDate(this.nowDate.fullDate)
this.weeks = this.cale.weeks
},
endDate(val) {
this.cale.resetEndDate(val)
this.cale.setDate(this.nowDate.fullDate)
this.weeks = this.cale.weeks
},
selected(newVal) {
this.cale.setSelectInfo(this.nowDate.fullDate, newVal)
this.weeks = this.cale.weeks
}
},
created() {
this.setMode();
this.cale = new Calendar({
selected: this.selected,
startDate: this.startDate,
endDate: this.endDate,
range: this.range,
multiple: this.multiple,
allowSameDay: this.allowSameDay
})
this.init(this.date)
},
methods: {
setMode() {
switch (this.mode){
case 'range':
this.range = true;
break;
case 'multiple':
this.multiple = true;
default:
break;
}
},
async open() {
if (this.clearDate && !this.insert) {
this.cale.cleanRangeStatus()
this.init(this.date)
}
if(!this.insert){
this.$refs.popup.open();
}
},
close() {
this.$refs.popup.close();
this.$emit('close');
},
confirm() {
if(this.readonly) {
return;
} else if(this.range && !this.cale.rangeStatus.after) {
return;
} else if(this.multiple && this.cale.multipleStatus.data.length == 0){
return;
}
this.setEmit('confirm');
this.close()
},
maskClick() {
if(this.closeOnClickOverlay) {
this.$emit('close');
}
},
bindDateChange(e) {
const value = e.detail.value + '-1'
this.setDate(value)
const { year, month } = this.cale.getDate(value)
this.$emit('monthSwitch', {
year,
month
})
},
/**
* 初始化日期显示
* @param {Object} date
*/
init(date) {
if(this.range) {
// 重置范围选择状态
this.cale.cleanRangeStatus();
}else if(this.multiple){
// 重置多选状态
this.cale.cleanMultipleStatus();
}
this.cale.setDate(date,'init')
this.weeks = this.cale.weeks
this.nowDate = this.calendar = this.cale.getInfo(date)
this.changeConfirmStatus();
},
/**
* 变化触发
*/
change() {
this.changeConfirmStatus();
if (!this.insert) return
this.setEmit('change')
},
changeConfirmStatus() {
if(this.readonly) {
this.allowConfirm = false;
} else if (this.range) {
this.allowConfirm = this.cale.rangeStatus.after ? true : false;
} else if(this.multiple) {
this.allowConfirm = this.cale.multipleStatus.data.length > 0 ? true : false;
}
},
/**
* 选择月份触发
*/
monthSwitch() {
let {
year,
month
} = this.nowDate
this.$emit('monthSwitch', {
year,
month: Number(month)
})
},
/**
* 派发事件
* @param {Object} name
*/
setEmit(name) {
let {
year,
month,
date,
fullDate,
lunar,
extraInfo
} = this.calendar
this.$emit(name, {
range: this.cale.rangeStatus,
multiple: this.cale.multipleStatus,
year,
month,
date,
fulldate: fullDate,
lunar,
extraInfo: extraInfo || {}
})
},
/**
* 选择天触发
* @param {Object} weeks
*/
choiceDate(weeks) {
if (weeks.disable || this.readonly) return
this.calendar = weeks
// 设置范围选择
this.cale.setRange(this.calendar.fullDate)
// 设置多选
this.cale.setMultiple(this.calendar.fullDate);
this.weeks = this.cale.weeks
this.change()
},
/**
* 回到今天
*/
backToday() {
const nowYearMonth = `${this.nowDate.year}-${this.nowDate.month}`
const date = this.cale.getDate(new Date())
const todayYearMonth = `${date.year}-${date.month}`
this.init(date.fullDate)
if (nowYearMonth !== todayYearMonth) {
this.monthSwitch()
}
this.change()
},
/**
* 上个月
*/
pre() {
const preDate = this.cale.getDate(this.nowDate.fullDate, -1, 'month').fullDate
this.setDate(preDate)
this.monthSwitch()
},
/**
* 下个月
*/
next() {
const nextDate = this.cale.getDate(this.nowDate.fullDate, +1, 'month').fullDate
this.setDate(nextDate)
this.monthSwitch()
},
/**
* 设置日期
* @param {Object} date
*/
setDate(date) {
this.cale.setDate(date)
this.weeks = this.cale.weeks
this.nowDate = this.cale.getInfo(date)
}
}
}
</script>
<style scoped lang="scss">
$uv-border-color: #EDEDED !default;
.uv-calendar__content {
background-color: #fff;
}
.line {
width: 750rpx;
height: 1px;
border-bottom-color: $uv-border-color;
border-bottom-style: solid;
border-bottom-width: 1px;
}
</style>
+89
View File
@@ -0,0 +1,89 @@
{
"id": "uv-calendars",
"displayName": "uv-calendars 最新日历 全面兼容vue3+2、app、h5、小程序等多端",
"version": "1.0.15",
"description": "新版本uv-calendars,不仅拥有老版本的所有功能,还增加了更加适用的插入页面等强大功能,且更加简洁。查看日期、选择单个或多个或任意范围日期,打点操作,自定义文案,自定义主题等强大功能。",
"keywords": [
"uv-ui",
"uvui",
"日历",
"打卡",
"日历选择"
],
"repository": "",
"engines": {
"HBuilderX": "^3.1.0"
},
"dcloudext": {
"type": "component-vue",
"sale": {
"regular": {
"price": "0.00"
},
"sourcecode": {
"price": "0.00"
}
},
"contact": {
"qq": ""
},
"declaration":{
"ads": "无",
"data": "插件不采集任何数据",
"permissions": "无"
},
"npmurl": ""
},
"uni_modules": {
"dependencies": [
"uv-ui-tools",
"uv-popup",
"uv-toolbar"
],
"encrypt": [],
"platforms": {
"cloud": {
"tcb": "y",
"aliyun": "y"
},
"client": {
"Vue": {
"vue2": "y",
"vue3": "y"
},
"App": {
"app-vue": "y",
"app-nvue": "y"
},
"H5-mobile": {
"Safari": "y",
"Android Browser": "y",
"微信浏览器(Android)": "y",
"QQ浏览器(Android)": "y"
},
"H5-pc": {
"Chrome": "y",
"IE": "y",
"Edge": "y",
"Firefox": "y",
"Safari": "y"
},
"小程序": {
"微信": "y",
"阿里": "y",
"百度": "y",
"字节跳动": "y",
"QQ": "y",
"钉钉": "u",
"快手": "u",
"飞书": "u",
"京东": "u"
},
"快应用": {
"华为": "u",
"联盟": "u"
}
}
}
}
}
+23
View File
@@ -0,0 +1,23 @@
## Calendars 全新日历
> **组件名:uv-calendars**
为了解决老版本`uv-calendar`性能问题,特别是对日期选择范围有很大限制,体验不友好等缺点。于是有了新版日历组件。
新版本`uv-calendars`,不仅拥有老版本的所有功能,还增加了更加适用的插入页面等强大功能,且更加简洁。查看日期、选择单个或多个或任意范围日期,打点操作,自定义文案,自定义主题等强大功能。
常用场景:酒店日期预订、火车机票选择购买日期、上下班打卡等。
# <a href="https://www.uvui.cn/components/calendars.html" target="_blank">查看文档</a>
## [下载完整示例项目](https://ext.dcloud.net.cn/plugin?name=uv-ui) <small>(请不要 下载插件ZIP)</small>
### [更多插件,请关注uv-ui组件库](https://ext.dcloud.net.cn/plugin?name=uv-ui)
<a href="https://ext.dcloud.net.cn/plugin?name=uv-ui" target="_blank">
![image](https://mp-a667b617-c5f1-4a2d-9a54-683a67cff588.cdn.bspapp.com/uv-ui/banner.png)
</a>
#### 如使用过程中有任何问题反馈,或者您对uv-ui有一些好的建议,欢迎加入uv-ui官方交流群:<a href="https://www.uvui.cn/components/addQQGroup.html" target="_blank">官方QQ群</a>
+13
View File
@@ -0,0 +1,13 @@
## 1.0.5(2023-12-06)
1. 修复uv-cell right-icon插槽编译到APP端不显示的BUG,问题来源:https://gitee.com/climblee/uv-ui/issues/I8LXZI
## 1.0.4(2023-09-19)
1. 增加cellStyle参数,方便自定义单元格的样式
## 1.0.3(2023-07-03)
去除插槽判断,避免某些平台不显示的BUG
## 1.0.2(2023-06-21)
1. 优化
## 1.0.1(2023-05-16)
1. 优化组件依赖,修改后无需全局引入,组件导入即可使用
2. 优化部分功能
## 1.0.0(2023-05-10)
uv-cell 单元格
@@ -0,0 +1,15 @@
export default {
props: {
// 分组标题
title: {
type: String,
default: ''
},
// 是否显示外边框
border: {
type: Boolean,
default: true
},
...uni.$uv?.props?.cellGroup
}
}
@@ -0,0 +1,63 @@
<template>
<view :style="[$uv.addStyle(customStyle)]" :class="[customClass]" class="uv-cell-group">
<view v-if="title" class="uv-cell-group__title">
<slot name="title">
<text class="uv-cell-group__title__text">{{ title }}</text>
</slot>
</view>
<view class="uv-cell-group__wrapper">
<uv-line v-if="border"></uv-line>
<slot />
</view>
</view>
</template>
<script>
import mpMixin from '@/uni_modules/uv-ui-tools/libs/mixin/mpMixin.js'
import mixin from '@/uni_modules/uv-ui-tools/libs/mixin/mixin.js'
import props from './props.js';
/**
* cellGroup 单元格
* @description cell单元格一般用于一组列表的情况,比如个人中心页,设置页等。
* @tutorial https://www.uvui.cn/components/cell.html
*
* @property {String} title 分组标题
* @property {Boolean} border 是否显示外边框 (默认 true )
* @property {Object} customStyle 定义需要用到的外部样式
*
* @event {Function} click 点击cell列表时触发
* @example <uv-cell-group title="设置喜好">
*/
export default {
name: 'uv-cell-group',
mixins: [mpMixin, mixin, props]
}
</script>
<style lang="scss" scoped>
@import '@/uni_modules/uv-ui-tools/libs/css/components.scss';
@import '@/uni_modules/uv-ui-tools/libs/css/color.scss';
$uv-cell-group-title-padding: 16px 16px 8px !default;
$uv-cell-group-title-font-size: 15px !default;
$uv-cell-group-title-line-height: 16px !default;
$uv-cell-group-title-color: $uv-main-color !default;
.uv-cell-group {
flex: 1;
&__title {
padding: $uv-cell-group-title-padding;
&__text {
font-size: $uv-cell-group-title-font-size;
line-height: $uv-cell-group-title-line-height;
color: $uv-cell-group-title-color;
}
}
&__wrapper {
position: relative;
}
}
</style>
@@ -0,0 +1,116 @@
export default {
props: {
// 标题
title: {
type: [String, Number],
default: ''
},
// 标题下方的描述信息
label: {
type: [String, Number],
default: ''
},
// 右侧的内容
value: {
type: [String, Number],
default: ''
},
// 左侧图标名称,或者图片链接(本地文件建议使用绝对地址)
icon: {
type: String,
default: ''
},
// 是否禁用cell
disabled: {
type: Boolean,
default: false
},
// 是否显示下边框
border: {
type: Boolean,
default: true
},
// 内容是否垂直居中(主要是针对右侧的value部分)
center: {
type: Boolean,
default: true
},
// 点击后跳转的URL地址
url: {
type: String,
default: ''
},
// 链接跳转的方式,内部使用的是uvui封装的route方法,可能会进行拦截操作
linkType: {
type: String,
default: 'navigateTo'
},
// 是否开启点击反馈(表现为点击时加上灰色背景)
clickable: {
type: Boolean,
default: false
},
// 是否展示右侧箭头并开启点击反馈
isLink: {
type: Boolean,
default: false
},
// 是否显示表单状态下的必填星号(此组件可能会内嵌入input组件)
required: {
type: Boolean,
default: false
},
// 右侧的图标箭头
rightIcon: {
type: String,
default: 'arrow-right'
},
// 右侧箭头的方向,可选值为:left,up,down
arrowDirection: {
type: String,
default: ''
},
// 左侧图标样式
iconStyle: {
type: [Object, String],
default: () => {
return {}
}
},
// 右侧箭头图标的样式
rightIconStyle: {
type: [Object, String],
default: () => {
return {}
}
},
// 标题的样式
titleStyle: {
type: [Object, String],
default: () => {
return {}
}
},
// 单位元的大小,可选值为large
size: {
type: String,
default: ''
},
// 点击cell是否阻止事件传播
stop: {
type: Boolean,
default: true
},
// 标识符,cell被点击时返回
name: {
type: [Number, String],
default: ''
},
// 单元格自定义样式
cellStyle: {
type: [Object, String],
default: () => {}
},
...uni.$uv?.props?.cell
}
}
@@ -0,0 +1,209 @@
<template>
<view class="uv-cell" :class="[customClass]" :style="[$uv.addStyle(customStyle)]"
:hover-class="(!disabled && (clickable || isLink)) ? 'uv-cell--clickable' : ''" :hover-stay-time="250"
@click="clickHandler">
<view class="uv-cell__body"
:class="[ center && 'uv-cell--center', size === 'large' && 'uv-cell__body--large']"
:style="[cellStyle]"
>
<view class="uv-cell__body__content">
<view class="uv-cell__left-icon-wrap">
<slot name="icon">
<uv-icon v-if="icon" :name="icon" :custom-style="iconStyle" :size="size === 'large' ? 22 : 18"></uv-icon>
</slot>
</view>
<view class="uv-cell__title">
<slot name="title">
<text v-if="title" class="uv-cell__title-text" :style="[titleTextStyle]"
:class="[disabled && 'uv-cell--disabled', size === 'large' && 'uv-cell__title-text--large']">{{ title }}</text>
</slot>
<slot name="label">
<text class="uv-cell__label" v-if="label"
:class="[disabled && 'uv-cell--disabled', size === 'large' && 'uv-cell__label--large']">{{ label }}</text>
</slot>
</view>
</view>
<slot name="value">
<text class="uv-cell__value"
:class="[disabled && 'uv-cell--disabled', size === 'large' && 'uv-cell__value--large']"
v-if="!$uv.test.empty(value)">{{ value }}</text>
</slot>
<view class="uv-cell__right-icon-wrap"
:class="[`uv-cell__right-icon-wrap--${arrowDirection}`]">
<slot name="right-icon">
<uv-icon v-if="isLink" :name="rightIcon" :custom-style="rightIconStyle" :color="disabled ? '#c8c9cc' : 'info'"
:size="size === 'large' ? 18 : 16"></uv-icon>
</slot>
</view>
</view>
<uv-line v-if="border"></uv-line>
</view>
</template>
<script>
import mpMixin from '@/uni_modules/uv-ui-tools/libs/mixin/mpMixin.js'
import mixin from '@/uni_modules/uv-ui-tools/libs/mixin/mixin.js'
import props from './props.js';
/**
* cell 单元格
* @description cell单元格一般用于一组列表的情况,比如个人中心页,设置页等。
* @tutorial https://www.uvui.cn/components/cell.html
* @property {String | Number} title 标题
* @property {String | Number} label 标题下方的描述信息
* @property {String | Number} value 右侧的内容
* @property {String} icon 左侧图标名称,或者图片链接(本地文件建议使用绝对地址)
* @property {Boolean} disabled 是否禁用cell
* @property {Boolean} border 是否显示下边框 (默认 true )
* @property {Boolean} center 内容是否垂直居中(主要是针对右侧的value部分) (默认 false )
* @property {String} url 点击后跳转的URL地址
* @property {String} linkType 链接跳转的方式,内部使用的是uvui封装的route方法,可能会进行拦截操作 (默认 'navigateTo' )
* @property {Boolean} clickable 是否开启点击反馈(表现为点击时加上灰色背景) (默认 false )
* @property {Boolean} isLink 是否展示右侧箭头并开启点击反馈 (默认 false )
* @property {Boolean} required 是否显示表单状态下的必填星号(此组件可能会内嵌入input组件) (默认 false )
* @property {String} rightIcon 右侧的图标箭头 (默认 'arrow-right')
* @property {String} arrowDirection 右侧箭头的方向,可选值为:left,up,down
* @property {Object | String} rightIconStyle 右侧箭头图标的样式
* @property {Object | String} titleStyle 标题的样式
* @property {Object | String} iconStyle 左侧图标样式
* @property {String} size 单位元的大小,可选值为 large,normal,mini
* @property {Boolean} stop 点击cell是否阻止事件传播 (默认 true )
* @property {Object | String} cellStyle 单元格自定义样式
* @property {Object} customStyle 定义需要用到的外部样式
*
* @event {Function} click 点击cell列表时触发
* @example 该组件需要搭配cell-group组件使用,见官方文档示例
*/
export default {
name: 'uv-cell',
emits: ['click'],
mixins: [mpMixin, mixin, props],
computed: {
titleTextStyle() {
return this.$uv.addStyle(this.titleStyle)
}
},
methods: {
// 点击cell
clickHandler(e) {
if (this.disabled) return
this.$emit('click', {
name: this.name
})
// 如果配置了url(此props参数通过mixin引入)参数,跳转页面
this.openPage()
// 是否阻止事件传播
this.stop && this.preventEvent(e)
},
}
}
</script>
<style lang="scss" scoped>
@import '@/uni_modules/uv-ui-tools/libs/css/components.scss';
@import '@/uni_modules/uv-ui-tools/libs/css/color.scss';
$uv-cell-padding: 10px 15px !default;
$uv-cell-font-size: 15px !default;
$uv-cell-line-height: 24px !default;
$uv-cell-color: $uv-main-color !default;
$uv-cell-icon-size: 16px !default;
$uv-cell-title-font-size: 15px !default;
$uv-cell-title-line-height: 22px !default;
$uv-cell-title-color: $uv-main-color !default;
$uv-cell-label-font-size: 12px !default;
$uv-cell-label-color: $uv-tips-color !default;
$uv-cell-label-line-height: 18px !default;
$uv-cell-value-font-size: 14px !default;
$uv-cell-value-color: $uv-content-color !default;
$uv-cell-clickable-color: $uv-bg-color !default;
$uv-cell-disabled-color: #c8c9cc !default;
$uv-cell-padding-top-large: 13px !default;
$uv-cell-padding-bottom-large: 13px !default;
$uv-cell-value-font-size-large: 15px !default;
$uv-cell-label-font-size-large: 14px !default;
$uv-cell-title-font-size-large: 16px !default;
$uv-cell-left-icon-wrap-margin-right: 4px !default;
$uv-cell-right-icon-wrap-margin-left: 4px !default;
$uv-cell-title-flex: 1 !default;
$uv-cell-label-margin-top: 5px !default;
.uv-cell {
&__body {
@include flex();
/* #ifndef APP-NVUE */
box-sizing: border-box;
/* #endif */
padding: $uv-cell-padding;
font-size: $uv-cell-font-size;
color: $uv-cell-color;
&__content {
@include flex(row);
align-items: center;
flex: 1;
}
&--large {
padding-top: $uv-cell-padding-top-large;
padding-bottom: $uv-cell-padding-bottom-large;
}
}
&__left-icon-wrap,
&__right-icon-wrap {
@include flex();
align-items: center;
// height: $uv-cell-line-height;
font-size: $uv-cell-icon-size;
}
&__left-icon-wrap {
margin-right: $uv-cell-left-icon-wrap-margin-right;
}
&__right-icon-wrap {
margin-left: $uv-cell-right-icon-wrap-margin-left;
transition: transform 0.3s;
&--up {
transform: rotate(-90deg);
}
&--down {
transform: rotate(90deg);
}
}
&__title {
flex: $uv-cell-title-flex;
&-text {
font-size: $uv-cell-title-font-size;
line-height: $uv-cell-title-line-height;
color: $uv-cell-title-color;
&--large {
font-size: $uv-cell-title-font-size-large;
}
}
}
&__label {
margin-top: $uv-cell-label-margin-top;
font-size: $uv-cell-label-font-size;
color: $uv-cell-label-color;
line-height: $uv-cell-label-line-height;
&--large {
font-size: $uv-cell-label-font-size-large;
}
}
&__value {
text-align: right;
font-size: $uv-cell-value-font-size;
line-height: $uv-cell-line-height;
color: $uv-cell-value-color;
&--large {
font-size: $uv-cell-value-font-size-large;
}
}
&--clickable {
background-color: $uv-cell-clickable-color;
}
&--disabled {
color: $uv-cell-disabled-color;
/* #ifndef APP-NVUE */
cursor: not-allowed;
/* #endif */
}
&--center {
align-items: center;
}
}
</style>
+89
View File
@@ -0,0 +1,89 @@
{
"id": "uv-cell",
"displayName": "uv-cell 单元格 全面兼容小程序、nvue、vue2、vue3等多端",
"version": "1.0.5",
"description": "cell单元格一般用于一组列表的情况,比如个人中心页,设置页等。",
"keywords": [
"uv-cell",
"uvui",
"uv-ui",
"单元格",
"设置页"
],
"repository": "",
"engines": {
"HBuilderX": "^3.1.0"
},
"dcloudext": {
"type": "component-vue",
"sale": {
"regular": {
"price": "0.00"
},
"sourcecode": {
"price": "0.00"
}
},
"contact": {
"qq": ""
},
"declaration": {
"ads": "无",
"data": "插件不采集任何数据",
"permissions": "无"
},
"npmurl": ""
},
"uni_modules": {
"dependencies": [
"uv-ui-tools",
"uv-icon",
"uv-line"
],
"encrypt": [],
"platforms": {
"cloud": {
"tcb": "y",
"aliyun": "y"
},
"client": {
"Vue": {
"vue2": "y",
"vue3": "y"
},
"App": {
"app-vue": "y",
"app-nvue": "y"
},
"H5-mobile": {
"Safari": "y",
"Android Browser": "y",
"微信浏览器(Android)": "y",
"QQ浏览器(Android)": "y"
},
"H5-pc": {
"Chrome": "y",
"IE": "y",
"Edge": "y",
"Firefox": "y",
"Safari": "y"
},
"小程序": {
"微信": "y",
"阿里": "y",
"百度": "y",
"字节跳动": "y",
"QQ": "y",
"钉钉": "u",
"快手": "u",
"飞书": "u",
"京东": "u"
},
"快应用": {
"华为": "u",
"联盟": "u"
}
}
}
}
}
+11
View File
@@ -0,0 +1,11 @@
## Cell 单元格
> **组件名:uv-cell**
cell单元格一般用于一组列表的情况,比如个人中心页,设置页等。
### <a href="https://www.uvui.cn/components/cell.html" target="_blank">查看文档</a>
### [完整示例项目下载 | 关注更多组件](https://ext.dcloud.net.cn/plugin?name=uv-ui)
#### 如使用过程中有任何问题,或者您对uv-ui有一些好的建议,欢迎加入 uv-ui 交流群:<a href="https://ext.dcloud.net.cn/plugin?id=12287" target="_blank">uv-ui</a>、<a href="https://www.uvui.cn/components/addQQGroup.html" target="_blank">官方QQ群</a>
+34
View File
@@ -0,0 +1,34 @@
## 1.0.14(2023-11-04)
1. 修复label文字较多不分行的问题
## 1.0.13(2023-10-11)
1. 优化同类问题:https://gitee.com/climblee/uv-ui/issues/I872VD
## 1.0.12(2023-09-22)
1. 修复change回调中v-model值不更新的BUG
## 1.0.11(2023-09-01)
1. 修复点击空隙处无效的问题
2. label支持插槽下可点击
## 1.0.10(2023-08-27)
1. 修复label设置布尔值不生效的BUG
## 1.0.9(2023-08-16)
1. 解决数据多不换行的BUG
## 1.0.8(2023-07-13)
1. 修复 uv-checkbox设置value属性不生效的BUG
## 1.0.7(2023-07-05)
修复vue3模式下,动态修改v-model绑定的值无效的BUG
## 1.0.6(2023-06-29)
1. 增加label插槽,与radio保持一致
2. 优化文档
## 1.0.5(2023-06-12)
1. 修复1.0.4改出的问题
## 1.0.4(2023-06-08)
1. 复选框修复全局设置不生效的BUG
## 1.0.3(2023-06-06)
1. uv-checkbox-group 兼容自定义样式customStyle,方便通过样式调整整体位置等;
2. .uv-checkbox-group--row增加flex-wrap: wrap;允许换行
## 1.0.2(2023-05-30)
1. 修复error报错的BUG
## 1.0.1(2023-05-16)
1. 优化组件依赖,修改后无需全局引入,组件导入即可使用
2. 优化部分功能
## 1.0.0(2023-05-10)
uv-checkbox 复选框
@@ -0,0 +1,84 @@
export default {
props: {
// 绑定的值
value: {
type: Array,
default: () => []
},
modelValue: {
type: Array,
default: () => []
},
// 标识符
name: {
type: String,
default: ''
},
// 形状,circle-圆形,square-方形
shape: {
type: String,
default: 'square'
},
// 是否禁用全部checkbox
disabled: {
type: Boolean,
default: false
},
// 选中状态下的颜色,如设置此值,将会覆盖parent的activeColor值
activeColor: {
type: String,
default: '#2979ff'
},
// 未选中的颜色
inactiveColor: {
type: String,
default: '#c8c9cc'
},
// 整个组件的尺寸,默认px
size: {
type: [String, Number],
default: 18
},
// 布局方式,row-横向,column-纵向
placement: {
type: String,
default: 'row'
},
// label的字体大小,px单位
labelSize: {
type: [String, Number],
default: 14
},
// label的字体颜色
labelColor: {
type: [String],
default: '#303133'
},
// 是否禁止点击文本操作
labelDisabled: {
type: Boolean,
default: false
},
// 图标颜色
iconColor: {
type: String,
default: '#fff'
},
// 图标的大小,单位px
iconSize: {
type: [String, Number],
default: 12
},
// 勾选图标的对齐方式,left-左边,right-右边
iconPlacement: {
type: String,
default: 'left'
},
// 竖向配列时,是否显示下划线
borderBottom: {
type: Boolean,
default: false
},
...uni.$uv?.props?.checkboxGroup
}
}
Loaded 100 of 553 files, more files were not shown because too many files have changed in this diff. Show more