体验优化；科普页缓存；布局调整 (#6)

* 图片卡片同步显示、布局、Hover... * 科普页缓存 * 订阅消息错误处理 * 照片审核底栏遮挡fix
sysucats · Oct 7, 2021 · 89f05f4 · 89f05f4
1 parent 61c1d7b
commit 89f05f4
Show file tree

Hide file tree

Showing 18 changed files with 204 additions and 106 deletions.
diff --git a/miniprogram/app.js b/miniprogram/app.js
@@ -16,7 +16,7 @@ App({
     checkUpdateVersion();
 
     this.globalData = {
-      version: "v1.5.3"
+      version: "v1.5.4"
     }
   }
 })
diff --git a/miniprogram/msg.js b/miniprogram/msg.js
@@ -17,40 +17,45 @@ async function requestNotice(template) {
     tplId = feedbackTplId;
   }
 
-  let res = await wx.requestSubscribeMessage({
-    tmplIds: [tplId],
-  });
-  // let res;
-  // wx.requestSubscribeMessage({
-  //   tmplIds: [tplId],
-  //   success: response=>{
-  //     res = response
-  //   }
-  // });
-  // BUG：反馈页Android端存在res：undefined并无法完成反馈的情况
-  console.log("requestSubMsgRes:", res);
-  if (res.errMsg != 'requestSubscribeMessage:ok') {
-    console.log('调用消息订阅请求接口失败' + res.errCode);
-    await wx.showToast({
-      title: '消息订阅好像出了点问题',
-      icon: 'none',
-      duration: 500,
-    })
-    return false;
-  }
-  if (res[tplId] == 'accept') {
-    await wx.showToast({
-      title: '结果能通知你啦',
-      icon: 'success',
-      duration: 800,
-    })
-    return true;
-  } else {
-    await wx.showToast({
-      title: '你拒收了通知QAQ',
-      icon: 'none',
-      duration: 800,
-    })
+  try {
+    let res = await wx.requestSubscribeMessage({
+      tmplIds: [tplId],
+    });
+    console.log("requestSubMsgRes:", res);
+
+    if (res.errMsg != 'requestSubscribeMessage:ok') { //这个条件会触发吗？
+      console.log('调用消息订阅请求接口失败' + res.errCode);
+      await wx.showToast({
+        title: '消息订阅好像出了点问题',
+        icon: 'none',
+        duration: 500,
+      })
+      return false;
+    }
+
+    if (res[tplId] == 'accept') {
+      await wx.showToast({
+        title: '结果能通知你啦',
+        icon: 'success',
+        duration: 800,
+      })
+      return true;
+    } else {
+      await wx.showToast({
+        title: '你拒收了通知QAQ',
+        icon: 'none',
+        duration: 800,
+      })
+      return false;
+    }
+
+  } catch (error) { // 订阅消息错误处理
+    console.log("request SubMsg error:", error)
+    await wx.showModal({
+      title: '提示',
+      content: '订阅消息出错（错误代码：' + error.errCode + '）\n请尝试通过 “关于页”-“信息反馈”内的邮箱 或 “笃行志愿服务队”公众号留言联系我们，感谢反馈！',
+      showCancel: false,
+    });
     return false;
   }
 }

