JS实现课程表小程序(仿超级课程表)加入自定义背景功能

admin

　　这篇文章主要介绍了JS实现课程表小程序(仿超级课程表)加入自定义背景功能,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
总览：
　　借鉴了市面上存在的几个课程表软件，因为功能太繁杂，于是自己尝试做了个课程表小程序并开源，目前已经支持添加删除课程表功能，还加入了日课表
总体来说感觉是一个相当简洁的课程表，后端基于fastadmin开发
gif演示：

　　在底部会放上gitee的开源地址
　　最近总感觉目前的界面过于简洁了，不满足我这个体面人的需求，故加入自定义课程表背景的的功能。
新增页面：

　　效果：

　　需要在mine.js里面加入一个入口：

2. {
3.                 name: "设置课表背景",
4.                 icon: "/images/scheduleIcon.png",
5.                 url: "/pages/schedule/schedule?",
6.             },

复制代码

　　新增页面schedule
　　wxml代码

2. ‹view>
3.     ‹view class="cu-bar ev-fr-start" bindtap="BackPage">
4.         ‹text class="cuIcon-back padding-lr-sm">‹/text>
5.         ‹view class="action">{{couples? "给Ta设置背景":"设置课表背景"}}‹/view>
6.     ‹/view>
7. ‹/view>
8. ‹view wx:if="{{couples}}" class="ev-mainBody">
9.     ‹view class="ev-fc-center">
10.         ‹view wx:if="{{!CouplesBG}}" data-type='Couples' bind:tap="modifyImage" class="addBG ev-fc-center">
11.             ‹text class="cuIcon-roundadd">‹/text>
12.             ‹text class="padding-xs">上传背景‹/text>
13.         ‹/view>
14.         ‹view wx:if="{{CouplesBG}}" class="BGBox ev-fc-center">
15.             ‹view class="BGImg" data-type='Couples' bind:tap="modifyImage">
16.                 ‹image mode="aspectFill" src="{{CouplesBG}}" />
17.             ‹/view>
18.             ‹view class="round BGState">情侣课表背景‹/view>
19.         ‹/view>
20.     ‹/view>
21.     ‹view class="padding-top">
22.         ‹view class="title">背景开始展示时间‹/view>
23.         ‹dateTimePicker type="minute" bind:change="TimePicker">
24.             ‹view class="sendTimeBox ev-fr">
25.                 ‹input type="text" class="sendTime padding-lr" disabled="{{true}}" value="{{sendTime}}" />
26.                 ‹text class="cuIcon-triangledownfill padding-lr-sm">‹/text>
27.             ‹/view>
28.         ‹/dateTimePicker>
29.     ‹/view>
30.     ‹view class="padding-top">
31.         ‹view class="title">设置背景展示时长‹/view>
32.         ‹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">
33.             {{item.label}}
34.         ‹/button>
35.     ‹/view>
36.     ‹button bind:tap="saveCouplesBG" disabled="{{!CouplesBG}}" class="cu-btn block bg-blue margin-tb-sm lg saveButton" type="">
37.         保存
38.     ‹/button>
39. ‹/view>
40. ‹view wx:else class="ev-mainBody">
41.     ‹view>
42.         ‹image class="message" mode="scaleToFill" src="/images/scheduleIcon.png" />
43.     ‹/view>
44.     ‹view>
45.         ‹text class="title">设置课表背景‹/text>
46.         ‹view class="padding-top-sm tips">用户可上传喜欢的图片作为课表的背景展示(点击图片替换)‹/view>
47.     ‹/view>
48.     ‹view class="ev-fr BGListBox">
49.         ‹view wx:if="{{dailySchedule}}" class="BGBox ev-fc-center">
50.             ‹view class="BGImg" data-type='daily' bind:tap="modifyImage">
51.                 ‹image mode="aspectFill" src="{{dailySchedule}}" />
52.             ‹/view>
53.             ‹view class="round BGState">日课表背景‹/view>
54.         ‹/view>
55.         ‹view wx:if="{{!dailySchedule}}" data-type='daily' bind:tap="modifyImage" class="addBG ev-fc-center">
56.             ‹text class="cuIcon-roundadd">‹/text>
57.             ‹text class="padding-xs">上传日课表背景‹/text>
58.         ‹/view>
59.         ‹view wx:if="{{weeklySchedule}}" class="BGBox ev-fc-center">
60.             ‹view class="BGImg" data-type='week' bind:tap="modifyImage">
61.                 ‹image mode="aspectFill" src="{{weeklySchedule}}" />
62.             ‹/view>
63.             ‹view class="round BGState">周课表背景‹/view>
64.         ‹/view>
65.         ‹view wx:if="{{!weeklySchedule}}" data-type='week' bind:tap="modifyImage" class="addBG ev-fc-center">
66.             ‹text class="cuIcon-roundadd">‹/text>
67.             ‹text class="padding-xs">上传周课表背景‹/text>
68.         ‹/view>
69.     ‹/view>
70.     ‹button wx:if="{{(weeklySchedule || dailySchedule)}}" bind:tap="saveButton" class="cu-btn block bg-blue margin-tb-sm lg saveButton" type="">
71.         恢复默认背景
72.     ‹/button>
73. ‹/view>

