hhyykk/ipms-sjy
1
1
Fork 0
mirror of https://gitee.com/hhyykk/ipms-sjy.git synced 2025-10-31 18:28:43 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

使用 uview 重构实际登陆

Browse Source
This commit is contained in:
YunaiV
2021-11-27 23:45:09 +08:00
parent 002aea34ae
commit 0d8f10cf1f
370 changed files with 37199 additions and 160 deletions
Download Patch File Download Diff File Expand all files Collapse all files

214
yudao-vue-ui/uni_modules/uview-ui/components/u-icon/icons.js Normal file
View File

@@ -0,0 +1,214 @@
export default {
'uicon-level': '\ue693',
'uicon-column-line': '\ue68e',
'uicon-checkbox-mark': '\ue807',
'uicon-folder': '\ue7f5',
'uicon-movie': '\ue7f6',
'uicon-star-fill': '\ue669',
'uicon-star': '\ue65f',
'uicon-phone-fill': '\ue64f',
'uicon-phone': '\ue622',
'uicon-apple-fill': '\ue881',
'uicon-chrome-circle-fill': '\ue885',
'uicon-backspace': '\ue67b',
'uicon-attach': '\ue632',
'uicon-cut': '\ue948',
'uicon-empty-car': '\ue602',
'uicon-empty-coupon': '\ue682',
'uicon-empty-address': '\ue646',
'uicon-empty-favor': '\ue67c',
'uicon-empty-permission': '\ue686',
'uicon-empty-news': '\ue687',
'uicon-empty-search': '\ue664',
'uicon-github-circle-fill': '\ue887',
'uicon-rmb': '\ue608',
'uicon-person-delete-fill': '\ue66a',
'uicon-reload': '\ue788',
'uicon-order': '\ue68f',
'uicon-server-man': '\ue6bc',
'uicon-search': '\ue62a',
'uicon-fingerprint': '\ue955',
'uicon-more-dot-fill': '\ue630',
'uicon-scan': '\ue662',
'uicon-share-square': '\ue60b',
'uicon-map': '\ue61d',
'uicon-map-fill': '\ue64e',
'uicon-tags': '\ue629',
'uicon-tags-fill': '\ue651',
'uicon-bookmark-fill': '\ue63b',
'uicon-bookmark': '\ue60a',
'uicon-eye': '\ue613',
'uicon-eye-fill': '\ue641',
'uicon-mic': '\ue64a',
'uicon-mic-off': '\ue649',
'uicon-calendar': '\ue66e',
'uicon-calendar-fill': '\ue634',
'uicon-trash': '\ue623',
'uicon-trash-fill': '\ue658',
'uicon-play-left': '\ue66d',
'uicon-play-right': '\ue610',
'uicon-minus': '\ue618',
'uicon-plus': '\ue62d',
'uicon-info': '\ue653',
'uicon-info-circle': '\ue7d2',
'uicon-info-circle-fill': '\ue64b',
'uicon-question': '\ue715',
'uicon-error': '\ue6d3',
'uicon-close': '\ue685',
'uicon-checkmark': '\ue6a8',
'uicon-android-circle-fill': '\ue67e',
'uicon-android-fill': '\ue67d',
'uicon-ie': '\ue87b',
'uicon-IE-circle-fill': '\ue889',
'uicon-google': '\ue87a',
'uicon-google-circle-fill': '\ue88a',
'uicon-setting-fill': '\ue872',
'uicon-setting': '\ue61f',
'uicon-minus-square-fill': '\ue855',
'uicon-plus-square-fill': '\ue856',
'uicon-heart': '\ue7df',
'uicon-heart-fill': '\ue851',
'uicon-camera': '\ue7d7',
'uicon-camera-fill': '\ue870',
'uicon-more-circle': '\ue63e',
'uicon-more-circle-fill': '\ue645',
'uicon-chat': '\ue620',
'uicon-chat-fill': '\ue61e',
'uicon-bag-fill': '\ue617',
'uicon-bag': '\ue619',
'uicon-error-circle-fill': '\ue62c',
'uicon-error-circle': '\ue624',
'uicon-close-circle': '\ue63f',
'uicon-close-circle-fill': '\ue637',
'uicon-checkmark-circle': '\ue63d',
'uicon-checkmark-circle-fill': '\ue635',
'uicon-question-circle-fill': '\ue666',
'uicon-question-circle': '\ue625',
'uicon-share': '\ue631',
'uicon-share-fill': '\ue65e',
'uicon-shopping-cart': '\ue621',
'uicon-shopping-cart-fill': '\ue65d',
'uicon-bell': '\ue609',
'uicon-bell-fill': '\ue640',
'uicon-list': '\ue650',
'uicon-list-dot': '\ue616',
'uicon-zhihu': '\ue6ba',
'uicon-zhihu-circle-fill': '\ue709',
'uicon-zhifubao': '\ue6b9',
'uicon-zhifubao-circle-fill': '\ue6b8',
'uicon-weixin-circle-fill': '\ue6b1',
'uicon-weixin-fill': '\ue6b2',
'uicon-twitter-circle-fill': '\ue6ab',
'uicon-twitter': '\ue6aa',
'uicon-taobao-circle-fill': '\ue6a7',
'uicon-taobao': '\ue6a6',
'uicon-weibo-circle-fill': '\ue6a5',
'uicon-weibo': '\ue6a4',
'uicon-qq-fill': '\ue6a1',
'uicon-qq-circle-fill': '\ue6a0',
'uicon-moments-circel-fill': '\ue69a',
'uicon-moments': '\ue69b',
'uicon-qzone': '\ue695',
'uicon-qzone-circle-fill': '\ue696',
'uicon-baidu-circle-fill': '\ue680',
'uicon-baidu': '\ue681',
'uicon-facebook-circle-fill': '\ue68a',
'uicon-facebook': '\ue689',
'uicon-car': '\ue60c',
'uicon-car-fill': '\ue636',
'uicon-warning-fill': '\ue64d',
'uicon-warning': '\ue694',
'uicon-clock-fill': '\ue638',
'uicon-clock': '\ue60f',
'uicon-edit-pen': '\ue612',
'uicon-edit-pen-fill': '\ue66b',
'uicon-email': '\ue611',
'uicon-email-fill': '\ue642',
'uicon-minus-circle': '\ue61b',
'uicon-minus-circle-fill': '\ue652',
'uicon-plus-circle': '\ue62e',
'uicon-plus-circle-fill': '\ue661',
'uicon-file-text': '\ue663',
'uicon-file-text-fill': '\ue665',
'uicon-pushpin': '\ue7e3',
'uicon-pushpin-fill': '\ue86e',
'uicon-grid': '\ue673',
'uicon-grid-fill': '\ue678',
'uicon-play-circle': '\ue647',
'uicon-play-circle-fill': '\ue655',
'uicon-pause-circle-fill': '\ue654',
'uicon-pause': '\ue8fa',
'uicon-pause-circle': '\ue643',
'uicon-eye-off': '\ue648',
'uicon-eye-off-outline': '\ue62b',
'uicon-gift-fill': '\ue65c',
'uicon-gift': '\ue65b',
'uicon-rmb-circle-fill': '\ue657',
'uicon-rmb-circle': '\ue677',
'uicon-kefu-ermai': '\ue656',
'uicon-server-fill': '\ue751',
'uicon-coupon-fill': '\ue8c4',
'uicon-coupon': '\ue8ae',
'uicon-integral': '\ue704',
'uicon-integral-fill': '\ue703',
'uicon-home-fill': '\ue964',
'uicon-home': '\ue965',
'uicon-hourglass-half-fill': '\ue966',
'uicon-hourglass': '\ue967',
'uicon-account': '\ue628',
'uicon-plus-people-fill': '\ue626',
'uicon-minus-people-fill': '\ue615',
'uicon-account-fill': '\ue614',
'uicon-thumb-down-fill': '\ue726',
'uicon-thumb-down': '\ue727',
'uicon-thumb-up': '\ue733',
'uicon-thumb-up-fill': '\ue72f',
'uicon-lock-fill': '\ue979',
'uicon-lock-open': '\ue973',
'uicon-lock-opened-fill': '\ue974',
'uicon-lock': '\ue97a',
'uicon-red-packet-fill': '\ue690',
'uicon-photo-fill': '\ue98b',
'uicon-photo': '\ue98d',
'uicon-volume-off-fill': '\ue659',
'uicon-volume-off': '\ue644',
'uicon-volume-fill': '\ue670',
'uicon-volume': '\ue633',
'uicon-red-packet': '\ue691',
'uicon-download': '\ue63c',
'uicon-arrow-up-fill': '\ue6b0',
'uicon-arrow-down-fill': '\ue600',
'uicon-play-left-fill': '\ue675',
'uicon-play-right-fill': '\ue676',
'uicon-rewind-left-fill': '\ue679',
'uicon-rewind-right-fill': '\ue67a',
'uicon-arrow-downward': '\ue604',
'uicon-arrow-leftward': '\ue601',
'uicon-arrow-rightward': '\ue603',
'uicon-arrow-upward': '\ue607',
'uicon-arrow-down': '\ue60d',
'uicon-arrow-right': '\ue605',
'uicon-arrow-left': '\ue60e',
'uicon-arrow-up': '\ue606',
'uicon-skip-back-left': '\ue674',
'uicon-skip-forward-right': '\ue672',
'uicon-rewind-right': '\ue66f',
'uicon-rewind-left': '\ue671',
'uicon-arrow-right-double': '\ue68d',
'uicon-arrow-left-double': '\ue68c',
'uicon-wifi-off': '\ue668',
'uicon-wifi': '\ue667',
'uicon-empty-data': '\ue62f',
'uicon-empty-history': '\ue684',
'uicon-empty-list': '\ue68b',
'uicon-empty-page': '\ue627',
'uicon-empty-order': '\ue639',
'uicon-man': '\ue697',
'uicon-woman': '\ue69c',
'uicon-man-add': '\ue61c',
'uicon-man-add-fill': '\ue64c',
'uicon-man-delete': '\ue61a',
'uicon-man-delete-fill': '\ue66a',
'uicon-zh': '\ue70a',
'uicon-en': '\ue692'
}

