更新大理市民卡app
diff --git a/uview-ui/components/u-subsection/u-subsection.vue b/uview-ui/components/u-subsection/u-subsection.vue
new file mode 100644
index 0000000..b8fbd79
--- /dev/null
+++ b/uview-ui/components/u-subsection/u-subsection.vue
@@ -0,0 +1,355 @@
+<template>
+ <view class="u-subsection" :style="[subsectionStyle]">
+ <view class="u-item u-line-1" :style="[itemStyle(index)]" @tap="click(index)" :class="[noBorderRight(index), 'u-item-' + index]"
+ v-for="(item, index) in listInfo" :key="index">
+ <view :style="[textStyle(index)]" class="u-item-text u-line-1">{{ item.name }}</view>
+ </view>
+ <view class="u-item-bg" :style="[itemBarStyle]"></view>
+ </view>
+</template>
+
+<script>
+ /**
+ * subsection 分段器
+ * @description 该分段器一般用于用户从几个选项中选择某一个的场景
+ * @tutorial https://www.uviewui.com/components/subsection.html
+ * @property {Array} list 选项的数组，形式见上方"基本使用"
+ * @property {String Number} current 初始化时默认选中的选项索引值（默认0）
+ * @property {String} active-color 激活时的颜色，mode为subsection时固定为白色（默认#303133）
+ * @property {String} inactive-color 未激活时字体的颜色，mode为subsection时无效（默认#606266）
+ * @property {String} mode 模式选择，见官网"模式选择"说明（默认button）
+ * @property {String Number} font-size 字体大小，单位rpx（默认28）
+ * @property {String Number} height 组件高度，单位rpx（默认70）
+ * @property {Boolean} animation 是否开启动画效果，见上方说明（默认true）
+ * @property {Boolean} bold 激活选项的字体是否加粗（默认true）
+ * @property {String} bg-color 组件背景颜色，mode为button时有效（默认#eeeeef）
+ * @property {String} button-color 按钮背景颜色，mode为button时有效（默认#ffffff）
+ * @event {Function} change 分段器选项发生改变时触发
+ * @example <u-subsection active-color="#ff9900"></u-subsection>
+ */
+ export default {
+ name: "u-subsection",
+ props: {
+ // tab的数据
+ list: {
+ type: Array,
+ default () {
+ return [];
+ }
+ },
+ // 当前活动的tab的index
+ current: {
+ type: [Number, String],
+ default: 0
+ },
+ // 激活的颜色
+ activeColor: {
+ type: String,
+ default: '#303133'
+ },
+ // 未激活的颜色
+ inactiveColor: {
+ type: String,
+ default: '#606266'
+ },
+ // 模式选择，mode=button为按钮形式，mode=subsection时为分段模式
+ mode: {
+ type: String,
+ default: 'button'
+ },
+ // 字体大小，单位rpx
+ fontSize: {
+ type: [Number, String],
+ default: 28
+ },
+ // 是否开启动画效果
+ animation: {
+ type: Boolean,
+ default: true
+ },
+ // 组件的高度，单位rpx
+ height: {
+ type: [Number, String],
+ default: 70
+ },
+ // 激活tab的字体是否加粗
+ bold: {
+ type: Boolean,
+ default: true
+ },
+ // mode=button时，组件背景颜色
+ bgColor: {
+ type: String,
+ default: '#eeeeef'
+ },
+ // mode = button时，滑块背景颜色
+ buttonColor: {
+ type: String,
+ default: '#ffffff'
+ },
+ // 在切换分段器的时候，是否让设备震一下
+ vibrateShort: {
+ type: Boolean,
+ default: false
+ }
+ },
+ data() {
+ return {
+ listInfo: [],
+ itemBgStyle: {
+ width: 0,
+ left: 0,
+ backgroundColor: '#ffffff',
+ height: '100%',
+ transition: ''
+ },
+ currentIndex: this.current,
+ buttonPadding: 3, // mode = button 时，组件的内边距
+ borderRadius: 5, // 圆角值
+ firstTimeVibrateShort: true // 组件初始化时，会触发current变化，此时不应震动
+ };
+ },
+ watch: {
+ current: {
+ immediate: true,
+ handler(nVal) {
+ this.currentIndex = nVal;
+ this.changeSectionStatus(nVal);
+ }
+ }
+ },
+ created() {
+ // 将list的数据，传入listInfo数组，因为不能修改props传递的list值
+ // 可以接受直接数组形式，或者数组元素为对象的形式，如：['简介', '评论'],或者[{name: '简介'}, {name: '评论'}]
+ this.listInfo = this.list.map((val, index) => {
+ if (typeof val != 'object') {
+ let obj = {
+ width: 0,
+ name: val
+ };
+ return obj;
+ } else {
+ val.width = 0;
+ return val;
+ }
+ });
+ },
+ computed: {
+ // 设置mode=subsection时，滑块特有的样式
+ noBorderRight() {
+ return index => {
+ if (this.mode != 'subsection') return;
+ let classs = '';
+ // 不显示右边的边框
+ if (index < this.list.length - 1) classs += ' u-none-border-right';
+ // 显示整个组件的左右边圆角
+ if (index == 0) classs += ' u-item-first';
+ if (index == this.list.length - 1) classs += ' u-item-last';
+ return classs;
+ };
+ },
+ // 文字的样式
+ textStyle() {
+ return index => {
+ let style = {};
+ // 设置字体颜色
+ if (this.mode == 'subsection') {
+ if (index == this.currentIndex) {
+ style.color = '#ffffff';
+ } else {
+ style.color = this.activeColor;
+ }
+ } else {
+ if (index == this.currentIndex) {
+ style.color = this.activeColor;
+ } else {
+ style.color = this.inactiveColor;
+ }
+ }
+ // 字体加粗
+ if (index == this.currentIndex && this.bold) style.fontWeight = 'bold';
+ // 文字大小
+ style.fontSize = this.fontSize + 'rpx';
+ return style;
+ };
+ },
+ // 每个分段器item的样式
+ itemStyle() {
+ return index => {
+ let style = {};
+ if (this.mode == 'subsection') {
+ // 设置border的样式
+ style.borderColor = this.activeColor;
+ style.borderWidth = '1px';
+ style.borderStyle = 'solid';
+ }
+ return style;
+ };
+ },
+ // mode=button时，外层view的样式
+ subsectionStyle() {
+ let style = {};
+ style.height = uni.upx2px(this.height) + 'px';
+ if (this.mode == 'button') {
+ style.backgroundColor = this.bgColor;
+ style.padding = `${this.buttonPadding}px`;
+ style.borderRadius = `${this.borderRadius}px`;
+ }
+ return style;
+ },
+ // 滑块的样式
+ itemBarStyle() {
+ let style = {};
+ style.backgroundColor = this.activeColor;
+ style.zIndex = 1;
+ if (this.mode == 'button') {
+ style.backgroundColor = this.buttonColor;
+ style.borderRadius = `${this.borderRadius}px`;
+ style.bottom = `${this.buttonPadding}px`;
+ style.height = uni.upx2px(this.height) - this.buttonPadding * 2 + 'px';
+ style.zIndex = 0;
+ }
+ return Object.assign(this.itemBgStyle, style);
+ }
+ },
+ mounted() {
+ setTimeout(() => {
+ this.getTabsInfo();
+ }, 10);
+ },
+ methods: {
+ // 改变滑块的样式
+ changeSectionStatus(nVal) {
+ if (this.mode == 'subsection') {
+ // 根据滑块在最左边和最右边时，显示左边和右边的圆角
+ if (nVal == this.list.length - 1) {
+ this.itemBgStyle.borderRadius = `0 ${this.buttonPadding}px ${this.buttonPadding}px 0`;
+ }
+ if (nVal == 0) {
+ this.itemBgStyle.borderRadius = `${this.buttonPadding}px 0 0 ${this.buttonPadding}px`;
+ }
+ if (nVal > 0 && nVal < this.list.length - 1) {
+ this.itemBgStyle.borderRadius = '0';
+ }
+ }
+ // 更新滑块的位置
+ setTimeout(() => {
+ this.itemBgLeft();
+ }, 10);
+ if (this.vibrateShort && !this.firstTimeVibrateShort) {
+ // 使手机产生短促震动，微信小程序有效，APP(HX 2.6.8)和H5无效
+ // #ifndef H5
+ uni.vibrateShort();
+ // #endif
+ }
+ // 第一次过后，设置firstTimeVibrateShort为false，让其下一次可以震动(如果允许震动的话)
+ this.firstTimeVibrateShort = false;
+ },
+ click(index) {
+ // 不允许点击当前激活选项
+ if (index == this.currentIndex) return;
+ this.currentIndex = index;
+ this.changeSectionStatus(index);
+ this.$emit('change', Number(index));
+ },
+ // 获取各个tab的节点信息
+ getTabsInfo() {
+ let view = uni.createSelectorQuery().in(this);
+ for (let i = 0; i < this.list.length; i++) {
+ view.select('.u-item-' + i).boundingClientRect();
+ }
+ view.exec(res => {
+ if (!res.length) {
+ setTimeout(() => {
+ this.getTabsInfo();
+ return;
+ }, 10);
+ }
+ // 将分段器每个item的宽度，放入listInfo数组
+ res.map((val, index) => {
+ this.listInfo[index].width = val.width;
+ });
+ // 初始化滑块的宽度
+ if (this.mode == 'subsection') {
+ this.itemBgStyle.width = this.listInfo[0].width + 'px';
+ } else if (this.mode == 'button') {
+ this.itemBgStyle.width = this.listInfo[0].width + 'px';
+ }
+ // 初始化滑块的位置
+ this.itemBgLeft();
+ });
+ },
+ itemBgLeft() {
+ // 根据是否开启动画效果，
+ if (this.animation) {
+ this.itemBgStyle.transition = 'all 0.35s';
+ } else {
+ this.itemBgStyle.transition = 'all 0s';
+ }
+ let left = 0;
+ // 计算当前活跃item到组件左边的距离
+ this.listInfo.map((val, index) => {
+ if (index < this.currentIndex) left += val.width;
+ });
+ // 根据mode不同模式，计算滑块需要移动的距离
+ if (this.mode == 'subsection') {
+ this.itemBgStyle.left = left + 'px';
+ } else if (this.mode == 'button') {
+ this.itemBgStyle.left = left + this.buttonPadding + 'px';
+ }
+ }
+ }
+ };
+</script>
+
+<style lang="scss" scoped>
+ @import "../../libs/css/style.components.scss";
+
+ .u-subsection {
+ @include vue-flex;
+ align-items: center;
+ overflow: hidden;
+ position: relative;
+ }
+
+ .u-item {
+ flex: 1;
+ text-align: center;
+ font-size: 26rpx;
+ height: 100%;
+ @include vue-flex;
+ align-items: center;
+ justify-content: center;
+ color: $u-main-color;
+ padding: 0 6rpx;
+ }
+
+ .u-item-bg {
+ background-color: $u-type-primary;
+ position: absolute;
+ z-index: -1;
+ }
+
+ .u-none-border-right {
+ border-right: none !important;
+ }
+
+ .u-item-first {
+ border-top-left-radius: 8rpx;
+ border-bottom-left-radius: 8rpx;
+ }
+
+ .u-item-last {
+ border-top-right-radius: 8rpx;
+ border-bottom-right-radius: 8rpx;
+ }
+
+ .u-item-text {
+ transition: all 0.35s;
+ color: $u-main-color;
+ @include vue-flex;
+ align-items: center;
+ position: relative;
+ z-index: 3;
+ }
+</style>