复制代码

　　js代码

2. import {
3.     scheduleBG,
4.     couplesBG,
5.     couplesInfoAdd,
6.     setbgdefault,
7. } from "../../utils/api/user";
8. //获取应用实例
9. const app = getApp();
10. const dayjs = require("../../utils/dayjs/dayjs.min");
11. import { wxShowToast } from "../../utils/promisify";
12. Page({
13.     data: {
14.         StatusBar: app.globalData.StatusBar,
15.         CustomBar: app.globalData.CustomBar,
16.         ImgUrl: app.globalData.ImgUrl,
17.         displayArea: app.globalData.displayArea,
18.         CouplesBG: null, // 情侣课表背景
19.         dailySchedule: null, // 日课表背景
20.         weeklySchedule: null, // 周课表背景
21.         sendTime: "现在", // 情侣课表背景开始时间
22.         displayTimeList: [
23.             {
24.                 label: "一天",
25.                 checked: false,
26.                 time: 1,
27.             },
28.             {
29.                 label: "一周",
30.                 checked: true,
31.                 time: 7,
32.             },
33.             {
34.                 label: "一个月",
35.                 checked: false,
36.                 time: 30,
37.             },
38.         ],
39.         startTime: null,
40.     },
41.     onLoad: function (query) {
42.         let { index_bgimage, table_bgimage } = app.globalData.userInfo;
43.         this.setData({
44.             couples: query.couples ? query.couples : null,
45.             dailySchedule: index_bgimage
46.                 ? app.globalData.ImgUrl + index_bgimage
47.                 : null, // 日课表背景
48.             weeklySchedule: table_bgimage
49.                 ? app.globalData.ImgUrl + table_bgimage
50.                 : null, // 周课表背景
51.         });
52.     },
53.     /**
54.      * 后退一页
55.      */
56.     BackPage() {
57.         wx.navigateBack({
58.             delta: 1,
59.         });
60.     },
61.     /**
62.      * 切换展示时间
63.      */
64.     showTime(e) {
65.         let id = e.currentTarget.dataset.id;
66.         console.log(e.currentTarget.dataset.id);
67.         let displayTimeList = this.data.displayTimeList.map((v, i) => {
68.             v.checked = id === i;
69.             return v;
70.         });
71.         this.setData({
72.             displayTimeList,
73.         });
74.     },
75.     /**
76.      * 修改背景
77.      */
78.     modifyImage(e) {
79.         let type = e.currentTarget.dataset.type;
80.         wx.chooseImage({
81.             count: 1,
82.             sizeType: ["compressed"],
83.             sourceType: ["album"],
84.             success: (res) => {
85.                 // tempFilePath可以作为img标签的src属性显示图片
86.                 const tempFilePaths = res.tempFilePaths;
87.                 switch (type) {
88.                 case "week":
89.                     scheduleBG(tempFilePaths[0], "table").then((v) => {
90.                         app.getSet();
91.                         v.code && wxShowToast(v.msg);
92.                         this.setData({
93.                             weeklySchedule: tempFilePaths[0],
94.                         });
95.                     });
96.                     break;
97.                 case "daily":
98.                     scheduleBG(tempFilePaths[0], "index").then((v) => {
99.                         app.getSet();
100.                         v.code && wxShowToast(v.msg);
101.                         this.setData({
102.                             dailySchedule: tempFilePaths[0],
103.                         });
104.                     });
105.                     break;
106.                 case "Couples":
107.                     couplesBG(tempFilePaths[0]).then((v) => {
108.                         console.log(v);
109.                         app.getSet();
110.                         v.code && wxShowToast(v.msg);
111.                         this.setData({
112.                             CouplesBG:
113.                                     app.globalData.ImgUrl + v.data.imgurl,
114.                         });
115.                     });
116.                     break;
117.                 default:
118.                     wxShowToast("设置失败,请重试");
119.                     break;
120.                 }
121.             },
122.         });
123.     },
124.     /**
125.      * 恢复默认背景
126.      */
127.     saveButton() {
128.         this.setData({
129.             dailySchedule: null,
130.             weeklySchedule: null,
131.         });
132.         setbgdefault().then((v) => {
133.             v.code && wxShowToast(v.msg);
134.             app.getSet();
135.         });
136.     },
137.     /**
138.      * 情侣课表开始时间
139.      */
140.     TimePicker(e) {
141.         let day = dayjs(e.detail).format("MM月DD日");
142.         let am = dayjs(e.detail).format("A") == "PM" ? "下午" : "上午";
143.         let time = dayjs(e.detail).format("HH:mm");
144.         let sendTime = `${day} ${am} ${time}`;
145.         console.log(sendTime, "TimePicker");
146.         this.setData({
147.             sendTime,
148.             startTime: dayjs(e.detail),
149.         });
150.     },
151.     /**
152.      * 保存情侣背景
153.      */
154.     saveCouplesBG() {
155.         let { displayTimeList, startTime, CouplesBG } = this.data;
156.         let endType = displayTimeList.filter((v) => v.checked === true)[0];
157.         let _startTime = startTime ? dayjs(startTime) : dayjs();
158.         let endTime = endType.time;
159.         let tid = app.globalData.userInfo.lovers_id;
160.         if (!tid) {
161.             wx.showToast({
162.                 title: "保存失败",
163.                 icon: "none",
164.                 duration: 2000,
165.             });
166.             return;
167.         }
168.         couplesInfoAdd({
169.             tid,
170.             starttime: _startTime.unix(),
171.             endtime: endTime,
172.             love_sort: 1,
173.             contents: CouplesBG.replace(this.data.ImgUrl, ""),
174.         }).then((v) => {
175.             wxShowToast(v.msg);
176.             if (v.code) {
177.                 app.getSet().then(() => {
178.                     this.BackPage();
179.                 });
180.             }
181.         });
182.     },
183. });

