更新大理市民卡app
diff --git a/uview-ui/components/u-button/u-button.vue b/uview-ui/components/u-button/u-button.vue
new file mode 100644
index 0000000..82c3a6f
--- /dev/null
+++ b/uview-ui/components/u-button/u-button.vue
@@ -0,0 +1,596 @@
+<template>
+ <button
+ id="u-wave-btn"
+ class="u-btn u-line-1 u-fix-ios-appearance"
+ :class="[
+ 'u-size-' + size,
+ plain ? 'u-btn--' + type + '--plain' : '',
+ loading ? 'u-loading' : '',
+ shape == 'circle' ? 'u-round-circle' : '',
+ hairLine ? showHairLineBorder : 'u-btn--bold-border',
+ 'u-btn--' + type,
+ disabled ? `u-btn--${type}--disabled` : '',
+ ]"
+ :hover-start-time="Number(hoverStartTime)"
+ :hover-stay-time="Number(hoverStayTime)"
+ :disabled="disabled"
+ :form-type="formType"
+ :open-type="openType"
+ :app-parameter="appParameter"
+ :hover-stop-propagation="hoverStopPropagation"
+ :send-message-title="sendMessageTitle"
+ send-message-path="sendMessagePath"
+ :lang="lang"
+ :data-name="dataName"
+ :session-from="sessionFrom"
+ :send-message-img="sendMessageImg"
+ :show-message-card="showMessageCard"
+ @getphonenumber="getphonenumber"
+ @getuserinfo="getuserinfo"
+ @error="error"
+ @opensetting="opensetting"
+ @launchapp="launchapp"
+ :style="[customStyle, {
+ overflow: ripple ? 'hidden' : 'visible'
+ }]"
+ @tap.stop="click($event)"
+ :hover-class="getHoverClass"
+ :loading="loading"
+ >
+ <slot></slot>
+ <view
+ v-if="ripple"
+ class="u-wave-ripple"
+ :class="[waveActive ? 'u-wave-active' : '']"
+ :style="{
+ top: rippleTop + 'px',
+ left: rippleLeft + 'px',
+ width: fields.targetWidth + 'px',
+ height: fields.targetWidth + 'px',
+ 'background-color': rippleBgColor || 'rgba(0, 0, 0, 0.15)'
+ }"
+ ></view>
+ </button>
+</template>
+
+<script>
+/**
+ * button 按钮
+ * @description Button 按钮
+ * @tutorial https://www.uviewui.com/components/button.html
+ * @property {String} size 按钮的大小
+ * @property {Boolean} ripple 是否开启点击水波纹效果
+ * @property {String} ripple-bg-color 水波纹的背景色，ripple为true时有效
+ * @property {String} type 按钮的样式类型
+ * @property {Boolean} plain 按钮是否镂空，背景色透明
+ * @property {Boolean} disabled 是否禁用
+ * @property {Boolean} hair-line 是否显示按钮的细边框(默认true)
+ * @property {Boolean} shape 按钮外观形状，见文档说明
+ * @property {Boolean} loading 按钮名称前是否带 loading 图标(App-nvue 平台，在 ios 上为雪花，Android上为圆圈)
+ * @property {String} form-type 用于 <form> 组件，点击分别会触发 <form> 组件的 submit/reset 事件
+ * @property {String} open-type 开放能力
+ * @property {String} data-name 额外传参参数，用于小程序的data-xxx属性，通过target.dataset.name获取
+ * @property {String} hover-class 指定按钮按下去的样式类。当 hover-class="none" 时，没有点击态效果(App-nvue 平台暂不支持)
+ * @property {Number} hover-start-time 按住后多久出现点击态，单位毫秒
+ * @property {Number} hover-stay-time 手指松开后点击态保留时间，单位毫秒
+ * @property {Object} custom-style 对按钮的自定义样式，对象形式，见文档说明
+ * @event {Function} click 按钮点击
+ * @event {Function} getphonenumber open-type="getPhoneNumber"时有效
+ * @event {Function} getuserinfo 用户点击该按钮时，会返回获取到的用户信息，从返回参数的detail中获取到的值同uni.getUserInfo
+ * @event {Function} error 当使用开放能力时，发生错误的回调
+ * @event {Function} opensetting 在打开授权设置页并关闭后回调
+ * @event {Function} launchapp 打开 APP 成功的回调
+ * @example <u-button>月落</u-button>
+ */
+export default {
+ name: 'u-button',
+ props: {
+ // 是否细边框
+ hairLine: {
+ type: Boolean,
+ default: true
+ },
+ // 按钮的预置样式，default，primary，error，warning，success
+ type: {
+ type: String,
+ default: 'default'
+ },
+ // 按钮尺寸，default，medium，mini
+ size: {
+ type: String,
+ default: 'default'
+ },
+ // 按钮形状，circle（两边为半圆），square（带圆角）
+ shape: {
+ type: String,
+ default: 'square'
+ },
+ // 按钮是否镂空
+ plain: {
+ type: Boolean,
+ default: false
+ },
+ // 是否禁止状态
+ disabled: {
+ type: Boolean,
+ default: false
+ },
+ // 是否加载中
+ loading: {
+ type: Boolean,
+ default: false
+ },
+ // 开放能力，具体请看uniapp稳定关于button组件部分说明
+ // https://uniapp.dcloud.io/component/button
+ openType: {
+ type: String,
+ default: ''
+ },
+ // 用于 <form> 组件，点击分别会触发 <form> 组件的 submit/reset 事件
+ // 取值为submit（提交表单），reset（重置表单）
+ formType: {
+ type: String,
+ default: ''
+ },
+ // 打开 APP 时，向 APP 传递的参数，open-type=launchApp时有效
+ // 只微信小程序、QQ小程序有效
+ appParameter: {
+ type: String,
+ default: ''
+ },
+ // 指定是否阻止本节点的祖先节点出现点击态，微信小程序有效
+ hoverStopPropagation: {
+ type: Boolean,
+ default: false
+ },
+ // 指定返回用户信息的语言，zh_CN 简体中文，zh_TW 繁体中文，en 英文。只微信小程序有效
+ lang: {
+ type: String,
+ default: 'en'
+ },
+ // 会话来源，open-type="contact"时有效。只微信小程序有效
+ sessionFrom: {
+ type: String,
+ default: ''
+ },
+ // 会话内消息卡片标题，open-type="contact"时有效
+ // 默认当前标题，只微信小程序有效
+ sendMessageTitle: {
+ type: String,
+ default: ''
+ },
+ // 会话内消息卡片点击跳转小程序路径，open-type="contact"时有效
+ // 默认当前分享路径，只微信小程序有效
+ sendMessagePath: {
+ type: String,
+ default: ''
+ },
+ // 会话内消息卡片图片，open-type="contact"时有效
+ // 默认当前页面截图，只微信小程序有效
+ sendMessageImg: {
+ type: String,
+ default: ''
+ },
+ // 是否显示会话内消息卡片，设置此参数为 true，用户进入客服会话会在右下角显示"可能要发送的小程序"提示，
+ // 用户点击后可以快速发送小程序消息，open-type="contact"时有效
+ showMessageCard: {
+ type: Boolean,
+ default: false
+ },
+ // 手指按（触摸）按钮时按钮时的背景颜色
+ hoverBgColor: {
+ type: String,
+ default: ''
+ },
+ // 水波纹的背景颜色
+ rippleBgColor: {
+ type: String,
+ default: ''
+ },
+ // 是否开启水波纹效果
+ ripple: {
+ type: Boolean,
+ default: false
+ },
+ // 按下的类名
+ hoverClass: {
+ type: String,
+ default: ''
+ },
+ // 自定义样式，对象形式
+ customStyle: {
+ type: Object,
+ default() {
+ return {};
+ }
+ },
+ // 额外传参参数，用于小程序的data-xxx属性，通过target.dataset.name获取
+ dataName: {
+ type: String,
+ default: ''
+ },
+ // 节流，一定时间内只能触发一次
+ throttleTime: {
+ type: [String, Number],
+ default: 1000
+ },
+ // 按住后多久出现点击态，单位毫秒
+ hoverStartTime: {
+ type: [String, Number],
+ default: 20
+ },
+ // 手指松开后点击态保留时间，单位毫秒
+ hoverStayTime: {
+ type: [String, Number],
+ default: 150
+ },
+ },
+ computed: {
+ // 当没有传bgColor变量时，按钮按下去的颜色类名
+ getHoverClass() {
+ // 如果开启水波纹效果，则不启用hover-class效果
+ if (this.loading || this.disabled || this.ripple || this.hoverClass) return '';
+ let hoverClass = '';
+ hoverClass = this.plain ? 'u-' + this.type + '-plain-hover' : 'u-' + this.type + '-hover';
+ return hoverClass;
+ },
+ // 在'primary', 'success', 'error', 'warning'类型下，不显示边框，否则会造成四角有毛刺现象
+ showHairLineBorder() {
+ if (['primary', 'success', 'error', 'warning'].indexOf(this.type) >= 0 && !this.plain) {
+ return '';
+ } else {
+ return 'u-hairline-border';
+ }
+ }
+ },
+ data() {
+ return {
+ rippleTop: 0, // 水波纹的起点Y坐标到按钮上边界的距离
+ rippleLeft: 0, // 水波纹起点X坐标到按钮左边界的距离
+ fields: {}, // 波纹按钮节点信息
+ waveActive: false // 激活水波纹
+ };
+ },
+ methods: {
+ // 按钮点击
+ click(e) {
+ // 进行节流控制，每this.throttle毫秒内，只在开始处执行
+ this.$u.throttle(() => {
+ // 如果按钮时disabled和loading状态，不触发水波纹效果
+ if (this.loading === true || this.disabled === true) return;
+ // 是否开启水波纹效果
+ if (this.ripple) {
+ // 每次点击时，移除上一次的类，再次添加，才能触发动画效果
+ this.waveActive = false;
+ this.$nextTick(function() {
+ this.getWaveQuery(e);
+ });
+ }
+ this.$emit('click', e);
+ }, this.throttleTime);
+ },
+ // 查询按钮的节点信息
+ getWaveQuery(e) {
+ this.getElQuery().then(res => {
+ // 查询返回的是一个数组节点
+ let data = res[0];
+ // 查询不到节点信息，不操作
+ if (!data.width || !data.width) return;
+ // 水波纹的最终形态是一个正方形(通过border-radius让其变为一个圆形)，这里要保证正方形的边长等于按钮的最长边
+ // 最终的方形（变换后的圆形）才能覆盖整个按钮
+ data.targetWidth = data.height > data.width ? data.height : data.width;
+ if (!data.targetWidth) return;
+ this.fields = data;
+ let touchesX = '',
+ touchesY = '';
+ // #ifdef MP-BAIDU
+ touchesX = e.changedTouches[0].clientX;
+ touchesY = e.changedTouches[0].clientY;
+ // #endif
+ // #ifdef MP-ALIPAY
+ touchesX = e.detail.clientX;
+ touchesY = e.detail.clientY;
+ // #endif
+ // #ifndef MP-BAIDU || MP-ALIPAY
+ touchesX = e.touches[0].clientX;
+ touchesY = e.touches[0].clientY;
+ // #endif
+ // 获取触摸点相对于按钮上边和左边的x和y坐标，原理是通过屏幕的触摸点（touchesY），减去按钮的上边界data.top
+ // 但是由于`transform-origin`默认是center，所以这里再减去半径才是水波纹view应该的位置
+ // 总的来说，就是把水波纹的矩形（变换后的圆形）的中心点，移动到我们的触摸点位置
+ this.rippleTop = touchesY - data.top - data.targetWidth / 2;
+ this.rippleLeft = touchesX - data.left - data.targetWidth / 2;
+ this.$nextTick(() => {
+ this.waveActive = true;
+ });
+ });
+ },
+ // 获取节点信息
+ getElQuery() {
+ return new Promise(resolve => {
+ let queryInfo = '';
+ // 获取元素节点信息，请查看uniapp相关文档
+ // https://uniapp.dcloud.io/api/ui/nodes-info?id=nodesrefboundingclientrect
+ queryInfo = uni.createSelectorQuery().in(this);
+ //#ifdef MP-ALIPAY
+ queryInfo = uni.createSelectorQuery();
+ //#endif
+ queryInfo.select('.u-btn').boundingClientRect();
+ queryInfo.exec(data => {
+ resolve(data);
+ });
+ });
+ },
+ // 下面为对接uniapp官方按钮开放能力事件回调的对接
+ getphonenumber(res) {
+ this.$emit('getphonenumber', res);
+ },
+ getuserinfo(res) {
+ this.$emit('getuserinfo', res);
+ },
+ error(res) {
+ this.$emit('error', res);
+ },
+ opensetting(res) {
+ this.$emit('opensetting', res);
+ },
+ launchapp(res) {
+ this.$emit('launchapp', res);
+ }
+ }
+};
+</script>
+
+<style scoped lang="scss">
+@import '../../libs/css/style.components.scss';
+.u-btn::after {
+ border: none;
+}
+
+.u-btn {
+ position: relative;
+ border: 0;
+ //border-radius: 10rpx;
+ /* #ifndef APP-NVUE */
+ display: inline-flex;
+ /* #endif */
+ // 避免边框某些场景可能被“裁剪”，不能设置为hidden
+ overflow: visible;
+ line-height: 1;
+ @include vue-flex;
+ align-items: center;
+ justify-content: center;
+ cursor: pointer;
+ padding: 0 40rpx;
+ z-index: 1;
+ box-sizing: border-box;
+ transition: all 0.15s;
+
+ &--bold-border {
+ border: 1px solid #ffffff;
+ }
+
+ &--default {
+ color: $u-content-color;
+ border-color: #c0c4cc;
+ background-color: #ffffff;
+ }
+
+ &--primary {
+ color: #ffffff;
+ border-color: $u-type-primary;
+ background-color: $u-type-primary;
+ }
+
+ &--success {
+ color: #ffffff;
+ border-color: $u-type-success;
+ background-color: $u-type-success;
+ }
+
+ &--error {
+ color: #ffffff;
+ border-color: $u-type-error;
+ background-color: $u-type-error;
+ }
+
+ &--warning {
+ color: #ffffff;
+ border-color: $u-type-warning;
+ background-color: $u-type-warning;
+ }
+
+ &--default--disabled {
+ color: #ffffff;
+ border-color: #e4e7ed;
+ background-color: #ffffff;
+ }
+
+ &--primary--disabled {
+ color: #ffffff!important;
+ border-color: $u-type-primary-disabled!important;
+ background-color: $u-type-primary-disabled!important;
+ }
+
+ &--success--disabled {
+ color: #ffffff!important;
+ border-color: $u-type-success-disabled!important;
+ background-color: $u-type-success-disabled!important;
+ }
+
+ &--error--disabled {
+ color: #ffffff!important;
+ border-color: $u-type-error-disabled!important;
+ background-color: $u-type-error-disabled!important;
+ }
+
+ &--warning--disabled {
+ color: #ffffff!important;
+ border-color: $u-type-warning-disabled!important;
+ background-color: $u-type-warning-disabled!important;
+ }
+
+ &--primary--plain {
+ color: $u-type-primary!important;
+ border-color: $u-type-primary-disabled!important;
+ background-color: $u-type-primary-light!important;
+ }
+
+ &--success--plain {
+ color: $u-type-success!important;
+ border-color: $u-type-success-disabled!important;
+ background-color: $u-type-success-light!important;
+ }
+
+ &--error--plain {
+ color: $u-type-error!important;
+ border-color: $u-type-error-disabled!important;
+ background-color: $u-type-error-light!important;
+ }
+
+ &--warning--plain {
+ color: $u-type-warning!important;
+ border-color: $u-type-warning-disabled!important;
+ background-color: $u-type-warning-light!important;
+ }
+}
+
+.u-hairline-border:after {
+ content: ' ';
+ position: absolute;
+ pointer-events: none;
+ // 设置为border-box，意味着下面的scale缩小为0.5，实际上缩小的是伪元素的内容（border-box意味着内容不含border）
+ box-sizing: border-box;
+ // 中心点作为变形(scale())的原点
+ -webkit-transform-origin: 0 0;
+ transform-origin: 0 0;
+ left: 0;
+ top: 0;
+ width: 199.8%;
+ height: 199.7%;
+ -webkit-transform: scale(0.5, 0.5);
+ transform: scale(0.5, 0.5);
+ border: 1px solid currentColor;
+ z-index: 1;
+}
+
+.u-wave-ripple {
+ z-index: 0;
+ position: absolute;
+ border-radius: 100%;
+ background-clip: padding-box;
+ pointer-events: none;
+ user-select: none;
+ transform: scale(0);
+ opacity: 1;
+ transform-origin: center;
+}
+
+.u-wave-ripple.u-wave-active {
+ opacity: 0;
+ transform: scale(2);
+ transition: opacity 1s linear, transform 0.4s linear;
+}
+
+.u-round-circle {
+ border-radius: 100rpx;
+}
+
+.u-round-circle::after {
+ border-radius: 100rpx;
+}
+
+.u-loading::after {
+ background-color: hsla(0, 0%, 100%, 0.35);
+}
+
+.u-size-default {
+ font-size: 30rpx;
+ height: 80rpx;
+ line-height: 80rpx;
+}
+
+.u-size-medium {
+ /* #ifndef APP-NVUE */
+ display: inline-flex;
+ /* #endif */
+ width: auto;
+ font-size: 26rpx;
+ height: 70rpx;
+ line-height: 70rpx;
+ padding: 0 80rpx;
+}
+
+.u-size-mini {
+ /* #ifndef APP-NVUE */
+ display: inline-flex;
+ /* #endif */
+ width: auto;
+ font-size: 22rpx;
+ padding-top: 1px;
+ height: 50rpx;
+ line-height: 50rpx;
+ padding: 0 20rpx;
+}
+
+.u-primary-plain-hover {
+ color: #ffffff !important;
+ background: $u-type-primary-dark !important;
+}
+
+.u-default-plain-hover {
+ color: $u-type-primary-dark !important;
+ background: $u-type-primary-light !important;
+}
+
+.u-success-plain-hover {
+ color: #ffffff !important;
+ background: $u-type-success-dark !important;
+}
+
+.u-warning-plain-hover {
+ color: #ffffff !important;
+ background: $u-type-warning-dark !important;
+}
+
+.u-error-plain-hover {
+ color: #ffffff !important;
+ background: $u-type-error-dark !important;
+}
+
+.u-info-plain-hover {
+ color: #ffffff !important;
+ background: $u-type-info-dark !important;
+}
+
+.u-default-hover {
+ color: $u-type-primary-dark !important;
+ border-color: $u-type-primary-dark !important;
+ background-color: $u-type-primary-light !important;
+}
+
+.u-primary-hover {
+ background: $u-type-primary-dark !important;
+ color: #fff;
+}
+
+.u-success-hover {
+ background: $u-type-success-dark !important;
+ color: #fff;
+}
+
+.u-info-hover {
+ background: $u-type-info-dark !important;
+ color: #fff;
+}
+
+.u-warning-hover {
+ background: $u-type-warning-dark !important;
+ color: #fff;
+}
+
+.u-error-hover {
+ background: $u-type-error-dark !important;
+ color: #fff;
+}
+</style>