yangchunlong/orico-association
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

活动按钮状态流转

Browse Source
This commit is contained in:
yangchunlong
2026-03-25 15:53:37 +08:00
commit 37346e790f
2762 changed files with 240282 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
components/u-alert-tips/theme.scss Normal file
View File

@@ -0,0 +1,38 @@
// 此文件为uView的主题变量，这些变量目前只能通过uni.scss引入才有效，另外由于
// uni.scss中引入的样式会同时混入到全局样式文件和单独每一个页面的样式中，造成微信程序包太大，
// 故uni.scss只建议放scss变量名相关样式，其他的样式可以通过main.js或者App.vue引入
$u-main-color: #303133;
$u-content-color: #606266;
$u-tips-color: #909399;
$u-light-color: #c0c4cc;
$u-border-color: #e4e7ed;
$u-bg-color: #f3f4f6;
$u-type-primary: #2979ff;
$u-type-primary-light: #ecf5ff;
$u-type-primary-disabled: #a0cfff;
$u-type-primary-dark: #2b85e4;
$u-type-warning: #ff9900;
$u-type-warning-disabled: #fcbd71;
$u-type-warning-dark: #f29100;
$u-type-warning-light: #fdf6ec;
$u-type-success: #19be6b;
$u-type-success-disabled: #71d5a1;
$u-type-success-dark: #18b566;
$u-type-success-light: #dbf1e1;
$u-type-error: #fa3534;
$u-type-error-disabled: #fab6b6;
$u-type-error-dark: #dd6161;
$u-type-error-light: #fef0f0;
$u-type-info: #909399;
$u-type-info-disabled: #c8c9cc;
$u-type-info-dark: #82848a;
$u-type-info-light: #f4f4f5;
$u-form-item-height: 70rpx;
$u-form-item-border-color: #dcdfe6;

341
components/u-alert-tips/u-alert-tips.vue Normal file
View File

