短通知 + 上部消息

pages/message/index.js

@@ -1,4 +1,6 @@
 // pages/message/index.js
+import Toast from '../../components/toast/index';
+import Message from '../../components/message/index';
 Page({
 
     /**
@@ -7,60 +9,27 @@ Page({
     data: {
         aIconList: ['check-rectangle','star','notification-filled','circle'],
     },
-
-    /**
-     * 生命周期函数--监听页面加载
-     */
-    onLoad(options) {
-
+    toast(option) {
+        Toast({
+            context: this,
+            selector: '#t-toast',
+            ...option,
+        });
     },
-
-    /**
-     * 生命周期函数--监听页面初次渲染完成
-     */
-    onReady() {
-
-    },
-
-    /**
-     * 生命周期函数--监听页面显示
-     */
-    onShow() {
-
-    },
-
-    /**
-     * 生命周期函数--监听页面隐藏
-     */
-    onHide() {
-
-    },
-
-    /**
-     * 生命周期函数--监听页面卸载
-     */
-    onUnload() {
-
-    },
-
-    /**
-     * 页面相关事件处理函数--监听用户下拉动作
-     */
-    onPullDownRefresh() {
-
-    },
-
-    /**
-     * 页面上拉触底事件的处理函数
-     */
-    onReachBottom() {
-
-    },
-
-    /**
-     * 用户点击右上角分享
-     */
-    onShareAppMessage() {
-
+    startVipButton(e){
+        this.toast({
+            message: '已获得会员资格！',
+            theme: 'success',
+            placement: 'bottom',
+            direction: 'column',
+        });
+        Message.info({
+            context: this,
+            offset: [20, 32],
+            marquee: { speed: 50, loop: -1, delay: 5000 },
+            icon: false,
+            content: '请关注微信公众号Quinn,回复"VIP"',
+            duration: -1,
+        });
     }
 })

pages/message/index.json

@@ -1,5 +1,9 @@
 {
     "usingComponents": {
-        "foot-tab": "../foot-tab/foot-tab"
+        "foot-tab": "../foot-tab/foot-tab",
+        "t-empty": "/components/empty/empty",
+        "t-button": "/components/button/button",
+        "t-toast": "/components/toast/toast",
+        "t-message": "/components/message/message"
     }
 }

pages/message/index.wxml

@@ -1,5 +1,9 @@
 <!--pages/message/index.wxml-->
-<text>您有新的消息</text>
+<t-message id="t-message" />
+<t-empty t-class="empty-cls" icon="info-circle-filled" description="开通会员解锁完整功能">
+    <t-button slot="action" theme="danger" variant="plain" bind:tap="startVipButton">开通会员</t-button>
+</t-empty>
+<t-toast id="t-toast" />
 <view>
     <foot-tab iconList="{{aIconList}}"/>
 </view>

pages/message/index.wxss

@@ -1 +1,4 @@
-/* pages/message/index.wxss */
+/* pages/message/index.wxss */
+.empty-cls {
+    margin-top: 250rpx !important;
+}