更新大理市民卡app
diff --git a/uview-ui/components/u-back-top/u-back-top.vue b/uview-ui/components/u-back-top/u-back-top.vue
new file mode 100644
index 0000000..7970fc7
--- /dev/null
+++ b/uview-ui/components/u-back-top/u-back-top.vue
@@ -0,0 +1,153 @@
+<template>
+ <view @tap="backToTop" class="u-back-top" :class="['u-back-top--mode--' + mode]" :style="[{
+ bottom: bottom + 'rpx',
+ right: right + 'rpx',
+ borderRadius: mode == 'circle' ? '10000rpx' : '8rpx',
+ zIndex: uZIndex,
+ opacity: opacity
+ }, customStyle]">
+ <view class="u-back-top__content" v-if="!$slots.default && !$slots.$default">
+ <u-icon @click="backToTop" :name="icon" :custom-style="iconStyle"></u-icon>
+ <view class="u-back-top__content__tips">
+ {{tips}}
+ </view>
+ </view>
+ <slot v-else />
+ </view>
+</template>
+
+<script>
+ export default {
+ name: 'u-back-top',
+ props: {
+ // 返回顶部的形状，circle-圆形，square-方形
+ mode: {
+ type: String,
+ default: 'circle'
+ },
+ // 自定义图标
+ icon: {
+ type: String,
+ default: 'arrow-upward'
+ },
+ // 提示文字
+ tips: {
+ type: String,
+ default: ''
+ },
+ // 返回顶部滚动时间
+ duration: {
+ type: [Number, String],
+ default: 100
+ },
+ // 滚动距离
+ scrollTop: {
+ type: [Number, String],
+ default: 0
+ },
+ // 距离顶部多少距离显示，单位rpx
+ top: {
+ type: [Number, String],
+ default: 400
+ },
+ // 返回顶部按钮到底部的距离，单位rpx
+ bottom: {
+ type: [Number, String],
+ default: 200
+ },
+ // 返回顶部按钮到右边的距离，单位rpx
+ right: {
+ type: [Number, String],
+ default: 40
+ },
+ // 层级
+ zIndex: {
+ type: [Number, String],
+ default: '9'
+ },
+ // 图标的样式，对象形式
+ iconStyle: {
+ type: Object,
+ default() {
+ return {
+ color: '#909399',
+ fontSize: '38rpx'
+ }
+ }
+ },
+ // 整个组件的样式
+ customStyle: {
+ type: Object,
+ default() {
+ return {}
+ }
+ }
+ },
+ watch: {
+ showBackTop(nVal, oVal) {
+ // 当组件的显示与隐藏状态发生跳变时，修改组件的层级和不透明度
+ // 让组件有显示和消失的动画效果，如果用v-if控制组件状态，将无设置动画效果
+ if(nVal) {
+ this.uZIndex = this.zIndex;
+ this.opacity = 1;
+ } else {
+ this.uZIndex = -1;
+ this.opacity = 0;
+ }
+ }
+ },
+ computed: {
+ showBackTop() {
+ // 由于scrollTop为页面的滚动距离，默认为px单位，这里将用于传入的top(rpx)值
+ // 转为px用于比较，如果滚动条到顶的距离大于设定的距离，就显示返回顶部的按钮
+ return this.scrollTop > uni.upx2px(this.top);
+ },
+ },
+ data() {
+ return {
+ // 不透明度，为了让组件有一个显示和隐藏的过渡动画
+ opacity: 0,
+ // 组件的z-index值，隐藏时设置为-1，就会看不到
+ uZIndex: -1
+ }
+ },
+ methods: {
+ backToTop() {
+ uni.pageScrollTo({
+ scrollTop: 0,
+ duration: this.duration
+ });
+ }
+ }
+ }
+</script>
+
+<style lang="scss" scoped>
+ @import "../../libs/css/style.components.scss";
+
+ .u-back-top {
+ width: 80rpx;
+ height: 80rpx;
+ position: fixed;
+ z-index: 9;
+ @include vue-flex;
+ flex-direction: column;
+ justify-content: center;
+ background-color: #E1E1E1;
+ color: $u-content-color;
+ align-items: center;
+ transition: opacity 0.4s;
+
+ &__content {
+ @include vue-flex;
+ flex-direction: column;
+ align-items: center;
+
+ &__tips {
+ font-size: 24rpx;
+ transform: scale(0.8);
+ line-height: 1;
+ }
+ }
+ }
+</style>