89
yudao-vue-ui/uni_modules/uview-ui/components/u-icon/props.js Normal file
View File

@@ -0,0 +1,89 @@
export default {
props: {
// 图标类名
name: {
type: String,
default: uni.$u.props.icon.name
},
// 图标颜色，可接受主题色
color: {
type: String,
default: uni.$u.props.icon.color
},
// 字体大小，单位px
size: {
type: [String, Number],
default: uni.$u.props.icon.size
},
// 是否显示粗体
bold: {
type: Boolean,
default: uni.$u.props.icon.bold
},
// 点击图标的时候传递事件出去的index（用于区分点击了哪一个）
index: {
type: [String, Number],
default: uni.$u.props.icon.index
},
// 触摸图标时的类名
hoverClass: {
type: String,
default: uni.$u.props.icon.hoverClass
},
// 自定义扩展前缀，方便用户扩展自己的图标库
customPrefix: {
type: String,
default: uni.$u.props.icon.customPrefix
},
// 图标右边或者下面的文字
label: {
type: [String, Number],
default: uni.$u.props.icon.label
},
// label的位置，只能右边或者下边
labelPos: {
type: String,
default: uni.$u.props.icon.labelPos
},
// label的大小
labelSize: {
type: [String, Number],
default: uni.$u.props.icon.labelSize
},
// label的颜色
labelColor: {
type: String,
default: uni.$u.props.icon.labelColor
},
// label与图标的距离
space: {
type: [String, Number],
default: uni.$u.props.icon.space
},
// 图片的mode
imgMode: {
type: String,
default: uni.$u.props.icon.imgMode
},
// 用于显示图片小图标时，图片的宽度
width: {
type: [String, Number],
default: uni.$u.props.icon.width
},
// 用于显示图片小图标时，图片的高度
height: {
type: [String, Number],
default: uni.$u.props.icon.height
},
// 用于解决某些情况下，让图标垂直居中的用途
top: {
type: [String, Number],
default: uni.$u.props.icon.top
},
// 是否阻止事件传播
stop: {
type: Boolean,
default: uni.$u.props.icon.stop
}
}
}

