addRemarks.vue 2.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127
  1. <template>
  2. <view class="container">
  3. <view class="content">
  4. <textarea v-model="remarks" maxlength="50" @input='setLength' placeholder="如您有特殊需求,请备注告知" />
  5. <view class="contentSize">
  6. 限制字数{{num}}/50
  7. </view>
  8. </view>
  9. <view class="sub-btn" :style="{'background-color':setColor}" @click="onSubmit">完成</view>
  10. </view>
  11. </template>
  12. <script>
  13. /*
  14. * param str 要截取的字符串
  15. * param L 要截取的字节长度,注意是字节不是字符,一个汉字两个字节
  16. * return 截取后的字符串
  17. */
  18. function cutStr(str,L){
  19. var result = '',
  20. strlen = str.length, // 字符串长度
  21. chrlen = str.replace(/[^\x00-\xff]/g,'**').length; // 字节长度
  22. if(chrlen<=L){return str;}
  23. for(var i=0,j=0;i<strlen;i++){
  24. var chr = str.charAt(i);
  25. if(/[\x00-\xff]/.test(chr)){
  26. j++; // ascii码为0-255,一个字符就是一个字节的长度
  27. }else{
  28. j+=2; // ascii码为0-255以外,一个字符就是两个字节的长度
  29. }
  30. if(j<=L){ // 当加上当前字符以后,如果总字节长度小于等于L,则将当前字符真实的+在result后
  31. result += chr;
  32. }else{ // 反之则说明result已经是不拆分字符的情况下最接近L的值了,直接返回
  33. return result;
  34. }
  35. }
  36. }
  37. export default {
  38. data() {
  39. return {
  40. remarks: "",
  41. setColor: "",
  42. num: 0,
  43. }
  44. },
  45. onLoad(options) {
  46. uni.setNavigationBarColor({
  47. frontColor: '#ffffff',
  48. backgroundColor: this.$store.state.color,
  49. })
  50. this.remarks = options.remarks;
  51. this.num = options.remarks.length;
  52. this.setColor = this.$store.state.color;
  53. },
  54. methods: {
  55. setLength(e) {
  56. this.num = this.remarks.length;
  57. if (this.num >= 50) {
  58. this.num =50;
  59. uni.showToast({
  60. icon: 'none',
  61. title: '最多只能輸入50個字'
  62. });
  63. }
  64. },
  65. onSubmit() {
  66. let remarks =cutStr(this.remarks,100)
  67. console.log(remarks,"remarks")
  68. let pageList = getCurrentPages()
  69. if (pageList.length > 1) {
  70. let prePage = pageList[pageList.length - 2]
  71. console.log(prePage)
  72. prePage.$vm.remarks = remarks
  73. uni.navigateBack()
  74. }
  75. }
  76. },
  77. }
  78. </script>
  79. <style lang="scss">
  80. page {
  81. background: #eee;
  82. }
  83. .container {
  84. padding: 30rpx;
  85. }
  86. .content {
  87. width: 100%;
  88. height: 376rpx;
  89. background-color: #fff;
  90. border-radius: 20rpx;
  91. padding: 20rpx;
  92. box-sizing: border-box;
  93. font-size: 30rpx;
  94. }
  95. .content textarea {
  96. width: 100%;
  97. height: 300rpx;
  98. }
  99. .contentSize {
  100. font-size: 28rpx;
  101. color: #999;
  102. text-align: right;
  103. }
  104. .sub-btn {
  105. height: 100rpx;
  106. background-color: $theme-color;
  107. text-align: center;
  108. line-height: 100rpx;
  109. font-size: 36rpx;
  110. color: #fff;
  111. border-radius: 10rpx;
  112. margin-top: 40rpx;
  113. }
  114. </style>