├── pages ├── room │ ├── room.json │ ├── images │ │ ├── close.png │ │ ├── share.png │ │ ├── qrcode.png │ │ └── qrcode-demo.png │ ├── room.js │ ├── room.wxml │ └── room.wxss ├── index │ ├── index.json │ ├── images │ │ ├── logo.png │ │ ├── gameinfo.png │ │ ├── goodman.png │ │ ├── maninfo.png │ │ └── wolfman.png │ ├── index.js │ ├── index.wxml │ └── index.wxss ├── logs │ ├── logs.json │ ├── logs.wxss │ ├── logs.wxml │ └── logs.js ├── detailman │ ├── detailman.json │ ├── images │ │ └── cunmin.png │ ├── detailman.js │ ├── detailman.wxml │ └── detailman.wxss ├── listman │ ├── listman.json │ ├── images │ │ ├── nvwu.png │ │ ├── cunmin.png │ │ ├── daozei.png │ │ ├── lieren.png │ │ ├── qiubite.png │ │ └── yuyanjia.png │ ├── listman.wxml │ ├── listman.wxss │ └── listman.js └── createroom │ ├── createroom.json │ ├── images │ ├── nvwu.png │ ├── cunmin.png │ ├── daozei.png │ ├── lieren.png │ ├── qiubite.png │ ├── yuyanjia.png │ ├── createroom-add.png │ └── createroom-reduce.png │ ├── createroom.wxml │ ├── createroom.wxss │ └── createroom.js ├── README.md ├── app.wxss ├── app.json ├── utils └── util.js └── app.js /pages/room/room.json: -------------------------------------------------------------------------------- 1 | { 2 | "navigationBarTitleText": "个人页面" 3 | } -------------------------------------------------------------------------------- /pages/index/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "navigationBarTitleText": "狼人杀" 3 | } -------------------------------------------------------------------------------- /pages/logs/logs.json: -------------------------------------------------------------------------------- 1 | { 2 | "navigationBarTitleText": "查看启动日志" 3 | } -------------------------------------------------------------------------------- /pages/detailman/detailman.json: -------------------------------------------------------------------------------- 1 | { 2 | "navigationBarTitleText": "人物介绍" 3 | } -------------------------------------------------------------------------------- /pages/listman/listman.json: -------------------------------------------------------------------------------- 1 | { 2 | "navigationBarTitleText": "人物介绍" 3 | } -------------------------------------------------------------------------------- /pages/createroom/createroom.json: -------------------------------------------------------------------------------- 1 | { 2 | "navigationBarTitleText": "创建房间" 3 | } -------------------------------------------------------------------------------- /pages/index/images/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zanseven007/wx-wolfkill/HEAD/pages/index/images/logo.png -------------------------------------------------------------------------------- /pages/room/images/close.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zanseven007/wx-wolfkill/HEAD/pages/room/images/close.png -------------------------------------------------------------------------------- /pages/room/images/share.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zanseven007/wx-wolfkill/HEAD/pages/room/images/share.png -------------------------------------------------------------------------------- /pages/listman/images/nvwu.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zanseven007/wx-wolfkill/HEAD/pages/listman/images/nvwu.png -------------------------------------------------------------------------------- /pages/room/images/qrcode.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zanseven007/wx-wolfkill/HEAD/pages/room/images/qrcode.png -------------------------------------------------------------------------------- /pages/createroom/images/nvwu.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zanseven007/wx-wolfkill/HEAD/pages/createroom/images/nvwu.png -------------------------------------------------------------------------------- /pages/index/images/gameinfo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zanseven007/wx-wolfkill/HEAD/pages/index/images/gameinfo.png -------------------------------------------------------------------------------- /pages/index/images/goodman.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zanseven007/wx-wolfkill/HEAD/pages/index/images/goodman.png -------------------------------------------------------------------------------- /pages/index/images/maninfo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zanseven007/wx-wolfkill/HEAD/pages/index/images/maninfo.png -------------------------------------------------------------------------------- /pages/index/images/wolfman.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zanseven007/wx-wolfkill/HEAD/pages/index/images/wolfman.png -------------------------------------------------------------------------------- /pages/listman/images/cunmin.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zanseven007/wx-wolfkill/HEAD/pages/listman/images/cunmin.png -------------------------------------------------------------------------------- /pages/listman/images/daozei.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zanseven007/wx-wolfkill/HEAD/pages/listman/images/daozei.png -------------------------------------------------------------------------------- /pages/listman/images/lieren.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zanseven007/wx-wolfkill/HEAD/pages/listman/images/lieren.png -------------------------------------------------------------------------------- /pages/listman/images/qiubite.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zanseven007/wx-wolfkill/HEAD/pages/listman/images/qiubite.png -------------------------------------------------------------------------------- /pages/createroom/images/cunmin.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zanseven007/wx-wolfkill/HEAD/pages/createroom/images/cunmin.png -------------------------------------------------------------------------------- /pages/createroom/images/daozei.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zanseven007/wx-wolfkill/HEAD/pages/createroom/images/daozei.png -------------------------------------------------------------------------------- /pages/createroom/images/lieren.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zanseven007/wx-wolfkill/HEAD/pages/createroom/images/lieren.png -------------------------------------------------------------------------------- /pages/detailman/images/cunmin.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zanseven007/wx-wolfkill/HEAD/pages/detailman/images/cunmin.png -------------------------------------------------------------------------------- /pages/listman/images/yuyanjia.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zanseven007/wx-wolfkill/HEAD/pages/listman/images/yuyanjia.png -------------------------------------------------------------------------------- /pages/room/images/qrcode-demo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zanseven007/wx-wolfkill/HEAD/pages/room/images/qrcode-demo.png -------------------------------------------------------------------------------- /pages/createroom/images/qiubite.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zanseven007/wx-wolfkill/HEAD/pages/createroom/images/qiubite.png -------------------------------------------------------------------------------- /pages/createroom/images/yuyanjia.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zanseven007/wx-wolfkill/HEAD/pages/createroom/images/yuyanjia.png -------------------------------------------------------------------------------- /pages/createroom/images/createroom-add.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zanseven007/wx-wolfkill/HEAD/pages/createroom/images/createroom-add.png -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # wx-wolfkill 2 | 3 | 微信小程序-狼人杀 4 | 5 | ---- 6 | 7 | 先放一张图片 8 | 9 | ![demo 图片](http://image.zanyuyu.com/wx-wolfkill-demo.jpg) 10 | -------------------------------------------------------------------------------- /pages/createroom/images/createroom-reduce.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zanseven007/wx-wolfkill/HEAD/pages/createroom/images/createroom-reduce.png -------------------------------------------------------------------------------- /pages/logs/logs.wxss: -------------------------------------------------------------------------------- 1 | .log-list { 2 | display: flex; 3 | flex-direction: column; 4 | padding: 40rpx; 5 | } 6 | .log-item { 7 | margin: 10rpx; 8 | } 9 | -------------------------------------------------------------------------------- /pages/logs/logs.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | {{index + 1}}. {{log}} 5 | 6 | 7 | -------------------------------------------------------------------------------- /app.wxss: -------------------------------------------------------------------------------- 1 | /**app.wxss**/ 2 | .container { 3 | height: 100%; 4 | display: flex; 5 | flex-direction: column; 6 | align-items: center; 7 | justify-content: space-between; 8 | padding: 200rpx 0; 9 | box-sizing: border-box; 10 | } 11 | -------------------------------------------------------------------------------- /pages/detailman/detailman.js: -------------------------------------------------------------------------------- 1 | //index.js 2 | //获取应用实例 3 | var app = getApp() 4 | Page({ 5 | data: { 6 | "name": "" 7 | }, 8 | onLoad: function (options) { 9 | this.setData({ 10 | name: options.name 11 | }) 12 | } 13 | }) 14 | -------------------------------------------------------------------------------- /pages/index/index.js: -------------------------------------------------------------------------------- 1 | //index.js 2 | //获取应用实例 3 | var app = getApp() 4 | Page({ 5 | data: { 6 | 7 | }, 8 | onLoad: function () { 9 | 10 | }, 11 | comingsoon: function () { 12 | wx.showToast({ 13 | title: '敬请期待', 14 | icon: 'success', 15 | duration: 1500 16 | }) 17 | } 18 | }) 19 | -------------------------------------------------------------------------------- /pages/logs/logs.js: -------------------------------------------------------------------------------- 1 | //logs.js 2 | var util = require('../../utils/util.js') 3 | Page({ 4 | data: { 5 | logs: [] 6 | }, 7 | onLoad: function () { 8 | this.setData({ 9 | logs: (wx.getStorageSync('logs') || []).map(function (log) { 10 | return util.formatTime(new Date(log)) 11 | }) 12 | }) 13 | } 14 | }) 15 | -------------------------------------------------------------------------------- /app.json: -------------------------------------------------------------------------------- 1 | { 2 | "pages":[ 3 | "pages/index/index", 4 | "pages/logs/logs", 5 | "pages/listman/listman", 6 | "pages/detailman/detailman", 7 | "pages/createroom/createroom", 8 | "pages/room/room" 9 | ], 10 | "window":{ 11 | "backgroundTextStyle":"light", 12 | "navigationBarBackgroundColor": "#2F3E75", 13 | "navigationBarTitleText": "狼人杀", 14 | "navigationBarTextStyle":"#ffffff" 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /pages/detailman/detailman.wxml: -------------------------------------------------------------------------------- 1 | 2 | 12 | {{name}} 13 | 14 | -------------------------------------------------------------------------------- /pages/listman/listman.wxml: -------------------------------------------------------------------------------- 1 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /utils/util.js: -------------------------------------------------------------------------------- 1 | function formatTime(date) { 2 | var year = date.getFullYear() 3 | var month = date.getMonth() + 1 4 | var day = date.getDate() 5 | 6 | var hour = date.getHours() 7 | var minute = date.getMinutes() 8 | var second = date.getSeconds() 9 | 10 | 11 | return [year, month, day].map(formatNumber).join('/') + ' ' + [hour, minute, second].map(formatNumber).join(':') 12 | } 13 | 14 | function formatNumber(n) { 15 | n = n.toString() 16 | return n[1] ? n : '0' + n 17 | } 18 | 19 | module.exports = { 20 | formatTime: formatTime 21 | } 22 | -------------------------------------------------------------------------------- /app.js: -------------------------------------------------------------------------------- 1 | //app.js 2 | App({ 3 | onLaunch: function () { 4 | //调用API从本地缓存中获取数据 5 | var logs = wx.getStorageSync('logs') || [] 6 | logs.unshift(Date.now()) 7 | wx.setStorageSync('logs', logs) 8 | }, 9 | getUserInfo:function(cb){ 10 | var that = this 11 | if(this.globalData.userInfo){ 12 | typeof cb == "function" && cb(this.globalData.userInfo) 13 | }else{ 14 | //调用登录接口 15 | wx.login({ 16 | success: function () { 17 | wx.getUserInfo({ 18 | success: function (res) { 19 | that.globalData.userInfo = res.userInfo 20 | typeof cb == "function" && cb(that.globalData.userInfo) 21 | } 22 | }) 23 | } 24 | }) 25 | } 26 | }, 27 | onShow: function(){ 28 | 29 | }, 30 | globalData:{ 31 | userInfo:null 32 | } 33 | }) -------------------------------------------------------------------------------- /pages/listman/listman.wxss: -------------------------------------------------------------------------------- 1 | /**人物介绍列表页**/ 2 | 3 | page { 4 | background: #F5F5F5; 5 | padding:10rpx 0; 6 | } 7 | 8 | /**每个人物 box**/ 9 | 10 | .itemman-container { 11 | width: 630rpx; 12 | height: 106rpx; 13 | background: #fff; 14 | box-shadow: 0 4rpx 6rpx 0 #e2e2e2; 15 | margin: 30rpx auto; 16 | border-radius: 10rpx; 17 | padding: 30rpx 40rpx; 18 | } 19 | 20 | .itemman-pic { 21 | width: 106rpx; 22 | height: 106rpx; 23 | float: left; 24 | } 25 | 26 | .itemman-pic image { 27 | width: 106rpx; 28 | height: 106rpx; 29 | } 30 | 31 | .itemman-text { 32 | float: left; 33 | margin-left: 30rpx; 34 | } 35 | 36 | .itemman-text .name { 37 | color: #333; 38 | font-size: 34rpx; 39 | display: block; 40 | margin-top: 5rpx; 41 | margin-bottom: 10rpx; 42 | } 43 | 44 | .itemman-text .intro { 45 | color: #b3b3b3; 46 | font-size: 28rpx; 47 | } 48 | -------------------------------------------------------------------------------- /pages/detailman/detailman.wxss: -------------------------------------------------------------------------------- 1 | /**人物介绍列表页**/ 2 | 3 | page { 4 | background: #F5F5F5; 5 | padding:10rpx 0; 6 | } 7 | 8 | /**每个人物 box**/ 9 | 10 | .itemman-container { 11 | width: 630rpx; 12 | height: 106rpx; 13 | background: #fff; 14 | box-shadow: 0 4rpx 6rpx 0 #e2e2e2; 15 | margin: 30rpx auto; 16 | border-radius: 10rpx; 17 | padding: 30rpx 40rpx; 18 | } 19 | 20 | .itemman-pic { 21 | width: 106rpx; 22 | height: 106rpx; 23 | float: left; 24 | } 25 | 26 | .itemman-pic image { 27 | width: 106rpx; 28 | height: 106rpx; 29 | } 30 | 31 | .itemman-text { 32 | float: left; 33 | margin-left: 30rpx; 34 | } 35 | 36 | .itemman-text .name { 37 | color: #333; 38 | font-size: 34rpx; 39 | display: block; 40 | margin-top: 11rpx; 41 | margin-bottom: 18rpx; 42 | } 43 | 44 | .itemman-text .intro { 45 | color: #b3b3b3; 46 | font-size: 28rpx; 47 | } 48 | -------------------------------------------------------------------------------- /pages/index/index.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 狼人杀盒子 6 | 7 | 8 | 开始面杀 9 | 10 | 11 | 12 | 13 | 游戏介绍 14 | 15 | 16 | 17 | 人物介绍 18 | 19 | 20 | 21 | 好人玩法 22 | 23 | 24 | 25 | 狼人玩法 26 | 27 | -------------------------------------------------------------------------------- /pages/createroom/createroom.wxml: -------------------------------------------------------------------------------- 1 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | {{item.name}}{{item.currentNum}}人， 25 | 26 | 27 | 28 | 当前人数为{{total}}人 29 | (标准局) 30 | 31 | 32 | 创建房间 33 | 34 | -------------------------------------------------------------------------------- /pages/listman/listman.js: -------------------------------------------------------------------------------- 1 | //index.js 2 | //获取应用实例 3 | var app = getApp() 4 | Page({ 5 | data: { 6 | dataList:[ 7 | //村民 8 | { 9 | "pic": "./images/cunmin.png", 10 | "title": "cunmin", 11 | "name": "村民", 12 | "intro": "全场最懵的角色" 13 | }, 14 | //女巫 15 | { 16 | "pic": "./images/nvwu.png", 17 | "title": "nvwu", 18 | "name": "女巫", 19 | "intro": "可乐的代言人" 20 | }, 21 | //猎人 22 | { 23 | "pic": "./images/lieren.png", 24 | "title": "lieren", 25 | "name": "猎人", 26 | "intro": "全场最叼的角色" 27 | }, 28 | //预言家 29 | { 30 | "pic": "./images/yuyanjia.png", 31 | "title": "yuyanjia", 32 | "name": "预言家", 33 | "intro": "全场最惨的角色" 34 | }, 35 | //盗贼 36 | { 37 | "pic": "./images/daozei.png", 38 | "title": "daozei", 39 | "name": "盗贼", 40 | "intro": "全场最gay的角色" 41 | }, 42 | //丘比特 43 | { 44 | "pic": "./images/qiubite.png", 45 | "title": "qiubite", 46 | "name": "丘比特", 47 | "intro": "全场最色情的角色" 48 | }, 49 | 50 | ] 51 | }, 52 | onLoad: function () { 53 | 54 | } 55 | }) 56 | -------------------------------------------------------------------------------- /pages/room/room.js: -------------------------------------------------------------------------------- 1 | // pages/room/room.js 2 | var app = getApp(); 3 | Page({ 4 | data: { 5 | userInfo: null, 6 | isHide:true 7 | }, 8 | onLoad: function (options) { 9 | // 页面初始化 options为页面跳转所带来的参数 10 | var that = this 11 | //调用应用实例的方法获取全局数据 12 | app.getUserInfo(function (userInfo) { 13 | //更新数据 14 | that.setData({ 15 | userInfo: userInfo 16 | }) 17 | }) 18 | }, 19 | onReady: function () { 20 | // 页面渲染完成 21 | }, 22 | onShow: function () { 23 | // 页面显示 24 | }, 25 | onHide: function () { 26 | // 页面隐藏 27 | }, 28 | onUnload: function () { 29 | // 页面关闭 30 | }, 31 | onShareAppMessage: function () { 32 | var i = 123; 33 | return { 34 | title: '我正在开房，快来一起玩儿吧', 35 | path: '/pages/room/room?id=' + i, 36 | success: function (res) { 37 | // 分享成功 38 | console.log(res); 39 | }, 40 | fail: function (res) { 41 | // 分享失败 42 | console.log(res); 43 | } 44 | } 45 | }, 46 | sharePage: function () { 47 | wx.showToast({ 48 | title: '请点击右上角按钮进行分享', 49 | icon: 'success', 50 | mask: true, 51 | duration: 3000 52 | }) 53 | }, 54 | showQrcodeModal: function () { 55 | this.setData({ 56 | isHide: false 57 | }) 58 | }, 59 | hideQrcodeModal: function () { 60 | this.setData({ 61 | isHide: true 62 | }) 63 | }, 64 | }) -------------------------------------------------------------------------------- /pages/index/index.wxss: -------------------------------------------------------------------------------- 1 | /**首页样式**/ 2 | 3 | page { 4 | height: 100%; 5 | background: #eff3f8; 6 | } 7 | 8 | /** 顶部样式 **/ 9 | 10 | .index-top { 11 | display: flex; 12 | flex-direction: column; 13 | align-items: center; 14 | background: #2f3e75; 15 | height: 36%; 16 | justify-content: center; 17 | } 18 | 19 | .index-top image { 20 | width: 180rpx; 21 | height: 180rpx; 22 | margin-bottom: 20rpx; 23 | margin-top: -20rpx; 24 | } 25 | 26 | .index-top text { 27 | color: #fff; 28 | font-size: 32rpx; 29 | } 30 | 31 | /**开始面杀样式**/ 32 | 33 | .index-btn { 34 | width: 590rpx; 35 | height: 120rpx; 36 | background: #6882ff; 37 | color: #fff; 38 | line-height: 120rpx; 39 | text-align: center; 40 | margin-top: -60rpx; 41 | border-radius: 60rpx; 42 | font-size: 36rpx; 43 | margin-right: auto; 44 | margin-left: auto; 45 | } 46 | 47 | .index-button-hover { 48 | background: #5874fa; 49 | } 50 | 51 | /**底部样式**/ 52 | 53 | .index-bottom { 54 | display: flex; 55 | flex-wrap: wrap; 56 | height: 550rpx; 57 | justify-content: center; 58 | align-content: space-between; 59 | margin-top:70rpx; 60 | } 61 | 62 | .index-bottom-item { 63 | width: 330rpx; 64 | height: 250rpx; 65 | background: #fff; 66 | border-radius: 10rpx; 67 | display: flex; 68 | flex-direction: column; 69 | align-items: center; 70 | justify-content: center; 71 | margin: 0 20rpx; 72 | } 73 | 74 | .index-bottom-item image { 75 | width: 129rpx; 76 | height: 122rpx; 77 | margin-bottom: 20rpx; 78 | } 79 | 80 | .index-bottom-item text { 81 | font-size: 30rpx; 82 | color: #666; 83 | } 84 | -------------------------------------------------------------------------------- /pages/room/room.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | {{userInfo.nickName}} 9 | 10 | 您的身份是 11 | 法官 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 游戏流程 26 | 27 | 28 | 天黑请闭眼。 29 | 狼人请睁眼。狼人请确认刀的对象。狼人请闭 30 | 女巫请睁眼。女巫，你有一瓶毒药与一瓶解药，今天晚上他(她)死了，你要救他吗？你有一瓶毒药，你要毒死谁吗？女巫请闭眼。 31 | 预言家请睁眼。预言家，今天晚上你要验谁的身份？如果这个是好 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | {{userInfo.nickName}} 42 | 43 | 44 | 平民 45 | 46 | 47 | 48 | 49 | -------------------------------------------------------------------------------- /pages/createroom/createroom.wxss: -------------------------------------------------------------------------------- 1 | /**创建房间页**/ 2 | 3 | page { 4 | background: #f5f5f5; 5 | padding: 10rpx 0; 6 | } 7 | 8 | /**每个人物 box**/ 9 | 10 | .itemroom-container { 11 | display: flex; 12 | justify-content: center; 13 | align-content: space-between; 14 | flex-wrap: wrap; 15 | padding-bottom: 300rpx; 16 | padding-top: 30rpx; 17 | } 18 | 19 | .itemroom-item { 20 | width: 210rpx; 21 | height: 284rpx; 22 | background: #fff; 23 | box-shadow: 0 4rpx 6rpx 0 #e2e2e2; 24 | margin: 0rpx auto 30rpx; 25 | border-radius: 10rpx; 26 | padding: 20rpx 15rpx; 27 | box-sizing: border-box; 28 | } 29 | 30 | .itemroom-pic { 31 | width: 140rpx; 32 | height: 140rpx; 33 | margin: 0 auto; 34 | } 35 | 36 | .itemroom-pic image { 37 | width: 140rpx; 38 | height: 140rpx; 39 | } 40 | 41 | .itemroom-text .name { 42 | color: #333; 43 | font-size: 30rpx; 44 | display: block; 45 | text-align: center; 46 | margin-top: 15rpx; 47 | margin-bottom: 10rpx; 48 | } 49 | 50 | .itemroom-operate { 51 | display: flex; 52 | justify-content: space-around; 53 | align-items: center; 54 | align-content: center; 55 | } 56 | 57 | .itemroom-reduce { 58 | width: 36rpx; 59 | height: 36rpx; 60 | border-radius: 36rpx; 61 | line-height: 36rpx; 62 | text-align: center; 63 | color: #fff; 64 | background: #ff5252; 65 | font-size: 36rpx; 66 | vertical-align: middle; 67 | box-sizing: border-box; 68 | } 69 | 70 | .itemroom-add { 71 | width: 36rpx; 72 | height: 36rpx; 73 | border-radius: 36rpx; 74 | line-height: 36rpx; 75 | text-align: center; 76 | color: #fff; 77 | background: #256df2; 78 | font-size: 36rpx; 79 | vertical-align: bottom; 80 | box-sizing: border-box; 81 | } 82 | .itemroom-no{ 83 | background: #999999; 84 | } 85 | .itemroom-num{ 86 | color: #333; 87 | font-size: 36rpx; 88 | } 89 | 90 | /*创建房间底部*/ 91 | .itemroom-bottom{ 92 | position: fixed; 93 | bottom: 0; 94 | left: 0; 95 | width: 100%; 96 | min-height: 275rpx; 97 | background: #fff; 98 | box-shadow: 0 -2px 6px 0 rgba(0, 0, 0, 0.1); 99 | padding: 30rpx; 100 | box-sizing: border-box; 101 | } 102 | .itemroom-setting{ 103 | min-height: 58rpx; 104 | } 105 | .itemroom-setting text:last-child .douhao{ 106 | display: none; 107 | } 108 | .itemroom-setting text{ 109 | font-size: 24rpx; 110 | color: #333; 111 | } 112 | .itemroom-total{ 113 | font-size: 30rpx; 114 | text-align: center; 115 | color: #6882FF; 116 | margin-top: 20rpx; 117 | } 118 | .itemroom-btn{ 119 | width: 100%; 120 | height: 100rpx; 121 | background: #6882ff; 122 | color: #fff; 123 | line-height: 100rpx; 124 | text-align: center; 125 | border-radius: 10rpx; 126 | font-size: 32rpx; 127 | margin-right: auto; 128 | margin-left: auto; 129 | margin-top: 40rpx; 130 | } -------------------------------------------------------------------------------- /pages/room/room.wxss: -------------------------------------------------------------------------------- 1 | /* pages/room/room.wxss */ 2 | 3 | page { 4 | background: #f5f5f5; 5 | } 6 | 7 | /*个人页面顶部*/ 8 | 9 | .room-top { 10 | background: #fff; 11 | width: 100%; 12 | height: 180rpx; 13 | box-sizing: border-box; 14 | padding: 30rpx; 15 | } 16 | 17 | .room-top-pic { 18 | float: left; 19 | } 20 | 21 | .room-top-pic image { 22 | border-radius: 10rpx; 23 | width: 120rpx; 24 | height: 120rpx; 25 | } 26 | 27 | .room-top-info { 28 | float: left; 29 | margin-left: 25rpx; 30 | } 31 | 32 | .room-top-name { 33 | font-size: 30rpx; 34 | margin-top: 15rpx; 35 | color: #333; 36 | font-weight: bold; 37 | } 38 | 39 | .room-top-card { 40 | margin-top: 30rpx; 41 | color: #6882ff; 42 | font-size: 30rpx; 43 | } 44 | 45 | .room-top-card text { 46 | float: left; 47 | } 48 | 49 | .room-top-card .card { 50 | color: #fff; 51 | background: #6882ff; 52 | border-radius: 5rpx; 53 | font-size: 30rpx; 54 | width: 92rpx; 55 | height: 58rpx; 56 | line-height: 58rpx; 57 | text-align: center; 58 | margin-left: 10rpx; 59 | margin-top: -15rpx; 60 | } 61 | 62 | .room-top-operate { 63 | float: right; 64 | margin-top: 25rpx; 65 | } 66 | 67 | .room-top-operate image { 68 | width: 64rpx; 69 | height: 64rpx; 70 | } 71 | 72 | .room-top-share { 73 | width: 64rpx; 74 | height: 64rpx; 75 | float: left; 76 | margin-right: 35rpx; 77 | } 78 | 79 | .room-top-qrcode { 80 | width: 64rpx; 81 | height: 64rpx; 82 | float: left; 83 | } 84 | 85 | /*个人页面中间说明*/ 86 | 87 | .room-mid { 88 | background: #fff; 89 | width: 100%; 90 | height: auto; 91 | box-sizing: border-box; 92 | padding: 30rpx; 93 | margin-top: 30rpx; 94 | } 95 | 96 | .room-mid-title { 97 | text-align: center; 98 | font-size: 34rpx; 99 | color: #333; 100 | margin-bottom: 40rpx; 101 | font-weight: bold; 102 | } 103 | 104 | .room-mid-content text { 105 | text-align: justify; 106 | font-size: 30rpx; 107 | color: #353535; 108 | line-height: 45rpx; 109 | margin-bottom: 15rpx; 110 | display: block; 111 | } 112 | 113 | /*创建房间最下面*/ 114 | 115 | .room-bottom { 116 | display: flex; 117 | justify-content: center; 118 | align-content: space-between; 119 | flex-wrap: wrap; 120 | padding-top: 40rpx; 121 | background: #fff; 122 | margin-top: 30rpx; 123 | } 124 | 125 | .room-bottom-item { 126 | width: 90rpx; 127 | height: 173rpx; 128 | margin: 0rpx 16rpx 30rpx; 129 | border-radius: 0rpx; 130 | box-sizing: border-box; 131 | } 132 | 133 | .room-bottom-pic { 134 | width: 90rpx; 135 | height: 90rpx; 136 | margin: 0 auto; 137 | } 138 | 139 | .room-bottom-pic image { 140 | width: 90rpx; 141 | height: 90rpx; 142 | } 143 | 144 | .room-bottom-name { 145 | width: 100%; 146 | 147 | } 148 | 149 | .room-bottom-name .name { 150 | color: #333; 151 | font-size: 23rpx; 152 | display: block; 153 | text-align: center; 154 | margin-top: 15rpx; 155 | margin-bottom: 10rpx; 156 | text-overflow: ellipsis; 157 | white-space: nowrap; 158 | overflow: hidden; 159 | } 160 | 161 | .room-bottom-card .card { 162 | color: #6882ff; 163 | font-size: 26rpx; 164 | display: block; 165 | text-align: center; 166 | margin-bottom: 20rpx; 167 | } 168 | 169 | .room-modal { 170 | position: fixed; 171 | top: 0; 172 | left: 0; 173 | right: 0; 174 | bottom: 0; 175 | background: rgba(0, 0, 0, 0.3); 176 | z-index: 1; 177 | } 178 | 179 | .room-modal-content { 180 | width: 570rpx; 181 | height: 650rpx; 182 | border: 1px solid #979797; 183 | border-radius: 20rpx; 184 | box-sizing: border-box; 185 | background: #fff; 186 | margin: 120rpx auto 0; 187 | } 188 | 189 | .room-modal-title { 190 | font-size: 36rpx; 191 | color: #333; 192 | font-weight: bold; 193 | text-align: center; 194 | margin: 60rpx auto; 195 | } 196 | 197 | .room-modal-pic { 198 | text-align: center; 199 | } 200 | 201 | .room-modal-pic image { 202 | width: 390rpx; 203 | height: 390rpx; 204 | } 205 | 206 | .room-modal-close { 207 | text-align: center; 208 | margin-top: 60rpx; 209 | } 210 | 211 | .room-modal-close image { 212 | width: 80rpx; 213 | height: 80rpx; 214 | } 215 | -------------------------------------------------------------------------------- /pages/createroom/createroom.js: -------------------------------------------------------------------------------- 1 | //index.js 2 | //获取应用实例 3 | var app = getApp() 4 | Page({ 5 | data: { 6 | dataList:[ 7 | //村民 8 | { 9 | "id":"1", 10 | "pic": "./images/cunmin.png", 11 | "title": "cunmin", 12 | "currentNum":0, 13 | "addclass":"itemroom-add", 14 | "reduceclass":"itemroom-reduce itemroom-no", 15 | "max":6, 16 | "name": "村民", 17 | "intro": "全场最懵的角色" 18 | }, 19 | //女巫 20 | { 21 | "id":"2", 22 | "pic": "./images/nvwu.png", 23 | "title": "nvwu", 24 | "currentNum":0, 25 | "addclass":"itemroom-add", 26 | "reduceclass":"itemroom-reduce itemroom-no", 27 | "max":1, 28 | "name": "女巫", 29 | "intro": "可乐的代言人" 30 | }, 31 | //猎人 32 | { 33 | "id":"3", 34 | "pic": "./images/lieren.png", 35 | "title": "lieren", 36 | "currentNum":0, 37 | "addclass":"itemroom-add", 38 | "reduceclass":"itemroom-reduce itemroom-no", 39 | "max":1, 40 | "name": "猎人", 41 | "intro": "全场最叼的角色" 42 | }, 43 | //预言家 44 | { 45 | "id":"4", 46 | "pic": "./images/yuyanjia.png", 47 | "title": "yuyanjia", 48 | "currentNum":0, 49 | "addclass":"itemroom-add", 50 | "reduceclass":"itemroom-reduce itemroom-no", 51 | "max":1, 52 | "name": "预言家", 53 | "intro": "全场最惨的角色" 54 | }, 55 | //盗贼 56 | { 57 | "id":"5", 58 | "pic": "./images/daozei.png", 59 | "title": "daozei", 60 | "currentNum":0, 61 | "addclass":"itemroom-add", 62 | "reduceclass":"itemroom-reduce itemroom-no", 63 | "max":1, 64 | "name": "盗贼", 65 | "intro": "全场最gay的角色" 66 | }, 67 | //丘比特 68 | { 69 | "id":"6", 70 | "pic": "./images/qiubite.png", 71 | "title": "qiubite", 72 | "currentNum":0, 73 | "addclass":"itemroom-add", 74 | "reduceclass":"itemroom-reduce itemroom-no", 75 | "max":1, 76 | "name": "丘比特", 77 | "intro": "全场最色情的角色" 78 | }, 79 | //测试 80 | { 81 | "id":"7", 82 | "pic": "./images/qiubite.png", 83 | "title": "qiubite", 84 | "currentNum":0, 85 | "addclass":"itemroom-add", 86 | "reduceclass":"itemroom-reduce itemroom-no", 87 | "max":2, 88 | "name": "测试甲", 89 | "intro": "全场最色情的角色" 90 | }, 91 | //测试 92 | { 93 | "id":"8", 94 | "pic": "./images/qiubite.png", 95 | "title": "qiubite", 96 | "currentNum":0, 97 | "addclass":"itemroom-add", 98 | "reduceclass":"itemroom-reduce itemroom-no", 99 | "max":4, 100 | "name": "测试乙", 101 | "intro": "全场最色情的角色" 102 | }, 103 | //测试 104 | { 105 | "id":"9", 106 | "pic": "./images/qiubite.png", 107 | "title": "qiubite", 108 | "currentNum":0, 109 | "addclass":"itemroom-add", 110 | "reduceclass":"itemroom-reduce itemroom-no", 111 | "max":3, 112 | "name": "测试丙", 113 | "intro": "全场最色情的角色" 114 | }, 115 | 116 | ], 117 | total:0 118 | }, 119 | addnum: function(e){ 120 | let currId = e.currentTarget.dataset.id; 121 | let max = e.currentTarget.dataset.max; 122 | let array = this.data.dataList; 123 | let totalNum = this.data.total; 124 | for(let i = 0;i= (max-1)){ 127 | array[i]['addclass'] = "itemroom-add itemroom-no"; 128 | if(array[i]['currentNum'] == (max-1)){ 129 | console.log(1); 130 | totalNum += 1; 131 | } 132 | array[i]['currentNum'] = max; 133 | }else{ 134 | array[i]['addclass'] = "itemroom-add"; 135 | array[i]['currentNum'] += 1; 136 | totalNum += 1; 137 | } 138 | array[i]['reduceclass'] = "itemroom-reduce"; 139 | this.setData({ 140 | dataList:array, 141 | total:totalNum 142 | }); 143 | break; 144 | } 145 | } 146 | }, 147 | reducenum: function(e){ 148 | let currId = e.currentTarget.dataset.id; 149 | let array = this.data.dataList; 150 | let totalNum = this.data.total; 151 | for(let i = 0;i