feat: upgrade user experience

Author: LeeJim

miniprogram/app.json

@@ -6,6 +6,7 @@
     "pages/myStarred/index"
   ],
   "window": {
+    "backgroundColor": "#f6f6f6",
     "backgroundTextStyle": "light",
     "navigationBarBackgroundColor": "#fff",
     "navigationBarTitleText": "程序员做饭指南",

miniprogram/pages/detail/index.js

@@ -8,6 +8,7 @@ Page({
     visible: true,
     liked: false,
     starred: false,
+    done: false,
     stepIndexes: new Array(10).fill(0),
   },
 
@@ -27,20 +28,18 @@ Page({
 
   async getData() {
     const { id } = this.data;
-    wx.showLoading({
-      title: '加载中',
-    })
+    
+    this.setData({ done: false })
     try {
       const { result } = await wx.cloud.callFunction({
         name: 'getCookbook',
         data: {
           id
         }
       })
-      wx.hideLoading()
       if (result.errno == 0) {
         const { likeds, liked, starreds, starred } = result.data
-
+        this.setData({ done: true })
         this.setData({
           liked,
           likeds,
@@ -51,7 +50,7 @@ Page({
     } catch(e) {
       console.log(e);
     } finally {
-      wx.hideLoading()
+      this.setData({ done: true })
     }
   },
 
@@ -100,6 +99,7 @@ Page({
     try {
       wx.showLoading({
         title: '加载中',
+        mask: true
       })
       const { result } = await wx.cloud.callFunction({
         name: 'setCookbook',

miniprogram/pages/detail/index.less

@@ -132,6 +132,12 @@
   padding-bottom: env(safe-area-inset-bottom, 28rpx);
   background-color: #fff;
   box-shadow: #ccc 0 0 10px;
+  transform: translateY(100%);
+  transition: all .3s ease;
+
+  &--active {
+    transform: translateY(0);
+  }
 
   &__button {
     display: flex;

miniprogram/pages/detail/index.wxml

@@ -48,7 +48,7 @@
   </view>
 </view>
 
-<view class="actions">
+<view class="actions actions--{{done ? 'active' : ''}}">
     <t-button-group>
       <t-button t-class="actions__button" size="large" block data-type="liked" bind:tap="toggleStarOrLike">
         <t-icon name="heart{{liked ? '-filled' : ''}}" color="{{liked ? '#e34d59' : ''}}" size="36rpx" class="actions__icon"/> {{likeds ? likeds + ' 人' : ''}}喜欢