@@ -0,0 +1,341 @@
<template>
<view class="u-alert-tips" v-if="show" :class="[
!show ? 'u-close-alert-tips': '',
type ? 'u-alert-tips--bg--' + type + '-light' : '',
type ? 'u-alert-tips--border--' + type + '-disabled' : '',
]" :style="{
backgroundColor: bgColor,
borderColor: borderColor
}">
<view class="u-icon-wrap">
<u-icon v-if="showIcon" :name="uIcon + '-fill'" :size="description ? 56 : 40" class="u-icon" :color="uIconType" :custom-style="iconStyle"></u-icon>
</view>
<view class="u-alert-content" @tap.stop="click">
<view class="u-alert-title" :class="'u-alert-tips--color--' + type" :style="[uTitleStyle]">
{{title}}
</view>
<view v-if="description" class="u-alert-desc" :class="'u-alert-tips--color--' + type" :style="[descStyle]">
{{description}}
</view>
</view>
<view class="u-icon-wrap">
<u-icon @click="close" v-if="closeAble && !closeText" hoverClass="u-type-error-hover-color" name="close" color="#c0c4cc"
:size="22" class="u-close-icon" :style="{
top: description ? '18rpx' : '24rpx'
}"></u-icon>
</view>
<text v-if="closeAble && closeText" class="u-close-text" :style="{
top: description ? '18rpx' : '24rpx'
}">{{closeText}}</text>
</view>
</template>
<script>
/**
* alertTips 警告提示
* @description 警告提示，展现需要关注的信息
* @tutorial https://uviewui.com/components/alertTips.html
* @property {String} title 显示的标题文字
* @property {String} description 辅助性文字，颜色比title浅一点，字号也小一点，可选
* @property {String} type 关闭按钮(默认为叉号icon图标)
* @property {String} icon 图标名称
* @property {Object} icon-style 图标的样式，对象形式
* @property {Object} title-style 标题的样式，对象形式
* @property {Object} desc-style 描述的样式，对象形式
* @property {String} close-able 用文字替代关闭图标，close-able为true时有效
* @property {Boolean} show-icon 是否显示左边的辅助图标
* @property {Boolean} show 显示或隐藏组件
* @event {Function} click 点击组件时触发
* @event {Function} close 点击关闭按钮时触发
*/
export default {
name: 'u-alert-tips',
props: {
// 显示文字
title: {
type: String,
default: ''
},
// 主题，success/warning/info/error
type: {
type: String,
default: 'warning'
},
// 辅助性文字
description: {
type: String,
default: ''
},
// 是否可关闭
closeAble: {
type: Boolean,
default: false
},
// 关闭按钮自定义文本
closeText: {
type: String,
default: ''
},
// 是否显示图标
showIcon: {
type: Boolean,
default: false
},
// 文字颜色，如果定义了color值，icon会失效
color: {
type: String,
default: ''
},
// 背景颜色
bgColor: {
type: String,
default: ''
},
// 边框颜色
borderColor: {
type: String,
default: ''
},
// 是否显示
show: {
type: Boolean,
default: true
},
// 左边显示的icon
icon: {
type: String,
default: ''
},
// icon的样式
iconStyle: {
type: Object,
default() {
return {}
}
},
// 标题的样式
titleStyle: {
type: Object,
default() {
return {}
}
},
// 描述文字的样式
descStyle: {
type: Object,
default() {
return {}
}
},
},
data() {
return {
}
},
computed: {
uTitleStyle() {
let style = {};
// 如果有描述文字的话，标题进行加粗
style.fontWeight = this.description ? 'bold' : 'normal';
// 将用户传入样式对象和style合并，传入的优先级比style高，同属性会被覆盖
return this.deepMerge(style, this.titleStyle);
},
uIcon() {
// 如果有设置icon名称就使用，否则根据type主题，推定一个默认的图标
return this.icon ? this.icon : this.type2icon(this.type);
},
uIconType() {
// 如果有设置图标的样式，优先使用，没有的话，则用type的样式
return Object.keys(this.iconStyle).length ? '' : this.type;
}
},
methods: {
deepMerge(target, source) {
if (source) {
for (var s in source) {
if (source.hasOwnProperty(s)) {
var value = source[s];
if (typeof value === 'object' && typeof target[s] === 'object') {
target[s] = this._extends({}, target[s], {}, value);
} else {
target[s] = value;
}
}
}
}
return target;
},
type2icon(type = 'success', fill = false) {
// 如果非预置值,默认为success
if (['primary', 'info', 'error', 'warning', 'success'].indexOf(type) == -1) type = 'success';
let iconName = '';
// 目前(2019-12-12),info和primary使用同一个图标
switch (type) {
case 'primary':
iconName = 'info-circle';
break;
case 'info':
iconName = 'info-circle';
break;
case 'error':
iconName = 'close-circle';
break;
case 'warning':
iconName = 'error-circle';
break;
case 'success':
iconName = 'checkmark-circle';
break;
default:
iconName = 'checkmark-circle';
}
// 是否是实体类型,加上-fill,在icon组件库中,实体的类名是后面加-fill的
if (fill) iconName += '-fill';
return iconName;
},
_extends() {
_extends = Object.assign || function(target) {
for (var i = 1; i < arguments.length; i++) {
var source = arguments[i];
for (var key in source) {
if (Object.prototype.hasOwnProperty.call(source, key)) {
target[key] = source[key];
}
}
}
return target;
};
return _extends.apply(this, arguments);
},
// 点击内容
click() {
this.$emit('click');
},
// 点击关闭按钮
close() {
this.$emit('close');
}
}
}
</script>
<style lang="scss" scoped>
@import './theme.scss';
.u-alert-tips {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
align-items: center;
padding: 16rpx 30rpx;
border-radius: 8rpx;
position: relative;
transition: all 0.3s linear;
border: 1px solid #fff;
&--bg--primary-light {
background-color: $u-type-primary-light;
}
&--bg--info-light {
background-color: $u-type-info-light;
}
&--bg--success-light {
background-color: $u-type-success-light;
}
&--bg--warning-light {
background-color: $u-type-warning-light;
}
&--bg--error-light {
background-color: $u-type-error-light;
}
&--color--primary {
color: $u-type-primary !important;
}
&--color--info {
color: $u-type-info !important;
}
&--color--success {
color: $u-type-success !important;
}
&--color--warning {
color: $u-type-warning !important;
}
&--color--error {
color: $u-type-error !important;
}
&--border--primary-disabled {
border-color: $u-type-primary-disabled;
}
&--border--success-disabled {
border-color: $u-type-success-disabled;
}
&--border--error-disabled {
border-color: $u-type-error-disabled;
}
&--border--warning-disabled {
border-color: $u-type-warning-disabled;
}
&--border--info-disabled {
border-color: $u-type-info-disabled;
}
}
.u-close-alert-tips {
opacity: 0;
visibility: hidden;
}
.u-icon {
margin-right: 16rpx;
}
.u-alert-title {
font-size: 28rpx;
color: $u-main-color;
}
.u-alert-desc {
font-size: 24rpx;
text-align: left;
color: $u-content-color;
margin-top: 8rpx;
}
.u-close-icon {
position: absolute;
top: 20rpx;
right: 20rpx;
}
.u-close-hover {
color: red;
}
.u-close-text {
font-size: 24rpx;
color: $u-tips-color;
position: absolute;
top: 20rpx;
right: 20rpx;
line-height: 1;
}
</style>

