新增创建房间和个人页面

app.js

@@ -25,18 +25,7 @@ App({
     }
   },
   onShow: function(){
-    // wx.navigateTo({
-    //   url: './pages/listman/listman',
-    //   success: function(res){
-        
-    //   },
-    //   fail: function() {
-        
-    //   },
-    //   complete: function() {
-        
-    //   }
-    // })
+    
   },
   globalData:{
     userInfo:null

app.json

@@ -3,7 +3,9 @@
     "pages/index/index",
     "pages/logs/logs",
     "pages/listman/listman",
-    "pages/detailman/detailman"
+    "pages/detailman/detailman",
+    "pages/createroom/createroom",
+    "pages/room/room"
   ],
   "window":{
     "backgroundTextStyle":"light",

pages/createroom/createroom.js

@@ -0,0 +1,191 @@
+//index.js
+//获取应用实例
+var app = getApp()
+Page({
+  data: {
+    dataList:[
+      //村民
+      {
+          "id":"1",
+          "pic": "./images/cunmin.png",
+          "title": "cunmin",
+          "currentNum":0,
+          "addclass":"itemroom-add",
+          "reduceclass":"itemroom-reduce itemroom-no",
+          "max":6,
+          "name": "村民",
+          "intro": "全场最懵的角色"
+      },
+      //女巫
+      {
+          "id":"2",
+          "pic": "./images/nvwu.png",
+          "title": "nvwu",
+          "currentNum":0,
+          "addclass":"itemroom-add",
+          "reduceclass":"itemroom-reduce itemroom-no",
+          "max":1,
+          "name": "女巫",
+          "intro": "可乐的代言人"
+      },
+      //猎人
+      {
+          "id":"3",
+          "pic": "./images/lieren.png",
+          "title": "lieren",
+          "currentNum":0,
+          "addclass":"itemroom-add",
+          "reduceclass":"itemroom-reduce itemroom-no",
+          "max":1,
+          "name": "猎人",
+          "intro": "全场最叼的角色"
+      },
+      //预言家
+      {
+          "id":"4",
+          "pic": "./images/yuyanjia.png",
+          "title": "yuyanjia",
+          "currentNum":0,
+          "addclass":"itemroom-add",
+          "reduceclass":"itemroom-reduce itemroom-no",
+          "max":1,
+          "name": "预言家",
+          "intro": "全场最惨的角色"
+      },
+      //盗贼
+      {
+          "id":"5",
+          "pic": "./images/daozei.png",
+          "title": "daozei",
+          "currentNum":0,
+          "addclass":"itemroom-add",
+          "reduceclass":"itemroom-reduce itemroom-no",
+          "max":1,
+          "name": "盗贼",
+          "intro": "全场最gay的角色"
+      },
+      //丘比特
+      {
+          "id":"6",
+          "pic": "./images/qiubite.png",
+          "title": "qiubite",
+          "currentNum":0,
+          "addclass":"itemroom-add",
+          "reduceclass":"itemroom-reduce itemroom-no",
+          "max":1,
+          "name": "丘比特",
+          "intro": "全场最色情的角色"
+      },
+      //测试
+      {
+          "id":"7",
+          "pic": "./images/qiubite.png",
+          "title": "qiubite",
+          "currentNum":0,
+          "addclass":"itemroom-add",
+          "reduceclass":"itemroom-reduce itemroom-no",
+          "max":2,
+          "name": "测试甲",
+          "intro": "全场最色情的角色"
+      },
+      //测试
+      {
+          "id":"8",
+          "pic": "./images/qiubite.png",
+          "title": "qiubite",
+          "currentNum":0,
+          "addclass":"itemroom-add",
+          "reduceclass":"itemroom-reduce itemroom-no",
+          "max":4,
+          "name": "测试乙",
+          "intro": "全场最色情的角色"
+      },
+      //测试
+      {
+          "id":"9",
+          "pic": "./images/qiubite.png",
+          "title": "qiubite",
+          "currentNum":0,
+          "addclass":"itemroom-add",
+          "reduceclass":"itemroom-reduce itemroom-no",
+          "max":3,
+          "name": "测试丙",
+          "intro": "全场最色情的角色"
+      },
+      
+    ],
+    total:0
+  },
+  addnum: function(e){
+    let currId = e.currentTarget.dataset.id;
+    let max = e.currentTarget.dataset.max;
+    let array = this.data.dataList;
+    let totalNum = this.data.total;
+    for(let i = 0;i<array.length;i++){
+      if(array[i]['id']==currId){
+        if(array[i]['currentNum'] >= (max-1)){
+            array[i]['addclass'] = "itemroom-add itemroom-no";
+            if(array[i]['currentNum'] == (max-1)){
+                console.log(1);
+                totalNum += 1;
+            }
+            array[i]['currentNum'] = max;
+        }else{
+            array[i]['addclass'] = "itemroom-add";
+            array[i]['currentNum'] += 1;
+            totalNum += 1;
+        }
+        array[i]['reduceclass'] = "itemroom-reduce";
+        this.setData({
+          dataList:array,
+          total:totalNum
+        });
+        break;
+      }
+    }
+  },
+  reducenum: function(e){
+    let currId = e.currentTarget.dataset.id;
+    let array = this.data.dataList;
+    let totalNum = this.data.total;
+    for(let i = 0;i<array.length;i++){
+      if(array[i]['id']==currId){
+        
+        if(array[i]['currentNum'] <= 1){
+            array[i]['reduceclass'] = "itemroom-reduce itemroom-no";
+            if(array[i]['currentNum'] == 1){
+                totalNum -= 1;
+            }
+            array[i]['currentNum'] = 0;
+        }else{
+            array[i]['reduceclass'] = "itemroom-reduce";
+            array[i]['currentNum'] -= 1;
+            totalNum -= 1;
+        }
+        array[i]['addclass'] = "itemroom-add";
+        this.setData({
+          dataList:array,
+          total:totalNum
+        });
+        break;
+      }
+    }
+  },
+  onLoad: function () {
+    
+  },
+  goToPlay: function(){
+      wx.navigateTo({
+      url: '/pages/room/room',
+      success: function(res){
+        
+      },
+      fail: function() {
+        
+      },
+      complete: function() {
+        
+      }
+    })
+  }
+})

pages/createroom/createroom.json

@@ -0,0 +1,3 @@
+{
+    "navigationBarTitleText": "创建房间"
+}

pages/createroom/createroom.wxml

@@ -0,0 +1,34 @@
+<template name="itemroom">
+  <view class="itemroom-item">
+    <view class="itemroom-pic">
+      <image src="{{pic}}"></image>
+    </view>
+    <view class="itemroom-text">
+      <text class="name">{{name}}</text>
+    </view>
+    <view class="itemroom-operate">
+      <view class="{{reduceclass}}" bindtap="reducenum" data-id="{{id}}">-</view>
+      <view class="itemroom-num">{{currentNum}}</view>
+      <view class="{{addclass}}" bindtap="addnum" data-max="{{max}}" data-id="{{id}}">+</view>
+    </view>
+  </view>
+</template>
+<view class="itemroom-container">
+  <block wx:for="{{dataList}}" wx:key="item">
+    <template is="itemroom" data="{{...item}}"></template>
+  </block>
+</view>
+<view class="itemroom-bottom">
+  <view class="itemroom-setting">
+  <block wx:for="{{dataList}}" wx:key="item">
+    <text wx:if="{{item.currentNum != 0}}">{{item.name}}{{item.currentNum}}人<text class="douhao">，</text></text>
+  </block>
+  </view>
+  <view class="itemroom-total">
+    <text>当前人数为{{total}}人</text>
+    <text wx:if="{{total == 12}}">(标准局)</text>
+  </view>
+  <view class="itemroom-btn" bindtap="goToPlay">
+    创建房间
+  </view>
+</view>

pages/createroom/createroom.wxss

@@ -0,0 +1,130 @@
+/**创建房间页**/
+
+page {
+  background: #f5f5f5;
+  padding: 10rpx 0;
+}
+
+/**每个人物 box**/
+
+.itemroom-container {
+  display: flex;
+  justify-content: center;
+  align-content: space-between;
+  flex-wrap: wrap;
+  padding-bottom: 300rpx;
+  padding-top: 30rpx;
+}
+
+.itemroom-item {
+  width: 210rpx;
+  height: 284rpx;
+  background: #fff;
+  box-shadow: 0 4rpx 6rpx 0 #e2e2e2;
+  margin: 0rpx auto 30rpx;
+  border-radius: 10rpx;
+  padding: 20rpx 15rpx;
+  box-sizing: border-box;
+}
+
+.itemroom-pic {
+  width: 140rpx;
+  height: 140rpx;
+  margin: 0 auto;
+}
+
+.itemroom-pic image {
+  width: 140rpx;
+  height: 140rpx;
+}
+
+.itemroom-text .name {
+  color: #333;
+  font-size: 30rpx;
+  display: block;
+  text-align: center;
+  margin-top: 15rpx;
+  margin-bottom: 10rpx;
+}
+
+.itemroom-operate {
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  align-content: center;
+}
+
+.itemroom-reduce {
+  width: 36rpx;
+  height: 36rpx;
+  border-radius: 36rpx;
+  line-height: 36rpx;
+  text-align: center;
+  color: #fff;
+  background: #ff5252;
+  font-size: 36rpx;
+  vertical-align: middle;
+  box-sizing: border-box;
+}
+
+.itemroom-add {
+  width: 36rpx;
+  height: 36rpx;
+  border-radius: 36rpx;
+  line-height: 36rpx;
+  text-align: center;
+  color: #fff;
+  background: #256df2;
+  font-size: 36rpx;
+  vertical-align: bottom;
+  box-sizing: border-box;
+}
+.itemroom-no{
+  background: #999999;
+}
+.itemroom-num{
+  color: #333;
+  font-size: 36rpx;
+}
+
+/*创建房间底部*/
+.itemroom-bottom{
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  min-height: 275rpx;
+  background: #fff;
+  box-shadow: 0 -2px 6px 0 rgba(0, 0, 0, 0.1);
+  padding: 30rpx;
+  box-sizing: border-box;
+}
+.itemroom-setting{
+  min-height: 58rpx;
+}
+.itemroom-setting text:last-child .douhao{
+  display: none;
+}
+.itemroom-setting text{
+  font-size: 24rpx;
+  color: #333;
+}
+.itemroom-total{
+  font-size: 30rpx;
+  text-align: center;
+  color: #6882FF;
+  margin-top: 20rpx;
+}
+.itemroom-btn{
+  width: 100%;
+  height: 100rpx;
+  background: #6882ff;
+  color: #fff;
+  line-height: 100rpx;
+  text-align: center;
+  border-radius: 10rpx;
+  font-size: 32rpx;
+  margin-right: auto;
+  margin-left: auto;
+  margin-top: 40rpx;
+}

pages/detailman/detailman.wxss

@@ -1,7 +1,7 @@
 /**人物介绍列表页**/
 
 page {
-  background: #eff3f8;
+  background: #F5F5F5;
   padding:10rpx 0;
 }
 

pages/index/index.wxml

@@ -5,7 +5,7 @@
   <text>狼人杀盒子</text>
 </view>
 <view class="index-btn-wrap">
-  <view class="index-btn" type="default" hover-class="index-button-hover" bindtap="comingsoon">开始面杀</view>
+  <navigator class="index-btn" url="../createroom/createroom" open-type="navigate" hover-class="index-button-hover">开始面杀</navigator>
 </view>
 <view class="index-bottom">
   <view class="index-bottom-item" bindtap="comingsoon">

pages/listman/listman.wxss

@@ -1,7 +1,7 @@
 /**人物介绍列表页**/
 
 page {
-  background: #eff3f8;
+  background: #F5F5F5;
   padding:10rpx 0;
 }
 

pages/room/room.js

@@ -0,0 +1,64 @@
+// pages/room/room.js
+var app = getApp();
+Page({
+  data: {
+    userInfo: null,
+    isHide:true
+  },
+  onLoad: function (options) {
+    // 页面初始化 options为页面跳转所带来的参数
+    var that = this
+    //调用应用实例的方法获取全局数据
+    app.getUserInfo(function (userInfo) {
+      //更新数据
+      that.setData({
+        userInfo: userInfo
+      })
+    })
+  },
+  onReady: function () {
+    // 页面渲染完成
+  },
+  onShow: function () {
+    // 页面显示
+  },
+  onHide: function () {
+    // 页面隐藏
+  },
+  onUnload: function () {
+    // 页面关闭
+  },
+  onShareAppMessage: function () {
+    var i = 123;
+    return {
+      title: '我正在开房，快来一起玩儿吧',
+      path: '/pages/room/room?id=' + i,
+      success: function (res) {
+        // 分享成功
+        console.log(res);
+      },
+      fail: function (res) {
+        // 分享失败
+        console.log(res);
+      }
+    }
+  },
+  sharePage: function () {
+    wx.showToast({
+      title: '请点击右上角按钮进行分享',
+      icon: 'success',
+      mask: true,
+      duration: 3000
+    })
+  },
+  showQrcodeModal: function () {
+    this.setData({
+      isHide: false
+    })
+  },
+  hideQrcodeModal: function () {
+    this.setData({
+      isHide: true
+    })
+  },
+})

pages/room/room.json

@@ -0,0 +1,3 @@
+{
+    "navigationBarTitleText": "个人页面"
+}

pages/room/room.wxml

@@ -0,0 +1,61 @@
+
+<!--pages/room/room.wxml-->
+<view class="room-top">
+  <view class="room-top-pic">
+    <image src="{{userInfo.avatarUrl}}"></image>
+  </view>
+  <view class="room-top-info">
+    <view class="room-top-name">{{userInfo.nickName}}</view>
+    <view class="room-top-card">
+      <text>您的身份是 </text>
+      <text class="card">法官</text>
+    </view>
+  </view>
+  <view class="room-top-operate">
+    <view class="room-top-share" bindtap="sharePage">
+      <image src="./images/share.png"></image>
+    </view>
+    <view class="room-top-qrcode" bindtap="showQrcodeModal">
+      <image src="./images/qrcode.png"></image>
+    </view>
+  </view>
+</view>
+<view class="room-mid">
+  <view class="room-mid-title">
+    游戏流程
+  </view>
+  <view class="room-mid-content">
+    <text>天黑请闭眼。</text>
+    <text>狼人请睁眼。狼人请确认刀的对象。狼人请闭</text>
+    <text>女巫请睁眼。女巫，你有一瓶毒药与一瓶解药，今天晚上他(她)死了，你要救他吗？你有一瓶毒药，你要毒死谁吗？女巫请闭眼。</text>
+    <text>预言家请睁眼。预言家，今天晚上你要验谁的身份？如果这个是好</text>
+  </view>
+</view>
+<view class="room-bottom">
+  <block wx:for="{{[0,1,2,3,4,5,6,7,8,9,10,11]}}">
+    <view class="room-bottom-item">
+      <view class="room-bottom-pic">
+        <image src="{{userInfo.avatarUrl}}"></image>
+      </view>
+      <view class="room-bottom-name">
+        <text class="name">{{userInfo.nickName}}</text>
+      </view>
+      <view class="room-bottom-card">
+        <text class="card">平民</text>
+      </view>
+    </view>
+  </block>
+</view>
+<view class="room-modal" hidden="{{isHide}}">
+  <view class="room-modal-content">
+    <view class="room-modal-title">
+      扫码进入房间
+    </view>
+    <view class="room-modal-pic">
+      <image src="./images/qrcode-demo.png"></image>
+    </view>
+  </view>
+  <view class="room-modal-close" bindtap="hideQrcodeModal">
+    <image src="./images/close.png"></image>
+  </view>
+</view>

pages/room/room.wxss

@@ -0,0 +1,214 @@
+/* pages/room/room.wxss */
+
+page {
+  background: #f5f5f5;
+}
+
+/*个人页面顶部*/
+
+.room-top {
+  background: #fff;
+  width: 100%;
+  height: 180rpx;
+  box-sizing: border-box;
+  padding: 30rpx;
+}
+
+.room-top-pic {
+  float: left;
+}
+
+.room-top-pic image {
+  border-radius: 10rpx;
+  width: 120rpx;
+  height: 120rpx;
+}
+
+.room-top-info {
+  float: left;
+  margin-left: 25rpx;
+}
+
+.room-top-name {
+  font-size: 30rpx;
+  margin-top: 15rpx;
+  color: #333;
+  font-weight: bold;
+}
+
+.room-top-card {
+  margin-top: 30rpx;
+  color: #6882ff;
+  font-size: 30rpx;
+}
+
+.room-top-card text {
+  float: left;
+}
+
+.room-top-card .card {
+  color: #fff;
+  background: #6882ff;
+  border-radius: 5rpx;
+  font-size: 30rpx;
+  width: 92rpx;
+  height: 58rpx;
+  line-height: 58rpx;
+  text-align: center;
+  margin-left: 10rpx;
+  margin-top: -15rpx;
+}
+
+.room-top-operate {
+  float: right;
+  margin-top: 25rpx;
+}
+
+.room-top-operate image {
+  width: 64rpx;
+  height: 64rpx;
+}
+
+.room-top-share {
+  width: 64rpx;
+  height: 64rpx;
+  float: left;
+  margin-right: 35rpx;
+}
+
+.room-top-qrcode {
+  width: 64rpx;
+  height: 64rpx;
+  float: left;
+}
+
+/*个人页面中间说明*/
+
+.room-mid {
+  background: #fff;
+  width: 100%;
+  height: auto;
+  box-sizing: border-box;
+  padding: 30rpx;
+  margin-top: 30rpx;
+}
+
+.room-mid-title {
+  text-align: center;
+  font-size: 34rpx;
+  color: #333;
+  margin-bottom: 40rpx;
+  font-weight: bold;
+}
+
+.room-mid-content text {
+  text-align: justify;
+  font-size: 30rpx;
+  color: #353535;
+  line-height: 45rpx;
+  margin-bottom: 15rpx;
+  display: block;
+}
+
+/*创建房间最下面*/
+
+.room-bottom {
+  display: flex;
+  justify-content: center;
+  align-content: space-between;
+  flex-wrap: wrap;
+  padding-top: 40rpx;
+  background: #fff;
+  margin-top: 30rpx;
+}
+
+.room-bottom-item {
+  width: 90rpx;
+  height: 173rpx;
+  margin: 0rpx 16rpx 30rpx;
+  border-radius: 0rpx;
+  box-sizing: border-box;
+}
+
+.room-bottom-pic {
+  width: 90rpx;
+  height: 90rpx;
+  margin: 0 auto;
+}
+
+.room-bottom-pic image {
+  width: 90rpx;
+  height: 90rpx;
+}
+
+.room-bottom-name {
+  width: 100%;
+  
+}
+
+.room-bottom-name .name {
+  color: #333;
+  font-size: 23rpx;
+  display: block;
+  text-align: center;
+  margin-top: 15rpx;
+  margin-bottom: 10rpx;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+.room-bottom-card .card {
+  color: #6882ff;
+  font-size: 26rpx;
+  display: block;
+  text-align: center;
+  margin-bottom: 20rpx;
+}
+
+.room-modal {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.3);
+  z-index: 1;
+}
+
+.room-modal-content {
+  width: 570rpx;
+  height: 650rpx;
+  border: 1px solid #979797;
+  border-radius: 20rpx;
+  box-sizing: border-box;
+  background: #fff;
+  margin: 120rpx auto 0;
+}
+
+.room-modal-title {
+  font-size: 36rpx;
+  color: #333;
+  font-weight: bold;
+  text-align: center;
+  margin: 60rpx auto;
+}
+
+.room-modal-pic {
+  text-align: center;
+}
+
+.room-modal-pic image {
+  width: 390rpx;
+  height: 390rpx;
+}
+
+.room-modal-close {
+  text-align: center;
+  margin-top: 60rpx;
+}
+
+.room-modal-close image {
+  width: 80rpx;
+  height: 80rpx;
+}