删除没有的components组件
lemon橪
parent
3f19fc8c15
commit
415dd15dd1
|
|
@ -19,6 +19,7 @@ export function getAddressList(pageNumber, pageSize) {
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 获取物流公司
|
* 获取物流公司
|
||||||
*/
|
*/
|
||||||
|
|
|
||||||
|
|
@ -1,151 +0,0 @@
|
||||||
<template>
|
|
||||||
<text v-if="text" :class="inverted ? 'uni-badge--' + type + ' uni-badge--' + size + ' uni-badge--' + type + '-inverted' : 'uni-badge--' + type + ' uni-badge--' + size"
|
|
||||||
:style="badgeStyle" class="uni-badge" @click="onClick()">{{ text }}</text>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
/**
|
|
||||||
* Badge 数字角标
|
|
||||||
* @description 数字角标一般和其它控件（列表、9宫格等）配合使用，用于进行数量提示，默认为实心灰色背景
|
|
||||||
* @tutorial https://ext.dcloud.net.cn/plugin?id=21
|
|
||||||
* @property {String} text 角标内容
|
|
||||||
* @property {String} type = [default|primary|success|warning|error] 颜色类型
|
|
||||||
* @value default 灰色
|
|
||||||
* @value primary 蓝色
|
|
||||||
* @value success 绿色
|
|
||||||
* @value warning 黄色
|
|
||||||
* @value error 红色
|
|
||||||
* @property {String} size = [normal|small] Badge 大小
|
|
||||||
* @value normal 一般尺寸
|
|
||||||
* @value small 小尺寸
|
|
||||||
* @property {String} inverted = [true|false] 是否无需背景颜色
|
|
||||||
* @event {Function} click 点击 Badge 触发事件
|
|
||||||
* @example <uni-badge text="1"></uni-badge>
|
|
||||||
*/
|
|
||||||
export default {
|
|
||||||
name: 'UniBadge',
|
|
||||||
props: {
|
|
||||||
type: {
|
|
||||||
type: String,
|
|
||||||
default: 'default'
|
|
||||||
},
|
|
||||||
inverted: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false
|
|
||||||
},
|
|
||||||
text: {
|
|
||||||
type: [String, Number],
|
|
||||||
default: ''
|
|
||||||
},
|
|
||||||
size: {
|
|
||||||
type: String,
|
|
||||||
default: 'normal'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
badgeStyle: ''
|
|
||||||
};
|
|
||||||
},
|
|
||||||
watch: {
|
|
||||||
text() {
|
|
||||||
this.setStyle()
|
|
||||||
}
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
this.setStyle()
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
setStyle() {
|
|
||||||
this.badgeStyle = `width: ${String(this.text).length * 8 + 12}px`
|
|
||||||
},
|
|
||||||
onClick() {
|
|
||||||
this.$emit('click');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
$bage-size: 12px;
|
|
||||||
$bage-small: scale(0.8);
|
|
||||||
$bage-height: 20px;
|
|
||||||
|
|
||||||
.uni-badge {
|
|
||||||
/* #ifndef APP-PLUS */
|
|
||||||
display: flex;
|
|
||||||
/* #endif */
|
|
||||||
justify-content: center;
|
|
||||||
flex-direction: row;
|
|
||||||
height: $bage-height;
|
|
||||||
line-height: $bage-height;
|
|
||||||
color: $uni-text-color;
|
|
||||||
border-radius: 100px;
|
|
||||||
background-color: $uni-bg-color-hover;
|
|
||||||
background-color: transparent;
|
|
||||||
text-align: center;
|
|
||||||
font-family: 'Helvetica Neue', Helvetica, sans-serif;
|
|
||||||
font-size: $bage-size;
|
|
||||||
padding: 0px 6px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-badge--inverted {
|
|
||||||
padding: 0 5px 0 0;
|
|
||||||
color: $uni-bg-color-hover;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-badge--default {
|
|
||||||
color: $uni-text-color;
|
|
||||||
background-color: $uni-bg-color-hover;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-badge--default-inverted {
|
|
||||||
color: $uni-text-color-grey;
|
|
||||||
background-color: transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-badge--primary {
|
|
||||||
color: $uni-text-color-inverse;
|
|
||||||
background-color: $uni-color-primary;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-badge--primary-inverted {
|
|
||||||
color: $uni-color-primary;
|
|
||||||
background-color: transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-badge--success {
|
|
||||||
color: $uni-text-color-inverse;
|
|
||||||
background-color: $uni-color-success;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-badge--success-inverted {
|
|
||||||
color: $uni-color-success;
|
|
||||||
background-color: transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-badge--warning {
|
|
||||||
color: $uni-text-color-inverse;
|
|
||||||
background-color: $uni-color-warning;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-badge--warning-inverted {
|
|
||||||
color: $uni-color-warning;
|
|
||||||
background-color: transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-badge--error {
|
|
||||||
color: $uni-text-color-inverse;
|
|
||||||
background-color: $uni-color-error;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-badge--error-inverted {
|
|
||||||
color: $uni-color-error;
|
|
||||||
background-color: transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-badge--small {
|
|
||||||
transform: $bage-small;
|
|
||||||
transform-origin: center center;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,170 +0,0 @@
|
||||||
<template>
|
|
||||||
<view v-if="visibleSync" :class="{ 'uni-drawer--visible': showDrawer }" class="uni-drawer" @touchmove.stop.prevent="clear">
|
|
||||||
<view class="uni-drawer__mask" :class="{ 'uni-drawer__mask--visible': showDrawer && mask }" @tap="close('mask')" />
|
|
||||||
<view class="uni-drawer__content" :class="{'uni-drawer--right': rightMode,'uni-drawer--left': !rightMode, 'uni-drawer__content--visible': showDrawer}" :style="{width:drawerWidth+'px'}">
|
|
||||||
<slot />
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
/**
|
|
||||||
* Drawer 抽屉
|
|
||||||
* @description 抽屉侧滑菜单
|
|
||||||
* @tutorial https://ext.dcloud.net.cn/plugin?id=26
|
|
||||||
* @property {Boolean} mask = [true | false] 是否显示遮罩
|
|
||||||
* @property {Boolean} maskClick = [true | false] 点击遮罩是否关闭
|
|
||||||
* @property {Boolean} mode = [left | right] Drawer 滑出位置
|
|
||||||
* @value left 从左侧滑出
|
|
||||||
* @value right 从右侧侧滑出
|
|
||||||
* @property {Number} width 抽屉的宽度 ，仅 vue 页面生效
|
|
||||||
* @event {Function} close 组件关闭时触发事件
|
|
||||||
*/
|
|
||||||
export default {
|
|
||||||
name: 'UniDrawer',
|
|
||||||
props: {
|
|
||||||
/**
|
|
||||||
* 显示模式（左、右），只在初始化生效
|
|
||||||
*/
|
|
||||||
mode: {
|
|
||||||
type: String,
|
|
||||||
default: ''
|
|
||||||
},
|
|
||||||
/**
|
|
||||||
* 蒙层显示状态
|
|
||||||
*/
|
|
||||||
mask: {
|
|
||||||
type: Boolean,
|
|
||||||
default: true
|
|
||||||
},
|
|
||||||
/**
|
|
||||||
* 遮罩是否可点击关闭
|
|
||||||
*/
|
|
||||||
maskClick:{
|
|
||||||
type: Boolean,
|
|
||||||
default: true
|
|
||||||
},
|
|
||||||
/**
|
|
||||||
* 抽屉宽度
|
|
||||||
*/
|
|
||||||
width: {
|
|
||||||
type: Number,
|
|
||||||
default: 220
|
|
||||||
}
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
visibleSync: false,
|
|
||||||
showDrawer: false,
|
|
||||||
rightMode: false,
|
|
||||||
watchTimer: null,
|
|
||||||
drawerWidth: 220
|
|
||||||
}
|
|
||||||
},
|
|
||||||
created() {
|
|
||||||
// #ifndef APP-NVUE
|
|
||||||
this.drawerWidth = this.width
|
|
||||||
// #endif
|
|
||||||
this.rightMode = this.mode === 'right'
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
clear(){},
|
|
||||||
close(type) {
|
|
||||||
// fixed by mehaotian 抽屉尚未完全关闭或遮罩禁止点击时不触发以下逻辑
|
|
||||||
if((type === 'mask' && !this.maskClick) || !this.visibleSync) return
|
|
||||||
this._change('showDrawer', 'visibleSync', false)
|
|
||||||
},
|
|
||||||
open() {
|
|
||||||
// fixed by mehaotian 处理重复点击打开的事件
|
|
||||||
if(this.visibleSync) return
|
|
||||||
this._change('visibleSync', 'showDrawer', true)
|
|
||||||
},
|
|
||||||
_change(param1, param2, status) {
|
|
||||||
this[param1] = status
|
|
||||||
if (this.watchTimer) {
|
|
||||||
clearTimeout(this.watchTimer)
|
|
||||||
}
|
|
||||||
this.watchTimer = setTimeout(() => {
|
|
||||||
this[param2] = status
|
|
||||||
this.$emit('change',status)
|
|
||||||
}, status ? 50 : 300)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
// 抽屉宽度
|
|
||||||
$drawer-width: 220px;
|
|
||||||
|
|
||||||
.uni-drawer {
|
|
||||||
/* #ifndef APP-NVUE */
|
|
||||||
display: block;
|
|
||||||
/* #endif */
|
|
||||||
position: fixed;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
bottom: 0;
|
|
||||||
overflow: hidden;
|
|
||||||
z-index: 999;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-drawer__content {
|
|
||||||
/* #ifndef APP-NVUE */
|
|
||||||
display: block;
|
|
||||||
/* #endif */
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
width: $drawer-width;
|
|
||||||
bottom: 0;
|
|
||||||
background-color: $uni-bg-color;
|
|
||||||
transition: transform 0.3s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-drawer--left {
|
|
||||||
left: 0;
|
|
||||||
/* #ifdef APP-NVUE */
|
|
||||||
transform: translateX(-$drawer-width);
|
|
||||||
/* #endif */
|
|
||||||
/* #ifndef APP-NVUE */
|
|
||||||
transform: translateX(-100%);
|
|
||||||
/* #endif */
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-drawer--right {
|
|
||||||
right: 0;
|
|
||||||
/* #ifdef APP-NVUE */
|
|
||||||
transform: translateX($drawer-width);
|
|
||||||
/* #endif */
|
|
||||||
/* #ifndef APP-NVUE */
|
|
||||||
transform: translateX(100%);
|
|
||||||
/* #endif */
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-drawer__content--visible {
|
|
||||||
transform: translateX(0px);
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.uni-drawer__mask {
|
|
||||||
/* #ifndef APP-NVUE */
|
|
||||||
display: block;
|
|
||||||
/* #endif */
|
|
||||||
opacity: 0;
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
bottom: 0;
|
|
||||||
right: 0;
|
|
||||||
background-color: $uni-bg-color-mask;
|
|
||||||
transition: opacity 0.3s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-drawer__mask--visible {
|
|
||||||
/* #ifndef APP-NVUE */
|
|
||||||
display: block;
|
|
||||||
/* #endif */
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,269 +0,0 @@
|
||||||
<template>
|
|
||||||
<!-- #ifdef APP-NVUE -->
|
|
||||||
<cell>
|
|
||||||
<!-- #endif -->
|
|
||||||
<view :class="disabled ? 'uni-list-item--disabled' : ''" :hover-class="disabled || showSwitch ? '' : 'uni-list-item--hover'" class="uni-list-item" @click="onClick">
|
|
||||||
<view class="uni-list-item__container" :class="{ 'uni-list-item--first': isFirstChild }">
|
|
||||||
<view v-if="thumb" class="uni-list-item__icon"><image :src="thumb" class="uni-list-item__icon-img" /></view>
|
|
||||||
<view v-else-if="showExtraIcon" class="uni-list-item__icon">
|
|
||||||
<uni-icons :color="extraIcon.color" :size="extraIcon.size" :type="extraIcon.type" class="uni-icon-wrapper" />
|
|
||||||
</view>
|
|
||||||
<view class="uni-list-item__content">
|
|
||||||
<slot name="left"></slot>
|
|
||||||
<text class="uni-list-item__content-title">{{ title }}</text>
|
|
||||||
<text v-if="note" class="uni-list-item__content-note">{{ note }}</text>
|
|
||||||
</view>
|
|
||||||
<view class="uni-list-item__extra">
|
|
||||||
<text v-if="rightText" class="uni-list-item__extra-text">{{ rightText }}</text>
|
|
||||||
<uni-badge v-if="showBadge" :type="badgeType" :text="badgeText" />
|
|
||||||
<switch v-if="showSwitch" :disabled="disabled" :checked="switchChecked" @change="onSwitchChange" />
|
|
||||||
<slot name="right"></slot>
|
|
||||||
<uni-icons v-if="showArrow" :size="20" class="uni-icon-wrapper" color="#bbb" type="arrowright" />
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
<!-- #ifdef APP-NVUE -->
|
|
||||||
</cell>
|
|
||||||
<!-- #endif -->
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import uniIcons from '../uni-icons/uni-icons.vue';
|
|
||||||
import uniBadge from '../uni-badge/uni-badge.vue';
|
|
||||||
|
|
||||||
/**
|
|
||||||
* ListItem 列表子组件
|
|
||||||
* @description 列表子组件
|
|
||||||
* @tutorial https://ext.dcloud.net.cn/plugin?id=24
|
|
||||||
* @property {String} title 标题
|
|
||||||
* @property {String} note 描述
|
|
||||||
* @property {String} thumb 左侧缩略图，若thumb有值，则不会显示扩展图标
|
|
||||||
* @property {String} badgeText 数字角标内容
|
|
||||||
* @property {String} badgeType 数字角标类型，参考[uni-icons](https://ext.dcloud.net.cn/plugin?id=21)
|
|
||||||
* @property {String} rightText 右侧文字内容
|
|
||||||
* @property {Boolean} disabled = [true|false]是否禁用
|
|
||||||
* @property {Boolean} showArrow = [true|false] 是否显示箭头图标
|
|
||||||
* @property {Boolean} showBadge = [true|false] 是否显示数字角标
|
|
||||||
* @property {Boolean} showSwitch = [true|false] 是否显示Switch
|
|
||||||
* @property {Boolean} switchChecked = [true|false] Switch是否被选中
|
|
||||||
* @property {Boolean} showExtraIcon = [true|false] 左侧是否显示扩展图标
|
|
||||||
* @property {Boolean} scrollY = [true|false] 允许纵向滚动，需要显式的设置其宽高
|
|
||||||
* @property {Object} extraIcon 扩展图标参数，格式为 {color: '#4cd964',size: '22',type: 'spinner'}
|
|
||||||
* @event {Function} click 点击 uniListItem 触发事件
|
|
||||||
* @event {Function} switchChange 点击切换 Switch 时触发
|
|
||||||
*/
|
|
||||||
export default {
|
|
||||||
name: 'UniListItem',
|
|
||||||
components: {
|
|
||||||
uniIcons,
|
|
||||||
uniBadge
|
|
||||||
},
|
|
||||||
props: {
|
|
||||||
title: {
|
|
||||||
type: String,
|
|
||||||
default: ''
|
|
||||||
}, // 列表标题
|
|
||||||
note: {
|
|
||||||
type: String,
|
|
||||||
default: ''
|
|
||||||
}, // 列表描述
|
|
||||||
disabled: {
|
|
||||||
// 是否禁用
|
|
||||||
type: [Boolean, String],
|
|
||||||
default: false
|
|
||||||
},
|
|
||||||
showArrow: {
|
|
||||||
// 是否显示箭头
|
|
||||||
type: [Boolean, String],
|
|
||||||
default: true
|
|
||||||
},
|
|
||||||
showBadge: {
|
|
||||||
// 是否显示数字角标
|
|
||||||
type: [Boolean, String],
|
|
||||||
default: false
|
|
||||||
},
|
|
||||||
showSwitch: {
|
|
||||||
// 是否显示Switch
|
|
||||||
type: [Boolean, String],
|
|
||||||
default: false
|
|
||||||
},
|
|
||||||
switchChecked: {
|
|
||||||
// Switch是否被选中
|
|
||||||
type: [Boolean, String],
|
|
||||||
default: false
|
|
||||||
},
|
|
||||||
badgeText: {
|
|
||||||
// badge内容
|
|
||||||
type: String,
|
|
||||||
default: ''
|
|
||||||
},
|
|
||||||
badgeType: {
|
|
||||||
// badge类型
|
|
||||||
type: String,
|
|
||||||
default: 'success'
|
|
||||||
},
|
|
||||||
rightText: {
|
|
||||||
// 右侧文字内容
|
|
||||||
type: String,
|
|
||||||
default: ''
|
|
||||||
},
|
|
||||||
thumb: {
|
|
||||||
// 缩略图
|
|
||||||
type: String,
|
|
||||||
default: ''
|
|
||||||
},
|
|
||||||
showExtraIcon: {
|
|
||||||
// 是否显示扩展图标
|
|
||||||
type: [Boolean, String],
|
|
||||||
default: false
|
|
||||||
},
|
|
||||||
extraIcon: {
|
|
||||||
type: Object,
|
|
||||||
default() {
|
|
||||||
return {
|
|
||||||
type: 'contact',
|
|
||||||
color: '#000000',
|
|
||||||
size: 20
|
|
||||||
};
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
inject: ['list'],
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
isFirstChild: false
|
|
||||||
};
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
if (!this.list.firstChildAppend) {
|
|
||||||
this.list.firstChildAppend = true;
|
|
||||||
this.isFirstChild = true;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
onClick() {
|
|
||||||
this.$emit('click');
|
|
||||||
},
|
|
||||||
onSwitchChange(e) {
|
|
||||||
this.$emit('switchChange', e.detail);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
$list-item-pd: $uni-spacing-col-lg $uni-spacing-row-lg;
|
|
||||||
|
|
||||||
.uni-list-item {
|
|
||||||
font-size: $uni-font-size-lg;
|
|
||||||
position: relative;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: space-between;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-list-item--disabled {
|
|
||||||
opacity: 0.3;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-list-item--hover {
|
|
||||||
background-color: $uni-bg-color-hover;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-list-item__container {
|
|
||||||
line-height: 48rpx;
|
|
||||||
position: relative;
|
|
||||||
/* #ifndef APP-NVUE */
|
|
||||||
display: flex;
|
|
||||||
/* #endif */
|
|
||||||
flex-direction: row;
|
|
||||||
padding: $list-item-pd;
|
|
||||||
padding-left: 0;
|
|
||||||
flex: 1;
|
|
||||||
position: relative;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
/* #ifdef APP-PLUS */
|
|
||||||
border-top-color: $uni-border-color;
|
|
||||||
border-top-style: solid;
|
|
||||||
border-top-width: 0.5px;
|
|
||||||
/* #endif */
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-list-item--first {
|
|
||||||
border-top-width: 0px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* #ifndef APP-NVUE */
|
|
||||||
.uni-list-item__container:after {
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
right: 0;
|
|
||||||
left: 0;
|
|
||||||
height: 1px;
|
|
||||||
content: '';
|
|
||||||
-webkit-transform: scaleY(0.5);
|
|
||||||
transform: scaleY(0.5);
|
|
||||||
background-color: $uni-border-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-list-item--first:after {
|
|
||||||
height: 0px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* #endif */
|
|
||||||
|
|
||||||
.uni-list-item__content {
|
|
||||||
/* #ifndef APP-NVUE */
|
|
||||||
display: flex;
|
|
||||||
/* #endif */
|
|
||||||
flex: 1;
|
|
||||||
overflow: hidden;
|
|
||||||
flex-direction: column;
|
|
||||||
color: #3b4144;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-list-item__content-title {
|
|
||||||
font-size: $uni-font-size-base;
|
|
||||||
color: #3b4144;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-list-item__content-note {
|
|
||||||
margin-top: 6rpx;
|
|
||||||
color: $uni-text-color-grey;
|
|
||||||
font-size: $uni-font-size-sm;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-list-item__extra {
|
|
||||||
// width: 25%;
|
|
||||||
/* #ifndef APP-NVUE */
|
|
||||||
display: flex;
|
|
||||||
/* #endif */
|
|
||||||
flex-direction: row;
|
|
||||||
justify-content: flex-end;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-list-item__icon {
|
|
||||||
display: flex;
|
|
||||||
margin-right: 18rpx;
|
|
||||||
flex-direction: row;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
|
|
||||||
margin-left: 20rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-list-item__icon-img {
|
|
||||||
// height: $uni-img-size-base;
|
|
||||||
// width: $uni-img-size-base;
|
|
||||||
height: 38rpx;
|
|
||||||
width: 38rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-list-item__extra-text {
|
|
||||||
color: $uni-text-color-grey;
|
|
||||||
font-size: $uni-font-size-sm;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,75 +0,0 @@
|
||||||
<template>
|
|
||||||
<!-- #ifndef APP-NVUE -->
|
|
||||||
<view class="uni-list">
|
|
||||||
<slot />
|
|
||||||
</view>
|
|
||||||
<!-- #endif -->
|
|
||||||
<!-- #ifdef APP-NVUE -->
|
|
||||||
<list class="uni-list" :enableBackToTop="enableBackToTop" loadmoreoffset="15" :scroll-y="scrollY" @loadmore="loadMore">
|
|
||||||
<slot />
|
|
||||||
</list>
|
|
||||||
<!-- #endif -->
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
/**
|
|
||||||
* List 列表
|
|
||||||
* @description 列表组件
|
|
||||||
* @tutorial https://ext.dcloud.net.cn/plugin?id=24
|
|
||||||
*/
|
|
||||||
export default {
|
|
||||||
name: 'UniList',
|
|
||||||
'mp-weixin': {
|
|
||||||
options: {
|
|
||||||
multipleSlots: false
|
|
||||||
}
|
|
||||||
},
|
|
||||||
props: {
|
|
||||||
enableBackToTop: {
|
|
||||||
type: [Boolean, String],
|
|
||||||
default: false
|
|
||||||
},
|
|
||||||
scrollY: {
|
|
||||||
type: [Boolean, String],
|
|
||||||
default: false
|
|
||||||
}
|
|
||||||
},
|
|
||||||
provide() {
|
|
||||||
return {
|
|
||||||
list: this
|
|
||||||
}
|
|
||||||
},
|
|
||||||
created() {
|
|
||||||
this.firstChildAppend = false
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
loadMore(e) {
|
|
||||||
this.$emit("scrolltolower");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.uni-list {
|
|
||||||
/* #ifndef APP-NVUE */
|
|
||||||
display: flex;
|
|
||||||
/* #endif */
|
|
||||||
background-color: $uni-bg-color;
|
|
||||||
position: relative;
|
|
||||||
flex-direction: column;
|
|
||||||
// border-bottom-color: $uni-border-color;
|
|
||||||
// border-bottom-style: solid;
|
|
||||||
// border-bottom-width: 1px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* #ifndef APP-NVUE */
|
|
||||||
.uni-list:before {
|
|
||||||
height: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-list:after {
|
|
||||||
height: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* #endif */
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,65 +0,0 @@
|
||||||
<template>
|
|
||||||
<!-- #ifdef APP-NVUE -->
|
|
||||||
<refresh :display="display" @refresh="onrefresh" @pullingdown="onpullingdown">
|
|
||||||
<slot />
|
|
||||||
</refresh>
|
|
||||||
<!-- #endif -->
|
|
||||||
<!-- #ifndef APP-NVUE -->
|
|
||||||
<view ref="uni-refresh" class="uni-refresh" v-show="isShow">
|
|
||||||
<slot />
|
|
||||||
</view>
|
|
||||||
<!-- #endif -->
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
name: 'UniRefresh',
|
|
||||||
props: {
|
|
||||||
display: {
|
|
||||||
type: [String],
|
|
||||||
default: "hide"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
pulling: false
|
|
||||||
}
|
|
||||||
},
|
|
||||||
computed: {
|
|
||||||
isShow() {
|
|
||||||
if (this.display === "show" || this.pulling === true) {
|
|
||||||
return true;
|
|
||||||
}
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
created() {},
|
|
||||||
methods: {
|
|
||||||
onchange(value) {
|
|
||||||
this.pulling = value;
|
|
||||||
},
|
|
||||||
onrefresh(e) {
|
|
||||||
this.$emit("refresh", e);
|
|
||||||
},
|
|
||||||
onpullingdown(e) {
|
|
||||||
// #ifdef APP-NVUE
|
|
||||||
this.$emit("pullingdown", e);
|
|
||||||
// #endif
|
|
||||||
// #ifndef APP-NVUE
|
|
||||||
var detail = {
|
|
||||||
viewHeight: 90,
|
|
||||||
pullingDistance: e.height
|
|
||||||
}
|
|
||||||
this.$emit("pullingdown", detail);
|
|
||||||
// #endif
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
.uni-refresh {
|
|
||||||
height: 0;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,87 +0,0 @@
|
||||||
var pullDown = {
|
|
||||||
threshold: 95,
|
|
||||||
maxHeight: 200,
|
|
||||||
callRefresh: 'onrefresh',
|
|
||||||
callPullingDown: 'onpullingdown',
|
|
||||||
refreshSelector: '.uni-refresh'
|
|
||||||
};
|
|
||||||
|
|
||||||
function ready(newValue, oldValue, ownerInstance, instance) {
|
|
||||||
var state = instance.getState()
|
|
||||||
state.canPullDown = newValue;
|
|
||||||
// console.log(newValue);
|
|
||||||
}
|
|
||||||
|
|
||||||
function touchStart(e, instance) {
|
|
||||||
var state = instance.getState();
|
|
||||||
state.refreshInstance = instance.selectComponent(pullDown.refreshSelector);
|
|
||||||
state.canPullDown = (state.refreshInstance != null && state.refreshInstance != undefined);
|
|
||||||
if (!state.canPullDown) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
// console.log("touchStart");
|
|
||||||
|
|
||||||
state.height = 0;
|
|
||||||
state.touchStartY = e.touches[0].pageY || e.changedTouches[0].pageY;
|
|
||||||
state.refreshInstance.setStyle({
|
|
||||||
'height': 0
|
|
||||||
});
|
|
||||||
state.refreshInstance.callMethod("onchange", true);
|
|
||||||
}
|
|
||||||
|
|
||||||
function touchMove(e, ownerInstance) {
|
|
||||||
var instance = e.instance;
|
|
||||||
var state = instance.getState();
|
|
||||||
if (!state.canPullDown) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
var oldHeight = state.height;
|
|
||||||
var endY = e.touches[0].pageY || e.changedTouches[0].pageY;
|
|
||||||
var height = endY - state.touchStartY;
|
|
||||||
if (height > pullDown.maxHeight) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
var refreshInstance = state.refreshInstance;
|
|
||||||
refreshInstance.setStyle({
|
|
||||||
'height': height + 'px'
|
|
||||||
});
|
|
||||||
|
|
||||||
height = height < pullDown.maxHeight ? height : pullDown.maxHeight;
|
|
||||||
state.height = height;
|
|
||||||
refreshInstance.callMethod(pullDown.callPullingDown, {
|
|
||||||
height: height
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function touchEnd(e, ownerInstance) {
|
|
||||||
var state = e.instance.getState();
|
|
||||||
if (!state.canPullDown) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
state.refreshInstance.callMethod("onchange", false);
|
|
||||||
|
|
||||||
var refreshInstance = state.refreshInstance;
|
|
||||||
if (state.height > pullDown.threshold) {
|
|
||||||
refreshInstance.callMethod(pullDown.callRefresh);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
refreshInstance.setStyle({
|
|
||||||
'height': 0
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function propObserver(newValue, oldValue, instance) {
|
|
||||||
pullDown = newValue;
|
|
||||||
}
|
|
||||||
|
|
||||||
module.exports = {
|
|
||||||
touchmove: touchMove,
|
|
||||||
touchstart: touchStart,
|
|
||||||
touchend: touchEnd,
|
|
||||||
propObserver: propObserver
|
|
||||||
}
|
|
||||||
|
|
@ -1,395 +0,0 @@
|
||||||
<template>
|
|
||||||
<view v-if="show" class="uni-noticebar" :style="{ backgroundColor: backgroundColor }" @click="onClick">
|
|
||||||
<!-- #ifdef MP-ALIPAY -->
|
|
||||||
<view v-if="showClose === true || showClose === 'true'" class="uni-noticebar-close" @click="close">
|
|
||||||
<uni-icons type="closeempty" :color="color" size="12" />
|
|
||||||
</view>
|
|
||||||
<view v-if="showIcon === true || showIcon === 'true'" class="uni-noticebar-icon">
|
|
||||||
<uni-icons type="sound" :color="color" size="14" />
|
|
||||||
</view>
|
|
||||||
<!-- #endif -->
|
|
||||||
<!-- #ifndef MP-ALIPAY -->
|
|
||||||
<uni-icons v-if="showClose === true || showClose === 'true'" class="uni-noticebar-close" type="closeempty" :color="color"
|
|
||||||
size="12" @click="close" />
|
|
||||||
<uni-icons v-if="showIcon === true || showIcon === 'true'" class="uni-noticebar-icon" type="sound" :color="color"
|
|
||||||
size="14" />
|
|
||||||
<!-- #endif -->
|
|
||||||
<view ref="textBox" class="uni-noticebar__content-wrapper" :class="{'uni-noticebar__content-wrapper--scrollable':scrollable, 'uni-noticebar__content-wrapper--single':!scrollable && (single || moreText)}">
|
|
||||||
<view :id="elIdBox" class="uni-noticebar__content" :class="{'uni-noticebar__content--scrollable':scrollable, 'uni-noticebar__content--single':!scrollable && (single || moreText)}">
|
|
||||||
<text :id="elId" ref="animationEle" class="uni-noticebar__content-text" :class="{'uni-noticebar__content-text--scrollable':scrollable,'uni-noticebar__content-text--single':!scrollable && (single || moreText)}"
|
|
||||||
:style="{color:color, width:wrapWidth+'px', 'animationDuration': animationDuration, '-webkit-animationDuration': animationDuration ,animationPlayState: webviewHide?'paused':animationPlayState,'-webkit-animationPlayState':webviewHide?'paused':animationPlayState, animationDelay: animationDelay, '-webkit-animationDelay':animationDelay}">{{text}}</text>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
<view v-if="showGetMore === true || showGetMore === 'true'" class="uni-noticebar__more" @click="clickMore">
|
|
||||||
<text v-if="moreText" :style="{ color: moreColor }" class="uni-noticebar__more-text">{{ moreText }}</text>
|
|
||||||
<uni-icons type="arrowright" :color="moreColor" size="14" />
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import uniIcons from '../uni-icons/uni-icons.vue'
|
|
||||||
// #ifdef APP-NVUE
|
|
||||||
const dom = weex.requireModule('dom');
|
|
||||||
const animation = weex.requireModule('animation');
|
|
||||||
// #endif
|
|
||||||
|
|
||||||
/**
|
|
||||||
* NoticeBar 自定义导航栏
|
|
||||||
* @description 通告栏组件
|
|
||||||
* @tutorial https://ext.dcloud.net.cn/plugin?id=30
|
|
||||||
* @property {Number} speed 文字滚动的速度，默认100px/秒
|
|
||||||
* @property {String} text 显示文字
|
|
||||||
* @property {String} backgroundColor 背景颜色
|
|
||||||
* @property {String} color 文字颜色
|
|
||||||
* @property {String} moreColor 查看更多文字的颜色
|
|
||||||
* @property {String} moreText 设置“查看更多”的文本
|
|
||||||
* @property {Boolean} single = [true|false] 是否单行
|
|
||||||
* @property {Boolean} scrollable = [true|false] 是否滚动，为true时，NoticeBar为单行
|
|
||||||
* @property {Boolean} showIcon = [true|false] 是否显示左侧喇叭图标
|
|
||||||
* @property {Boolean} showClose = [true|false] 是否显示左侧关闭按钮
|
|
||||||
* @property {Boolean} showGetMore = [true|false] 是否显示右侧查看更多图标，为true时，NoticeBar为单行
|
|
||||||
* @event {Function} click 点击 NoticeBar 触发事件
|
|
||||||
* @event {Function} close 关闭 NoticeBar 触发事件
|
|
||||||
* @event {Function} getmore 点击”查看更多“时触发事件
|
|
||||||
*/
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: 'UniNoticeBar',
|
|
||||||
components: {
|
|
||||||
uniIcons
|
|
||||||
},
|
|
||||||
props: {
|
|
||||||
text: {
|
|
||||||
type: String,
|
|
||||||
default: ''
|
|
||||||
},
|
|
||||||
moreText: {
|
|
||||||
type: String,
|
|
||||||
default: ''
|
|
||||||
},
|
|
||||||
backgroundColor: {
|
|
||||||
type: String,
|
|
||||||
default: '#fffbe8'
|
|
||||||
},
|
|
||||||
speed: {
|
|
||||||
// 默认1s滚动100px
|
|
||||||
type: Number,
|
|
||||||
default: 100
|
|
||||||
},
|
|
||||||
color: {
|
|
||||||
type: String,
|
|
||||||
default: '#de8c17'
|
|
||||||
},
|
|
||||||
moreColor: {
|
|
||||||
type: String,
|
|
||||||
default: '#999999'
|
|
||||||
},
|
|
||||||
single: {
|
|
||||||
// 是否单行
|
|
||||||
type: [Boolean, String],
|
|
||||||
default: false
|
|
||||||
},
|
|
||||||
scrollable: {
|
|
||||||
// 是否滚动，添加后控制单行效果取消
|
|
||||||
type: [Boolean, String],
|
|
||||||
default: false
|
|
||||||
},
|
|
||||||
showIcon: {
|
|
||||||
// 是否显示左侧icon
|
|
||||||
type: [Boolean, String],
|
|
||||||
default: false
|
|
||||||
},
|
|
||||||
showGetMore: {
|
|
||||||
// 是否显示右侧查看更多
|
|
||||||
type: [Boolean, String],
|
|
||||||
default: false
|
|
||||||
},
|
|
||||||
showClose: {
|
|
||||||
// 是否显示左侧关闭按钮
|
|
||||||
type: [Boolean, String],
|
|
||||||
default: false
|
|
||||||
}
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
const elId = `Uni_${Math.ceil(Math.random() * 10e5).toString(36)}`
|
|
||||||
const elIdBox = `Uni_${Math.ceil(Math.random() * 10e5).toString(36)}`
|
|
||||||
return {
|
|
||||||
textWidth: 0,
|
|
||||||
boxWidth: 0,
|
|
||||||
wrapWidth: '',
|
|
||||||
webviewHide: false,
|
|
||||||
// #ifdef APP-NVUE
|
|
||||||
stopAnimation: false,
|
|
||||||
// #endif
|
|
||||||
elId: elId,
|
|
||||||
elIdBox: elIdBox,
|
|
||||||
show: true,
|
|
||||||
animationDuration: 'none',
|
|
||||||
animationPlayState: 'paused',
|
|
||||||
animationDelay: '0s'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
// #ifdef APP-PLUS
|
|
||||||
var pages = getCurrentPages();
|
|
||||||
var page = pages[pages.length - 1];
|
|
||||||
var currentWebview = page.$getAppWebview();
|
|
||||||
currentWebview.addEventListener('hide',()=>{
|
|
||||||
this.webviewHide = true
|
|
||||||
})
|
|
||||||
currentWebview.addEventListener('show',()=>{
|
|
||||||
this.webviewHide = false
|
|
||||||
})
|
|
||||||
// #endif
|
|
||||||
this.$nextTick(() => {
|
|
||||||
this.initSize()
|
|
||||||
})
|
|
||||||
},
|
|
||||||
// #ifdef APP-NVUE
|
|
||||||
beforeDestroy() {
|
|
||||||
this.stopAnimation = true
|
|
||||||
},
|
|
||||||
// #endif
|
|
||||||
methods: {
|
|
||||||
initSize() {
|
|
||||||
if (this.scrollable) {
|
|
||||||
// #ifndef APP-NVUE
|
|
||||||
let query = [],
|
|
||||||
boxWidth = 0,
|
|
||||||
textWidth = 0;
|
|
||||||
let textQuery = new Promise((resolve, reject) => {
|
|
||||||
uni.createSelectorQuery()
|
|
||||||
// #ifndef MP-ALIPAY
|
|
||||||
.in(this)
|
|
||||||
// #endif
|
|
||||||
.select(`#${this.elId}`)
|
|
||||||
.boundingClientRect()
|
|
||||||
.exec(ret => {
|
|
||||||
this.textWidth = ret[0].width
|
|
||||||
resolve()
|
|
||||||
})
|
|
||||||
})
|
|
||||||
let boxQuery = new Promise((resolve, reject) => {
|
|
||||||
uni.createSelectorQuery()
|
|
||||||
// #ifndef MP-ALIPAY
|
|
||||||
.in(this)
|
|
||||||
// #endif
|
|
||||||
.select(`#${this.elIdBox}`)
|
|
||||||
.boundingClientRect()
|
|
||||||
.exec(ret => {
|
|
||||||
this.boxWidth = ret[0].width
|
|
||||||
resolve()
|
|
||||||
})
|
|
||||||
})
|
|
||||||
query.push(textQuery)
|
|
||||||
query.push(boxQuery)
|
|
||||||
Promise.all(query).then(() => {
|
|
||||||
this.animationDuration = `${this.textWidth / this.speed}s`
|
|
||||||
this.animationDelay = `-${this.boxWidth / this.speed}s`
|
|
||||||
setTimeout(() => {
|
|
||||||
this.animationPlayState = 'running'
|
|
||||||
}, 1000)
|
|
||||||
})
|
|
||||||
// #endif
|
|
||||||
// #ifdef APP-NVUE
|
|
||||||
dom.getComponentRect(this.$refs['animationEle'], (res) => {
|
|
||||||
let winWidth = uni.getSystemInfoSync().windowWidth
|
|
||||||
this.textWidth = res.size.width
|
|
||||||
animation.transition(this.$refs['animationEle'], {
|
|
||||||
styles: {
|
|
||||||
transform: `translateY(-${winWidth}px)`
|
|
||||||
},
|
|
||||||
duration: 0,
|
|
||||||
timingFunction: 'linear',
|
|
||||||
delay: 0
|
|
||||||
}, () => {
|
|
||||||
if (!this.stopAnimation) {
|
|
||||||
animation.transition(this.$refs['animationEle'], {
|
|
||||||
styles: {
|
|
||||||
transform: `translateY(-${this.textWidth}px)`
|
|
||||||
},
|
|
||||||
timingFunction: 'linear',
|
|
||||||
duration: (this.textWidth - winWidth) / this.speed * 1000,
|
|
||||||
delay: 1000
|
|
||||||
}, () => {
|
|
||||||
if (!this.stopAnimation) {
|
|
||||||
this.loopAnimation()
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
});
|
|
||||||
})
|
|
||||||
// #endif
|
|
||||||
}
|
|
||||||
// #ifdef APP-NVUE
|
|
||||||
if (!this.scrollable && (this.single || this.moreText)) {
|
|
||||||
dom.getComponentRect(this.$refs['textBox'], (res) => {
|
|
||||||
this.wrapWidth = res.size.width
|
|
||||||
})
|
|
||||||
}
|
|
||||||
// #endif
|
|
||||||
},
|
|
||||||
loopAnimation() {
|
|
||||||
// #ifdef APP-NVUE
|
|
||||||
animation.transition(this.$refs['animationEle'], {
|
|
||||||
styles: {
|
|
||||||
transform: `translateY(0px)`
|
|
||||||
},
|
|
||||||
duration: 0
|
|
||||||
}, () => {
|
|
||||||
if (!this.stopAnimation) {
|
|
||||||
animation.transition(this.$refs['animationEle'], {
|
|
||||||
styles: {
|
|
||||||
transform: `translateY(-${this.textWidth}px)`
|
|
||||||
},
|
|
||||||
duration: this.textWidth / this.speed * 1000,
|
|
||||||
timingFunction: 'linear',
|
|
||||||
delay: 0
|
|
||||||
}, () => {
|
|
||||||
if (!this.stopAnimation) {
|
|
||||||
this.loopAnimation()
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
});
|
|
||||||
// #endif
|
|
||||||
},
|
|
||||||
clickMore() {
|
|
||||||
this.$emit('getmore')
|
|
||||||
},
|
|
||||||
close() {
|
|
||||||
this.show = false;
|
|
||||||
this.$emit('close')
|
|
||||||
},
|
|
||||||
onClick() {
|
|
||||||
this.$emit('click')
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
|
|
||||||
.uni-noticebar {
|
|
||||||
/* #ifndef APP-NVUE */
|
|
||||||
display: flex;
|
|
||||||
width: 100%;
|
|
||||||
box-sizing: border-box;
|
|
||||||
/* #endif */
|
|
||||||
flex-direction: row;
|
|
||||||
align-items: center;
|
|
||||||
padding: 6px 12px;
|
|
||||||
margin-bottom: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-noticebar-close {
|
|
||||||
margin-right: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-noticebar-icon {
|
|
||||||
margin-right: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-noticebar__content-wrapper {
|
|
||||||
flex: 1;
|
|
||||||
flex-direction: column;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-noticebar__content-wrapper--single {
|
|
||||||
/* #ifndef APP-NVUE */
|
|
||||||
line-height: 18px;
|
|
||||||
/* #endif */
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-noticebar__content-wrapper--single,
|
|
||||||
.uni-noticebar__content-wrapper--scrollable {
|
|
||||||
flex-direction: row;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* #ifndef APP-NVUE */
|
|
||||||
.uni-noticebar__content-wrapper--scrollable {
|
|
||||||
position: relative;
|
|
||||||
height: 18px;
|
|
||||||
}
|
|
||||||
/* #endif */
|
|
||||||
|
|
||||||
.uni-noticebar__content--scrollable {
|
|
||||||
/* #ifdef APP-NVUE */
|
|
||||||
flex: 0;
|
|
||||||
/* #endif */
|
|
||||||
/* #ifndef APP-NVUE */
|
|
||||||
flex: 1;
|
|
||||||
display: block;
|
|
||||||
overflow: hidden;
|
|
||||||
/* #endif */
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-noticebar__content--single {
|
|
||||||
/* #ifndef APP-NVUE */
|
|
||||||
display: flex;
|
|
||||||
flex: none;
|
|
||||||
width: 100%;
|
|
||||||
justify-content: center;
|
|
||||||
/* #endif */
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-noticebar__content-text {
|
|
||||||
font-size: 14px;
|
|
||||||
line-height: 18px;
|
|
||||||
/* #ifndef APP-NVUE */
|
|
||||||
word-break: break-all;
|
|
||||||
/* #endif */
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-noticebar__content-text--single {
|
|
||||||
/* #ifdef APP-NVUE */
|
|
||||||
lines: 1;
|
|
||||||
/* #endif */
|
|
||||||
/* #ifndef APP-NVUE */
|
|
||||||
display: block;
|
|
||||||
width: 100%;
|
|
||||||
white-space: nowrap;
|
|
||||||
/* #endif */
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-noticebar__content-text--scrollable {
|
|
||||||
/* #ifdef APP-NVUE */
|
|
||||||
lines: 1;
|
|
||||||
padding-left: 750rpx;
|
|
||||||
/* #endif */
|
|
||||||
/* #ifndef APP-NVUE */
|
|
||||||
position: absolute;
|
|
||||||
display: block;
|
|
||||||
height: 18px;
|
|
||||||
line-height: 18px;
|
|
||||||
white-space: nowrap;
|
|
||||||
padding-left: 100%;
|
|
||||||
animation: notice 10s 0s linear infinite both;
|
|
||||||
animation-play-state: paused;
|
|
||||||
/* #endif */
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-noticebar__more {
|
|
||||||
/* #ifndef APP-NVUE */
|
|
||||||
display: inline-flex;
|
|
||||||
/* #endif */
|
|
||||||
flex-direction: row;
|
|
||||||
flex-wrap: nowrap;
|
|
||||||
align-items: center;
|
|
||||||
padding-left: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-noticebar__more-text {
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes notice {
|
|
||||||
100% {
|
|
||||||
transform: translate3d(-100%, 0, 0);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,29 +0,0 @@
|
||||||
export default {
|
|
||||||
created() {
|
|
||||||
if (this.type === 'message') {
|
|
||||||
// 获取自组件对象
|
|
||||||
this.maskShow = false
|
|
||||||
this.children = null
|
|
||||||
}
|
|
||||||
},
|
|
||||||
created() {
|
|
||||||
if (this.type === 'message') {
|
|
||||||
// 不显示遮罩
|
|
||||||
this.maskShow = false
|
|
||||||
// 获取子组件对象
|
|
||||||
this.childrenMsg = null
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
customOpen() {
|
|
||||||
if (this.childrenMsg) {
|
|
||||||
this.childrenMsg.open()
|
|
||||||
}
|
|
||||||
},
|
|
||||||
customClose() {
|
|
||||||
if (this.childrenMsg) {
|
|
||||||
this.childrenMsg.close()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,24 +0,0 @@
|
||||||
import message from './message.js';
|
|
||||||
// 定义 type 类型:弹出类型：top/bottom/center
|
|
||||||
const config = {
|
|
||||||
// 顶部弹出
|
|
||||||
top:'top',
|
|
||||||
// 底部弹出
|
|
||||||
bottom:'bottom',
|
|
||||||
// 居中弹出
|
|
||||||
center:'center',
|
|
||||||
// 消息提示
|
|
||||||
message:'top',
|
|
||||||
// 对话框
|
|
||||||
dialog:'center',
|
|
||||||
// 分享
|
|
||||||
share:'bottom',
|
|
||||||
}
|
|
||||||
export default {
|
|
||||||
data(){
|
|
||||||
return {
|
|
||||||
config:config
|
|
||||||
}
|
|
||||||
},
|
|
||||||
mixins: [message],
|
|
||||||
}
|
|
||||||
|
|
@ -1,243 +0,0 @@
|
||||||
<template>
|
|
||||||
<view class="uni-popup-dialog">
|
|
||||||
<view class="uni-dialog-title">
|
|
||||||
<text class="uni-dialog-title-text" :class="['uni-popup__'+dialogType]">{{title}}</text>
|
|
||||||
</view>
|
|
||||||
<view class="uni-dialog-content">
|
|
||||||
<text class="uni-dialog-content-text" v-if="mode === 'base'">{{content}}</text>
|
|
||||||
<input v-else class="uni-dialog-input" v-model="val" type="text" :placeholder="placeholder" :focus="focus" >
|
|
||||||
</view>
|
|
||||||
<view class="uni-dialog-button-group">
|
|
||||||
<view class="uni-dialog-button" @click="close">
|
|
||||||
<text class="uni-dialog-button-text">取消</text>
|
|
||||||
</view>
|
|
||||||
<view class="uni-dialog-button uni-border-left" @click="onOk">
|
|
||||||
<text class="uni-dialog-button-text uni-button-color">确定</text>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
|
|
||||||
</view>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
/**
|
|
||||||
* PopUp 弹出层-对话框样式
|
|
||||||
* @description 弹出层-对话框样式
|
|
||||||
* @tutorial https://ext.dcloud.net.cn/plugin?id=329
|
|
||||||
* @property {String} value input 模式下的默认值
|
|
||||||
* @property {String} placeholder input 模式下输入提示
|
|
||||||
* @property {String} type = [success|warning|info|error] 主题样式
|
|
||||||
* @value success 成功
|
|
||||||
* @value warning 提示
|
|
||||||
* @value info 消息
|
|
||||||
* @value error 错误
|
|
||||||
* @property {String} mode = [base|input] 模式、
|
|
||||||
* @value base 基础对话框
|
|
||||||
* @value input 可输入对话框
|
|
||||||
* @property {String} content 对话框内容
|
|
||||||
* @property {Boolean} beforeClose 是否拦截取消事件
|
|
||||||
* @event {Function} confirm 点击确认按钮触发
|
|
||||||
* @event {Function} close 点击取消按钮触发
|
|
||||||
*/
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: "uniPopupDialog",
|
|
||||||
props: {
|
|
||||||
value: {
|
|
||||||
type: [String, Number],
|
|
||||||
default: ''
|
|
||||||
},
|
|
||||||
placeholder: {
|
|
||||||
type: [String, Number],
|
|
||||||
default: '请输入内容'
|
|
||||||
},
|
|
||||||
/**
|
|
||||||
* 对话框主题 success/warning/info/error 默认 success
|
|
||||||
*/
|
|
||||||
type: {
|
|
||||||
type: String,
|
|
||||||
default: 'error'
|
|
||||||
},
|
|
||||||
/**
|
|
||||||
* 对话框模式 base/input
|
|
||||||
*/
|
|
||||||
mode: {
|
|
||||||
type: String,
|
|
||||||
default: 'base'
|
|
||||||
},
|
|
||||||
/**
|
|
||||||
* 对话框标题
|
|
||||||
*/
|
|
||||||
title: {
|
|
||||||
type: String,
|
|
||||||
default: '提示'
|
|
||||||
},
|
|
||||||
/**
|
|
||||||
* 对话框内容
|
|
||||||
*/
|
|
||||||
content: {
|
|
||||||
type: String,
|
|
||||||
default: ''
|
|
||||||
},
|
|
||||||
/**
|
|
||||||
* 拦截取消事件 ，如果拦截取消事件，必须监听close事件，执行 done()
|
|
||||||
*/
|
|
||||||
beforeClose: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false
|
|
||||||
}
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
dialogType: 'error',
|
|
||||||
focus: false,
|
|
||||||
val: ""
|
|
||||||
}
|
|
||||||
},
|
|
||||||
inject: ['popup'],
|
|
||||||
watch: {
|
|
||||||
type(val) {
|
|
||||||
this.dialogType = val
|
|
||||||
},
|
|
||||||
mode(val) {
|
|
||||||
if (val === 'input') {
|
|
||||||
this.dialogType = 'info'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
value(val) {
|
|
||||||
this.val = val
|
|
||||||
}
|
|
||||||
},
|
|
||||||
created() {
|
|
||||||
// 对话框遮罩不可点击
|
|
||||||
this.popup.mkclick = false
|
|
||||||
if (this.mode === 'input') {
|
|
||||||
this.dialogType = 'info'
|
|
||||||
this.val = this.value
|
|
||||||
} else {
|
|
||||||
this.dialogType = this.type
|
|
||||||
}
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
this.focus = true
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
/**
|
|
||||||
* 点击确认按钮
|
|
||||||
*/
|
|
||||||
onOk() {
|
|
||||||
this.$emit('confirm', () => {
|
|
||||||
this.popup.close()
|
|
||||||
if (this.mode === 'input') this.val = this.value
|
|
||||||
}, this.mode === 'input' ? this.val : '')
|
|
||||||
},
|
|
||||||
/**
|
|
||||||
* 点击取消按钮
|
|
||||||
*/
|
|
||||||
close() {
|
|
||||||
if (this.beforeClose) {
|
|
||||||
this.$emit('close', () => {
|
|
||||||
this.popup.close()
|
|
||||||
})
|
|
||||||
return
|
|
||||||
}
|
|
||||||
this.popup.close()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.uni-popup-dialog {
|
|
||||||
width: 300px;
|
|
||||||
border-radius: 15px;
|
|
||||||
background-color: #fff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-dialog-title {
|
|
||||||
/* #ifndef APP-NVUE */
|
|
||||||
display: flex;
|
|
||||||
/* #endif */
|
|
||||||
flex-direction: row;
|
|
||||||
justify-content: center;
|
|
||||||
padding-top: 15px;
|
|
||||||
padding-bottom: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-dialog-title-text {
|
|
||||||
font-size: 16px;
|
|
||||||
font-weight: 500;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-dialog-content {
|
|
||||||
/* #ifndef APP-NVUE */
|
|
||||||
display: flex;
|
|
||||||
/* #endif */
|
|
||||||
flex-direction: row;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
padding: 5px 15px 15px 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-dialog-content-text {
|
|
||||||
font-size: 14px;
|
|
||||||
color: #6e6e6e;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-dialog-button-group {
|
|
||||||
/* #ifndef APP-NVUE */
|
|
||||||
display: flex;
|
|
||||||
/* #endif */
|
|
||||||
flex-direction: row;
|
|
||||||
border-top-color: #f5f5f5;
|
|
||||||
border-top-style: solid;
|
|
||||||
border-top-width: 1px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-dialog-button {
|
|
||||||
/* #ifndef APP-NVUE */
|
|
||||||
display: flex;
|
|
||||||
/* #endif */
|
|
||||||
|
|
||||||
flex: 1;
|
|
||||||
flex-direction: row;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
height: 45px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-border-left {
|
|
||||||
border-left-color: #f0f0f0;
|
|
||||||
border-left-style: solid;
|
|
||||||
border-left-width: 1px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-dialog-button-text {
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-button-color {
|
|
||||||
color: $uni-color-primary;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-dialog-input {
|
|
||||||
flex: 1;
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-popup__success {
|
|
||||||
color: $uni-color-success;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-popup__warn {
|
|
||||||
color: $uni-color-warning;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-popup__error {
|
|
||||||
color: $uni-color-error;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-popup__info {
|
|
||||||
color: #909399;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,116 +0,0 @@
|
||||||
<template>
|
|
||||||
<view class="uni-popup-message" :class="'uni-popup__'+[type]">
|
|
||||||
<text class="uni-popup-message-text" :class="'uni-popup__'+[type]+'-text'">{{message}}</text>
|
|
||||||
</view>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
|
|
||||||
/**
|
|
||||||
* PopUp 弹出层-消息提示
|
|
||||||
* @description 弹出层-消息提示
|
|
||||||
* @tutorial https://ext.dcloud.net.cn/plugin?id=329
|
|
||||||
* @property {String} type = [success|warning|info|error] 主题样式
|
|
||||||
* @value success 成功
|
|
||||||
* @value warning 提示
|
|
||||||
* @value info 消息
|
|
||||||
* @value error 错误
|
|
||||||
* @property {String} message 消息提示文字
|
|
||||||
* @property {String} duration 显示时间，设置为 0 则不会自动关闭
|
|
||||||
*/
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: 'UniPopupMessage',
|
|
||||||
props: {
|
|
||||||
/**
|
|
||||||
* 主题 success/warning/info/error 默认 success
|
|
||||||
*/
|
|
||||||
type: {
|
|
||||||
type: String,
|
|
||||||
default: 'success'
|
|
||||||
},
|
|
||||||
/**
|
|
||||||
* 消息文字
|
|
||||||
*/
|
|
||||||
message: {
|
|
||||||
type: String,
|
|
||||||
default: ''
|
|
||||||
},
|
|
||||||
/**
|
|
||||||
* 显示时间，设置为 0 则不会自动关闭
|
|
||||||
*/
|
|
||||||
duration: {
|
|
||||||
type: Number,
|
|
||||||
default: 3000
|
|
||||||
}
|
|
||||||
},
|
|
||||||
inject: ['popup'],
|
|
||||||
data() {
|
|
||||||
return {}
|
|
||||||
},
|
|
||||||
created() {
|
|
||||||
this.popup.childrenMsg = this
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
open() {
|
|
||||||
if (this.duration === 0) return
|
|
||||||
clearTimeout(this.popuptimer)
|
|
||||||
this.popuptimer = setTimeout(() => {
|
|
||||||
this.popup.close()
|
|
||||||
}, this.duration)
|
|
||||||
},
|
|
||||||
close() {
|
|
||||||
clearTimeout(this.popuptimer)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.uni-popup-message {
|
|
||||||
/* #ifndef APP-NVUE */
|
|
||||||
display: flex;
|
|
||||||
/* #endif */
|
|
||||||
flex-direction: row;
|
|
||||||
background-color: #e1f3d8;
|
|
||||||
padding: 10px 15px;
|
|
||||||
border-color: #eee;
|
|
||||||
border-style: solid;
|
|
||||||
border-width: 1px;
|
|
||||||
}
|
|
||||||
.uni-popup-message-text {
|
|
||||||
font-size: 14px;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-popup__success {
|
|
||||||
background-color: #e1f3d8;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-popup__success-text {
|
|
||||||
color: #67C23A;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-popup__warn {
|
|
||||||
background-color: #faecd8;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-popup__warn-text {
|
|
||||||
color: #E6A23C;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-popup__error {
|
|
||||||
background-color: #fde2e2;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-popup__error-text {
|
|
||||||
color: #F56C6C;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-popup__info {
|
|
||||||
background-color: #F2F6FC;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-popup__info-text {
|
|
||||||
color: #909399;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,165 +0,0 @@
|
||||||
<template>
|
|
||||||
<view class="uni-popup-share">
|
|
||||||
<view class="uni-share-title"><text class="uni-share-title-text">{{title}}</text></view>
|
|
||||||
<view class="uni-share-content">
|
|
||||||
<view class="uni-share-content-box">
|
|
||||||
<view class="uni-share-content-item" v-for="(item,index) in bottomData" :key="index" @click.stop="select(item,index)">
|
|
||||||
<image class="uni-share-image" :src="item.icon" mode="aspectFill"></image>
|
|
||||||
<text class="uni-share-text">{{item.text}}</text>
|
|
||||||
</view>
|
|
||||||
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
<view class="uni-share-button-box">
|
|
||||||
<button class="uni-share-button" @click="close">取消</button>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
name: 'UniPopupShare',
|
|
||||||
props: {
|
|
||||||
title: {
|
|
||||||
type: String,
|
|
||||||
default: '分享到'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
inject: ['popup'],
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
bottomData: [{
|
|
||||||
text: '微信',
|
|
||||||
icon: 'https://img-cdn-qiniu.dcloud.net.cn/uni-ui/grid-2.png',
|
|
||||||
name: 'wx'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
text: '支付宝',
|
|
||||||
icon: 'https://img-cdn-qiniu.dcloud.net.cn/uni-ui/grid-8.png',
|
|
||||||
name: 'wx'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
text: 'QQ',
|
|
||||||
icon: 'https://img-cdn-qiniu.dcloud.net.cn/uni-ui/gird-3.png',
|
|
||||||
name: 'qq'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
text: '新浪',
|
|
||||||
icon: 'https://img-cdn-qiniu.dcloud.net.cn/uni-ui/grid-1.png',
|
|
||||||
name: 'sina'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
text: '百度',
|
|
||||||
icon: 'https://img-cdn-qiniu.dcloud.net.cn/uni-ui/grid-7.png',
|
|
||||||
name: 'copy'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
text: '其他',
|
|
||||||
icon: 'https://img-cdn-qiniu.dcloud.net.cn/uni-ui/grid-5.png',
|
|
||||||
name: 'more'
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
},
|
|
||||||
created() {},
|
|
||||||
methods: {
|
|
||||||
/**
|
|
||||||
* 选择内容
|
|
||||||
*/
|
|
||||||
select(item, index) {
|
|
||||||
this.$emit('select', {
|
|
||||||
item,
|
|
||||||
index
|
|
||||||
}, () => {
|
|
||||||
this.popup.close()
|
|
||||||
})
|
|
||||||
},
|
|
||||||
/**
|
|
||||||
* 关闭窗口
|
|
||||||
*/
|
|
||||||
close() {
|
|
||||||
this.popup.close()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.uni-popup-share {
|
|
||||||
background-color: #fff;
|
|
||||||
}
|
|
||||||
.uni-share-title {
|
|
||||||
/* #ifndef APP-NVUE */
|
|
||||||
display: flex;
|
|
||||||
/* #endif */
|
|
||||||
flex-direction: row;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
height: 40px;
|
|
||||||
}
|
|
||||||
.uni-share-title-text {
|
|
||||||
font-size: 14px;
|
|
||||||
color: #666;
|
|
||||||
}
|
|
||||||
.uni-share-content {
|
|
||||||
/* #ifndef APP-NVUE */
|
|
||||||
display: flex;
|
|
||||||
/* #endif */
|
|
||||||
flex-direction: row;
|
|
||||||
justify-content: center;
|
|
||||||
padding-top: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-share-content-box {
|
|
||||||
/* #ifndef APP-NVUE */
|
|
||||||
display: flex;
|
|
||||||
/* #endif */
|
|
||||||
flex-direction: row;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
width: 360px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-share-content-item {
|
|
||||||
width: 90px;
|
|
||||||
/* #ifndef APP-NVUE */
|
|
||||||
display: flex;
|
|
||||||
/* #endif */
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: center;
|
|
||||||
padding: 10px 0;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-share-content-item:active {
|
|
||||||
background-color: #f5f5f5;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-share-image {
|
|
||||||
width: 30px;
|
|
||||||
height: 30px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-share-text {
|
|
||||||
margin-top: 10px;
|
|
||||||
font-size: 14px;
|
|
||||||
color: #3B4144;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-share-button-box {
|
|
||||||
/* #ifndef APP-NVUE */
|
|
||||||
display: flex;
|
|
||||||
/* #endif */
|
|
||||||
flex-direction: row;
|
|
||||||
padding: 10px 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-share-button {
|
|
||||||
flex: 1;
|
|
||||||
border-radius: 50px;
|
|
||||||
color: #666;
|
|
||||||
font-size: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-share-button::after {
|
|
||||||
border-radius: 50px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,294 +0,0 @@
|
||||||
<template>
|
|
||||||
<view v-if="showPopup" class="uni-popup" :class="[popupstyle]" @touchmove.stop.prevent="clear">
|
|
||||||
<uni-transition v-if="maskShow" :mode-class="['fade']" :styles="maskClass" :duration="duration" :show="showTrans"
|
|
||||||
@click="onTap" />
|
|
||||||
<uni-transition :mode-class="ani" :styles="transClass" :duration="duration" :show="showTrans" @click="onTap">
|
|
||||||
<view class="uni-popup__wrapper-box" @click.stop="clear">
|
|
||||||
<slot />
|
|
||||||
</view>
|
|
||||||
</uni-transition>
|
|
||||||
</view>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import uniTransition from '../uni-transition/uni-transition.vue'
|
|
||||||
import popup from './popup.js'
|
|
||||||
/**
|
|
||||||
* PopUp 弹出层
|
|
||||||
* @description 弹出层组件，为了解决遮罩弹层的问题
|
|
||||||
* @tutorial https://ext.dcloud.net.cn/plugin?id=329
|
|
||||||
* @property {String} type = [top|center|bottom] 弹出方式
|
|
||||||
* @value top 顶部弹出
|
|
||||||
* @value center 中间弹出
|
|
||||||
* @value bottom 底部弹出
|
|
||||||
* @value message 消息提示
|
|
||||||
* @value dialog 对话框
|
|
||||||
* @value share 底部分享示例
|
|
||||||
* @property {Boolean} animation = [ture|false] 是否开启动画
|
|
||||||
* @property {Boolean} maskClick = [ture|false] 蒙版点击是否关闭弹窗
|
|
||||||
* @event {Function} change 打开关闭弹窗触发，e={show: false}
|
|
||||||
*/
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: 'UniPopup',
|
|
||||||
components: {
|
|
||||||
uniTransition
|
|
||||||
},
|
|
||||||
props: {
|
|
||||||
// 开启动画
|
|
||||||
animation: {
|
|
||||||
type: Boolean,
|
|
||||||
default: true
|
|
||||||
},
|
|
||||||
// 弹出层类型，可选值，top: 顶部弹出层；bottom：底部弹出层；center：全屏弹出层
|
|
||||||
// message: 消息提示 ; dialog : 对话框
|
|
||||||
type: {
|
|
||||||
type: String,
|
|
||||||
default: 'center'
|
|
||||||
},
|
|
||||||
// maskClick
|
|
||||||
maskClick: {
|
|
||||||
type: Boolean,
|
|
||||||
default: true
|
|
||||||
}
|
|
||||||
},
|
|
||||||
provide() {
|
|
||||||
return {
|
|
||||||
popup: this
|
|
||||||
}
|
|
||||||
},
|
|
||||||
mixins: [popup],
|
|
||||||
watch: {
|
|
||||||
/**
|
|
||||||
* 监听type类型
|
|
||||||
*/
|
|
||||||
type: {
|
|
||||||
handler: function(newVal) {
|
|
||||||
this[this.config[newVal]]()
|
|
||||||
},
|
|
||||||
immediate: true
|
|
||||||
},
|
|
||||||
/**
|
|
||||||
* 监听遮罩是否可点击
|
|
||||||
* @param {Object} val
|
|
||||||
*/
|
|
||||||
maskClick(val) {
|
|
||||||
this.mkclick = val
|
|
||||||
}
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
duration: 300,
|
|
||||||
ani: [],
|
|
||||||
showPopup: false,
|
|
||||||
showTrans: false,
|
|
||||||
maskClass: {
|
|
||||||
'position': 'fixed',
|
|
||||||
'bottom': 0,
|
|
||||||
'top': 0,
|
|
||||||
'left': 0,
|
|
||||||
'right': 0,
|
|
||||||
'backgroundColor': 'rgba(0, 0, 0, 0.4)'
|
|
||||||
},
|
|
||||||
transClass: {
|
|
||||||
'position': 'fixed',
|
|
||||||
'left': 0,
|
|
||||||
'right': 0,
|
|
||||||
},
|
|
||||||
maskShow: true,
|
|
||||||
mkclick: true,
|
|
||||||
popupstyle: 'top'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
created() {
|
|
||||||
this.mkclick = this.maskClick
|
|
||||||
if (this.animation) {
|
|
||||||
this.duration = 300
|
|
||||||
} else {
|
|
||||||
this.duration = 0
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
clear(e) {
|
|
||||||
// TODO nvue 取消冒泡
|
|
||||||
e.stopPropagation()
|
|
||||||
},
|
|
||||||
open() {
|
|
||||||
this.showPopup = true
|
|
||||||
this.$nextTick(() => {
|
|
||||||
new Promise(resolve => {
|
|
||||||
clearTimeout(this.timer)
|
|
||||||
this.timer = setTimeout(() => {
|
|
||||||
this.showTrans = true
|
|
||||||
// fixed by mehaotian 兼容 app 端
|
|
||||||
this.$nextTick(() => {
|
|
||||||
resolve();
|
|
||||||
})
|
|
||||||
}, 50);
|
|
||||||
}).then(res => {
|
|
||||||
// 自定义打开事件
|
|
||||||
clearTimeout(this.msgtimer)
|
|
||||||
this.msgtimer = setTimeout(() => {
|
|
||||||
this.customOpen && this.customOpen()
|
|
||||||
}, 100)
|
|
||||||
this.$emit('change', {
|
|
||||||
show: true,
|
|
||||||
type: this.type
|
|
||||||
})
|
|
||||||
})
|
|
||||||
})
|
|
||||||
},
|
|
||||||
close(type) {
|
|
||||||
this.showTrans = false
|
|
||||||
this.$nextTick(() => {
|
|
||||||
this.$emit('change', {
|
|
||||||
show: false,
|
|
||||||
type: this.type
|
|
||||||
})
|
|
||||||
clearTimeout(this.timer)
|
|
||||||
// 自定义关闭事件
|
|
||||||
this.customOpen && this.customClose()
|
|
||||||
this.timer = setTimeout(() => {
|
|
||||||
this.showPopup = false
|
|
||||||
}, 300)
|
|
||||||
})
|
|
||||||
},
|
|
||||||
onTap() {
|
|
||||||
if (!this.mkclick) return
|
|
||||||
this.close()
|
|
||||||
},
|
|
||||||
/**
|
|
||||||
* 顶部弹出样式处理
|
|
||||||
*/
|
|
||||||
top() {
|
|
||||||
this.popupstyle = 'top'
|
|
||||||
this.ani = ['slide-top']
|
|
||||||
this.transClass = {
|
|
||||||
'position': 'fixed',
|
|
||||||
'left': 0,
|
|
||||||
'right': 0,
|
|
||||||
}
|
|
||||||
},
|
|
||||||
/**
|
|
||||||
* 底部弹出样式处理
|
|
||||||
*/
|
|
||||||
bottom() {
|
|
||||||
this.popupstyle = 'bottom'
|
|
||||||
this.ani = ['slide-bottom']
|
|
||||||
this.transClass = {
|
|
||||||
'position': 'fixed',
|
|
||||||
'left': 0,
|
|
||||||
'right': 0,
|
|
||||||
'bottom': 0
|
|
||||||
}
|
|
||||||
},
|
|
||||||
/**
|
|
||||||
* 中间弹出样式处理
|
|
||||||
*/
|
|
||||||
center() {
|
|
||||||
this.popupstyle = 'center'
|
|
||||||
this.ani = ['zoom-out', 'fade']
|
|
||||||
this.transClass = {
|
|
||||||
'position': 'fixed',
|
|
||||||
/* #ifndef APP-NVUE */
|
|
||||||
'display': 'flex',
|
|
||||||
'flexDirection': 'column',
|
|
||||||
/* #endif */
|
|
||||||
'bottom': 0,
|
|
||||||
'left': 0,
|
|
||||||
'right': 0,
|
|
||||||
'top': 0,
|
|
||||||
'justifyContent': 'center',
|
|
||||||
'alignItems': 'center'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.uni-popup {
|
|
||||||
position: fixed;
|
|
||||||
/* #ifndef APP-NVUE */
|
|
||||||
z-index: 99;
|
|
||||||
/* #endif */
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-popup__mask {
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
bottom: 0;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
background-color: $uni-bg-color-mask;
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.mask-ani {
|
|
||||||
transition-property: opacity;
|
|
||||||
transition-duration: 0.2s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-top-mask {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-bottom-mask {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-center-mask {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-popup__wrapper {
|
|
||||||
/* #ifndef APP-NVUE */
|
|
||||||
display: block;
|
|
||||||
/* #endif */
|
|
||||||
position: absolute;
|
|
||||||
}
|
|
||||||
|
|
||||||
.top {
|
|
||||||
/* #ifdef H5 */
|
|
||||||
top: var(--window-top);
|
|
||||||
/* #endif */
|
|
||||||
/* #ifndef H5 */
|
|
||||||
top: 0;
|
|
||||||
/* #endif */
|
|
||||||
}
|
|
||||||
|
|
||||||
.bottom {
|
|
||||||
bottom: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-popup__wrapper-box {
|
|
||||||
/* #ifndef APP-NVUE */
|
|
||||||
display: block;
|
|
||||||
/* #endif */
|
|
||||||
position: relative;
|
|
||||||
/* iphonex 等安全区设置，底部安全区适配 */
|
|
||||||
/* #ifndef APP-NVUE */
|
|
||||||
padding-bottom: constant(safe-area-inset-bottom);
|
|
||||||
padding-bottom: env(safe-area-inset-bottom);
|
|
||||||
/* #endif */
|
|
||||||
}
|
|
||||||
|
|
||||||
.content-ani {
|
|
||||||
// transition: transform 0.3s;
|
|
||||||
transition-property: transform, opacity;
|
|
||||||
transition-duration: 0.2s;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.uni-top-content {
|
|
||||||
transform: translateY(0);
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-bottom-content {
|
|
||||||
transform: translateY(0);
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-center-content {
|
|
||||||
transform: scale(1);
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,135 +0,0 @@
|
||||||
<template>
|
|
||||||
<view class="uni-section" nvue>
|
|
||||||
<view v-if="type" class="uni-section__head">
|
|
||||||
<view :class="type" class="uni-section__head-tag" />
|
|
||||||
</view>
|
|
||||||
<view class="uni-section__content">
|
|
||||||
<text :class="{'distraction':!subTitle}" class="uni-section__content-title">{{ title }}</text>
|
|
||||||
<text v-if="subTitle" class="uni-section__content-sub">{{ subTitle }}</text>
|
|
||||||
</view>
|
|
||||||
<slot />
|
|
||||||
</view>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Section 标题栏
|
|
||||||
* @description 标题栏
|
|
||||||
* @property {String} type = [line|circle] 标题装饰类型
|
|
||||||
* @value line 竖线
|
|
||||||
* @value circle 圆形
|
|
||||||
* @property {String} title 主标题
|
|
||||||
* @property {String} subTitle 副标题
|
|
||||||
*/
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: 'UniTitle',
|
|
||||||
props: {
|
|
||||||
type: {
|
|
||||||
type: String,
|
|
||||||
default: ''
|
|
||||||
},
|
|
||||||
title: {
|
|
||||||
type: String,
|
|
||||||
default: ''
|
|
||||||
},
|
|
||||||
subTitle: {
|
|
||||||
type: String,
|
|
||||||
default: ''
|
|
||||||
}
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {}
|
|
||||||
},
|
|
||||||
watch: {
|
|
||||||
title(newVal) {
|
|
||||||
if (uni.report && newVal !== '') {
|
|
||||||
uni.report('title', newVal)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
onClick() {
|
|
||||||
this.$emit('click')
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.uni-section {
|
|
||||||
position: relative;
|
|
||||||
/* #ifndef APP-NVUE */
|
|
||||||
display: flex;
|
|
||||||
/* #endif */
|
|
||||||
margin-top: 10px;
|
|
||||||
flex-direction: row;
|
|
||||||
align-items: center;
|
|
||||||
padding: 0 10px;
|
|
||||||
height: 50px;
|
|
||||||
background-color: $uni-bg-color-grey;
|
|
||||||
/* #ifdef APP-NVUE */
|
|
||||||
border-bottom-color: $uni-border-color;
|
|
||||||
border-bottom-style: solid;
|
|
||||||
border-bottom-width: 0.5px;
|
|
||||||
/* #endif */
|
|
||||||
font-weight: normal;
|
|
||||||
}
|
|
||||||
/* #ifndef APP-NVUE */
|
|
||||||
.uni-section:after {
|
|
||||||
position: absolute;
|
|
||||||
bottom: 0;
|
|
||||||
right: 0;
|
|
||||||
left: 0;
|
|
||||||
height: 1px;
|
|
||||||
content: '';
|
|
||||||
-webkit-transform: scaleY(.5);
|
|
||||||
transform: scaleY(.5);
|
|
||||||
background-color: $uni-border-color;
|
|
||||||
}
|
|
||||||
/* #endif */
|
|
||||||
|
|
||||||
.uni-section__head {
|
|
||||||
flex-direction: row;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
margin-right: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.line {
|
|
||||||
height: 15px;
|
|
||||||
background-color: $uni-text-color-disable;
|
|
||||||
border-radius: 5px;
|
|
||||||
width: 3px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.circle {
|
|
||||||
width: 8px;
|
|
||||||
height: 8px;
|
|
||||||
border-top-right-radius: 50px;
|
|
||||||
border-top-left-radius: 50px;
|
|
||||||
border-bottom-left-radius: 50px;
|
|
||||||
border-bottom-right-radius: 50px;
|
|
||||||
background-color: $uni-text-color-disable;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-section__content {
|
|
||||||
flex: 1;
|
|
||||||
color: $uni-text-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-section__content-title {
|
|
||||||
font-size: $uni-font-size-base;
|
|
||||||
color: $uni-text-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
.distraction {
|
|
||||||
flex-direction: row;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-section__content-sub {
|
|
||||||
font-size: $uni-font-size-sm;
|
|
||||||
color: $uni-text-color-grey;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,253 +0,0 @@
|
||||||
<template>
|
|
||||||
<view class="uni-steps">
|
|
||||||
<view :class="[direction==='column'?'uni-steps__column':'uni-steps__row']">
|
|
||||||
<view :class="[direction==='column'?'uni-steps__column-text-container':'uni-steps__row-text-container']">
|
|
||||||
<view v-for="(item,index) in options" :key="index" :class="[direction==='column'?'uni-steps__column-text':'uni-steps__row-text']">
|
|
||||||
<text :style="{color:index<=active?activeColor:deactiveColor}" :class="[direction==='column'?'uni-steps__column-title':'uni-steps__row-title']">{{item.title}}</text>
|
|
||||||
<text v-if="direction=='column'" :style="{color:index<=active?activeColor:deactiveColor}" :class="[direction==='column'?'uni-steps__column-desc':'uni-steps__row-desc']">{{item.desc}}</text>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
<view :class="[direction==='column'?'uni-steps__column-container':'uni-steps__row-container']">
|
|
||||||
<view :class="[direction==='column'?'uni-steps__column-line-item':'uni-steps__row-line-item']" v-for="(item,index) in options"
|
|
||||||
:key="index">
|
|
||||||
<view :class="[direction==='column'?'uni-steps__column-line':'uni-steps__row-line',direction==='column'?'uni-steps__column-line--before':'uni-steps__row-line--before']"
|
|
||||||
:style="{backgroundColor:index<=active&&index!==0?activeColor:index===0?'transparent':deactiveColor}"></view>
|
|
||||||
<view :class="[direction==='column'?'uni-steps__column-check':'uni-steps__row-check']" v-if="index === active">
|
|
||||||
<uni-icons :color="activeColor" type="checkbox-filled" size="14"></uni-icons>
|
|
||||||
</view>
|
|
||||||
<view :class="[direction==='column'?'uni-steps__column-circle':'uni-steps__row-circle']" v-else :style="{backgroundColor:index<active?activeColor:deactiveColor}"></view>
|
|
||||||
<view :class="[direction==='column'?'uni-steps__column-line':'uni-steps__row-line',direction==='column'?'uni-steps__column-line--after':'uni-steps__row-line--after']"
|
|
||||||
:style="{backgroundColor:index<active&&index!==options.length-1?activeColor:index===options.length-1?'transparent':deactiveColor}"></view>
|
|
||||||
<!-- <view v-if="index==0 && direction!='column'" class="address">北京市</view>
|
|
||||||
<view v-if="options.length-1 == index && direction!='column'" class="address">太原市</view> -->
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import uniIcons from '../uni-icons/uni-icons.vue'
|
|
||||||
export default {
|
|
||||||
name: 'UniSteps',
|
|
||||||
components: {
|
|
||||||
uniIcons
|
|
||||||
},
|
|
||||||
props: {
|
|
||||||
direction: {
|
|
||||||
// 排列方向 row column
|
|
||||||
type: String,
|
|
||||||
default: 'row'
|
|
||||||
},
|
|
||||||
activeColor: {
|
|
||||||
// 激活状态颜色
|
|
||||||
type: String,
|
|
||||||
default: '#1aad19'
|
|
||||||
},
|
|
||||||
deactiveColor: {
|
|
||||||
// 未激活状态颜色
|
|
||||||
type: String,
|
|
||||||
default: '#999999'
|
|
||||||
},
|
|
||||||
active: {
|
|
||||||
// 当前步骤
|
|
||||||
type: Number,
|
|
||||||
default: 0
|
|
||||||
},
|
|
||||||
options: {
|
|
||||||
type: Array,
|
|
||||||
default () {
|
|
||||||
return []
|
|
||||||
}
|
|
||||||
} // 数据
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.uni-steps {
|
|
||||||
/* #ifndef APP-NVUE */
|
|
||||||
display: flex;
|
|
||||||
width: 100%;
|
|
||||||
/* #endif */
|
|
||||||
/* #ifdef APP-NVUE */
|
|
||||||
flex: 1;
|
|
||||||
/* #endif */
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-steps__row {
|
|
||||||
/* #ifndef APP-NVUE */
|
|
||||||
display: flex;
|
|
||||||
/* #endif */
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-steps__column {
|
|
||||||
/* #ifndef APP-NVUE */
|
|
||||||
display: flex;
|
|
||||||
/* #endif */
|
|
||||||
flex-direction: row-reverse;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-steps__row-text-container {
|
|
||||||
/* #ifndef APP-NVUE */
|
|
||||||
display: flex;
|
|
||||||
/* #endif */
|
|
||||||
flex-direction: row;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-steps__column-text-container {
|
|
||||||
/* #ifndef APP-NVUE */
|
|
||||||
display: flex;
|
|
||||||
/* #endif */
|
|
||||||
flex-direction: column;
|
|
||||||
flex: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-steps__row-text {
|
|
||||||
/* #ifndef APP-NVUE */
|
|
||||||
display: inline-flex;
|
|
||||||
/* #endif */
|
|
||||||
flex: 1;
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-steps__column-text {
|
|
||||||
padding: 6px 0px;
|
|
||||||
// border-bottom-style: solid;
|
|
||||||
// border-bottom-width: 1px;
|
|
||||||
// border-bottom-color: $uni-border-color;
|
|
||||||
/* #ifndef APP-NVUE */
|
|
||||||
display: flex;
|
|
||||||
/* #endif */
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-steps__row-title {
|
|
||||||
font-size: 24rpx;
|
|
||||||
line-height: 16px;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-steps__column-title {
|
|
||||||
font-size: 24rpx;
|
|
||||||
text-align: left;
|
|
||||||
line-height: 18px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-steps__row-desc {
|
|
||||||
font-size: 12px;
|
|
||||||
line-height: 14px;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-steps__column-desc {
|
|
||||||
font-size: $uni-font-size-sm;
|
|
||||||
text-align: left;
|
|
||||||
line-height: 18px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-steps__row-container {
|
|
||||||
/* #ifndef APP-NVUE */
|
|
||||||
display: flex;
|
|
||||||
/* #endif */
|
|
||||||
flex-direction: row;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-steps__column-container {
|
|
||||||
/* #ifndef APP-NVUE */
|
|
||||||
display: inline-flex;
|
|
||||||
/* #endif */
|
|
||||||
width: 30px;
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-steps__row-line-item {
|
|
||||||
/* #ifndef APP-NVUE */
|
|
||||||
display: inline-flex;
|
|
||||||
/* #endif */
|
|
||||||
flex-direction: row;
|
|
||||||
flex: 1;
|
|
||||||
height: 14px;
|
|
||||||
line-height: 14px;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
position: relative;
|
|
||||||
.address{
|
|
||||||
position: absolute;
|
|
||||||
top: 40rpx;
|
|
||||||
left: 60rpx;
|
|
||||||
color: #999;
|
|
||||||
font-size: 24rpx;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-steps__column-line-item {
|
|
||||||
/* #ifndef APP-NVUE */
|
|
||||||
display: flex;
|
|
||||||
/* #endif */
|
|
||||||
flex-direction: column;
|
|
||||||
flex: 1;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-steps__row-line {
|
|
||||||
flex: 1;
|
|
||||||
height: 1px;
|
|
||||||
background-color: $uni-text-color-grey;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-steps__column-line {
|
|
||||||
width: 1px;
|
|
||||||
background-color: $uni-text-color-grey;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-steps__row-line--after {
|
|
||||||
transform: translateX(1px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-steps__column-line--after {
|
|
||||||
flex: 1;
|
|
||||||
transform: translate(0px, 1px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-steps__row-line--before {
|
|
||||||
transform: translateX(-1px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-steps__column-line--before {
|
|
||||||
height: 6px;
|
|
||||||
transform: translate(0px, -1px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-steps__row-circle {
|
|
||||||
width: 5px;
|
|
||||||
height: 5px;
|
|
||||||
border-radius: 100px;
|
|
||||||
background-color: $uni-text-color-grey;
|
|
||||||
margin: 0px 3px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-steps__column-circle {
|
|
||||||
width: 5px;
|
|
||||||
height: 5px;
|
|
||||||
border-radius: 100px;
|
|
||||||
background-color: $uni-text-color-grey;
|
|
||||||
margin: 4px 0px 5px 0px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-steps__row-check {
|
|
||||||
margin: 0px 6px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-steps__column-check {
|
|
||||||
height: 14px;
|
|
||||||
line-height: 14px;
|
|
||||||
margin: 2px 0px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,184 +0,0 @@
|
||||||
<template>
|
|
||||||
<view class="uni-swiper__warp">
|
|
||||||
<slot />
|
|
||||||
<view v-if="mode === 'default'" :style="{'bottom':dots.bottom + 'px'}" class="uni-swiper__dots-box" key='default'>
|
|
||||||
<view v-for="(item,index) in info" :style="{
|
|
||||||
'width': (index === current? dots.width*2:dots.width ) + 'px','height':dots.width/3 +'px' ,'background-color':index !== current?dots.backgroundColor:dots.selectedBackgroundColor,'border-radius':'0px'}"
|
|
||||||
:key="index" class="uni-swiper__dots-item uni-swiper__dots-bar" />
|
|
||||||
</view>
|
|
||||||
<view v-if="mode === 'dot'" :style="{'bottom':dots.bottom + 'px'}" class="uni-swiper__dots-box" key='dot'>
|
|
||||||
<view v-for="(item,index) in info" :style="{
|
|
||||||
'width': dots.width + 'px','height':dots.height +'px' ,'background-color':index !== current?dots.backgroundColor:dots.selectedBackgroundColor,'border':index !==current ? dots.border:dots.selectedBorder}"
|
|
||||||
:key="index" class="uni-swiper__dots-item" />
|
|
||||||
</view>
|
|
||||||
<view v-if="mode === 'round'" :style="{'bottom':dots.bottom + 'px'}" class="uni-swiper__dots-box" key='round'>
|
|
||||||
<view v-for="(item,index) in info" :class="[index === current&&'uni-swiper__dots-long']" :style="{
|
|
||||||
'width':(index === current? dots.width*3:dots.width ) + 'px','height':dots.height +'px' ,'background-color':index !== current?dots.backgroundColor:dots.selectedBackgroundColor,'border':index !==current ? dots.border:dots.selectedBorder}"
|
|
||||||
:key="index" class="uni-swiper__dots-item " />
|
|
||||||
</view>
|
|
||||||
<view v-if="mode === 'nav'" key='nav' :style="{'background-color':dotsStyles.backgroundColor,'bottom':'0'}" class="uni-swiper__dots-box uni-swiper__dots-nav">
|
|
||||||
<text :style="{'color':dotsStyles.color}" class="uni-swiper__dots-nav-item">{{ (current+1)+"/"+info.length +' ' +info[current][field] }}</text>
|
|
||||||
</view>
|
|
||||||
<view v-if="mode === 'indexes'" key='indexes' :style="{'bottom':dots.bottom + 'px'}" class="uni-swiper__dots-box">
|
|
||||||
<view v-for="(item,index) in info" :style="{
|
|
||||||
'width':dots.width + 'px','height':dots.height +'px' ,'color':index === current?dots.selectedColor:dots.color,'background-color':index !== current?dots.backgroundColor:dots.selectedBackgroundColor,'border':index !==current ? dots.border:dots.selectedBorder}"
|
|
||||||
:key="index" class="uni-swiper__dots-item uni-swiper__dots-indexes"><text class="uni-swiper__dots-indexes-text">{{ index+1 }}</text></view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
name: 'UniSwiperDot',
|
|
||||||
props: {
|
|
||||||
info: {
|
|
||||||
type: Array,
|
|
||||||
default () {
|
|
||||||
return []
|
|
||||||
}
|
|
||||||
},
|
|
||||||
current: {
|
|
||||||
type: Number,
|
|
||||||
default: 0
|
|
||||||
},
|
|
||||||
dotsStyles: {
|
|
||||||
type: Object,
|
|
||||||
default () {
|
|
||||||
return {}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
// 类型 ：default(默认) indexes long nav
|
|
||||||
mode: {
|
|
||||||
type: String,
|
|
||||||
default: 'default'
|
|
||||||
},
|
|
||||||
// 只在 nav 模式下生效，变量名称
|
|
||||||
field: {
|
|
||||||
type: String,
|
|
||||||
default: ''
|
|
||||||
}
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
dots: {
|
|
||||||
width: 8,
|
|
||||||
height: 8,
|
|
||||||
bottom: 10,
|
|
||||||
color: '#fff',
|
|
||||||
backgroundColor: 'rgba(0, 0, 0, .3)',
|
|
||||||
border: '1px rgba(0, 0, 0, .3) solid',
|
|
||||||
selectedBackgroundColor: '#333',
|
|
||||||
selectedBorder: '1px rgba(0, 0, 0, .9) solid'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
watch: {
|
|
||||||
dotsStyles(newVal) {
|
|
||||||
this.dots = Object.assign(this.dots, this.dotsStyles)
|
|
||||||
},
|
|
||||||
mode(newVal) {
|
|
||||||
if (newVal === 'indexes') {
|
|
||||||
this.dots.width = 20
|
|
||||||
this.dots.height = 20
|
|
||||||
} else {
|
|
||||||
this.dots.width = 8
|
|
||||||
this.dots.height = 8
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
},
|
|
||||||
created() {
|
|
||||||
if (this.mode === 'indexes') {
|
|
||||||
this.dots.width = 20
|
|
||||||
this.dots.height = 20
|
|
||||||
}
|
|
||||||
this.dots = Object.assign(this.dots, this.dotsStyles)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.uni-swiper__warp {
|
|
||||||
/* #ifndef APP-NVUE */
|
|
||||||
display: flex;
|
|
||||||
/* #endif */
|
|
||||||
flex: 1;
|
|
||||||
flex-direction: column;
|
|
||||||
position: relative;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-swiper__dots-box {
|
|
||||||
position: absolute;
|
|
||||||
bottom: 10px;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
/* #ifndef APP-NVUE */
|
|
||||||
display: flex;
|
|
||||||
/* #endif */
|
|
||||||
flex: 1;
|
|
||||||
flex-direction: row;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-swiper__dots-item {
|
|
||||||
width: 8px;
|
|
||||||
border-radius: 100px;
|
|
||||||
margin-left: 6px;
|
|
||||||
background-color: $uni-bg-color-mask;
|
|
||||||
// transition: width 0.2s linear; 不要取消注释，不然会不能变色
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-swiper__dots-item:first-child {
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-swiper__dots-default {
|
|
||||||
border-radius: 100px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-swiper__dots-long {
|
|
||||||
border-radius: 50px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-swiper__dots-bar {
|
|
||||||
border-radius: 50px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-swiper__dots-nav {
|
|
||||||
bottom: 0px;
|
|
||||||
height: 40px;
|
|
||||||
/* #ifndef APP-NVUE */
|
|
||||||
display: flex;
|
|
||||||
/* #endif */
|
|
||||||
flex: 1;
|
|
||||||
flex-direction: row;
|
|
||||||
justify-content: flex-start;
|
|
||||||
align-items: center;
|
|
||||||
background-color: rgba(0, 0, 0, 0.2);
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-swiper__dots-nav-item {
|
|
||||||
/* overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
white-space: nowrap; */
|
|
||||||
font-size: $uni-font-size-base;
|
|
||||||
color: #fff;
|
|
||||||
margin: 0 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-swiper__dots-indexes {
|
|
||||||
/* #ifndef APP-NVUE */
|
|
||||||
display: flex;
|
|
||||||
/* #endif */
|
|
||||||
// flex: 1;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-swiper__dots-indexes-text {
|
|
||||||
color: #fff;
|
|
||||||
font-size: $uni-font-size-sm;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,230 +0,0 @@
|
||||||
<template>
|
|
||||||
<view :class="[
|
|
||||||
'uni-tag--' + type,
|
|
||||||
disabled === true || disabled === 'true' ? 'uni-tag--disabled' : '',
|
|
||||||
inverted === true || inverted === 'true' ? type + '-uni-tag--inverted' : '',
|
|
||||||
circle === true || circle === 'true' ? 'uni-tag--circle' : '',
|
|
||||||
mark === true || mark === 'true' ? 'uni-tag--mark' : '',
|
|
||||||
'uni-tag--' + size
|
|
||||||
]"
|
|
||||||
@click="onClick()" class="uni-tag" v-if="text">
|
|
||||||
<text :class="[type === 'default' ? 'uni-tag--default':'uni-tag-text',inverted === true || inverted === 'true' ? 'uni-tag-text--'+type : '',size === 'small' ? 'uni-tag-text--small':'' ]">{{ text }}</text>
|
|
||||||
</view>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
/**
|
|
||||||
* Tag 标签
|
|
||||||
* @description 用于展示1个或多个文字标签，可点击切换选中、不选中的状态
|
|
||||||
* @tutorial https://ext.dcloud.net.cn/plugin?id=35
|
|
||||||
* @property {String} text 标签内容
|
|
||||||
* @property {String} size = [normal|small] 大小尺寸
|
|
||||||
* @value normal 正常
|
|
||||||
* @value small 小尺寸
|
|
||||||
* @property {String} type = [default|primary|success｜warning｜error｜royal] 颜色类型
|
|
||||||
* @value default 灰色
|
|
||||||
* @value primary 蓝色
|
|
||||||
* @value success 绿色
|
|
||||||
* @value warning 黄色
|
|
||||||
* @value error 红色
|
|
||||||
* @value royal 紫色
|
|
||||||
* @property {Boolean} disabled = [true|false] 是否为禁用状态
|
|
||||||
* @property {Boolean} inverted = [true|false] 是否无需背景颜色（空心标签）
|
|
||||||
* @property {Boolean} circle = [true|false] 是否为圆角
|
|
||||||
* @event {Function} click 点击 Tag 触发事件
|
|
||||||
*/
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: "UniTag",
|
|
||||||
props: {
|
|
||||||
type: {
|
|
||||||
// 标签类型default、primary、success、warning、error、royal
|
|
||||||
type: String,
|
|
||||||
default: "default"
|
|
||||||
},
|
|
||||||
size: {
|
|
||||||
// 标签大小 normal, small
|
|
||||||
type: String,
|
|
||||||
default: "normal"
|
|
||||||
},
|
|
||||||
// 标签内容
|
|
||||||
text: {
|
|
||||||
type: String,
|
|
||||||
default: ""
|
|
||||||
},
|
|
||||||
disabled: {
|
|
||||||
// 是否为禁用状态
|
|
||||||
type: [Boolean, String],
|
|
||||||
default: false
|
|
||||||
},
|
|
||||||
inverted: {
|
|
||||||
// 是否为空心
|
|
||||||
type: [Boolean, String],
|
|
||||||
default: false
|
|
||||||
},
|
|
||||||
circle: {
|
|
||||||
// 是否为圆角样式
|
|
||||||
type: [Boolean, String],
|
|
||||||
default: false
|
|
||||||
},
|
|
||||||
mark: {
|
|
||||||
// 是否为标记样式
|
|
||||||
type: [Boolean, String],
|
|
||||||
default: false
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
onClick() {
|
|
||||||
if (this.disabled === true || this.disabled === "true") {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
this.$emit("click");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
$tag-pd: 0px 16px;
|
|
||||||
$tag-small-pd: 0px 8px;
|
|
||||||
|
|
||||||
.uni-tag {
|
|
||||||
/* #ifndef APP-NVUE */
|
|
||||||
display: flex;
|
|
||||||
/* #endif */
|
|
||||||
padding: $tag-pd;
|
|
||||||
height: 30px;
|
|
||||||
line-height: 30px;
|
|
||||||
justify-content: center;
|
|
||||||
color: $uni-text-color;
|
|
||||||
border-radius: $uni-border-radius-base;
|
|
||||||
background-color: $uni-bg-color-grey;
|
|
||||||
border-width: 1rpx;
|
|
||||||
border-style: solid;
|
|
||||||
border-color: $uni-bg-color-grey;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-tag--circle {
|
|
||||||
border-radius: 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-tag--mark {
|
|
||||||
border-top-left-radius: 0;
|
|
||||||
border-bottom-left-radius: 0;
|
|
||||||
border-top-right-radius: 15px;
|
|
||||||
border-bottom-right-radius: 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-tag--disabled {
|
|
||||||
opacity: 0.5;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-tag--small {
|
|
||||||
height: 20px;
|
|
||||||
padding: $tag-small-pd;
|
|
||||||
line-height: 20px;
|
|
||||||
font-size: $uni-font-size-sm;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-tag--default {
|
|
||||||
color: $uni-text-color;
|
|
||||||
font-size: $uni-font-size-base;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-tag-text--small {
|
|
||||||
font-size: $uni-font-size-sm !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-tag-text {
|
|
||||||
color: $uni-text-color-inverse;
|
|
||||||
font-size: $uni-font-size-base;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-tag-text--primary {
|
|
||||||
color: $uni-color-primary !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-tag-text--success {
|
|
||||||
color: $uni-color-success !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-tag-text--warning {
|
|
||||||
color: $uni-color-warning !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-tag-text--error {
|
|
||||||
color: $uni-color-error !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-tag--primary {
|
|
||||||
color: $uni-text-color-inverse;
|
|
||||||
background-color: $uni-color-primary;
|
|
||||||
border-width: 1rpx;
|
|
||||||
border-style: solid;
|
|
||||||
border-color: $uni-color-primary;
|
|
||||||
}
|
|
||||||
|
|
||||||
.primary-uni-tag--inverted {
|
|
||||||
color: $uni-color-primary;
|
|
||||||
background-color: $uni-bg-color;
|
|
||||||
border-width: 1rpx;
|
|
||||||
border-style: solid;
|
|
||||||
border-color: $uni-color-primary;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-tag--success {
|
|
||||||
color: $uni-text-color-inverse;
|
|
||||||
background-color: $uni-color-success;
|
|
||||||
border-width: 1rpx;
|
|
||||||
border-style: solid;
|
|
||||||
border-color: $uni-color-success;
|
|
||||||
}
|
|
||||||
|
|
||||||
.success-uni-tag--inverted {
|
|
||||||
color: $uni-color-success;
|
|
||||||
background-color: $uni-bg-color;
|
|
||||||
border-width: 1rpx;
|
|
||||||
border-style: solid;
|
|
||||||
border-color: $uni-color-success;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-tag--warning {
|
|
||||||
color: $uni-text-color-inverse;
|
|
||||||
background-color: $uni-color-warning;
|
|
||||||
border-width: 1rpx;
|
|
||||||
border-style: solid;
|
|
||||||
border-color: $uni-color-warning;
|
|
||||||
}
|
|
||||||
|
|
||||||
.warning-uni-tag--inverted {
|
|
||||||
color: $uni-color-warning;
|
|
||||||
background-color: $uni-bg-color;
|
|
||||||
border-width: 1rpx;
|
|
||||||
border-style: solid;
|
|
||||||
border-color: $uni-color-warning;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-tag--error {
|
|
||||||
color: $uni-text-color-inverse;
|
|
||||||
background-color: $uni-color-error;
|
|
||||||
border-width: 1rpx;
|
|
||||||
border-style: solid;
|
|
||||||
border-color: $uni-color-error;
|
|
||||||
}
|
|
||||||
|
|
||||||
.error-uni-tag--inverted {
|
|
||||||
color: $uni-color-error;
|
|
||||||
background-color: $uni-bg-color;
|
|
||||||
border-width: 1rpx;
|
|
||||||
border-style: solid;
|
|
||||||
border-color: $uni-color-error;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-tag--inverted {
|
|
||||||
color: $uni-text-color;
|
|
||||||
background-color: $uni-bg-color;
|
|
||||||
border-width: 1rpx;
|
|
||||||
border-style: solid;
|
|
||||||
border-color: $uni-bg-color-grey;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,279 +0,0 @@
|
||||||
<template>
|
|
||||||
<view v-if="isShow" ref="ani" class="uni-transition" :class="[ani.in]" :style="'transform:' +transform+';'+stylesObject"
|
|
||||||
@click="change">
|
|
||||||
<slot></slot>
|
|
||||||
</view>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
// #ifdef APP-NVUE
|
|
||||||
const animation = uni.requireNativePlugin('animation');
|
|
||||||
// #endif
|
|
||||||
/**
|
|
||||||
* Transition 过渡动画
|
|
||||||
* @description 简单过渡动画组件
|
|
||||||
* @tutorial https://ext.dcloud.net.cn/plugin?id=985
|
|
||||||
* @property {Boolean} show = [false|true] 控制组件显示或隐藏
|
|
||||||
* @property {Array} modeClass = [fade|slide-top|slide-right|slide-bottom|slide-left|zoom-in|zoom-out] 过渡动画类型
|
|
||||||
* @value fade 渐隐渐出过渡
|
|
||||||
* @value slide-top 由上至下过渡
|
|
||||||
* @value slide-right 由右至左过渡
|
|
||||||
* @value slide-bottom 由下至上过渡
|
|
||||||
* @value slide-left 由左至右过渡
|
|
||||||
* @value zoom-in 由小到大过渡
|
|
||||||
* @value zoom-out 由大到小过渡
|
|
||||||
* @property {Number} duration 过渡动画持续时间
|
|
||||||
* @property {Object} styles 组件样式，同 css 样式，注意带’-‘连接符的属性需要使用小驼峰写法如：`backgroundColor:red`
|
|
||||||
*/
|
|
||||||
export default {
|
|
||||||
name: 'uniTransition',
|
|
||||||
props: {
|
|
||||||
show: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false
|
|
||||||
},
|
|
||||||
modeClass: {
|
|
||||||
type: Array,
|
|
||||||
default () {
|
|
||||||
return []
|
|
||||||
}
|
|
||||||
},
|
|
||||||
duration: {
|
|
||||||
type: Number,
|
|
||||||
default: 300
|
|
||||||
},
|
|
||||||
styles: {
|
|
||||||
type: Object,
|
|
||||||
default () {
|
|
||||||
return {}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
isShow: false,
|
|
||||||
transform: '',
|
|
||||||
ani: { in: '',
|
|
||||||
active: ''
|
|
||||||
}
|
|
||||||
};
|
|
||||||
},
|
|
||||||
watch: {
|
|
||||||
show: {
|
|
||||||
handler(newVal) {
|
|
||||||
if (newVal) {
|
|
||||||
this.open()
|
|
||||||
} else {
|
|
||||||
this.close()
|
|
||||||
}
|
|
||||||
},
|
|
||||||
immediate: true
|
|
||||||
}
|
|
||||||
},
|
|
||||||
computed: {
|
|
||||||
stylesObject() {
|
|
||||||
let styles = {
|
|
||||||
...this.styles,
|
|
||||||
'transition-duration': this.duration / 1000 + 's'
|
|
||||||
}
|
|
||||||
let transfrom = ''
|
|
||||||
for (let i in styles) {
|
|
||||||
let line = this.toLine(i)
|
|
||||||
transfrom += line + ':' + styles[i] + ';'
|
|
||||||
}
|
|
||||||
return transfrom
|
|
||||||
}
|
|
||||||
},
|
|
||||||
created() {
|
|
||||||
// this.timer = null
|
|
||||||
// this.nextTick = (time = 50) => new Promise(resolve => {
|
|
||||||
// clearTimeout(this.timer)
|
|
||||||
// this.timer = setTimeout(resolve, time)
|
|
||||||
// return this.timer
|
|
||||||
// });
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
change() {
|
|
||||||
this.$emit('click', {
|
|
||||||
detail: this.isShow
|
|
||||||
})
|
|
||||||
},
|
|
||||||
open() {
|
|
||||||
clearTimeout(this.timer)
|
|
||||||
this.isShow = true
|
|
||||||
this.transform = ''
|
|
||||||
this.ani.in = ''
|
|
||||||
for (let i in this.getTranfrom(false)) {
|
|
||||||
if (i === 'opacity') {
|
|
||||||
this.ani.in = 'fade-in'
|
|
||||||
} else {
|
|
||||||
this.transform += `${this.getTranfrom(false)[i]} `
|
|
||||||
}
|
|
||||||
}
|
|
||||||
this.$nextTick(() => {
|
|
||||||
setTimeout(() => {
|
|
||||||
this._animation(true)
|
|
||||||
}, 50)
|
|
||||||
})
|
|
||||||
|
|
||||||
},
|
|
||||||
close(type) {
|
|
||||||
clearTimeout(this.timer)
|
|
||||||
this._animation(false)
|
|
||||||
},
|
|
||||||
_animation(type) {
|
|
||||||
let styles = this.getTranfrom(type)
|
|
||||||
// #ifdef APP-NVUE
|
|
||||||
if(!this.$refs['ani']) return
|
|
||||||
animation.transition(this.$refs['ani'].ref, {
|
|
||||||
styles,
|
|
||||||
duration: this.duration, //ms
|
|
||||||
timingFunction: 'ease',
|
|
||||||
needLayout: false,
|
|
||||||
delay: 0 //ms
|
|
||||||
}, () => {
|
|
||||||
if (!type) {
|
|
||||||
this.isShow = false
|
|
||||||
}
|
|
||||||
this.$emit('change', {
|
|
||||||
detail: this.isShow
|
|
||||||
})
|
|
||||||
})
|
|
||||||
// #endif
|
|
||||||
// #ifndef APP-NVUE
|
|
||||||
this.transform = ''
|
|
||||||
for (let i in styles) {
|
|
||||||
if (i === 'opacity') {
|
|
||||||
this.ani.in = `fade-${type?'out':'in'}`
|
|
||||||
} else {
|
|
||||||
this.transform += `${styles[i]} `
|
|
||||||
}
|
|
||||||
}
|
|
||||||
this.timer = setTimeout(() => {
|
|
||||||
if (!type) {
|
|
||||||
this.isShow = false
|
|
||||||
}
|
|
||||||
this.$emit('change', {
|
|
||||||
detail: this.isShow
|
|
||||||
})
|
|
||||||
|
|
||||||
}, this.duration)
|
|
||||||
// #endif
|
|
||||||
|
|
||||||
},
|
|
||||||
getTranfrom(type) {
|
|
||||||
let styles = {
|
|
||||||
transform: ''
|
|
||||||
}
|
|
||||||
this.modeClass.forEach((mode) => {
|
|
||||||
switch (mode) {
|
|
||||||
case 'fade':
|
|
||||||
styles.opacity = type ? 1 : 0
|
|
||||||
break;
|
|
||||||
case 'slide-top':
|
|
||||||
styles.transform += `translateY(${type?'0':'-100%'}) `
|
|
||||||
break;
|
|
||||||
case 'slide-right':
|
|
||||||
styles.transform += `translateX(${type?'0':'100%'}) `
|
|
||||||
break;
|
|
||||||
case 'slide-bottom':
|
|
||||||
styles.transform += `translateY(${type?'0':'100%'}) `
|
|
||||||
break;
|
|
||||||
case 'slide-left':
|
|
||||||
styles.transform += `translateX(${type?'0':'-100%'}) `
|
|
||||||
break;
|
|
||||||
case 'zoom-in':
|
|
||||||
styles.transform += `scale(${type?1:0.8}) `
|
|
||||||
break;
|
|
||||||
case 'zoom-out':
|
|
||||||
styles.transform += `scale(${type?1:1.2}) `
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
})
|
|
||||||
return styles
|
|
||||||
},
|
|
||||||
_modeClassArr(type) {
|
|
||||||
let mode = this.modeClass
|
|
||||||
if (typeof(mode) !== "string") {
|
|
||||||
let modestr = ''
|
|
||||||
mode.forEach((item) => {
|
|
||||||
modestr += (item + '-' + type + ',')
|
|
||||||
})
|
|
||||||
return modestr.substr(0, modestr.length - 1)
|
|
||||||
} else {
|
|
||||||
return mode + '-' + type
|
|
||||||
}
|
|
||||||
},
|
|
||||||
// getEl(el) {
|
|
||||||
// console.log(el || el.ref || null);
|
|
||||||
// return el || el.ref || null
|
|
||||||
// },
|
|
||||||
toLine(name) {
|
|
||||||
return name.replace(/([A-Z])/g, "-$1").toLowerCase();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
.uni-transition {
|
|
||||||
transition-timing-function: ease;
|
|
||||||
transition-duration: 0.3s;
|
|
||||||
transition-property: transform, opacity;
|
|
||||||
}
|
|
||||||
|
|
||||||
.fade-in {
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.fade-active {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.slide-top-in {
|
|
||||||
/* transition-property: transform, opacity; */
|
|
||||||
transform: translateY(-100%);
|
|
||||||
}
|
|
||||||
|
|
||||||
.slide-top-active {
|
|
||||||
transform: translateY(0);
|
|
||||||
/* opacity: 1; */
|
|
||||||
}
|
|
||||||
|
|
||||||
.slide-right-in {
|
|
||||||
transform: translateX(100%);
|
|
||||||
}
|
|
||||||
|
|
||||||
.slide-right-active {
|
|
||||||
transform: translateX(0);
|
|
||||||
}
|
|
||||||
|
|
||||||
.slide-bottom-in {
|
|
||||||
transform: translateY(100%);
|
|
||||||
}
|
|
||||||
|
|
||||||
.slide-bottom-active {
|
|
||||||
transform: translateY(0);
|
|
||||||
}
|
|
||||||
|
|
||||||
.slide-left-in {
|
|
||||||
transform: translateX(-100%);
|
|
||||||
}
|
|
||||||
|
|
||||||
.slide-left-active {
|
|
||||||
transform: translateX(0);
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.zoom-in-in {
|
|
||||||
transform: scale(0.8);
|
|
||||||
}
|
|
||||||
|
|
||||||
.zoom-out-active {
|
|
||||||
transform: scale(1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.zoom-out-in {
|
|
||||||
transform: scale(1.2);
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -6,10 +6,7 @@
|
||||||
const dev = {
|
const dev = {
|
||||||
common: "https://common-api.pickmall.cn",
|
common: "https://common-api.pickmall.cn",
|
||||||
buyer: "https://buyer-api.pickmall.cn",
|
buyer: "https://buyer-api.pickmall.cn",
|
||||||
// common: "http://192.168.0.101:8890",
|
|
||||||
// buyer: "http://192.168.0.101:8888",
|
|
||||||
// seller: "http://192.168.0.101:8889",
|
|
||||||
// manager: "http://192.168.0.101:8887",
|
|
||||||
};
|
};
|
||||||
// 生产环境
|
// 生产环境
|
||||||
const prod = {
|
const prod = {
|
||||||
|
|
|
||||||
|
|
@ -30,11 +30,8 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import uniSteps from "@/components/uni-steps/uni-steps.vue";
|
|
||||||
import { getExpress } from "@/api/trade.js";
|
import { getExpress } from "@/api/trade.js";
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
components: { uniSteps },
|
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
express: "",
|
express: "",
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue