sms.vue 18 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746
  1. <template>
  2. <view class="container mine clearfix">
  3. <!-- <cu-custom :navbar-data='nvabarData' @navigateBack="hanldNavigateBack"></cu-custom> -->
  4. <view
  5. class="tui-header-box first"
  6. :style="{ height: isCmcustomClass == 'fiexd' ? CustomBar + 10 + 'px' : CustomBar + 30 + 'px' }"
  7. :class="isCmcustomClass"
  8. >
  9. <view class="header-top" :style="{ paddingTop: top + 'px', lineHeight: CustomBar + 30 + 'px' }"></view>
  10. <view class="header-sit">
  11. <text class="iconfont icon-fanhui" @click.stop="checkedSms" v-if="receiptType == 2"></text>
  12. <text class="header-sit-text">{{ receiptType == 1 ? '款项识别' : '无短信收款' }}</text>
  13. </view>
  14. </view>
  15. <view
  16. class="tui-header-box"
  17. :style="{
  18. height: CustomBar + 30 + 'px',
  19. backgroundImage: 'url(https://static.caimei365.com/app/crm/image/statistic_bg1.png)'
  20. }"
  21. >
  22. </view>
  23. <view class="distinguish-section" :style="{ top: CustomBar + 'px', left: 0 + 'px' }">
  24. <view class="distinguish-section-conten">
  25. <view class="section-top">
  26. <view class="title" v-if="receiptType == 1">收款短信</view>
  27. <view class="button" @click="toNoSms('/pages/collection/list')">
  28. <text class="iconfont icon-wodedingdan"></text> 收款列表
  29. </view>
  30. </view>
  31. <view class="section-textarea" v-if="receiptType == 1">
  32. <textarea
  33. class="textarea"
  34. placeholder="收款短信内容..."
  35. :disabled="modal"
  36. v-model="params.smsContent"
  37. @blur="onBlurSmsContent"
  38. />
  39. </view>
  40. <template v-if="isConfirm">
  41. <view class="section-rows">
  42. <view class="rows-label">款项类型:</view>
  43. <view class="rows-mains">
  44. <picker
  45. @change="bindPickerChange(1, $event)"
  46. :value="index"
  47. :range="paymentActions"
  48. range-key="name"
  49. >
  50. <input
  51. class="input"
  52. type="text"
  53. disabled="true"
  54. v-model="paymentTypeText"
  55. value=""
  56. placeholder="请选择款项类型"
  57. />
  58. </picker>
  59. </view>
  60. <text class="iconfont icon-xiayibu"></text>
  61. </view>
  62. <view class="section-rows">
  63. <view class="rows-label">收款时间:</view>
  64. <view class="rows-mains">
  65. <input
  66. class="input"
  67. type="text"
  68. v-model="params.receiptDate"
  69. disabled="true"
  70. placeholder="请选择收款时间"
  71. @click="showTuiDateTime"
  72. />
  73. </view>
  74. <text class="iconfont icon-xiayibu"></text>
  75. </view>
  76. <view class="section-rows" :class="isReceiptType ? 'disabled' : ''">
  77. <view class="rows-label">收款类型:</view>
  78. <view class="rows-mains">
  79. <picker
  80. @change="bindPickerChange(2, $event)"
  81. :value="index"
  82. :range="receiptTypeActions"
  83. :disabled="isReceiptType"
  84. range-key="name"
  85. >
  86. <input
  87. class="input"
  88. type="text"
  89. disabled="true"
  90. v-model="banksTypeText"
  91. placeholder="请选择收款类型"
  92. />
  93. </picker>
  94. </view>
  95. <text class="iconfont icon-xiayibu"></text>
  96. </view>
  97. <view class="section-rows">
  98. <view class="rows-label">收款金额:</view>
  99. <view class="rows-mains">
  100. <input
  101. class="input"
  102. v-model="params.receiptAmount"
  103. @blur="changeNumber($event)"
  104. type="text"
  105. placeholder="请输入收款金额"
  106. />
  107. </view>
  108. </view>
  109. <view class="section-rows" :class="isCheckedCharge ? '' : 'disabled'">
  110. <view class="rows-label" @click="checkedCharge">
  111. <text class="iconfont" :class="isCheckedCharge ? 'icon-yixuanze' : 'icon-weixuanze'"></text>
  112. 手续费:
  113. </view>
  114. <view class="rows-mains">
  115. <input
  116. class="input"
  117. v-model="params.handlingFee"
  118. @blur="handlingFeeNumber($event)"
  119. :disabled="!isCheckedCharge"
  120. type="text"
  121. placeholder="请输入手续费"
  122. />
  123. </view>
  124. </view>
  125. <template v-if="receiptType == 2">
  126. <view class="section-text">收款短信(备注,必填)</view>
  127. <view class="section-textarea">
  128. <textarea
  129. class="textarea"
  130. :disabled="modal"
  131. placeholder="请输入收款备注..."
  132. v-model="params.smsContent"
  133. />
  134. </view>
  135. </template>
  136. </template>
  137. </view>
  138. <view class="distinguish-button">
  139. <tui-button
  140. type="primary"
  141. :disabledGray="true"
  142. :disabled="disabled"
  143. :height="'80rpx'"
  144. :shadow="true"
  145. shape="circle"
  146. @click="confirmDistinguish"
  147. >收款</tui-button
  148. >
  149. </view>
  150. <view class="distinguish-button-text" @click="checkedNoSms" v-if="receiptType == 1">无短信收款</view>
  151. </view>
  152. <!-- 时间组件 -->
  153. <tui-datetime
  154. ref="dateTime"
  155. :type="7"
  156. :startYear="startYear"
  157. :endYear="endYear"
  158. cancelColor="#555555"
  159. color="#4688fa"
  160. @confirm="bindStartDateChange"
  161. ></tui-datetime>
  162. <!-- 弹窗提示 -->
  163. <tui-modal
  164. :show="modal"
  165. @click="handleClick"
  166. @cancel="hideMobel"
  167. :title="contentModalTitle"
  168. :content="contentModalText"
  169. :button="modalButton"
  170. color="#333"
  171. :size="32"
  172. shape="circle"
  173. :maskClosable="false"
  174. >
  175. </tui-modal>
  176. </view>
  177. </template>
  178. <script>
  179. import { mapState, mapMutations } from 'vuex'
  180. const defaultParams = {
  181. smsContent: '', // 收款短信
  182. payType: null,
  183. receiptType: 1, // 收款款项类型:1订单款,2非订单款,3返佣款 4订单款或者非订单款(因财务阶段无法区分订单非订单), 5供应商退款
  184. receiptAmount: '', //收款金额
  185. handlingFee: '', //手续费
  186. receiptDate: null // 收款时间
  187. }
  188. export default {
  189. data() {
  190. return {
  191. nvabarData: {
  192. //顶部自定义导航
  193. showCapsule: 1, // 是否显示左上角图标 1表示显示 0表示不显示,
  194. showSearch: 0,
  195. title: '', // 导航栏 中间的标题
  196. haveBack: false,
  197. home: false,
  198. textLeft: this.$store.state.isIphone,
  199. bgColor: '#D33020',
  200. textColor: '#ffffff'
  201. },
  202. receiptType: 1, //收款方式 1 短信收款 2 无短信收款
  203. infoData: {},
  204. isCmcustomClass: 'left',
  205. CustomBar: this.CustomBar, // 顶部导航栏高度
  206. height: 64, //header高度
  207. top: 0, //标题图标距离顶部距离
  208. scrollH: 0, //滚动总高度
  209. opcity: 1,
  210. isConfirm: false,
  211. type: 7,
  212. setDateTime: '',
  213. startYear: 1980,
  214. endYear: 2030,
  215. modalButton: [
  216. {
  217. text: '取消',
  218. type: 'gray',
  219. plain: true //是否空心
  220. },
  221. {
  222. text: '确认',
  223. customStyle: {
  224. color: '#fff',
  225. bgColor: '#4688fa'
  226. },
  227. plain: false
  228. }
  229. ],
  230. paymentActions: [
  231. { name: '普通款项', value: 1 },
  232. { name: '返佣款项', value: 3 },
  233. { name: '供应商退款', value: 5 }
  234. ],
  235. receiptTypeActions: [],
  236. paymentTypeText: '普通款项', // 款项类型显示文案
  237. banksTypeText: '', // 款项类型显示文案
  238. params: {
  239. smsContent:'', // 收款短信
  240. payType: null, //付款类型
  241. receiptType: 1, // 收款款项类型:1订单款,2非订单款,3返佣款 4订单款或者非订单款(因财务阶段无法区分订单非订单), 5供应商退款
  242. receiptAmount: '', //收款金额
  243. handlingFee: '', //手续费
  244. receiptDate: null // 收款时间
  245. },
  246. handleCharge: 0,
  247. handleReceiptAmount: 0,
  248. isCheckedCharge: false,
  249. isReceiptType: false,
  250. contentModalTitle: '',
  251. contentModalText: '', //操作文字提示语句
  252. modal: false
  253. }
  254. },
  255. onLoad() {
  256. let obj = {}
  257. // #ifdef MP-WEIXIN
  258. obj = wx.getMenuButtonBoundingClientRect()
  259. // #endif
  260. // #ifdef MP-BAIDU
  261. obj = swan.getMenuButtonBoundingClientRect()
  262. // #endif
  263. // #ifdef MP-ALIPAY
  264. my.hideAddToDesktopMenu()
  265. // #endif
  266. uni.getSystemInfo({
  267. success: res => {
  268. this.width = obj.left || res.windowWidth
  269. this.height = obj.top ? obj.top + obj.height + 8 : res.statusBarHeight + 44
  270. this.top = obj.top ? obj.top + (obj.height - 32) / 2 : res.statusBarHeight + 6
  271. this.scrollH = res.windowWidth * 0.6
  272. }
  273. })
  274. this.getOrderReceiptType()
  275. },
  276. filters: {
  277. NumFormat(value) {
  278. //处理金额
  279. if (value) {
  280. return Number(value).toFixed(2)
  281. } else {
  282. return '0.00'
  283. }
  284. }
  285. },
  286. computed: {
  287. ...mapState(['hasLogin']),
  288. disabled: function() {
  289. let bool = true
  290. if (this.receiptType == 1) {
  291. if (this.params.smsContent || this.params.receiptAmount) {
  292. bool = false
  293. }
  294. } else {
  295. if (this.params.receiptAmount) {
  296. bool = false
  297. }
  298. }
  299. return bool
  300. }
  301. },
  302. methods: {
  303. getOrderReceiptType() {
  304. // 获取收款类型列表
  305. this.OrderService.orderReceiptType()
  306. .then(response => {
  307. this.receiptTypeActions = response.data.map(item => ({
  308. ...item,
  309. name: item.type,
  310. value: item.id
  311. }))
  312. })
  313. .catch(err => {
  314. this.$util.msg(err.msg, 2000)
  315. })
  316. },
  317. orderReceiptReadSms() {
  318. // 识别收款短信
  319. this.OrderService.orderReceiptReadSms({smsContent:this.params.smsContent})
  320. .then(response => {
  321. const data = response.data
  322. this.params.payType = data.payType
  323. this.params.orderFlag = data.orderFlag
  324. this.params.receiptAmount = this.handleReceiptAmount = data.receiptAmount
  325. this.params.receiptDate = data.receiptDate
  326. this.handleCharge = this.params.handlingFee = data.handlingFee
  327. this.receiptTypeActions.forEach(el => {
  328. if (this.params.payType === el.value) {
  329. this.banksTypeText = el.name
  330. }
  331. })
  332. if (this.params.handlingFee > 0) {
  333. this.isCheckedCharge = true
  334. }
  335. // 处理收款类型禁止点击
  336. this.isReceiptType = true
  337. console.log('isReceiptType', this.isReceiptType)
  338. this.initInput()
  339. })
  340. .catch(err => {
  341. this.$util.msg(err.msg, 2000)
  342. })
  343. },
  344. confirmDistinguish() {
  345. if (this.params.receiptAmount == '') {
  346. this.$util.msg('请输入收款金额', 2000)
  347. return
  348. }
  349. if (this.isCheckedCharge) {
  350. if (this.params.handlingFee == '') {
  351. this.$util.msg('请输入手续费', 2000)
  352. return
  353. }
  354. }
  355. if (this.receiptType == 2) {
  356. if (this.params.smsContent == '') {
  357. this.$util.msg('请填写收款备注', 2000)
  358. return
  359. }
  360. }
  361. if (this.params.receiptType == 1) {
  362. // 普通订单款
  363. this.contentModalTitle = '确定收款吗?'
  364. this.contentModalText = '确认前请仔细检查各项数据是否正确,确认收款后将不能进行修改。' //操作文字提示语句
  365. } else if (this.params.receiptType == 3) {
  366. // 返佣款
  367. this.contentModalTitle = ''
  368. this.contentModalText = '确定返佣收款吗?' //操作文字提示语句
  369. } else if (this.params.receiptType == 5) {
  370. // 供应商退款
  371. this.contentModalTitle = ''
  372. this.contentModalText = '确定供应商退款吗?' //操作文字提示语句
  373. }
  374. this.modal = true
  375. },
  376. getOrderReceiptSave() {
  377. // 收款保存
  378. this.OrderService.orderReceiptSave(this.params)
  379. .then(response => {
  380. this.$util.msg('收款成功', 1500, true, 'success')
  381. setTimeout(() => {
  382. this.$api.navigateTo(`/pages/collection/detail?id=${response.data.id}&receiptType=${response.data.receiptType}`)
  383. }, 1500)
  384. })
  385. .catch(err => {
  386. this.$util.msg(err.msg, 2000)
  387. })
  388. },
  389. bindPickerChange(type, e) {
  390. // 选择选项
  391. switch (type) {
  392. case 1:
  393. this.paymentTypeText = this.paymentActions[e.target.value].name
  394. this.params.receiptType = this.paymentActions[e.target.value].value
  395. break
  396. case 2:
  397. this.banksTypeText = this.receiptTypeActions[e.target.value].name
  398. this.params.payType = this.receiptTypeActions[e.target.value].value
  399. break
  400. }
  401. },
  402. checkedNoSms() {
  403. // 切换无短信收款
  404. this.receiptType = 2
  405. this.isConfirm = true
  406. this.isReceiptType = false
  407. this.isCheckedCharge = false
  408. this.params = Object.assign(this.params, defaultParams)
  409. this.params.receiptDate = this.$api.getNowFormatDate()
  410. this.params.payType = this.receiptTypeActions[0].value
  411. this.banksTypeText = this.receiptTypeActions[0].name
  412. },
  413. checkedSms() {
  414. // 切换款项识别
  415. this.receiptType = 1
  416. this.isConfirm = false
  417. },
  418. onBlurSmsContent(e) {
  419. this.params.smsContent = e.detail.value
  420. if (this.params.smsContent) {
  421. this.orderReceiptReadSms()
  422. }
  423. },
  424. showTuiDateTime() {
  425. this.$refs.dateTime.show()
  426. },
  427. bindStartDateChange(event) {
  428. //开始时间
  429. this.params.receiptDate = event.result
  430. },
  431. checkedCharge() {
  432. // 勾选手续费
  433. this.isCheckedCharge = !this.isCheckedCharge
  434. if (this.receiptType == 1) {
  435. // 短信收款处理勾选手续费
  436. if (!this.isCheckedCharge) {
  437. //未勾选手续费
  438. this.params.handlingFee = 0
  439. this.params.receiptAmount =(this.handleReceiptAmount*100 - this.handleCharge*100)/100
  440. } else {
  441. //已勾选手续费
  442. this.params.handlingFee = this.handleCharge
  443. this.params.receiptAmount =(this.params.receiptAmount*100 + this.params.handlingFee*100)/100
  444. }
  445. } else {
  446. // 无短信收款处理勾选手续费计算
  447. if (!this.isCheckedCharge) {
  448. //未勾选手续费
  449. console.log('未勾选手续费')
  450. this.params.receiptAmount =(this.params.receiptAmount*100 - this.params.handlingFee*100)/100
  451. this.params.handlingFee = ''
  452. } else {
  453. //已勾选手续费
  454. console.log('已勾选手续费')
  455. this.params.receiptAmount =(this.params.receiptAmount*100 + this.params.handlingFee*100)/100
  456. }
  457. }
  458. },
  459. handleClick(e) {
  460. // 确认收款
  461. if (e.index == 1) {
  462. this.getOrderReceiptSave()
  463. }
  464. this.modal = false
  465. },
  466. hideMobel() {
  467. // 取消收款
  468. this.modal = false
  469. },
  470. changeNumber(e) {
  471. // 校验输入为数字
  472. this.params.receiptAmount = this.handleReceiptAmount = this.checkedNumberVal(e.detail.value)
  473. console.log('receiptAmount', this.params.receiptAmount)
  474. },
  475. handlingFeeNumber(e) {
  476. // 校验输入为数字
  477. this.params.handlingFee = Number(this.checkedNumberVal(e.detail.value))
  478. if (this.isCheckedCharge) {
  479. this.params.receiptAmount = (Number(this.params.receiptAmount)*100 + this.params.handlingFee*100)/100
  480. }
  481. },
  482. checkedNumberVal(val) {
  483. // 校验是否输入的是数字
  484. if (!this.$api.isNumber(val)) {
  485. return ''
  486. } else {
  487. return val
  488. }
  489. },
  490. initInput() {
  491. if (this.params.smsContent != '') {
  492. this.isConfirm = true
  493. } else {
  494. this.isConfirm = false
  495. }
  496. },
  497. toNoSms(url) {
  498. this.$api.navigateTo(url)
  499. }
  500. },
  501. onPageScroll(e) {
  502. //实时获取到滚动的值
  503. // if (e.scrollTop > 30) {
  504. // this.isCmcustomClass = 'fiexd'
  505. // } else {
  506. // this.isCmcustomClass = 'left'
  507. // }
  508. },
  509. onShow() {
  510. }
  511. }
  512. </script>
  513. <style lang="scss">
  514. @import '@/uni.scss';
  515. page {
  516. background: #fff;
  517. }
  518. .tui-header-box {
  519. width: 100%;
  520. background: #ffffff;
  521. z-index: 999;
  522. background-image: url(https://static.caimei365.com/app/crm/image/statistic_bg2.png);
  523. background-size: cover;
  524. &.fiexd {
  525. position: fixed;
  526. top: 0;
  527. left: 0;
  528. }
  529. }
  530. .header-top {
  531. width: 100%;
  532. font-size: 16px;
  533. font-weight: 500;
  534. height: 32px;
  535. display: flex;
  536. align-items: center;
  537. justify-content: center;
  538. position: relative;
  539. padding: 0 40rpx;
  540. }
  541. .header-sit {
  542. width: 100%;
  543. box-sizing: border-box;
  544. height: 80rpx;
  545. line-height: 80rpx;
  546. box-sizing: border-box;
  547. color: #ffffff;
  548. padding: 0 24rpx;
  549. .header-sit-text {
  550. text-align: left;
  551. font-size: $font-size-40;
  552. font-weight: 600;
  553. font-family: '正楷';
  554. }
  555. .icon-fanhui {
  556. display: block;
  557. width: 56rpx;
  558. height: 80rpx;
  559. float: left;
  560. text-align: center;
  561. line-height: 80rpx;
  562. font-size: 42rpx;
  563. }
  564. }
  565. .mine {
  566. width: 100%;
  567. height: 100%;
  568. position: relative;
  569. }
  570. .distinguish-section {
  571. width: 100%;
  572. position: absolute;
  573. padding: 20rpx 20rpx;
  574. box-sizing: border-box;
  575. }
  576. .distinguish-section-conten {
  577. width: 100%;
  578. height: auto;
  579. position: relative;
  580. background-color: #ffffff;
  581. border-radius: 20rpx;
  582. padding: 20rpx;
  583. box-shadow: 0 10rpx 14rpx 0 rgba(86, 119, 252, 0.2);
  584. .section-top {
  585. width: 100%;
  586. height: 86rpx;
  587. box-sizing: border-box;
  588. padding-bottom: 20rpx;
  589. .title {
  590. float: left;
  591. line-height: 66rpx;
  592. font-size: $font-size-28;
  593. color: #333333;
  594. .iconfont {
  595. color: #666666;
  596. font-size: $font-size-44;
  597. }
  598. }
  599. .button {
  600. float: right;
  601. box-sizing: border-box;
  602. padding: 0 24rpx;
  603. height: 100%;
  604. line-height: 66rpx;
  605. background: $btn-confirm;
  606. border-radius: 8rpx;
  607. text-align: center;
  608. color: #ffffff;
  609. }
  610. }
  611. .section-rows {
  612. width: 100%;
  613. height: 80rpx;
  614. box-sizing: border-box;
  615. padding: 0 20rpx;
  616. border-radius: 8rpx;
  617. background: #f8f8f8;
  618. margin-top: 20rpx;
  619. line-height: 80rpx;
  620. display: flex;
  621. position: relative;
  622. &.disabled {
  623. background: #e1e1e1;
  624. }
  625. .rows-label {
  626. flex: 3;
  627. .iconfont {
  628. margin-right: 8rpx;
  629. &.icon-yixuanze {
  630. color: $color-system;
  631. }
  632. }
  633. }
  634. .rows-mains {
  635. flex: 7;
  636. .input {
  637. width: 100%;
  638. height: 80rpx;
  639. box-sizing: border-box;
  640. padding-right: 40rpx;
  641. text-align: left;
  642. font-size: $font-size-28;
  643. color: #333333;
  644. }
  645. }
  646. .icon-xiayibu {
  647. display: block;
  648. width: 40rpx;
  649. height: 80rpx;
  650. position: absolute;
  651. right: 0;
  652. text-align: center;
  653. font-size: $font-size-32;
  654. }
  655. }
  656. .section-text {
  657. width: 100%;
  658. height: 66rpx;
  659. line-height: 66rpx;
  660. font-size: $font-size-24;
  661. color: #333333;
  662. }
  663. .section-textarea {
  664. width: 100%;
  665. height: 220rpx;
  666. box-sizing: border-box;
  667. padding: 20rpx;
  668. background: #f7f7f7;
  669. border-radius: 8rpx;
  670. .textarea {
  671. width: 100%;
  672. height: 100%;
  673. }
  674. }
  675. }
  676. .distinguish-button {
  677. width: 100%;
  678. height: 80rpx;
  679. margin-top: 100rpx;
  680. box-sizing: border-box;
  681. padding: 0 50rpx;
  682. .button {
  683. width: 100%;
  684. height: 80rpx;
  685. background: $btn-confirm;
  686. border-radius: 40rpx;
  687. text-align: center;
  688. color: #ffffff;
  689. line-height: 80rpx;
  690. font-size: $font-size-28;
  691. box-shadow: 0 10rpx 14rpx 0 rgba(86, 119, 252, 0.2);
  692. &.disabled {
  693. background: #f7f7f7;
  694. color: #e1e1e1;
  695. }
  696. }
  697. }
  698. .distinguish-button-text {
  699. width: 100%;
  700. height: 80rpx;
  701. line-height: 80rpx;
  702. text-align: center;
  703. color: $btn-confirm;
  704. font-size: $font-size-28;
  705. }
  706. .uni-badge--small {
  707. -webkit-transform: scale(0.8);
  708. -ms-transform: scale(0.8);
  709. transform: scale(0.8);
  710. -webkit-transform-origin: center center;
  711. -ms-transform-origin: center center;
  712. transform-origin: center center;
  713. }
  714. .uni-badge {
  715. font-family: 'Helvetica Neue', Helvetica, sans-serif;
  716. -webkit-box-sizing: border-box;
  717. box-sizing: border-box;
  718. font-size: 12px;
  719. line-height: 1;
  720. display: inline-block;
  721. padding: 3px 6px;
  722. color: #333;
  723. border-radius: 100px;
  724. background-color: #f1f1f1;
  725. }
  726. .uni-badge-error {
  727. color: #fff;
  728. background-color: #dd524d;
  729. }
  730. </style>