更新大理市民卡app
diff --git a/uview-ui/components/u-modal/u-modal.vue b/uview-ui/components/u-modal/u-modal.vue
new file mode 100644
index 0000000..ce58113
--- /dev/null
+++ b/uview-ui/components/u-modal/u-modal.vue
@@ -0,0 +1,283 @@
+<template>
+ <view>
+ <u-popup :zoom="zoom" mode="center" :popup="false" :z-index="uZIndex" v-model="value" :length="width"
+ :mask-close-able="maskCloseAble" :border-radius="borderRadius" @close="popupClose" :negative-top="negativeTop">
+ <view class="u-model">
+ <view v-if="showTitle" class="u-model__title u-line-1" :style="[titleStyle]">{{ title }}</view>
+ <view class="u-model__content">
+ <view :style="[contentStyle]" v-if="$slots.default || $slots.$default">
+ <slot />
+ </view>
+ <view v-else class="u-model__content__message" :style="[contentStyle]">{{ content }}</view>
+ </view>
+ <view class="u-model__footer u-border-top" v-if="showCancelButton || showConfirmButton">
+ <view v-if="showCancelButton" :hover-stay-time="100" hover-class="u-model__btn--hover" class="u-model__footer__button"
+ :style="[cancelBtnStyle]" @tap="cancel">
+ {{cancelText}}
+ </view>
+ <view v-if="showConfirmButton || $slots['confirm-button']" :hover-stay-time="100" :hover-class="asyncClose ? 'none' : 'u-model__btn--hover'"
+ class="u-model__footer__button hairline-left" :style="[confirmBtnStyle]" @tap="confirm">
+ <slot v-if="$slots['confirm-button']" name="confirm-button"></slot>
+ <block v-else>
+ <u-loading mode="circle" :color="confirmColor" v-if="loading"></u-loading>
+ <block v-else>
+ {{confirmText}}
+ </block>
+ </block>
+ </view>
+ </view>
+ </view>
+ </u-popup>
+ </view>
+</template>
+
+<script>
+ /**
+ * modal 模态框
+ * @description 弹出模态框，常用于消息提示、消息确认、在当前页面内完成特定的交互操作
+ * @tutorial https://www.uviewui.com/components/modal.html
+ * @property {Boolean} value 是否显示模态框
+ * @property {String | Number} z-index 层级
+ * @property {String} title 模态框标题（默认"提示"）
+ * @property {String | Number} width 模态框宽度（默认600）
+ * @property {String} content 模态框内容（默认"内容"）
+ * @property {Boolean} show-title 是否显示标题（默认true）
+ * @property {Boolean} async-close 是否异步关闭，只对确定按钮有效（默认false）
+ * @property {Boolean} show-confirm-button 是否显示确认按钮（默认true）
+ * @property {Stringr | Number} negative-top modal往上偏移的值
+ * @property {Boolean} show-cancel-button 是否显示取消按钮（默认false）
+ * @property {Boolean} mask-close-able 是否允许点击遮罩关闭modal（默认false）
+ * @property {String} confirm-text 确认按钮的文字内容（默认"确认"）
+ * @property {String} cancel-text 取消按钮的文字内容（默认"取消"）
+ * @property {String} cancel-color 取消按钮的颜色（默认"#606266"）
+ * @property {String} confirm-color 确认按钮的文字内容（默认"#2979ff"）
+ * @property {String | Number} border-radius 模态框圆角值，单位rpx（默认16）
+ * @property {Object} title-style 自定义标题样式，对象形式
+ * @property {Object} content-style 自定义内容样式，对象形式
+ * @property {Object} cancel-style 自定义取消按钮样式，对象形式
+ * @property {Object} confirm-style 自定义确认按钮样式，对象形式
+ * @property {Boolean} zoom 是否开启缩放模式（默认true）
+ * @event {Function} confirm 确认按钮被点击
+ * @event {Function} cancel 取消按钮被点击
+ * @example <u-modal :src="title" :content="content"></u-modal>
+ */
+ export default {
+ name: 'u-modal',
+ props: {
+ // 是否显示Modal
+ value: {
+ type: Boolean,
+ default: false
+ },
+ // 层级z-index
+ zIndex: {
+ type: [Number, String],
+ default: ''
+ },
+ // 标题
+ title: {
+ type: [String],
+ default: '提示'
+ },
+ // 弹窗宽度，可以是数值(rpx)，百分比，auto等
+ width: {
+ type: [Number, String],
+ default: 600
+ },
+ // 弹窗内容
+ content: {
+ type: String,
+ default: '内容'
+ },
+ // 是否显示标题
+ showTitle: {
+ type: Boolean,
+ default: true
+ },
+ // 是否显示确认按钮
+ showConfirmButton: {
+ type: Boolean,
+ default: true
+ },
+ // 是否显示取消按钮
+ showCancelButton: {
+ type: Boolean,
+ default: false
+ },
+ // 确认文案
+ confirmText: {
+ type: String,
+ default: '确认'
+ },
+ // 取消文案
+ cancelText: {
+ type: String,
+ default: '取消'
+ },
+ // 确认按钮颜色
+ confirmColor: {
+ type: String,
+ default: '#2979ff'
+ },
+ // 取消文字颜色
+ cancelColor: {
+ type: String,
+ default: '#606266'
+ },
+ // 圆角值
+ borderRadius: {
+ type: [Number, String],
+ default: 16
+ },
+ // 标题的样式
+ titleStyle: {
+ type: Object,
+ default () {
+ return {}
+ }
+ },
+ // 内容的样式
+ contentStyle: {
+ type: Object,
+ default () {
+ return {}
+ }
+ },
+ // 取消按钮的样式
+ cancelStyle: {
+ type: Object,
+ default () {
+ return {}
+ }
+ },
+ // 确定按钮的样式
+ confirmStyle: {
+ type: Object,
+ default () {
+ return {}
+ }
+ },
+ // 是否开启缩放效果
+ zoom: {
+ type: Boolean,
+ default: true
+ },
+ // 是否异步关闭，只对确定按钮有效
+ asyncClose: {
+ type: Boolean,
+ default: false
+ },
+ // 是否允许点击遮罩关闭modal
+ maskCloseAble: {
+ type: Boolean,
+ default: false
+ },
+ // 给一个负的margin-top，往上偏移，避免和键盘重合的情况
+ negativeTop: {
+ type: [String, Number],
+ default: 0
+ }
+ },
+ data() {
+ return {
+ loading: false, // 确认按钮是否正在加载中
+ }
+ },
+ computed: {
+ cancelBtnStyle() {
+ return Object.assign({
+ color: this.cancelColor
+ }, this.cancelStyle);
+ },
+ confirmBtnStyle() {
+ return Object.assign({
+ color: this.confirmColor
+ }, this.confirmStyle);
+ },
+ uZIndex() {
+ return this.zIndex ? this.zIndex : this.$u.zIndex.popup;
+ }
+ },
+ watch: {
+ // 如果是异步关闭时，外部修改v-model的值为false时，重置内部的loading状态
+ // 避免下次打开的时候，状态混乱
+ value(n) {
+ if (n === true) this.loading = false;
+ }
+ },
+ methods: {
+ confirm() {
+ // 异步关闭
+ if (this.asyncClose) {
+ this.loading = true;
+ } else {
+ this.$emit('input', false);
+ }
+ this.$emit('confirm');
+ },
+ cancel() {
+ this.$emit('cancel');
+ this.$emit('input', false);
+ // 目前popup弹窗关闭有一个延时操作，此处做一个延时
+ // 避免确认按钮文字变成了"确定"字样，modal还没消失，造成视觉不好的效果
+ setTimeout(() => {
+ this.loading = false;
+ }, 300);
+ },
+ // 点击遮罩关闭modal，设置v-model的值为false，否则无法第二次弹起modal
+ popupClose() {
+ this.$emit('input', false);
+ },
+ // 清除加载中的状态
+ clearLoading() {
+ this.loading = false;
+ }
+ }
+ };
+</script>
+
+<style lang="scss" scoped>
+ @import "../../libs/css/style.components.scss";
+
+ .u-model {
+ height: auto;
+ overflow: hidden;
+ font-size: 32rpx;
+ background-color: #fff;
+
+ &__btn--hover {
+ background-color: rgb(230, 230, 230);
+ }
+
+ &__title {
+ padding-top: 48rpx;
+ font-weight: 500;
+ text-align: center;
+ color: $u-main-color;
+ }
+
+ &__content {
+ &__message {
+ padding: 48rpx;
+ font-size: 30rpx;
+ text-align: center;
+ color: $u-content-color;
+ }
+ }
+
+ &__footer {
+ @include vue-flex;
+
+ &__button {
+ flex: 1;
+ height: 100rpx;
+ line-height: 100rpx;
+ font-size: 32rpx;
+ box-sizing: border-box;
+ cursor: pointer;
+ text-align: center;
+ border-radius: 4rpx;
+ }
+ }
+ }
+</style>