抽簽小程序,媽媽再也不用擔心誰洗碗(分配任務)了,so easy


背景

今天誰炒菜,誰洗碗,誰買菜...啊,Boss說用抽簽吧,於是有了下圖

抽簽

這樣存在作弊的問題(記住棍子特征,誰先,誰后抽等等)於是有了這個抽簽小程序(當然小程序我一個人控制,我想不想作弊看心情了)

簡介

掃碼體驗

數據服務,存儲

本項目使用的是微信雲開發,雲數據庫聲明個抽簽chouqianList集合即可(雲開發為開發者提供完整的原生雲端支持和微信服務支持,弱化后端和運維概念,無需搭建服務器,使用平台提供的 API 進行核心業務開發,即可實現快速上線和迭代)

運行前准備

(1)注冊微信小程序,獲取 appid,替換本項目project.config.json里的appid

(2)開通小程序的雲開發

具體實現

首頁

首頁

首頁從上至下有抽簽主題,抽簽選項,發起抽簽,常用抽簽,此頁面主要功能發起抽簽,把抽簽內容存到數據庫里面。

微信審核提示

解決這個問題添加的內容調用這個方法(小程序內容安全api,雲開發可調用)

  isCheckMsg: function (msg) {
        return new Promise(function (n, s) {
            wx.cloud.callFunction({
                name: 'msg',
                data: ({
                    text: msg
                })
            }).then(res => {
                if (res.result.errCode === 87014) {
                    // 沒通過
                    n(false) 
                } else {
                    // ("通過")
                    n(true)
                }
            });
        });
    },

隨機抽簽

 // 遞歸隨機返回抽簽項
    edchouqian() {
        let that = this;
        return new Promise(function (n, s) {
            const db = wx.cloud.database()
            // 查詢當前用戶所有的 chouqianList
            db.collection('chouqianList').where({
                _id: that.data.drawlotsId
            }).get({
                success: res => {
                    that.setData({
                        detail: res.data[0].detail,
                    });
                    let nullDetail = res.data[0].detail.filter(item => item.openid == "");//找出沒有抽簽的選項
                    let arrIndex = Math.floor((Math.random() * nullDetail.length));//從沒有抽簽的選項隨機選擇一個選項
                    let objindex = nullDetail[arrIndex].index;
                    n(objindex)
                },
                fail: err => {
                    wx.showToast({
                        icon: 'none',
                        title: '查詢記錄失敗'
                    })
                    console.error('[數據庫] [查詢記錄] 失敗:', err);
                    s(err);
                }
            })
        });
    },

抽簽頁

抽簽頁

抽簽頁有抽簽功能,顯示抽簽結果,此頁面主要功能,從數據庫查詢是否已經抽簽,已抽簽顯示抽簽結果,未抽簽隨機分配抽簽(或者顯示抽簽次數已用完)。

重復抽簽問題用函數防抖或者節流

抽簽結果頁

抽簽結果頁

抽簽結果頁,顯示所有抽簽人員和結果(結果從數據庫根據抽簽表的id查詢)

至此完畢 源碼地址

結語:

因為發的時間比較短,頁面、功能還需要慢慢完善,發布了的功能也有一些待改進的地方,歡迎同樣志同道合的碼友們多多指教和交流。ヾ(????)?~

前端學習大佬群493671066,美女多多。老司機快上車,來不及解釋了。

作者相關Vue文章

基於Vue2.0實現后台系統權限控制

vue2.0-基於elementui換膚(自定義主題)

前端文檔匯總

VUE2.0增刪改查附編輯添加model(彈框)組件共用

打賞 衷心的表示感謝

打賞


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM