开发贺卡

api/activity.js

@@ -0,0 +1,9 @@
+import {
+    request
+} from "../utils/request";
+module.exports = {
+    // 获取贺卡列表
+    getActivityList: data => request('/card/activity', 'get', data),
+    // 获取贺卡详情
+    getActivityInfo: data => request(`/card/activity/template/${data}`, 'get'),
+}

app.json

@@ -1,7 +1,8 @@
 {
     "pages": [
-        "pages/greeting/index",
         "pages/activityDet/index",
+        "pages/activityList/index",
+        "pages/greeting/index",
         "pages/index/index",
         "pages/login/login",
         "pages/my/index",

pages/activityDet/index.js

@@ -1,24 +1,45 @@
-// pages/activityDet/index.js
+import {
+    getActivityInfo
+} from '~/api/activity'
 Page({
 
     /**
      * 页面的初始数据
      */
     data: {
-
+        state: true,
+        tens: 2,
+        bits: 0,
+        configure: {}
     },
-    /**
-     * 生命周期函数--监听页面加载
-     */
-    onLoad(options) {
-
-    },
-    jumpGreeing(){
-        
-    },
-    jumpMyGreeing(){
-        wx.navigateTo({
-          url: '/pages/greeting/index',
+    async onLoad(options) {
+        let configure = await getActivityInfo(options.id)
+        console.log(configure);
+        this.setData({
+            configure
         })
     },
+    play() {
+        this.setData({
+            state: true
+        })
+        let countDown = 20
+        // 一分钟倒计时
+        let dsq = setInterval(item => {
+            if (countDown == 1) {
+                clearInterval(dsq)
+            }
+            if (countDown % 10 == 0) {
+                this.setData({
+                    tens: --this.data.tens,
+                    bits: 9
+                })
+            } else {
+                this.setData({
+                    bits: --this.data.bits
+                })
+            }
+            --countDown
+        }, 1000)
+    }
 })

pages/activityDet/index.json

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

pages/activityDet/index.less

@@ -1,77 +1,40 @@
-.aDet {
-    width: 100%;
-    min-height: 100vh;
-    background-color: #FBEBC8;
-
-    .headImg {
-        width: 750rpx;
-        height: 510rpx;
+.activityDet {
+    .header {
+        width: 100%;
+        height: 600rpx;
+        background-color: wheat;
     }
 
-    .body {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        padding-bottom: 150rpx;
-
-        .template {
-            position: relative;
-            width: 100%;
-            height: 780rpx;
-            background: url(http://reader-wx.ai160.com/images/reader/card/template.png) no-repeat;
-            background-size: 100% 100%;
-
-            .content {
-                position: absolute;
-                top: 106rpx;
-                left: 0px;
-                right: 0px;
-                margin: auto;
-                width: 650rpx;
-                height: 520rpx;
-                background-color: #D8D8D8;
-                border-radius: 20rpx;
-            }
-
-            .btns {
-                position: absolute;
-                bottom: 52rpx;
-                width: 100%;
-                display: flex;
-                align-items: center;
-                justify-content: space-between;
-
-                .changeBtn {
-                    margin-left: 60rpx;
-                    width: 226rpx;
-                    height: 82rpx;
-                }
+    .btnsBox {
+        position: relative;
+        text-align: center;
+        background-color: skyblue;
+        font-size: 0rpx;
 
-                .recording {
-                    margin-right: 60rpx;
-                    width: 298rpx;
-                    height: 82rpx;
-                }
-            }
+        .send {
+            width: 290rpx;
+            height: 80rpx;
         }
-    }
 
-    .footerBox {
-        position: fixed;
-        bottom: 0px;
-        left: 0px;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        width: 100%;
-        height: 130rpx;
-        background-color: white;
-        box-shadow: 0 2rpx 44rpx 0 rgba(0, 0, 0, 0.50);
-        font-size: 0rpx;
-
-        .goGreeting {
-            width: 313rpx;
-            height: 88rpx;
+        .countDown {
+            position: absolute;
+            right: 30rpx;
+            top: 0px;
+            bottom: 0px;
+            margin: auto;
+            display: flex;
+            align-items: center;
+            color: #FD3545;
+            font-size: 22rpx;
+            font-weight: bold;
+
+            .countBox {
+                padding: 10rpx;
+                border-radius: 10rpx;
+                margin: 0rpx 4rpx;
+                color: white;
+                background-image: linear-gradient(180deg, #FF7079 0%, #FE3D44 100%);
+            }
         }
     }
 }

pages/activityDet/index.wxml

@@ -1,22 +1,12 @@
-<view class="aDet">
-    <image src="http://reader-wx.ai160.com/images/reader/card/bitmap.png" class="headImg" />
-    <view class="body">
-        <view class="template">
-            <image src="" class="content" />
-            <view class="btns">
-                <image src="http://reader-wx.ai160.com/images/reader/card/change.png" class="changeBtn" />
-                <image src="http://reader-wx.ai160.com/images/reader/card/record_blessings2.png" class="recording" />
-            </view>
+<view class="activityDet">
+    <view class="header"></view>
+    <view class="btnsBox">
+        <image
+            src="{{state?'http://reader-wx.ai160.com/images/reader/card/send_blessings.png':'http://reader-wx.ai160.com/images/reader/card/show_off.png'}}"
+            class="send" bindtap="play" />
+        <view class="countDown" wx:if="{{state}}">
+            倒计时：<view class="countBox">{{tens}}</view>
+            <view class="countBox">{{bits}}</view>秒
         </view>
-        <view class="template">
-            <image src="" class="content" />
-            <view class="btns">
-                <image src="http://reader-wx.ai160.com/images/reader/card/change.png" class="changeBtn" />
-                <image src="http://reader-wx.ai160.com/images/reader/card/record_blessings2.png" class="recording" />
-            </view>
-        </view>
-    </view>
-    <view class="footerBox">
-        <image src="http://reader-wx.ai160.com/images/reader/card/my_card.png" class="goGreeting" bindtap="jumpMyGreeing"/>
     </view>
 </view>

pages/activityDet/index.wxss

@@ -1,68 +1,34 @@
-.aDet {
+.activityDet .header {
   width: 100%;
-  min-height: 100vh;
-  background-color: #FBEBC8;
+  height: 600rpx;
+  background-color: wheat;
 }
-.aDet .headImg {
-  width: 750rpx;
-  height: 510rpx;
-}
-.aDet .body {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  padding-bottom: 150rpx;
-}
-.aDet .body .template {
+.activityDet .btnsBox {
   position: relative;
-  width: 100%;
-  height: 780rpx;
-  background: url(http://reader-wx.ai160.com/images/reader/card/template.png) no-repeat;
-  background-size: 100% 100%;
+  text-align: center;
+  background-color: skyblue;
+  font-size: 0rpx;
 }
-.aDet .body .template .content {
-  position: absolute;
-  top: 106rpx;
-  left: 0px;
-  right: 0px;
-  margin: auto;
-  width: 650rpx;
-  height: 520rpx;
-  background-color: #D8D8D8;
-  border-radius: 20rpx;
+.activityDet .btnsBox .send {
+  width: 290rpx;
+  height: 80rpx;
 }
-.aDet .body .template .btns {
+.activityDet .btnsBox .countDown {
   position: absolute;
-  bottom: 52rpx;
-  width: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-.aDet .body .template .btns .changeBtn {
-  margin-left: 60rpx;
-  width: 226rpx;
-  height: 82rpx;
-}
-.aDet .body .template .btns .recording {
-  margin-right: 60rpx;
-  width: 298rpx;
-  height: 82rpx;
-}
-.aDet .footerBox {
-  position: fixed;
+  right: 30rpx;
+  top: 0px;
   bottom: 0px;
-  left: 0px;
+  margin: auto;
   display: flex;
   align-items: center;
-  justify-content: center;
-  width: 100%;
-  height: 130rpx;
-  background-color: white;
-  box-shadow: 0 2rpx 44rpx 0 rgba(0, 0, 0, 0.5);
-  font-size: 0rpx;
-}
-.aDet .footerBox .goGreeting {
-  width: 313rpx;
-  height: 88rpx;
+  color: #FD3545;
+  font-size: 22rpx;
+  font-weight: bold;
+}
+.activityDet .btnsBox .countDown .countBox {
+  padding: 10rpx;
+  border-radius: 10rpx;
+  margin: 0rpx 4rpx;
+  color: white;
+  background-image: linear-gradient(180deg, #FF7079 0%, #FE3D44 100%);
 }

pages/activityList/index.js

@@ -0,0 +1,63 @@
+import {
+    getActivityList
+} from '~/api/activity'
+Page({
+    /**
+     * 页面的初始数据
+     */
+    data: {
+        banner: '',
+        cardActivityList: [],
+    },
+    /**
+     * 生命周期函数--监听页面加载
+     */
+    onLoad(options) {
+        this.getActivityList()
+    },
+    async getActivityList() {
+        let {
+            banner,
+            cardActivityList
+        } = await getActivityList()
+        cardActivityList.forEach(item => {
+            item.currentIndex = 0
+        })
+        console.log(cardActivityList);
+        this.setData({
+            cardActivityList,
+            banner
+        })
+    },
+    // 换一换
+    changeTemplate({
+        currentTarget
+    }) {
+        let index = currentTarget.dataset.index
+        let item = currentTarget.dataset.item
+        let nextIndex = item.currentIndex
+        if (item.currentIndex < item.templateTypeList.length - 1) {
+            nextIndex = ++item.currentIndex
+        } else {
+            nextIndex = 0
+        }
+        this.setData({
+            [`cardActivityList[${index}].currentIndex`]: nextIndex
+        })
+    },
+    toRecording({
+        currentTarget
+    }) {
+        let index = currentTarget.dataset.index
+        let target = this.data.cardActivityList[index]
+        let id = target.templateTypeList[target.currentIndex].id
+        wx.navigateTo({
+            url: `/pages/activityDet/index?id=${id}`,
+        })
+    },
+    jumpMyGreeing() {
+        wx.navigateTo({
+            url: '/pages/greeting/index',
+        })
+    },
+})

pages/activityList/index.json

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

pages/activityList/index.less

@@ -0,0 +1,75 @@
+.aDet {
+    width: 100%;
+    min-height: 100vh;
+
+    .headImg {
+        width: 750rpx;
+        height: 510rpx;
+    }
+
+    .body {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        padding-bottom: 150rpx;
+
+        .template {
+            position: relative;
+            width: 100%;
+            height: 780rpx;
+            background-size: 100% 100%;
+
+            .content {
+                position: absolute;
+                top: 106rpx;
+                left: 0px;
+                right: 0px;
+                margin: auto;
+                width: 650rpx;
+                height: 520rpx;
+                background-color: #D8D8D8;
+                border-radius: 20rpx;
+            }
+
+            .btns {
+                position: absolute;
+                bottom: 52rpx;
+                width: 100%;
+                display: flex;
+                align-items: center;
+                justify-content: space-between;
+
+                .changeBtn {
+                    margin-left: 60rpx;
+                    width: 226rpx;
+                    height: 82rpx;
+                }
+
+                .recording {
+                    margin-right: 60rpx;
+                    width: 298rpx;
+                    height: 82rpx;
+                }
+            }
+        }
+    }
+
+    .footerBox {
+        position: fixed;
+        bottom: 0px;
+        left: 0px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 100%;
+        height: 130rpx;
+        background-color: white;
+        box-shadow: 0 2rpx 44rpx 0 rgba(0, 0, 0, 0.50);
+        font-size: 0rpx;
+
+        .goGreeting {
+            width: 313rpx;
+            height: 88rpx;
+        }
+    }
+}

pages/activityList/index.wxml

@@ -0,0 +1,18 @@
+<view class="aDet" style="background-color: {{banner.bgColor}};">
+    <image src="{{banner.icon}}" class="headImg" />
+    <view class="body">
+        <view class="template" style="background-image:url({{item.bgImg}}) ;" wx:for="{{cardActivityList}}" wx:key="id">
+            <image src="{{item.templateTypeList[item.currentIndex].bgImg}}" class="content" />
+            <view class="btns">
+                <image src="http://reader-wx.ai160.com/images/reader/card/change.png" class="changeBtn"
+                    data-index='{{index}}' data-item='{{item}}' bindtap="changeTemplate" />
+                <image src="http://reader-wx.ai160.com/images/reader/card/record_blessings2.png" class="recording"
+                    data-index='{{index}}' bindtap="toRecording" />
+            </view>
+        </view>
+    </view>
+    <view class="footerBox">
+        <image src="http://reader-wx.ai160.com/images/reader/card/my_card.png" class="goGreeting"
+            bindtap="jumpMyGreeing" />
+    </view>
+</view>

pages/activityList/index.wxss

@@ -0,0 +1,66 @@
+.aDet {
+  width: 100%;
+  min-height: 100vh;
+}
+.aDet .headImg {
+  width: 750rpx;
+  height: 510rpx;
+}
+.aDet .body {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding-bottom: 150rpx;
+}
+.aDet .body .template {
+  position: relative;
+  width: 100%;
+  height: 780rpx;
+  background-size: 100% 100%;
+}
+.aDet .body .template .content {
+  position: absolute;
+  top: 106rpx;
+  left: 0px;
+  right: 0px;
+  margin: auto;
+  width: 650rpx;
+  height: 520rpx;
+  background-color: #D8D8D8;
+  border-radius: 20rpx;
+}
+.aDet .body .template .btns {
+  position: absolute;
+  bottom: 52rpx;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.aDet .body .template .btns .changeBtn {
+  margin-left: 60rpx;
+  width: 226rpx;
+  height: 82rpx;
+}
+.aDet .body .template .btns .recording {
+  margin-right: 60rpx;
+  width: 298rpx;
+  height: 82rpx;
+}
+.aDet .footerBox {
+  position: fixed;
+  bottom: 0px;
+  left: 0px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 130rpx;
+  background-color: white;
+  box-shadow: 0 2rpx 44rpx 0 rgba(0, 0, 0, 0.5);
+  font-size: 0rpx;
+}
+.aDet .footerBox .goGreeting {
+  width: 313rpx;
+  height: 88rpx;
+}

utils/request.js

@@ -1,5 +1,18 @@
-let baseUrl = 'https://reader-api.ai160.com/wx'
-let oldUrl = 'https://reader-api.ai160.com'
+let baseUrl = null
+let oldUrl = null
+
+const {
+    miniProgram: {
+        envVersion
+    }
+} = wx.getAccountInfoSync();
+if (envVersion == 'develop') {
+    baseUrl = 'https://reader-api.efunbox.cn/wx'
+    oldUrl = 'https://reader-api.efunbox.cn'
+} else {
+    baseUrl = 'https://reader-api.ai160.com/wx'
+    oldUrl = 'https://reader-api.ai160.com'
+}
 
 
 function request(url, method, data, oldBaseUrl = false) {