Merge branch 'develop' into newRender

components/medal/index.js

@@ -0,0 +1,35 @@
+// components/medal/index.js
+Component({
+  /**
+   * 组件的属性列表
+   */
+  properties: {
+
+  },
+
+  /**
+   * 组件的初始数据
+   */
+  data: {
+    state: false,
+    img: ''
+  },
+
+  /**
+   * 组件的方法列表
+   */
+  methods: {
+    open(val) {
+      console.log(val);
+      this.setData({
+        img: val.img,
+        state: true
+      })
+    },
+    closeMediaBox() {
+      this.setData({
+        state: false
+      })
+    }
+  }
+})

components/medal/index.json

@@ -0,0 +1,4 @@
+{
+  "component": true,
+  "usingComponents": {}
+}

components/medal/index.less

@@ -0,0 +1,104 @@
+.mediaBox {
+  position: fixed;
+  top: 0px;
+  left: 0px;
+  width: 100vw;
+  height: 100vh;
+  display: flex;
+  justify-content: center;
+  background-color: rgba(0, 0, 0, 0.35);
+
+  .media {
+    position: relative;
+    margin-top: 200rpx;
+    width: 480rpx;
+    height: 620rpx;
+    padding: 24rpx;
+    box-sizing: border-box;
+    background-color: #FEF2C7;
+    border-radius: 20rpx;
+
+    .close {
+      position: absolute;
+      right: -50rpx;
+      top: -50rpx;
+      width: 58rpx;
+      height: 58rpx;
+    }
+
+    .body {
+      position: relative;
+      width: 100%;
+      height: 100%;
+      padding: 24rpx 0rpx 30rpx;
+      text-align: center;
+      box-sizing: border-box;
+      background-color: white;
+      border-radius: 20rpx;
+
+      .title {
+        font-size: 38rpx;
+        letter-spacing: 4rpx;
+      }
+
+      .falsh {
+        position: absolute;
+        bottom: 20rpx;
+        left: -95rpx;
+        width: 570rpx;
+        height: 570rpx;
+        animation: falsh-identifier 4.5s infinite linear;
+      }
+
+      .mediaImg {
+        position: relative;
+        z-index: 2;
+        padding: 70rpx 0rpx 60rpx;
+        width: 274rpx;
+        height: 240rpx;
+        animation: falsh-scale 2s infinite linear;
+      }
+
+      .see {
+        position: relative;
+        z-index: 2;
+        display: inline-block;
+        padding: 14rpx 66rpx;
+        font-size: 30rpx;
+        background-image: linear-gradient(270deg, #FC5556 0%, #F84041 100%, #14C962 100%);
+        box-shadow: 0 6rpx 14rpx 0 rgba(251, 79, 80, 0.76);
+        border-radius: 50rpx;
+        color: white;
+      }
+    }
+  }
+}
+
+/* 转圈动画 */
+@keyframes falsh-identifier {
+  0% {
+    transform: rotate(0deg) scale(0.7);
+  }
+
+  50% {
+    transform: rotate(180deg) scale(1);
+  }
+
+  100% {
+    transform: rotate(360deg) scale(0.7);
+  }
+}
+
+@keyframes falsh-scale {
+  0% {
+    transform: scale(1);
+  }
+
+  50% {
+    transform: scale(1.2);
+  }
+
+  100% {
+    transform: scale(1);
+  }
+}

components/medal/index.wxml

@@ -0,0 +1,11 @@
+<view class="mediaBox" wx:if="{{state}}">
+  <view class="media">
+    <image src="/static/lollipop.png" class="close" catchtap="closeMediaBox" />
+    <view class="body">
+      <view class="title">恭喜获得新勋章</view>
+      <image src="{{img}}" class="mediaImg" />
+      <image src="/static/falsh.png" class="falsh" />
+      <view class="see">立即查看</view>
+    </view>
+  </view>
+</view>

components/medal/index.wxss

@@ -0,0 +1,91 @@
+.mediaBox {
+  position: fixed;
+  top: 0px;
+  left: 0px;
+  width: 100vw;
+  height: 100vh;
+  display: flex;
+  justify-content: center;
+  background-color: rgba(0, 0, 0, 0.35);
+}
+.mediaBox .media {
+  position: relative;
+  margin-top: 200rpx;
+  width: 480rpx;
+  height: 620rpx;
+  padding: 24rpx;
+  box-sizing: border-box;
+  background-color: #FEF2C7;
+  border-radius: 20rpx;
+}
+.mediaBox .media .close {
+  position: absolute;
+  right: -50rpx;
+  top: -50rpx;
+  width: 58rpx;
+  height: 58rpx;
+}
+.mediaBox .media .body {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  padding: 24rpx 0rpx 30rpx;
+  text-align: center;
+  box-sizing: border-box;
+  background-color: white;
+  border-radius: 20rpx;
+}
+.mediaBox .media .body .title {
+  font-size: 38rpx;
+  letter-spacing: 4rpx;
+}
+.mediaBox .media .body .falsh {
+  position: absolute;
+  bottom: 20rpx;
+  left: -95rpx;
+  width: 570rpx;
+  height: 570rpx;
+  animation: falsh-identifier 4.5s infinite linear;
+}
+.mediaBox .media .body .mediaImg {
+  position: relative;
+  z-index: 2;
+  padding: 70rpx 0rpx 60rpx;
+  width: 274rpx;
+  height: 240rpx;
+  animation: falsh-scale 2s infinite linear;
+}
+.mediaBox .media .body .see {
+  position: relative;
+  z-index: 2;
+  display: inline-block;
+  padding: 14rpx 66rpx;
+  font-size: 30rpx;
+  background-image: linear-gradient(270deg, #FC5556 0%, #F84041 100%, #14C962 100%);
+  box-shadow: 0 6rpx 14rpx 0 rgba(251, 79, 80, 0.76);
+  border-radius: 50rpx;
+  color: white;
+}
+/* 转圈动画 */
+@keyframes falsh-identifier {
+  0% {
+    transform: rotate(0deg) scale(0.7);
+  }
+  50% {
+    transform: rotate(180deg) scale(1);
+  }
+  100% {
+    transform: rotate(360deg) scale(0.7);
+  }
+}
+@keyframes falsh-scale {
+  0% {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(1.2);
+  }
+  100% {
+    transform: scale(1);
+  }
+}

components/readingTips/index.less

@@ -211,9 +211,11 @@
 
     .share_cancel {
         position: absolute;
-        right: 50rpx;
-        top: -80rpx;
+        left: 0px;
+        right: 0px;
+        margin: auto;
+        top: -64rpx;
         width: 60rpx;
-        height: 80rpx;
+        height: 60rpx;
     }
 }

components/readingTips/index.wxss

@@ -179,8 +179,10 @@
 }
 .attr_box .share_cancel {
   position: absolute;
-  right: 50rpx;
-  top: -80rpx;
+  left: 0px;
+  right: 0px;
+  margin: auto;
+  top: -64rpx;
   width: 60rpx;
-  height: 80rpx;
+  height: 60rpx;
 }