910
components/u-icon/iconfont.css Normal file
View File

File diff suppressed because one or more lines are too long

38
components/u-icon/theme.scss Normal file
View File

@@ -0,0 +1,38 @@
// 此文件为uView的主题变量，这些变量目前只能通过uni.scss引入才有效，另外由于
// uni.scss中引入的样式会同时混入到全局样式文件和单独每一个页面的样式中，造成微信程序包太大，
// 故uni.scss只建议放scss变量名相关样式，其他的样式可以通过main.js或者App.vue引入
$u-main-color: #303133;
$u-content-color: #606266;
$u-tips-color: #909399;
$u-light-color: #c0c4cc;
$u-border-color: #e4e7ed;
$u-bg-color: #f3f4f6;
$u-type-primary: #2979ff;
$u-type-primary-light: #ecf5ff;
$u-type-primary-disabled: #a0cfff;
$u-type-primary-dark: #2b85e4;
$u-type-warning: #ff9900;
$u-type-warning-disabled: #fcbd71;
$u-type-warning-dark: #f29100;
$u-type-warning-light: #fdf6ec;
$u-type-success: #19be6b;
$u-type-success-disabled: #71d5a1;
$u-type-success-dark: #18b566;
$u-type-success-light: #dbf1e1;
$u-type-error: #fa3534;
$u-type-error-disabled: #fab6b6;
$u-type-error-dark: #dd6161;
$u-type-error-light: #fef0f0;
$u-type-info: #909399;
$u-type-info-disabled: #c8c9cc;
$u-type-info-dark: #82848a;
$u-type-info-light: #f4f4f5;
$u-form-item-height: 70rpx;
$u-form-item-border-color: #dcdfe6;

351
components/u-icon/u-icon.vue Normal file
View File

