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.mzph.cn/pingmian/59265.shtml

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

相关文章

js WebAPI黑马笔记(万字速通)

此笔记来自于黑马程序员&#xff0c;pink老师yyds 复习&#xff1a; splice() 方法用于添加或删除数组中的元素。 注意&#xff1a; 这种方法会改变原始数组。 删除数组&#xff1a; splice(起始位置&#xff0c; 删除的个数) 比如&#xff1a;1 let arr [red, green, b…

【Pikachu靶场:XSS系列】xss之过滤,xss之htmlspecialchars,xss之herf输出,xss之js输出通关啦

一、xss之过滤 <svg onloadalert("过关啦")> 二、xss之htmlspecialchars javascript:alert(123) 原理&#xff1a;输入测试文本为herf的属性值和内容值&#xff0c;所以转换思路直接变为js代码OK了 三、xss之href输出 JavaScript:alert(假客套) 原理&#x…

JS装备智能化储备管理体系优化改革

现代化的JS仓储管理方案&#xff0c;通过整合先进的RFID技术与三维模拟技术&#xff0c;为JS物流领域开创了新颖的改革浪潮。以下是对这两项尖端技术融合并用于战备物资管理的应用概述&#xff1a; 一、RFID技术在JS物资管理中的实践 RFID技术依靠无线电波实现无需直接接触的数…

缓存淘汰策略:Redis中的内存管理艺术

在现代应用架构中&#xff0c;缓存是提升性能的关键组件。 Redis&#xff0c;作为一个高性能的键值存储系统&#xff0c;因其快速的数据访问能力而被广泛使用。然而&#xff0c;由于物理内存的限制&#xff0c;Redis必须在存储空间和性能之间找到平衡&#xff0c;这就引出了缓…

AUTOSAR COM 与 LargeDataCOM 模块解析及 C++ 实现示例

AUTOSAR COM 和 LargeDataCOM 模块在功能和使用场景上有一些显著的区别。以下是它们的主要区别及具体的应用示例,最后用 C++ 源代码来解析说明。 AUTOSAR COM 模块 • 功能:主要用于处理标准大小的信号和 I-PDU(协议数据单元),提供了信号打包、解包、数据传输和接收等功能…

JavaWeb复习

在网络应用程序中有两种基本的结构&#xff0c;即C/S和B/S&#xff0c;对于c/s程序分为客户机和服务器两层&#xff0c;把应用软件按照在客户机端(通常由客户端维护困难)&#xff0c;通过网络与服务器进行相互通信。B/S结构却不用通知客户端安装某个软件&#xff0c;内容修改了…

qt获取本机IP和定位

前言&#xff1a; 在写一个天气预报模块时&#xff0c;需要一个定位功能&#xff0c;在网上翻来翻去才找着&#xff0c;放在这里留着回顾下&#xff0c;也帮下有需要的人 正文&#xff1a; 一开始我想着直接调用百度地图的API来定位&#xff0c; 然后我就想先获取本机IP的方…

python爬取旅游攻略(1)

参考网址&#xff1a; https://blog.csdn.net/m0_61981943/article/details/131262987 导入相关库&#xff0c;用get请求方式请求网页方式&#xff1a; import requests import parsel import csv import time import random url fhttps://travel.qunar.com/travelbook/list.…

Oracle OCP认证考试考点详解082系列12

题记&#xff1a; 本系列主要讲解Oracle OCP认证考试考点&#xff08;题目&#xff09;&#xff0c;适用于19C/21C,跟着学OCP考试必过。 56. 第56题&#xff1a; 题目 解析及答案&#xff1a; 关于企业管理器&#xff08;EM&#xff09;Express&#xff0c;以下哪两个陈述是…

Postgresql源码(137)执行器参数传递与使用

参考 《Postgresql源码&#xff08;127&#xff09;投影ExecProject的表达式执行分析》 0 总结速查 prepare p_04(int,int) as select b from tbl_01 where a $1 and b $2为例。 custom计划中&#xff0c;在表达式计算中使用参数的值&#xff0c;因为custom计划会带参数值&…

SPI通信详解-学习笔记