复制代码

　　wss代码

2. headBox {
3.   width: 750rpx; }
5. page {
6.   background-color: #fff; }
8. .BGListBox {
9.   flex-wrap: wrap;
10.   justify-content: space-between; }
12. .BGBox {
13.   width: 321rpx;
14.   height: 321rpx;
15.   border-radius: 34rpx;
16.   overflow: hidden;
17.   margin-top: 22rpx; }
18.   .BGBox .BGImg {
19.     width: 321rpx;
20.     height: 321rpx; }
21.   .BGBox .BGState {
22.     position: relative;
23.     background: #000000;
24.     opacity: 0.5;
25.     padding: 10rpx 20rpx;
26.     bottom: 50rpx;
27.     color: #fff; }
29. .addBG {
30.   width: 321rpx;
31.   height: 321rpx;
32.   margin-top: 22rpx;
33.   border: 1rpx dashed #92979d;
34.   border-radius: 24rpx;
35.   border-radius: 34rpx; }
37. .message {
38.   width: 70rpx;
39.   height: 70rpx;
40.   margin-top: 20rpx; }
42. .title {
43.   font-size: 32rpx;
44.   font-weight: 500;
45.   line-height: 45rpx;
46.   color: #282b2f; }
48. .tips {
49.   font-size: 24rpx;
50.   font-weight: 400;
51.   line-height: 33rpx;
52.   color: #92979d; }
54. .sendTimeBox {
55.   width: 686rpx;
56.   height: 90rpx;
57.   background: #ffffff;
58.   border: 1rpx solid #dfe4ea;
59.   border-radius: 14rpx;
60.   margin: 24rpx 0; }

复制代码

　　*** 开源地址：
gitee开源: (https://gitee.com/chengdu-gengzixin_liu-jiyuan/timetable)
　　到此这篇关于JS实现课程表小程序(仿超级课程表)加入自定义背景功能的文章就介绍到这了,更多相关超级课程表内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

---