@@ -0,0 +1,351 @@
<template>
<view :style="[customStyle]" class="u-icon" @tap="click" :class="['u-icon--' + labelPos]">
<image class="u-icon__img" v-if="isImg" :src="name" :mode="imgMode" :style="[imgStyle]"></image>
<text v-else class="u-icon__icon" :class="customClass" :style="[iconStyle]" :hover-class="hoverClass"
@touchstart="touchstart">
<text v-if="showDecimalIcon" :style="[decimalIconStyle]" :class="decimalIconClass" :hover-class="hoverClass"
class="u-icon__decimal">
</text>
</text>
<!-- 这里进行空字符串判断，如果仅仅是v-if="label"，可能会出现传递0的时候，结果也无法显示 -->
<text v-if="label !== ''" class="u-icon__label" :style="{
color: labelColor,
fontSize: $u.addUnit(labelSize),
marginLeft: labelPos == 'right' ? $u.addUnit(marginLeft) : 0,
marginTop: labelPos == 'bottom' ? $u.addUnit(marginTop) : 0,
marginRight: labelPos == 'left' ? $u.addUnit(marginRight) : 0,
marginBottom: labelPos == 'top' ? $u.addUnit(marginBottom) : 0,
}">{{ label }}
</text>
</view>
</template>
<script>
/**
* icon 图标
* @description 基于字体的图标集，包含了大多数常见场景的图标。
* @tutorial https://www.uviewui.com/components/icon.html
* @property {String} name 图标名称，见示例图标集
* @property {String} color 图标颜色（默认inherit）
* @property {String | Number} size 图标字体大小，单位rpx（默认32）
* @property {String | Number} label-size label字体大小，单位rpx（默认28）
* @property {String} label 图标右侧的label文字（默认28）
* @property {String} label-pos label文字相对于图标的位置，只能right或bottom（默认right）
* @property {String} label-color label字体颜色（默认#606266）
* @property {Object} custom-style icon的样式，对象形式
* @property {String} custom-prefix 自定义字体图标库时，需要写上此值
* @property {String | Number} margin-left label在右侧时与图标的距离，单位rpx（默认6）
* @property {String | Number} margin-top label在下方时与图标的距离，单位rpx（默认6）
* @property {String | Number} margin-bottom label在上方时与图标的距离，单位rpx（默认6）
* @property {String | Number} margin-right label在左侧时与图标的距离，单位rpx（默认6）
* @property {String} label-pos label相对于图标的位置，只能right或bottom（默认right）
* @property {String} index 一个用于区分多个图标的值，点击图标时通过click事件传出
* @property {String} hover-class 图标按下去的样式类，用法同uni的view组件的hover-class参数，详情见官网
* @property {String} width 显示图片小图标时的宽度
* @property {String} height 显示图片小图标时的高度
* @property {String} top 图标在垂直方向上的定位
* @property {String} top 图标在垂直方向上的定位
* @property {String} top 图标在垂直方向上的定位
* @property {Boolean} show-decimal-icon 是否为DecimalIcon
* @property {String} inactive-color 背景颜色，可接受主题色，仅Decimal时有效
* @property {String | Number} percent 显示的百分比，仅Decimal时有效
* @event {Function} click 点击图标时触发
* @example <u-icon name="photo" color="#2979ff" size="28"></u-icon>
*/
var config_type=[
'primary',
'success',
'info',
'error',
'warning'
]
export default {
name: 'u-icon',
props: {
// 图标类名
name: {
type: String,
default: ''
},
// 图标颜色，可接受主题色
color: {
type: String,
default: ''
},
// 字体大小，单位rpx
size: {
type: [Number, String],
default: 'inherit'
},
// 是否显示粗体
bold: {
type: Boolean,
default: false
},
// 点击图标的时候传递事件出去的index（用于区分点击了哪一个）
index: {
type: [Number, String],
default: ''
},
// 触摸图标时的类名
hoverClass: {
type: String,
default: ''
},
// 自定义扩展前缀，方便用户扩展自己的图标库
customPrefix: {
type: String,
default: 'uicon'
},
// 图标右边或者下面的文字
label: {
type: [String, Number],
default: ''
},
// label的位置，只能右边或者下边
labelPos: {
type: String,
default: 'right'
},
// label的大小
labelSize: {
type: [String, Number],
default: '28'
},
// label的颜色
labelColor: {
type: String,
default: '#606266'
},
// label与图标的距离(横向排列)
marginLeft: {
type: [String, Number],
default: '6'
},
// label与图标的距离(竖向排列)
marginTop: {
type: [String, Number],
default: '6'
},
// label与图标的距离(竖向排列)
marginRight: {
type: [String, Number],
default: '6'
},
// label与图标的距离(竖向排列)
marginBottom: {
type: [String, Number],
default: '6'
},
// 图片的mode
imgMode: {
type: String,
default: 'widthFix'
},
// 自定义样式
customStyle: {
type: Object,
default() {
return {}
}
},
// 用于显示图片小图标时，图片的宽度
width: {
type: [String, Number],
default: ''
},
// 用于显示图片小图标时，图片的高度
height: {
type: [String, Number],
default: ''
},
// 用于解决某些情况下，让图标垂直居中的用途
top: {
type: [String, Number],
default: 0
},
// 是否为DecimalIcon
showDecimalIcon: {
type: Boolean,
default: false
},
// 背景颜色，可接受主题色，仅Decimal时有效
inactiveColor: {
type: String,
default: '#ececec'
},
// 显示的百分比，仅Decimal时有效
percent: {
type: [Number, String],
default: '50'
}
},
computed: {
customClass() {
let classes = []
classes.push(this.customPrefix + '-' + this.name)
// uView的自定义图标类名为u-iconfont
if (this.customPrefix == 'uicon') {
classes.push('u-iconfont')
} else {
classes.push(this.customPrefix)
}
// 主题色，通过类配置
if (this.showDecimalIcon && this.inactiveColor && config_type.includes(this.inactiveColor)) {
classes.push('u-icon__icon--' + this.inactiveColor)
} else if (this.color && config_type.includes(this.color)) classes.push('u-icon__icon--' + this.color)
// 阿里，头条，百度小程序通过数组绑定类名时，无法直接使用[a, b, c]的形式，否则无法识别
// 故需将其拆成一个字符串的形式，通过空格隔开各个类名
//#ifdef MP-ALIPAY || MP-TOUTIAO || MP-BAIDU
classes = classes.join(' ')
//#endif
return classes
},
iconStyle() {
let style = {}
style = {
fontSize: this.size == 'inherit' ? 'inherit' : this.addUnit(this.size),
fontWeight: this.bold ? 'bold' : 'normal',
// 某些特殊情况需要设置一个到顶部的距离，才能更好的垂直居中
top: this.addUnit(this.top)
}
// 非主题色值时，才当作颜色值
if (this.showDecimalIcon && this.inactiveColor && !config_type.includes(this.inactiveColor)) {
style.color = this.inactiveColor
} else if (this.color && !config_type.includes(this.color)) style.color = this.color
return style
},
// 判断传入的name属性，是否图片路径，只要带有"/"均认为是图片形式
isImg() {
return this.name.indexOf('/') !== -1
},
imgStyle() {
let style = {}
// 如果设置width和height属性，则优先使用，否则使用size属性
style.width = this.width ? this.addUnit(this.width) : this.addUnit(this.size)
style.height = this.height ? this.addUnit(this.height) : this.addUnit(this.size)
return style
},
decimalIconStyle() {
let style = {}
style = {
fontSize: this.size == 'inherit' ? 'inherit' : this.addUnit(this.size),
fontWeight: this.bold ? 'bold' : 'normal',
// 某些特殊情况需要设置一个到顶部的距离，才能更好的垂直居中
top: this.addUnit(this.top),
width: this.percent + '%'
}
// 非主题色值时，才当作颜色值
if (this.color && !config_type.includes(this.color)) style.color = this.color
return style
},
decimalIconClass() {
let classes = []
classes.push(this.customPrefix + '-' + this.name)
// uView的自定义图标类名为u-iconfont
if (this.customPrefix == 'uicon') {
classes.push('u-iconfont')
} else {
classes.push(this.customPrefix)
}
// 主题色，通过类配置
if (this.color && config_type.includes(this.color)) classes.push('u-icon__icon--' + this.color)
else classes.push('u-icon__icon--primary')
// 阿里，头条，百度小程序通过数组绑定类名时，无法直接使用[a, b, c]的形式，否则无法识别
// 故需将其拆成一个字符串的形式，通过空格隔开各个类名
//#ifdef MP-ALIPAY || MP-TOUTIAO || MP-BAIDU
classes = classes.join(' ')
//#endif
return classes
}
},
methods: {
addUnit(value = 'auto', unit = 'rpx'){
value = String(value);
// 用uView内置验证规则中的number判断是否为数值
return (/^(?:-?\d+|-?\d{1,3}(?:,\d{3})+)?(?:\.\d+)?$/.test(value)) ? `${value}${unit}` : value;
},
click() {
this.$emit('click', this.index)
},
touchstart() {
this.$emit('touchstart', this.index)
}
}
}
</script>
<style scoped lang="scss">
@import './theme.scss';
@import './iconfont.css';
.u-icon {
display: inline-flex;
align-items: center;
&--left {
flex-direction: row-reverse;
align-items: center;
}
&--right {
flex-direction: row;
align-items: center;
}
&--top {
flex-direction: column-reverse;
justify-content: center;
}
&--bottom {
flex-direction: column;
justify-content: center;
}
&__icon {
position: relative;
&--primary {
color: $u-type-primary;
}
&--success {
color: $u-type-success;
}
&--error {
color: $u-type-error;
}
&--warning {
color: $u-type-warning;
}
&--info {
color: $u-type-info;
}
}
&__decimal {
position: absolute;
top: 0;
left: 0;
display: inline-block;
overflow: hidden;
}
&__img {
height: auto;
will-change: transform;
}
&__label {
line-height: 1;
}
}
</style>

