江西小程序管理端
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

316 lines
7.6 KiB

1 year ago
  1. <template>
  2. <view class="u-steps-item" ref="u-steps-item" :class="[`u-steps-item--${parentData.direction}`]">
  3. <view class="u-steps-item__line" v-if="index + 1 < childLength"
  4. :class="[`u-steps-item__line--${parentData.direction}`]" :style="[lineStyle]"></view>
  5. <view class="u-steps-item__wrapper"
  6. :class="[`u-steps-item__wrapper--${parentData.direction}`, parentData.dot && `u-steps-item__wrapper--${parentData.direction}--dot`]">
  7. <slot name="icon">
  8. <view class="u-steps-item__wrapper__dot" v-if="parentData.dot" :style="{
  9. backgroundColor: statusColor
  10. }">
  11. </view>
  12. <view class="u-steps-item__wrapper__icon" v-else-if="parentData.activeIcon || parentData.inactiveIcon">
  13. <u-icon :name="index <= parentData.current ? parentData.activeIcon : parentData.inactiveIcon"
  14. :size="iconSize"
  15. :color="index <= parentData.current ? parentData.activeColor : parentData.inactiveColor">
  16. </u-icon>
  17. </view>
  18. <view v-else :style="{
  19. backgroundColor: statusClass === 'process' ? parentData.activeColor : 'transparent',
  20. borderColor: statusColor
  21. }" class="u-steps-item__wrapper__circle">
  22. <text v-if="statusClass === 'process' || statusClass === 'wait'"
  23. class="u-steps-item__wrapper__circle__text" :style="{
  24. color: index == parentData.current ? '#ffffff' : parentData.inactiveColor
  25. }">{{ index + 1}}</text>
  26. <u-icon v-else :color="statusClass === 'error' ? 'error' : parentData.activeColor" size="12"
  27. :name="statusClass === 'error' ? 'close' : 'checkmark'"></u-icon>
  28. </view>
  29. </slot>
  30. </view>
  31. <view class="u-steps-item__content" :class="[`u-steps-item__content--${parentData.direction}`]"
  32. :style="[contentStyle]">
  33. <u--text :text="title" :type="parentData.current == index ? 'main' : 'content'" lineHeight="20px"
  34. :size="parentData.current == index ? 14 : 13"></u--text>
  35. <slot name="desc">
  36. <u--text :text="desc" type="tips" size="12"></u--text>
  37. </slot>
  38. </view>
  39. <!-- <view
  40. class="u-steps-item__line"
  41. v-if="showLine && parentData.direction === 'column'"
  42. :class="[`u-steps-item__line--${parentData.direction}`]"
  43. :style="[lineStyle]"
  44. ></view> -->
  45. </view>
  46. </template>
  47. <script>
  48. import props from './props.js';
  49. // #ifdef APP-NVUE
  50. const dom = uni.requireNativePlugin('dom')
  51. // #endif
  52. /**
  53. * StepsItem 步骤条的子组件
  54. * @description 本组件需要和u-steps配合使用
  55. * @tutorial https://uviewui.com/components/steps.html
  56. * @property {String} title 标题文字
  57. * @property {String} current 描述文本
  58. * @property {String | Number} iconSize 图标大小 (默认 17 )
  59. * @property {Boolean} error 当前步骤是否处于失败状态 (默认 false )
  60. * @example <u-steps current="0"><u-steps-item title="已出库" desc="10:35" ></u-steps-item></u-steps>
  61. */
  62. export default {
  63. name: 'u-steps-item',
  64. mixins: [uni.$u.mpMixin, uni.$u.mixin, props],
  65. data() {
  66. return {
  67. index: 0,
  68. childLength: 0,
  69. showLine: false,
  70. size: {
  71. height: 0,
  72. width: 0
  73. },
  74. parentData: {
  75. direction: 'row',
  76. current: 0,
  77. activeColor: '',
  78. inactiveColor: '',
  79. activeIcon: '',
  80. inactiveIcon: '',
  81. dot: false
  82. }
  83. }
  84. },
  85. watch: {
  86. 'parentData'(newValue, oldValue) {
  87. }
  88. },
  89. created() {
  90. this.init()
  91. },
  92. computed: {
  93. lineStyle() {
  94. const style = {}
  95. if (this.parentData.direction === 'row') {
  96. style.width = this.size.width + 'px'
  97. style.left = this.size.width / 2 + 'px'
  98. } else {
  99. style.height = this.size.height + 'px'
  100. // style.top = this.size.height / 2 + 'px'
  101. }
  102. style.backgroundColor = this.parent.children?.[this.index + 1]?.error ? uni.$u.color.error : this.index <
  103. this
  104. .parentData
  105. .current ? this.parentData.activeColor : this.parentData.inactiveColor
  106. return style
  107. },
  108. statusClass() {
  109. const {
  110. index,
  111. error
  112. } = this
  113. const {
  114. current
  115. } = this.parentData
  116. if (current == index) {
  117. return error === true ? 'error' : 'process'
  118. } else if (error) {
  119. return 'error'
  120. } else if (current > index) {
  121. return 'finish'
  122. } else {
  123. return 'wait'
  124. }
  125. },
  126. statusColor() {
  127. let color = ''
  128. switch (this.statusClass) {
  129. case 'finish':
  130. color = this.parentData.activeColor
  131. break
  132. case 'error':
  133. color = uni.$u.color.error
  134. break
  135. case 'process':
  136. color = this.parentData.dot ? this.parentData.activeColor : 'transparent'
  137. break
  138. default:
  139. color = this.parentData.inactiveColor
  140. break
  141. }
  142. return color
  143. },
  144. contentStyle() {
  145. const style = {}
  146. if (this.parentData.direction === 'column') {
  147. style.marginLeft = this.parentData.dot ? '2px' : '6px'
  148. style.marginTop = this.parentData.dot ? '0px' : '6px'
  149. } else {
  150. style.marginTop = this.parentData.dot ? '2px' : '6px'
  151. style.marginLeft = this.parentData.dot ? '2px' : '6px'
  152. }
  153. return style
  154. }
  155. },
  156. mounted() {
  157. this.parent && this.parent.updateFromChild()
  158. uni.$u.sleep().then(() => {
  159. this.getStepsItemRect()
  160. })
  161. },
  162. methods: {
  163. init() {
  164. // 初始化数据
  165. this.updateParentData()
  166. if (!this.parent) {
  167. return uni.$u.error('u-steps-item必须要搭配u-steps组件使用')
  168. }
  169. this.index = this.parent.children.indexOf(this)
  170. this.childLength = this.parent.children.length
  171. },
  172. updateParentData() {
  173. // 此方法在mixin中
  174. this.getParentData('u-steps')
  175. },
  176. // 父组件数据发生变化
  177. updateFromParent() {
  178. this.init()
  179. },
  180. // 获取组件的尺寸,用于设置横线的位置
  181. getStepsItemRect() {
  182. // #ifndef APP-NVUE
  183. this.$uGetRect('.u-steps-item').then(size => {
  184. this.size = size
  185. })
  186. // #endif
  187. // #ifdef APP-NVUE
  188. dom.getComponentRect(this.$refs['u-steps-item'], res => {
  189. const {
  190. size
  191. } = res
  192. this.size = size
  193. })
  194. // #endif
  195. }
  196. }
  197. }
  198. </script>
  199. <style lang="scss" scoped>
  200. @import "../../libs/css/components.scss";
  201. .u-steps-item {
  202. flex: 1;
  203. @include flex;
  204. &--row {
  205. flex-direction: column;
  206. align-items: center;
  207. position: relative;
  208. }
  209. &--column {
  210. position: relative;
  211. flex-direction: row;
  212. justify-content: flex-start;
  213. padding-bottom: 5px;
  214. }
  215. &__wrapper {
  216. @include flex;
  217. justify-content: center;
  218. align-items: center;
  219. position: relative;
  220. background-color: #fff;
  221. &--column {
  222. width: 20px;
  223. height: 32px;
  224. &--dot {
  225. height: 20px;
  226. width: 20px;
  227. }
  228. }
  229. &--row {
  230. width: 32px;
  231. height: 20px;
  232. &--dot {
  233. width: 20px;
  234. height: 20px;
  235. }
  236. }
  237. &__circle {
  238. width: 20px;
  239. height: 20px;
  240. /* #ifndef APP-NVUE */
  241. box-sizing: border-box;
  242. flex-shrink: 0;
  243. /* #endif */
  244. border-radius: 100px;
  245. border-width: 1px;
  246. border-color: $u-tips-color;
  247. border-style: solid;
  248. @include flex(row);
  249. align-items: center;
  250. justify-content: center;
  251. transition: background-color 0.3s;
  252. &__text {
  253. color: $u-tips-color;
  254. font-size: 11px;
  255. @include flex(row);
  256. align-items: center;
  257. justify-content: center;
  258. text-align: center;
  259. line-height: 11px;
  260. }
  261. }
  262. &__dot {
  263. width: 10px;
  264. height: 10px;
  265. border-radius: 100px;
  266. background-color: $u-content-color;
  267. }
  268. }
  269. &__content {
  270. @include flex;
  271. flex: 1;
  272. &--row {
  273. flex-direction: column;
  274. align-items: center;
  275. }
  276. &--column {
  277. flex-direction: column;
  278. margin-left: 6px;
  279. }
  280. }
  281. &__line {
  282. position: absolute;
  283. background: $u-tips-color;
  284. &--row {
  285. top: 10px;
  286. height: 1px;
  287. }
  288. &--column {
  289. width: 1px;
  290. left: 10px;
  291. }
  292. }
  293. }
  294. </style>