這是其他幾篇的地址:記《高??記諳低場沸〕絳潁?)前面講了用戶注冊和首頁天氣功能,下面講講課程表頁的實現.五.課程表頁這里參考了簡書上面軒轅夜空位作者的案例,以及其參考極樂叔的課程表的思路.同樣制作課程表 ...
這是其他幾篇的地址: 記《高??記諳低場沸〕絳潁?)前面講了用戶注冊和首頁天氣功能,下面講講課程表頁的實現.五.課程表頁先來看看完成后的效果圖
<!-- 星期 -->
<view class="top">
<view class="top-text">
<text>節\日</text>
</view>
<view class="top-text">
<text>一</text>
</view>
<view class="top-text">
<text>二</text>
</view>
<view class="top-text">
<text>三</text>
</view>
<view class="top-text">
<text>四</text>
</view>
<view class="top-text">
<text>五</text>
</view>
<view class="top-text">
<text>六</text>
</view>
<view class="top-text">
<text>日</text>
</view>
</view>
<!-- 課程 -->
<view class="cont">
<view class="cont-left">
<view class="left"> 1 </view>
<view class="left"> 2 </view>
<view class="left"> 3 </view>
<view class="left"> 4 </view>
<view class="left"> 5 </view>
<view class="left"> 6 </view>
<view class="left"> 7 </view>
<view class="left"> 8 </view>
</view>
<view class="cont-right">
</view>
</view>
<view class="bottom">
————<text>讀萬卷書 行萬里路</text>————
</view>
復制代碼 點擊查看wxss代碼 page {
width: 100%;
height: 100%;
position: relative;
}
.top {
padding: 16rpx 0;
border-top: 1px solid #e9e9e9;
border-bottom: 1px dashed #d3d3d3;
display: flex;
justify-content: flex-start;
}
.top-text {
width: 12.5%;
text-align: center;
font-size: 32rpx;
font-weight: 600;
align-items: center;
}
.top .top-text {
border-left: 1px dashed #d3d3d3;
}
.top .top-text:nth-child(1) {
font-size: 24rpx;
border-left: none;
line-height: 46rpx;
}
.cont {
display: flex;
justify-content: start;
}
.cont-left {
display: inline-block;
}
.left {
width: 90rpx;
height: 120rpx;
justify-content: center;
display: flex;
align-items: center;
border-bottom: 1px dashed #d3d3d3;
box-sizing: border-box;
color: #666;
font-size: 28rpx;
font-weight: 600;
}
.cont-right {
width: calc(100% - 90rpx);
}
.bottom {
width: 100%;
text-align: center;
position: absolute;
bottom: 20rpx;
font-size: 24rpx;
color: #ddd;
display: inline-block;
}
.bottom text {
margin-left: 20rpx;
margin-right: 20rpx;
color: #9b9b9b;
}
復制代碼
單個數據結構 {
//"_id": "296065c95da529b2055b57301b5afa75", 云開發導入數據會直接生成_id,這里不用自己編寫
"data_name": "Java高級開發技術(JavaEE)", //課程名
"address": "@康莊行知樓301", //地點
"weekNum": "10-15周", //周數
"pitchNum": "3-4", //節數
"teacher": "趙老師", //任課老師
"_openid": "oQnNa5NJfKqSZntKFLGZWnZuXNbo" //修改者的openid,本來是想做判斷,后面使用了云函數,發現可有可無
}
復制代碼
點擊查看js代碼 data: {
colorArr: ["rgb(229,188,76, 0.8)", "rgb(104,172,246, 0.8)", "rgb(183,135,242, 0.8)", "rgb(149,226,48, 0.8)", "#ff7070",
"#e54d42", "#0081ff", "#7DC67D", "#E17572", "#C35CFF", "#33BCBA", "#FF8533", "#6E6E6E", "#ebd4ef",
"#428BCA", "#39b54a", "#FF674F", "#e03997", "#00CED1", "#9F79EE", "#FFC125", "#32CD32", "#00BFFF", "#8799a3","#FF69B4"
],
// 存儲隨機顏色
randomColorArr: [],
randomColorArr2: [],
i: 25,
random: '',
random2: '',
},
onLoad: function(options) {
this.data.randomColorArr = [] // 重置顏色數組1為空
this.data.randomColorArr2 = [] // 重置顏色數組2為空
const db = wx.cloud.database({
env: '*****' //你的云開發環境名
})
//獲取課程表上午數據
db.collection('數據集合中你的表名').get().then((res) => {
this.kechengbiao = res.data
for (let j = 0; j <= 13; j++) { //for循環判斷課名和地名為空則不加顏色
if (this.kechengbiao[j].data_name == '' && this.kechengbiao[j].address == '') {
this.random = 'none'
this.data.randomColorArr.push(this.random)
} else {
this.random = this.data.colorArr[Math.floor(Math.random() * this.data.i)] //隨機顏色
this.data.randomColorArr.push(this.random)
}
}
this.setData({
loding: true,
kechengbiao: this.kechengbiao,
randomColorArr: this.data.randomColorArr
})
})
//獲取課程表下午
db.collection('數據集合中你的表名').get().then((res) => {
this.kechengbiao2 = res.data
for (let j = 0; j <= 13; j++) { //for循環判斷課名和地名為空則不加顏色
if (this.kechengbiao2[j].data_name == '' && this.kechengbiao2[j].address == '') {
this.random2 = 'none'
this.data.randomColorArr2.push(this.random2)
} else {
this.random2 = this.data.colorArr[Math.floor(Math.random() * this.data.i)] //隨機顏色
this.data.randomColorArr2.push(this.random2)
}
}
this.setData({
kechengbiao2: this.kechengbiao2,
randomColorArr2: this.data.randomColorArr2
})
})
},
復制代碼 <view class="cont-right">
<view>
<view class='appointent-date'> //上午
<view class="appointent-date-div" bindtap="select_date" wx:for="{{kechengbiao}}" wx:key="{{index}}" data-key='{{index}}' style="background-color:{{randomColorArr[index]}}">
<view class="flex-item" >
<text class='data_name'>{{item.data_name}}</text>
<text class='address'>{{item.address}}</text>
</view>
</view>
</view>
<view class='appointent-date'> //下午
<view class="appointent-date-div" bindtap="select_date2" wx:for="{{kechengbiao2}}" wx:key="{{index}}" data-key='{{index}}' style="background-color:{{randomColorArr2[index]}}">
<view class="flex-item">
<text class='data_name'>{{item.data_name}}</text>
<text class='address'>{{item.address}}</text>
</view>
</view>
</view>
</view>
復制代碼 點擊查看wxss代碼 .appointent-date {
display: flex;
justify-content: space-around;
flex-wrap: wrap;
}
.appointent-date-div {
height: 236rpx;
border-radius: 10rpx;
margin-bottom: 6rpx;
color: white;
}
.flex-item {
display: flex;
justify-content: flex-start;
flex-direction: column;
width: 76rpx;
height: 212rpx;
font-size: 24rpx;
padding: 6rpx;
border: 1rpx solid transparent;
text-align: left;
border-radius: 10rpx;
cursor: pointer;
overflow: hidden;
}
.data_name {
display: inline-block;
}
.address {
display: inline-block;
}
復制代碼
查//點擊課程內容彈出詳細框
select_date: function(e) {
this.id = e.currentTarget.dataset.key //獲取當前點擊課程的下標
const db = wx.cloud.database({
env: '****'
})
db.collection('***').get().then(res => {
console.log(res.data[this.id]) //獲取點擊時課程表數據
})
},
復制代碼
刪首先我們在云函數中創建一個新的 云函數 ,修改index.js文件
//修改課程表
const cloud = require('wx-server-sdk')
cloud.init({
env: '***',//你的開發環境
traceUser: true
})
const db = cloud.database();
exports.main = async (event, context) => { // 云函數入口函數
try {
return await db.collection('***').doc(event.id).update({ //需要修改的數據庫
data: {
data_name: event.data_name,
address: event.address,
weekNum: event.weekNum,
pitchNum: event.pitchNum,
teacher: event.teacher
},
})
} catch (e) {
console.error(e)
}
return {
event,
openid: wxContext.OPENID,
appid: wxContext.APPID,
unionid: wxContext.UNIONID,
}
}
復制代碼 然后在js文件中編寫對應的代碼 tapDialogButton(e) { //從課表刪除課程
wx.cloud.callFunction({
name: '***',// 你的云函數名稱
data: {
id: this._id, //將數據進行空值賦值
data_name: "",
address: "",
weekNum: "",
pitchNum: "",
teacher: ""
},
success: res => {
// 關閉當前點擊課程詳情
}
})
},
復制代碼 改,增
wxml <!-- 編輯頁 -->
<view class="edit" hidden="{{ editShow }}">
<van-nav-bar title="編輯課程" right-text="完成" left-arrow bind:click-left="editLeft" bind:click-right="editRight" />
<view class="label className">
<text>課名</text>
<input value="{{ nowClass.data_name }}" bindinput="bindKeyInput1"></input>
</view>
<view class="label">
<text>教室</text>
<input value="{{ nowClass.address }}" bindinput="bindKeyInput2"></input>
</view>
<view class="label">
<text>周數</text>
<input value="{{ nowClass.weekNum }}" bindinput="bindKeyInput3"></input>
</view>
<view class="label">
<text>節數</text>
<input value="{{ nowClass.pitchNum }}" bindinput="bindKeyInput4"></input>
</view>
<view class="label">
<text>老師</text>
<input value="{{ nowClass.teacher }}" bindinput="bindKeyInput5"></input>
</view>
</view>
復制代碼 新建修改課程表數據的云函數 //修改課程表
const cloud = require('wx-server-sdk')
cloud.init({
env: '***',//你的開發環境
traceUser: true
})
const db = cloud.database();
exports.main = async (event, context) => { // 云函數入口函數
try {
return await db.collection('***').doc(event.id).update({ //你要操作的數據庫
data: {
data_name: event.data_name,
address: event.address,
weekNum: event.weekNum,
pitchNum: event.pitchNum,
teacher: event.teacher
},
})
} catch (e) {
console.error(e)
}
return {
event,
openid: wxContext.OPENID,
appid: wxContext.APPID,
unionid: wxContext.UNIONID,
}
}
復制代碼 js // 1.首先獲取輸入框的值,存在data中
bindKeyInput1(e) { //課名
this.editClassName = e.detail.value
},
bindKeyInput2(e) { //教室
this.editAddress = e.detail.value
},
bindKeyInput3(e) { //周數
this.editWeekNum = e.detail.value
},
bindKeyInput4(e) { //節數
this.editPitchNum = e.detail.value
},
bindKeyInput5(e) { //老師
this.editTeacher = e.detail.value
},
editRight() { // 2.編輯完成,點擊提交按鈕時將輸入框的值賦值給對應的字段名
wx.cloud.callFunction({
name: '***',// 修改課程表數據的云函數名稱
data: {
id: this._id,
data_name: this.editClassName,
address: this.editAddress,
weekNum: this.editWeekNum,
pitchNum: this.editPitchNum,
teacher: this.editTeacher
},
success: res => {
},
fail: console.error
})
},
復制代碼 到這里課程表功能就做完了,如果有什么不懂得地方歡迎留言,或者寫的不好的地方,請大家指出一起探討,之后會繼續分享后面的內容。大家也可以提前掃碼查看湖人vs爵士季后赛,歡迎指出不足,謝謝 |