抽籤小程序,媽媽再也不用擔心誰洗碗(分配任務)了,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(彈框)組件共用

打賞 衷心的表示感謝

打賞

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章