graceNvueCheckList.vue 4.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119
  1. <template>
  2. <view class="check-list" :style="{height:height+'px'}">
  3. <scroll-view scroll-y="true" :style="{height:height+'px'}">
  4. <view v-for="(item, index) in dataIn" :key="index" class="check-list-item" :data-index="index" @tap.stop="choose">
  5. <text class="check-list-icon grace-icons" v-if="item.checked && batch" :style="{color:checkColor}">&#xe7f8;</text>
  6. <text class="check-list-icon grace-icons" v-if="!item.checked && batch" style="color:#D2D2D2;">&#xe762;</text>
  7. <view class="check-list-body" :class="[isBorder && index < dataIn.length - 1 ? 'grace-border-b':'']">
  8. <image :src="item.img" class="check-list-img" v-if="item.img" mode="widthFix" :style="{width:imgSize[0], height:imgSize[1],borderRadius:imgBordeRadius}"></image>
  9. <view class="check-list-content">
  10. <text class="check-list-content-title" :style="{fontSize:fontSize, color:itemColor}">{{item.title}}</text>
  11. <text class="check-list-content-desc" :style="{color:smallTextColor, fontSize:smallTextSize}">{{item.desc}}</text>
  12. </view>
  13. </view>
  14. </view>
  15. <view style="height:120rpx;" v-if="batch"></view>
  16. </scroll-view>
  17. <view class="check-list-footer" v-if="height > 0 && batch">
  18. <text class="grace-icons check-list-icon" v-if="sedAll" :style="{color:checkColor}" @tap.stop="selectAll">&#xe7f8;</text>
  19. <text class="grace-icons check-list-icon " v-if="!sedAll" @tap.stop="selectAll">&#xe762;</text>
  20. <text class="check-list-footer-text" @tap.stop="selectAll">全选 {{sedNumbers > 0 ? sedNumbers +'/'+ dataIn.length : ''}}</text>
  21. <view class="check-list-footer-btns"><slot></slot></view>
  22. </view>
  23. </view>
  24. </template>
  25. <script>
  26. export default{
  27. props:{
  28. height:{type:Number, default:0},
  29. lists : {type:Array, default:function(){return [];}},
  30. checkColor:{type:String, default:"#3688FF"},
  31. imgSize:{type:Array, default:function(){return ['68rpx','68rpx'];}},
  32. isBorder:{type:Boolean, default:true},
  33. fontSize:{type: String, default: "28rpx"},
  34. itemColor:{type:String, default:"#323232"},
  35. imgBordeRadius:{type: String, default: "8rpx"},
  36. smallTextColor:{type:String, default:"#999999"},
  37. smallTextSize:{type:String, default:"24rpx"},
  38. batch:{type:Boolean, default:false}
  39. },
  40. data() {
  41. return {
  42. dataIn: [],
  43. sedAll:false,
  44. sedNumbers:0
  45. }
  46. },
  47. created:function(){
  48. this.dataIn = this.lists;
  49. },
  50. watch:{
  51. lists:function(val){
  52. this.dataIn = val;
  53. },
  54. dataIn:function(val){
  55. var sedNumber = 0;
  56. for(let i = 0; i < this.dataIn.length; i++){
  57. if(this.dataIn[i].checked){
  58. sedNumber++;
  59. }
  60. }
  61. this.sedNumbers = sedNumber;
  62. if(sedNumber >= val.length){this.sedAll = true;}else{this.sedAll = false;}
  63. }
  64. },
  65. methods:{
  66. choose:function(e){
  67. var index = e.currentTarget.dataset.index;
  68. if(this.dataIn[index].checked){
  69. this.dataIn[index].checked = false;
  70. this.dataIn.splice(index, 1, this.dataIn[index]);
  71. }else{
  72. this.dataIn[index].checked = true;
  73. this.dataIn.splice(index, 1, this.dataIn[index]);
  74. }
  75. this.dataIn = this.dataIn;
  76. var sedArr = [];
  77. for(let i = 0; i < this.dataIn.length; i++){
  78. if(this.dataIn[i].checked){
  79. sedArr.push(i);
  80. }
  81. }
  82. this.$emit('change', sedArr);
  83. },
  84. selectAll : function(){
  85. if(this.sedAll){
  86. for(let i = 0; i < this.dataIn.length; i++){
  87. this.dataIn[i].checked = false;
  88. this.dataIn.splice(i, 1, this.dataIn[i]);
  89. }
  90. this.sedAll = false;
  91. this.$emit('change', []);
  92. }else{
  93. var sedArr = [];
  94. for(let i = 0; i < this.dataIn.length; i++){
  95. this.dataIn[i].checked = true;
  96. this.dataIn.splice(i, 1, this.dataIn[i]);
  97. sedArr.push(i);
  98. }
  99. this.sedAll = true;
  100. this.$emit('change', sedArr);
  101. }
  102. }
  103. }
  104. }
  105. </script>
  106. <style>
  107. .check-list{position:relative;}
  108. .check-list-item{flex-direction:row; flex-wrap:nowrap; align-items:center; font-size:0; background-color:#FFFFFF; padding:0 25rpx;}
  109. .check-list-icon{width:60rpx; line-height:50rpx; text-align:center; font-size:36rpx; color:#D2D2D2; font-weight:700; margin-right:15rpx;}
  110. .check-list-img{border-radius:10rpx; margin-right:28rpx;}
  111. .check-list-body{width:300rpx; flex:1; flex-wrap:nowrap; flex-direction:row; align-items:center;}
  112. .check-list-content{width:200rpx; flex:1; overflow:hidden; padding:22rpx 0;}
  113. .check-list-content-title{line-height:44rpx; font-size:28rpx;}
  114. .check-list-content-desc{line-height:36rpx; font-size:22rpx;}
  115. .grace-border-b{border-color:#F4F5F6;}
  116. .check-list-footer{background-color:#FFFFFF; position:absolute; left:0; bottom:0; width:750rpx; padding-top:10rpx; padding-bottom:10rpx; padding-left:25rpx; padding-right:25rpx; flex-direction:row; flex-wrap:nowrap; align-items:center;}
  117. .check-list-footer-text{font-size:28rpx; color:#323232; line-height:36rpx;}
  118. .check-list-footer-btns{width:200rpx; flex:1; margin-left:28rpx;}
  119. </style>