uniapp 小程序 周选择器

这里贴出来的是子组件的代码,父组件只是打开了一下popup

//  打开了一下popup
$refs.popup.open('bottom')
如果不想用子组件的话,直接打开popup就可以用
<template><uni-popup ref="popup" type="bottom" background-color="#fff"><view class="my_popup"><view class="my_selectDeta"><view class="my_button" @click="iconClose">取消</view><view class="my_button" type="primary" @click="confirm">确定</view></view><picker-view :value="selectValue" class="picker-view" @change="pickerChange"><picker-view-column><view v-for="(item, index) in years" :key="index" class="year-item">{{ item }}年</view></picker-view-column><picker-view-column><view v-for="(item, index) in weeks" :key="index" class="weeks-item">{{ `第${index + 1}周(` + item + ')' }}</view></picker-view-column></picker-view></view></uni-popup>
</template><script>
export default {props: {},data() {return {selectValue: [0, 0],years: [],year: '', // 当前年// weeks: [],week: '', // 当前周myDate: new Date(),}},// watch: {//   year: {//     handler(newValue) {//       const index = this.years.findIndex((item) => item == newValue);//       this.selectValue = [index, 0];//     },//     deep: true // 深度监听父组件传过来对象变化//   },// },computed: {weeks() {const ONE_DAY = 24 * 3600 * 1000;let firstDay =new Date(this.year + '/01/01').getDay() == 0? 7: new Date(this.year + '/01/01').getDay();let weeklist = [];let firstweekday = '';let endweekday = new Date(this.year + '/12/28').getTime();if (firstDay > 4) {firstweekday =new Date(this.year + '/01/01').getTime() +(8 - firstDay) * ONE_DAY;} else if (firstDay <= 4) {firstweekday =new Date(this.year + '/01/01').getTime() -(firstDay - 1) * ONE_DAY;}for (let i = 0; i < 54; i++) {let numWeek = i * 7 * ONE_DAY;let firstday = firstweekday + numWeek;let endday = firstday + 6 * ONE_DAY;if (firstday <= endweekday) {weeklist.push(`${uni.$u.timeFormat(firstday, 'mm/dd')}-${uni.$u.timeFormat(endday, 'mm/dd')}`);}}console.log("computed-weeklist", weeklist)return weeklist;},},mounted() {this.init();},methods: {pickerChange(e) {const currentData = e.detail.valuethis.year = this.years[currentData[0]];this.week = this.weeks[currentData[1]];console.log("pickerChange", e, this.year, this.week);},// 初始化时的默认当前周init(data = new Date()) {for (let i = this.myDate.getFullYear(); i <= this.myDate.getFullYear() + 10; i++) {this.years.push(i);}let beginTime = uni.$u.timeFormat(this.getWeek(0, data), 'mm/dd')let endTime = uni.$u.timeFormat(this.getWeek(1, data), 'mm/dd');this.year = data ? new Date(data).getFullYear() : this.myDate.getFullYear()this.week = `${beginTime}-${endTime}`this.selectValue = [this.years.indexOf(this.year), this.weeks.indexOf(this.week)]console.log('weeks-init', this.year, this.years, this.week, this.weeks, beginTime, endTime, this.selectValue);// this.$nextTick(() => {//   this.selectValue = [this.years.indexOf(this.year), this.weeks.indexOf(this.week)]// })// this.$emit('changeWeekTime', this.dateObj)},// 获取当前周getWeek(type, data = "") {let now = new Date(data)let day = now.getDay() //返回星期几的某一天;if (!type) {let dayNumber = day == 0 ? 6 : day - 1now.setDate(now.getDate() - dayNumber)} else {let dayNumber = day == 0 ? 0 : 7 - daynow.setDate(now.getDate() + dayNumber)}let date = now.getDate()let month = now.getMonth() + 1//年-月-日let s = now.getFullYear() + '-' + (month < 10 ? '0' + month : month) + '-' + (date < 10 ? '0' +date :date)let datebefore = nowreturn datebefore},iconClose() {this.$refs.popup.close()},changeDateObj() {const [firstWeek, lastWeek] = this.week.split('-').map((item) => item.replace('/', '-'));return this.year + '-' + firstWeek + '至' + this.year + '-' + lastWeek},confirm() {console.log("confirm", this.year, this.week)let obj = {type: '4',date: this.changeDateObj()}uni.setStorageSync('weChatData', obj)uni.reLaunch({url: '/hxz/weChat/index'})this.iconClose();}},
}
</script>
<style scoped lang="scss">
.my_popup {height: 550rpx;border-radius: 8rpx 8rpx 0 0;position: relative;font-weight: 500;color: #1b1d21;.my_selectDeta {display: flex;justify-content: space-between;padding: 20rpx 40rpx;box-sizing: border-box;color: rgb(96, 98, 102);border-bottom: 1px solid #f5f7f8;}.my_button {display: flex;align-items: center;justify-content: center;}.picker-view {width: 100%;height: 600rpx;}}.year-item,
.weeks-item {display: flex;align-items: center;justify-content: center;
}
</style>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/468029.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

机器学习(七)——集成学习(个体与集成、Boosting、Bagging、随机森林RF、结合策略、多样性增强、多样性度量、Python源码)

目录 关于1 个体与集成2 Boosting3 Bagging与随机森林4 结合策略5 多样性X 案例代码X.1 分类任务-Adaboost-SVMX.1.1 源码X.1.2 数据集&#xff08;鸢尾花数据集&#xff09;X.1.3 模型效果 X.2 分类任务-随机森林RFX.2.1 源码X.2.2 数据集&#xff08;鸢尾花数据集&#xff09…

融合虚拟与现实,AR Engine为用户提供沉浸式交互体验

当今的应用市场中&#xff0c;传统的应用产品已经难以完全满足消费者的多样化需求。为了在竞争激烈的市场中脱颖而出&#xff0c;企业需要深入洞察用户需求&#xff0c;提供个性化的服务体验和差异化的产品创新&#xff0c;以吸引并留住消费者。 比如&#xff0c;购物类App通过…

「QT」几何数据类 之 QPolygon 多边形类

✨博客主页何曾参静谧的博客&#x1f4cc;文章专栏「QT」QT5程序设计&#x1f4da;全部专栏「VS」Visual Studio「C/C」C/C程序设计「UG/NX」BlockUI集合「Win」Windows程序设计「DSA」数据结构与算法「UG/NX」NX二次开发「QT」QT5程序设计「File」数据文件格式「PK」Parasolid…

.NET 一款替代cmd.exe的交互式命令渗透工具

01阅读须知 此文所提供的信息只为网络安全人员对自己所负责的网站、服务器等&#xff08;包括但不限于&#xff09;进行检测或维护参考&#xff0c;未经授权请勿利用文章中的技术资料对任何计算机系统进行入侵操作。利用此文所提供的信息而造成的直接或间接后果和损失&#xf…

跨境访问难题?SD-WAN跨境加速专线加速电商社交媒体推广

在全球化日益加深的今天&#xff0c;跨境电商已成为企业拓展国际市场的重要途径。然而&#xff0c;跨境电商在社交媒体平台进行推广时&#xff0c;常常面临一系列网络访问难题&#xff0c;如公网速度慢、员工办事效率低下、IP被封禁以及公司运维对网络维护的繁琐等。这些问题不…

让redis一直开启服务/自动启动

文章目录 你的redis是怎么打开的黑窗不能关?必须要自动启动吗?再说说mysql 本文的所有指令都建议在管理员权限下打开cmd控制台 推荐的以管理员身份打开控制台的方式 Win R 打开运行 输入cmdShift Ctrl Enter 你的redis是怎么打开的 安装过redis的朋友都知道, redis的安…

Python 分子图分类,GNN Model for HIV Molecules Classification,HIV 分子图分类模型;整图分类问题,代码实战

一、分子图 分子图&#xff08;molecular graph&#xff09;是一种用来表示分子结构的图形方式&#xff0c;其中原子被表示为节点&#xff08;vertices&#xff09;&#xff0c;化学键被表示为边&#xff08;edges&#xff09;。对于HIV&#xff08;人类免疫缺陷病毒&#xff…

vue项目实战

1.项目文件夹添加&#xff08;结构如下&#xff09; 2.页面构建 安装路由 npm install react-router-dom 3.页面基本模板 router文件夹下index.js的模板 // 引入组件 import Login from "../views/login"; // 注册路由数组 const routes [{// 首页默认是/path: …

势不可挡 创新引领 | 生信科技SOLIDWORKS 2025新品发布会·苏州站精彩回顾

2024年11月01日&#xff0c;由生信科技举办的SOLIDWORKS 2025新产品发布会在江苏苏州圆满落幕。现场邀请到制造业的专家学者们一同感受SOLIDWORKS 2025最新功能&#xff0c;探索制造业数字化转型之路。 在苏州站活动开场&#xff0c;达索系统专业客户事业部华东区渠道经理马腾飞…

论文阅读《Structure-from-Motion Revisited》

摘要 增量式地运动结构恢复是从无序图像集合中进行三维重建的一个普遍策略。虽然增量式地重建系统在各个方面上都取得了巨大的进步&#xff0c;但鲁棒性、准确性、完整度和尺度仍然是构建真正通用管道的关键问题。我们提出了一种新的运动结构恢复技术&#xff0c;它改进了目前…

【人工智能】10分钟解读-深入浅出大语言模型(LLM)——从ChatGPT到未来AI的演进

文章目录 一、前言二、GPT模型的发展历程2.1 自然语言处理的局限2.2 机器学习的崛起2.3 深度学习的兴起2.3.1 神经网络的训练2.3.2 神经网络面临的挑战 2.4 Transformer的革命性突破2.4.1 Transformer的核心组成2.4.2 Transformer的优势 2.5 GPT模型的诞生与发展2.5.1 GPT的核心…

Vue 组件传递数据-Props(六)

一、Props传递静态数据 defineProps() 和 defineEmits() 为了在声明 props 和 emits 选项时获得完整的类型推导支持&#xff0c;我们可以使用 defineProps 和 defineEmits API&#xff0c;它们将自动地在 <script setup> 中可用&#xff1a; defineProps 和 defineEmits …

移动开发(七):.NET MAUI使用RESTAPI实现查询天气笔记

目录 一、接口准备 二、实体部分 三、页面部分 四、后台代码逻辑 五、总结 在移动开发过程中,第三方对接是非常常见的。今天给大家分享.NET MAUI如何使用REST API实现输入城市名称查询天气的示例,希望对大家学习.NET MAUI可以提供一些帮助! 一、接口准备 首先我们需要…

【网络安全 | 并发问题】Nginx重试机制与幂等性问题分析

未经许可,不得转载。 文章目录 业务背景Nginx的错误重试机制proxy_next_upstream指令配置重试500状态码非幂等请求的重试问题幂等性和非幂等性请求non_idempotent选项的使用解决方案业务背景 在现代互联网应用中,高可用性(HA)是确保系统稳定性的关键要求之一。为了应对服务…

C++入门基础(三)

目录 引用引用概念例子1例子2例子3例子4常引用拓展 引用 引用概念 引用不是新定义一个变量&#xff0c;而是给已存在变量取了一个别名&#xff0c;编译器不会为引用变量开辟内存空 间&#xff0c;它和它引用的变量共用同一块内存空间。 比如&#xff1a;同学A有一个别名为张…

ChatGPT键盘快捷键(按ctrl + /呼出)

文章目录 ChatGPT键盘快捷键- 打开新聊天: Ctrl Shift O- 聚焦聊天输入: Shift Esc- 复制最后一个代码块: Ctrl Shift ;- 复制最后一个回复: Ctrl Shift C- 设置自定义指令: Ctrl Shift I- 切换边栏: Ctrl Shift S- 删除聊天: Ctrl Shift ⌫- 显示快捷方式: Ctrl …

VCS:三步法的仿真流程

相关阅读 VCShttps://blog.csdn.net/weixin_45791458/category_12828763.html 使用三步流程仿真设计涉及三个基本步骤&#xff1a; 分析(Analysis)展开(Elaboration)仿真(Simulation) VCS使用这三个步骤编译任何设计&#xff0c;无论所使用源代码的是HDL、HVL或其他支持的技术…

万字长文解读深度学习——Transformer

文章目录 &#x1f33a;深度学习面试八股汇总&#x1f33a;初识Transformer1. 编码器-解码器架构解码器的额外结构 2. 自注意力机制&#xff08;Self-Attention Mechanism&#xff09;解码器中的注意力机制的2点特殊 3. 位置编码&#xff08;Positional Encoding&#xff09;4.…

花指令例子

如图所示&#xff1a; 指令EB FF的汇编代码为jmp -1&#xff0c;CPU执行到地址处0x6c80c0的指令EB FF时(jmp -1)&#xff0c;EIP为6c80c2, 执行后&#xff0c;EIP为0x6c80c1。但是反汇编器无法自动识别该指令。

校园周边美食探索及分享平台

摘要&#xff1a; 美食一直是与人们日常生活息息相关的产业。传统的电话订餐或者到店消费已经不能适应市场发展的需求。随着网络的迅速崛起&#xff0c;互联网日益成为提供信息的最佳俱渠道和逐步走向传统的流通领域&#xff0c;传统的美食业进而也面临着巨大的挑战&#xff0…