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

总览：

借鉴了市面上存在的几个课程表软件，因为功能太繁杂，于是自己尝试做了个课程表小程序并开源，目前已经支持添加删除课程表功能，还加入了日课表
总体来说感觉是一个相当简洁的课程表，后端基于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="ndtimebox ev-fr">                <input type="text" class="ndtime padding-lr" disabled="{{true}}" value="{{ndtime}}" />                <text style="font-size:24px;color:#92979d" class="cuicon-triangledownfill padding-lr-sm"></text>            </view>        </dateti郭志玲mepicker>    </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:el class="ev-mainbody">    <view>        <image class="message" mode="scalet地理地图ofill" 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,    tbgdefault,} from "../../utils/api/ur";//获取应用实例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, // 周课表背景        ndtime: "现在", // 情侣课表背景开始时间        displaytimelist: [            {                label: "一天",                checked: fal,                time: 1,            },            {                label: "一周",                checked: true,                time: 7,            },            {                label: "一个月",                checked: fal,                time: 30,            },        ],        starttime: null,    },    onload: function (query) {        let { index_bgimage, table_bgimage } = app.globaldata.urinfo;        this.tdata({            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.datat.id;        console.log(e.currenttarget.datat.id);        let displaytimelist = this.data.displaytimelist.map((v, i) => {            v.checked = id === i;            return v;        });        this.tdata({            displaytimelist,        });    },    /**     * 修改背景     */    modifyimage(e) {        let type = e.currenttarget.datat.type;        wx.chooimage({            count: 1,            sizetype: ["compresd"],            sourcetype: ["album"],            success: (res) => {                // tempfilepath可以作为img标签的src属性显示图片                const tempfilepaths = res.tempfilepaths;                switch (type) {                ca "week":                    schedulebg(tempfilepaths[0], "table").then((v) => {                        app.gett();                        v.code && wxshowtoast(v.msg);                        this.tdata({                            weeklyschedule: tempfilepaths[0],                        });                    });                    break;                ca "daily":                    schedulebg(tempfilepaths[0], "index").then((v) => {                        app.gett();                        v.code && wxshowtoast(v.msg);                        this.tdata({                            dailyschedule: tempfilepaths[0],                        });                    });                    break;                ca "couples":                    couplesbg(tempfilepaths[0]).then((v) => {                        console.log(v);                        app.gett();                        v.code && wxshowtoast(v.msg);                        this.tdata({                            couplesbg:                                    app.globaldata.imgurl + v.data.imgurl,                        });                    });                    break;                default:                    wxshowtoast("设置失败,请重试");                    break;                }            },        });    },    /**     * 恢复默认背景     */    savebutton() {        this.tdata({            dailyschedule: null,            weeklyschedule: null,        });        tbgdefault().then((v) => {            v.code && wxshowtoast(v.msg);            app.gett();        });    },    /**     * 情侣课表开始时间     */    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 ndtime = `${day} ${am} ${time}`;        console.log(ndtime, "timepicker");        this.tdata({            ndtime,            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.urinfo.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.gett().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; }.ndtimebox {  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实现课程表小程序(仿超级课程表)加入自定义背景功能的文章就介绍到这了,更多相关超级课程表内容请搜索www.887551.com以前的文章或继续浏览下面的相关文章希望大家以后多多支持www.887551.com！