dk-cell.js 5.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279
  1. /*******************************************************************************
  2. * Copyright(c) 2022 dongke All rights reserved. / Confidential
  3. * 类的信息:
  4. * 1.程序名称:
  5. * 2.功能描述:dkCell组件
  6. * 编辑履历:
  7. * 作者 日期 版本 修改内容
  8. * 周兴 2021-7-9 1.00 新建
  9. *******************************************************************************/
  10. const common = require('../../../utils/common.js')
  11. Component({
  12. /**
  13. * 组件的属性列表
  14. */
  15. properties: {
  16. /**
  17. * 提示信息
  18. */
  19. placeholder:{
  20. type:String,
  21. },
  22. placeholderColor:{
  23. type:String,
  24. value:'#95A8CB'
  25. },
  26. car:{
  27. type:String,
  28. value:'¥'
  29. },
  30. /**
  31. * 尾部字符串
  32. */
  33. tail:{
  34. type:String,
  35. value:''
  36. },
  37. percent:{
  38. type:String,
  39. value:'%'
  40. },
  41. percentSignFlag:{
  42. type:Boolean,
  43. value:false
  44. },
  45. /**
  46. * 标题宽度(传入)
  47. */
  48. titleWid:{
  49. type:String,
  50. },
  51. /**
  52. * 标题
  53. */
  54. title:{
  55. type:String,
  56. value:'',
  57. // observer: function (newVal) {
  58. // if(newVal){
  59. // // 计算标题宽度
  60. // let titleWidth = newVal.length * this.data.fontSize;
  61. // this.setData({
  62. // titleWidth:titleWidth
  63. // })
  64. // }
  65. // }
  66. },
  67. /**
  68. * 内容
  69. */
  70. content:{
  71. type:String,
  72. value:'',
  73. observer: function (newVal) {
  74. // if(newVal){
  75. //设置显示的值
  76. this.handleDisplayValue(this.data.amount,newVal);
  77. // }
  78. }
  79. },
  80. /**
  81. * 内容的颜色
  82. */
  83. contentColor:{
  84. type:String,
  85. value:'#d9001b'
  86. },
  87. /**
  88. * 尾部内容的颜色
  89. */
  90. tailColor:{
  91. type:String,
  92. value:''
  93. },
  94. /**
  95. * 尾部的中删除线
  96. */
  97. tailLine:{
  98. type:Boolean,
  99. value:false
  100. },
  101. /**
  102. * 内容的中删除线
  103. */
  104. contentLine:{
  105. type:Boolean,
  106. value:false
  107. },
  108. /**
  109. * 标题的颜色
  110. */
  111. titleColor:{
  112. type:String,
  113. value:''
  114. },
  115. /**
  116. * 标识的大小
  117. */
  118. signSize:{
  119. type:String,
  120. value:''
  121. },
  122. /**
  123. * 字体大小
  124. */
  125. fontSize:{
  126. type:Number,
  127. value:14,
  128. },
  129. /**
  130. * 高度
  131. */
  132. height:{
  133. type:String,
  134. value:'78rpx',
  135. },
  136. /**
  137. * 左侧距离
  138. */
  139. left:{
  140. type:String,
  141. value:'30rpx',
  142. },
  143. /**
  144. * 是否居中
  145. */
  146. center:{
  147. type:String,
  148. value:'left',
  149. },
  150. /**
  151. * 内容字体大小
  152. */
  153. contentFontSize:{
  154. type:Number,
  155. value:0,
  156. },
  157. /**
  158. * 标题字体粗细
  159. */
  160. fontWeight:{
  161. type:String,
  162. value:'nomal'
  163. },
  164. /**
  165. * 尾部的字体大小
  166. */
  167. tailFontWeight:{
  168. type:String,
  169. value:''
  170. },
  171. /**
  172. * 内容字体粗细
  173. */
  174. contentFontWeight:{
  175. type:String,
  176. value:''
  177. },
  178. /**
  179. * 内容是否居右(默认居左)
  180. */
  181. contentRight:{
  182. type:Boolean,
  183. value:false,
  184. },
  185. /**
  186. * 间距
  187. */
  188. spaceWidth:{
  189. type:String,
  190. value:'36rpx'
  191. },
  192. /**
  193. * 内容是否是金额
  194. */
  195. amount:{
  196. type:Boolean,
  197. value:true,
  198. observer: function (newVal) {
  199. //设置显示的值
  200. this.handleDisplayValue(newVal,this.data.content);
  201. }
  202. },
  203. /**
  204. * 错误提示信息
  205. */
  206. errorMessage:{
  207. type:String,
  208. },
  209. /**
  210. * 小数是否单独显示(字号小一些)
  211. */
  212. decimalFlag:{
  213. type:Boolean,
  214. value:true
  215. }
  216. },
  217. /**
  218. * 组件的初始数据
  219. */
  220. data: {
  221. displayValue:'',
  222. titleWidth:'',
  223. // 小数部分
  224. decimalValue:'',
  225. // fontSize:14
  226. },
  227. /**
  228. * 组件的方法列表
  229. */
  230. methods: {
  231. /**
  232. * 处理数据显示
  233. */
  234. handleDisplayValue(amount,content){
  235. let displayValue = ''
  236. let decimalValue = ''
  237. if(content){
  238. // 非数字直接显示
  239. if(!amount){
  240. displayValue = content;
  241. }else{
  242. if(content.indexOf(',') < 0){
  243. // 先保留2位小数
  244. content = Number(Number(content).toFixed(2));
  245. displayValue = common.toThousandCents(content)
  246. }else{
  247. displayValue = content;
  248. }
  249. }
  250. // 如果小数单独显示,需要切出来
  251. if(this.data.decimalFlag){
  252. let values = displayValue.split('.');
  253. displayValue = values[0];
  254. if(values.length > 1){
  255. decimalValue = '.' + values[1]
  256. }
  257. }
  258. }else{
  259. displayValue = '';
  260. }
  261. this.setData({
  262. displayValue:displayValue,
  263. decimalValue:decimalValue
  264. })
  265. }
  266. },
  267. /**
  268. * 组件生命周期
  269. */
  270. lifetimes: {
  271. attached: function () {
  272. },
  273. detached: function () {
  274. // 在组件实例被从页面节点树移除时执行
  275. },
  276. },
  277. })