SelectClassify.vue 2.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107
  1. <template>
  2. <!-- <uni-popup ref="SelectMap" :isMaskClick='true' type="bottom" border-radius="10px 10px 0 0"
  3. maskBackgroundColor='rgba(0, 0, 0, 0.1)'>
  4. <view class="map-list">
  5. <view class="title">请选择问题分类</view>
  6. <view class="map-item" @click.stop="handlerFeedbackType(item.value)" v-for="item in list">
  7. {{item.label }}
  8. </view>
  9. <view class="map-item cancel" @click.stop="close()">
  10. 取消
  11. </view>
  12. </view>
  13. </uni-popup> -->
  14. <uni-popup class="picker-popup" ref="popupRef" type="bottom" border-radius="10px 10px 0 0">
  15. <div class="picker-content">
  16. <div class="city-picker-btn">
  17. <text @click.stop="close()">取消</text>
  18. <text @click.stop="confirm()">确定</text>
  19. </div>
  20. <picker-view indicator-class="indicator-class" :value="value||[]" class="picker-view" @change="bindChange">
  21. <picker-view-column>
  22. <view class="item" v-for="(item,index) in list" :key="index">{{item.label}}</view>
  23. </picker-view-column>
  24. </picker-view>
  25. </div>
  26. </uni-popup>
  27. </template>
  28. <script>
  29. export default {
  30. props: {
  31. list: {
  32. type: Array,
  33. default: () => []
  34. }
  35. },
  36. data() {
  37. return {
  38. value: undefined
  39. };
  40. },
  41. created() {
  42. },
  43. mounted() {
  44. // setTimeout(() => {
  45. // this.open()
  46. // }, 200)
  47. },
  48. methods: {
  49. open() {
  50. if (!this.value || this.value.length === 0) {
  51. this.value = [0]
  52. }
  53. this.$refs.popupRef.open()
  54. },
  55. close() {
  56. this.$refs.popupRef.close()
  57. },
  58. confirm() {
  59. if (this.value && this.value.length > 0) {
  60. const index = this.value[0];
  61. const value = this.list[index].value;
  62. this.$emit("chang", value)
  63. this.close()
  64. } else {
  65. uni.showToast({
  66. title: '请选择问题分类',
  67. icon: 'none'
  68. })
  69. }
  70. },
  71. bindChange(val) {
  72. const { value } = val.detail;
  73. this.value = value;
  74. },
  75. }
  76. }
  77. </script>
  78. <style lang="scss" scoped>
  79. .map-list {
  80. width: 100%;
  81. // height: 30vh;
  82. background-color: #fff;
  83. border-radius: 20rpx 20rpx 0 0;
  84. text-align: center;
  85. .title {
  86. width: 100%;
  87. text-align: center;
  88. padding: 30rpx 20rpx 50rpx 20rpx;
  89. font-size: 28rpx;
  90. }
  91. .map-item {
  92. width: 100%;
  93. padding: 30rpx 20rpx;
  94. }
  95. .cancel {
  96. padding: 50rpx 30rpx;
  97. color: #9f9f9f;
  98. }
  99. }
  100. </style>