简单的课程表小程序（仿超级课程表），加入自定义背景功能

总览：

借鉴了市面上存在的几个课程表软件，因为功能太繁杂，于是自己尝试做了个课程表小程序并开源，目前已经支持添加删除课程表功能，还加入了日课表总体来说感觉是一个相当简洁的课程表，后端基于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)

如果有什么建议，可以评论区告诉我

简单的课程表小程序（仿超级课程表），加入自定义背景功能相关推荐

【课程表小程序源码】增加今日课表功能|开源代码
上次做了一个课程表小程序并开源了代码,但总感觉周课表不大方便有时候早上睡醒了都不知道现在是周几还不知道今天有没有课,痛定思痛决定加上今日课表的功能特性(底部附开源地址): 1.超简约,仅显示今 ...
手机端课程表的实现——仿超级课程表
在开发项目时,有一个页面是我的课程表,想到超级课程表app,觉的它的那个我的课程表页面非常好,简单直观,把纸质的课程表在手机端展现出来了. 后来自己研究了一下,照着它的样式也写了一个,并且也能添加课程 ...
java小程序知乎,微信小程序仿知乎实现评论留言功能
最近沉迷学习无法自拔,太久没有码字,码一个小程序留言功能实现.先上一波最后效果图: (删除按钮,是用户自己的留言时才会显示该按钮) 实现技术后台:SSM框架数据库:MySQL数据库数据库设计评 ...
.NET生成小程序码，并合自定义背景图生成推广小程序二维码
前言: 对于小程序大家可能都非常熟悉了,随着小程序的不断普及越来越多的公司都开始推广使用起来了.今天接到一个需求就是生成小程序码,并且于运营给的推广图片合并在一起做成一张漂亮美观的推广二维码,扫码这种 ...
简单方法实现仿超级课程表界面
简单方法实现仿超级课程表界面 (这个代码其实是我好久之前写武大课程表的时候自己突发奇想实现的.由于当时代码水平不高,所以想出来的方法可能有点歪门邪道的感觉.现在看来,对于实现的方法又有了许多的想法,不 ...
php 超级课程表源代码,练手Lab课程表小程序源码v1.0.0 Thinkphp 前后端分离
练手Lab课程表小程序源码是一个基于Thinkphp系统进行开发的前后端分离系统. 源码功能介绍 1.情侣功能 2.情侣间留言 3.情侣间互相设置课程表背景 4.自己日.周课程表背景设置 5.教务系统 ...
实践--课程表（仿超级课程表展示课表）
总览在上一篇博客实践–课程表(ViewPager实现)中已经实现了课表内容的获取和展示,可是因为ViewPager的显示的效果的局限性,对于课表的一览性较差.而且没有单双周的区分,不能实时显示,故将 ...
（已更新）Thinkphp课程表小程序源码v1.0.0全开源版（前后端分离）
源码功能介绍 1.情侣功能 2.情侣间留言 3.情侣间互相设置课程表背景 4.自己日.周课程表背景设置 5.教务系统课程表导入 6.导入别人分享的课表 7.导入别人分享的单课 8.多校支持 9.首页顶 ...
Thinkphp课程表小程序源码v1.0.0全开源版（前后端分离）
源码介绍练手Lab课程表小程序源码是一个基于Thinkphp系统进行开发的前后端分离系统. 源码功能介绍 1.情侣功能 2.情侣间留言 3.情侣间互相设置课程表背景 4.自己日.周课程表背景设置 5 ...

简单的课程表小程序（仿超级课程表），加入自定义背景功能

总览：

简单的课程表小程序（仿超级课程表），加入自定义背景功能相关推荐

最新文章

热门文章