uniapp 电商app签到功能实现

╰半橙微兮° 2021-07-26 00:36 1295阅读 0赞

签到功能

目前公司所做的电商app要做一个签到送津贴的页面。接口还在开发中，页面已经搭完了。

页面展示如下：

在这里插入图片描述
在页面搭建的过程中，遇到几个小问题，下面做一下记录并汇总一下解决方法。

uniapp 标题栏透明

在这里插入图片描述
要想实现这种透明的标题栏，就得自定义标题栏了。

首先：
pages.json文件中：

  1. { 
  2.             "path": "pages/user/sign",
  3.             "style": { 
  4.                 "navigationBarTitleText": "签到有礼",
  5.                 "navigationStyle":"custom"
  6.             }
  7.         },

navigationStyle参数设置为custom即可以将标题栏设置为自定义的情况。

如果自己写一个标题栏，为了保证各种手机型号的兼容性，我还是倾向于用现有的组件。

自定义的标题栏组件如下：
这个自定义的标题栏是功能比较全的了，但是没有实现中间是搜索框的那种情况。后续会讲到这种情况的处理方案。

  1. <template>
  2.     <view class="uni-navbar">
  3.         <view :class="{ 'uni-navbar--fixed': fixed, 'uni-navbar--shadow': shadow, 'uni-navbar--border': border }" :style="{ 'background-color': backgroundColor }" class="uni-navbar__content">
  4.             <uni-status-bar v-if="statusBar" />
  5.             <view :style="{ color: color,backgroundColor: backgroundColor }" class="uni-navbar__header uni-navbar__content_view">
  6.                 <view @tap="onClickLeft" class="uni-navbar__header-btns uni-navbar__header-btns-left uni-navbar__content_view">
  7.                     <view class="uni-navbar__content_view" v-if="leftIcon.length">
  8.                         <uni-icons :color="color" :type="leftIcon" size="24" />
  9.                     </view>
  10.                     <view :class="{ 'uni-navbar-btn-icon-left': !leftIcon.length }" class="uni-navbar-btn-text uni-navbar__content_view" v-if="leftText.length">
  11.                         <text :style="{ color: color, fontSize: '14px' }">{ {  leftText }}</text>
  12.                     </view>
  13.                     <slot name="left" />
  14.                 </view>
  15.                 <view class="uni-navbar__header-container uni-navbar__content_view">
  16.                     <view class="uni-navbar__header-container-inner uni-navbar__content_view" v-if="title.length">
  17.                         <text class="uni-nav-bar-text" :style="{color: color }">{ {  title }}</text>
  18.                     </view>
  19.                     <!-- 标题插槽 -->
  20.                     <slot />
  21.                 </view>
  22.                 <view :class="title.length ? 'uni-navbar__header-btns-right' : ''" @click="onClickRight" class="uni-navbar__header-btns uni-navbar__content_view">
  23.                     <view class="uni-navbar__content_view" v-if="rightIcon.length">
  24.                         <uni-icons :color="color" :type="rightIcon" size="24" />
  25.                     </view>
  26.                     <!-- 优先显示图标 -->
  27.                     <view class="uni-navbar-btn-text uni-navbar__content_view" v-if="rightText.length && !rightIcon.length">
  28.                         <text class="uni-nav-bar-right-text">{ {  rightText }}</text>
  29.                     </view>
  30.                     <slot name="right" />
  31.                 </view>
  32.             </view>
  33.         </view>
  34.         <view class="uni-navbar__placeholder" v-if="fixed">
  35.             <uni-status-bar v-if="statusBar" />
  36.             <view class="uni-navbar__placeholder-view" />
  37.         </view>
  38.     </view>
  39. </template>
  41. <script>
  42.     import uniStatusBar from "@/components/uni-status-bar/uni-status-bar.vue";
  43.     import uniIcons from "@/components/uni-icons/uni-icons.vue";
  45.     /** * NavBar 自定义导航栏 * @description 导航栏组件，主要用于头部导航 * @tutorial https://ext.dcloud.net.cn/plugin?id=52 * @property {String} title 标题文字 * @property {String} leftText 左侧按钮文本 * @property {String} rightText 右侧按钮文本 * @property {String} leftIcon 左侧按钮图标（图标类型参考 [Icon 图标](http://ext.dcloud.net.cn/plugin?id=28) type 属性） * @property {String} rightIcon 右侧按钮图标（图标类型参考 [Icon 图标](http://ext.dcloud.net.cn/plugin?id=28) type 属性） * @property {String} color 图标和文字颜色 * @property {String} backgroundColor 导航栏背景颜色 * @property {Boolean} fixed = [true|false] 是否固定顶部 * @property {Boolean} statusBar = [true|false] 是否包含状态栏 * @property {Boolean} shadow = [true|false] 导航栏下是否有阴影 * @event {Function} clickLeft 左侧按钮点击时触发 * @event {Function} clickRight 右侧按钮点击时触发 */
  46.     export default { 
  47.         name: "UniNavBar",
  48.         components: { 
  49.             uniStatusBar,
  50.             uniIcons
  51.         },
  52.         props: { 
  53.             title: { 
  54.                 type: String,
  55.                 default: ""
  56.             },
  57.             leftText: { 
  58.                 type: String,
  59.                 default: ""
  60.             },
  61.             rightText: { 
  62.                 type: String,
  63.                 default: ""
  64.             },
  65.             leftIcon: { 
  66.                 type: String,
  67.                 default: ""
  68.             },
  69.             rightIcon: { 
  70.                 type: String,
  71.                 default: ""
  72.             },
  73.             fixed: { 
  74.                 type: [Boolean, String],
  75.                 default: false
  76.             },
  77.             color: { 
  78.                 type: String,
  79.                 default: "#000000"
  80.             },
  81.             backgroundColor: { 
  82.                 type: String,
  83.                 default: "#FFFFFF"
  84.             },
  85.             statusBar: { 
  86.                 type: [Boolean, String],
  87.                 default: false
  88.             },
  89.             shadow: { 
  90.                 type: [Boolean, String],
  91.                 default: false
  92.             },
  93.             border: { 
  94.                 type: [Boolean, String],
  95.                 default: true
  96.             }
  97.         },
  98.         mounted() { 
  99.             if (uni.report && this.title !== '') { 
  100.                 uni.report('title', this.title)
  101.             }
  102.         },
  103.         methods: { 
  104.             onClickLeft() { 
  105.                 this.$emit("clickLeft");
  106.             },
  107.             onClickRight() { 
  108.                  console.log("规则页面");
  109.             }
  110.         }
  111.     };
  112. </script>
  114. <style scoped>
  115.     .uni-nav-bar-text { 
  116.         /* #ifdef APP-PLUS */
  117.         font-size: 34rpx;
  118.         /* #endif */
  119.         /* #ifndef APP-PLUS */
  120.         font-size: 32rpx;
  121.         /* #endif */
  122.     }
  124.     .uni-nav-bar-right-text { 
  125.         font-size: 28rpx;
  126.     }
  128.     .uni-navbar__content { 
  129.         position: relative;
  130.         background-color: #ffffff;
  131.         overflow: hidden;
  132.     }
  134.     .uni-navbar__content_view { 
  135.         /* #ifndef APP-NVUE */
  136.         display: flex;
  137.         /* #endif */
  138.         align-items: center;
  139.         flex-direction: row;
  140.         /* background-color: #FFFFFF; */
  141.     }
  143.     .uni-navbar__header { 
  144.         /* #ifndef APP-NVUE */
  145.         display: flex;
  146.         /* #endif */
  147.         flex-direction: row;
  148.         height: 44px;
  149.         line-height: 44px;
  150.         font-size: 16px;
  151.         /* background-color: #ffffff; */
  152.     }
  154.     .uni-navbar__header-btns { 
  155.         /* #ifndef APP-NVUE */
  156.         display: flex;
  157.         /* #endif */
  158.         flex-wrap: nowrap;
  159.         width: 120rpx;
  160.         padding: 0 6px;
  161.         justify-content: center;
  162.         align-items: center;
  163.     }
  165.     .uni-navbar__header-btns-left { 
  166.         /* #ifndef APP-NVUE */
  167.         display: flex;
  168.         /* #endif */
  169.         width: 150rpx;
  170.         justify-content: flex-start;
  171.     }
  173.     .uni-navbar__header-btns-right { 
  174.         /* #ifndef APP-NVUE */
  175.         display: flex;
  176.         /* #endif */
  177.         width: 150rpx;
  178.         padding-right: 30rpx;
  179.         justify-content: flex-end;
  180.     }
  182.     .uni-navbar__header-container { 
  183.         flex: 1;
  184.     }
  186.     .uni-navbar__header-container-inner { 
  187.         /* #ifndef APP-NVUE */
  188.         display: flex;
  189.         /* #endif */
  190.         flex: 1;
  191.         align-items: center;
  192.         justify-content: center;
  193.         font-size: 28rpx;
  194.     }
  197.     .uni-navbar__placeholder-view { 
  198.         height: 44px;
  199.     }
  201.     .uni-navbar--fixed { 
  202.         position: fixed;
  203.         z-index: 998;
  204.     }
  206.     .uni-navbar--shadow { 
  207.         /* #ifndef APP-NVUE */
  208.         box-shadow: 0 1px 6px #ccc;
  209.         /* #endif */
  210.     }
  212.     .uni-navbar--border { 
  213.         /* border-bottom-width: 1rpx; border-bottom-style: solid; border-bottom-color: #e5e5e5; */
  214.     }
  215. </style>