pages/medalStore/index.js

@@ -12,7 +12,9 @@ Page({
    * 生命周期函数--监听页面加载
    */
   onLoad(options) {
-
+    this.selectComponent('#media').open({
+      img: '/static/01.png'
+    });
   },
 
   /**

pages/medalStore/index.json

@@ -1,5 +1,7 @@
 {
-  "usingComponents": {},
+  "usingComponents": {
+    "Media": "/components/medal/index"
+  },
   "navigationBarTitleText": "勋章墙",
   "navigationBarBackgroundColor": "#30C866",
   "navigationBarTextStyle": "white"

pages/medalStore/index.wxml

@@ -20,4 +20,5 @@
       </view>
     </view>
   </view>
+  <Media id="media"/>
 </view>

pages/my/index.wxml

@@ -62,7 +62,7 @@
     </button>
   </view>
   <!-- 勋章 -->
-  <!--   <view class="medalBox">
+  <view class="medalBox">
     <view class="header">
       <view class="title">我的勋章</view>
       <view class="jump" bindtap='jump' data-url="/pages/medalStore/index">查看全部
@@ -72,7 +72,7 @@
     <view class="body">
       <image src="/static/concern.png" class="medal" wx:for="{{5}}" wx:key="index" />
     </view>
-  </view> -->
+  </view>
   <!-- 支付 -->
   <view class="payBox" wx:if="{{!isIos}}">
     <view class="title">