新增每日任务页面

496_dongfengqichen/app.json

@@ -1,5 +1,6 @@
 {
   "pages": [
+    "pages/everyday/everyday",
     "pages/star/star",
     "pages/index/index",
     "pages/logs/logs"

496_dongfengqichen/app.wxss

@@ -8,3 +8,11 @@
   padding: 200rpx 0;
   box-sizing: border-box;
 } 
+image{
+  display: block;
+}
+.showView{
+  position: relative;
+  height: calc(100vh - 153rpx);
+  background-color: #ffffff
+}

496_dongfengqichen/pages/everyday/everyday.js

@@ -0,0 +1,93 @@
+// pages/everyday/everyday.js
+const app = getApp()
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+    imgUrl: app.globalData.urlStatic,//图片路径
+    maskShow: true,
+    taskShow: true,
+    taskName:'集齐启辰星【大灯】碎片',
+    taskImgUrl:'https://www.jiyou-tech.com/2020/496_qichen/static/star/everyday/taskImg1.png',
+    isSign:true,
+    isShare:false,
+  },
+  /**
+   * 关闭任务窗
+   */
+  hiddenTask:function(){
+    this.setData({
+      maskShow: false,
+      taskShow: false
+    })
+  },
+  /**
+   * 签到
+   */
+  signIn(){
+    this.setData({
+      taskName: '集齐启辰星【大灯】碎片1/4',
+      taskImgUrl: 'https://www.jiyou-tech.com/2020/496_qichen/static/star/everyday/taskImg2.png',
+      isSign: false,
+      isShare: true
+    })
+  },
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad: function (options) {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload: function () {
+
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh: function () {
+
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom: function () {
+
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage: function () {
+
+  }
+})

496_dongfengqichen/pages/everyday/everyday.json

@@ -0,0 +1,3 @@
+{
+  "usingComponents": {}
+}

496_dongfengqichen/pages/everyday/everyday.wxml

@@ -0,0 +1,24 @@
+<!--pages/everyday/everyday.wxml-->
+<view id="everyday" class="showView">
+  <image class="showImg" src="{{imgUrl+'/star/everyday/show.jpg'}}"></image>
+  <view class="ruleBtn">游戏规则</view>
+  <view class="title">集碎片，攒红包</view>
+  <view class="menuBox">
+    <image class="menu" src="{{imgUrl+'/star/everyday/menu.png'}}"></image>
+    <view class="leftTitle">操控</view>
+    <view class="centerTitle">外观模块</view>
+    <view class="rightTitle">内饰</view>
+  </view>
+  <view class="mask" wx:if="{{maskShow}}">
+    <view class="taskBox" wx:if="{{taskShow}}">
+      <text class="closeBtn" style="right:-35rpx;top:-50rpx;" bindtap="hiddenTask"></text>
+      <view class="title">今日任务</view>
+      <view class="contentBox">
+        <view class="name">{{taskName}}</view>
+        <image class="taskImg" src="{{taskImgUrl}}"></image>
+        <view class="btn" wx:if="{{isSign}}" bindtap="signIn">签到解锁</view>
+        <view class="btn" wx:if="{{isShare}}">分享再获取一张碎片</view>
+      </view>
+    </view>
+  </view>
+</view>

496_dongfengqichen/pages/everyday/everyday.wxss

@@ -0,0 +1,153 @@
+/* pages/everyday/everyday.wxss */
+
+.showImg {
+  position: relative;
+  width: 750rpx;
+  height: 616rpx;
+}
+
+.ruleBtn {
+  right: 0;
+  top: 180rpx;
+  position: absolute;
+  width: 153rpx;
+  height: 46rpx;
+  line-height: 46rpx;
+  font-size: 24rpx;
+  color: #fff;
+  background-color: rgba(35, 24, 21, 0.63);
+  border-top-left-radius: 20rpx;
+  border-bottom-left-radius: 20rpx;
+  padding-left: 20rpx;
+  box-sizing: border-box;
+}
+
+.title {
+  height: 110rpx;
+  line-height: 110rpx;
+  width: 100%;
+  text-align: center;
+  font-size: 36rpx;
+  font-weight: bold;
+}
+
+.menuBox {
+  position: relative;
+  width: 535rpx;
+  height: 58rpx;
+  margin: 0 auto;
+}
+
+.menu {
+  width: 100%;
+  height: 100%;
+}
+
+.menuBox>view {
+  position: absolute;
+  bottom: 0;
+  font-size: 16rpx;
+  text-align: center;
+}
+
+.menuBox>.leftTitle {
+  left: 38rpx;
+  width: 54rpx;
+  height: 38rpx;
+  line-height: 38rpx;
+}
+
+.menuBox>.centerTitle {
+  left: 95rpx;
+  width: 345rpx;
+  height: 56rpx;
+  line-height: 56rpx;
+  color: #fff;
+  font-size: 29rpx;
+}
+
+.menuBox>.rightTitle {
+  right: 38rpx;
+  width: 54rpx;
+  height: 38rpx;
+  line-height: 38rpx;
+}
+
+.mask {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: rgba(0, 0, 0, 0.5);
+}
+.taskBox{
+  position: relative;
+  width: 567rpx;
+  height: 649rpx;
+  border-radius: 20rpx;
+}
+.taskBox>.title{
+  height: 77rpx;
+  line-height: 77rpx;
+  color: #ffffff;
+  border-top-left-radius: 20rpx;
+  border-top-right-radius: 20rpx;
+  background-color: #345486;
+}
+.taskBox>.contentBox{
+  position: relative;
+  width: 100%;
+  height: calc(100% - 77rpx);
+  background-color: #ffffff;
+  border-bottom-left-radius: 20rpx;
+  border-bottom-right-radius: 20rpx;
+}
+.taskBox>.contentBox>.name{
+  width: 100%;
+  height: 107rpx;
+  line-height: 107rpx;
+  font-size: 33rpx;
+  text-align: center;
+  padding-top: 38rpx;
+  font-weight: bold;
+}
+.taskBox>.contentBox>.taskImg{
+  width: 488rpx;
+  height: 268rpx;
+  margin: 0 auto;
+  border-radius: 19rpx;
+}
+.taskBox>.contentBox>.btn{
+  width: 347rpx;
+  height: 62rpx;
+  line-height: 62rpx;
+  text-align: center;
+  color: #ffffff;
+  font-size: 28rpx;
+  border-radius: 10rpx;
+  margin: 42rpx auto 0 auto;
+  background-color: #345486;
+}
+.closeBtn {
+  background: none;
+  border: 2rpx solid #fff;
+  color: #fff;
+  border-radius: 50%;
+  text-align: center;
+  height: 40rpx;
+  line-height: 40rpx;
+  width: 40rpx;
+  font-size: 30rpx;
+  padding: 2rpx;
+  position: absolute;
+}
+
+/* use cross as close button */
+
+.closeBtn::before {
+  content: "\2716";
+}

496_dongfengqichen/pages/star/star.js

@@ -7,12 +7,34 @@ Page({
    */
   data: {
     imgUrl: app.globalData.urlStatic,//图片路径
+    maskShow: false,
+    ruleShow:false,
   },
   /**
    * 显示规则页
    */
   showRule:function(){
-    console.log('显示规则')
+    this.setData({
+      maskShow:true,
+      ruleShow:true
+    })
+  },
+  /**
+   * 关闭规则页
+   */
+  hiddenRule:function(){
+    this.setData({
+      maskShow: false,
+      ruleShow: false
+    })
+  },
+  /**
+   * 每日任务
+   */
+  everyDay:function(){
+    wx.navigateTo({
+      url:'../everyday/everyday'
+    })
   },
 
   /**

496_dongfengqichen/pages/star/star.wxml

@@ -8,7 +8,13 @@
     <view class="propagandaBox"></view>
     <view class="btnBox">
       <view class="btn">星探任务</view>
-      <view class="btn">每日任务</view>
+      <view class="btn" bindtap="everyDay">每日任务</view>
+    </view>
+  </view>
+  <view class="mask" wx:if="{{maskShow}}">
+    <view class="ruleContent">
+      <image class="rule" src="{{imgUrl+'/star/rule.png'}}"></image>
+      <text class="closeBtn" style="right:-40rpx;top:-45rpx;" bindtap="hiddenRule"></text>
     </view>
   </view>
 </view>

496_dongfengqichen/pages/star/star.wxss

@@ -1,34 +1,35 @@
 /* pages/star/star.wxss */
-.showView{
-  height: calc(100vh - 153rpx);
-  background-color: #ffffff
-}
-.home{
+
+.home {
   position: relative;
   height: 100%;
   overflow: hidden;
 }
-.home>.bg{
+
+.home>.bg {
   position: absolute;
   bottom: 0;
   width: 750rpx;
   height: 1353rpx;
 }
-.home>.logo1{
+
+.home>.logo1 {
   position: absolute;
   top: 0;
   left: 60rpx;
   width: 175rpx;
   height: 150rpx;
 }
-.home>.logo2{
+
+.home>.logo2 {
   position: absolute;
   top: 46rpx;
   right: 34rpx;
   width: 204rpx;
   height: 40rpx;
 }
-.ruleBtn{
+
+.ruleBtn {
   position: absolute;
   width: 153rpx;
   height: 46rpx;
@@ -36,14 +37,15 @@
   font-size: 24rpx;
   right: 0;
   top: 196rpx;
-  color: #ffffff;
+  color: #fff;
   background-color: rgba(35, 24, 21, 0.63);
   border-top-left-radius: 20rpx;
   border-bottom-left-radius: 20rpx;
   padding-left: 20rpx;
   box-sizing: border-box;
 }
-.propagandaBox{
+
+.propagandaBox {
   position: absolute;
   width: 100%;
   height: 76rpx;
@@ -52,21 +54,68 @@
   text-align: center;
   background-color: rgba(11, 40, 109, 0.79);
 }
-.home>.btnBox{
-position: absolute;
-width: 100%;
-text-align: center;
-left: 0;
-bottom: 15rpx;
+
+.home>.btnBox {
+  position: absolute;
+  width: 100%;
+  text-align: center;
+  left: 0;
+  bottom: 15rpx;
 }
-.home>.btnBox>.btn{
+
+.home>.btnBox>.btn {
   width: 278rpx;
-height: 47rpx;
+  height: 47rpx;
   line-height: 47rpx;
   display: inline-block;
   background-color: #345489;
   margin: 0 10rpx;
-  color: #ffffff;
+  color: #fff;
   font-size: 21rpx;
   border-radius: 15rpx;
-}
+}
+
+.mask {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: rgba(0, 0, 0, 0.5);
+}
+
+.mask>.ruleContent {
+  position: relative;
+  width: 562rpx;
+  height: 971rpx;
+  border-radius: 20rpx;
+}
+
+.mask>.ruleContent>.rule {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+
+.closeBtn {
+  background: none;
+  border: 2rpx solid #fff;
+  color: #fff;
+  border-radius: 50%;
+  text-align: center;
+  height: 40rpx;
+  line-height: 40rpx;
+  width: 40rpx;
+  font-size: 30rpx;
+  padding: 2rpx;
+  position: absolute;
+}
+
+/* use cross as close button */
+
+.closeBtn::before {
+  content: "\2716";
+}