上面的这个组件比较麻烦，可以通过下面的组件进行封装一下，完全可以满足普通的标题栏的方案：
普通的标题栏都是可以满足的，左右侧按钮，背景颜色，字体颜色等都是可以设置的。
封装如下：

  1. <template>
  2.     <uni-nav-bar 
  3.         :title="title" 
  4.         leftIcon="arrowleft" 
  5.         :statusBar="true" 
  6.         @clickLeft="clickLeft" 
  7.         :fixed="true" 
  8.         :shadow="shadow" 
  9.         :backgroundColor="backgroundColor"
  10.         :rightText="rightText"
  11.         :color="color"/>
  12. </template>
  14. <script>
  15.     import uniNavBar from '@/components/uni-nav-bar/uni-nav-bar.vue'
  16.     export default { 
  17.         components:{ uniNavBar},
  18.         props:{ 
  19.             title:{ 
  20.                 type:String,
  21.                 default:"标题"
  22.             },
  23.             shadow:{ 
  24.                 type:Boolean,
  25.                 default:false
  26.             },
  27.             backgroundColor:{ 
  28.                 type:String,
  29.                 default:null
  30.             },
  31.             color:{ 
  32.                 type:String,
  33.                 default:"#000"
  34.             },
  35.             rightText:{ 
  36.                 type:String,
  37.                 default:""
  38.             }
  39.         },
  40.         methods:{ 
  41.             clickLeft(){ 
  42.                 uni.navigateBack({ 
  43.                     delta:1
  44.                 })
  45.             }
  46.         }
  47.     }
  48. </script>

