实现了多个星球创建并上传至storage

AndIMissU · Dec 7, 2017 · 0738343 · 0738343
1 parent 1a34aa5
commit 0738343
Show file tree

Hide file tree

Showing 3 changed files with 170 additions and 21 deletions.
diff --git a/pages/main/createStars/createStars.js b/pages/main/createStars/createStars.js
@@ -1,4 +1,3 @@
-// pages/main/creatStars/creatypears.js
 const app = getApp()
 Page({
 
@@ -7,13 +6,17 @@ Page({
    */
   data: {
     starname:'',
-    starpic:'',
+    starpic: '../../../images/stars1.png',
     type:0,
-    info:{
-      starname:'',
-      starpic:'',
-      type:''
-    },
+    info:[],
+    activeIndex: 1,
+    display: false,
+    show1:true,
+    show2:false,
+    show3:false,
+    show4:false,
+    show5:false,
+    show6:false,
     color1:'#f5f6f8',
     textcolor1:'#a2a3a7',
     color2:'#f5f6f8',
@@ -35,16 +38,101 @@ Page({
    * 选择图片
    */
   chooseImage: function(event){
-    console.log("hahhhhh");
+    this.setData({
+      display: true
+    });
+  },
+  /**
+   * 选择完成 关闭遮罩层
+   */
+  finishChoose: function(event) {
+    this.setData({
+      display: false
+    });
   },
   /**
    * 输入星球名字
    */
   bindStarNameInput:function(e) {
     this.setData({
-      starname:e.detail.value,
+      starname: e.detail.value,
     });
   },
+  /**
+   * 选择要的背景图片
+   */
+  pic1: function(e) {
+    this.setData({
+      show1:true,
+      show2:false,
+      show3:false,
+      show4:false,
+      show5:false,
+      show6:false,
+      activeIndex: 1,
+      starpic: '../../../images/stars1.png'
+    })
+  },
+  pic2: function(e) {
+    this.setData({
+      show2:true,
+      show1:false,
+      show3:false,
+      show4:false,
+      show5:false,
+      show6:false,
+      activeIndex:2,
+      starpic: '../../../images/stars2.png'
+    })
+  },
+  pic3: function(e) {
+    this.setData({
+      show3:true,
+      show2:false,
+      show1:false,
+      show4:false,
+      show5:false,
+      show6:false,
+      activeIndex:3,
+      starpic: '../../../images/stars3.png'
+    })
+  },
+  pic4: function(e) {
+    this.setData({
+      show4:true,
+      show2:false,
+      show3:false,
+      show1:false,
+      show5:false,
+      show6:false,
+      activeIndex:4,
+      starpic: '../../../images/stars4.png'
+    })
+  },
+  pic5: function(e) {
+    this.setData({
+      show5:true,
+      show2:false,
+      show3:false,
+      show4:false,
+      show1:false,
+      show6:false,
+      activeIndex:5,
+      starpic: '../../../images/stars5.png'
+    })
+  },
+  pic6: function(e) {
+    this.setData({
+      show6:true,
+      show2:false,
+      show3:false,
+      show4:false,
+      show5:false,
+      show1:false,
+      activeIndex:6,
+      starpic: '../../../images/stars6.png'
+    })
+  },
   /**
    * 更改选择的按钮的样式
    */
@@ -236,7 +324,7 @@ Page({
    */
   toMain: function(e) {
 
-    if(this.data.starName === ''){
+    if(this.data.starName === " "){
       wx.showModal({
         content: '请输入星球名字',
         showCancel: false, //不显示取消按钮
@@ -249,22 +337,20 @@ Page({
         confirmText: '确定'
       })
     }else {
-      this.data.info.starname = this.data.starname;
-      this.data.info.starpic = "../../images/stars4.png";
-      this.data.info.type = this.data.type;
-      console.log(this.data.info);
+      var newinfo = [{}];
+      newinfo[0].starName = this.data.starname;
+      newinfo[0].starpic = this.data.starpic;
+      newinfo[0].type = this.data.type;
+      this.data.info = newinfo.concat(this.data.info);
       wx.setStorage({
         key: 'info',
         data: this.data.info,
         success:function(){
           wx.switchTab({
-            url:'../main',
-            complete: function(res) {
-              console.log(res);
-            }
+            url:'../main'
           });
         }
-    })
+    });
   }
 
   },
@@ -286,7 +372,15 @@ Page({
    * 生命周期函数--监听页面显示
    */
   onShow: function () {
-
+    var that = this;
+    wx.getStorage({
+      key: 'info',
+      success:function(res){
+        that.setData({
+          info:res.data
+        });
+      }
+    });
   },
 
   /**

diff --git a/pages/main/createStars/createStars.wxml b/pages/main/createStars/createStars.wxml
@@ -1,10 +1,28 @@
+<view wx:if="{{display}}" class="hiddenBack" bindtap="finishChoose"></view>
+<scroll-view scroll-x wx:if="{{display}}" class="chooseBack">
+    <view class="backitem">
+        <image bindtap="pic1" class="backitem1" src="../../../images/stars1.png" />
+        <image wx:if="{{show1}}" class="{{activeIndex==1?'active':''}}" src="../../../images/this.png"/>
+
+        <image bindtap="pic2" class="backitem1" src="../../../images/stars2.png" />
+        <image wx:if="{{show2}}" class="{{activeIndex==2?'active':''}}" src="../../../images/this.png"/>
+        <image bindtap="pic3" class="backitem1" src="../../../images/stars3.png" />
+        <image wx:if="{{show3}}" class="{{activeIndex==3?'active':''}}" src="../../../images/this.png"/>
+        <image bindtap="pic4" class="backitem1" src="../../../images/stars4.png" />
+        <image wx:if="{{show4}}" class="{{activeIndex==4?'active':''}}" src="../../../images/this.png"/>
+        <image bindtap="pic5" class="backitem1" src="../../../images/stars5.png" />
+        <image wx:if="{{show5}}" class="{{activeIndex==5?'active':''}}" src="../../../images/this.png"/>
+        <image bindtap="pic6" class="backitem1" src="../../../images/stars6.png" />
+        <image wx:if="{{show6}}" class="{{activeIndex==6?'active':''}}" src="../../../images/this.png"/>
+    </view>
+</scroll-view>
 <view class="container">
     <view class="page-title">
         <view class="page-title__title">创建免费星球</view>
         <view class="page-title__finish" bindtap="toMain">完成</view>
     </view>
     <view class="page-hd">
-        <view class="page-hd__star" bindtap="chooseImage"><image src="../../../images/stars4.png"/></view>
+        <view class="page-hd__star" bindtap="chooseImage"><image src="{{starpic}}"/></view>
         <view class="page-hd__text"><input bindinput="bindStarNameInput" type="text" placeholder="星球名字" value="{{starName}}"/></view>
     </view>
     <view class="page-bd">

diff --git a/pages/main/createStars/createStars.wxss b/pages/main/createStars/createStars.wxss
@@ -1,6 +1,8 @@
 .container {
+    position: absolute;
     widows: 100%;
     height: 100vh;
+    z-index: 5;
 }
 .page-title {
     margin: auto;
@@ -88,4 +90,39 @@
     margin-top: 20rpx;
     margin-left: 30rpx;
     color: #a2a3a7;
+}
+.hiddenBack {
+    position: absolute;
+    z-index: 7;
+    background: black;
+    width: 100%;
+    height: 100vh;
+    opacity: .7;
+}
+.chooseBack {
+    position: absolute;
+    margin-top: 1024rpx;
+    z-index: 9;
+    width: 100%;
+    height: 183.3rpx;
+    background: white;
+    white-space: nowrap;
+    display: inline-block;
+}
+.backitem1 {
+    width: 161rpx;
+    height: 161rpx;
+    margin-top: 10rpx;
+    padding-left: 10rpx;
+    position: relative;
+}
+.active {
+    position: absolute;
+    width: 47.2rpx;
+    height: 47.2rpx;
+    margin-top: 70rpx;
+    margin-left: -100rpx;
+    background: white;
+    border-radius: 28.6rpx;
+
 }