JS implements the curriculum timetable applet (imitating the super curriculum timetable) and adds a custom background function
Overview:I drew lessons from several timetable software on the market. Because the functions are too complicated, I tried to make a timetable applet and open source it. It currently supports the functions of adding and deleting timetables, and also adds a daily timetable. Overall, it feels like a fairly concise timetable. The backend is developed based on fastadmin. GIF demo:
The open source address of gitee will be placed at the bottom Recently I always feel that the current interface is too simple and does not meet the needs of a decent person like me, so I added the function of customizing the background of the course schedule.
Effect:
You need to add an entry in mine.js:
{
name: "Set the timetable background",
icon: "/images/scheduleIcon.png",
url: "/pages/schedule/schedule?",
},Add a new page schedule wxml code
<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? "Set background for Ta":"Set the timetable background"}}</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">Upload background</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">Couple timetable background</view>
</view>
</view>
<view class="padding-top">
<view class="title">Background start display time</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">Set background display duration</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="">
Save</button>
</view>
<view wx:else class="ev-mainBody">
<view>
<image class="message" mode="scaleToFill" src="/images/scheduleIcon.png" />
</view>
<view>
<text class="title">Set the timetable background</text>
<view class="padding-top-sm tips">Users can upload their favorite pictures as the background display of the timetable (click on the picture to replace)</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">Daily Schedule Background</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">Upload daily schedule background</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">Weekly Schedule Background</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">Upload weekly timetable background</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="">
Restore default background</button>
</view>js code
import {
scheduleBG,
couplesBG,
couplesInfoAdd,
setbgdefault,
} from "../../utils/api/user";
//Get the application instance 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, // Couples schedule background dailySchedule: null, // Daily schedule background weeklySchedule: null, // Weekly schedule background sendTime: "now", // Couples schedule background start time displayTimeList: [
{
label: "One day",
checked: false,
time: 1,
},
{
label: "one week",
checked: true,
time: 7,
},
{
label: "one month",
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, //Daily schedule background weeklySchedule: table_bgimage
? app.globalData.ImgUrl + table_bgimage
: null, // Weekly schedule background});
},
/**
* Go back one page */
BackPage() {
wx.navigateBack({
delta: 1,
});
},
/**
* Switch display time */
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,
});
},
/**
* Modify background */
modifyImage(e) {
let type = e.currentTarget.dataset.type;
wx.chooseImage({
count: 1,
sizeType: ["compressed"],
sourceType: ["album"],
success: (res) => {
// tempFilePath can be used as the src attribute of the img tag to display images 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("Setting failed, please try again");
break;
}
},
});
},
/**
* Restore default background */
saveButton() {
this.setData({
dailySchedule: null,
weeklySchedule: null,
});
setbgdefault().then((v) => {
v.code && wxShowToast(v.msg);
app.getSet();
});
},
/**
* Start time of couple class schedule */
TimePicker(e) {
let day = dayjs(e.detail).format("MM月DD日");
let am = dayjs(e.detail).format("A") == "PM" ? "afternoon" : "morning";
let time = dayjs(e.detail).format("HH:mm");
let sendTime = `${day} ${am} ${time}`;
console.log(sendTime, "TimePicker");
this.setData({
sendTime,
startTime: dayjs(e.detail),
});
},
/**
* Save couple background */
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: "Save failed",
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 code
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; } *** Open source address: This is the end of this article about how to use JS to implement a small program called a class schedule (imitating the Super Class Schedule) and add a custom background function. For more relevant Super Class Schedule content, please search previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future! You may also be interested in:
|
<<: MySQL optimization solution: enable slow query log
>>: Responsive layout summary (recommended)
Recommend
Docker uses root to enter the container
First run the docker container Run the command as...
Detailed tutorial on Tomcat installation and deployment in Windows 10
Table of contents 1 Java environment configuratio...
Pitfall notes of vuex and pinia in vue3
Table of contents introduce Installation and Usag...
Example code for implementing a text marquee with CSS3
Background Here's what happened, Luzhu accide...
Solution to MySQL master-slave delay problem
Today we will look at why master-slave delay occu...
HTML table tag tutorial (33): cell vertical alignment attribute VALIGN
In the vertical direction, you can set the cell a...
Introduction to version management tool Rational ClearCase
Rational ClearCase is a software configuration ma...
Detailed explanation of the process of creating floor navigation effects with JavaScript
Table of contents Objectives for this period 1. F...
Using js to implement a number guessing game
Last week, the teacher gave me a small homework, ...
How to clean up data in MySQL online database
Table of contents 01 Scenario Analysis 02 Operati...
MySQL 5.6 root password modification tutorial
1. After installing MySQL 5.6, it cannot be enabl...
Summary of Mysql exists usage
Introduction EXISTS is used to check whether a su...
Vue3 (Part 2) Integrating Ant Design Vue
Table of contents 1. Integrate Ant Design Vue 2. ...
Introduction to the usage of props in Vue
Preface: In Vue, props can be used to connect ori...
MySQL cursor detailed introduction
Table of contents 1. What is a cursor? 2. How to ...