JS实现课程表小程序(仿超级课程表)加入自定义背景功能
更新时间:2021年12月30日 16:23 点击:632 作者:练手Lab
总览:
借鉴了市面上存在的几个课程表软件,因为功能太繁杂,于是自己尝试做了个课程表小程序并开源,目前已经支持添加删除课程表功能,还加入了日课表
总体来说感觉是一个相当简洁的课程表,后端基于fastadmin开发
gif演示:
在底部会放上gitee的开源地址
最近总感觉目前的界面过于简洁了,不满足我这个体面人的需求,故加入自定义课程表背景的的功能。
新增页面:
效果:
需要在mine.js里面加入一个入口:
{ name: "设置课表背景", icon: "/images/scheduleIcon.png", url: "/pages/schedule/schedule?", },
新增页面schedule
wxml代码
<view style="height:{{CustomBar}}px;"> <view class="cu-bar ev-fr-start" bindtap="BackPage" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;"> <text class="cuIcon-back padding-lr-sm"></text> <view class="action">{{couples? "给Ta设置背景":"设置课表背景"}}</view> </view> </view> <view wx:if="{{couples}}" class="ev-mainBody"> <view class="ev-fc-center"> <view wx:if="{{!CouplesBG}}" data-type='Couples' bind:tap="modifyImage" class="addBG ev-fc-center"> <text class="cuIcon-roundadd" style="color:#5E99FB"></text> <text class="padding-xs" style="color:#5E99FB">上传背景</text> </view> <view wx:if="{{CouplesBG}}" class="BGBox ev-fc-center"> <view class="BGImg" data-type='Couples' bind:tap="modifyImage"> <image mode="aspectFill" src="{{CouplesBG}}" /> </view> <view class="round BGState">情侣课表背景</view> </view> </view> <view class="padding-top"> <view class="title">背景开始展示时间</view> <dateTimePicker type="minute" bind:change="TimePicker"> <view class="sendTimeBox ev-fr"> <input type="text" class="sendTime padding-lr" disabled="{{true}}" value="{{sendTime}}" /> <text style="font-size:24px;color:#92979D" class="cuIcon-triangledownfill padding-lr-sm"></text> </view> </dateTimePicker> </view> <view class="padding-top"> <view class="title">设置背景展示时长</view> <button wx:for="{{displayTimeList}}" wx:key="index" class="cu-btn round margin-tb {{item.checked ? 'bg-blue':''}} margin-right" data-id="{{index}}" bind:tap="showTime"> {{item.label}} </button> </view> <button bind:tap="saveCouplesBG" disabled="{{!CouplesBG}}" class="cu-btn block bg-blue margin-tb-sm lg saveButton" style="bottom: {{StatusBar}}px;" type=""> 保存 </button> </view> <view wx:else class="ev-mainBody"> <view> <image class="message" mode="scaleToFill" src="/images/scheduleIcon.png" /> </view> <view> <text class="title">设置课表背景</text> <view class="padding-top-sm tips">用户可上传喜欢的图片作为课表的背景展示(点击图片替换)</view> </view> <view class="ev-fr BGListBox"> <view wx:if="{{dailySchedule}}" class="BGBox ev-fc-center"> <view class="BGImg" data-type='daily' bind:tap="modifyImage"> <image mode="aspectFill" src="{{dailySchedule}}" /> </view> <view class="round BGState">日课表背景</view> </view> <view wx:if="{{!dailySchedule}}" data-type='daily' bind:tap="modifyImage" class="addBG ev-fc-center"> <text class="cuIcon-roundadd" style="color:#5E99FB"></text> <text class="padding-xs" style="color:#5E99FB">上传日课表背景</text> </view> <view wx:if="{{weeklySchedule}}" class="BGBox ev-fc-center"> <view class="BGImg" data-type='week' bind:tap="modifyImage"> <image mode="aspectFill" src="{{weeklySchedule}}" /> </view> <view class="round BGState">周课表背景</view> </view> <view wx:if="{{!weeklySchedule}}" data-type='week' bind:tap="modifyImage" class="addBG ev-fc-center"> <text class="cuIcon-roundadd" style="color:#5E99FB"></text> <text class="padding-xs" style="color:#5E99FB">上传周课表背景</text> </view> </view> <button wx:if="{{(weeklySchedule || dailySchedule)}}" bind:tap="saveButton" class="cu-btn block bg-blue margin-tb-sm lg saveButton" style="bottom: {{StatusBar}}px;" type=""> 恢复默认背景 </button> </view>
js代码
import { scheduleBG, couplesBG, couplesInfoAdd, setbgdefault, } from "../../utils/api/user"; //获取应用实例 const app = getApp(); const dayjs = require("../../utils/dayjs/dayjs.min"); import { wxShowToast } from "../../utils/promisify"; Page({ data: { StatusBar: app.globalData.StatusBar, CustomBar: app.globalData.CustomBar, ImgUrl: app.globalData.ImgUrl, displayArea: app.globalData.displayArea, CouplesBG: null, // 情侣课表背景 dailySchedule: null, // 日课表背景 weeklySchedule: null, // 周课表背景 sendTime: "现在", // 情侣课表背景开始时间 displayTimeList: [ { label: "一天", checked: false, time: 1, }, { label: "一周", checked: true, time: 7, }, { label: "一个月", checked: false, time: 30, }, ], startTime: null, }, onLoad: function (query) { let { index_bgimage, table_bgimage } = app.globalData.userInfo; this.setData({ couples: query.couples ? query.couples : null, dailySchedule: index_bgimage ? app.globalData.ImgUrl + index_bgimage : null, // 日课表背景 weeklySchedule: table_bgimage ? app.globalData.ImgUrl + table_bgimage : null, // 周课表背景 }); }, /** * 后退一页 */ BackPage() { wx.navigateBack({ delta: 1, }); }, /** * 切换展示时间 */ showTime(e) { let id = e.currentTarget.dataset.id; console.log(e.currentTarget.dataset.id); let displayTimeList = this.data.displayTimeList.map((v, i) => { v.checked = id === i; return v; }); this.setData({ displayTimeList, }); }, /** * 修改背景 */ modifyImage(e) { let type = e.currentTarget.dataset.type; wx.chooseImage({ count: 1, sizeType: ["compressed"], sourceType: ["album"], success: (res) => { // tempFilePath可以作为img标签的src属性显示图片 const tempFilePaths = res.tempFilePaths; switch (type) { case "week": scheduleBG(tempFilePaths[0], "table").then((v) => { app.getSet(); v.code && wxShowToast(v.msg); this.setData({ weeklySchedule: tempFilePaths[0], }); }); break; case "daily": scheduleBG(tempFilePaths[0], "index").then((v) => { app.getSet(); v.code && wxShowToast(v.msg); this.setData({ dailySchedule: tempFilePaths[0], }); }); break; case "Couples": couplesBG(tempFilePaths[0]).then((v) => { console.log(v); app.getSet(); v.code && wxShowToast(v.msg); this.setData({ CouplesBG: app.globalData.ImgUrl + v.data.imgurl, }); }); break; default: wxShowToast("设置失败,请重试"); break; } }, }); }, /** * 恢复默认背景 */ saveButton() { this.setData({ dailySchedule: null, weeklySchedule: null, }); setbgdefault().then((v) => { v.code && wxShowToast(v.msg); app.getSet(); }); }, /** * 情侣课表开始时间 */ TimePicker(e) { let day = dayjs(e.detail).format("MM月DD日"); let am = dayjs(e.detail).format("A") == "PM" ? "下午" : "上午"; let time = dayjs(e.detail).format("HH:mm"); let sendTime = `${day} ${am} ${time}`; console.log(sendTime, "TimePicker"); this.setData({ sendTime, startTime: dayjs(e.detail), }); }, /** * 保存情侣背景 */ saveCouplesBG() { let { displayTimeList, startTime, CouplesBG } = this.data; let endType = displayTimeList.filter((v) => v.checked === true)[0]; let _startTime = startTime ? dayjs(startTime) : dayjs(); let endTime = endType.time; let tid = app.globalData.userInfo.lovers_id; if (!tid) { wx.showToast({ title: "保存失败", icon: "none", duration: 2000, }); return; } couplesInfoAdd({ tid, starttime: _startTime.unix(), endtime: endTime, love_sort: 1, contents: CouplesBG.replace(this.data.ImgUrl, ""), }).then((v) => { wxShowToast(v.msg); if (v.code) { app.getSet().then(() => { this.BackPage(); }); } }); }, });
wss代码
headBox { width: 750rpx; } page { background-color: #fff; } .BGListBox { flex-wrap: wrap; justify-content: space-between; } .BGBox { width: 321rpx; height: 321rpx; border-radius: 34rpx; overflow: hidden; margin-top: 22rpx; } .BGBox .BGImg { width: 321rpx; height: 321rpx; } .BGBox .BGState { position: relative; background: #000000; opacity: 0.5; padding: 10rpx 20rpx; bottom: 50rpx; color: #fff; } .addBG { width: 321rpx; height: 321rpx; margin-top: 22rpx; border: 1rpx dashed #92979d; border-radius: 24rpx; border-radius: 34rpx; } .message { width: 70rpx; height: 70rpx; margin-top: 20rpx; } .title { font-size: 32rpx; font-weight: 500; line-height: 45rpx; color: #282b2f; } .tips { font-size: 24rpx; font-weight: 400; line-height: 33rpx; color: #92979d; } .sendTimeBox { width: 686rpx; height: 90rpx; background: #ffffff; border: 1rpx solid #dfe4ea; border-radius: 14rpx; margin: 24rpx 0; }
*** 开源地址:
gitee开源: (https://gitee.com/chengdu-gengzixin_liu-jiyuan/timetable)
到此这篇关于JS实现课程表小程序(仿超级课程表)加入自定义背景功能的文章就介绍到这了,更多相关超级课程表内容请搜索猪先飞以前的文章或继续浏览下面的相关文章希望大家以后多多支持猪先飞!
原文出处:https://www.cnblogs.com/lianshou/p/15748658.html
上一篇: JavaScript数组方法实例详解
相关文章
- 本篇文章主要分享了通过window.navigator来判断浏览器及其版本信息的实例代码。具有一定的参考价值,下面跟着小编一起来看下吧...2017-01-23
- 这篇文章主要介绍了js如何实现浏览器打印功能,文中示例代码非常详细,帮助大家更好的理解和学习,感兴趣的朋友可以了解下...2020-07-15
- 这篇文章主要介绍了微信小程序 页面传值详解的相关资料,需要的朋友可以参考下...2017-03-13
- 下面小编就为大家带来一篇利用JS实现点击按钮后图片自动切换的简单方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧...2016-10-25
- 这篇文章主要给大家介绍了关于Nest.js参数校验和自定义返回数据格式的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-03-28
- 作为前端,一直以来都知道HTTP劫持与XSS跨站脚本、CSRF跨站请求伪造。防御这些劫持最好的方法是从后端入手,前端能做的太少。而且由于源码的暴露,攻击者很容易绕过防御手段。但这不代表我们去了解这块的相关知识是没意义的,本文的许多方法,用在其他方面也是大有作用。...2021-05-24
- 那么今天我就用JavaScript代码来实现这个效果吧,那么首先介绍一下整个的思路,首先我们先将确定输入密码的位数,我的需求是5位,那么就用一个div标签包住5个input标签...2016-01-02
- 这篇文章主要为大家详细介绍了js+css实现回到顶部按钮back to top回到顶部按钮,感兴趣的小伙伴们可以参考一下...2016-03-03
- 这篇文章主要为大家详细介绍了js实现上传图片及时预览的相关资料,具有一定的参考价值,感兴趣的朋友可以参考一下...2016-05-09
- 这篇文章主要介绍了uniapp微信小程序:key失效的解决方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-01-20
- 这篇文章主要介绍了js实现调用网络摄像头及常见错误处理,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-03-07
- 这篇文章主要为大家详细介绍了JS实现随机生成验证码,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-09-06
- 这篇文章主要给大家介绍了一个关于JS正则匹配的踩坑记录,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-04-13
- 这篇文章主要介绍了如何使用JavaScript实现“无缝滚动 自动播放”轮播图效果,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2020-08-20
- 这篇文章主要介绍了js组件SlotMachine实现图片切换效果制作抽奖系统的相关资料,需要的朋友可以参考下...2016-04-19
- Vue.js通过简洁的API提供高效的数据绑定和灵活的组件系统.这篇文章主要介绍了vue.js 表格分页ajax 异步加载数据的相关资料,需要的朋友可以参考下...2016-10-20
- 为了网站的安全性,很多朋友都把密码设的比较复杂,但是如何密码不能明显示,不知道输的是对是错,为了安全起见可以把密码显示的,那么基于js代码如何实现的呢?下面通过本文给大家介绍JavaScript实现表单密码的隐藏和显示,需要的朋友参考下...2016-03-03
- 这篇文章主要为大家详细介绍了js实现列表按字母排序,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-08-11
- 这篇文章主要介绍了基于JavaScript实现文字超出部分隐藏 的相关资料,需要的朋友可以参考下...2016-03-01
- 这篇文章主要介绍了JS实现响应鼠标点击动画渐变弹出层效果代码,具有非常自然流畅的动画过度效果,涉及JavaScript针对鼠标事件的响应及页面元素样式的动态操作相关技巧,需要的朋友可以参考下...2016-03-28