上一篇我們講解了如何點擊按鈕彈出層，已經(jīng)羅列了會員管理的一些常見功能。本篇我們介紹一下會員開卡的業(yè)務(wù)。
1 創(chuàng)建變量
我們會員開卡的業(yè)務(wù)的話，也是要在本頁面彈出，彈出其實只是讓組件是否顯示和隱藏，我們先定義一個布爾值類型的變量來控制我們開卡頁面的顯示。
打開我們的模型應(yīng)用，在代碼區(qū)點擊+號
點擊新建自定義變量，變量的類型選擇布爾值
布爾值只有兩個取值，要么是false，要么是true，這樣我們就可以通過布爾值來控制頁面是否顯示
2 組件搭建
給頁面添加一個普通容器組件，里邊添加表單容器，數(shù)據(jù)模型選擇會員卡信息
我們給普通容器綁定條件展示，點擊fx綁定我們剛剛定義的變量
因為我們變量的默認(rèn)值是false，所以設(shè)置之后當(dāng)前的組件就不再顯示了
3 點擊開卡顯示頁面
在列表頁的操作列當(dāng)我點擊更多的時候，列出會員可以操作的菜單，點擊開卡的時候要讓頁面顯示出來，這個時候就需要讓變量賦值為true
在代碼區(qū)點擊+號，創(chuàng)建一個JavaScript方法
先復(fù)制一下變量的路徑
然后用賦值語句將變量的值賦值為true
export default function({event, data}) {
$page.dataset.state.showpage = true
}
給開卡按鈕綁定事件，方法選擇我們剛剛定義的方法
目前我們的開卡頁面是在表格的下方，彈出的時候我們希望居中顯示，可以設(shè)置容器的定位，設(shè)置為絕對定位
頁面彈出后還需要給一個關(guān)閉按鈕，在表單容器標(biāo)題那塊增加一個圖標(biāo)組件
修改普通容器的樣式，改為兩端對齊
self {
display: flex;
justify-content: space-between;
flex-direction: row;
}
給圖標(biāo)定義點擊事件，方法選擇變量賦值，給我們的變量賦值為false
修改一下圖標(biāo)的CSS，讓鼠標(biāo)變成一個小手
self {
cursor: pointer;
}
4 表單填充默認(rèn)值
當(dāng)我們打開會員卡頁面的時候，卡號是我們提交到數(shù)據(jù)源中自動生成的，沒必要給用戶顯示，因此我們設(shè)置為隱藏
開卡日期我們顯示當(dāng)天的日期，我們綁定為系統(tǒng)當(dāng)期時間
會員信息需要在點擊開卡的時候就選擇好，先在代碼區(qū)創(chuàng)建一個memberid，類型選擇文本
給開卡按鈕，傳入我們記錄的數(shù)據(jù)標(biāo)識
然后在自定義方法中進(jìn)行賦值
export default function ({ event, data }) {
console.log(data.target.id)
let index = data.target.index
let display = $page.widgets.container2[index].style.display
if (display == "none") {
$page.widgets.container2[index].style = { display: "block" }
$page.dataset.state.memberid = data.target.id
} else {
$page.widgets.container2[index].style = { display: "none" }
$page.dataset.state.memberid = ""
}
}
給所屬會員綁定選中值
當(dāng)我們提交成功后將頁面關(guān)閉，給變量賦值為false即可
最終的效果
文章來源：http://www.zghlxwxcb.cn/news/detail-680598.html
總結(jié)
我們本篇介紹了開卡業(yè)務(wù)的開發(fā)，主要涉及到組件的隱藏與顯示，方法的傳參，以及組件默認(rèn)值的設(shè)置。綜合應(yīng)用這些知識點就可以按照需求開發(fā)出自己想要的功能來。文章來源地址http://www.zghlxwxcb.cn/news/detail-680598.html
到了這里，關(guān)于會員管理系統(tǒng)實戰(zhàn)開發(fā)教程05-會員開卡的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
