JS實現(xiàn)課程表小程序(仿超級課程表)加入自定義背景功能
更新時間：2021年12月30日 14:48:56 作者：練手Lab
這篇文章主要介紹了JS實現(xiàn)課程表小程序(仿超級課程表)加入自定義背景功能,本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下
總覽：
借鑒了市面上存在的幾個課程表軟件，因為功能太繁雜，于是自己嘗試做了個課程表小程序并開源，目前已經(jīng)支持添加刪除課程表功能，還加入了日課表
總體來說感覺是一個相當(dāng)簡潔的課程表，后端基于fastadmin開發(fā)
gif演示：
在底部會放上gitee的開源地址
最近總感覺目前的界面過于簡潔了，不滿足我這個體面人的需求，故加入自定義課程表背景的的功能。
新增頁面：
效果：
需要在mine.js里面加入一個入口：
{
name: "設(shè)置課表背景",
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設(shè)置背景":"設(shè)置課表背景"}}</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">設(shè)置背景展示時長</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">設(shè)置課表背景</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="">
恢復(fù)默認(rèn)背景
</button>
</view>
js代碼
import {
scheduleBG,
couplesBG,
couplesInfoAdd,
setbgdefault,
} from "../../utils/api/user";
//獲取應(yīng)用實例
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: "現(xiàn)在", // 情侶課表背景開始時間
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標(biāo)簽的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("設(shè)置失敗,請重試");
break;
}
},
});
},
/**
* 恢復(fù)默認(rèn)背景
*/
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)
到此這篇關(guān)于JS實現(xiàn)課程表小程序(仿超級課程表)加入自定義背景功能的文章就介紹到這了,更多相關(guān)超級課程表內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
javascript貪吃蛇游戲設(shè)計與實現(xiàn)
這篇文章主要為大家詳細(xì)介紹了javascript貪吃蛇游戲設(shè)計與實現(xiàn)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-09-09
探索export導(dǎo)出一個字面量會報錯export?default不會報錯
這篇文章主要為大家介紹了export導(dǎo)出一個字面量會報錯而export?default不會報錯的問題探索解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2024-01-01
如何基于小程序?qū)崿F(xiàn)發(fā)送語音消息及轉(zhuǎn)文字功能
最近為小程序增加語音識別轉(zhuǎn)文字的功能,坑路不斷,特此記錄,下面這篇文章主要給大家介紹了關(guān)于如何基于小程序?qū)崿F(xiàn)發(fā)送語音消息及轉(zhuǎn)文字功能的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-11-11
這篇文章主要介紹了JS實現(xiàn)Tab欄切換的兩種方式,一種是面向過程的寫法，一種是面向?qū)ο蟮膶懛?，本文給大家分享詳細(xì)案例代碼，需要的朋友可以參考下2022-08-08
本篇文章主要介紹了webpack配置之后端渲染詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-10-10
這篇文章主要介紹了ActiveX控件如何與Javascript進(jìn)行交互,需要的朋友可以參考下2014-06-06
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)隨機(jī)驗證碼，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-05-05
console.log()?是 JavaScript 中的標(biāo)準(zhǔn)內(nèi)置函數(shù),主要用于在瀏覽器的控制臺（Console）中輸出信息,幫助開發(fā)者進(jìn)行調(diào)試和跟蹤代碼運行狀態(tài),下面給大家介紹微信小程序之console.log()使用,感興趣的朋友跟隨小編一起看看吧2024-04-04
這篇文章主要為大家分享了B/S(Web)實時通訊的解決方案，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-04-04
javascript中setAttribute兼容性用法分析
這篇文章主要介紹了javascript中setAttribute兼容性用法,結(jié)合實例形式分析了javascript使用setAttribute進(jìn)行屬性設(shè)置操作的相關(guān)使用技巧,需要的朋友可以參考下2016-12-12