88
components/u-time-line-item/u-time-line-item.vue Normal file
View File

@@ -0,0 +1,88 @@
<template>
<view class="u-time-axis-item">
<slot name="content" />
<view class="u-time-axis-node">
<slot name="node">
<view class="u-dot" :style="[nodeStyle]">
</view>
</slot>
</view>
</view>
</template>
<script>
/**
* timeLineItem 时间轴Item
* @description 时间轴组件一般用于物流信息展示，各种跟时间相关的记录等场景。(搭配u-time-line使用)
* @tutorial https://www.uviewui.com/components/timeLine.html
* @property {String} bg-color 左边节点的背景颜色，一般通过slot内容自定义背景颜色即可（默认#ffffff）
* @property {String Number} node-top 节点左边图标绝对定位的top值，单位rpx
* @example <u-time-line-item node-top="2">...</u-time-line-item>
*/
export default {
name: "u-time-line-item",
props: {
// 节点的背景颜色
bgColor: {
type: String,
default: "#ffffff"
},
// 节点左边图标绝对定位的top值
nodeTop: {
type: [String, Number],
default: ""
}
},
data() {
return {
}
},
computed: {
nodeStyle() {
let style = {
backgroundColor: this.bgColor,
};
if (this.nodeTop != "") style.top = this.nodeTop + 'rpx';
return style;
},
}
}
</script>
<style lang="scss">
.u-time-axis-item {
/* #ifndef APP-NVUE */
display: flex;
// flex-direction: $direction;
/* #endif */
flex-direction: column;
width: 100%;
position: relative;
margin-bottom: 32rpx;
}
.u-time-axis-node {
position: absolute;
top: 12rpx;
left: -40rpx;
transform-origin: 0;
transform: translateX(-50%);
/* #ifndef APP-NVUE */
display: flex;
// flex-direction: $direction;
/* #endif */
align-items: center;
justify-content: center;
z-index: 1;
font-size: 24rpx;
}
.u-dot {
height: 16rpx;
width: 16rpx;
border-radius: 100rpx;
background: #ddd;
}
</style>

36
components/u-time-line/u-time-line.vue Normal file
View File

@@ -0,0 +1,36 @@
<template>
<view class="u-time-axis">
<slot />
</view>
</template>
<script>
export default {
name: "u-time-line",
data() {
return {
}
}
}
</script>
<style lang="scss">
.u-time-axis {
padding-left: 40rpx;
position: relative;
}
.u-time-axis::before {
content: " ";
position: absolute;
left: 0;
top: 12rpx;
width: 1px;
bottom: 0;
border-left: 1px solid #ddd;
transform-origin: 0 0;
transform: scaleX(0.5);
}
</style>