更新大理市民卡app
diff --git a/uview-ui/components/u-dropdown/u-dropdown.vue b/uview-ui/components/u-dropdown/u-dropdown.vue
new file mode 100644
index 0000000..a62e469
--- /dev/null
+++ b/uview-ui/components/u-dropdown/u-dropdown.vue
@@ -0,0 +1,298 @@
+<template>
+ <view class="u-dropdown">
+ <view class="u-dropdown__menu" :style="{
+ height: $u.addUnit(height)
+ }" :class="{
+ 'u-border-bottom': borderBottom
+ }">
+ <view class="u-dropdown__menu__item" v-for="(item, index) in menuList" :key="index" @tap.stop="menuClick(index)">
+ <view class="u-flex">
+ <text class="u-dropdown__menu__item__text" :style="{
+ color: item.disabled ? '#c0c4cc' : (index === current || highlightIndex == index) ? activeColor : inactiveColor,
+ fontSize: $u.addUnit(titleSize)
+ }">{{item.title}}</text>
+ <view class="u-dropdown__menu__item__arrow" :class="{
+ 'u-dropdown__menu__item__arrow--rotate': index === current
+ }">
+ <u-icon :custom-style="{display: 'flex'}" :name="menuIcon" :size="$u.addUnit(menuIconSize)" :color="index === current || highlightIndex == index ? activeColor : '#c0c4cc'"></u-icon>
+ </view>
+ </view>
+ </view>
+ </view>
+ <view class="u-dropdown__content" :style="[contentStyle, {
+ transition: `opacity ${duration / 1000}s linear`,
+ top: $u.addUnit(height),
+ height: contentHeight + 'px'
+ }]"
+ @tap="maskClick" @touchmove.stop.prevent>
+ <view @tap.stop.prevent class="u-dropdown__content__popup" :style="[popupStyle]">
+ <slot></slot>
+ </view>
+ <view class="u-dropdown__content__mask"></view>
+ </view>
+ </view>
+</template>
+
+<script>
+ /**
+ * dropdown 下拉菜单
+ * @description 该组件一般用于向下展开菜单，同时可切换多个选项卡的场景
+ * @tutorial http://uviewui.com/components/dropdown.html
+ * @property {String} active-color 标题和选项卡选中的颜色（默认#2979ff）
+ * @property {String} inactive-color 标题和选项卡未选中的颜色（默认#606266）
+ * @property {Boolean} close-on-click-mask 点击遮罩是否关闭菜单（默认true）
+ * @property {Boolean} close-on-click-self 点击当前激活项标题是否关闭菜单（默认true）
+ * @property {String | Number} duration 选项卡展开和收起的过渡时间，单位ms（默认300）
+ * @property {String | Number} height 标题菜单的高度，单位任意（默认80）
+ * @property {String | Number} border-radius 菜单展开内容下方的圆角值，单位任意（默认0）
+ * @property {Boolean} border-bottom 标题菜单是否显示下边框（默认false）
+ * @property {String | Number} title-size 标题的字体大小，单位任意，数值默认为rpx单位（默认28）
+ * @event {Function} open 下拉菜单被打开时触发
+ * @event {Function} close 下拉菜单被关闭时触发
+ * @example <u-dropdown></u-dropdown>
+ */
+ export default {
+ name: 'u-dropdown',
+ props: {
+ // 菜单标题和选项的激活态颜色
+ activeColor: {
+ type: String,
+ default: '#2979ff'
+ },
+ // 菜单标题和选项的未激活态颜色
+ inactiveColor: {
+ type: String,
+ default: '#606266'
+ },
+ // 点击遮罩是否关闭菜单
+ closeOnClickMask: {
+ type: Boolean,
+ default: true
+ },
+ // 点击当前激活项标题是否关闭菜单
+ closeOnClickSelf: {
+ type: Boolean,
+ default: true
+ },
+ // 过渡时间
+ duration: {
+ type: [Number, String],
+ default: 300
+ },
+ // 标题菜单的高度，单位任意，数值默认为rpx单位
+ height: {
+ type: [Number, String],
+ default: 80
+ },
+ // 是否显示下边框
+ borderBottom: {
+ type: Boolean,
+ default: false
+ },
+ // 标题的字体大小
+ titleSize: {
+ type: [Number, String],
+ default: 28
+ },
+ // 下拉出来的内容部分的圆角值
+ borderRadius: {
+ type: [Number, String],
+ default: 0
+ },
+ // 菜单右侧的icon图标
+ menuIcon: {
+ type: String,
+ default: 'arrow-down'
+ },
+ // 菜单右侧图标的大小
+ menuIconSize: {
+ type: [Number, String],
+ default: 26
+ }
+ },
+ data() {
+ return {
+ showDropdown: true, // 是否打开下来菜单,
+ menuList: [], // 显示的菜单
+ active: false, // 下拉菜单的状态
+ // 当前是第几个菜单处于激活状态，小程序中此处不能写成false或者""，否则后续将current赋值为0，
+ // 无能的TX没有使用===而是使用==判断，导致程序认为前后二者没有变化，从而不会触发视图更新
+ current: 99999,
+ // 外层内容的样式，初始时处于底层，且透明
+ contentStyle: {
+ zIndex: -1,
+ opacity: 0
+ },
+ // 让某个菜单保持高亮的状态
+ highlightIndex: 99999,
+ contentHeight: 0
+ }
+ },
+ computed: {
+ // 下拉出来部分的样式
+ popupStyle() {
+ let style = {};
+ // 进行Y轴位移，展开状态时，恢复原位。收齐状态时，往上位移100%，进行隐藏
+ style.transform = `translateY(${this.active ? 0 : '-100%'})`
+ style['transition-duration'] = this.duration / 1000 + 's';
+ style.borderRadius = `0 0 ${this.$u.addUnit(this.borderRadius)} ${this.$u.addUnit(this.borderRadius)}`;
+ return style;
+ }
+ },
+ created() {
+ // 引用所有子组件(u-dropdown-item)的this，不能在data中声明变量，否则在微信小程序会造成循环引用而报错
+ this.children = [];
+ },
+ mounted() {
+ this.getContentHeight();
+ },
+ methods: {
+ init() {
+ // 当某个子组件内容变化时，触发父组件的init，父组件再让每一个子组件重新初始化一遍
+ // 以保证数据的正确性
+ this.menuList = [];
+ this.children.map(child => {
+ child.init();
+ })
+ },
+ // 点击菜单
+ menuClick(index) {
+ // 判断是否被禁用
+ if (this.menuList[index].disabled) return;
+ // 如果点击时的索引和当前激活项索引相同，意味着点击了激活项，需要收起下拉菜单
+ if (index === this.current && this.closeOnClickSelf) {
+ this.close();
+ // 等动画结束后，再移除下拉菜单中的内容，否则直接移除，也就没有下拉菜单收起的效果了
+ setTimeout(() => {
+ this.children[index].active = false;
+ }, this.duration)
+ return;
+ }
+ this.open(index);
+ },
+ // 打开下拉菜单
+ open(index) {
+ // 重置高亮索引，否则会造成多个菜单同时高亮
+ // this.highlightIndex = 9999;
+ // 展开时，设置下拉内容的样式
+ this.contentStyle = {
+ zIndex: 11,
+ }
+ // 标记展开状态以及当前展开项的索引
+ this.active = true;
+ this.current = index;
+ // 历遍所有的子元素，将索引匹配的项标记为激活状态，因为子元素是通过v-if控制切换的
+ // 之所以不是因display: none，是因为nvue没有display这个属性
+ this.children.map((val, idx) => {
+ val.active = index == idx ? true : false;
+ })
+ this.$emit('open', this.current);
+ },
+ // 设置下拉菜单处于收起状态
+ close() {
+ this.$emit('close', this.current);
+ // 设置为收起状态，同时current归位，设置为空字符串
+ this.active = false;
+ this.current = 99999;
+ // 下拉内容的样式进行调整，不透明度设置为0
+ this.contentStyle = {
+ zIndex: -1,
+ opacity: 0
+ }
+ },
+ // 点击遮罩
+ maskClick() {
+ // 如果不允许点击遮罩，直接返回
+ if (!this.closeOnClickMask) return;
+ this.close();
+ },
+ // 外部手动设置某个菜单高亮
+ highlight(index = undefined) {
+ this.highlightIndex = index !== undefined ? index : 99999;
+ },
+ // 获取下拉菜单内容的高度
+ getContentHeight() {
+ // 这里的原理为，因为dropdown组件是相对定位的，它的下拉出来的内容，必须给定一个高度
+ // 才能让遮罩占满菜单一下，直到屏幕底部的高度
+ // this.$u.sys()为uView封装的获取设备信息的方法
+ let windowHeight = this.$u.sys().windowHeight;
+ this.$uGetRect('.u-dropdown__menu').then(res => {
+ // 这里获取的是dropdown的尺寸，在H5上，uniapp获取尺寸是有bug的(以前提出修复过，后来又出现了此bug，目前hx2.8.11版本)
+ // H5端bug表现为元素尺寸的top值为导航栏底部到到元素的上边沿的距离，但是元素的bottom值确是导航栏顶部到元素底部的距离
+ // 二者是互相矛盾的，本质原因是H5端导航栏非原生，uni的开发者大意造成
+ // 这里取菜单栏的botton值合理的，不能用res.top，否则页面会造成滚动
+ this.contentHeight = windowHeight - res.bottom;
+ })
+ }
+ }
+ }
+</script>
+
+<style scoped lang="scss">
+ @import "../../libs/css/style.components.scss";
+
+ .u-dropdown {
+ flex: 1;
+ width: 100%;
+ position: relative;
+
+ &__menu {
+ @include vue-flex;
+ position: relative;
+ z-index: 11;
+ height: 80rpx;
+
+ &__item {
+ flex: 1;
+ @include vue-flex;
+ justify-content: center;
+ align-items: center;
+
+ &__text {
+ font-size: 28rpx;
+ color: $u-content-color;
+ }
+
+ &__arrow {
+ margin-left: 6rpx;
+ transition: transform .3s;
+ align-items: center;
+ @include vue-flex;
+
+ &--rotate {
+ transform: rotate(180deg);
+ }
+ }
+ }
+ }
+
+ &__content {
+ position: absolute;
+ z-index: 8;
+ width: 100%;
+ left: 0px;
+ bottom: 0;
+ overflow: hidden;
+
+
+ &__mask {
+ position: absolute;
+ z-index: 9;
+ background: rgba(0, 0, 0, .3);
+ width: 100%;
+ left: 0;
+ top: 0;
+ bottom: 0;
+ }
+
+ &__popup {
+ position: relative;
+ z-index: 10;
+ transition: all 0.3s;
+ transform: translate3D(0, -100%, 0);
+ overflow: hidden;
+ }
+ }
+
+ }
+</style>