This commit is contained in:
pengxiaolong
2025-05-21 22:52:33 +08:00
parent 0b9353de84
commit af10ed06db
61 changed files with 8429 additions and 1087 deletions

View File

@@ -251,6 +251,14 @@
WF : "瓦利斯",
}
const countryNamesArray = Object.values(NationalDictionary);
function convertNationalDictToOptions(dict) {
return Object.entries(dict).map(([code, name]) => ({
label: name,
value: name // 将 value 改为国家名称
}));
}
// 使用示例
const optionsArray = convertNationalDictToOptions(NationalDictionary);
export default countryNamesArray;
export default optionsArray;

View File

@@ -1,5 +1,5 @@
<template>
<scroll-view scroll-y="true" class="scroll">
<scroll-view scroll-y="true" class="scroll" lower-threshold="100" @scrolltolower="onScrollToLower" >
<uni-card class="content-list" v-for="(item, index) in list">
<!-- `````````````````````````` -->
<image class="headShot" src="../../static/logo.png" mode="scaleToFill" />
@@ -23,11 +23,13 @@
</template>
<script>
import request from "../../components/request.js";
export default {
data() {
return {
title: "Hello",
Gender: true,
page: 0,
// 列表数据
list: [
{
@@ -36,112 +38,45 @@ export default {
gender: "男",
score: 8.8,
},
{
title: "极乐世界2",
id: "9089",
gender: "女",
score: 7.8,
},
{
title: "极乐世界3",
id: "9090",
gender: "男",
score: 9.8,
},
{
title: "极乐世界3",
id: "9090",
gender: "男",
score: 9.8,
},
{
title: "极乐世界3",
id: "9090",
gender: "男",
score: 9.8,
},
{
title: "极乐世界3",
id: "9090",
gender: "男",
score: 9.8,
},
{
title: "极乐世界3",
id: "9090",
gender: "男",
score: 9.8,
},
{
title: "极乐世界3",
id: "9090",
gender: "男",
score: 9.8,
},
{
title: "极乐世界3",
id: "9090",
gender: "男",
score: 9.8,
},
{
title: "极乐世界3",
id: "9090",
gender: "男",
score: 9.8,
},
{
title: "极乐世界3",
id: "9090",
gender: "男",
score: 9.8,
},
{
title: "极乐世界3",
id: "9090",
gender: "男",
score: 9.8,
},
{
title: "极乐世界3",
id: "9090",
gender: "男",
score: 9.8,
},
{
title: "极乐世界3",
id: "9090",
gender: "男",
score: 9.8,
},
{
title: "极乐世界3",
id: "9090",
gender: "男",
score: 9.8,
},
{
title: "极乐世界3",
id: "9090",
gender: "男",
score: 9.8,
},
],
// 列表数据结束
};
},
onLoad() {
// 页面加载时执行
mounted() {
// 页面加载完成后请求数据
this.pkList()
},
methods: {
// 方法定义
async pkList(){
const res = await request({
url: "pk/pkList",
method: "GET",
data: {
status: 0,
page: this.page,
Size: 10,
},
userInfo: false,
});
console.log(res);
if (res.code === 200) {
this.list.concat(res.data)
console.log(this.list)
}
},
onScrollToLower() {
this.page++;
this.pkList();
},
},
};
</script>
<style scoped>
.scroll {
height: 100%;
height: 90%;
display: flex;
flex-direction: column;
justify-content: center;

View File

@@ -4,34 +4,38 @@ export default function request(urldata) {
"http://192.168.0.218:8086/"
+ url;
if (userInfo) {
uni.getStorage({
key: "userinfo",
success: (res) => {
if (res.data) {
if (res.data.nickName) {
return new Promise((resolve, reject) => {
return new Promise((resolve, reject) => {
uni.getStorage({
key: "userinfo",
success: (res) => {
if (res.data) {
if (res.data.nickName) {
uni.request({
url: baseUrl,
data: data,
method: method,
header: header,
success: function (res) {
console.log("请求成功1", res.data);
resolve(res.data);
},
fail: function (res) {
reject(res);
}
});
});
} else {
this.$global.lastPage = uni.page.route;
uni.reLaunch({ url: "/pages/UserInformation/UserInformation" })
}
} else {
this.$global.lastPage = uni.page.route;
uni.reLaunch({ url: "/pages/UserInformation/UserInformation" })
uni.navigateTo({ url: '/pages/login/login' })
}
} else {
this.$global.lastPage = uni.page.route;
uni.navigateTo({ url: '/pages/login/login' })
},
fail: function (res) {
reject(res);
}
}
});
});
} else {
return new Promise((resolve, reject) => {
@@ -41,6 +45,7 @@ export default function request(urldata) {
method: method,
header: header,
success: function (res) {
console.log("请求成功2", res);
resolve(res.data);
},
fail: function (res) {

View File

@@ -78,7 +78,8 @@ export default {
position: fixed;
top: 400rpx;
left: 0;
bottom: 50rpx;
width: 100%;
height: 1300rpx;
/* height: 1300rpx; */
}
</style>

View File

@@ -1,201 +1,309 @@
<template>
<view v-if="Display" class="Mask" @click="open()">
<view @click.stop>
<view class="container" >
<image
class="Fork"
@click="open()"
src="../../static/Fork.png"
mode="scaleToFill"
/>
<view class="Title">发布新PK</view>
<view class="Individual">
<view @click.stop>
<view class="container">
<image
class="Fork"
@click="open()"
src="../../static/Fork.png"
mode="scaleToFill"
/>
<view class="Title">发布新PK</view>
<view class="Individual">
<view class="NameAnchor">
<input class="NameAnchorcss" @input="NameAnchor" placeholder="主播名称" />
<view v-if="nameAnchor === '' && Hint === true" class="Hint"
>请填写主播名称</view
>
</view>
<view class="NameAnchor">
<input class="NameAnchorcss" @input="NameAnchor" placeholder="主播名称" />
</view>
<view class="Gender">
<wht-select
style="width: 300rpx"
@change="gender"
:options="Gender"
placeholder="性别"
/>
<view v-if="genders === '' && Hint === true" class="Hint">请选择性别</view>
</view>
</view>
<view class="Gender">
<uni-combox
class="Gendercss"
:candidates="Gender"
placeholder="请选择性别"
v-model="gender"
></uni-combox>
</view>
<view class="Accountnumber">
<view class="Coins">
<wht-select
style="width: 300rpx"
@change="country"
:options="Country"
filterable
placeholder="请选择国家"
/>
<view v-if="countrys === '' && Hint === true" class="Hint">请选择国家</view>
</view>
</view>
<view class="Coins">
<view class="number-box">
<view class="number-box-title">金币:</view>
<uni-number-box v-model="numberCoins"></uni-number-box>
</view>
<view v-if="numberCoins === '' && Hint === true" class="Hint"
>请填写金币数量</view
>
</view>
</view>
<view class="time">
<uni-datetime-picker
type="datetime"
v-model="datetimesingle"
@change="changeLog"
/>
<view v-if="datetimesingle === '' && Hint === true" class="Hint"
>请选择日期</view
>
</view>
<view class="Accountnumber">
<view class="Remarkscss">
<uni-easyinput
type="textarea"
v-model="remarks"
placeholder="备注"
></uni-easyinput>
</view>
<wht-select v-model="country" :options="options" placeholder="请选择国家" />
<view class="Coins">
<uni-number-box class="number-box" v-model="numberCoins"></uni-number-box>
<view class="Publish">
<button @click="Publish()" class="Publishcss">发布</button>
</view>
</view>
</view>
<view class="Remarkscss" >
<uni-easyinput type="textarea" v-model="remarks" placeholder="备注"></uni-easyinput>
</view>
<view class="Publish">
<button @click="Publish()" class="Publishcss">发布</button>
</view>
</view>
</view>
</view>
</template>
<script>
import countryNamesArray from "../../components/NationalDictionary.js"
import optionsArray from "../../components/NationalDictionary.js";
import request from "../../components/request.js";
export default {
data() {
return {
gender: "",
Gender: ["男", "女"],
Country:countryNamesArray,
country: "",
nameAnchor: "",
numberCoins: "",
remarks: "",
genders: "", //性别
Gender: [
{ label: "男", value: 1 },
{ label: "", value: 2 },
],
Country: optionsArray,
countrys: "", //国家
nameAnchor: "", //主播名称
numberCoins: "", //金币数量
remarks: "", //备注
Display: false,
options: [
{ label: '选项一', value: '1' },
{ label: '选项二', value: '2' },
{ label: '选项三', value: '3' }
]
Hint: false,
datetimesingle: "",//日期
id: null, //用户id
};
},
onLoad() {
uni.getStorage({
key: "userinfo",
success: (res) => {
this.id = res.data.id;
},
});
},
methods: {
gender(item) {
this.genders = item.value;
console.log(item);
},
country(item) {
this.countrys = item.value;
console.log(item);
},
handleOverlayClick(event) {
if (event.target === this.$el) {
this.Display = false;
this.Hint = false;
}
},
open(){
if (this.Display) {
this.Display = false;
} else {
this.Display = true;
}
open() {
if (this.Display) {
this.Display = false;
this.Hint = false;
this.nameAnchor = "";
this.genders = "";
this.numberCoins = "";
this.remarks = "";
this.datetimesingle = "";
this.countrys = "";
} else {
this.Display = true;
}
},
//获取主播名称
NameAnchor: function (event) {
this.nameAnchor = event.target.value;
},
Publish(){
console.log( this.nameAnchor, this.gender,this.country, this.numberCoins, this.remarks);
}
async Publish() {
//判断是否为空
if (
this.nameAnchor === "" ||
this.genders === "" ||
this.numberCoins === "" ||
this.countrys === "" ||
this.datetimesingle === ""
) {
this.Hint = true;
return;
}
//格式化日期
const isoString = this.datetimesingle.replace(" ", "T");
const timestamp = Date.parse(isoString);
if (isNaN(timestamp)) {
throw new Error(`Invalid date format: ${this.datetimesingle}`);
}
this.datetimesingle = Math.floor(timestamp / 1000);
//发送请求
uni.showLoading({
title: "发布中...",
mask: true,
});
const res = await request({
url: "pk/addPkData",
method: "POST",
data: {
anchorId: this.nameAnchor,
pk_time: this.datetimesingle,
sex: this.genders,
country: this.countrys,
coin: this.numberCoins,
remark: this.remarks,
status: 0,
sender_id: this.id,
anchorIcon: "",
},
userInfo: true,
});
if (res.code === 200) {
this.Display = false;
this.Hint = false;
this.nameAnchor = "";
this.genders = "";
this.numberCoins = "";
this.remarks = "";
this.datetimesingle = "";
uni.hideLoading();
uni.showToast({
title: "发布成功",
icon: "success",
duration: 2000,
});
} else {
uni.hideLoading();
uni.showToast({
title: "发布失败",
icon: "none",
duration: 2000,
});
}
},
},
};
</script>
<style scoped>
.Mask{
.Mask {
width: 100vw;
height: 100vh;
background: #00000076;
display: flex;
flex-direction: column-reverse;
}
.Hint {
color: red;
font-size: 20rpx;
}
.container {
display: flex;
background-color: #fff;
flex-direction: column;
width: 100%;
height: 900rpx;
height: 100%;
}
.Fork{
.Fork {
width: 50rpx;
height: 50rpx;
margin-top: 20rpx;
/* margin-bottom: 40rpx; */
margin-left: 90%;
}
.Title{
width: 100%;
height: 30rpx;
font-size: 50rpx;
font-weight: bold;
text-align: center;
margin-top: 40rpx;
margin-bottom: 40rpx;
.Title {
width: 100%;
height: 30rpx;
font-size: 50rpx;
font-weight: bold;
text-align: center;
margin-top: 40rpx;
margin-bottom: 40rpx;
}
.Individual{
display: flex;
/* justify-content: center; */
.Individual {
display: flex;
/* justify-content: center; */
}
.NameAnchor{
.NameAnchor {
margin: 40rpx;
}
.NameAnchorcss{
width: 300rpx;
height: 85rpx;
border: 1rpx solid #ccc;
border-radius: 10rpx;
text-align: center;
.time {
width: 90%;
margin-left: 5%;
}
.Gender{
.NameAnchorcss {
width: 300rpx;
height: 85rpx;
border: 1rpx solid #ccc;
border-radius: 10rpx;
text-align: center;
}
.Gender {
width: 300rpx;
height: 80rpx;
margin: 40rpx;
}
.Gendercss{
width: 300rpx;
height: 80rpx;
text-align: center;
.Accountnumber {
display: flex;
}
.Accountnumber{
display: flex;
}
.Country{
}
.Countrycss{
margin: 40rpx;
width: 300rpx;
height: 65rpx;
text-align: center;
}
.Coins{
.Coins {
margin: 40rpx;
width: 300rpx;
height: 65rpx;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
/* align-items: center; */
}
.number-box {
text-align: center;
display: flex;
text-align: center;
}
.Remarkscss{
width: 90%;
margin-top: 30rpx;
margin-left: 5%;
margin-right: 5%;
margin-bottom: 50rpx;
border-radius: 10rpx;
.number-box-title {
margin-right: 20rpx;
}
.Publish{
.Remarkscss {
width: 90%;
margin-top: 30rpx;
margin-left: 5%;
margin-right: 5%;
margin-bottom: 50rpx;
border-radius: 10rpx;
}
.Publish {
margin-bottom: 50rpx;
width: 90%;
margin-left: 5%;
}
.Publishcss{
background-color: #0048ff94;
.Publishcss {
background-color: #0048ff94;
}
</style>

View File

@@ -0,0 +1,169 @@
## 2.2.402025-04-14
- 修复 绑定字符串值的时,日历面板选中状态未重置到默认值的问题
## 2.2.392025-04-14
- 修复 在 iOS 微信小程序上type='daterange'时,传入'YYYY-MM-DD'格式不生效的问题
## 2.2.382024-10-15
- 修复 微信小程序中的getSystemInfo警告
## 2.2.352024-09-21
- 修复 没有选中日期时点击确定直接报错的Bug [详情](https://ask.dcloud.net.cn/question/198168)
## 2.2.342024-04-24
- 新增 日期点击事件,在点击日期时会触发该事件。
## 2.2.332024-04-15
- 修复 抖音小程序事件传递失效bug
## 2.2.322024-02-20
- 修复 日历的close事件触发异常的bug [详情](https://github.com/dcloudio/uni-ui/issues/844)
## 2.2.312024-02-20
- 修复 h5平台 右边日历的月份默认+1的bug [详情](https://github.com/dcloudio/uni-ui/issues/841)
## 2.2.302024-01-31
- 修复 隐藏“秒”时在IOS15及以下版本时出现 结束时间在开始时间之前 的bug [详情](https://github.com/dcloudio/uni-ui/issues/788)
## 2.2.292024-01-20
- 新增 show事件弹窗弹出时触发该事件 [详情](https://github.com/dcloudio/uni-app/issues/4694)
## 2.2.282024-01-18
- 去除 noChange事件当进行日期范围选择时若只选了一天则开始结束日期都为同一天 [详情](https://github.com/dcloudio/uni-ui/issues/815)
## 2.2.272024-01-10
- 优化 增加noChange事件当进行日期范围选择时若有空值则触发该事件 [详情](https://github.com/dcloudio/uni-ui/issues/815)
## 2.2.262024-01-08
- 修复 字节小程序时间选择范围器失效问题 [详情](https://github.com/dcloudio/uni-ui/issues/834)
## 2.2.252023-10-18
- 修复 PC端初次修改时间开始时间未更新的Bug [详情](https://github.com/dcloudio/uni-ui/issues/737)
## 2.2.242023-06-02
- 修复 部分情况修改时间开始、结束时间显示异常的Bug [详情](https://ask.dcloud.net.cn/question/171146)
- 优化 当前月可以选择上月、下月的日期的Bug
## 2.2.232023-05-02
- 修复 部分情况修改时间开始时间未更新的Bug [详情](https://github.com/dcloudio/uni-ui/issues/737)
- 修复 部分平台及设备第一次点击无法显示弹框的Bug
- 修复 ios 日期格式未补零显示及使用异常的Bug [详情](https://ask.dcloud.net.cn/question/162979)
## 2.2.222023-03-30
- 修复 日历 picker 修改年月后自动选中当月1日的Bug [详情](https://ask.dcloud.net.cn/question/165937)
- 修复 小程序端 低版本 ios NaN的Bug [详情](https://ask.dcloud.net.cn/question/162979)
## 2.2.212023-02-20
- 修复 firefox 浏览器显示区域点击无法拉起日历弹框的Bug [详情](https://ask.dcloud.net.cn/question/163362)
## 2.2.202023-02-17
- 优化 值为空依然选中当天问题
- 优化 提供 default-value 属性支持配置选择器打开时默认显示的时间
- 优化 非范围选择未选择日期时间,点击确认按钮选中当前日期时间
- 优化 字节小程序日期时间范围选择底部日期换行的Bug
## 2.2.192023-02-09
- 修复 2.2.18 引起范围选择配置 end 选择无效的Bug [详情](https://github.com/dcloudio/uni-ui/issues/686)
## 2.2.182023-02-08
- 修复 移动端范围选择change事件触发异常的Bug [详情](https://github.com/dcloudio/uni-ui/issues/684)
- 优化 PC端输入日期格式错误时返回当前日期时间
- 优化 PC端输入日期时间超出 start、end 限制的Bug
- 优化 移动端日期时间范围用法时间展示不完整问题
## 2.2.172023-02-04
- 修复 小程序端绑定 Date 类型报错的Bug [详情](https://github.com/dcloudio/uni-ui/issues/679)
- 修复 vue3 time-picker 无法显示绑定时分秒的Bug
## 2.2.162023-02-02
- 修复 字节小程序报错的Bug
## 2.2.152023-02-02
- 修复 某些情况切换月份错误的Bug
## 2.2.142023-01-30
- 修复 某些情况切换月份错误的Bug [详情](https://ask.dcloud.net.cn/question/162033)
## 2.2.132023-01-10
- 修复 多次加载组件造成内存占用的Bug
## 2.2.122022-12-01
- 修复 vue3 下 i18n 国际化初始值不正确的Bug
## 2.2.112022-09-19
- 修复 支付宝小程序样式错乱的Bug [详情](https://github.com/dcloudio/uni-app/issues/3861)
## 2.2.102022-09-19
- 修复 反向选择日期范围日期显示异常的Bug [详情](https://ask.dcloud.net.cn/question/153401?item_id=212892&rf=false)
## 2.2.92022-09-16
- 可以使用 uni-scss 控制主题色
## 2.2.82022-09-08
- 修复 close事件无效的Bug
## 2.2.72022-09-05
- 修复 移动端 maskClick 无效的Bug [详情](https://ask.dcloud.net.cn/question/140824)
## 2.2.62022-06-30
- 优化 组件样式调整了组件图标大小、高度、颜色等与uni-ui风格保持一致
## 2.2.52022-06-24
- 修复 日历顶部年月及底部确认未国际化的Bug
## 2.2.42022-03-31
- 修复 Vue3 下动态赋值,单选类型未响应的Bug
## 2.2.32022-03-28
- 修复 Vue3 下动态赋值未响应的Bug
## 2.2.22021-12-10
- 修复 clear-icon 属性在小程序平台不生效的Bug
## 2.2.12021-12-10
- 修复 日期范围选在小程序平台必须多点击一次才能取消选中状态的Bug
## 2.2.02021-11-19
- 优化 组件UI并提供设计资源 [详情](https://uniapp.dcloud.io/component/uniui/resource)
- 文档迁移 [https://uniapp.dcloud.io/component/uniui/uni-datetime-picker](https://uniapp.dcloud.io/component/uniui/uni-datetime-picker)
## 2.1.52021-11-09
- 新增 提供组件设计资源,组件样式调整
## 2.1.42021-09-10
- 修复 hide-second 在移动端的Bug
- 修复 单选赋默认值时赋值日期未高亮的Bug
- 修复 赋默认值时移动端未正确显示时间的Bug
## 2.1.32021-09-09
- 新增 hide-second 属性,支持只使用时分,隐藏秒
## 2.1.22021-09-03
- 优化 取消选中时(范围选)直接开始下一次选择, 避免多点一次
- 优化 移动端支持清除按钮,同时支持通过 ref 调用组件的 clear 方法
- 优化 调整字号大小,美化日历界面
- 修复 因国际化导致的 placeholder 失效的Bug
## 2.1.12021-08-24
- 新增 支持国际化
- 优化 范围选择器在 pc 端过宽的问题
## 2.1.02021-08-09
- 新增 适配 vue3
## 2.0.192021-08-09
- 新增 支持作为 uni-forms 子组件相关功能
- 修复 在 uni-forms 中使用时,选择时间报 NAN 错误的Bug
## 2.0.182021-08-05
- 修复 type 属性动态赋值无效的Bug
- 修复 ‘确认’按钮被 tabbar 遮盖 bug
- 修复 组件未赋值时范围选左、右日历相同的Bug
## 2.0.172021-08-04
- 修复 范围选未正确显示当前值的Bug
- 修复 h5 平台(移动端)报错 'cale' of undefined 的Bug
## 2.0.162021-07-21
- 新增 return-type 属性支持返回 date 日期对象
## 2.0.152021-07-14
- 修复 单选日期类型初始赋值后不在当前日历的Bug
- 新增 clearIcon 属性,显示框的清空按钮可配置显示隐藏(仅 pc 有效)
- 优化 移动端移除显示框的清空按钮,无实际用途
## 2.0.142021-07-14
- 修复 组件赋值为空界面未更新的Bug
- 修复 start 和 end 不能动态赋值的Bug
- 修复 范围选类型用户选择后再次选择右侧日历结束日期显示不正确的Bug
## 2.0.132021-07-08
- 修复 范围选择不能动态赋值的Bug
## 2.0.122021-07-08
- 修复 范围选择的初始时间在一个月内时造成无法选择的bug
## 2.0.112021-07-08
- 优化 弹出层在超出视窗边缘定位不准确的问题
## 2.0.102021-07-08
- 修复 范围起始点样式的背景色与今日样式的字体前景色融合导致日期字体看不清的Bug
- 优化 弹出层在超出视窗边缘被遮盖的问题
## 2.0.92021-07-07
- 新增 maskClick 事件
- 修复 特殊情况日历 rpx 布局错误的Bugrpx -> px
- 修复 范围选择时清空返回值不合理的bug['', ''] -> []
## 2.0.82021-07-07
- 新增 日期时间显示框支持插槽
## 2.0.72021-07-01
- 优化 添加 uni-icons 依赖
## 2.0.62021-05-22
- 修复 图标在小程序上不显示的Bug
- 优化 重命名引用组件,避免潜在组件命名冲突
## 2.0.52021-05-20
- 优化 代码目录扁平化
## 2.0.42021-05-12
- 新增 组件示例地址
## 2.0.32021-05-10
- 修复 ios 下不识别 '-' 日期格式的Bug
- 优化 pc 下弹出层添加边框和阴影
## 2.0.22021-05-08
- 修复 在 admin 中获取弹出层定位错误的bug
## 2.0.12021-05-08
- 修复 type 属性向下兼容,默认值从 date 变更为 datetime
## 2.0.02021-04-30
- 支持日历形式的日期+时间的范围选择
> 注意此版本不向后兼容不再支持单独时间选择type=time及相关的 hide-second 属性(时间选可使用内置组件 picker
## 1.0.62021-03-18
- 新增 hide-second 属性,时间支持仅选择时、分
- 修复 选择跟显示的日期不一样的Bug
- 修复 chang事件触发2次的Bug
- 修复 分、秒 end 范围错误的Bug
- 优化 更好的 nvue 适配

View File

@@ -0,0 +1,177 @@
<template>
<view class="uni-calendar-item__weeks-box" :class="{
'uni-calendar-item--disable':weeks.disable,
'uni-calendar-item--before-checked-x':weeks.beforeMultiple,
'uni-calendar-item--multiple': weeks.multiple,
'uni-calendar-item--after-checked-x':weeks.afterMultiple,
}" @click="choiceDate(weeks)" @mouseenter="handleMousemove(weeks)">
<view class="uni-calendar-item__weeks-box-item" :class="{
'uni-calendar-item--checked':calendar.fullDate === weeks.fullDate && (calendar.userChecked || !checkHover),
'uni-calendar-item--checked-range-text': checkHover,
'uni-calendar-item--before-checked':weeks.beforeMultiple,
'uni-calendar-item--multiple': weeks.multiple,
'uni-calendar-item--after-checked':weeks.afterMultiple,
'uni-calendar-item--disable':weeks.disable,
}">
<text v-if="selected && weeks.extraInfo" class="uni-calendar-item__weeks-box-circle"></text>
<text class="uni-calendar-item__weeks-box-text uni-calendar-item__weeks-box-text-disable uni-calendar-item--checked-text">{{weeks.date}}</text>
</view>
<view :class="{'uni-calendar-item--today': weeks.isToday}"></view>
</view>
</template>
<script>
export default {
props: {
weeks: {
type: Object,
default () {
return {}
}
},
calendar: {
type: Object,
default: () => {
return {}
}
},
selected: {
type: Array,
default: () => {
return []
}
},
checkHover: {
type: Boolean,
default: false
}
},
methods: {
choiceDate(weeks) {
this.$emit('change', weeks)
},
handleMousemove(weeks) {
this.$emit('handleMouse', weeks)
}
}
}
</script>
<style lang="scss" >
$uni-primary: #007aff !default;
.uni-calendar-item__weeks-box {
flex: 1;
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: column;
justify-content: center;
align-items: center;
margin: 1px 0;
position: relative;
}
.uni-calendar-item__weeks-box-text {
font-size: 14px;
// font-family: Lato-Bold, Lato;
font-weight: bold;
color: darken($color: $uni-primary, $amount: 40%);
}
.uni-calendar-item__weeks-box-item {
position: relative;
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: column;
justify-content: center;
align-items: center;
width: 40px;
height: 40px;
/* #ifdef H5 */
cursor: pointer;
/* #endif */
}
.uni-calendar-item__weeks-box-circle {
position: absolute;
top: 5px;
right: 5px;
width: 8px;
height: 8px;
border-radius: 8px;
background-color: #dd524d;
}
.uni-calendar-item__weeks-box .uni-calendar-item--disable {
cursor: default;
}
.uni-calendar-item--disable .uni-calendar-item__weeks-box-text-disable {
color: #D1D1D1;
}
.uni-calendar-item--today {
position: absolute;
top: 10px;
right: 17%;
background-color: #dd524d;
width:6px;
height: 6px;
border-radius: 50%;
}
.uni-calendar-item--extra {
color: #dd524d;
opacity: 0.8;
}
.uni-calendar-item__weeks-box .uni-calendar-item--checked {
background-color: $uni-primary;
border-radius: 50%;
box-sizing: border-box;
border: 3px solid #fff;
}
.uni-calendar-item--checked .uni-calendar-item--checked-text {
color: #fff;
}
.uni-calendar-item--multiple .uni-calendar-item--checked-range-text {
color: #333;
}
.uni-calendar-item--multiple {
background-color: #F6F7FC;
// color: #fff;
}
.uni-calendar-item--multiple .uni-calendar-item--before-checked,
.uni-calendar-item--multiple .uni-calendar-item--after-checked {
background-color: $uni-primary;
border-radius: 50%;
box-sizing: border-box;
border: 3px solid #F6F7FC;
}
.uni-calendar-item--before-checked .uni-calendar-item--checked-text,
.uni-calendar-item--after-checked .uni-calendar-item--checked-text {
color: #fff;
}
.uni-calendar-item--before-checked-x {
border-top-left-radius: 50px;
border-bottom-left-radius: 50px;
box-sizing: border-box;
background-color: #F6F7FC;
}
.uni-calendar-item--after-checked-x {
border-top-right-radius: 50px;
border-bottom-right-radius: 50px;
background-color: #F6F7FC;
}
</style>

View File

@@ -0,0 +1,947 @@
<template>
<view class="uni-calendar" @mouseleave="leaveCale">
<view v-if="!insert && show" class="uni-calendar__mask" :class="{'uni-calendar--mask-show':aniMaskShow}"
@click="maskClick"></view>
<view v-if="insert || show" class="uni-calendar__content"
:class="{'uni-calendar--fixed':!insert,'uni-calendar--ani-show':aniMaskShow, 'uni-calendar__content-mobile': aniMaskShow}">
<view class="uni-calendar__header" :class="{'uni-calendar__header-mobile' :!insert}">
<view class="uni-calendar__header-btn-box" @click.stop="changeMonth('pre')">
<view class="uni-calendar__header-btn uni-calendar--left"></view>
</view>
<picker mode="date" :value="date" fields="month" @change="bindDateChange">
<text
class="uni-calendar__header-text">{{ (nowDate.year||'') + yearText + ( nowDate.month||'') + monthText}}</text>
</picker>
<view class="uni-calendar__header-btn-box" @click.stop="changeMonth('next')">
<view class="uni-calendar__header-btn uni-calendar--right"></view>
</view>
<view v-if="!insert" class="dialog-close" @click="maskClick">
<view class="dialog-close-plus" data-id="close"></view>
<view class="dialog-close-plus dialog-close-rotate" data-id="close"></view>
</view>
</view>
<view class="uni-calendar__box">
<view v-if="showMonth" class="uni-calendar__box-bg">
<text class="uni-calendar__box-bg-text">{{nowDate.month}}</text>
</view>
<view class="uni-calendar__weeks" style="padding-bottom: 7px;">
<view class="uni-calendar__weeks-day">
<text class="uni-calendar__weeks-day-text">{{SUNText}}</text>
</view>
<view class="uni-calendar__weeks-day">
<text class="uni-calendar__weeks-day-text">{{MONText}}</text>
</view>
<view class="uni-calendar__weeks-day">
<text class="uni-calendar__weeks-day-text">{{TUEText}}</text>
</view>
<view class="uni-calendar__weeks-day">
<text class="uni-calendar__weeks-day-text">{{WEDText}}</text>
</view>
<view class="uni-calendar__weeks-day">
<text class="uni-calendar__weeks-day-text">{{THUText}}</text>
</view>
<view class="uni-calendar__weeks-day">
<text class="uni-calendar__weeks-day-text">{{FRIText}}</text>
</view>
<view class="uni-calendar__weeks-day">
<text class="uni-calendar__weeks-day-text">{{SATText}}</text>
</view>
</view>
<view class="uni-calendar__weeks" v-for="(item,weekIndex) in weeks" :key="weekIndex">
<view class="uni-calendar__weeks-item" v-for="(weeks,weeksIndex) in item" :key="weeksIndex">
<calendar-item class="uni-calendar-item--hook" :weeks="weeks" :calendar="calendar" :selected="selected"
:checkHover="range" @change="choiceDate" @handleMouse="handleMouse">
</calendar-item>
</view>
</view>
</view>
<view v-if="!insert && !range && hasTime" class="uni-date-changed uni-calendar--fixed-top"
style="padding: 0 80px;">
<view class="uni-date-changed--time-date">{{tempSingleDate ? tempSingleDate : selectDateText}}</view>
<time-picker type="time" :start="timepickerStartTime" :end="timepickerEndTime" v-model="time"
:disabled="!tempSingleDate" :border="false" :hide-second="hideSecond" class="time-picker-style">
</time-picker>
</view>
<view v-if="!insert && range && hasTime" class="uni-date-changed uni-calendar--fixed-top">
<view class="uni-date-changed--time-start">
<view class="uni-date-changed--time-date">{{tempRange.before ? tempRange.before : startDateText}}
</view>
<time-picker type="time" :start="timepickerStartTime" v-model="timeRange.startTime" :border="false"
:hide-second="hideSecond" :disabled="!tempRange.before" class="time-picker-style">
</time-picker>
</view>
<view style="line-height: 50px;">
<uni-icons type="arrowthinright" color="#999"></uni-icons>
</view>
<view class="uni-date-changed--time-end">
<view class="uni-date-changed--time-date">{{tempRange.after ? tempRange.after : endDateText}}</view>
<time-picker type="time" :end="timepickerEndTime" v-model="timeRange.endTime" :border="false"
:hide-second="hideSecond" :disabled="!tempRange.after" class="time-picker-style">
</time-picker>
</view>
</view>
<view v-if="!insert" class="uni-date-changed uni-date-btn--ok">
<view class="uni-datetime-picker--btn" @click="confirm">{{confirmText}}</view>
</view>
</view>
</view>
</template>
<script>
import {
Calendar,
getDate,
getTime
} from './util.js';
import calendarItem from './calendar-item.vue'
import timePicker from './time-picker.vue'
import {
initVueI18n
} from '@dcloudio/uni-i18n'
import i18nMessages from './i18n/index.js'
const {
t
} = initVueI18n(i18nMessages)
/**
* Calendar 日历
* @description 日历组件可以查看日期,选择任意范围内的日期,打点操作。常用场景如:酒店日期预订、火车机票选择购买日期、上下班打卡等
* @tutorial https://ext.dcloud.net.cn/plugin?id=56
* @property {String} date 自定义当前时间,默认为今天
* @property {String} startDate 日期选择范围-开始日期
* @property {String} endDate 日期选择范围-结束日期
* @property {Boolean} 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 {Boolean} showMonth 是否选择月份为背景
* @property {[String} defaultValue 选择器打开时默认显示的时间
* @event {Function} change 日期改变,`insert :ture` 时生效
* @event {Function} confirm 确认选择`insert :false` 时生效
* @event {Function} monthSwitch 切换月份时触发
* @example <uni-calendar :insert="true" :start-date="'2019-3-2'":end-date="'2019-5-20'"@change="change" />
*/
export default {
components: {
calendarItem,
timePicker
},
options: {
// #ifdef MP-TOUTIAO
virtualHost: false,
// #endif
// #ifndef MP-TOUTIAO
virtualHost: true
// #endif
},
props: {
date: {
type: String,
default: ''
},
defTime: {
type: [String, Object],
default: ''
},
selectableTimes: {
type: [Object],
default () {
return {}
}
},
selected: {
type: Array,
default () {
return []
}
},
startDate: {
type: String,
default: ''
},
endDate: {
type: String,
default: ''
},
startPlaceholder: {
type: String,
default: ''
},
endPlaceholder: {
type: String,
default: ''
},
range: {
type: Boolean,
default: false
},
hasTime: {
type: Boolean,
default: false
},
insert: {
type: Boolean,
default: true
},
showMonth: {
type: Boolean,
default: true
},
clearDate: {
type: Boolean,
default: true
},
checkHover: {
type: Boolean,
default: true
},
hideSecond: {
type: [Boolean],
default: false
},
pleStatus: {
type: Object,
default () {
return {
before: '',
after: '',
data: [],
fulldate: ''
}
}
},
defaultValue: {
type: [String, Object, Array],
default: ''
}
},
data() {
return {
show: false,
weeks: [],
calendar: {},
nowDate: {},
aniMaskShow: false,
firstEnter: true,
time: '',
timeRange: {
startTime: '',
endTime: ''
},
tempSingleDate: '',
tempRange: {
before: '',
after: ''
}
}
},
watch: {
date: {
immediate: true,
handler(newVal) {
if (!this.range) {
this.tempSingleDate = newVal
setTimeout(() => {
this.init(newVal)
}, 100)
}
}
},
defTime: {
immediate: true,
handler(newVal) {
if (!this.range) {
this.time = newVal
} else {
this.timeRange.startTime = newVal.start
this.timeRange.endTime = newVal.end
}
}
},
startDate(val) {
// 字节小程序 watch 早于 created
if (!this.cale) {
return
}
this.cale.setStartDate(val)
this.cale.setDate(this.nowDate.fullDate)
this.weeks = this.cale.weeks
},
endDate(val) {
// 字节小程序 watch 早于 created
if (!this.cale) {
return
}
this.cale.setEndDate(val)
this.cale.setDate(this.nowDate.fullDate)
this.weeks = this.cale.weeks
},
selected(newVal) {
// 字节小程序 watch 早于 created
if (!this.cale) {
return
}
this.cale.setSelectInfo(this.nowDate.fullDate, newVal)
this.weeks = this.cale.weeks
},
pleStatus: {
immediate: true,
handler(newVal) {
const {
before,
after,
fulldate,
which
} = newVal
this.tempRange.before = before
this.tempRange.after = after
setTimeout(() => {
if (fulldate) {
this.cale.setHoverMultiple(fulldate)
if (before && after) {
this.cale.lastHover = true
if (this.rangeWithinMonth(after, before)) return
this.setDate(before)
} else {
this.cale.setMultiple(fulldate)
this.setDate(this.nowDate.fullDate)
this.calendar.fullDate = ''
this.cale.lastHover = false
}
} else {
// 字节小程序 watch 早于 created
if (!this.cale) {
return
}
this.cale.setDefaultMultiple(before, after)
if (which === 'left' && before) {
this.setDate(before)
this.weeks = this.cale.weeks
} else if (after) {
this.setDate(after)
this.weeks = this.cale.weeks
}
this.cale.lastHover = true
}
}, 16)
}
}
},
computed: {
timepickerStartTime() {
const activeDate = this.range ? this.tempRange.before : this.calendar.fullDate
return activeDate === this.startDate ? this.selectableTimes.start : ''
},
timepickerEndTime() {
const activeDate = this.range ? this.tempRange.after : this.calendar.fullDate
return activeDate === this.endDate ? this.selectableTimes.end : ''
},
/**
* for i18n
*/
selectDateText() {
return t("uni-datetime-picker.selectDate")
},
startDateText() {
return this.startPlaceholder || t("uni-datetime-picker.startDate")
},
endDateText() {
return this.endPlaceholder || t("uni-datetime-picker.endDate")
},
okText() {
return t("uni-datetime-picker.ok")
},
yearText() {
return t("uni-datetime-picker.year")
},
monthText() {
return t("uni-datetime-picker.month")
},
MONText() {
return t("uni-calender.MON")
},
TUEText() {
return t("uni-calender.TUE")
},
WEDText() {
return t("uni-calender.WED")
},
THUText() {
return t("uni-calender.THU")
},
FRIText() {
return t("uni-calender.FRI")
},
SATText() {
return t("uni-calender.SAT")
},
SUNText() {
return t("uni-calender.SUN")
},
confirmText() {
return t("uni-calender.confirm")
},
},
created() {
// 获取日历方法实例
this.cale = new Calendar({
selected: this.selected,
startDate: this.startDate,
endDate: this.endDate,
range: this.range,
})
// 选中某一天
this.init(this.date)
},
methods: {
leaveCale() {
this.firstEnter = true
},
handleMouse(weeks) {
if (weeks.disable) return
if (this.cale.lastHover) return
let {
before,
after
} = this.cale.multipleStatus
if (!before) return
this.calendar = weeks
// 设置范围选
this.cale.setHoverMultiple(this.calendar.fullDate)
this.weeks = this.cale.weeks
// hover时进入一个日历更新另一个
if (this.firstEnter) {
this.$emit('firstEnterCale', this.cale.multipleStatus)
this.firstEnter = false
}
},
rangeWithinMonth(A, B) {
const [yearA, monthA] = A.split('-')
const [yearB, monthB] = B.split('-')
return yearA === yearB && monthA === monthB
},
// 蒙版点击事件
maskClick() {
this.close()
this.$emit('maskClose')
},
clearCalender() {
if (this.range) {
this.timeRange.startTime = ''
this.timeRange.endTime = ''
this.tempRange.before = ''
this.tempRange.after = ''
this.cale.multipleStatus.before = ''
this.cale.multipleStatus.after = ''
this.cale.multipleStatus.data = []
this.cale.lastHover = false
} else {
this.time = ''
this.tempSingleDate = ''
}
this.calendar.fullDate = ''
this.setDate(new Date())
},
bindDateChange(e) {
const value = e.detail.value + '-1'
this.setDate(value)
},
/**
* 初始化日期显示
* @param {Object} date
*/
init(date) {
// 字节小程序 watch 早于 created
if (!this.cale) {
return
}
this.cale.setDate(date || new Date())
this.weeks = this.cale.weeks
this.nowDate = this.cale.getInfo(date)
this.calendar = {
...this.nowDate
}
if (!date) {
// 优化date为空默认不选中今天
this.calendar.fullDate = ''
if (this.defaultValue && !this.range) {
// 暂时只支持移动端非范围选择
const defaultDate = new Date(this.defaultValue)
const fullDate = getDate(defaultDate)
const year = defaultDate.getFullYear()
const month = defaultDate.getMonth() + 1
const date = defaultDate.getDate()
const day = defaultDate.getDay()
this.calendar = {
fullDate,
year,
month,
date,
day
},
this.tempSingleDate = fullDate
this.time = getTime(defaultDate, this.hideSecond)
}
}
},
/**
* 打开日历弹窗
*/
open() {
// 弹窗模式并且清理数据
if (this.clearDate && !this.insert) {
this.cale.cleanMultipleStatus()
this.init(this.date)
}
this.show = true
this.$nextTick(() => {
setTimeout(() => {
this.aniMaskShow = true
}, 50)
})
},
/**
* 关闭日历弹窗
*/
close() {
this.aniMaskShow = false
this.$nextTick(() => {
setTimeout(() => {
this.show = false
this.$emit('close')
}, 300)
})
},
/**
* 确认按钮
*/
confirm() {
this.setEmit('confirm')
this.close()
},
/**
* 变化触发
*/
change(isSingleChange) {
if (!this.insert && !isSingleChange) return
this.setEmit('change')
},
/**
* 选择月份触发
*/
monthSwitch() {
let {
year,
month
} = this.nowDate
this.$emit('monthSwitch', {
year,
month: Number(month)
})
},
/**
* 派发事件
* @param {Object} name
*/
setEmit(name) {
if (!this.range) {
if (!this.calendar.fullDate) {
this.calendar = this.cale.getInfo(new Date())
this.tempSingleDate = this.calendar.fullDate
}
if (this.hasTime && !this.time) {
this.time = getTime(new Date(), this.hideSecond)
}
}
let {
year,
month,
date,
fullDate,
extraInfo
} = this.calendar
this.$emit(name, {
range: this.cale.multipleStatus,
year,
month,
date,
time: this.time,
timeRange: this.timeRange,
fulldate: fullDate,
extraInfo: extraInfo || {}
})
},
/**
* 选择天触发
* @param {Object} weeks
*/
choiceDate(weeks) {
if (weeks.disable) return
this.calendar = weeks
this.calendar.userChecked = true
// 设置多选
this.cale.setMultiple(this.calendar.fullDate, true)
this.weeks = this.cale.weeks
this.tempSingleDate = this.calendar.fullDate
const beforeDate = new Date(this.cale.multipleStatus.before).getTime()
const afterDate = new Date(this.cale.multipleStatus.after).getTime()
if (beforeDate > afterDate && afterDate) {
this.tempRange.before = this.cale.multipleStatus.after
this.tempRange.after = this.cale.multipleStatus.before
} else {
this.tempRange.before = this.cale.multipleStatus.before
this.tempRange.after = this.cale.multipleStatus.after
}
this.change(true)
},
changeMonth(type) {
let newDate
if (type === 'pre') {
newDate = this.cale.getPreMonthObj(this.nowDate.fullDate).fullDate
} else if (type === 'next') {
newDate = this.cale.getNextMonthObj(this.nowDate.fullDate).fullDate
}
this.setDate(newDate)
this.monthSwitch()
},
/**
* 设置日期
* @param {Object} date
*/
setDate(date) {
this.cale.setDate(date)
this.weeks = this.cale.weeks
this.nowDate = this.cale.getInfo(date)
}
}
}
</script>
<style lang="scss">
$uni-primary: #007aff !default;
.uni-calendar {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: column;
}
.uni-calendar__mask {
position: fixed;
bottom: 0;
top: 0;
left: 0;
right: 0;
background-color: rgba(0, 0, 0, 0.4);
transition-property: opacity;
transition-duration: 0.3s;
opacity: 0;
/* #ifndef APP-NVUE */
z-index: 99;
/* #endif */
}
.uni-calendar--mask-show {
opacity: 1
}
.uni-calendar--fixed {
position: fixed;
bottom: calc(var(--window-bottom));
left: 0;
right: 0;
transition-property: transform;
transition-duration: 0.3s;
transform: translateY(460px);
/* #ifndef APP-NVUE */
z-index: 99;
/* #endif */
}
.uni-calendar--ani-show {
transform: translateY(0);
}
.uni-calendar__content {
background-color: #fff;
}
.uni-calendar__content-mobile {
border-top-left-radius: 10px;
border-top-right-radius: 10px;
box-shadow: 0px 0px 5px 3px rgba(0, 0, 0, 0.1);
}
.uni-calendar__header {
position: relative;
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: row;
justify-content: center;
align-items: center;
height: 50px;
}
.uni-calendar__header-mobile {
padding: 10px;
padding-bottom: 0;
}
.uni-calendar--fixed-top {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: row;
justify-content: space-between;
border-top-color: rgba(0, 0, 0, 0.4);
border-top-style: solid;
border-top-width: 1px;
}
.uni-calendar--fixed-width {
width: 50px;
}
.uni-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: #fff;
background-color: #f1f1f1;
}
.uni-calendar__header-text {
text-align: center;
width: 100px;
font-size: 15px;
color: #666;
}
.uni-calendar__button-text {
text-align: center;
width: 100px;
font-size: 14px;
color: $uni-primary;
/* #ifndef APP-NVUE */
letter-spacing: 3px;
/* #endif */
}
.uni-calendar__header-btn-box {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: row;
align-items: center;
justify-content: center;
width: 50px;
height: 50px;
}
.uni-calendar__header-btn {
width: 9px;
height: 9px;
border-left-color: #808080;
border-left-style: solid;
border-left-width: 1px;
border-top-color: #555555;
border-top-style: solid;
border-top-width: 1px;
}
.uni-calendar--left {
transform: rotate(-45deg);
}
.uni-calendar--right {
transform: rotate(135deg);
}
.uni-calendar__weeks {
position: relative;
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: row;
}
.uni-calendar__weeks-item {
flex: 1;
}
.uni-calendar__weeks-day {
flex: 1;
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: column;
justify-content: center;
align-items: center;
height: 40px;
border-bottom-color: #F5F5F5;
border-bottom-style: solid;
border-bottom-width: 1px;
}
.uni-calendar__weeks-day-text {
font-size: 12px;
color: #B2B2B2;
}
.uni-calendar__box {
position: relative;
// padding: 0 10px;
padding-bottom: 7px;
}
.uni-calendar__box-bg {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
justify-content: center;
align-items: center;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.uni-calendar__box-bg-text {
font-size: 200px;
font-weight: bold;
color: #999;
opacity: 0.1;
text-align: center;
/* #ifndef APP-NVUE */
line-height: 1;
/* #endif */
}
.uni-date-changed {
padding: 0 10px;
// line-height: 50px;
text-align: center;
color: #333;
border-top-color: #DCDCDC;
;
border-top-style: solid;
border-top-width: 1px;
flex: 1;
}
.uni-date-btn--ok {
padding: 20px 15px;
}
.uni-date-changed--time-start {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
align-items: center;
}
.uni-date-changed--time-end {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
align-items: center;
}
.uni-date-changed--time-date {
color: #999;
line-height: 50px;
/* #ifdef MP-TOUTIAO */
font-size: 16px;
/* #endif */
margin-right: 5px;
// opacity: 0.6;
}
.time-picker-style {
// width: 62px;
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
justify-content: center;
align-items: center
}
.mr-10 {
margin-right: 10px;
}
.dialog-close {
position: absolute;
top: 0;
right: 0;
bottom: 0;
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: row;
align-items: center;
padding: 0 25px;
margin-top: 10px;
}
.dialog-close-plus {
width: 16px;
height: 2px;
background-color: #737987;
border-radius: 2px;
transform: rotate(45deg);
}
.dialog-close-rotate {
position: absolute;
transform: rotate(-45deg);
}
.uni-datetime-picker--btn {
border-radius: 100px;
height: 40px;
line-height: 40px;
background-color: $uni-primary;
color: #fff;
font-size: 16px;
letter-spacing: 2px;
}
/* #ifndef APP-NVUE */
.uni-datetime-picker--btn:active {
opacity: 0.7;
}
/* #endif */
</style>

View File

@@ -0,0 +1,22 @@
{
"uni-datetime-picker.selectDate": "select date",
"uni-datetime-picker.selectTime": "select time",
"uni-datetime-picker.selectDateTime": "select date and time",
"uni-datetime-picker.startDate": "start date",
"uni-datetime-picker.endDate": "end date",
"uni-datetime-picker.startTime": "start time",
"uni-datetime-picker.endTime": "end time",
"uni-datetime-picker.ok": "ok",
"uni-datetime-picker.clear": "clear",
"uni-datetime-picker.cancel": "cancel",
"uni-datetime-picker.year": "-",
"uni-datetime-picker.month": "",
"uni-calender.MON": "MON",
"uni-calender.TUE": "TUE",
"uni-calender.WED": "WED",
"uni-calender.THU": "THU",
"uni-calender.FRI": "FRI",
"uni-calender.SAT": "SAT",
"uni-calender.SUN": "SUN",
"uni-calender.confirm": "confirm"
}

View File

@@ -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
}

View File

@@ -0,0 +1,22 @@
{
"uni-datetime-picker.selectDate": "选择日期",
"uni-datetime-picker.selectTime": "选择时间",
"uni-datetime-picker.selectDateTime": "选择日期时间",
"uni-datetime-picker.startDate": "开始日期",
"uni-datetime-picker.endDate": "结束日期",
"uni-datetime-picker.startTime": "开始时间",
"uni-datetime-picker.endTime": "结束时间",
"uni-datetime-picker.ok": "确定",
"uni-datetime-picker.clear": "清除",
"uni-datetime-picker.cancel": "取消",
"uni-datetime-picker.year": "年",
"uni-datetime-picker.month": "月",
"uni-calender.SUN": "日",
"uni-calender.MON": "一",
"uni-calender.TUE": "二",
"uni-calender.WED": "三",
"uni-calender.THU": "四",
"uni-calender.FRI": "五",
"uni-calender.SAT": "六",
"uni-calender.confirm": "确认"
}

View File

@@ -0,0 +1,22 @@
{
"uni-datetime-picker.selectDate": "選擇日期",
"uni-datetime-picker.selectTime": "選擇時間",
"uni-datetime-picker.selectDateTime": "選擇日期時間",
"uni-datetime-picker.startDate": "開始日期",
"uni-datetime-picker.endDate": "結束日期",
"uni-datetime-picker.startTime": "開始时间",
"uni-datetime-picker.endTime": "結束时间",
"uni-datetime-picker.ok": "確定",
"uni-datetime-picker.clear": "清除",
"uni-datetime-picker.cancel": "取消",
"uni-datetime-picker.year": "年",
"uni-datetime-picker.month": "月",
"uni-calender.SUN": "日",
"uni-calender.MON": "一",
"uni-calender.TUE": "二",
"uni-calender.WED": "三",
"uni-calender.THU": "四",
"uni-calender.FRI": "五",
"uni-calender.SAT": "六",
"uni-calender.confirm": "確認"
}

View File

@@ -0,0 +1,940 @@
<template>
<view class="uni-datetime-picker">
<view @click="initTimePicker">
<slot>
<view class="uni-datetime-picker-timebox-pointer"
:class="{'uni-datetime-picker-disabled': disabled, 'uni-datetime-picker-timebox': border}">
<text class="uni-datetime-picker-text">{{time}}</text>
<view v-if="!time" class="uni-datetime-picker-time">
<text class="uni-datetime-picker-text">{{selectTimeText}}</text>
</view>
</view>
</slot>
</view>
<view v-if="visible" id="mask" class="uni-datetime-picker-mask" @click="tiggerTimePicker"></view>
<view v-if="visible" class="uni-datetime-picker-popup" :class="[dateShow && timeShow ? '' : 'fix-nvue-height']"
:style="fixNvueBug">
<view class="uni-title">
<text class="uni-datetime-picker-text">{{selectTimeText}}</text>
</view>
<view v-if="dateShow" class="uni-datetime-picker__container-box">
<picker-view class="uni-datetime-picker-view" :indicator-style="indicatorStyle" :value="ymd"
@change="bindDateChange">
<picker-view-column>
<view class="uni-datetime-picker-item" v-for="(item,index) in years" :key="index">
<text class="uni-datetime-picker-item">{{lessThanTen(item)}}</text>
</view>
</picker-view-column>
<picker-view-column>
<view class="uni-datetime-picker-item" v-for="(item,index) in months" :key="index">
<text class="uni-datetime-picker-item">{{lessThanTen(item)}}</text>
</view>
</picker-view-column>
<picker-view-column>
<view class="uni-datetime-picker-item" v-for="(item,index) in days" :key="index">
<text class="uni-datetime-picker-item">{{lessThanTen(item)}}</text>
</view>
</picker-view-column>
</picker-view>
<!-- 兼容 nvue 不支持伪类 -->
<text class="uni-datetime-picker-sign sign-left">-</text>
<text class="uni-datetime-picker-sign sign-right">-</text>
</view>
<view v-if="timeShow" class="uni-datetime-picker__container-box">
<picker-view class="uni-datetime-picker-view" :class="[hideSecond ? 'time-hide-second' : '']"
:indicator-style="indicatorStyle" :value="hms" @change="bindTimeChange">
<picker-view-column>
<view class="uni-datetime-picker-item" v-for="(item,index) in hours" :key="index">
<text class="uni-datetime-picker-item">{{lessThanTen(item)}}</text>
</view>
</picker-view-column>
<picker-view-column>
<view class="uni-datetime-picker-item" v-for="(item,index) in minutes" :key="index">
<text class="uni-datetime-picker-item">{{lessThanTen(item)}}</text>
</view>
</picker-view-column>
<picker-view-column v-if="!hideSecond">
<view class="uni-datetime-picker-item" v-for="(item,index) in seconds" :key="index">
<text class="uni-datetime-picker-item">{{lessThanTen(item)}}</text>
</view>
</picker-view-column>
</picker-view>
<!-- 兼容 nvue 不支持伪类 -->
<text class="uni-datetime-picker-sign" :class="[hideSecond ? 'sign-center' : 'sign-left']">:</text>
<text v-if="!hideSecond" class="uni-datetime-picker-sign sign-right">:</text>
</view>
<view class="uni-datetime-picker-btn">
<view @click="clearTime">
<text class="uni-datetime-picker-btn-text">{{clearText}}</text>
</view>
<view class="uni-datetime-picker-btn-group">
<view class="uni-datetime-picker-cancel" @click="tiggerTimePicker">
<text class="uni-datetime-picker-btn-text">{{cancelText}}</text>
</view>
<view @click="setTime">
<text class="uni-datetime-picker-btn-text">{{okText}}</text>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
import {
initVueI18n
} from '@dcloudio/uni-i18n'
import i18nMessages from './i18n/index.js'
const {
t
} = initVueI18n(i18nMessages)
import {
fixIosDateFormat
} from './util'
/**
* DatetimePicker 时间选择器
* @description 可以同时选择日期和时间的选择器
* @tutorial https://ext.dcloud.net.cn/plugin?id=xxx
* @property {String} type = [datetime | date | time] 显示模式
* @property {Boolean} multiple = [true|false] 是否多选
* @property {String|Number} value 默认值
* @property {String|Number} start 起始日期或时间
* @property {String|Number} end 起始日期或时间
* @property {String} return-type = [timestamp | string]
* @event {Function} change 选中发生变化触发
*/
export default {
name: 'UniDatetimePicker',
data() {
return {
indicatorStyle: `height: 50px;`,
visible: false,
fixNvueBug: {},
dateShow: true,
timeShow: true,
title: '日期和时间',
// 输入框当前时间
time: '',
// 当前的年月日时分秒
year: 1920,
month: 0,
day: 0,
hour: 0,
minute: 0,
second: 0,
// 起始时间
startYear: 1920,
startMonth: 1,
startDay: 1,
startHour: 0,
startMinute: 0,
startSecond: 0,
// 结束时间
endYear: 2120,
endMonth: 12,
endDay: 31,
endHour: 23,
endMinute: 59,
endSecond: 59,
}
},
options: {
// #ifdef MP-TOUTIAO
virtualHost: false,
// #endif
// #ifndef MP-TOUTIAO
virtualHost: true
// #endif
},
props: {
type: {
type: String,
default: 'datetime'
},
value: {
type: [String, Number],
default: ''
},
modelValue: {
type: [String, Number],
default: ''
},
start: {
type: [Number, String],
default: ''
},
end: {
type: [Number, String],
default: ''
},
returnType: {
type: String,
default: 'string'
},
disabled: {
type: [Boolean, String],
default: false
},
border: {
type: [Boolean, String],
default: true
},
hideSecond: {
type: [Boolean, String],
default: false
}
},
watch: {
// #ifndef VUE3
value: {
handler(newVal) {
if (newVal) {
this.parseValue(fixIosDateFormat(newVal))
this.initTime(false)
} else {
this.time = ''
this.parseValue(Date.now())
}
},
immediate: true
},
// #endif
// #ifdef VUE3
modelValue: {
handler(newVal) {
if (newVal) {
this.parseValue(fixIosDateFormat(newVal))
this.initTime(false)
} else {
this.time = ''
this.parseValue(Date.now())
}
},
immediate: true
},
// #endif
type: {
handler(newValue) {
if (newValue === 'date') {
this.dateShow = true
this.timeShow = false
this.title = '日期'
} else if (newValue === 'time') {
this.dateShow = false
this.timeShow = true
this.title = '时间'
} else {
this.dateShow = true
this.timeShow = true
this.title = '日期和时间'
}
},
immediate: true
},
start: {
handler(newVal) {
this.parseDatetimeRange(fixIosDateFormat(newVal), 'start')
},
immediate: true
},
end: {
handler(newVal) {
this.parseDatetimeRange(fixIosDateFormat(newVal), 'end')
},
immediate: true
},
// 月、日、时、分、秒可选范围变化后,检查当前值是否在范围内,不在则当前值重置为可选范围第一项
months(newVal) {
this.checkValue('month', this.month, newVal)
},
days(newVal) {
this.checkValue('day', this.day, newVal)
},
hours(newVal) {
this.checkValue('hour', this.hour, newVal)
},
minutes(newVal) {
this.checkValue('minute', this.minute, newVal)
},
seconds(newVal) {
this.checkValue('second', this.second, newVal)
}
},
computed: {
// 当前年、月、日、时、分、秒选择范围
years() {
return this.getCurrentRange('year')
},
months() {
return this.getCurrentRange('month')
},
days() {
return this.getCurrentRange('day')
},
hours() {
return this.getCurrentRange('hour')
},
minutes() {
return this.getCurrentRange('minute')
},
seconds() {
return this.getCurrentRange('second')
},
// picker 当前值数组
ymd() {
return [this.year - this.minYear, this.month - this.minMonth, this.day - this.minDay]
},
hms() {
return [this.hour - this.minHour, this.minute - this.minMinute, this.second - this.minSecond]
},
// 当前 date 是 start
currentDateIsStart() {
return this.year === this.startYear && this.month === this.startMonth && this.day === this.startDay
},
// 当前 date 是 end
currentDateIsEnd() {
return this.year === this.endYear && this.month === this.endMonth && this.day === this.endDay
},
// 当前年、月、日、时、分、秒的最小值和最大值
minYear() {
return this.startYear
},
maxYear() {
return this.endYear
},
minMonth() {
if (this.year === this.startYear) {
return this.startMonth
} else {
return 1
}
},
maxMonth() {
if (this.year === this.endYear) {
return this.endMonth
} else {
return 12
}
},
minDay() {
if (this.year === this.startYear && this.month === this.startMonth) {
return this.startDay
} else {
return 1
}
},
maxDay() {
if (this.year === this.endYear && this.month === this.endMonth) {
return this.endDay
} else {
return this.daysInMonth(this.year, this.month)
}
},
minHour() {
if (this.type === 'datetime') {
if (this.currentDateIsStart) {
return this.startHour
} else {
return 0
}
}
if (this.type === 'time') {
return this.startHour
}
},
maxHour() {
if (this.type === 'datetime') {
if (this.currentDateIsEnd) {
return this.endHour
} else {
return 23
}
}
if (this.type === 'time') {
return this.endHour
}
},
minMinute() {
if (this.type === 'datetime') {
if (this.currentDateIsStart && this.hour === this.startHour) {
return this.startMinute
} else {
return 0
}
}
if (this.type === 'time') {
if (this.hour === this.startHour) {
return this.startMinute
} else {
return 0
}
}
},
maxMinute() {
if (this.type === 'datetime') {
if (this.currentDateIsEnd && this.hour === this.endHour) {
return this.endMinute
} else {
return 59
}
}
if (this.type === 'time') {
if (this.hour === this.endHour) {
return this.endMinute
} else {
return 59
}
}
},
minSecond() {
if (this.type === 'datetime') {
if (this.currentDateIsStart && this.hour === this.startHour && this.minute === this.startMinute) {
return this.startSecond
} else {
return 0
}
}
if (this.type === 'time') {
if (this.hour === this.startHour && this.minute === this.startMinute) {
return this.startSecond
} else {
return 0
}
}
},
maxSecond() {
if (this.type === 'datetime') {
if (this.currentDateIsEnd && this.hour === this.endHour && this.minute === this.endMinute) {
return this.endSecond
} else {
return 59
}
}
if (this.type === 'time') {
if (this.hour === this.endHour && this.minute === this.endMinute) {
return this.endSecond
} else {
return 59
}
}
},
/**
* for i18n
*/
selectTimeText() {
return t("uni-datetime-picker.selectTime")
},
okText() {
return t("uni-datetime-picker.ok")
},
clearText() {
return t("uni-datetime-picker.clear")
},
cancelText() {
return t("uni-datetime-picker.cancel")
}
},
mounted() {
// #ifdef APP-NVUE
const res = uni.getSystemInfoSync();
this.fixNvueBug = {
top: res.windowHeight / 2,
left: res.windowWidth / 2
}
// #endif
},
methods: {
/**
* @param {Object} item
* 小于 10 在前面加个 0
*/
lessThanTen(item) {
return item < 10 ? '0' + item : item
},
/**
* 解析时分秒字符串例如00:00:00
* @param {String} timeString
*/
parseTimeType(timeString) {
if (timeString) {
let timeArr = timeString.split(':')
this.hour = Number(timeArr[0])
this.minute = Number(timeArr[1])
this.second = Number(timeArr[2])
}
},
/**
* 解析选择器初始值类型可以是字符串、时间戳例如2000-10-02、'08:30:00'、 1610695109000
* @param {String | Number} datetime
*/
initPickerValue(datetime) {
let defaultValue = null
if (datetime) {
defaultValue = this.compareValueWithStartAndEnd(datetime, this.start, this.end)
} else {
defaultValue = Date.now()
defaultValue = this.compareValueWithStartAndEnd(defaultValue, this.start, this.end)
}
this.parseValue(defaultValue)
},
/**
* 初始值规则:
* - 用户设置初始值 value
* - 设置了起始时间 start、终止时间 end并 start < value < end初始值为 value 否则初始值为 start
* - 只设置了起始时间 start并 start < value初始值为 value否则初始值为 start
* - 只设置了终止时间 end并 value < end初始值为 value否则初始值为 end
* - 无起始终止时间,则初始值为 value
* - 无初始值 value则初始值为当前本地时间 Date.now()
* @param {Object} value
* @param {Object} dateBase
*/
compareValueWithStartAndEnd(value, start, end) {
let winner = null
value = this.superTimeStamp(value)
start = this.superTimeStamp(start)
end = this.superTimeStamp(end)
if (start && end) {
if (value < start) {
winner = new Date(start)
} else if (value > end) {
winner = new Date(end)
} else {
winner = new Date(value)
}
} else if (start && !end) {
winner = start <= value ? new Date(value) : new Date(start)
} else if (!start && end) {
winner = value <= end ? new Date(value) : new Date(end)
} else {
winner = new Date(value)
}
return winner
},
/**
* 转换为可比较的时间戳,接受日期、时分秒、时间戳
* @param {Object} value
*/
superTimeStamp(value) {
let dateBase = ''
if (this.type === 'time' && value && typeof value === 'string') {
const now = new Date()
const year = now.getFullYear()
const month = now.getMonth() + 1
const day = now.getDate()
dateBase = year + '/' + month + '/' + day + ' '
}
if (Number(value)) {
value = parseInt(value)
dateBase = 0
}
return this.createTimeStamp(dateBase + value)
},
/**
* 解析默认值 value字符串、时间戳
* @param {Object} defaultTime
*/
parseValue(value) {
if (!value) {
return
}
if (this.type === 'time' && typeof value === "string") {
this.parseTimeType(value)
} else {
let defaultDate = null
defaultDate = new Date(value)
if (this.type !== 'time') {
this.year = defaultDate.getFullYear()
this.month = defaultDate.getMonth() + 1
this.day = defaultDate.getDate()
}
if (this.type !== 'date') {
this.hour = defaultDate.getHours()
this.minute = defaultDate.getMinutes()
this.second = defaultDate.getSeconds()
}
}
if (this.hideSecond) {
this.second = 0
}
},
/**
* 解析可选择时间范围 start、end年月日字符串、时间戳
* @param {Object} defaultTime
*/
parseDatetimeRange(point, pointType) {
// 时间为空,则重置为初始值
if (!point) {
if (pointType === 'start') {
this.startYear = 1920
this.startMonth = 1
this.startDay = 1
this.startHour = 0
this.startMinute = 0
this.startSecond = 0
}
if (pointType === 'end') {
this.endYear = 2120
this.endMonth = 12
this.endDay = 31
this.endHour = 23
this.endMinute = 59
this.endSecond = 59
}
return
}
if (this.type === 'time') {
const pointArr = point.split(':')
this[pointType + 'Hour'] = Number(pointArr[0])
this[pointType + 'Minute'] = Number(pointArr[1])
this[pointType + 'Second'] = Number(pointArr[2])
} else {
if (!point) {
pointType === 'start' ? this.startYear = this.year - 60 : this.endYear = this.year + 60
return
}
if (Number(point)) {
point = parseInt(point)
}
// datetime 的 end 没有时分秒, 则不限制
const hasTime = /[0-9]:[0-9]/
if (this.type === 'datetime' && pointType === 'end' && typeof point === 'string' && !hasTime.test(
point)) {
point = point + ' 23:59:59'
}
const pointDate = new Date(point)
this[pointType + 'Year'] = pointDate.getFullYear()
this[pointType + 'Month'] = pointDate.getMonth() + 1
this[pointType + 'Day'] = pointDate.getDate()
if (this.type === 'datetime') {
this[pointType + 'Hour'] = pointDate.getHours()
this[pointType + 'Minute'] = pointDate.getMinutes()
this[pointType + 'Second'] = pointDate.getSeconds()
}
}
},
// 获取 年、月、日、时、分、秒 当前可选范围
getCurrentRange(value) {
const range = []
for (let i = this['min' + this.capitalize(value)]; i <= this['max' + this.capitalize(value)]; i++) {
range.push(i)
}
return range
},
// 字符串首字母大写
capitalize(str) {
return str.charAt(0).toUpperCase() + str.slice(1)
},
// 检查当前值是否在范围内,不在则当前值重置为可选范围第一项
checkValue(name, value, values) {
if (values.indexOf(value) === -1) {
this[name] = values[0]
}
},
// 每个月的实际天数
daysInMonth(year, month) { // Use 1 for January, 2 for February, etc.
return new Date(year, month, 0).getDate();
},
/**
* 生成时间戳
* @param {Object} time
*/
createTimeStamp(time) {
if (!time) return
if (typeof time === "number") {
return time
} else {
time = time.replace(/-/g, '/')
if (this.type === 'date') {
time = time + ' ' + '00:00:00'
}
return Date.parse(time)
}
},
/**
* 生成日期或时间的字符串
*/
createDomSting() {
const yymmdd = this.year +
'-' +
this.lessThanTen(this.month) +
'-' +
this.lessThanTen(this.day)
let hhmmss = this.lessThanTen(this.hour) +
':' +
this.lessThanTen(this.minute)
if (!this.hideSecond) {
hhmmss = hhmmss + ':' + this.lessThanTen(this.second)
}
if (this.type === 'date') {
return yymmdd
} else if (this.type === 'time') {
return hhmmss
} else {
return yymmdd + ' ' + hhmmss
}
},
/**
* 初始化返回值,并抛出 change 事件
*/
initTime(emit = true) {
this.time = this.createDomSting()
if (!emit) return
if (this.returnType === 'timestamp' && this.type !== 'time') {
this.$emit('change', this.createTimeStamp(this.time))
this.$emit('input', this.createTimeStamp(this.time))
this.$emit('update:modelValue', this.createTimeStamp(this.time))
} else {
this.$emit('change', this.time)
this.$emit('input', this.time)
this.$emit('update:modelValue', this.time)
}
},
/**
* 用户选择日期或时间更新 data
* @param {Object} e
*/
bindDateChange(e) {
const val = e.detail.value
this.year = this.years[val[0]]
this.month = this.months[val[1]]
this.day = this.days[val[2]]
},
bindTimeChange(e) {
const val = e.detail.value
this.hour = this.hours[val[0]]
this.minute = this.minutes[val[1]]
this.second = this.seconds[val[2]]
},
/**
* 初始化弹出层
*/
initTimePicker() {
if (this.disabled) return
const value = fixIosDateFormat(this.time)
this.initPickerValue(value)
this.visible = !this.visible
},
/**
* 触发或关闭弹框
*/
tiggerTimePicker(e) {
this.visible = !this.visible
},
/**
* 用户点击“清空”按钮,清空当前值
*/
clearTime() {
this.time = ''
this.$emit('change', this.time)
this.$emit('input', this.time)
this.$emit('update:modelValue', this.time)
this.tiggerTimePicker()
},
/**
* 用户点击“确定”按钮
*/
setTime() {
this.initTime()
this.tiggerTimePicker()
}
}
}
</script>
<style lang="scss">
$uni-primary: #007aff !default;
.uni-datetime-picker {
/* #ifndef APP-NVUE */
/* width: 100%; */
/* #endif */
}
.uni-datetime-picker-view {
height: 130px;
width: 270px;
/* #ifndef APP-NVUE */
cursor: pointer;
/* #endif */
}
.uni-datetime-picker-item {
height: 50px;
line-height: 50px;
text-align: center;
font-size: 14px;
}
.uni-datetime-picker-btn {
margin-top: 60px;
/* #ifndef APP-NVUE */
display: flex;
cursor: pointer;
/* #endif */
flex-direction: row;
justify-content: space-between;
}
.uni-datetime-picker-btn-text {
font-size: 14px;
color: $uni-primary;
}
.uni-datetime-picker-btn-group {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: row;
}
.uni-datetime-picker-cancel {
margin-right: 30px;
}
.uni-datetime-picker-mask {
position: fixed;
bottom: 0px;
top: 0px;
left: 0px;
right: 0px;
background-color: rgba(0, 0, 0, 0.4);
transition-duration: 0.3s;
z-index: 998;
}
.uni-datetime-picker-popup {
border-radius: 8px;
padding: 30px;
width: 270px;
/* #ifdef APP-NVUE */
height: 500px;
/* #endif */
/* #ifdef APP-NVUE */
width: 330px;
/* #endif */
background-color: #fff;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
transition-duration: 0.3s;
z-index: 999;
}
.fix-nvue-height {
/* #ifdef APP-NVUE */
height: 330px;
/* #endif */
}
.uni-datetime-picker-time {
color: grey;
}
.uni-datetime-picker-column {
height: 50px;
}
.uni-datetime-picker-timebox {
border: 1px solid #E5E5E5;
border-radius: 5px;
padding: 7px 10px;
/* #ifndef APP-NVUE */
box-sizing: border-box;
cursor: pointer;
/* #endif */
}
.uni-datetime-picker-timebox-pointer {
/* #ifndef APP-NVUE */
cursor: pointer;
/* #endif */
}
.uni-datetime-picker-disabled {
opacity: 0.4;
/* #ifdef H5 */
cursor: not-allowed !important;
/* #endif */
}
.uni-datetime-picker-text {
font-size: 14px;
line-height: 50px
}
.uni-datetime-picker-sign {
position: absolute;
top: 53px;
/* 减掉 10px 的元素高度兼容nvue */
color: #999;
/* #ifdef APP-NVUE */
font-size: 16px;
/* #endif */
}
.sign-left {
left: 86px;
}
.sign-right {
right: 86px;
}
.sign-center {
left: 135px;
}
.uni-datetime-picker__container-box {
position: relative;
display: flex;
align-items: center;
justify-content: center;
margin-top: 40px;
}
.time-hide-second {
width: 180px;
}
</style>

View File

@@ -0,0 +1,421 @@
class Calendar {
constructor({
selected,
startDate,
endDate,
range,
} = {}) {
// 当前日期
this.date = this.getDateObj(new Date()) // 当前初入日期
// 打点信息
this.selected = selected || [];
// 起始时间
this.startDate = startDate
// 终止时间
this.endDate = endDate
// 是否范围选择
this.range = range
// 多选状态
this.cleanMultipleStatus()
// 每周日期
this.weeks = {}
this.lastHover = false
}
/**
* 设置日期
* @param {Object} date
*/
setDate(date) {
const selectDate = this.getDateObj(date)
this.getWeeks(selectDate.fullDate)
}
/**
* 清理多选状态
*/
cleanMultipleStatus() {
this.multipleStatus = {
before: '',
after: '',
data: []
}
}
setStartDate(startDate) {
this.startDate = startDate
}
setEndDate(endDate) {
this.endDate = endDate
}
getPreMonthObj(date) {
date = fixIosDateFormat(date)
date = new Date(date)
const oldMonth = date.getMonth()
date.setMonth(oldMonth - 1)
const newMonth = date.getMonth()
if (oldMonth !== 0 && newMonth - oldMonth === 0) {
date.setMonth(newMonth - 1)
}
return this.getDateObj(date)
}
getNextMonthObj(date) {
date = fixIosDateFormat(date)
date = new Date(date)
const oldMonth = date.getMonth()
date.setMonth(oldMonth + 1)
const newMonth = date.getMonth()
if (newMonth - oldMonth > 1) {
date.setMonth(newMonth - 1)
}
return this.getDateObj(date)
}
/**
* 获取指定格式Date对象
*/
getDateObj(date) {
date = fixIosDateFormat(date)
date = new Date(date)
return {
fullDate: getDate(date),
year: date.getFullYear(),
month: addZero(date.getMonth() + 1),
date: addZero(date.getDate()),
day: date.getDay()
}
}
/**
* 获取上一个月日期集合
*/
getPreMonthDays(amount, dateObj) {
const result = []
for (let i = amount - 1; i >= 0; i--) {
const month = dateObj.month - 1
result.push({
date: new Date(dateObj.year, month, -i).getDate(),
month,
disable: true
})
}
return result
}
/**
* 获取本月日期集合
*/
getCurrentMonthDays(amount, dateObj) {
const result = []
const fullDate = this.date.fullDate
for (let i = 1; i <= amount; i++) {
const currentDate = `${dateObj.year}-${dateObj.month}-${addZero(i)}`
const isToday = fullDate === currentDate
// 获取打点信息
const info = this.selected && this.selected.find((item) => {
if (this.dateEqual(currentDate, item.date)) {
return item
}
})
// 日期禁用
let disableBefore = true
let disableAfter = true
if (this.startDate) {
disableBefore = dateCompare(this.startDate, currentDate)
}
if (this.endDate) {
disableAfter = dateCompare(currentDate, this.endDate)
}
let multiples = this.multipleStatus.data
let multiplesStatus = -1
if (this.range && multiples) {
multiplesStatus = multiples.findIndex((item) => {
return this.dateEqual(item, currentDate)
})
}
const checked = multiplesStatus !== -1
result.push({
fullDate: currentDate,
year: dateObj.year,
date: i,
multiple: this.range ? checked : false,
beforeMultiple: this.isLogicBefore(currentDate, this.multipleStatus.before, this.multipleStatus.after),
afterMultiple: this.isLogicAfter(currentDate, this.multipleStatus.before, this.multipleStatus.after),
month: dateObj.month,
disable: (this.startDate && !dateCompare(this.startDate, currentDate)) || (this.endDate && !dateCompare(
currentDate, this.endDate)),
isToday,
userChecked: false,
extraInfo: info
})
}
return result
}
/**
* 获取下一个月日期集合
*/
_getNextMonthDays(amount, dateObj) {
const result = []
const month = dateObj.month + 1
for (let i = 1; i <= amount; i++) {
result.push({
date: i,
month,
disable: true
})
}
return result
}
/**
* 获取当前日期详情
* @param {Object} date
*/
getInfo(date) {
if (!date) {
date = new Date()
}
const res = this.calendar.find(item => item.fullDate === this.getDateObj(date).fullDate)
return res ? res : this.getDateObj(date)
}
/**
* 比较时间是否相等
*/
dateEqual(before, after) {
before = new Date(fixIosDateFormat(before))
after = new Date(fixIosDateFormat(after))
return before.valueOf() === after.valueOf()
}
/**
* 比较真实起始日期
*/
isLogicBefore(currentDate, before, after) {
let logicBefore = before
if (before && after) {
logicBefore = dateCompare(before, after) ? before : after
}
return this.dateEqual(logicBefore, currentDate)
}
isLogicAfter(currentDate, before, after) {
let logicAfter = after
if (before && after) {
logicAfter = dateCompare(before, after) ? after : before
}
return this.dateEqual(logicAfter, currentDate)
}
/**
* 获取日期范围内所有日期
* @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.getDateObj(new Date(parseInt(k))).fullDate)
}
return arr
}
/**
* 获取多选状态
*/
setMultiple(fullDate) {
if (!this.range) return
let {
before,
after
} = this.multipleStatus
if (before && after) {
if (!this.lastHover) {
this.lastHover = true
return
}
this.multipleStatus.before = fullDate
this.multipleStatus.after = ''
this.multipleStatus.data = []
this.multipleStatus.fulldate = ''
this.lastHover = false
} else {
if (!before) {
this.multipleStatus.before = fullDate
this.multipleStatus.after = undefined;
this.lastHover = false
} else {
this.multipleStatus.after = fullDate
if (dateCompare(this.multipleStatus.before, this.multipleStatus.after)) {
this.multipleStatus.data = this.geDateAll(this.multipleStatus.before, this.multipleStatus
.after);
} else {
this.multipleStatus.data = this.geDateAll(this.multipleStatus.after, this.multipleStatus
.before);
}
this.lastHover = true
}
}
this.getWeeks(fullDate)
}
/**
* 鼠标 hover 更新多选状态
*/
setHoverMultiple(fullDate) {
//抖音小程序点击会触发hover事件需要避免一下
// #ifndef MP-TOUTIAO
if (!this.range || this.lastHover) return
const {
before
} = this.multipleStatus
if (!before) {
this.multipleStatus.before = fullDate
} else {
this.multipleStatus.after = fullDate
if (dateCompare(this.multipleStatus.before, this.multipleStatus.after)) {
this.multipleStatus.data = this.geDateAll(this.multipleStatus.before, this.multipleStatus.after);
} else {
this.multipleStatus.data = this.geDateAll(this.multipleStatus.after, this.multipleStatus.before);
}
}
this.getWeeks(fullDate)
// #endif
}
/**
* 更新默认值多选状态
*/
setDefaultMultiple(before, after) {
this.multipleStatus.before = before
this.multipleStatus.after = after
if (before && after) {
if (dateCompare(before, after)) {
this.multipleStatus.data = this.geDateAll(before, after);
this.getWeeks(after)
} else {
this.multipleStatus.data = this.geDateAll(after, before);
this.getWeeks(before)
}
}
}
/**
* 获取每周数据
* @param {Object} dateData
*/
getWeeks(dateData) {
const {
year,
month,
} = this.getDateObj(dateData)
const preMonthDayAmount = new Date(year, month - 1, 1).getDay()
const preMonthDays = this.getPreMonthDays(preMonthDayAmount, this.getDateObj(dateData))
const currentMonthDayAmount = new Date(year, month, 0).getDate()
const currentMonthDays = this.getCurrentMonthDays(currentMonthDayAmount, this.getDateObj(dateData))
const nextMonthDayAmount = 42 - preMonthDayAmount - currentMonthDayAmount
const nextMonthDays = this._getNextMonthDays(nextMonthDayAmount, this.getDateObj(dateData))
const calendarDays = [...preMonthDays, ...currentMonthDays, ...nextMonthDays]
const weeks = new Array(6)
for (let i = 0; i < calendarDays.length; i++) {
const index = Math.floor(i / 7)
if (!weeks[index]) {
weeks[index] = new Array(7)
}
weeks[index][i % 7] = calendarDays[i]
}
this.calendar = calendarDays
this.weeks = weeks
}
}
function getDateTime(date, hideSecond) {
return `${getDate(date)} ${getTime(date, hideSecond)}`
}
function getDate(date) {
date = fixIosDateFormat(date)
date = new Date(date)
const year = date.getFullYear()
const month = date.getMonth() + 1
const day = date.getDate()
return `${year}-${addZero(month)}-${addZero(day)}`
}
function getTime(date, hideSecond) {
date = fixIosDateFormat(date)
date = new Date(date)
const hour = date.getHours()
const minute = date.getMinutes()
const second = date.getSeconds()
return hideSecond ? `${addZero(hour)}:${addZero(minute)}` : `${addZero(hour)}:${addZero(minute)}:${addZero(second)}`
}
function addZero(num) {
if (num < 10) {
num = `0${num}`
}
return num
}
function getDefaultSecond(hideSecond) {
return hideSecond ? '00:00' : '00:00:00'
}
function dateCompare(startDate, endDate) {
startDate = new Date(fixIosDateFormat(startDate))
endDate = new Date(fixIosDateFormat(endDate))
return startDate <= endDate
}
function checkDate(date) {
const dateReg = /((19|20)\d{2})(-|\/)\d{1,2}(-|\/)\d{1,2}/g
return date.match(dateReg)
}
//ios低版本15及以下无法匹配 没有 ’秒‘ 时的情况,所以需要在末尾 秒 加上 问号
const dateTimeReg = /^\d{4}-(0?[1-9]|1[012])-(0?[1-9]|[12][0-9]|3[01])( [0-5]?[0-9]:[0-5]?[0-9](:[0-5]?[0-9])?)?$/;
function fixIosDateFormat(value) {
if (typeof value === 'string' && dateTimeReg.test(value)) {
value = value.replace(/-/g, '/')
}
return value
}
export {
Calendar,
getDateTime,
getDate,
getTime,
addZero,
getDefaultSecond,
dateCompare,
checkDate,
fixIosDateFormat
}

View File

@@ -0,0 +1,90 @@
{
"id": "uni-datetime-picker",
"displayName": "uni-datetime-picker 日期选择器",
"version": "2.2.40",
"description": "uni-datetime-picker 日期时间选择器,支持日历,支持范围选择",
"keywords": [
"uni-datetime-picker",
"uni-ui",
"uniui",
"日期时间选择器",
"日期时间"
],
"repository": "https://github.com/dcloudio/uni-ui",
"engines": {
"HBuilderX": ""
},
"directories": {
"example": "../../temps/example_temps"
},
"dcloudext": {
"sale": {
"regular": {
"price": "0.00"
},
"sourcecode": {
"price": "0.00"
}
},
"contact": {
"qq": ""
},
"declaration": {
"ads": "无",
"data": "无",
"permissions": "无"
},
"npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui",
"type": "component-vue"
},
"uni_modules": {
"dependencies": [
"uni-scss",
"uni-icons"
],
"encrypt": [],
"platforms": {
"cloud": {
"tcb": "y",
"aliyun": "y",
"alipay": "n"
},
"client": {
"App": {
"app-vue": "y",
"app-nvue": "n",
"app-harmony": "u",
"app-uvue": "u"
},
"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"
},
"Vue": {
"vue2": "y",
"vue3": "y"
}
}
}
}
}

View File

@@ -0,0 +1,21 @@
> `重要通知:组件升级更新 2.0.0 后,支持日期+时间范围选择,组件 ui 将使用日历选择日期ui 变化较大,同时支持 PC 和 移动端。此版本不向后兼容不再支持单独的时间选择type=time及相关的 hide-second 属性(时间选可使用内置组件 picker。若仍需使用旧版本可在插件市场下载*非uni_modules版本*,旧版本将不再维护`
## DatetimePicker 时间选择器
> **组件名uni-datetime-picker**
> 代码块: `uDatetimePicker`
该组件的优势是,支持**时间戳**输入和输出(起始时间、终止时间也支持时间戳),可**同时选择**日期和时间。
若只是需要单独选择日期和时间,不需要时间戳输入和输出,可使用原生的 picker 组件。
**_点击 picker 默认值规则_**
- 若设置初始值 value, 会显示在 picker 显示框中
- 若无初始值 value则初始值 value 为当前本地时间 Date.now() 但不会显示在 picker 显示框中
### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-datetime-picker)
#### 如使用过程中有任何问题或者您对uni-ui有一些好的建议欢迎加入 uni-ui 交流群871950839

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@@ -1 +1 @@
{"version":3,"file":"request.js","sources":["components/request.js"],"sourcesContent":["export default function request(urldata) {\r\n const { url, data, method, header, userInfo } = urldata;\r\n const baseUrl =\r\n \"http://192.168.0.218:8086/\"\r\n + url;\r\n if (userInfo) {\r\n uni.getStorage({\r\n key: \"userinfo\",\r\n success: (res) => {\r\n if (res.data) {\r\n if (res.data.nickName) {\r\n return new Promise((resolve, reject) => {\r\n uni.request({\r\n url: baseUrl,\r\n data: data,\r\n method: method,\r\n header: header,\r\n success: function (res) {\r\n resolve(res.data);\r\n },\r\n fail: function (res) {\r\n reject(res);\r\n }\r\n });\r\n });\r\n } else {\r\n this.$global.lastPage = uni.page.route;\r\n uni.reLaunch({ url: \"/pages/UserInformation/UserInformation\" })\r\n }\r\n } else {\r\n this.$global.lastPage = uni.page.route;\r\n uni.navigateTo({ url: '/pages/login/login' })\r\n }\r\n }\r\n });\r\n } else {\r\n return new Promise((resolve, reject) => {\r\n uni.request({\r\n url: baseUrl,\r\n data: data,\r\n method: method,\r\n header: header,\r\n success: function (res) {\r\n resolve(res.data);\r\n },\r\n fail: function (res) {\r\n reject(res);\r\n }\r\n });\r\n });\r\n }\r\n\r\n}"],"names":["uni","res"],"mappings":";;AAAe,SAAS,QAAQ,SAAS;AACrC,QAAM,EAAE,KAAK,MAAM,QAAQ,QAAQ,SAAU,IAAG;AAChD,QAAM,UACF,+BACE;AACN,MAAI,UAAU;AACVA,kBAAAA,MAAI,WAAW;AAAA,MACX,KAAK;AAAA,MACL,SAAS,CAAC,QAAQ;AACd,YAAI,IAAI,MAAM;AACV,cAAI,IAAI,KAAK,UAAU;AACnB,mBAAO,IAAI,QAAQ,CAAC,SAAS,WAAW;AACpCA,4BAAAA,MAAI,QAAQ;AAAA,gBACR,KAAK;AAAA,gBACL;AAAA,gBACA;AAAA,gBACA;AAAA,gBACA,SAAS,SAAUC,MAAK;AACpB,0BAAQA,KAAI,IAAI;AAAA,gBACnB;AAAA,gBACD,MAAM,SAAUA,MAAK;AACjB,yBAAOA,IAAG;AAAA,gBACb;AAAA,cACjC,CAA6B;AAAA,YAC7B,CAAyB;AAAA,UACzB,OAA2B;AACH,iBAAK,QAAQ,WAAWD,cAAAA,MAAI,KAAK;AACjCA,0BAAAA,MAAI,SAAS,EAAE,KAAK,yCAAwC,CAAE;AAAA,UACjE;AAAA,QACrB,OAAuB;AACH,eAAK,QAAQ,WAAWA,cAAAA,MAAI,KAAK;AACjCA,wBAAAA,MAAI,WAAW,EAAE,KAAK,qBAAoB,CAAE;AAAA,QAC/C;AAAA,MACJ;AAAA,IACb,CAAS;AAAA,EACT,OAAW;AACH,WAAO,IAAI,QAAQ,CAAC,SAAS,WAAW;AACpCA,oBAAAA,MAAI,QAAQ;AAAA,QACR,KAAK;AAAA,QACL;AAAA,QACA;AAAA,QACA;AAAA,QACA,SAAS,SAAU,KAAK;AACpB,kBAAQ,IAAI,IAAI;AAAA,QACnB;AAAA,QACD,MAAM,SAAU,KAAK;AACjB,iBAAO,GAAG;AAAA,QACb;AAAA,MACjB,CAAa;AAAA,IACb,CAAS;AAAA,EACJ;AAEL;;"}
{"version":3,"file":"request.js","sources":["components/request.js"],"sourcesContent":["export default function request(urldata) {\r\n const { url, data, method, header, userInfo } = urldata;\r\n const baseUrl =\r\n \"http://192.168.0.218:8086/\"\r\n + url;\r\n if (userInfo) {\r\n return new Promise((resolve, reject) => {\r\n uni.getStorage({\r\n key: \"userinfo\",\r\n success: (res) => {\r\n if (res.data) {\r\n if (res.data.nickName) {\r\n uni.request({\r\n url: baseUrl,\r\n data: data,\r\n method: method,\r\n header: header,\r\n success: function (res) {\r\n console.log(\"请求成功1\", res.data);\r\n resolve(res.data);\r\n },\r\n fail: function (res) {\r\n reject(res);\r\n }\r\n });\r\n } else {\r\n this.$global.lastPage = uni.page.route;\r\n uni.reLaunch({ url: \"/pages/UserInformation/UserInformation\" })\r\n }\r\n } else {\r\n this.$global.lastPage = uni.page.route;\r\n uni.navigateTo({ url: '/pages/login/login' })\r\n }\r\n },\r\n fail: function (res) {\r\n reject(res);\r\n }\r\n });\r\n });\r\n } else {\r\n return new Promise((resolve, reject) => {\r\n uni.request({\r\n url: baseUrl,\r\n data: data,\r\n method: method,\r\n header: header,\r\n success: function (res) {\r\n console.log(\"请求成功2\", res);\r\n resolve(res.data);\r\n },\r\n fail: function (res) {\r\n reject(res);\r\n }\r\n });\r\n });\r\n }\r\n\r\n}"],"names":["uni","res"],"mappings":";;AAAe,SAAS,QAAQ,SAAS;AACrC,QAAM,EAAE,KAAK,MAAM,QAAQ,QAAQ,SAAU,IAAG;AAChD,QAAM,UACF,+BACE;AACN,MAAI,UAAU;AACV,WAAO,IAAI,QAAQ,CAAC,SAAS,WAAW;AACpCA,oBAAAA,MAAI,WAAW;AAAA,QACX,KAAK;AAAA,QACL,SAAS,CAAC,QAAQ;AACd,cAAI,IAAI,MAAM;AACV,gBAAI,IAAI,KAAK,UAAU;AACnBA,4BAAAA,MAAI,QAAQ;AAAA,gBACR,KAAK;AAAA,gBACL;AAAA,gBACA;AAAA,gBACA;AAAA,gBACA,SAAS,SAAUC,MAAK;AACpBD,gCAAA,MAAA,MAAA,OAAA,+BAAY,SAASC,KAAI,IAAI;AAC7B,0BAAQA,KAAI,IAAI;AAAA,gBACnB;AAAA,gBACD,MAAM,SAAUA,MAAK;AACjB,yBAAOA,IAAG;AAAA,gBACb;AAAA,cACjC,CAA6B;AAAA,YAC7B,OAA+B;AACH,mBAAK,QAAQ,WAAWD,cAAAA,MAAI,KAAK;AACjCA,4BAAAA,MAAI,SAAS,EAAE,KAAK,yCAAwC,CAAE;AAAA,YACjE;AAAA,UACzB,OAA2B;AACH,iBAAK,QAAQ,WAAWA,cAAAA,MAAI,KAAK;AACjCA,0BAAAA,MAAI,WAAW,EAAE,KAAK,qBAAoB,CAAE;AAAA,UAC/C;AAAA,QACJ;AAAA,QACD,MAAM,SAAU,KAAK;AACjB,iBAAO,GAAG;AAAA,QACb;AAAA,MACjB,CAAa;AAAA,IACb,CAAS;AAAA,EACT,OAAW;AACH,WAAO,IAAI,QAAQ,CAAC,SAAS,WAAW;AACpCA,oBAAAA,MAAI,QAAQ;AAAA,QACR,KAAK;AAAA,QACL;AAAA,QACA;AAAA,QACA;AAAA,QACA,SAAS,SAAU,KAAK;AACpBA,wBAAY,MAAA,MAAA,OAAA,+BAAA,SAAS,GAAG;AACxB,kBAAQ,IAAI,IAAI;AAAA,QACnB;AAAA,QACD,MAAM,SAAU,KAAK;AACjB,iBAAO,GAAG;AAAA,QACb;AAAA,MACjB,CAAa;AAAA,IACb,CAAS;AAAA,EACJ;AAEL;;"}

View File

@@ -1 +1 @@
{"version":3,"file":"Home.js","sources":["pages/Home/Home.vue","../../HBuilderX/plugins/uniapp-cli-vite/uniPage:/cGFnZXMvSG9tZS9Ib21lLnZ1ZQ"],"sourcesContent":["<template>\r\n <view class=\"page\">\r\n <image src=\"../../static/HomeBackground.png\" class=\"HomeBackground\"></image>\r\n </view>\r\n <view class=\"top-navigation-container\">\r\n <top-navigation></top-navigation>\r\n </view>\r\n <view class=\"Advertisement\" @click=\"goAdvertisement\">\r\n <advertisement></advertisement>\r\n </view>\r\n <view class=\"contentList\">\r\n <contentList></contentList>\r\n </view>\r\n <view class=\"tabBar\">\r\n <tabBar></tabBar>\r\n </view>\r\n</template>\r\n\r\n<script>\r\nimport topNavigation from \"../../components/topNavigation/topNavigation\";\r\nimport Advertisement from \"../../components/Advertisement/Advertisement\";\r\nimport contentList from \"../../components/contentList/contentList\";\r\nimport tabBar from \"../../components/tabBar/tabBar\";\r\nexport default {\r\n inject: ['$global'],\r\n data() {\r\n return {};\r\n },\r\n onLoad() {\r\n // this.requestSomething();\r\n },\r\n methods: {\r\n goAdvertisement(){\r\n this.$global.lastPage = getCurrentPages().router;\r\n uni.navigateTo({ url: '/pages/login/login' })\r\n }\r\n },\r\n components: {\r\n topNavigation,\r\n Advertisement,\r\n contentList,\r\n tabBar,\r\n },\r\n};\r\n</script>\r\n\r\n<style scoped>\r\n.page {\r\n position: relative;\r\n width: 750rpx;\r\n height: 1620rpx;\r\n}\r\n\r\n.HomeBackground {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n z-index: -1;\r\n}\r\n.top-navigation-container {\r\n position: fixed;\r\n top: 160rpx;\r\n left: 0;\r\n width: 100%;\r\n height: 114.5rpx;\r\n}\r\n.Advertisement {\r\n position: fixed;\r\n top: 300rpx;\r\n left: 0;\r\n width: 100%;\r\n height: 100rpx;\r\n z-index: 100;\r\n}\r\n.contentList {\r\n position: fixed;\r\n top: 400rpx;\r\n left: 0;\r\n width: 100%;\r\n height: 1300rpx;\r\n}\r\n</style>\r\n","import MiniProgramPage from 'D:/项目/tk-mini-program/pages/Home/Home.vue'\nwx.createPage(MiniProgramPage)"],"names":["uni"],"mappings":";;;AAmBA,MAAO,gBAAe,MAAW;AACjC,MAAO,gBAAe,MAAW;AACjC,MAAO,cAAa,MAAW;AAC/B,eAAe,MAAW;AAC1B,MAAK,YAAU;AAAA,EACb,QAAQ,CAAC,SAAS;AAAA,EAClB,OAAO;AACL,WAAO;EACR;AAAA,EACD,SAAS;AAAA,EAER;AAAA,EACD,SAAS;AAAA,IACP,kBAAiB;AACf,WAAK,QAAQ,WAAW,gBAAe,EAAG;AAC1CA,oBAAAA,MAAI,WAAW,EAAE,KAAK,sBAAsB;AAAA,IAC9C;AAAA,EACD;AAAA,EACD,YAAY;AAAA,IACV;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACD;AACH;;;;;;;;;;;;;;;;;;;;AC1CA,GAAG,WAAW,eAAe;"}
{"version":3,"file":"Home.js","sources":["pages/Home/Home.vue","../../HBuilderX/plugins/uniapp-cli-vite/uniPage:/cGFnZXMvSG9tZS9Ib21lLnZ1ZQ"],"sourcesContent":["<template>\r\n <view class=\"page\">\r\n <image src=\"../../static/HomeBackground.png\" class=\"HomeBackground\"></image>\r\n </view>\r\n <view class=\"top-navigation-container\">\r\n <top-navigation></top-navigation>\r\n </view>\r\n <view class=\"Advertisement\" @click=\"goAdvertisement\">\r\n <advertisement></advertisement>\r\n </view>\r\n <view class=\"contentList\">\r\n <contentList></contentList>\r\n </view>\r\n <view class=\"tabBar\">\r\n <tabBar></tabBar>\r\n </view>\r\n</template>\r\n\r\n<script>\r\nimport topNavigation from \"../../components/topNavigation/topNavigation\";\r\nimport Advertisement from \"../../components/Advertisement/Advertisement\";\r\nimport contentList from \"../../components/contentList/contentList\";\r\nimport tabBar from \"../../components/tabBar/tabBar\";\r\nexport default {\r\n inject: ['$global'],\r\n data() {\r\n return {};\r\n },\r\n onLoad() {\r\n // this.requestSomething();\r\n },\r\n methods: {\r\n goAdvertisement(){\r\n this.$global.lastPage = getCurrentPages().router;\r\n uni.navigateTo({ url: '/pages/login/login' })\r\n }\r\n },\r\n components: {\r\n topNavigation,\r\n Advertisement,\r\n contentList,\r\n tabBar,\r\n },\r\n};\r\n</script>\r\n\r\n<style scoped>\r\n.page {\r\n position: relative;\r\n width: 750rpx;\r\n height: 1620rpx;\r\n}\r\n\r\n.HomeBackground {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n z-index: -1;\r\n}\r\n.top-navigation-container {\r\n position: fixed;\r\n top: 160rpx;\r\n left: 0;\r\n width: 100%;\r\n height: 114.5rpx;\r\n}\r\n.Advertisement {\r\n position: fixed;\r\n top: 300rpx;\r\n left: 0;\r\n width: 100%;\r\n height: 100rpx;\r\n z-index: 100;\r\n}\r\n.contentList {\r\n position: fixed;\r\n top: 400rpx;\r\n left: 0;\r\n bottom: 50rpx;\r\n width: 100%;\r\n /* height: 1300rpx; */\r\n}\r\n</style>\r\n","import MiniProgramPage from 'D:/项目/tk-mini-program/pages/Home/Home.vue'\nwx.createPage(MiniProgramPage)"],"names":["uni"],"mappings":";;;AAmBA,MAAO,gBAAe,MAAW;AACjC,MAAO,gBAAe,MAAW;AACjC,MAAO,cAAa,MAAW;AAC/B,eAAe,MAAW;AAC1B,MAAK,YAAU;AAAA,EACb,QAAQ,CAAC,SAAS;AAAA,EAClB,OAAO;AACL,WAAO;EACR;AAAA,EACD,SAAS;AAAA,EAER;AAAA,EACD,SAAS;AAAA,IACP,kBAAiB;AACf,WAAK,QAAQ,WAAW,gBAAe,EAAG;AAC1CA,oBAAAA,MAAI,WAAW,EAAE,KAAK,sBAAsB;AAAA,IAC9C;AAAA,EACD;AAAA,EACD,YAAY;AAAA,IACV;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACD;AACH;;;;;;;;;;;;;;;;;;;;AC1CA,GAAG,WAAW,eAAe;"}

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1 @@
{"version":3,"file":"index.js","sources":["uni_modules/uni-datetime-picker/components/uni-datetime-picker/i18n/index.js"],"sourcesContent":["import en from './en.json'\r\nimport zhHans from './zh-Hans.json'\r\nimport zhHant from './zh-Hant.json'\r\nexport default {\r\n\ten,\r\n\t'zh-Hans': zhHans,\r\n\t'zh-Hant': zhHant\r\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAGA,MAAe,eAAA;AAAA,EACd;AAAA,EACA,WAAW;AAAA,EACX,WAAW;AACZ;;"}

File diff suppressed because one or more lines are too long

View File

@@ -1,41 +1,67 @@
"use strict";
const common_vendor = require("./common/vendor.js");
const components_NationalDictionary = require("./components/NationalDictionary.js");
const components_request = require("./components/request.js");
const common_assets = require("./common/assets.js");
const _sfc_main = {
data() {
return {
gender: "",
Gender: ["男", "女"],
Country: components_NationalDictionary.countryNamesArray,
country: "",
genders: "",
//性别
Gender: [
{ label: "", value: 1 },
{ label: "女", value: 2 }
],
Country: components_NationalDictionary.optionsArray,
countrys: "",
//国家
nameAnchor: "",
//主播名称
numberCoins: "",
//金币数量
remarks: "",
//备注
Display: false,
options: [
{ label: "选项一", value: "1" },
{ label: "选项二", value: "2" },
{ label: "选项三", value: "3" }
]
Hint: false,
datetimesingle: "",
//日期
id: null
//用户id
};
},
onLoad() {
common_vendor.index.getStorage({
key: "userinfo",
success: (res) => {
this.id = res.data.id;
}
});
},
methods: {
gender(item) {
this.genders = item.value;
common_vendor.index.__f__("log", "at pages/NewAddedPk/NewAddedPk.vue:114", item);
},
country(item) {
this.countrys = item.value;
common_vendor.index.__f__("log", "at pages/NewAddedPk/NewAddedPk.vue:119", item);
},
handleOverlayClick(event) {
if (event.target === this.$el) {
this.Display = false;
this.Hint = false;
}
},
open() {
if (this.Display) {
this.Display = false;
this.Hint = false;
this.nameAnchor = "";
this.genders = "";
this.numberCoins = "";
this.remarks = "";
this.datetimesingle = "";
this.countrys = "";
} else {
this.Display = true;
}
@@ -44,59 +70,125 @@ const _sfc_main = {
NameAnchor: function(event) {
this.nameAnchor = event.target.value;
},
Publish() {
common_vendor.index.__f__("log", "at pages/NewAddedPk/NewAddedPk.vue:103", this.nameAnchor, this.gender, this.country, this.numberCoins, this.remarks);
async Publish() {
if (this.nameAnchor === "" || this.genders === "" || this.numberCoins === "" || this.countrys === "" || this.datetimesingle === "") {
this.Hint = true;
return;
}
const isoString = this.datetimesingle.replace(" ", "T");
const timestamp = Date.parse(isoString);
if (isNaN(timestamp)) {
throw new Error(`Invalid date format: ${this.datetimesingle}`);
}
this.datetimesingle = Math.floor(timestamp / 1e3);
common_vendor.index.showLoading({
title: "发布中...",
mask: true
});
const res = await components_request.request({
url: "pk/addPkData",
method: "POST",
data: {
anchorId: this.nameAnchor,
pk_time: this.datetimesingle,
sex: this.genders,
country: this.countrys,
coin: this.numberCoins,
remark: this.remarks,
status: 0,
sender_id: this.id,
anchorIcon: ""
},
userInfo: true
});
if (res.code === 200) {
this.Display = false;
this.Hint = false;
this.nameAnchor = "";
this.genders = "";
this.numberCoins = "";
this.remarks = "";
this.datetimesingle = "";
common_vendor.index.hideLoading();
common_vendor.index.showToast({
title: "发布成功",
icon: "success",
duration: 2e3
});
} else {
common_vendor.index.hideLoading();
common_vendor.index.showToast({
title: "发布失败",
icon: "none",
duration: 2e3
});
}
}
}
};
if (!Array) {
const _easycom_uni_combox2 = common_vendor.resolveComponent("uni-combox");
const _easycom_wht_select2 = common_vendor.resolveComponent("wht-select");
const _easycom_uni_number_box2 = common_vendor.resolveComponent("uni-number-box");
const _easycom_uni_datetime_picker2 = common_vendor.resolveComponent("uni-datetime-picker");
const _easycom_uni_easyinput2 = common_vendor.resolveComponent("uni-easyinput");
(_easycom_uni_combox2 + _easycom_wht_select2 + _easycom_uni_number_box2 + _easycom_uni_easyinput2)();
(_easycom_wht_select2 + _easycom_uni_number_box2 + _easycom_uni_datetime_picker2 + _easycom_uni_easyinput2)();
}
const _easycom_uni_combox = () => "./uni_modules/uni-combox/components/uni-combox/uni-combox.js";
const _easycom_wht_select = () => "./uni_modules/wht-select/components/wht-select/wht-select.js";
const _easycom_uni_number_box = () => "./uni_modules/uni-number-box/components/uni-number-box/uni-number-box.js";
const _easycom_uni_datetime_picker = () => "./uni_modules/uni-datetime-picker/components/uni-datetime-picker/uni-datetime-picker.js";
const _easycom_uni_easyinput = () => "./uni_modules/uni-easyinput/components/uni-easyinput/uni-easyinput.js";
if (!Math) {
(_easycom_uni_combox + _easycom_wht_select + _easycom_uni_number_box + _easycom_uni_easyinput)();
(_easycom_wht_select + _easycom_uni_number_box + _easycom_uni_datetime_picker + _easycom_uni_easyinput)();
}
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
return common_vendor.e({
a: $data.Display
}, $data.Display ? {
}, $data.Display ? common_vendor.e({
b: common_vendor.o$1(($event) => $options.open()),
c: common_assets._imports_0$5,
d: common_vendor.o$1((...args) => $options.NameAnchor && $options.NameAnchor(...args)),
e: common_vendor.o$1(($event) => $data.gender = $event),
f: common_vendor.p({
candidates: $data.Gender,
placeholder: "请选择性别",
modelValue: $data.gender
e: $data.nameAnchor === "" && $data.Hint === true
}, $data.nameAnchor === "" && $data.Hint === true ? {} : {}, {
f: common_vendor.o$1($options.gender),
g: common_vendor.p({
options: $data.Gender,
placeholder: "性别"
}),
g: common_vendor.o$1(($event) => $data.country = $event),
h: common_vendor.p({
options: $data.options,
placeholder: "请选择国家",
modelValue: $data.country
}),
i: common_vendor.o$1(($event) => $data.numberCoins = $event),
h: $data.genders === "" && $data.Hint === true
}, $data.genders === "" && $data.Hint === true ? {} : {}, {
i: common_vendor.o$1($options.country),
j: common_vendor.p({
options: $data.Country,
filterable: true,
placeholder: "请选择国家"
}),
k: $data.countrys === "" && $data.Hint === true
}, $data.countrys === "" && $data.Hint === true ? {} : {}, {
l: common_vendor.o$1(($event) => $data.numberCoins = $event),
m: common_vendor.p({
modelValue: $data.numberCoins
}),
k: common_vendor.o$1(($event) => $data.remarks = $event),
l: common_vendor.p({
n: $data.numberCoins === "" && $data.Hint === true
}, $data.numberCoins === "" && $data.Hint === true ? {} : {}, {
o: common_vendor.o$1(_ctx.changeLog),
p: common_vendor.o$1(($event) => $data.datetimesingle = $event),
q: common_vendor.p({
type: "datetime",
modelValue: $data.datetimesingle
}),
r: $data.datetimesingle === "" && $data.Hint === true
}, $data.datetimesingle === "" && $data.Hint === true ? {} : {}, {
s: common_vendor.o$1(($event) => $data.remarks = $event),
t: common_vendor.p({
type: "textarea",
placeholder: "备注",
modelValue: $data.remarks
}),
m: common_vendor.o$1(($event) => $options.Publish()),
n: common_vendor.o$1(() => {
v: common_vendor.o$1(($event) => $options.Publish()),
w: common_vendor.o$1(() => {
}),
o: common_vendor.o$1(($event) => $options.open())
} : {});
x: common_vendor.o$1(($event) => $options.open())
}) : {});
}
const MiniProgramPage = /* @__PURE__ */ common_vendor._export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-96d38e2b"]]);
exports.MiniProgramPage = MiniProgramPage;

File diff suppressed because it is too large Load Diff

View File

@@ -251,6 +251,13 @@ const NationalDictionary = {
UK: "英国",
WF: "瓦利斯"
};
const countryNamesArray = Object.values(NationalDictionary);
exports.countryNamesArray = countryNamesArray;
function convertNationalDictToOptions(dict) {
return Object.entries(dict).map(([code, name]) => ({
label: name,
value: name
// 将 value 改为国家名称
}));
}
const optionsArray = convertNationalDictToOptions(NationalDictionary);
exports.optionsArray = optionsArray;
//# sourceMappingURL=../../.sourcemap/mp-weixin/components/NationalDictionary.js.map

View File

@@ -1,11 +1,13 @@
"use strict";
const common_vendor = require("../../common/vendor.js");
const components_request = require("../request.js");
const common_assets = require("../../common/assets.js");
const _sfc_main = {
data() {
return {
title: "Hello",
Gender: true,
page: 0,
// 列表数据
list: [
{
@@ -13,105 +15,36 @@ const _sfc_main = {
id: "9088",
gender: "男",
score: 8.8
},
{
title: "极乐世界2",
id: "9089",
gender: "女",
score: 7.8
},
{
title: "极乐世界3",
id: "9090",
gender: "男",
score: 9.8
},
{
title: "极乐世界3",
id: "9090",
gender: "男",
score: 9.8
},
{
title: "极乐世界3",
id: "9090",
gender: "男",
score: 9.8
},
{
title: "极乐世界3",
id: "9090",
gender: "男",
score: 9.8
},
{
title: "极乐世界3",
id: "9090",
gender: "男",
score: 9.8
},
{
title: "极乐世界3",
id: "9090",
gender: "男",
score: 9.8
},
{
title: "极乐世界3",
id: "9090",
gender: "男",
score: 9.8
},
{
title: "极乐世界3",
id: "9090",
gender: "男",
score: 9.8
},
{
title: "极乐世界3",
id: "9090",
gender: "男",
score: 9.8
},
{
title: "极乐世界3",
id: "9090",
gender: "男",
score: 9.8
},
{
title: "极乐世界3",
id: "9090",
gender: "男",
score: 9.8
},
{
title: "极乐世界3",
id: "9090",
gender: "男",
score: 9.8
},
{
title: "极乐世界3",
id: "9090",
gender: "男",
score: 9.8
},
{
title: "极乐世界3",
id: "9090",
gender: "男",
score: 9.8
}
]
// 列表数据结束
};
},
onLoad() {
mounted() {
this.pkList();
},
methods: {
// 方法定义
async pkList() {
const res = await components_request.request({
url: "pk/pkList",
method: "GET",
data: {
status: 0,
page: this.page,
Size: 10
},
userInfo: false
});
common_vendor.index.__f__("log", "at components/contentList/contentList.vue:61", res);
if (res.code === 200) {
this.list.concat(res.data);
common_vendor.index.__f__("log", "at components/contentList/contentList.vue:64", this.list);
}
},
onScrollToLower() {
this.page++;
this.pkList();
}
}
};
if (!Array) {
@@ -137,7 +70,8 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
b: common_assets._imports_0$4,
c: $data.Gender,
d: $data.Gender ? 1 : "",
e: !$data.Gender ? 1 : ""
e: !$data.Gender ? 1 : "",
f: common_vendor.o$1((...args) => $options.onScrollToLower && $options.onScrollToLower(...args))
};
}
const Component = /* @__PURE__ */ common_vendor._export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-4813d59a"]]);

View File

@@ -1 +1 @@
<scroll-view scroll-y="true" class="scroll data-v-4813d59a"><uni-card wx:for="{{a}}" wx:for-item="item" u-s="{{['d']}}" class="content-list data-v-4813d59a" u-i="{{item.g}}" bind:__l="__l"><image class="headShot data-v-4813d59a" src="{{b}}" mode="scaleToFill"/><view class="content-list-title data-v-4813d59a"><view class="cardname data-v-4813d59a">{{item.a}}</view><view class="content-list-info data-v-4813d59a"><view class="{{['data-v-4813d59a', d && 'Gendermale', e && 'Genderfemale']}}"><image wx:if="{{c}}" class="Genderimg data-v-4813d59a" src="{{item.b}}" mode="scaleToFill"/><image wx:else class="Genderimg data-v-4813d59a" src="{{item.c}}" mode="scaleToFill"/><view class="age data-v-4813d59a">{{item.d}}</view></view><view class="RoomID data-v-4813d59a">房间ID:{{item.e}}</view><view class="Charm data-v-4813d59a">魅力值</view><view class="charmValue data-v-4813d59a">{{item.f}}W</view></view></view></uni-card></scroll-view>
<scroll-view scroll-y="true" class="scroll data-v-4813d59a" lower-threshold="100" bindscrolltolower="{{f}}"><uni-card wx:for="{{a}}" wx:for-item="item" u-s="{{['d']}}" class="content-list data-v-4813d59a" u-i="{{item.g}}" bind:__l="__l"><image class="headShot data-v-4813d59a" src="{{b}}" mode="scaleToFill"/><view class="content-list-title data-v-4813d59a"><view class="cardname data-v-4813d59a">{{item.a}}</view><view class="content-list-info data-v-4813d59a"><view class="{{['data-v-4813d59a', d && 'Gendermale', e && 'Genderfemale']}}"><image wx:if="{{c}}" class="Genderimg data-v-4813d59a" src="{{item.b}}" mode="scaleToFill"/><image wx:else class="Genderimg data-v-4813d59a" src="{{item.c}}" mode="scaleToFill"/><view class="age data-v-4813d59a">{{item.d}}</view></view><view class="RoomID data-v-4813d59a">房间ID:{{item.e}}</view><view class="Charm data-v-4813d59a">魅力值</view><view class="charmValue data-v-4813d59a">{{item.f}}W</view></view></view></uni-card></scroll-view>

View File

@@ -1,6 +1,6 @@
.scroll.data-v-4813d59a {
height: 100%;
height: 90%;
display: flex;
flex-direction: column;
justify-content: center;

View File

@@ -4,34 +4,38 @@ function request(urldata) {
const { url, data, method, header, userInfo } = urldata;
const baseUrl = "http://192.168.0.218:8086/" + url;
if (userInfo) {
common_vendor.index.getStorage({
key: "userinfo",
success: (res) => {
if (res.data) {
if (res.data.nickName) {
return new Promise((resolve, reject) => {
return new Promise((resolve, reject) => {
common_vendor.index.getStorage({
key: "userinfo",
success: (res) => {
if (res.data) {
if (res.data.nickName) {
common_vendor.index.request({
url: baseUrl,
data,
method,
header,
success: function(res2) {
common_vendor.index.__f__("log", "at components/request.js:19", "请求成功1", res2.data);
resolve(res2.data);
},
fail: function(res2) {
reject(res2);
}
});
});
} else {
this.$global.lastPage = common_vendor.index.page.route;
common_vendor.index.reLaunch({ url: "/pages/UserInformation/UserInformation" });
}
} else {
this.$global.lastPage = common_vendor.index.page.route;
common_vendor.index.reLaunch({ url: "/pages/UserInformation/UserInformation" });
common_vendor.index.navigateTo({ url: "/pages/login/login" });
}
} else {
this.$global.lastPage = common_vendor.index.page.route;
common_vendor.index.navigateTo({ url: "/pages/login/login" });
},
fail: function(res) {
reject(res);
}
}
});
});
} else {
return new Promise((resolve, reject) => {
@@ -41,6 +45,7 @@ function request(urldata) {
method,
header,
success: function(res) {
common_vendor.index.__f__("log", "at components/request.js:48", "请求成功2", res);
resolve(res.data);
},
fail: function(res) {

View File

@@ -31,6 +31,7 @@
position: fixed;
top: 400rpx;
left: 0;
bottom: 50rpx;
width: 100%;
height: 1300rpx;
/* height: 1300rpx; */
}

View File

@@ -1,9 +1,9 @@
{
"navigationBarTitleText": "新增PK",
"usingComponents": {
"uni-combox": "../../uni_modules/uni-combox/components/uni-combox/uni-combox",
"wht-select": "../../uni_modules/wht-select/components/wht-select/wht-select",
"uni-number-box": "../../uni_modules/uni-number-box/components/uni-number-box/uni-number-box",
"uni-datetime-picker": "../../uni_modules/uni-datetime-picker/components/uni-datetime-picker/uni-datetime-picker",
"uni-easyinput": "../../uni_modules/uni-easyinput/components/uni-easyinput/uni-easyinput"
}
}

View File

@@ -1 +1 @@
<view wx:if="{{a}}" class="Mask data-v-96d38e2b" bindtap="{{o}}"><view class="data-v-96d38e2b" catchtap="{{n}}"><view class="container data-v-96d38e2b"><image class="Fork data-v-96d38e2b" bindtap="{{b}}" src="{{c}}" mode="scaleToFill"/><view class="Title data-v-96d38e2b">发布新PK</view><view class="Individual data-v-96d38e2b"><view class="NameAnchor data-v-96d38e2b"><input class="NameAnchorcss data-v-96d38e2b" bindinput="{{d}}" placeholder="主播名称"/></view><view class="Gender data-v-96d38e2b"><uni-combox wx:if="{{f}}" class="Gendercss data-v-96d38e2b" u-i="96d38e2b-0" bind:__l="__l" bindupdateModelValue="{{e}}" u-p="{{f}}"></uni-combox></view></view><view class="Accountnumber data-v-96d38e2b"><wht-select wx:if="{{h}}" class="data-v-96d38e2b" u-i="96d38e2b-1" bind:__l="__l" bindupdateModelValue="{{g}}" u-p="{{h}}"/><view class="Coins data-v-96d38e2b"><uni-number-box wx:if="{{j}}" class="number-box data-v-96d38e2b" u-i="96d38e2b-2" bind:__l="__l" bindupdateModelValue="{{i}}" u-p="{{j}}"></uni-number-box></view></view><view class="Remarkscss data-v-96d38e2b"><uni-easyinput wx:if="{{l}}" class="data-v-96d38e2b" u-i="96d38e2b-3" bind:__l="__l" bindupdateModelValue="{{k}}" u-p="{{l}}"></uni-easyinput></view><view class="Publish data-v-96d38e2b"><button bindtap="{{m}}" class="Publishcss data-v-96d38e2b">发布</button></view></view></view></view>
<view wx:if="{{a}}" class="Mask data-v-96d38e2b" bindtap="{{x}}"><view class="data-v-96d38e2b" catchtap="{{w}}"><view class="container data-v-96d38e2b"><image class="Fork data-v-96d38e2b" bindtap="{{b}}" src="{{c}}" mode="scaleToFill"/><view class="Title data-v-96d38e2b">发布新PK</view><view class="Individual data-v-96d38e2b"><view class="NameAnchor data-v-96d38e2b"><input class="NameAnchorcss data-v-96d38e2b" bindinput="{{d}}" placeholder="主播名称"/><view wx:if="{{e}}" class="Hint data-v-96d38e2b">请填写主播名称</view></view><view class="Gender data-v-96d38e2b"><wht-select wx:if="{{g}}" class="data-v-96d38e2b" style="width:300rpx" bindchange="{{f}}" u-i="96d38e2b-0" bind:__l="__l" u-p="{{g}}"/><view wx:if="{{h}}" class="Hint data-v-96d38e2b">请选择性别</view></view></view><view class="Accountnumber data-v-96d38e2b"><view class="Coins data-v-96d38e2b"><wht-select wx:if="{{j}}" class="data-v-96d38e2b" style="width:300rpx" bindchange="{{i}}" u-i="96d38e2b-1" bind:__l="__l" u-p="{{j}}"/><view wx:if="{{k}}" class="Hint data-v-96d38e2b">请选择国家</view></view><view class="Coins data-v-96d38e2b"><view class="number-box data-v-96d38e2b"><view class="number-box-title data-v-96d38e2b">金币:</view><uni-number-box wx:if="{{m}}" class="data-v-96d38e2b" u-i="96d38e2b-2" bind:__l="__l" bindupdateModelValue="{{l}}" u-p="{{m}}"></uni-number-box></view><view wx:if="{{n}}" class="Hint data-v-96d38e2b">请填写金币数量</view></view></view><view class="time data-v-96d38e2b"><uni-datetime-picker wx:if="{{q}}" class="data-v-96d38e2b" bindchange="{{o}}" u-i="96d38e2b-3" bind:__l="__l" bindupdateModelValue="{{p}}" u-p="{{q}}"/><view wx:if="{{r}}" class="Hint data-v-96d38e2b">请选择日期</view></view><view class="Remarkscss data-v-96d38e2b"><uni-easyinput wx:if="{{t}}" class="data-v-96d38e2b" u-i="96d38e2b-4" bind:__l="__l" bindupdateModelValue="{{s}}" u-p="{{t}}"></uni-easyinput></view><view class="Publish data-v-96d38e2b"><button bindtap="{{v}}" class="Publishcss data-v-96d38e2b">发布</button></view></view></view></view>

View File

@@ -1,91 +1,93 @@
.Mask.data-v-96d38e2b{
.Mask.data-v-96d38e2b {
width: 100vw;
height: 100vh;
background: #00000076;
display: flex;
flex-direction: column-reverse;
}
.Hint.data-v-96d38e2b {
color: red;
font-size: 20rpx;
}
.container.data-v-96d38e2b {
display: flex;
background-color: #fff;
flex-direction: column;
width: 100%;
height: 900rpx;
height: 100%;
}
.Fork.data-v-96d38e2b{
.Fork.data-v-96d38e2b {
width: 50rpx;
height: 50rpx;
margin-top: 20rpx;
/* margin-bottom: 40rpx; */
margin-left: 90%;
}
.Title.data-v-96d38e2b{
width: 100%;
height: 30rpx;
font-size: 50rpx;
font-weight: bold;
text-align: center;
margin-top: 40rpx;
margin-bottom: 40rpx;
.Title.data-v-96d38e2b {
width: 100%;
height: 30rpx;
font-size: 50rpx;
font-weight: bold;
text-align: center;
margin-top: 40rpx;
margin-bottom: 40rpx;
}
.Individual.data-v-96d38e2b{
display: flex;
/* justify-content: center; */
.Individual.data-v-96d38e2b {
display: flex;
/* justify-content: center; */
}
.NameAnchor.data-v-96d38e2b{
.NameAnchor.data-v-96d38e2b {
margin: 40rpx;
}
.NameAnchorcss.data-v-96d38e2b{
width: 300rpx;
height: 85rpx;
border: 1rpx solid #ccc;
border-radius: 10rpx;
text-align: center;
.time.data-v-96d38e2b {
width: 90%;
margin-left: 5%;
}
.Gender.data-v-96d38e2b{
.NameAnchorcss.data-v-96d38e2b {
width: 300rpx;
height: 85rpx;
border: 1rpx solid #ccc;
border-radius: 10rpx;
text-align: center;
}
.Gender.data-v-96d38e2b {
width: 300rpx;
height: 80rpx;
margin: 40rpx;
}
.Gendercss.data-v-96d38e2b{
width: 300rpx;
height: 80rpx;
text-align: center;
.Accountnumber.data-v-96d38e2b {
display: flex;
}
.Accountnumber.data-v-96d38e2b{
display: flex;
}
.Country.data-v-96d38e2b{
}
.Countrycss.data-v-96d38e2b{
margin: 40rpx;
width: 300rpx;
height: 65rpx;
text-align: center;
}
.Coins.data-v-96d38e2b{
.Coins.data-v-96d38e2b {
margin: 40rpx;
width: 300rpx;
height: 65rpx;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
/* align-items: center; */
}
.number-box.data-v-96d38e2b {
text-align: center;
display: flex;
text-align: center;
}
.Remarkscss.data-v-96d38e2b{
width: 90%;
margin-top: 30rpx;
margin-left: 5%;
margin-right: 5%;
margin-bottom: 50rpx;
border-radius: 10rpx;
.number-box-title.data-v-96d38e2b {
margin-right: 20rpx;
}
.Publish.data-v-96d38e2b{
.Remarkscss.data-v-96d38e2b {
width: 90%;
margin-top: 30rpx;
margin-left: 5%;
margin-right: 5%;
margin-bottom: 50rpx;
border-radius: 10rpx;
}
.Publish.data-v-96d38e2b {
margin-bottom: 50rpx;
width: 90%;
margin-left: 5%;
}
.Publishcss.data-v-96d38e2b{
background-color: #0048ff94;
.Publishcss.data-v-96d38e2b {
background-color: #0048ff94;
}

View File

@@ -1,161 +0,0 @@
"use strict";
const common_vendor = require("../../../../common/vendor.js");
const _sfc_main = {
name: "uniCombox",
emits: ["input", "update:modelValue"],
props: {
clearAble: {
type: Boolean,
default: false
},
border: {
type: Boolean,
default: true
},
label: {
type: String,
default: ""
},
labelWidth: {
type: String,
default: "auto"
},
placeholder: {
type: String,
default: ""
},
candidates: {
type: Array,
default() {
return [];
}
},
emptyTips: {
type: String,
default: "无匹配项"
},
modelValue: {
type: [String, Number],
default: ""
}
},
data() {
return {
showSelector: false,
inputVal: ""
};
},
computed: {
labelStyle() {
if (this.labelWidth === "auto") {
return "";
}
return `width: ${this.labelWidth}`;
},
filterCandidates() {
return this.candidates.filter((item) => {
return item.toString().indexOf(this.inputVal) > -1;
});
},
filterCandidatesLength() {
return this.filterCandidates.length;
}
},
watch: {
modelValue: {
handler(newVal) {
this.inputVal = newVal;
},
immediate: true
}
},
methods: {
toggleSelector() {
this.showSelector = !this.showSelector;
},
onFocus() {
this.showSelector = true;
},
onBlur() {
setTimeout(() => {
this.showSelector = false;
}, 153);
},
onSelectorClick(index) {
this.inputVal = this.filterCandidates[index];
this.showSelector = false;
this.$emit("input", this.inputVal);
this.$emit("update:modelValue", this.inputVal);
},
onInput() {
setTimeout(() => {
this.$emit("input", this.inputVal);
this.$emit("update:modelValue", this.inputVal);
});
},
clean() {
this.inputVal = "";
this.onInput();
}
}
};
if (!Array) {
const _easycom_uni_icons2 = common_vendor.resolveComponent("uni-icons");
_easycom_uni_icons2();
}
const _easycom_uni_icons = () => "../../../uni-icons/components/uni-icons/uni-icons.js";
if (!Math) {
_easycom_uni_icons();
}
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
return common_vendor.e({
a: $props.label
}, $props.label ? {
b: common_vendor.t($props.label),
c: common_vendor.s($options.labelStyle)
} : {}, {
d: $props.placeholder,
e: common_vendor.o$1([($event) => $data.inputVal = $event.detail.value, (...args) => $options.onInput && $options.onInput(...args)]),
f: common_vendor.o$1((...args) => $options.onFocus && $options.onFocus(...args)),
g: common_vendor.o$1((...args) => $options.onBlur && $options.onBlur(...args)),
h: $data.inputVal,
i: !$data.inputVal || !$props.clearAble
}, !$data.inputVal || !$props.clearAble ? {
j: common_vendor.o$1($options.toggleSelector),
k: common_vendor.p({
type: $data.showSelector ? "top" : "bottom",
size: "30",
color: "#999"
})
} : {}, {
l: $data.inputVal && $props.clearAble
}, $data.inputVal && $props.clearAble ? {
m: common_vendor.o$1($options.clean),
n: common_vendor.p({
type: "clear",
size: "24",
color: "#999",
width: "60rpx",
height: "60rpx"
})
} : {}, {
o: $data.showSelector
}, $data.showSelector ? common_vendor.e({
p: $options.filterCandidatesLength === 0
}, $options.filterCandidatesLength === 0 ? {
q: common_vendor.t($props.emptyTips)
} : {}, {
r: common_vendor.f($options.filterCandidates, (item, index, i0) => {
return {
a: common_vendor.t(item),
b: index,
c: common_vendor.o$1(($event) => $options.onSelectorClick(index), index)
};
})
}) : {}, {
s: common_vendor.n($props.border ? "" : "uni-combox__no-border")
});
}
const Component = /* @__PURE__ */ common_vendor._export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-e602780e"]]);
wx.createComponent(Component);
//# sourceMappingURL=../../../../../.sourcemap/mp-weixin/uni_modules/uni-combox/components/uni-combox/uni-combox.js.map

View File

@@ -1 +0,0 @@
<view class="{{['uni-combox', 'data-v-e602780e', s]}}"><view wx:if="{{a}}" class="uni-combox__label data-v-e602780e" style="{{c}}"><text class="data-v-e602780e">{{b}}</text></view><view class="uni-combox__input-box data-v-e602780e"><input class="uni-combox__input data-v-e602780e" type="text" placeholder="{{d}}" placeholder-class="uni-combox__input-plac" bindinput="{{e}}" bindfocus="{{f}}" bindblur="{{g}}" value="{{h}}"/><uni-icons wx:if="{{i}}" class="data-v-e602780e" bindclick="{{j}}" u-i="e602780e-0" bind:__l="__l" u-p="{{k}}"></uni-icons><uni-icons wx:if="{{l}}" class="data-v-e602780e" bindclick="{{m}}" u-i="e602780e-1" bind:__l="__l" u-p="{{n}}"></uni-icons></view><view wx:if="{{o}}" class="uni-combox__selector data-v-e602780e"><view class="uni-popper__arrow data-v-e602780e"></view><scroll-view scroll-y="true" class="uni-combox__selector-scroll data-v-e602780e"><view wx:if="{{p}}" class="uni-combox__selector-empty data-v-e602780e"><text class="data-v-e602780e">{{q}}</text></view><view wx:for="{{r}}" wx:for-item="item" wx:key="b" class="uni-combox__selector-item data-v-e602780e" bindtap="{{item.c}}"><text class="data-v-e602780e">{{item.a}}</text></view></scroll-view></view></view>

View File

@@ -1,126 +0,0 @@
/**
* 这里是uni-app内置的常用样式变量
*
* uni-app 官方扩展插件及插件市场https://ext.dcloud.net.cn上很多三方插件均使用了这些样式变量
* 如果你是插件开发者建议你使用scss预处理并在插件代码中直接使用这些变量无需 import 这个文件方便用户通过搭积木的方式开发整体风格一致的App
*
*/
/**
* 如果你是App开发者插件使用者你可以通过修改这些变量来定制自己的插件主题实现自定义主题功能
*
* 如果你的项目同样使用了scss预处理你也可以直接在你的 scss 代码中使用如下变量,同时无需 import 这个文件
*/
/* 颜色变量 */
/* 行为相关颜色 */
/* 文字基本颜色 */
/* 背景颜色 */
/* 边框颜色 */
/* 尺寸变量 */
/* 文字尺寸 */
/* 图片尺寸 */
/* Border Radius */
/* 水平间距 */
/* 垂直间距 */
/* 透明度 */
/* 文章场景相关 */
.uni-combox.data-v-e602780e {
font-size: 14px;
border: 1px solid #DCDFE6;
border-radius: 4px;
padding: 6px 10px;
position: relative;
display: flex;
flex-direction: row;
align-items: center;
}
.uni-combox__icon.data-v-e602780e {
border: 1px solid #004cff;
width: 70rpx;
height: 70rpx;
}
.uni-combox__label.data-v-e602780e {
font-size: 16px;
line-height: 22px;
padding-right: 10px;
color: #999999;
}
.uni-combox__input-box.data-v-e602780e {
position: relative;
display: flex;
flex: 1;
flex-direction: row;
align-items: center;
}
.uni-combox__input.data-v-e602780e {
flex: 1;
font-size: 14px;
height: 22px;
line-height: 22px;
}
.uni-combox__input-plac.data-v-e602780e {
font-size: 14px;
color: #999;
}
.uni-combox__selector.data-v-e602780e {
box-sizing: border-box;
position: absolute;
top: calc(100% + 12px);
left: 0;
width: 100%;
background-color: #FFFFFF;
border: 1px solid #EBEEF5;
border-radius: 6px;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
z-index: 2;
padding: 4px 0;
}
.uni-combox__selector-scroll.data-v-e602780e {
position: relative;
z-index: 999;
max-height: 200px;
box-sizing: border-box;
}
.uni-combox__selector-empty.data-v-e602780e,
.uni-combox__selector-item.data-v-e602780e {
display: flex;
cursor: pointer;
line-height: 36px;
font-size: 14px;
text-align: center;
padding: 0px 10px;
}
.uni-combox__selector-item.data-v-e602780e:hover {
background-color: #f9f9f9;
}
.uni-combox__selector-empty.data-v-e602780e:last-child,
.uni-combox__selector-item.data-v-e602780e:last-child {
border-bottom: none;
}
.uni-popper__arrow.data-v-e602780e,
.uni-popper__arrow.data-v-e602780e::after {
position: absolute;
display: block;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
border-width: 6px;
}
.uni-popper__arrow.data-v-e602780e {
filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.03));
top: -6px;
left: 10%;
margin-right: 3px;
border-top-width: 0;
border-bottom-color: #EBEEF5;
}
.uni-popper__arrow.data-v-e602780e::after {
content: " ";
top: 1px;
margin-left: -6px;
border-top-width: 0;
border-bottom-color: #fff;
}
.uni-combox__no-border.data-v-e602780e {
border: none;
}

View File

@@ -0,0 +1,59 @@
"use strict";
const common_vendor = require("../../../../common/vendor.js");
const _sfc_main = {
props: {
weeks: {
type: Object,
default() {
return {};
}
},
calendar: {
type: Object,
default: () => {
return {};
}
},
selected: {
type: Array,
default: () => {
return [];
}
},
checkHover: {
type: Boolean,
default: false
}
},
methods: {
choiceDate(weeks) {
this.$emit("change", weeks);
},
handleMousemove(weeks) {
this.$emit("handleMouse", weeks);
}
}
};
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
return common_vendor.e({
a: $props.selected && $props.weeks.extraInfo
}, $props.selected && $props.weeks.extraInfo ? {} : {}, {
b: common_vendor.t($props.weeks.date),
c: $props.calendar.fullDate === $props.weeks.fullDate && ($props.calendar.userChecked || !$props.checkHover) ? 1 : "",
d: $props.checkHover ? 1 : "",
e: $props.weeks.beforeMultiple ? 1 : "",
f: $props.weeks.multiple ? 1 : "",
g: $props.weeks.afterMultiple ? 1 : "",
h: $props.weeks.disable ? 1 : "",
i: $props.weeks.isToday ? 1 : "",
j: $props.weeks.disable ? 1 : "",
k: $props.weeks.beforeMultiple ? 1 : "",
l: $props.weeks.multiple ? 1 : "",
m: $props.weeks.afterMultiple ? 1 : "",
n: common_vendor.o$1(($event) => $options.choiceDate($props.weeks)),
o: common_vendor.o$1(($event) => $options.handleMousemove($props.weeks))
});
}
const Component = /* @__PURE__ */ common_vendor._export_sfc(_sfc_main, [["render", _sfc_render]]);
wx.createComponent(Component);
//# sourceMappingURL=../../../../../.sourcemap/mp-weixin/uni_modules/uni-datetime-picker/components/uni-datetime-picker/calendar-item.js.map

View File

@@ -0,0 +1,4 @@
{
"component": true,
"usingComponents": {}
}

View File

@@ -0,0 +1 @@
<view class="{{['uni-calendar-item__weeks-box', j && 'uni-calendar-item--disable', k && 'uni-calendar-item--before-checked-x', l && 'uni-calendar-item--multiple', m && 'uni-calendar-item--after-checked-x']}}" bindtap="{{n}}" bindmouseenter="{{o}}"><view class="{{['uni-calendar-item__weeks-box-item', c && 'uni-calendar-item--checked', d && 'uni-calendar-item--checked-range-text', e && 'uni-calendar-item--before-checked', f && 'uni-calendar-item--multiple', g && 'uni-calendar-item--after-checked', h && 'uni-calendar-item--disable']}}"><text wx:if="{{a}}" class="uni-calendar-item__weeks-box-circle"></text><text class="uni-calendar-item__weeks-box-text uni-calendar-item__weeks-box-text-disable uni-calendar-item--checked-text">{{b}}</text></view><view class="{{[i && 'uni-calendar-item--today']}}"></view></view>

View File

@@ -0,0 +1,113 @@
/**
* 这里是uni-app内置的常用样式变量
*
* uni-app 官方扩展插件及插件市场https://ext.dcloud.net.cn上很多三方插件均使用了这些样式变量
* 如果你是插件开发者建议你使用scss预处理并在插件代码中直接使用这些变量无需 import 这个文件方便用户通过搭积木的方式开发整体风格一致的App
*
*/
/**
* 如果你是App开发者插件使用者你可以通过修改这些变量来定制自己的插件主题实现自定义主题功能
*
* 如果你的项目同样使用了scss预处理你也可以直接在你的 scss 代码中使用如下变量,同时无需 import 这个文件
*/
/* 颜色变量 */
/* 行为相关颜色 */
/* 文字基本颜色 */
/* 背景颜色 */
/* 边框颜色 */
/* 尺寸变量 */
/* 文字尺寸 */
/* 图片尺寸 */
/* Border Radius */
/* 水平间距 */
/* 垂直间距 */
/* 透明度 */
/* 文章场景相关 */
.uni-calendar-item__weeks-box {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin: 1px 0;
position: relative;
}
.uni-calendar-item__weeks-box-text {
font-size: 14px;
font-weight: bold;
color: #001833;
}
.uni-calendar-item__weeks-box-item {
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 40px;
height: 40px;
}
.uni-calendar-item__weeks-box-circle {
position: absolute;
top: 5px;
right: 5px;
width: 8px;
height: 8px;
border-radius: 8px;
background-color: #dd524d;
}
.uni-calendar-item__weeks-box .uni-calendar-item--disable {
cursor: default;
}
.uni-calendar-item--disable .uni-calendar-item__weeks-box-text-disable {
color: #D1D1D1;
}
.uni-calendar-item--today {
position: absolute;
top: 10px;
right: 17%;
background-color: #dd524d;
width: 6px;
height: 6px;
border-radius: 50%;
}
.uni-calendar-item--extra {
color: #dd524d;
opacity: 0.8;
}
.uni-calendar-item__weeks-box .uni-calendar-item--checked {
background-color: #007aff;
border-radius: 50%;
box-sizing: border-box;
border: 3px solid #fff;
}
.uni-calendar-item--checked .uni-calendar-item--checked-text {
color: #fff;
}
.uni-calendar-item--multiple .uni-calendar-item--checked-range-text {
color: #333;
}
.uni-calendar-item--multiple {
background-color: #F6F7FC;
}
.uni-calendar-item--multiple .uni-calendar-item--before-checked,
.uni-calendar-item--multiple .uni-calendar-item--after-checked {
background-color: #007aff;
border-radius: 50%;
box-sizing: border-box;
border: 3px solid #F6F7FC;
}
.uni-calendar-item--before-checked .uni-calendar-item--checked-text,
.uni-calendar-item--after-checked .uni-calendar-item--checked-text {
color: #fff;
}
.uni-calendar-item--before-checked-x {
border-top-left-radius: 50px;
border-bottom-left-radius: 50px;
box-sizing: border-box;
background-color: #F6F7FC;
}
.uni-calendar-item--after-checked-x {
border-top-right-radius: 50px;
border-bottom-right-radius: 50px;
background-color: #F6F7FC;
}

View File

@@ -0,0 +1,605 @@
"use strict";
const uni_modules_uniDatetimePicker_components_uniDatetimePicker_util = require("./util.js");
const common_vendor = require("../../../../common/vendor.js");
const uni_modules_uniDatetimePicker_components_uniDatetimePicker_i18n_index = require("./i18n/index.js");
const calendarItem = () => "./calendar-item.js";
const timePicker = () => "./time-picker.js";
const {
t
} = common_vendor.initVueI18n(uni_modules_uniDatetimePicker_components_uniDatetimePicker_i18n_index.i18nMessages);
const _sfc_main = {
components: {
calendarItem,
timePicker
},
options: {
virtualHost: true
},
props: {
date: {
type: String,
default: ""
},
defTime: {
type: [String, Object],
default: ""
},
selectableTimes: {
type: [Object],
default() {
return {};
}
},
selected: {
type: Array,
default() {
return [];
}
},
startDate: {
type: String,
default: ""
},
endDate: {
type: String,
default: ""
},
startPlaceholder: {
type: String,
default: ""
},
endPlaceholder: {
type: String,
default: ""
},
range: {
type: Boolean,
default: false
},
hasTime: {
type: Boolean,
default: false
},
insert: {
type: Boolean,
default: true
},
showMonth: {
type: Boolean,
default: true
},
clearDate: {
type: Boolean,
default: true
},
checkHover: {
type: Boolean,
default: true
},
hideSecond: {
type: [Boolean],
default: false
},
pleStatus: {
type: Object,
default() {
return {
before: "",
after: "",
data: [],
fulldate: ""
};
}
},
defaultValue: {
type: [String, Object, Array],
default: ""
}
},
data() {
return {
show: false,
weeks: [],
calendar: {},
nowDate: {},
aniMaskShow: false,
firstEnter: true,
time: "",
timeRange: {
startTime: "",
endTime: ""
},
tempSingleDate: "",
tempRange: {
before: "",
after: ""
}
};
},
watch: {
date: {
immediate: true,
handler(newVal) {
if (!this.range) {
this.tempSingleDate = newVal;
setTimeout(() => {
this.init(newVal);
}, 100);
}
}
},
defTime: {
immediate: true,
handler(newVal) {
if (!this.range) {
this.time = newVal;
} else {
this.timeRange.startTime = newVal.start;
this.timeRange.endTime = newVal.end;
}
}
},
startDate(val) {
if (!this.cale) {
return;
}
this.cale.setStartDate(val);
this.cale.setDate(this.nowDate.fullDate);
this.weeks = this.cale.weeks;
},
endDate(val) {
if (!this.cale) {
return;
}
this.cale.setEndDate(val);
this.cale.setDate(this.nowDate.fullDate);
this.weeks = this.cale.weeks;
},
selected(newVal) {
if (!this.cale) {
return;
}
this.cale.setSelectInfo(this.nowDate.fullDate, newVal);
this.weeks = this.cale.weeks;
},
pleStatus: {
immediate: true,
handler(newVal) {
const {
before,
after,
fulldate,
which
} = newVal;
this.tempRange.before = before;
this.tempRange.after = after;
setTimeout(() => {
if (fulldate) {
this.cale.setHoverMultiple(fulldate);
if (before && after) {
this.cale.lastHover = true;
if (this.rangeWithinMonth(after, before))
return;
this.setDate(before);
} else {
this.cale.setMultiple(fulldate);
this.setDate(this.nowDate.fullDate);
this.calendar.fullDate = "";
this.cale.lastHover = false;
}
} else {
if (!this.cale) {
return;
}
this.cale.setDefaultMultiple(before, after);
if (which === "left" && before) {
this.setDate(before);
this.weeks = this.cale.weeks;
} else if (after) {
this.setDate(after);
this.weeks = this.cale.weeks;
}
this.cale.lastHover = true;
}
}, 16);
}
}
},
computed: {
timepickerStartTime() {
const activeDate = this.range ? this.tempRange.before : this.calendar.fullDate;
return activeDate === this.startDate ? this.selectableTimes.start : "";
},
timepickerEndTime() {
const activeDate = this.range ? this.tempRange.after : this.calendar.fullDate;
return activeDate === this.endDate ? this.selectableTimes.end : "";
},
/**
* for i18n
*/
selectDateText() {
return t("uni-datetime-picker.selectDate");
},
startDateText() {
return this.startPlaceholder || t("uni-datetime-picker.startDate");
},
endDateText() {
return this.endPlaceholder || t("uni-datetime-picker.endDate");
},
okText() {
return t("uni-datetime-picker.ok");
},
yearText() {
return t("uni-datetime-picker.year");
},
monthText() {
return t("uni-datetime-picker.month");
},
MONText() {
return t("uni-calender.MON");
},
TUEText() {
return t("uni-calender.TUE");
},
WEDText() {
return t("uni-calender.WED");
},
THUText() {
return t("uni-calender.THU");
},
FRIText() {
return t("uni-calender.FRI");
},
SATText() {
return t("uni-calender.SAT");
},
SUNText() {
return t("uni-calender.SUN");
},
confirmText() {
return t("uni-calender.confirm");
}
},
created() {
this.cale = new uni_modules_uniDatetimePicker_components_uniDatetimePicker_util.Calendar({
selected: this.selected,
startDate: this.startDate,
endDate: this.endDate,
range: this.range
});
this.init(this.date);
},
methods: {
leaveCale() {
this.firstEnter = true;
},
handleMouse(weeks) {
if (weeks.disable)
return;
if (this.cale.lastHover)
return;
let {
before,
after
} = this.cale.multipleStatus;
if (!before)
return;
this.calendar = weeks;
this.cale.setHoverMultiple(this.calendar.fullDate);
this.weeks = this.cale.weeks;
if (this.firstEnter) {
this.$emit("firstEnterCale", this.cale.multipleStatus);
this.firstEnter = false;
}
},
rangeWithinMonth(A, B) {
const [yearA, monthA] = A.split("-");
const [yearB, monthB] = B.split("-");
return yearA === yearB && monthA === monthB;
},
// 蒙版点击事件
maskClick() {
this.close();
this.$emit("maskClose");
},
clearCalender() {
if (this.range) {
this.timeRange.startTime = "";
this.timeRange.endTime = "";
this.tempRange.before = "";
this.tempRange.after = "";
this.cale.multipleStatus.before = "";
this.cale.multipleStatus.after = "";
this.cale.multipleStatus.data = [];
this.cale.lastHover = false;
} else {
this.time = "";
this.tempSingleDate = "";
}
this.calendar.fullDate = "";
this.setDate(/* @__PURE__ */ new Date());
},
bindDateChange(e) {
const value = e.detail.value + "-1";
this.setDate(value);
},
/**
* 初始化日期显示
* @param {Object} date
*/
init(date) {
if (!this.cale) {
return;
}
this.cale.setDate(date || /* @__PURE__ */ new Date());
this.weeks = this.cale.weeks;
this.nowDate = this.cale.getInfo(date);
this.calendar = {
...this.nowDate
};
if (!date) {
this.calendar.fullDate = "";
if (this.defaultValue && !this.range) {
const defaultDate = new Date(this.defaultValue);
const fullDate = uni_modules_uniDatetimePicker_components_uniDatetimePicker_util.getDate(defaultDate);
const year = defaultDate.getFullYear();
const month = defaultDate.getMonth() + 1;
const date2 = defaultDate.getDate();
const day = defaultDate.getDay();
this.calendar = {
fullDate,
year,
month,
date: date2,
day
}, this.tempSingleDate = fullDate;
this.time = uni_modules_uniDatetimePicker_components_uniDatetimePicker_util.getTime(defaultDate, this.hideSecond);
}
}
},
/**
* 打开日历弹窗
*/
open() {
if (this.clearDate && !this.insert) {
this.cale.cleanMultipleStatus();
this.init(this.date);
}
this.show = true;
this.$nextTick(() => {
setTimeout(() => {
this.aniMaskShow = true;
}, 50);
});
},
/**
* 关闭日历弹窗
*/
close() {
this.aniMaskShow = false;
this.$nextTick(() => {
setTimeout(() => {
this.show = false;
this.$emit("close");
}, 300);
});
},
/**
* 确认按钮
*/
confirm() {
this.setEmit("confirm");
this.close();
},
/**
* 变化触发
*/
change(isSingleChange) {
if (!this.insert && !isSingleChange)
return;
this.setEmit("change");
},
/**
* 选择月份触发
*/
monthSwitch() {
let {
year,
month
} = this.nowDate;
this.$emit("monthSwitch", {
year,
month: Number(month)
});
},
/**
* 派发事件
* @param {Object} name
*/
setEmit(name) {
if (!this.range) {
if (!this.calendar.fullDate) {
this.calendar = this.cale.getInfo(/* @__PURE__ */ new Date());
this.tempSingleDate = this.calendar.fullDate;
}
if (this.hasTime && !this.time) {
this.time = uni_modules_uniDatetimePicker_components_uniDatetimePicker_util.getTime(/* @__PURE__ */ new Date(), this.hideSecond);
}
}
let {
year,
month,
date,
fullDate,
extraInfo
} = this.calendar;
this.$emit(name, {
range: this.cale.multipleStatus,
year,
month,
date,
time: this.time,
timeRange: this.timeRange,
fulldate: fullDate,
extraInfo: extraInfo || {}
});
},
/**
* 选择天触发
* @param {Object} weeks
*/
choiceDate(weeks) {
if (weeks.disable)
return;
this.calendar = weeks;
this.calendar.userChecked = true;
this.cale.setMultiple(this.calendar.fullDate, true);
this.weeks = this.cale.weeks;
this.tempSingleDate = this.calendar.fullDate;
const beforeDate = new Date(this.cale.multipleStatus.before).getTime();
const afterDate = new Date(this.cale.multipleStatus.after).getTime();
if (beforeDate > afterDate && afterDate) {
this.tempRange.before = this.cale.multipleStatus.after;
this.tempRange.after = this.cale.multipleStatus.before;
} else {
this.tempRange.before = this.cale.multipleStatus.before;
this.tempRange.after = this.cale.multipleStatus.after;
}
this.change(true);
},
changeMonth(type) {
let newDate;
if (type === "pre") {
newDate = this.cale.getPreMonthObj(this.nowDate.fullDate).fullDate;
} else if (type === "next") {
newDate = this.cale.getNextMonthObj(this.nowDate.fullDate).fullDate;
}
this.setDate(newDate);
this.monthSwitch();
},
/**
* 设置日期
* @param {Object} date
*/
setDate(date) {
this.cale.setDate(date);
this.weeks = this.cale.weeks;
this.nowDate = this.cale.getInfo(date);
}
}
};
if (!Array) {
const _component_calendar_item = common_vendor.resolveComponent("calendar-item");
const _component_time_picker = common_vendor.resolveComponent("time-picker");
const _easycom_uni_icons2 = common_vendor.resolveComponent("uni-icons");
(_component_calendar_item + _component_time_picker + _easycom_uni_icons2)();
}
const _easycom_uni_icons = () => "../../../uni-icons/components/uni-icons/uni-icons.js";
if (!Math) {
_easycom_uni_icons();
}
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
return common_vendor.e({
a: !$props.insert && $data.show
}, !$props.insert && $data.show ? {
b: $data.aniMaskShow ? 1 : "",
c: common_vendor.o$1((...args) => $options.maskClick && $options.maskClick(...args))
} : {}, {
d: $props.insert || $data.show
}, $props.insert || $data.show ? common_vendor.e({
e: common_vendor.o$1(($event) => $options.changeMonth("pre")),
f: common_vendor.t(($data.nowDate.year || "") + $options.yearText + ($data.nowDate.month || "") + $options.monthText),
g: $props.date,
h: common_vendor.o$1((...args) => $options.bindDateChange && $options.bindDateChange(...args)),
i: common_vendor.o$1(($event) => $options.changeMonth("next")),
j: !$props.insert
}, !$props.insert ? {
k: common_vendor.o$1((...args) => $options.maskClick && $options.maskClick(...args))
} : {}, {
l: !$props.insert ? 1 : "",
m: $props.showMonth
}, $props.showMonth ? {
n: common_vendor.t($data.nowDate.month)
} : {}, {
o: common_vendor.t($options.SUNText),
p: common_vendor.t($options.MONText),
q: common_vendor.t($options.TUEText),
r: common_vendor.t($options.WEDText),
s: common_vendor.t($options.THUText),
t: common_vendor.t($options.FRIText),
v: common_vendor.t($options.SATText),
w: common_vendor.f($data.weeks, (item, weekIndex, i0) => {
return {
a: common_vendor.f(item, (weeks, weeksIndex, i1) => {
return {
a: common_vendor.o$1($options.choiceDate, weeksIndex),
b: common_vendor.o$1($options.handleMouse, weeksIndex),
c: "9e80a514-0-" + i0 + "-" + i1,
d: common_vendor.p({
weeks,
calendar: $data.calendar,
selected: $props.selected,
checkHover: $props.range
}),
e: weeksIndex
};
}),
b: weekIndex
};
}),
x: !$props.insert && !$props.range && $props.hasTime
}, !$props.insert && !$props.range && $props.hasTime ? {
y: common_vendor.t($data.tempSingleDate ? $data.tempSingleDate : $options.selectDateText),
z: common_vendor.o$1(($event) => $data.time = $event),
A: common_vendor.p({
type: "time",
start: $options.timepickerStartTime,
end: $options.timepickerEndTime,
disabled: !$data.tempSingleDate,
border: false,
["hide-second"]: $props.hideSecond,
modelValue: $data.time
})
} : {}, {
B: !$props.insert && $props.range && $props.hasTime
}, !$props.insert && $props.range && $props.hasTime ? {
C: common_vendor.t($data.tempRange.before ? $data.tempRange.before : $options.startDateText),
D: common_vendor.o$1(($event) => $data.timeRange.startTime = $event),
E: common_vendor.p({
type: "time",
start: $options.timepickerStartTime,
border: false,
["hide-second"]: $props.hideSecond,
disabled: !$data.tempRange.before,
modelValue: $data.timeRange.startTime
}),
F: common_vendor.p({
type: "arrowthinright",
color: "#999"
}),
G: common_vendor.t($data.tempRange.after ? $data.tempRange.after : $options.endDateText),
H: common_vendor.o$1(($event) => $data.timeRange.endTime = $event),
I: common_vendor.p({
type: "time",
end: $options.timepickerEndTime,
border: false,
["hide-second"]: $props.hideSecond,
disabled: !$data.tempRange.after,
modelValue: $data.timeRange.endTime
})
} : {}, {
J: !$props.insert
}, !$props.insert ? {
K: common_vendor.t($options.confirmText),
L: common_vendor.o$1((...args) => $options.confirm && $options.confirm(...args))
} : {}, {
M: !$props.insert ? 1 : "",
N: $data.aniMaskShow ? 1 : "",
O: $data.aniMaskShow ? 1 : ""
}) : {}, {
P: common_vendor.o$1((...args) => $options.leaveCale && $options.leaveCale(...args))
});
}
const Component = /* @__PURE__ */ common_vendor._export_sfc(_sfc_main, [["render", _sfc_render]]);
wx.createComponent(Component);
//# sourceMappingURL=../../../../../.sourcemap/mp-weixin/uni_modules/uni-datetime-picker/components/uni-datetime-picker/calendar.js.map

View File

@@ -0,0 +1,8 @@
{
"component": true,
"usingComponents": {
"calendar-item": "./calendar-item",
"time-picker": "./time-picker",
"uni-icons": "../../../uni-icons/components/uni-icons/uni-icons"
}
}

View File

@@ -0,0 +1 @@
<view class="uni-calendar" bindmouseleave="{{P}}"><view wx:if="{{a}}" class="{{['uni-calendar__mask', b && 'uni-calendar--mask-show']}}" bindtap="{{c}}"></view><view wx:if="{{d}}" class="{{['uni-calendar__content', M && 'uni-calendar--fixed', N && 'uni-calendar--ani-show', O && 'uni-calendar__content-mobile']}}"><view class="{{['uni-calendar__header', l && 'uni-calendar__header-mobile']}}"><view class="uni-calendar__header-btn-box" catchtap="{{e}}"><view class="uni-calendar__header-btn uni-calendar--left"></view></view><picker mode="date" value="{{g}}" fields="month" bindchange="{{h}}"><text class="uni-calendar__header-text">{{f}}</text></picker><view class="uni-calendar__header-btn-box" catchtap="{{i}}"><view class="uni-calendar__header-btn uni-calendar--right"></view></view><view wx:if="{{j}}" class="dialog-close" bindtap="{{k}}"><view class="dialog-close-plus" data-id="close"></view><view class="dialog-close-plus dialog-close-rotate" data-id="close"></view></view></view><view class="uni-calendar__box"><view wx:if="{{m}}" class="uni-calendar__box-bg"><text class="uni-calendar__box-bg-text">{{n}}</text></view><view class="uni-calendar__weeks" style="padding-bottom:7px"><view class="uni-calendar__weeks-day"><text class="uni-calendar__weeks-day-text">{{o}}</text></view><view class="uni-calendar__weeks-day"><text class="uni-calendar__weeks-day-text">{{p}}</text></view><view class="uni-calendar__weeks-day"><text class="uni-calendar__weeks-day-text">{{q}}</text></view><view class="uni-calendar__weeks-day"><text class="uni-calendar__weeks-day-text">{{r}}</text></view><view class="uni-calendar__weeks-day"><text class="uni-calendar__weeks-day-text">{{s}}</text></view><view class="uni-calendar__weeks-day"><text class="uni-calendar__weeks-day-text">{{t}}</text></view><view class="uni-calendar__weeks-day"><text class="uni-calendar__weeks-day-text">{{v}}</text></view></view><view wx:for="{{w}}" wx:for-item="item" wx:key="b" class="uni-calendar__weeks"><view wx:for="{{item.a}}" wx:for-item="weeks" wx:key="e" class="uni-calendar__weeks-item"><calendar-item wx:if="{{weeks.d}}" class="uni-calendar-item--hook" bindchange="{{weeks.a}}" bindhandleMouse="{{weeks.b}}" u-i="{{weeks.c}}" bind:__l="__l" u-p="{{weeks.d}}"></calendar-item></view></view></view><view wx:if="{{x}}" class="uni-date-changed uni-calendar--fixed-top" style="padding:0 80px"><view class="uni-date-changed--time-date">{{y}}</view><time-picker wx:if="{{A}}" class="time-picker-style" u-i="9e80a514-1" bind:__l="__l" bindupdateModelValue="{{z}}" u-p="{{A}}"></time-picker></view><view wx:if="{{B}}" class="uni-date-changed uni-calendar--fixed-top"><view class="uni-date-changed--time-start"><view class="uni-date-changed--time-date">{{C}}</view><time-picker wx:if="{{E}}" class="time-picker-style" u-i="9e80a514-2" bind:__l="__l" bindupdateModelValue="{{D}}" u-p="{{E}}"></time-picker></view><view style="line-height:50px"><uni-icons wx:if="{{F}}" u-i="9e80a514-3" bind:__l="__l" u-p="{{F}}"></uni-icons></view><view class="uni-date-changed--time-end"><view class="uni-date-changed--time-date">{{G}}</view><time-picker wx:if="{{I}}" class="time-picker-style" u-i="9e80a514-4" bind:__l="__l" bindupdateModelValue="{{H}}" u-p="{{I}}"></time-picker></view></view><view wx:if="{{J}}" class="uni-date-changed uni-date-btn--ok"><view class="uni-datetime-picker--btn" bindtap="{{L}}">{{K}}</view></view></view></view>

View File

@@ -0,0 +1,251 @@
/**
* 这里是uni-app内置的常用样式变量
*
* uni-app 官方扩展插件及插件市场https://ext.dcloud.net.cn上很多三方插件均使用了这些样式变量
* 如果你是插件开发者建议你使用scss预处理并在插件代码中直接使用这些变量无需 import 这个文件方便用户通过搭积木的方式开发整体风格一致的App
*
*/
/**
* 如果你是App开发者插件使用者你可以通过修改这些变量来定制自己的插件主题实现自定义主题功能
*
* 如果你的项目同样使用了scss预处理你也可以直接在你的 scss 代码中使用如下变量,同时无需 import 这个文件
*/
/* 颜色变量 */
/* 行为相关颜色 */
/* 文字基本颜色 */
/* 背景颜色 */
/* 边框颜色 */
/* 尺寸变量 */
/* 文字尺寸 */
/* 图片尺寸 */
/* Border Radius */
/* 水平间距 */
/* 垂直间距 */
/* 透明度 */
/* 文章场景相关 */
.uni-calendar {
display: flex;
flex-direction: column;
}
.uni-calendar__mask {
position: fixed;
bottom: 0;
top: 0;
left: 0;
right: 0;
background-color: rgba(0, 0, 0, 0.4);
transition-property: opacity;
transition-duration: 0.3s;
opacity: 0;
z-index: 99;
}
.uni-calendar--mask-show {
opacity: 1;
}
.uni-calendar--fixed {
position: fixed;
bottom: calc(var(--window-bottom));
left: 0;
right: 0;
transition-property: transform;
transition-duration: 0.3s;
transform: translateY(460px);
z-index: 99;
}
.uni-calendar--ani-show {
transform: translateY(0);
}
.uni-calendar__content {
background-color: #fff;
}
.uni-calendar__content-mobile {
border-top-left-radius: 10px;
border-top-right-radius: 10px;
box-shadow: 0px 0px 5px 3px rgba(0, 0, 0, 0.1);
}
.uni-calendar__header {
position: relative;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
height: 50px;
}
.uni-calendar__header-mobile {
padding: 10px;
padding-bottom: 0;
}
.uni-calendar--fixed-top {
display: flex;
flex-direction: row;
justify-content: space-between;
border-top-color: rgba(0, 0, 0, 0.4);
border-top-style: solid;
border-top-width: 1px;
}
.uni-calendar--fixed-width {
width: 50px;
}
.uni-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: #fff;
background-color: #f1f1f1;
}
.uni-calendar__header-text {
text-align: center;
width: 100px;
font-size: 15px;
color: #666;
}
.uni-calendar__button-text {
text-align: center;
width: 100px;
font-size: 14px;
color: #007aff;
letter-spacing: 3px;
}
.uni-calendar__header-btn-box {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
width: 50px;
height: 50px;
}
.uni-calendar__header-btn {
width: 9px;
height: 9px;
border-left-color: #808080;
border-left-style: solid;
border-left-width: 1px;
border-top-color: #555555;
border-top-style: solid;
border-top-width: 1px;
}
.uni-calendar--left {
transform: rotate(-45deg);
}
.uni-calendar--right {
transform: rotate(135deg);
}
.uni-calendar__weeks {
position: relative;
display: flex;
flex-direction: row;
}
.uni-calendar__weeks-item {
flex: 1;
}
.uni-calendar__weeks-day {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 40px;
border-bottom-color: #F5F5F5;
border-bottom-style: solid;
border-bottom-width: 1px;
}
.uni-calendar__weeks-day-text {
font-size: 12px;
color: #B2B2B2;
}
.uni-calendar__box {
position: relative;
padding-bottom: 7px;
}
.uni-calendar__box-bg {
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.uni-calendar__box-bg-text {
font-size: 200px;
font-weight: bold;
color: #999;
opacity: 0.1;
text-align: center;
line-height: 1;
}
.uni-date-changed {
padding: 0 10px;
text-align: center;
color: #333;
border-top-color: #DCDCDC;
border-top-style: solid;
border-top-width: 1px;
flex: 1;
}
.uni-date-btn--ok {
padding: 20px 15px;
}
.uni-date-changed--time-start {
display: flex;
align-items: center;
}
.uni-date-changed--time-end {
display: flex;
align-items: center;
}
.uni-date-changed--time-date {
color: #999;
line-height: 50px;
margin-right: 5px;
}
.time-picker-style {
display: flex;
justify-content: center;
align-items: center;
}
.mr-10 {
margin-right: 10px;
}
.dialog-close {
position: absolute;
top: 0;
right: 0;
bottom: 0;
display: flex;
flex-direction: row;
align-items: center;
padding: 0 25px;
margin-top: 10px;
}
.dialog-close-plus {
width: 16px;
height: 2px;
background-color: #737987;
border-radius: 2px;
transform: rotate(45deg);
}
.dialog-close-rotate {
position: absolute;
transform: rotate(-45deg);
}
.uni-datetime-picker--btn {
border-radius: 100px;
height: 40px;
line-height: 40px;
background-color: #007aff;
color: #fff;
font-size: 16px;
letter-spacing: 2px;
}
.uni-datetime-picker--btn:active {
opacity: 0.7;
}

View File

@@ -0,0 +1,74 @@
"use strict";
const en = {
"uni-datetime-picker.selectDate": "select date",
"uni-datetime-picker.selectTime": "select time",
"uni-datetime-picker.selectDateTime": "select date and time",
"uni-datetime-picker.startDate": "start date",
"uni-datetime-picker.endDate": "end date",
"uni-datetime-picker.startTime": "start time",
"uni-datetime-picker.endTime": "end time",
"uni-datetime-picker.ok": "ok",
"uni-datetime-picker.clear": "clear",
"uni-datetime-picker.cancel": "cancel",
"uni-datetime-picker.year": "-",
"uni-datetime-picker.month": "",
"uni-calender.MON": "MON",
"uni-calender.TUE": "TUE",
"uni-calender.WED": "WED",
"uni-calender.THU": "THU",
"uni-calender.FRI": "FRI",
"uni-calender.SAT": "SAT",
"uni-calender.SUN": "SUN",
"uni-calender.confirm": "confirm"
};
const zhHans = {
"uni-datetime-picker.selectDate": "选择日期",
"uni-datetime-picker.selectTime": "选择时间",
"uni-datetime-picker.selectDateTime": "选择日期时间",
"uni-datetime-picker.startDate": "开始日期",
"uni-datetime-picker.endDate": "结束日期",
"uni-datetime-picker.startTime": "开始时间",
"uni-datetime-picker.endTime": "结束时间",
"uni-datetime-picker.ok": "确定",
"uni-datetime-picker.clear": "清除",
"uni-datetime-picker.cancel": "取消",
"uni-datetime-picker.year": "年",
"uni-datetime-picker.month": "月",
"uni-calender.SUN": "日",
"uni-calender.MON": "一",
"uni-calender.TUE": "二",
"uni-calender.WED": "三",
"uni-calender.THU": "四",
"uni-calender.FRI": "五",
"uni-calender.SAT": "六",
"uni-calender.confirm": "确认"
};
const zhHant = {
"uni-datetime-picker.selectDate": "選擇日期",
"uni-datetime-picker.selectTime": "選擇時間",
"uni-datetime-picker.selectDateTime": "選擇日期時間",
"uni-datetime-picker.startDate": "開始日期",
"uni-datetime-picker.endDate": "結束日期",
"uni-datetime-picker.startTime": "開始时间",
"uni-datetime-picker.endTime": "結束时间",
"uni-datetime-picker.ok": "確定",
"uni-datetime-picker.clear": "清除",
"uni-datetime-picker.cancel": "取消",
"uni-datetime-picker.year": "年",
"uni-datetime-picker.month": "月",
"uni-calender.SUN": "日",
"uni-calender.MON": "一",
"uni-calender.TUE": "二",
"uni-calender.WED": "三",
"uni-calender.THU": "四",
"uni-calender.FRI": "五",
"uni-calender.SAT": "六",
"uni-calender.confirm": "確認"
};
const i18nMessages = {
en,
"zh-Hans": zhHans,
"zh-Hant": zhHant
};
exports.i18nMessages = i18nMessages;
//# sourceMappingURL=../../../../../../.sourcemap/mp-weixin/uni_modules/uni-datetime-picker/components/uni-datetime-picker/i18n/index.js.map

View File

@@ -0,0 +1,695 @@
"use strict";
const common_vendor = require("../../../../common/vendor.js");
const uni_modules_uniDatetimePicker_components_uniDatetimePicker_i18n_index = require("./i18n/index.js");
const uni_modules_uniDatetimePicker_components_uniDatetimePicker_util = require("./util.js");
const {
t
} = common_vendor.initVueI18n(uni_modules_uniDatetimePicker_components_uniDatetimePicker_i18n_index.i18nMessages);
const _sfc_main = {
name: "UniDatetimePicker",
data() {
return {
indicatorStyle: `height: 50px;`,
visible: false,
fixNvueBug: {},
dateShow: true,
timeShow: true,
title: "日期和时间",
// 输入框当前时间
time: "",
// 当前的年月日时分秒
year: 1920,
month: 0,
day: 0,
hour: 0,
minute: 0,
second: 0,
// 起始时间
startYear: 1920,
startMonth: 1,
startDay: 1,
startHour: 0,
startMinute: 0,
startSecond: 0,
// 结束时间
endYear: 2120,
endMonth: 12,
endDay: 31,
endHour: 23,
endMinute: 59,
endSecond: 59
};
},
options: {
virtualHost: true
},
props: {
type: {
type: String,
default: "datetime"
},
value: {
type: [String, Number],
default: ""
},
modelValue: {
type: [String, Number],
default: ""
},
start: {
type: [Number, String],
default: ""
},
end: {
type: [Number, String],
default: ""
},
returnType: {
type: String,
default: "string"
},
disabled: {
type: [Boolean, String],
default: false
},
border: {
type: [Boolean, String],
default: true
},
hideSecond: {
type: [Boolean, String],
default: false
}
},
watch: {
modelValue: {
handler(newVal) {
if (newVal) {
this.parseValue(uni_modules_uniDatetimePicker_components_uniDatetimePicker_util.fixIosDateFormat(newVal));
this.initTime(false);
} else {
this.time = "";
this.parseValue(Date.now());
}
},
immediate: true
},
type: {
handler(newValue) {
if (newValue === "date") {
this.dateShow = true;
this.timeShow = false;
this.title = "日期";
} else if (newValue === "time") {
this.dateShow = false;
this.timeShow = true;
this.title = "时间";
} else {
this.dateShow = true;
this.timeShow = true;
this.title = "日期和时间";
}
},
immediate: true
},
start: {
handler(newVal) {
this.parseDatetimeRange(uni_modules_uniDatetimePicker_components_uniDatetimePicker_util.fixIosDateFormat(newVal), "start");
},
immediate: true
},
end: {
handler(newVal) {
this.parseDatetimeRange(uni_modules_uniDatetimePicker_components_uniDatetimePicker_util.fixIosDateFormat(newVal), "end");
},
immediate: true
},
// 月、日、时、分、秒可选范围变化后,检查当前值是否在范围内,不在则当前值重置为可选范围第一项
months(newVal) {
this.checkValue("month", this.month, newVal);
},
days(newVal) {
this.checkValue("day", this.day, newVal);
},
hours(newVal) {
this.checkValue("hour", this.hour, newVal);
},
minutes(newVal) {
this.checkValue("minute", this.minute, newVal);
},
seconds(newVal) {
this.checkValue("second", this.second, newVal);
}
},
computed: {
// 当前年、月、日、时、分、秒选择范围
years() {
return this.getCurrentRange("year");
},
months() {
return this.getCurrentRange("month");
},
days() {
return this.getCurrentRange("day");
},
hours() {
return this.getCurrentRange("hour");
},
minutes() {
return this.getCurrentRange("minute");
},
seconds() {
return this.getCurrentRange("second");
},
// picker 当前值数组
ymd() {
return [this.year - this.minYear, this.month - this.minMonth, this.day - this.minDay];
},
hms() {
return [this.hour - this.minHour, this.minute - this.minMinute, this.second - this.minSecond];
},
// 当前 date 是 start
currentDateIsStart() {
return this.year === this.startYear && this.month === this.startMonth && this.day === this.startDay;
},
// 当前 date 是 end
currentDateIsEnd() {
return this.year === this.endYear && this.month === this.endMonth && this.day === this.endDay;
},
// 当前年、月、日、时、分、秒的最小值和最大值
minYear() {
return this.startYear;
},
maxYear() {
return this.endYear;
},
minMonth() {
if (this.year === this.startYear) {
return this.startMonth;
} else {
return 1;
}
},
maxMonth() {
if (this.year === this.endYear) {
return this.endMonth;
} else {
return 12;
}
},
minDay() {
if (this.year === this.startYear && this.month === this.startMonth) {
return this.startDay;
} else {
return 1;
}
},
maxDay() {
if (this.year === this.endYear && this.month === this.endMonth) {
return this.endDay;
} else {
return this.daysInMonth(this.year, this.month);
}
},
minHour() {
if (this.type === "datetime") {
if (this.currentDateIsStart) {
return this.startHour;
} else {
return 0;
}
}
if (this.type === "time") {
return this.startHour;
}
},
maxHour() {
if (this.type === "datetime") {
if (this.currentDateIsEnd) {
return this.endHour;
} else {
return 23;
}
}
if (this.type === "time") {
return this.endHour;
}
},
minMinute() {
if (this.type === "datetime") {
if (this.currentDateIsStart && this.hour === this.startHour) {
return this.startMinute;
} else {
return 0;
}
}
if (this.type === "time") {
if (this.hour === this.startHour) {
return this.startMinute;
} else {
return 0;
}
}
},
maxMinute() {
if (this.type === "datetime") {
if (this.currentDateIsEnd && this.hour === this.endHour) {
return this.endMinute;
} else {
return 59;
}
}
if (this.type === "time") {
if (this.hour === this.endHour) {
return this.endMinute;
} else {
return 59;
}
}
},
minSecond() {
if (this.type === "datetime") {
if (this.currentDateIsStart && this.hour === this.startHour && this.minute === this.startMinute) {
return this.startSecond;
} else {
return 0;
}
}
if (this.type === "time") {
if (this.hour === this.startHour && this.minute === this.startMinute) {
return this.startSecond;
} else {
return 0;
}
}
},
maxSecond() {
if (this.type === "datetime") {
if (this.currentDateIsEnd && this.hour === this.endHour && this.minute === this.endMinute) {
return this.endSecond;
} else {
return 59;
}
}
if (this.type === "time") {
if (this.hour === this.endHour && this.minute === this.endMinute) {
return this.endSecond;
} else {
return 59;
}
}
},
/**
* for i18n
*/
selectTimeText() {
return t("uni-datetime-picker.selectTime");
},
okText() {
return t("uni-datetime-picker.ok");
},
clearText() {
return t("uni-datetime-picker.clear");
},
cancelText() {
return t("uni-datetime-picker.cancel");
}
},
mounted() {
},
methods: {
/**
* @param {Object} item
* 小于 10 在前面加个 0
*/
lessThanTen(item) {
return item < 10 ? "0" + item : item;
},
/**
* 解析时分秒字符串例如00:00:00
* @param {String} timeString
*/
parseTimeType(timeString) {
if (timeString) {
let timeArr = timeString.split(":");
this.hour = Number(timeArr[0]);
this.minute = Number(timeArr[1]);
this.second = Number(timeArr[2]);
}
},
/**
* 解析选择器初始值类型可以是字符串、时间戳例如2000-10-02、'08:30:00'、 1610695109000
* @param {String | Number} datetime
*/
initPickerValue(datetime) {
let defaultValue = null;
if (datetime) {
defaultValue = this.compareValueWithStartAndEnd(datetime, this.start, this.end);
} else {
defaultValue = Date.now();
defaultValue = this.compareValueWithStartAndEnd(defaultValue, this.start, this.end);
}
this.parseValue(defaultValue);
},
/**
* 初始值规则:
* - 用户设置初始值 value
* - 设置了起始时间 start、终止时间 end并 start < value < end初始值为 value 否则初始值为 start
* - 只设置了起始时间 start并 start < value初始值为 value否则初始值为 start
* - 只设置了终止时间 end并 value < end初始值为 value否则初始值为 end
* - 无起始终止时间,则初始值为 value
* - 无初始值 value则初始值为当前本地时间 Date.now()
* @param {Object} value
* @param {Object} dateBase
*/
compareValueWithStartAndEnd(value, start, end) {
let winner = null;
value = this.superTimeStamp(value);
start = this.superTimeStamp(start);
end = this.superTimeStamp(end);
if (start && end) {
if (value < start) {
winner = new Date(start);
} else if (value > end) {
winner = new Date(end);
} else {
winner = new Date(value);
}
} else if (start && !end) {
winner = start <= value ? new Date(value) : new Date(start);
} else if (!start && end) {
winner = value <= end ? new Date(value) : new Date(end);
} else {
winner = new Date(value);
}
return winner;
},
/**
* 转换为可比较的时间戳,接受日期、时分秒、时间戳
* @param {Object} value
*/
superTimeStamp(value) {
let dateBase = "";
if (this.type === "time" && value && typeof value === "string") {
const now = /* @__PURE__ */ new Date();
const year = now.getFullYear();
const month = now.getMonth() + 1;
const day = now.getDate();
dateBase = year + "/" + month + "/" + day + " ";
}
if (Number(value)) {
value = parseInt(value);
dateBase = 0;
}
return this.createTimeStamp(dateBase + value);
},
/**
* 解析默认值 value字符串、时间戳
* @param {Object} defaultTime
*/
parseValue(value) {
if (!value) {
return;
}
if (this.type === "time" && typeof value === "string") {
this.parseTimeType(value);
} else {
let defaultDate = null;
defaultDate = new Date(value);
if (this.type !== "time") {
this.year = defaultDate.getFullYear();
this.month = defaultDate.getMonth() + 1;
this.day = defaultDate.getDate();
}
if (this.type !== "date") {
this.hour = defaultDate.getHours();
this.minute = defaultDate.getMinutes();
this.second = defaultDate.getSeconds();
}
}
if (this.hideSecond) {
this.second = 0;
}
},
/**
* 解析可选择时间范围 start、end年月日字符串、时间戳
* @param {Object} defaultTime
*/
parseDatetimeRange(point, pointType) {
if (!point) {
if (pointType === "start") {
this.startYear = 1920;
this.startMonth = 1;
this.startDay = 1;
this.startHour = 0;
this.startMinute = 0;
this.startSecond = 0;
}
if (pointType === "end") {
this.endYear = 2120;
this.endMonth = 12;
this.endDay = 31;
this.endHour = 23;
this.endMinute = 59;
this.endSecond = 59;
}
return;
}
if (this.type === "time") {
const pointArr = point.split(":");
this[pointType + "Hour"] = Number(pointArr[0]);
this[pointType + "Minute"] = Number(pointArr[1]);
this[pointType + "Second"] = Number(pointArr[2]);
} else {
if (!point) {
pointType === "start" ? this.startYear = this.year - 60 : this.endYear = this.year + 60;
return;
}
if (Number(point)) {
point = parseInt(point);
}
const hasTime = /[0-9]:[0-9]/;
if (this.type === "datetime" && pointType === "end" && typeof point === "string" && !hasTime.test(
point
)) {
point = point + " 23:59:59";
}
const pointDate = new Date(point);
this[pointType + "Year"] = pointDate.getFullYear();
this[pointType + "Month"] = pointDate.getMonth() + 1;
this[pointType + "Day"] = pointDate.getDate();
if (this.type === "datetime") {
this[pointType + "Hour"] = pointDate.getHours();
this[pointType + "Minute"] = pointDate.getMinutes();
this[pointType + "Second"] = pointDate.getSeconds();
}
}
},
// 获取 年、月、日、时、分、秒 当前可选范围
getCurrentRange(value) {
const range = [];
for (let i = this["min" + this.capitalize(value)]; i <= this["max" + this.capitalize(value)]; i++) {
range.push(i);
}
return range;
},
// 字符串首字母大写
capitalize(str) {
return str.charAt(0).toUpperCase() + str.slice(1);
},
// 检查当前值是否在范围内,不在则当前值重置为可选范围第一项
checkValue(name, value, values) {
if (values.indexOf(value) === -1) {
this[name] = values[0];
}
},
// 每个月的实际天数
daysInMonth(year, month) {
return new Date(year, month, 0).getDate();
},
/**
* 生成时间戳
* @param {Object} time
*/
createTimeStamp(time) {
if (!time)
return;
if (typeof time === "number") {
return time;
} else {
time = time.replace(/-/g, "/");
if (this.type === "date") {
time = time + " 00:00:00";
}
return Date.parse(time);
}
},
/**
* 生成日期或时间的字符串
*/
createDomSting() {
const yymmdd = this.year + "-" + this.lessThanTen(this.month) + "-" + this.lessThanTen(this.day);
let hhmmss = this.lessThanTen(this.hour) + ":" + this.lessThanTen(this.minute);
if (!this.hideSecond) {
hhmmss = hhmmss + ":" + this.lessThanTen(this.second);
}
if (this.type === "date") {
return yymmdd;
} else if (this.type === "time") {
return hhmmss;
} else {
return yymmdd + " " + hhmmss;
}
},
/**
* 初始化返回值,并抛出 change 事件
*/
initTime(emit = true) {
this.time = this.createDomSting();
if (!emit)
return;
if (this.returnType === "timestamp" && this.type !== "time") {
this.$emit("change", this.createTimeStamp(this.time));
this.$emit("input", this.createTimeStamp(this.time));
this.$emit("update:modelValue", this.createTimeStamp(this.time));
} else {
this.$emit("change", this.time);
this.$emit("input", this.time);
this.$emit("update:modelValue", this.time);
}
},
/**
* 用户选择日期或时间更新 data
* @param {Object} e
*/
bindDateChange(e) {
const val = e.detail.value;
this.year = this.years[val[0]];
this.month = this.months[val[1]];
this.day = this.days[val[2]];
},
bindTimeChange(e) {
const val = e.detail.value;
this.hour = this.hours[val[0]];
this.minute = this.minutes[val[1]];
this.second = this.seconds[val[2]];
},
/**
* 初始化弹出层
*/
initTimePicker() {
if (this.disabled)
return;
const value = uni_modules_uniDatetimePicker_components_uniDatetimePicker_util.fixIosDateFormat(this.time);
this.initPickerValue(value);
this.visible = !this.visible;
},
/**
* 触发或关闭弹框
*/
tiggerTimePicker(e) {
this.visible = !this.visible;
},
/**
* 用户点击“清空”按钮,清空当前值
*/
clearTime() {
this.time = "";
this.$emit("change", this.time);
this.$emit("input", this.time);
this.$emit("update:modelValue", this.time);
this.tiggerTimePicker();
},
/**
* 用户点击“确定”按钮
*/
setTime() {
this.initTime();
this.tiggerTimePicker();
}
}
};
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
return common_vendor.e({
a: common_vendor.t($data.time),
b: !$data.time
}, !$data.time ? {
c: common_vendor.t($options.selectTimeText)
} : {}, {
d: $props.disabled ? 1 : "",
e: $props.border ? 1 : "",
f: common_vendor.o$1((...args) => $options.initTimePicker && $options.initTimePicker(...args)),
g: $data.visible
}, $data.visible ? {
h: common_vendor.o$1((...args) => $options.tiggerTimePicker && $options.tiggerTimePicker(...args))
} : {}, {
i: $data.visible
}, $data.visible ? common_vendor.e({
j: common_vendor.t($options.selectTimeText),
k: $data.dateShow
}, $data.dateShow ? {
l: common_vendor.f($options.years, (item, index, i0) => {
return {
a: common_vendor.t($options.lessThanTen(item)),
b: index
};
}),
m: common_vendor.f($options.months, (item, index, i0) => {
return {
a: common_vendor.t($options.lessThanTen(item)),
b: index
};
}),
n: common_vendor.f($options.days, (item, index, i0) => {
return {
a: common_vendor.t($options.lessThanTen(item)),
b: index
};
}),
o: $data.indicatorStyle,
p: $options.ymd,
q: common_vendor.o$1((...args) => $options.bindDateChange && $options.bindDateChange(...args))
} : {}, {
r: $data.timeShow
}, $data.timeShow ? common_vendor.e({
s: common_vendor.f($options.hours, (item, index, i0) => {
return {
a: common_vendor.t($options.lessThanTen(item)),
b: index
};
}),
t: common_vendor.f($options.minutes, (item, index, i0) => {
return {
a: common_vendor.t($options.lessThanTen(item)),
b: index
};
}),
v: !$props.hideSecond
}, !$props.hideSecond ? {
w: common_vendor.f($options.seconds, (item, index, i0) => {
return {
a: common_vendor.t($options.lessThanTen(item)),
b: index
};
})
} : {}, {
x: common_vendor.n($props.hideSecond ? "time-hide-second" : ""),
y: $data.indicatorStyle,
z: $options.hms,
A: common_vendor.o$1((...args) => $options.bindTimeChange && $options.bindTimeChange(...args)),
B: common_vendor.n($props.hideSecond ? "sign-center" : "sign-left"),
C: !$props.hideSecond
}, !$props.hideSecond ? {} : {}) : {}, {
D: common_vendor.t($options.clearText),
E: common_vendor.o$1((...args) => $options.clearTime && $options.clearTime(...args)),
F: common_vendor.t($options.cancelText),
G: common_vendor.o$1((...args) => $options.tiggerTimePicker && $options.tiggerTimePicker(...args)),
H: common_vendor.t($options.okText),
I: common_vendor.o$1((...args) => $options.setTime && $options.setTime(...args)),
J: common_vendor.n($data.dateShow && $data.timeShow ? "" : "fix-nvue-height"),
K: common_vendor.s($data.fixNvueBug)
}) : {});
}
const Component = /* @__PURE__ */ common_vendor._export_sfc(_sfc_main, [["render", _sfc_render]]);
wx.createComponent(Component);
//# sourceMappingURL=../../../../../.sourcemap/mp-weixin/uni_modules/uni-datetime-picker/components/uni-datetime-picker/time-picker.js.map

View File

@@ -0,0 +1,4 @@
{
"component": true,
"usingComponents": {}
}

View File

@@ -0,0 +1 @@
<view class="uni-datetime-picker"><view bindtap="{{f}}"><block wx:if="{{$slots.d}}"><slot></slot></block><block wx:else><view class="{{['uni-datetime-picker-timebox-pointer', d && 'uni-datetime-picker-disabled', e && 'uni-datetime-picker-timebox']}}"><text class="uni-datetime-picker-text">{{a}}</text><view wx:if="{{b}}" class="uni-datetime-picker-time"><text class="uni-datetime-picker-text">{{c}}</text></view></view></block></view><view wx:if="{{g}}" id="mask" class="uni-datetime-picker-mask" bindtap="{{h}}"></view><view wx:if="{{i}}" class="{{['uni-datetime-picker-popup', J]}}" style="{{K}}"><view class="uni-title"><text class="uni-datetime-picker-text">{{j}}</text></view><view wx:if="{{k}}" class="uni-datetime-picker__container-box"><block wx:if="{{r0}}"><picker-view class="uni-datetime-picker-view" indicator-style="{{o}}" value="{{p}}" bindchange="{{q}}"><picker-view-column><view wx:for="{{l}}" wx:for-item="item" wx:key="b" class="uni-datetime-picker-item"><text class="uni-datetime-picker-item">{{item.a}}</text></view></picker-view-column><picker-view-column><view wx:for="{{m}}" wx:for-item="item" wx:key="b" class="uni-datetime-picker-item"><text class="uni-datetime-picker-item">{{item.a}}</text></view></picker-view-column><picker-view-column><view wx:for="{{n}}" wx:for-item="item" wx:key="b" class="uni-datetime-picker-item"><text class="uni-datetime-picker-item">{{item.a}}</text></view></picker-view-column></picker-view></block><text class="uni-datetime-picker-sign sign-left">-</text><text class="uni-datetime-picker-sign sign-right">-</text></view><view wx:if="{{r}}" class="uni-datetime-picker__container-box"><block wx:if="{{r0}}"><picker-view class="{{['uni-datetime-picker-view', x]}}" indicator-style="{{y}}" value="{{z}}" bindchange="{{A}}"><picker-view-column><view wx:for="{{s}}" wx:for-item="item" wx:key="b" class="uni-datetime-picker-item"><text class="uni-datetime-picker-item">{{item.a}}</text></view></picker-view-column><picker-view-column><view wx:for="{{t}}" wx:for-item="item" wx:key="b" class="uni-datetime-picker-item"><text class="uni-datetime-picker-item">{{item.a}}</text></view></picker-view-column><picker-view-column wx:if="{{v}}"><view wx:for="{{w}}" wx:for-item="item" wx:key="b" class="uni-datetime-picker-item"><text class="uni-datetime-picker-item">{{item.a}}</text></view></picker-view-column></picker-view></block><text class="{{['uni-datetime-picker-sign', B]}}">:</text><text wx:if="{{C}}" class="uni-datetime-picker-sign sign-right">:</text></view><view class="uni-datetime-picker-btn"><view bindtap="{{E}}"><text class="uni-datetime-picker-btn-text">{{D}}</text></view><view class="uni-datetime-picker-btn-group"><view class="uni-datetime-picker-cancel" bindtap="{{G}}"><text class="uni-datetime-picker-btn-text">{{F}}</text></view><view bindtap="{{I}}"><text class="uni-datetime-picker-btn-text">{{H}}</text></view></view></view></view></view>

View File

@@ -0,0 +1,127 @@
/**
* 这里是uni-app内置的常用样式变量
*
* uni-app 官方扩展插件及插件市场https://ext.dcloud.net.cn上很多三方插件均使用了这些样式变量
* 如果你是插件开发者建议你使用scss预处理并在插件代码中直接使用这些变量无需 import 这个文件方便用户通过搭积木的方式开发整体风格一致的App
*
*/
/**
* 如果你是App开发者插件使用者你可以通过修改这些变量来定制自己的插件主题实现自定义主题功能
*
* 如果你的项目同样使用了scss预处理你也可以直接在你的 scss 代码中使用如下变量,同时无需 import 这个文件
*/
/* 颜色变量 */
/* 行为相关颜色 */
/* 文字基本颜色 */
/* 背景颜色 */
/* 边框颜色 */
/* 尺寸变量 */
/* 文字尺寸 */
/* 图片尺寸 */
/* Border Radius */
/* 水平间距 */
/* 垂直间距 */
/* 透明度 */
/* 文章场景相关 */
.uni-datetime-picker {
/* width: 100%; */
}
.uni-datetime-picker-view {
height: 130px;
width: 270px;
cursor: pointer;
}
.uni-datetime-picker-item {
height: 50px;
line-height: 50px;
text-align: center;
font-size: 14px;
}
.uni-datetime-picker-btn {
margin-top: 60px;
display: flex;
cursor: pointer;
flex-direction: row;
justify-content: space-between;
}
.uni-datetime-picker-btn-text {
font-size: 14px;
color: #007aff;
}
.uni-datetime-picker-btn-group {
display: flex;
flex-direction: row;
}
.uni-datetime-picker-cancel {
margin-right: 30px;
}
.uni-datetime-picker-mask {
position: fixed;
bottom: 0px;
top: 0px;
left: 0px;
right: 0px;
background-color: rgba(0, 0, 0, 0.4);
transition-duration: 0.3s;
z-index: 998;
}
.uni-datetime-picker-popup {
border-radius: 8px;
padding: 30px;
width: 270px;
background-color: #fff;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
transition-duration: 0.3s;
z-index: 999;
}
.uni-datetime-picker-time {
color: grey;
}
.uni-datetime-picker-column {
height: 50px;
}
.uni-datetime-picker-timebox {
border: 1px solid #E5E5E5;
border-radius: 5px;
padding: 7px 10px;
box-sizing: border-box;
cursor: pointer;
}
.uni-datetime-picker-timebox-pointer {
cursor: pointer;
}
.uni-datetime-picker-disabled {
opacity: 0.4;
}
.uni-datetime-picker-text {
font-size: 14px;
line-height: 50px;
}
.uni-datetime-picker-sign {
position: absolute;
top: 53px;
/* 减掉 10px 的元素高度兼容nvue */
color: #999;
}
.sign-left {
left: 86px;
}
.sign-right {
right: 86px;
}
.sign-center {
left: 135px;
}
.uni-datetime-picker__container-box {
position: relative;
display: flex;
align-items: center;
justify-content: center;
margin-top: 40px;
}
.time-hide-second {
width: 180px;
}

View File

@@ -0,0 +1,851 @@
"use strict";
const common_vendor = require("../../../../common/vendor.js");
const uni_modules_uniDatetimePicker_components_uniDatetimePicker_i18n_index = require("./i18n/index.js");
const uni_modules_uniDatetimePicker_components_uniDatetimePicker_util = require("./util.js");
const Calendar = () => "./calendar.js";
const TimePicker = () => "./time-picker.js";
const _sfc_main = {
name: "UniDatetimePicker",
options: {
virtualHost: true
},
components: {
Calendar,
TimePicker
},
data() {
return {
isRange: false,
hasTime: false,
displayValue: "",
inputDate: "",
calendarDate: "",
pickerTime: "",
calendarRange: {
startDate: "",
startTime: "",
endDate: "",
endTime: ""
},
displayRangeValue: {
startDate: "",
endDate: ""
},
tempRange: {
startDate: "",
startTime: "",
endDate: "",
endTime: ""
},
// 左右日历同步数据
startMultipleStatus: {
before: "",
after: "",
data: [],
fulldate: ""
},
endMultipleStatus: {
before: "",
after: "",
data: [],
fulldate: ""
},
pickerVisible: false,
pickerPositionStyle: null,
isEmitValue: false,
isPhone: false,
isFirstShow: true,
i18nT: () => {
}
};
},
props: {
type: {
type: String,
default: "datetime"
},
value: {
type: [String, Number, Array, Date],
default: ""
},
modelValue: {
type: [String, Number, Array, Date],
default: ""
},
start: {
type: [Number, String],
default: ""
},
end: {
type: [Number, String],
default: ""
},
returnType: {
type: String,
default: "string"
},
placeholder: {
type: String,
default: ""
},
startPlaceholder: {
type: String,
default: ""
},
endPlaceholder: {
type: String,
default: ""
},
rangeSeparator: {
type: String,
default: "-"
},
border: {
type: [Boolean],
default: true
},
disabled: {
type: [Boolean],
default: false
},
clearIcon: {
type: [Boolean],
default: true
},
hideSecond: {
type: [Boolean],
default: false
},
defaultValue: {
type: [String, Object, Array],
default: ""
}
},
watch: {
type: {
immediate: true,
handler(newVal) {
this.hasTime = newVal.indexOf("time") !== -1;
this.isRange = newVal.indexOf("range") !== -1;
}
},
modelValue: {
immediate: true,
handler(newVal) {
if (this.isEmitValue) {
this.isEmitValue = false;
return;
}
this.initPicker(newVal);
}
},
start: {
immediate: true,
handler(newVal) {
if (!newVal)
return;
this.calendarRange.startDate = uni_modules_uniDatetimePicker_components_uniDatetimePicker_util.getDate(newVal);
if (this.hasTime) {
this.calendarRange.startTime = uni_modules_uniDatetimePicker_components_uniDatetimePicker_util.getTime(newVal);
}
}
},
end: {
immediate: true,
handler(newVal) {
if (!newVal)
return;
this.calendarRange.endDate = uni_modules_uniDatetimePicker_components_uniDatetimePicker_util.getDate(newVal);
if (this.hasTime) {
this.calendarRange.endTime = uni_modules_uniDatetimePicker_components_uniDatetimePicker_util.getTime(newVal, this.hideSecond);
}
}
}
},
computed: {
timepickerStartTime() {
const activeDate = this.isRange ? this.tempRange.startDate : this.inputDate;
return activeDate === this.calendarRange.startDate ? this.calendarRange.startTime : "";
},
timepickerEndTime() {
const activeDate = this.isRange ? this.tempRange.endDate : this.inputDate;
return activeDate === this.calendarRange.endDate ? this.calendarRange.endTime : "";
},
mobileCalendarTime() {
const timeRange = {
start: this.tempRange.startTime,
end: this.tempRange.endTime
};
return this.isRange ? timeRange : this.pickerTime;
},
mobSelectableTime() {
return {
start: this.calendarRange.startTime,
end: this.calendarRange.endTime
};
},
datePopupWidth() {
return this.isRange ? 653 : 301;
},
/**
* for i18n
*/
singlePlaceholderText() {
return this.placeholder || (this.type === "date" ? this.selectDateText : this.selectDateTimeText);
},
startPlaceholderText() {
return this.startPlaceholder || this.startDateText;
},
endPlaceholderText() {
return this.endPlaceholder || this.endDateText;
},
selectDateText() {
return this.i18nT("uni-datetime-picker.selectDate");
},
selectDateTimeText() {
return this.i18nT("uni-datetime-picker.selectDateTime");
},
selectTimeText() {
return this.i18nT("uni-datetime-picker.selectTime");
},
startDateText() {
return this.startPlaceholder || this.i18nT("uni-datetime-picker.startDate");
},
startTimeText() {
return this.i18nT("uni-datetime-picker.startTime");
},
endDateText() {
return this.endPlaceholder || this.i18nT("uni-datetime-picker.endDate");
},
endTimeText() {
return this.i18nT("uni-datetime-picker.endTime");
},
okText() {
return this.i18nT("uni-datetime-picker.ok");
},
clearText() {
return this.i18nT("uni-datetime-picker.clear");
},
showClearIcon() {
return this.clearIcon && !this.disabled && (this.displayValue || this.displayRangeValue.startDate && this.displayRangeValue.endDate);
}
},
created() {
this.initI18nT();
this.platform();
},
methods: {
initI18nT() {
const vueI18n = common_vendor.initVueI18n(uni_modules_uniDatetimePicker_components_uniDatetimePicker_i18n_index.i18nMessages);
this.i18nT = vueI18n.t;
},
initPicker(newVal) {
if (!newVal && !this.defaultValue || Array.isArray(newVal) && !newVal.length) {
this.$nextTick(() => {
this.clear(false);
});
return;
}
if (!Array.isArray(newVal) && !this.isRange) {
if (newVal) {
this.displayValue = this.inputDate = this.calendarDate = uni_modules_uniDatetimePicker_components_uniDatetimePicker_util.getDate(newVal);
if (this.hasTime) {
this.pickerTime = uni_modules_uniDatetimePicker_components_uniDatetimePicker_util.getTime(newVal, this.hideSecond);
this.displayValue = `${this.displayValue} ${this.pickerTime}`;
}
} else if (this.defaultValue) {
this.inputDate = this.calendarDate = uni_modules_uniDatetimePicker_components_uniDatetimePicker_util.getDate(this.defaultValue);
if (this.hasTime) {
this.pickerTime = uni_modules_uniDatetimePicker_components_uniDatetimePicker_util.getTime(this.defaultValue, this.hideSecond);
}
}
} else {
const [before, after] = newVal;
if (!before && !after)
return;
const beforeDate = uni_modules_uniDatetimePicker_components_uniDatetimePicker_util.getDate(before);
const beforeTime = uni_modules_uniDatetimePicker_components_uniDatetimePicker_util.getTime(before, this.hideSecond);
const afterDate = uni_modules_uniDatetimePicker_components_uniDatetimePicker_util.getDate(after);
const afterTime = uni_modules_uniDatetimePicker_components_uniDatetimePicker_util.getTime(after, this.hideSecond);
const startDate = beforeDate;
const endDate = afterDate;
this.displayRangeValue.startDate = this.tempRange.startDate = startDate;
this.displayRangeValue.endDate = this.tempRange.endDate = endDate;
if (this.hasTime) {
this.displayRangeValue.startDate = `${beforeDate} ${beforeTime}`;
this.displayRangeValue.endDate = `${afterDate} ${afterTime}`;
this.tempRange.startTime = beforeTime;
this.tempRange.endTime = afterTime;
}
const defaultRange = {
before: beforeDate,
after: afterDate
};
this.startMultipleStatus = Object.assign({}, this.startMultipleStatus, defaultRange, {
which: "right"
});
this.endMultipleStatus = Object.assign({}, this.endMultipleStatus, defaultRange, {
which: "left"
});
}
},
updateLeftCale(e) {
const left = this.$refs.left;
left.cale.setHoverMultiple(e.after);
left.setDate(this.$refs.left.nowDate.fullDate);
},
updateRightCale(e) {
const right = this.$refs.right;
right.cale.setHoverMultiple(e.after);
right.setDate(this.$refs.right.nowDate.fullDate);
},
platform() {
if (typeof navigator !== "undefined") {
this.isPhone = navigator.userAgent.toLowerCase().indexOf("mobile") !== -1;
return;
}
const {
windowWidth
} = common_vendor.index.getWindowInfo();
this.isPhone = windowWidth <= 500;
this.windowWidth = windowWidth;
},
show() {
this.$emit("show");
if (this.disabled) {
return;
}
this.platform();
if (this.isPhone) {
setTimeout(() => {
this.$refs.mobile.open();
}, 0);
return;
}
this.pickerPositionStyle = {
top: "10px"
};
const dateEditor = common_vendor.index.createSelectorQuery().in(this).select(".uni-date-editor");
dateEditor.boundingClientRect((rect) => {
if (this.windowWidth - rect.left < this.datePopupWidth) {
this.pickerPositionStyle.right = 0;
}
}).exec();
setTimeout(() => {
this.pickerVisible = !this.pickerVisible;
if (!this.isPhone && this.isRange && this.isFirstShow) {
this.isFirstShow = false;
const {
startDate,
endDate
} = this.calendarRange;
if (startDate && endDate) {
if (this.diffDate(startDate, endDate) < 30) {
this.$refs.right.changeMonth("pre");
}
} else {
if (this.isPhone) {
this.$refs.right.cale.lastHover = false;
}
}
}
}, 50);
},
close() {
setTimeout(() => {
this.pickerVisible = false;
this.$emit("maskClick", this.value);
this.$refs.mobile && this.$refs.mobile.close();
}, 20);
},
setEmit(value) {
if (this.returnType === "timestamp" || this.returnType === "date") {
if (!Array.isArray(value)) {
if (!this.hasTime) {
value = value + " 00:00:00";
}
value = this.createTimestamp(value);
if (this.returnType === "date") {
value = new Date(value);
}
} else {
if (!this.hasTime) {
value[0] = value[0] + " 00:00:00";
value[1] = value[1] + " 00:00:00";
}
value[0] = this.createTimestamp(value[0]);
value[1] = this.createTimestamp(value[1]);
if (this.returnType === "date") {
value[0] = new Date(value[0]);
value[1] = new Date(value[1]);
}
}
}
this.$emit("update:modelValue", value);
this.$emit("input", value);
this.$emit("change", value);
this.isEmitValue = true;
},
createTimestamp(date) {
date = uni_modules_uniDatetimePicker_components_uniDatetimePicker_util.fixIosDateFormat(date);
return Date.parse(new Date(date));
},
singleChange(e) {
this.calendarDate = this.inputDate = e.fulldate;
if (this.hasTime)
return;
this.confirmSingleChange();
},
confirmSingleChange() {
if (!uni_modules_uniDatetimePicker_components_uniDatetimePicker_util.checkDate(this.inputDate)) {
const now = /* @__PURE__ */ new Date();
this.calendarDate = this.inputDate = uni_modules_uniDatetimePicker_components_uniDatetimePicker_util.getDate(now);
this.pickerTime = uni_modules_uniDatetimePicker_components_uniDatetimePicker_util.getTime(now, this.hideSecond);
}
let startLaterInputDate = false;
let startDate, startTime;
if (this.start) {
let startString = this.start;
if (typeof this.start === "number") {
startString = uni_modules_uniDatetimePicker_components_uniDatetimePicker_util.getDateTime(this.start, this.hideSecond);
}
[startDate, startTime] = startString.split(" ");
if (this.start && !uni_modules_uniDatetimePicker_components_uniDatetimePicker_util.dateCompare(startDate, this.inputDate)) {
startLaterInputDate = true;
this.inputDate = startDate;
}
}
let endEarlierInputDate = false;
let endDate, endTime;
if (this.end) {
let endString = this.end;
if (typeof this.end === "number") {
endString = uni_modules_uniDatetimePicker_components_uniDatetimePicker_util.getDateTime(this.end, this.hideSecond);
}
[endDate, endTime] = endString.split(" ");
if (this.end && !uni_modules_uniDatetimePicker_components_uniDatetimePicker_util.dateCompare(this.inputDate, endDate)) {
endEarlierInputDate = true;
this.inputDate = endDate;
}
}
if (this.hasTime) {
if (startLaterInputDate) {
this.pickerTime = startTime || uni_modules_uniDatetimePicker_components_uniDatetimePicker_util.getDefaultSecond(this.hideSecond);
}
if (endEarlierInputDate) {
this.pickerTime = endTime || uni_modules_uniDatetimePicker_components_uniDatetimePicker_util.getDefaultSecond(this.hideSecond);
}
if (!this.pickerTime) {
this.pickerTime = uni_modules_uniDatetimePicker_components_uniDatetimePicker_util.getTime(Date.now(), this.hideSecond);
}
this.displayValue = `${this.inputDate} ${this.pickerTime}`;
} else {
this.displayValue = this.inputDate;
}
this.setEmit(this.displayValue);
this.pickerVisible = false;
},
leftChange(e) {
const {
before,
after
} = e.range;
this.rangeChange(before, after);
const obj = {
before: e.range.before,
after: e.range.after,
data: e.range.data,
fulldate: e.fulldate
};
this.startMultipleStatus = Object.assign({}, this.startMultipleStatus, obj);
this.$emit("calendarClick", e);
},
rightChange(e) {
const {
before,
after
} = e.range;
this.rangeChange(before, after);
const obj = {
before: e.range.before,
after: e.range.after,
data: e.range.data,
fulldate: e.fulldate
};
this.endMultipleStatus = Object.assign({}, this.endMultipleStatus, obj);
this.$emit("calendarClick", e);
},
mobileChange(e) {
if (this.isRange) {
const {
before,
after
} = e.range;
if (!before) {
return;
}
this.handleStartAndEnd(before, after, true);
if (this.hasTime) {
const {
startTime,
endTime
} = e.timeRange;
this.tempRange.startTime = startTime;
this.tempRange.endTime = endTime;
}
this.confirmRangeChange();
} else {
if (this.hasTime) {
this.displayValue = e.fulldate + " " + e.time;
} else {
this.displayValue = e.fulldate;
}
this.setEmit(this.displayValue);
this.calendarDate = this.displayValue;
}
this.$refs.mobile.close();
},
rangeChange(before, after) {
if (!(before && after))
return;
this.handleStartAndEnd(before, after, true);
if (this.hasTime)
return;
this.confirmRangeChange();
},
confirmRangeChange() {
if (!this.tempRange.startDate || !this.tempRange.endDate) {
this.pickerVisible = false;
return;
}
if (!uni_modules_uniDatetimePicker_components_uniDatetimePicker_util.checkDate(this.tempRange.startDate)) {
this.tempRange.startDate = uni_modules_uniDatetimePicker_components_uniDatetimePicker_util.getDate(Date.now());
}
if (!uni_modules_uniDatetimePicker_components_uniDatetimePicker_util.checkDate(this.tempRange.endDate)) {
this.tempRange.endDate = uni_modules_uniDatetimePicker_components_uniDatetimePicker_util.getDate(Date.now());
}
let start, end;
let startDateLaterRangeStartDate = false;
let startDateLaterRangeEndDate = false;
let startDate, startTime;
let compareStartDateString = this.tempRange.startDate;
let compareEndDateString = this.tempRange.endDate;
if (this.hasTime) {
compareStartDateString = `${this.tempRange.startDate} ${this.tempRange.startTime}`;
compareEndDateString = `${this.tempRange.endDate} ${this.tempRange.endTime}`;
}
if (this.start) {
let startString = this.start;
if (typeof this.start === "number") {
startString = uni_modules_uniDatetimePicker_components_uniDatetimePicker_util.getDateTime(this.start, this.hideSecond);
}
[startDate, startTime] = startString.split(" ");
if (this.start && !uni_modules_uniDatetimePicker_components_uniDatetimePicker_util.dateCompare(this.start, compareStartDateString)) {
startDateLaterRangeStartDate = true;
this.tempRange.startDate = startDate;
}
if (this.start && !uni_modules_uniDatetimePicker_components_uniDatetimePicker_util.dateCompare(this.start, compareEndDateString)) {
startDateLaterRangeEndDate = true;
this.tempRange.endDate = startDate;
}
}
let endDateEarlierRangeStartDate = false;
let endDateEarlierRangeEndDate = false;
let endDate, endTime;
if (this.end) {
let endString = this.end;
if (typeof this.end === "number") {
endString = uni_modules_uniDatetimePicker_components_uniDatetimePicker_util.getDateTime(this.end, this.hideSecond);
}
[endDate, endTime] = endString.split(" ");
if (this.end && !uni_modules_uniDatetimePicker_components_uniDatetimePicker_util.dateCompare(compareStartDateString, this.end)) {
endDateEarlierRangeStartDate = true;
this.tempRange.startDate = endDate;
}
if (this.end && !uni_modules_uniDatetimePicker_components_uniDatetimePicker_util.dateCompare(compareEndDateString, this.end)) {
endDateEarlierRangeEndDate = true;
this.tempRange.endDate = endDate;
}
}
if (!this.hasTime) {
start = this.displayRangeValue.startDate = this.tempRange.startDate;
end = this.displayRangeValue.endDate = this.tempRange.endDate;
} else {
if (startDateLaterRangeStartDate) {
this.tempRange.startTime = startTime || uni_modules_uniDatetimePicker_components_uniDatetimePicker_util.getDefaultSecond(this.hideSecond);
} else if (endDateEarlierRangeStartDate) {
this.tempRange.startTime = endTime || uni_modules_uniDatetimePicker_components_uniDatetimePicker_util.getDefaultSecond(this.hideSecond);
}
if (!this.tempRange.startTime) {
this.tempRange.startTime = uni_modules_uniDatetimePicker_components_uniDatetimePicker_util.getTime(Date.now(), this.hideSecond);
}
if (startDateLaterRangeEndDate) {
this.tempRange.endTime = startTime || uni_modules_uniDatetimePicker_components_uniDatetimePicker_util.getDefaultSecond(this.hideSecond);
} else if (endDateEarlierRangeEndDate) {
this.tempRange.endTime = endTime || uni_modules_uniDatetimePicker_components_uniDatetimePicker_util.getDefaultSecond(this.hideSecond);
}
if (!this.tempRange.endTime) {
this.tempRange.endTime = uni_modules_uniDatetimePicker_components_uniDatetimePicker_util.getTime(Date.now(), this.hideSecond);
}
start = this.displayRangeValue.startDate = `${this.tempRange.startDate} ${this.tempRange.startTime}`;
end = this.displayRangeValue.endDate = `${this.tempRange.endDate} ${this.tempRange.endTime}`;
}
if (!uni_modules_uniDatetimePicker_components_uniDatetimePicker_util.dateCompare(start, end)) {
[start, end] = [end, start];
}
this.displayRangeValue.startDate = start;
this.displayRangeValue.endDate = end;
const displayRange = [start, end];
this.setEmit(displayRange);
this.pickerVisible = false;
},
handleStartAndEnd(before, after, temp = false) {
if (!before)
return;
if (!after)
after = before;
const type = temp ? "tempRange" : "range";
const isStartEarlierEnd = uni_modules_uniDatetimePicker_components_uniDatetimePicker_util.dateCompare(before, after);
this[type].startDate = isStartEarlierEnd ? before : after;
this[type].endDate = isStartEarlierEnd ? after : before;
},
/**
* 比较时间大小
*/
dateCompare(startDate, endDate) {
startDate = new Date(startDate.replace("-", "/").replace("-", "/"));
endDate = new Date(endDate.replace("-", "/").replace("-", "/"));
return startDate <= endDate;
},
/**
* 比较时间差
*/
diffDate(startDate, endDate) {
startDate = new Date(startDate.replace("-", "/").replace("-", "/"));
endDate = new Date(endDate.replace("-", "/").replace("-", "/"));
const diff = (endDate - startDate) / (24 * 60 * 60 * 1e3);
return Math.abs(diff);
},
clear(needEmit = true) {
if (!this.isRange) {
this.displayValue = "";
this.inputDate = "";
this.pickerTime = "";
if (this.isPhone) {
this.$refs.mobile && this.$refs.mobile.clearCalender();
} else {
this.$refs.pcSingle && this.$refs.pcSingle.clearCalender();
}
if (needEmit) {
this.$emit("change", "");
this.$emit("input", "");
this.$emit("update:modelValue", "");
}
} else {
this.displayRangeValue.startDate = "";
this.displayRangeValue.endDate = "";
this.tempRange.startDate = "";
this.tempRange.startTime = "";
this.tempRange.endDate = "";
this.tempRange.endTime = "";
if (this.isPhone) {
this.$refs.mobile && this.$refs.mobile.clearCalender();
} else {
this.$refs.left && this.$refs.left.clearCalender();
this.$refs.right && this.$refs.right.clearCalender();
this.$refs.right && this.$refs.right.changeMonth("next");
}
if (needEmit) {
this.$emit("change", []);
this.$emit("input", []);
this.$emit("update:modelValue", []);
}
}
},
calendarClick(e) {
this.$emit("calendarClick", e);
}
}
};
if (!Array) {
const _easycom_uni_icons2 = common_vendor.resolveComponent("uni-icons");
const _component_time_picker = common_vendor.resolveComponent("time-picker");
const _component_Calendar = common_vendor.resolveComponent("Calendar");
(_easycom_uni_icons2 + _component_time_picker + _component_Calendar)();
}
const _easycom_uni_icons = () => "../../../uni-icons/components/uni-icons/uni-icons.js";
if (!Math) {
_easycom_uni_icons();
}
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
return common_vendor.e({
a: !$data.isRange
}, !$data.isRange ? {
b: common_vendor.p({
type: "calendar",
color: "#c0c4cc",
size: "22"
}),
c: common_vendor.t($data.displayValue || $options.singlePlaceholderText)
} : {
d: common_vendor.p({
type: "calendar",
color: "#c0c4cc",
size: "22"
}),
e: common_vendor.t($data.displayRangeValue.startDate || $options.startPlaceholderText),
f: common_vendor.t($props.rangeSeparator),
g: common_vendor.t($data.displayRangeValue.endDate || $options.endPlaceholderText)
}, {
h: $options.showClearIcon
}, $options.showClearIcon ? {
i: common_vendor.p({
type: "clear",
color: "#c0c4cc",
size: "22"
}),
j: common_vendor.o$1((...args) => $options.clear && $options.clear(...args))
} : {}, {
k: $props.disabled ? 1 : "",
l: $props.border ? 1 : "",
m: common_vendor.o$1((...args) => $options.show && $options.show(...args)),
n: $data.pickerVisible,
o: common_vendor.o$1((...args) => $options.close && $options.close(...args)),
p: !$data.isPhone
}, !$data.isPhone ? common_vendor.e({
q: !$data.isRange
}, !$data.isRange ? common_vendor.e({
r: $data.hasTime
}, $data.hasTime ? {
s: $options.selectDateText,
t: $data.inputDate,
v: common_vendor.o$1(($event) => $data.inputDate = $event.detail.value),
w: $options.selectTimeText,
x: !$data.inputDate,
y: $data.pickerTime,
z: common_vendor.o$1(($event) => $data.pickerTime = $event.detail.value),
A: common_vendor.o$1(($event) => $data.pickerTime = $event),
B: common_vendor.p({
type: "time",
border: false,
disabled: !$data.inputDate,
start: $options.timepickerStartTime,
end: $options.timepickerEndTime,
hideSecond: $props.hideSecond,
modelValue: $data.pickerTime
})
} : {}, {
C: common_vendor.sr("pcSingle", "347f72bb-4"),
D: common_vendor.o$1($options.singleChange),
E: common_vendor.p({
showMonth: false,
["start-date"]: $data.calendarRange.startDate,
["end-date"]: $data.calendarRange.endDate,
date: $data.calendarDate,
["default-value"]: $props.defaultValue
}),
F: $data.hasTime
}, $data.hasTime ? {
G: common_vendor.t($options.okText),
H: common_vendor.o$1((...args) => $options.confirmSingleChange && $options.confirmSingleChange(...args))
} : {}, {
I: common_vendor.s($data.pickerPositionStyle)
}) : common_vendor.e({
J: $data.hasTime
}, $data.hasTime ? {
K: $options.startDateText,
L: $data.tempRange.startDate,
M: common_vendor.o$1(($event) => $data.tempRange.startDate = $event.detail.value),
N: $options.startTimeText,
O: !$data.tempRange.startDate,
P: $data.tempRange.startTime,
Q: common_vendor.o$1(($event) => $data.tempRange.startTime = $event.detail.value),
R: common_vendor.o$1(($event) => $data.tempRange.startTime = $event),
S: common_vendor.p({
type: "time",
start: $options.timepickerStartTime,
border: false,
disabled: !$data.tempRange.startDate,
hideSecond: $props.hideSecond,
modelValue: $data.tempRange.startTime
}),
T: common_vendor.p({
type: "arrowthinright",
color: "#999"
}),
U: $options.endDateText,
V: $data.tempRange.endDate,
W: common_vendor.o$1(($event) => $data.tempRange.endDate = $event.detail.value),
X: $options.endTimeText,
Y: !$data.tempRange.endDate,
Z: $data.tempRange.endTime,
aa: common_vendor.o$1(($event) => $data.tempRange.endTime = $event.detail.value),
ab: common_vendor.o$1(($event) => $data.tempRange.endTime = $event),
ac: common_vendor.p({
type: "time",
end: $options.timepickerEndTime,
border: false,
disabled: !$data.tempRange.endDate,
hideSecond: $props.hideSecond,
modelValue: $data.tempRange.endTime
})
} : {}, {
ad: common_vendor.sr("left", "347f72bb-8"),
ae: common_vendor.o$1($options.leftChange),
af: common_vendor.o$1($options.updateRightCale),
ag: common_vendor.p({
showMonth: false,
["start-date"]: $data.calendarRange.startDate,
["end-date"]: $data.calendarRange.endDate,
range: true,
pleStatus: $data.endMultipleStatus
}),
ah: common_vendor.sr("right", "347f72bb-9"),
ai: common_vendor.o$1($options.rightChange),
aj: common_vendor.o$1($options.updateLeftCale),
ak: common_vendor.p({
showMonth: false,
["start-date"]: $data.calendarRange.startDate,
["end-date"]: $data.calendarRange.endDate,
range: true,
pleStatus: $data.startMultipleStatus
}),
al: $data.hasTime
}, $data.hasTime ? {
am: common_vendor.t($options.clearText),
an: common_vendor.o$1((...args) => $options.clear && $options.clear(...args)),
ao: common_vendor.t($options.okText),
ap: common_vendor.o$1((...args) => $options.confirmRangeChange && $options.confirmRangeChange(...args))
} : {}, {
aq: common_vendor.s($data.pickerPositionStyle)
}), {
ar: $data.pickerVisible
}) : {}, {
as: $data.isPhone
}, $data.isPhone ? {
at: common_vendor.sr("mobile", "347f72bb-10"),
av: common_vendor.o$1($options.mobileChange),
aw: common_vendor.o$1($options.close),
ax: common_vendor.o$1($options.calendarClick),
ay: common_vendor.p({
clearDate: false,
date: $data.calendarDate,
defTime: $options.mobileCalendarTime,
["start-date"]: $data.calendarRange.startDate,
["end-date"]: $data.calendarRange.endDate,
selectableTimes: $options.mobSelectableTime,
startPlaceholder: $props.startPlaceholder,
endPlaceholder: $props.endPlaceholder,
["default-value"]: $props.defaultValue,
pleStatus: $data.endMultipleStatus,
showMonth: false,
range: $data.isRange,
hasTime: $data.hasTime,
insert: false,
hideSecond: $props.hideSecond
})
} : {});
}
const Component = /* @__PURE__ */ common_vendor._export_sfc(_sfc_main, [["render", _sfc_render]]);
wx.createComponent(Component);
//# sourceMappingURL=../../../../../.sourcemap/mp-weixin/uni_modules/uni-datetime-picker/components/uni-datetime-picker/uni-datetime-picker.js.map

View File

@@ -1,6 +1,8 @@
{
"component": true,
"usingComponents": {
"calendar": "./calendar",
"time-picker": "./time-picker",
"uni-icons": "../../../uni-icons/components/uni-icons/uni-icons"
}
}

View File

@@ -0,0 +1 @@
<view class="uni-date"><view class="uni-date-editor" bindtap="{{m}}"><block wx:if="{{$slots.d}}"><slot></slot></block><block wx:else><view class="{{['uni-date-editor--x', k && 'uni-date-editor--x__disabled', l && 'uni-date-x--border']}}"><view wx:if="{{a}}" class="uni-date-x uni-date-single"><uni-icons wx:if="{{b}}" class="icon-calendar" u-i="347f72bb-0" bind:__l="__l" u-p="{{b}}"></uni-icons><view class="uni-date__x-input">{{c}}</view></view><view wx:else class="uni-date-x uni-date-range"><uni-icons wx:if="{{d}}" class="icon-calendar" u-i="347f72bb-1" bind:__l="__l" u-p="{{d}}"></uni-icons><view class="uni-date__x-input text-center">{{e}}</view><view class="range-separator">{{f}}</view><view class="uni-date__x-input text-center">{{g}}</view></view><view wx:if="{{h}}" class="uni-date__icon-clear" catchtap="{{j}}"><uni-icons wx:if="{{i}}" u-i="347f72bb-2" bind:__l="__l" u-p="{{i}}"></uni-icons></view></view></block></view><view hidden="{{!n}}" class="uni-date-mask--pc" bindtap="{{o}}"></view><view wx:if="{{p}}" hidden="{{!ar}}" ref="datePicker" class="uni-date-picker__container"><view wx:if="{{q}}" class="uni-date-single--x" style="{{I}}"><view class="uni-popper__arrow"></view><view wx:if="{{r}}" class="uni-date-changed popup-x-header"><input class="uni-date__input text-center" type="text" placeholder="{{s}}" value="{{t}}" bindinput="{{v}}"/><time-picker wx:if="{{B}}" u-s="{{['d']}}" style="width:100%" u-i="347f72bb-3" bind:__l="__l" bindupdateModelValue="{{A}}" u-p="{{B}}"><input class="uni-date__input text-center" type="text" placeholder="{{w}}" disabled="{{x}}" value="{{y}}" bindinput="{{z}}"/></time-picker></view><calendar wx:if="{{E}}" class="r" u-r="pcSingle" bindchange="{{D}}" style="padding:0 8px" u-i="347f72bb-4" bind:__l="__l" u-p="{{E}}"/><view wx:if="{{F}}" class="popup-x-footer"><text class="confirm-text" bindtap="{{H}}">{{G}}</text></view></view><view wx:else class="uni-date-range--x" style="{{aq}}"><view class="uni-popper__arrow"></view><view wx:if="{{J}}" class="popup-x-header uni-date-changed"><view class="popup-x-header--datetime"><input class="uni-date__input uni-date-range__input" type="text" placeholder="{{K}}" value="{{L}}" bindinput="{{M}}"/><time-picker wx:if="{{S}}" u-s="{{['d']}}" u-i="347f72bb-5" bind:__l="__l" bindupdateModelValue="{{R}}" u-p="{{S}}"><input class="uni-date__input uni-date-range__input" type="text" placeholder="{{N}}" disabled="{{O}}" value="{{P}}" bindinput="{{Q}}"/></time-picker></view><uni-icons wx:if="{{T}}" style="line-height:40px" u-i="347f72bb-6" bind:__l="__l" u-p="{{T}}"></uni-icons><view class="popup-x-header--datetime"><input class="uni-date__input uni-date-range__input" type="text" placeholder="{{U}}" value="{{V}}" bindinput="{{W}}"/><time-picker wx:if="{{ac}}" u-s="{{['d']}}" u-i="347f72bb-7" bind:__l="__l" bindupdateModelValue="{{ab}}" u-p="{{ac}}"><input class="uni-date__input uni-date-range__input" type="text" placeholder="{{X}}" disabled="{{Y}}" value="{{Z}}" bindinput="{{aa}}"/></time-picker></view></view><view class="popup-x-body"><calendar wx:if="{{ag}}" class="r" u-r="left" bindchange="{{ae}}" bindfirstEnterCale="{{af}}" style="padding:0 8px" u-i="347f72bb-8" bind:__l="__l" u-p="{{ag}}"/><calendar wx:if="{{ak}}" class="r" u-r="right" bindchange="{{ai}}" bindfirstEnterCale="{{aj}}" style="padding:0 8px;border-left:1px solid #F1F1F1" u-i="347f72bb-9" bind:__l="__l" u-p="{{ak}}"/></view><view wx:if="{{al}}" class="popup-x-footer"><text bindtap="{{an}}">{{am}}</text><text class="confirm-text" bindtap="{{ap}}">{{ao}}</text></view></view></view><calendar wx:if="{{as}}" class="r" u-r="mobile" bindconfirm="{{av}}" bindmaskClose="{{aw}}" bindchange="{{ax}}" u-i="347f72bb-10" bind:__l="__l" u-p="{{ay}}"/></view>

View File

@@ -0,0 +1,201 @@
/**
* 这里是uni-app内置的常用样式变量
*
* uni-app 官方扩展插件及插件市场https://ext.dcloud.net.cn上很多三方插件均使用了这些样式变量
* 如果你是插件开发者建议你使用scss预处理并在插件代码中直接使用这些变量无需 import 这个文件方便用户通过搭积木的方式开发整体风格一致的App
*
*/
/**
* 如果你是App开发者插件使用者你可以通过修改这些变量来定制自己的插件主题实现自定义主题功能
*
* 如果你的项目同样使用了scss预处理你也可以直接在你的 scss 代码中使用如下变量,同时无需 import 这个文件
*/
/* 颜色变量 */
/* 行为相关颜色 */
/* 文字基本颜色 */
/* 背景颜色 */
/* 边框颜色 */
/* 尺寸变量 */
/* 文字尺寸 */
/* 图片尺寸 */
/* Border Radius */
/* 水平间距 */
/* 垂直间距 */
/* 透明度 */
/* 文章场景相关 */
.uni-date {
width: 100%;
flex: 1;
}
.uni-date-x {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
border-radius: 4px;
background-color: #fff;
color: #666;
font-size: 14px;
flex: 1;
}
.uni-date-x .icon-calendar {
padding-left: 3px;
}
.uni-date-x .range-separator {
height: 35px;
line-height: 35px;
}
.uni-date-x--border {
box-sizing: border-box;
border-radius: 4px;
border: 1px solid #e5e5e5;
}
.uni-date-editor--x {
display: flex;
align-items: center;
position: relative;
}
.uni-date-editor--x .uni-date__icon-clear {
padding-right: 3px;
display: flex;
align-items: center;
}
.uni-date__x-input {
width: auto;
height: 35px;
position: relative;
flex: 1;
line-height: 35px;
font-size: 14px;
overflow: hidden;
}
.text-center {
text-align: center;
}
.uni-date__input {
height: 40px;
width: 100%;
line-height: 40px;
font-size: 14px;
}
.uni-date-range__input {
text-align: center;
max-width: 142px;
}
.uni-date-picker__container {
position: relative;
}
.uni-date-mask--pc {
position: fixed;
bottom: 0px;
top: 0px;
left: 0px;
right: 0px;
background-color: rgba(0, 0, 0, 0);
transition-duration: 0.3s;
z-index: 996;
}
.uni-date-single--x {
background-color: #fff;
position: absolute;
top: 0;
z-index: 999;
border: 1px solid #EBEEF5;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
border-radius: 4px;
}
.uni-date-range--x {
background-color: #fff;
position: absolute;
top: 0;
z-index: 999;
border: 1px solid #EBEEF5;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
border-radius: 4px;
}
.uni-date-editor--x__disabled {
opacity: 0.4;
cursor: default;
}
.uni-date-editor--logo {
width: 16px;
height: 16px;
vertical-align: middle;
}
/* 添加时间 */
.popup-x-header {
display: flex;
flex-direction: row;
}
.popup-x-header--datetime {
display: flex;
flex-direction: row;
flex: 1;
}
.popup-x-body {
display: flex;
}
.popup-x-footer {
padding: 0 15px;
border-top-color: #F1F1F1;
border-top-style: solid;
border-top-width: 1px;
line-height: 40px;
text-align: right;
color: #666;
}
.popup-x-footer text:hover {
color: #007aff;
cursor: pointer;
opacity: 0.8;
}
.popup-x-footer .confirm-text {
margin-left: 20px;
color: #007aff;
}
.uni-date-changed {
text-align: center;
color: #333;
border-bottom-color: #F1F1F1;
border-bottom-style: solid;
border-bottom-width: 1px;
}
.uni-date-changed--time text {
height: 50px;
line-height: 50px;
}
.uni-date-changed .uni-date-changed--time {
flex: 1;
}
.uni-date-changed--time-date {
color: #333;
opacity: 0.6;
}
.mr-50 {
margin-right: 50px;
}
/* picker 弹出层通用的指示小三角, todo扩展至上下左右方向定位 */
.uni-popper__arrow,
.uni-popper__arrow::after {
position: absolute;
display: block;
width: 0;
height: 0;
border: 6px solid transparent;
border-top-width: 0;
}
.uni-popper__arrow {
filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.03));
top: -6px;
left: 10%;
margin-right: 3px;
border-bottom-color: #EBEEF5;
}
.uni-popper__arrow::after {
content: " ";
top: 1px;
margin-left: -6px;
border-bottom-color: #fff;
}

View File

@@ -0,0 +1,366 @@
"use strict";
class Calendar {
constructor({
selected,
startDate,
endDate,
range
} = {}) {
this.date = this.getDateObj(/* @__PURE__ */ new Date());
this.selected = selected || [];
this.startDate = startDate;
this.endDate = endDate;
this.range = range;
this.cleanMultipleStatus();
this.weeks = {};
this.lastHover = false;
}
/**
* 设置日期
* @param {Object} date
*/
setDate(date) {
const selectDate = this.getDateObj(date);
this.getWeeks(selectDate.fullDate);
}
/**
* 清理多选状态
*/
cleanMultipleStatus() {
this.multipleStatus = {
before: "",
after: "",
data: []
};
}
setStartDate(startDate) {
this.startDate = startDate;
}
setEndDate(endDate) {
this.endDate = endDate;
}
getPreMonthObj(date) {
date = fixIosDateFormat(date);
date = new Date(date);
const oldMonth = date.getMonth();
date.setMonth(oldMonth - 1);
const newMonth = date.getMonth();
if (oldMonth !== 0 && newMonth - oldMonth === 0) {
date.setMonth(newMonth - 1);
}
return this.getDateObj(date);
}
getNextMonthObj(date) {
date = fixIosDateFormat(date);
date = new Date(date);
const oldMonth = date.getMonth();
date.setMonth(oldMonth + 1);
const newMonth = date.getMonth();
if (newMonth - oldMonth > 1) {
date.setMonth(newMonth - 1);
}
return this.getDateObj(date);
}
/**
* 获取指定格式Date对象
*/
getDateObj(date) {
date = fixIosDateFormat(date);
date = new Date(date);
return {
fullDate: getDate(date),
year: date.getFullYear(),
month: addZero(date.getMonth() + 1),
date: addZero(date.getDate()),
day: date.getDay()
};
}
/**
* 获取上一个月日期集合
*/
getPreMonthDays(amount, dateObj) {
const result = [];
for (let i = amount - 1; i >= 0; i--) {
const month = dateObj.month - 1;
result.push({
date: new Date(dateObj.year, month, -i).getDate(),
month,
disable: true
});
}
return result;
}
/**
* 获取本月日期集合
*/
getCurrentMonthDays(amount, dateObj) {
const result = [];
const fullDate = this.date.fullDate;
for (let i = 1; i <= amount; i++) {
const currentDate = `${dateObj.year}-${dateObj.month}-${addZero(i)}`;
const isToday = fullDate === currentDate;
const info = this.selected && this.selected.find((item) => {
if (this.dateEqual(currentDate, item.date)) {
return item;
}
});
if (this.startDate) {
dateCompare(this.startDate, currentDate);
}
if (this.endDate) {
dateCompare(currentDate, this.endDate);
}
let multiples = this.multipleStatus.data;
let multiplesStatus = -1;
if (this.range && multiples) {
multiplesStatus = multiples.findIndex((item) => {
return this.dateEqual(item, currentDate);
});
}
const checked = multiplesStatus !== -1;
result.push({
fullDate: currentDate,
year: dateObj.year,
date: i,
multiple: this.range ? checked : false,
beforeMultiple: this.isLogicBefore(currentDate, this.multipleStatus.before, this.multipleStatus.after),
afterMultiple: this.isLogicAfter(currentDate, this.multipleStatus.before, this.multipleStatus.after),
month: dateObj.month,
disable: this.startDate && !dateCompare(this.startDate, currentDate) || this.endDate && !dateCompare(
currentDate,
this.endDate
),
isToday,
userChecked: false,
extraInfo: info
});
}
return result;
}
/**
* 获取下一个月日期集合
*/
_getNextMonthDays(amount, dateObj) {
const result = [];
const month = dateObj.month + 1;
for (let i = 1; i <= amount; i++) {
result.push({
date: i,
month,
disable: true
});
}
return result;
}
/**
* 获取当前日期详情
* @param {Object} date
*/
getInfo(date) {
if (!date) {
date = /* @__PURE__ */ new Date();
}
const res = this.calendar.find((item) => item.fullDate === this.getDateObj(date).fullDate);
return res ? res : this.getDateObj(date);
}
/**
* 比较时间是否相等
*/
dateEqual(before, after) {
before = new Date(fixIosDateFormat(before));
after = new Date(fixIosDateFormat(after));
return before.valueOf() === after.valueOf();
}
/**
* 比较真实起始日期
*/
isLogicBefore(currentDate, before, after) {
let logicBefore = before;
if (before && after) {
logicBefore = dateCompare(before, after) ? before : after;
}
return this.dateEqual(logicBefore, currentDate);
}
isLogicAfter(currentDate, before, after) {
let logicAfter = after;
if (before && after) {
logicAfter = dateCompare(before, after) ? after : before;
}
return this.dateEqual(logicAfter, currentDate);
}
/**
* 获取日期范围内所有日期
* @param {Object} begin
* @param {Object} end
*/
geDateAll(begin, end) {
var arr = [];
var ab = begin.split("-");
var ae = end.split("-");
var db = /* @__PURE__ */ new Date();
db.setFullYear(ab[0], ab[1] - 1, ab[2]);
var de = /* @__PURE__ */ new Date();
de.setFullYear(ae[0], ae[1] - 1, ae[2]);
var unixDb = db.getTime() - 24 * 60 * 60 * 1e3;
var unixDe = de.getTime() - 24 * 60 * 60 * 1e3;
for (var k = unixDb; k <= unixDe; ) {
k = k + 24 * 60 * 60 * 1e3;
arr.push(this.getDateObj(new Date(parseInt(k))).fullDate);
}
return arr;
}
/**
* 获取多选状态
*/
setMultiple(fullDate) {
if (!this.range)
return;
let {
before,
after
} = this.multipleStatus;
if (before && after) {
if (!this.lastHover) {
this.lastHover = true;
return;
}
this.multipleStatus.before = fullDate;
this.multipleStatus.after = "";
this.multipleStatus.data = [];
this.multipleStatus.fulldate = "";
this.lastHover = false;
} else {
if (!before) {
this.multipleStatus.before = fullDate;
this.multipleStatus.after = void 0;
this.lastHover = false;
} else {
this.multipleStatus.after = fullDate;
if (dateCompare(this.multipleStatus.before, this.multipleStatus.after)) {
this.multipleStatus.data = this.geDateAll(this.multipleStatus.before, this.multipleStatus.after);
} else {
this.multipleStatus.data = this.geDateAll(this.multipleStatus.after, this.multipleStatus.before);
}
this.lastHover = true;
}
}
this.getWeeks(fullDate);
}
/**
* 鼠标 hover 更新多选状态
*/
setHoverMultiple(fullDate) {
if (!this.range || this.lastHover)
return;
const {
before
} = this.multipleStatus;
if (!before) {
this.multipleStatus.before = fullDate;
} else {
this.multipleStatus.after = fullDate;
if (dateCompare(this.multipleStatus.before, this.multipleStatus.after)) {
this.multipleStatus.data = this.geDateAll(this.multipleStatus.before, this.multipleStatus.after);
} else {
this.multipleStatus.data = this.geDateAll(this.multipleStatus.after, this.multipleStatus.before);
}
}
this.getWeeks(fullDate);
}
/**
* 更新默认值多选状态
*/
setDefaultMultiple(before, after) {
this.multipleStatus.before = before;
this.multipleStatus.after = after;
if (before && after) {
if (dateCompare(before, after)) {
this.multipleStatus.data = this.geDateAll(before, after);
this.getWeeks(after);
} else {
this.multipleStatus.data = this.geDateAll(after, before);
this.getWeeks(before);
}
}
}
/**
* 获取每周数据
* @param {Object} dateData
*/
getWeeks(dateData) {
const {
year,
month
} = this.getDateObj(dateData);
const preMonthDayAmount = new Date(year, month - 1, 1).getDay();
const preMonthDays = this.getPreMonthDays(preMonthDayAmount, this.getDateObj(dateData));
const currentMonthDayAmount = new Date(year, month, 0).getDate();
const currentMonthDays = this.getCurrentMonthDays(currentMonthDayAmount, this.getDateObj(dateData));
const nextMonthDayAmount = 42 - preMonthDayAmount - currentMonthDayAmount;
const nextMonthDays = this._getNextMonthDays(nextMonthDayAmount, this.getDateObj(dateData));
const calendarDays = [...preMonthDays, ...currentMonthDays, ...nextMonthDays];
const weeks = new Array(6);
for (let i = 0; i < calendarDays.length; i++) {
const index = Math.floor(i / 7);
if (!weeks[index]) {
weeks[index] = new Array(7);
}
weeks[index][i % 7] = calendarDays[i];
}
this.calendar = calendarDays;
this.weeks = weeks;
}
}
function getDateTime(date, hideSecond) {
return `${getDate(date)} ${getTime(date, hideSecond)}`;
}
function getDate(date) {
date = fixIosDateFormat(date);
date = new Date(date);
const year = date.getFullYear();
const month = date.getMonth() + 1;
const day = date.getDate();
return `${year}-${addZero(month)}-${addZero(day)}`;
}
function getTime(date, hideSecond) {
date = fixIosDateFormat(date);
date = new Date(date);
const hour = date.getHours();
const minute = date.getMinutes();
const second = date.getSeconds();
return hideSecond ? `${addZero(hour)}:${addZero(minute)}` : `${addZero(hour)}:${addZero(minute)}:${addZero(second)}`;
}
function addZero(num) {
if (num < 10) {
num = `0${num}`;
}
return num;
}
function getDefaultSecond(hideSecond) {
return hideSecond ? "00:00" : "00:00:00";
}
function dateCompare(startDate, endDate) {
startDate = new Date(fixIosDateFormat(startDate));
endDate = new Date(fixIosDateFormat(endDate));
return startDate <= endDate;
}
function checkDate(date) {
const dateReg = /((19|20)\d{2})(-|\/)\d{1,2}(-|\/)\d{1,2}/g;
return date.match(dateReg);
}
const dateTimeReg = /^\d{4}-(0?[1-9]|1[012])-(0?[1-9]|[12][0-9]|3[01])( [0-5]?[0-9]:[0-5]?[0-9](:[0-5]?[0-9])?)?$/;
function fixIosDateFormat(value) {
if (typeof value === "string" && dateTimeReg.test(value)) {
value = value.replace(/-/g, "/");
}
return value;
}
exports.Calendar = Calendar;
exports.checkDate = checkDate;
exports.dateCompare = dateCompare;
exports.fixIosDateFormat = fixIosDateFormat;
exports.getDate = getDate;
exports.getDateTime = getDateTime;
exports.getDefaultSecond = getDefaultSecond;
exports.getTime = getTime;
//# sourceMappingURL=../../../../../.sourcemap/mp-weixin/uni_modules/uni-datetime-picker/components/uni-datetime-picker/util.js.map