参考原文地址 SPI&#xff1a;高速、全双工&#xff0c;同步、通信总线 SPI主从模式 SPI分为主、从两种模式&#xff0c;一个SPI通讯系统需要包含一个&#xff08;且只能是一个&#xff09;主设备&#xff0c;一个或多个从设备。提供时钟的为主设备&#xff08;Master&#xff…

Day102漏洞发现-漏扫项目篇Poc开发Yaml语法插件一键生成匹配结果交互提取

知识点&#xff1a; 1、Nuclei-Poc开发-环境配置&编写流程 2、Nuclei-Poc开发-Yaml语法&匹配提取 3、Nuclei-Poc开发-BurpSuite一键生成插件 Nuclei-Poc开发-环境配置&编写流程 1、开发环境&#xff1a;VscodeYaml插件 Visual Studio Code - Code Editing. R…

Node.js 入门指南:从零开始构建全栈应用

​&#x1f308;个人主页&#xff1a;前端青山 &#x1f525;系列专栏&#xff1a;node.js篇 &#x1f516;人终将被年少不可得之物困其一生 依旧青山,本期给大家带来node.js篇专栏内容:node.js-入门指南&#xff1a;从零开始构建全栈应用 前言 大家好&#xff0c;我是青山。作…

WordPress网站添加嵌入B站视频,自适应屏幕大小,取消自动播放

结合bv号 改成以下嵌入式代码&#xff08;自适应屏幕大小,取消自动播放&#xff09; <iframe style"width: 100%; aspect-ratio: 16/9;" src"//player.bilibili.com/player.html?isOutsidetrue&bvidBV13CSVYREpr&p1&autoplay0" scrolling…

大模型应用系列:Query 变换的示例浅析

【引】NLP中的经典组件在大模型应用中还有效么&#xff1f;大模型对自然语言处理中的典型任务有什么影响么&#xff1f; RAG应用通过分割文档、嵌入向量化并检索高语义相似性的块来响应用户问题&#xff0c;但面临文档块不相关、用户用词不当及结构化查询需求等问题。若RAG无法…

【Oracle】空格单字符通配符查询匹配失败

问题 在进行模糊查询的时候&#xff0c;通过全局任意字符串匹配出含有两个字刘姓的人&#xff0c;但是通过刘_不能匹配出结果。 解决 检查后发现&#xff0c;姓名中包含空格 SELECT * FROM student WHERE TRIM(sname) LIKE 刘_;第一种解决方案就是查询的时候进行去空格处理&a…

讲讲⾼并发的原则?

大家好&#xff0c;我是锋哥。今天分享关于【讲讲⾼并发的原则&#xff1f;】面试题。希望对大家有帮助&#xff1b; 讲讲⾼并发的原则&#xff1f; 1000道 互联网大厂Java工程师 精选面试题-Java资源分享网 高并发是指系统在同一时间内能够处理大量请求的能力。要有效地管理…

鸿蒙进阶-AlphabetIndexer组件

大家好&#xff0c;这里是鸿蒙开天组&#xff0c;今天我们来学习AlphabetIndexer组件&#xff0c;喜欢就点点关注吧&#xff01; 通过 AlphabetIndexer 组件可以与容器组件结合&#xff0c;实现导航联动&#xff0c;以及快速定位的效果 核心用法 AlphabetIndexer不是容器组件…

ubuntu交叉编译expat库给arm平台使用

1.下载expat库源码: https://github.com/libexpat/libexpat/release?page=2 wget https://github.com/libexpat/libexpat/release/download/R_2_3_0/expat-2.3.0.tar.bz2 下载成功: 2.解压expat库,并进入解压后的目录: tar xjf expat-2.3.0.tar.bz2 cd expat-2.3.0 <…

【系统面试篇】进程和线程类(1)(笔记)——区别、通讯方式、同步、互斥、锁分类

目录 一、问题综述 1. 进程和线程的区别&#xff1f; 2. 进程的状态有哪些&#xff1f; 3. 进程之间的通信方式? &#xff08;1&#xff09;管道 &#xff08;2&#xff09;消息队列 &#xff08;3&#xff09;共享内存 &#xff08;4&#xff09;信号量 &#xff08…