开发

components/medal/index.js

@@ -11,13 +11,25 @@ Component({
    * 组件的初始数据
    */
   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.less

@@ -45,8 +45,8 @@
         position: absolute;
         bottom: 20rpx;
         left: -95rpx;
-        width: 580rpx;
-        height: 580rpx;
+        width: 570rpx;
+        height: 570rpx;
         animation: falsh-identifier 4.5s infinite linear;
       }
 

components/medal/index.wxml

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

components/medal/index.wxss

@@ -43,8 +43,8 @@
   position: absolute;
   bottom: 20rpx;
   left: -95rpx;
-  width: 580rpx;
-  height: 580rpx;
+  width: 570rpx;
+  height: 570rpx;
   animation: falsh-identifier 4.5s infinite linear;
 }
 .mediaBox .media .body .mediaImg {

pages/medalStore/index.js

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

pages/medalStore/index.wxml

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