为了实现透明的标题栏，只需要将上面封装好的组件中的背景颜色改为透明色即可。

签到部分七天的渲染

在这里插入图片描述
渲染签到部分的时候，出现了一个图片展示不出来的问题。浏览器端是可以i展示的，但是app端不展示。

最终改为下面的这种展示形式：<image :src="item.status==0?'/static/sign/money.png':(item.status==1?'/static/sign/bu.png':(item.status==2?'/static/sign/redBag.png':(item.status==3?'/static/sign/gift.png':'/static/sign/giftOpen.png')))" mode="heightFix"></image> 就可以了。

图片展示不出来，是因为image标签不支持本地图片与动态图片的同时展示，如果根据动态数据来展示不同的本地图片，则可以通过下面的这种方式来处理。就是通过三目运算的这种方式。

  1. <view class="signDay">
  2.     <view class="dayTit" v-for="(item,index) in dayList" :key="item.num">
  3.         <image :src="item.status==0?'/static/sign/money.png':(item.status==1?'/static/sign/bu.png':(item.status==2?'/static/sign/redBag.png':(item.status==3?'/static/sign/gift.png':'/static/sign/giftOpen.png')))" mode="heightFix"></image>
  4.         <text>第<text>{ { item.num | dayFilter}}</text>天</text>
  5.     </view>
  6. </view>

page背景颜色设置失败

在这里插入图片描述
由于页面下面部分是分页加载的商品列表，在下拉触底的时候，会自动加载下一页的数据。因此背景颜色我需要设置一下。

给page添加背景颜色的时候，发现设置了不管用。

百度一番后，发现需要去掉style标签上的scoped，page就可以设置成功了。

  1. <style lang="scss">
  2.     page{ 
  3.         width:100vw;
  4.         height:100vh;
  5.         width:100%;
  6.         height:100%;
  7.         background:#FDE788;
  8.     }
  9. </style>

签到弹窗的处理

在这里插入图片描述
这个就是一个普通的animation.css动画。
这个后续再涉及。

接口处理的过程中，如果有遇到什么问题，我会及时补充。

发表评论

表情：
评论列表 （有 0 条评论，1295人围观）

还没有评论，来说两句吧...

相关阅读