diff --git a/miniprogram/pages/genealogy/addPhoto/addPhoto.wxss b/miniprogram/pages/genealogy/addPhoto/addPhoto.wxss
@@ -109,7 +109,7 @@ button + button {
 picker, input {
   border-bottom: 2rpx var(--color-primary) solid;
   background-color: var(--color-white-dark);
-  padding: 10rpx;
+  padding: 15rpx;
   margin-bottom: 20rpx;
   color: var(--color-black-light);
 }

diff --git a/miniprogram/pages/genealogy/detailCat/detailCat.js b/miniprogram/pages/genealogy/detailCat/detailCat.js
@@ -45,6 +45,10 @@ Page({
   onLoad: function (options) {
     cat_id = options.cat_id;
     // 开始加载页面
+    wx.showLoading({
+      title: '加载中',
+      mask: true
+    })
     const that = this;
     const app = getApp();
     getGlobalSettings('detailCat').then(settings => {
@@ -303,14 +307,13 @@ Page({
         this.setData({
           imgUrls: this.imgUrls
         });
-        wx.hideLoading();
       }
     }
   },
 
-
   bindImageLoaded(e) {
     // console.log(e);
+    wx.hideLoading();
   },
 
   // 下面开始加载相册咯

diff --git a/miniprogram/pages/genealogy/detailCat/detailCat.wxml b/miniprogram/pages/genealogy/detailCat/detailCat.wxml
@@ -89,7 +89,10 @@ next-margin='60rpx'>
         <view class='label-block'></view>
         特点
       </view>
-      <view class='value'><text>{{(cat.characteristics || '') + (cat.characteristics?'\n':'') + (cat.habit || '-')}}</text></view>
+      <view class='value'>
+        <!-- 新猫特点Char是空的数组（以前的是空值），修改判定方式 -->
+        <text>{{(cat.characteristics || '') + (cat.characteristics.length?'\n':'') + (cat.habit || '-')}}</text>
+      </view>
     </view>
 
     <view class='item long'>
@@ -100,9 +103,6 @@ next-margin='60rpx'>
       <view class='value'>{{cat.tutorial || '暂时还没有'}}</view>
     </view>
   </view>
-  <!-- <view class='feedback'>
-    <view class='fb-button' bindtap='bindTapFeedback'>我想反馈猫猫信息！</view>
-  </view> -->
 </view>
 <!-- info end -->
 
@@ -112,9 +112,8 @@ next-margin='60rpx'>
     <view class='name'>{{cat.name}}的相册</view>
     <view class='count'>共{{albumMax}}张照片</view>
   </view>
-  <view class='feedback'>
-    <view class='fb-button' bindtap='bindTapFeedback'>我想反馈猫猫信息！</view>
-  </view>
+  <view class='fb-button' bindtap='bindTapFeedback'>反馈猫猫信息</view>
+
 </view>
 
 
@@ -124,6 +123,7 @@ next-margin='60rpx'>
     <view class='name'>{{cat.name}}的相册</view>
     <view class='count'>共{{albumMax}}张照片</view>
   </view>
+  <view class='fb-button' bindtap='bindTapFeedback'>反馈猫猫信息</view>
 </view>
 
 <view class='album'>

diff --git a/miniprogram/pages/genealogy/detailCat/detailCat.wxss b/miniprogram/pages/genealogy/detailCat/detailCat.wxss
@@ -50,7 +50,7 @@ swiper-item image {
 .info {
   width: 750rpx;
   box-sizing: border-box;
-  padding: 30rpx 60rpx 10rpx 60rpx;
+  padding: 30rpx 60rpx 15rpx 60rpx;
   display: flex;
   flex-direction: column;
   justify-content: center;
@@ -165,17 +165,18 @@ swiper-item image {
   flex-direction: row;
 }
 
-.feedback .fb-button {
-  /* 文案（作为按钮略长）、位置、配色（和不能点击的tag相似）有待考虑 */
-  /* position: absolute;
-  right: 60rpx; */
-  font-size: 20rpx;
-  height: 40rpx;
+.fb-button {
+  font-size: 25rpx;
+  height: 55rpx;
   box-sizing: border-box;
-  border-radius: 10rpx;
+  border-radius: 15rpx;
   background-color: var(--color-primary);
-  padding: 5rpx 13rpx;
+  padding: 25rpx 20rpx;
   margin-right: 40rpx;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
 /* 下面开始相册 */
@@ -252,6 +253,9 @@ swiper-item image {
   display: flex;
   /* align-content: center; */
   align-items: center;
+
+  border:solid var(--color-gray-light);
+  border-width: 1rpx 0;
 }
 .big-header.fix {
   position: fixed;
@@ -274,6 +278,10 @@ swiper-item image {
   font-size: 36rpx;
   font-weight: 450;
   margin: 30rpx 0 10rpx 0;
+  width: 380rpx;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 .big-header .name-and-count .count {
   height: 28rpx;

diff --git a/miniprogram/pages/genealogy/feedbackDetail/feedbackDetail.js b/miniprogram/pages/genealogy/feedbackDetail/feedbackDetail.js
@@ -133,13 +133,18 @@ Page({
 
   async toSubmit() {
     let repliable = await requestNotice('feedback'); // 请求订阅消息推送
+
     const db = wx.cloud.database();
+    // console.log('fbID:',this.data.feedbackId,'\n repliable:',repliable);
     db.collection('feedback').doc(this.data.feedbackId).update({
       data:{
         repliable:repliable
       },
       success:res=>{
-          wx.navigateBack();
+        wx.navigateBack();
+      },
+      fail:res=>{
+        console.log('repliable record fail:\n',res);
       }
     })
   }

diff --git a/miniprogram/pages/genealogy/genealogy.js b/miniprogram/pages/genealogy/genealogy.js
@@ -11,7 +11,6 @@ const regReplace = utils.regReplace;
 
 const default_png = undefined;
 
-
 var catsStep = 1;
 var loadingLock = 0;
 
@@ -41,6 +40,8 @@ Page({
     loading: false, // 正在加载
     loadnomore: false, // 没有再多了
 
+    imgLoadedCount: 0,
+
     // 广告是否展示
     ad_show: {},
   },
@@ -92,21 +93,14 @@ Page({
 
 
     var scene = wx.getLaunchOptionsSync().scene;
-    console.log(scene);
-    if(scene === 1154){
-      that.loadFilters();
-      // that.setData({
-      //   main_lower_threshold: 50,
-      //   adStep: 6
-      // });
-      // catsStep = 3;
+    if(scene === 1154){//朋友圈内打开 “单页模式”
+      this.loadFilters();
       const db = wx.cloud.database();
       db.collection('setting').doc('pages').get().then(res => {
         var genealogySetting = res.data['genealogy'];
-        console.log("genealogySetting",genealogySetting);
+        // console.log("genealogySetting",genealogySetting);
         that.setData({
           main_lower_threshold: genealogySetting['main_lower_threshold'],
-          adStep:genealogySetting['adStep']
         })
         catsStep = genealogySetting['catsStep']
       });
@@ -247,7 +241,7 @@ Page({
     }
     const that = this;
     this.setData({
-      loading: true
+      loading: true,
     }, () => {
       var cats = that.data.cats;
       var step = catsStep;
@@ -338,6 +332,13 @@ Page({
 
   },
 
+  bindImageLoaded(e){
+    this.setData({
+      imgLoadedCount: this.data.imgLoadedCount+1
+    },
+);
+  },
+
   // 点击猫猫卡片
   clickCatCard(e, isCatId = false) {
     const cat_id = isCatId ? e : e.currentTarget.dataset.cat_id;
@@ -540,6 +541,8 @@ Page({
     return res.length ? _.and(res) : {};
   },
   fComfirm: function () {
+    this.setData({imgLoadedCount:0});
+
     if (!this.data.filters_legal) {
       return false;
     }

diff --git a/miniprogram/pages/genealogy/genealogy.wxml b/miniprogram/pages/genealogy/genealogy.wxml
@@ -49,14 +49,14 @@
 
 <scroll-view enable-flex='true' class='cards' style='height: {{heights.windowHeight - heights.filters}}px;' scroll-y='true' enable-back-to-top='true' bindscrolltolower='onReachBottom' bindscroll='fScroll' lower-threshold='{{main_lower_threshold}}'>
   <block wx:for='{{cats}}' wx:key="_id">
-    <view class='card' bindtap='clickCatCard' bindlongpress='bindManageCat' data-cat_id='{{item._id}}'>
+    <view hidden="{{index > imgLoadedCount-1}}" class='card' bindtap='clickCatCard' bindlongpress='bindManageCat' data-cat_id='{{item._id}}'>
       <view class='label' wx:if="{{item.mphoto_new}}">有新相片！</view>
       <view class='image {{item.to_star? "to_star": ""}}'>
-        <image mode='aspectFill' src='{{item.photo.photo_compressed || item.photo.photo_id}}'></image>
+        <image bindload="bindImageLoaded" mode='aspectFill' src='{{item.photo.photo_compressed || item.photo.photo_id}}'></image>
         <view class='image-title' wx:if='{{!item.photo_count || item.photo_count === 0}}'>暂无照片...</view>
         <view class='image-title' wx:else>{{item.photo.photo_id? ('Photo by ' + (item.photo.photographer ||(item.photo.userInfo? item.photo.userInfo.nickName: '匿名猫友'))): '加载照片ing'}}</view>
       </view>
-      <view class='info'>
+      <view class='info' hover-class="hoverInfo">
         <view class='line first'>
           <text class='name'>{{item.name}}</text>
           <block wx:if='{{item.gender}}'>
@@ -89,14 +89,10 @@
         </view>
       </view>
     </view>
-    <view wx:if="{{adStep && (index+1)%adStep===0}}" class="card-ad {{ad_show['ad-'+(index+1)]? '': 'hidden'}}">
+    <view hidden="{{index > imgLoadedCount-1}}" wx:if="{{adStep && (index+1)%adStep===0}}" class="card-ad {{ad_show['ad-'+(index+1)]? '': 'hidden'}}">
       <ad unit-id="adunit-9a7dcb84fe2c4db1" ad-intervals="120"
       bindload="adLoad" binderror="adError" bindclose="adClose" data-ad_id='ad-{{(index+1)}}'></ad>
     </view>
-    <!-- 嵌套card-ad时，card-over设置overflow:hidden-安卓不可见;独立ad时，需设置over
-     -->
-    <!-- <ad wx:if="{{adStep && (index+1)%adStep===0}}" class="card-ad" unit-id="adunit-9a7dcb84fe2c4db1" ad-intervals="120"
-      bindload="adLoad" binderror="adError" bindclose="adClose" data-ad_id='ad-{{(index+1)}}'></ad> -->
   </block>
 
 <view class='loading' wx:if='{{!loadnomore}}'>

diff --git a/miniprogram/pages/genealogy/genealogy.wxss b/miniprogram/pages/genealogy/genealogy.wxss
@@ -72,6 +72,11 @@ scroll-view {
   padding: 35rpx 35rpx 20rpx 35rpx;
 }
 
+.card .hoverInfo{
+  background-color: var(--color-gray-light);
+  padding: 35rpx 35rpx 20rpx 35rpx;
+}
+
 .card .info .line {
   display: flex;
   align-items: flex-start;

diff --git a/miniprogram/pages/info/devTeam/devTeam.wxml b/miniprogram/pages/info/devTeam/devTeam.wxml
@@ -19,6 +19,9 @@
 <view class='block'>
   <view class='title'>更新日志</view>
   <view class='desc'>
+    <view class='sub-title hl'>v1.5.4</view>
+    <text class='sub-detail'>- 页面优化\n - 更新时间：2021/10/7</text>
+
     <view class='sub-title hl'>v1.5.3</view>
     <text class='sub-detail'>- 优化部分UI\n - 关闭串门页入口\n - 更新时间：2021/9/4</text>