我的电子贺卡页面

app.json

@@ -1,5 +1,6 @@
 {
     "pages": [
+        "pages/greeting/index",
         "pages/activityDet/index",
         "pages/index/index",
         "pages/login/login",

pages/activityDet/index.js

@@ -7,60 +7,18 @@ Page({
     data: {
 
     },
-
     /**
      * 生命周期函数--监听页面加载
      */
     onLoad(options) {
 
     },
-
-    /**
-     * 生命周期函数--监听页面初次渲染完成
-     */
-    onReady() {
-
+    jumpGreeing(){
+        
     },
-
-    /**
-     * 生命周期函数--监听页面显示
-     */
-    onShow() {
-
+    jumpMyGreeing(){
+        wx.navigateTo({
+          url: '/pages/greeting/index',
+        })
     },
-
-    /**
-     * 生命周期函数--监听页面隐藏
-     */
-    onHide() {
-
-    },
-
-    /**
-     * 生命周期函数--监听页面卸载
-     */
-    onUnload() {
-
-    },
-
-    /**
-     * 页面相关事件处理函数--监听用户下拉动作
-     */
-    onPullDownRefresh() {
-
-    },
-
-    /**
-     * 页面上拉触底事件的处理函数
-     */
-    onReachBottom() {
-
-    },
-
-    /**
-     * 用户点击右上角分享
-     */
-    onShareAppMessage() {
-
-    }
 })

pages/activityDet/index.json

@@ -1,3 +1,4 @@
 {
-    "usingComponents": {}
+    "usingComponents": {},
+    "navigationBarTitleText": "贺卡"
 }

pages/activityDet/index.wxml

@@ -17,6 +17,6 @@
         </view>
     </view>
     <view class="footerBox">
-        <image src="http://reader-wx.ai160.com/images/reader/card/my_card.png" class="goGreeting" />
+        <image src="http://reader-wx.ai160.com/images/reader/card/my_card.png" class="goGreeting" bindtap="jumpMyGreeing"/>
     </view>
 </view>

pages/greeting/index.js

@@ -0,0 +1,66 @@
+// pages/greeting/index.js
+Page({
+
+    /**
+     * 页面的初始数据
+     */
+    data: {
+        isMy: false
+    },
+
+    /**
+     * 生命周期函数--监听页面加载
+     */
+    onLoad(options) {
+
+    },
+
+    /**
+     * 生命周期函数--监听页面初次渲染完成
+     */
+    onReady() {
+
+    },
+
+    /**
+     * 生命周期函数--监听页面显示
+     */
+    onShow() {
+
+    },
+
+    /**
+     * 生命周期函数--监听页面隐藏
+     */
+    onHide() {
+
+    },
+
+    /**
+     * 生命周期函数--监听页面卸载
+     */
+    onUnload() {
+
+    },
+
+    /**
+     * 页面相关事件处理函数--监听用户下拉动作
+     */
+    onPullDownRefresh() {
+
+    },
+
+    /**
+     * 页面上拉触底事件的处理函数
+     */
+    onReachBottom() {
+
+    },
+
+    /**
+     * 用户点击右上角分享
+     */
+    onShareAppMessage() {
+
+    }
+})

pages/greeting/index.json

@@ -0,0 +1,5 @@
+{
+    "usingComponents": {},
+    "navigationBarTitleText": "我的电子贺卡",
+    "enablePullDownRefresh": false
+}

pages/greeting/index.less

@@ -0,0 +1,100 @@
+.greetingBox {
+    width: 100vw;
+    min-height: 100vh;
+    padding: 26rpx 20rpx;
+    background-color: #fcd9927c;
+    box-sizing: border-box;
+
+    .template {
+        width: 100%;
+        padding: 20rpx 31rpx;
+        margin-bottom: 40rpx;
+        box-sizing: border-box;
+        background-color: white;
+        border-radius: 20rpx;
+        box-shadow: 0 2rpx 24rpx 0 rgba(252, 216, 146, 0.51);
+
+        .header {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+
+            .left {
+                .title {
+                    font-size: 34rpx;
+                    font-weight: bold;
+                }
+
+                .time {
+                    font-size: 24rpx;
+                    color: #666;
+                }
+            }
+
+            .right {
+                text-align: center;
+
+                .delete {
+                    width: 24rpx;
+                    height: 32rpx;
+                }
+
+                .text {
+                    font-size: 24rpx;
+                }
+            }
+        }
+
+        .body {
+            margin: 24rpx 0rpx;
+            width: 650rpx;
+            height: 520rpx;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            background-color: #D8D8D8;
+
+            .playBtn {
+                width: 84rpx;
+                height: 84rpx;
+            }
+        }
+
+        .footer {
+
+            .countBox {
+                display: flex;
+                align-items: center;
+                justify-content: space-between;
+
+                .box {
+                    display: flex;
+                    align-items: center;
+
+                    .icon {
+                        width: 38rpx;
+                        height: 34rpx;
+                    }
+
+                    .num {
+                        margin-left: 4rpx;
+                        font-size: 26rpx;
+                        color: #666;
+                    }
+                }
+            }
+
+            .handle {
+                display: flex;
+                justify-content: space-between;
+                justify-content: center;
+                margin-top: 28rpx;
+
+                .btn {
+                    width: 294rpx;
+                    height: 86rpx;
+                }
+            }
+        }
+    }
+}

pages/greeting/index.wxml

@@ -0,0 +1,35 @@
+<view class="greetingBox">
+    <view class="template" wx:for="{{5}}" wx:key="index">
+        <view class="header">
+            <view class="left">
+                <view class="title">模版名字</view>
+                <view class="time">2022-11-03 11:01</view>
+            </view>
+            <view class="right" wx:if="{{isMy}}">
+                <image src="/static/index/delete.png" class="delete" />
+                <view class="text">删除</view>
+            </view>
+        </view>
+        <view class="body">
+            <image src="/static/image/play-btn.png" class="playBtn" />
+        </view>
+        <view class="footer">
+            <view class="countBox">
+                <view class="box">
+                    <image src="/static/image/play.png" class="icon" />
+                    <view class="num">12312</view>
+                </view>
+                <view class="box">
+                    <image src="/static/image/red_like_empty.png" class="icon" />
+                    <view class="num">0</view>
+                </view>
+            </view>
+            <view class="handle" style="justify-content:{{isMy?'center':'space-between'}}">
+                <image src="http://reader-wx.ai160.com/images/reader/card/send_blessings.png" class="btn"
+                    wx:if="{{isMy}}" />
+                <image src="http://reader-wx.ai160.com/images/reader/card/show_off.png" class="btn" wx:if="{{!isMy}}" />
+                <image src="http://reader-wx.ai160.com/images/reader/card/wyyw.png" class="btn" wx:if="{{!isMy}}" />
+            </view>
+        </view>
+    </view>
+</view>

pages/greeting/index.wxss

@@ -0,0 +1,80 @@
+.greetingBox {
+  width: 100vw;
+  min-height: 100vh;
+  padding: 26rpx 20rpx;
+  background-color: #fcd9927c;
+  box-sizing: border-box;
+}
+.greetingBox .template {
+  width: 100%;
+  padding: 20rpx 31rpx;
+  margin-bottom: 40rpx;
+  box-sizing: border-box;
+  background-color: white;
+  border-radius: 20rpx;
+  box-shadow: 0 2rpx 24rpx 0 rgba(252, 216, 146, 0.51);
+}
+.greetingBox .template .header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.greetingBox .template .header .left .title {
+  font-size: 34rpx;
+  font-weight: bold;
+}
+.greetingBox .template .header .left .time {
+  font-size: 24rpx;
+  color: #666;
+}
+.greetingBox .template .header .right {
+  text-align: center;
+}
+.greetingBox .template .header .right .delete {
+  width: 24rpx;
+  height: 32rpx;
+}
+.greetingBox .template .header .right .text {
+  font-size: 24rpx;
+}
+.greetingBox .template .body {
+  margin: 24rpx 0rpx;
+  width: 650rpx;
+  height: 520rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: #D8D8D8;
+}
+.greetingBox .template .body .playBtn {
+  width: 84rpx;
+  height: 84rpx;
+}
+.greetingBox .template .footer .countBox {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.greetingBox .template .footer .countBox .box {
+  display: flex;
+  align-items: center;
+}
+.greetingBox .template .footer .countBox .box .icon {
+  width: 38rpx;
+  height: 34rpx;
+}
+.greetingBox .template .footer .countBox .box .num {
+  margin-left: 4rpx;
+  font-size: 26rpx;
+  color: #666;
+}
+.greetingBox .template .footer .handle {
+  display: flex;
+  justify-content: space-between;
+  justify-content: center;
+  margin-top: 28rpx;
+}
+.greetingBox .template .footer .handle .btn {
+  width: 294rpx;
+  height: 86rpx;
+}