234
yudao-vue-ui/uni_modules/uview-ui/components/u-icon/u-icon.vue Normal file
View File

@@ -0,0 +1,234 @@
<template>
<view
class="u-icon"
@tap="clickHandler"
:class="['u-icon--' + labelPos]"
>
<image
class="u-icon__img"
v-if="isImg"
:src="name"
:mode="imgMode"
:style="[imgStyle, $u.addStyle(customStyle)]"
></image>
<text
v-else
class="u-icon__icon"
:class="uClasses"
:style="[iconStyle, $u.addStyle(customStyle)]"
:hover-class="hoverClass"
>{{icon}}</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(space) : 0,
marginTop: labelPos == 'bottom' ? $u.addUnit(space) : 0,
marginRight: labelPos == 'left' ? $u.addUnit(space) : 0,
marginBottom: labelPos == 'top' ? $u.addUnit(space) : 0,
}"
>{{ label }}</text>
</view>
</template>
<script>
// #ifdef APP-NVUE
// nvue通过weex的dom模块引入字体，相关文档地址如下：
// https://weex.apache.org/zh/docs/modules/dom.html#addrule
const fontUrl = 'https://at.alicdn.com/t/font_2225171_8kdcwk4po24.ttf'
const domModule = weex.requireModule('dom')
domModule.addRule('fontFace', {
'fontFamily': "uicon-iconfont",
'src': `url('${fontUrl}')`
})
// #endif
// 引入图标名称，已经对应的unicode
import icons from './icons'
import props from './props.js';;
/**
* icon 图标
* @description 基于字体的图标集，包含了大多数常见场景的图标。
* @tutorial https://www.uviewui.com/components/icon.html
* @property {String} name 图标名称，见示例图标集
* @property {String} color 图标颜色,可接受主题色 （默认 color['u-content-color'] ）
* @property {String | Number} size 图标字体大小，单位px （默认 '16px' ）
* @property {Boolean} bold 是否显示粗体 （默认 false ）
* @property {String | Number} index 点击图标的时候传递事件出去的index（用于区分点击了哪一个）
* @property {String} hoverClass 图标按下去的样式类，用法同uni的view组件的hoverClass参数，详情见官网
* @property {String} customPrefix 自定义扩展前缀，方便用户扩展自己的图标库 （默认 'uicon' ）
* @property {String | Number} label 图标右侧的label文字
* @property {String} labelPos label相对于图标的位置，只能right或bottom （默认 'right' ）
* @property {String | Number} labelSize label字体大小，单位px （默认 '15px' ）
* @property {String} labelColor 图标右侧的label文字颜色 （ 默认 color['u-content-color'] ）
* @property {String | Number} space label与图标的距离，单位px （默认 '3px' ）
* @property {String} imgMode 图片的mode
* @property {String | Number} width 显示图片小图标时的宽度
* @property {String | Number} height 显示图片小图标时的高度
* @property {String | Number} top 图标在垂直方向上的定位 用于解决某些情况下，让图标垂直居中的用途 （默认 0 ）
* @property {Boolean} stop 是否阻止事件传播 （默认 false ）
* @property {Object} customStyle icon的样式，对象形式
* @event {Function} click 点击图标时触发
* @event {Function} touchstart 事件触摸时触发
* @example <u-icon name="photo" color="#2979ff" size="28"></u-icon>
*/
export default {
name: 'u-icon',
data() {
return {
}
},
mixins: [uni.$u.mpMixin, uni.$u.mixin,props],
computed: {
uClasses() {
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 && this.$u.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.$u.addUnit(this.size),
lineHeight: this.$u.addUnit(this.size),
fontWeight: this.bold ? 'bold' : 'normal',
// 某些特殊情况需要设置一个到顶部的距离，才能更好的垂直居中
top: this.$u.addUnit(this.top)
}
// 非主题色值时，才当作颜色值
if (this.color && !this.$u.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.$u.addUnit(this.width) : this.$u.addUnit(this.size)
style.height = this.height ? this.$u.addUnit(this.height) : this.$u.addUnit(this.size)
return style
},
// 通过图标名，查找对应的图标
icon() {
// 如果内置的图标中找不到对应的图标，就直接返回name值，因为用户可能传入的是unicode代码
return icons['uicon-' + this.name] || this.name
}
},
methods: {
clickHandler(e) {
this.$emit('click', this.index)
// 是否阻止事件冒泡
this.stop && this.$u.preventEvent(e)
}
}
}
</script>
<style lang="scss" scoped>
@import "../../libs/css/components.scss";
// 变量定义
$u-icon-primary: $u-primary !default;
$u-icon-success: $u-success !default;
$u-icon-info: $u-info !default;
$u-icon-warning: $u-warning !default;
$u-icon-error: $u-error !default;
$u-icon-label-line-height:1 !default;
/* #ifndef APP-NVUE */
// 非nvue下加载字体
@font-face {
font-family: 'uicon-iconfont';
src: url('https://at.alicdn.com/t/font_2225171_8kdcwk4po24.ttf') format('truetype');
}
/* #endif */
.u-icon {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
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 {
font-family: uicon-iconfont;
position: relative;
@include flex;
align-items: center;
&--primary {
color: $u-icon-primary;
}
&--success {
color: $u-icon-success;
}
&--error {
color: $u-icon-error;
}
&--warning {
color: $u-icon-warning;
}
&--info {
color: $u-icon-info;
}
}
&__img {
/* #ifndef APP-NVUE */
height: auto;
will-change: transform;
/* #endif */
}
&__label {
/* #ifndef APP-NVUE */
line-height: $u-icon-label-line-height;
/* #endif */
}
}
</style>